.chat-page {height:var(--chat-viewport-height,100dvh);display:flex;flex-direction:column;overflow:hidden}
.chat-page .top-nav-bar {flex-shrink:0}
.chat-page-bar {max-width:1240px;width:100%;margin:0 auto;padding:8px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}
.chat-breadcrumb {display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px;min-width:0;overflow-wrap:anywhere;color:var(--text-muted)}
.chat-breadcrumb a {color:var(--accent-hover)}
#chat-sidebar-toggle,#chat-sidebar-close {display:none}
.chat-layout.layout {width:100%;flex:1;min-height:0;display:grid;grid-template-columns:250px minmax(0,1fr);padding:8px 24px 16px;position:relative;align-items:stretch}
.chat-sidebar {width:auto;min-height:0;overflow:auto}
.chat-main {display:flex;flex-direction:column;min-height:0;gap:10px}
.chat-main > .input-section {margin:0;padding:14px 18px;flex-shrink:0}
.chat-main .chat-head {padding:10px 18px}
.chat-head .project-title-input {font-size:19px;margin:0;padding:4px 0}
.chat-settings {position:relative}
.chat-settings summary,.chat-context summary,.chat-cost-details summary {cursor:pointer;font-size:13px;color:var(--accent-hover)}
.chat-settings[open] {max-height:180px;overflow:auto}
.chat-model-row {margin-top:10px}
.chat-context {max-height:30dvh;overflow:auto}
.chat-context details + details {margin-top:8px}
.chat-context .hint {font-size:13px}
#chat-wordpress-posts {padding-left:20px}
#chat-wordpress-posts li {padding:5px 0;overflow-wrap:anywhere}
.chat-main > .chat-thread-section {flex:1;min-height:0;overflow:hidden;padding:12px 18px}
.chat-thread {height:100%;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain}
.chat-empty {padding:16px;max-width:480px;line-height:1.6}
.chat-main > .chat-composer {padding:12px 16px}
.chat-composer textarea {min-height:64px;height:70px;max-height:140px;resize:vertical}
.chat-quick-prompts {display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.chat-quick-prompts button {height:auto;padding:6px 10px;font-size:12px}
.chat-compose-bottom {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.chat-cost-details {position:relative}
.chat-cost-details[open] {position:absolute;bottom:100%;left:0;width:min(600px,calc(100vw - 40px));max-height:250px;overflow:auto;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:14px;box-shadow:var(--shadow-card);z-index:12}
.chat-compose-bottom {position:relative}
.chat-composer #chat-hint {margin:5px 0 0;font-size:12px}
.chat-post-card {border:1px solid var(--border);border-radius:8px;padding:12px;margin-top:10px}
.chat-post-card > summary {color:var(--text-strong);font-weight:600;overflow-wrap:anywhere}
.chat-post-card .input-actions {gap:6px;flex-wrap:wrap}
.chat-post-card button {font-size:12px;padding:7px 10px;height:auto}
.post-readable {line-height:1.65;overflow-wrap:anywhere;font-size:14px;white-space:normal;padding:12px 0}
.post-readable h1,.post-readable h2,.post-readable h3 {margin:12px 0 6px}
.post-readable h1 {font-size:21px}.post-readable p {margin:8px 0}
.post-readable pre {white-space:pre-wrap}.post-readable table {display:block;max-width:100%;overflow:auto}
.post-readable blockquote {border-left:3px solid var(--accent);padding-left:12px;margin-left:0}
.chat-post-change {border:1px solid var(--border);border-radius:8px;padding:10px;margin:10px 0;background:var(--panel)}
.chat-post-change h4 {margin:0 0 8px;font-size:13px;overflow-wrap:anywhere}
.chat-html-view {margin-top:12px}
.chat-diff {max-height:240px}
.chat-sidebar-shade {position:absolute;inset:0;background:rgba(15,23,42,.3);border:0;border-radius:0;width:100%;height:100%;z-index:28}
@media(max-width:800px) {
  .chat-page-bar {padding:7px 14px;min-height:38px}
  #chat-sidebar-toggle,#chat-sidebar-close {display:block;font-size:12px;padding:6px 10px;height:auto}
  .chat-layout.layout {grid-template-columns:minmax(0,1fr);padding:4px 10px 10px;gap:0}
  .chat-sidebar {display:none}
  .chat-layout[data-sidebar-open] .chat-sidebar {display:flex;position:absolute;top:0;bottom:10px;left:10px;width:min(300px,calc(100% - 40px));z-index:30}
  .chat-main {gap:6px}
  .chat-main > .input-section {padding:10px 12px}
  .chat-head .project-title-input {font-size:16px}
  .chat-context {max-height:25dvh}
  .chat-quick-prompts button {font-size:11px;padding:5px 7px}
  .chat-composer textarea {font-size:16px;height:68px;min-height:60px}
  .chat-message {max-width:100%}
  .chat-thread {max-height:none}
  .chat-main > .chat-composer {padding-bottom:max(10px,env(safe-area-inset-bottom))}
}

.chat-welcome {overflow:auto}
@media(max-height:600px) and (max-width:800px) {
  .chat-page .nav-links {display:none}
  .chat-quick-prompts {display:none}
  .chat-context {max-height:70px}
  .chat-composer textarea {height:60px;min-height:50px}
}

.chat-write-panel {flex:0 0 auto;max-height:20dvh;overflow:auto}
.chat-write-panel > .hint {margin:0 0 8px}
.chat-write-panel > button {font-size:12px;padding:7px 10px;height:auto}
.chat-write-panel details {margin-top:10px}
.wp-write-history-row {border-top:1px solid var(--border);padding:8px 0}
.wp-write-history-row p {font-size:12px;overflow-wrap:anywhere;margin:4px 0}
.wp-write-history-row button {height:auto;font-size:12px;margin:4px 4px 0 0;padding:6px 8px}
.wp-write-dialog {max-width:min(860px,calc(100vw - 24px));max-height:90dvh;overflow:auto}
.wp-write-selection {display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.wp-write-selection label {display:flex;gap:6px;align-items:center;overflow-wrap:anywhere}
.wp-write-selection input {width:auto}
.wp-write-dialog .modal-actions {position:sticky;bottom:0;background:var(--panel);padding:10px 0;flex-wrap:wrap}
@media(max-height:600px) and (max-width:800px) {.chat-write-panel {max-height:65px}}