/* Deliberately scoped overrides: no viewport/composer geometry ownership here. */
.guest-account-notice { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 9px 16px; color: var(--text-secondary); background: var(--bg-secondary); border-bottom: 1px solid var(--border); font-size: 11px; line-height: 1.8; }
.guest-account-notice span { flex: 1 1 240px; }
.guest-account-notice a { color: var(--accent); white-space: nowrap; }
.guest-account-notice a[hidden] { display: none !important; }
.msg-assistant .msg-content { white-space: normal; }
.msg-assistant .msg-content pre, .msg-assistant .msg-content pre code { white-space: pre; }
.msg-generated-image, .chat-math.katex-block { display: block; }
body.app-shell .chat-main .btn-send:not(.is-stopping) { background: var(--accent) !important; color: #fff !important; }
body.app-shell .chat-main .btn-send:not(.is-stopping) > svg { display: block !important; stroke: currentColor; }
body.app-shell #modelMobileDropdown {
  position: fixed;
  z-index: 2110;
  right: auto;
  bottom: auto;
  transform: none !important;
  width: min(520px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(76dvh, 700px);
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  color: var(--text-primary);
  background: var(--bg-menu, var(--bg-secondary)) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
body.app-shell #modelMobileDropdown.show { display: flex !important; flex-direction: column; }
body.app-shell #modelMobileDropdown::before { display: none !important; }
.model-picker-toolbar { flex: none; padding: 16px 16px 10px; border-bottom: 1px solid var(--border); }
.model-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.model-picker-heading strong { font-size: 15px; }
.model-picker-close, .model-picker-favorite { appearance: none; border: 0; background: transparent; color: var(--text-secondary); font: inherit; cursor: pointer; flex: none; }
.model-picker-close { width: 36px; height: 36px; border-radius: 10px; font-size: 26px; line-height: 1; }
.model-picker-close:hover, .model-picker-favorite:hover { background: var(--bg-hover, var(--bg-tertiary)); }
#chatModelSearch { display: block; width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-primary); color: var(--text-primary); font: inherit; font-size: 16px; padding: 11px 13px; min-height: 44px; }
.model-picker-tabs { display: flex; gap: 5px; padding: 10px 0; }
.model-picker-tabs button { flex: 1; border: 1px solid transparent; border-radius: 9px; min-height: 36px; padding: 5px 7px; font: inherit; font-size: 12px; cursor: pointer; color: var(--text-secondary); background: var(--bg-primary); }
.model-picker-tabs button[aria-pressed="true"] { color: var(--text-primary); background: color-mix(in srgb, var(--accent) 20%, var(--bg-secondary)); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.model-picker-filters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.model-picker-filters select { width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 9px; padding: 8px 5px; background: var(--bg-primary); color: var(--text-secondary); font: inherit; font-size: 11px; min-height: 38px; }
#chatModelResultCount { color: var(--text-muted); font-size: 11px; margin-top: 9px; min-height: 17px; }
.model-guest-note { color: var(--text-secondary); font-size: 11px; line-height: 1.8; margin: 8px 0 0; }
.model-picker-results { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 7px; scrollbar-width: thin; }
.model-mobile-row { display: flex; align-items: stretch; border-radius: 13px; }
.model-mobile-row[hidden], .model-picker-empty[hidden] { display: none !important; }
.model-mobile-row .model-mobile-item { flex: 1; min-width: 0; width: auto; text-align: start; }
.model-mobile-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; flex: 1; }
.model-mobile-copy .model-mobile-name { white-space: normal; overflow-wrap: anywhere; }
.model-mobile-copy small { font-size: 10px; font-weight: 400; color: var(--text-muted); }
.model-mobile-item:disabled { cursor: not-allowed; flex-wrap: wrap; }
.model-mobile-item:disabled > :not(.gift-lock-label) { opacity: .45; filter: grayscale(1); }
.model-mobile-item:disabled .gift-lock-label { flex-basis: 100%; color: #ef4444; filter: none; font-size: 11px; font-weight: 600; text-align: start; }
.mp-card[data-gift-locked="1"] { cursor: not-allowed; background: var(--bg-tertiary); }
.mp-card[data-gift-locked="1"] .mp-card-head,.mp-card[data-gift-locked="1"] .mp-card-desc { opacity: .45; filter: grayscale(1); }
.model-dropdown-item[data-gift-locked="1"] { cursor: not-allowed; }
.model-dropdown-item[data-gift-locked="1"] .model-dropdown-name,.model-dropdown-item[data-gift-locked="1"] .model-dropdown-icon { opacity: .45; filter: grayscale(1); }
.model-mobile-row .model-picker-favorite { min-width: 42px; min-height: 44px; border-radius: 12px; font-size: 23px; }
.model-picker-favorite[aria-pressed="true"] { color: var(--accent-light, var(--accent)); }
.model-picker-empty { text-align: center; padding: 24px 14px; color: var(--text-secondary); font-size: 13px; line-height: 1.9; }
body.app-shell #modelMobileDropdown :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-main button.tool-item { appearance: none; width: 100%; border: 0; font: inherit; text-align: start; color: var(--text-primary); background: transparent; cursor: pointer; }
.chat-main button.tool-item:hover, .chat-main button.tool-item.active { background: var(--bg-menu-hover, var(--bg-hover)); }
.tool-item-description { display: block; font-size: 10px; font-weight: 400; color: var(--text-muted); line-height: 1.6; white-space: normal; margin-top: 3px; }
.attachment-inspection { display: block; max-width: 260px; color: var(--text-secondary); font-size: 10px; line-height: 1.65; white-space: normal; overflow-wrap: anywhere; }
.attachment-upload-error { color: var(--danger, #ef6464); white-space: normal; font-size: 11px; line-height: 1.7; }
.file-format-choice { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.file-format-choice select { font: inherit; color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; min-height: 34px; padding: 5px 8px; }
.request-error-detail { margin: 12px 0 0; padding: 11px 13px; color: var(--text-primary); border: 1px solid color-mix(in srgb, #e98a43 45%, var(--border)); background: color-mix(in srgb, #e98a43 8%, var(--bg-secondary)); border-radius: 12px; font-size: 13px; line-height: 1.8; white-space: normal; }
.chat-main .selected-tool-badge { font: inherit; cursor: pointer; }
@media (min-width: 769px) {
  body.app-shell #toolMenu, body.app-shell #toolSubmenu {
    width: 480px;
    min-width: 480px;
    max-width: calc(100vw - 32px);
    padding: 12px;
    border-radius: 18px;
    max-height: min(72vh, 640px);
    overflow-y: auto;
    inset-inline-start: 0;
    inset-inline-end: auto;
    bottom: calc(100% + 8px);
  }
  body.app-shell #toolMenu .tool-item, body.app-shell #toolSubmenu .tool-item {
    padding: 12px 14px;
    gap: 14px;
    min-height: 48px;
  }
  body.app-shell #toolMenu .tool-item-label, body.app-shell #toolSubmenu .tool-item-label,
  body.app-shell #toolMenu .tool-item-description, body.app-shell #toolSubmenu .tool-item-description {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
  body.app-shell #toolMenu .tool-item-hint, body.app-shell #toolSubmenu .tool-item-hint {
    white-space: nowrap;
    flex-shrink: 0;
  }
}
@media (max-width: 768px) {
  /* Perspective must not change when focus/keyboard state changes: otherwise
     fixed children anchor to the chat panel rather than the real viewport. */
  body.app-shell .chat-main { perspective: none !important; }
  body.app-shell .chat-main .header-left > .wallet-pill { min-width: 106px !important; max-width: 116px !important; padding-inline: 6px !important; gap: 3px !important; }
  body.app-shell .chat-main .header-left > .wallet-pill span { overflow: visible; text-overflow: clip; font-size: 10px !important; }
  body.app-shell #modelMobileDropdown {
    position: fixed !important;
    inset: auto 8px calc(var(--mobile-nav-h, 62px) + env(safe-area-inset-bottom) + 8px) 8px !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    max-height: min(72dvh, 650px) !important;
    z-index: 2110 !important;
    inset-block-start: auto !important;
    inset-block-end: calc(var(--mobile-nav-h, 62px) + env(safe-area-inset-bottom) + 8px) !important;
    inset-inline: 8px !important;
    transform: none !important;
  }
  body.app-shell .chat-main .model-picker { min-width: 0 !important; flex: 1 1 auto; }
  body.app-shell .chat-main .model-picker-btn { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding: 7px 6px !important; gap: 4px !important; }
  body.app-shell .chat-main .model-picker-btn span#currentModelName { display: block !important; min-width: 0 !important; max-width: none !important; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px !important; }
  body.app-shell .chat-main #currentModelIcon { width: 17px !important; height: 17px !important; flex: none; }
  body.app-shell .chat-main .model-picker-btn > svg { width: 12px; flex: none; }
  .model-picker-toolbar { padding: 10px 12px 8px; }
  .model-picker-tabs { padding-block: 7px; }
  .model-mobile-row .model-mobile-item { padding: 10px 8px !important; gap: 8px; }
  .chat-main .composer-right { gap: 4px; }
  .chat-main #knBtn { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { body.app-shell #modelMobileDropdown { transition: none !important; } }