.chat-panel[hidden],.creation-grid[hidden]{display:none!important}.chat-panel{display:flex;flex-direction:column;max-width:1080px;width:100%;margin:0 auto;min-height:calc(100dvh - 155px);padding:22px 28px 18px;gap:16px}.chat-heading{display:flex;justify-content:space-between;align-items:start;gap:16px}.chat-heading h1{font-size:25px;margin:0 0 7px;letter-spacing:-.6px}.chat-heading p,.chat-context{color:var(--muted,#70747f);font-size:13px;margin:0;line-height:1.6}.chat-actions{display:flex;gap:8px;flex-shrink:0}.chat-scroll{height:clamp(260px,52dvh,680px);overflow-y:auto;overscroll-behavior:contain;padding:14px 6px;scrollbar-gutter:stable}.chat-empty{min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;color:var(--muted,#70747f)}.chat-empty[hidden]{display:none}.chat-empty img{height:64px;width:64px;border-radius:18px}.chat-empty h2{font-size:21px;color:var(--text,#222);margin:0}.chat-empty p{margin:0;max-width:430px;line-height:1.7}.chat-messages{display:flex;flex-direction:column;gap:20px}.chat-message{max-width:94%;padding:14px 18px;border-radius:16px;background:var(--surface,#fff);border:1px solid var(--line,#ececf0)}.chat-user{align-self:flex-end;background:#f1f0fa}.chat-assistant{align-self:stretch}.chat-message h3{font-size:12px;color:#6b647f;margin:0 0 9px}.chat-message p{font-size:15px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;user-select:text}.chat-message small{display:block;margin-top:9px;font-size:11px;color:var(--muted,#70747f)}.chat-form{background:var(--surface,#fff);border:1px solid var(--line,#dedee8);border-radius:18px;padding:14px;box-shadow:0 7px 24px #24203f08}.chat-form textarea{display:block;width:100%;resize:vertical;min-height:92px;max-height:270px;border:0;background:transparent;color:inherit;font:inherit;line-height:1.7;outline-offset:4px}.chat-toolbar{display:flex;gap:12px;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted,#70747f)}.chat-toolbar>div{display:flex;gap:8px;align-items:center}.chat-panel button{min-height:38px}.chat-status{min-height:22px;font-size:13px;color:#6b5366;line-height:1.7;margin:0}.chat-access{font-size:13px;color:var(--muted,#70747f);margin:0}.chat-send{border-radius:10px;padding:9px 22px}.chat-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.chat-price{font-size:12px;color:var(--muted,#70747f)}@media(max-width:760px){.chat-panel{padding:18px 12px;min-height:calc(100dvh - 130px)}.chat-heading{flex-wrap:wrap}.chat-actions{width:100%;justify-content:flex-end}.chat-scroll{height:48dvh;min-height:230px}.chat-message{max-width:100%;padding:12px 14px}.chat-toolbar{align-items:flex-end}.chat-toolbar>span{max-width:150px;line-height:1.6}.chat-heading h1{font-size:22px}}

/* Follow the Studio foreground/background pair in dark and light themes. */
.chat-panel {
  --chat-ink: var(--ink, #f5fbff);
  --chat-bg: var(--bg, #0f0f12);
  --chat-surface: color-mix(in srgb, var(--chat-bg) 94%, var(--chat-ink) 6%);
  --chat-user: color-mix(in srgb, var(--chat-bg) 88%, var(--chat-ink) 12%);
  --chat-muted: color-mix(in srgb, var(--chat-ink) 72%, var(--chat-bg) 28%);
  --chat-border: color-mix(in srgb, var(--chat-ink) 28%, var(--chat-bg) 72%);
  color: var(--chat-ink);
}
.chat-message, .chat-form {
  color: var(--chat-ink);
  background: var(--chat-surface);
  border-color: var(--chat-border);
}
.chat-user { background: var(--chat-user); }
.chat-empty h2, .chat-status { color: var(--chat-ink); }
.chat-heading p, .chat-context, .chat-empty, .chat-message h3,
.chat-message small, .chat-toolbar, .chat-access, .chat-price {
  color: var(--chat-muted);
}
.chat-form textarea { color: var(--chat-ink); caret-color: var(--chat-ink); }
.chat-form textarea::placeholder { color: var(--chat-muted); opacity: 1; }
.chat-panel .quiet {
  color: var(--chat-ink);
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  border-radius: 9px;
  min-height: 40px;
  padding: 8px 13px;
}
.chat-panel .quiet:hover:not(:disabled) { background: var(--chat-user); }
.chat-panel .chat-send { background: var(--chat-ink); color: var(--chat-bg); }
.chat-panel .chat-send:hover:not(:disabled) {
  background: color-mix(in srgb, var(--chat-ink) 88%, var(--chat-bg) 12%);
}
.chat-panel .chat-send:disabled { background: var(--chat-user); color: var(--chat-muted); opacity: .65; }

/* Use Studio's central stage and fixed-width bottom composer for chat too. */
.chat-panel { position: relative; flex: 1 1 auto; max-width: none; width: 100%; min-width: 0; min-height: 0; padding: 0; gap: 0; }
.chat-heading { flex: 0 0 auto; align-items: center; padding: 0 28px 8px; }
.chat-heading h1 { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: 0; color: #aab2bf; }
.chat-heading p { display: none; }
.chat-panel .chat-actions .quiet { min-height: 32px; padding: 6px 10px; border: 0; background: transparent; font-size: 11px; }
.chat-note { flex: 0 0 auto; padding: 0 28px; }
.chat-scroll { flex: 1 1 auto; width: 100%; height: auto; min-height: 0; padding: 16px 75.6px 24px; }
.chat-messages { max-width: 1176px; margin: 0 auto; gap: 18px; }
.chat-empty { height: 100%; min-height: 0; }
.chat-empty h2 { font-size: 18px; }
.chat-empty p { font-size: 13px; }
.chat-message { border: 0; }
.chat-assistant { padding-inline: 0; background: transparent; }
.chat-message p { font-size: 14px; }
.chat-form { position: relative; display: flex; flex-direction: column; flex: 0 0 auto; width: min(1176px,calc(100% - 151.2px)); min-height: 189px; margin: 0 auto 21px; padding: 16px 14px 10px; border: 1px solid #21232a; border-radius: 20px; background: #1b1c21; box-shadow: none; }
.chat-form textarea { flex: 1 1 auto; height: 90px; min-height: 90px; max-height: 90px; padding: 0; resize: none; font-size: 13px; line-height: 1.65; overflow-y: auto; overscroll-behavior: contain; }
.chat-toolbar { margin-top: auto; padding-top: 12px; min-width: 0; font-size: 10px; }
.chat-toolbar > div { min-width: 0; }
.chat-form .chat-price { top: auto; bottom: calc(100% - 14px); border-radius: 18px; color: #a58d55; font-size: 11px; }
.chat-panel .chat-send { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; background: var(--cyan); color: #fff; font-size: 0; }
.chat-send::before { content: '↑'; font-size: 23px; line-height: 1; font-weight: 600; }
.chat-panel .chat-send:hover:not(:disabled) { background: #29d9e9; }
.chat-panel .chat-send:disabled { background: var(--cyan); color: #fff; opacity: .45; }
.chat-status { flex: 0 0 auto; align-self: center; width: min(1176px,calc(100% - 151.2px)); min-height: 0; max-height: 65px; overflow: auto; margin: 0 0 16px; font-size: 11px; }
.chat-status:empty { display: none; }
#chat-ack { align-self: center; margin: 0 12px 16px; }
.chat-context-details { position: static; color: #929aa7; font-size: 11px; }
.chat-context-details summary { padding: 6px 0; cursor: pointer; }
.chat-context-details[open] .chat-context { position: absolute; z-index: 5; bottom: calc(100% - 8px); left: 14px; right: 14px; width: auto; max-height: min(260px,35dvh); overflow-y: auto; padding: 14px 16px; margin: 0; border: 1px solid #343944; border-radius: 12px; background: #23262e; color: #c1c8d3; box-shadow: 0 8px 28px #0004; }
@media (max-width: 760px) {
  .chat-panel { min-height: 0; padding: 0; }
  .chat-heading { padding: 0 14px 6px; flex-wrap: nowrap; }
  .chat-heading h1 { font-size: 12px; }
  .chat-actions { width: auto; }
  .chat-note { padding: 0 14px; }
  .chat-scroll { min-height: 0; height: auto; padding: 12px 16px 24px; }
  .chat-empty img { height: 56px; width: 56px; }
  .chat-form { width: calc(100% - 16px); min-height: 225px; margin-bottom: 9px; padding: 22px 14px 13px; border-radius: 18px; }
  .chat-form .chat-price { font-size: 9px; }
  .chat-toolbar { flex-wrap: wrap; gap: 8px; }
  .chat-toolbar > div { margin-left: auto; }
  .chat-toolbar > span { display: none; }
  .chat-status { width: calc(100% - 28px); }
}
@media (max-height: 500px) {
  .workspace:has(.chat-panel:not([hidden])) { overflow-y: auto; }
  .chat-panel { flex: 0 0 auto; min-height: calc(100dvh - 90px); }
  .chat-scroll { flex: 0 0 auto; height: 240px; }
}

.chat-files{display:flex;flex-wrap:wrap;gap:.5rem}.chat-file-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.35rem .6rem;border:1px solid var(--line,#d8d4ce);border-radius:8px;font-size:.8rem;max-width:100%;overflow-wrap:anywhere}.chat-file-help{font-size:.76rem;color:var(--muted,#69675f);margin:.5rem 0}.chat-file-chip .quiet{padding:.2rem .35rem}

@media(max-width:760px){.chat-toolbar>span:has(#chat-add-file){display:inline-flex;}}