/* =====================================================================
   Lämmin iOS/Claude-teema (RESKIN). Ladataan VIIMEISENÄ (app.css/reports.css
   jälkeen) → ohittaa aiemmat arvot lähdejärjestyksellä.
   Tavoite: rauhallinen, lämmin, yksinkertainen ja NOPEA — ei raskaita tehosteita.
   Yksi maltillinen vihreä aksentti (palvelu/soita/käynnissä) + ruskea logo (turva).
   ===================================================================== */

/* ---------- 0) FOUT-korjaus: fallback-fontin metriikat vastaamaan Noto Sansia →
   kun Noto latautuu, teksti EI hyppää (sama rivikorkeus + leveys ~). Noto näkyy aina.
   (Arvot vastaavat fontaine-tyylistä Noto Sans -laskentaa; hienosäädettävissä.) ---------- */
@font-face {
  font-family: "Noto Sans Fallback";
  src: local("Arial"), local("Roboto"), local("Helvetica Neue");
  size-adjust: 106%;
  ascent-override: 100%;
  descent-override: 27.5%;
  line-gap-override: 0%;
}
:root { --font: "Noto Sans", "Noto Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; }

/* ---------- 1) Tokenit: VAALEA ---------- */
html[data-theme="light"] {
  --bg-page: #f5f4f1;
  --bg-page-gradient: #f5f4f1;          /* litteä → nopea, ei gradienttia */
  --bg-card: #ffffff;
  --bg-elevated: #f6f3ee;
  --border-default: rgba(40, 34, 26, .10);
  --iss-body-text: #2a2622;
  --text-primary: #2a2622;
  --text-heading: #2a2622;
  --text-subheading: #2a2622;
  --text-muted: #8c867d;
  --link: #5a8f60;
  --link-hover: #4a7d50;
  --shadow-soft: 0 1px 2px rgba(50, 40, 28, .05), 0 6px 16px rgba(50, 40, 28, .07);
  --header-bg: #f5f4f1;
  --header-border: rgba(40, 34, 26, .08);
  --messages-track-bg: #f5f4f1;
  --bubble-user-bg: #eceae5;            /* harmaa käyttäjäkupla */
  --bubble-user-border: transparent;
  --bubble-assistant-bg: transparent;   /* assistentti = pelkkä teksti */
  --bubble-assistant-border: transparent;
  --input-bg: #ffffff;
  --composer-input-bg: #ffffff;
  --composer-bg-top: #f5f4f1;
  --composer-bg-bottom: #f5f4f1;
  --nav-link-bg: #ffffff; --nav-link-text: #4a7d50; --nav-link-border: rgba(40,34,26,.12);
  --toggle-bg: #ffffff; --toggle-text: #2a2622; --toggle-active-border: #5a8f60;
  --toggle-active-bg: rgba(95,158,102,.12); --toggle-active-text: #4a7d50;
  --theme-toggle-bg: #ffffff; --theme-toggle-text: #2a2622; --theme-toggle-border: rgba(40,34,26,.12);
  --lookup-banner-bg: rgba(95,158,102,.12); --lookup-banner-border: #5a8f60;
  --valitut-sticky-shadow: 0 6px 16px rgba(50,40,28,.08);
  --glass-bg: #ffffff;                  /* lasi → kiinteä */
  --glass-border: rgba(40, 34, 26, .10);
  --glass-highlight: transparent;
  --accent-gradient: #5a8f60;           /* primary = vihreä (esim. Valmis-nappi) */
  --accent-gradient-bold: #5a8f60;
  --celebrate-gradient: #5a8f60;
  --hover-border: rgba(95, 158, 102, .5);
  --ring: 0 0 0 3px rgba(95, 158, 102, .22);
  --glow-accent: 0 1px 2px rgba(50, 40, 28, .06);
  --elev-1: 0 1px 2px rgba(50, 40, 28, .05);
  --elev-2: 0 1px 2px rgba(50, 40, 28, .05), 0 6px 16px rgba(50, 40, 28, .07);
  --elev-3: 0 10px 30px rgba(50, 40, 28, .14);
  --surface-card-gradient: none;
  --iss-azure: #5a8f60;                 /* uudelleenkartoitus: azure-aksentit → vihreä */
  --logo: #8a6a45;                      /* ruskea logo (turva) */
  --send-solid: #262420;                /* lähetysnappi: neutraali tumma */
  --send-ink: #ffffff;
  --call-solid: #5a8f60;                /* soittonappi: vihreä */
}

/* ---------- 1) Tokenit: TUMMA — NEUTRAALI musta/harmaa/valko (Claude Code -tyyli).
   Tausta/pinnat/teksti/reunat ovat neutraalia harmaata (ei enää lämmin ruskea). AKSENTTI
   (teal) tulee §8:sta joka yliajaa link/accent/hover/ring/iss-azure/call/lookup/toggle-active.
   Vihreät arvot tässä ovat §8:n yliajamia (jäänne) — eivät renderöidy. ---------- */
html[data-theme="dark"] {
  --bg-page: #1a1a1a;
  --bg-page-gradient: #1a1a1a;
  --bg-card: #242424;
  --bg-elevated: #2b2b2b;
  --border-default: rgba(255, 255, 255, .10);
  --iss-body-text: #ededed;
  --text-primary: #ededed;
  --text-heading: #ededed;
  --text-subheading: #ededed;
  --text-muted: #9a9a9a;
  --link: #7cb682;
  --link-hover: #a9d0ab;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .4);
  --header-bg: #1a1a1a;
  --header-border: rgba(255, 255, 255, .08);
  --messages-track-bg: #1a1a1a;
  --bubble-user-bg: #2b2b2b;
  --bubble-user-border: transparent;
  --bubble-assistant-bg: transparent;
  --bubble-assistant-border: transparent;
  --input-bg: #242424;
  --composer-input-bg: #242424;
  --composer-bg-top: #1a1a1a;
  --composer-bg-bottom: #1a1a1a;
  --nav-link-bg: transparent; --nav-link-text: #ededed; --nav-link-border: rgba(111,174,116,.5);
  --toggle-bg: rgba(255,255,255,.06); --toggle-text: #ededed; --toggle-active-border: #6fae74;
  --toggle-active-bg: rgba(111,174,116,.18); --toggle-active-text: #ededed;
  --theme-toggle-bg: rgba(255,255,255,.06); --theme-toggle-text: #ededed; --theme-toggle-border: rgba(255,255,255,.16);
  --lookup-banner-bg: rgba(111,174,116,.16); --lookup-banner-border: #6fae74;
  --valitut-sticky-shadow: 0 8px 20px rgba(0,0,0,.45);
  --glass-bg: #242424;
  --glass-border: rgba(255, 255, 255, .10);
  --glass-highlight: transparent;
  --accent-gradient: #6fae74;
  --accent-gradient-bold: #6fae74;
  --celebrate-gradient: #6fae74;
  --hover-border: rgba(111, 174, 116, .5);
  --ring: 0 0 0 3px rgba(111, 174, 116, .3);
  --glow-accent: 0 1px 2px rgba(0, 0, 0, .3);
  --elev-1: 0 1px 2px rgba(0, 0, 0, .3);
  --elev-2: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px rgba(0, 0, 0, .3);
  --elev-3: 0 12px 30px rgba(0, 0, 0, .5);
  --surface-card-gradient: none;
  --iss-azure: #6fae74;
  --logo: #f2f2f2;
  --send-solid: #ededed;
  --send-ink: #1a1a1a;
  --call-solid: #6fae74;
}

/* ---------- 2) Kevennys: pois raskaat tehosteet (nopeus + selkeys) ---------- */
.app-header, .iss-header,
.iss-menu__panel, .choice-popup__card, .active-request-chip__btn,
body.page-chat #user-input, #pv-plan-panel, .pv-thumb {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.btn.btn-send-round::before { display: none !important; }   /* kohokiilto pois */
.btn.btn-send-round--voice { animation: none !important; }  /* soiton "hengitys" pois */
html[data-theme="light"] body { background: #f5f4f1; }
html[data-theme="dark"] body { background: #1a1a1a; }

/* Pinnat kiinteiksi & yksinkertaisiksi */
.iss-menu__panel { background: var(--bg-card); box-shadow: var(--elev-3); }
.choice-popup__card { background: var(--bg-card) !important; box-shadow: var(--elev-3); border-color: var(--border-default); }
.active-request-chip__btn { background: var(--bg-card) !important; box-shadow: var(--elev-1); }
#pv-plan-panel { background: var(--bg-card) !important; box-shadow: var(--elev-1) !important; border-color: var(--border-default) !important; }

/* ---------- 3) Header: ruskea tähti-logo + "Gladys" vasemmalle ---------- */
.iss-header.iss-header--menu { display: flex !important; align-items: center; gap: .55rem; }
.iss-header__spacer { display: none !important; }
.iss-header__title { justify-self: start; display: inline-flex; align-items: center; gap: .55rem; font-size: 1.2rem; }
.iss-menu { margin-left: auto; }
.pv-logo { display: inline-grid; place-items: center; color: var(--logo); flex: none; width: 1.7rem; height: 1.7rem; }
.pv-logo svg { width: 100%; height: 100%; display: block; }

/* ---------- 4) Chat-pinnat ---------- */
/* Käyttäjän kupla: harmaa, tekstin kokoinen, oikealla (perii max-content app.css:stä) */
.user-message { box-shadow: none !important; background: var(--bubble-user-bg); }

/* Lähetys = neutraali tumma; soitto = vihreä; valkoinen ikoni */
html .btn.btn-send-round--send { background: var(--send-solid) !important; color: var(--send-ink) !important; box-shadow: var(--elev-1) !important; }
html .btn.btn-send-round--send .btn-send-round__icon { color: var(--send-ink); }
html .btn.btn-send-round--voice { background: var(--call-solid) !important; color: #fff !important; box-shadow: var(--elev-1) !important; }
.btn.btn-send-round--send:hover:not(:disabled), .btn.btn-send-round--voice:hover:not(:disabled) { filter: brightness(1.04); }

/* Peukut: pystyyn (tykkäys yllä, alapeukku alla), 46px, hieman ylempänä */
.conv-feedback {
  flex-direction: row !important;          /* peukut vierekkäin */
  align-items: center !important;
  gap: 10px !important;
  bottom: calc(var(--app-composer-height, 5.25rem) + 0.95rem + env(safe-area-inset-bottom, 0px)) !important;  /* hieman alemmas, mutta ei kiinni composerissa */
}
.pv-thumb { width: 46px !important; height: 46px !important; background: var(--bg-card) !important; box-shadow: var(--elev-1) !important; }
.pv-thumb svg { width: 20px; height: 20px; }

/* Palvelupyyntö-paneelin pilleri/badge pysyy maltillisen vihreänä (app.css color-mix) */

/* ---------- 5) Ajatteluindikaattori (logo + timer + toimenpide) ---------- */
.pv-thinking { display: flex; align-items: center; gap: 10px; margin: 10px 2px 4px; padding: 0; }
.pv-thinking[hidden] { display: none; }
.pv-thinking .pv-logo { width: 1.6rem; height: 1.6rem; }
.pv-thinking.is-busy .pv-logo { animation: pv-star-morph 1.6s ease-in-out infinite; transform-origin: center; }
.pv-think-timer { font-size: .82rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pv-think-status { font-size: .9rem; color: var(--text-muted); }
@keyframes pv-star-morph {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(.7); }
  100% { transform: rotate(360deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pv-thinking.is-busy .pv-logo { animation: none !important; }
  .chat-loading-overlay .pv-logo--loading { animation: none !important; }
}

/* Ajatteluindikaattori piiloon kun ei viestejä (thinking_indicator.js asettaa [hidden]) */
.pv-thinking[hidden] { display: none !important; }
.pv-thinking { margin: 6px 2px 12px; }

/* Vanhat tekstilliset latausindikaattorit pois — Gladys-logo (morffaava tähti) korvaa ne.
   chat-typing-indicator = "Gladys vastaa…/muotoilee vastausta…" (chat_stream_client.js);
   sama elinkaari kuin #send-btn[aria-busy] → tähti kattaa täsmälleen saman ajan. */
#loading,
.lookup-status-message,
.chat-typing-indicator,
[data-chat-typing] { display: none !important; }

/* Sivun latausanimaatio = Gladys-tähti joka elää (ei pyörivää donitsia) */
.chat-loading-overlay__spinner { display: none !important; }
.chat-loading-overlay .pv-logo--loading {
  width: 2.6rem; height: 2.6rem; color: var(--logo); transform-origin: center;
  /* Kasvaa mikroskooppisen pienestä täyteen kokoon (pieni ylitys), sitten jää elämään (morph). */
  animation: pv-loading-grow .6s cubic-bezier(.34, 1.56, .64, 1) both,
             pv-star-morph 1.6s ease-in-out .6s infinite;
}
@keyframes pv-loading-grow {
  0%   { transform: scale(.04); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.chat-loading-overlay .pv-logo--loading svg { width: 100%; height: 100%; display: block; }

/* =====================================================================
   6) KOMPONENTTIEN YHDENMUKAISTUS MOCKUPIIN (/gemini/mockup)
   Token-reskin antoi värit; tämä tuo komponenttien MUODON mockupin
   pelkistettyyn, lämpimään ilmeeseen (chip, valikko, paneeli, popup).
   ===================================================================== */

/* --- 6.1 Aktiivinen palvelupyyntö -chip: pelkistetty pilleri ---
   Mockup: pieni status-ikoni + normaali "Käynnissä" + aika. EI ISOJA
   kirjaimia, EI chevronia, EI nostoa hoverissa. */
.active-request-chip__btn {
  gap: 0.45rem !important;
  padding: 0.36rem 0.75rem 0.36rem 0.6rem !important;
  border: 1px solid var(--border-default) !important;
  background: var(--bg-card) !important;
  box-shadow: var(--elev-2) !important;
}
.active-request-chip__btn:hover {
  transform: none !important;                  /* rauhallinen, ei nostoa */
  border-color: var(--iss-azure) !important;   /* hieno klikkaus-vihje (chevron poistettu) */
  box-shadow: var(--elev-2) !important;
}
.active-request-chip__status {
  text-transform: none !important;             /* "Käynnissä", ei "KÄYNNISSÄ" */
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  color: var(--text-muted) !important;
}
.active-request-chip__time { font-weight: 600 !important; }
.active-request-chip__chev { display: none !important; }   /* mockupissa ei chevronia */
.active-request-chip__icon svg { width: 15px !important; height: 15px !important; }

/* --- 6.2 Valikko: ympyränappi + kevyet, pehmeät rivit ---
   Mockup: pyöreä headerinappi varjolla; rivit normaalipainoisia, harmaa hover. */
.iss-menu__btn {
  width: 2.4rem !important; height: 2.4rem !important;
  border: 1px solid transparent !important;    /* EI ympyrää/laatikkoa — pelkkä ikoni */
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
  transition: color .15s ease, filter .15s ease !important;
}
/* Hehku = värisävy aksenttiin + pehmeä glow ikonin ympärille (ei reunaa/taustaa).
   Hover-hehku VAIN oikealla hoverilla (desktop). Kosketuksella :hover jää "tahmaamaan"
   päälle napautuksen jälkeen (mobiilin sticky-hover) → hehku ei sammuisi vaikka valikko
   sulkeutuu. Siksi kosketuksella hehkun ohjaa AUKI-tila ([aria-expanded="true"]) alla. */
@media (hover: hover) {
  .iss-menu__btn:hover {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--iss-azure) !important;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--iss-azure) 65%, transparent)) !important;
  }
}
/* Valikko AUKI → sama hehku KAIKILLA laitteilla. Päättyy heti kun valikko suljetaan, koska
   iss_header.html:n JS asettaa aria-expanded="false" (napautus uudelleen / ulkoklikkaus / Esc).
   → korjaa mobiilin "menu jää hehkumaan" ilman tahmaavaa :hoveria. */
.iss-menu__btn[aria-expanded="true"] {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--iss-azure) !important;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--iss-azure) 65%, transparent)) !important;
}
.iss-menu__panel {
  min-width: 230px;
  border-radius: 16px !important;
  padding: 6px !important;
  gap: 2px !important;
  border-color: var(--border-default) !important;
}
.iss-menu__item {
  padding: 0.6rem 0.75rem !important;
  border-radius: 11px !important;
  font-weight: 500 !important;                 /* ei lihava (mockup) */
  font-size: 0.9rem !important;
  gap: 0.7rem !important;
}
.iss-menu__item:hover { background: var(--bubble-user-bg) !important; }   /* pehmeä harmaa hover */
.iss-menu__item .iss-theme-toggle__state { color: var(--text-muted) !important; }  /* harmaa tag, ei vihreä */

/* --- 6.3 Suunnitelmapaneeli: kirkas lime → maltillinen ---
   service_plan_panel.js käyttää --iss-light-green (#90bb47, lime) badgeen + siruun.
   EI kartoiteta tokenia globaalisti (rakastettu kuittaus-overlay käyttää sitä) →
   ohitetaan vain paneelin osat: lukubadge harmaaksi, palvelusiru maltilliseksi vihreäksi. */
#pv-plan-panel { border-radius: 20px !important; box-shadow: var(--elev-2) !important; }
#pv-plan-panel .pv-plan-badge {
  background: var(--bubble-user-bg) !important;   /* harmaa lukubadge, kuten mockup */
  color: var(--text-muted) !important;
}
#pv-plan-panel .pv-plan-chip {
  background: color-mix(in srgb, var(--iss-azure) 16%, transparent) !important;  /* maltillinen vihreä */
  color: var(--link-hover) !important;
}

/* --- 6.4 Valintaponnahdus: pehmeämmät kulmat + harmaa hover (vihreä ensisijainen jo teemassa) --- */
.choice-popup__card { border-radius: 18px !important; }
.choice-popup__option { border-radius: 0.7rem !important; }
@media (hover: hover) {
  .choice-popup__option:hover { border-color: var(--iss-azure) !important; background: var(--bubble-user-bg) !important; }
}

/* --- 6.5 Statuspainikkeen välitön palaute: pieni morffaava Gladys-tähti spinnerina ---
   Napautuksesta nappi himmenee + keskelle ilmestyy ruskea tähti joka morffaa (sama
   pv-star-morph kuin ajattelu-/latausindikaattori). Lopullinen iso kuittaus tulee
   vasta palvelimen vahvistuksesta (chat_stream_client.js applyStatusChange). */
.choice-popup__option--busy { position: relative; pointer-events: none; }
.choice-popup__option--busy .ar-status-opt { opacity: 0; }   /* busy = PELKKÄ spinneri, ei tekstiä */
.choice-popup__option--primary .pv-opt-spinner { color: #fff; }   /* valkoinen spinneri teal-primary-napissa */
.pv-opt-spinner {
  position: absolute; top: 50%; left: 50%;
  width: 1.25rem; height: 1.25rem; margin: -0.625rem 0 0 -0.625rem;
  color: var(--logo); transform-origin: center; pointer-events: none;
  animation: pv-star-morph 1.6s ease-in-out infinite;
}
.pv-opt-spinner svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) { .pv-opt-spinner { animation: none !important; } }

/* Sivun latauksen aikana EI siirtymiä → ei "sirkusta" (composer ei liu'u, header/menu ei
   animoidu, overlay ei vilauta). <head>-skripti asettaa html.pv-preload ja poistaa sen
   ensimaalauksen jälkeen. Animaatiot (spinnerit, hero-logon morph) jäävät päälle. */
html.pv-preload *, html.pv-preload *::before, html.pv-preload *::after { transition: none !important; }

/* =====================================================================
   7) YHTENÄINEN LATAUS + RESPONSIIVISUUS
   Gladys-tähti spinnerina kaikkialla, napin painallus, teemanvaihdon häivytys.
   ===================================================================== */

/* Jaettu Gladys-tähti maskina → spinneri saa värin currentColorista/taustasta. */
html {
  --pv-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M24 54 L43 72 L64 30 L78 44' fill='none' stroke='%23000' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* Aliakset: contract-admin-alasivut käyttivät määrittelemättömiä --surface/--border/
     --surface-hover -muuttujia (fallback-värit rikkoivat tumman teeman). Kartoitetaan
     oikeisiin teematokeneihin → seuraavat nyt vaaleaa/tummaa. */
  --surface: var(--bg-card);
  --surface-hover: var(--bg-elevated);
  --border: var(--border-default);
}

/* 7.1 Tekstillinen latausindikaattori (esim. raportit) — morffaava tähti tekstin edessä */
.pv-loading { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-muted); }
.pv-loading::before {
  content: ""; flex: none; width: 1.05em; height: 1.05em;
  background: var(--logo); transform-origin: center;
  -webkit-mask: var(--pv-star-mask) center / contain no-repeat;
  mask: var(--pv-star-mask) center / contain no-repeat;
  animation: pv-star-morph 1.6s ease-in-out infinite;
}

/* 7.2 Kirjaa-napin busy: nuoli pois, keskelle morffaava tähti */
.kirjaa-confirm-btn--busy .kirjaa-confirm-btn__icon { opacity: 0 !important; }
.kirjaa-confirm-btn--busy { position: relative; }
.kirjaa-confirm-btn--busy::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 1.25rem; height: 1.25rem; background: currentColor; transform-origin: center;
  border: none !important; border-radius: 0 !important;   /* kumoa app.css:n donitsi-spinner */
  -webkit-mask: var(--pv-star-mask) center / contain no-repeat;
  mask: var(--pv-star-mask) center / contain no-repeat;
  animation: pv-star-morph 1.6s ease-in-out infinite;
}

/* 7.3 Login-napin busy (login.html lisää .login-btn--busy lähetyksessä) */
.login-btn--busy { position: relative; color: transparent !important; pointer-events: none; }
.login-btn--busy::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 1.2rem; height: 1.2rem; background: #fff; transform-origin: center;
  -webkit-mask: var(--pv-star-mask) center / contain no-repeat;
  mask: var(--pv-star-mask) center / contain no-repeat;
  animation: pv-star-morph 1.6s ease-in-out infinite;
}

/* 7.4 Napin painallus: hieno iOS-tyylinen skaalaus (tuntuma) */
.btn, .iss-menu__item, .choice-popup__option, .login-btn, .reports-tab,
.kirjaa-confirm-btn, .pv-thumb, .active-request-chip__btn {
  transition: transform .12s var(--ease-out, ease), filter .12s ease, background-color .15s ease, border-color .15s ease;
}
.btn:active:not(:disabled), .iss-menu__item:active, .choice-popup__option:active:not(:disabled),
.login-btn:active:not(:disabled), .reports-tab:active, .kirjaa-confirm-btn:active:not(:disabled),
.active-request-chip__btn:active {
  transform: scale(.97);
}

/* 7.5 Teemanvaihdon pehmeä ristihäivytys (vain toggle-hetken ajan, theme.js lisää .theme-anim) */
html.theme-anim * {
  transition: background-color .32s ease, color .32s ease, border-color .32s ease, fill .32s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .pv-loading::before, .kirjaa-confirm-btn--busy::after, .login-btn--busy::after { animation: none !important; }
  .btn:active, .iss-menu__item:active, .choice-popup__option:active, .login-btn:active,
  .reports-tab:active, .kirjaa-confirm-btn:active, .pv-thumb:active, .active-request-chip__btn:active { transform: none !important; }
  html.theme-anim * { transition: none !important; }
}

/* =====================================================================
   8) TEAL-BRÄNDI (#0E7A6B) — uusi Gladys-brändiväri korvaa vihreän aksentin.
   Tausta pysyy lämpimänä (vaalea/tumma); vain aksentti / logo / celebrate → teal.
   Ohittaa osion 1 vihreät arvot (myöhempänä tiedostossa).
   ===================================================================== */
/* WHITE-LABEL: vaihda brändi YHDESTÄ --brand-arvosta (vaalea + tumma). Aksentit
   johdetaan siitä; rgba-sävyt color-mixillä (= sama rgb+alpha kuin ennen). --brand-*
   ovat hienosäätösävyjä. Arvot pidetty IDENTTISINÄ nykyiseen tealiin. */
html[data-theme="light"] {
  --brand: #0E7A6B;            /* ← BRÄNDIVÄRI (vaalea teema) */
  --brand-strong: #0a5e52;     /* tummempi sävy: link-hover, siru-ink */
  --brand-bright: #0f8a78;     /* kirkkaampi: kuittausrengas / celebrate */
  --iss-azure: var(--brand);
  --logo: #1a1a1a;             /* LOGO erotettu brändistä: mustavalko (vaalea→musta) — ei teal */
  --call-solid: var(--brand);
  --accent-gradient: var(--brand);
  --accent-gradient-bold: var(--brand);
  --celebrate-gradient: var(--brand);
  --link: var(--brand);
  --link-hover: var(--brand-strong);
  --hover-border: color-mix(in srgb, var(--brand) 50%, transparent);
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
  --toggle-active-border: var(--brand);
  --toggle-active-bg: color-mix(in srgb, var(--brand) 12%, transparent);
  --toggle-active-text: var(--brand-strong);
  --lookup-banner-bg: color-mix(in srgb, var(--brand) 12%, transparent);
  --lookup-banner-border: var(--brand);
  --iss-light-green: var(--brand-bright);
  --iss-dark-green: var(--brand-strong);
  --iss-teal: var(--brand);
}
html[data-theme="dark"] {
  --brand: #45bda8;            /* ← BRÄNDIVÄRI (tumma teema) */
  --brand-strong: #a6e2d5;     /* vaaleampi sävy: link-hover, ink */
  --brand-bright: #34b39d;     /* kuittausrengas / celebrate */
  --brand-call: #2f9e8c;       /* soittonappi (tummempi → valkoinen luuri erottuu) */
  --brand-logo: #93D2C6;       /* logo (brändin vaalea sävy, erottuu tummalla) */
  --brand-link: #7ad3c2;       /* linkki tummalla */
  --iss-azure: var(--brand);
  --logo: #f2f2f2;             /* LOGO erotettu brändistä: mustavalko (tumma→valkoinen) — ei teal */
  --call-solid: var(--brand-call);
  --accent-gradient: var(--brand-call);
  --accent-gradient-bold: var(--brand-call);
  --celebrate-gradient: var(--brand-call);
  --link: var(--brand-link);
  --link-hover: var(--brand-strong);
  --hover-border: color-mix(in srgb, var(--brand) 50%, transparent);
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent);
  --toggle-active-border: var(--brand);
  --toggle-active-bg: color-mix(in srgb, var(--brand) 18%, transparent);
  --toggle-active-text: #cdeee6;
  --lookup-banner-bg: color-mix(in srgb, var(--brand) 16%, transparent);
  --lookup-banner-border: var(--brand);
  --iss-light-green: var(--brand-bright);
  --iss-dark-green: var(--brand-strong);
  --iss-teal: var(--brand);
}

/* =====================================================================
   9) KAMERANAPPI: harmaa "fokus-ympyrä" pois → hehku kosketuksesta (kuten valikko).
   Korjaa myös mobiilin tarttuvan hoverin (harmaa jäi päälle napautuksen jälkeen):
   tapetaan harmaa tausta KAIKESTA hoverista, ja hehku vain hover-laitteille.
   ===================================================================== */
.input-wrap .btn-camera-round:hover {
  background: transparent !important;     /* ei harmaata ympyrää (myös mobiilin tarttuva hover) */
  color: var(--text-muted) !important;
}
@media (hover: hover) {
  .input-wrap .btn-camera-round:hover {
    color: var(--iss-azure) !important;   /* hehku: värisävy + pehmeä glow */
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--iss-azure) 60%, transparent)) !important;
  }
}
.input-wrap .btn-camera-round:active {
  background: transparent !important;
  color: var(--iss-azure) !important;
  transform: scale(0.92);
}

/* =====================================================================
   10) ALOITUSNÄKYMÄ (ChatGPT/Claude-tyyli): tyhjä chat → composer keskelle +
   hero (logo + "Miten voin auttaa?"). body.pv-empty asetetaan empty_state.js:ssä.
   ===================================================================== */
.composer { transition: transform .42s var(--ease-out, ease), opacity .45s ease; }   /* liuku + pehmeä fade-in latauksen jälkeen */
body.pv-empty .composer { transform: translateY(-38dvh); }

/* Free-tier-huomautus (composer-notice) PYSYY ruudun alalaidassa myös tyhjässä tilassa
   (käyttäjän pyyntö): composer nousee keskelle (-38dvh), joten vasta-translaatio (+38dvh)
   pitää huomautuksen samassa kohdassa kuin silloin kun chatissa on viestejä. */
.composer-notice { transition: transform .42s var(--ease-out, ease); }
body.pv-empty .composer-notice { transform: translateY(38dvh); }

.pv-hero {
  position: fixed; left: 50%;
  bottom: calc(38dvh + var(--app-composer-height) + 1.5rem);   /* otsikko hieman alemmas (lähemmäs composeria) */
  transform: translateX(calc(-50% + var(--pv-hero-shift, 0px))) translateY(10px);
  z-index: 30;
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  width: min(920px, calc(100% - 2rem));
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
/* Siirrä hieman vasemmalle (puolet logon+gapin leveydestä) → OTSIKON keskikohta
   tulee aivan ruudun keskelle, ei koko logo+teksti-ryhmän keskikohta. */
.pv-hero, body.pv-empty .pv-hero { --pv-hero-shift: -1.6rem; }
.pv-hero__logo { width: 2.5rem; height: 2.5rem; color: var(--logo); flex: none; }
.pv-hero__logo svg { width: 100%; height: 100%; display: block; }
.pv-hero__title {
  margin: 0; font-weight: 700; color: var(--text-heading);
  font-size: clamp(1.5rem, 5.5vw, 2.15rem); letter-spacing: -0.02em; line-height: 1.1;
}
body.pv-empty .pv-hero { opacity: 1; transform: translateX(calc(-50% + var(--pv-hero-shift, 0px))) translateY(0); }
/* Tyhjässä tilassa piilota tyhjä chat-alue (ei näy hero-elementin alla). */
body.pv-empty #chat-transcript { visibility: hidden; }

/* Composerin fokus-rengas: kovakoodattu sininen (app.css) → teal. */
body.page-chat #user-input:focus { box-shadow: 0 0 0 3px rgba(14, 122, 107, .16) !important; }

/* Composerin kirjoituslaatikko VÄHEMMÄN pyöreä (Claude-tyylinen rounded-rect, ei pilleri).
   app.css:n 1.45rem teki ~pillerin yksirivisellä kentällä; 0.9rem = selkeät pyöristetyt kulmat. */
body.page-chat #user-input { border-radius: 0.9rem; }

@media (max-width: 520px) {
  body.pv-empty .composer { transform: translateY(-32dvh); }
  body.pv-empty .composer-notice { transform: translateY(32dvh); }
  .pv-hero { bottom: calc(32dvh + var(--app-composer-height) + 1.3rem); }
}
@media (prefers-reduced-motion: reduce) {
  .composer, body.pv-empty .composer, .pv-hero { transition: none !important; }
}

/* =====================================================================
   11) Hienosäädöt: vaalea yleisväri harmaaksi (ei beige); peukut vasta
   ensimmäisen viestin jälkeen; aloitusnäkymän lataussymboli heron yläpuolelle.
   ===================================================================== */
/* 11.1 Vaalean teeman yleisväri: lämmin hiekka/beige → neutraali vaaleanharmaa
   (kortit pysyvät valkoisina). Ohittaa osion 1 lämpimät arvot. */
html[data-theme="light"] {
  --bg-page: #f4f4f5;
  --bg-page-gradient: #f4f4f5;
  --bg-elevated: #ececef;
  --header-bg: #f4f4f5;
  --header-border: rgba(24, 24, 28, .08);
  --messages-track-bg: #f4f4f5;
  --composer-bg-top: #f4f4f5;
  --composer-bg-bottom: #f4f4f5;
  --bubble-user-bg: #e9e9ec;
  --border-default: rgba(24, 24, 28, .10);
  --text-muted: #8a898f;
}
html[data-theme="light"] body { background: #f4f4f5; }

/* 11.2 Peukut näkyviin vasta kun ensimmäinen viesti on lähetetty. */
body.pv-empty .conv-feedback { display: none !important; }

/* 11.3 Sivun latauksen aikana (body.pv-booting): näytä VAIN keskitetty lataus-logo
   (#chat-loading-overlay). Composer + Google-huomautus (composerin sisällä) + hero (otsikko)
   PIILOSSA → ei "composer + lataus + taustalla chat" -sekamelskaa. Kun lataus on tehty
   (empty_state.js poistaa pv-bootingin kun overlay piiloutuu), composer + hero tulevat
   PEHMEÄSTI näkyviin oikeaan paikkaan (opacity-fade).
   HUOM: luokka on "pv-booting" EIKÄ "pv-loading" — jälkimmäinen on inline-indikaattorin
   komponentti (rivi 343: display:inline-flex + ::before-logo), joka body-luokkana kutistaisi
   bodyn ja piirtäisi pikkulogon headerin yläpuolelle. */
body.pv-booting .composer,
body.pv-booting .pv-hero { opacity: 0 !important; pointer-events: none !important; }