:root {
  --space-bg: #05070d;
  --glass-bg: rgba(11, 17, 30, 0.78);
  --glass-bg-hover: rgba(18, 27, 46, 0.92);
  --glass-border: rgba(148, 163, 184, 0.14);
  --glass-border-hover: rgba(56, 189, 248, 0.35);
  --accent-cyan: #38bdf8;
  --accent-amber: #fcd34d;
  --accent-emerald: #34d399;
  --accent-danger: #ef4444;
  --accent-danger-soft: #fda4af;
  /* Yhtenäinen tilamalli (ks. js/status.js) — värit kartoitetaan pääosin
     olemassa oleviin --accent-*-muuttujiin, paitsi "kuuntelee", jolle ei
     ollut aiemmin omaa, turkoosista erottuvaa aidosti sinistä sävyä.
     Hälytys-punainen (.proactive-alert-active) pysyy tarkoituksella eri
     muuttujana (--accent-danger, ks. alla) — se on pysyvä tila, ei yksi
     näistä kuudesta ohimenevästä toimintatilasta. */
  --status-ready: var(--accent-emerald);
  --status-listening: #3b82f6;
  --status-responding: #c084fc;
  --status-tool-running: var(--accent-cyan);
  --status-waiting-approval: var(--accent-amber);
  --status-error: var(--accent-danger);
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #475569;
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
  --ease-pop: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Tekstisisältö käyttää selaimen normaalia valintaa. Valinnan esto rajataan
   vain varsinaisiin käyttöliittymäohjaimiin ja raahattaviin elementteihin. */
button,
[role="button"],
canvas,
.memory-drawer-handle {
  user-select: none;
  -webkit-user-select: none;
}
body, html { width: 100%; height: 100%; overflow: hidden; background-color: var(--space-bg); font-family: var(--font-display); color: var(--text-main); }
#webgl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; cursor: default; }
.ambient-atmosphere { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(circle at 50% 45%, transparent 35%, rgba(2, 3, 6, 0.85) 90%); }
.ambient-atmosphere::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 42%, black 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 62% at 50% 42%, black 0%, transparent 100%);
}
/* env(safe-area-inset-*) varmistaa ettei ylä-/alapalkki mene notchin tai
   kotipalkin alle (viewport-fit=cover on jo asetettu index.html:ssä) —
   0px-fallback pitää tavallisen selaimen käytöksen ennallaan. */
.hud-layer { position: absolute; inset: 0; pointer-events: none; z-index: 10; display: flex; flex-direction: column; justify-content: space-between; padding: calc(16px + env(safe-area-inset-top, 0px)) 24px calc(16px + env(safe-area-inset-bottom, 0px)) 24px; }
.interactive { pointer-events: auto; }

/* Vierityspalkit — ohut, teeman mukainen kaikkialla */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.25); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(56, 189, 248, 0.55); }
* { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.25) transparent; }

/* Näppäimistöllä navigoinnin fokusrengas — hiirelle ei näytetä */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .interactive:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Yläpalkki */
.top-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.brand-pill { display: inline-flex; align-items: center; gap: 9px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: 7px 13px; backdrop-filter: blur(20px); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.brand-pill:hover { border-color: var(--glass-border-hover); background: var(--glass-bg-hover); }
.status-orb { width: 6px; height: 6px; background: var(--accent-cyan); border-radius: 50%; box-shadow: 0 0 10px var(--accent-cyan); flex-shrink: 0; }
.brand-name { font: 600 10px var(--font-mono); letter-spacing: 1.6px; text-transform: uppercase; color: #bae6fd; }
.brand-mode { display: block; margin-top: 3px; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-mono); }

/* Yläpalkin kompakti tilapilleri — korvasi vanhan 2D Arc Reactor
   -kanvaskuvakkeen (ks. JARVIS_JARJESTELMAKUVAUS.txt: Malli 9 Holographic
   Cortical Matrix, js/galaxy.js, on nyt järjestelmän ainoa reaktori,
   renderöitynä koko ruudun taustalle #webgl-canvasiin). Tämä pilleri on
   vain kompakti tilailmaisin + mikrofonin klikkauskohde. */
.core-reactor-container { position: relative; justify-self: center; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.reactor-status-pill { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px 18px; background: rgba(20,16,8,.55); border: 1px solid rgba(252,211,77,.35); border-radius: 20px; backdrop-filter: blur(20px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); transition: all 0.35s ease; animation: reactorIdleBreath 3.2s ease-in-out infinite; }
/* 27.9.2026 (käyttäjän pyyntö: "reactor pillille oma, lämmin brändiväri") —
   lepotilan pilleri hengittää hillitysti kultaisena, erottuen tietoisesti
   sovelluksen muusta syaani/violetti-teemasta. Tilaluokat (.listening jne.,
   class+class-spesifisyys) ohittavat tämän aina turvallisesti riippumatta
   lähdejärjestyksestä. */
@keyframes reactorIdleBreath {
  0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 10px rgba(252,211,77,.18); }
  50%      { box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 26px rgba(252,211,77,.45); }
}
.reactor-brand-text .brand-name { color: #fde68a; text-shadow: 0 0 12px rgba(252,211,77,.45); }
/* Käsittelyilmaisin siirrettiin (27.9.2026) tämän saman pillerin sisään
   (index.html) — kun se on näkyvissä, piilotetaan brand-mode-alarivi ja
   vaihdetaan pillerin hehku syaaniksi ("käsitellään" != lepotila), eikä
   koskaan koske .listening/.speaking-tyyppisiin tilaluokkiin. */
.reactor-brand-text:has(#processing-indicator:not([hidden])) .brand-mode { display: none; }
.reactor-status-pill:has(#processing-indicator:not([hidden])) { animation: none; border-color: rgba(56,189,248,.5); box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 22px rgba(56,189,248,.35); }
/* Brändi (DASE // JARVIS) siirrettiin tänne vasemman palkin ylälaidasta —
   reactor-brand-text jakaa brand-name/brand-mode-tyylit sivupalkin kanssa
   (ks. rivit ~82-83), vain rivitys on tiiviimpi keskitetyn yläpalkin takia.
   Erillinen violetti tilapallo (reactor-status-dot) poistettiin käyttäjän
   pyynnöstä — pillerin oma reunahehku (alla) riittää tilan ilmaisemiseen. */
.reactor-brand-text { display: flex; flex-direction: column; line-height: 1.3; white-space: nowrap; }
/* Model 9 -HUD-mittari (JARVIS_VISUAALINEN_JA_UI_ROADMAP.md) — pieni
   aktiivisuuspalkki pillerin alareunassa, sama mic-/TTS-FFT-data kuin
   aivokuoren reaktiivisuudessa (js/galaxy.js:n updateStatusPillMeter).
   Piilossa (opacity:0, JS asettaa) kun tila ei ole kuuntelee/puhuu. */
.reactor-pill-meter-track { position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; pointer-events: none; }
.reactor-pill-meter-fill { display: block; width: 100%; height: 100%; transform-origin: left center; transform: scaleX(0.08); opacity: 0; transition: opacity .25s ease, transform .08s linear; background: var(--accent-cyan); }
.reactor-pill-meter-fill.reactor-pill-meter-listening { background: var(--status-listening); }
.reactor-pill-meter-fill.reactor-pill-meter-responding { background: var(--status-responding); }
.reactor-status-pill.listening { border-color: var(--status-listening); box-shadow: 0 0 22px color-mix(in srgb, var(--status-listening) 50%, transparent); animation: reactorListeningPulse 1.4s ease-in-out infinite alternate; }
.reactor-status-pill.speaking { border-color: var(--status-responding); box-shadow: 0 0 22px color-mix(in srgb, var(--status-responding) 50%, transparent); animation: reactorSpeakingPulse 0.7s ease-in-out infinite alternate; }
.reactor-status-pill.tool-running { border-color: var(--status-tool-running); box-shadow: 0 0 22px color-mix(in srgb, var(--status-tool-running) 50%, transparent); animation: reactorToolRunningPulse 0.9s ease-in-out infinite alternate; }
.reactor-status-pill.waiting-approval { border-color: var(--status-waiting-approval); box-shadow: 0 0 22px color-mix(in srgb, var(--status-waiting-approval) 50%, transparent); animation: reactorWaitingApprovalPulse 1.1s ease-in-out infinite alternate; }
.reactor-status-pill.error { border-color: var(--status-error); box-shadow: 0 0 22px color-mix(in srgb, var(--status-error) 50%, transparent); }
/* 27.9.2026 (käyttäjän pyyntö: "hätäpysäytykselle selvä visuaalinen tila") —
   emergencyStopAll() (js/app.js) togglaa tämän body-luokan hetkeksi. Puhtaasti
   additiivinen: emergencyStopAll()illa ei aiemmin ollut mitään visuaalista
   sivuvaikutusta. !important tarvitaan koska pillerin oma tila (esim.
   .listening) saattaa olla aktiivinen samaan aikaan kuin pysäytys tapahtuu. */
.emergency-stop-active .reactor-status-pill { border-color: rgba(239,68,68,.9) !important; box-shadow: 0 0 0 3px rgba(239,68,68,.25), 0 0 40px rgba(239,68,68,.6) !important; animation: emergencyPulse .5s ease-in-out 2 !important; }
.emergency-stop-active::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: radial-gradient(ellipse at center, transparent 40%, rgba(239,68,68,.25) 100%); animation: emergencyVignette .6s ease-out forwards; }
@keyframes emergencyPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes emergencyVignette { from { opacity: 1; } to { opacity: 0; } }

@keyframes reactorSpeakingPulse {
  0% { transform: scale(1); box-shadow: 0 0 30px color-mix(in srgb, var(--status-responding) 45%, transparent); }
  100% { transform: scale(1.045); box-shadow: 0 0 48px color-mix(in srgb, var(--status-responding) 70%, transparent); }
}

@keyframes reactorListeningPulse {
  0% { transform: scale(1); box-shadow: 0 0 28px color-mix(in srgb, var(--status-listening) 50%, transparent); }
  100% { transform: scale(1.035); box-shadow: 0 0 42px color-mix(in srgb, var(--status-listening) 75%, transparent); }
}

@keyframes reactorToolRunningPulse {
  0% { transform: scale(1); box-shadow: 0 0 22px color-mix(in srgb, var(--status-tool-running) 45%, transparent); }
  100% { transform: scale(1.02); box-shadow: 0 0 38px color-mix(in srgb, var(--status-tool-running) 70%, transparent); }
}

@keyframes reactorWaitingApprovalPulse {
  0% { transform: scale(1); box-shadow: 0 0 28px color-mix(in srgb, var(--status-waiting-approval) 50%, transparent); }
  100% { transform: scale(1.035); box-shadow: 0 0 42px color-mix(in srgb, var(--status-waiting-approval) 75%, transparent); }
}

/* Muisti-vetolaatikko (keskusteluhistoria) — pysyvästi hienovaraisesti
   näkyvissä "kahva" oikeassa laidassa, ja avattuna vedettävissä leveämmäksi
   (enintään puolet ruudusta). .memory-drawer.drawer-right ylikirjoittaa
   .drawer-right:n KIINTEÄN 430px-siirron, koska tämän leveys ei ole
   kiinteä — prosenttisiirto piilottaa sen kokonaan riippumatta siitä miten
   leveäksi käyttäjä on sen viimeksi vetänyt. */
.memory-toggle-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 72px; background: var(--glass-bg); border: 1px solid var(--glass-border-hover); border-right: none; border-radius: 12px 0 0 12px; z-index: 42; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(20px); font-size: 13px; opacity: 0.55; transition: opacity 0.2s ease, width 0.2s ease; }
.memory-toggle-tab:hover { opacity: 1; width: 22px; }

.memory-drawer { top: 76px; bottom: 24px; max-width: 50vw; padding-left: 34px; }
.memory-drawer.drawer-right { transform: translateX(110%); }
.memory-drawer-handle { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 14px; height: 64px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border-hover); border-radius: 8px; cursor: ew-resize; display: flex; align-items: center; justify-content: center; touch-action: none; }
.memory-drawer-handle::before { content: ''; width: 3px; height: 28px; background: rgba(255, 255, 255, 0.3); border-radius: 2px; }
.memory-drawer-handle:hover { background: rgba(56, 189, 248, 0.12); border-color: var(--accent-cyan); }

/* Muisti-vetolaatikon suodatin + haku (JARVIS_VISUAALINEN_JA_UI_ROADMAP.md) */
.memory-drawer-toolbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.memory-filter-row { display: flex; flex-wrap: wrap; gap: 6px; }
.memory-filter-btn { padding: 4px 10px; font-size: 9.5px; }

.memory-list-container { display: flex; flex-direction: column; gap: 10px; }
.memory-turn { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 8px 10px; font-size: 11px; line-height: 1.5; color: #e2e8f0; }
.memory-turn-user { border-left: 2px solid var(--accent-cyan); }
.memory-turn-assistant { border-left: 2px solid var(--accent-amber); }
.memory-turn-meta { font-size: 9px; font-family: var(--font-mono); color: var(--text-muted); margin-bottom: 4px; }
.memory-turn-text { white-space: pre-wrap; word-break: break-word; }
.memory-turn-reasoning { border-left: 2px solid #a78bfa; }
.memory-turn-tool, .memory-turn-system { border-left: 2px solid rgba(148, 163, 184, 0.5); background: rgba(255, 255, 255, 0.012); }
.memory-turn-warning { border-left: 2px solid var(--accent-amber); }
.memory-turn-error { border-left: 2px solid var(--accent-danger-soft, #f87171); }
.long-term-memory-panel{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.long-term-memory-heading{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--text-muted);margin-bottom:8px}
.long-term-memory-list{display:grid;gap:7px}.long-term-memory-card{padding:8px 9px;border:1px solid rgba(96,165,250,.2);border-left:2px solid #60a5fa;border-radius:9px;background:rgba(96,165,250,.045)}
.long-term-memory-meta{font:9px var(--font-mono);color:var(--text-muted);margin-bottom:4px}.long-term-memory-text{font-size:11px;line-height:1.4;white-space:pre-wrap;word-break:break-word}.long-term-memory-actions{display:flex;gap:6px;margin-top:7px}
.memory-turn-detail { margin-top: 5px; }
.memory-turn-detail summary { cursor: pointer; font: 9px var(--font-mono); color: var(--text-muted); }
.memory-turn-detail pre { margin: 5px 0 0; max-height: 180px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 10px; color: #9fb4c4; }

/* Muistivetolaatikon mobiilileveys on nyt osa yhtenäistä drawer-leveyttä
   (ks. "MOBIILI/TABLETTI-KUORI" tämän tiedoston lopussa) — kahvan
   piilotus säilyy siellä. */

/* Livetila: pysyvä, selvästi erottuva rengas reaktorin ympärillä — eri
   visuaalinen kieli kuin tavallinen kuuntelu/puhe-tila, ettei käyttäjä voi
   erehtyä luulemaan mikrofonin olevan pois päältä. */
.core-reactor-container.live-mode::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid #ef4444;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.55);
  animation: liveModeRingPulse 1.6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes liveModeRingPulse {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.05); }
}
#live-mode-btn.active { background: rgba(239, 68, 68, 0.22); border-color: #ef4444; color: #fecaca; }

/* Hälytysrivi telemetriassa — klikattava, avaa hälytyslokin */
.telemetry-row-clickable { cursor: pointer; border-radius: 6px; transition: background 0.15s ease; margin: -2px -4px; padding: 2px 4px; }
.telemetry-row-clickable:hover { background: rgba(255, 255, 255, 0.06); }

/* Vastauskupla himmenee (ei katoa, ettei layout hyppää) kun mitään uutta ei
   ole sanottu pitkään aikaan — ei jää näyttämään "jumiutuneelta". */
.floating-speech-bubble { transition: opacity 0.6s ease; }
.floating-speech-bubble.idle-faded { opacity: 0.32; }

/* Proaktiiviset tilannehälytykset */
.tm-value.tm-warn { color: #f87171; font-weight: 700; }
.proactive-alert-active .status-orb { background: #ef4444; box-shadow: 0 0 12px #ef4444; animation: alertOrbPulse 1s ease-in-out infinite alternate; }
.proactive-alert-active #telemetry-hud { border-color: rgba(239, 68, 68, 0.4); }

@keyframes alertOrbPulse {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.3); }
}

/* Ylänavigaation painikkeet */
.top-nav-cluster { justify-self: end; display: flex; align-items: center; }
/* Fluid koko clamp()illa kiinteiden breakpoint-hyppyjen sijaan — painike
   kutistuu/kasvaa jatkuvasti ikkunan leveyden mukana. */
.sleek-pill-btn { background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-muted); padding: clamp(5px, 0.5vw + 4px, 6px) clamp(7px, 1vw + 4px, 11px); border-radius: 18px; font-size: clamp(8px, 0.6vw + 7px, 10.5px); font-family: var(--font-mono); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; backdrop-filter: blur(20px); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease; white-space: nowrap; }
.sleek-pill-btn:hover { background: var(--glass-bg-hover); border-color: var(--glass-border-hover); color: #fff; transform: translateY(-1px); }
.sleek-pill-btn:active { transform: translateY(0) scale(0.95); }
/* Yleinen "päällä"-tila valintapainikkeille (Muisti-suodatin, Arkiston
   "Omat muistiinpanot" -pikasuodatin jne.) — toggle lisää/poistaa tämän
   luokan, ei erillistä inline-tyyliä joka funktiolle. */
.sleek-pill-btn.active { background: rgba(56, 189, 248, 0.22); border-color: var(--accent-cyan); color: #fff; }
/* .sleek-pill-btn:n oma "display: inline-flex" ohittaa muuten selaimen
   oletustyylin [hidden] { display: none } (author-tyyli voittaa aina
   user-agent-tyylin spesifisyydestä riippumatta) — tämän puuttuminen piti
   "↗ Avaa sivu" -painikkeen näkyvissä jatkuvasti, vaikka hidden-attribuutti
   olisi asetettu oikein JS:stä. */
.sleek-pill-btn[hidden] { display: none; }
.open-link-list { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; min-width: 0; max-width: min(150px, 40%); }
.open-link-list > * { max-width: 100%; }
/* Kaikki listan pillinapit (↗ Avaa sivu / ↗ Lähde N / ⧉ Avaa uudelleen)
   pysyvät reunojensa sisällä: nowrap-teksti ei valu keskustelutekstin päälle.
   Pitkä otsikko on .open-page-window-label-spanissa ja katkeaa ellipsiin. */
.open-link-list > .sleek-pill-btn { min-width: 0; overflow: hidden; box-sizing: border-box; }
/* AVAA_SIVU:n "Näytä ikkuna" -napit (js/reactor.js offerOpenPageWindows):
   yhtä kapeat kuin offerOpenLinksin napit, hostname ellipsillä, jotta pitkä
   osoite ei vie keskustelutekstiltä (#vocal-output) tilaa eikä ylitä kuplaa. */
.open-link-list > .open-page-window-btn { align-self: flex-start; flex-shrink: 0; min-width: 0; overflow: hidden; gap: 5px; border-color: var(--accent-cyan); color: #bae6fd; }
.open-page-window-icon { flex-shrink: 0; }
.open-page-window-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sleek-badge { font-size: 8.5px; padding: 1px 5px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); }

/* Sivupaneelit */
.side-drawer { position: absolute; top: 76px; bottom: 84px; width: 380px; max-width: calc(100vw - 48px); background: rgba(8, 13, 24, 0.94); border: 1px solid var(--glass-border); border-radius: 20px; padding: 20px; backdrop-filter: blur(30px); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; gap: 14px; overflow-y: auto; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; }
.drawer-left { left: 24px; transform: translateX(-430px); opacity: 0; }
.drawer-right { right: 24px; transform: translateX(430px); opacity: 0; }
.side-drawer.open { transform: translateX(0); opacity: 1; }
.drawer-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding-bottom: 12px; }
.drawer-title-row { display: flex; align-items: center; gap: 8px; }
.drawer-title { font-size: 13px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: #ffffff; }
.close-circle-btn { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-muted); width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease; }
.close-circle-btn:hover { background: rgba(255, 255, 255, 0.15); color: #fff; transform: rotate(90deg); }
.close-circle-btn:active { transform: rotate(90deg) scale(0.9); }
.drawer-search-bar { width: 100%; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--glass-border); border-radius: 12px; padding: 8px 12px; color: #fff; font-size: 11px; outline: none; }

/* Kortit ja listaelementit */
.file-chip { background: rgba(14, 21, 38, 0.6); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.format-badge { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 8.5px; font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; }
.badge-note { background: rgba(56, 189, 248, 0.15); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, 0.3); }
.badge-skill { background: rgba(245, 158, 11, 0.18); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.4); }
.original-asset-card { background: rgba(16, 24, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.asset-meta { display: flex; justify-content: space-between; font-size: 9px; font-family: var(--font-mono); color: var(--text-muted); }
.asset-row { display: flex; align-items: center; gap: 10px; }
.asset-details { flex: 1; overflow: hidden; }
.asset-filename { font-size: 11px; color: #f8fafc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-filesize { font-size: 9px; font-family: var(--font-mono); color: var(--text-muted); }
.asset-actions { display: flex; gap: 6px; }
.asset-btn { flex: 1; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); color: var(--text-main); padding: 6px 10px; border-radius: 8px; font-size: 10px; text-decoration: none; cursor: pointer; text-align: center; transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease; }
.asset-btn:hover { background: rgba(56, 189, 248, 0.14); border-color: var(--accent-cyan); color: #fff; }
.asset-btn:active { transform: scale(0.95); }
.btn-danger { border-color: rgba(244, 63, 94, 0.3) !important; color: #fda4af !important; }
.btn-danger:hover { background: rgba(244, 63, 94, 0.2) !important; }

.drawer-summary-box { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 12px; font-size: 11.5px; line-height: 1.55; color: #cbd5e1; max-height: 180px; overflow-y: auto; white-space: pre-wrap; }
.relations-box { display: flex; flex-direction: column; gap: 6px; }
.section-label { font-size: 9.5px; font-family: var(--font-mono); color: var(--text-muted); }

.skill-card { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(196, 181, 253, 0.16); border-radius: 12px; padding: 11px 12px; display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; font-size: 10px; line-height: 1.4; }
.skill-card strong { color: #e2f1f7; font: 600 11px/1.35 var(--font-mono); letter-spacing: .15px; }
.skill-card > small { color: #66859a; font: 8px/1.35 var(--font-mono); overflow-wrap: anywhere; }
.skill-card p { margin: 2px 0; color: #93aebe; font-size: 9.5px; line-height: 1.45; }
.skill-card .skill-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.skill-card .skill-actions .sleek-pill-btn { font-size: 8.5px; padding: 5px 9px; }

/* Korttimodaalit (2026-09-21 Kyvyt, 2026-09-22 yleistetty myös Arkistolle):
   #skills-drawer JA #files-drawer ovat edelleen samoja .side-drawer-
   elementtejä joten avaus/sulkeutumiskoneisto (mobile-shell.js) pysyy
   ennallaan, mutta työpöydällä ne näytetään suurina, keskitettyinä lasi-
   paneeleina eikä kapeana sivulistana. .cards-grid-drawer (yhdessä ID:n
   kanssa) ylikirjoittaa .drawer-right/.drawer-left:n kiinteän reuna-
   asemoinnin. Kortti-CSS (.grid-card*) on tarkoituksella jaettu Kyvyt- ja
   Arkisto-näkymien kesken — sama visuaalinen kieli, vain sisältö eroaa
   (js/app.js:n renderSkillsHub/renderArchiveGrid). */
@media(min-width:1025px){
  #skills-drawer.cards-grid-drawer,#files-drawer.cards-grid-drawer{width:min(980px,calc(100vw - 64px));max-width:calc(100vw - 64px);left:50%;right:auto;top:64px;bottom:64px;transform:translate(-50%,18px);}
  #skills-drawer.cards-grid-drawer.open,#files-drawer.cards-grid-drawer.open{transform:translate(-50%,0);}
}
.cards-grid-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.cards-grid-toolbar .drawer-search-bar{flex:1;min-width:180px;}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;overflow-y:auto;padding-right:4px;}
.grid-card{background:rgba(15,23,42,.55);border:1px solid rgba(196,181,253,.18);border-radius:14px;padding:14px 15px;display:flex;flex-direction:column;gap:7px;}
/* Faktakortit erottuvat tiedostoista (JARVIS_VISUAALINEN_JA_UI_ROADMAP.md) —
   3D-graafin "Muisti"-solmuväri (#fb7185) reunaviivana + hienovarainen tausta. */
.grid-card-fact{border-left:3px solid #fb7185;background:rgba(251,113,133,.05);}
/* Hakuosumien korostus kortin otsikossa/kuvauksessa (JARVIS_VISUAALINEN_JA_UI_ROADMAP.md) */
.search-hit{background:rgba(56,189,248,.35);color:#fff;border-radius:3px;padding:0 1px;}
.grid-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.grid-card-title{color:#e2f1f7;font:600 12.5px/1.3 var(--font-mono);}
.grid-card-badge{font:9px var(--font-mono);color:#c4b5fd;background:rgba(196,181,253,.14);border:1px solid rgba(196,181,253,.3);border-radius:6px;padding:2px 7px;white-space:nowrap;}
.grid-card-desc{color:#93aebe;font-size:10.5px;line-height:1.5;margin:0;flex:1;}
.grid-card-meta{color:#66859a;font:8.5px var(--font-mono);}
.grid-card-tags{display:flex;flex-wrap:wrap;gap:5px;}
.grid-card-tag{font:8px var(--font-mono);color:#7dd3fc;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.25);border-radius:5px;padding:2px 6px;}
.grid-card-actions{display:flex;gap:7px;margin-top:4px;}
.grid-card-actions .sleek-pill-btn{flex:1;font-size:9.5px;padding:7px 8px;justify-content:center;}
.trigger-tag { font-size: 9px; font-family: var(--font-mono); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; padding: 2px 6px; color: #7dd3fc; cursor: pointer; display: inline-block; }

/* Dokumentin käsittelyilmaisin — näkyy hienovaraisesti latauksen/analyysin ajan */
/* bottom-arvo nostettu telemetry-hudin YLÄpuolelle (oli aiemmin 90px, joka
   sopi kun telemetria-paneelissa oli vähemmän rivejä — sittemmin lisätyt
   Malli/Nopeus/Hälytys-rivit kasvattivat sen korkeuden ~170px:iin, jolloin
   tämä ilmaisin peittyi/lomittui sen kanssa). */
/* 27.9.2026 — siirretty kelluvasta laatikosta reactor-status-pillin sisään
   (ks. index.html + rivit ~90-106 yllä), joten kelluvan version asemointi/
   kehys/tausta poistettu, jäljellä vain kompakti sisäinen rivi. */
.processing-indicator { display: flex; align-items: center; gap: 5px; font: 10px var(--font-mono); color: var(--accent-cyan); }
.processing-indicator[hidden] { display: none; }
#processing-indicator-text { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.processing-spinner { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-cyan); box-shadow: 0 0 10px var(--accent-cyan); animation: processingPulse 1s ease-in-out infinite alternate; flex-shrink: 0; }
@keyframes processingPulse { 0% { opacity: 0.5; transform: scale(0.85); } 100% { opacity: 1; transform: scale(1.25); box-shadow: 0 0 16px var(--accent-cyan); } }
@keyframes processingFadeIn { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } }

/* Arkiston lataus epäonnistui — eri väri/sisältö kuin "tyhjä arkisto",
   ettei käyttäjä luule tallennettujen tiedostojen kadonneen. */
.vault-error-banner { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); z-index: 25; display: flex; align-items: center; gap: 12px; background: rgba(69, 10, 10, 0.92); border: 1px solid rgba(248, 113, 113, 0.4); border-radius: 14px; padding: 10px 16px; backdrop-filter: blur(20px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); font-size: 11px; color: #fecaca; max-width: 90vw; }
.vault-error-banner[hidden] { display: none; }

/* Massatuonnin etenemispalkki — oma HUD-kortti, ei peitä telemetriaa */
.batch-progress-indicator { position: absolute; left: 24px; bottom: 260px; z-index: 16; display: flex; flex-direction: column; gap: 7px; background: var(--glass-bg); border: 1px solid var(--glass-border-hover); border-radius: 14px; padding: 10px 14px; backdrop-filter: blur(20px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); font-size: 10.5px; font-family: var(--font-mono); color: #fff; min-width: 220px; animation: processingFadeIn 0.25s ease; }
.batch-progress-indicator[hidden] { display: none; }
.batch-progress-row { display: flex; align-items: center; gap: 8px; }
.batch-progress-track { width: 100%; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.batch-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-cyan), var(--accent-emerald)); transition: width 0.3s ease; }

/* Alakonsoli & Telemetria */
.telemetry-hud { position: absolute; left: 24px; bottom: 24px; z-index: 15; display: flex; flex-direction: column; gap: 3px; background: linear-gradient(180deg, rgba(5,7,13,.55), rgba(5,7,13,.72)); border: 1px solid rgba(56,189,248,.16); border-radius: 14px; padding: 10px 14px; backdrop-filter: blur(20px); min-width: 148px; max-width: 220px; overflow: hidden; box-shadow: inset 0 0 40px rgba(56,189,248,.03); }
/* 27.9.2026 (käyttäjän pyyntö: "datan elävöittäminen") — hento skannausviiva-
   kuvio telemetriapaneelin päällä, sama periaate riippumatta onko paneeli
   kelluva vai SYSTEM-paneeliin telakoitu (#lifeos-telemetry-slotin oma
   tausta:none ei poista tätä, koska se on erillinen ::before-kerros). */
.telemetry-hud::before { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: repeating-linear-gradient(180deg, rgba(56,189,248,.025) 0px, rgba(56,189,248,.025) 1px, transparent 1px, transparent 3px); }
.telemetry-row { position: relative; border-bottom: 1px solid rgba(148,163,184,.06); }
.telemetry-title-actions { display: flex; align-items: center; gap: 2px; }
.telemetry-expand-btn { background: none; border: none; color: var(--text-dim); font-size: 9px; cursor: pointer; padding: 2px 4px; line-height: 1; transition: color 0.15s ease, transform 0.2s ease; }
.telemetry-expand-btn:hover { color: var(--accent-cyan); }
.telemetry-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 10.5px; }
.telemetry-token-providers { display: flex; flex-direction: column; gap: 3px; }
.telemetry-token-providers:empty { display: none; }
.telemetry-row[hidden] { display: none; }
/* 26.9.2026: rataskuvakkeen per-rivi näkyvyysasetus (ks. js/telemetry.js:n
   SYSTEM_ROW_CATALOG/applySystemRowConfig) — käyttäjä on valinnut
   "ei näkyvissä" tälle riville. */
.telemetry-row.tm-row-hidden, .system-summary-row.tm-row-hidden { display: none !important; }
.telemetry-config-panel { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.08); max-height: 220px; overflow-y: auto; }
/* 27.9.2026 (käyttäjän raportti: "rattaankuva ei sulje valintaikkunaa") —
   author-tyyli display:flex voittaa AINA selaimen oletustyylikirjaston
   [hidden]{display:none}-säännön riippumatta hidden-attribuutista (sama
   bugiluokka joka on jo aiemmin löydetty .floating-window{display:flex}:stä,
   ks. 26.9.2026-historia) — toggleSystemConfigPanel() asetti panel.hidden=true
   oikein, mutta paneeli EI koskaan visuaalisesti kadonnut. Eksplisiittinen
   [hidden]-ylikirjoitus korjaa tämän samassa tiedostossa ilman JS-muutosta. */
.telemetry-config-panel[hidden] { display: none; }
.telemetry-config-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 9px; }
.telemetry-config-row-label { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.telemetry-config-row-buttons { display: flex; gap: 3px; flex-shrink: 0; }
.telemetry-config-placement-btn { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(148,163,184,.2); background: rgba(255,255,255,.04); color: #9db2c2; font-size: 8.5px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.telemetry-config-placement-btn:hover { color: #e2f4ff; border-color: rgba(125,211,252,.4); }
.telemetry-config-placement-btn.active { color: #e2f4ff; border-color: rgba(125,211,252,.5); background: rgba(56,189,248,.16); }
.tm-label { color: var(--text-muted); }
.tm-value { color: var(--accent-cyan); font-weight: 600; text-shadow: 0 0 6px rgba(56,189,248,.35); }
.telemetry-row-dim { font-size: 9px; margin-top: -3px; }
.telemetry-row-dim .tm-label, .telemetry-row-dim .tm-value { color: var(--text-dim); font-weight: 400; }
/* Battlestation-pikatoiminnot (ks. index.html:n .telemetry-quickrun-row). */
.telemetry-quickrun-row { display: flex; gap: 6px; margin-bottom: 5px; }
.quickrun-btn { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 5px 0; font-size: 13px; cursor: pointer; transition: background 0.15s ease, transform 0.12s ease; }
.quickrun-btn:hover { background: rgba(56, 189, 248, 0.14); }
.quickrun-btn:active { transform: scale(0.92); }
.bottom-command-center { margin: 0 auto; display: flex; flex-direction: column; align-items: center; z-index: 35; transition: max-width 0.45s var(--ease-pop); }
/* Keskustelu pysyy aina samassa alakonsolissa. */
/* Kupla kasvaa sisällön mukana enimmäiskorkeuteen asti. Pitkä vastaus vierii
   keskustelutekstin sisällä eikä muuta näkymää erilliseksi isoksi luukuksi. */
.floating-speech-bubble { position: relative; border: 1px solid rgba(56, 189, 248, 0.25); padding: 12px 18px; backdrop-filter: blur(24px); display: flex; align-items: flex-start; gap: 12px; min-width: 260px; min-height: 64px; max-height: min(38dvh, 360px); overflow: hidden; }
.floating-speech-bubble.expanded { max-height: min(38dvh, 360px); }
.speech-orb-mini { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-cyan); box-shadow: 0 0 10px var(--accent-cyan); flex-shrink: 0; margin-top: 5px; }
.floating-speech-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; min-height: 0; }
.floating-speech-text { font-size: 12.5px; line-height: 1.5; color: #f1f5f9; flex: 1; white-space: pre-wrap; max-height: min(34dvh, 320px); overflow-y: auto; display: flex; flex-direction: column; gap: 9px; }
/* Päättelyketju (JARVIS_VISUAALINEN_JA_UI_ROADMAP.md: "Päättelyketju
   kuplaan") — kompakti vaihelista puhekuplan yläreunassa. */
.bubble-task-plan { display: flex; flex-direction: column; gap: 3px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.08); font-family: var(--font-mono); font-size: 10px; flex-shrink: 0; }
.bubble-task-step { display: flex; align-items: baseline; gap: 6px; color: #7c93a6; opacity: .6; transition: opacity .25s ease, color .25s ease; }
.bubble-task-step-icon { flex-shrink: 0; }
.bubble-task-step-active { color: #e2f4ff; opacity: 1; }
.bubble-task-step-active .bubble-task-step-icon { animation: bubbleStepPulse 1.1s ease-in-out infinite alternate; }
.bubble-task-step-done { color: #6ee7b7; opacity: .85; }
.bubble-task-step-done .bubble-task-step-icon::before { content: '✓ '; }
@keyframes bubbleStepPulse { 0% { opacity: .5; } 100% { opacity: 1; } }
.floating-speech-bubble.expanded .floating-speech-text { max-height: min(34dvh, 320px); font-size: 12.5px; }
/* 25.9.2026 (käyttäjän pyyntö: keskustelu pysyväksi oikean sivupaneelin
   widgetiksi työpöydällä sen sijaan että se olisi kelluva, tilaltaan ahdas
   kupla ruudun alareunassa). 'docked' lisätään/poistetaan js/mobile-shell.js:n
   placeConversationPanelissa breakpointin (≥1025px) mukaan — sama elementti,
   samat id:t (vocal-output/bubble-task-plan/open-link-list), vain sijainti ja
   koko muuttuvat. Korkeampi speksi (.floating-speech-bubble.docked) voittaa
   yllä olevat kelluvan version rajoitteet ilman lähdejärjestysriippuvuutta. */
/* 25.9.2026: käyttäjän pyyntö "yhtä paljon tyhjää reunoilla kuin reuna-
   palkeissakin" — telakoitu kupla peri aina kelluvan version omat 12px/18px-
   sisäpaddingit (.floating-speech-bubble yllä) PÄÄLLE #lifeos-conversation-
   panelin oman 16px:n (.lifeos-panel), jolloin sisältö jäi selvästi
   kauemmas reunasta kuin muissa sivupalkkien widgeteissä (esim. .now-card,
   joilla ei ole omaa lisäpaddingia — sisältö nojaa suoraan paneelin 16px:ään).
   Nollataan padding telakoituna, jotta sama 16px riittää molemmissa. */
/* align-items:stretch (perusrivin flex-start korvattuna) - muuten
   .floating-speech-body ei koskaan venynyt #speech-bubblen omaa, nyt
   ikkunan mukana kasvavaa korkeutta vastaavaksi, vaikka #speech-bubble
   itse jo kasvoi oikein (todennettu paikallisella mittauksella ennen
   tätä korjausta: bubbleHeight kasvoi, speechBodyHeight ei). */
.floating-speech-bubble.docked { min-width: 0; min-height: 0; max-height: none; backdrop-filter: none; flex: 1; padding: 0; align-items: stretch; }
.floating-speech-bubble.docked.idle-faded { opacity: 1; }
.floating-speech-bubble.docked .speech-bubble-resize-grip { display: none; }
/* 26.9.2026 (käyttäjän raportti: "sisältö ei enää kasva mukana kun ikkunaa
   venyttää") — aiempi kiinteä max-height (min(52vh,640px)) esti viestialuetta
   koskaan kasvamasta suurempaa leijuvaa ikkunaa vastaavaksi, koska se ei ollut
   sidottu ikkunan todelliseen korkeuteen lainkaan. Nyt flex:1+min-height:0
   antaa sen täyttää koko käytettävissä olevan tilan (ks. .floating-window-
   body-conversation alla, joka tekee koko ketjusta oikean flex-pinon). */
.floating-speech-bubble.docked .floating-speech-text,
.floating-speech-bubble.docked.expanded .floating-speech-text { max-height: none; min-height: 0; flex: 1; }
/* Vuoropuhelu "kerrostuu" pinoksi (ks. appendDialogTurn, js/reactor.js) sen
   sijaan että jokainen uusi vastaus pyyhkisi edellisen pois näkyvistä —
   käyttäjän oma kysymys jää näkyviin himmeämpänä JARVIKSEN vastauksen
   yläpuolelle. */
.dialog-turn-user { color: var(--text-muted); font-size: 11px; }
.dialog-turn-assistant a { color: var(--accent-cyan); text-decoration: underline; }
.dialog-turn-assistant a:hover { color: #bae6fd; }
.dialog-turn-assistant { color: #f1f5f9; }
/* Työkalu-/järjestelmätapahtumat puhekuplan sisällä (ks. js/timeline.js:n
   renderTimelineEventInBubble) — aiemmin nämä näkyivät VAIN erillisellä
   aikajanalla, nyt osana samaa yhtenäistä keskusteluvirtaa mutta visuaalisesti
   selvästi hillitympänä kuin varsinaiset käyttäjä-/vastausvuorot. */
.dialog-turn-event { font-size: 10.5px; color: var(--text-muted); font-family: var(--font-mono); }
.dialog-turn-event-error { color: #fca5a5; }
.dialog-turn-event-warning { color: #fcd34d; }
/* 26.9.2026 (käyttäjän pyyntö: selkeämmät roolimerkinnät + aikaleimat
   pysyvässä keskusteluikkunassa). Vasen reunaviiva kertoo roolin nopealla
   vilkaisulla ilman että pitää lukea tekstin sisältöä; aikaleima korvaa
   sen implisiittisen "alempana = uudempi" -vihjeen jonka uudistettu
   uusin-ylimpänä-järjestys (ks. js/reactor.js:n prependDialogRow) vei pois. */
.dialog-turn { border-left: 2px solid transparent; padding-left: 8px; animation: dialogTurnIn .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes dialogTurnIn { from { opacity: 0; transform: translateY(4px); filter: blur(2px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.dialog-turn-user { border-left-color: rgba(148, 163, 184, 0.35); }
.dialog-turn-assistant { border-left-color: rgba(56, 189, 248, 0.45); }
.dialog-turn-event { border-left-color: rgba(148, 163, 184, 0.2); }
.dialog-turn-event-warning { border-left-color: rgba(252, 211, 77, 0.5); }
.dialog-turn-event-error { border-left-color: rgba(252, 165, 165, 0.5); }
.dialog-turn-time { font-size: 9.5px; color: var(--text-muted); opacity: 0.55; font-family: var(--font-mono); margin-right: 6px; }
/* Työkalu-/järjestelmätapahtumien piilotuskytkin (ks. js/reactor.js:n
   mountConversationControls/applyShowToolEvents) — ⚙-napista, oletus
   näyttää kaiken (ei käytösmuutosta ellei käyttäjä itse sammuta). */
.hide-tool-events .dialog-turn-event { display: none; }
/* 26.9.2026: sähköpostin lähetysvahvistuksen napit (ks. js/reactor.js:n
   offerSendEmailConfirmation) — oikeat DOM-napit itse keskustelun sisällä,
   EI sandboxatun AVAA_IKKUNA-esikatselun sisään (se on tarkoituksella
   scriptitön turvallisuussyistä, joten onclick ei koskaan laukeaisi siellä). */
.dialog-turn-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
/* Keskusteluikkunan työkalupalkki (telakointi/fontti/työkalusuodatin) —
   26.9.2026: "kopioi keskustelu" -nappi poistettu käyttäjän pyynnöstä,
   tilalle kolme telakointinappia (leijuva/sivupalkki/alapalkki). Sama palkki
   siirtyy #speech-bubblen mukana riippumatta telakointitilasta (ks.
   js/reactor.js:n mountConversationControls) — leijuvassa tilassa se istuu
   ikkunan otsikkopalkissa (.floating-window-title on flex:1, joten ryhmä
   asettuu pienennä/sulje-nappien vasemmalle puolelle), muissa tiloissa
   kuplan omana yläreunana (.conversation-header-controls-inline). */
.conversation-header-controls { display: flex; gap: 6px; flex: 0 0 auto; align-items: center; }
.conversation-header-controls-inline { width: 100%; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid rgba(148, 163, 184, 0.14); }
.conversation-dock-switch { display: flex; gap: 4px; border-right: 1px solid rgba(148, 163, 184, 0.18); padding-right: 6px; margin-right: 2px; }
.conversation-dock-btn.active { color: #e2f4ff; border-color: rgba(125, 211, 252, 0.5); background: rgba(56, 189, 248, 0.16); }
.conversation-tools-toggle.active { color: #e2f4ff; border-color: rgba(125, 211, 252, 0.4); background: rgba(56, 189, 248, 0.1); }
/* 26.9.2026: keskusteluikkunan kiinteä sivupalkkitila (Battlestation-
   sarakkeessa) — tyhjä/ei tilaa vievä kun ei aktiivinen. #speech-bubble
   saa saman .docked-luokan kuin leijuvan ikkunan sisällä (sama flex-fill-
   käytös kelpaa tässäkin, ks. .floating-speech-bubble.docked yllä). */
.conversation-sidebar-dock { display: none; }
.conversation-sidebar-dock.active { display: flex; flex-direction: column; height: 340px; margin-bottom: var(--widget-gap); overflow: hidden; }
.conversation-sidebar-dock.active .floating-speech-bubble { height: 100%; }
/* #now-card on aina visuaalisesti sivupalkin "ensimmäinen" widget riippumatta
   siitä onko #conversation-sidebar-dock (edeltävä, mutta usein piilotettu
   sisarus) sillä hetkellä näkyvissä — .lifeos-panel>[data-sidebar-widget]:
   first-child ei enää täsmäisi koska dock-div on aina DOM:ssa ensin. */
#lifeos-right #now-card { margin-top: 0 !important; }
/* 26.9.2026: leijuva keskusteluikkuna ei aiemmin venynyt sisällön mukana
   koska .floating-window-body ei ollut flex-säiliö — #speech-bubble.docked
   oma flex:1 ei tehnyt mitään ilman flex-kontekstia. Tämä luokka lisätään
   VAIN keskusteluikkunan bodylle (ks. js/mobile-shell.js:n placeConversation-
   Panel), ei muille leijuville ikkunoille (Fokus/Tehtävät), joiden oma
   sisältö ei tarvitse tätä. */
.floating-window-body-conversation { display: flex; flex-direction: column; overflow: hidden; }
/* Pieni huomaamaton mykistysnappi puhekuplan kulmassa — matala opasiteetti
   levossa (sama "hienovarainen" periaate kuin .memory-toggle-tab), kirkastuu
   hoverissa/aktiivisena jottei jää täysin huomaamattomaksi kun se on päällä. */
.mute-toggle-btn { position: absolute; top: 8px; right: 12px; background: none; border: none; color: var(--text-muted); font-size: 11px; opacity: 0.32; cursor: pointer; padding: 2px 3px; line-height: 1; transition: opacity 0.2s ease; }
.mute-toggle-btn:hover { opacity: 0.9; }
.mute-toggle-btn.muted { opacity: 0.8; color: var(--accent-amber); }
.sleek-input-capsule { width: 100%; display: flex; align-items: center; gap: 8px; background: rgba(9, 14, 25, 0.88); border: 1px solid var(--glass-border); border-radius: 30px; padding: 5px 8px 5px 12px; backdrop-filter: blur(24px); transition: border-color 0.15s ease, background 0.15s ease; }
.sleek-input-capsule.drag-over { border-color: var(--accent-cyan); background: rgba(56, 189, 248, 0.08); }
/* Kyselyyn liitetty kuva/tiedosto (ei tallenneta minnekään, ks. js/app.js:n
   handleAttachmentSelected) — pieni esikatselurivi syöttökentän yläpuolella,
   poistettavissa ennen lähetystä. */
.chat-attachment-chip { display: flex; align-items: center; gap: 8px; background: rgba(9, 14, 25, 0.88); border: 1px solid var(--glass-border); border-radius: 14px; padding: 6px 10px; margin-bottom: 6px; width: fit-content; max-width: 100%; backdrop-filter: blur(24px); }
.chat-attachment-chip[hidden] { display: none; }
.chat-attachment-chip img { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.chat-attachment-chip span:not(#chat-attachment-name) { font-size: 15px; flex-shrink: 0; }
#chat-attachment-name { font-size: 11px; color: #cbd5e1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.chat-attachment-chip button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 2px 4px; flex-shrink: 0; }
.chat-attachment-chip button:hover { color: #fda4af; }
.capsule-input { flex: 1; background: transparent; border: none; outline: none; color: #ffffff; font-size: 12px; padding: 6px 4px; }
/* Syötestreamit (Interaction Streams) -tilakytkin, ks. index.html:n
   #stream-mode-switch ja js/app.js:n setInteractionStream. */
.stream-mode-switch { display: flex; align-items: center; gap: 3px; background: rgba(9, 14, 25, 0.88); border: 1px solid var(--glass-border); border-radius: 20px; padding: 3px; backdrop-filter: blur(24px); margin-bottom: 6px; width: fit-content; }
.stream-mode-btn { background: none; border: none; color: var(--text-dim); width: 30px; height: 26px; border-radius: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; transition: background 0.18s ease, color 0.18s ease; }
.stream-mode-btn:hover { color: #fff; }
.stream-mode-btn.active { background: rgba(56, 189, 248, 0.18); color: #bae6fd; }
.stream-mode-btn[data-mode="braindump"].active { background: rgba(250, 204, 21, 0.18); color: #fde68a; }
.stream-mode-btn[data-mode="research"].active { background: rgba(167, 139, 250, 0.18); color: #ddd6fe; }

/* Tilannekohtainen näköaisti (Vision on Demand) -painike + ylösaukeava
   pikavalikko, ks. index.html:n #vision-btn/#vision-menu ja js/app.js:n
   toggleVisionMenu/captureScreenSnapshot. */
.vision-btn-wrap { position: relative; }
.vision-menu { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: rgba(9, 14, 26, 0.96); border: 1px solid var(--glass-border-hover); border-radius: 14px; padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 170px; backdrop-filter: blur(28px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); z-index: 55; }
.vision-menu[hidden] { display: none; }
.vision-menu button { background: none; border: none; color: var(--text-main); font-size: 11.5px; font-family: var(--font-mono); text-align: left; padding: 8px 10px; border-radius: 9px; cursor: pointer; white-space: nowrap; transition: background 0.15s ease; }
.vision-menu button:hover { background: rgba(56, 189, 248, 0.14); color: #fff; }

.mic-icon-btn { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color: #fff; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease; }
.mic-icon-btn:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-1px); }
.mic-icon-btn:active { transform: scale(0.92); }
.mic-icon-btn.active { background: rgba(244, 63, 94, 0.25); border-color: #fda4af; }
/* Näkyy vain kapealla näytöllä (ks. mobiili-mediakysely alla) — tuplanapautus
   sekoittuu kosketusnäytöllä usein zoomauseleeseen, joten hätäpysäytykselle
   tarvitaan oma näkyvä painike. */
.mobile-stop-btn { display: none; position: absolute; bottom: -6px; right: -6px; background: rgba(20, 8, 12, 0.92); border: 1px solid rgba(244, 63, 94, 0.5); color: #fda4af; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; z-index: 2; }
.mobile-stop-btn:active { transform: scale(0.92); }
.send-icon-btn { background: rgba(56, 189, 248, 0.14); border: 1px solid rgba(56, 189, 248, 0.35); color: #bae6fd; padding: 6px 14px; border-radius: 20px; font-size: 11px; cursor: pointer; transition: background 0.18s ease, transform 0.12s ease; }
.send-icon-btn:hover { background: rgba(56, 189, 248, 0.24); }
.send-icon-btn:active { transform: scale(0.94); }

/* Modaalit */
.modal-backdrop { position: absolute; inset: 0; background: rgba(2, 4, 8, 0.85); backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal-dialog { width: 90%; max-width: 480px; background: rgba(5,7,13,.68); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); border: 1px solid var(--glass-border-hover); border-radius: 20px; padding: 24px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7); transform: scale(0.94) translateY(10px); opacity: 0; transition: transform 0.32s var(--ease-pop), opacity 0.25s ease; }
.modal-backdrop.open .modal-dialog { transform: scale(1) translateY(0); opacity: 1; }
.modal-large { max-width: 720px; width: 90%; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding-bottom: 10px; }
.modal-title { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #ffffff; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.preview-content-box { background: rgba(5, 7, 13, 0.8); border: 1px solid var(--glass-border); border-radius: 12px; padding: 16px; color: #e2e8f0; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; max-height: 60vh; overflow-y: auto; white-space: pre-wrap; }
.dropzone-box { border: 1.5px dashed rgba(148, 163, 184, 0.2); border-radius: 14px; padding: 26px 16px; text-align: center; cursor: pointer; }
.dropzone-box:hover { border-color: var(--accent-cyan); background: rgba(56, 189, 248, 0.05); }
.hidden-input { display: none; }
.cfg-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 11.5px; }
.cfg-group label { color: var(--text-muted); font-family: var(--font-mono); font-size: 10.5px; }
.cfg-input, .cfg-select { background: rgba(6, 9, 17, 0.85); border: 1px solid var(--glass-border); border-radius: 8px; padding: 9px 12px; color: #fff; font-family: var(--font-mono); font-size: 11.5px; outline: none; }
.cfg-input:focus, .cfg-select:focus { border-color: var(--accent-cyan); }
.cfg-checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #cbd5e1; margin-top: 4px; }
/* Asetusmodaalin välilehtirakenne — pitää jokaisen osion lyhyenä ja
   itsenäisesti vieritettävänä sen sijaan että koko modaali venyisi yhdeksi
   loputtomaksi pystylistaksi ominaisuuksien kertyessä. */
.settings-layout { display: flex; gap: 16px; }
.settings-tabs { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; width: 132px; border-right: 1px solid rgba(255, 255, 255, 0.06); padding-right: 12px; }
.settings-tab { text-align: left; background: none; border: none; color: var(--text-muted); font-family: var(--font-mono); font-size: 10.5px; padding: 9px 10px; border-radius: 8px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; white-space: nowrap; }
.settings-tab:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.settings-tab.active { background: rgba(56, 189, 248, 0.16); color: #bae6fd; }
.settings-panels { flex: 1; min-width: 0; max-height: 56vh; max-height: 56dvh; overflow-y: auto; padding-right: 6px; }
.settings-panel[hidden] { display: none; }

/* Avainsanasto-editori (Asetukset -> Hälytykset): rivi/tekstikentän sijaan
   lisättävät/poistettavat "chipit", sama malli kuin muuallakin sovelluksessa
   (esim. sleek-badge/trigger-tag). */
.keyword-chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.keyword-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 4px 6px 4px 12px; font-size: 10.5px; color: #e2e8f0; font-family: var(--font-mono); }
.keyword-chip button { background: rgba(244, 63, 94, 0.15); border: none; color: #fda4af; width: 16px; height: 16px; border-radius: 50%; font-size: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }
.keyword-chip button:hover { background: rgba(244, 63, 94, 0.3); color: #fff; }

/* Lyhyt visuaalinen vahvistus asetusten tallennuksesta — modaali on jo
   sulkeutunut siinä vaiheessa kun tämä näytetään, joten se on oma kelluva
   elementti, ei osa modaalia. */
.settings-saved-toast { position: fixed; top: 24px; left: 50%; transform: translateX(-50%) translateY(-12px); z-index: 90; background: rgba(6, 78, 59, 0.92); border: 1px solid rgba(52, 211, 153, 0.4); color: #6ee7b7; font-size: 11.5px; font-family: var(--font-mono); padding: 9px 18px; border-radius: 20px; backdrop-filter: blur(20px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; }
.settings-saved-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 760px) {
  .settings-layout { flex-direction: column; }
  .settings-tabs { flex-direction: row; width: auto; overflow-x: auto; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding-right: 0; padding-bottom: 8px; -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%); mask-image: linear-gradient(to right, black 88%, transparent 100%); }
  .settings-panels { max-height: 46vh; max-height: 46dvh; }
}

.dropdown-popover { position: absolute; top: 64px; right: 24px; background: rgba(9, 14, 26, 0.94); border: 1px solid var(--glass-border-hover); border-radius: 16px; padding: 12px; backdrop-filter: blur(28px); display: none; flex-direction: column; gap: 4px; min-width: 190px; z-index: 50; }
.dropdown-popover.open { display: flex; }
.popover-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 10px; font-size: 11px; font-family: var(--font-mono); color: var(--text-muted); cursor: pointer; background: transparent; border: none; text-align: left; }
.popover-item:hover { color: #ffffff; background: rgba(56, 189, 248, 0.12); }
.popover-item.active { color: var(--accent-cyan); background: rgba(56, 189, 248, 0.18); }
.dot-tag { width: 6px; height: 6px; border-radius: 50%; }

/* Kapea näyttö — komponenttikohtaiset, HUD-rakenteesta riippumattomat
   pienennykset. HUD:n oma rakenne (yläpalkki/sivupaneelit/reaktori/
   alanavigaatio) on kokonaan "MOBIILI/TABLETTI-KUORI" -osiossa tämän
   tiedoston lopussa — ei enää täällä, ettei kaksi eri kohtaa voi ajautua
   ristiriitaan keskenään. */
@media (max-width: 760px) {
  .dropdown-popover { right: 12px; left: 12px; min-width: 0; }
  .modal-dialog, .modal-large { width: calc(100vw - 32px); }
}

/* Kapeimmat puhelinnäytöt (375-430px) — Battlestation-pikanappien
   (ks. .telemetry-quickrun-row) myötä paneeli on pidempi kuin ennen, joten
   skaalataan hieman pienemmäksi kuin 760px-rajalla ja rajataan korkeus
   sisäisesti vieritettäväksi, ettei se koskaan peitä Three.js-graafin
   kosketusohjausta suuremmalta alueelta kuin oma kulmansa. */
@media (max-width: 430px) {
  .telemetry-hud { transform: scale(0.72); transform-origin: bottom left; max-height: 46vh; max-height: 46dvh; overflow-y: auto; }
  .quickrun-btn { padding: 8px 0; font-size: 15px; }
}

/* --- SKRIPTIPAJA (Koodaus- ja skriptipaja) --- */
.sandbox-dialog { max-width: 1380px; max-height: 92dvh; overflow-y: auto; }
.sandbox-telemetry-row { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.sandbox-telemetry-row strong { color: var(--accent-emerald); font-weight: 600; }
.sandbox-body { display: grid; grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; height: 52vh; min-height: 360px; margin-bottom: 10px; }
.sandbox-description-panel, .sandbox-code-panel, .sandbox-output-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.sandbox-description-panel { background: rgba(52,211,153,0.035); border: 1px solid rgba(52,211,153,0.2); border-radius: 12px; padding: 14px; overflow-y: auto; }
.sandbox-panel-title { font-size: 12px; font-weight: 600; color: #a7f3d0; }
.sandbox-help { font-size: 12px; line-height: 1.55; color: var(--text-muted); margin: 0; overflow-wrap: anywhere; }
#sandbox-description { flex: 1; min-height: 110px; width: 100%; resize: none; padding: 12px; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(6,9,17,0.85); color: var(--text-main, #e2e8f0); font: inherit; font-size: 13px; line-height: 1.6; }
#sandbox-description:focus-visible, .sandbox-editor-textarea:focus-visible { outline: 2px solid var(--accent-emerald); outline-offset: 2px; }
.sandbox-refine { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.sandbox-generation-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#sandbox-generate-btn { border-color: rgba(52,211,153,0.5); color: #a7f3d0; white-space: normal; }
#sandbox-generation-status[data-error="true"] { color: #fda4af; }
.sandbox-code-container, .sandbox-output-panel .sandbox-terminal { flex: 1; min-height: 0; overflow: hidden; }
.sandbox-output-panel .sandbox-terminal { overflow: auto; }
.sandbox-terminal > div { position: relative; padding-right: 30px; }
.sandbox-dialog .modal-footer, .sandbox-dialog .modal-footer > div { flex-wrap: wrap; }
@media (max-width: 1000px) {
  .sandbox-body { grid-template-columns: 1fr 1fr; height: auto; }
  .sandbox-description-panel { grid-column: 1 / -1; min-height: 300px; }
  .sandbox-code-panel, .sandbox-output-panel { height: 340px; }
}
@media (max-width: 760px) {
  .sandbox-body { grid-template-columns: minmax(0, 1fr); }
  .sandbox-dialog { padding: 16px; }
  #sandbox-description { font-size: 16px; }
}
.sandbox-editor-textarea { width: 100%; height: 100%; background: rgba(6,9,17,0.85); border: 1px solid var(--glass-border); border-radius: 10px; padding: 10px; color: #7dd3fc; font-family: var(--font-mono); font-size: 11.5px; outline: none; resize: none; }
/* CodeMirror korvaa yllä olevan textarean kun se on ladattu (ks. js/sandbox.js:n openSandboxModal) — sama koko/reunat, oma tumma teema jotta se sulautuu HUD:iin. */
.sandbox-body .CodeMirror { height: 100%; border: 1px solid var(--glass-border); border-radius: 10px; font-family: var(--font-mono); font-size: 11.5px; }
.cm-s-jarvis-dark.CodeMirror { background: rgba(6,9,17,0.85); color: #e2e8f0; }
.cm-s-jarvis-dark .CodeMirror-gutters { background: rgba(6,9,17,0.6); border-right: 1px solid rgba(255,255,255,0.06); }
.cm-s-jarvis-dark .CodeMirror-linenumber { color: var(--text-dim); }
.cm-s-jarvis-dark .CodeMirror-cursor { border-left: 1px solid #7dd3fc; }
.sandbox-terminal { position: relative; height: 100%; overflow-y: auto; background: #050a06; border: 1px solid rgba(52,211,153,0.25); border-radius: 10px; padding: 10px 12px; font-family: var(--font-mono); font-size: 11px; color: #6ee7b7; display: flex; flex-direction: column; gap: 4px; text-shadow: 0 0 4px rgba(110,239,167,.55); }
/* 27.9.2026 (käyttäjän pyyntö: "hakkeriteema Skriptipajalle") — kevyt CRT-
   skannausviiva-ylay + vilkkuva kohdistin, muun lasiteeman ULKOPUOLELLA
   tarkoituksella (oma, erottuva "terminaali"-tunnelma). */
.sandbox-terminal::before { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.15) 3px); }
.sandbox-line { white-space: pre-wrap; word-break: break-word; }
.sandbox-line-cmd { color: #86efac; opacity: 0.8; }
/* vain viimeisin komentorivi vilkkuu (ei jokainen historiarivi — appendSandboxTerminalLine
   lisää joka rivin #sandbox-terminalin suoraksi lapseksi, ks. js/sandbox.js). */
#sandbox-terminal > .sandbox-line-cmd:last-child::after { content: "▍"; margin-left: 2px; color: #6ee7b7; animation: terminalCaretBlink 1s steps(1) infinite; }
@keyframes terminalCaretBlink { 50% { opacity: 0; } }
.sandbox-line-error { color: #fda4af; white-space: pre-wrap; word-break: break-word; }
.sandbox-line-dim { color: var(--text-dim); font-style: italic; }
.sandbox-plot-image { max-width: 100%; border-radius: 8px; border: 1px solid rgba(52,211,153,0.3); margin-top: 4px; }

/* --- KIINTIÖ- JA TELEMETRIAVAHTI (Quota & Telemetry Sentinel) --- */
/* Nämä tiedot (palvelin-/R2-tilapisteet, Groqin 30 RPM -kiintiöpalkki,
   keskiarvoviive) elävät #telemetry-hud-paneelin SISÄLLÄ (ei enää omana
   erillisenä palkkina — ks. index.html:n kommentti #telemetry-hud:n
   kohdalla) jotta ne pysyvät aina saman paneelin oleellisissa riveissä,
   silmäiltävissä ilman laajennusta. */
.sentinel-status-value { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sentinel-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--text-dim); transition: background 0.3s ease, box-shadow 0.3s ease; }
.sentinel-dot-ok { background: var(--accent-emerald); box-shadow: 0 0 8px var(--accent-emerald); }
.sentinel-dot-bad { background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: alertOrbPulse 1s ease-in-out infinite alternate; }
.sentinel-rpm-item { display: flex; align-items: center; gap: 6px; }
.sentinel-rpm-track { flex: 1; min-width: 60px; max-width: 90px; height: 6px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.sentinel-rpm-fill { display: block; height: 100%; border-radius: 4px; transition: width 0.4s ease, background 0.4s ease; }
.sentinel-rpm-ok { background: var(--accent-emerald); }
.sentinel-rpm-warn { background: var(--accent-amber); }
.sentinel-rpm-danger { background: #ef4444; }

/* JARVIS 2.0 / LifeOS */
:root { --cockpit-left:260px; --cockpit-right:320px; --cockpit-gap:21.6px; --cockpit-inset:13.2px; --widget-gap:10.8px; --control-gap:3.6px; }
body { background:#050910; }
/* 27.9.2026 (käyttäjän pyyntö: "glassmorphism ja syvyys") — tausta oli
   käytännössä läpinäkymätön (.91/.88-alfa) jo ennestään olemassa olevasta
   backdrop-filter:blur(24px):sta huolimatta, joten takana liikkuva 3D-
   kohtaus ei koskaan ehtinyt kuultaa läpi. Alfa laskettu niin että blur
   näkyy oikeasti, box-shadow lisätty syvyydentunnun vuoksi. */
.lifeos-panel { position:absolute;top:22px;bottom:22px;border:1px solid rgba(148,180,204,.13);background:rgba(5,7,13,.6);border-radius:22px;padding:16px;overflow:auto;scrollbar-width:thin;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:0 8px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04); }
.lifeos-left{left:22px;width:var(--cockpit-left);}
.lifeos-right{right:22px;width:var(--cockpit-right);padding:15px;}
.lifeos-panel section{margin-top:var(--widget-gap);}
.lifeos-eyebrow,.lifeos-section-title,.core-coordinate{font:9px var(--font-mono);letter-spacing:1.6px;color:#7690a7;}
.lifeos-eyebrow{font-size:8px;letter-spacing:1.2px;}
.lifeos-panel h1{font:600 34px var(--font-display);letter-spacing:-1.5px;margin:14px 0 5px;color:#edf6ff;}
.lifeos-panel h1 span{font:10px var(--font-mono);letter-spacing:0;color:var(--accent-cyan);border:1px solid #24586b;padding:4px 7px;border-radius:6px;vertical-align:middle;margin-left:10px;}
.lifeos-subtitle,.panel-hint{font-size:11px;color:#7f93a8;line-height:1.8;}
.lifeos-section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;}
.lifeos-section-title button{background:transparent;border:1px solid #273d50;border-radius:6px;color:#b9d7e9;cursor:pointer;padding:3px 7px;}
/* 27.9.2026: sivupalkkien otsikkonapit yhtenäisiksi — vasemman SYSTEM-otsikon
   ⚙/▼ olivat 9px/17px korkeita, oikean palkin (Drive/Kalenteri/Postilaatikko)
   ↻/▼ selaimen oletusfontilla 13px/24px. Sama koko, fontti ja väli kaikille
   otsikoiden toimintopainikkeille (Quick Runsin ＋ säilyy omana). */
.lifeos-section-title .telemetry-title-actions button{font-family:inherit;font-size:9px;line-height:1;padding:3px 7px;min-height:17px;display:inline-flex;align-items:center;justify-content:center;}
.lifeos-section-title .telemetry-title-actions button:hover{color:var(--accent-cyan);border-color:rgba(56,189,248,.45);}
.lifeos-mode-switch{display:flex;gap:4px;padding:4px;background:#080f1b;border:1px solid #1a2a3d;border-radius:10px;}
.lifeos-mode-switch button{flex:1;padding:10px 2px;font:9px var(--font-mono);color:#7892aa;border:0;border-radius:6px;background:none;cursor:pointer;}
.lifeos-mode-switch button.active{background:#1a3647;color:var(--accent-cyan);}
/* .lifeos-system-summary on OMA, aina näkyvä elementtinsä tämän togglen
   ulkopuolella — vain .lifeos-combo-body (telemetria + Connectors-lista) on
   tämän togglen takana. 26.9.2026: mitkä rivit fyysisesti asuvat kummassa
   containerissa on nyt käyttäjän muokattavissa yhdellä SYSTEM-otsikon
   ⚙-napilla (ks. js/telemetry.js:n SYSTEM_ROW_CATALOG/applySystemRowConfig)
   — nämä kaksi containeria pysyvät kiinteinä ANKKUREINA, vain niiden
   SISÄLTÖ on siirrettävissä. */
.lifeos-combo-body{display:none;}
.lifeos-combo-panel.expanded .lifeos-combo-body{display:block;}
.lifeos-combo-toggle{background:none;border:none;color:var(--text-dim);font-size:9px;cursor:pointer;padding:2px 4px;line-height:1;opacity:.65;transition:color .15s ease,opacity .15s ease,transform .2s ease;}
.lifeos-combo-toggle:hover{color:var(--accent-cyan);opacity:1;}
.lifeos-combo-panel.expanded .lifeos-combo-toggle{transform:rotate(180deg);opacity:1;}
.lifeos-combo-subtitle{margin:14px 0 9px;}
.connector-row{display:grid;grid-template-columns:7px 1fr;gap:7px 10px;margin-bottom:11px;font-size:11px;color:#b1c3d4;align-items:center;}
.connector-row small{grid-column:2;color:#617d96;font-size:9px;}
.connector-dot{width:6px;height:6px;border-radius:50%;background:#536879;}
.state-ready{background:var(--accent-emerald);box-shadow:0 0 10px rgba(52,211,153,.4);}.state-error{background:var(--accent-danger);box-shadow:0 0 8px rgba(239,68,68,.4);}.state-configured{background:var(--accent-cyan);}
.lifeos-footer{margin-top:22px;border-top:1px solid #1b2938;padding-top:13px;color:#67859d;font:9px var(--font-mono);display:flex;gap:8px;align-items:center;}
.lifeos-clock{font:400 38px var(--font-mono);color:#eef7ff;letter-spacing:-2px;display:block;margin-top:14px;}
.lifeos-date{font-size:11px;color:#7590a7;text-transform:capitalize;margin:6px 0 12px;}
/* Nyt-kortti (ks. index.html #now-card): kompakti tilannekatsaus
   Battlestation-sarakkeen ylimpänä — kellonaika/päivä siirretty tänne
   yhteen paikkaan (ei enää duplikaattia), pienempänä kuin ennen jottei
   syrjäytä alla olevaa sääprofiilia. */
.now-card{padding:10px 12px;margin-bottom:9px;border:1px solid rgba(56,189,248,.14);border-radius:14px;background:linear-gradient(145deg,rgba(8,22,34,.85),rgba(5,12,22,.68));}
.now-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font:9px var(--font-mono);letter-spacing:1px;color:#7690a7;}
.now-card-status{padding:2px 8px;border-radius:10px;background:rgba(255,255,255,.05);color:#cde9f5;white-space:nowrap;}
.now-card .lifeos-clock{font-size:29px;margin-top:6px;letter-spacing:-1.5px;}
.now-card .lifeos-date{margin:2px 0 0;}
#drive-state{font:9px var(--font-mono);color:#64839a;}
#lifeos-calendar h4{font:9px var(--font-mono);text-transform:uppercase;letter-spacing:1px;color:#7290a7;margin:16px 0 9px;}
.calendar-event{border-left:3px solid var(--accent-emerald);border-radius:0 7px 7px 0;background:#10233299;padding:9px 10px;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:5px 6px;font-size:10px;margin:6px 0;align-items:start;}
.calendar-event time{color:#6ee7b7;font-family:var(--font-mono);font-size:8px;line-height:1.4;}.calendar-event strong{font-weight:500;color:#d3e6f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}.calendar-event small{grid-column:2/-1;color:#6c8ba3;font-size:8px;}
.calendar-empty{font-size:10px;color:#4f6b81;}
/* 26.9.2026: postilaatikkolista (ks. js/lifeos.js:n renderInboxWidget) —
   sama tiivis rivikuvio kuin .calendar-event, mutta linkkinä (avaa Gmailin
   omassa web-käyttöliittymässä) eikä ruudukkona (ei aikasaraketta). */
.lifeos-inbox-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto;}
.lifeos-inbox-row{position:relative;display:block;border-left:3px solid var(--accent-cyan);border-radius:0 7px 7px 0;background:#10233299;padding:7px 26px 7px 10px;text-decoration:none;transition:background .15s ease;cursor:pointer;}
.lifeos-inbox-row:hover{background:#15304499;}
.lifeos-inbox-row strong{display:block;font-size:9.5px;font-weight:500;color:#8fb4c9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lifeos-inbox-row span{display:block;font-size:10.5px;color:#d3e6f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lifeos-inbox-row small{display:block;font-size:9px;color:#6c8ba3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;}
/* 27.9.2026 (käyttäjän pyyntö: "täydellinen sähköpostikäsittely") — rivin
   klikkaus avaa nyt kelluvan lukuikkunan (openEmailViewer); tämä pieni
   kulmalinkki säilyttää vanhan "avaa Gmailissa" -reitin vaihtoehtona. */
.lifeos-inbox-row-gmail-link{position:absolute;top:6px;right:6px;font-size:11px;color:#6c8ba3;text-decoration:none;padding:2px 4px;}
.lifeos-inbox-row-gmail-link:hover{color:var(--accent-cyan);}
.email-viewer-meta strong{display:block;font-size:12.5px;color:#e2f4ff;margin-bottom:2px;}
.email-viewer-meta span{display:block;font-size:10.5px;color:#8fb4c9;}
.email-viewer-meta small{display:block;font-size:9px;color:#6c8ba3;margin-top:2px;}
.email-viewer-body-wrap{height:200px;margin:10px 0;}
/* Lukuikkunan viestialue kasvaa kelluvan ikkunan mukana: body flex-säiliöksi,
   meta ja vastaus luonnollisen korkuisina, iframe-alue täyttää loput. */
.floating-window-body-email{display:flex;flex-direction:column;overflow:hidden;}
.floating-window-body-email .email-viewer-meta,.floating-window-body-email .email-viewer-reply{flex:0 0 auto;}
.floating-window-body-email .email-viewer-body-wrap{flex:1 1 auto;min-height:120px;height:auto;}
.email-viewer-reply[hidden]{display:none;}
.email-viewer-note{display:block;font-size:10px;color:#f59e0b;margin-top:4px;}
.lifeos-inbox-unread-badge{display:inline-block;margin-left:6px;min-width:16px;padding:1px 6px;border-radius:9px;background:rgba(56,189,248,.18);border:1px solid rgba(56,189,248,.45);color:#7dd3fc;font:9px var(--font-mono);text-align:center;vertical-align:1px;}
.lifeos-inbox-unread-badge[hidden]{display:none;}
.lifeos-inbox-toggle{transition:transform .2s ease;}
#lifeos-inbox-section.collapsed .lifeos-inbox-toggle{transform:rotate(-90deg);}
#lifeos-inbox-section.collapsed #lifeos-inbox{display:none;}
.lifeos-inbox-row.is-unread{border-left-color:#7dd3fc;background:#16354b99;}
.lifeos-inbox-row.is-unread strong{color:#e2f4ff;font-weight:700;}
.lifeos-inbox-row.is-unread span{font-weight:600;}
.email-viewer-body-frame{width:100%;height:100%;border:1px solid rgba(148,163,184,.15);border-radius:8px;background:#0b1220;}
.email-viewer-reply textarea{width:100%;box-sizing:border-box;resize:vertical;background:#0b1220;border:1px solid rgba(148,163,184,.2);border-radius:8px;color:#e2f4ff;font:12px var(--font-mono);padding:8px;}
.email-viewer-reply-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;}
.email-viewer-reply-status{font-size:10px;color:#8fb4c9;}
.email-composer-form{display:flex;flex-direction:column;gap:10px;height:100%;box-sizing:border-box;}
.email-composer-badge{font-size:10.5px;color:#38bdf8;padding:4px 8px;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.2);border-radius:6px;width:fit-content;}
.email-composer-field{display:flex;flex-direction:column;gap:3px;}
.email-composer-field label{font-size:10.5px;color:#8fb4c9;text-transform:uppercase;letter-spacing:0.5px;font-family:var(--font-mono, monospace);}
.email-composer-field input{width:100%;box-sizing:border-box;background:#0b1220;border:1px solid rgba(148,163,184,.2);border-radius:6px;color:#e2f4ff;font:12.5px var(--font-sans, sans-serif);padding:6px 10px;}
.email-composer-field input:focus, .email-composer-field textarea:focus{border-color:#38bdf8;outline:none;background:#0f172a;}
.email-composer-field textarea{width:100%;box-sizing:border-box;flex:1;min-height:160px;resize:vertical;background:#0b1220;border:1px solid rgba(148,163,184,.2);border-radius:6px;color:#e2f4ff;font:12.5px var(--font-sans, sans-serif);padding:8px 10px;line-height:1.45;}
.email-composer-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px;}
.email-composer-status{font-size:11px;color:#8fb4c9;}
.calendar-event-badge{font:7px var(--font-mono);letter-spacing:.6px;padding:2px 6px;border-radius:8px;white-space:nowrap;align-self:start;}
.calendar-badge-allday{background:rgba(255,255,255,.06);color:#9db2c2;}
#quick-runs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(88px,100%),1fr));gap:5px;min-height:68px;contain:layout;}
.lifeos-quick-card,.quick-run-skeleton{min-width:0;min-height:68px;border:1px solid #203448;border-radius:8px;background:#12223455;overflow:hidden;}
.lifeos-quick-card{position:relative;animation:quick-run-in .18s ease-out both;transition:border-color .16s ease,background .16s ease,opacity .16s ease;}
.lifeos-quick-card:hover{border-color:#2e526b;background:#142a3d99;}
.lifeos-quick-main{display:grid;grid-template-columns:18px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:6px;row-gap:2px;width:100%;min-height:68px;border:0;background:none;color:#d5e5f0;text-align:left;padding:9px 7px;cursor:pointer;}
.lifeos-quick-main strong{font-size:9px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:20px;}
.lifeos-quick-main small{grid-column:2;font-size:7.5px;color:#64829b;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.quick-icon{grid-row:1/3;align-self:center;font-size:14px;color:var(--accent-cyan);}
.quick-edit,.quick-delete,.quick-drag-handle{position:absolute;top:3px;z-index:2;display:none;align-items:center;justify-content:center;box-sizing:border-box;width:18px;height:18px;padding:0;border:1px solid #2a4458;border-radius:5px;background:#0b1722e6;font-size:9px;line-height:1;color:#9cc0d6;cursor:pointer;transition:background .15s ease,border-color .15s ease;}.quick-edit{right:23px;}.quick-delete{right:3px;}.quick-edit:hover,.quick-edit:focus-visible{background:#1c3548;color:#d8edf8;border-color:var(--accent-cyan);}.quick-delete:hover,.quick-delete:focus-visible{background:#3a1620;border-color:var(--status-error);}
.quick-drag-handle{left:3px;cursor:grab;touch-action:none;color:#7295aa;}.quick-drag-handle:hover{color:var(--accent-cyan);border-color:rgba(56,189,248,.6);}
.quick-svg-icon{display:block;width:11px;height:11px;pointer-events:none;}
/* Pääpainikkeen fokusrengas kortin sisäpuolelle (kortilla overflow:hidden). */
.lifeos-quick-main:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:-2px;border-radius:7px;}
/* Quick Runs -muokkaustila (⚙): kahva/kynä/roskakori omalla työkalurivillään
   kortin yläreunassa (ei otsikon päällä), kaikissa korteissa. Kosketuksella
   raahaus vain kahvasta (touch-action:none vain kahvalla), joten muu kortti
   vierittää paneelia/draweria normaalisti. */
.quick-runs-title-actions{display:inline-flex;align-items:center;gap:4px;}
.quick-runs-edit-toggle{font-size:10px;line-height:1;transition:color .15s ease,border-color .15s ease,background .15s ease;}
.quick-runs-edit-glyph{display:inline-block;transition:transform .2s ease;}
@media(hover:hover){.quick-runs-edit-toggle:hover .quick-runs-edit-glyph{transform:rotate(45deg);}}
.quick-runs-edit-toggle.active,.quick-runs-edit-toggle[aria-pressed="true"]{color:var(--accent-cyan);border-color:rgba(56,189,248,.6);background:rgba(56,189,248,.12);}
#quick-runs-grid.quick-runs-editing .quick-edit,#quick-runs-grid.quick-runs-editing .quick-delete,#quick-runs-grid.quick-runs-editing .quick-drag-handle{display:inline-flex;}
#quick-runs-grid.quick-runs-editing .lifeos-quick-card{cursor:grab;user-select:none;-webkit-user-select:none;border-style:dashed;border-color:#2e526b;animation:none;}
#quick-runs-grid.quick-runs-editing .lifeos-quick-main{cursor:grab;padding-top:25px;}
#quick-runs-grid.quick-runs-editing .lifeos-quick-main strong{padding-right:0;}
#quick-runs-grid.quick-runs-editing .lifeos-quick-card[data-last-result]::after{display:none;}
/* Raahattava haamukortti on raahauksen ajan document.bodyssa (ks. js/lifeos.js
   startQuickRunDrag), joten paneelin overflow/contain ei leikkaa sitä. */
.lifeos-quick-card.is-dragging{position:fixed;z-index:10000;margin:0;pointer-events:none;cursor:grabbing;opacity:.92;animation:none;border-style:solid;border-color:var(--accent-cyan);background:#12304ee6;box-shadow:0 10px 28px rgba(0,0,0,.45);}
.lifeos-quick-card.is-dragging .lifeos-quick-main{padding-top:25px;}
.lifeos-quick-card.is-dragging .lifeos-quick-main strong{padding-right:0;}
.quick-run-placeholder{min-width:0;min-height:68px;border:1px dashed rgba(56,189,248,.55);border-radius:8px;background:rgba(56,189,248,.07);}
.core-tool-card.is-focused{border-color:var(--accent-cyan);box-shadow:0 0 0 1px rgba(56,189,248,.35);}
.lifeos-quick-card.is-running{pointer-events:none;border-color:#22d3ee80;background:#12304499;}.lifeos-quick-card.is-running .lifeos-quick-main{opacity:.42;}.lifeos-quick-card.is-running::after{content:'';position:absolute;inset:50% auto auto 50%;width:13px;height:13px;margin:-7px;border:2px solid #22d3ee44;border-top-color:#67e8f9;border-radius:50%;animation:quick-run-spin .7s linear infinite;}
/* Suorituksen tulos jää hetkeksi näkyviin kortin omaan kulmaan — EI koskaan
   koko ruudukon uudelleenrenderöintiä (ks. js/lifeos.js:n runLifeosQuick,
   joka koskettaa vain tätä yhtä korttia). */
.lifeos-quick-card[data-last-result]{transition:border-color .2s ease;}
.lifeos-quick-card[data-last-result="ok"]{border-color:var(--accent-emerald);}
.lifeos-quick-card[data-last-result="ok"]::after{content:'✓';position:absolute;top:4px;right:5px;font:9px var(--font-mono);color:var(--accent-emerald);}
.lifeos-quick-card[data-last-result="error"]{border-color:var(--status-error);}
.lifeos-quick-card[data-last-result="error"]::after{content:'✕';position:absolute;top:4px;right:5px;font:9px var(--font-mono);color:var(--status-error);}
#quick-runs-grid.is-loading .quick-run-skeleton{background:linear-gradient(100deg,#10202e 30%,#173246 48%,#10202e 66%);background-size:220% 100%;animation:quick-run-shimmer 1.1s ease-in-out infinite;}
.quick-runs-section .lifeos-section-title{margin-bottom:7px;}.quick-run-add{transition:transform .15s ease,background .15s ease;}@media(hover:hover){.quick-run-add:hover{transform:scale(1.08);}}
.quick-run-form{display:grid;gap:12px;}.quick-run-form label{display:grid;gap:6px;font-size:10px;color:#9bb7c8;}.quick-run-form label small{color:#58778b;font-weight:400;}.quick-run-form-row{display:grid;grid-template-columns:minmax(0,1fr) 78px;gap:9px;}.quick-run-form-actions{display:flex;justify-content:flex-end;gap:8px;}.quick-run-form .error:empty{display:none;}
@keyframes quick-run-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}@keyframes quick-run-spin{to{transform:rotate(360deg)}}@keyframes quick-run-shimmer{to{background-position:-220% 0}}
@media(max-width:1150px){#quick-runs-grid{grid-template-columns:repeat(auto-fit,minmax(78px,1fr));}.lifeos-quick-main{padding:8px 6px;}}
@media(max-width:850px){#quick-runs-grid{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));}}
/* Mobiili/tabletti: kosketusalueet ≥32px. HUOM: .hud-layer *{min-width:0}
   (MOBIILI/TABLETTI-KUORI) ohitti aiemman yhden luokan min-width-säännön —
   siksi kaksiluokkainen valitsin. */
@media(max-width:1024px){
  .lifeos-section-title .quick-runs-edit-toggle,.lifeos-section-title .quick-run-add{min-width:40px;min-height:36px;font-size:14px;display:inline-flex;align-items:center;justify-content:center;}
  #quick-runs-grid.quick-runs-editing .quick-edit,#quick-runs-grid.quick-runs-editing .quick-delete,#quick-runs-grid.quick-runs-editing .quick-drag-handle{width:32px;height:32px;top:4px;font-size:13px;}
  #quick-runs-grid.quick-runs-editing .quick-drag-handle{left:4px;}
  #quick-runs-grid.quick-runs-editing .quick-edit{right:40px;}
  #quick-runs-grid.quick-runs-editing .quick-delete{right:4px;}
  #quick-runs-grid.quick-runs-editing .quick-svg-icon{width:15px;height:15px;}
  #quick-runs-grid.quick-runs-editing .lifeos-quick-main,.lifeos-quick-card.is-dragging .lifeos-quick-main{padding-top:40px;}
}
.quick-run-icon-field{position:relative;}
.quick-icon-picker-btn{width:100%;height:37px;margin-top:7px;border:1px solid var(--glass-border);border-radius:8px;background:rgba(6,9,17,0.85);color:#fff;font-size:16px;cursor:pointer;transition:border-color .15s ease;}
.quick-icon-picker-btn:hover,.quick-icon-picker-btn:focus{border-color:var(--accent-cyan);outline:none;}
#quick-run-icon-popover.icon-popover{position:absolute;top:calc(100% + 6px);left:0;right:auto;width:236px;max-height:260px;overflow-y:auto;padding:10px;gap:8px;z-index:95;}
.icon-popover-cat{font-size:8.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#567990;margin:6px 0 2px;}
.icon-popover-cat:first-child{margin-top:0;}
.icon-popover-row{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;}
.icon-popover-item{border:1px solid transparent;border-radius:7px;background:rgba(255,255,255,0.03);color:#d5e5f0;font-size:14px;padding:5px 0;cursor:pointer;}
.icon-popover-item:hover{background:rgba(56,189,248,0.14);border-color:rgba(56,189,248,0.3);}
.quick-run-preview-label{font-size:9px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#567990;margin-bottom:6px;}
.quick-run-preview-wrap{margin-bottom:14px;}
.quick-run-preview-card{pointer-events:none;animation:none;}
.quick-run-preview-card .lifeos-quick-main{padding:9px 10px;}
.quick-run-preview-card .quick-icon{font-size:16px;}
.quick-run-preview-card strong{font-size:10px;}
.quick-run-preview-card small{font-size:8.5px;}
.lifeos-center{position:absolute;left:calc(var(--cockpit-left) + 58px);right:calc(var(--cockpit-right) + 58px);top:96px;bottom:220px;pointer-events:none;}
/* Keskialueen näkymänvaihto (ks. js/center-view.js): kolme päällekkäistä
   .center-pane-elementtiä samassa tilassa, vaihtavat näkyvyyttä opacityn ja
   inert-attribuutin kautta — EI koskaan hidden/display:none, jotta lyhyt
   siirtymäanimaatio ehtii näkyä eikä galaksin tausta (#webgl-canvas, aina
   koko näytön kokoinen tausta .hud-layerin alla) tarvitse koskaan piiloutua
   tai uudelleenluoda. inert estää piilossa olevan paneelin sisällön
   fokusoinnin/klikkauksen ilman että se vaikuttaa layoutiin.
   prefers-reduced-motion (ks. tiedoston loppu) nollaa transition-duration-
   arvon automaattisesti, joten erillistä suojausta ei tarvita täällä. */
.center-pane{position:absolute;inset:0;opacity:0;transform:translateY(6px);transition:opacity .28s ease,transform .28s ease;pointer-events:none;}
.center-pane.center-pane-active{opacity:1;transform:none;pointer-events:auto;}
.center-pane-galaxy{display:flex;flex-direction:column;align-items:center;justify-content:center;}
/* KRIITTINEN KORJAUS: pane-galaxy (aktiivisena .center-pane-active yllä)
   sai pointer-events:autona ison, näkymättömän suorakulmion keskelle
   ruutua Three.js-kanvaksen (#webgl-canvas, aina koko näytön kokoinen
   .hud-layerin ALLA) päälle — se ei enää sisällä mitään interaktiivista
   (#lifeos-core-slot on tyhjä koukku, #semantic-pill pelkkä lukutila),
   mutta pointer-events:auto silti KAAPPASI kaikki hiiritapahtumat siltä
   alueelta ennen kuin ne ehtivät kanvakselle asti — OrbitControls ei siis
   KOSKAAN saanut pointerdown/drag-tapahtumia keskialueelta, ja käyttäjä ei
   pystynyt raahaamaan/pyörittämään neuroverkkoa siitä kohdasta ruutua missä
   sitä luontevimmin yrittäisi. Id-selektori voittaa erikoisuudessa ylemmän
   luokkasäännön riippumatta järjestyksestä. */
#pane-galaxy.center-pane-active{pointer-events:none;}
.center-pane-timeline,.center-pane-document{display:flex;flex-direction:column;background:linear-gradient(160deg,rgba(15,25,39,.91),rgba(7,13,23,.88));border:1px solid rgba(148,180,204,.13);border-radius:22px;backdrop-filter:blur(24px);overflow:hidden;}
/* Keskusteluaikajana (ks. js/timeline.js) */
.timeline-toolbar{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;}
.timeline-search-input{flex:1;min-width:0;}
.timeline-toolbar-actions{display:flex;gap:8px;flex-shrink:0;}
.timeline-list{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:8px;}
.timeline-event{border:1px solid rgba(255,255,255,.06);border-left:3px solid var(--text-dim);border-radius:10px;background:rgba(255,255,255,.02);padding:8px 12px;font-size:11.5px;}
.timeline-event.timeline-event-filtered{display:none;}
.timeline-event-head{display:flex;align-items:center;gap:8px;font:9px var(--font-mono);color:var(--text-muted);margin-bottom:4px;}
.timeline-event-icon{font-size:11px;}
.timeline-event-text{color:#e2e8f0;white-space:pre-wrap;}
.timeline-event-user{border-left-color:var(--accent-cyan);}
.timeline-event-assistant{border-left-color:var(--status-responding);}
.timeline-event-tool{border-left-color:var(--status-tool-running);}
.timeline-event-system{border-left-color:var(--status-ready);}
.timeline-event-warning{border-left-color:var(--status-waiting-approval);}
.timeline-event-error{border-left-color:var(--status-error);}
.timeline-tool-summary{width:100%;text-align:left;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:7px;padding:6px 9px;color:#cbd5e1;font:10px var(--font-mono);cursor:pointer;}
.timeline-tool-summary:hover{border-color:var(--glass-border-hover);}
.timeline-tool-detail{margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.06);}
.timeline-tool-detail pre{white-space:pre-wrap;font:10px var(--font-mono);color:#9fd8e8;max-height:220px;overflow-y:auto;}
.timeline-jump-btn{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:var(--glass-bg-hover);border:1px solid var(--glass-border-hover);border-radius:20px;padding:7px 16px;color:#fff;font:10px var(--font-mono);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.4);}
#lifeos-core-slot .core-reactor-container{position:relative;left:auto;top:auto;transform:none;pointer-events:auto;margin:0;}
.core-coordinate{margin-top:26px;font-size:8px;color:#446a84;}
.semantic-pill{margin-top:18px;padding:8px 15px;border:1px solid #3aa5b666;border-radius:100px;background:#071f2cd9;font:9px var(--font-mono);letter-spacing:1px;color:#70e7f5;}
.top-nav-cluster{flex-wrap:wrap;justify-content:flex-start;gap:6px;}.top-nav-cluster .sleek-pill-btn{font-size:clamp(7.5px, 0.4vw + 6.5px, 9px);padding:clamp(5px, 0.4vw + 4px, 8px) clamp(6px, 0.7vw + 4px, 10px);}
/* Näkyvyyttä ohjaa applyTopBarLayoutin hidden-attribuutti. Live käyttää
   samaa .sleek-pill-btn-tyyliä kuin muutkin painikkeet. */
.bottom-command-center{position:absolute;bottom:32px;left:calc(var(--cockpit-left) + 58px);right:calc(var(--cockpit-right) + 58px);transform:none;width:auto;max-width:none;}
.bottom-command-center.expanded{width:auto;max-width:none;}
.floating-speech-bubble{width:100%;max-width:100%;border-radius:16px;background:rgba(11,24,37,.94);}
#lifeos-telemetry-slot .telemetry-hud{position:static;width:100%;margin-top:27px;padding:15px 0 0;border:0;border-top:1px solid #1d3041;border-radius:0;background:none;box-shadow:none;}
.side-drawer{z-index:40;}.modal-backdrop{z-index:80;}
.dialog-copy-btn{position:absolute;top:9px;right:36px;background:transparent;border:0;color:#7193a7;cursor:pointer;font-size:12px;}
.webapp-dialog{width:min(1100px,94vw);max-width:none;height:85vh;display:flex;flex-direction:column;}
#webapp-frame{flex:1;border:1px solid #203b4d;border-radius:12px;background:#09121e;width:100%;min-height:0;}
.webapp-dialog .modal-header{gap:12px;}#webapp-external{margin-left:auto;font-size:10px;}
#quick-run-form label,[data-panel=lifeos] label,.skill-fields label{display:block;color:#94b1c7;font-size:11px;margin:10px 0;}
#quick-run-form .cfg-input,#quick-run-form .cfg-select,[data-panel=lifeos] .cfg-input,.skill-fields .cfg-input{width:100%;margin-top:7px;}
.skill-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}.skill-fields label:last-child{grid-column:1/-1;}
.drive-candidate{font-size:11px;border:1px solid #25445d;background:#112536;border-radius:10px;padding:12px;margin:10px 0;}
.drive-candidate button{font-size:9px;margin:4px 3px 0 0;}
/* Google Drive -lohko piiloon kun käsittelemättömiä tiedostoja ei ole —
   oma luokka (ei "hidden"-attribuutti) ettei se ole ristiriidassa
   sivupalkin widget-näkyvyysasetuksen (applySidebarWidgetLayout) kanssa,
   joka hallitsee samaa elementtiä .hidden-attribuutin kautta. */
[data-sidebar-widget="drive"].drive-widget-empty{display:none;}
.error{color:var(--accent-danger-soft);font-size:11px;}
.lifeos-loading-text{opacity:.75;font-style:italic;animation:lifeosLoadingPulse 1.6s ease-in-out infinite;}
@keyframes lifeosLoadingPulse{0%,100%{opacity:.45;}50%{opacity:.85;}}
.lifeos-inline-error{color:var(--accent-danger-soft)!important;}
button:disabled{opacity:.55;cursor:wait;}button:active{transform:translateY(1px);}
@media(min-width:1500px){:root{--cockpit-left:285px;--cockpit-right:345px;}.lifeos-panel{padding:19px;}}
@media(max-width:1150px){:root{--cockpit-left:220px;--cockpit-right:275px;--cockpit-gap:9.6px;--cockpit-inset:7.2px;}.lifeos-panel{padding:13px;left:12px;top:12px;bottom:12px;}.lifeos-right{left:auto;right:12px;}.lifeos-clock{font-size:32px;}}
/* Rikkinäinen "kutistettu desktop" -mobiilirakenne (pino kaikki kolme
   saraketta yhdeksi pitkäksi vierivä sivuksi) POISTETTU tästä — korvattu
   tabletti-/puhelinajolla, jossa sivupaneelit ovat off-canvas-drawereita
   yhden aktiivisen näkymän ympärillä (ks. "MOBIILI/TABLETTI-KUORI"
   -osio tämän tiedoston lopussa, ja js/mobile-shell.js). */
@media(max-width:480px){.lifeos-left #quick-runs-grid{grid-template-columns:1fr 1fr;}.vision-btn-wrap{display:none;}.send-icon-btn{padding:8px;}.lifeos-clock{font-size:36px;}.webapp-dialog .modal-header{flex-wrap:wrap;}.top-nav-cluster{gap:4px;}.skill-fields{display:block;}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;}}
.sandbox-line,.sandbox-line-error{position:relative;padding-right:30px;}.terminal-copy-btn{position:absolute;right:2px;top:3px;background:transparent;border:0;font-size:10px;cursor:pointer;color:#7496a9;}

.dialog-turn pre {position:relative;white-space:pre-wrap;background:#08131e;padding:20px 38px 14px 14px;border-radius:12px;} .code-copy {position:absolute;right:6px;top:6px;background:transparent;border:0;color:#94dfff;cursor:pointer;}
.lifeos-settings-list {display:flex;flex-direction:column;gap:8px;margin:10px 0 14px;}
.lifeos-setting-toggle {display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border:1px solid rgba(125,211,252,.12);border-radius:10px;background:rgba(15,23,42,.42);cursor:pointer;}
.lifeos-setting-toggle input {margin-top:3px;accent-color:var(--accent-cyan);}
.lifeos-setting-toggle span {display:flex;flex-direction:column;gap:2px;}
.lifeos-setting-toggle strong {font-size:11px;color:#e2f8ff;font-weight:600;}
.lifeos-setting-toggle small {font-size:9.5px;color:var(--text-muted);line-height:1.35;}
.settings-section-head {display:flex;justify-content:space-between;align-items:center;margin:18px 0 8px;padding-top:14px;border-top:1px solid rgba(255,255,255,.07);}
.settings-actions {display:flex;justify-content:flex-end;margin:10px 0 18px;}
.connector-setting-row {display:flex;flex-direction:column;gap:6px;padding:9px;border:1px solid rgba(125,211,252,.12);border-radius:10px;background:rgba(15,23,42,.46);}
.connector-setting-top {display:grid;grid-template-columns:24px minmax(130px,1fr) minmax(110px,.55fr) 30px;gap:6px;align-items:center;}
.connector-setting-top>input[type=checkbox] {accent-color:var(--accent-cyan);}
.connector-setting-remove {border:0;background:transparent;color:#fda4af;cursor:pointer;font-size:13px;}
/* 23.9.2026: omien AI-avainten editori — kirjoitusvain periaate näkyy
   visuaalisesti (badge kertoo "asetettu" mutta input on aina tyhjä). */
.api-key-row {display:flex;flex-direction:column;gap:6px;padding:9px;margin-bottom:8px;border:1px solid rgba(125,211,252,.12);border-radius:10px;background:rgba(15,23,42,.46);}
.api-key-row-top {display:flex;justify-content:space-between;align-items:center;gap:8px;}
.api-key-row-label {font-size:12.5px;font-weight:600;color:#e2e8f0;}
.api-key-row-badge {font-size:10px;font-family:var(--font-mono);color:var(--text-muted);}
.api-key-row-badge-set {color:#6ee7b7;}
.api-key-row-actions {display:flex;gap:6px;align-items:center;}
.api-key-row-actions input {flex:1;min-width:0;}
/* 26.9.2026: mukautettujen tekoälyjen editori — sama korttityyli kuin
   .api-key-row, kolme kenttää + poistonappi per rivi. */
.custom-ai-provider-row {display:flex;gap:8px;align-items:center;padding:9px;margin-bottom:8px;border:1px solid rgba(125,211,252,.12);border-radius:10px;background:rgba(15,23,42,.46);}
.custom-ai-provider-fields {display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;}
.custom-ai-provider-actions {display:flex;gap:8px;margin-top:4px;}
.guide-cards-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-bottom:8px;}
.guide-card {padding:12px;border:1px solid rgba(125,211,252,.14);border-radius:12px;background:rgba(15,23,42,.46);}
.guide-card-title {margin:0 0 6px;font-size:13px;color:#e2e8f0;}
.guide-card-text {margin:0;font-size:12px;line-height:1.5;color:var(--text-muted);}
.guide-directive-list {display:flex;flex-direction:column;gap:8px;}
.guide-directive-row {padding:10px 11px;border:1px solid rgba(125,211,252,.12);border-radius:10px;background:rgba(15,23,42,.4);}
.guide-directive-head {display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:4px;}
.guide-directive-name {font-family:var(--font-mono);font-size:12.5px;font-weight:700;color:#6ee7b7;}
.guide-directive-title {font-size:12px;color:#e2e8f0;}
.guide-directive-desc {margin:0 0 8px;font-size:11.5px;line-height:1.5;color:var(--text-muted);}
.guide-directive-example {margin:0 0 8px;padding:8px 10px;border-radius:8px;background:rgba(2,6,23,.6);font-family:var(--font-mono);font-size:11.5px;line-height:1.5;color:#cbd5e1;white-space:pre-wrap;word-break:break-word;}
.guide-directive-copy {font-size:11px;padding:5px 10px;}
.topbar-setting-row {display:grid;grid-template-columns:34px 1fr 84px;gap:8px;align-items:center;padding:8px 9px;border:1px solid rgba(125,211,252,.12);border-radius:10px;background:rgba(15,23,42,.46);}
.topbar-setting-row-disabled {opacity:.5;}
.topbar-setting-order {display:flex;flex-direction:column;gap:2px;}
.topbar-order-btn {border:1px solid rgba(125,211,252,.18);background:rgba(2,6,23,.4);color:#bae6fd;border-radius:5px;font-size:8px;line-height:1;padding:2px 4px;cursor:pointer;}
.topbar-order-btn:disabled {opacity:.3;cursor:default;}
.topbar-setting-toggle {display:flex;align-items:center;gap:8px;margin:0;cursor:pointer;}
.topbar-setting-toggle input {accent-color:var(--accent-cyan);}
.topbar-setting-icon {font-size:12px;width:16px;text-align:center;}
.topbar-setting-label {font-size:11px;color:#e2f8ff;}
.topbar-setting-side {font-size:9.5px;}
@media(max-width:650px){.topbar-setting-row{grid-template-columns:30px 1fr 74px}}
.sidebar-widget-row {grid-template-columns:34px 1fr;}
.alert-category-row {padding:9px 10px;margin-bottom:8px;border:1px solid rgba(125,211,252,.14);border-radius:10px;background:rgba(15,23,42,.46);}
.alert-category-row-top {display:flex;align-items:center;gap:8px;}
.alert-category-color {width:28px;height:28px;padding:0;border:1px solid rgba(125,211,252,.2);border-radius:6px;background:none;flex-shrink:0;cursor:pointer;}
.alert-category-row-top .cfg-input {flex:1;min-width:0;}
.alert-category-notify {display:flex;align-items:center;gap:5px;font-size:11px;color:#e2f8ff;white-space:nowrap;cursor:pointer;}
.alert-category-notify input {accent-color:var(--accent-cyan);}
.alert-category-tags {display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06);}
.alert-category-tag {display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--text-muted);cursor:pointer;}
.alert-category-tag input {accent-color:var(--accent-cyan);}
.sidebar-widget-side-label {display:block;margin:12px 0 6px;letter-spacing:1px;color:#7ca6bb;}
.sidebar-widget-side-label:first-child {margin-top:2px;}
.sidebar-width-row {display:flex;gap:16px;flex-wrap:wrap;margin:10px 0;}
.sidebar-width-row label {display:flex;flex-direction:column;gap:5px;font:9px var(--font-mono);letter-spacing:1px;color:#7ca6bb;flex:1;min-width:150px;}
.sidebar-width-row input[type=range] {accent-color:var(--accent-cyan);}
.sidebar-width-value {font:11px var(--font-mono);color:#bae6fd;}
.oauth-diagnostics {margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.07);}
.google-resource-settings {display:grid;gap:8px;margin-top:14px;padding:14px;border:1px solid rgba(56,189,248,.18);border-radius:12px;background:rgba(14,116,144,.06);}
.google-resource-settings[hidden] {display:none;}
.google-resource-settings label {font:9px var(--font-mono);letter-spacing:1px;color:#7ca6bb;margin-top:4px;}
.google-resource-settings button {justify-self:start;margin-top:4px;}
.google-drive-picker-row {display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center;}
.google-drive-browser {display:grid;gap:6px;max-height:220px;overflow:auto;padding:8px;border:1px solid rgba(125,211,252,.14);border-radius:9px;background:rgba(2,6,23,.55);}
.google-drive-browser[hidden] {display:none;}
.google-drive-folder {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;border:1px solid rgba(255,255,255,.06);border-radius:8px;color:#cce7f4;background:rgba(255,255,255,.025);cursor:pointer;}
.google-drive-folder:hover {border-color:rgba(56,189,248,.35);background:rgba(56,189,248,.08);}
.google-drive-folder small {font:8px var(--font-mono);color:#64839a;}
.google-drive-browser-tools,.connector-test-row {display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.connector-test-status {font:9px var(--font-mono);color:#7dd3fc;overflow-wrap:anywhere;}
.oauth-callback-row {display:grid;grid-template-columns:65px minmax(0,1fr) auto;gap:8px;align-items:center;margin-top:7px;}
.oauth-callback-row strong {font-size:10px;color:#bae6fd;}
.oauth-callback-row code {overflow:auto;padding:6px 8px;border-radius:7px;background:#07111d;color:#cbd5e1;font-size:9px;white-space:nowrap;}
@media(max-width:650px){.connector-setting-top{grid-template-columns:24px 1fr 30px}.connector-setting-top select{grid-column:2/3}.oauth-callback-row{grid-template-columns:1fr}.oauth-callback-row strong{margin-top:6px}}

.google-calendar-heading {font:9px var(--font-mono);letter-spacing:1px;color:#7ca6bb;margin-top:5px;}
.google-calendar-mode {display:flex;gap:12px;flex-wrap:wrap;padding:4px 0;}
.google-calendar-mode label,.google-calendar-list label {display:flex;align-items:center;gap:7px;margin:0;color:#cce7f4;font:10px var(--font-mono);letter-spacing:0;}
.google-calendar-mode input,.google-calendar-list input {accent-color:var(--accent-cyan);}
.google-calendar-list {display:grid;gap:6px;padding:9px;border:1px solid rgba(125,211,252,.14);border-radius:9px;background:rgba(2,6,23,.45);max-height:190px;overflow:auto;}
.google-calendar-list[hidden] {display:none;}
.google-calendar-swatch {width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto;background:var(--calendar-color,#38bdf8);box-shadow:0 0 7px color-mix(in srgb,var(--calendar-color,#38bdf8) 55%,transparent);}
.calendar-event-source {color:#7898ab;}

/* Keskitetty JARVIS-core ja sen ympärille tasapainotettu yläpalkki. */
.hud-layer .top-bar{position:absolute;left:calc(var(--cockpit-left) + 58px);right:calc(var(--cockpit-right) + 58px);top:max(6px,env(safe-area-inset-top,0px));height:auto;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;justify-content:center;gap:14px;padding:0 24px;pointer-events:none;}
.hud-layer .top-bar>*,.hud-layer .top-bar .interactive{pointer-events:auto;}
.hud-layer .top-bar .core-reactor-container{grid-column:2;position:relative;left:auto;top:auto;transform:none;justify-self:center;z-index:2;gap:14px;}
.reactor-heading{text-align:left;white-space:nowrap;pointer-events:none;}
.reactor-heading span{display:block;font:9px var(--font-mono);letter-spacing:1.6px;color:#7690a7;}
.reactor-heading small{display:block;font-size:8px;color:#366a80;margin-top:6px;letter-spacing:2px;}
.top-bar-side{min-width:0;display:flex;align-items:flex-start;gap:10px;}
.top-bar-left{position:relative;left:auto;top:auto;transform:none;display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:10;grid-column:1;justify-self:stretch;max-width:100%;overflow:hidden;}
.top-nav-left{justify-content:flex-end;}
.top-nav-right{grid-column:3;justify-self:stretch;display:flex;justify-content:flex-end;align-items:flex-start;gap:8px;}
.top-bar-side .top-nav-cluster{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
@media(max-width:1250px){.hud-layer .top-bar{grid-template-columns:minmax(0,1fr) 164px minmax(0,1fr);padding:0 12px;gap:8px;}.top-bar-side{gap:5px;}.reactor-heading{display:none;}}
/* Yhteinen ruudukko korvaa erilliset pikselisiirtymät: 36px → 21,6px
   (kapealla työpöydällä 16px → 9,6px), yhtä suuri väli molempiin suuntiin.
   Keskustelun kasvaessa keskialue kutistuu eikä jää syöttöpalkin alle. */
@media(min-width:1025px){
  .hud-layer{display:grid;grid-template-columns:var(--cockpit-left) minmax(0,1fr) var(--cockpit-right);grid-template-rows:auto minmax(0,1fr) auto;gap:var(--cockpit-gap);padding:var(--cockpit-inset);}
  .hud-layer>.lifeos-panel{position:relative;inset:auto;width:auto;min-height:0;grid-row:1 / 4;}
  .hud-layer>.lifeos-left{grid-column:1;}
  .hud-layer>.lifeos-right{grid-column:3;}
  .hud-layer>.top-bar{position:relative;inset:auto;grid-column:2;grid-row:1;padding:0;}
  .hud-layer>#center-workspace{position:relative;inset:auto;grid-column:2;grid-row:2;min-height:0;}
  .hud-layer>.bottom-command-center{position:relative;inset:auto;grid-column:2;grid-row:3;width:100%;margin:0;min-width:0;}
}
.top-bar-side .top-nav-cluster,.top-nav-cluster,.top-nav-right{gap:var(--control-gap);}
.bottom-command-center{gap:var(--control-gap);}
#quick-runs-grid,.lifeos-system-summary,.weather-profile-stats,.floating-tools-row{gap:var(--control-gap);}
.lifeos-panel>[data-sidebar-widget]{margin:var(--widget-gap) 0 0!important;}
.lifeos-panel>[data-sidebar-widget]:first-child{margin-top:0!important;}
/* ≤1024px yläpalkin rakenne on kokonaan uusi (kompakti, ei enää flex-column-
   pino) — ks. "MOBIILI/TABLETTI-KUORI" tämän tiedoston lopussa. */

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* Tuntiprofiili (saa.dase.fi) -teeman värit YHDESSÄ paikassa CSS-muuttujina
   (JARVIS_VISUAALINEN_JA_UI_ROADMAP.md: "sääkortin teemat yhteen" — tässä oli
   aiemmin KAKSI päällekkäistä lohkoa, joista jälkimmäinen ylikirjoitti
   ensimmäisen värit rivi riviltä lähdejärjestyksen ansiosta. Teeman vaihto
   tarkoittaa jatkossa näiden muuttujien arvojen muuttamista tässä yhdessä
   kohdassa, ei uutta ylikirjoituskerrosta tiedoston loppuun.) */
:root {
  --weather-bg: #111827;
  --weather-border: #263447;
  --weather-stat-bg: #0d1523;
  --weather-stat-border: #233044;
  --weather-stat-text: #e7edf5;
  --weather-chart-bg: #141c2b;
  --weather-chart-border: #263448;
  --weather-grid: #2b3545;
  --weather-axis-label: #8998ac;
  --weather-temp: #f59e0b;
  --weather-wind: #10b981;
  --weather-gust: #0f766e;
  --weather-gust-alt: #14b8a6;
  --weather-rain: #38bdf8;
  --weather-rain-fill: #0ea5e9;
  --weather-tooltip-bg: #0b1424;
  --weather-tooltip-border: #334866;
  --weather-tooltip-label: #94a3b8;
}
.weather-profile-card{margin:12px 0 4px!important;padding:11px;border:1px solid var(--weather-border);border-radius:12px;background:var(--weather-bg);box-shadow:none;}
.weather-profile-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.weather-profile-head>div{display:grid;gap:3px}.weather-profile-head small{font:7.5px var(--font-mono);color:#708297}.weather-profile-head .section-label{font-size:10px;font-weight:700;color:#f8fafc;letter-spacing:.2px}.weather-head-actions{display:flex;align-items:center;gap:7px}.weather-expand-btn{width:24px;height:24px;border:1px solid rgba(125,211,252,.16);border-radius:7px;background:rgba(56,189,248,.05);color:#7ca9bd;cursor:pointer}.weather-expand-btn:hover{color:#d7f3ff;border-color:#38bdf866;background:#38bdf814}
.weather-profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--control-gap);margin:8px 0}.weather-profile-stats span{display:grid;gap:2px;padding:6px;border:1px solid var(--weather-stat-border);border-radius:7px;font:7px var(--font-mono);color:#58788c;background:var(--weather-stat-bg)}.weather-profile-stats b{font-size:9px;font-weight:600;color:var(--weather-stat-text)}
.weather-chart-wrap{position:relative;width:100%;border:1px solid var(--weather-chart-border);overflow:hidden;background:var(--weather-chart-bg);border-radius:5px;}.weather-profile-chart{display:block;width:100%;height:auto;touch-action:none}.weather-profile-chart .temp-area{fill:url(#tempGradient)}.weather-profile-chart .grid{stroke:var(--weather-grid);stroke-width:.7;opacity:.75}.weather-profile-chart .axis-label{fill:var(--weather-axis-label);font:7.5px var(--font-mono)}.weather-profile-chart .axis-label-temp{fill:var(--weather-temp)}.weather-profile-chart .axis-label-rain{fill:var(--weather-rain)}.weather-profile-chart .temp-line{fill:none;stroke:var(--weather-temp);stroke-width:2.3}.weather-profile-chart .wind-line{fill:none;stroke:var(--weather-wind);stroke-width:2}.weather-profile-chart .gust-line{fill:none;stroke:var(--weather-gust);stroke-width:1.4;stroke-dasharray:none;opacity:.72}.weather-profile-chart .rain-bar{fill:var(--weather-rain-fill);stroke:var(--weather-rain);stroke-width:.45;opacity:.7}.weather-profile-chart .series-point-temp{fill:var(--weather-temp)}.weather-profile-chart .series-point-wind{fill:var(--weather-wind)}.weather-profile-chart .hover-point{fill:#f8fafc;stroke:#334155;stroke-width:1.4}.weather-profile-chart .hover-line{stroke:#64748b;stroke-dasharray:3 2;stroke-width:.8;opacity:.7}.weather-profile-chart .now-line{stroke:#94a3b8;stroke-dasharray:2 2;opacity:.55;stroke-width:1;}
.weather-chart-tooltip{position:absolute;z-index:4;border:1px solid var(--weather-tooltip-border);pointer-events:none;font:8px/1.55 var(--font-mono);color:var(--weather-tooltip-label);min-width:122px;max-width:150px;padding:8px 9px;transform:none;background:var(--weather-tooltip-bg);border-radius:7px;box-shadow:0 10px 28px #000b;font-size:8px}.weather-chart-tooltip strong{display:block;font-size:9px;color:#94a3b8;margin-bottom:3px}.weather-chart-tooltip .temp{color:var(--weather-temp)}.weather-chart-tooltip .wind{color:var(--weather-wind)}.weather-chart-tooltip .gust{color:var(--weather-gust-alt)}.weather-chart-tooltip .rain{color:var(--weather-rain)}
.weather-chart-legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:7px;font:7px var(--font-mono);color:#6c8798}.weather-chart-legend span::before{content:'';display:inline-block;width:7px;height:2px;margin-right:4px;vertical-align:middle;background:currentColor}.weather-chart-legend-head{margin:0;gap:6px;justify-content:flex-end}.weather-chart-legend-head span{font-size:6px}.weather-chart-legend-head span::before{width:5px}.weather-chart-legend .temp{color:var(--weather-temp)}.weather-chart-legend .wind{color:var(--weather-wind)}.weather-chart-legend .gust{color:var(--weather-gust)}.weather-chart-legend .rain{color:var(--weather-rain)}
.weather-profile-dialog{width:min(1120px,94vw);max-width:none;background:var(--weather-bg);}.weather-chart-expanded{height:min(58vh,560px);border-radius:3px;}.weather-chart-expanded .weather-profile-chart{width:100%;height:100%}.weather-modal-stats{grid-template-columns:repeat(3,minmax(110px,180px));justify-content:start}.weather-modal-stats span{padding:9px;font-size:9px}.weather-modal-stats b{font-size:13px}.weather-profile-dialog .weather-chart-legend{justify-content:flex-end}
.weather-profile-empty{fill:#6d8798;font:10px var(--font-mono);text-anchor:middle}
@media(max-width:850px){.weather-profile-card{margin-top:8px!important}.weather-profile-dialog{width:96vw}.weather-chart-expanded{height:50vh}}
@media(max-width:1250px){.weather-chart-legend-head .gust{display:none}.weather-chart-legend-head{gap:4px}}

.lifeos-left-brand{display:flex;align-items:center;gap:9px;width:100%;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;text-align:left;cursor:pointer;color:inherit;}
.lifeos-subsection-label{display:block;margin:11px 0 7px;font:7.5px var(--font-mono);letter-spacing:1.4px;color:#536f83;}
.lifeos-left .stream-mode-switch{display:flex;flex-direction:row;width:100%;gap:4px;padding:4px;margin:0;background:#080f1b;border:1px solid #1a2a3d;border-radius:10px;}
.lifeos-left .stream-mode-btn{flex:1;width:auto;height:auto;min-width:0;justify-content:center;text-align:center;padding:9px 2px;border:0;border-radius:6px;background:none;font-size:13px;}
.lifeos-left .stream-mode-btn.active{border:0;background:#1a3647;color:var(--accent-cyan);}
.lifeos-left .stream-mode-btn[data-mode="braindump"].active{background:rgba(250,204,21,.18);color:#fde68a;}
.lifeos-left .stream-mode-btn[data-mode="research"].active{background:rgba(167,139,250,.18);color:#ddd6fe;}
.stream-caption{min-height:18px;margin:5px 0 3px;font-size:9px;line-height:1.45;}
.lifeos-system-summary{display:grid;gap:var(--control-gap);grid-template-columns:1fr;}
/* 26.9.2026: box-tyyli siirretty .system-summary-row-luokkaan (aiemmin
   .lifeos-system-summary>div, joka olisi vahingossa tyylinnyt myös tähän
   siirretyn .telemetry-row:n) — pysyy identtisenä riippumatta siitä missä
   containerissa rivi kulloinkin fyysisesti sijaitsee (ks. js/telemetry.js:n
   applySystemRowConfig). */
.system-summary-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 9px;border:1px solid rgba(255,255,255,.055);border-radius:8px;background:rgba(255,255,255,.018);}
.system-summary-row span{font:7.5px var(--font-mono);letter-spacing:.8px;color:#607d91;}
.system-summary-row strong{max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 9px var(--font-mono);color:#c9e3ee;text-align:right;}
.lifeos-combo-body{margin-top:10px;}
#global-status-orb{transition:background .2s ease,box-shadow .2s ease,transform .2s ease;}
.proactive-alert-active #global-status-orb{background:#ef4444;box-shadow:0 0 14px #ef4444;animation:globalAlertPulse 1s ease-in-out infinite alternate;}
@keyframes globalAlertPulse{to{transform:scale(1.35);box-shadow:0 0 19px #ef4444}}

#system-readiness.is-ready{color:#6ee7b7;}#system-readiness.is-degraded{color:#fbbf24;}
.system-alert-row{cursor:pointer;transition:border-color .15s ease,background .15s ease;}
.system-alert-row:hover{border-color:rgba(255,255,255,.12);}
.system-alert-row.is-active{border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.09);}
.system-alert-row.is-active strong{color:#fca5a5;}
.system-capability-row{cursor:pointer;transition:border-color .15s ease,background .15s ease;}
.system-capability-row:hover{border-color:rgba(125,211,252,.22);background:rgba(56,189,248,.055);}
.capability-tabs{display:flex;gap:5px;margin:12px 0;padding:4px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(0,0,0,.15);}
.capability-tab{flex:1;border:0;border-radius:7px;padding:8px 6px;background:transparent;color:#7892aa;font:9px var(--font-mono);cursor:pointer;}
.capability-tab.active{background:#183347;color:var(--accent-cyan);}
.capability-list{display:flex;flex-direction:column;gap:8px;}
.capability-card{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.02);}
.capability-card-body{min-width:0;flex:1}.capability-card-body strong{display:block;color:#dcecf5;font-size:11px}.capability-card-body p{margin:4px 0;color:#7690a5;font-size:9.5px;line-height:1.4;}
.capability-meta{font:8px var(--font-mono);color:#547086;}
.core-tool-card{display:grid;grid-template-columns:1fr;align-items:stretch;}
.capability-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.capability-card-head code{color:#7dd3fc;font:10px var(--font-mono);margin-right:auto;}
.core-tool-card textarea{resize:vertical}.core-tool-flags{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 12px}.core-tool-flags .cfg-checkbox-row{margin:0;font-size:9px;}
.connector-dot.connected,.connector-dot.idle{width:auto;height:auto;border-radius:9px;padding:3px 7px;font:7px var(--font-mono);white-space:nowrap}.connector-dot.connected{color:#6ee7b7;background:rgba(52,211,153,.1)}.connector-dot.idle{color:#7892aa;background:rgba(255,255,255,.04)}
.alert-filter-chip{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-muted);padding:4px 10px;border-radius:14px;font:9.5px var(--font-mono);cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:border-color .15s ease,color .15s ease,background .15s ease;}
.alert-filter-chip:hover{border-color:var(--glass-border-hover);color:#fff;}
.alert-filter-chip.is-active{color:#fff;background:rgba(255,255,255,.07);}
.translator-dialog{width:min(760px,94vw);max-width:none}.translator-form{display:grid;gap:13px}.translator-form>label,.translator-languages label{display:grid;gap:6px;font:8px var(--font-mono);letter-spacing:1px;color:#7895a8}.translator-languages{display:grid;grid-template-columns:1fr 34px 1fr;gap:9px;align-items:end}.translator-swap{width:34px;height:34px;border:1px solid rgba(125,211,252,.18);border-radius:9px;background:rgba(56,189,248,.06);color:#8ed9ec;cursor:pointer;font-size:16px}.translator-swap:hover{background:rgba(56,189,248,.14);color:#fff}.translator-actions{display:grid;grid-template-columns:auto 1fr auto;gap:8px}.translator-submit{border-color:rgba(56,189,248,.5);color:#bae6fd}.translator-result{margin-top:16px;padding:14px;border:1px solid rgba(56,189,248,.18);border-radius:12px;background:rgba(5,16,27,.72)}.translator-result[hidden]{display:none}.translator-result-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font:8px var(--font-mono);letter-spacing:1.2px;color:#6e91a5}.translator-result-head>div{display:flex;gap:6px}#translator-output{white-space:pre-wrap;font-size:14px;line-height:1.7;color:#e2f2f8}.translator-dialog.is-working .translator-submit{opacity:.55;cursor:wait}
@media(max-width:600px){.translator-languages{grid-template-columns:1fr 30px 1fr;gap:5px}.translator-dialog{width:96vw}.translator-result-head{align-items:flex-start;flex-direction:column}}

/* Tuntiprofiilin väriteema yhdistetty yhdeksi CSS-muuttujalohkoksi
   (ks. .weather-profile-card ym. tiedoston alkupuolella) — tämä
   päällekkäinen ylikirjoituslohko poistettu 22.9.2026,
   JARVIS_VISUAALINEN_JA_UI_ROADMAP.md. */

/* ============================================================
   MOBIILI/TABLETTI-KUORI (≤1024px tabletti+puhelin, ≤767px vain puhelin)
   ============================================================
   Korvaa aiemman "kutista desktop pienemmäksi" -asettelun, jossa
   .lifeos-left/.lifeos-right pysyivät pysyvästi näkyvissä ja koko sivu
   venyi yhdeksi pitkäksi vierivä pinoksi (ks. commitin selite). Uusi
   rakenne: yksi aktiivinen näkymä .hud-layerin OMASSA flex-column-
   asettelussa (joka on desktopilla olemassa mutta merkityksetön, koska
   lapset ovat siellä position:absolute) — sivupaneelit siirtyvät pois
   tästä virtauksesta off-canvas-drawereiksi (position:fixed), samaan
   visuaaliseen kieleen kuin olemassa olevat .side-drawer-elementit.
   Tilanhallinta: ks. js/mobile-shell.js.
   Yli 1024px leveydellä mikään tässä osiossa ei vaikuta mihinkään —
   kaikki säännöt ovat @media(max-width:1024px) tai kapeamman sisällä. */
:root{
  --mobile-gutter:8.4px;
  --mobile-topbar-height:52px;
  --mobile-nav-height:60px;
  --mobile-panel-width:min(92vw,420px);
}

/* Puhelin/tabletti-vartijat: piilossa oletuksena, paljastuvat vasta
   asianomaisessa breakpointissa alla. */
.mobile-panel-toggle{display:none;width:36px;height:36px;flex:0 0 auto;align-items:center;justify-content:center;border-radius:10px;background:var(--glass-bg);border:1px solid var(--glass-border);color:#cfe6f2;font-size:15px;cursor:pointer;}
.mobile-panel-toggle:hover{border-color:var(--glass-border-hover);}
.mobile-panel-backdrop{display:none;position:fixed;inset:0;background:rgba(3,7,14,.62);z-index:39;}

/* Sivupalkkien näytä/piilota-napit (2026-09-22, mobiilikäyttöön laajennettu
   2026-09-22) — työpöydällä ◨/◧ piilottavat/palauttavat paneelin itsenäisesti
   (tila localStorageen, ks. js/app.js:n initDesktopSidebarToggles/
   toggleDesktopSidebar). Mobiililla (≤1024px) SAMAT napit toimivat sen sijaan
   olemassa olevan yhden-kerrallaan-vetolaatikkokoneiston kautta (ks.
   js/mobile-shell.js:n openPanelDrawer/closeAllPanelDrawers) — sama
   toggleDesktopSidebar(side) tunnistaa kummassa tilassa ollaan.
   .desktop-panel-toggle-nimi säilytetty (ei uudelleennimetty laajemmin
   sopivaksi) yksinkertaisuuden vuoksi, vaikka nyt näkyy myös mobiilissa. */
.desktop-panel-toggle{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 auto;}
.desktop-panel-toggle.panel-is-visible{color:var(--accent-cyan);border-color:var(--accent-cyan);}

/* 23.9.2026: itsekoodauksen (Self-Patch) pikakytkin — vihreä hehku kun
   sallittu, himmeä/harmaa kun estetty. Tarkoituksella EI samaa syaania kuin
   .desktop-panel-toggle (nuo ovat pelkkiä näkyvyyskytkimiä, tämä on
   turvallisuusmerkityksellinen päällä/pois-tila, ansaitsee oman selkeän
   värikoodinsa). */
.self-patch-toggle{opacity:.55;}
.self-patch-toggle.self-patch-toggle-active{opacity:1;color:#6ee7b7;border-color:rgba(52,211,153,.5);background:rgba(52,211,153,.12);box-shadow:0 0 10px rgba(52,211,153,.25);}
@media(min-width:1025px){
  .lifeos-left,.lifeos-right{transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s ease;}
  .lifeos-left.sidebar-user-hidden{transform:translateX(-32px);opacity:0;pointer-events:none;}
  .lifeos-right.sidebar-user-hidden{transform:translateX(32px);opacity:0;pointer-events:none;}
}
.mobile-panel-backdrop[hidden]{display:none!important;}
.mobile-bottom-nav{display:none;}
.more-sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.more-sheet-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);color:#cfe0ea;font:9.5px var(--font-mono);cursor:pointer;min-height:44px;}
.more-sheet-item span{font-size:17px;}
.more-sheet-item:hover{border-color:var(--glass-border-hover);background:rgba(255,255,255,.06);}

@media(max-width:1024px){
  html,body{overflow-x:hidden;max-width:100%;}
  body.drawer-scroll-lock{overflow:hidden;}
  /* Pelkkä overflow-x:hidden EI riitä (ks. speksin oma varoitus samasta
     asiasta): translateX:llä piiloon siirretty position:fixed-drawer
     kasvattaa silti document.documentElement.scrollWidthia, koska
     transformoidun laatikon "ink overflow" lasketaan mukaan juuren
     vieritysalueeseen vaikka mitään ei näy eikä voi vierittää. Todellinen
     korjaus: contain:layout tekee bodystä position:fixed/absolute-lasten
     containing blockin JA rajaa niiden overflown siihen — scrollWidth
     täsmää enää oikeasti innerWidthiin. body:ssä ei ole paddingia/reunusta
     eikä se poikkea todellisesta viewportista, joten mikään ei visuaalisesti
     siirry (toisin kuin jos tämä laitettaisiin paddauttuun .hud-layeriin). */
  body{contain:layout;}

  /* .hud-layerin flex-column on jo olemassa (desktop-perussääntö) — täällä
     vain otetaan se käyttöön: lapset palaavat virtaukseen (paitsi
     sivupaneelit, jotka siirtyvät draweriksi alla), ja keskialue saa loput
     tilasta. min-height:0 flex-itemille on VÄLTTÄMÄTÖN, muuten flex-lapsi
     ei koskaan kutistu sisältöään pienemmäksi ja aiheuttaa pystyylivuotoa. */
  .hud-layer{justify-content:flex-start;gap:var(--mobile-gutter);padding:calc(var(--mobile-gutter) + env(safe-area-inset-top,0px)) calc(var(--mobile-gutter) + env(safe-area-inset-right,0px)) calc(var(--mobile-nav-height) + var(--mobile-gutter) + env(safe-area-inset-bottom,0px)) calc(var(--mobile-gutter) + env(safe-area-inset-left,0px));}
  .hud-layer,.hud-layer *{min-width:0;}

  /* Yläpalkki: kompakti, kiinteä korkeus, ei enää flex-column-pino. */
  .hud-layer .top-bar{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;width:100%;flex:0 0 auto;order:0;display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:center;gap:var(--mobile-gutter);padding:0;min-height:var(--mobile-topbar-height);}
  .hud-layer .top-bar .core-reactor-container{grid-column:2;justify-self:center;gap:0;}
  .top-bar-left{grid-column:1;justify-self:start;justify-content:flex-start;gap:8px;}
  .top-nav-right{grid-column:3;justify-self:end;justify-content:flex-end;}
  .reactor-heading{display:none;}
  /* Asetukset ohjaavat molempien puolien painikkeita myös mobiilissa.
     Koko vasemman ryhmän piilotus hävitti sinne asetuksissa siirretyn Liven.
     Painikkeet rivittyvät; hidden-attribuutti hallitsee niiden näkyvyyttä. */
  .hud-layer .top-bar .top-nav-left{display:flex;}
  .hud-layer .top-bar-left{flex-direction:column;align-items:flex-start;overflow:visible;gap:var(--control-gap);}
  .brand-pill{padding:6px 9px;}
  .mobile-panel-toggle{display:inline-flex;}
  /* 64px keskisarake ei riitä bränditekstille (ks. .hud-layer .top-bar
     grid-template-columns yllä) — piilotetaan se ja jätetään vain tila-
     pisteet mikrofonin klikkauskohteeksi kompaktina pallona. */
  .hud-layer .top-bar .reactor-status-pill{padding:7px;gap:4px;border-radius:50%;justify-content:center;}
  .hud-layer .top-bar .reactor-brand-text{display:none;}
  .mobile-stop-btn{display:flex;width:22px;height:22px;font-size:9px;}
  /* 26.9.2026 (käyttäjän raportti: "puhelimella jarvis bugittaa tosi
     pahasti") — kapealla näytöllä (esim. Galaxy Foldin kansinäyttö) NÄMÄ
     yläpalkin painikkeet (Suodatus/Arkisto/Kyvyt/Tallenna/Live/Tulkki/Paja/
     Asetukset + ◨/◧-paneelikytkimet) rivittyivät päällekkäin reaktoripillerin
     kanssa sotkuiseksi, osin luettavaksi massaksi. KAIKKI näistä ovat jo
     tavoitettavissa mobiilin "Lisää"-arkista (ks. index.html:n #more-sheet)
     TAI alanavigaatiosta — ei toiminnallisuuden menetystä. Kohdistus
     data-topbar-btn-attribuutilla EIKÄ .top-nav-left/-right-säiliöllä, koska
     painikkeet ovat käyttäjän uudelleenjärjesteltävissä puolelta toiselle
     (ks. yllä oleva vanha kommentti "koko vasemman ryhmän piilotus hävitti
     Liven" — sama virhe ei saa toistua). "Itsekoodaus" JÄTETTY NÄKYVIIN
     tarkoituksella — sillä ei ole mitään muuta reittiä mobiilissa (ei Lisää-
     arkissa), ks. 24.9.2026: "aina näkyvä #self-patch-toggle-btn samalla
     periaatteella kuin toggle-left/right-panel-btn". */
  .hud-layer .top-bar [data-topbar-btn="filter"],
  .hud-layer .top-bar [data-topbar-btn="files"],
  .hud-layer .top-bar [data-topbar-btn="skills"],
  .hud-layer .top-bar [data-topbar-btn="upload"],
  .hud-layer .top-bar [data-topbar-btn="live"],
  .hud-layer .top-bar [data-topbar-btn="translator"],
  .hud-layer .top-bar [data-topbar-btn="sandbox"],
  .hud-layer .top-bar [data-topbar-btn="settings"],
  .hud-layer .top-bar .desktop-panel-toggle{display:none!important;}
  /* Telakointinapit (🗗/📌/⬇, ks. js/reactor.js:n buildConversationControls)
     eivät tee mobiilissa MITÄÄN — js/mobile-shell.js:n placeConversationPanel
     pakottaa kuplan aina kelluvaksi alapalkiksi riippumatta tallennetusta
     tilasta. Näyttäminen olisi pelkkää hämmentävää, toiminnotonta klutteria;
     fontti-/työkalusuodatinnapit (A-/A+/⚙) PYSYVÄT, ne toimivat mobiilissakin. */
  .conversation-dock-switch{display:none;}

  /* Keskialue täyttää kaiken vapaan tilan yläpalkin ja syöttöpalkin välissä
     — EI enää kiinteää 310px-korkeutta, joka jätti valtavan tyhjän alueen
     galaksin (aina koko näytön taustalla olevan #webgl-canvasin) alle kun
     loput paneelit jatkuivat sen perässä pitkänä pinona. */
  #center-workspace.lifeos-center{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;flex:1 1 auto;order:1;min-height:0;}

  /* Syöttöpalkki: oma kiinteä korkuinen rivi, ei enää absoluuttisesti
     ruudun keskellä leijuva elementti cockpit-muuttujien varassa. */
  .bottom-command-center,.bottom-command-center.expanded{position:relative;inset:auto;left:auto;right:auto;bottom:auto;top:auto;width:100%;max-width:none;flex:0 0 auto;order:2;margin:0;}
  .mobile-bottom-nav{order:3;}
  .capsule-input{min-width:0;font-size:13px;}
  .input-capsule{width:100%;}
  .mic-icon-btn{width:40px;height:40px;}
  .mute-toggle-btn{padding:8px 9px;}
  .send-icon-btn{padding:9px 16px;font-size:12px;}

  /* Sivupaneelit (SYSTEM/Modes, Battlestation) -> off-canvas-drawerit.
     Sama .side-drawer-visuaali kuin muualla, mutta koko korkuisina ja
     kapeampana (leveys speksin mukaan enintään min(92vw,420px)). */
  .lifeos-left,.lifeos-right{position:fixed;top:0;bottom:0;left:auto;right:auto;height:100dvh;width:var(--mobile-panel-width);max-width:var(--mobile-panel-width);border-radius:0;z-index:40;padding:calc(20px + env(safe-area-inset-top,0px)) 18px calc(20px + env(safe-area-inset-bottom,0px)) 18px;transition:transform .32s cubic-bezier(.16,1,.3,1);}
  .lifeos-left{left:0;padding-top:calc(20px + env(safe-area-inset-top,0px));transform:translateX(-100%);}
  .lifeos-right{right:0;transform:translateX(100%);}
  .lifeos-left.open,.lifeos-right.open{transform:translateX(0);}

  /* Muut olemassa olevat drawerit (Arkisto/Kyvyt/Solmu/Muisti/Lisää)
     samaan yhtenäiseen leveyteen ja koko korkeuteen. */
  .side-drawer{top:0;bottom:0;height:100dvh;width:var(--mobile-panel-width);max-width:var(--mobile-panel-width);border-radius:0;}
  .drawer-left{left:0;transform:translateX(-100%);}
  .drawer-right{right:0;transform:translateX(100%);}
  .side-drawer.open{transform:translateX(0);opacity:1;}
  .memory-drawer{max-width:var(--mobile-panel-width);padding-left:18px;}
  .memory-drawer-handle{display:none;}
  .memory-toggle-tab{display:none;}

  /* Kelluva telemetria-HUD toistaisi SYSTEM-paneelin tiedot omana
     kelluvana kerroksenaan — ristiriidassa "yksi aktiivinen näkymä
     kerrallaan" -periaatteen kanssa, joten piilotetaan. */
  #telemetry-hud{display:none;}

  .mobile-panel-backdrop:not([hidden]){display:block;}
}

/* Erittäin kapeat puhelimet — hieman tiiviimpi väli ja pienempi tilapilleri. */
/* Tekstisisältö on valittavissa ja kopioitavissa ilman laajoja
   !important-ylikirjoituksia, jotka tekisivät myös ohjaimista valittavia. */
.floating-speech-text,
.preview-content-box,
.sandbox-terminal,
.dialog-turn,
.timeline-event-text,
#edit-modal-textarea,
#skill-proposal-textarea,
#translator-output,
.task-hud-text,
pre,
code {
  user-select: text;
  -webkit-user-select: text;
}

/* --- LEIJUVIEN IKKUNOIDEN HALLINTA (Floating Window Manager) --- */
#floating-windows-layer{position:fixed;inset:0;z-index:45;pointer-events:none;}
/* Koonmuutos hoidetaan JS:n tartuntakahvalla (.floating-window-resize-grip,
   ks. js/window-manager.js:n attachResizeGrip) — natiivi resize:both
   poistettu: se ei toiminut kosketuksella, ei aina sallinut pienentämistä
   alkuperäistä kokoa pienemmäksi ja menetti otteen iframen päällä. */
.floating-window{position:absolute;display:flex;flex-direction:column;min-width:220px;min-height:120px;max-width:92vw;max-height:88vh;background:rgba(15,23,42,.88);border:1px solid rgba(56,189,248,.22);border-radius:16px;backdrop-filter:blur(24px);box-shadow:0 25px 60px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.2);pointer-events:auto;overflow:hidden;}
/* Reunaankiinnityksen esikatseluylay (JARVIS_VISUAALINEN_JA_UI_ROADMAP.md:
   "Ikkunoiden kiinnitys") — näyttää mihin ikkuna asettuisi ennen pudotusta. */
.floating-window-snap-preview{position:fixed;top:8px;bottom:8px;width:calc(50% - 12px);background:rgba(56,189,248,.14);border:2px dashed rgba(56,189,248,.55);border-radius:12px;z-index:9999;pointer-events:none;transition:left .08s ease;}
/* Yhteinen tartuntakahva: iso (22px) osuma-alue myös kosketukselle,
   näkyvä kahden viivan kolmio oikeassa alakulmassa. */
.floating-window-resize-grip,.speech-bubble-resize-grip{position:absolute;width:22px;height:22px;z-index:3;touch-action:none;transition:opacity .15s ease;background-image:linear-gradient(135deg,transparent 0 45%,rgba(125,211,252,.75) 45% 55%,transparent 55% 68%,rgba(125,211,252,.75) 68% 78%,transparent 78% 100%);}
.floating-window-resize-grip{right:2px;bottom:2px;cursor:nwse-resize;border-bottom-right-radius:14px;opacity:.55;}
.floating-window-resize-grip:hover,.floating-window-resize-grip:focus-visible,.speech-bubble-resize-grip:hover,.speech-bubble-resize-grip:focus-visible{opacity:1;outline:none;}
.floating-window.minimized .floating-window-resize-grip{display:none;}
/* Puhekuplan kahva oikeassa YLÄkulmassa (kupla kasvaa ylöspäin). Roadmap-
   pyyntö: kahva näkyviin VASTA kun hiiri on kuplan päällä, ettei se häiritse
   lukemista — oletuksena piilossa (opacity:0), tulee esiin koko kuplan
   hoverilla (ei vain itse kahvan, jotta sen löytää ilman tarkkaa osumaa). */
.speech-bubble-resize-grip{top:2px;right:2px;cursor:nesw-resize;transform:scaleY(-1);border-top-right-radius:14px;opacity:0;}
.floating-speech-bubble:hover .speech-bubble-resize-grip,.floating-speech-bubble:focus-within .speech-bubble-resize-grip{opacity:.55;}
.floating-speech-bubble.user-sized{height:var(--bubble-h);max-height:none;max-width:100%;align-self:center;}
.floating-speech-bubble.user-sized .floating-speech-text{max-height:none;align-self:stretch;flex:1;min-height:0;}
/* Käsin mitoitetussa kuplassa runko venytetään kuplan korkeuteen, jotta
   pitkä keskustelu vierittyy #vocal-outputin sisällä eikä leikkaudu kuplan
   overflow:hiddeniin (ilman tätä runko kasvoi sisällön mittaiseksi eikä
   vierityspalkkia syntynyt). */
.floating-speech-bubble.user-sized .floating-speech-body{align-self:stretch;}
/* Telakoituna (ks. .docked yllä) mobiilissa käsin venytetty korkeus
   (--bubble-h, tallennettu localStorage/palvelinasetuksiin) ei saa vuotaa
   työpöydän sivupaneeliin - resize-kahva on joka tapauksessa piilotettu
   telakoituna, joten .user-sized ei voi enää syntyä uudelleen siellä. */
.floating-speech-bubble.docked.user-sized{height:auto;}
/* Vedon aikana iframet eivät saa kaapata osoitinta. */
body.jarvis-resizing iframe{pointer-events:none;}
body.jarvis-resizing{user-select:none;-webkit-user-select:none;}
.floating-window:focus-within,.floating-window.floating-window-active{border-color:rgba(125,211,252,.5);box-shadow:0 25px 70px rgba(0,0,0,.6),0 0 24px rgba(56,189,248,.18);}
.floating-window-header{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 14px;background:rgba(8,14,26,.6);border-bottom:1px solid rgba(125,211,252,.14);cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;}
.floating-window-header:active{cursor:grabbing;}
.floating-window-pulse{width:7px;height:7px;border-radius:50%;background:var(--accent-cyan);box-shadow:0 0 8px var(--accent-cyan);flex:0 0 auto;animation:floatingWindowPulse 2s ease-in-out infinite;}
@keyframes floatingWindowPulse{0%,100%{opacity:.5;}50%{opacity:1;}}
.floating-window-title{flex:1;min-width:0;font:600 10.5px var(--font-mono);letter-spacing:.8px;color:#d7ecfb;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.floating-window-controls{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.floating-window-btn{width:22px;height:22px;border-radius:7px;border:1px solid rgba(148,163,184,.2);background:rgba(255,255,255,.04);color:#9db2c2;font-size:12px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.floating-window-btn:hover{color:#e2f4ff;border-color:rgba(125,211,252,.4);background:rgba(56,189,248,.1);}
/* Perii .floating-window-btn:n display:flexin ja keskityksen - teksti on
   omassa spanissaan, joten ellipsi toimii ja teksti ei leikkaudu keskeltä. */
.floating-window-external{width:auto;max-width:none;min-width:0;min-height:28px;padding:0 8px;justify-content:flex-start;color:#bae6fd;font:600 10px var(--font-mono);white-space:nowrap;text-decoration:none;overflow:hidden;}
.floating-window-external-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.floating-window-external:focus-visible,.floating-window-web-link:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:2px;}
.floating-window-close:hover{color:#fca5a5;border-color:rgba(248,113,113,.4);background:rgba(239,68,68,.12);}
.floating-window-body{flex:1;min-height:0;overflow:auto;padding:14px;color:#cfe3ef;font-size:12px;}
.floating-window-iframe{width:100%;height:100%;min-height:180px;border:0;border-radius:8px;background:#0a1420;display:block;}
.floating-window-error{color:var(--accent-danger-soft);font-size:11px;}
.floating-window-body-web{display:flex;flex-direction:column;gap:10px;}
.floating-window-body-web .floating-window-iframe{flex:1;min-height:180px;}
.floating-window-body-web.is-checking,.floating-window-body-web.is-fallback{justify-content:center;align-items:center;text-align:center;}
.floating-window-web-status{margin:0;max-width:48ch;line-height:1.5;overflow-wrap:anywhere;}
.floating-window-web-hint{margin:0;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:11px;}
.floating-window-web-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:11.5px;border-color:var(--accent-cyan);color:#bae6fd;}
.floating-window.minimized{height:auto!important;min-height:0;}
.floating-window.minimized .floating-window-body{display:none;}
@media(max-width:1024px){
  .hud-layer{z-index:80;}
  .floating-window-body-web{padding:8px;}
  .floating-window-web-link{min-height:40px;white-space:normal;}
}
@media(max-width:760px){
  #floating-windows-layer{z-index:60;bottom:var(--mobile-nav-height);}
  .floating-window{left:8px!important;right:8px;width:auto!important;max-width:calc(100vw - 16px);min-width:0;max-height:calc(var(--visual-viewport-height, 100dvh) - var(--mobile-nav-height) - 16px);}
}
@media(max-width:480px){
  /* Kosketuskoko vain ikkunan omille −/×/↗-napeille; keskustelun
     työkalupalkin kuusi nappia (.conversation-header-controls) eivät
     mahtuisi 36px:n kokoisina kapeaan otsikkopalkkiin. */
  .floating-window-controls>.floating-window-btn{width:36px;height:36px;}
  .floating-window-external{width:36px;min-height:36px;padding:0;font-size:0;justify-content:center;}
  .floating-window-external-label{display:none;}
  .floating-window-external::before{content:'↗';font-size:16px;}
}

/* --- Leijuva keskittymiskello (Focus Timer) --- */
.focus-timer-window{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;}
.focus-timer-status{font:700 9px var(--font-mono);letter-spacing:1.6px;color:var(--accent-cyan);padding:3px 10px;border:1px solid rgba(56,189,248,.3);border-radius:20px;background:rgba(56,189,248,.08);}
.focus-timer-status.focus-timer-status-break{color:var(--accent-amber);border-color:rgba(252,211,77,.35);background:rgba(252,211,77,.08);}
.focus-timer-display{font:700 40px var(--font-mono);letter-spacing:1px;color:#f8fafc;text-shadow:0 0 20px rgba(56,189,248,.35);}
.focus-timer-controls{display:flex;gap:8px;}
.focus-timer-presets{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.focus-preset-btn{font:9px var(--font-mono);padding:6px 10px;border-radius:10px;border:1px solid rgba(148,163,184,.2);background:rgba(255,255,255,.03);color:#9db2c2;cursor:pointer;}
.focus-preset-btn:hover{border-color:rgba(125,211,252,.4);color:#e2f4ff;}
body.focus-mode-active .hud-layer{box-shadow:inset 0 0 0 2px rgba(56,189,248,.14);}

/* --- Leijuva päivän tehtävälista (Task HUD) --- */
.task-hud-window{display:flex;flex-direction:column;gap:8px;height:100%;}
.task-hud-counter{align-self:flex-end;font:9px var(--font-mono);color:#7ca9bd;letter-spacing:.6px;}
.task-hud-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:5px;}
.task-hud-row{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid rgba(148,163,184,.12);border-radius:9px;background:rgba(255,255,255,.02);}
.task-hud-row input[type="checkbox"]{accent-color:var(--accent-cyan);flex:0 0 auto;}
.task-hud-text{flex:1;min-width:0;font-size:11.5px;color:#d7ecfb;overflow-wrap:break-word;}
.task-hud-row-done .task-hud-text{text-decoration:line-through;color:#5c7387;}
.task-hud-delete{flex:0 0 auto;background:transparent;border:0;color:#7193a7;cursor:pointer;font-size:11px;}
.task-hud-delete:hover{color:#fca5a5;}
.task-hud-input-row{display:flex;gap:6px;flex:0 0 auto;}
.task-hud-input{flex:1;min-width:0;}
.task-hud-add-btn{flex:0 0 auto;width:30px;height:30px;border-radius:8px;border:1px solid rgba(56,189,248,.3);background:rgba(56,189,248,.1);color:#bae6fd;font-size:15px;cursor:pointer;}
.task-hud-add-btn:hover{background:rgba(56,189,248,.18);}

.floating-tools-row{display:flex;gap:var(--control-gap);flex-wrap:wrap;}

/* Käyttäjän pyyntö (2026-09-22): fontti yhtenäiseksi muun käyttöliittymän
   kanssa — natiivi <select> ei aina peri font-familyä ympäröivältä
   elementiltä selaimesta riippuen, joten se on asetettava eksplisiittisesti
   sekä labeliin että itse selectiin/sen optioihin. */
.weather-date-label { display:flex; align-items:center; gap:8px; color:var(--text-muted); font: 11px var(--font-mono); margin:5px 0; }
.weather-date-label select { color:var(--text-primary,#e2e8f0); background:#13202b; border:1px solid #334155; border-radius:6px; padding:3px 7px; font-family:inherit; }
.weather-date-label select option { font-family:inherit; }
/* Ennustepäivän valitsin siirrettiin 2026-09-22 omalta rivikseen yläpalkin
   toimintoryhmään (Suurenna-painikkeen viereen) kompaktimpana pillerinä —
   selkeämpi paikka usein käytetylle säätimelle kuin oma irrallinen rivi. */
.weather-head-actions .weather-date-label { gap:5px; font-size:9px; margin:0; }
.weather-head-actions .weather-date-label select { padding:2px 5px; border-radius:5px; font-size:9px; }
#weather-modal-warnings { max-height:120px; overflow:auto; }
#weather-modal-warnings p { margin:6px 0; }
.weather-profile-dialog { max-height:92dvh; overflow-y:auto; }
.weather-profile-dialog .modal-header small { display:block; margin-top:4px; }
.weather-chart-expanded .axis-label { font-size:12px; }
.weather-chart-expanded .weather-chart-tooltip { font-size:11px; }

/* Settings: one readable navigation, with independent content scrolling. */
#settings-modal { position:fixed; }
#settings-modal .modal-dialog { max-width:1040px; width:calc(100vw - 48px); height:min(820px, 92dvh); display:flex; flex-direction:column; padding:24px; }
#settings-modal .modal-header { flex-shrink:0; align-items:flex-start; margin-bottom:20px; }
#settings-modal .modal-title { font:600 24px var(--font-ui, sans-serif); letter-spacing:-.4px; }
.settings-intro { color:var(--text-muted); font-size:13px; margin:6px 0 0; }
#settings-modal .settings-layout { flex:1; min-height:0; gap:28px; }
.settings-sidebar { flex:0 0 230px; overflow-y:auto; padding-right:16px; border-right:1px solid rgba(255,255,255,.09); }
.settings-search-label { display:block; font-size:12px; color:#cbd5e1; margin-bottom:8px; }
.settings-search-wrap { position:relative; margin-bottom:20px; }
#settings-search { font-size:12px; padding-right:30px; width:100%; box-sizing:border-box; }
#settings-search-clear { position:absolute; right:4px; top:3px; bottom:3px; border:0; background:transparent; color:#cbd5e1; cursor:pointer; }
#settings-modal .settings-tabs { width:auto; padding:0; border:0; gap:20px; mask-image:none; }
.settings-nav-group { display:flex; flex-direction:column; gap:3px; }
.settings-nav-label { font-size:10px; letter-spacing:1px; text-transform:uppercase; color:#94a3b8; padding:0 10px; margin-bottom:5px; }
#settings-modal .settings-tab { font:13px var(--font-ui, sans-serif); padding:11px 10px; white-space:normal; line-height:1.3; border:1px solid transparent; }
#settings-modal .settings-tab.active { border-color:rgba(56,189,248,.3); background:rgba(56,189,248,.12); color:#e0f2fe; }
#settings-modal [hidden] { display:none !important; }
#settings-modal .settings-panels { max-height:none; padding:0 12px 20px 0; overscroll-behavior:contain; }
.settings-panel-heading { margin-bottom:24px; }
.settings-panel-heading h2 { font-size:21px; color:#f1f5f9; margin:0 0 8px; letter-spacing:-.3px; }
.settings-panel-heading > p { font-size:13px; line-height:1.6; color:#aebed0; margin:0; }
.settings-panel-heading .settings-save-hint { margin-top:14px; padding:10px 12px; font-size:12px; color:#b8d8e9; background:rgba(56,189,248,.06); border-left:2px solid #387c9e; border-radius:0 6px 6px 0; }
#settings-modal .settings-panel h3 { font-size:15px; margin:24px 0 12px; color:#e2e8f0; }
#settings-modal .cfg-group { gap:8px; margin-bottom:20px; }
#settings-modal .cfg-group > label, #settings-modal .section-label { font-size:11px; letter-spacing:.6px; line-height:1.5; }
#settings-modal .cfg-input, #settings-modal .cfg-select { min-height:38px; font-size:13px; }
#settings-modal .panel-hint { font-size:12px; line-height:1.6; }
#settings-modal .cfg-checkbox-row { padding:10px 0; align-items:flex-start; }
#settings-modal .cfg-checkbox-row label { font-size:13px; line-height:1.5; }
#settings-modal input[type=checkbox] { min-width:16px; height:16px; margin-top:2px; accent-color:#38bdf8; }
#settings-modal .sleek-pill-btn { min-height:34px; white-space:normal; }
#settings-modal .modal-footer { flex-shrink:0; margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); }
#settings-modal :focus-visible { outline:2px solid #7dd3fc; outline-offset:3px; }
#settings-modal summary { cursor:pointer; color:#b8d8e9; font-size:13px; padding:12px 0; }
#settings-modal .oauth-diagnostics { margin-top:24px; }
#settings-search-empty { font-size:13px; line-height:1.6; color:#cbd5e1; }
@media(max-width:700px) {
  #settings-modal .modal-dialog { width:calc(100vw - 16px); height:calc(100dvh - 24px); max-height:none; padding:16px; border-radius:14px; box-sizing:border-box; }
  #settings-modal .modal-header { margin-bottom:14px; }
  #settings-modal .settings-layout { flex-direction:column; gap:16px; }
  .settings-sidebar { flex:0 0 auto; width:100%; border-right:0; border-bottom:1px solid rgba(255,255,255,.09); padding:0 0 12px; overflow:visible; }
  .settings-search-label { font-size:11px; margin-bottom:5px; }
  .settings-search-wrap { margin-bottom:10px; }
  #settings-modal .settings-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; max-height:132px; overflow-y:auto; }
  .settings-nav-group { display:contents; }
  .settings-nav-label { display:none; }
  #settings-modal .settings-tab { padding:9px; font-size:12px; min-height:36px; background:rgba(255,255,255,.025); }
  #settings-modal .settings-panels { flex:1; min-height:0; padding-right:4px; }
  .settings-panel-heading h2 { font-size:19px; }
  #settings-modal .cfg-input, #settings-modal .cfg-select { font-size:16px; max-width:100%; min-width:0; }
  #settings-modal .sidebar-width-row { flex-direction:column; }
  #settings-modal .modal-footer { margin-top:8px; padding-top:8px; }
}
#settings-modal .lifeos-setting-toggle { display:flex; align-items:flex-start; gap:10px; padding:12px; }
#settings-modal .lifeos-setting-toggle strong { font-size:13px; line-height:1.5; }
#settings-modal .lifeos-setting-toggle small { font-size:12px; line-height:1.5; }
#settings-modal .lifeos-setting-toggle input { flex:0 0 16px; width:16px; }
#settings-modal .settings-search-wrap input { font-family:inherit; }
#settings-modal .modal-title { text-transform:none; }
#settings-modal:not(.open) { visibility:hidden; }
#settings-modal .settings-panel { overflow-wrap:anywhere; }
/* Mobile/Fold conversation shell. Keep the existing DOM nodes and controls,
   but place the live response and reactor in the primary workspace. */
@media (max-width:1024px) {
  :root { --mobile-panel-width:min(92vw,420px); }
  html, body { min-height:100%; }
  body.mobile-panels-as-drawers .hud-layer {
    box-sizing:border-box;
    height:100vh;
    height:var(--visual-viewport-height,100dvh);
    min-height:0;
    overflow:hidden;
    padding-top:calc(var(--mobile-gutter) + env(safe-area-inset-top,0px));
    padding-bottom:calc(var(--mobile-gutter) + env(safe-area-inset-bottom,0px));
  }
  body.mobile-panels-as-drawers .top-bar {
    flex:0 0 var(--mobile-topbar-height);
    min-height:var(--mobile-topbar-height);
    grid-template-columns:minmax(38px,1fr) minmax(132px,auto) minmax(38px,1fr);
    gap:6px;
  }
  body.mobile-panels-as-drawers .top-bar .core-reactor-container {
    grid-column:2;
    width:auto;
    max-width:100%;
    min-height:42px;
    padding:0 9px;
    border:1px solid rgba(56,189,248,.28);
    border-radius:14px;
    background:rgba(7,18,30,.78);
    box-shadow:0 0 22px rgba(56,189,248,.09);
  }
  body.mobile-panels-as-drawers .reactor-status-pill { border-radius:10px!important; padding:5px 8px!important; }
  body.mobile-panels-as-drawers .reactor-brand-text { display:flex!important; }
  body.mobile-panels-as-drawers .brand-name { display:block; font-size:10px; white-space:nowrap; }
  body.mobile-panels-as-drawers .brand-mode,
  body.mobile-panels-as-drawers .reactor-pill-meter-track { display:none!important; }
  body.mobile-panels-as-drawers #center-workspace.lifeos-center {
    flex:1 1 0;
    width:100%;
    min-height:0;
    overflow:hidden;
    border:1px solid rgba(148,180,204,.12);
    border-radius:20px;
    background:linear-gradient(160deg,rgba(9,18,30,.66),rgba(5,9,17,.52));
  }
  body.mobile-panels-as-drawers #pane-galaxy.center-pane-active {
    display:flex;
    justify-content:flex-start;
    gap:clamp(8px,2.2vh,20px);
    padding:clamp(8px,2vw,18px);
    box-sizing:border-box;
    overflow:hidden;
  }
  body.mobile-panels-as-drawers #lifeos-core-slot {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    width:clamp(72px,13vw,112px);
    min-height:clamp(72px,13vw,112px);
    pointer-events:auto;
  }
  body.mobile-panels-as-drawers #lifeos-core-slot .core-reactor-container {
    position:relative;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  body.mobile-panels-as-drawers #lifeos-core-slot .reactor-brand-text { display:none!important; }
  body.mobile-panels-as-drawers #lifeos-core-slot .reactor-status-pill { padding:0!important; border:0!important; background:none!important; box-shadow:none!important; }
  body.mobile-panels-as-drawers #speech-bubble {
    flex:1 1 auto;
    width:100%;
    min-width:0;
    min-height:0;
    max-height:none;
    overflow:hidden;
    border-color:rgba(56,189,248,.22);
    background:rgba(7,15,26,.86);
    pointer-events:auto;
  }
  body.mobile-panels-as-drawers #speech-bubble .floating-speech-body { min-width:0; min-height:0; flex:1; }
  body.mobile-panels-as-drawers #speech-bubble .floating-speech-text { max-height:none; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
  body.mobile-panels-as-drawers .bottom-command-center {
    display:flex;
    flex:0 0 auto;
    gap:5px;
    width:100%;
    max-height:35dvh;
    overflow-y:auto;
    padding-bottom:2px;
    overscroll-behavior:contain;
  }
  body.mobile-panels-as-drawers .mobile-bottom-nav {
    display:flex;
    flex:0 0 auto;
    align-items:stretch;
    justify-content:space-around;
    min-height:var(--mobile-nav-height);
    padding:4px 4px max(4px,env(safe-area-inset-bottom,0px));
    margin:0;
  }
  body.mobile-panels-as-drawers .lifeos-left,
  body.mobile-panels-as-drawers .lifeos-right,
  body.mobile-panels-as-drawers .side-drawer {
    height:100vh;
    height:var(--visual-viewport-height,100dvh);
    max-height:var(--visual-viewport-height,100dvh);
    padding-top:calc(18px + env(safe-area-inset-top,0px));
    padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  body.mobile-panels-as-drawers .mobile-panel-backdrop { inset:0; }
  body.mobile-panels-as-drawers :is(button,a,input,textarea,select,[tabindex]):focus-visible { outline:2px solid #7dd3fc; outline-offset:2px; }
}

@media (min-width:601px) and (max-width:1024px) {
  body.mobile-panels-as-drawers .hud-layer { --mobile-topbar-height:58px; --mobile-nav-height:54px; }
  body.mobile-panels-as-drawers #pane-galaxy.center-pane-active { flex-direction:row; align-items:stretch; }
  body.mobile-panels-as-drawers #lifeos-core-slot { width:clamp(112px,19vw,190px); min-height:112px; }
  body.mobile-panels-as-drawers #speech-bubble { max-width:760px; }
  body.mobile-panels-as-drawers .bottom-command-center { max-width:900px; align-self:center; }
}

/* Tabletti ja kapea työpöytäikkuna (768–1024 px): phone.css ei päde, joten alanavigaatio tyylitetään tässä */
@media (min-width:768px) and (max-width:1024px) {
  body.mobile-panels-as-drawers:not(.phone-shell) .mobile-bottom-nav {
    display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; align-items:stretch;
    width:min(640px, 100%); align-self:center; box-sizing:border-box; padding:6px 8px;
    background:rgba(10, 14, 20, .92); border:1px solid var(--glass-border); border-radius:18px;
  }
  body.mobile-panels-as-drawers:not(.phone-shell) .mobile-nav-btn {
    min-width:0; min-height:48px; padding:4px 2px; gap:3px; border:0; border-radius:12px; background:none; color:#9fb0c2; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
  body.mobile-panels-as-drawers:not(.phone-shell) .mobile-nav-btn .mobile-nav-icon { font-size:19px; line-height:1; }
  body.mobile-panels-as-drawers:not(.phone-shell) .mobile-nav-btn .mobile-nav-label { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 11px var(--font-mono); }
  body.mobile-panels-as-drawers:not(.phone-shell) .mobile-nav-btn:hover { background:rgba(255, 255, 255, .06); }
  body.mobile-panels-as-drawers:not(.phone-shell) .mobile-nav-btn.active,
  body.mobile-panels-as-drawers:not(.phone-shell) .mobile-nav-btn[aria-current="page"] { color:var(--accent-cyan); background:rgba(56, 189, 248, .14); }
  body.mobile-panels-as-drawers:not(.phone-shell) .mobile-nav-btn:focus-visible { outline:2px solid var(--accent-cyan); outline-offset:-2px; }
}

@media (max-height:480px) and (max-width:1024px) {
  body.mobile-panels-as-drawers .hud-layer { gap:4px; }
  body.mobile-panels-as-drawers .top-bar { --mobile-topbar-height:42px; min-height:42px; }
  body.mobile-panels-as-drawers #pane-galaxy.center-pane-active { flex-direction:row; padding:5px; gap:5px; }
  body.mobile-panels-as-drawers #lifeos-core-slot { width:54px; min-height:54px; }
  body.mobile-panels-as-drawers .mobile-bottom-nav { min-height:42px; }
  body.mobile-panels-as-drawers .mobile-nav-btn { min-height:36px; }
}

/* Älykerros: ennakoivat ehdotukset ja jatkuvuus (js/assistant-intel.js) */
.intel-panel { display: flex; flex-direction: column; gap: 6px; width: min(560px, 100%); margin-bottom: 6px; }
.intel-panel[hidden] { display: none; }
.intel-card { background: rgba(9, 14, 25, 0.88); border: 1px solid var(--glass-border); border-left: 3px solid var(--accent-cyan); border-radius: 14px; padding: 8px 12px; backdrop-filter: blur(24px); }
.intel-card-meeting, .intel-card-commitment { border-left-color: var(--accent-amber); }
.intel-card-continue { border-left-color: var(--accent-emerald); }
.intel-card-title { font-size: 12px; font-weight: 600; color: var(--text-main); overflow-wrap: anywhere; }
.intel-card-detail { font-size: 11px; color: var(--text-muted); margin-top: 2px; overflow-wrap: anywhere; }
.intel-card-actions { display: flex; gap: 6px; margin-top: 6px; }
.intel-btn { background: none; border: 1px solid var(--glass-border); color: var(--text-muted); border-radius: 10px; padding: 3px 12px; font-size: 11px; cursor: pointer; min-height: 28px; }
.intel-btn:hover, .intel-btn:focus-visible { border-color: var(--glass-border-hover); color: var(--text-main); }
.intel-btn-primary { background: rgba(56, 189, 248, 0.16); color: var(--text-main); }
@media (max-width: 600px) { .intel-btn { min-height: 36px; padding: 6px 14px; } }

/* Avatut ikkunat Muisti-laatikossa (js/reactor.js renderWindowMemory) */
.window-memory-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; min-width: 0; }
.window-memory-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: #cfe3ef; }
.window-memory-row .sleek-pill-btn { flex: 0 0 auto; }
.window-memory-del { padding-left: 8px; padding-right: 8px; }
@media (max-width: 767px) { .window-memory-row .sleek-pill-btn { min-height: 40px; min-width: 44px; justify-content: center; } }

/* Kokousmuistio (js/meeting.js) */
.meeting-dialog{width:min(760px,96vw);max-height:92vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.meeting-dialog label{display:flex;flex-direction:column;gap:6px;font:600 11px var(--font-mono);letter-spacing:.06em;color:var(--text-secondary,#9fb0c2)}
.mt-note{margin:0;font-size:13px;line-height:1.5;color:var(--text-secondary,#9fb0c2)}
.mt-h{margin:8px 0 6px;font:600 11px var(--font-mono);letter-spacing:.08em;color:var(--text-secondary,#9fb0c2)}
.mt-hint{font-weight:400;letter-spacing:0;text-transform:none;opacity:.8}
.mt-primary{min-height:44px;border-color:rgba(56,189,248,.5);color:var(--accent-cyan,#38bdf8)}
.mt-primary.mt-recording{border-color:rgba(248,113,113,.6);color:#fca5a5}
.meeting-dialog .sleek-pill-btn{min-height:44px}
.mt-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mt-title-live{flex:1;min-width:0;overflow-wrap:anywhere}
.mt-timer{font:600 15px var(--font-mono);font-variant-numeric:tabular-nums}
.mt-pending{font-size:12px;color:#fcd34d}
.mt-rec-dot{width:10px;height:10px;border-radius:50%;background:#f87171;animation:mt-pulse 1.4s ease-in-out infinite}
.mt-status{margin:0;min-height:1.4em;font-size:13px;color:var(--text-secondary,#9fb0c2)}
.mt-actions{display:flex;gap:8px;flex-wrap:wrap}
.mt-actions .sleek-pill-btn{flex:1 1 150px}
.mt-speaker{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.mt-name{flex:1 1 140px;min-width:0;font-size:16px}
.mt-dot{width:12px;height:12px;border-radius:50%;flex:none;background:hsl(var(--sp-h,200) 80% 60%)}
.mt-suggest{flex:none}
.mt-transcript{max-height:42vh;min-height:140px;overflow-y:auto;padding:10px;border:1px solid rgba(148,163,184,.2);border-radius:12px;background:rgba(5,8,14,.5);display:flex;flex-direction:column;gap:10px}
.mt-empty{margin:0;font-size:13px;opacity:.7}
.mt-turn{border-left:3px solid hsl(var(--sp-h,200) 80% 60%);padding-left:10px}
.mt-turn-head{display:flex;justify-content:space-between;gap:8px;font:600 11px var(--font-mono);color:hsl(var(--sp-h,200) 80% 70%)}
.mt-time{opacity:.7;font-variant-numeric:tabular-nums}
.mt-line{margin:2px 0 0;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.mt-hrow{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid rgba(148,163,184,.15);flex-wrap:wrap}
.mt-hinfo{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;font-size:12px;opacity:.9}
.mt-memo-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.mt-memo{padding:12px;border:1px solid rgba(56,189,248,.3);border-radius:12px;background:rgba(5,8,14,.55);font-size:14px;line-height:1.55;overflow-wrap:anywhere}
.mt-memo h3{margin:14px 0 6px;font-size:16px}
.mt-memo h4{margin:12px 0 4px;font-size:14px;color:var(--accent-cyan,#38bdf8)}
.mt-memo p{margin:4px 0}
.mt-memo ul{margin:4px 0 8px;padding-left:20px}
.meeting-pill{position:fixed;top:calc(8px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:900;min-height:44px;max-width:calc(100vw - 32px);padding:0 16px;border-radius:22px;border:1px solid rgba(248,113,113,.6);background:rgba(30,10,12,.92);color:#fecaca;font:600 13px var(--font-mono);cursor:pointer}
@keyframes mt-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.mt-rec-dot{animation:none}}