/* One composition surface shared by sessions, quick start, and project pages. */
.composer.composer-refined,
#sComposer .composer.composer-refined,
#qc .composer.composer-refined {
  --composer-surface: #fff;
  --composer-border: #dde0e5;
  --composer-ink: #202125;
  --composer-muted: #747780;
  position: relative; inset: auto; z-index: auto;
  padding: 12px 20px 8px; gap: 8px;
  border: 0; background: transparent; box-shadow: none;
}
html[data-theme="dark"] .composer.composer-refined,
html[data-theme="dark"] #sComposer .composer.composer-refined,
html[data-theme="dark"] #qc .composer.composer-refined {
  --composer-surface: #292929;
  --composer-border: #363636;
  --composer-ink: #f5f5f5;
  --composer-muted: #aaa;
}
#qc .composer.composer-refined { padding: 0; }
.composer-refined .composer-panel {
  min-width: 0; width: 100%; padding: 16px 16px 10px;
  border: 1px solid var(--composer-border); border-radius: 24px;
  background: var(--composer-surface); color: var(--composer-ink);
  transition: border-color .15s, box-shadow .15s;
}
.composer-refined .composer-panel:focus-within { border-color: color-mix(in srgb, var(--composer-muted) 50%, var(--composer-border)); }
.composer-refined .composer-panel.is-dragging { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.composer.composer-refined textarea,
.composer.composer-refined textarea:focus {
  display: block; min-height: 76px; max-height: 280px; width: 100%;
  margin: 0; padding: 0 4px 14px; border: 0; border-radius: 0;
  background: transparent; color: var(--composer-ink); outline: none; box-shadow: none;
  font: inherit; font-size: 16px; line-height: 1.65; resize: none;
  scrollbar-width: thin; scroll-padding-block: 12px;
}
.composer-refined textarea::placeholder { color: var(--composer-muted); opacity: 1; }
.composer-toolbar, .composer-tools-left, .composer-tools-right { display: flex; align-items: center; min-width: 0; }
.composer-toolbar { justify-content: space-between; gap: 12px; }
.composer-tools-left { flex: none; gap: 2px; }
.composer-tools-right { justify-content: flex-end; gap: 12px; }
.composer-refined button { font: inherit; }
.composer-refined .composer-icon,
.composer-refined .composer-mode,
.composer-refined .composer-model,
.composer-refined .composer-pipeline {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 8px; border: 0; border-radius: 10px;
  background: transparent; color: var(--composer-ink); box-shadow: none; cursor: pointer;
}
.composer-refined .composer-icon { width: 44px; padding: 0; flex: none; }
.composer-refined .composer-icon svg { width: 22px; height: 22px; }
.composer-refined .composer-mode { min-width: 44px; gap: 5px; font-size: 12px; color: var(--composer-muted); white-space: nowrap; }
.composer-refined .composer-model { min-width: 0; gap: 6px; font-size: 14px; }
.composer-refined .composer-model-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-refined .composer-effort { flex: none; color: var(--composer-muted); font-size: 13px; }
.composer-refined .composer-mode svg,
.composer-refined .composer-model > svg,
.composer-refined .composer-pipeline svg { flex: none; width: 14px; height: 14px; color: var(--composer-muted); }
.composer-refined .composer-pipeline { font-size: 13px; gap: 6px; }
.composer-refined .composer-icon:hover,
.composer-refined .composer-mode:hover,
.composer-refined .composer-model:hover,
.composer-refined .composer-pipeline:hover { background: color-mix(in srgb, var(--composer-ink) 7%, transparent); }
.composer-refined .composer-send {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; min-height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: var(--composer-ink); color: var(--composer-surface);
  box-shadow: none; cursor: pointer; transition: opacity .15s, transform .15s;
}
.composer-refined .composer-send svg { width: 23px; height: 23px; }
.composer-refined .composer-send:hover:not(:disabled) { opacity: .82; }
.composer-refined .composer-send:active:not(:disabled) { transform: scale(.94); }
.composer-refined .composer-send:disabled { opacity: .3; cursor: default; }
.composer-refined .composer-send.is-stopping svg { width: 18px; height: 18px; }
.composer-refined button:focus-visible, .composer-refined a:focus-visible,
.composer-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.composer-refined .composer-attachments { display: flex; flex-wrap: wrap; gap: 12px; padding: 2px 4px 16px; }
.composer-refined .composer-attachment { position: relative; width: 88px; height: 88px; flex: none; }
.composer-refined .composer-attachment img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--composer-border); border-radius: 14px; }
.composer-refined .composer-remove { position: absolute; right: -7px; top: -7px; width: 32px; height: 32px; min-height: 32px; display: grid; place-items: center; padding: 0; border: 2px solid var(--composer-surface); border-radius: 50%; background: var(--composer-ink); color: var(--composer-surface); cursor: pointer; }
.composer-refined .composer-remove svg { width: 15px; height: 15px; }
.composer-refined .composer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; min-height: 16px; padding: 0 10px; font-size: 10px; color: var(--text-3); }
.composer-refined #cKeyHint { margin-left: auto; }
.composer-refined .composer-notice, .composer-refined .composer-feedback { display: flex; gap: 8px; padding: 2px 8px; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; color: var(--text-2); }
.composer-refined .composer-notice > svg { flex: none; width: 16px; height: 18px; }
.composer-refined .composer-notice a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.composer-refined .composer-feedback { color: var(--red); }
.composer-refined [hidden] { display: none !important; }
.composer-menu { padding: 2px; }
.composer-menu-heading { padding: 8px; font-size: 12px; font-weight: 650; color: var(--text); }
.composer-menu-heading span { display: block; margin-top: 4px; font-size: 11px; font-weight: 400; color: var(--text-3); }
.composer-menu-provider { padding: 0 8px 8px; font-size: 11px; color: var(--text-3); }
.composer-provider-options { display: flex; gap: 6px; padding: 0 6px 8px; }
.composer-provider-options button { flex: 1; min-height: 46px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 10px; text-align: left; }
.composer-provider-options button span { display: block; font-size: 10px; color: var(--text-3); }
.composer-model-options { max-height: min(280px, 35dvh); overflow: auto; overscroll-behavior: contain; border-block: 1px solid var(--line); padding-block: 4px; }
.composer-menu .popover-item { min-height: 48px; padding: 9px; }
.composer-menu .popover-item > span { flex: 1; min-width: 0; }
.composer-menu .popover-item b { font-size: 12px; font-weight: 600; }
.composer-menu .popover-item small { display: block; margin-top: 3px; font-size: 11px; line-height: 1.5; color: var(--text-3); white-space: normal; overflow-wrap: anywhere; }
.composer-menu .popover-item svg { flex: none; }
.composer-effort-options { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 8px 8px; }
.composer-effort-options button { flex: 1 0 auto; min-height: 38px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; font-size: 11px; }
.composer-menu [aria-pressed="true"] { background: var(--accent-tint); border-color: var(--accent); color: var(--text); }
.composer-spinner { width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: composer-spin .8s linear infinite; }
@keyframes composer-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  #sComposer .composer.composer-refined { padding: 8px 10px calc(6px + env(safe-area-inset-bottom)); }
  .composer-refined .composer-panel { border-radius: 20px; padding: 13px 10px 8px; }
  .composer.composer-refined textarea { min-height: 74px; padding-inline: 4px; font-size: 16px; }
  .composer-toolbar { gap: 4px; }
  .composer-tools-right { gap: 4px; flex: 1; }
  .composer-refined .composer-icon { width: 44px; }
  .composer-refined .composer-mode { padding-inline: 4px; font-size: 11px; gap: 2px; }
  .composer-refined .composer-model { padding-inline: 4px; gap: 4px; font-size: 12px; }
  .composer-refined .composer-effort { font-size: 11px; }
  .composer-refined .composer-send { width: 44px; height: 44px; min-height: 44px; }
  .composer-refined .composer-attachment { width: 76px; height: 76px; }
  .composer-refined .composer-attachments { gap: 14px; padding-bottom: 12px; }
  .composer-refined .composer-remove { width: 44px; height: 44px; min-height: 44px; }
  .composer-refined #cKeyHint { display: none; }
  .composer-refined .composer-bottom { min-height: 0; }
  .composer-effort-options button { min-height: 44px; }
}
@media (max-width: 360px) {
  .composer-refined .composer-mode { max-width: 48px; overflow: hidden; }
  .composer-refined .composer-mode svg { display: none; }
  .composer-refined .composer-effort { display: none; }
}
@media (prefers-reduced-motion: reduce) { .composer-refined *, .composer-spinner { transition: none; animation: none; } }
/* Title and context stay visible while infrequent actions use a quiet menu. */
.llm-head.session-head-refined { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 20px; }
.session-head-primary, .session-head-meta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.session-head-primary .title-input { flex: 1; min-width: 60px; width: 0; font-size: 15px; font-weight: 600; }
.session-head-primary .session-context { flex: none; background: transparent; border-color: transparent; color: var(--text-2); font-size: 11px; }
.session-head-meta { font-size: 11px; color: var(--text-3); }
.session-head-meta .co { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 60%; display: block; font-size: 11px; }
.session-provider { flex: none; }
.session-head-meta .usage-badge { margin-left: auto; flex: none; font-size: 10px; }
.session-actions { position: relative; flex: none; }
.session-actions summary { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; list-style: none; cursor: pointer; }
.session-actions summary::-webkit-details-marker { display: none; }
.session-actions summary::after { display: none !important; }
.session-actions summary svg { width: 20px; height: 20px; }
.session-actions summary:hover, .session-actions[open] summary { background: var(--bg-hover); }
.session-actions-menu { position: absolute; right: 0; top: calc(100% + 7px); z-index: 45; width: 220px; max-width: calc(100vw - 24px); padding: 6px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg-elev); box-shadow: var(--shadow-lg); }
.session-actions-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 10px; border-radius: 8px; text-align: left; font-size: 12px; }
.session-actions-menu button:hover { background: var(--bg-hover); }
.session-actions-menu button svg { width: 15px; height: 15px; }
.session-actions-menu button.danger { color: var(--red); border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }
@media (max-width: 640px) {
  .llm-head.session-head-refined { padding: 8px 12px; gap: 4px; }
  .session-head-primary { gap: 5px; }
  .session-head-primary .session-context { width: 44px; min-width: 44px; padding: 0; }
  .session-head-primary .session-context span { display: none; }
  .session-actions summary { width: 44px; height: 44px; }
  .session-actions-menu button { min-height: 44px; }
  .session-head-meta { gap: 7px; }
}
.llm-head.session-head-refined { flex-wrap: nowrap; flex: none; min-width: 0; }
.session-head-primary, .session-head-meta { width: 100%; }
.session-head-primary .title-input { order: 0; }
/* A session is a workspace: only the transcript scrolls at every breakpoint. */
.main:has(.llm-layout.has-session) { height: calc(100dvh - var(--drag-h, 0px)); overflow: hidden; }
.main:has(.llm-layout.has-session) .topbar { top: 0; flex: none; }
.page.llm-page:has(.llm-layout.has-session) { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.llm-layout.has-session { height: 100%; min-height: 0; overflow: hidden; }
.llm-layout.has-session .llm-main { height: 100%; min-height: 0; overflow: hidden; }
.llm-layout.has-session #chat { min-height: 60px; flex: 1 1 0; overflow-y: auto; overscroll-behavior: contain; }
.llm-layout.has-session #sComposer { flex: none; min-height: 0; max-height: 65%; overflow-y: auto; }
.llm-layout.has-session #sPreview { flex: none; max-height: 20%; overflow-y: auto; }
.llm-layout.has-session .sess-comments { flex: none; max-height: 25%; overflow-y: auto; }
.composer-refined .composer-attachments { flex-wrap: nowrap; overflow-x: auto; padding-top: 8px; padding-right: 10px; }
@media (max-width: 960px) {
  .llm-layout.has-session .llm-side { display: none; }
  .llm-layout.has-session { display: flex; flex-direction: column; }
  .llm-layout.has-session .llm-main { flex: 1; width: 100%; }
  .llm-layout.has-session .llm-head { position: relative; top: auto; }
  .llm-layout.has-session .sess-comments { margin: 0 10px 8px; }
  .llm-layout.has-session #sPreview { padding-inline: 10px !important; }
  .llm-layout.has-session #sPreview .preview-bar { margin-block: 2px; padding: 6px 8px; }
}
.llm-layout.has-session #sPreview .preview-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.llm-layout.has-session #sPreview .preview-bar .btn { width: auto; flex: 0 0 auto; margin-left: auto; }
@media (max-height: 600px) {
  .llm-layout.has-session .sess-comments { margin-block: 0 4px; }
  .llm-layout.has-session .sess-comments > summary { min-height: 34px; padding-block: 6px; font-size: 10px; }
  .llm-layout.has-session #sPreview .preview-bar { padding-block: 2px; margin-block: 0; }
  .llm-layout.has-session #sPreview .preview-bar .btn { min-height: 34px; padding-block: 3px; }
  #sComposer .composer.composer-refined { padding-block: 5px; }
  .composer.composer-refined textarea { min-height: 58px; }
  .composer-refined .composer-panel { padding-top: 10px; }
}
.llm-layout.has-session #sComposer { display: flex; flex-direction: column; flex: 0 1 auto; overflow: hidden; }
.llm-layout.has-session #sComposer .composer-refined { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.llm-layout.has-session #sComposer .composer-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.llm-layout.has-session #sComposer textarea { flex: 1 1 auto; }
.llm-layout.has-session #sComposer .composer-toolbar,
.llm-layout.has-session #sComposer .composer-attachments,
.llm-layout.has-session #sComposer .composer-bottom,
.llm-layout.has-session #sComposer .composer-feedback { flex: none; }

/* On touch devices the page must not scroll the header out of the keyboard's
   visible area. The transcript retains its own scroll; normal pages stay free. */
@media (max-width: 960px), (pointer: coarse) {
  html:has(.llm-layout.has-session),
  body:has(.llm-layout.has-session) { height: 100dvh; overflow: hidden; }
  .app:has(.llm-layout.has-session) { min-height: 0; }
  .main:has(.llm-layout.has-session) {
    position: fixed; inset-inline: 0;
    top: calc(var(--workspace-top, 0px) + var(--drag-h, 0px));
    height: calc(100dvh - var(--drag-h, 0px));
  }
  .llm-layout.has-session .llm-main {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #sComposer .composer.composer-refined { padding-bottom: 8px; }
  /* Use keyboard geometry rather than focus: a toolbar tap must not move its
     own target between pointer down and click. */
  .workspace-keyboard .main:has(.llm-layout.has-session) {
    height: calc(var(--workspace-height, 100dvh) - var(--drag-h, 0px));
  }
  .workspace-keyboard .llm-layout.has-session .llm-main > .sysline,
  .workspace-keyboard .llm-layout.has-session #sPreview,
  .workspace-keyboard .llm-layout.has-session .sess-comments { display: none; }
  .workspace-keyboard .llm-layout.has-session .llm-main { padding-bottom: 0; }
  .workspace-compact .llm-layout.has-session .llm-main { overflow-y: auto; overscroll-behavior: contain; }
  .workspace-compact .llm-layout.has-session #sComposer { flex: none; max-height: none; }
  .workspace-compact .llm-layout.has-session #sComposer .composer-refined { padding-block: 5px; }
  .workspace-compact .llm-layout.has-session #sComposer .composer-panel { padding-top: 10px; }
  .workspace-compact .llm-layout.has-session #sComposer textarea { height: 58px; min-height: 58px; max-height: 100px; }
}
@media (min-width: 961px) and (pointer: coarse) {
  .main:has(.llm-layout.has-session) { left: var(--sidebar-w); }
  .app.collapsed .main:has(.llm-layout.has-session) { left: var(--sidebar-w-collapsed); }
}

@media (display-mode: standalone) and (pointer: coarse) {
  html:has(.llm-layout.has-session), body:has(.llm-layout.has-session) { height: 100lvh; }
  html:not(.workspace-keyboard) .main:has(.llm-layout.has-session) { height: 100lvh; }
}

/* A landscape phone keyboard can leave under 160px. Keep navigation and the
   complete input tools available; restore session context when it closes. */
@media (orientation: landscape) and (pointer: coarse) {
  .workspace-keyboard.workspace-short .main:has(.llm-layout.has-session) .topbar { min-height: 44px; padding-block: 0; }
  .workspace-keyboard.workspace-short .llm-layout.has-session .llm-head,
  .workspace-keyboard.workspace-short .llm-layout.has-session #chat,
  .workspace-keyboard.workspace-short #sComposer .composer-bottom { display: none; }
  .workspace-keyboard.workspace-short #sComposer { margin-top: auto; }
  .workspace-keyboard.workspace-short #sComposer .composer.composer-refined { padding-block: 0; }
  .workspace-keyboard.workspace-short #sComposer .composer-panel { padding-block: 2px; }
  .workspace-keyboard.workspace-short .llm-layout.has-session #sComposer textarea { height: 26px; min-height: 26px; max-height: 26px; padding-bottom: 0; }
}