/* The look of Chris's v2 (dark navy, gold, glass, drifting neurons) on every page,
   with v0's rules kept: large type and large targets, every action labelled with
   words, nothing hidden behind a menu. Long reading (answers, notes) sits on a
   solid surface in a plain, very legible face; the rounded brand faces are for
   headings, buttons and navigation. */

@font-face { font-family: "Quicksand"; src: url(/static/fonts/quicksand-latin-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Quicksand"; src: url(/static/fonts/quicksand-latin-500.woff2) format("woff2"); font-weight: 500 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Quicksand"; src: url(/static/fonts/quicksand-latin-700.woff2) format("woff2"); font-weight: 700 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Quicksand has no Greek: Greek headings and buttons take Comfortaa, as in v2. */
@font-face { font-family: "Comfortaa"; src: url(/static/fonts/comfortaa-greek-400.woff2) format("woff2"); font-weight: 400 500; font-display: swap; unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Comfortaa"; src: url(/static/fonts/comfortaa-greek-700.woff2) format("woff2"); font-weight: 600 800; font-display: swap; unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }

/* Two sets of colours. The default is the plain one: a white page and black text,
   the easiest on the eye for most people. «Χρώματα GOI» (top right) switches to v2's
   navy and gold; the choice is the person's and is rendered by the server
   (html[data-theme]), so a page never flashes in the other colours. Rules below use
   the role names only (--accent, --link, --label…), never a colour of their own. */
:root {
  --scale: 1;
  --navy: #0d1b4b;
  --navy-2: #13235e;
  --gold: #f5a623;
  --gold-soft: #ffd27f;
  --bg: #ffffff;
  --page-bg: #ffffff;
  --ink: #111111;
  --muted: #4b5563;
  --line: #d9dde3;
  --line-2: #b8bfc9;
  --read: #ffffff;
  --surface: var(--read);
  --glass: #ffffff;
  --glass-blur: #ffffff;
  --shadow: 0 1px 2px rgba(17, 17, 17, .06), 0 6px 20px rgba(17, 17, 17, .06);
  --header-bg: rgba(255, 255, 255, .96);
  --foot-bg: #f7f8fa;
  --soft-fill: #f5f6f8;
  --soft-fill-2: #eceef1;
  --strong: #000000;
  --link: #0b57d0;
  --heading2: #111111;
  --label: #4b5563;
  --eyebrow: #8a5300;
  --deco: #b87400;
  --accent: #111827;
  --on-accent: #ffffff;
  --accent-soft: rgba(11, 87, 208, .08);
  --accent-line: #b8bfc9;
  --accent-glow: 0 6px 18px rgba(17, 24, 39, .22);
  --hover-ink: #0b57d0;
  --hover-line: #0b57d0;
  --cite: #8a5300;
  --cite-line: rgba(138, 83, 0, .45);
  --date-ink: #b3261e;
  --chip-bg: #ffffff;
  --chip-ink: #111111;
  --chip-line: #b8bfc9;
  --user-bubble: #e8eefc;
  --on-user-bubble: #111111;
  --user-when: #4b5563;
  --notice-bg: #fff7e6;
  --notice-line: #e6b34d;
  --input-bg: #ffffff;
  --placeholder: #6b7280;
  --th-bg: #f4f5f7;
  --code-bg: #f1f2f4;
  --tile-live-bg: #f5f6f8;
  --tile-live-line: #e3e6ea;
  --tile-live-ink: #111111;
  --hi-mix: #000000;          /* an agent's colour, darkened to read on white */
  --tour-bg: #ffffff;
  --intro-bg: #ffffff;
  --halo: none;
  --hero-shadow: none;
  --logo-filter: brightness(0);
  --selection: #cfe0ff;
  --selection-ink: #000000;
  --ok: #1e7d3a;
  --ok-soft: #e8f5ec;
  --err: #b3261e;
  --err-soft: #fdecea;
  --on-err: #ffffff;
  --focus: #0b57d0;
  --focus-ring: rgba(11, 87, 208, .2);
  --stage-bg: radial-gradient(ellipse at 50% 40%, #182a6b 0%, #0d1b4b 58%, #070f2e 100%);
  --stage-line: #0d1b4b;
  --radius: 14px;
  --pill: 999px;
  --font-ui: "Quicksand", "Comfortaa", "Segoe UI", system-ui, sans-serif;
  --font: "Segoe UI", "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: calc(20px * var(--scale));
  color-scheme: light;
}
html[data-theme="goi"] {
  --bg: #0d1b4b;
  --page-bg: radial-gradient(ellipse at 50% 0%, #1a2c70 0%, #0d1b4b 62%) fixed, #0d1b4b;
  --ink: #f2f4fb;
  --muted: #bcc4df;
  --line: rgba(255, 255, 255, .16);
  --line-2: rgba(255, 255, 255, .28);
  --read: #142661;
  --glass: rgba(13, 27, 75, .8);
  --glass-blur: rgba(13, 27, 75, .66);
  --shadow: 0 18px 50px rgba(0, 0, 0, .25);
  --header-bg: rgba(13, 27, 75, .62);
  --foot-bg: rgba(13, 27, 75, .6);
  --soft-fill: rgba(255, 255, 255, .05);
  --soft-fill-2: rgba(255, 255, 255, .08);
  --strong: #ffffff;
  --link: #ffd27f;
  --heading2: #ffd27f;
  --label: #ffd27f;
  --eyebrow: #f5a623;
  --deco: #f5a623;
  --accent: #f5a623;
  --on-accent: #0d1b4b;
  --accent-soft: rgba(245, 166, 35, .14);
  --accent-line: rgba(245, 166, 35, .5);
  --accent-glow: 0 10px 28px rgba(245, 166, 35, .32);
  --hover-ink: #ffd27f;
  --hover-line: #f5a623;
  --cite: #ffd27f;
  --cite-line: rgba(255, 210, 127, .45);
  --date-ink: #ffb4a6;
  --chip-bg: rgba(13, 27, 75, .55);
  --chip-ink: #ffd27f;
  --chip-line: rgba(245, 166, 35, .5);
  --user-bubble: #f5a623;
  --on-user-bubble: #0d1b4b;
  --user-when: rgba(13, 27, 75, .75);
  --notice-bg: rgba(245, 166, 35, .1);
  --notice-line: rgba(245, 166, 35, .55);
  --input-bg: rgba(0, 0, 0, .28);
  --placeholder: #9aa5c8;
  --th-bg: rgba(255, 255, 255, .07);
  --code-bg: rgba(255, 255, 255, .1);
  --tile-live-bg: rgba(245, 166, 35, .1);
  --tile-live-line: rgba(245, 166, 35, .25);
  --tile-live-ink: #ffd27f;
  --hi-mix: #ffffff;
  --tour-bg: #13235e;
  --intro-bg: radial-gradient(ellipse at center, #1a2c70 0%, #0d1b4b 70%);
  --halo: radial-gradient(closest-side, rgba(13, 27, 75, .96) 0%, rgba(13, 27, 75, .9) 72%, rgba(13, 27, 75, 0) 100%);
  --hero-shadow: 0 1px 14px rgba(13, 27, 75, .95);
  --logo-filter: none;
  --selection: rgba(245, 166, 35, .45);
  --selection-ink: #ffffff;
  --ok: #6be89b;
  --ok-soft: rgba(107, 232, 155, .12);
  --err: #ff9b8a;
  --err-soft: rgba(255, 155, 138, .12);
  --on-err: #0d1b4b;
  --focus: #ffd27f;
  --focus-ring: rgba(245, 166, 35, .22);
  --stage-bg: radial-gradient(ellipse at 50% 40%, #0f1f5a 0%, #060c26 70%, #03071a 100%);
  --stage-line: rgba(245, 166, 35, .35);
  color-scheme: dark;
}
body[data-font="-1"] { --scale: .9; }
body[data-font="1"] { --scale: 1.12; }
body[data-font="2"] { --scale: 1.25; }
body[data-font="3"] { --scale: 1.4; }
:root:has(body[data-font="-1"]) { font-size: 18px; }
:root:has(body[data-font="1"]) { font-size: 22.4px; }
:root:has(body[data-font="2"]) { font-size: 25px; }
:root:has(body[data-font="3"]) { font-size: 28px; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--page-bg);
  color: var(--ink); font: 1rem/1.6 var(--font); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; min-height: 100vh;
  display: flex; flex-direction: column;
}
.page { flex: 1 0 auto; width: 100%; }
a { color: var(--link); text-underline-offset: .18em; }
h1, h2, h3 { font-family: var(--font-ui); font-weight: 700; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: .2rem 0 .4rem; text-wrap: balance; letter-spacing: .01em; }
h2 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 .7rem; color: var(--heading2); }
p { margin: 0 0 .8rem; }
.lead { color: var(--muted); font-size: 1.05rem; max-width: 46rem; }
.quiet { color: var(--muted); }
.small { font-size: .85rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sel { user-select: all; font-weight: 600; color: var(--ink); }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--on-accent); padding: .6rem 1rem; z-index: 60; border-radius: 0 0 10px 10px; }
.skip:focus { left: 1rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--selection); color: var(--selection-ink); }

/* drifting neurons behind the pages that have no live brain */
.particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.top, .page, .foot { position: relative; z-index: 1; }

/* header: logo and name, then the page buttons as pills */
.top { background: var(--header-bg); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(6px)) { .top { backdrop-filter: blur(14px); } }
.top-in, .tabs-in, .page, .foot-in { max-width: 72rem; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: .7rem; }
.brand { display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; font: 700 1.1rem/1.2 var(--font-ui); color: var(--ink); text-decoration: none; }
.brand img { height: 2.1rem; width: auto; display: block; filter: var(--logo-filter); }
.brand-name { padding-left: .75rem; border-left: 1px solid var(--line-2); }
.top-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.font { display: flex; gap: .35rem; }
.inline { display: inline; margin: 0; }
.tabs { border-top: 1px solid var(--line); }
.tabs-in { display: flex; gap: .45rem; overflow-x: auto; padding-block: .55rem; scrollbar-width: thin; }
.tab { display: inline-flex; align-items: center; min-height: max(44px, 2.7rem); padding: 0 1.05rem; font: 600 .95rem/1.2 var(--font-ui); color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: var(--pill); white-space: nowrap; }
.tab:hover { border-color: var(--hover-line); color: var(--hover-ink); }
.tab.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* buttons: ghost pills, the main one gold */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.8rem; padding: .45rem 1.2rem; border-radius: var(--pill); border: 1px solid var(--line-2); background: transparent; color: var(--ink); font: 600 .98rem/1.2 var(--font-ui); text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--hover-line); color: var(--hover-ink); }
.btn-main { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.btn-main:hover { color: var(--on-accent); box-shadow: var(--accent-glow); }
.btn-quiet { background: transparent; }
.btn-quiet.is-active { border-color: var(--hover-line); color: var(--hover-ink); }
.btn-wide { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }

.page { padding-block: 1.6rem 3rem; }
.block { margin-top: 2rem; }
.count { color: var(--muted); font-weight: 400; font-size: .9rem; }
.crumbs { margin-bottom: .4rem; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-family: var(--font-ui); font-weight: 600; }
.foot { border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; background: var(--foot-bg); }
/* Every link and button is at least 44 px tall to the finger, the footer's too. */
.foot a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-in { padding-block: 1rem; }

.msg { padding: .8rem 1rem; border-radius: var(--radius); border: 1px solid; }
.msg-ok { background: var(--ok-soft); border-color: var(--ok); }
.msg-err { background: var(--err-soft); border-color: var(--err); }

/* page titles in v2's style: a short gold rule under them */
.page > h1:first-child, .page > .crumbs + h1, .page-head h1 { position: relative; padding-bottom: .55rem; margin-bottom: .9rem; }
.page > h1:first-child::after, .page > .crumbs + h1::after, .page-head h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 4.5rem; height: 3px; border-radius: 3px; background: var(--deco); }

/* generic */
.list { margin: 0; padding-left: 1.2rem; display: grid; gap: .55rem; }
.examples li { max-width: 50rem; }
.big { font-size: 1.15rem; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: .9rem; }
.card { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem; background: var(--glass); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--ink); min-width: 0; }
@supports (backdrop-filter: blur(6px)) { html[data-theme="goi"] .card { background: var(--glass-blur); backdrop-filter: blur(12px); } }
.card:hover { border-color: var(--hover-line); }
.card-type { font: 700 .76rem/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--label); }
.card-title { font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.card-text { color: var(--muted); font-size: .92rem; overflow-wrap: anywhere; }

/* forms */
input[type=email], input[type=password], input[type=search], input[type=text], textarea {
  width: 100%; font: 1rem/1.5 var(--font); padding: .7rem 1rem; border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--input-bg); color: var(--ink); min-height: 3rem;
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, textarea:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.check { display: flex; gap: .6rem; align-items: center; min-height: 44px; font-weight: 400 !important; margin: .4rem 0 .8rem; }
.check input { width: 1.35rem; height: 1.35rem; accent-color: var(--accent); flex: none; }

/* login: v2's card over the drifting neurons */
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 6vh 16px 3rem; }
.login-logo { position: fixed; top: 1.1rem; left: 1.4rem; z-index: 2; }
.login-logo img { height: 2.2rem; width: auto; display: block; filter: var(--logo-filter); }
.login { position: relative; z-index: 1; width: 100%; max-width: 30rem; background: var(--glass); border: 1px solid var(--line); border-radius: 18px; padding: 2rem 1.8rem 1.6rem; box-shadow: var(--shadow); }
@supports (backdrop-filter: blur(6px)) { html[data-theme="goi"] .login { background: var(--glass-blur); backdrop-filter: blur(16px); } }
.eyebrow { color: var(--eyebrow); font: italic 600 1rem/1.3 var(--font-ui); margin: 0 0 .5rem; }
.login h1 { font-size: 1.35rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .3rem; }
.login .lead { font-size: .95rem; }
.stack { display: grid; gap: .45rem; }
.stack label { font: 600 .85rem/1.3 var(--font-ui); color: var(--muted); margin-top: .4rem; }
.stack .check { font-family: var(--font); font-size: .9rem; color: var(--ink); }
.login .btn-main { margin-top: .4rem; min-height: 3.1rem; font-size: 1.05rem; }
.hint { color: var(--muted); font-size: .9rem; margin-top: 1.2rem; }

/* the intro: v2's loading lines, once per browser session */
.intro { position: fixed; inset: 0; z-index: 80; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; background: var(--intro-bg); color: var(--ink); }
html.goi-intro .intro { display: flex; }
.intro img { height: 2.8rem; width: auto; filter: var(--logo-filter); }
.intro-line { min-height: 1.6rem; font: 600 1.05rem/1.4 var(--font-ui); text-align: center; padding: 0 16px; }
.intro-bar { width: min(320px, 70vw); height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.intro-bar span { display: block; height: 100%; width: 0; background: var(--deco); }
.intro.out { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .intro { transition: opacity .5s ease; }
  .intro-bar span { animation: introbar 1.6s ease-out forwards; }
  .intro-line { animation: fadeup .45s ease both; }
}
@keyframes introbar { to { width: 100%; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* chat */
.chat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.chat.now-open { grid-template-columns: minmax(0, 1fr) 19rem; }
.chat-main { min-width: 0; }
.messages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.msg-row { display: flex; }
.msg-row.user { justify-content: flex-end; }
.bubble { max-width: min(46rem, 100%); padding: .9rem 1.15rem .55rem; border-radius: 18px; background: var(--read); border: 1px solid var(--line); overflow-wrap: anywhere; min-width: 0; line-height: 1.65; }
.msg-row.assistant .bubble { border-bottom-left-radius: 6px; }
.msg-row.user .bubble { background: var(--user-bubble); border-color: var(--user-bubble); color: var(--on-user-bubble); border-bottom-right-radius: 6px; }
.msg-row.user .bubble a { color: var(--on-user-bubble); }
.msg-row.user .when { color: var(--user-when); }
/* «Από την ομάδα: …» over a team message: the bubble's own quiet ink, not the page's (in the GOI
   colours the page's --muted is a pale blue that cannot be read on the gold bubble). */
.msg-row.user .bubble .quiet { color: var(--user-when); }
.msg-row.notice .bubble { background: var(--notice-bg); border-color: var(--notice-line); }
.bubble p:last-of-type { margin-bottom: .4rem; }
.bubble ul, .bubble ol { padding-left: 1.3rem; }
.bubble h1, .bubble h2, .bubble h3 { font-size: 1.08rem; color: var(--heading2); margin: .9rem 0 .4rem; }
.bubble table, .prose table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; margin: .4rem 0 .8rem; }
.bubble th, .bubble td, .prose th, .prose td { border: 1px solid var(--line-2); padding: .4rem .65rem; text-align: left; vertical-align: top; overflow-wrap: normal; word-break: normal; }
.bubble th, .prose th { background: var(--th-bg); font-weight: 700; }
/* Text wraps inside its cell, so every column is on screen; a number never breaks («350,0» has no
   space to break at, and overflow-wrap stays normal). Only a table too wide even then scrolls sideways. */
.bubble td, .bubble th, .prose td, .prose th { min-width: 5.5rem; }
/* A table wider than its bubble (a phone) keeps whole words and scrolls sideways; a shadow at the
   edge that has more shows that it does (the shadows ride the scroll, the covers stay with the text). */
.bubble table {
  background:
    linear-gradient(to right, var(--read) 30%, transparent) left / 2.2rem 100% no-repeat local,
    linear-gradient(to left, var(--read) 30%, transparent) right / 2.2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .22), transparent) left / .9rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .22), transparent) right / .9rem 100% no-repeat scroll;
}
@media (max-width: 560px) {
  .bubble td, .bubble th, .prose td, .prose th { min-width: 0; padding: .3rem .45rem; font-size: .92em; }
}
.bubble code, .prose code { background: var(--code-bg); border-radius: 5px; padding: .05rem .3rem; font-size: .9em; }
.when { display: block; font-size: .78rem; color: var(--muted); text-align: right; }
.cite { color: var(--cite); font-weight: 600; }
.ext { font-size: .8em; }
.files { display: flex; flex-wrap: wrap; gap: .6rem; margin: .4rem 0; }
.file-img { display: block; max-width: 100%; }
.file-audio { display: block; width: 100%; max-width: 26rem; }
.file-img img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.live { border-style: dashed; }
#live-text { white-space: pre-wrap; }
.empty { padding: 1.2rem; background: var(--glass); border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--muted); }
.older { text-align: center; }
.suggest { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 .7rem; }
.chip { font: 600 .9rem/1.3 var(--font-ui); min-height: max(44px, 2.6rem); padding: .45rem 1rem; border-radius: var(--pill); border: 1px solid var(--chip-line); background: var(--chip-bg); color: var(--chip-ink); cursor: pointer; white-space: normal; max-width: 100%; text-align: left; }
.chip:hover { border-color: var(--hover-line); background: var(--accent-soft); }
/* the composer: v2's rounded glass box */
.ask { display: grid; gap: .6rem; background: var(--glass); border: 1px solid var(--line); border-radius: 22px; padding: .7rem; }
.ask:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.ask textarea { min-height: 5.2rem; resize: vertical; border: 0; background: transparent; box-shadow: none; padding: .55rem .6rem; }
.ask textarea:focus { box-shadow: none; }
.ask-actions { display: flex; gap: .6rem; justify-content: space-between; flex-wrap: wrap; align-items: center; }
.ask-actions .btn-main { min-width: 10rem; }
/* «Αυτόματα / Γρήγορα / Σε βάθος» under the question: three pills, the chosen one filled and ticked. */
.ask-mode { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: 0 .3rem; }
.ask-mode-label { font: 600 .85rem/1.2 var(--font-ui); color: var(--label); margin-right: .15rem; }
.mode { position: relative; display: inline-flex; cursor: pointer; }
.mode input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mode span { display: inline-flex; align-items: center; min-height: 44px; padding: .3rem .9rem; border: 1px solid var(--chip-line); border-radius: var(--pill); background: var(--chip-bg); color: var(--chip-ink); font: 600 .88rem/1.2 var(--font-ui); }
.mode:hover span { border-color: var(--hover-line); }
.mode input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.mode input:checked + span::before { content: "✓" / ""; margin-right: .35rem; }
.mode input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
/* «Τι κάνω τώρα»: one line above the question box, the buttons beside it. */
.now-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; margin: .3rem 0 .7rem; }
/* Two short lines at most: what I am doing (cut with «…» when long), then the time and «you can keep writing». */
.now-line { display: flex; flex-direction: column; flex: 1 1 18rem; min-width: 0; margin: 0; font-size: .95rem; }
.now-main { display: flex; align-items: baseline; gap: .35rem; min-width: 0; }
.now-label { flex: none; font: 700 .85rem/1.3 var(--font-ui); color: var(--label); }
.now-what { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-sub { color: var(--muted); }
.now-eta:not([hidden]) + .now-free::before { content: "·" / ""; margin: 0 .35rem; }
.now-bar.is-busy .now-label::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .35rem; border-radius: 50%; background: var(--deco); vertical-align: .05rem; }
@media (prefers-reduced-motion: no-preference) {
  .now-bar.is-busy .now-label::before { animation: now-blink 1.2s ease-in-out infinite; }
  @keyframes now-blink { 50% { opacity: .3; } }
}
.now-bar .chat-controls { margin: 0; }
/* «Λεπτομέρειες»: the steps in a small side panel, closed until opened. */
.now { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; background: var(--glass); border: 1px solid var(--line); border-radius: 18px; padding: .9rem 1rem; }
@supports (backdrop-filter: blur(6px)) { html[data-theme="goi"] :is(.now, .ask) { background: var(--glass-blur); backdrop-filter: blur(14px); } }
.now-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.now h2 { margin: 0; min-width: 0; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--label); overflow-wrap: anywhere; }
.now-close { flex: none; min-height: 44px; margin-left: auto; }
.plan, .steps { margin: 0 0 .8rem; padding-left: 1.3rem; display: grid; gap: .35rem; font-size: .92rem; }
.steps { list-style: none; padding-left: 0; }
.steps li::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.steps li.current::before { content: "… "; color: var(--deco); }
.steps li.current { font-weight: 600; color: var(--link); }
.plan li.completed { color: var(--muted); text-decoration: line-through; }
.plan li.in_progress { font-weight: 700; color: var(--link); }

/* documents */
.upload { display: grid; gap: .8rem; max-width: 40rem; }
.drop { display: grid; gap: .3rem; place-items: center; text-align: center; padding: 1.8rem 1rem; border: 2px dashed var(--accent-line); border-radius: 18px; background: var(--glass); cursor: pointer; }
.drop:hover, .drop.is-over { border-color: var(--hover-line); background: var(--accent-soft); }
.drop-title { font: 700 1.2rem/1.3 var(--font-ui); color: var(--eyebrow); }
.drop input, .camera input { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* The camera button is for phones and tablets: shown on a touch screen only. */
.camera { position: relative; display: none; }
@media (pointer: coarse) { .camera { display: inline-flex; } }
.docs li { overflow-wrap: anywhere; }
.list.docs { list-style: none; padding: 0; gap: .5rem; }
.list.docs li { background: var(--glass); border: 1px solid var(--line); border-radius: 12px; }
/* The whole row opens the document (a 44 px target); only its name is underlined, as before. */
.list.docs a { display: block; min-height: 44px; padding: .6rem .9rem; text-decoration: none; }
.list.docs .doc-name { text-decoration: underline; }

/* brain */
.brain-tools { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin: 1rem 0 .4rem; }
.search { display: flex; gap: .5rem; flex: 1 1 26rem; max-width: 40rem; }
.search input { flex: 1; min-width: 0; border-radius: var(--pill); padding-left: 1.2rem; background: var(--glass); }
.note { max-width: 50rem; background: var(--read); border: 1px solid var(--line); border-radius: 18px; padding: 1.5rem 1.6rem; line-height: 1.7; }
.note h1 { color: var(--ink); }
/* Nothing in a note is wider than the screen: a long web address or email in «Πηγές» breaks where it
   must (the bubble does the same); a table, a block of code or a picture stays inside the note and
   scrolls sideways itself (the table rule is with the bubble's, above). */
.note, .prose { overflow-wrap: anywhere; min-width: 0; }
.prose pre { max-width: 100%; overflow-x: auto; white-space: pre; }
.prose img, .prose video { max-width: 100%; height: auto; }
.prose h2 { margin-top: 1.4rem; font-size: 1.1rem; color: var(--heading2); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose strong { color: var(--strong); }

/* citations jump to their item in «Πηγές», which lights up */
a.cite { text-decoration: none; border-bottom: 2px solid var(--cite-line); }
a.cite:hover { border-bottom-color: var(--deco); }
.sources li { scroll-margin-top: 6rem; border-radius: 6px; }
.sources li:target { background: rgba(245, 166, 35, .22); box-shadow: 0 0 0 6px rgba(245, 166, 35, .22); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } .sources li { transition: background-color .4s ease, box-shadow .4s ease; } }

/* tour */
.tour { position: fixed; inset: 0; background: rgba(5, 10, 30, .62); display: grid; place-items: center; padding: 16px; z-index: 50; }
.tour[hidden] { display: none; }
.tour-card { background: var(--tour-bg); border: 1px solid var(--line-2); border-radius: 18px; max-width: 32rem; width: 100%; padding: 1.6rem; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.tour-card h2 { font-size: 1.3rem; color: var(--eyebrow); }
.tour-actions { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 1rem; }
.tour-count { color: var(--muted); font-size: .85rem; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .card, .action, .chip, .tab, .door, .idea { transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
  .btn-main:hover, .door:hover { transform: translateY(-2px); }
}

/* ---- the live pages: the brain behind, glass in front ---------------------------- */
html[data-theme="goi"] .live-page { background: radial-gradient(ellipse at 50% 30%, #182a6b 0%, var(--navy) 65%) fixed, var(--navy); }
.brain-bg { position: fixed; inset: 0; z-index: 0; }
.brain-tip { position: fixed; z-index: 30; background: var(--navy-2); color: #fff; border: 1px solid var(--line-2); font-size: .85rem; padding: .35rem .6rem; border-radius: 8px; pointer-events: none; max-width: 22rem; }
.live-page .top, .live-page .foot { position: relative; z-index: 2; }
.live-page .page { position: relative; z-index: 1; pointer-events: none; }
.live-page .page .glass, .live-page .page a, .live-page .page button, .live-page .page input, .live-page .page form, .live-page .page label { pointer-events: auto; }
.glass { background: var(--glass); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
@supports (backdrop-filter: blur(6px)) { html[data-theme="goi"] .glass { background: var(--glass-blur); backdrop-filter: blur(14px) saturate(1.1); } }

/* home: v2's hero and doors over the living brain */
.hero { padding: 1.2rem 1.5rem 1.1rem; max-width: 56rem; }
.hero .lead { margin-bottom: .2rem; }
/* v2's soft navy halo behind the headline, so the neurons never cover the words */
.home-front .hero { margin: .4rem auto 0; padding: 2rem 3.5rem 1.8rem; max-width: 62rem; text-align: center; background: var(--halo); border: 0; box-shadow: none; backdrop-filter: none; text-shadow: var(--hero-shadow); }
.home-front .hero h1 { font-size: clamp(1.6rem, 3.6vw, 2.6rem); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }
.home-front .hero h1 span, .accent { color: var(--eyebrow); }
.home-front .hero .lead { margin: 0 auto .2rem; }

.doors, .three { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.tile, .door { display: flex; flex-direction: column; gap: .45rem; padding: 1.3rem 1.25rem 1.15rem; min-height: 14rem; text-decoration: none; color: var(--ink); border: 1px solid var(--line); }
.tile:hover, .door:hover { border-color: var(--hover-line); }
.tile-icon { width: 3.1rem; height: 3.1rem; color: var(--deco); }
.tile-icon svg { width: 100%; height: 100%; }
.tile-title { font: 700 1.3rem/1.2 var(--font-ui); }
.tile-text { color: var(--muted); font-size: .95rem; }
.tile-live { margin-top: auto; font-size: .88rem; font-weight: 600; color: var(--tile-live-ink); background: var(--tile-live-bg); border: 1px solid var(--tile-live-line); border-radius: 10px; padding: .45rem .7rem; }
.tile-live strong { color: var(--strong); }
.tile-live.is-busy::before { content: ""; display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; background: var(--ok); margin-right: .45rem; vertical-align: middle; box-shadow: 0 0 0 0 rgba(107, 232, 155, .6); }
@media (prefers-reduced-motion: no-preference) { .tile-live.is-busy::before { animation: pulse 2s infinite; } }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(107, 232, 155, 0); } 100% { box-shadow: 0 0 0 0 rgba(107, 232, 155, 0); } }
.bump { display: inline-block; }
/* the team as a row of little robots, overlapping like a stack of avatars */
.crew { display: flex; flex-wrap: nowrap; margin: .15rem 0 .1rem .4rem; }
.crew-face { position: relative; width: 2.3rem; height: 2.3rem; flex: none; margin-left: -.55rem; border-radius: 50%; background: #e9edf8; border: 2px solid var(--bg); overflow: hidden; display: inline-grid; place-items: center; }
.crew-face svg { width: 2.6rem; height: auto; margin-top: .55rem; }
.crew-face[data-status="idle"], .crew-face[data-status="off"] { filter: saturate(.6) brightness(.85); }
.crew-face[data-status="working"] { z-index: 1; border-color: var(--deco); box-shadow: 0 0 0 2px var(--deco); }
.crew-face[data-status="queued"] { border-color: var(--deco); }

.quick-ask { display: flex; gap: .6rem; padding: .6rem; margin-top: 1.1rem; border-radius: var(--pill); }
.quick-ask input { flex: 1; min-width: 0; border: 0; background: transparent; border-radius: var(--pill); }
.quick-ask input:focus { box-shadow: none; }
.quick-ask:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }

.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.1rem; }
.panel { padding: 1.1rem 1.3rem; min-width: 0; }
.panel h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .07em; color: var(--label); }
.dl, .mini-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .5rem; }
.dl a { display: grid; gap: .05rem; text-decoration: none; color: var(--ink); padding: .5rem .75rem; border-radius: 12px; background: var(--soft-fill); border: 1px solid var(--line); }
.dl a:hover { border-color: var(--hover-line); }
.dl-date { font-size: .82rem; font-weight: 700; color: var(--date-ink); }
.dl-title { font-weight: 600; }
.mini-list li { overflow-wrap: anywhere; }
/* A note in the list is a whole row to the finger (44 px), so the rows sit closer together. */
.mini-list a { display: block; padding-block: .6rem; color: var(--ink); text-decoration: none; }
.mini-list:has(> li > a) { gap: 0; }
.mini-list a:hover { text-decoration: underline; color: var(--link); }
.mini-type { font: 700 .7rem/1.4 var(--font-ui); text-transform: uppercase; letter-spacing: .05em; color: var(--label); background: var(--soft-fill-2); border-radius: 6px; padding: .1rem .4rem; }
.mini-list li.is-new .mini-type { background: var(--accent); color: var(--on-accent); }
.panel .small a { display: inline-flex; align-items: center; min-height: 44px; }

/* ideas: v2's «Learn», for his work */
.idea-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.idea-group { padding: 1.1rem 1.2rem; }
.idea-group h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .07em; color: var(--label); }
.idea { display: block; width: 100%; text-align: left; margin: 0 0 .55rem; padding: .7rem .95rem; border-radius: 14px; border: 1px solid var(--line-2); background: var(--soft-fill); color: var(--ink); font: 600 .95rem/1.4 var(--font); cursor: pointer; }
.idea:hover { border-color: var(--hover-line); background: var(--accent-soft); }
.idea[disabled] { opacity: .6; cursor: progress; }

/* ---- the team ---------------------------------------------------------------------- */
.agents-front .hero, .page-hero { margin-bottom: .2rem; }
.crew-status { font-weight: 700; color: var(--link); margin: .3rem 0 0; }
.stage { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.1rem; margin: 1.3rem 0; }
.station { --agent-hi: color-mix(in srgb, var(--agent) 50%, var(--hi-mix)); padding: 1rem 1.15rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; border-top: 5px solid var(--agent-hi); min-width: 0; }
.station[data-status="off"] { filter: grayscale(.85); opacity: .8; }
.station-top { display: flex; gap: .7rem; align-items: flex-start; }
.avatar { flex: 0 0 auto; width: 116px; min-height: 132px; border-radius: 50%; background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, .95) 0 56%, rgba(255, 255, 255, .25) 57%, transparent 70%); }
.avatar > svg { display: block; }
.say { position: relative; flex: 1; min-height: 4.4rem; margin: .4rem 0 0; padding: .6rem .8rem; background: var(--read); border: 2px solid var(--agent-hi); border-radius: 14px; font-size: .95rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.say::before { content: ""; position: absolute; left: -10px; top: 18px; border: 8px solid transparent; border-right-color: var(--agent-hi); border-left: 0; }
.station[data-status="idle"] .say, .station[data-status="off"] .say { border-style: dashed; color: var(--muted); font-weight: 500; }
.station-name { font-size: 1.15rem; margin: .2rem 0 0; color: var(--ink); }
.status-badge { align-self: flex-start; font: 700 .78rem/1.3 var(--font-ui); padding: .2rem .6rem; border-radius: var(--pill); background: var(--soft-fill-2); color: var(--muted); }
.station[data-status="working"] .status-badge { background: var(--gold); color: var(--navy); }
.station[data-status="queued"] .status-badge { background: var(--accent-soft); color: var(--link); }
.station-role { margin: .2rem 0 0; }
.station-when, .station-last { margin: 0; color: var(--muted); font-size: .88rem; }
.station-steps { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .2rem; font-size: .88rem; }
.station-steps li::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.station-steps li.current { font-weight: 700; color: var(--agent-hi); }
.station-steps li.current::before { content: "▶ "; color: var(--agent-hi); }
.station-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: auto; padding-top: .5rem; }
.station-msg { margin: 0; color: var(--link); font-weight: 600; }
.helpers { display: flex; flex-wrap: wrap; gap: .5rem; }
.helper { --agent-hi: color-mix(in srgb, var(--agent) 50%, var(--hi-mix)); display: grid; justify-items: center; gap: .1rem; width: 6.6rem; text-align: center; }
.helper svg { border-radius: 50%; background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, .92) 0 56%, transparent 58%); }
.helper-name { font-size: .78rem; font-weight: 800; color: var(--agent-hi); }
.helper-say { font-size: .74rem; color: var(--muted); line-height: 1.25; max-height: 2.6em; overflow: hidden; }
.helper[data-status="done"] .helper-say { color: var(--ok); font-weight: 700; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.timeline .run { --agent-hi: color-mix(in srgb, var(--agent) 50%, var(--hi-mix)); padding: .45rem .75rem; border-left: 5px solid var(--agent-hi); background: var(--soft-fill); border-radius: 10px; overflow-wrap: anywhere; }

/* robots: asleep, waiting, working */
.robot .eyes-open, .robot .mouth { display: none; }
.robot .zzz { display: inline; }
[data-status="working"] .robot .eyes-open, [data-status="queued"] .robot .eyes-open, .robot-helper .eyes-open { display: inline; }
[data-status="working"] .robot .eyes-closed, [data-status="queued"] .robot .eyes-closed, .robot-helper .eyes-closed { display: none; }
[data-status="working"] .robot .mouth, .robot-helper .mouth { display: inline; }
[data-status="working"] .robot .zzz, [data-status="queued"] .robot .zzz, [data-status="off"] .robot .zzz, .robot-helper .zzz { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .robot .zzz text { animation: zfloat 3s ease-in-out infinite; }
  .robot .zzz text:nth-child(2) { animation-delay: .6s; }
  .robot .zzz text:nth-child(3) { animation-delay: 1.2s; }
  [data-status="idle"] .robot .robot-body { animation: breathe 4s ease-in-out infinite; transform-origin: 60px 120px; }
  [data-status="working"] .robot .robot-body, .robot-helper .robot-body { animation: bob .9s ease-in-out infinite; }
  [data-status="working"] .robot .bulb, .robot-helper .bulb { animation: blinkbulb .8s steps(2, jump-none) infinite; }
  [data-status="working"] .robot .gear { animation: spin 2.4s linear infinite; transform-origin: 60px 99px; transform-box: view-box; }
  [data-status="working"] .robot .eye, .robot-helper .eye { animation: blink 3.6s infinite; transform-origin: center; transform-box: fill-box; }
  [data-status="working"] .robot .arm-r { animation: wave 1.2s ease-in-out infinite; transform-origin: 93px 88px; transform-box: view-box; }
  [data-status="queued"] .robot .pupil { animation: look 2.4s ease-in-out infinite; }
  .helper { animation: popin .45s cubic-bezier(.2, 1.6, .4, 1) both; }
  .helper.leaving { animation: leave 1.2s ease-in both; }
  .bump { animation: bump .6s ease; }
  .say { transition: border-color .3s ease; }
}
@keyframes zfloat { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes blinkbulb { 0% { opacity: 1; } 100% { opacity: .25; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes wave { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-28deg); } }
@keyframes look { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-2.5px); } 70% { transform: translateX(2.5px); } }
@keyframes popin { from { opacity: 0; transform: scale(.3) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes leave { 0% { transform: rotate(0); } 20% { transform: rotate(-10deg); } 40% { transform: rotate(10deg); } 100% { opacity: 0; transform: translateY(-14px) scale(.6); } }
@keyframes bump { 50% { transform: scale(1.35); color: var(--deco); } }

.copy-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.copy-row input { flex: 1 1 22rem; min-width: 0; font: .9rem/1.4 var(--font); }

/* help and other text pages: each section on a glass panel */
.page > .block { background: var(--glass); border: 1px solid var(--line); border-radius: 18px; padding: 1.1rem 1.3rem; }
.page > .block:has(> .cards) { background: transparent; border: 0; padding: 0; }
@supports (backdrop-filter: blur(6px)) { html[data-theme="goi"] .page > .block { background: var(--glass-blur); backdrop-filter: blur(12px); } }

/* «Χρώματα GOI» ↔ «Φωτεινό»: a small two-colour disc says what the button switches to. */
.theme-toggle { gap: .45rem; }
.theme-toggle::before { content: ""; width: .85rem; height: .85rem; border-radius: 50%; flex: none; background: linear-gradient(135deg, #0d1b4b 50%, #f5a623 50%); border: 1px solid var(--line-2); }
html[data-theme="goi"] .theme-toggle::before { background: linear-gradient(135deg, #ffffff 50%, #111111 50%); }

/* Home: the living brain in its own dark window, the four ways in beneath it. The
   window is dark in both colour sets, so the brain is always drawn the same way and
   always seen; the doors sit under it, never on top of the neurons. */
.home-page .page { padding-top: 1rem; }
.home-head { margin: .4rem 0 .8rem; }
.home-head .eyebrow { margin-bottom: .15rem; }
.home-head h1 { font-size: clamp(1.5rem, 3.2vw, 2.3rem); margin: 0; }
.home-head h1 span { color: var(--eyebrow); }
.home-stage {
  --ink: #f2f4fb; --muted: #c6cde6; --strong: #ffffff; --bg: #0d1b4b; --deco: #f5a623; --ok: #6be89b;
  --line: rgba(255, 255, 255, .16); --line-2: rgba(255, 255, 255, .3);
  --hover-line: #f5a623; --hover-ink: #ffd27f; --focus: #ffd27f; --link: #ffd27f;
  --tile-live-bg: rgba(245, 166, 35, .12); --tile-live-line: rgba(245, 166, 35, .3); --tile-live-ink: #ffd27f;
  color: var(--ink); background: var(--stage-bg); border: 1px solid var(--stage-line); border-radius: 22px;
  overflow: hidden; box-shadow: 0 18px 46px rgba(7, 15, 46, .26);
}
.stage-brain { position: relative; height: clamp(14rem, 40vh, 30rem); view-transition-name: brain-stage; }
.brain-stage-canvas { position: absolute; inset: 0; }
.brain-stage-canvas canvas { display: block; }
.stage-caption { position: absolute; z-index: 1; left: 1rem; top: .9rem; margin: 0; max-width: calc(100% - 2rem); padding: .35rem .85rem; border-radius: var(--pill); background: rgba(7, 15, 46, .74); border: 1px solid var(--line); font: 600 .85rem/1.35 var(--font-ui); pointer-events: none; }
.stage-caption strong { color: var(--hover-ink); }
.stage-pulse { display: inline-block; width: .55rem; height: .55rem; margin-right: .5rem; border-radius: 50%; background: var(--ok); vertical-align: middle; box-shadow: 0 0 0 0 rgba(107, 232, 155, .6); }
.stage-hint { position: absolute; z-index: 1; left: 1rem; bottom: .8rem; margin: 0; max-width: min(34rem, calc(100% - 2rem)); padding: .35rem .85rem; border-radius: 14px; background: rgba(7, 15, 46, .74); border: 1px solid var(--line); font-size: .85rem; color: var(--muted); pointer-events: none; }
.stage-doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; padding: .9rem; border-top: 1px solid var(--line); background: rgba(7, 15, 46, .45); }
.stage-door { min-height: 0; gap: .45rem; padding: .95rem 1rem .9rem; border-radius: 16px; background: rgba(255, 255, 255, .06); }
.stage-door:hover { background: rgba(255, 255, 255, .1); }
.door-head { display: flex; align-items: center; gap: .7rem; }
.stage-door .tile-icon { flex: none; width: 2.2rem; height: 2.2rem; }
.stage-door .tile-title { font-size: 1.05rem; }
.stage-door .tile-text { font-size: .86rem; }
.stage-door .tile-live { font-size: .8rem; padding: .35rem .6rem; }
.stage-door .crew { margin: 0 0 0 .6rem; }
.stage-door .crew-face { width: 1.7rem; height: 1.7rem; margin-left: -.6rem; }
.stage-door .crew-face svg { width: 1.95rem; margin-top: .4rem; }
.home-stage + * { margin-top: 1.1rem; }
.stage-door .tile-short { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .stage-pulse { animation: pulse 2s infinite; }
  /* From one page to the next the brain window carries over (the 3D page names its
     canvas the same); where the browser cannot, the page simply changes. */
  @view-transition { navigation: auto; }
  ::view-transition-group(brain-stage) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
}
@media (max-width: 1100px) {
  .stage-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .home-page .page { padding-top: .6rem; }
  .home-head { margin: 0 0 .5rem; }
  .home-head h1 { font-size: 1.35rem; }
  .home-stage { border-radius: 18px; }
  .stage-hint { display: none; }
  .stage-caption { left: .6rem; top: .6rem; max-width: calc(100% - 1.2rem); font-size: .76rem; padding: .3rem .7rem; }
  .stage-brain { height: clamp(9.5rem, 30vh, 15rem); }
  /* The four doors as two rows of two, icon over a short name, so they sit right under
     the brain on the first screen of a small phone. The full name stays the link's name
     for a screen reader; the short one is what the eye reads. */
  .stage-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: .6rem; }
  .stage-door { justify-content: center; min-height: 0; padding: .6rem .35rem; text-align: center; }
  .stage-door .door-head { flex-direction: column; gap: .35rem; }
  .stage-door .tile-icon { width: 2rem; height: 2rem; }
  .stage-door .tile-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stage-door .tile-short { display: block; font-weight: 600; font-size: .9rem; line-height: 1.2; }
  .stage-door .tile-text, .stage-door .tile-live, .stage-door .crew { display: none; }
  .cap-lead { display: none; }
}

/* Narrow screens. Kept at the end of the file so they override the rules above. */
@media (max-width: 1100px) {
  .doors, .three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile, .door { min-height: 0; }
}
@media (max-width: 960px) {
  .chat, .chat.now-open { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  h1 { font-size: 1.4rem; }
  .bubble { max-width: 100%; }
  .ask-actions .btn { width: 100%; }
  .brand-name { display: none; }
  .top-in { padding-block: .55rem; }
  /* the header on one row: logo, then A− A+ and the colours as one small control */
  .top-in { gap: .4rem; }
  .brand img { height: 1.45rem; }
  .top-actions { gap: .3rem; }
  .top-actions .btn { min-height: max(44px, 2.4rem); padding: .25rem .5rem; font-size: .78rem; }
  .font { gap: 0; }
  .font .btn, .top-actions .theme-toggle { min-width: 44px; padding: .25rem .35rem; justify-content: center; border-radius: 0; }
  .font .btn:first-child { border-radius: var(--pill) 0 0 var(--pill); }
  .font .btn + .btn { margin-left: -1px; }
  .top-actions .theme-toggle { margin-left: calc(-.3rem - 1px); border-radius: 0 var(--pill) var(--pill) 0; gap: 0; }
  .theme-toggle::before { width: 1rem; height: 1rem; }
  /* «Βοήθεια» as «?» on a phone; the word stays its name for screen readers and its tooltip */
  .hl-help { min-width: max(44px, 2.4rem); justify-content: center; }
  .hl-help::before { content: "?" / ""; font: 700 1.05rem/1 var(--font-ui); }
  .hl-help .hl-label, .theme-toggle .tt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabs-in { padding-block: .45rem; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .tab { min-height: max(44px, 2.5rem); padding: 0 .85rem; font-size: .88rem; }
  .doors, .three { grid-template-columns: minmax(0, 1fr); }
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .quick-ask { flex-direction: column; border-radius: 20px; }
  .stage { grid-template-columns: minmax(0, 1fr); }
  .avatar { width: 92px; min-height: 105px; }
  .avatar svg { width: 92px; height: auto; }
  .hero { padding: .9rem 1rem .7rem; }
  .home-front .hero { padding: 1.2rem 1.1rem 1rem; }
  .home-front .hero h1 { font-size: 1.45rem; }
  .tile-title { font-size: 1.2rem; }
  .login { padding: 1.6rem 1.2rem 1.3rem; }
  .login-logo { position: static; margin: 0 auto 1.2rem; }
  .login-body { place-items: start center; padding-top: 1.4rem; }
}

/* ---------------------------------------------------------------- chat-controls
   «Διακοπή» while an answer is being written, «Νέα συζήτηση» always (public/chat.js). */
.chat-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin: .3rem 0 .7rem; }
.now-more[aria-expanded="true"] { border-color: var(--hover-line); color: var(--hover-ink); background: var(--accent-soft); }
.chat-controls .btn[hidden] { display: none; }
.chat-stop { border-color: var(--err); color: var(--err); }
.chat-stop:hover:not(:disabled) { background: var(--err-soft); }
.chat-controls .btn:disabled { opacity: .55; cursor: default; }
/* /chat-controls */
/* «Οι προτιμήσεις σας» on the help page: each rule with «Αφαίρεση» beside it. */
.list.prefs { list-style: none; padding: 0; gap: .5rem; max-width: 52rem; }
.list.prefs li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; padding: .55rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--glass); }
.pref-text { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
.pref-remove { flex: none; min-height: 44px; }
.prefs-msg:empty { display: none; }
/* ===== onboarding (first-login interview card) — feat/onboarding ===== */
.onboard-card { border-left: 4px solid var(--accent, #0e5b66); }
.onboard-card h2 { margin-top: 0; }
.onboard-card[hidden] { display: none; }
.onboard-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .6rem; }
.onboard-actions .btn { min-height: 44px; }
/* ===== end onboarding ===== */
/* ===== Terms & data (agent B: terms.ts / terms-views.ts) ===== */
.terms-text { max-height: 60vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: .6rem 1.2rem 1rem; margin: 1rem 0; }
.terms-text h1 { font-size: 1.3rem; }
.terms-text blockquote { margin: .8rem 0; padding: .6rem 1rem; border-left: 4px solid var(--accent); background: var(--accent-soft); }
.terms-text p { margin: .45rem 0; }
.terms-end { text-align: center; color: var(--muted); margin-top: 1.4rem; }
.terms-accept { display: grid; gap: .3rem; margin-bottom: 2rem; }
.terms-tick { align-items: flex-start; }
.terms-tick input { flex: 0 0 auto; margin-top: .15rem; }
.data-confirm { border: 2px solid var(--err); background: var(--err-soft); border-radius: var(--radius); padding: .8rem 1.1rem; margin: .8rem 0; }
.data-confirm h3 { margin-top: 0; }
.btn-danger { background: var(--err); border-color: var(--err); color: var(--on-err); }
/* Two or more buttons side by side: the same space between them when a phone puts one under the other. */
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.ai-notice { margin: .4rem 0 0; font-size: .9rem; color: var(--muted); }
/* ===== end Terms & data ===== */
@media (max-width: 374px) {
  .top-in, .tabs-in, .page, .foot-in { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .brand img { height: 1.25rem; }
  .top-actions .btn { padding: .2rem .3rem; font-size: .74rem; }
  .font .btn, .top-actions .theme-toggle { min-width: 44px; }
}
/* ===== voice & media (public/voice.js, src/media.ts, src/voice.ts) — start ===== */
.mic { display: inline-flex; align-items: center; gap: .4rem; }
.mic svg { flex: 0 0 auto; }
.mic.is-on { border-color: var(--err); color: var(--err); }
.mic.is-on svg { animation: mic-pulse 1.2s ease-in-out infinite; }
@keyframes mic-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mic.is-on svg { animation: none; } }
.mic-note { margin: .4rem 0 0; }
.speak { display: inline-flex; align-items: center; gap: .35rem; margin: .35rem .6rem .1rem 0; padding: .35rem .7rem; min-height: 44px; font: inherit; font-size: .9rem; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.speak:hover, .speak:focus-visible { color: var(--ink); border-color: var(--accent); }
.speak.is-on { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); }
.mic { justify-content: center; }
/* ===== voice & media — end ===== */

/* ===== «Μπείτε μέσα στον εγκέφαλό σας» — the big way into the 3D brain on /brain ===== */
.enter-brain { position: relative; display: grid; gap: .45rem; overflow: hidden; margin: 1.2rem 0 1.6rem; padding: 1.6rem 1.8rem 1.5rem;
  border-radius: 18px; text-decoration: none; color: #f3e9e6; isolation: isolate;
  background: radial-gradient(120% 140% at 85% 30%, #3a1414 0%, #120808 45%, #050505 100%); border: 1px solid rgba(255, 120, 100, .35);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28); }
.enter-brain-glow { position: absolute; inset: 0; z-index: -1; opacity: .9;
  background:
    radial-gradient(3px 3px at 72% 28%, #ffb4a0 60%, transparent 61%), radial-gradient(2px 2px at 80% 52%, #ff7a66 60%, transparent 61%),
    radial-gradient(4px 4px at 88% 38%, #ffd2c4 60%, transparent 61%), radial-gradient(2px 2px at 64% 66%, #ff8f7a 60%, transparent 61%),
    radial-gradient(3px 3px at 92% 72%, #ff6a55 60%, transparent 61%), radial-gradient(2px 2px at 58% 40%, #ffc0b0 60%, transparent 61%),
    radial-gradient(2px 2px at 76% 80%, #ff9e8a 60%, transparent 61%), radial-gradient(5px 5px at 84% 24%, rgba(255, 140, 120, .9) 50%, transparent 51%),
    radial-gradient(60% 80% at 82% 45%, rgba(255, 90, 70, .22), transparent 70%); }
.enter-brain-badge { justify-self: start; font: 700 .8rem/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .12em;
  padding: .35rem .55rem; border-radius: 6px; color: #120808; background: #ff8f7a; }
.enter-brain-title { font-family: var(--font-ui); font-weight: 700; font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.1rem); line-height: 1.2; color: #fff; max-width: 22ch; }
.enter-brain-text { max-width: 46ch; font-size: 1.02rem; line-height: 1.55; color: #f1d9d2; }
.enter-brain-cta { justify-self: start; margin-top: .4rem; display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .6rem 1.3rem;
  border-radius: 999px; font-weight: 700; color: #120808; background: #ffb4a0; }
.enter-brain:hover .enter-brain-cta, .enter-brain:focus-visible .enter-brain-cta { background: #fff; }
.enter-brain:focus-visible { outline: 3px solid var(--focus, #ffd27f); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .enter-brain { transition: transform .18s ease, box-shadow .18s ease; }
  .enter-brain:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0, 0, 0, .34); }
  .enter-brain-glow { animation: enter-brain-twinkle 4s ease-in-out infinite alternate; }
  @keyframes enter-brain-twinkle { from { opacity: .65; } to { opacity: 1; } }
}
@media (max-width: 560px) {
  .enter-brain { padding: 1.3rem 1.2rem 1.25rem; }
  .enter-brain-cta { justify-self: stretch; justify-content: center; }
}
/* ===== end «Μπείτε μέσα στον εγκέφαλό σας» ===== */

/* ===== «Οι δικοί σας βοηθοί» on the team page ===== */
.own-agents { margin-top: 1.6rem; }
.own-agents > h2 { margin: 0 0 .3rem; }
.own-agents > .quiet { margin: 0 0 1rem; max-width: 60ch; }
.station-tools { color: var(--muted); margin: .2rem 0 .4rem; }
.station-actions .station-pause { margin-left: .5rem; }
/* «Ο βοηθός σας και η ομάδα του»: the team's heading, shown only under the client's own helpers. */
.team-head { margin: 1.6rem 0 0; }
.team-head + .stage { margin-top: .6rem; }
/* «Τι έκαναν τελευταία» folded under its heading (the large layout): the heading is the button. */
.runs-fold > summary { display: flex; align-items: center; gap: .6rem; min-height: 44px; cursor: pointer; list-style: none; }
.runs-fold > summary::-webkit-details-marker { display: none; }
.runs-fold > summary::before { content: "▸" / ""; flex: none; font-weight: 700; color: var(--link); }
.runs-fold[open] > summary::before { content: "▾" / ""; }
.runs-fold > summary > h2 { margin: 0; }
.runs-fold[open] > .timeline { margin-top: .7rem; }
/* «Μεγάλα γράμματα» on the team page (PF36): the same cards with everything on them, tighter, so the
   page is shorter without hiding anything: a smaller robot beside its words, no empty room under a
   short line, less space between the cards. */
html[data-ui="large"] .agents-front .stage { gap: .8rem; margin: 1rem 0; }
html[data-ui="large"] .station { padding: .75rem .9rem .85rem; gap: .25rem; }
html[data-ui="large"] .station .avatar { width: 72px; min-height: 82px; }
html[data-ui="large"] .station .avatar svg { width: 72px; height: auto; }
html[data-ui="large"] .station .say { min-height: 0; margin-top: .15rem; }
html[data-ui="large"] .station-actions { padding-top: .3rem; }
html[data-ui="large"] :is(.own-agents, .team-head) { margin-top: 1.1rem; }
/* ===== end «Οι δικοί σας βοηθοί» ===== */

/* ===== the two layouts (html[data-ui], set by the server from the person's choice or the profile) =====
   «large» is everything above: big type and buttons, for someone less at home with computers.
   «classic» is calmer: normal type (16px), denser cards, normal buttons; the same pages, the same
   colours, the same order. The «Μεγάλα γράμματα» button switches between them. */
html[data-ui="classic"] { font-size: calc(16px * var(--scale)); }
:root[data-ui="classic"]:has(body[data-font="-1"]) { font-size: 14.4px; }
:root[data-ui="classic"]:has(body[data-font="1"]) { font-size: 17.9px; }
:root[data-ui="classic"]:has(body[data-font="2"]) { font-size: 20px; }
:root[data-ui="classic"]:has(body[data-font="3"]) { font-size: 22.4px; }
/* :where() keeps these at the specificity of the rules they adjust, so they win by coming last
   and still give way to the narrower rules (the phone header, a page's own layout). */
:where(html[data-ui="classic"]) h1 { font-size: 1.55rem; }
/* Calmer, not smaller to the finger: every button, page button, chip and field is still 44 px tall. */
:where(html[data-ui="classic"]) .btn { min-height: max(44px, 2.35rem); padding: .35rem 1rem; font-size: .95rem; }
:where(html[data-ui="classic"]) .tab { min-height: max(44px, 2.3rem); padding: 0 .95rem; font-size: .93rem; }
:where(html[data-ui="classic"]) .chip { min-height: max(44px, 2.2rem); padding: .35rem .85rem; font-size: .88rem; }
:where(html[data-ui="classic"]) input, :where(html[data-ui="classic"]) select, :where(html[data-ui="classic"]) textarea { min-height: max(44px, 2.5rem); }
:where(html[data-ui="classic"]) .cards { gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
:where(html[data-ui="classic"]) .card { padding: .75rem .9rem; border-radius: 12px; }
:where(html[data-ui="classic"]) .tile, :where(html[data-ui="classic"]) .door { min-height: 11rem; padding: 1rem 1rem .95rem; }
:where(html[data-ui="classic"]) .block { margin-top: 1.5rem; }
:where(html[data-ui="classic"]) .page { padding-block: 1.2rem 2.5rem; }
:where(html[data-ui="classic"]) .chat { gap: 1.1rem; }
:where(html[data-ui="classic"]) .login .btn-main { min-height: max(44px, 2.7rem); }
:where(html[data-ui="classic"]) .onboard-actions .btn { min-height: 44px; }
/* On a phone the four Home doors stay the compact two-by-two of the large layout (icon over a short
   name), so the chat box under them is on the first screen: the tile height above is for wider screens. */
@media (max-width: 560px) {
  :where(html[data-ui="classic"]) .stage-door { min-height: 0; padding: .6rem .35rem; }
}

/* «Μεγάλα γράμματα»: pressed while the large layout is on. */
.ui-toggle { gap: .4rem; }
.ui-toggle::before { content: "Α" / ""; font: 700 1.05em/1 var(--font-ui); }
/* An English page draws the Latin A (Quicksand) instead of the Greek Alpha (Comfortaa). */
html[lang="en"] .ui-toggle::before { content: "A" / ""; }
.ui-toggle[aria-pressed="true"] { border-color: var(--hover-line); color: var(--hover-ink); background: var(--accent-soft); }
@media (max-width: 560px) {
  /* on a phone it joins A− A+ and the colours as the last segment of one small control */
  .top-actions .theme-toggle { border-radius: 0; }
  .top-actions .ui-toggle { min-width: 44px; padding: .25rem .35rem; gap: 0; margin-left: calc(-.3rem - 1px); border-radius: 0 var(--pill) var(--pill) 0; }
  .ui-toggle .ui-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ui-toggle::before { font-size: 1.15rem; }
  /* the large type needs the controls a little narrower to keep the header on one row */
  html[data-ui="large"] .top-in { gap: .3rem; }
  html[data-ui="large"] .brand img { height: 1.1rem; }
  html[data-ui="large"] .font .btn, html[data-ui="large"] .top-actions .theme-toggle, html[data-ui="large"] .top-actions .ui-toggle { min-width: 44px; padding-inline: .2rem; }
  html[data-ui="large"] .top-actions .hl-help { min-width: 44px; }
  /* with every control 44 px wide, «Έξοδος» and the logo give back the room that keeps one row at 390 */
  html[data-ui="large"] .top-actions .btn { padding-inline: .25rem; font-size: .74rem; }
}
/* «Μεγάλα γράμματα» keeps its promise on every page: no text in the page or its footer is smaller than
   .95rem (19 px at the normal size; A− and A+ scale it like everything else). Each class listed is
   smaller than that in the rules above, so this only ever raises a size. */
html[data-ui="large"] :is(.small, .foot, .card-type, .card-text, .mini-type, .dl-date, .count, .when, .ext, .tile-text, .tile-live, .tile-short,
  .stage-caption, .stage-hint, .status-badge, .station-when, .station-last, .station-steps, .helper-name, .helper-say, .chip, .ai-notice,
  .plan, .steps, .tour-count, .speak, .brain-tip, .enter-brain-badge, .stack label, .stack .check, .hint, .conv-h, .conv-when, .conv-dot,
  .conv-none, .conv-rename, .now-helpers-list, .copy-row input, .now-label, .ask-mode-label, .mode span) { font-size: .95rem; }
html[data-ui="large"] :is(.bubble, .prose) code { font-size: .95rem; }
@media (max-width: 560px) {
  html[data-ui="large"] :is(.bubble, .prose) :is(td, th) { font-size: .95rem; }
}
/* «Μεγάλα γράμματα» on a phone: words, not icons (PF38). Every header button says what it is in its
   short word (no lone «Α», colour disc or «?»), in three columns under the logo, a long one on two
   lines inside its button; every page button is on screen without a sideways swipe, the row wrapping
   onto the next. The classic layout keeps its one-row header and its sliding page buttons. */
@media (max-width: 560px) {
  html[data-ui="large"] .top-in { row-gap: .3rem; padding-block: .4rem; }
  html[data-ui="large"] .brand img { height: 1.5rem; }
  html[data-ui="large"] .top-actions { flex: 1 1 100%; display: flex; justify-content: flex-end; gap: .3rem; }
  html[data-ui="large"] .top-actions .btn.account-btn { font-size: .95rem; padding: .2rem .8rem .2rem .35rem; white-space: nowrap; }
  html[data-ui="large"] .top-actions :is(.font, .inline) { display: contents; }
  html[data-ui="large"] .top-actions .btn { min-height: 44px; margin-left: 0; padding: .2rem .35rem; font-size: .75rem; line-height: 1.15; white-space: normal; text-align: center; border-radius: 14px; }
  html[data-ui="large"] .top-actions :is(.hl-label, .tt-label, .ui-label) { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  html[data-ui="large"] .top-actions :is(.hl-help, .ui-toggle)::before { content: none; }
  html[data-ui="large"] .top-actions :is(.theme-toggle, .ui-toggle) { gap: .3rem; }
  html[data-ui="large"] .tabs-in { flex-wrap: wrap; gap: .3rem; overflow-x: visible; padding-block: .4rem; -webkit-mask-image: none; mask-image: none; }
  html[data-ui="large"] .tab { flex: 1 1 auto; min-height: 44px; justify-content: center; padding: .2rem .55rem; font-size: .95rem; }
}
/* ===== end layouts ===== */

/* The brain's search on a phone: the box on its own row, the button under it, so the hint in the box
   is read whole. */
@media (max-width: 560px) {
  .search { flex-wrap: wrap; }
  .search input, .search .btn { flex: 1 1 100%; }
}

/* ===== Connections: «Συνδέσεις» (src/connections-page.ts, public/connections.js) ===== */
.conn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 1rem; margin-top: 1.2rem; align-items: start; }
.conn-card { padding: 1.1rem 1.3rem 1.3rem; min-width: 0; overflow-wrap: anywhere; }
.conn-card-wide { grid-column: 1 / -1; }
.conn-card > p { margin: .55rem 0; }
.conn-card h3 { font-size: 1rem; margin: 1.1rem 0 .4rem; }
/* The state: a mark and words in a bordered line, never a colour alone. */
.conn-state { display: flex; gap: .55rem; align-items: flex-start; padding: .55rem .8rem; border: 1px solid var(--line-2); border-radius: var(--radius); font-weight: 600; }
.conn-mark { flex: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid currentColor; font: 700 .9rem/1 var(--font-ui); }
.conn-ok { border-color: var(--ok); background: var(--ok-soft); }
.conn-ok .conn-mark { color: var(--ok); }
.conn-bad { border-color: var(--err); background: var(--err-soft); font-weight: 400; }
.conn-bad .conn-mark { color: var(--err); }
.conn-wait { border-style: dashed; font-weight: 400; }
.conn-wait .conn-mark { animation: conn-pulse 1.4s ease-in-out infinite; }
@keyframes conn-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .conn-wait .conn-mark { animation: none; } }
.conn-act { margin: .9rem 0 0; }
.conn-act .btn, .conn-form .btn { min-height: 44px; }
.conn-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.conn-know { margin-top: .8rem; max-width: 52rem; padding: .2rem 1rem .8rem; border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0; }
.conn-steps ol { margin: 0; padding-left: 1.4rem; display: grid; gap: .45rem; }
.conn-steps a { overflow-wrap: anywhere; }
.conn-form { margin-top: 1rem; max-width: 36rem; }
.conn-form > .btn { margin-top: .9rem; justify-self: start; }
.conn-choice { border: 0; padding: 0; margin: .5rem 0 0; min-width: 0; }
.conn-choice legend { font: 600 .85rem/1.3 var(--font-ui); color: var(--muted); padding: 0; margin-bottom: .2rem; }
/* A choice reads like the page's text, its button level with its words. */
.conn-form .conn-radio { margin: 0; font: 400 1rem/1.4 var(--font); color: var(--ink); }
.conn-radio span { min-width: 0; }
.conn-port { max-width: 9rem; }
.conn-other { display: grid; gap: .45rem; }
.conn-form input[aria-invalid="true"] { border-color: var(--err); box-shadow: 0 0 0 2px var(--err-soft); }
/* Gmail or another provider: only that one's help and password label (both show where :has() is unknown). */
.conn-form:has(input[name="provider"][value="gmail"]:checked) .only-other,
.conn-form:has(input[name="provider"][value="other"]:checked) .only-gmail { display: none; }
.conn-hint a { font-weight: 600; }
html[data-ui="large"] :is(.conn-choice legend, .conn-mark) { font-size: .95rem; }
html[data-ui="large"] .conn-mark { width: 1.9rem; height: 1.9rem; }
/* The header link: its word on a computer; on a phone a link icon, like «?» for Help, and the word
   again in the large layout's three columns. */
@media (max-width: 560px) {
  .hl-connections { min-width: max(44px, 2.4rem); justify-content: center; }
  .hl-connections::before { content: ""; width: 1.15rem; height: 1.15rem; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1.2 1.2'/%3E%3Cpath d='M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1.2-1.2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1.2 1.2'/%3E%3Cpath d='M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1.2-1.2'/%3E%3C/svg%3E") center / contain no-repeat; }
  .hl-connections .hl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html[data-ui="large"] .top-actions .hl-connections { min-width: 44px; }
  html[data-ui="large"] .top-actions .hl-connections::before { content: none; }
  html[data-ui="large"] .top-actions .hl-connections .hl-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .conn-card { padding: .9rem 1rem 1.1rem; }
  .conn-form > .btn, .conn-act .btn { width: 100%; }
}
/* ===== end Connections ===== */

/* «Ρυθμίσεις» and «Credits» (1.4.0) */
.settings { max-width: 44rem; display: grid; gap: 1.25rem; }
.set-group { border: 1px solid var(--line, #d9d9d9); border-radius: var(--radius, 12px); padding: 1rem 1.25rem; margin: 0; display: grid; gap: .5rem; }
.set-group legend { font-weight: 700; padding: 0 .4rem; }
.set-choice, .set-feature { display: flex; gap: .6rem; align-items: flex-start; min-height: 2.75rem; cursor: pointer; line-height: 1.5; }
.set-choice input, .set-feature input { margin: .25em 0 0; flex: none; }
.set-colours { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: .25rem 0 0; }
.set-colours label { display: inline-flex; gap: .5rem; align-items: center; }
.set-colours input[type="color"] { width: 3.5rem; height: 2.75rem; padding: 0; border: 1px solid var(--line, #d9d9d9); border-radius: 6px; background: none; }
.set-credits { margin-top: 1.5rem; }
.credit-card { border: 1px solid var(--line, #d9d9d9); border-radius: var(--radius, 12px); padding: 1.25rem; margin: 0 0 1.25rem; max-width: 56rem; }
.credit-left { font-size: 1.25rem; margin: 0 0 .5rem; }
.credit-left strong { font-size: 2rem; }
.credit-bar { height: .6rem; border-radius: 99px; background: var(--accent-soft, #eee); overflow: hidden; margin: 0 0 .75rem; }
.credit-bar span { display: block; height: 100%; background: var(--accent, #333); }
.credit-kinds { margin: .25rem 0 .75rem; padding-left: 1.25rem; }
.credit-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.credit-pack { border: 1px solid var(--line, #d9d9d9); border-radius: var(--radius, 12px); padding: 1rem; display: grid; gap: .35rem; align-content: start; }
.credit-pack.is-best { border-color: var(--accent, #333); border-width: 2px; }
.credit-pack h3 { margin: 0; }
.credit-pack-n { font-weight: 700; margin: 0; }
.credit-pack-price { font-size: 1.25rem; margin: 0 0 .5rem; }
.hl-credits.is-low { border-color: var(--hover-line, #a33); color: var(--hover-ink, #a33); }

/* Home with the 3D brain (2026-11-02): its stage takes the place of the 2D one */
.home-stage-3d .stage-brain.stage-3d { height: auto; }
.home-kind { margin-top: 1.25rem; }
.settings-tabs { margin: 0 0 1rem; border: 0; }
.settings-tabs .tabs-in { padding: 0; }

/* «Οι κόσμοι σας» on «Ο εγκέφαλος» (1.5.0): the engine's world colours, deeper on a light page */
.worlds .worlds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; margin: .75rem 0 1rem; }
.worlds .world { border: 1px solid var(--line); border-radius: 12px; padding: .75rem .9rem; background: var(--surface); }
.worlds .world h3 { margin: 0 0 .4rem; font-size: 1.05rem; display: flex; align-items: center; gap: .45rem; }
.worlds .world-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--world); flex: none; }
.worlds .world[data-world="business"] { --world: #a87412; }
.worlds .world[data-world="family"] { --world: #c44a6e; } .worlds .world[data-world="hobbies"] { --world: #2f8a52; }
.worlds .world[data-world="centre"] { --world: #8a7d76; }
html[data-theme="goi"] .worlds .world[data-world="business"] { --world: #ffd27f; }
html[data-theme="goi"] .worlds .world[data-world="family"] { --world: #ff8fab; } html[data-theme="goi"] .worlds .world[data-world="hobbies"] { --world: #8fe3a6; }
html[data-theme="goi"] .worlds .world[data-world="centre"] { --world: #fff4ec; }
.worlds .world-spaces { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.worlds .world-spaces li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
.worlds .world-space { font-weight: 600; overflow-wrap: anywhere; }
.worlds .world-spaces select { margin-left: auto; max-width: 100%; min-height: max(44px, 2.75rem); padding: .3rem .6rem; font: inherit; font-size: .95rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; }

/* «Τα έγγραφά σας» (1.6.0): the storage line, «Διαγραφή» that asks first (no script), the bin */
.storage-line { margin: .5rem 0 1.25rem; max-width: 40rem; }
.storage-line p { margin: 0 0 .35rem; }
.storage-line.is-near .credit-bar span { background: var(--err); }
.docs li { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; }
.docs li > a { flex: 1 1 18rem; min-width: 0; }
.doc-del { flex: 0 0 auto; margin: .3rem .6rem; }
.doc-del > summary { list-style: none; cursor: pointer; }
.doc-del > summary::-webkit-details-marker { display: none; }
.doc-del[open] { flex-basis: 100%; }
.doc-del-form { margin: .5rem 0 .25rem; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft-fill); }
.doc-del-form p { margin: 0 0 .6rem; }

/* «Το προφίλ σας» on «Ρυθμίσεις» and Home's one request (1.7.0) */
.set-about .set-field { display: grid; gap: .3rem; margin: .6rem 0; font-weight: 600; }
.set-about input[type="text"], .set-about select, .set-about textarea { font: inherit; font-weight: 400; min-height: 44px; padding: .5rem .7rem; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink); max-width: 40rem; width: 100%; box-sizing: border-box; }
.set-about textarea { min-height: 10rem; resize: vertical; line-height: 1.5; }
.about-nudge { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; background: var(--surface); }
.about-nudge h2 { margin-top: 0; }
.about-nudge-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 0; }

/* ---------------------------------------------------------------- 1.8.0
   «Οι βοηθοί σας» as holographic cards (the owner's variant Δ, 2026-11-02): the whole card is the helper's
   badge, dark in every theme, with a border of colour that turns round it, a sheen crossing it, a grid
   that drifts, the symbol floating on a glass plate, and data falling behind a helper at work. Every
   movement is inside prefers-reduced-motion: no-preference; with less motion asked for, it all stands still. */
@property --holo-r { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.station.holo { position: relative; padding: 2px; border: 0; border-radius: 18px; background: conic-gradient(from var(--holo-r), var(--agent), #7dd3fc, #c084fc, #fbbf24, var(--agent)); box-shadow: 0 10px 28px color-mix(in srgb, var(--agent) 28%, transparent); display: block; min-width: 0; }
.holo-in { position: relative; overflow: hidden; height: 100%; border-radius: 16px; background: linear-gradient(160deg, #0b1020, color-mix(in srgb, var(--agent) 38%, #0b1020)); color: #f4f6fb; padding: 1rem 1.15rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.holo-in > * { position: relative; }
.holo-in > .holo-grid, .holo-in > .holo-rain, .holo-in > .holo-sheen { position: absolute; pointer-events: none; }
.holo-grid { inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 18px 18px; mask-image: radial-gradient(circle at 30% 18%, #000 25%, transparent 75%); }
.holo-sheen { inset: -40% -60%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .14) 48%, rgba(125, 211, 252, .14) 52%, transparent 60%); }
.holo-rain { inset: 0; opacity: 0; font: 700 11px/1 ui-monospace, monospace; color: color-mix(in srgb, var(--agent) 60%, #fff); transition: opacity .4s ease; }
.holo-rain span { position: absolute; top: -30%; writing-mode: vertical-rl; }
.station.holo[data-status="working"] .holo-rain { opacity: .3; }
.holo-float { flex: 0 0 auto; position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
.holo-float::before { content: ""; position: absolute; inset: 6px; border-radius: 22px; background: color-mix(in srgb, var(--agent) 75%, transparent); filter: blur(14px); opacity: .7; }
.holo-plate { position: relative; width: 78px; height: 78px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .05)); border: 1px solid rgba(255, 255, 255, .42); backdrop-filter: blur(4px); }
.holo-icon { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.station.holo .say { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .28); color: #f4f6fb; }
.station.holo .say::before { border-right-color: rgba(255, 255, 255, .28); }
.station.holo[data-status="idle"] .say, .station.holo[data-status="off"] .say { color: #cfd6ea; border-style: dashed; }
.station.holo .station-name { color: #fff; }
.station.holo .status-badge { background: rgba(255, 255, 255, .14); color: #fff; }
.station.holo[data-status="working"] .status-badge { background: color-mix(in srgb, var(--agent) 70%, #fff 0%); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.station.holo[data-status="queued"] .status-badge { background: rgba(125, 211, 252, .25); color: #fff; }
.station.holo .station-when, .station.holo .station-last, .station.holo .station-tools { color: #cfd6ea; }
.station.holo .station-steps li.current, .station.holo .station-steps li.current::before { color: #fff; }
.station.holo .station-steps li::before { color: #8fe3a6; }
.station.holo .station-msg { color: #ffd27f; }
.station.holo .btn-quiet { color: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); }
.station.holo .btn-main { background: #fff; color: #0b1020; border-color: #fff; }
.station.holo .btn-main:disabled { background: rgba(255, 255, 255, .35); color: #0b1020; }
.station.holo .helper-name, .station.holo .helper-say { color: #f4f6fb; }
.station.holo[data-status="off"] { filter: grayscale(.85); opacity: .8; }
html[data-ui="large"] .station.holo .holo-in { padding: .75rem .9rem .85rem; gap: .25rem; }
html[data-ui="large"] .holo-float { width: 64px; height: 64px; }
html[data-ui="large"] .holo-plate { width: 54px; height: 54px; border-radius: 16px; }
html[data-ui="large"] .holo-icon { width: 28px; height: 28px; }
@media (max-width: 40rem) { .holo-float { width: 64px; height: 64px; } .holo-plate { width: 54px; height: 54px; } }
@media (prefers-reduced-motion: no-preference) {
  .station.holo { animation: holo-turn 6s linear infinite; transition: transform .25s ease, box-shadow .25s ease; }
  .station.holo:hover { box-shadow: 0 20px 46px color-mix(in srgb, var(--agent) 42%, transparent); }
  .station.holo[data-status="working"] { animation-duration: 2s; }
  .holo-sheen { animation: holo-sheen 4.5s ease-in-out infinite; }
  .holo-grid { animation: holo-drift 9s linear infinite; }
  .holo-float { animation: holo-float 3.4s ease-in-out infinite; }
  .station.holo[data-status="working"] .holo-rain span { animation: holo-fall 2.4s linear infinite; }
  .suggest-dialog[open] { animation: suggest-in .2s ease-out; }
}
@keyframes holo-turn { to { --holo-r: 360deg; } }
@keyframes holo-sheen { 0%, 100% { transform: translateX(-30%); } 50% { transform: translateX(30%); } }
@keyframes holo-drift { to { background-position: 0 18px, 18px 0; } }
@keyframes holo-float { 50% { transform: translateY(-5px) rotate(-2deg); } }
@keyframes holo-fall { to { top: 110%; } }
@keyframes suggest-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* «Ζητήστε προτάσεις από την GOI» (1.8.0): the card under the helpers, and its small window. */
.suggest-card { margin: 1.3rem 0; }
.suggest-card h2 { margin-top: 0; }
.suggest-dialog { width: min(34rem, calc(100vw - 2rem)); border: 1px solid var(--line); border-radius: 16px; padding: 1.3rem 1.4rem; background: var(--read); color: var(--ink); box-shadow: 0 24px 60px rgba(13, 27, 75, .28); }
.suggest-dialog::backdrop { background: rgba(7, 15, 46, .55); }
.suggest-dialog h2 { margin: 0 0 .4rem; font-size: 1.25rem; }
.suggest-dialog input[type="text"] { min-height: 44px; }
.suggest-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .4rem 0 0; }

/* Members (1.8.0): each person's mark beside their messages, and the «Μέλη» page. */
.who { display: flex; align-items: center; gap: .45rem; margin: 0 0 .3rem; font-size: .95rem; }
.who-mark { flex: none; display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--mark); color: #fff; font: 700 .95rem/1 var(--font-ui); }
.members-list .member-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.member-who { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
.member-role select { min-height: 44px; font: inherit; font-size: 1rem; padding: .3rem .6rem; border-radius: 12px; border: 1px solid var(--line); background: var(--read); color: var(--ink); }
.member-welcome { border-left: 5px solid var(--accent); }
.join-shared { margin: .8rem 0; }

/* ---------------------------------------------------------------- the account button and the settings window (1.8.0)
   One button with the person's initials instead of «Συνδέσεις · Ρυθμίσεις · Βοήθεια · Έξοδος»; it opens
   «Ρυθμίσεις» as a window over the page (public/settings-window.js), the person and the groups on the left,
   the chosen page on the right. Inside it the pages drop their bar, menu and footer (html.in-window). */
.account-btn { gap: .55rem; padding-left: .35rem; }
.acct-av { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 700 .82rem/1 var(--font-ui); letter-spacing: .02em; }
html.sw-open { overflow: hidden; }
.sw-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 2.5vh 2vw; background: rgba(15, 18, 30, .45); }
.sw-backdrop[hidden] { display: none; }
.sw { display: grid; grid-template-columns: minmax(15rem, 17rem) 1fr; width: min(72rem, 100%); height: min(46rem, 95vh); background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 64px rgba(13, 27, 75, .22); overflow: hidden; }
.sw-nav { display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem .9rem; border-right: 1px solid var(--line); background: var(--soft-fill); overflow-y: auto; min-height: 0; }
.sw-user { display: flex; align-items: center; gap: .7rem; padding: .2rem .35rem .4rem; }
.sw-user .acct-av { width: 2.5rem; height: 2.5rem; font-size: .95rem; }
.sw-user-text { display: grid; min-width: 0; line-height: 1.3; }
.sw-user-text b { font: 700 .98rem/1.3 var(--font-ui); overflow-wrap: anywhere; }
.sw-user-text span { color: var(--muted); font-size: .85rem; }
.sw-search { width: 100%; box-sizing: border-box; min-height: 44px; padding: .45rem .8rem; font: inherit; font-size: .95rem; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); color: var(--ink); }
.sw-groups { display: grid; gap: .5rem; }
.sw-group[hidden] { display: none; }
.sw-group-title { margin: .5rem .55rem .15rem; font: 700 .78rem/1.3 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--label); }
.sw-item { display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 44px; padding: .4rem .65rem; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: 600 .95rem/1.25 var(--font-ui); text-align: left; cursor: pointer; }
.sw-item[hidden] { display: none; }
.sw-item:hover { background: var(--accent-soft); }
.sw-item.is-active { background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
.sw-item:focus-visible { outline: 2px solid var(--hover-line); outline-offset: 1px; }
.sw-ico { width: 1.2rem; height: 1.2rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.sw-foot { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--line); display: grid; gap: .1rem; }
.sw-out { margin: 0; }
.sw-main { position: relative; min-width: 0; min-height: 0; }
.sw-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }
.sw-close { position: absolute; top: .6rem; right: .7rem; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.sw-close:hover { background: var(--accent-soft); }
@media (max-width: 720px) {
  .sw-backdrop { padding: 0; }
  .sw { grid-template-columns: 1fr; grid-template-rows: auto 1fr; width: 100%; height: 100%; border-radius: 0; border: 0; }
  .sw-nav { border-right: 0; border-bottom: 1px solid var(--line); padding: .7rem .7rem .5rem; gap: .45rem; max-height: 42vh; }
  .sw-user { padding-right: 3rem; }
  .sw-groups { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: .2rem; }
  .sw-group { display: flex; gap: .2rem; }
  .sw-group-title { display: none; }
  .sw-item { white-space: nowrap; }
  .sw-foot { grid-auto-flow: column; justify-content: start; border-top: 0; padding-top: 0; margin-top: 0; }
}
/* a page inside the window: no bar, no menu, no footer, no moving background */
html.in-window :is(.top, .foot, .skip, .settings-tabs, #intro, .particles, #tour) { display: none; }
html.in-window body { background: var(--bg); min-height: 0; }
html.in-window .page { padding: 1.4rem 3.6rem 2rem 1.8rem; }
@media (max-width: 720px) { html.in-window .page { padding: 1rem 1rem 2rem; } }

/* ---------------------------------------------------------------- GOI's design principles, app-sized (pilot, 1.8.0)
   _system/standards/app-ui.md. On Home, the Chat and every page inside the settings window. The structure
   of the GOI design system (docs/frontend/design-system), never its marketing sizes and never its colours:
   every colour here is a role (--accent, --line…), so the white page, GOI's colours and the client's own all
   keep working. Function first: lists stay dense, only what opens something lifts, only the main action of
   a page has the raised button, and nothing moves for decoration. */
.ds .card { box-shadow: 0 4px 16px rgba(13, 27, 75, .06); }
.ds :is(a.card, button.card):hover { box-shadow: 0 12px 32px rgba(13, 27, 75, .1); border-color: var(--hover-line); }
.ds .cards { gap: 1.1rem; }
.ds .page > .block, .ds .set-group, .ds .credit-card { border-radius: 16px; box-shadow: 0 4px 16px rgba(13, 27, 75, .05); }
.ds .page > .block:has(> .cards) { box-shadow: none; }
.ds .btn-main { box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 72%, #000); }
.ds .btn-main:hover { box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 72%, #000); }
.ds .btn-main:active { box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 72%, #000); }
.ds .btn-main[disabled] { box-shadow: none; }
.ds .block > h2, .ds .set-group > legend { font: 700 .82rem/1.3 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--label); }
.ds .count { display: inline-block; min-width: 1.6rem; padding: .05rem .5rem; border-radius: 100px; background: var(--soft-fill-2); text-align: center; font-size: .82rem; font-weight: 700; letter-spacing: 0; }
.ds .ask { border-radius: 16px; box-shadow: 0 4px 16px rgba(13, 27, 75, .06); }
.ds .ask:focus-within { box-shadow: 0 12px 32px rgba(13, 27, 75, .1); border-color: var(--hover-line); }
.ds .bubble { border-radius: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .ds :is(.card, .btn-main, .ask) { transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
  .ds :is(a.card, button.card):hover { transform: translateY(-2px); }
  .ds .btn-main:hover { transform: translateY(-2px); }
  .ds .btn-main:active { transform: translateY(3px); }
}
/* «Μεγάλη» διάταξη: the window's and the pilot's small words at .95rem too */
html[data-ui="large"] .acct-av, html[data-ui="large"] .sw-user-text span, html[data-ui="large"] .sw-group-title, html[data-ui="large"] .ds .count, html[data-ui="large"] .ds .block > h2, html[data-ui="large"] .ds .set-group > legend,
html.ds[data-ui="large"] .count, html.ds[data-ui="large"] .block > h2, html.ds[data-ui="large"] .set-group > legend { font-size: .95rem; }
/* 1.10.0, the chat as an app: its small words at .95rem in the large layout too */
html[data-ui="large"] :is(.day-sep, .how-live, details.how, .msg-row.assistant a.cite, .next-btn, .msg-act, .msg-edit, .typing, .mode-menu > summary, .file-chip, .conv-search-btn, .conv-search-btn kbd, .conv-li .conv-title, .conv-member, .conv-archived-link, .conv-pop > button, .conv-sure p, .chat-search-hits span, .chat-toast) { font-size: .95rem; }
/* 1.11.0: the new small words of the chat at .95rem in the large layout too */
html[data-ui="large"] :is(.starter-s, .jump-end, .msg-fail, .ask-sel, .fb-reasons, .ver-nav, .up-pct, .chat-search-filters select, .keys-dlg kbd, .msg-row.assistant ol.sources > li, #live .now-bar) { font-size: .95rem; }

/* ===================================================================== 1.12.0: voice and the app on the screen. */
/* the recording a spoken question was made of */
.msg-row.user audio.voice-orig { display: block; width: min(16rem, 100%); height: 36px; margin: .35rem 0 .1rem; }
/* «Φωνητική συζήτηση»: the orb fills the screen; it listens, thinks, speaks */
.talk { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; padding: 2rem 1.2rem max(2rem, env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% 40%, #1b2d6e, #0d1b4b 70%); color: #fff; text-align: center; }
.talk[hidden] { display: none; }
body.talk-open { overflow: hidden; }
.talk-orb { width: min(52vw, 15rem); height: min(52vw, 15rem); border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 7%, transparent 32%), conic-gradient(from 210deg, #f4c96a, #e98bd6, #7fb4ff, #7ff2d8, #f4c96a);
  box-shadow: 0 0 60px rgba(127, 180, 255, .55); }
.talk-orb:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.talk-state { margin: .4rem 0 0; font-size: 1.25rem; font-weight: 700; }
.talk-said { margin: 0; max-width: 34rem; min-height: 1.5em; font-size: 1rem; color: #d6dcf0; }
.talk .talk-end { color: #fff; border-color: rgba(255, 255, 255, .5); min-height: 48px; padding: 0 1.4rem; }
@media (prefers-reduced-motion: no-preference) {
  .talk[data-state="listening"] .talk-orb { animation: talk-breathe 2.4s ease-in-out infinite; }
  .talk[data-state="hearing"] .talk-orb { animation: talk-breathe .7s ease-in-out infinite; }
  .talk[data-state="thinking"] .talk-orb { animation: orb-turn 2.2s linear infinite; }
  .talk[data-state="speaking"] .talk-orb { animation: talk-speak .45s ease-in-out infinite alternate; }
  @keyframes talk-breathe { 50% { transform: scale(.93); } }
  @keyframes talk-speak { to { transform: scale(1.06); box-shadow: 0 0 90px rgba(244, 201, 106, .6); } }
}
.talk-btn svg { width: 1.25rem; height: 1.25rem; }

/* «Ο βοηθός στην οθόνη σας»: the steps with their pictures */
.set-install .inst-steps { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: .7rem; }
.set-install .inst-steps li { display: flex; align-items: flex-start; gap: .7rem; font-size: 1.05rem; line-height: 1.5; }
.inst-n { flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #fff); font-weight: 700; }
.inst-ic { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: -.35em; padding: .1em; border: 1px solid var(--line); border-radius: 6px; background: var(--glass); color: #0a84ff; }
.inst-go { min-height: 52px; font-size: 1.05rem; }
/* on a phone's Home, the small card that points there */
.install-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .5rem .8rem; margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--read); box-shadow: 0 4px 16px rgba(13, 27, 75, .06); }
.install-card img { border-radius: 10px; }
.install-card p { margin: 0; font-weight: 600; }
.install-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; }
.install-row .btn[hidden] { display: none; }
/* 1.12.0: the steps and the voice conversation at .95rem or more in the large layout */
html[data-ui="large"] :is(.talk-said) { font-size: 1.05rem; }
/* 1.13.0: the works at .95rem or more in the large layout */
html[data-ui="large"] :is(.work-go, .work-meta, .src-ver, .src-actions .btn) { font-size: .95rem; }
html[data-ui="large"] :is(.project-n, .project-new, .project-form input, .project-form .btn, .project-chip, .project-more > summary, .project-new-here) { font-size: .95rem; }

/* 1.14.0 — «Εργαστήριο»: the published apps, the projects, the latest commands */
.ws-app { margin: 0 0 .8rem; padding: .9rem 1.1rem; }
.ws-app h3 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .3rem; }
.ws-status { font-size: .85rem; font-weight: 600; padding: .1rem .6rem; border-radius: 999px; border: 1px solid var(--line-2); }
.ws-running { border-color: #1f7a3a; color: #1f7a3a; }
.ws-failed { border-color: var(--date-ink); color: var(--date-ink); }
.ws-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; }
.ws-sure { flex-basis: 100%; margin: .4rem 0 0; padding: .6rem .8rem; border: 1px solid var(--line-2); border-radius: 10px; }
.ws-sure p { margin: 0 0 .5rem; }
.ws-keys { margin: .7rem 0 0; }
.ws-keys summary { cursor: pointer; font-weight: 600; }
.ws-keyform { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin: .5rem 0 0; }
.ws-keyform label { display: grid; gap: .2rem; font-size: .9rem; }
.ws-keyform input { box-sizing: border-box; height: 2.9rem; font: inherit; padding: .35rem .55rem; border: 1px solid var(--line-2); border-radius: 10px; background: var(--read); color: var(--ink); min-width: 14rem; }
.ws-keynames { list-style: none; padding: 0; margin: .4rem 0; display: grid; gap: .2rem; }
.ws-keynames form.inline { display: inline; }
.ws-project { margin: 0 0 .4rem; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 10px; }
.ws-project summary { cursor: pointer; }
.ws-files { list-style: none; margin: .4rem 0 0; padding: 0; max-height: 22rem; overflow: auto; font-size: .9rem; }
.ws-runs { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.ws-run code { overflow-wrap: anywhere; }
html[data-ui="large"] :is(.ws-status, .ws-keyform label, .ws-files, .ws-run .small, .ws-app .small, .ws-project .small, .ws-hostform label, .ws-hostform textarea, .ws-code) { font-size: .95rem; }
.ws-run summary { cursor: pointer; }
.ws-out { margin: .4rem 0; padding: .5rem .7rem; max-height: 18rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .85rem; background: var(--soft-fill); border: 1px solid var(--line); border-radius: 8px; }
/* 1.16.0 (task 16): his hosting, the private preview, a file as code */
.ws-host { margin: .7rem 0 0; }
.ws-host summary { cursor: pointer; font-weight: 600; }
.ws-hostform { display: grid; gap: .5rem; margin: .5rem 0 0; max-width: 38rem; }
.ws-hostform label { display: grid; gap: .2rem; font-size: .9rem; }
.ws-hostform :is(input, select, textarea) { box-sizing: border-box; min-height: 2.9rem; font: inherit; padding: .35rem .55rem; border: 1px solid var(--line-2); border-radius: 10px; background: var(--read); color: var(--ink); width: 100%; }
.ws-hostform textarea { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.ws-prov { border: 0; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ws-preview-bar h1 { margin: 0 0 .2rem; font-size: 1.3rem; }
.ws-preview-bar p { margin: .2rem 0 .5rem; }
.ws-preview { display: block; width: 100%; height: calc(100vh - 16rem); min-height: 26rem; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; }
.ws-file-h { font-size: 1.05rem; overflow-wrap: anywhere; }
.ws-code { margin: .5rem 0; padding: .8rem 1rem; max-height: calc(100vh - 14rem); overflow: auto; font-size: .85rem; line-height: 1.5; background: var(--soft-fill); border: 1px solid var(--line); border-radius: 10px; tab-size: 2; }
.ws-code .tk-c { color: #6b7280; font-style: italic; }
.ws-code .tk-s { color: #0f7b3a; }
.ws-code .tk-n { color: #b45309; }
.ws-code .tk-k { color: #1d4ed8; font-weight: 600; }
.ws-files a { color: inherit; }
/* the chat's approval buttons (the assistant asks, only his click starts it) */
.ws-ask { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .5rem 0; padding: .6rem .8rem; border: 1px solid var(--accent); border-radius: 12px; }
.ws-ask p { flex-basis: 100%; margin: 0 0 .2rem; font-weight: 600; }
html[data-ui="large"] .ws-out { font-size: .95rem; }
.ws-keynames li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ws-keynames code, .ws-run code, .ws-app a, .ws-project code { overflow-wrap: anywhere; word-break: break-word; }
.ws-app, .ws-run, .ws-project { min-width: 0; }
html[data-ui="large"] .fb-by { font-size: .95rem; }
.ws-go { min-height: 32px; padding: 0 .7rem; font-size: .85rem; margin: 0 .4rem; }
.ws-examples { display: flex; flex-wrap: wrap; gap: .4rem; }
.ws-examples .btn { white-space: normal; text-align: left; }
html[data-ui="large"] .ws-go { font-size: .95rem; }