/* Chatbot page – Cars on Site look + dark / light / pink themes.
   Visual-only overrides loaded AFTER output.css + tsb-custom.css. No JS hooks depend on this file.
   Colours come from the variables below, so each theme only changes the variables. */
:root {
  --c-bg: #0f0f0f; --c-surface: #1a1a1a; --c-surface-2: #141414; --c-input: #1a1a1a;
  --c-border: #333; --c-border-strong: #444; --c-text: #f5f7fa; --c-muted: #a3a3a3;
  --c-accent: #FFD700; --c-accent-text: #FFD700; --c-accent-fg: #000;
  --c-accent-grad: linear-gradient(135deg, #D4AF37, #FFD700, #B8860B);
  --c-accent-soft: rgba(255,215,0,0.12); --c-line: rgba(255,215,0,0.55);
  --c-shadow: 0 2px 10px rgba(0,0,0,0.35); --c-overlay: rgba(0,0,0,0.75);
  --c-user-msg: #1e1e1e; --c-bot-msg: #161616;
  --c-ok: #4ade80; --c-bad: #f87171; /* pass / fail text that stays readable on each surface */
}
html.theme-light {
  --c-bg: #f4f5f7; --c-surface: #ffffff; --c-surface-2: #f8f9fb; --c-input: #ffffff;
  --c-border: #e3e6eb; --c-border-strong: #cfd4dc; --c-text: #1f2328; --c-muted: #5f6b7a;
  --c-accent: #e2b400; --c-accent-text: #a98000; --c-accent-fg: #000;
  --c-accent-grad: linear-gradient(135deg, #f2b900, #ffd21f, #e8a900);
  --c-accent-soft: #fff6cc; --c-line: rgba(226,180,0,0.6);
  --c-shadow: 0 1px 2px rgba(16,24,40,0.05), 0 1px 3px rgba(16,24,40,0.07); --c-overlay: rgba(15,23,42,0.45);
  --c-user-msg: #fff8db; --c-bot-msg: #ffffff;
  --c-ok: #15803d; --c-bad: #b91c1c;
}
html.theme-pink {
  --c-bg: #fdf6f9; --c-accent: #ec4899; --c-accent-text: #be185d; --c-accent-fg: #fff;
  --c-accent-grad: linear-gradient(135deg, #db2777, #ec4899, #be185d);
  --c-accent-soft: #fce7f3; --c-line: rgba(244,114,182,0.7); --c-user-msg: #fdf2f8; --c-border: #f5d0e1;
  --c-ok: #15803d; --c-bad: #b91c1c;
}

/* ---------- Page & fonts ---------- */
body.chat-page { font-family: 'Montserrat', sans-serif; background: var(--c-bg) !important; color: var(--c-text) !important; }
.chat-page .text-white { color: var(--c-text) !important; }
.chat-page .text-gold, .chat-page .text-\[\#FFD700\] { color: var(--c-accent-text) !important; }
.chat-page .text-gray-300 { color: var(--c-muted) !important; }

/* ---------- Top bar (tools header) ---------- */
.chat-page .tools-header-container .right-tools > button,
.chat-page .tools-header-container .right-tools > a.settings-icon,
.chat-page .tools-header-container .right-tools > .settings-menu-wrap > .settings-icon {
  white-space: nowrap; flex: 0 0 auto; text-decoration: none;
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 12px !important; background: var(--c-surface) !important; border: 1px solid var(--c-border-strong) !important;
  color: var(--c-accent-text) !important; font-size: 1rem !important; padding: 0 12px !important;
  box-shadow: var(--c-shadow); transition: border-color .15s, background .15s, transform .15s;
}
.chat-page .tools-header-container .right-tools > button:hover,
.chat-page .tools-header-container .right-tools > a.settings-icon:hover,
.chat-page .tools-header-container .right-tools > .settings-menu-wrap > .settings-icon:hover { border-color: var(--c-accent) !important; transform: translateY(-1px); }
/* Gear menu (same classes as Cars on Site; its colours come from the --dp-* variables each theme sets). Keep it inside the screen on phones. */
.chat-page .settings-menu { min-width: 230px; max-height: calc(100dvh - 90px); overflow-y: auto; z-index: 1001; }
.chat-page .settings-menu .settings-menu-item { min-height: 40px; }
/* Usage dialog (Mastertech): cards in a grid; colours come from the same --dp-* variables as the other pop-ups */
.chat-page .usage-box { max-width: 560px; }
.chat-page .usage-sub { margin: -4px 0 12px; font-size: .8rem; color: var(--dp-muted); }
.chat-page .usage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.chat-page .usage-card { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--dp-border); background: var(--dp-hover); min-height: 108px; }
.chat-page .usage-card-head { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--dp-muted); }
.chat-page .usage-card-head i { color: var(--dp-accent); }
.chat-page .usage-card-value { margin-top: 8px; font-size: 1.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--dp-fg); }
.chat-page .usage-card-sub { margin-top: 2px; font-size: .78rem; color: var(--dp-muted); }
.chat-page .usage-bar { margin-top: 8px; height: 6px; border-radius: 999px; background: var(--dp-border); overflow: hidden; }
.chat-page .usage-bar-fill { height: 100%; border-radius: 999px; background: var(--dp-accent); }
.chat-page .usage-bar-fill.warn { background: #d97706; }
.chat-page .usage-bar-fill.bad { background: #dc2626; }
.chat-page .usage-card-error { margin-top: 10px; display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; line-height: 1.35; color: #dc2626; }
.chat-page .usage-note { margin-top: 12px; font-size: .78rem; color: var(--dp-muted); }
.chat-page .usage-error { color: #dc2626; }
.chat-page .usage-actions { gap: 10px; }
@media (max-width: 479.98px) { .chat-page .usage-grid { grid-template-columns: 1fr; } .chat-page .usage-card { min-height: 0; } }
.chat-page #clear-chat-btn i { color: #ef4444; }
.chat-page #clear-chat-btn:hover { border-color: #ef4444 !important; }
/* Page header text: title + one small line (model and TSB count), then the user's name, like Cars on Site */
.chat-page .left-tools { min-width: 0; margin-left: 20px; }
.chat-page .chat-topbar-title { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.15; color: var(--c-accent-text); }
.chat-page .chat-topbar-sub { margin: 2px 0 0; font-size: .85rem; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-page .chat-topbar-sub .ai-model, .chat-page .chat-topbar-sub .tsb-count { font-weight: 600; color: var(--c-muted); }
.chat-page .chat-topbar-user { flex: 1; text-align: center; font-size: 1.1rem; font-weight: 600; color: var(--c-accent-text); }
.chat-page .tools-header-container .right-tools { margin-right: 22px; }

/* ---------- Main card ---------- */
.chat-page .chat-container { background: var(--c-surface) !important; border: 1px solid var(--c-border); border-radius: 16px !important; box-shadow: var(--c-shadow) !important; }
.chat-page .chat-container::before, .chat-page .chat-header::after,
.chat-page .input-container::before, .chat-page .input-container::after { background: linear-gradient(to right, transparent, var(--c-line), transparent) !important; }
.chat-page .chat-header { background: var(--c-surface) !important; box-shadow: none !important; border-bottom: 1px solid var(--c-border); }
.chat-page .header-title { background: none !important; -webkit-text-fill-color: currentColor; color: var(--c-accent-text) !important; text-shadow: none !important; filter: none !important; letter-spacing: .06em; }
.chat-page .header-title::after { display: none; }
html.theme-light .chat-page .header-logo, html.theme-light .header-logo { filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.chat-page .save-tsb-button, .chat-page .send-button { background: var(--c-accent-grad) !important; color: var(--c-accent-fg) !important; border-radius: 10px !important; }
/* Clear Chat: red-outlined button on the right of the chat card header */
.chat-page .clear-chat-button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px;
  background: transparent; color: var(--c-accent-text); border: 1px solid var(--c-border-strong); font-weight: 600; font-size: .9rem; transition: border-color .15s, background .15s; }
.chat-page .clear-chat-button:hover { background: rgba(239,68,68,.1); }

/* ---------- Chat area ---------- */
.chat-page .chat-box { background: var(--c-surface-2) !important; color: var(--c-text) !important; }
.chat-page .chat-box .bot-message, .chat-page .chat-box .tsb-message, .chat-page .chat-box .user-message {
  color: var(--c-text); border: 1px solid var(--c-border); border-radius: 14px; box-shadow: var(--c-shadow); animation: chatMsgIn .18s ease-out; }
.chat-page .chat-box .bot-message, .chat-page .chat-box .tsb-message { background: var(--c-bot-msg); }
.chat-page .chat-box .user-message { background: var(--c-user-msg); }
.chat-page .chat-box .bot-message::before, .chat-page .chat-box .bot-message::after,
.chat-page .chat-box .tsb-message::before, .chat-page .chat-box .tsb-message::after,
.chat-page .chat-box .user-message::before, .chat-page .chat-box .user-message::after { background: linear-gradient(to right, transparent, var(--c-line), transparent); }
@keyframes chatMsgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .chat-page .chat-box > * { animation: none !important; } }
html.theme-light .kw-diagnostics { background: none; -webkit-text-fill-color: var(--c-accent-text); color: var(--c-accent-text); }
html.theme-light .tsb-header, html.theme-light .edit-tsb, html.theme-light .tsb-print, html.theme-light .result-strong { color: var(--c-accent-text) !important; }

/* ---------- Input ---------- */
.chat-page .input-container { background: var(--c-surface) !important; gap: 8px; }
.chat-page #user-input { background: var(--c-input) !important; color: var(--c-text) !important; border: 1px solid var(--c-border-strong) !important; border-radius: 12px !important; box-shadow: none !important; }
.chat-page #user-input:focus { border-color: var(--c-accent) !important; box-shadow: 0 0 0 3px var(--c-accent-soft) !important; }
.chat-page #user-input::placeholder { color: var(--c-muted) !important; }
.chat-page .send-button { height: 44px; min-width: 44px; }

/* ---------- Mode chips ---------- */
.chat-page .mode-btn, .chat-page #modes-toggle { background: var(--c-surface) !important; color: var(--c-text) !important; border: 1px solid var(--c-border-strong); }
.chat-page .mode-btn:hover { border-color: var(--c-accent); }
.chat-page .mode-btn[data-active="true"] { background: var(--c-accent-grad) !important; color: var(--c-accent-fg) !important; border-color: transparent; --tw-ring-color: transparent !important; }
.chat-page #modes-menu { background: var(--c-surface) !important; border: 1px solid var(--c-border); }

/* ---------- Pop-ups (TSB form, delete, logout, clear, gallery) ---------- */
.chat-page .popup, .chat-page .popup-content, .chat-page #tsb-form-popup,
.chat-page #logout-notice > div, .chat-page #clear-chat-notice > div, .chat-page #tsb-image-gallery > div {
  background: var(--c-surface) !important; color: var(--c-text) !important; border: 1px solid var(--c-border) !important; border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.35) !important; }
.chat-page #tsb-form-popup { border-top: 3px solid var(--c-accent) !important; }
.chat-page #tsb-form-popup input, .chat-page #tsb-form-popup textarea, .chat-page #tsb-form-popup select {
  background: var(--c-input) !important; color: var(--c-text) !important; border: 1px solid var(--c-border-strong) !important; box-shadow: none !important; }
.chat-page #tsb-form-popup input:focus, .chat-page #tsb-form-popup textarea:focus { border-color: var(--c-accent) !important; box-shadow: 0 0 0 3px var(--c-accent-soft) !important; }
.chat-page #tsb-form-popup h2, .chat-page .popup h2, .chat-page #logout-title, .chat-page #clear-title, .chat-page .gold-title {
  background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--c-accent-text) !important; }
.chat-page #form-overlay, .chat-page #tools-overlay, .chat-page #logout-notice { background: var(--c-overlay) !important; }
.chat-page .bg-gold { background: var(--c-accent-grad) !important; color: var(--c-accent-fg) !important; }
.chat-page .bg-gray-800 { background: var(--c-surface-2) !important; color: var(--c-text) !important; }
.chat-page .border-gold { border-color: var(--c-accent) !important; }
.chat-page #tsb-image-gallery > div > div:first-child { background: var(--c-surface-2) !important; }
.chat-page .gallery-thumbnail.active, .chat-page .gallery-thumbnail:hover { border-color: var(--c-accent); }
/* TSB form banners (error and image limit) are built in tsb_service.js with fixed dark Tailwind colours; use the theme instead (--c-bad: red that reads on each theme) */
.chat-page .form-validation-error, .chat-page .image-limit-warning { background: var(--c-surface-2) !important; border-color: var(--c-bad) !important; }
.chat-page .form-validation-error p, .chat-page .image-limit-warning p:first-child { color: var(--c-bad) !important; }
.chat-page .form-validation-error i, .chat-page .image-limit-warning i { background: none !important; -webkit-text-fill-color: currentColor; color: var(--c-bad); }
.chat-page .form-validation-error button, .chat-page .image-limit-warning button { color: var(--c-muted) !important; }
.chat-page .form-validation-error button:hover, .chat-page .image-limit-warning button:hover { color: var(--c-text) !important; }
.chat-page .image-limit-warning p.text-gray-400 { color: var(--c-muted) !important; }
/* Privacy / Terms links come from a shared footer with a fixed grey; follow the theme here */
.chat-page .kw-legal-footer { color: var(--c-muted); opacity: .85; }

/* ---------- Side panels (Tools right, Settings left) ---------- */
.chat-page .tools-panel { background: var(--c-bg) !important; color: var(--c-text); padding: 0 !important; }
.chat-page .tools-panel > .absolute { background: linear-gradient(to bottom, transparent, var(--c-line), transparent) !important; }
.chat-page .tools-panel .tools-header {
  position: sticky; top: 0; z-index: 5; margin: 0 !important; padding: 16px 18px; background: var(--c-surface); border-bottom: 1px solid var(--c-border); box-shadow: var(--c-shadow); }
.chat-page .tools-main-header { background: none !important; -webkit-text-fill-color: currentColor; color: var(--c-accent-text) !important; font-size: 1.4rem !important; }
.chat-page #close-tools, .chat-page #close-settings { width: 40px; height: 40px; font-size: 1.1rem !important; border-radius: 12px; border: 1px solid var(--c-border-strong); background: var(--c-surface-2); color: var(--c-accent-text) !important; }
.chat-page #close-tools:hover, .chat-page #close-settings:hover { transform: none; border-color: var(--c-accent); }
.chat-page .tools-panel .tools-content { padding: 16px 18px 40px; color: var(--c-text) !important; }
.chat-page .tools-content > * + * { margin-top: 12px !important; }
.chat-page .tp-group-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); margin: 22px 4px 6px !important; }
.chat-page .tp-link { display: flex !important; align-items: center; gap: 12px; text-align: left !important; padding: 14px 16px !important; font-size: 1rem !important;
  border-radius: 14px !important; background: var(--c-accent-grad) !important; color: var(--c-accent-fg) !important; transform: none !important; }
.chat-page .tp-link:hover { filter: brightness(1.05); }
.chat-page .tp-link .tp-arrow { margin-left: auto; font-size: .85rem; }

/* Collapsible groups = cards */
.chat-page .tools-content details { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; box-shadow: var(--c-shadow); overflow: hidden; transition: border-color .15s; }
.chat-page .tools-content details[open] { border-color: var(--c-line); }
.chat-page .tools-content details details { box-shadow: none; background: var(--c-surface-2); border-radius: 10px; }
.chat-page .tools-section-header, .chat-page .tools-sub-header {
  list-style: none; display: flex !important; align-items: center; gap: 10px; background: transparent !important; color: var(--c-text) !important;
  padding: 14px 16px !important; border-radius: 0 !important; font-size: 1rem !important; font-weight: 700; min-height: 48px; user-select: none; }
.chat-page .tools-sub-header { font-size: .9rem !important; padding: 11px 14px !important; min-height: 44px; font-weight: 600; }
.chat-page .tools-section-header::-webkit-details-marker, .chat-page .tools-sub-header::-webkit-details-marker { display: none; }
.chat-page .tools-section-header::after, .chat-page .tools-sub-header::after {
  content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--c-muted); border-bottom: 2px solid var(--c-muted);
  transform: rotate(45deg); transition: transform .2s; flex-shrink: 0; }
.chat-page details[open] > .tools-section-header::after, .chat-page details[open] > .tools-sub-header::after { transform: rotate(225deg); }
.chat-page .tools-section-header:hover, .chat-page .tools-sub-header:hover { background: var(--c-accent-soft) !important; }
.chat-page .tp-ico { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--c-accent-soft); color: var(--c-accent-text); font-size: .9rem; }
.chat-page details > .tool-section, .chat-page details > div:not(.tool-section) { margin: 0 !important; padding: 4px 16px 16px; }
.chat-page details details > div { padding: 4px 14px 14px !important; margin: 0 !important; }
.chat-page .tools-content details > .tool-section > * + * { margin-top: 12px !important; }

/* Rows: label above input on narrow panels, side-by-side when room */
.chat-page .conversion-row { gap: 10px !important; }
.chat-page .conversion-row > .label { width: 9.5rem !important; flex-shrink: 0; color: var(--c-muted) !important; font-weight: 600; font-size: .82rem; }
.chat-page .tool-input { background: var(--c-input) !important; color: var(--c-text) !important; border: 1px solid var(--c-border-strong); border-radius: 10px !important;
  padding: 9px 12px !important; min-width: 0; font-size: .9rem !important; box-shadow: none !important; --tw-ring-color: transparent !important; }
.chat-page .tool-input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft) !important; }
.chat-page .tool-input:disabled { opacity: .55; }
.chat-page select.tool-input { appearance: none; -webkit-appearance: none; padding-right: 2.2rem !important; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right .8rem center !important; background-size: 12px !important; }
.chat-page .tools-content .gold-button, .chat-page .tools-content .red-button { border-radius: 10px !important; padding: 9px 18px !important; font-size: .9rem !important; min-height: 40px; transform: none !important; }
.chat-page .tools-content .gold-button { background: var(--c-accent-grad) !important; color: var(--c-accent-fg) !important; }
.chat-page .tools-content .red-button { background: transparent !important; color: #ef4444 !important; border: 1px solid #ef4444; box-shadow: none; }
.chat-page .tools-content .red-button:hover { background: rgba(239,68,68,.1) !important; }
.chat-page .result-box, .chat-page #ac-result { background: var(--c-surface-2) !important; border: 1px solid var(--c-border); border-radius: 12px !important; color: var(--c-text); }
.chat-page #ac-result:empty { display: none; }
.chat-page .ac-ok { color: var(--c-ok); }
.chat-page .ac-bad { color: var(--c-bad); }
.chat-page .tool-input.ac-invalid { border-color: var(--c-bad) !important; }
.chat-page .tools-content .tool-note { color: var(--c-muted) !important; }
.chat-page .tools-diagnostic-header { background: none !important; -webkit-text-fill-color: currentColor; color: var(--c-accent-text) !important; font-size: 1rem !important; }
.chat-page .tools-content [class*="text-[var(--gray-"] { color: var(--c-text) !important; }

@media (max-width: 479.98px) {
  .chat-page .conversion-row:has(> .label) { flex-direction: column; align-items: stretch !important; gap: 4px !important; }
  .chat-page .conversion-row > .label { width: auto !important; }
  .chat-page .tools-panel { max-width: 100% !important; }
  .chat-page .tools-content .conversion-row > button { flex: 1; }
}

/* ---------- Themed dropdown (chat-select.js) ---------- */
.chat-select-pop { position: fixed; z-index: 100000; max-height: min(300px, 50vh); overflow-y: auto; padding: 4px; border-radius: 12px;
  background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border-strong); box-shadow: 0 10px 30px rgba(0,0,0,.3); animation: chatSelIn .12s ease-out; font-size: .9rem; }
.chat-select-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.chat-select-opt:hover { background: var(--c-accent-soft); }
.chat-select-opt.is-selected { color: var(--c-accent-text); font-weight: 700; }
@media (pointer: coarse) { .chat-select-opt { min-height: 44px; font-size: 15px; } }
@keyframes chatSelIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ---------- Theme button (top bar) ---------- */
.chat-page #theme-toggle-btn { width: 40px; padding: 0 !important; }

/* ---------- Phone app bar (< 640px): one slim sticky row, the Cars on Site pattern ---------- */
@media (max-width: 639.98px) {
  body.chat-page { display: flex !important; flex-direction: column; align-items: stretch !important; justify-content: flex-start !important;
    padding: 0 !important; min-height: 100dvh; }
  .chat-page .tools-header-container {
    position: sticky !important; top: 0 !important; transform: none !important; translate: none !important;
    max-width: none !important; width: 100% !important; margin: 0 !important; z-index: 40 !important;
    display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 6px;
    min-height: 56px; padding: calc(env(safe-area-inset-top) + 8px) 10px 8px !important;
    background: var(--c-bg); border-bottom: 1px solid var(--c-border); }
  .chat-page .left-tools { flex: 1 1 auto; margin: 0 !important; }
  .chat-page .chat-topbar-title { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chat-page .chat-topbar-sub { font-size: .7rem; }
  .chat-page .tools-header-container .right-tools { margin: 0 !important; gap: 6px !important; flex: 0 0 auto; flex-wrap: nowrap; }
  .chat-page .tools-header-container .right-tools > button,
  .chat-page .tools-header-container .right-tools > .settings-menu-wrap > .settings-icon { width: 40px !important; min-width: 40px; height: 40px !important; padding: 0 !important; font-size: 16px !important; }
  /* Username chip, like Cars on Site */
  .chat-page .chat-topbar-user { order: 3; flex: 0 1 auto; min-width: 0; max-width: 32%; font-size: 13px; padding: 5px 10px;
    border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-accent-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chat-page .tools-header-container .right-tools { order: 2; }

  /* Chat card fills the rest of the screen; its header is a slim single row */
  .chat-page .chat-container { margin: 0 !important; height: auto !important; flex: 1 1 auto; min-height: 0; max-height: calc(100dvh - 57px);
    border-radius: 0 !important; border-left: 0; border-right: 0; border-top: 0; }
  .chat-page .chat-header { position: relative; min-height: 48px; max-height: none !important; padding: 6px 10px !important; display: flex; align-items: center; }
  .chat-page .chat-header .left-header { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); margin: 0 !important; z-index: 2; }
  .chat-page .chat-header .right-header { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 2; }
  .chat-page .clear-chat-button { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .chat-page .header-title { font-size: 1.05rem !important; padding: 0 48px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chat-page .save-tsb-button { width: 36px; height: 36px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; }
  .chat-page .save-tsb-button[style*="none"] { display: none !important; }
  .chat-page .save-tsb-button span { display: none !important; }
}
/* Very narrow phones: the username chip would squeeze the title, so it goes (the gear menu still has everything) */
@media (max-width: 359.98px) {
  .chat-page .chat-topbar-user { display: none; }
  .chat-page .tools-header-container .right-tools { gap: 4px !important; }
}

/* Desktop/tablet: title block, user in the middle, icon buttons on the right. The card sits a little lower to make room for the title block. */
@media (min-width: 640px) {
  .chat-page .tools-header-container { top: 14px !important; }
  .chat-page .tools-header-container .right-tools { gap: 10px !important; flex-wrap: nowrap; }
  .chat-page .chat-container { margin-top: 74px !important; height: calc(100vh - 98px) !important; }
}

/* "Search the web" tick in the input area (Mastertech by default) */
.chat-page .web-search-tick { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: 6px; height: 36px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-accent-text);
  font-size: .78rem; font-weight: 600; white-space: nowrap; cursor: pointer; user-select: none; }
.chat-page .web-search-tick input { width: 15px; height: 15px; accent-color: #eab308; margin: 0; cursor: pointer; }
.chat-page .web-search-tick:has(input:checked) { border-color: var(--c-accent); background: var(--c-accent-soft); }
@media (max-width: 639.98px) { .chat-page .web-search-tick span { display: none; } .chat-page .web-search-tick { padding: 0 8px; } }
.chat-page .web-sources { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--c-border); font-size: .85rem; }
.chat-page .web-sources-title { margin: 0 0 4px; font-weight: 700; color: var(--c-muted); }
.chat-page .web-sources ol { margin: 0; padding-left: 20px; list-style: decimal; }
.chat-page .web-sources a, .chat-page .web-sources a:visited { color: #4da3ff; -webkit-text-fill-color: #4da3ff; text-decoration: none; word-break: break-all; }
.chat-page .web-sources a:hover, .chat-page .web-sources a:focus-visible { text-decoration: underline; }
html.theme-light .chat-page .web-sources a, html.theme-light .chat-page .web-sources a:visited,
html.theme-pink .chat-page .web-sources a, html.theme-pink .chat-page .web-sources a:visited { color: #0b63ce; -webkit-text-fill-color: #0b63ce; }