:root {
  --ink: #080a0c;
  --ink-raised: #0e1214;
  --graphite: #171d20;
  --user-bubble: #4a525c;
  --line: rgba(230, 237, 233, 0.13);
  --text: #f0f3ed;
  --muted: #9ba59f;
  --gold: #e9bd62;
  --gold-soft: #ffc95a;
  --cyan: #67edf5;
  --magenta: #ed71ca;
  --green: #77dc99;
  --amber: #eab760;
  --shell: min(1180px, calc(100% - 48px));
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
a[hidden] { display: none !important; }

/* Universal scrollbar styling for all scrollable elements */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) rgba(0,0,0,0.2); }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 3px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
*::-webkit-scrollbar-corner { background: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  color: var(--text);
  background: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}
::selection { color: var(--ink); background: var(--gold-soft); }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 4px; }

.skip-link { position: fixed; left: 16px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--text); color: var(--ink); font-weight: 800; text-decoration: none; border-radius: 4px; }
.skip-link:focus { top: 16px; }
.shell { width: var(--shell); margin-inline: auto; }
.section { padding: 132px 0; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 22px; color: var(--cyan); font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .17em; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(119, 220, 153, .13), 0 0 16px var(--green); animation: pulse 2.4s ease-in-out infinite; }
h1, h2, h3, p { margin-top: 0; }
h2 { margin-bottom: 22px; font-size: clamp(2.35rem, 4.4vw, 4.75rem); line-height: .98; letter-spacing: -.065em; max-width: 850px; }
h2 em { color: var(--gold); font-style: normal; }

.topbar { position: fixed; z-index: 5; top: 0; left: 0; width: 100%; height: 76px; padding: 0 max(24px, calc((100vw - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.09); background: linear-gradient(180deg, rgba(4, 6, 7, .62), transparent); transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease; }
.topbar.is-scrolled { background: rgba(4, 6, 7, .92); backdrop-filter: blur(14px); border-bottom-color: rgba(255,255,255,.14); }
.page-restore-overlay { position: fixed; z-index: 4; inset: 76px 0 0; display: none; place-items: center; padding: 24px; background: rgba(4,7,9,.64); backdrop-filter: blur(8px) saturate(.8); opacity: 0; transition: opacity .18s ease; pointer-events: all; }
.page-restore-overlay[hidden] { display: none; }
html.page-restore-pending .page-restore-overlay,
.page-restore-overlay.is-visible,
.page-restore-overlay.is-closing { display: grid; }
html.page-restore-pending .page-restore-overlay,
.page-restore-overlay.is-visible { opacity: 1; }
.page-restore-overlay.is-closing { opacity: 0; pointer-events: none; }
.page-restore-card { width: min(100%, 390px); display: grid; justify-items: center; gap: 9px; padding: 26px 28px; text-align: center; border: 1px solid rgba(103,237,245,.28); border-radius: 10px; background: linear-gradient(145deg, rgba(13,22,25,.92), rgba(12,17,19,.78)); box-shadow: 0 20px 60px rgba(0,0,0,.34), 0 0 42px rgba(103,237,245,.09); }
.page-restore-paw { width: 34px; height: 34px; display: grid; place-items: center; color: var(--cyan); font-size: 30px; line-height: 1; text-shadow: 0 0 18px rgba(103,237,245,.55); animation: pageRestorePulse 1.15s ease-in-out infinite; }
.page-restore-kicker { margin: 0; color: var(--cyan); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; }
.page-restore-card strong { font-size: 19px; letter-spacing: -.025em; }
.page-restore-card > span:last-child { color: var(--muted); font-size: 13px; line-height: 1.55; }
@keyframes pageRestorePulse { 50% { transform: scale(.72); opacity: .48; } }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .15em; text-decoration: none; }
.brand-logo { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: center; border: 1.5px solid var(--gold); vertical-align: middle; }
.lang-switcher { display: inline-flex; align-items: center; gap: 8px; margin-left: 28px; margin-right: 20px; }
.lang-btn { display: inline-flex; opacity: .5; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.22); background: rgba(10,13,15,.6); backdrop-filter: blur(8px); cursor: pointer; font-size: 0; overflow: hidden; padding: 0; transition: border-color .2s, background .2s, box-shadow .2s; }
.lang-btn:hover { border-color: var(--gold); background: rgba(233,189,98,.12); }
.lang-btn.active { opacity: 1; border-color: var(--gold); background: rgba(233,189,98,.18); box-shadow: 0 0 12px rgba(233,189,98,.25); }
.flag { display: block; width: 100%; height: 100%; object-fit: cover; }
.nav-status { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.nav-status span:first-child { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); flex-shrink: 0; }
.nav-status[data-state="degraded"] span:first-child { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.nav-status[data-state="offline"] span:first-child { background: #f06d6d; box-shadow: 0 0 10px rgba(240,109,109,.75); }
.nav-status[data-state="unknown"] span:first-child { background: #91a09a; box-shadow: 0 0 10px rgba(145,160,154,.55); }
.brand-mark { width: 19px; height: 15px; display: inline-flex; align-items: end; gap: 2px; }
.brand-mark i { display: block; width: 5px; border-radius: 4px 4px 1px 1px; background: var(--gold); transform: rotate(-18deg); }
.brand-mark i:nth-child(1) { height: 9px; }.brand-mark i:nth-child(2) { height: 15px; }.brand-mark i:nth-child(3) { height: 7px; }
.topbar nav { display: flex; gap: 28px; margin-left: auto; margin-right: 32px; }
.topbar nav a { color: #d7ddd7; font-size: 13px; font-weight: 650; text-decoration: none; transition: color .2s ease; }
.topbar nav a:hover { color: var(--gold-soft); }
.topbar nav a { position: relative; }
.topbar nav a.active { color: var(--gold); }
.topbar nav a.active::after { content: ""; position: absolute; bottom: -6px; left: 0; width: 100%; height: 2px; background: var(--gold); border-radius: 1px; }
.mobile-nav-toggle { display: none; }

.hero { isolation: isolate; position: relative; min-height: max(650px, 88svh); display: grid; align-items: center; overflow: hidden; background: #05080a; }
.hero-image { position: absolute; z-index: -3; inset: 0; background: url("banner.jpg") center 42% / cover no-repeat; filter: saturate(.96) contrast(1.1) brightness(.77); transform: scale(1.025); transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
.hero:hover .hero-image { transform: scale(1.055); }
.hero-shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(3, 6, 8, .95) 0%, rgba(4, 7, 9, .69) 37%, rgba(4, 7, 9, .12) 72%), linear-gradient(0deg, #080a0c 0%, transparent 26%, rgba(2,4,6,.15) 100%); }
.scanlines { position: absolute; z-index: -1; inset: 0; opacity: .3; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 1px, transparent 1px, transparent 5px); mix-blend-mode: overlay; pointer-events: none; }
.scanlines::after { content: ""; position: absolute; left: 0; width: 100%; height: 15%; background: linear-gradient(180deg, transparent, rgba(103,237,245,.11), transparent); animation: scan 8s linear infinite; }
.fiber-orbit { position: absolute; z-index: -1; border: 1px solid rgba(103, 237, 245, .26); border-radius: 50%; filter: drop-shadow(0 0 7px rgba(103,237,245,.35)); opacity: .6; pointer-events: none; }
.orbit-one { width: min(55vw, 740px); height: min(55vw, 740px); right: -24vw; top: -26vw; border-left-color: transparent; transform: rotate(-35deg); animation: orbit 18s linear infinite; }
.orbit-two { width: min(39vw, 510px); height: min(39vw, 510px); right: 10vw; bottom: -27vw; border-color: rgba(237,113,202,.31); border-right-color: transparent; transform: rotate(44deg); animation: orbit 22s linear infinite reverse; }
.orbit-three { width: min(28vw, 360px); height: min(28vw, 360px); right: 35vw; top: -8vw; border-color: rgba(233,189,98,.22); border-top-color: transparent; transform: rotate(12deg); animation: orbit 14s linear infinite; }
.orbit-four { width: min(18vw, 240px); height: min(18vw, 240px); right: -6vw; bottom: 8vw; border-color: rgba(103,237,245,.18); border-bottom-color: transparent; transform: rotate(-60deg); animation: orbit 10s linear infinite reverse; }
.orbit-five { width: min(45vw, 600px); height: min(45vw, 600px); left: -18vw; top: 10vw; border-color: rgba(237,113,202,.15); border-left-color: transparent; transform: rotate(75deg); animation: orbit 26s linear infinite; }

.orbit-six { width: min(22vw, 300px); height: min(22vw, 300px); left: 25vw; top: -12vw; border-color: rgba(119,220,153,.18); border-bottom-color: transparent; transform: rotate(33deg); animation: orbit 16s linear infinite reverse; }
.orbit-seven { width: min(32vw, 440px); height: min(32vw, 440px); right: -10vw; top: 22vw; border-color: rgba(103,237,245,.14); border-right-color: transparent; transform: rotate(-18deg); animation: orbit 20s linear infinite; }
.hero-content { padding-top: 82px; padding-bottom: 94px; }
.hero h1 { margin: 0 0 16px; font-size: clamp(4.6rem, 12vw, 10.2rem); line-height: .78; letter-spacing: -.095em; text-shadow: 0 6px 40px rgba(0,0,0,.3); }
.cursor { display: inline-block; margin-left: .16em; color: #f0f3ed; font-weight: 350; animation: blink 1.1s step-end infinite; }
.hero-lead { max-width: 540px; margin-top: 40px; margin-bottom: 32px; color: #dde5df; font-size: clamp(1.05rem, 1.5vw, 1.23rem); line-height: 1.55; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 18px; border: 1px solid transparent; border-radius: 5px; font-size: 13px; font-weight: 760; text-decoration: none; transition: transform .2s, background .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { gap: 17px; color: #14120d; background: var(--gold); box-shadow: 0 10px 30px rgba(233,189,98,.16); }.button-primary:hover { background: #f4cd77; }
.button-primary span { font-size: 19px; line-height: 0; }.button-quiet { color: #ecf1ed; border-color: rgba(255,255,255,.28); background: rgba(10,13,15,.22); backdrop-filter: blur(8px); }.button-quiet:hover { border-color: var(--cyan); background: rgba(11,20,23,.54); }
.hero-readout { position: absolute; right: max(24px, calc((100vw - 1180px) / 2)); bottom: 55px; width: 300px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.42); font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.readout-line { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.13); }.readout-line span { color: #aab4ae; }.readout-line strong { color: #f2f5f1; font-weight: 600; text-align: right; }
.scroll-cue { position: absolute; left: max(24px, calc((100vw - 1180px) / 2)); bottom: 31px; display: flex; align-items: center; gap: 10px; color: #d0d9d3; font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-decoration: none; }
.scroll-arrow { position: relative; width: 29px; height: 7px; flex-shrink: 0; }
.scroll-arrow::before { content: ""; position: absolute; top: 3px; left: 0; width: 29px; height: 1px; background: var(--gold); }
.scroll-arrow::after { content: ""; position: absolute; right: 0; top: 0; width: 7px; height: 7px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: rotate(-45deg); }

.section-heading { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, .52fr); column-gap: 110px; align-items: end; margin-bottom: 52px; }.section-heading .eyebrow, .section-heading h2 { grid-column: 1; }.section-heading p:last-child { grid-column: 2; grid-row: 1 / span 2; margin-bottom: 3px; color: var(--muted); font-size: 15px; }
.capabilities { background: var(--ink); padding-top: 72px; }.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.capability-card { position: relative; min-height: 305px; padding: 25px; overflow: hidden; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,255,255,.026), transparent 65%); transition: background .28s ease, box-shadow .28s ease; }.capability-card::before { content: ""; position: absolute; pointer-events: none; inset: 0; opacity: 0; background: radial-gradient(370px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(103,237,245,.14), transparent 44%); transition: opacity .28s; }.capability-card:hover { background: #101719; box-shadow: inset 0 0 0 1px rgba(103,237,245,.33); }.capability-card:hover::before { opacity: 1; }
.card-index { position: absolute; top: 19px; right: 20px; color: #6e7a74; font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }.card-icon { position: relative; width: 46px; height: 46px; margin: 27px 0 31px; color: var(--cyan); }.card-icon::after { content: ""; position: absolute; inset: 0; border: 1px solid currentColor; border-radius: 50%; opacity: .34; }.capability-card:nth-child(2n) .card-icon { color: var(--magenta); }.capability-card:nth-child(3n) .card-icon { color: var(--gold); }
.icon-claw { display: flex; align-items: center; justify-content: center; gap: 5px; }.icon-claw span { width: 5px; height: 21px; border-radius: 50% 50% 2px 2px; background: currentColor; transform: rotate(-19deg); }.icon-claw span:nth-child(2) { height: 28px; transform: translateY(-4px); }.icon-claw span:nth-child(3) { transform: rotate(19deg); }
.icon-discord span { position: absolute; width: 8px; height: 8px; background: currentColor; border-radius: 50%; top: 17px; }.icon-discord span:first-child { left: 11px; }.icon-discord span:nth-child(2) { right: 11px; }.icon-discord span:nth-child(3) { width: 20px; height: 10px; background: transparent; border-bottom: 2px solid currentColor; left: 13px; top: 24px; border-radius: 50%; }.icon-radar span { position: absolute; width: 22px; height: 22px; top: 12px; left: 12px; border-radius: 50%; border: 2px solid currentColor; }.icon-radar span::after { content: ""; position: absolute; width: 11px; height: 1px; background: currentColor; left: 50%; top: 50%; transform-origin: left center; animation: radar 2.5s linear infinite; }.icon-route span { position: absolute; width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 50%; }.icon-route span:nth-child(1) { left: 7px; top: 9px; }.icon-route span:nth-child(2) { right: 8px; bottom: 8px; }.icon-route span:nth-child(3) { left: 17px; top: 20px; width: 14px; height: 1px; border: 0; border-top: 1px dashed currentColor; transform: rotate(43deg); }.icon-play::before { content: ""; position: absolute; left: 18px; top: 13px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid currentColor; }.icon-social span { position: absolute; width: 7px; height: 7px; border-radius: 50%; border: 2px solid currentColor; background: transparent; }
.icon-social span:nth-child(1) { left: 9px; top: 10px; }
.icon-social span:nth-child(2) { right: 9px; top: 10px; }
.icon-social span:nth-child(3) { left: 50%; bottom: 10px; transform: translateX(-50%); }
.icon-social span:nth-child(1)::after { content: ""; position: absolute; width: 12px; height: 2px; background: currentColor; top: 2px; left: 5px; transform: rotate(30deg); }
.icon-social span:nth-child(2)::after { content: ""; position: absolute; width: 12px; height: 2px; background: currentColor; top: 2px; right: 5px; transform: rotate(-30deg); }
.icon-social span:nth-child(3)::before { content: ""; position: absolute; width: 10px; height: 2px; background: currentColor; top: -5px; left: -2px; transform: rotate(90deg); }
.capability-card h3 { position: relative; margin-bottom: 9px; font-size: 18px; letter-spacing: -.035em; }.capability-card p { position: relative; max-width: 310px; margin-bottom: 23px; color: var(--muted); font-size: 13px; line-height: 1.55; }.card-tag { position: absolute; bottom: 20px; left: 25px; color: #cbd4ce; font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }

.operating { position: relative; overflow: hidden; padding: 134px 0; background: #111719; }.operating::before { content: ""; position: absolute; inset: 0; opacity: .34; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 60px 60px; mask-image: linear-gradient(90deg, black, transparent 75%); }.operating-grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: center; }.operating-copy p:last-child { max-width: 475px; color: var(--muted); font-size: 16px; }.principles { border-top: 1px solid rgba(255,255,255,.18); }.principles article { display: grid; grid-template-columns: 56px 1fr; gap: 17px; padding: 24px 0 22px; border-bottom: 1px solid rgba(255,255,255,.18); }.principles article > span { color: var(--cyan); font: 700 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }.principles h3 { margin: 0 0 5px; font-size: 17px; letter-spacing: -.025em; }.principles p { margin: 0; color: var(--muted); font-size: 14px; }

.origin { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(330px, .8fr); justify-content: space-between; gap: clamp(60px, 10vw, 150px); align-items: center; }.origin-art { position: relative; max-width: 412px; margin-left: 33px; }.origin-art::before { content: ""; position: absolute; z-index: -1; left: -33px; bottom: -31px; width: 78%; height: 79%; border-left: 1px solid var(--cyan); border-bottom: 1px solid var(--cyan); opacity: .55; }.origin-art img { display: block; width: 100%; aspect-ratio: 1 / 1.1; object-fit: cover; object-position: center; filter: saturate(.84) contrast(1.09); }.origin-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(103,237,245,.15), transparent 39%, rgba(233,189,98,.1)); mix-blend-mode: color; pointer-events: none; }.image-label { position: absolute; z-index: 1; right: -50px; bottom: 23px; padding: 7px 10px; background: var(--ink); color: var(--muted); font: 9px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }.image-label strong { color: var(--text); font-weight: 500; }.art-reticle { position: absolute; z-index: 2; width: 19px; height: 19px; border-color: var(--gold); border-style: solid; }.reticle-a { top: 18px; left: 18px; border-width: 1px 0 0 1px; }.reticle-b { right: 18px; bottom: 18px; border-width: 0 1px 1px 0; }.origin-copy { max-width: 510px; }.origin-copy > p:not(.eyebrow) { color: var(--muted); font-size: 15px; }.origin-copy strong { color: var(--gold); }.origin-note { display: flex; align-items: center; gap: 14px; margin-top: 32px; }.note-line { width: 40px; height: 1px; background: var(--magenta); }.origin-note p { margin: 0; color: #aeb8b1; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }.origin-note b { color: var(--text); font-weight: 600; }

.cockpit { position: relative; overflow: hidden; padding: 118px 0; background: #0b1011; }.cockpit-backdrop { position: absolute; inset: 0; background: url("banner.jpg") center / cover no-repeat; opacity: .19; filter: grayscale(.4) saturate(.75); }.cockpit-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0b1011 2%, rgba(11,16,17,.82) 45%, #0b1011); }.cockpit-layout { position: relative; display: grid; grid-template-columns: .83fr 1fr; gap: 100px; align-items: center; }.cockpit-intro p:last-child { max-width: 360px; margin-bottom: 0; color: var(--muted); }.status-panel { position: relative; max-width: 548px; justify-self: end; padding: 19px; border: 1px solid rgba(152,229,218,.34); border-radius: 7px; background: rgba(9,16,17,.82); box-shadow: 0 25px 80px rgba(0,0,0,.38), inset 0 0 45px rgba(103,237,245,.045); backdrop-filter: blur(15px); }.status-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(103,237,245,.025) 3px, rgba(103,237,245,.025) 4px); }.panel-topline, .panel-footer { position: relative; display: flex; justify-content: space-between; color: #acbcb4; font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .11em; }.live { color: var(--green); }.live i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); }.live[data-state="degraded"] { color: var(--amber); }.live[data-state="degraded"] i { background: var(--amber); box-shadow: 0 0 9px var(--amber); }.live[data-state="offline"] { color: #f06d6d; }.live[data-state="offline"] i { background: #f06d6d; box-shadow: 0 0 9px rgba(240,109,109,.78); }.live[data-state="unknown"] { color: #a8b2ad; }.live[data-state="unknown"] i { background: #a8b2ad; box-shadow: 0 0 9px rgba(168,178,173,.5); }.panel-main { position: relative; display: flex; align-items: center; gap: 16px; padding: 27px 0 23px; border-bottom: 1px solid var(--line); }.avatar-frame { position: relative; width: 68px; height: 68px; overflow: hidden; border: 1px solid var(--gold); border-radius: 5px; }.avatar-frame::after { content: ""; position: absolute; inset: 0; border: 3px solid rgba(233,189,98,.12); }.avatar-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }.panel-kicker { margin: 0 0 4px; color: var(--cyan); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }.panel-main h3 { margin: 0; font-size: 25px; letter-spacing: -.04em; }.panel-main h3 span { color: var(--green); font-size: 12px; vertical-align: middle; }.panel-main h3 span.identity-state-degraded { color: var(--amber); }.panel-main h3 span.identity-state-offline { color: #f06d6d; }.panel-main h3 span.identity-state-unknown { color: #a8b2ad; }.panel-subline { margin: 0; color: var(--muted); font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }.metric-row { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 20px 0; border-bottom: 1px solid var(--line); }.metric-row > div { display: grid; gap: 5px; padding-left: 14px; border-left: 1px solid var(--line); }.metric-row > div:first-child { padding-left: 0; border-left: 0; }.metric-row strong { color: var(--gold); font-size: 27px; line-height: 1; letter-spacing: -.06em; }.metric-row span { color: var(--muted); font: 9px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }.system-list { position: relative; padding: 10px 0; }.system-list div { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 9px; align-items: center; min-height: 28px; color: #d9e1db; font-size: 12px; }.system-list span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.system-list b { color: var(--muted); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-align: right; white-space: nowrap; }.health-dot { width: 6px; height: 6px; border-radius: 50%; }.health-dot.good, .health-dot.online { background: var(--green); box-shadow: 0 0 7px rgba(119,220,153,.75); }.health-dot.warm, .health-dot.degraded { background: var(--amber); box-shadow: 0 0 7px rgba(234,183,96,.75); }.health-dot.offline { background: #f06d6d; box-shadow: 0 0 7px rgba(240,109,109,.75); }.health-dot.unknown { background: #a8b2ad; box-shadow: 0 0 7px rgba(168,178,173,.45); }.status-meta { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 0 12px; color: #8e9993; font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em; }.status-meta b { color: #d4ddd7; font-weight: 700; }.panel-footer { padding-top: 13px; border-top: 1px solid var(--line); }.signal-bars { display: flex; align-items: end; gap: 3px; height: 11px; }.signal-bars i { width: 3px; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); transition: opacity .25s ease, filter .25s ease; }.signal-bars i.is-muted { opacity: .2; filter: grayscale(1); box-shadow: none; }.signal-bars i:nth-child(1) { height: 3px; }.signal-bars i:nth-child(2) { height: 6px; }.signal-bars i:nth-child(3) { height: 9px; }.signal-bars i:nth-child(4) { height: 6px; }.signal-bars i:nth-child(5) { height: 11px; }

.account { background: #080a0c; }
.account-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 22px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(103,237,245,.035)); }
.account-panel[data-auth-state="authenticated"] { border-color: rgba(119,220,153,.45); }
.account-panel[data-auth-state="setup"] { border-color: rgba(234,183,96,.35); }
.account-copy h3 { margin: 0 0 7px; font-size: 24px; letter-spacing: -.035em; }
.account-copy p:last-child { margin: 0; color: var(--muted); }
.account-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.button.is-disabled { opacity: .55; cursor: not-allowed; transform: none; }
.account-details { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.account-details div { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: rgba(0,0,0,.18); }
.account-details span { display: block; margin-bottom: 6px; color: var(--muted); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.account-details b { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 13px; }

footer { padding: 27px 0; background: #060809; border-top: 1px solid var(--line); }.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #96a29a; font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .07em; }.footer-inner p { display: inline-flex; align-items: center; gap: 8px; margin: 0; }.footer-inner p:last-child { color: #748079; text-align: right; }
.footer-links { display: flex; gap: 24px; align-items: center; margin-top: 8px; }
.footer-link { color: var(--muted); font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .07em; text-decoration: none; transition: color .2s; }
.footer-link:hover { color: var(--gold); }
.version { color: #748079; font-size: 9px; letter-spacing: .05em; margin-top: 4px; }


.reveal { opacity: 0; transform: translateY(24px); transition: opacity .72s cubic-bezier(.16, 1, .3, 1), transform .72s cubic-bezier(.16, 1, .3, 1); }.reveal.is-visible { opacity: 1; transform: translateY(0); }.capability-card:nth-child(2), .principles article:nth-child(2) { transition-delay: .06s; }.capability-card:nth-child(3), .principles article:nth-child(3) { transition-delay: .12s; }.capability-card:nth-child(4), .principles article:nth-child(4) { transition-delay: .04s; }.capability-card:nth-child(5) { transition-delay: .1s; }.capability-card:nth-child(6) { transition-delay: .16s; }
@keyframes scan { from { transform: translateY(-110%); } to { transform: translateY(700%); } } @keyframes orbit { to { transform: rotate(325deg); } } @keyframes pulse { 50% { opacity: .42; transform: scale(.78); } } @keyframes blink { 50% { opacity: 0; } } @keyframes radar { to { transform: rotate(360deg); } }

@media (max-width: 850px) { .topbar { height: 66px; }.page-restore-overlay { top: 66px; }.topbar nav { display: none; }.nav-status { font-size: 9px; }.hero { min-height: max(640px, 92svh); }.hero-image { background-position: 58% center; }.hero-shade { background: linear-gradient(90deg, rgba(3,6,8,.94) 0%, rgba(3,6,8,.55) 87%), linear-gradient(0deg, #080a0c 0%, transparent 27%); }.hero-readout { right: 24px; bottom: 40px; }.scroll-cue { left: 24px; }.section { padding: 96px 0; }.capabilities { padding-top: 78px; }.section-heading, .operating-grid, .cockpit-layout { grid-template-columns: 1fr; gap: 34px; }.section-heading p:last-child { grid-column: 1; grid-row: auto; max-width: 520px; }.capability-grid { grid-template-columns: repeat(2, 1fr); }.operating-grid { gap: 43px; }.origin { grid-template-columns: minmax(260px, 410px) 1fr; gap: 52px; }.status-panel { justify-self: stretch; max-width: none; }.cockpit-layout { gap: 45px; }.account-panel { grid-template-columns: 1fr; }.account-actions { justify-content: flex-start; }.account-details { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { :root { --shell: min(100% - 36px, 1180px); }.topbar { padding-inline: 18px; }.brand { font-size: 12px; }.nav-status { font-size: 0; }.nav-status span { width: 9px; height: 9px; }.hero { min-height: 690px; }.hero-image { background-position: 63% center; }.hero-shade { background: linear-gradient(90deg, rgba(3,6,8,.94) 0%, rgba(3,6,8,.58) 100%), linear-gradient(0deg, #080a0c 0%, transparent 32%); }.hero-content { padding-top: 42px; padding-bottom: 155px; }.hero h1 { font-size: clamp(4.1rem, 21vw, 6.3rem); }.hero-lead { max-width: 335px; font-size: 16px; }.button { min-height: 44px; padding: 10px 14px; font-size: 12px; }.hero-readout { left: 18px; right: 18px; bottom: 34px; width: auto; }.scroll-cue { display: none; }.orbit-one { width: 420px; height: 420px; right: -250px; top: -120px; }.orbit-three { display: none; }.orbit-five { display: none; }.orbit-six { display: none; }.orbit-seven { display: none; } h2 { font-size: clamp(2.5rem, 13vw, 3.5rem); }.section { padding: 77px 0; }.capabilities { padding-top: 54px; }.section-heading { margin-bottom: 39px; }.capability-grid { grid-template-columns: 1fr; }.capability-card { min-height: 265px; }.operating { padding: 79px 0; }.principles article { grid-template-columns: 39px 1fr; padding: 19px 0; }.origin { grid-template-columns: 1fr; gap: 65px; }.origin-art { width: calc(100% - 30px); margin-left: 30px; }.image-label { right: -18px; }.origin-copy { max-width: none; }.cockpit { padding: 78px 0; }.metric-row strong { font-size: 24px; }.metric-row > div { padding-left: 9px; }.metric-row span { font-size: 8px; }.system-list div { font-size: 11px; }.account-details { grid-template-columns: 1fr; }.dashboard-status-note { grid-template-columns: 1fr; }.dashboard-status-overlay { padding: 22px; }.dashboard-status-overlay-content h3 { font-size: clamp(26px, 11vw, 40px); }.footer-inner { align-items: flex-start; flex-direction: column; gap: 11px; }.footer-inner p:last-child { text-align: left; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { opacity: 1; transform: none; transition: none; }.scanlines::after, .fiber-orbit, .pulse-dot, .cursor, .icon-radar span::after { animation: none; }.hero-image { transition: none; }.capability-card, .button { transition: none; } }

/* Dashboard styles */
.dashboard-panel { 
  display: grid; 
  gap: 20px; 
  padding: 22px; 
  border: 1px solid rgba(119,220,153,.45); 
  border-radius: 7px; 
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(103,237,245,.035)); 
  margin-top: 20px;
  position: relative;
  overflow: hidden;
}

/* Dashboard status overlay - pending/suspended */
.dashboard-status-overlay {
  position: relative;
  z-index: 10;
  display: block;
  padding: clamp(24px, 4vw, 42px);
  min-height: 220px;
  border: 1px solid rgba(234,183,96,.28);
  border-radius: 7px;
  background: radial-gradient(circle at 18% 0%, rgba(234,183,96,.16), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.05), rgba(103,237,245,.025));
  overflow: hidden;
}

.dashboard-status-overlay[data-status="pending"] {
  border-color: rgba(234,183,96,.38);
  background: radial-gradient(circle at 18% 0%, rgba(234,183,96,.2), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.05), rgba(103,237,245,.025));
}

.dashboard-status-overlay[data-status="suspended"] {
  border-color: rgba(240,109,109,.4);
  background: radial-gradient(circle at 18% 0%, rgba(240,109,109,.18), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.04), rgba(240,109,109,.035));
}

.dashboard-status-overlay-content {
  display: grid;
  align-content: center;
  gap: 14px;
  min-height: 168px;
  max-width: 720px;
}

.dashboard-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 6px 16px;
  border-radius: 999px;
  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-status-badge[data-status="pending"] {
  background: rgba(234,183,96,.15);
  color: var(--amber);
  border: 1px solid rgba(234,183,96,.3);
  box-shadow: 0 0 20px rgba(234,183,96,.1);
}

.dashboard-status-badge[data-status="suspended"] {
  background: rgba(240,109,109,.15);
  color: #f06d6d;
  border: 1px solid rgba(240,109,109,.3);
  box-shadow: 0 0 20px rgba(240,109,109,.1);
}

.dashboard-status-overlay-content h3 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(28px, 4.5vw, 54px);
  line-height: .95;
  letter-spacing: -0.03em;
}

.dashboard-status-overlay-content h3[data-status="pending"] {
  color: var(--amber);
}

.dashboard-status-overlay-content h3[data-status="suspended"] {
  color: #f06d6d;
}

.dashboard-status-overlay-content p {
  margin: 0;
  max-width: 620px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.dashboard-status-note {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
  max-width: 760px;
}

.dashboard-status-note span {
  display: block;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 7px;
  background: rgba(0,0,0,.18);
  color: var(--text);
  font: 700 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Light theme overlays */
html[data-theme="light"] .dashboard-status-overlay {
  background: radial-gradient(circle at 18% 0%, rgba(199,139,42,.18), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,255,255,.42));
}

html[data-theme="light"] .dashboard-status-overlay[data-status="suspended"] {
  background: radial-gradient(circle at 18% 0%, rgba(198,40,40,.12), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.46));
}

html[data-theme="light"] .dashboard-status-overlay-content h3[data-status="pending"] {
  color: #b8860b;
}

html[data-theme="light"] .dashboard-status-overlay-content h3[data-status="suspended"] {
  color: #c62828;
}

html[data-theme="light"] .dashboard-status-badge[data-status="pending"] {
  background: rgba(234,183,96,.12);
  color: #8b6914;
  border-color: rgba(234,183,96,.25);
}

html[data-theme="light"] .dashboard-status-badge[data-status="suspended"] {
  background: rgba(240,109,109,.1);
  color: #c62828;
  border-color: rgba(240,109,109,.2);
}

html[data-theme="light"] .dashboard-status-note span {
  background: rgba(255,255,255,.5);
  border-color: rgba(22,28,31,.12);
  color: #141817;
}

.dashboard-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dashboard-header .dashboard-header-left { min-width: 0; }
.dashboard-header .dashboard-header-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dashboard-header h3 { margin: 0; font-size: 24px; letter-spacing: -.035em; }
.workspace-status { padding: 4px 12px; border-radius: 12px; font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.workspace-status[data-workspace-status="pending"] { background: rgba(234,183,96,.2); color: var(--amber); }
.workspace-status[data-workspace-status="active"] { background: rgba(119,220,153,.2); color: var(--green); }
.workspace-status[data-workspace-status="suspended"] { background: rgba(240,109,109,.2); color: #f06d6d; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.metric-card { padding: 16px; border: 1px solid var(--line); border-radius: 5px; background: rgba(0,0,0,.18); }
.metric-label { display: block; margin-bottom: 8px; color: var(--muted); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.metric-value { display: flex; align-items: baseline; gap: 4px; font-size: 24px; }
.metric-value b { color: var(--gold); font-size: 28px; }
.metric-value span { color: var(--muted); font-size: 14px; }
.metric-bar { width: 100%; height: 4px; background: var(--line); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.metric-fill { height: 100%; background: var(--green); border-radius: 2px; transition: width .3s ease; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); display: inline-block; margin-right: 6px; }
.status-dot.active { background: var(--green); box-shadow: 0 0 8px rgba(119,220,153,.5); }
.dashboard-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.button-premium { color: var(--ink); background: linear-gradient(135deg, var(--gold), #f4cd77); border: none; }
.button-premium:hover { background: linear-gradient(135deg, #f4cd77, var(--gold)); transform: translateY(-2px); }
.dashboard-note { color: var(--muted); font-size: 13px; }
.dashboard-note p { margin: 0; }
.login-success { animation: loginPulse 2s ease; }
@keyframes loginPulse { 0%, 100% { border-color: rgba(119,220,153,.45); } 50% { border-color: rgba(119,220,153,.9); box-shadow: 0 0 20px rgba(119,220,153,.2); } }

/* Personal workspace overview: compact operational overview, not a generic billing card. */
.workspace-identity { margin: 7px 0 0; color: var(--muted); font: 700 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .045em; overflow-wrap: anywhere; }
.workspace-overview { display: grid; grid-template-columns: minmax(220px, 1.35fr) repeat(2, minmax(170px, 1fr)); gap: 12px; }
.workspace-overview > article { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(103,237,245,.025)); }
.workspace-usage-card { position: relative; overflow: hidden; }
.workspace-usage-card::after { content: ''; position: absolute; width: 130px; height: 130px; right: -54px; bottom: -78px; border: 1px solid rgba(103,237,245,.16); border-radius: 50%; box-shadow: 0 0 0 18px rgba(103,237,245,.025), 0 0 0 36px rgba(103,237,245,.018); pointer-events: none; }
.workspace-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.workspace-card-head .metric-label { margin: 0; }
.workspace-usage-percent { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; color: var(--cyan); background: rgba(103,237,245,.1); font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.workspace-usage-value, .workspace-health-value, .workspace-plan-value { display: flex; align-items: baseline; gap: 5px; min-height: 42px; margin-top: 7px; }
.workspace-usage-value b { color: var(--gold); font-size: 31px; line-height: 1; letter-spacing: -.06em; }
.workspace-usage-value span { color: var(--muted); font-size: 17px; }
.workspace-usage-card .metric-bar { position: relative; z-index: 1; margin-top: 9px; }
.workspace-card-caption { position: relative; z-index: 1; margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.workspace-health-value b { color: var(--text); font-size: 24px; letter-spacing: -.035em; text-transform: capitalize; }
.workspace-health-value .status-dot { flex: 0 0 auto; width: 9px; height: 9px; margin: 0 3px 0 0; }
.workspace-plan-value b { color: var(--gold); font-size: 24px; letter-spacing: -.035em; text-transform: capitalize; }
.plan-orb { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(234,183,96,.35); border-radius: 50%; color: var(--gold); background: rgba(234,183,96,.09); font-size: 13px; }
.workspace-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.workspace-shortcut { display: flex; align-items: center; min-width: 0; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: rgba(0,0,0,.12); text-align: left; text-decoration: none; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.workspace-shortcut:hover, .workspace-shortcut:focus-visible { border-color: rgba(103,237,245,.48); background: rgba(103,237,245,.075); color: var(--text); outline: none; transform: translateY(-1px); }
.workspace-shortcut-icon { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 6px; color: var(--cyan); background: rgba(103,237,245,.1); font: 700 16px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.workspace-shortcut span:last-child { display: grid; min-width: 0; gap: 2px; }
.workspace-shortcut b { overflow: hidden; font-size: 12px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.workspace-shortcut small { overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="light"] .workspace-overview > article { background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(234,245,241,.56)); }
html[data-theme="light"] .workspace-shortcut { background: rgba(255,255,255,.58); }
html[data-theme="light"] .workspace-shortcut:hover, html[data-theme="light"] .workspace-shortcut:focus-visible { background: rgba(226,245,240,.88); border-color: rgba(10,118,126,.35); }
html[data-theme="light"] .workspace-usage-percent { color: #087b87; background: rgba(10,118,126,.1); }

@media (max-width: 760px) { .workspace-overview { grid-template-columns: 1fr 1fr; }.workspace-usage-card { grid-column: 1 / -1; }.workspace-shortcuts { grid-template-columns: 1fr; }.workspace-shortcut { padding: 13px; } }
@media (max-width: 390px) { .workspace-overview { grid-template-columns: 1fr; }.workspace-usage-card { grid-column: auto; } }

/* Installed workspace capabilities: disclosure cards keep the overview
   compact while still explaining what each actual permission is good for. */
.workspace-capabilities { display:grid; gap:14px; padding:17px; border:1px solid rgba(103,237,245,.24); border-radius:9px; background:linear-gradient(135deg,rgba(103,237,245,.045),rgba(234,183,96,.035)); }
.workspace-capabilities-heading { display:grid; gap:5px; }
.workspace-capabilities-heading .panel-kicker { margin:0; }
.workspace-capabilities-heading h4 { margin:0; font-size:19px; letter-spacing:-.035em; }
.workspace-capabilities-heading h4 em { color:var(--gold); font-style:normal; }
.workspace-capabilities-lead { max-width:740px; margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.workspace-capability-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.workspace-capability-group { min-width:0; padding:12px; border:1px solid var(--line); border-radius:8px; background:rgba(0,0,0,.11); }
.workspace-capability-group > header { display:flex; align-items:center; gap:8px; padding:1px 1px 11px; }
.workspace-capability-group-icon,.workspace-capability-icon { display:grid; place-items:center; flex:0 0 auto; color:var(--cyan); background:rgba(103,237,245,.1); }
.workspace-capability-group-icon { width:27px; height:27px; border:1px solid rgba(103,237,245,.26); border-radius:8px; font-size:13px; }
.workspace-capability-group > header div { display:grid; min-width:0; gap:2px; }
.workspace-capability-group > header b { font-size:12px; }
.workspace-capability-group > header small { color:var(--muted); font-size:10px; }
.workspace-capability-list { display:grid; gap:6px; }
.workspace-capability-card { border:1px solid rgba(255,255,255,.07); border-radius:7px; background:rgba(255,255,255,.025); overflow:hidden; }
.workspace-capability-card summary { display:flex; align-items:center; gap:8px; padding:8px; list-style:none; cursor:pointer; }
.workspace-capability-card summary::-webkit-details-marker { display:none; }
.workspace-capability-card summary:hover { background:rgba(103,237,245,.055); }
.workspace-capability-card[open] summary { border-bottom:1px solid var(--line); background:rgba(103,237,245,.055); }
.workspace-capability-icon { width:24px; height:24px; border-radius:6px; font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.workspace-capability-heading { display:grid; min-width:0; gap:2px; }
.workspace-capability-heading b,.workspace-capability-heading small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.workspace-capability-heading b { font-size:11px; }
.workspace-capability-heading small { color:var(--muted); font-size:10px; }
.workspace-capability-expand { display:grid; place-items:center; flex:0 0 auto; width:18px; height:18px; color:var(--gold); font-size:16px; line-height:1; }
.workspace-capability-card[open] .workspace-capability-expand { font-size:0; }
.workspace-capability-card[open] .workspace-capability-expand::after { content:'−'; font-size:16px; }
.workspace-capability-example { margin:0; padding:9px 11px; color:var(--muted); font-size:10px; line-height:1.45; }
.workspace-capability-example::first-letter { color:var(--cyan); }
html[data-theme="light"] .workspace-capabilities { border-color:rgba(10,118,126,.23); background:linear-gradient(135deg,rgba(247,254,252,.9),rgba(255,250,241,.75)); }
html[data-theme="light"] .workspace-capability-group { background:rgba(255,255,255,.6); }
html[data-theme="light"] .workspace-capability-card { border-color:rgba(41,56,53,.12); background:rgba(255,255,255,.55); }
html[data-theme="light"] .workspace-capability-card summary:hover,html[data-theme="light"] .workspace-capability-card[open] summary { background:rgba(226,245,240,.7); }
@media (max-width:760px) { .workspace-capability-groups { grid-template-columns:1fr; } .workspace-capabilities { padding:14px; } }

/* Admin dashboard */
.admin-panel { display: grid; gap: 20px; padding: 22px; border: 1px solid rgba(234,183,96,.45); border-radius: 7px; background: linear-gradient(145deg, rgba(234,183,96,.07), rgba(103,237,245,.035)); }
.admin-panel-header, .admin-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.admin-panel-header strong { color: var(--gold); font: 700 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.admin-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.admin-summary-grid .metric-card { min-width: 0; }
.admin-tabs { display: flex; align-items: center; gap: 7px; padding: 5px; border: 1px solid rgba(103,237,245,.16); border-radius: 9px; background: rgba(0,0,0,.12); overflow-x: auto; }
.admin-tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 7px 11px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); background: transparent; font: 800 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; white-space: nowrap; cursor: pointer; transition: color .18s ease, background .18s ease, border-color .18s ease; }
.admin-tab:hover, .admin-tab:focus-visible { color: var(--text); border-color: rgba(103,237,245,.3); outline: none; }
.admin-tab.is-active { color: var(--cyan); border-color: rgba(103,237,245,.4); background: rgba(103,237,245,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.admin-tab b { display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; color: #15110a; background: var(--gold); font-size: 9px; }
.admin-summary-grid small, .admin-table small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; }
.admin-card { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 5px; background: rgba(0,0,0,.16); }
.admin-card-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.admin-storage-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 15px; }
.admin-storage-group { min-width: 0; padding: 12px; border: 1px solid rgba(234,183,96,.2); border-radius: 7px; background: linear-gradient(140deg, rgba(234,183,96,.055), rgba(103,237,245,.025)); }
.admin-storage-group header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; padding-bottom: 10px; color: var(--text); font-size: 11px; font-weight: 700; }
.admin-storage-group header > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-storage-group header strong { color: var(--gold); font: 700 16px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.admin-storage-icon { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid rgba(103,237,245,.26); border-radius: 50%; color: var(--cyan); font-size: 11px; }
.admin-storage-metrics { display: grid; gap: 5px; }
.admin-storage-metrics > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
.admin-storage-metrics b { flex: 0 0 auto; color: var(--text); font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.admin-database-details { margin-top: 12px; border-top: 1px solid var(--line); }
.admin-database-details summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 2px 0; color: var(--muted); cursor: pointer; list-style: none; font-size: 11px; }
.admin-database-details summary::-webkit-details-marker { display: none; }
.admin-database-details summary::before { content: '+'; color: var(--gold); font-size: 15px; line-height: 1; }
.admin-database-details[open] summary::before { content: '−'; }
.admin-database-details summary > span { margin-right: auto; color: var(--text); font-weight: 700; }
.admin-database-details summary small { color: var(--muted); font-size: 10px; }
.admin-database-details .admin-table-wrap { max-height: 340px; overflow: auto; margin-top: 10px; }
.admin-database-details code { color: var(--muted); font: 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.admin-table-wrap { overflow-x: auto; margin-top: 15px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.admin-table th, .admin-table td { padding: 11px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.admin-table th { color: var(--muted); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.admin-table td strong { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-row { cursor: pointer; transition: background .18s ease, border-color .18s ease; }
.admin-user-row:hover, .admin-user-row:focus-visible, .admin-user-row.is-expanded { background: rgba(103,237,245,.055); outline: none; }
.admin-user-detail-row > td { padding: 0 8px 15px; background: rgba(0,0,0,.08); }
.admin-user-detail { display: grid; gap: 14px; padding: 14px; border: 1px solid rgba(103,237,245,.16); border-radius: 6px; background: rgba(0,0,0,.12); }
.admin-user-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-user-detail-head small, .admin-session-toggle small, .admin-session-key { color: var(--muted); font-size: 11px; }
.admin-detail-loading { padding: 14px; color: var(--muted); border: 1px dashed var(--line); border-radius: 6px; }
.admin-detail-error { color: #f06d6d; border-color: rgba(240,109,109,.35); }
.admin-session-list { display: grid; gap: 10px; }
.admin-session { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.025); }
.admin-session-toggle { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 0; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.admin-session-toggle strong { max-width: none; white-space: normal; }
.admin-session-toggle:hover, .admin-session.is-open .admin-session-toggle { background: rgba(234,183,96,.07); }
.admin-session-caret { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; color: var(--gold); font-weight: 700; }
.admin-session-body { display: grid; gap: 13px; padding: 13px; border-top: 1px solid var(--line); }
.admin-session-key { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.admin-session-files, .admin-all-files, .admin-message-file-block { display: grid; gap: 8px; }
.admin-session-files > strong, .admin-all-files > strong, .admin-message-file-block > strong { color: var(--gold); font-size: 11px; }
.admin-file-list { display: flex; flex-wrap: wrap; gap: 7px; }
.admin-file-chip { display: inline-grid; gap: 3px; max-width: 260px; padding: 7px 9px; border: 1px solid rgba(103,237,245,.18); border-radius: 5px; color: var(--text); background: rgba(103,237,245,.045); overflow: hidden; text-overflow: ellipsis; }
.admin-file-chip small { margin: 0; color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-message-list { display: grid; gap: 10px; max-height: 560px; overflow-y: auto; padding-right: 4px; }
.admin-message { display: grid; gap: 7px; max-width: 92%; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.03); }
.admin-message-user { justify-self: end; border-color: rgba(234,183,96,.24); background: rgba(234,183,96,.08); }
.admin-message-assistant { justify-self: start; border-color: rgba(103,237,245,.16); background: rgba(103,237,245,.045); }
.admin-message-system { justify-self: center; max-width: 100%; border-color: rgba(240,109,109,.2); background: rgba(240,109,109,.055); }
.admin-message-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.admin-message-meta time { color: var(--muted); font: 400 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.admin-message pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); font: 12px/1.55 inherit; }
.admin-status { display: inline-block; margin: 0 4px 4px 0; padding: 3px 7px; border: 1px solid rgba(103,237,245,.22); border-radius: 10px; color: var(--cyan); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.admin-status-banned { border-color: rgba(240,109,109,.38); color: #f06d6d; }
.admin-status-admin { border-color: rgba(234,183,96,.38); color: var(--gold); }
.admin-action-stack { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; min-width: 235px; padding: 7px; border: 1px solid rgba(103,237,245,.12); border-radius: 9px; background: rgba(0,0,0,.08); }
.admin-action-stack label { display: grid; gap: 5px; min-width: 104px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .075em; }
.admin-select { width: 100%; min-height: 35px; padding: 7px 30px 7px 10px; border: 1px solid rgba(103,237,245,.25); border-radius: 6px; color: var(--text); background: rgba(7,18,21,.74) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2.2 4 3.8 3.8L9.8 4' fill='none' stroke='%2367edf5' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; background-size: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); font: 700 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; appearance: none; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.admin-select:hover { border-color: rgba(103,237,245,.52); background-color: rgba(11,37,41,.88); }
.admin-select:focus-visible { border-color: var(--cyan); outline: none; box-shadow: 0 0 0 3px rgba(103,237,245,.13); }
.admin-action-stack .button { min-height: 35px; padding: 7px 11px; border-radius: 6px; font-size: 10px; letter-spacing: .02em; }
.admin-action-stack .button-primary { box-shadow: 0 5px 15px rgba(233,189,98,.15); }
.admin-save-button { border-color: rgba(103,237,245,.3); color: var(--cyan); background: rgba(103,237,245,.065); }
.admin-save-button:hover { border-color: var(--cyan); color: var(--text); background: rgba(103,237,245,.14); }
.admin-action-stack .button-ghost { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.025); }
.admin-action-stack .button-ghost:hover { border-color: rgba(103,237,245,.46); background: rgba(103,237,245,.09); }
.button-danger { border-color: rgba(240,109,109,.5); color: #f58c8c; }
.button-danger:hover { border-color: #f06d6d; background: rgba(240,109,109,.12); }
.admin-user-name { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 11px; }
.admin-self-badge { display: inline-flex; align-items: center; min-height: 19px; margin-left: 2px; padding: 2px 7px; border: 1px solid rgba(103,237,245,.3); border-radius: 999px; color: var(--cyan); background: rgba(103,237,245,.08); font-size: 9px; font-weight: 800; letter-spacing: .06em; line-height: 1; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
.admin-self, .admin-empty { color: var(--muted); font-size: 12px; }
.admin-plan-requests-card { display: grid; gap: 15px; }
.admin-plan-request-list { display: grid; gap: 10px; }
.admin-plan-requests-empty { margin: 0; padding: 20px; border: 1px dashed var(--line); border-radius: 8px; text-align: center; }
.admin-plan-request { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(140deg, rgba(103,237,245,.04), rgba(234,183,96,.035)); }
.admin-plan-request-pending { border-color: rgba(234,183,96,.4); box-shadow: inset 3px 0 0 rgba(234,183,96,.75); }
.admin-plan-request-approved { border-color: rgba(119,220,153,.34); box-shadow: inset 3px 0 0 rgba(119,220,153,.7); }
.admin-plan-request-rejected { border-color: rgba(240,109,109,.3); box-shadow: inset 3px 0 0 rgba(240,109,109,.65); }
.admin-plan-request > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.admin-plan-request-user { display: grid; gap: 3px; min-width: 0; }
.admin-plan-request-user strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-plan-request-user small, .admin-plan-request-meta, .admin-plan-request-events small { color: var(--muted); font-size: 11px; }
.admin-plan-request-statuses { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.admin-plan-request-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.admin-plan-request-meta span { min-width: 0; overflow-wrap: anywhere; }
.admin-plan-request-meta b { color: var(--text); font-size: 10px; }
.admin-plan-request-note { margin: 0; padding: 9px 10px; border-left: 2px solid rgba(103,237,245,.45); color: var(--muted); background: rgba(0,0,0,.09); font-size: 12px; line-height: 1.45; }
.admin-plan-request-review-note { border-left-color: rgba(234,183,96,.55); }
.admin-plan-request-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-plan-request-actions .button { min-height: 34px; padding: 7px 11px; border-radius: 6px; font-size: 10px; }
.admin-plan-request-events { border-top: 1px solid var(--line); }
.admin-plan-request-events summary { display: flex; align-items: center; gap: 8px; padding-top: 10px; color: var(--muted); cursor: pointer; list-style: none; font-size: 11px; }
.admin-plan-request-events summary::-webkit-details-marker { display: none; }
.admin-plan-request-events summary::before { content: '+'; color: var(--gold); font-size: 14px; }
.admin-plan-request-events[open] summary::before { content: '−'; }
.admin-plan-request-events summary small { margin-left: auto; }
.admin-plan-request-events ol { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.admin-plan-request-events li { display: flex; flex-wrap: wrap; gap: 5px 10px; padding: 8px 9px; border: 1px solid rgba(103,237,245,.12); border-radius: 5px; color: var(--muted); background: rgba(0,0,0,.07); font-size: 11px; }
.admin-plan-request-events li b { color: var(--text); }
.admin-plan-request-events li time { margin-left: auto; font: 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.admin-plan-request-events li small { width: 100%; overflow-wrap: anywhere; }
.dashboard-plan-request { max-width: 620px; margin-top: -4px; padding: 10px 12px; border: 1px solid rgba(234,183,96,.3); border-radius: 7px; color: var(--muted); background: rgba(234,183,96,.06); font-size: 12px; line-height: 1.45; }
html[data-theme="light"] .admin-panel { background: linear-gradient(145deg, rgba(255,250,241,.94), rgba(248,238,216,.76)); box-shadow: 0 16px 40px rgba(63,76,67,.1); }
html[data-theme="light"] .admin-card { background: rgba(255,255,255,.56); }
html[data-theme="light"] .admin-storage-group { border-color: rgba(154,101,18,.17); background: linear-gradient(140deg, rgba(255,250,241,.82), rgba(239,250,250,.62)); }
html[data-theme="light"] .admin-action-stack { border-color: rgba(10,118,126,.15); background: rgba(255,255,255,.48); }
html[data-theme="light"] .admin-tabs { border-color: rgba(10,118,126,.18); background: rgba(255,255,255,.56); }
html[data-theme="light"] .admin-tab.is-active { color: #087b87; border-color: rgba(10,118,126,.32); background: rgba(226,245,240,.9); }
html[data-theme="light"] .admin-plan-request { background: linear-gradient(140deg, rgba(255,255,255,.82), rgba(239,250,250,.55)); }
html[data-theme="light"] .admin-plan-request-note, html[data-theme="light"] .admin-plan-request-events li { background: rgba(255,255,255,.58); }
html[data-theme="light"] .admin-select { border-color: rgba(10,118,126,.3); color: #173833; background-color: rgba(255,255,255,.9); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2.2 4 3.8 3.8L9.8 4' fill='none' stroke='%230a767e' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-theme="light"] .admin-select:hover { background-color: #fff; border-color: rgba(10,118,126,.58); }
html[data-theme="light"] .admin-action-stack .button-ghost { border-color: rgba(59,66,59,.2); background: rgba(255,255,255,.64); }
html[data-theme="light"] .admin-action-stack .button-ghost:hover { border-color: rgba(10,118,126,.48); background: rgba(226,245,240,.9); }
html[data-theme="light"] .admin-user-row:hover,
html[data-theme="light"] .admin-user-row:focus-visible,
html[data-theme="light"] .admin-user-row.is-expanded { background: rgba(10,118,126,.06); }
html[data-theme="light"] .admin-user-detail-row > td { background: rgba(255,255,255,.36); }
html[data-theme="light"] .admin-user-detail,
html[data-theme="light"] .admin-session,
html[data-theme="light"] .admin-message { background: rgba(255,255,255,.55); }
html[data-theme="light"] .admin-session-toggle:hover,
html[data-theme="light"] .admin-session.is-open .admin-session-toggle { background: rgba(154,101,18,.08); }
html[data-theme="light"] .admin-file-chip { background: rgba(10,118,126,.06); border-color: rgba(10,118,126,.16); }
html[data-theme="light"] .admin-message-user { background: rgba(234,183,96,.16); }
html[data-theme="light"] .admin-message-assistant { background: rgba(10,118,126,.065); }
html[data-theme="light"] .admin-message-system { background: rgba(240,109,109,.075); }

@media (max-width: 980px) { .admin-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.admin-grid { grid-template-columns: 1fr; } }
@media (max-width: 580px) {
  .dashboard-panel { padding: 16px; overflow: hidden; }
  .dashboard-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
  }
  .dashboard-header .panel-kicker,
  .dashboard-header h3 {
    min-width: 0;
  }
  .dashboard-header h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dashboard-header .workspace-status {
    justify-self: end;
    max-width: 100%;
  }
  .dashboard-header .plan-badge {
    grid-column: 2;
    justify-self: end;
  }
  .dashboard-metrics { grid-template-columns: 1fr; }
  .dashboard-actions { align-items: stretch; }
  .dashboard-actions .button { width: 100%; }
  .admin-summary-grid { grid-template-columns: 1fr; }
  .admin-storage-overview { grid-template-columns: 1fr; }
  .admin-panel { padding: 16px; overflow: hidden; }
  .admin-panel-header { align-items: center; }
  .admin-card { padding: 13px; overflow: hidden; }
  .admin-table-wrap { overflow-x: visible; }
  .admin-table { min-width: 0; }
  .admin-table thead { display: none; }
  .admin-table,
  .admin-table tbody,
  .admin-table tr,
  .admin-table td {
    display: block;
    width: 100%;
  }
  .admin-table tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }
  .admin-table td {
    padding: 5px 0;
    border-bottom: 0;
  }
  .admin-table td strong { max-width: 100%; }
  .admin-action-stack { min-width: 0; }
  .admin-plan-request > header { display: grid; gap: 8px; }
  .admin-plan-request-statuses { justify-content: flex-start; }
  .admin-plan-request-events li time { margin-left: 0; }
}

/* Cookie overlay */
.cookie-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cookie-overlay[hidden] { display: none !important; }
.cookie-modal { max-width: 480px; width: 100%; padding: 28px; border: 1px solid rgba(119,220,153,.35); border-radius: 10px; background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(103,237,245,.04)); backdrop-filter: blur(12px); }
.cookie-modal h3 { margin: 0 0 12px; font-size: 22px; letter-spacing: -.03em; }
.cookie-modal p { color: var(--muted); line-height: 1.7; margin-bottom: 20px; }
.cookie-modal a { color: var(--link); }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* GDPR page */
.gdpr-page { padding: 80px 20px 120px; max-width: 800px; margin: 0 auto; }
.gdpr-page h1 { font-size: 36px; margin-bottom: 40px; }
.gdpr-page h2 { font-size: 20px; color: var(--gold); margin: 40px 0 16px; }
.gdpr-page p { color: var(--muted); line-height: 1.8; margin-bottom: 16px; }
.gdpr-page ul { color: var(--muted); margin-bottom: 16px; padding-left: 24px; }
.gdpr-page li { margin-bottom: 8px; }
.gdpr-nav { margin-bottom: 40px; }
.gdpr-nav a { color: var(--link); }

/* Chat UI - OpenClaw inspired redesign */
.chat-section { padding: 3rem 0; }
.chat-container { 
  max-width: 2048px;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  background: var(--ink-raised);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.2);
}
.chat-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-model-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(103,237,245,0.1);
  color: var(--cyan);
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
}
.chat-model-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}
.chat-context-bar {
  color: var(--muted);
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.chat-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.chat-header-btn:hover {
  border-color: var(--gold);
  color: var(--text);
}
.chat-model-select {
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  background: var(--ink);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.chat-messages {
  height: 420px;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-messages::-webkit-scrollbar {
  width: 5px;
}
.chat-messages::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
}
.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
}
.chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.15);
}
.chat-messages {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) rgba(0,0,0,0.2);
}
.chat-placeholder {
  text-align: center;
  color: var(--muted);
  padding: 3rem 1rem;
  font-size: 0.95rem;
}
.chat-message {
  display: flex;
  max-width: 85%;
  animation: msgFadeIn 0.3s ease;
}
@keyframes msgFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-message.user {
  align-self: flex-end;
  margin-left: auto;
}
.chat-message.assistant {
  align-self: flex-start;
  margin-right: auto;
}
.chat-message.system {
  align-self: center;
  font-size: 0.8rem;
  max-width: 95%;
}
.chat-message-bubble {
  padding: 10px 14px;
  border-radius: 10px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  line-height: 1.55;
}
.chat-message.user .chat-message-bubble {
  background: rgba(233, 189, 98, 0.12);
  color: var(--text);
  border: 1px solid rgba(233, 189, 98, 0.22);
  box-shadow: 0 0 12px rgba(233, 189, 98, 0.06);
}
.chat-message.user .chat-message-content {
  color: var(--text);
}
.chat-message.assistant .chat-message-bubble {
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.05);
}
.chat-message.assistant .chat-message-content {
  color: var(--text);
}
.chat-message.system .chat-message-bubble {
  background: rgba(240,109,109,0.08);
  color: #f06d6d;
  border: 1px solid rgba(240,109,109,0.15);
}
.chat-message.pending .chat-message-bubble {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
}
.chat-message-typing {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.5rem;
}
.chat-message-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: chatTyping 1.4s infinite;
}
.chat-message-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-message-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatTyping { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

.chat-message-time {
  font-size: 10px;
  color: var(--muted);
  opacity: 0.6;
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: right;
}
.chat-message.user .chat-message-time {
  text-align: left;
}
.chat-message.assistant .chat-message-time {
  text-align: right;
}

.chat-input-area {
  position: relative;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.15);
}
.chat-input-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.chat-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
}
.chat-toolbar-btn:hover {
  border-color: var(--gold);
  color: var(--text);
}
.chat-token-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.chat-input-wrap {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.chat-input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  resize: none;
  max-height: 120px;
  min-height: 44px;
  line-height: 1.5;
}
.chat-input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255,255,255,0.06);
}
.chat-send {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--gold);
  border: none;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, transform 0.1s;
  flex-shrink: 0;
}
.chat-send:hover { opacity: 0.85; }
.chat-send:active { transform: scale(0.95); }
.chat-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.chat-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}
.chat-status-dot.sending { background: var(--amber); animation: pulse 1s infinite; }
.chat-status-dot.processing { background: var(--cyan); animation: pulse 1s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }


/* Floating Chat Widget */
.chat-widget { position: fixed; bottom: 20px; right: 20px; z-index: 100; }
.chat-widget-toggle {
  width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--gold); background: var(--ink-raised);
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08); transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}
.chat-widget-toggle:hover { transform: scale(1.05); box-shadow: 0 6px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(233,189,98,0.3); }
.chat-widget-toggle:active { transform: scale(0.95); }
.chat-widget-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.chat-widget-unread {
  position: absolute; top: -2px; right: -2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); color: var(--ink); font-size: 10px; font-weight: 700; display: flex;
  align-items: center; justify-content: center; border: 2px solid var(--ink-raised);
}

.chat-widget-panel {
  position: absolute; bottom: 68px; right: 0; width: 380px; max-height: 600px; border-radius: 12px;
  background: var(--ink-raised); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; overflow: hidden; animation: widgetPopIn 0.3s ease;
}
@keyframes widgetPopIn { from { opacity: 0; transform: translateY(10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Mobile responsive for chat widget */
@media (max-width: 420px) {
  .chat-widget-panel { width: calc(100vw - 40px); right: 0; }
  .chat-widget-chat { height: 70vh; }
}
@media (max-width: 360px) {
  .chat-widget-panel { width: calc(100vw - 32px); bottom: 60px; }
  .chat-widget-toggle { width: 48px; height: 48px; }
  .chat-widget-avatar { width: 38px; height: 38px; }
}

.chat-widget-header {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.2);
}
.chat-widget-header-left { display: flex; align-items: center; gap: 10px; }
.chat-widget-header-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--gold); }
.chat-widget-title { display: block; font-weight: 700; font-size: 14px; color: var(--text); }
.chat-widget-status { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.chat-widget-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.chat-widget-close {
  width: 28px; height: 28px; border-radius: 6px; border: none; background: rgba(255,255,255,0.05);
  color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.chat-widget-close:hover { background: rgba(255,255,255,0.1); color: var(--text); }

.chat-widget-auth { padding: 24px; text-align: center; }
.chat-widget-auth-content { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.chat-widget-auth-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.chat-widget-auth-desc { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.chat-widget-login-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }

.chat-widget-chat { display: flex; flex-direction: column; height: 480px; }
.chat-widget-chat.settings-open .chat-widget-messages { flex: 1; min-height: 0; }
.chat-widget-chat.settings-open .chat-settings-panel { flex: 2; }
.chat-widget-chat.settings-open .chat-widget-input-area { flex: 0 0 auto; }
.chat-widget-messages {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.chat-widget-messages::-webkit-scrollbar { width: 5px; }
.chat-widget-messages::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 3px; }
.chat-widget-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
.chat-widget-messages { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) rgba(255,255,255,0.03); }

/* Appears only while the reader is above the newest message. Kept inside
   each chat surface, so dashboard and floating messenger behave identically. */
.chat-container,
.chat-widget-chat { position: relative; }
.chat-scroll-to-bottom {
  position: absolute;
  z-index: 24;
  left: 50%;
  bottom: calc(var(--chat-composer-height, 78px) + 12px);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid rgba(233, 189, 98, .38);
  border-radius: 999px;
  background: rgba(19, 24, 34, .94);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .32);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.chat-scroll-to-bottom:hover { border-color: var(--gold); background: rgba(35, 42, 56, .98); }
.chat-scroll-to-bottom[hidden] { display: none; }
.chat-widget-scroll-to-bottom { bottom: calc(var(--chat-composer-height, 72px) + 12px); }
.chat-container.settings-open .chat-scroll-to-bottom,
.chat-widget-chat.settings-open .chat-widget-scroll-to-bottom { display: none; }

.chat-widget-input-area { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.15); }

/* Chat message markdown formatting */
.chat-message-content strong {
  color: var(--gold-soft);
  font-weight: 700;
}
.chat-message-content em {
  font-style: italic;
  color: var(--cyan);
}
.chat-message-content code {
  background: rgba(255,255,255,0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--gold);
}
.chat-message-content pre {
  background: rgba(0,0,0,0.3);
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 8px 0;
  border: 1px solid rgba(255,255,255,0.06);
}
.chat-message-content pre code {
  background: none;
  padding: 0;
  color: var(--text);
}
.chat-message-content a {
  color: var(--cyan);
  text-decoration: underline;
}
.chat-message-content a:hover {
  color: var(--gold);
}


/* ── Chat UI (dev additions) ── */
.chat-section { padding: 3rem 0; }
.chat-container { max-width: 2048px; margin: 0 auto; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; overflow: hidden; background: var(--ink-raised); box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.chat-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.2); }
.chat-header-left { display: flex; align-items: center; gap: 12px; }
.chat-model-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 12px; background: rgba(103,237,245,0.1); color: var(--cyan); font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; }
.chat-model-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.chat-context-bar { color: var(--muted); font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.chat-header-right { display: flex; align-items: center; gap: 8px; }
.chat-header-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; background: rgba(255,255,255,0.03); color: var(--muted); font-size: 12px; cursor: pointer; transition: all 0.2s; }
.chat-header-btn:hover { border-color: var(--gold); color: var(--text); }
.chat-model-select { padding: 5px 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; background: var(--ink); color: var(--text); font-size: 12px; cursor: pointer; }
.chat-messages { height: 420px; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 3px; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
.chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
.chat-messages { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) rgba(255,255,255,0.03); }
.chat-placeholder { text-align: center; color: var(--muted); padding: 3rem 1rem; font-size: 0.95rem; }
.chat-message { display: flex; max-width: 85%; animation: msgFadeIn 0.3s ease; }
@keyframes msgFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.chat-message.user { align-self: flex-end; margin-left: auto; }
.chat-message.assistant { align-self: flex-start; margin-right: auto; }
.chat-message.system { align-self: center; font-size: 0.8rem; max-width: 95%; }
.chat-message-bubble { padding: 10px 14px; border-radius: 10px; word-wrap: break-word; overflow-wrap: anywhere; line-height: 1.55; }
.chat-message.user .chat-message-bubble { background: rgba(233, 189, 98, 0.12); color: var(--text); border: 1px solid rgba(233, 189, 98, 0.22); box-shadow: 0 0 12px rgba(233, 189, 98, 0.06); }
.chat-message.assistant .chat-message-bubble { background: rgba(255,255,255,0.04); color: var(--text); border: 1px solid rgba(255,255,255,0.05); }
.chat-message.system .chat-message-bubble { background: rgba(240,109,109,0.08); color: #f06d6d; border: 1px solid rgba(240,109,109,0.15); }
.chat-message.pending .chat-message-bubble { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); }
.chat-message-typing { display: flex; gap: 0.3rem; margin-top: 0.5rem; }
.chat-message-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: chatTyping 1.4s infinite; }
.chat-message-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-message-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatTyping { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.chat-message-time { font-size: 10px; color: var(--muted); opacity: 0.6; margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }
.chat-message.user .chat-message-time { text-align: left; }
.chat-message.assistant .chat-message-time { text-align: right; }
.chat-message-content strong { color: var(--gold-soft); font-weight: 700; }
.chat-message-content em { font-style: italic; color: var(--cyan); }
.chat-message-content code { background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--gold); }
.chat-message-content pre { background: rgba(0,0,0,0.3); padding: 12px; border-radius: 8px; overflow-x: auto; margin: 8px 0; border: 1px solid rgba(255,255,255,0.06); }
.chat-message-content pre code { background: none; padding: 0; color: var(--text); }
.chat-message-content a { color: var(--cyan); text-decoration: underline; }
.chat-message-content a:hover { color: var(--gold); }
.chat-message-content > :first-child { margin-top: 0; }
.chat-message-content > :last-child { margin-bottom: 0; }
.chat-message-content p { margin: 0 0 .8rem; }
.chat-message-content h1, .chat-message-content h2, .chat-message-content h3, .chat-message-content h4 { margin: 1rem 0 .45rem; color: var(--gold-soft); line-height: 1.2; letter-spacing: -.02em; }
.chat-message-content h1 { font-size: 1.38rem; }.chat-message-content h2 { font-size: 1.22rem; }.chat-message-content h3 { font-size: 1.08rem; }.chat-message-content h4 { font-size: 1rem; }
.chat-message-content ul, .chat-message-content ol { margin: .4rem 0 .85rem; padding-left: 1.35rem; }.chat-message-content li + li { margin-top: .2rem; }
.chat-message-content blockquote { margin: .8rem 0; padding: .5rem .75rem; border-left: 3px solid var(--cyan); color: var(--muted); background: rgba(103,237,245,.055); border-radius: 0 6px 6px 0; }
.chat-message-content hr { height: 1px; margin: 1rem 0; border: 0; background: rgba(255,255,255,.13); }
.chat-table-wrap { max-width: 100%; overflow-x: auto; margin: .75rem 0 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; }
.chat-table { width: 100%; min-width: 360px; border-collapse: collapse; font-size: .92em; }.chat-table th, .chat-table td { padding: .48rem .62rem; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; vertical-align: top; }.chat-table th { color: var(--gold-soft); background: rgba(233,189,98,.08); font-weight: 700; }.chat-table tbody tr:last-child td { border-bottom: 0; }.chat-table tr:nth-child(even) td { background: rgba(255,255,255,.025); }
.chat-math { display: inline-block; max-width: 100%; overflow-x: auto; vertical-align: middle; padding: 0 .12rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cyan); }.chat-math-display { display: block; margin: .8rem 0; padding: .65rem; text-align: center; border: 1px solid rgba(103,237,245,.16); border-radius: 7px; background: rgba(103,237,245,.045); }.chat-math.is-fallback { white-space: pre-wrap; }
.chat-youtube-card { position: relative; display: block; width: min(100%, 420px); overflow: hidden; margin: .8rem 0; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; color: var(--text) !important; text-decoration: none !important; background: #101315; box-shadow: 0 8px 20px rgba(0,0,0,.18); }.chat-youtube-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .8; transition: opacity .18s ease, transform .18s ease; }.chat-youtube-card:hover img { opacity: 1; transform: scale(1.025); }.chat-youtube-play { position: absolute; top: 50%; left: 50%; display: grid; width: 48px; height: 36px; place-items: center; border-radius: 9px; color: #fff; background: #f03; box-shadow: 0 3px 14px rgba(0,0,0,.3); transform: translate(-50%, -50%); }.chat-youtube-label { display: block; padding: .48rem .65rem; font-size: .8rem; font-weight: 700; }
.chat-image-card { width: min(100%, 520px); margin: .85rem 0; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(0,0,0,.12); box-shadow: 0 8px 20px rgba(0,0,0,.16); }.chat-image-card a { display: block; color: var(--text); text-decoration: none; }.chat-image-card img { display: block; width: 100%; max-height: 420px; object-fit: contain; background: rgba(0,0,0,.2); }.chat-image-card figcaption { padding: .48rem .65rem; color: var(--muted); font-size: .78rem; }.chat-image-card:hover { border-color: rgba(233,189,98,.42); }
.chat-input-area { position: relative; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.15); }
.chat-input-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.chat-toolbar-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; background: rgba(255,255,255,0.03); color: var(--muted); cursor: pointer; transition: all 0.2s; }
.chat-toolbar-btn:hover { border-color: var(--gold); color: var(--text); }

/* Natural-language scheduler wizard: review before a host-side v3 job exists. */
.schedule-wizard { max-width: 680px; height: min(760px, calc(100dvh - 36px)); grid-template-rows: auto minmax(0, 1fr); }
.schedule-wizard-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; align-content:start; padding: 18px 22px 22px; display: grid; gap: 16px; }
.schedule-wizard-prompt { display: grid; gap: 9px; }
.schedule-wizard-prompt label { font-size: 13px; font-weight: 700; color: var(--text); }
.schedule-wizard-prompt textarea { width: 100%; resize: vertical; min-height: 78px; box-sizing: border-box; color:var(--text); background:rgba(127,143,166,.16); border:1px solid rgba(127,143,166,.34); border-radius:8px; padding:10px 12px; font:inherit; }
.schedule-wizard-prompt textarea::placeholder { color:var(--muted); opacity:.88; }
.schedule-wizard-prompt textarea:focus { outline:none; border-color:var(--gold); background:rgba(127,143,166,.23); }
.schedule-wizard-suggestions { display:flex; flex-wrap:wrap; gap:7px; }
.schedule-wizard-suggestions button, .schedule-wizard-secondary { border:1px solid rgba(127,143,166,.3); color:var(--muted); background:rgba(127,143,166,.08); border-radius:999px; padding:6px 10px; cursor:pointer; font-size:12px; }
.schedule-wizard button:disabled, .schedule-wizard textarea:disabled { cursor:wait; opacity:.48; pointer-events:none; }
.schedule-wizard-analyse { justify-self:start; }
.schedule-wizard-progress, .schedule-wizard-question, .schedule-wizard-review { border:1px solid rgba(233,189,98,.22); background:rgba(233,189,98,.06); border-radius:12px; padding:14px; }
.schedule-wizard-progress { display:flex; align-items:center; gap:9px; color:var(--gold-soft); }
.chat-source-message-link { display:inline-flex; align-items:center; margin-top:.55rem; padding:0; border:0; color:var(--cyan); background:transparent; text-decoration:underline; text-underline-offset:3px; cursor:pointer; font:inherit; font-size:.88em; }
.chat-source-message-link:hover { color:var(--gold-soft); }
.chat-source-context { margin-top:.7rem; border:1px solid rgba(103,237,245,.2); border-radius:8px; background:rgba(103,237,245,.045); overflow:hidden; }
.chat-source-context > summary { padding:.52rem .7rem; color:var(--cyan); cursor:pointer; font-size:.88em; font-weight:650; }
.chat-source-context > summary:hover { color:var(--gold-soft); background:rgba(103,237,245,.055); }
.chat-source-context-preview { padding:.15rem .7rem .55rem; border-top:1px solid rgba(103,237,245,.13); font-size:.92em; }
.chat-source-context-preview > :first-child { margin-top:.35rem; }
.chat-source-context-preview > :last-child { margin-bottom:0; }
.chat-source-context .chat-source-message-link { margin:0 .7rem .65rem; }
.chat-message.is-source-highlight .chat-message-bubble { animation:source-message-flash 2.4s ease-out; }
@keyframes source-message-flash { 0%,35% { border-color:var(--gold); box-shadow:0 0 0 4px rgba(233,189,98,.18); } 100% { border-color:inherit; box-shadow:none; } }
.schedule-wizard-question b, .schedule-review-heading b { color:var(--gold-soft); }
.schedule-wizard-question p { margin:7px 0 0; color:var(--text); }
.schedule-review-heading { display:flex; justify-content:space-between; gap:10px; margin-bottom:10px; }
.schedule-review-heading span { color:var(--green); font-size:12px; }
.schedule-wizard-review table { width:100%; border-collapse:collapse; font-size:13px; }
.schedule-wizard-review th { width:110px; text-align:left; color:var(--muted); font-weight:600; vertical-align:top; padding:8px 10px 8px 0; }
.schedule-wizard-review td { color:var(--text); padding:8px 0; overflow-wrap:anywhere; }
.schedule-wizard-review tr + tr { border-top:1px solid rgba(127,143,166,.16); }
.schedule-wizard-review footer { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.schedule-wizard-jobs { border:1px solid rgba(103,237,245,.2); border-radius:10px; background:rgba(103,237,245,.035); overflow:hidden; }
.schedule-wizard-jobs > summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; color:var(--text); cursor:pointer; list-style:none; font-size:12px; font-weight:700; }
.schedule-wizard-jobs > summary::-webkit-details-marker,.schedule-wizard-job > summary::-webkit-details-marker { display:none; }
.schedule-wizard-jobs > summary::after,.schedule-wizard-job > summary::after { content:'+'; color:var(--gold); font-size:16px; line-height:1; }
.schedule-wizard-jobs[open] > summary::after,.schedule-wizard-job[open] > summary::after { content:'−'; }
.schedule-wizard-jobs > summary small { margin-left:auto; color:var(--muted); font-size:10px; font-weight:400; }
.schedule-wizard-job-list { display:grid; grid-auto-rows:min-content; align-items:start; gap:6px; padding:0 8px 8px; }
.schedule-wizard-job { align-self:start; min-height:0; height:auto; border:1px solid rgba(127,143,166,.2); border-radius:8px; background:rgba(0,0,0,.09); overflow:hidden; }
.schedule-wizard-job:not([open]) { height:auto !important; min-height:0 !important; }
.schedule-wizard-job:not([open]) .schedule-wizard-job-details { display:none !important; }
.schedule-wizard-jobs:not([open]) .schedule-wizard-job-list { display:none !important; }
.schedule-wizard-job > summary { display:flex; align-items:center; gap:8px; padding:8px; cursor:pointer; list-style:none; }
.schedule-wizard-job > summary > span { min-width:0; display:grid; gap:2px; }
.schedule-wizard-job > summary b,.schedule-wizard-job > summary small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.schedule-wizard-job > summary b { font-size:11px; }.schedule-wizard-job > summary small { color:var(--muted); font-size:10px; }.schedule-wizard-job > summary em { margin-left:auto; font-style:normal; }
.schedule-wizard-job-details { max-height:min(96px, 14dvh); overflow-y:auto; overscroll-behavior:contain; border-top:1px solid rgba(127,143,166,.16); }
.schedule-wizard-job-details > dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 10px; margin:0; padding:9px; }
.schedule-wizard-job dt { margin-bottom:2px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.05em; }.schedule-wizard-job dd { margin:0; overflow-wrap:anywhere; color:var(--text); font-size:10px; line-height:1.35; }.schedule-wizard-job-error dd { color:#f58c8c; }
.settings-auto-approve-control { margin-top:14px; border-top:1px solid rgba(127,143,166,.14); padding-top:14px; }
@media (max-width: 600px) { .schedule-wizard-body { padding:14px; } .schedule-wizard { height:auto; max-height:calc(100dvh - 32px); } .schedule-wizard-review th { width:82px; } .schedule-wizard-job-details > dl { grid-template-columns:1fr; } }
.chat-token-count { margin-left: auto; color: var(--muted); font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.chat-input-wrap { display: flex; gap: 8px; align-items: flex-end; }
.chat-input { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 10px 14px; color: var(--text); font-family: inherit; font-size: 14px; resize: none; max-height: 120px; min-height: 44px; line-height: 1.5; }
.chat-input:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,0.06); }
.chat-send { width: 44px; height: 44px; border-radius: 8px; background: var(--gold); border: none; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s, transform 0.1s; flex-shrink: 0; }
.chat-send:hover { opacity: 0.85; }
.chat-send:active { transform: scale(0.95); }
.chat-status { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.chat-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.chat-status-dot.sending { background: var(--amber); animation: pulse 1s infinite; }
.chat-status-dot.processing { background: var(--cyan); animation: pulse 1s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Floating Chat Widget */
.chat-widget { position: fixed; bottom: 20px; right: 20px; z-index: 100; }
.chat-widget-toggle { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--gold); background: var(--ink-raised); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08); transition: transform 0.2s, box-shadow 0.2s; position: relative; }
.chat-widget-toggle:hover { transform: scale(1.05); box-shadow: 0 6px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(233,189,98,0.3); }
.chat-widget-toggle:active { transform: scale(0.95); }
.chat-widget-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.chat-widget-unread { position: absolute; top: -2px; right: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: var(--ink); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink-raised); }
.chat-widget-panel { position: absolute; bottom: 68px; right: 0; width: 380px; max-height: 600px; border-radius: 12px; background: var(--ink-raised); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 60px rgba(0,0,0,0.5); display: flex; flex-direction: column; overflow: hidden; animation: widgetPopIn 0.3s ease; }
@keyframes widgetPopIn { from { opacity: 0; transform: translateY(10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
.chat-widget-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.2); }
.chat-widget-header-left { display: flex; align-items: center; gap: 10px; }
.chat-widget-header-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--gold); }
.chat-widget-title { display: block; font-weight: 700; font-size: 14px; color: var(--text); }
.chat-widget-status { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.chat-widget-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.chat-widget-close { width: 28px; height: 28px; border-radius: 6px; border: none; background: rgba(255,255,255,0.05); color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.chat-widget-close:hover { background: rgba(255,255,255,0.1); color: var(--text); }
.chat-widget-auth { padding: 24px; text-align: center; }
.chat-widget-auth-content { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.chat-widget-auth-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.chat-widget-auth-desc { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.chat-widget-login-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }
.chat-widget-chat { display: flex; flex-direction: column; height: 480px; }
.chat-widget-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.chat-widget-messages::-webkit-scrollbar { width: 5px; }
.chat-widget-messages::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 3px; }
.chat-widget-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
.chat-widget-messages { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) rgba(255,255,255,0.03); }
.chat-widget-input-area { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.15); }
@media (max-width: 420px) { .chat-widget-panel { width: calc(100vw - 40px); right: 0; } .chat-widget-chat { height: 70vh; } }
@media (max-width: 360px) { .chat-widget-panel { width: calc(100vw - 32px); bottom: 60px; } .chat-widget-toggle { width: 48px; height: 48px; } .chat-widget-avatar { width: 38px; height: 38px; } }

/* Quick Prompts */
.chat-quick-prompts {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 8px 16px;
  min-height: 0;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.chat-quick-prompts:empty { display: none; padding: 0; }
.chat-quick-prompts::-webkit-scrollbar { height: 4px; }
.chat-quick-prompts::-webkit-scrollbar-thumb { background: rgba(120,120,120,.28); border-radius: 99px; }
.chat-quick-prompt { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--muted); font-size: 12px; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.chat-quick-prompt:hover { background: rgba(233, 189, 98, 0.1); border-color: rgba(233, 189, 98, 0.3); color: var(--text); }
.chat-quick-prompt:active { transform: scale(0.95); }

/* Onboarding Panel */
.onboarding-panel { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.onboarding-title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0; }
.onboarding-desc { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }
.onboarding-question { display: flex; flex-direction: column; gap: 8px; }
.onboarding-question label { font-size: 14px; font-weight: 600; color: var(--text); }
.onboarding-question input { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 10px 14px; color: var(--text); font-family: inherit; font-size: 14px; }
.onboarding-question input:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,0.06); }
.onboarding-progress { display: flex; gap: 8px; margin-top: 8px; }
.onboarding-progress-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.1); transition: background 0.3s; }
.onboarding-progress-dot.completed { background: var(--green); box-shadow: 0 0 6px var(--green); }
.onboarding-progress-dot.active { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.onboarding-submit { margin-top: 8px; }


/* Chat Settings Panel */
.chat-settings-panel {
  position: absolute;
  bottom: 100%;
  left: 12px;
  right: 12px;
  background: var(--ink-raised);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px 16px 10px 10px;
  padding: 16px 18px 12px;
  margin-bottom: 8px;
  box-shadow: 0 -14px 48px rgba(0,0,0,0.42), 0 0 0 1px rgba(233,189,98,.05);
  z-index: 10;
  max-height: min(560px, calc(100vh - 180px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.chat-container { position: relative; }
/* Dashboard settings are a real flex view, not an absolute overlay.  The
   earlier overlay used `height:100%` inside a flex item.  That percentage is
   cyclic in Chromium: after a checkbox changes its own layout, the containing
   chat pane can resolve to its content height and the Settings view collapses.
   Keeping the panel in the workbench's definite-height flex chain makes its
   size independent of every individual toggle and field reflow. */
.chat-workbench .chat-container.settings-open {
  /* This is deliberately a zero-basis flex item.  `flex: 1 1 auto` makes
     Chromium use the Settings content height as the flex base after a native
     checkbox reflow, which is why the settings card appeared to "collapse"
     while the rest of the workbench stayed blank. */
  flex: 1 1 0;
  align-self: stretch;
  min-height: 0;
  overflow: hidden;
}
.chat-workbench .chat-container.settings-open > .chat-header,
.chat-workbench .chat-container.settings-open > .chat-messages,
.chat-workbench .chat-container.settings-open > .chat-input-area {
  display: none;
}
.chat-workbench .chat-container.settings-open > .chat-settings-panel {
  position: relative;
  inset: auto;
  z-index: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  flex: 1 1 0;
  align-self: stretch;
  min-height: 0;
  max-height: none;
  height: 100%;
  margin: 0;
  padding: 18px;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
}
.chat-workbench .chat-container.settings-open .chat-settings-body {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}
#chat-widget-panel .chat-settings-panel {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  max-height: none;
  height: auto;
  flex: 2;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#chat-widget-panel .chat-widget-chat.settings-open { position: relative; }
#chat-widget-panel .chat-widget-chat.settings-open .chat-settings-panel {
  position: absolute;
  inset: 0;
  z-index: 30;
  flex: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 14px;
  border: 0;
  border-radius: 0;
}
#chat-widget-panel .chat-widget-chat.settings-open .chat-widget-messages,
#chat-widget-panel .chat-widget-chat.settings-open .chat-widget-input-area { visibility: hidden; pointer-events: none; }
#chat-widget-panel .chat-settings-panel[hidden] {
  display: none !important;
}
#chat-widget-panel .chat-settings-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) rgba(255,255,255,0.03);
  padding: 2px;
}
#chat-widget-panel .chat-settings-body::-webkit-scrollbar {
  width: 5px;
}
#chat-widget-panel .chat-settings-body::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.03);
  border-radius: 3px;
}
#chat-widget-panel .chat-settings-body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 3px;
}
#chat-widget-panel .chat-settings-header {
  padding: 8px 12px;
  flex-shrink: 0;
}
.chat-settings-panel[hidden] {
  display: none !important;
}
.chat-settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.chat-settings-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.chat-settings-close {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.chat-settings-close:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text);
}
.chat-settings-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 2px 2px 4px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) rgba(0,0,0,0.2);
}
.chat-settings-body::-webkit-scrollbar {
  width: 5px;
}
.chat-settings-body::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
}
.chat-settings-body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
}
.chat-settings-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.15);
}
.chat-settings-loading {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 24px 12px;
}
.chat-settings-section {
  padding: 14px;
  margin: 0;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}
.chat-settings-section h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
}
.chat-settings-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.chat-settings-field:last-child { margin-bottom: 0; }
.chat-settings-field label {
  font-size: 12px;
  color: var(--text);
  font-weight: 650;
}
.chat-settings-field input,
.chat-settings-field textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9px;
  padding: 10px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}
.chat-settings-field select { width:100%; border:1px solid var(--line); border-radius:9px; background:var(--ink); color:var(--text); padding:9px 10px; font:inherit; }
.settings-timezone-select { margin:11px 0 0 48px; }
.chat-settings-field input:focus,
.chat-settings-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255,255,255,0.075);
  box-shadow: 0 0 0 3px rgba(233,189,98,.1);
}
.chat-settings-field input:disabled,
.chat-settings-field textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(255,255,255,0.02);
}
.chat-settings-intro {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 2px 2px 0;
}
.chat-settings-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--gold);
}
.chat-settings-intro > div { min-width: 0; display: grid; gap: 1px; }
.chat-settings-intro span { color: var(--gold-soft); font-size: 11px; font-weight: 700; }
.chat-settings-intro b { color: var(--text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-settings-intro small,
.chat-settings-field small,
.chat-settings-help,
.settings-location-control small,
.settings-location-current small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.chat-settings-help { margin: -2px 0 11px; }
.settings-location-control {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.settings-location-control input { position: absolute; opacity: 0; pointer-events: none; }
.settings-toggle-ui {
  position: relative;
  width: 38px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: 1px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  transition: .2s ease;
}
.settings-toggle-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: .2s ease; }
.settings-location-control input:checked + .settings-toggle-ui { background: var(--green); }
.settings-location-control input:checked + .settings-toggle-ui::after { transform: translateX(16px); }
.settings-location-control input:focus-visible + .settings-toggle-ui { outline: 3px solid rgba(233,189,98,.35); outline-offset: 2px; }
.settings-location-control b { display: block; margin-bottom: 2px; color: var(--text); font-size: 12px; }
.settings-location-current { display: flex; align-items: flex-start; gap: 7px; margin: 10px 0 0 48px; padding: 8px 10px; border-radius: 8px; background: rgba(58,180,125,.08); color: var(--green); }
.settings-location-current > div { min-width: 0; display: grid; gap: 1px; }
.settings-location-current b { color: var(--text); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-location-status { min-height: 15px; margin: 8px 0 0 48px; color: var(--muted); font-size: 11px; }
.settings-super-wrap { margin: 13px 0 0 48px; padding: 12px; border-left: 2px solid rgba(233,189,98,.45); background: rgba(233,189,98,.04); border-radius: 0 9px 9px 0; }
.settings-super-wrap.is-disabled { opacity: .52; }
.settings-talkative-control { margin-top: 13px; display: grid; gap: 8px; }
.settings-talkative-control > div:first-child { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.settings-talkative-control label { color: var(--text); font-size: 12px; font-weight: 650; }
.settings-talkative-control output { color: var(--gold-soft); font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.settings-talkative-control input[type=range] { width: 100%; accent-color: var(--gold); }
.settings-slider-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
.settings-talkative-description { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.chat-session-item.is-locked .chat-session-grip { color: var(--gold); }
.chat-settings-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px 2px;
  background: linear-gradient(to bottom, transparent, var(--ink-raised) 25%);
}
.chat-settings-save-note { max-width: 58%; color: var(--muted); font-size: 11px; line-height: 1.35; }
.chat-settings-save {
  margin: 0;
  padding: 10px 15px;
  border-radius: 9px;
  background: var(--gold);
  color: var(--ink);
  border: none;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.chat-settings-save:hover {
  opacity: 0.85;
}
.chat-settings-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Per-message controls are unobtrusive until the bubble is focused or hovered.
   They work identically in the dashboard and floating chat without changing
   either surface's layout. */
.chat-message-bubble { position: relative; }
.chat-message-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 3px;
  opacity: .58;
  transition: opacity .16s ease;
}
.chat-message:hover .chat-message-actions,
.chat-message:focus-within .chat-message-actions { opacity: 1; }
/* Actions are an overlay, not a permanent 74 px content gutter.  Keeping the
   bubble's normal 10 px right inset lets maps and ordinary assistant replies
   use the full chat column. */
/* The action toolbar is deliberately overlaid so it does not waste horizontal
   chat space.  Reserve a compact header row vertically, though: otherwise a
   short first line can sit beneath the copy/delete controls. */
.chat-message-bubble:has(.chat-message-actions) {
  /* Keep a short bubble wide enough for its actual action toolbar.  The
     value is measured in JS after rendering, so adding a fourth or fifth
     action never makes the controls protrude beyond the bubble. */
  min-width: var(--chat-actions-min-width, 126px);
  padding-right: 10px;
  padding-top: 38px;
}
.chat-message-action,
.chat-code-copy {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  min-width: 26px;
  height: 25px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  background: rgba(14,18,20,.82);
  color: var(--muted);
  font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
}
.chat-message-action:hover,
.chat-code-copy:hover,
.chat-message-action.is-copied,
.chat-code-copy.is-copied { border-color: rgba(233,189,98,.55); color: var(--gold); }
.chat-message-action.is-danger:hover { border-color: rgba(240,109,109,.62); color: #f06d6d; }
.chat-message-action.is-ai { color: var(--cyan); font-size: 15px; }
.chat-message-action.is-ai:hover { border-color: rgba(103,237,245,.55); color: var(--cyan); box-shadow: 0 0 10px rgba(103,237,245,.14); }
.chat-message-action:disabled { cursor: wait; opacity: .5; }
.chat-code-block { position: relative; min-width: 0; max-width: 100%; margin: 8px 0; }
.chat-code-block .chat-code-scroll { margin: 0; padding-top: 42px !important; max-width: 100%; box-sizing: border-box; }
.chat-code-copy { position: absolute; z-index: 1; top: 7px; right: 7px; }
html[data-theme="light"] .chat-message-action,
html[data-theme="light"] .chat-code-copy { border-color: rgba(59,66,59,.2); background: rgba(255,250,241,.92); }

/* Coordinate cards stay visually separate from the prose, but deliberately
   remain inside the bubble so a resized session column cannot overflow. */
.chat-coordinate-panels { display: grid; gap: 8px; margin-top: 10px; max-width: 100%; }
/* A map is an interactive workspace, not prose: let only map-containing
   assistant messages use the full available chat column.  Plain replies keep
   the narrower, readable 85% measure. */
.chat-message.assistant:has(.chat-coordinate-panels) { width: 100%; max-width: min(100%, 920px); }
.chat-coordinate-panel {
  overflow: hidden;
  border: 1px solid rgba(103,237,245,.20);
  border-radius: 9px;
  background: rgba(103,237,245,.055);
  max-width: 100%;
}
.chat-coordinate-panel > summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 37px;
  padding: 7px 10px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.chat-coordinate-panel > summary::-webkit-details-marker { display: none; }
.chat-coordinate-panel > summary::after { content: '⌄'; margin-left: auto; color: var(--cyan); transition: transform .18s ease; }
.chat-coordinate-panel[open] > summary { border-bottom: 1px solid rgba(103,237,245,.16); }
.chat-coordinate-panel[open] > summary::after { transform: rotate(180deg); }
.chat-coordinate-panel > summary:hover { background: rgba(103,237,245,.075); }
.chat-coordinate-pin { color: var(--cyan); font-size: 18px; line-height: 1; }
.chat-coordinate-panel summary > span:not(.chat-coordinate-pin) { font-size: 12px; font-weight: 700; }
.chat-coordinate-panel summary code { margin-left: auto; color: var(--cyan); background: transparent; padding: 0; font-size: 11px; white-space: nowrap; }
.chat-coordinate-map-shell { position: relative; z-index: 0; isolation: isolate; padding: 9px; }
.chat-coordinate-map {
  position: relative;
  z-index: 0;
  height: clamp(176px, 30vw, 260px);
  min-height: 176px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  overflow: hidden;
  background: rgba(0,0,0,.22);
}
/* Let Leaflet retain its own measured tile geometry. CSS-resizing 256px tiles
   creates the very raster grid it was meant to hide, especially on HiDPI.
   Keep only a neutral rendering reset; zoom animation is disabled in JS. */
.chat-coordinate-map .leaflet-tile-container { will-change:auto; }
.chat-coordinate-map .leaflet-tile { box-sizing:content-box; max-width:none !important; max-height:none !important; margin:0; border:0; outline:1px solid transparent; backface-visibility:visible; image-rendering:auto; }
.chat-coordinate-map-loading { display: grid; height: 100%; margin: 0; place-items: center; color: var(--muted); font-size: 12px; }
.chat-coordinate-map-error { margin: 0; padding: 1rem; color: var(--muted); font-size: 12px; }
.chat-coordinate-external { display: inline-block; margin: 7px 2px 0; font-size: 11px; color: var(--cyan); }
.chat-coordinate-route-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 2px 0; color: var(--muted); font-size: 11px; }
.chat-coordinate-route-controls > span { margin-right: 1px; font-weight: 700; color: var(--text); }
.chat-coordinate-route-controls button { min-height: 27px; padding: 4px 7px; border: 1px solid rgba(103,237,245,.35); border-radius: 5px; background: rgba(103,237,245,.07); color: var(--text); cursor: pointer; font: 700 11px/1.1 system-ui, sans-serif; }
.chat-coordinate-map-jumps { display: inline-flex; align-items: center; gap: 3px; padding: 2px; border: 1px solid rgba(103,237,245,.20); border-radius: 6px; background: rgba(0,0,0,.10); }
.chat-coordinate-map-jumps[hidden] { display: none; }
.chat-coordinate-map-jumps button { min-height: 23px; padding: 3px 5px; border-color: transparent; background: transparent; color: var(--muted); }
.chat-coordinate-map-jumps button:hover,.chat-coordinate-map-jumps button:focus-visible { color: var(--text); border-color: rgba(103,237,245,.28); background: rgba(103,237,245,.13); }
.chat-coordinate-route-controls button:hover,.chat-coordinate-route-controls button:focus-visible { border-color: var(--cyan); background: rgba(103,237,245,.16); outline: none; }
.chat-coordinate-route-controls button:disabled { cursor: wait; opacity: .55; }
.chat-coordinate-route-controls small { flex-basis: 100%; min-height: 1.2em; color: var(--cyan); }
.chat-coordinate-map .leaflet-control-attribution { font-size: 9px; }
.chat-coordinate-map .leaflet-control-layers { max-width: 156px; margin: 4px; border: 1px solid rgba(14,18,20,.2); border-radius: 4px; box-shadow: 0 2px 9px rgba(0,0,0,.18); font: 600 11px/1.3 system-ui, sans-serif; }
.chat-coordinate-map .leaflet-control-layers-toggle { width: 22px; height: 22px; background-size: 13px 13px; }
.chat-coordinate-map .leaflet-control-layers label { display: flex; align-items: center; gap: 4px; padding: 3px 5px; white-space: nowrap; }
.chat-coordinate-map .leaflet-control-layers input { margin: 0; accent-color: #168392; }
.chat-coordinate-map .leaflet-control-zoom { margin: 4px; border: 0; box-shadow: 0 1px 6px rgba(0,0,0,.25); }
.chat-coordinate-map .leaflet-control-zoom a { width: 22px; height: 22px; line-height: 20px; font-size: 17px; }
/* Third member of Leaflet's native +/− bar: same geometry, directly below −. */
.chat-coordinate-map .leaflet-control-zoom .chat-map-poi-button { display: grid; padding: 0; place-items: center; border-radius: 0 0 4px 4px; font: 700 19px/1 system-ui, sans-serif; text-decoration: none; box-sizing: border-box; }
.chat-coordinate-map .leaflet-control-zoom .leaflet-control-zoom-out:has(+ .chat-map-poi-button) { border-radius: 0; }
.chat-coordinate-map .leaflet-control-zoom .chat-map-poi-button:hover,.chat-coordinate-map .leaflet-control-zoom .chat-map-poi-button:focus-visible { color: #087d8b; outline: 2px solid rgba(8,125,139,.45); outline-offset: 1px; }
.chat-map-poi-panel { position: absolute; z-index: 3000; top: 16px; left: 16px; display: none; width: min(300px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: hidden; border: 1px solid rgba(14,18,20,.22); border-radius: 8px; background: rgba(255,255,255,.98); box-shadow: 0 8px 25px rgba(0,0,0,.3); color: #1a2528; font: 12px/1.35 system-ui, sans-serif; }
.chat-map-poi-panel.is-open { display: grid; grid-template-rows: auto auto minmax(0,1fr); }
.chat-map-poi-panel header { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 9px; border-bottom: 1px solid rgba(14,18,20,.12); background: #edf8f7; }
.chat-map-poi-panel header strong { font-size: 12px; }
.chat-map-poi-panel header button { width: 22px; height: 22px; margin-left: auto; border: 0; border-radius: 4px; background: transparent; color: #496064; cursor: pointer; font-size: 19px; line-height: 1; }
.chat-map-poi-panel header button:hover { background: rgba(8,125,139,.1); color: #087d8b; }
.chat-map-poi-tools { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 8px; border-bottom: 1px solid rgba(14,18,20,.08); }
.chat-map-poi-panel select,.chat-map-poi-panel input { width: 100%; margin: 0; padding: 6px 8px; border: 1px solid rgba(14,18,20,.2); border-radius: 5px; background: #fff; color: #1a2528; font: inherit; box-sizing: border-box; }
.chat-map-poi-panel input:disabled { opacity: .65; }
.chat-map-poi-panel [data-map-poi-results] { min-height: 0; overflow: auto; padding: 0 8px 8px; }
.chat-map-poi-loading,.chat-map-poi-empty { margin: 9px 2px; color: #52686b; }
.chat-map-poi-scope { margin: 8px 2px 4px; color: #527075; font-size: 10px; font-weight: 650; }
.chat-map-poi-retry { margin: 0 2px 8px; padding: 5px 7px; border: 1px solid rgba(8,125,139,.35); border-radius: 5px; background: #fff; color: #087d8b; font: inherit; cursor: pointer; }
.chat-map-poi-category { margin: 0 0 7px; overflow: hidden; border: 1px solid rgba(14,18,20,.1); border-radius: 6px; }
.chat-map-poi-category h4 { display: flex; align-items: center; gap: 5px; margin: 0; padding: 5px 7px; background: #f4f7f7; font-size: 11px; }
.chat-map-poi-category h4 small { margin-left: auto; color: #527075; font-weight: 600; }
.chat-map-poi-item { display: flex; width: 100%; align-items: center; gap: 8px; min-height: 33px; padding: 4px 7px; border: 0; border-top: 1px solid rgba(14,18,20,.07); background: transparent; color: #1b373b; cursor: pointer; font: inherit; text-align: left; }
.chat-map-poi-item:hover { background: #eaf7f6; }
.chat-map-poi-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-map-poi-item small { display: block; overflow: hidden; color: #647d81; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.chat-map-poi-item b { margin-left: auto; color: #087d8b; font-size: 10px; white-space: nowrap; }
.chat-map-poi-item i { color: #6c8589; font-size: 18px; font-style: normal; line-height: 1; }
.chat-map-poi-detail-backdrop { position: fixed; z-index: 10050; inset: 0; display: grid; padding: 16px; place-items: center; background: rgba(7,16,18,.56); backdrop-filter: blur(3px); }
.chat-map-poi-detail { width: min(440px, 100%); max-height: min(720px, calc(100dvh - 32px)); overflow: auto; border: 1px solid rgba(103,237,245,.28); border-radius: 14px; background: #f9fcfc; box-shadow: 0 22px 65px rgba(0,0,0,.42); color: #183235; font: 14px/1.4 system-ui, sans-serif; }
.chat-map-poi-detail > header { display: flex; align-items: center; gap: 12px; padding: 16px; background: linear-gradient(135deg, #087d8b, #19586a); color: #fff; }
.chat-map-poi-detail-icon { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: 12px; background: rgba(255,255,255,.16); font-size: 25px; }
.chat-map-poi-detail h3,.chat-map-poi-detail p { margin: 0; }.chat-map-poi-detail h3 { font-size: 18px; line-height: 1.2; }.chat-map-poi-detail header p { margin-top: 3px; opacity: .86; font-size: 12px; }.chat-map-poi-detail header button { width: 30px; height: 30px; margin-left: auto; border: 0; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; font-size: 24px; line-height: 1; }
.chat-map-poi-detail-body { padding: 8px 16px; }.chat-map-poi-detail-row { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 9px; padding: 10px 0; border-bottom: 1px solid rgba(14,18,20,.08); }.chat-map-poi-detail-row > span { padding-top: 2px; text-align: center; }.chat-map-poi-detail-row small { color: #5c7478; font-size: 11px; font-weight: 700; text-transform: uppercase; }.chat-map-poi-detail-row p { overflow-wrap: anywhere; color: #213e42; }.chat-map-poi-detail-row a { color: #087d8b; }
.chat-map-poi-detail footer { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 16px 16px; }.chat-map-poi-detail footer button,.chat-map-poi-detail footer a { min-height: 36px; padding: 8px 10px; border: 1px solid rgba(8,125,139,.28); border-radius: 8px; background: #fff; color: #087d8b; cursor: pointer; font: 700 12px/1.2 system-ui,sans-serif; text-decoration: none; }.chat-map-poi-detail footer a { margin-left: auto; background: #087d8b; color: #fff; }
html[data-theme="light"] .chat-coordinate-panel { border-color: rgba(0,119,135,.26); background: rgba(103,237,245,.09); }

@media (max-width: 520px) {
  .chat-coordinate-panel > summary { flex-wrap: wrap; gap: 4px 7px; }
  .chat-coordinate-panel summary code { width: calc(100% - 28px); margin-left: 28px; }
  .chat-coordinate-panel > summary::after { position: absolute; right: 12px; }
  .chat-coordinate-map { height: 190px; min-height: 190px; }
  .chat-coordinate-route-controls { gap: 5px; }
  .chat-coordinate-map .leaflet-control-layers { max-width: 132px; margin: 4px; font-size: 10px; }
  .chat-coordinate-map .leaflet-control-layers label { padding: 2px 4px; }
  .chat-map-poi-panel { top: 9px; left: 9px; width: min(276px, calc(100% - 18px)); max-height: calc(100% - 18px); }
}
html[data-theme="light"] .chat-settings-section { border-color: rgba(59,66,59,.12); background: rgba(255,255,255,.42); }
html[data-theme="light"] .chat-settings-footer { background: linear-gradient(to bottom, transparent, var(--ink-raised) 25%); }

.chat-widget-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
}
.chat-widget-settings,
.chat-widget-pin {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: rgba(255,255,255,0.05);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  padding: 0;
}
.chat-widget-settings:hover,
.chat-widget-pin:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text);
}
.chat-widget-settings svg,
.chat-widget-pin svg {
  width: 14px;
  height: 14px;
}
.chat-widget-pin.active {
  background: rgba(233,189,98,.2);
  color: var(--gold-soft);
  box-shadow: inset 0 0 0 1px rgba(233,189,98,.35), 0 0 10px rgba(233,189,98,.14);
}
.chat-widget-close:focus-visible,
.chat-widget-settings:focus-visible,
.chat-widget-pin:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Theme selector and warm light theme */
.theme-switcher { display: inline-flex; align-items: center; gap: 2px; margin-right: 20px; padding: 3px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(10,13,15,.6); backdrop-filter: blur(8px); }
.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.theme-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn:hover { color: var(--gold-soft); }
.theme-btn.active { background: rgba(233,189,98,.2); color: var(--gold-soft); box-shadow: 0 0 10px rgba(233,189,98,.2); }

html[data-theme="light"] {
  --ink: #f3f0e9;
  --ink-raised: #fffaf1;
  --graphite: #e8e4da;
  --user-bubble: #eee0c6;
  --line: rgba(59, 66, 59, .18);
  --text: #20261f;
  --muted: #626b62;
  --gold: #9a6512;
  --gold-soft: #7d4f09;
  --cyan: #087f8d;
  --magenta: #a33c80;
  --green: #2e7852;
  --amber: #9a5f11;
  --link: #08707d;
}

html[data-theme="light"], html[data-theme="light"] body { background: var(--ink); }
html[data-theme="light"] ::selection { color: #fffaf1; background: var(--gold); }
html[data-theme="light"] .topbar { border-bottom-color: rgba(58,65,58,.16); background: rgba(255,250,241,.94); }
html[data-theme="light"] .topbar.is-scrolled { background: rgba(255,250,241,.92); border-bottom-color: rgba(58,65,58,.22); }
html[data-theme="light"] .page-restore-overlay { background: rgba(239,237,227,.58); }
html[data-theme="light"] .page-restore-card { border-color: rgba(58,65,58,.16); background: rgba(255,250,241,.93); box-shadow: 0 20px 60px rgba(63,76,67,.2); }
html[data-theme="light"] .topbar nav a { color: #41483f; }
html[data-theme="light"] .topbar nav a:hover, html[data-theme="light"] .topbar nav a.active { color: var(--gold-soft); }
html[data-theme="light"] .lang-btn, html[data-theme="light"] .theme-switcher { border-color: rgba(61,69,61,.18); background: rgba(255,250,241,.72); box-shadow: 0 3px 12px rgba(74,65,47,.08); }
html[data-theme="light"] .lang-btn:hover, html[data-theme="light"] .lang-btn.active { background: rgba(154,101,18,.12); }
html[data-theme="light"] .theme-btn[data-theme="dark"] { background: transparent; color: var(--muted); box-shadow: none; }
html[data-theme="light"] .theme-btn[data-theme="light"] { background: rgba(154,101,18,.15); color: var(--gold-soft); box-shadow: 0 0 10px rgba(154,101,18,.18); }
html[data-theme="light"] .theme-btn.active { background: rgba(154,101,18,.15); color: var(--gold-soft); box-shadow: 0 0 10px rgba(154,101,18,.18); }

html[data-theme="light"] .hero { background: #111316; }
html[data-theme="light"] .hero-image { filter: saturate(1.02) contrast(1.04) brightness(.84); }
html[data-theme="light"] .hero-shade { background: linear-gradient(90deg, rgba(8,12,15,.86) 0%, rgba(9,13,17,.58) 43%, rgba(9,13,17,.1) 78%), linear-gradient(0deg, rgba(243,240,233,.32) 0%, transparent 28%, rgba(4,7,10,.1) 100%); }
html[data-theme="light"] .hero h1, html[data-theme="light"] .hero-lead, html[data-theme="light"] .hero-readout strong { color: #fffdf8; }
html[data-theme="light"] .hero-readout { border-color: rgba(255,255,255,.45); color: #dce7df; }
html[data-theme="light"] .readout-line { border-bottom-color: rgba(255,255,255,.2); }
html[data-theme="light"] .readout-line span, html[data-theme="light"] .scroll-cue { color: #e3ece6; }

html[data-theme="light"] .capability-card { background: linear-gradient(145deg, rgba(255,255,255,.76), rgba(233,229,220,.32) 74%); }
html[data-theme="light"] .capability-card:hover { background: #fffaf1; box-shadow: inset 0 0 0 1px rgba(8,127,141,.42), 0 13px 28px rgba(74,65,47,.09); }
html[data-theme="light"] .card-index { color: #788076; }
html[data-theme="light"] .card-tag { color: #4e574e; }
html[data-theme="light"] .operating { background: #e5e9e1; }
html[data-theme="light"] .operating::before { opacity: .42; background-image: linear-gradient(rgba(48,69,62,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(48,69,62,.11) 1px, transparent 1px); }
html[data-theme="light"] .principles, html[data-theme="light"] .principles article { border-color: rgba(57,72,63,.23); }
html[data-theme="light"] .origin-note p { color: #6a726a; }

html[data-theme="light"] .cockpit { background: #dfe7e1; }
html[data-theme="light"] .cockpit-backdrop { opacity: .16; filter: grayscale(.22) saturate(.72) brightness(1.18); }
html[data-theme="light"] .cockpit-backdrop::after { background: linear-gradient(90deg, rgba(223,231,225,.98) 2%, rgba(223,231,225,.86) 46%, rgba(223,231,225,.98)); }
html[data-theme="light"] .status-panel { border-color: rgba(8,127,141,.34); background: rgba(255,250,241,.83); box-shadow: 0 22px 54px rgba(63,76,67,.16), inset 0 0 42px rgba(8,127,141,.04); }
html[data-theme="light"] .status-panel::before { background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(8,127,141,.04) 3px, rgba(8,127,141,.04) 4px); }
html[data-theme="light"] .panel-topline, html[data-theme="light"] .panel-footer, html[data-theme="light"] .system-list div, html[data-theme="light"] .status-meta b { color: #4b574f; }
html[data-theme="light"] .panel-main, html[data-theme="light"] .metric-row, html[data-theme="light"] .metric-row > div, html[data-theme="light"] .panel-footer { border-color: var(--line); }

html[data-theme="light"] .account { background: linear-gradient(145deg, rgba(255,250,241,.62), rgba(228,239,235,.48)); }
html[data-theme="light"] .account-panel, html[data-theme="light"] .dashboard-panel { background: linear-gradient(145deg, rgba(255,250,241,.94), rgba(228,239,235,.82)); box-shadow: 0 16px 40px rgba(63,76,67,.1); }
html[data-theme="light"] .account-details div { border-color: rgba(59,66,59,.16); background: rgba(255,255,255,.62); }
html[data-theme="light"] .metric-card { background: rgba(255,255,255,.56); }
html[data-theme="light"] footer { background: #e9e6de; }
html[data-theme="light"] .footer-inner { color: #5d685f; }
html[data-theme="light"] .footer-inner p:last-child, html[data-theme="light"] .version { color: #6c756d; }

html[data-theme="light"] .chat-container, html[data-theme="light"] .chat-widget-panel, html[data-theme="light"] .chat-settings-panel { border-color: rgba(59,66,59,.18); background: var(--ink-raised); box-shadow: 0 18px 46px rgba(63,76,67,.15); }
html[data-theme="light"] .chat-header, html[data-theme="light"] .chat-widget-header { border-color: rgba(59,66,59,.14); background: rgba(232,228,218,.56); }
html[data-theme="light"] .chat-header-btn, html[data-theme="light"] .chat-toolbar-btn, html[data-theme="light"] .chat-widget-close, html[data-theme="light"] .chat-widget-settings, html[data-theme="light"] .chat-widget-pin, html[data-theme="light"] .chat-quick-prompt { border-color: rgba(59,66,59,.16); background: rgba(231,227,217,.62); }
html[data-theme="light"] .chat-widget-pin.active { background: rgba(194,143,42,.16); color: #805c16; box-shadow: inset 0 0 0 1px rgba(154,106,23,.32), 0 0 10px rgba(154,106,23,.12); }
html[data-theme="light"] .chat-model-select, html[data-theme="light"] .chat-input, html[data-theme="light"] .onboarding-question input, html[data-theme="light"] .chat-settings-field input, html[data-theme="light"] .chat-settings-field textarea { border-color: rgba(59,66,59,.19); background: rgba(255,255,255,.72); }
html[data-theme="light"] .schedule-wizard-prompt textarea { border-color:rgba(59,66,59,.19); background:rgba(255,255,255,.72); }
html[data-theme="light"] .chat-input-area, html[data-theme="light"] .chat-widget-input-area { border-color: rgba(59,66,59,.14); background: rgba(232,228,218,.48); }
html[data-theme="light"] .chat-message.assistant .chat-message-bubble { border-color: rgba(59,66,59,.1); background: #f0ede6; }
html[data-theme="light"] .chat-table-wrap { border-color: rgba(59,66,59,.16); }
html[data-theme="light"] .chat-table th { background: rgba(194,143,42,.11); }
html[data-theme="light"] .chat-table th, html[data-theme="light"] .chat-table td { border-color: rgba(59,66,59,.1); }
html[data-theme="light"] .chat-table tr:nth-child(even) td { background: rgba(59,66,59,.035); }
html[data-theme="light"] .chat-image-card { border-color: rgba(59,66,59,.16); background: rgba(255,255,255,.42); }
html[data-theme="light"] .chat-message-content blockquote { background: rgba(66,142,149,.07); }
html[data-theme="light"] .chat-message-content hr { background: rgba(59,66,59,.16); }
html[data-theme="light"] .chat-message.user .chat-message-bubble { border-color: rgba(154,101,18,.28); background: #f4e8d1; }
html[data-theme="light"] .chat-message.pending .chat-message-bubble { border-color: rgba(59,66,59,.1); background: rgba(232,228,218,.62); }
html[data-theme="light"] .chat-messages::-webkit-scrollbar-track, html[data-theme="light"] .chat-settings-body::-webkit-scrollbar-track, html[data-theme="light"] .chat-widget-messages::-webkit-scrollbar-track, html[data-theme="light"] #chat-widget-panel .chat-settings-body::-webkit-scrollbar-track, html[data-theme="light"] ::-webkit-scrollbar-track { background: rgba(59,66,59,.06); }
html[data-theme="light"] .chat-messages::-webkit-scrollbar-thumb, html[data-theme="light"] .chat-settings-body::-webkit-scrollbar-thumb, html[data-theme="light"] .chat-widget-messages::-webkit-scrollbar-thumb, html[data-theme="light"] #chat-widget-panel .chat-settings-body::-webkit-scrollbar-thumb, html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(59,66,59,.22); }
html[data-theme="light"] .chat-messages, html[data-theme="light"] .chat-settings-body, html[data-theme="light"] .chat-widget-messages, html[data-theme="light"] #chat-widget-panel .chat-settings-body, html[data-theme="light"] * { scrollbar-color: rgba(59,66,59,.22) rgba(59,66,59,.06); }
html[data-theme="light"] .chat-widget-toggle { background: var(--ink-raised); box-shadow: 0 4px 20px rgba(63,76,67,.2), 0 0 0 1px rgba(59,66,59,.15); }
html[data-theme="light"] .onboarding-progress-dot { background: rgba(59,66,59,.17); }
html[data-theme="light"] .cookie-overlay { background: rgba(46,51,46,.42); }
html[data-theme="light"] .cookie-modal { background: var(--ink-raised); box-shadow: 0 22px 60px rgba(63,76,67,.22); }

@media (max-width: 850px) { .theme-switcher { margin-left: 0; margin-right: 14px; } }
@media (max-width: 580px) {
  .lang-switcher { gap: 5px; margin-left: auto; margin-right: 8px; }
  .theme-switcher { margin-right: 8px; }
  .theme-btn { width: 24px; height: 24px; }
  html[data-theme="light"] .hero-shade { background: linear-gradient(90deg, rgba(8,12,15,.9) 0%, rgba(9,13,17,.57) 100%), linear-gradient(0deg, rgba(243,240,233,.32) 0%, transparent 32%); }
}

/* Dashboard chat workbench and workspace file manager */
.chat-section.shell { max-width: min(1760px, calc(100vw - 32px)); }
.chat-section .section-heading { max-width: 980px; margin-bottom: 1.2rem; }
/* Chat UI - Unified Window Design */
.chat-workbench {
  display: flex;
  min-width: 0;
  gap: 0;
  align-items: stretch;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
  height: clamp(520px, 75vh, 900px);
  background: var(--ink-raised);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.chat-session-sidebar {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 260px;
  min-width: 180px;
  max-width: 400px;
  padding: 14px;
  border: none;
  border-right: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  background: rgba(255,255,255,0.02);
  box-shadow: none;
  overflow: hidden;
}
.chat-session-sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
}
.chat-sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  font: 600 12px/1.15 inherit;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.chat-sidebar-toggle:hover {
  color: var(--gold);
  border-color: rgba(233,189,98,.36);
  background: rgba(233,189,98,.09);
}
.chat-sidebar-toggle-icon { font: 700 22px/.7 ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (min-width: 981px) {
  .chat-workbench.is-session-sidebar-collapsed .chat-session-sidebar {
    width: 44px !important;
    min-width: 44px;
    max-width: 44px;
    padding: 6px;
    border-right-color: rgba(255,255,255,.08);
  }
  .chat-workbench.is-session-sidebar-collapsed .chat-session-sidebar-header,
  .chat-workbench.is-session-sidebar-collapsed .chat-session-search,
  .chat-workbench.is-session-sidebar-collapsed .chat-session-list,
  .chat-workbench.is-session-sidebar-collapsed .chat-session-hint {
    display: none;
  }
  .chat-workbench.is-session-sidebar-collapsed .chat-session-sidebar-footer {
    display: flex;
    min-height: 100%;
    padding: 0;
    align-items: flex-end;
  }
  .chat-workbench.is-session-sidebar-collapsed .chat-sidebar-toggle {
    width: 32px;
    min-height: 34px;
    padding: 6px;
  }
  .chat-workbench.is-session-sidebar-collapsed .chat-sidebar-toggle-label { display: none; }
  .chat-workbench.is-session-sidebar-collapsed .chat-sidebar-toggle-icon { transform: rotate(180deg); }
  .chat-workbench.is-session-sidebar-collapsed .chat-splitter { display: none; }
}
.chat-workbench .chat-container {
  flex: 1;
  min-width: 0;
  min-height: auto;
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: hidden;
}
.chat-workbench .chat-messages {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  /* The sidebar is resizable: messages must shrink with the remaining pane
     instead of turning the message viewport into a horizontal scroller. */
  overflow-x: hidden;
}

/* Dashboard-only width containment.  The floating Messenger widget keeps its
   deliberately independent message layout.  Long shell commands still scroll
   inside their own code block, never across the chat pane. */
.chat-workbench .chat-message {
  min-width: 0;
  max-width: min(85%, 100%);
}
/* Ordinary assistant replies should remain bubbles, not full-width cards.
   Only messages that actually contain an interactive map expand below. */
.chat-workbench .chat-message.assistant {
  width: fit-content;
  max-width: min(85%, 100%);
}
.chat-workbench .chat-message.assistant.pending {
  width: fit-content;
  max-width: max-content;
}
.chat-workbench .chat-message.assistant.pending .chat-message-bubble {
  /* This must win over the later generic workbench bubble width:100% rule.
     A typing indicator has no message content, so it should hug its three
     dots instead of painting a full-width grey bar. */
  width: fit-content;
  min-width: 0;
  max-width: none;
  padding: 10px 14px;
}
.chat-workbench .chat-message.assistant.pending .chat-message-typing {
  width: max-content;
  margin: 0;
}
.chat-workbench .chat-messages { padding: 10px; }
.chat-workbench .chat-message-bubble,
.chat-workbench .chat-message-content {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.chat-workbench .chat-message-bubble {
  width: 100%;
}
/* Maps need the available canvas width; keep this exception narrow so normal
   prose such as "pong" does not paint all the way to the edge. */
.chat-workbench .chat-message.assistant:has(.chat-coordinate-panels) {
  width: 100%;
  max-width: min(100%, 920px);
}
/* Keep the pending/typing bubble compact after the generic full-width rule
   above.  This is intentionally here (later in the cascade). */
.chat-workbench .chat-message.assistant.pending .chat-message-bubble {
  width: fit-content;
  max-width: fit-content;
}
.chat-workbench .chat-message-content pre,
.chat-workbench .chat-table-wrap,
.chat-workbench .chat-math {
  max-width: 100%;
  box-sizing: border-box;
}

/* Resizable splitter */
.chat-splitter {
  flex-shrink: 0;
  width: 5px;
  cursor: col-resize;
  background: rgba(255,255,255,0.03);
  border-left: 1px solid rgba(255,255,255,0.06);
  border-right: 1px solid rgba(255,255,255,0.06);
  transition: background 0.2s, border-color 0.2s;
  position: relative;
}
.chat-splitter:hover,
.chat-splitter.is-resizing {
  background: rgba(233,189,98,0.15);
  border-color: rgba(233,189,98,0.25);
}
.chat-splitter::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 24px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
  transition: background 0.2s;
}
.chat-splitter:hover::after,
.chat-splitter.is-resizing::after {
  background: var(--gold);
}

/* Sidebar header refinements */
.chat-session-sidebar-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
}
.chat-session-sidebar h3 {
  margin: 3px 0 0;
  font-size: 1rem;
}
.chat-session-search {
  display: block;
  margin-top: 8px;
}
.chat-session-search input,
.chat-widget-session-menu input {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  padding: 7px 9px;
  background: rgba(255,255,255,.04);
  color: var(--text);
  font: inherit;
  font-size: .78rem;
}
.chat-session-search input:focus,
.chat-widget-session-menu input:focus {
  outline: none;
  border-color: rgba(233,189,98,.55);
  background: rgba(255,255,255,.06);
}
.chat-session-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.chat-session-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  gap: 6px;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: grab;
  transition: background 0.15s, border-color 0.15s;
}
.chat-session-item:hover, .chat-session-item.is-active {
  border-color: rgba(233,189,98,.28);
  background: rgba(233,189,98,.09);
}
.chat-session-item.is-favorite .chat-session-copy b::before {
  content: '♥ ';
  color: var(--gold);
}
.chat-session-item:active {
  cursor: grabbing;
}
.chat-session-main {
  display: flex;
  min-width: 0;
  gap: 8px;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  padding: 0;
}
.chat-session-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.2s;
}
.chat-session-item:hover .chat-session-actions,
.chat-session-item:focus-within .chat-session-actions,
.chat-session-item.is-active .chat-session-actions {
  opacity: 1;
}
.chat-session-actions button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.chat-session-actions button:hover {
  background: rgba(255,255,255,.08);
  color: var(--gold);
}
.chat-session-menu-toggle { display: none; }
.chat-session-grip {
  color: var(--muted);
  line-height: 1.5;
  flex-shrink: 0;
}
.chat-session-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.chat-session-copy b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .88rem;
}
.chat-session-unread,
.chat-widget-session-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font: 800 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  vertical-align: 1px;
}
.chat-session-item:not(.is-active):has(.chat-session-unread) {
  border-color: rgba(233,189,98,.28);
  background: rgba(233,189,98,.055);
}
.chat-session-copy small, .chat-session-hint, .file-manager-header p, .file-row small {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
}
.chat-session-hint {
  margin: 8px 2px 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.chat-session-empty, .file-empty {
  color: var(--muted);
  padding: 16px 4px;
  margin: 0;
  font-size: .86rem;
}

.chat-widget-session-picker {
  position: relative;
}
.chat-widget-session-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: 128px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  background: rgba(255,255,255,.04);
  color: var(--muted);
  cursor: pointer;
  font: 700 11px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.chat-widget-session-toggle span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-widget-session-toggle:hover,
.chat-widget-session-toggle[aria-expanded="true"] {
  color: var(--text);
  border-color: rgba(233,189,98,.42);
  background: rgba(233,189,98,.08);
}
.chat-widget-session-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 8px);
  right: -80px;
  width: min(300px, calc(100vw - 32px));
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  background: var(--ink-raised);
  box-shadow: 0 18px 50px rgba(0,0,0,.42);
}
.chat-widget-session-results {
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  margin-top: 9px;
}
.chat-widget-session-option {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.chat-widget-session-option:hover,
.chat-widget-session-option.is-active {
  border-color: rgba(233,189,98,.28);
  background: rgba(233,189,98,.08);
}
.chat-widget-session-option b,
.chat-widget-session-option small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-widget-session-unread { margin-left: 5px; vertical-align: 1px; }
.chat-widget-session-option small {
  color: var(--muted);
  font-size: .72rem;
}
.chat-widget-attach {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
}
.chat-widget-active-files {
  padding-bottom: 8px;
}

/* Chat header refinements for unified layout */
.chat-workbench .chat-header {
  flex-shrink: 0;
}
.chat-workbench .chat-input-area {
  flex-shrink: 0;
}

/* File manager under the chat */
.file-manager {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  box-shadow: 0 14px 38px rgba(0,0,0,.14);
}
.file-manager-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.file-manager-header p {
  max-width: 620px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
}
.file-manager h3 {
  margin: 3px 0 0;
  font-size: 1rem;
}
.file-manager-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.file-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.file-filter-group {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(0,0,0,.12);
}
.file-filter-group button {
  border: 0;
  border-radius: 6px;
  padding: 6px 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: .78rem;
}
.file-filter-group button.is-active,
.file-filter-group button:hover {
  background: rgba(233,189,98,.12);
  color: var(--gold);
}
.file-filter-group .file-drive-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cyan);
  border-left: 1px solid rgba(255,255,255,.11);
  margin-left: 2px;
}
.drive-brand-mark { width: 15px; height: 15px; flex: 0 0 15px; }
.file-filter-group .file-drive-button:hover {
  color: var(--gold);
}
.file-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding: 14px 0 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
}
.file-breadcrumb button,
.file-row-actions button,
.file-row-actions a {
  border: 0;
  background: transparent;
  color: var(--cyan);
  padding: 2px 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.file-breadcrumb button:hover,
.file-row-actions button:hover,
.file-row-actions a:hover {
  color: var(--gold);
}
.file-list {
  border-top: 1px solid rgba(255,255,255,.08);
}
.file-list.is-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.file-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 4px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.file-list.is-grid .file-row {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255,255,255,.025);
}
.file-row.is-selected,
.file-row.is-attached {
  border-color: rgba(233,189,98,.32);
  background: rgba(233,189,98,.07);
}
.file-select {
  display: grid;
  place-items: center;
}
.file-select input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.file-select span {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(0,0,0,.12);
}
.file-select input:checked + span {
  border-color: var(--gold);
  background: var(--gold);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.28);
}
.file-open {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.file-open span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.file-open b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-thumb {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  color: var(--gold);
}
.file-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.file-thumb-icon {
  font-size: 1.35rem;
  color: var(--gold);
}
.file-row-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  font-size: .74rem;
}
.file-list.is-grid .file-row-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
}
.chat-active-files,
.chat-message-files {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.chat-active-files {
  padding: 8px 0 10px;
}
.chat-active-file {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(233,189,98,.26);
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(233,189,98,.08);
  color: var(--text);
  text-decoration: none;
  font-size: .78rem;
}
.chat-file-preview {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(255,255,255,.07);
  color: var(--gold);
}
.chat-file-preview-message {
  width: 42px;
  height: 42px;
}
.chat-file-preview-active {
  width: 24px;
  height: 24px;
}
.chat-file-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chat-active-file.is-image {
  min-height: 30px;
  padding: 3px 7px 3px 3px;
  border-radius: 8px;
}
.chat-active-file b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
  font-weight: 600;
}
.chat-message-file {
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}
.chat-message-document-attachment {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 330px);
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid rgba(233,189,98,.28);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(233,189,98,.09), rgba(255,255,255,.025));
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.chat-message-document-attachment:hover {
  border-color: rgba(233,189,98,.58);
  background: rgba(233,189,98,.14);
  transform: translateY(-1px);
}
.chat-document-type {
  flex: 0 0 auto;
  min-width: 36px;
  padding: 5px 4px;
  border: 1px solid rgba(233,189,98,.44);
  border-radius: 6px;
  color: var(--gold);
  font: 700 .58rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
  text-align: center;
}
.chat-document-details {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.chat-document-details b {
  overflow: hidden;
  color: var(--text);
  font-size: .79rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-document-details small {
  color: var(--muted);
  font-size: .67rem;
}
.chat-document-download {
  margin-left: auto;
  color: var(--gold);
  font-size: 1.1rem;
  line-height: 1;
}
.chat-message-image-attachment {
  display: block;
  position: relative;
  width: min(100%, 420px);
  overflow: hidden;
  border: 1px solid rgba(233,189,98,.28);
  border-radius: 12px;
  background: rgba(0,0,0,.15);
}
.chat-message-image-attachment img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  background: rgba(0,0,0,.12);
}
.chat-image-attachment-caption {
  display: block;
  overflow: hidden;
  padding: 7px 10px;
  color: var(--muted);
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-active-file button {
  border: 0;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  background: rgba(255,255,255,.1);
  color: var(--muted);
  cursor: pointer;
}
.chat-active-file button:hover {
  color: var(--gold);
}
.attachment-modal-backdrop {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 5, 7, .72);
  backdrop-filter: blur(8px);
}
body.has-attachment-modal {
  overflow: hidden;
}
body.has-drive-modal {
  overflow: hidden;
}
.attachment-modal {
  width: min(760px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(233,189,98,.28);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(24,29,33,.98), rgba(12,15,18,.98));
  box-shadow: 0 24px 70px rgba(0,0,0,.48);
}
.attachment-modal-header,
.attachment-modal-toolbar,
.attachment-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
}
.attachment-modal-header { align-items: flex-start; border-bottom: 1px solid rgba(255,255,255,.08); }
.attachment-modal-header h3 { margin: 3px 0 0; font-size: 1.1rem; }
.attachment-modal-header p:not(.panel-kicker) { max-width: 520px; margin: 6px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.attachment-modal-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 32px;
  height: 32px;
  margin-top: 2px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font: 400 22px/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.attachment-modal-close:hover { color: var(--gold); border-color: rgba(233,189,98,.38); }
.attachment-modal-toolbar { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.attachment-breadcrumb { min-height: 34px; display: flex; align-items: center; gap: 5px; overflow-x: auto; border-top: 1px solid rgba(255,255,255,.08); padding: 6px 18px; color: var(--muted); font-size: .76rem; white-space: nowrap; }
.attachment-breadcrumb button { border: 0; padding: 2px 0; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.attachment-breadcrumb button:hover { color: var(--gold); }
.attachment-folder-icon { color: var(--gold); font-size: 1.05rem; line-height: 1; }
.attachment-selector-list {
  min-height: 180px;
  overflow: auto;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 8px 18px;
}
.attachment-selector-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 10px 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.attachment-selector-item:hover { background: rgba(255,255,255,.05); }
.attachment-selector-item.is-attached { border-color: rgba(233,189,98,.32); background: rgba(233,189,98,.08); }
.attachment-selector-meta { min-width: 0; display: grid; gap: 4px; }
.attachment-selector-item > span:last-child { margin-left: auto; }
.attachment-selector-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-selector-item small { color: var(--muted); font-size: .74rem; }
.attachment-selector-check {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
  color: transparent;
}
.attachment-selector-item.is-attached .attachment-selector-check { border-color: var(--gold); background: var(--gold); color: #101214; }
.attachment-selector-empty { margin: 30px 0; color: var(--muted); text-align: center; }
.attachment-upload-progress { display: grid; gap: 8px; padding: 0 18px 12px; }
.attachment-upload-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; align-items: center; font-size: .78rem; }
.attachment-upload-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-upload-row small { color: var(--muted); }
.attachment-upload-track { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.1); }
.attachment-upload-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--gold)); transition: width .15s ease; }
.attachment-upload-row.is-error small { color: #ee9a9a; }
.attachment-modal-footer { color: var(--muted); font-size: .8rem; }
.drive-modal-backdrop {
  position: fixed;
  z-index: 121;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 5, 7, .72);
  backdrop-filter: blur(8px);
}
.drive-modal {
  width: min(980px, 100%);
  height: min(760px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(73, 191, 202, .3);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(24,29,33,.98), rgba(12,15,18,.98));
  box-shadow: 0 24px 70px rgba(0,0,0,.48);
}
.drive-header-actions { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.drive-sync-toggle { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .76rem; white-space: nowrap; cursor: pointer; }
.drive-sync-now { white-space: nowrap; }
.drive-bookmark-current { width: 30px; padding-inline: 0; font-size: 1rem; color: var(--gold); }
.drive-sync-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.drive-sync-switch { position: relative; width: 34px; height: 19px; border: 1px solid rgba(233,189,98,.34); border-radius: 999px; background: rgba(255,255,255,.06); transition: background .18s, border-color .18s; }
.drive-sync-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--muted); transition: transform .18s, background .18s; }
.drive-sync-toggle input:checked + .drive-sync-switch { border-color: var(--cyan); background: rgba(73,191,202,.2); }
.drive-sync-toggle input:checked + .drive-sync-switch::after { transform: translateX(15px); background: var(--cyan); }
.drive-sync-toggle input:focus-visible + .drive-sync-switch { outline: 2px solid var(--gold); outline-offset: 3px; }
.drive-sync-toggle input:disabled + .drive-sync-switch { opacity: .52; }
.drive-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}
.drive-pane {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
}
.drive-source-pane { grid-template-rows: auto auto minmax(0, 1fr); }
.drive-pane + .drive-pane { border-left: 1px solid rgba(255,255,255,.08); }
.drive-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.drive-bookmarks {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px 12px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.018);
  scrollbar-width: thin;
}
.drive-bookmarks-label { flex: 0 0 auto; color: var(--muted); font: 700 .76rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.drive-bookmark-chip { display: inline-flex; align-items: center; min-width: 0; border: 1px solid rgba(255,255,255,.11); border-radius: 6px; background: rgba(255,255,255,.035); }
.drive-bookmark-chip.is-active { border-color: rgba(73,191,202,.54); background: rgba(73,191,202,.1); }
.drive-bookmark-chip > button:first-child { max-width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: transparent; color: var(--text); padding: 4px 7px; font: 700 .68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
.drive-bookmark-remove { width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; }
.drive-bookmark-remove:hover { color: #ee9a9a; background: rgba(238,154,154,.12); }
.drive-pane-header h4 { margin: 0; font-size: .86rem; }
.drive-pane-header span { color: var(--cyan); font: 700 .72rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.drive-up-button {
  border: 0;
  background: transparent;
  color: var(--cyan);
  font: inherit;
  font-size: .76rem;
  cursor: pointer;
}
.drive-pane-actions { display: inline-flex; align-items: center; gap: 12px; }
.drive-up-button:disabled { color: var(--muted); cursor: default; }
.drive-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 40px;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: var(--muted);
  font: .72rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.drive-breadcrumb button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cyan);
  font: inherit;
  cursor: pointer;
}
.drive-source-list, .drive-target-list { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 8px; }
.drive-target-list.is-grid, .drive-source-list.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-content: start; gap: 8px; }
.drive-target-list.is-grid .drive-target-item, .drive-source-list.is-grid .drive-source-item, .drive-source-list.is-grid .drive-source-parent { min-width: 0; grid-template-columns: 1fr; text-align: center; position: relative; overflow: hidden; }
.drive-target-list.is-grid .drive-target-item input, .drive-source-list.is-grid .drive-source-item input { position: absolute; z-index: 1; top: 7px; left: 7px; }
.drive-target-list.is-grid .file-thumb, .drive-source-list.is-grid .file-thumb { width: 100%; min-width: 0; max-width: 100%; height: 86px; overflow: hidden; }
.drive-source-list.is-grid .drive-text-preview { display: block; padding: 7px 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 5px; background: rgba(0,0,0,.18); color: var(--muted); font: .58rem/1.32 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow: hidden; text-align: left; }
.drive-source-list:not(.is-grid) .drive-text-preview {
  display: block;
  width: 52px;
  height: 32px;
  padding: 4px 5px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  background: rgba(0,0,0,.18);
  color: var(--muted);
  font: .47rem/1.22 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  overflow: hidden;
  text-align: left;
}
.drive-source-list.is-grid .drive-source-open { grid-template-columns: 1fr; width: 100%; justify-items: center; text-align: center; }
.drive-target-list.is-grid .drive-target-item > span:last-child, .drive-source-list.is-grid .drive-source-open > span:last-child { width: 100%; min-width: 0; }
.drive-target-list .file-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.drive-footer-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.drive-source-item, .drive-target-item, .drive-source-parent {
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text);
  text-align: left;
  font: inherit;
}
.drive-source-item { grid-template-columns: auto minmax(0, 1fr); }
.drive-source-open, .drive-source-parent { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.drive-source-parent { width: 100%; padding: 8px; border: 1px solid transparent; }
.drive-target-item { border: 0; background: transparent; cursor: pointer; }
.drive-source-item:hover, .drive-source-item.is-selected, .drive-source-parent:hover, .drive-target-item:hover:not(:disabled) { border-color: rgba(233,189,98,.28); background: rgba(233,189,98,.08); }
.drive-target-item.is-file { opacity: .62; cursor: default; }
.drive-source-item input { accent-color: var(--gold); }
.drive-source-item b, .drive-source-parent b, .drive-target-item b { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.drive-source-item small, .drive-source-parent small, .drive-target-item small { display: block; margin-top: 3px; color: var(--muted); font-size: .7rem; }
.drive-source-item .file-thumb, .drive-target-item .file-thumb { width: 32px; height: 32px; flex-basis: 32px; }
.drive-source-item .file-thumb.drive-text-preview { width: 52px; flex-basis: 52px; }
.drive-empty { margin: 24px 8px; color: var(--muted); text-align: center; font-size: .8rem; }
.drive-modal-footer { border-top: 1px solid rgba(255,255,255,.08); }
.drive-reconnect { padding: 24px 12px; text-align: center; color: var(--muted); font-size: .8rem; }
.drive-reconnect .chat-header-btn { display: inline-flex; margin-top: 8px; text-decoration: none; }
.chat-message-files {
  margin-top: 10px;
}
.chat-icon-button {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(233,189,98,.34);
  border-radius: 8px;
  background: rgba(233,189,98,.1);
  color: var(--gold);
  font-size: 1.35rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-icon-button:hover {
  background: rgba(233,189,98,.2);
  transform: translateY(-1px);
}
.chat-icon-button:active {
  transform: scale(0.95);
}

/* Mobile responsive */
@media (max-width: 980px) {
  .chat-workbench {
    flex-direction: column;
    height: min(820px, calc(var(--viewport-height, 100vh) - 72px));
    min-height: 600px;
  }
  .chat-session-sidebar {
    width: 100% !important;
    min-width: auto;
    max-width: none;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    min-height: auto;
    max-height: 190px;
  }
  .chat-splitter {
    display: none;
  }
  .chat-session-sidebar-footer { display: none; }
  .chat-workbench .chat-container {
    flex: 1 1 auto;
    min-height: 0;
  }
  .chat-workbench .chat-messages {
    flex: 1 1 auto;
    min-height: 0;
  }
}
@media (max-width: 760px) {
  .chat-section.shell {
    width: calc(100% - 18px);
    max-width: calc(100% - 18px);
  }
  .file-manager-header, .file-row {
    align-items: flex-start;
  }
  /* Keep the action footer visible: each pane scrolls independently instead of
     making the whole modal taller than a phone viewport. */
  .drive-modal {
    height: calc(var(--viewport-height, 100vh) - 16px);
    max-height: none;
  }
  .drive-modal-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, .92fr) minmax(0, 1.08fr);
    overflow: hidden;
  }
  .drive-pane { min-height: 0; }
  .drive-pane + .drive-pane { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
  .file-manager {
    padding: 14px;
    overflow: hidden;
  }
  .file-manager-header {
    flex-direction: column;
  }
  .file-manager-actions,
  .file-toolbar,
  .file-filter-group {
    width: 100%;
  }
  .file-manager-actions .chat-header-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .file-filter-group {
    overflow-x: auto;
  }
  .file-filter-group button {
    flex: 0 0 auto;
  }
  .file-list.is-list .file-row, .file-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .file-list.is-grid {
    grid-template-columns: 1fr;
  }
  .file-open {
    width: 100%;
  }
  .file-open b,
  .file-open small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .file-row-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    gap: 8px;
  }
}

@media (max-width: 520px) {
  .drive-modal-backdrop { padding: 8px; }
  .drive-modal { border-radius: 10px; }
  .drive-modal .attachment-modal-header,
  .drive-modal .attachment-modal-footer { padding-left: 13px; padding-right: 13px; }
  .drive-modal .attachment-modal-header { gap: 10px; }
  .drive-header-actions { gap: 8px; }
  .drive-sync-toggle > span:first-child { display: none; }
  .drive-modal .attachment-modal-header h3 { font-size: 1.05rem; }
  .drive-modal .attachment-modal-header p { margin-top: 4px; font-size: .78rem; line-height: 1.35; }
  .drive-pane-header { min-height: 46px; padding: 9px 12px; }
  .drive-pane-actions { gap: 9px; }
  .drive-breadcrumb { min-height: 34px; padding: 7px 12px; }
  .drive-source-list, .drive-target-list { padding: 6px; }
  .drive-source-item, .drive-target-item { gap: 7px; padding: 8px 6px; }
  .drive-modal-footer { gap: 10px; }
  .drive-modal-footer .chat-header-btn { flex: 0 0 auto; }
}

@media (max-width: 520px) {
  .chat-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .chat-section .section-heading {
    margin-bottom: .8rem;
  }

  .chat-workbench {
    height: calc(var(--viewport-height, 100vh) - 116px);
    min-height: 820px;
  }
  .chat-session-sidebar {
    flex: 0 0 auto;
    max-height: none;
    padding: 9px 10px;
  }
  .chat-session-sidebar-header {
    align-items: center;
    padding-bottom: 5px;
    margin-bottom: 3px;
  }
  .chat-session-sidebar h3 {
    margin-top: 1px;
    font-size: .9rem;
  }
  .chat-session-sidebar .panel-kicker {
    font-size: .62rem;
  }
  .chat-session-sidebar .chat-icon-button {
    width: 36px;
    height: 36px;
    font-size: 1.15rem;
    border-radius: 8px;
  }
  .chat-session-search {
    margin-top: 6px;
  }
  .chat-session-search input {
    min-height: 30px;
    padding: 6px 9px;
    font-size: .74rem;
  }
  .chat-session-list {
    gap: 4px;
    margin-top: 6px;
    flex: 0 1 auto;
    min-height: 0;
    max-height: clamp(154px, 24svh, 180px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .chat-session-item {
    gap: 4px;
    min-height: 48px;
    padding: 6px 7px;
    border-radius: 7px;
  }
  .chat-session-main {
    gap: 6px;
  }
  .chat-session-copy {
    gap: 1px;
  }
  .chat-session-copy b {
    font-size: .8rem;
  }
  .chat-session-copy small {
    font-size: .68rem;
    line-height: 1.2;
  }
  .chat-session-actions {
    opacity: 1;
    gap: 0;
  }
  .chat-session-actions button {
    width: 22px;
    height: 22px;
    border-radius: 5px;
  }
  .chat-session-hint {
    display: none;
  }
  .chat-workbench .chat-header {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .chat-workbench .chat-header-left,
  .chat-workbench .chat-header-right {
    min-width: 0;
    width: 100%;
  }
  .chat-context-bar {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .chat-input-toolbar {
    flex-wrap: wrap;
  }
  .chat-token-count {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* Light theme overrides */
html[data-theme="light"] .chat-workbench {
  border-color: rgba(59,66,59,.18);
  background: var(--ink-raised);
  box-shadow: 0 18px 46px rgba(63,76,67,.15);
}
html[data-theme="light"] .chat-session-sidebar {
  border-color: rgba(59,66,59,.12);
  background: rgba(255,255,255,0.5);
}
html[data-theme="light"] .chat-splitter {
  border-color: rgba(59,66,59,.12);
  background: rgba(59,66,59,.04);
}
html[data-theme="light"] .chat-splitter:hover,
html[data-theme="light"] .chat-splitter.is-resizing {
  background: rgba(233,189,98,0.2);
  border-color: rgba(233,189,98,0.3);
}
html[data-theme="light"] .file-manager {
  border-color: rgba(59,66,59,.17);
  background: rgba(255,255,255,.5);
}
html[data-theme="light"] .file-filter-group {
  border-color: rgba(59,66,59,.17);
  background: rgba(255,255,255,.5);
}
html[data-theme="light"] .chat-session-search input,
html[data-theme="light"] .chat-widget-session-menu input,
html[data-theme="light"] .chat-widget-session-toggle {
  border-color: rgba(59,66,59,.16);
  background: rgba(255,255,255,.65);
}
html[data-theme="light"] .chat-widget-session-menu {
  border-color: rgba(59,66,59,.18);
  background: var(--ink-raised);
  box-shadow: 0 18px 46px rgba(63,76,67,.22);
}
html[data-theme="light"] .chat-widget-session-option:hover,
html[data-theme="light"] .chat-widget-session-option.is-active {
  background: rgba(154,101,18,.08);
  border-color: rgba(154,101,18,.2);
}
html[data-theme="light"] .attachment-modal-backdrop { background: rgba(42,48,43,.38); }
html[data-theme="light"] .attachment-modal { border-color: rgba(59,66,59,.2); background: var(--ink-raised); box-shadow: 0 24px 70px rgba(63,76,67,.28); }
html[data-theme="light"] .attachment-modal-header,
html[data-theme="light"] .attachment-selector-list,
html[data-theme="light"] .attachment-breadcrumb { border-color: rgba(59,66,59,.14); }
html[data-theme="light"] .attachment-modal-close { border-color: rgba(59,66,59,.18); background: rgba(255,255,255,.55); }
html[data-theme="light"] .attachment-selector-item:hover { background: rgba(59,66,59,.05); }
html[data-theme="light"] .drive-modal-backdrop { background: rgba(42,48,43,.38); }
html[data-theme="light"] .drive-modal { border-color: rgba(59,66,59,.2); background: linear-gradient(145deg, #fffaf1, #edf3ed); box-shadow: 0 24px 70px rgba(63,76,67,.28); }
html[data-theme="light"] .drive-pane + .drive-pane,
html[data-theme="light"] .drive-pane-header,
html[data-theme="light"] .drive-breadcrumb,
html[data-theme="light"] .drive-modal-footer { border-color: rgba(59,66,59,.14); }
html[data-theme="light"] .drive-source-list,
html[data-theme="light"] .drive-target-list { background: rgba(255,255,255,.36); }
html[data-theme="light"] .drive-source-item,
html[data-theme="light"] .drive-target-item { color: #303830; }
html[data-theme="light"] .drive-source-item:hover,
html[data-theme="light"] .drive-source-item.is-selected,
html[data-theme="light"] .drive-source-parent:hover,
html[data-theme="light"] .drive-target-item:hover:not(:disabled) { border-color: rgba(154,101,18,.3); background: rgba(154,101,18,.09); }
html[data-theme="light"] .drive-source-item small,
html[data-theme="light"] .drive-target-item small,
html[data-theme="light"] .drive-empty,
html[data-theme="light"] .drive-reconnect { color: #657064; }
html[data-theme="light"] .drive-up-button,
html[data-theme="light"] .drive-breadcrumb button { color: #087e8b; }
html[data-theme="light"] .drive-up-button:disabled { color: #8a9188; }
html[data-theme="light"] .drive-source-list,
html[data-theme="light"] .drive-target-list { scrollbar-color: rgba(59,66,59,.32) rgba(59,66,59,.07); }
html[data-theme="light"] .drive-sync-toggle { color: #657064; }
html[data-theme="light"] .drive-sync-switch { background: rgba(59,66,59,.08); border-color: rgba(59,66,59,.25); }
html[data-theme="light"] .drive-source-list::-webkit-scrollbar-track,
html[data-theme="light"] .drive-target-list::-webkit-scrollbar-track { background: rgba(59,66,59,.07); }
html[data-theme="light"] .drive-source-list::-webkit-scrollbar-thumb,
html[data-theme="light"] .drive-target-list::-webkit-scrollbar-thumb { background: rgba(59,66,59,.32); }

/* Must come after the generic attachment modal rules: this dialog has exactly
   a header and a scrollable body. The generic five-row attachment grid would
   otherwise override it and clip expanded schedule-job details. */
.attachment-modal.schedule-wizard { height:auto; max-height:calc(100dvh - 36px); grid-template-rows:auto auto; }
.attachment-modal.schedule-wizard .schedule-wizard-body { height:auto; min-height:0; display:grid; overflow:visible; }
.attachment-modal.schedule-wizard .schedule-wizard-job-list { overflow:visible; }
@media (max-width:600px) { .attachment-modal.schedule-wizard { height:auto; max-height:calc(100dvh - 18px); } }

@media (max-width: 620px) {
  .attachment-modal-backdrop { padding: 9px; }
  .attachment-modal { max-height: calc(100vh - 18px); }
  .attachment-modal-header, .attachment-modal-toolbar, .attachment-modal-footer { padding-left: 13px; padding-right: 13px; }
  .attachment-selector-list { padding-left: 13px; padding-right: 13px; }
  .attachment-modal-footer { align-items: flex-start; }
}

@media (max-width: 980px) {
  html[data-theme="light"] .chat-session-sidebar {
    border-bottom-color: rgba(59,66,59,.12);
  }
}

/* Final mobile chat/widget fit overrides. Keep this after older duplicated chat rules. */
@supports (height: 100dvh) {
  :root {
    --viewport-height: 100dvh;
  }
}

@media (max-width: 640px) {
  .chat-widget {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 120;
  }

  .chat-widget-toggle {
    width: 52px;
    height: 52px;
  }

  .chat-widget-avatar {
    width: 40px;
    height: 40px;
  }

  .chat-widget-panel {
    position: fixed;
    right: max(8px, env(safe-area-inset-right));
    left: max(8px, env(safe-area-inset-left));
    bottom: calc(70px + env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    height: min(640px, calc(var(--viewport-height, 100vh) - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    max-height: none;
    border-radius: 12px;
  }

  .chat-widget-header {
    flex: 0 0 auto;
    min-height: 58px;
    padding: 10px 12px;
  }

  .chat-widget-header-left {
    min-width: 0;
  }

  .chat-widget-title,
  .chat-widget-status {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chat-widget-header-right {
    flex: 0 0 auto;
    gap: 5px;
  }

  .chat-widget-session-toggle {
    max-width: 96px;
    width: 96px;
    padding-inline: 7px;
  }

  .chat-widget-session-menu {
    position: fixed;
    top: 256px;
    left: max(14px, env(safe-area-inset-left));
    right: max(14px, env(safe-area-inset-right));
    width: auto;
  }

  .chat-widget-chat {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .chat-widget-messages {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px;
    gap: 10px;
    overscroll-behavior: contain;
  }

  .chat-widget-input-area {
    flex: 0 0 auto;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }

  #chat-widget-panel .chat-quick-prompts {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 0 8px;
    scrollbar-width: none;
  }

  #chat-widget-panel .chat-quick-prompts::-webkit-scrollbar {
    display: none;
  }

  #chat-widget-panel .chat-quick-prompt {
    flex: 0 0 auto;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #chat-widget-panel .chat-input-wrap {
    gap: 7px;
  }

  #chat-widget-panel .chat-input {
    min-width: 0;
    min-height: 42px;
    max-height: 96px;
    padding: 9px 11px;
    font-size: 14px;
  }

  #chat-widget-panel .chat-send {
    width: 42px;
    height: 42px;
  }

  #chat-widget-panel .chat-widget-attach {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  #chat-widget-panel .chat-message {
    min-width: 0;
    max-width: calc(100% - 2px);
    box-sizing: border-box;
  }

  #chat-widget-panel .chat-message-bubble {
    padding: 9px 11px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* The floating widget has a second flex chain of its own.  Every link in
     that chain must be allowed to shrink; otherwise a long message's intrinsic
     width pushes the whole bubble, composer and scroll area past the panel. */
  #chat-widget-panel,
  #chat-widget-panel .chat-widget-chat,
  #chat-widget-panel .chat-widget-messages,
  #chat-widget-panel .chat-message-content,
  #chat-widget-panel .chat-widget-input-area,
  #chat-widget-panel .chat-input-wrap {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  #chat-widget-panel .chat-widget-messages {
    width: 100%;
    overflow-x: hidden;
  }

  #chat-widget-panel .chat-message-content {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  #chat-widget-panel .chat-settings-panel {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }

  #chat-widget-panel .chat-settings-body {
    min-height: 0;
    max-height: none;
  }
}

@media (max-width: 380px) {
  .chat-widget-panel {
    left: max(6px, env(safe-area-inset-left));
    right: max(6px, env(safe-area-inset-right));
    bottom: calc(64px + env(safe-area-inset-bottom));
    height: min(620px, calc(var(--viewport-height, 100vh) - 78px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  }

  .chat-widget-header {
    padding-inline: 10px;
  }

  .chat-widget-header-avatar {
    width: 30px;
    height: 30px;
  }

  .chat-widget-title,
  .chat-widget-status {
    max-width: 128px;
  }

  .chat-widget-settings,
  .chat-widget-pin,
  .chat-widget-close {
    width: 30px;
    height: 30px;
  }
}

/* Floating chat: keep the panel self-contained at every viewport width.
   This intentionally sits after the legacy widget rules above.  The dashboard
   chat already has these flex constraints; the floating variant needs the
   same treatment independently. */
#chat-widget-panel {
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
}
#chat-widget-panel .chat-widget-chat,
#chat-widget-panel .chat-widget-messages,
#chat-widget-panel .chat-settings-panel,
#chat-widget-panel .chat-settings-body,
#chat-widget-panel .chat-widget-input-area,
#chat-widget-panel .chat-input-wrap,
#chat-widget-panel .chat-message,
#chat-widget-panel .chat-message-bubble,
#chat-widget-panel .chat-message-content {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
#chat-widget-panel .chat-widget-messages,
#chat-widget-panel .chat-settings-body {
  overflow-x: hidden;
}
#chat-widget-panel .chat-message {
  max-width: calc(100% - 2px);
}
#chat-widget-panel .chat-message-bubble,
#chat-widget-panel .chat-message-content {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Settings is a replacement view, never an overlay.  Keep this final so it
   wins over the older, duplicated widget/chat flex rules above.  In
   particular, toggling a dependent control (timezone select, super-mode
   controls) must not make the view fall back to its content height. */
.chat-workbench .chat-container.settings-open {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  flex: 1 1 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.chat-workbench .chat-container.settings-open > .chat-settings-panel {
  position: static;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  box-sizing: border-box;
}
.chat-workbench .chat-container.settings-open > .chat-settings-panel > .chat-settings-body {
  min-height: 0;
  overflow: auto;
}

#chat-widget-panel .chat-widget-chat.settings-open {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}
#chat-widget-panel .chat-widget-chat.settings-open > .chat-widget-messages,
#chat-widget-panel .chat-widget-chat.settings-open > .chat-widget-input-area {
  display: none;
}
#chat-widget-panel .chat-widget-chat.settings-open > .chat-settings-panel {
  position: static;
  inset: auto;
  z-index: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  box-sizing: border-box;
}
#chat-widget-panel .chat-widget-chat.settings-open > .chat-settings-panel > .chat-settings-body {
  min-height: 0;
  overflow: auto;
}

/* The actual checkbox is visually hidden but remains anchored to its label.
   Previously its unanchored absolute positioning left the browser free to use
   the wrong containing block during native disabled-state reflow. */
.settings-location-control { position: relative; min-width: 0; }
.settings-location-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
#chat-widget-panel .chat-table-wrap,
#chat-widget-panel .chat-image-card,
#chat-widget-panel .chat-youtube-card {
  max-width: 100%;
}

/* Mobile dashboard: conversations are a compact horizontal rail, leaving the
   actual conversation, composer and controls the dominant part of the screen. */
@media (max-width: 850px) {
  .mobile-nav-toggle {
    display: inline-grid;
    place-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    margin-left: 2px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    background: rgba(10,13,15,.56);
    color: var(--text);
    cursor: pointer;
  }
  .mobile-nav-toggle span {
    display: block;
    width: 15px;
    height: 1.5px;
    border-radius: 99px;
    background: currentColor;
    transition: transform .18s ease, opacity .18s ease;
  }
  .mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
  .topbar nav.is-open {
    position: fixed;
    z-index: 8;
    top: 58px;
    right: 12px;
    left: 12px;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: rgba(11,14,17,.97);
    box-shadow: 0 20px 45px rgba(0,0,0,.38);
    backdrop-filter: blur(16px);
  }
  .topbar nav.is-open a {
    padding: 11px 12px;
    border-radius: 7px;
    color: var(--text);
  }
  .topbar nav.is-open a:hover,
  .topbar nav.is-open a.active { background: rgba(233,189,98,.1); }
  .topbar nav.is-open a.active::after { display: none; }
  html[data-theme="light"] .mobile-nav-toggle { border-color: rgba(59,66,59,.2); background: rgba(255,255,255,.72); color: #41483f; }
  html[data-theme="light"] .topbar nav.is-open { border-color: rgba(59,66,59,.17); background: rgba(255,250,241,.98); box-shadow: 0 18px 40px rgba(63,76,67,.18); }
}

@media (max-width: 760px) {
  .chat-workbench {
    height: min(720px, calc(var(--viewport-height, 100vh) - 96px));
    min-height: 520px;
  }
  .chat-session-sidebar {
    flex: 0 0 68px;
    width: 100% !important;
    height: 68px;
    min-height: 68px;
    max-height: 68px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    overflow: hidden;
  }
  .chat-session-sidebar-header {
    flex: 0 0 auto;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .chat-session-sidebar-header > div { display: none; }
  .chat-session-sidebar .chat-icon-button {
    width: 36px;
    height: 36px;
    font-size: 1.12rem;
  }
  .chat-session-search,
  .chat-session-hint { display: none; }
  .chat-session-list {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    height: 100%;
    min-width: 0;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
  .chat-session-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    flex: 0 0 min(185px, 52vw);
    width: min(185px, 52vw);
    min-height: 38px;
    padding: 7px 9px;
    border-radius: 7px;
  }
  .chat-session-main { gap: 0; }
  .chat-session-grip,
  .chat-session-actions,
  .chat-session-copy small { display: none; }
  .chat-session-copy { display: block; }
  .chat-session-copy b { display: block; font-size: .78rem; line-height: 1.15; }
  .chat-session-menu-toggle {
    display: grid;
    place-items: center;
    width: 26px;
    height: 28px;
    margin: -4px -4px -4px 2px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font: 700 18px/1 Arial, sans-serif;
    cursor: pointer;
  }
  .chat-session-menu-toggle:hover,
  .chat-session-menu-toggle[aria-expanded="true"] {
    background: rgba(233,189,98,.14);
    color: var(--gold);
  }
  .chat-session-empty { padding: 0 8px; white-space: nowrap; }
  .chat-workbench .chat-header {
    min-height: 46px;
    padding: 8px 10px;
    align-items: center;
  }
  .chat-workbench .chat-header-right { display: none; }
  .chat-workbench .chat-header-left { width: 100%; }
  .chat-workbench .chat-messages { min-height: 160px; }
  .chat-workbench .chat-messages,
  .chat-workbench .chat-message,
  .chat-workbench .chat-message-bubble,
  .chat-workbench .chat-message-content,
  .chat-workbench .chat-message-files {
    min-width: 0;
    max-width: 100% !important;
  }
  .chat-workbench .chat-message {
    flex: 0 1 auto;
    width: auto;
    max-width: 85% !important;
  }
  .chat-workbench .chat-message.user {
    align-self: flex-end;
    margin-left: auto;
    /* Keep right-aligned attachments inside the same safe inset as the floating chat. */
    margin-right: 12px;
  }
  .chat-workbench .chat-message.assistant { align-self: flex-start; margin-right: auto; }
  .chat-workbench .chat-message-bubble {
    width: auto;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: hidden;
  }
  .chat-workbench .chat-message-content,
  .chat-workbench .chat-message-files,
  .chat-workbench .chat-message-file {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .chat-workbench .chat-message-files { flex-wrap: wrap; }
  .chat-workbench .chat-message.user .chat-message-file {
    box-sizing: border-box;
    max-width: 100%;
  }
  .chat-workbench .chat-message-file b { max-width: min(180px, 45vw); }
  .chat-workbench .chat-input-area { padding: 10px; }
  .chat-workbench .chat-input-toolbar {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .chat-workbench .chat-token-count {
    flex: 1 1 auto;
    flex-basis: auto;
    min-width: 0;
    margin-left: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .chat-workbench .chat-quick-prompts {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 5px;
  }
  .chat-workbench .chat-quick-prompt { flex: 0 0 auto; }
}

.mobile-session-menu {
  position: fixed;
  z-index: 140;
  width: min(230px, calc(100vw - 20px));
  display: none;
  gap: 3px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: var(--ink-raised);
  box-shadow: 0 16px 38px rgba(0,0,0,.38);
}
.mobile-session-menu strong {
  overflow: hidden;
  padding: 5px 7px 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
  font-size: .75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-session-menu button {
  width: 100%;
  padding: 9px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  text-align: left;
  cursor: pointer;
}
.mobile-session-menu button:hover { background: rgba(233,189,98,.11); color: var(--gold); }
.mobile-session-menu button.is-danger:hover { background: rgba(240,109,109,.1); color: #e76d6d; }
html[data-theme="light"] .mobile-session-menu { border-color: rgba(59,66,59,.2); background: #fffaf1; box-shadow: 0 16px 38px rgba(63,76,67,.2); }
html[data-theme="light"] .mobile-session-menu strong { border-color: rgba(59,66,59,.12); }
@media (max-width: 760px) {
  .mobile-session-menu:not([hidden]) { display: grid; }
}

@media (max-width: 420px) {
  .topbar { padding-inline: 14px; }
  .lang-switcher { margin-right: 5px; }
  .theme-switcher { margin-right: 5px; }
  .chat-workbench {
    height: calc(var(--viewport-height, 100vh) - 82px);
    min-height: 500px;
  }
  .chat-session-sidebar { flex-basis: 62px; height: 62px; min-height: 62px; max-height: 62px; }
  .chat-session-sidebar .chat-icon-button { width: 33px; height: 33px; }
  .chat-session-item { flex-basis: min(150px, 49vw); width: min(150px, 49vw); padding: 7px 8px; }
  .chat-workbench .chat-input-area { padding: 8px; }
}

/* Mobile dashboard chat: constrain the entire flex chain, not just bubbles.
   A textarea or attachment can otherwise retain its intrinsic min-content width;
   the workbench then clips the whole right edge (composer included). */
@media (max-width: 760px) {
  .chat-workbench,
  .chat-workbench > .chat-container,
  .chat-workbench .chat-header,
  .chat-workbench .chat-messages,
  .chat-workbench .chat-input-area,
  .chat-workbench .chat-input-toolbar,
  .chat-workbench .chat-quick-prompts,
  .chat-workbench .chat-active-files,
  .chat-workbench .chat-input-wrap,
  .chat-workbench .chat-status {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }
  .chat-workbench {
    width: 100%;
  }
  .chat-workbench > .chat-container {
    width: 100%;
    flex: 1 1 0;
  }
  .chat-workbench .chat-input-area,
  .chat-workbench .chat-input-wrap {
    width: 100%;
  }
  .chat-workbench .chat-input {
    width: 0;
    min-width: 0;
    max-width: 100%;
  }
  .chat-workbench .chat-header-left,
  .chat-workbench .chat-header-right,
  .chat-workbench .chat-status-text {
    min-width: 0;
  }
}

/* ---- Text selection rules: only chat UI messages are selectable ---- */
/* Disable text selection on the entire page */
body {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Re-enable text selection in chat messages (both dashboard and widget) */
.chat-messages,
.chat-widget-messages,
.chat-messages *,
.chat-widget-messages * {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

/* Also enable selection in chat input fields */
.chat-input,
.chat-widget-input-area .chat-input,
.chat-input-wrap textarea,
.chat-widget-input-area .chat-input-wrap textarea {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

/* Personal reminder planner inside the shared dashboard/widget settings view. */
.settings-reminder-create { display:grid; grid-template-columns:minmax(0,1fr) minmax(150px,.55fr) auto; gap:8px; align-items:center; }
.settings-reminder-create input { min-width:0; }
.settings-reminder-create button,.settings-reminder-action { border:1px solid var(--line,#d9d4c8); background:var(--surface,#fffdf8); color:inherit; border-radius:10px; padding:9px 11px; font:inherit; cursor:pointer; }
.settings-reminder-list { display:grid; gap:7px; margin-top:12px; }
.settings-reminder-item { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 10px; border:1px solid var(--line,#e2ddd2); border-radius:10px; }
.settings-reminder-item div { min-width:0; display:grid; gap:2px; }
.settings-reminder-item b,.settings-reminder-item small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.settings-empty-state { opacity:.7; padding:4px 0; }
.settings-automation-section { gap:14px; }
.settings-automation-heading h4 { margin-bottom:5px; }
.settings-automation-heading .chat-settings-help { margin:0; }
.settings-automation-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.settings-automation-group { min-width:0; padding:11px; border:1px solid rgba(234,183,96,.2); border-radius:12px; background:linear-gradient(140deg,rgba(234,183,96,.055),rgba(103,237,245,.025)); }
.settings-automation-group > header { display:flex; align-items:center; gap:8px; padding:1px 1px 10px; }
.settings-automation-group > header > span { display:grid; place-items:center; width:26px; height:26px; border:1px solid rgba(103,237,245,.28); border-radius:8px; color:var(--cyan); font-size:13px; }
.settings-automation-group > header div { min-width:0; display:grid; gap:1px; }
.settings-automation-group > header b { font-size:12px; }
.settings-automation-group > header small { color:var(--muted); font-size:10px; }
.settings-manage-list { display:grid; gap:7px; }
.settings-manage-item { border:1px solid var(--line,#ddd6ca); border-radius:9px; background:rgba(0,0,0,.10); overflow:hidden; }
.settings-manage-item summary { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px; cursor:pointer; list-style:none; }
.settings-manage-item summary::-webkit-details-marker { display:none; }
.settings-manage-item summary::after { content:'+'; flex:0 0 auto; color:var(--gold); font-size:15px; line-height:1; }
.settings-manage-item[open] summary { border-bottom:1px solid var(--line,#ddd6ca); background:rgba(234,183,96,.045); }
.settings-manage-item[open] summary::after { content:'−'; }
.settings-manage-main { min-width:0; display:grid; gap:3px; }
.settings-manage-main b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.settings-manage-main small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:10px; }
.settings-state { flex:0 0 auto; padding:3px 6px; border:1px solid rgba(103,237,245,.24); border-radius:999px; color:var(--cyan); font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase; }
.settings-state-paused,.settings-state-possible { border-color:rgba(234,183,96,.38); color:var(--gold); }
.settings-state-failed { border-color:rgba(240,109,109,.38); color:#f58c8c; }
.settings-state-completed,.settings-state-answered,.settings-state-archived { border-color:rgba(119,220,153,.35); color:#77dc99; }
.settings-manage-body { display:grid; gap:10px; padding:10px; }
.settings-manage-body dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 12px; margin:0; }
.settings-manage-body dl div { min-width:0; }
.settings-manage-body dt { margin-bottom:3px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.05em; }
.settings-manage-body dd { margin:0; overflow-wrap:anywhere; font-size:10px; line-height:1.35; }
.settings-manage-wide { grid-column:1 / -1; }
.settings-manage-actions { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding-top:2px; }
.settings-manage-action,.settings-manage-source { min-height:28px; border:1px solid var(--line,#d9d4c8); border-radius:7px; color:var(--text); background:rgba(255,255,255,.045); cursor:pointer; }
.settings-manage-action { display:grid; place-items:center; width:30px; padding:0; font-size:13px; }
.settings-manage-action:hover,.settings-manage-source:hover { border-color:var(--gold); background:rgba(234,183,96,.09); }
.settings-manage-action:disabled { opacity:.55; cursor:wait; }
.settings-manage-source { padding:6px 8px; color:var(--cyan); font-size:10px; }
.settings-manage-error { margin:0; color:#f58c8c; font-size:10px; }
.settings-manage-pending { color:var(--gold); font-size:10px; }
html[data-theme="light"] .settings-automation-group { border-color:rgba(154,101,18,.18); background:linear-gradient(140deg,rgba(255,250,241,.88),rgba(239,250,250,.62)); }
html[data-theme="light"] .settings-manage-item { background:rgba(255,255,255,.58); }

/* The latest-message affordance needs its own light treatment: its original
   dark translucent fill becomes a muddy, low-contrast blob on the warm UI. */
html[data-theme="light"] .chat-scroll-to-bottom {
  border-color: rgba(154,101,18,.34);
  background: rgba(255,250,241,.97);
  color: #54370b;
  box-shadow: 0 8px 22px rgba(74,65,47,.18);
}
html[data-theme="light"] .chat-scroll-to-bottom:hover {
  border-color: var(--gold);
  background: #fffdf8;
  color: #382506;
}

/* This must sit after the floating-widget containment rules above.  Those
   rules correctly allow ordinary bubbles to shrink, but must not override
   the measured minimum width of a bubble that has an absolute action bar. */
.chat-workbench .chat-message-bubble:has(.chat-message-actions),
#chat-widget-panel .chat-message-bubble:has(.chat-message-actions) {
  min-width: var(--chat-actions-min-width, 126px);
}
@media (max-width:560px) { .settings-reminder-create { grid-template-columns:1fr auto; } .settings-reminder-create input[type="datetime-local"] { grid-column:1 / -1; } }
@media (max-width:720px) { .settings-automation-groups { grid-template-columns:1fr; } }