/* Measurements from the reference controls at the same desktop viewport. */
.workspace, .modal.refcp, .refep, .modal.reference-utility-panel, .manual-drawer.reference-manual-drawer { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "HarmonyOS Sans", "Microsoft YaHei", sans-serif; }
#modal-backdrop { z-index: 200; background: #0009; backdrop-filter: blur(0.4539rem); }
#modal-backdrop.support-backdrop { background: #0000008c; backdrop-filter: blur(.25rem); }
.modal, .manual-drawer { z-index: 220 !important; }
.refep-floating { z-index: 230; }
.refprefs-language-menu { z-index: 230; }
.refprefs-status { z-index: 240; }
.current-model { text-decoration: none; }
body.media-mode .quick-actions { display: none; }
/* The reference chat uses the centered model pill as its only visible
   model/API entry. Keep the legacy composer link in the DOM for the
   model-sync contract, but do not render a duplicate row in chat. */
body:not(.media-mode) #api-model-link { display: none; }
/* The current reference desktop keeps these actions in the top-right action
   group; the legacy bottom duplicate remains in the DOM for compatibility but
   must not occupy visual space in chat mode. */
@media (min-width:841px) {
  body:not(.media-mode) .quick-actions { display: none; }
}
.tool-chip { display: inline-flex; align-items: center; justify-content: center; gap: 0.3404rem; flex: 0 0 auto; height: 1.8746rem; min-width: 5.465rem; padding: 0 0.6241rem; border-radius: 0.3972rem; border: 1px solid transparent; background: linear-gradient(#292b33,#292b33) padding-box, linear-gradient(115deg,#06adc46b,#8a62db85) border-box; color: #e2e3ed; font-size: 0.7565rem; font-weight: 500; line-height: 1; }
.tool-chip.active { color: #e2e3ed; border-color: transparent; }
.tool-chip.best { min-width: 6.2468rem; color: #e2e3ed; }
.tool-chip .control-icon { width: 0.7376rem; height: 0.7376rem; stroke-width: 3.6923; }
#advanced-settings .control-icon { color: #10c5e3; }
#long-memory .control-icon { color: #bd8ced; }
#skills .control-icon { color: #32c8b8; }
.routing-star { width: 0.6809rem; height: 0.6809rem; color: #ab47bc; }
.tool-chevron { width: 0.5674rem; height: 0.5674rem; color: #20c6e1; }
.composer-tools { gap: 0.4539rem; }
.send-button { display: grid; place-items: center; flex: 0 0 1.8746rem; width: 1.8746rem; height: 1.8746rem; color: #fff; background: #00cae0; padding: 0.4539rem; }
.send-button svg { width: 0.9078rem; height: 0.9078rem; }
.attachment { flex-basis: 3.461rem; width: 3.461rem; height: 4.3688rem; border-style: solid; border-color: #56556344; border-radius: 0.2837rem; background: #2c2b344f; transform: rotate(-8deg); font-weight: 400; color: #a3a2af; }
.attachment small { font-size: 0.6241rem; }
.composer-main :is(#prompt,.refmedia-rich-input) { font-size: 0.8738rem; line-height: 1.7; color: #e3e3ed; }
.asset-text { display: grid; place-items: center; background: transparent; padding: 0.227rem; }
.asset-text .control-icon { width: 0.7943rem; height: 0.7943rem; }
.composer-rail { padding: 0.3404rem; border-radius: 1.3617rem; background: #15151c; border: 1px solid #383841; gap: 0.3404rem; }
.composer-rail button { display: grid; place-items: center; padding: 0; width: 1.8746rem !important; height: 1.8746rem !important; background: #ffffff0d; color: #aaaaba; border-color: #ffffff0d; }
.composer-rail .control-icon { width: 0.7943rem; height: 0.7943rem; }
.composer-rail #manual .control-icon { width: 0.6241rem; height: 0.6241rem; }
.composer-rail #enter-mode { color: #19c9de; }
.asset-library-open { position: absolute; left: -2.7801rem; bottom: 0.3404rem; z-index: 3; display: grid; place-items: center; width: 1.8746rem; height: 1.8746rem; border: 1px solid #ffffff13; border-radius: 50%; background: #ffffff0d; color: #b8b8c8; }
.asset-library-open .control-icon { width: 0.7376rem; height: 0.7376rem; }
.asset-library-dock { display: contents; }
.modal.asset-library-modal { display: flex; flex-direction: column; width: min(44rem,calc(100vw - 1.8156rem)); height: min(33.1348rem,calc(100dvh - 1.8156rem)); padding: 1.2482rem; border-radius: 0.7943rem; background: #1b1c21; }
.asset-library-modal h2 { font-size: 1.061rem; }
.asset-library-modal .asset-library-toolbar { display: flex; gap: 0.6809rem; flex: none; }
.asset-library-toolbar #asset-search { flex: 1; min-width: 0; font-size: 0.7489rem; }
#asset-library-upload { flex: none; padding: 0.4539rem 0.7376rem; border-radius: 0.3972rem; background: #1cbfd4; color: #fff; font-size: 0.7489rem; }
.asset-library-tabs { display: flex; flex: none; gap: 0.3972rem; padding: 0.8511rem 0 0.6809rem; overflow-x: auto; }
.asset-library-tabs button { padding: 0.3972rem 0.8511rem; border-radius: 0.3972rem; background: #292a32; color: #a4a4b1; font-size: 0.7489rem; white-space: nowrap; }
.asset-library-tabs button.active { background: #12535e; color: #25d0e5; }
.asset-library-modal .asset-library-info { margin: 0 0 0.7376rem; padding: 0.5674rem 0.7376rem; border: 1px solid #06aec629; border-radius: 0.3972rem; background: #0b3e493d; color: #93c0cc; font-size: 0.6979rem; }
.asset-library-modal .asset-library-list { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
.asset-library-modal .empty-state { display: flex; height: 100%; flex-direction: column; justify-content: center; align-items: center; gap: 0.6809rem; font-size: 0.7943rem; }
.asset-empty-glyph { font-size: 2.156rem; }
.asset-library-modal .empty-state small { font-size: 0.6979rem; color: #9292a2; }
.asset-library-footer { display: flex; flex: none; justify-content: space-between; align-items: center; padding-top: 0.9078rem; margin-top: 0.6809rem; border-top: 1px solid #373841; font-size: 0.7489rem; color: #a3a3b2; }
.asset-library-footer div { display: flex; gap: 0.5106rem; }
.asset-library-footer button { padding: 0.4539rem 1.0213rem; border-radius: 0.3972rem; background: #2a2b33; color: #c1c1ce; }
#asset-library-confirm { background: #00bdd3; color: #fff; }
.asset-library-item.selected { border-color: #00bdd3; }
.guide-button .control-icon { width: 0.9078rem; height: 0.9078rem; stroke-width: 2.25; }
.round-action .control-icon { width: 1.2482rem; height: 1.2482rem; }
.round-action .grid-icon { fill: currentColor; stroke: none; transition: transform .25s; }
.round-action:hover .grid-icon { transform: rotate(90deg); }
#top-membership-action { display: flex; align-items: center; justify-content: center; gap: 0.5674rem; overflow: hidden; transition: width .22s ease, background .22s; }
#top-membership-action .gem-action-icon { flex: none; }
.agent-action-label { display: none; font-size: 0.7943rem; white-space: nowrap; color: #5eead4; }
.video-action { color: #ed65b9; box-shadow: 0 0 0.9645rem #d946a82b; }
.video-action i { top: -0.1702rem; right: -0.2837rem; padding: 0.1702rem 0.2837rem; background: linear-gradient(135deg,#c95ac8,#ef82ac); font-size: 0.4539rem; }
.modal.editor-modal { display: flex; flex-direction: column; width: calc(100vw - 4rem); height: min(92dvh,51.0638rem); max-height: 92vh; padding: 1.1348rem 1.3617rem; border-radius: 1.25rem; background: #16171e; color: #e2e2ec; }
#prompt-editor-modal { padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: rgba(28,30,34,.92); }
#prompt-editor-modal .modal-head { flex: none; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0; padding: 1rem 1.125rem .875rem; border-bottom: 1px solid rgba(255,255,255,.08); }
#prompt-editor-modal .modal-head > div { min-width: 0; }
#prompt-editor-modal .modal-head h2 { margin: 0; color: #f5fbff; font-size: 1rem; font-weight: 650; line-height: 1.4; }
#prompt-editor-modal .modal-head p { max-width: none; margin: .25rem 0 0; color: #60696e; font-size: .75rem; line-height: 1.5; }
#prompt-editor-modal #prompt-editor-close { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.7); }
#prompt-editor-modal #prompt-editor-close svg { width: 18px; height: 18px; flex: none; }
#prompt-editor-modal #prompt-editor-text { flex: 1; min-width: 0; min-height: 0; width: 100%; height: auto; resize: none; padding: 1.125rem; border: 0; border-radius: 0; outline: none; background: transparent; font-family: system-ui; color: rgba(245,251,255,.9); font-size: .9375rem; line-height: 1.7; }
#prompt-editor-modal #prompt-editor-text::placeholder { color: #60696e; }
#prompt-editor-modal .editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex: none; padding: .875rem 1.125rem 1rem; border-top: 1px solid rgba(255,255,255,.08); }
#prompt-editor-modal #prompt-editor-count { color: #60696e; font-size: .75rem; line-height: 1.5; }
#prompt-editor-modal .editor-actions { display: flex; align-items: center; justify-content: flex-end; }
#prompt-editor-modal #prompt-editor-clear { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; height: 2.25rem; padding: 0 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.05); color: #8c99a0; font-family: Arial, sans-serif; font-size: .875rem; font-weight: 600; }
#prompt-editor-modal #prompt-editor-clear svg { width: 14px; height: 14px; flex: none; }
body:has(#prompt-editor-modal:not([hidden])) #modal-backdrop { backdrop-filter: blur(1rem); background: rgba(4,7,18,.72); }
@media (min-width:841px) {
  body:not(.media-mode) .composer-main { gap: 2.0993rem; }
  #top-membership-action:hover { width: 9.1348rem; }
  #top-membership-action:hover .agent-action-label { display: inline; }
  .workspace-topbar .new-chat { width: 8.7376rem; height: 2.2496rem; padding: 0 0.9078rem; font-size: 0.8125rem; font-weight: 700; background: linear-gradient(135deg,#ffe066,#ffc53d 48%,#f0932b); }
  .quick-actions button { font-size: 0.7489rem; }
}
@media (max-width:840px) {
  .asset-library-open { left: 0.5674rem; bottom: 3.0071rem; }
  .composer-tools { max-width: calc(100% - 2.4397rem); overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding: 0.1135rem 0 0.3404rem; }
  body:not(.media-mode) .tool-chip { min-width: 5.465rem; padding-inline: 0.5674rem; font-size: 0.7565rem; }
  .composer-main :is(#prompt,.refmedia-rich-input) { font-size: 0.8113rem; }
  .composer-rail { padding: 0.227rem; border-radius: 1.3617rem; gap: 0.2837rem; }
  .modal.editor-modal { width: calc(100vw - 1.5rem); height: 92vh; padding: 0.9078rem; border-radius: 1rem; }
  #prompt-editor-modal .editor-footer { flex-direction: column; }
  #prompt-editor-modal #prompt-editor-count, #prompt-editor-modal .editor-actions, #prompt-editor-modal #prompt-editor-clear { width: 100%; }
}

/* Item 7: measured desktop/tablet chat heading, independent of the media tray. */
@media (min-width:451px) {
  body:not(.media-mode) #hero {
    position: absolute;
    top: 5rem;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.125rem;
    width: 37.5rem;
    max-width: calc(100% - 2.5rem);
    min-height: 0;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
  }
  body:not(.media-mode) #model-hero-icon {
    position: static;
    flex: none;
    width: 128px;
    height: 128px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  body:not(.media-mode) #model-hero-icon img {
    display: block;
    width: 128px;
    height: 128px;
    object-fit: contain;
  }
  body:not(.media-mode) #hero-notice {
    width: 37.5rem;
    max-width: 100%;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(0,202,224,.3);
    border-radius: .75rem;
    background: rgba(27,28,33,.95);
    color: rgba(255,255,255,.95);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.8;
    box-shadow: 0 .25rem 1rem #0000004d;
    transform: none;
  }
  body:not(.media-mode) #current-model {
    position: absolute;
    top: .875rem;
    left: 50%;
    width: max-content;
    max-width: calc(100% - 2.5rem);
    min-height: 0;
    padding: .3rem .85rem .3rem .4rem;
    border: 1px solid #ffffff14;
    border-radius: 999px;
    background: rgba(27,28,33,.95);
    transform: translateX(-50%);
  }
}

/* Item 7: compact chat heading measured at 390px. */
@media (max-width:450px) {
  body:not(.media-mode) #hero {
    position: absolute;
    top: 5rem;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    width: min(37.5rem,calc(100% - 2.5rem));
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
  }
  body:not(.media-mode) #model-hero-icon {
    position: static;
    flex: none;
    width: 5rem;
    height: 5rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  body:not(.media-mode) #model-hero-icon img {
    display: block;
    width: 5rem;
    height: 5rem;
    object-fit: contain;
  }
  body:not(.media-mode) #hero-notice {
    width: 100%;
    max-width: 100%;
    padding: .75rem .875rem;
    border: 1px solid rgba(0,202,224,.3);
    border-radius: .75rem;
    background: rgba(27,28,33,.95);
    color: rgba(255,255,255,.95);
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.7;
    box-shadow: 0 .25rem 1rem #0000004d;
    transform: none;
  }
  body:not(.media-mode) #current-model {
    position: absolute;
    top: .875rem;
    left: 50%;
    width: max-content;
    max-width: calc(100% - 2.5rem);
    min-height: 0;
    padding: .3rem .85rem .3rem .4rem;
    border: 1px solid #ffffff14;
    border-radius: 999px;
    background: rgba(27,28,33,.95);
    transform: translateX(-50%);
  }
}
@media (max-width:450px) {
  body:not(.media-mode) #hero { top: 3.25rem; width: calc(100% - 2.5rem); }
  body:not(.media-mode) #current-model { display: none; }
}
/* Item 7: reference chat input; keep the real upload and island controllers. */
body:not(.media-mode) .composer { border: 1px solid #1e1f25; border-radius: 1.125rem; background: rgba(27,28,33,.95); box-shadow: none; }
body:not(.media-mode) .composer-main { position: relative; align-items: flex-start; gap: 1.5625rem; padding: .9375rem 2.5rem 0 1.5625rem; }
body:not(.media-mode) #attachment { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 3.4375rem; width: 3.4375rem; height: 4.375rem; margin: .625rem 0 0; padding: 0; gap: .25rem; border: 1px dashed rgba(98,105,113,.6); border-radius: .1875rem; background: #2d2f35; color: #626971; transform: rotate(-8deg); transition: transform .2s, border-color .2s, background .2s; }
body:not(.media-mode) #attachment:hover { border-color: #00cae0; background: #333840; transform: rotate(0deg); }
body:not(.media-mode) #attachment .attachment-plus { font-size: 1.75rem; line-height: 1; }
body:not(.media-mode) #attachment .attachment-label { font-size: .6875rem; line-height: 1; }
body:not(.media-mode) #attachment .attachment-count { font-size: .5625rem; line-height: 1; }
body:not(.media-mode) :is(#prompt,.refmedia-rich-input) { flex: 1; min-width: 0; height: 5.3125rem; min-height: 0; padding: 0; resize: none; font-size: .875rem; line-height: 1.5; }
body:not(.media-mode) #asset-text { position: absolute; right: .625rem; top: .9375rem; width: 1.5rem; height: 1.5rem; padding: 0; border: 1px solid #ffffff26; border-radius: .3125rem; background: #1c1e22e0; color: #f5fbff; }
body:not(.media-mode) #asset-text .control-icon { width: 13px; height: 13px; stroke-width: 3.23; }
body:not(.media-mode) #billing-info { top: -1rem; bottom: auto; right: .75rem; display: flex; align-items: center; height: auto; gap: .375rem; padding: .25rem .625rem; border: 1px solid #1e1f25; border-radius: .75rem; background: rgba(27,28,33,.95); box-shadow: 0 .125rem .5rem #0000004d; font-size: .75rem; font-weight: 400; line-height: 1; color: rgba(156,163,175,.6); }
body:not(.media-mode) #billing-info .billing-icon { flex: none; width: 16px; height: 16px; color: rgba(156,163,175,.55); }
body:not(.media-mode) #billing-info { max-width: calc(100% - 1.5rem); box-sizing: border-box; }
body:not(.media-mode) #billing-info .billing-type { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body:not(.media-mode) #billing-info:hover .billing-icon { color: #00cae0; }
body:not(.media-mode) .composer-footer { position: absolute; right: 0; bottom: 0; left: 0; height: 3rem; margin: 0; padding: .5625rem .9375rem .75rem; border: 0; align-items: center; gap: .625rem; }
body:not(.media-mode) .composer-tools { flex: 1; width: auto; max-width: none; gap: .75rem; padding: 0; min-width: 0; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: none; }
body:not(.media-mode) .tool-chip { flex: 0 0 auto; white-space: nowrap; }
body:not(.media-mode) .tool-chip { height: 1.875rem; min-width: 0; padding: 0 .625rem; gap: .375rem; font-family: Arial,sans-serif; font-size: 13.3333px; font-weight: 400; color: #f5fbff; border-radius: .375rem; background: linear-gradient(#292b33,#292b33) padding-box,linear-gradient(135deg,#06b6d4a6,#8b5cf6a6) border-box; }
body:not(.media-mode) .tool-chip.best { min-width: 0; border: 0; background: #292b33; }
body:not(.media-mode) #skills { background: linear-gradient(#292b33,#292b33) padding-box,linear-gradient(135deg,rgba(99,102,241,.6),rgba(168,85,247,.5)) border-box; }
body:not(.media-mode) #skills .control-icon { color: #a78bfa; }
body:not(.media-mode) #long-memory { background: linear-gradient(#292b33,#292b33) padding-box,linear-gradient(135deg,rgba(139,92,246,.6),rgba(167,139,250,.5)) border-box; }
body:not(.media-mode) .tool-chip .control-icon { width: 13px; height: 13px; }
body:not(.media-mode) .routing-star { width: 12px; height: 12px; }
body:not(.media-mode) .tool-chevron { width: 10px; height: 10px; }
body:not(.media-mode) #ai-prompt-helper { display: none; }
body:not(.media-mode) #send-button { width: 1.875rem; height: 1.875rem; flex: 0 0 1.875rem; }
body:not(.media-mode) .composer-rail { padding: .375rem; gap: .5rem; border-radius: 1.5rem; }
body:not(.media-mode) .composer-rail button { width: 1.875rem !important; height: 1.875rem !important; }
@media (min-width:451px) {
  body:not(.media-mode) .composer-main { padding-right: 2.625rem; }
  body:not(.media-mode) :is(#prompt,.refmedia-rich-input) { height: 93px; min-height: 5.25rem; }
  html:not([data-display-theme="light"]) body:not(.media-mode) :is(#prompt,.refmedia-rich-input) { color: rgba(245,251,255,.88); }
  body:not(.media-mode) .chat-workspace { position: absolute; left: 50%; width: min(70rem,calc(100% - 9rem)); bottom: 1.25rem; margin: 0; padding: 0; transform: translateX(-50%); }
  body:not(.media-mode) .composer { display: grid; height: 11.25rem; min-height: 11.25rem; padding: 0; grid-template-rows: 8.125rem 3rem; }
  body:not(.media-mode) .composer-rail,
  body:not(.media-mode) .asset-library-dock { position: absolute; top: auto; bottom: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: .5rem; border: 1px solid #1e1f25; border-radius: 999px; background: rgba(27,28,33,.95); backdrop-filter: blur(.625rem); box-shadow: 0 .5rem 1.25rem #0000002e; transform: none; }
  body:not(.media-mode) .composer-rail { left: calc(100% + .625rem); right: auto; }
  body:not(.media-mode) .asset-library-dock { left: auto; right: calc(100% + .625rem); }
  body:not(.media-mode) .asset-library-open { position: static; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: #1c1e22; border-color: #ffffff33; color: #fff; transform: none; }
  body:not(.media-mode) .asset-library-open:hover { border-color: #00cae0; }
  body:not(.media-mode) .composer-rail #manual { display: grid; }
  body:not(.media-mode) #send-button { position: static; }
}
@media (max-width:450px) {
  body:not(.media-mode) .chat-workspace { left: .5rem; width: calc(100% - 1rem); bottom: .625rem; }
  body:not(.media-mode) .composer { padding: 0; height: 13.617rem; min-height: 13.617rem; border-radius: .875rem; grid-template-rows: minmax(0,7.5rem) 6rem; }
  body:not(.media-mode) .composer-main { gap: 1.5625rem; }
  body:not(.media-mode) :is(#prompt,.refmedia-rich-input) { font-size: .8125rem; height: 5.3125rem; }
  body:not(.media-mode) .composer-footer { height: 6rem; display: flex; align-items: flex-start; padding: .5625rem .9375rem .75rem; }
  body:not(.media-mode) .composer-tools { width: 100%; padding-bottom: .5625rem; overflow-x: auto; }
  body:not(.media-mode) .composer-rail { top: auto; left: auto; right: calc(1rem + 2.5rem); bottom: .80675rem; padding: 0; border: 0; background: transparent; gap: .625rem; }
  body:not(.media-mode) .composer-rail #manual { display: none; }
  body:not(.media-mode) #send-button { position: absolute; right: calc(.9375rem + 1px); bottom: calc(.80675rem - 1px); }
  body:not(.media-mode) .asset-library-open { left: 4.306rem; top: .994rem; bottom: auto; width: 1.375rem; height: 1.375rem; padding: 0; transform: rotate(-8deg); border-radius: .3125rem; }
  body:not(.media-mode) .asset-library-open .control-icon { width: 11px; height: 11px; stroke-width: 3.8182; }
}
/* Only exact reviewed chat members opt into this desktop input-sizing state.
   Native auto rows preserve separate used-value rounding of both paddings,
   the footer and the existing two 1px borders. */
@media (min-width:841px) {
  body:not(.media-mode) #composer[data-chat-prompt-sizing="reviewed-desktop"] { height: auto; min-height: var(--chat-shell-min-height); grid-template-rows: auto var(--chat-footer-height); }
  body:not(.media-mode) #composer[data-chat-prompt-sizing="reviewed-desktop"] .composer-main { min-height: 0; padding-top: var(--chat-section-padding); padding-bottom: var(--chat-section-padding); }
  body:not(.media-mode) #composer[data-chat-prompt-sizing="reviewed-desktop"] :is(#prompt,.refmedia-rich-input) { height: var(--chat-prompt-height); min-height: var(--chat-prompt-min-height); max-height: var(--chat-prompt-max-height); overflow-y: auto; }
  body:not(.media-mode) #composer[data-chat-prompt-sizing="reviewed-desktop"] .composer-footer { height: var(--chat-footer-height); }
}
/* Exact150 shell inheritance was measured separately from four-member sizing. */
@media (min-width:841px) {
  body:not(.media-mode) #composer[data-chat-attachment-layout="reviewed-150-desktop"] { color: #fff; line-height: 1.5rem; }
}
/* Accurate150, actually compared at390px. Keep the unreviewed chat members
   and attachment variants outside this narrow sizing-only configuration. */
@media (max-width:450px) {
  body:not(.media-mode) #composer[data-chat-prompt-sizing="reviewed-150-phone"] { display: flex; flex-direction: column; height: auto; min-height: var(--chat-shell-min-height); color: #fff; line-height: 1.5rem; }
  body:not(.media-mode) #composer[data-chat-prompt-sizing="reviewed-150-phone"] .composer-main { flex: 1; min-height: 0; padding-right: 2.625rem; padding-bottom: var(--chat-section-padding); }
  body:not(.media-mode) #composer[data-chat-prompt-sizing="reviewed-150-phone"] :is(#prompt,.refmedia-rich-input) { flex: 1; height: var(--chat-prompt-height); min-height: var(--chat-prompt-min-height); max-height: var(--chat-prompt-max-height); font-size: .875rem; line-height: 1.5; overflow-y: auto; }
  html:not([data-display-theme="light"]) body:not(.media-mode) #composer[data-chat-prompt-sizing="reviewed-150-phone"] :is(#prompt,.refmedia-rich-input) { color: rgba(245,251,255,.88); }
  body:not(.media-mode) #composer[data-chat-prompt-sizing="reviewed-150-phone"] .composer-footer { position: static; flex: 0 0 auto; height: auto; flex-wrap: wrap; align-items: center; gap: .375rem .625rem; }
  body:not(.media-mode) #composer[data-chat-prompt-sizing="reviewed-150-phone"] .composer-footer::after { content: ''; flex: 0 0 100%; height: 1.875rem; }
  body:not(.media-mode) #composer[data-chat-prompt-sizing="reviewed-150-phone"] .composer-tools { flex: 0 0 100%; padding: 0; min-height: 2.25rem; scrollbar-width: thin; scrollbar-color: #ffffff40 transparent; }
  body:not(.media-mode) #composer[data-chat-prompt-sizing="reviewed-150-phone"] .composer-tools::-webkit-scrollbar { display: block; }
  body:not(.media-mode) #composer[data-chat-prompt-sizing="reviewed-150-phone"] #send-button { right: .9375rem; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 13.3333px; line-height: normal; color: #000; }
}
@media (max-width:450px) {
  body:not(.media-mode):has(#composer[data-chat-prompt-sizing="reviewed-150-phone"]) .composer-rail { right: calc(.9375rem + 1.875rem + .625rem + 1px); color: #fff; line-height: 1.5rem; }
  body:not(.media-mode):has(#composer[data-chat-prompt-sizing="reviewed-150-phone"]) .composer-rail button { font-size: 13.3333px; line-height: normal; }
}
body:not(.media-mode) #model-hero-icon img { filter: drop-shadow(0 0 .625rem #ffffff4d); }
html:not([data-display-theme="light"]) body:not(.media-mode):not(.landing-mode):not(.account-mode):not(.mine-mode) .workspace:has(#chat-workspace:not([hidden])) { background: #0f0f12; }
body:not(.media-mode) #hero-notice { letter-spacing: .0125rem; word-break: break-word; }
body:not(.media-mode) #current-model { gap: .45rem; color: #ffffffe6; font-size: .75rem; line-height: 1.5; }
body:not(.media-mode) #current-model-icon { border-radius: .45rem; background: #ffffff0a; }
body:not(.media-mode) #current-model-icon, body:not(.media-mode) #current-model-icon img { width: 1.5rem; height: 1.5rem; }
body:not(.media-mode) .workspace-topbar .new-chat { display: flex; align-items: center; justify-content: center; gap: .375rem; height: 2.25rem; padding: 0 1rem; font-family: Arial,sans-serif; font-size: .8125rem; font-weight: 700; letter-spacing: .02em; border: 1px solid rgba(255,236,160,.55); border-radius: 1.125rem; background: linear-gradient(135deg,#ffe066,#ffc53d 48%,#f0932b); color: #2c1f00; box-shadow: inset 0 .0625rem 0 rgba(255,255,255,.45),0 .0625rem .125rem rgba(0,0,0,.18),0 .25rem .875rem rgba(240,147,43,.22); transition: transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s,filter .2s; }
body:not(.media-mode) .workspace-topbar .new-chat span { margin: 0; font-size: inherit; letter-spacing: inherit; }
body:not(.media-mode) .workspace-topbar .new-chat:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: inset 0 .0625rem 0 rgba(255,255,255,.5),0 .125rem .25rem rgba(0,0,0,.2),0 .375rem 1.125rem rgba(240,147,43,.32); }
.new-chat-icon { flex: none; width: 18px; height: 18px; }
body:not(.media-mode) .workspace-topbar .new-chat { font-family: Arial; }
body:not(.media-mode) .workspace-topbar .guide-button { font-family: Arial; font-size: 13.3333px; }
body:not(.media-mode) .workspace-topbar .new-chat-icon { flex: 0 1 auto; }
body:not(.media-mode) .workspace-topbar .guide-button .control-icon { flex: 0 0 auto; }
body:not(.media-mode) .workspace-topbar :is(.new-chat span,.new-chat svg,.guide-button svg) { transition: background-color .25s,color .2s,border-color .25s,box-shadow .25s; }
body:not(.media-mode) .composer-rail button { background: #ffffff0d; border: 1px solid #ffffff14; color: #ffffffb3; }
body:not(.media-mode) .composer-rail #enter-mode { transition: all .2s ease; }
body:not(.media-mode) .composer-rail #enter-mode[data-send-mode="ctrl-enter"] { background: rgba(0,202,224,.12); border-color: rgba(0,202,224,.45); color: #00cae0; box-shadow: none; }
body:not(.media-mode) .composer-rail #enter-mode[data-send-mode="enter"] { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); color: rgba(255,255,255,.7); box-shadow: none; }
body:not(.media-mode) .composer-rail #manual { background: rgba(255,255,255,.06); border-color: #00cae073; color: #00cae0; }
body:not(.media-mode) .composer-rail #manual .control-icon { width: 14px; height: 14px; stroke-width: 3.0857; }
body:not(.media-mode) #clear-prompt .control-icon { width: 14px; height: 14px; stroke-width: 2.9143; }
body:not(.media-mode) #fullscreen-prompt .control-icon { width: 14px; height: 14px; stroke-width: 3.0857; }
body:not(.media-mode) #enter-mode .control-icon { width: 14px; height: 14px; stroke-width: 3.2571; }
/* Reference chat header: the collapsed desktop sidebar keeps its own gutter.
   Keep the header in flow so the existing centered model pill keeps the
   workspace as its containing block. Media task-list positioning is separate. */
@media (min-width:451px) {
  body:not(.media-mode) .workspace { padding-inline: 1.25rem; }
  body:not(.media-mode) .workspace-topbar { display: flex; align-items: center; gap: .5rem; height: 5.75rem; min-height: 5.75rem; padding: 0; }
  body.sidebar-collapsed:not(.media-mode) .workspace-topbar { padding-left: 2.35rem; }
  body:not(.media-mode) .workspace-topbar .new-chat { flex: 0 0 8.75rem; width: 8.75rem; min-width: 8.75rem; }
  body:not(.media-mode) .workspace-topbar .guide-button { flex: 0 1 auto; }
  body:not(.media-mode) .workspace-topbar .top-actions { margin-left: auto; }
}

/* Phone chat quick entry, measured from the reference mobile actions panel.
   Keep it independent of uploads, drafts and the island's inert controller. */
.mobile-action-entry, .mobile-actions-overlay { --mobile-action-accent: 0,202,224; display: none; }
.mobile-action-entry[hidden], .mobile-actions-overlay[hidden] { display: none !important; }
.mobile-action-fab { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #ffffff1f; border-radius: .625rem; background: #0c0e12d1; color: rgba(var(--mobile-action-accent),.9); box-shadow: 0 .375rem 1rem #0000004d; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.mobile-action-fab svg { width: 16px; height: 16px; }
.mobile-action-fab:active { border-color: rgba(var(--mobile-action-accent),.4); background: #12151ceb; }
.mobile-action-fab:focus-visible, .mobile-actions-panel button:focus-visible { outline: 2px solid rgba(var(--mobile-action-accent),.7); outline-offset: 2px; }
.mobile-actions-overlay { position: fixed; inset: 0; z-index: 9998; align-items: flex-end; justify-content: center; padding: 1rem; background: #0000007a; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .2s ease; }
.mobile-actions-panel { width: min(100%,28rem); max-height: min(78vh,32rem); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(var(--mobile-action-accent),.18); border-radius: 1.25rem; background: linear-gradient(155deg,#12151dfa,#090b10fa); box-shadow: 0 1.5rem 5rem #0000008c,0 0 2rem rgba(var(--mobile-action-accent),.08); opacity: 0; transform: translateY(1rem) scale(.98); transition: transform .24s ease, opacity .24s ease; }
.mobile-actions-overlay.is-open { opacity: 1; }
.mobile-actions-overlay.is-open .mobile-actions-panel { opacity: 1; transform: none; }
.mobile-actions-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1rem .75rem; border-bottom: 1px solid #ffffff0f; line-height: 1.5; }
.mobile-actions-header > div { min-width: 0; }
.mobile-actions-title { margin: 0; color: #fffffff2; font-size: 1rem; font-weight: 700; }
.mobile-actions-subtitle { margin: .25rem 0 0; color: #ffffff73; font-size: .78rem; line-height: 1.5; }
.mobile-actions-close { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; border: 1px solid #ffffff14; border-radius: .7rem; background: #ffffff0a; color: #ffffff80; cursor: pointer; }
.mobile-actions-close svg { width: 1rem; height: 1rem; }
.mobile-actions-list { display: flex; flex-direction: column; gap: .75rem; overflow-y: auto; padding: .9rem; scrollbar-width: thin; scrollbar-color: rgba(var(--mobile-action-accent),.28) transparent; }
.mobile-actions-list::-webkit-scrollbar { width: 4px; }
.mobile-actions-list::-webkit-scrollbar-thumb { background: rgba(var(--mobile-action-accent),.28); border-radius: 999px; }
.mobile-actions-list .mobile-action-item { width: 100%; display: flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .75rem .9rem; border: 1px solid rgba(var(--mobile-action-accent),.12); border-radius: .9rem; background: #ffffff0b; color: #ffffffe0; font-family: Arial,sans-serif; font-size: .9rem; font-weight: 600; line-height: normal; text-align: left; cursor: pointer; }
.mobile-action-item svg { width: 18px; height: 18px; flex: none; }
@media (max-width:450px) {
  body:not(.media-mode):not(.landing-mode):not(.account-mode):has(#chat-workspace:not([hidden])):has(#composer-island:not(.is-collapsed)) #mobile-action-entry:not([hidden]) { position: absolute; right: 1rem; bottom: 15rem; z-index: 110; display: block; }
  body:not(.media-mode):not(.landing-mode):not(.account-mode):has(#chat-workspace:not([hidden])):has(#composer-island:not(.is-collapsed)) #mobile-actions-overlay:not([hidden]) { display: flex; }
}
html[data-display-theme="light"] .mobile-actions-overlay { background: #0f172a47; }
html[data-display-theme="light"] .mobile-actions-panel { background: linear-gradient(155deg,#fffffffa,#f5f8fcfa); border-color: rgba(var(--mobile-action-accent),.2); box-shadow: 0 1.25rem 4rem #0f172a2e,0 0 1.25rem rgba(var(--mobile-action-accent),.06); }
html[data-display-theme="light"] .mobile-actions-header { border-bottom-color: #0000000f; }
html[data-display-theme="light"] .mobile-actions-title, html[data-display-theme="light"] .mobile-action-item { color: #25314b; }
html[data-display-theme="light"] .mobile-actions-subtitle { color: #69768b; }
html[data-display-theme="light"] .mobile-actions-close, html[data-display-theme="light"] .mobile-action-item { background: #ffffffbd; border-color: #00000014; }
html[data-display-theme="light"] .mobile-action-fab { background: #fffffff0; border-color: #0f172a1f; color: rgb(var(--mobile-action-accent)); box-shadow: 0 .375rem .875rem #0f172a1a; }
/* Match the measured editor palette over the shared modal theme overrides. */
html[data-display-theme="light"] #prompt-editor-modal { background: rgba(255,255,255,.96) !important; border-color: rgba(0,0,0,.07) !important; box-shadow: 0 1.5rem 4.5rem rgba(15,23,42,.2); }
html[data-display-theme="light"] #prompt-editor-modal .modal-head { border-bottom-color: rgba(0,0,0,.055); }
html[data-display-theme="light"] #prompt-editor-modal .modal-head h2 { color: #0f1419; }
html[data-display-theme="light"] #prompt-editor-modal .modal-head p { color: #8c979f; }
html[data-display-theme="light"] #prompt-editor-modal #prompt-editor-close { border-color: rgba(0,0,0,.055); background: rgba(0,0,0,.035); color: rgba(0,0,0,.65) !important; }
html[data-display-theme="light"] #prompt-editor-modal #prompt-editor-text { color: rgba(15, 20, 25, 0.9) !important; }
html[data-display-theme="light"] #prompt-editor-modal #prompt-editor-text::placeholder { color: #8c979f !important; }
html[data-display-theme="light"] #prompt-editor-modal .editor-footer { border-top-color: rgba(0,0,0,.055); }
html[data-display-theme="light"] #prompt-editor-modal #prompt-editor-count { color: #8c979f; }
html[data-display-theme="light"] #prompt-editor-modal #prompt-editor-clear { border-color: rgba(0,0,0,.07); background: rgba(0,0,0,.035); color: #646e78; }
html[data-display-theme="light"] body:has(#prompt-editor-modal:not([hidden])) #modal-backdrop { background: rgba(15,23,42,.38) !important; }
@media (prefers-reduced-motion: reduce) {
  .mobile-actions-overlay, .mobile-actions-panel, .mobile-action-fab { transition: none; }
}
/* Wide chat screens use the observed floating manual entry. Keep the shared
   rail node and all narrow-screen and media controls available. */
@media (min-width:1880px) {
  body:not(.media-mode) .composer-rail #manual { display: none; }
}