/* Compact, low-noise conversation layout inspired by ChatGPT and Claude. */

/* Keep one real scroll surface for the conversation. The markup nests #messages
   inside #chatScroll; only the outer viewport should scroll on long chats. */
#chatView.has-messages .chat-scroll {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start !important;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding-top: 12px !important;
  padding-bottom: 8px !important;
}
#chatView.has-messages .chat-scroll::-webkit-scrollbar,
#chatView.has-messages #messages::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
#chatView.has-messages #messages {
  display: flex !important;
  flex: 0 0 auto !important;
  min-height: auto !important;
  height: auto !important;
  overflow: visible !important;
  overscroll-behavior: auto;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  margin-top: auto !important;
  margin-inline: auto !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
#chatView #messages.messages {
  gap: 14px !important;
}
#chatView #messages > .message {
  gap: 8px;
}
#chatView #messages .message-content {
  min-width: 0;
}

/* Restore readable message size. Tighten vertical rhythm rather than shrinking text. */
#chatView #messages .message-text {
  font-size: 15px !important;
  line-height: 1.66 !important;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
#chatView #messages .message.user .message-text {
  font-size: 15px !important;
  line-height: 1.58 !important;
}
#chatView #messages .message-text > :first-child {
  margin-top: 0;
}
#chatView #messages .message-text > :last-child {
  margin-bottom: 0;
}
#chatView #messages .message-text p {
  margin: .34em 0;
}
#chatView #messages .message-text h1,
#chatView #messages .message-text h2,
#chatView #messages .message-text h3,
#chatView #messages .message-text h4 {
  margin: .68em 0 .28em;
  font-size: 1.08em;
  line-height: 1.35;
}
#chatView #messages .message-text ul,
#chatView #messages .message-text ol {
  margin: .34em 0;
  padding-left: 1.45em;
}
#chatView #messages .message-text li {
  margin: .12em 0;
}
#chatView #messages .message-text pre {
  margin: .55em 0;
  font-size: 13px;
}
#chatView #messages .message-text blockquote {
  margin: .42em 0;
}

/* Keep the existing top controls and button sizes, but remove the oversized
   header strip/divider that visually masks the beginning of the conversation. */
@media (min-width: 761px) {
  .main-area:has(#chatView.active-view) > .topbar {
    flex: 0 0 58px !important;
    min-height: 58px !important;
    height: 58px !important;
    padding-block: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: var(--bg) !important;
  }
}

@media (max-width: 760px) {
  #chatView #messages.messages { gap: 13px !important; }
  #chatView #messages .message-text { font-size: 15px !important; }
}


/* Mobile conversation layout: keep Dhwani's existing palette and controls.
   Only the transcript structure and composer arrangement change. */
@media (max-width: 760px) {
  #chatView.active-view {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }

  #chatView.has-messages .chat-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 14px 16px 8px !important;
    overflow-y: auto !important;
  }

  #chatView.has-messages #messages {
    width: 100% !important;
    max-width: 100% !important;
    margin: auto auto 0 !important;
    padding: 8px 0 12px !important;
    gap: 22px !important;
  }

  /* User messages: compact, right-aligned neutral bubble. */
  #chatView #messages > .message.user {
    justify-content: flex-end !important;
    width: 100% !important;
  }
  #chatView #messages > .message.user .message-content {
    flex: 0 1 auto !important;
    width: fit-content !important;
    max-width: min(84%, 520px) !important;
    padding: 10px 14px !important;
    border: 1px solid #dedbd6 !important;
    border-radius: 18px 18px 5px 18px !important;
    background: #f1efec !important;
    box-shadow: none !important;
    color: #292622 !important;
  }
  #chatView #messages > .message.user .message-text {
    width: auto !important;
    color: #292622 !important;
    font-family: "DM Sans", "Outfit", system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 450 !important;
    line-height: 1.55 !important;
  }

  /* Assistant response: open text, no card or background. */
  #chatView #messages > .message.response {
    justify-content: flex-start !important;
    width: 100% !important;
  }
  #chatView #messages > .message.response .message-content {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #chatView #messages > .message.response .message-text {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.58 !important;
    letter-spacing: 0 !important;
  }
  #chatView #messages .message-text p {
    margin: .38em 0 !important;
  }

  /* Keep response actions directly below the answer, at a compact touch size. */
  #chatView #messages .message-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px !important;
    margin-top: 8px !important;
  }
  #chatView #messages .message-actions button,
  #chatView #messages .message-actions .small-action {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 6px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--muted) !important;
  }
  #chatView #messages .message-actions button:hover {
    background: var(--surface-soft) !important;
    color: var(--text) !important;
  }

  /* Claude-like single-row composer, retaining Dhwani's plus, mic,
     waveform and existing terracotta send button. */
  #chatView.has-messages .composer-zone {
    flex: 0 0 auto !important;
    width: calc(100% - 24px) !important;
    margin: 0 auto !important;
    padding: 8px 0 max(10px, env(safe-area-inset-bottom)) !important;
  }
  #chatView .composer {
    display: block !important;
    min-height: 68px !important;
    padding: 10px 11px !important;
    border: 1px solid #dedbd6 !important;
    border-radius: 28px !important;
    background: var(--surface) !important;
    box-shadow: 0 3px 14px rgba(42, 34, 25, .07) !important;
  }
  #chatView .composer-bottom {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    grid-template-rows: minmax(42px, auto) !important;
    align-items: center !important;
    gap: 5px !important;
  }
  #chatView .composer textarea {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-height: 40px !important;
    max-height: 120px !important;
    padding: 9px 2px !important;
    font-family: "DM Sans", "Outfit", system-ui, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
  #chatView .dhwani-plus-button {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
  #chatView .composer-right {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
  }
  #chatView .composer-voice-button {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
  }
  #chatView .send-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }
}


/* Conversation chronology and scroll anchoring:
   first turn begins at the top; each newly sent prompt is brought to the
   top of the viewport, with its answer flowing naturally beneath it. */
#chatView.has-messages .chat-scroll {
  justify-content: flex-start !important;
  overflow-y: auto !important;
}
#chatView.has-messages #messages {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  align-self: stretch !important;
  min-height: min-content !important;
  overflow: visible !important;
}
@media (max-width: 760px) {
  #chatView.has-messages .chat-scroll {
    padding-top: 12px !important;
    padding-bottom: 8px !important;
  }
  #chatView.has-messages #messages {
    margin: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 14px !important;
    gap: 20px !important;
  }
}


/* Two-level Dhwani composer: prompt on top, attachments/model/actions below. */
@media (max-width: 760px) {
  #chatView.has-messages .composer-zone {
    width: calc(100% - 24px) !important;
    padding: 8px 0 max(10px, env(safe-area-inset-bottom)) !important;
  }
  #chatView .composer {
    min-height: 112px !important;
    padding: 10px 11px 9px !important;
    border-radius: 28px !important;
    background: var(--surface) !important;
    border: 1px solid var(--line-strong) !important;
    box-shadow: 0 4px 18px rgba(35, 29, 22, .07) !important;
  }
  #chatView .composer-bottom {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: minmax(42px, auto) 42px !important;
    align-items: center !important;
    gap: 7px 8px !important;
  }
  #chatView .composer textarea {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-height: 42px !important;
    max-height: 112px !important;
    padding: 7px 2px 2px !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
  }
  #chatView .composer-tools {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  #chatView .composer-plus-button {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    font-size: 27px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
  }
  #chatView .composer-model-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    max-width: min(48vw, 190px) !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #chatView .composer-model-chip .model-dot,
  #chatView .composer-model-chip .chevron {
    flex: 0 0 auto !important;
  }
  #chatView .composer-right {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
  }
  #chatView .composer-voice-button {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--surface-soft) !important;
    color: var(--text) !important;
  }
  #chatView .composer-voice-button svg {
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
  }
  #chatView .send-button {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: var(--accent) !important;
    color: #fff !important;
  }
  #chatView .send-button svg {
    width: 22px !important;
    height: 22px !important;
  }
  #chatView .send-button.is-stop {
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
  }
  #chatView .send-button.is-stop svg rect {
    fill: currentColor !important;
    stroke: currentColor !important;
  }
  #chatView .plus-menu {
    bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* Keep Send out of the idle composer; show it only when there is content. */
#chatView .send-button.is-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#chatView .send-button.is-stop {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


/* Compact Claude-style mobile composer: one slim pill, expanding only for longer text. */
@media (max-width: 760px) {
  #chatView .composer-zone {
    width: calc(100% - 28px) !important;
    padding: 8px 0 max(8px, env(safe-area-inset-bottom)) !important;
  }
  #chatView .composer {
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 10px !important;
    border-radius: 34px !important;
    background: var(--surface) !important;
    border: 1px solid var(--line-strong) !important;
    box-shadow: 0 3px 16px rgba(35, 29, 22, .07) !important;
  }
  #chatView .composer-bottom {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 48px !important;
  }
  #chatView .composer-tools {
    display: flex !important;
    flex: 0 0 40px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    min-width: 40px !important;
    gap: 0 !important;
  }
  #chatView .composer-plus-button {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    font-size: 26px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
  }
  #chatView .composer textarea {
    display: block !important;
    flex: 1 1 auto !important;
    width: 0 !important;
    min-width: 0 !important;
    min-height: 38px !important;
    max-height: 112px !important;
    margin: 0 !important;
    padding: 8px 1px !important;
    resize: none !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    align-self: center !important;
  }
  #chatView .composer-right {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }
  #chatView .composer-voice-button {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--surface-soft) !important;
    color: var(--text) !important;
  }
  #chatView .send-button {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--accent) !important;
    color: #fff !important;
  }
  #chatView .send-button svg {
    width: 23px !important;
    height: 23px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
  #chatView .send-button.is-stop {
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
  }
  #chatView .send-button.is-stop svg rect {
    fill: currentColor !important;
    stroke: currentColor !important;
  }
  #chatView .plus-menu {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* Dhwani mobile composer: collapsed idle pill + expanded typing state. */
@media (max-width: 760px) {
  #chatView .composer-zone {
    width: calc(100% - 28px) !important;
    padding: 8px 0 max(8px, env(safe-area-inset-bottom)) !important;
  }
  #chatView .composer {
    min-height: 0 !important;
    height: auto !important;
    padding: 7px 10px !important;
    border-radius: 34px !important;
    background: var(--surface) !important;
    border: 1px solid var(--line-strong) !important;
    box-shadow: 0 3px 16px rgba(35, 29, 22, .07) !important;
    transition: border-radius .16s ease, padding .16s ease;
  }
  #chatView .composer-bottom {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 46px !important;
  }
  #chatView .composer-tools {
    display: flex !important;
    order: 0 !important;
    flex: 0 0 36px !important;
    align-items: center !important;
    min-width: 36px !important;
    gap: 7px !important;
  }
  #chatView .composer-plus-button {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    font-size: 25px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
  }
  #chatView .composer-model-chip {
    display: none !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: min(48vw, 190px) !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #chatView .composer textarea {
    order: 1 !important;
    display: block !important;
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    min-height: 38px !important;
    max-height: 112px !important;
    margin: 0 !important;
    padding: 8px 1px !important;
    resize: none !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    align-self: center !important;
  }
  #chatView .composer-right {
    order: 2 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
  }
  #chatView .composer-voice-button {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--surface-soft) !important;
    color: var(--text) !important;
  }
  #chatView .composer-voice-button svg {
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
  }
  #chatView .send-button {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--accent) !important;
    color: #fff !important;
  }
  #chatView .send-button svg {
    width: 22px !important;
    height: 22px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
  #chatView .send-button.is-stop {
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
  }
  #chatView .send-button.is-stop svg rect {
    fill: currentColor !important;
    stroke: currentColor !important;
  }
  #chatView .composer.is-expanded,
  #chatView .composer.has-content,
  #chatView .composer.is-generating {
    padding: 10px 11px 9px !important;
    border-radius: 25px !important;
  }
  #chatView .composer.is-expanded .composer-bottom,
  #chatView .composer.has-content .composer-bottom,
  #chatView .composer.is-generating .composer-bottom {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: minmax(40px, auto) 40px !important;
    gap: 6px 8px !important;
  }
  #chatView .composer.is-expanded textarea,
  #chatView .composer.has-content textarea,
  #chatView .composer.is-generating textarea {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 5px 1px 2px !important;
  }
  #chatView .composer.is-expanded .composer-tools,
  #chatView .composer.has-content .composer-tools,
  #chatView .composer.is-generating .composer-tools {
    grid-column: 1 !important;
    grid-row: 2 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    gap: 7px !important;
  }
  #chatView .composer.is-expanded .composer-model-chip,
  #chatView .composer.has-content .composer-model-chip,
  #chatView .composer.is-generating .composer-model-chip {
    display: inline-flex !important;
  }
  #chatView .composer.is-expanded .composer-right,
  #chatView .composer.has-content .composer-right,
  #chatView .composer.is-generating .composer-right {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  #chatView .composer.has-content #voiceChatButton,
  #chatView .composer.is-generating #voiceChatButton {
    display: none !important;
  }
  #chatView .composer.has-content .send-button,
  #chatView .composer.is-generating .send-button {
    display: grid !important;
  }
  #chatView .composer:not(.has-content):not(.is-generating) .send-button {
    display: none !important;
  }
  #chatView .plus-menu {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* Final mobile home + Claude-style compact composer refinement. */
@media (max-width: 760px) {
  #chatView:not(.has-messages) {
    display: flex !important; flex-direction: column !important;
    justify-content: flex-start !important; min-height: 0 !important;
  }
  #chatView:not(.has-messages) .chat-scroll {
    display: flex !important; flex: 1 1 auto !important;
    align-items: center !important; justify-content: center !important;
    min-height: 0 !important; padding: 18px 18px 96px !important;
    overflow: hidden !important;
  }
  #chatView:not(.has-messages) .welcome {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    width: 100% !important; max-width: 100% !important;
    margin: auto !important; padding: 0 4px !important;
    gap: 12px !important; text-align: center !important;
  }
  #chatView:not(.has-messages) .hero-brand-mark {
    display: grid !important; place-items: center !important;
    width: 76px !important; height: 76px !important; margin: 0 0 2px !important;
  }
  #chatView:not(.has-messages) .hero-brand-mark .hero-mark { width: 62% !important; height: 62% !important; }
  #chatView:not(.has-messages) .hero-greeting {
    max-width: 100% !important; margin: 0 !important;
    font-family: "DM Sans", "Outfit", system-ui, sans-serif !important;
    font-size: clamp(23px, 6vw, 29px) !important; font-weight: 600 !important;
    line-height: 1.25 !important; letter-spacing: -.035em !important; text-align: center !important;
  }
  #chatView:not(.has-messages) .hero-subtitle,
  #chatView:not(.has-messages) .dhwani-suggestions,
  #chatView .quick-tags { display: none !important; }
  #chatView:not(.has-messages) .welcome-plan-pill {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    gap: 5px !important; min-height: 40px !important; margin-top: 14px !important;
    padding: 0 17px !important; border: 0 !important; border-radius: 999px !important;
    background: var(--surface-soft) !important; color: var(--muted) !important;
    font-family: "DM Sans", "Outfit", system-ui, sans-serif !important; font-size: 13px !important;
  }
  #chatView:not(.has-messages) .welcome-plan-pill button { padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--text) !important; font: inherit !important; font-weight: 650 !important; cursor: pointer !important; }
  #chatView:not(.has-messages) .welcome-plan-divider { color: var(--muted) !important; }

  #chatView .composer-zone, #chatView.has-messages .composer-zone, #chatView:not(.has-messages) .composer-zone {
    position: relative !important; inset: auto !important; transform: none !important;
    flex: 0 0 auto !important; width: calc(100% - 32px) !important; max-width: none !important;
    margin: auto auto 0 !important; padding: 8px 0 max(9px, env(safe-area-inset-bottom)) !important; z-index: 8 !important;
  }
  #chatView .composer {
    display: block !important; min-height: 62px !important; height: auto !important;
    padding: 7px 9px !important; border: 1px solid var(--line-strong) !important;
    border-radius: 999px !important; background: var(--surface) !important;
    box-shadow: 0 3px 16px rgba(35, 29, 22, .07) !important;
    transition: border-radius .16s ease, padding .16s ease !important;
  }
  #chatView .composer-bottom {
    display: grid !important; grid-template-columns: 36px minmax(0, 1fr) auto !important;
    grid-template-rows: 44px !important; align-items: center !important; gap: 5px !important; min-height: 44px !important;
  }
  #chatView .composer-tools {
    display: flex !important; grid-column: 1 !important; grid-row: 1 !important;
    align-items: center !important; justify-content: center !important; min-width: 36px !important; gap: 0 !important;
  }
  #chatView .composer-plus-button {
    display: grid !important; place-items: center !important; width: 36px !important; min-width: 36px !important;
    height: 36px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
    background: var(--surface-soft) !important; color: var(--text) !important; font-size: 25px !important; line-height: 1 !important;
  }
  #chatView .composer textarea {
    grid-column: 2 !important; grid-row: 1 !important; width: 100% !important; min-width: 0 !important;
    min-height: 40px !important; max-height: 112px !important; margin: 0 !important; padding: 9px 2px !important;
    font-family: "DM Sans", "Outfit", system-ui, sans-serif !important; font-size: 16px !important; line-height: 1.4 !important;
  }
  #chatView .composer-right {
    display: flex !important; grid-column: 3 !important; grid-row: 1 !important;
    align-items: center !important; justify-content: flex-end !important; gap: 4px !important;
  }
  #chatView .composer-voice-button {
    display: grid !important; place-items: center !important; width: 36px !important; min-width: 36px !important;
    height: 36px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
    background: var(--surface-soft) !important; color: var(--text) !important;
  }
  #chatView .send-button {
    display: grid !important; place-items: center !important; width: 42px !important; min-width: 42px !important;
    height: 42px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
    background: var(--accent) !important; color: #fff !important;
  }
  #chatView .send-button.is-hidden, #chatView .composer:not(.has-content):not(.is-generating) .send-button { display: none !important; }
  #chatView .composer-model-chip { display: none !important; }
  #chatView .composer.is-expanded, #chatView .composer.has-content, #chatView .composer.is-generating {
    padding: 10px 11px 9px !important; border-radius: 25px !important;
  }
  #chatView .composer.is-expanded .composer-bottom, #chatView .composer.has-content .composer-bottom, #chatView .composer.is-generating .composer-bottom {
    grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: minmax(40px, auto) 40px !important; gap: 6px 8px !important;
  }
  #chatView .composer.is-expanded textarea, #chatView .composer.has-content textarea, #chatView .composer.is-generating textarea {
    grid-column: 1 / -1 !important; grid-row: 1 !important; width: 100% !important; min-height: 40px !important; padding: 5px 1px 2px !important;
  }
  #chatView .composer.is-expanded .composer-tools, #chatView .composer.has-content .composer-tools, #chatView .composer.is-generating .composer-tools {
    grid-column: 1 !important; grid-row: 2 !important; justify-content: flex-start !important; min-width: 0 !important; gap: 7px !important;
  }
  #chatView .composer.is-expanded .composer-model-chip, #chatView .composer.has-content .composer-model-chip, #chatView .composer.is-generating .composer-model-chip {
    display: inline-flex !important; align-items: center !important; max-width: min(42vw, 170px) !important;
    min-height: 36px !important; padding: 0 11px !important; border: 0 !important; border-radius: 22px !important;
    background: var(--surface-soft) !important; color: var(--text) !important; font-size: 12px !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  }
  #chatView .composer.is-expanded .composer-right, #chatView .composer.has-content .composer-right, #chatView .composer.is-generating .composer-right {
    grid-column: 2 !important; grid-row: 2 !important;
  }
  #chatView .composer.has-content #voiceChatButton, #chatView .composer.is-generating #voiceChatButton { display: none !important; }
  #chatView .composer.has-content .send-button, #chatView .composer.is-generating .send-button { display: grid !important; }
}


/* Keyboard-aware compact composer: collapse when Android/iOS keyboard is dismissed. */
@media (max-width: 760px) {
  #chatView .composer { min-height: 62px !important; border-radius: 999px !important; }
  #chatView .composer.is-expanded, #chatView .composer.is-generating {
    min-height: 102px !important; padding: 10px 11px 9px !important; border-radius: 25px !important;
  }
  #chatView .composer.has-content:not(.is-expanded):not(.is-generating) {
    min-height: 62px !important; padding: 7px 9px !important; border-radius: 999px !important;
  }
  #chatView .composer-bottom {
    grid-template-columns: 36px minmax(0, 1fr) auto !important; grid-template-rows: 44px !important; gap: 5px !important;
  }
  #chatView .composer textarea { grid-column: 2 !important; grid-row: 1 !important; min-height: 40px !important; padding: 9px 2px !important; }
  #chatView .composer-tools { grid-column: 1 !important; grid-row: 1 !important; justify-content: center !important; }
  #chatView .composer-right { grid-column: 3 !important; grid-row: 1 !important; }
  #chatView .composer-model-chip { display: none !important; }
  #chatView .composer.is-expanded .composer-bottom, #chatView .composer.is-generating .composer-bottom {
    grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: minmax(40px, auto) 40px !important; gap: 6px 8px !important;
  }
  #chatView .composer.is-expanded textarea, #chatView .composer.is-generating textarea {
    grid-column: 1 / -1 !important; grid-row: 1 !important; min-height: 40px !important; padding: 5px 1px 2px !important;
  }
  #chatView .composer.is-expanded .composer-tools, #chatView .composer.is-generating .composer-tools {
    grid-column: 1 !important; grid-row: 2 !important; justify-content: flex-start !important; gap: 7px !important;
  }
  #chatView .composer.is-expanded .composer-model-chip, #chatView .composer.is-generating .composer-model-chip {
    display: inline-flex !important; align-items: center !important; max-width: min(42vw, 170px) !important;
    min-height: 36px !important; padding: 0 11px !important; border: 0 !important; border-radius: 22px !important;
    background: var(--surface-soft) !important; color: var(--text) !important; font-size: 12px !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  }
  #chatView .composer.is-expanded .composer-right, #chatView .composer.is-generating .composer-right { grid-column: 2 !important; grid-row: 2 !important; }
  #chatView .composer.has-content:not(.is-generating) #voiceChatButton, #chatView .composer.is-generating #voiceChatButton { display: none !important; }
  #chatView .composer.has-content .send-button, #chatView .composer.is-generating .send-button { display: grid !important; }
}


/* A retained draft is still compact after the on-screen keyboard closes. */
@media (max-width: 760px) {
  #chatView .composer.has-content:not(.is-expanded):not(.is-generating) {
    min-height: 62px !important; padding: 7px 9px !important; border-radius: 999px !important;
  }
  #chatView .composer.has-content:not(.is-expanded):not(.is-generating) .composer-bottom {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    grid-template-rows: 44px !important; gap: 5px !important;
  }
  #chatView .composer.has-content:not(.is-expanded):not(.is-generating) textarea {
    grid-column: 2 !important; grid-row: 1 !important; min-height: 40px !important; padding: 9px 2px !important;
  }
  #chatView .composer.has-content:not(.is-expanded):not(.is-generating) .composer-tools {
    grid-column: 1 !important; grid-row: 1 !important; justify-content: center !important;
  }
  #chatView .composer.has-content:not(.is-expanded):not(.is-generating) .composer-right {
    grid-column: 3 !important; grid-row: 1 !important;
  }
  #chatView .composer.has-content:not(.is-expanded):not(.is-generating) .composer-model-chip {
    display: none !important;
  }
}


/* Final mobile composer alignment: prompt above, plus/model/mic/send together below. */
@media (max-width: 760px) {
  #chatView .composer.is-expanded,
  #chatView .composer.has-content,
  #chatView .composer.is-generating {
    border-radius: 25px !important;
    min-height: 112px !important;
    padding: 10px 11px 9px !important;
  }
  #chatView .composer.is-expanded .composer-bottom,
  #chatView .composer.has-content .composer-bottom,
  #chatView .composer.is-generating .composer-bottom {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: minmax(42px, auto) 40px !important;
    align-items: center !important;
    gap: 7px 8px !important;
    min-height: 0 !important;
  }
  #chatView .composer.is-expanded textarea,
  #chatView .composer.has-content textarea,
  #chatView .composer.is-generating textarea {
    display: block !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    order: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    max-height: 112px !important;
    margin: 0 !important;
    padding: 5px 3px 7px !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    background: transparent !important;
    z-index: 1 !important;
  }
  #chatView .composer.is-expanded textarea::placeholder,
  #chatView .composer.has-content textarea::placeholder {
    color: var(--muted) !important;
    -webkit-text-fill-color: var(--muted) !important;
    opacity: 1 !important;
  }
  #chatView .composer.is-expanded .composer-tools,
  #chatView .composer.has-content .composer-tools,
  #chatView .composer.is-generating .composer-tools {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    order: initial !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    overflow: visible !important;
    z-index: 2 !important;
  }
  #chatView .composer.is-expanded .composer-plus-button,
  #chatView .composer.has-content .composer-plus-button {
    flex: 0 0 36px !important;
  }
  #chatView .composer.is-expanded .composer-model-chip,
  #chatView .composer.has-content .composer-model-chip,
  #chatView .composer.is-generating .composer-model-chip {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: min(44vw, 178px) !important;
    min-height: 36px !important;
    padding: 0 11px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
  }
  #chatView .composer.is-expanded .composer-right,
  #chatView .composer.has-content .composer-right,
  #chatView .composer.is-generating .composer-right {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    order: initial !important;
    align-items: center !important;
    justify-self: end !important;
    gap: 5px !important;
    z-index: 2 !important;
  }
  #chatView .composer.has-content:not(.is-generating) #voiceChatButton,
  #chatView .composer.is-generating #voiceChatButton { display: none !important; }
  #chatView .composer.has-content .send-button,
  #chatView .composer.is-generating .send-button {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #C56D4B !important;
    color: #fff !important;
    box-shadow: none !important;
  }
  #chatView .composer.has-content .send-button svg,
  #chatView .composer.is-generating .send-button svg {
    display: block !important;
    width: 23px !important;
    height: 23px !important;
    fill: none !important;
    stroke: #fff !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
  #chatView .composer.has-content:not(.is-expanded):not(.is-generating) {
    min-height: 62px !important;
    padding: 7px 9px !important;
    border-radius: 999px !important;
  }
  #chatView .composer.has-content:not(.is-expanded):not(.is-generating) .composer-bottom {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    grid-template-rows: 44px !important;
  }
  #chatView .composer.has-content:not(.is-expanded):not(.is-generating) textarea {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 40px !important;
  }
  #chatView .composer.has-content:not(.is-expanded):not(.is-generating) .composer-tools {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  #chatView .composer.has-content:not(.is-expanded):not(.is-generating) .composer-model-chip {
    display: none !important;
  }
  #chatView .composer.has-content:not(.is-expanded):not(.is-generating) .composer-right {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
}


/* Production mobile composer: keep the draft visible while the keyboard is open. */
@media (max-width: 760px) {
  #chatForm.composer.is-expanded,
  #chatForm.composer.is-generating {
    min-height: 112px !important;
    padding: 10px 11px 9px !important;
    border-radius: 25px !important;
    overflow: visible !important;
  }
  #chatForm.composer.is-expanded .composer-bottom,
  #chatForm.composer.is-generating .composer-bottom {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: minmax(42px, auto) 40px !important;
    align-items: center !important;
    gap: 7px 8px !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  #chatForm.composer.is-expanded #promptInput,
  #chatForm.composer.is-generating #promptInput {
    display: block !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    order: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    max-height: 112px !important;
    margin: 0 !important;
    padding: 5px 3px 7px !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    opacity: 1 !important;
    visibility: visible !important;
    font: 16px/1.45 "DM Sans", "Outfit", system-ui, sans-serif !important;
    background: transparent !important;
    z-index: 2 !important;
  }
  #chatForm.composer.is-expanded #promptInput::placeholder {
    color: var(--muted) !important;
    -webkit-text-fill-color: var(--muted) !important;
    opacity: 1 !important;
  }
  #chatForm.composer.is-expanded .composer-tools,
  #chatForm.composer.is-generating .composer-tools {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    overflow: visible !important;
    z-index: 3 !important;
  }
  #chatForm.composer.is-expanded .composer-model-chip,
  #chatForm.composer.is-generating .composer-model-chip {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: min(44vw, 178px) !important;
    min-height: 36px !important;
    padding: 0 11px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
  }
  #chatForm.composer.is-expanded .composer-right,
  #chatForm.composer.is-generating .composer-right {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-items: center !important;
    justify-self: end !important;
    gap: 6px !important;
    z-index: 3 !important;
  }
  #chatForm.composer.has-content .send-button,
  #chatForm.composer.is-generating .send-button {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #C56D4B !important;
    color: #fff !important;
    box-shadow: none !important;
  }
  #chatForm.composer.has-content .send-button svg,
  #chatForm.composer.is-generating .send-button svg {
    display: block !important;
    width: 23px !important;
    height: 23px !important;
    fill: none !important;
    stroke: #fff !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
  #chatForm.composer.has-content:not(.is-expanded):not(.is-generating) {
    min-height: 62px !important;
    padding: 7px 9px !important;
    border-radius: 999px !important;
  }
  #chatForm.composer.has-content:not(.is-expanded):not(.is-generating) .composer-bottom {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    grid-template-rows: 44px !important;
  }
  #chatForm.composer.has-content:not(.is-expanded):not(.is-generating) #promptInput {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 40px !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  #chatForm.composer.has-content:not(.is-expanded):not(.is-generating) .composer-tools {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-content: center !important;
  }
  #chatForm.composer.has-content:not(.is-expanded):not(.is-generating) .composer-model-chip {
    display: none !important;
  }
  #chatForm.composer.has-content:not(.is-expanded):not(.is-generating) .composer-right {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
  #chatForm.composer.has-content:not(.is-generating) #voiceChatButton {
    display: none !important;
  }
}

/* Keep the hero mark itself clean: no extra oversized circular decoration. */
#chatView:not(.has-messages) .hero-brand-mark {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#chatView:not(.has-messages) .hero-brand-mark::before,
#chatView:not(.has-messages) .hero-brand-mark::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}
#chatView:not(.has-messages) .hero-brand-mark .hero-mark {
  object-fit: contain !important;
  filter: none !important;
}


/* Mobile composer alignment: model selector belongs beside mic/send, not beside +. */
@media (max-width: 760px) {
  #chatForm .composer-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    min-width: 0 !important;
  }
  #chatForm .composer-right .composer-model-chip {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: min(34vw, 148px) !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
    order: 0 !important;
  }
  #chatForm .composer-right .composer-voice-button,
  #chatForm .composer-right .send-button {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }
  #chatForm .composer-right .dictation-button,
  #chatForm .composer-right #dictationButton,
  #chatForm .composer-right #voiceChatButton { order: 1 !important; }
  #chatForm .composer-right #sendButton { order: 2 !important; }
  #chatForm.composer.has-content:not(.is-expanded):not(.is-generating) .composer-bottom {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    grid-template-rows: minmax(44px, auto) !important;
    align-items: center !important;
  }
  #chatForm.composer.has-content:not(.is-expanded):not(.is-generating) .composer-right {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
  #chatForm.composer.has-content:not(.is-expanded):not(.is-generating) .composer-model-chip {
    display: inline-flex !important;
    max-width: min(28vw, 116px) !important;
    min-height: 34px !important;
    padding-inline: 8px !important;
  }
  #chatForm.composer.has-content:not(.is-expanded):not(.is-generating) .composer-tools {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  #chatForm.composer.has-content:not(.is-expanded):not(.is-generating) #promptInput {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }
}

/* Restore the original Dhwani identity: warm waveform inside a gradient ring. */
#chatView:not(.has-messages) .hero-brand-mark {
  display: grid !important;
  place-items: center !important;
  width: clamp(108px, 34vw, 146px) !important;
  height: clamp(108px, 34vw, 146px) !important;
  margin: 0 auto 12px !important;
  border: 0 !important;
  border-radius: 30% !important;
  background: #f0edff !important;
  box-shadow: 0 10px 30px rgba(111, 91, 190, .10) !important;
}
#chatView:not(.has-messages) .hero-brand-mark::before {
  content: "" !important;
  position: absolute !important;
  inset: 4% !important;
  border: 4px solid transparent !important;
  border-radius: 50% !important;
  background: linear-gradient(#f0edff, #f0edff) padding-box,
    linear-gradient(145deg, #ff9b35 0%, #f06b73 54%, #d84bb2 100%) border-box !important;
  animation: none !important;
}
#chatView:not(.has-messages) .hero-brand-mark::after { content: none !important; display: none !important; }
#chatView:not(.has-messages) .hero-brand-mark .hero-mark {
  position: relative !important;
  z-index: 1 !important;
  width: 62% !important;
  height: 62% !important;
  object-fit: contain !important;
  filter: none !important;
}


/* Claude-style mobile composer: compact idle state, expanded reply field and
   one shared bottom action rail for plus, model, mic, voice mode and send. */
@media (max-width: 760px) {
  #chatForm.composer.is-expanded,
  #chatForm.composer.is-generating {
    min-height: 116px !important;
    padding: 10px 11px 9px !important;
    border-radius: 25px !important;
  }
  #chatForm.composer.is-expanded .composer-bottom,
  #chatForm.composer.is-generating .composer-bottom {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: minmax(42px, auto) 44px !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
    width: 100% !important;
  }
  #chatForm.composer.is-expanded #promptInput,
  #chatForm.composer.is-generating #promptInput {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    max-height: 112px !important;
    padding: 5px 3px 7px !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
  }
  #chatForm.composer.is-expanded .composer-tools,
  #chatForm.composer.is-generating .composer-tools {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    gap: 7px !important;
  }
  #chatForm.composer.is-expanded .composer-right,
  #chatForm.composer.is-generating .composer-right {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    gap: 6px !important;
  }
  #chatForm .composer-right .composer-model-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: min(29vw, 116px) !important;
    min-height: 36px !important;
    padding: 0 9px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    order: 0 !important;
  }
  #chatForm .composer-right #dictationButton {
    order: 1 !important;
  }
  #chatForm .composer-right #voiceChatButton {
    order: 2 !important;
    display: grid !important;
  }
  #chatForm .composer-right #sendButton {
    order: 3 !important;
  }
  #chatForm .composer-right .composer-voice-button,
  #chatForm .composer-right .send-button {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }
  #chatForm.composer.has-content:not(.is-expanded):not(.is-generating) .composer-model-chip {
    display: none !important;
  }
  #chatForm.composer.has-content:not(.is-generating) #voiceChatButton {
    display: grid !important;
  }
  #chatForm.composer.has-content:not(.is-expanded):not(.is-generating) .composer-right {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
}


/* Final mobile composer correction: model belongs beside + in the lower rail,
   never in the prompt row or floating above the composer. */
@media (max-width: 760px) {
  #chatForm .composer-tools {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    min-width: 0 !important;
  }
  #chatForm .composer-tools .composer-model-chip {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: none !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: min(34vw, 138px) !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    order: 1 !important;
  }
  #chatForm.composer.is-expanded .composer-tools .composer-model-chip,
  #chatForm.composer.is-generating .composer-tools .composer-model-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #chatForm.composer:not(.is-expanded):not(.is-generating) .composer-model-chip {
    display: none !important;
  }
  #chatForm.composer.is-expanded .composer-right,
  #chatForm.composer.is-generating .composer-right {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    min-width: 0 !important;
  }
  #chatForm .composer-right #sendButton {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #C56D4B !important;
    color: #fff !important;
    overflow: hidden !important;
  }
  #chatForm .composer-right #sendButton:not(.is-stop) svg {
    display: none !important;
  }
  #chatForm .composer-right #sendButton:not(.is-stop)::before {
    content: "↑" !important;
    display: block !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-size: 27px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
  }
  #chatForm .composer-right #sendButton.is-stop svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
  }
  #chatForm .composer-right #sendButton.is-stop::before {
    content: none !important;
  }
}


/* Desktop-only Claude-style composer and conversation treatment.
   Mobile layouts below 760px remain unchanged. */
@media (min-width: 761px) {
  /* New chat: roomy rectangular composer with the prompt above its tool rail. */
  #chatView:not(.has-messages) .composer-zone {
    width: min(740px, calc(100% - 48px)) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding: 0 0 18px !important;
  }
  #chatView .composer {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    min-height: 116px !important;
    height: auto !important;
    padding: 13px 15px 10px !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 20px !important;
    background: var(--surface) !important;
    box-shadow: 0 3px 16px rgba(35, 29, 22, .07) !important;
  }
  #chatView .composer-bottom {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: minmax(44px, auto) 38px !important;
    align-items: center !important;
    gap: 7px 12px !important;
    min-width: 0 !important;
  }
  #chatView #promptInput {
    display: block !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    max-height: 140px !important;
    margin: 0 !important;
    padding: 3px 2px 8px !important;
    resize: none !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text) !important;
    font: 15px/1.5 "DM Sans", "Outfit", system-ui, sans-serif !important;
  }
  #chatView #promptInput::placeholder {
    color: var(--muted) !important;
    opacity: 1 !important;
  }
  #chatView .composer-tools {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  #chatView .composer-plus-button {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
  }
  #chatView .composer-model-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 190px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #chatView .composer-right {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    min-width: 0 !important;
  }
  #chatView .composer-right .composer-voice-button,
  #chatView .composer-right .send-button {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }
  #chatView .composer-right .composer-voice-button {
    border: 0 !important;
    background: var(--surface-soft) !important;
    color: var(--muted) !important;
  }
  #chatView .composer-right .send-button.is-hidden {
    display: none !important;
  }

  /* Existing conversations: one slim row, while keeping the same controls available. */
  #chatView.has-messages .composer-zone {
    width: min(900px, calc(100% - 64px)) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 7px 0 14px !important;
  }
  #chatView.has-messages .composer {
    min-height: 62px !important;
    padding: 7px 11px !important;
    border-radius: 17px !important;
  }
  #chatView.has-messages .composer-bottom {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-rows: minmax(42px, auto) !important;
    gap: 8px !important;
  }
  #chatView.has-messages #promptInput {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 40px !important;
    max-height: 112px !important;
    padding: 8px 2px !important;
  }
  #chatView.has-messages .composer-tools {
    grid-column: 1 !important;
    grid-row: 1 !important;
    gap: 6px !important;
  }
  #chatView.has-messages .composer-plus-button {
    flex-basis: 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
  }
  #chatView.has-messages .composer-model-chip {
    max-width: 154px !important;
    min-height: 32px !important;
    padding-inline: 9px !important;
  }
  #chatView.has-messages .composer-right {
    grid-column: 3 !important;
    grid-row: 1 !important;
    gap: 5px !important;
  }

  /* Wider response lane, Claude-like serif reading size and left-aligned actions. */
  #chatView.has-messages #messages.messages {
    width: min(930px, calc(100% - 36px)) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
  #chatView.has-messages #messages > .message {
    width: 100% !important;
    max-width: 100% !important;
  }
  #chatView.has-messages #messages > .message.response {
    justify-content: flex-start !important;
  }
  #chatView.has-messages #messages > .message.response .message-content {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: min(890px, 100%) !important;
    margin-right: auto !important;
  }
  #chatView.has-messages #messages > .message.response .message-text {
    width: 100% !important;
    max-width: 100% !important;
    color: var(--text) !important;
    font-family: "Tiro Devanagari Hindi", Georgia, "Times New Roman", serif !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;
    overflow-wrap: break-word !important;
  }
  #chatView.has-messages #messages > .message.user {
    justify-content: flex-end !important;
  }
  #chatView.has-messages #messages > .message.user .message-content {
    flex: 0 1 auto !important;
    width: fit-content !important;
    max-width: min(76%, 720px) !important;
    margin-left: auto !important;
  }
  #chatView.has-messages #messages > .message.user .message-text {
    font-family: "DM Sans", "Outfit", system-ui, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
  #chatView.has-messages #messages > .message.response .message-actions {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 9px 0 0 !important;
    opacity: .08 !important;
    pointer-events: none !important;
    transform: translateY(-2px) !important;
    transition: opacity .14s ease, transform .14s ease !important;
  }
  #chatView.has-messages #messages > .message.response:hover .message-actions,
  #chatView.has-messages #messages > .message.response:focus-within .message-actions {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
  #chatView.has-messages #messages > .message.response .message-action-icon {
    display: inline-grid !important;
    place-items: center !important;
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--muted) !important;
    cursor: pointer !important;
  }
  #chatView.has-messages #messages > .message.response .message-action-icon:hover,
  #chatView.has-messages #messages > .message.response .message-action-icon.is-selected {
    background: var(--surface-soft) !important;
    color: var(--text) !important;
  }
  #chatView.has-messages #messages > .message.response .message-action-icon svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
  #chatView.has-messages #messages > .message.response [data-message-action="copy"] { order: 1; }
  #chatView.has-messages #messages > .message.response [data-message-action="speak"] { order: 2; }
  #chatView.has-messages #messages > .message.response [data-message-action="like"] { order: 3; }
  #chatView.has-messages #messages > .message.response [data-message-action="dislike"] { order: 4; }
}

@media (min-width: 761px) and (hover: none) {
  #chatView.has-messages #messages > .message.response .message-actions {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}

@media (min-width: 761px) {
  #chatView.has-messages #messages > .message.response [data-message-action="download"] { order: 5; }
  #chatView.has-messages #messages > .message.response [data-message-action="share"] { order: 6; }
  #chatView.has-messages #messages > .message.response [data-message-action="retry"] { order: 7; }
  #chatView.has-messages #messages > .message.response [data-message-action="sources"] { order: 8; }
}


/* Desktop composer correction: prompt on top, every action in one lower rail. */
@media (min-width: 761px) {
  #chatView:not(.has-messages) .composer {
    min-height: 116px !important;
    padding: 13px 15px 10px !important;
    gap: 8px !important;
  }
  #chatView:not(.has-messages) .composer-bottom {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: minmax(44px, auto) 36px !important;
    align-items: center !important;
    gap: 7px 12px !important;
  }
  #chatView:not(.has-messages) #promptInput {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-height: 44px !important;
    padding: 3px 2px 7px !important;
  }
  #chatView:not(.has-messages) .composer-tools {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    gap: 8px !important;
  }
  #chatView:not(.has-messages) .composer-right {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    min-width: 0 !important;
  }
  #chatView:not(.has-messages) .composer-right .composer-model-chip {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 165px !important;
    min-height: 33px !important;
    margin: 0 2px 0 0 !important;
    padding: 0 11px !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #chatView:not(.has-messages) .composer-right .composer-voice-button {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--surface-soft) !important;
    color: var(--muted) !important;
  }

  /* Keep the chat composer compact, with the same bottom-aligned action rail. */
  #chatView.has-messages .composer-bottom {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-rows: minmax(42px, auto) !important;
    gap: 8px !important;
  }
  #chatView.has-messages .composer-tools {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  #chatView.has-messages #promptInput {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 40px !important;
    padding: 8px 2px !important;
  }
  #chatView.has-messages .composer-right {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  #chatView.has-messages .composer-right .composer-model-chip {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: inline-flex !important;
    max-width: 145px !important;
    min-height: 32px !important;
    padding: 0 9px !important;
    margin: 0 !important;
  }

  /* Put the existing conversation menu in the upper-right corner of the chat canvas. */
  #chatView > .topbar-menu-wrap {
    position: absolute !important;
    top: 10px !important;
    right: 20px !important;
    z-index: 40 !important;
    display: flex !important;
    align-items: center !important;
    pointer-events: auto !important;
  }
  #chatView > .topbar-menu-wrap .topbar-menu-button {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--muted) !important;
  }
  #chatView > .topbar-menu-wrap .topbar-menu-button:hover,
  #chatView > .topbar-menu-wrap .topbar-menu-button[aria-expanded="true"] {
    border-color: var(--line) !important;
    background: var(--surface-soft) !important;
    color: var(--text) !important;
  }
  #chatView > .topbar-menu-wrap .topbar-menu-button svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
    stroke: none !important;
  }
  #chatView > .topbar-menu-wrap .topbar-menu {
    top: calc(100% + 7px) !important;
    right: 0 !important;
    z-index: 90 !important;
  }

  /* Refine the welcome mark: retain Dhwani's gradient waveform, remove the oversized tile. */
  #chatView:not(.has-messages) .hero-brand-mark {
    display: grid !important;
    place-items: center !important;
    position: relative !important;
    width: 76px !important;
    height: 76px !important;
    margin: 0 auto 14px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #chatView:not(.has-messages) .hero-brand-mark::before,
  #chatView:not(.has-messages) .hero-brand-mark::after {
    content: none !important;
    display: none !important;
    animation: none !important;
  }
  #chatView:not(.has-messages) .hero-brand-mark .hero-mark {
    display: block !important;
    width: 70px !important;
    height: 70px !important;
    object-fit: contain !important;
    filter: none !important;
  }
}


/* Align desktop chat menu with the left sidebar menu control. */
@media (min-width: 761px) {
  #chatView > .topbar-menu-wrap {
    top: -46px !important;
  }
}


/* Desktop Claude-style user bubbles and live work/preview split pane. */
@media (min-width: 761px) {
  #chatView.has-messages #messages > .message.user {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    width: 100% !important;
  }
  #chatView.has-messages #messages > .message.user .message-content {
    display: block !important;
    flex: 0 1 auto !important;
    width: fit-content !important;
    max-width: min(76%, 760px) !important;
    margin: 0 0 0 auto !important;
    padding: 10px 15px !important;
    border: 0 !important;
    border-radius: 16px 16px 5px 16px !important;
    background: #f1f1ef !important;
    color: #252525 !important;
    box-shadow: none !important;
  }
  #chatView.has-messages #messages > .message.user .message-text {
    width: auto !important;
    max-width: 100% !important;
    color: #252525 !important;
    font-family: "DM Sans", "Outfit", system-ui, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.58 !important;
    overflow-wrap: anywhere !important;
  }
  #chatView.has-messages #messages > .message.user .message-attachments { margin-top: 8px !important; }
  :root[data-theme="dark"] #chatView.has-messages #messages > .message.user .message-content {
    background: #303030 !important;
    color: #f0f0f0 !important;
  }
  :root[data-theme="dark"] #chatView.has-messages #messages > .message.user .message-text { color: #f0f0f0 !important; }

  #chatView.has-work-pane {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--bg) !important;
  }
  #chatView.has-work-pane > .chat-scroll {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 16px 20px 12px !important;
    border-right: 1px solid var(--line) !important;
  }
  #chatView.has-work-pane #messages.messages {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
  #chatView.has-work-pane .composer-zone {
    grid-column: 1 !important;
    grid-row: 2 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 18px 14px !important;
    transform: none !important;
    border-right: 1px solid var(--line) !important;
    background: var(--bg) !important;
  }
  #chatView.has-work-pane .composer { width: 100% !important; max-width: none !important; }
  #chatView.has-work-pane .quick-tags { display: none !important; }
  #chatView.has-work-pane > #cfWorkPane {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--surface) !important;
    color: var(--text) !important;
  }
  #chatView.has-work-pane > #cfWorkPane[hidden] { display: none !important; }
  #cfWorkPane .cf-work-pane-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
    min-height: 66px !important;
    padding: 11px 17px !important;
    border-bottom: 1px solid var(--line) !important;
    background: var(--surface) !important;
  }
  #cfWorkPane .cf-work-pane-heading {
    display: grid !important;
    min-width: 0 !important;
    gap: 3px !important;
  }
  #cfWorkPane .cf-work-pane-heading > span {
    color: var(--muted) !important;
    font-size: 9px !important;
    font-weight: 750 !important;
    letter-spacing: .12em !important;
  }
  #cfWorkPane .cf-work-pane-heading > strong {
    color: var(--text) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    overflow-wrap: anywhere !important;
  }
  #cfWorkPane .cf-work-pane-heading > small {
    color: var(--muted) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
  #cfWorkPane .cf-work-pane-header-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 9px !important;
  }
  #cfWorkPane .cf-work-pane-status {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 25px !important;
    padding: 0 9px !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    background: var(--surface-soft) !important;
    color: var(--muted) !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
  }
  #cfWorkPane .cf-work-pane-status.is-complete { color: #27845e !important; }
  #cfWorkPane .cf-work-pane-status.is-error { color: #b34c42 !important; }
  #cfWorkPane .cf-work-pane-status.is-stopped { color: var(--muted) !important; }
  #cfWorkPane #cfWorkPaneClose {
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--muted) !important;
    font-size: 21px !important;
    cursor: pointer !important;
  }
  #cfWorkPane #cfWorkPaneClose:hover { background: var(--surface-soft) !important; color: var(--text) !important; }
  #cfWorkPane .cf-work-pane-body {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #cfWorkPane .cf-work-activity {
    flex: 0 0 auto !important;
    max-height: 174px !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 11px 17px 9px !important;
    border-bottom: 1px solid var(--line) !important;
    background: var(--surface) !important;
  }
  #cfWorkPane .cf-work-section-label {
    margin-bottom: 7px !important;
    color: var(--muted) !important;
    font-size: 9px !important;
    font-weight: 750 !important;
    letter-spacing: .1em !important;
  }
  #cfWorkPane #cfWorkActivityList {
    display: grid !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  #cfWorkPane .cf-work-activity-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  #cfWorkPane .cf-work-activity-marker {
    display: grid !important;
    flex: 0 0 19px !important;
    place-items: center !important;
    width: 19px !important;
    height: 19px !important;
    border: 1px solid var(--line) !important;
    border-radius: 50% !important;
    background: var(--surface-soft) !important;
    color: var(--muted) !important;
    font-size: 11px !important;
    font-weight: 750 !important;
  }
  #cfWorkPane .cf-work-activity-item.is-complete .cf-work-activity-marker { color: #27845e !important; }
  #cfWorkPane .cf-work-activity-item.is-error .cf-work-activity-marker { color: #b34c42 !important; }
  #cfWorkPane .cf-work-activity-item.is-active .cf-work-activity-marker {
    color: var(--accent-strong) !important;
    border-color: var(--accent) !important;
    animation: cf-work-pulse 1.25s ease-in-out infinite !important;
  }
  #cfWorkPane .cf-work-activity-copy {
    display: grid !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 2px !important;
  }
  #cfWorkPane .cf-work-activity-copy strong {
    color: var(--text) !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.4 !important;
  }
  #cfWorkPane .cf-work-activity-copy small {
    color: var(--muted) !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
  }
  #cfWorkPane .cf-work-preview {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 12px !important;
    background: var(--bg) !important;
  }
  #cfWorkPane .cf-work-preview-toolbar {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 9px !important;
    min-height: 34px !important;
    padding: 0 3px 9px !important;
    color: var(--text) !important;
  }
  #cfWorkPane .cf-work-preview-toolbar strong {
    overflow: hidden !important;
    color: var(--text) !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #cfWorkPane .cf-work-preview-download {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 7px !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    font-size: 10px !important;
    text-decoration: none !important;
  }
  #cfWorkPane .cf-work-html-preview,
  #cfWorkPane .cf-work-pdf-preview {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 360px !important;
    height: 100% !important;
    border: 1px solid var(--line) !important;
    border-radius: 9px !important;
    background: #fff !important;
  }
  #cfWorkPane .cf-work-video-preview {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 260px !important;
    max-height: 100% !important;
    border-radius: 9px !important;
    background: #111 !important;
    object-fit: contain !important;
  }
  #cfWorkPane .cf-work-image-preview {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    object-fit: contain !important;
    border: 1px solid var(--line) !important;
    border-radius: 9px !important;
    background: var(--surface) !important;
  }
  #cfWorkPane .cf-work-preview-note {
    flex: 0 0 auto !important;
    margin: 7px 2px 0 !important;
    color: var(--muted) !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
  }
  #cfWorkPane .cf-work-preview-empty {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 230px !important;
    padding: 24px !important;
    color: var(--muted) !important;
    text-align: center !important;
  }
  #cfWorkPane .cf-work-preview-mark {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    margin-bottom: 11px !important;
    border-radius: 12px !important;
    background: var(--surface-soft) !important;
    color: var(--accent-strong) !important;
    font-size: 20px !important;
  }
  #cfWorkPane .cf-work-preview-empty strong {
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
  }
  #cfWorkPane .cf-work-preview-empty p {
    max-width: 34ch !important;
    margin: 6px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
  }
  #cfWorkPane .cf-work-pane-custom-content {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: auto !important;
    padding: 9px !important;
  }
  #cfWorkPane .cf-work-pane-custom-content .kie-video-studio {
    max-width: none !important;
    min-height: 100% !important;
  }
  #chatView.has-work-pane > .topbar-menu-wrap {
    right: calc(50% + 16px) !important;
  }
  @keyframes cf-work-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .58; transform: scale(.92); }
  }
}


/* Closed-alpha surface restrictions. Backend guards remain authoritative. */
#plusMenuButton,
#plusMenu,
[data-view="library"],
[data-profile-menu="library"],
[data-profile-menu="videos"],
[data-profile-menu="upgrade"],
#sidebarUpgrade,
#welcomeUpgrade,
.quick-tag[data-prompt="__open_wan_video__"] {
  display: none !important;
}