/* Styles 1/8 (lines 1–211 of styles.css until v122) — themes, the header, main area, tab switch, page header, sub-pages, the tab bar.
   Order matters (a later rule wins): index.html loads css/1-… → css/8-… in this order; see docs/REFACTOR.md step 4. */
/* THEMES. Dark is the base; light applies when the device is in light mode
   (unless the user forced dark), or when the user picked light explicitly.
   The choice is stored by app.js and applied as <html data-theme="light|dark">. */
:root{
  color-scheme: dark;
  --bg: #17161a;
  --panel: #1f1e23;
  --panel-2: #26252b;
  --line: #35333b;
  --text: #ece9e4;
  --muted: #9c98a3;
  --accent: #d9a441;        /* accent as text / icons */
  --accent-fill: #d9a441;   /* accent as a button background */
  --on-accent: #26210f;     /* text on accent-fill */
  --accent-dim: #4a3d22;
  --user-text: #f3e6c8;
  --ok: #6fae7c;
  --ok-bg: rgba(111,174,124,0.12);
  --ok-text: #d3ecd7;
  --ok-border: #34402f;
  --bad: #d97a6a;
  --bad-bg: rgba(217,122,106,0.12);
  --bad-text: #f0c3ba;
  --bad-border: #4a2c27;
  --goal-bg: rgba(217,164,65,0.10);
  --goal-border: #4a3d22;
  --chip-border: #6b5526;
  --overlay: rgba(0,0,0,0.5);
  --log-session-bg: #2a2740; --log-session: #b6adf0;
  --log-tool-bg: #20261f;
  --log-manual-bg: #2a2620; --log-manual: #e0b26a;
  --log-tab-bg: #1e2630;    --log-tab: #7fb0d6;
  --ms: #8fa8ff; --ms-bg: rgba(143,168,255,0.14);   /* milestones: their own colour, apart from the goal and tasks */
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
    --bg: #f2f0ec; --panel: #fbfaf7; --panel-2: #ffffff; --line: #dedad2;
    --text: #1d1b20; --muted: #6e6a75;
    --accent: #9a6a10; --accent-fill: #d9a441; --on-accent: #26210f; --accent-dim: #f3e3bf;
    --user-text: #4a3712;
    --ok: #2f8a45; --ok-bg: rgba(47,138,69,0.10); --ok-text: #1f5a2c; --ok-border: #bfe0c8;
    --bad: #c0503d; --bad-bg: rgba(192,80,61,0.10); --bad-text: #8a2f22; --bad-border: #efc6bd;
    --goal-bg: rgba(217,164,65,0.14); --goal-border: #ecd6a6;
    --chip-border: #d9b76e;
    --overlay: rgba(0,0,0,0.3);
    --log-session-bg: #e8e5fb; --log-session: #4b3fa8;
    --log-tool-bg: #e3f1e6;
    --log-manual-bg: #f7ecd8; --log-manual: #8a5a0c;
    --log-tab-bg: #e1ecf6;    --log-tab: #2d628f;
    --ms: #3d5bc9; --ms-bg: rgba(61,91,201,0.10);
  }
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg: #f2f0ec; --panel: #fbfaf7; --panel-2: #ffffff; --line: #dedad2;
  --text: #1d1b20; --muted: #6e6a75;
  --accent: #9a6a10; --accent-fill: #d9a441; --on-accent: #26210f; --accent-dim: #f3e3bf;
  --user-text: #4a3712;
  --ok: #2f8a45; --ok-bg: rgba(47,138,69,0.10); --ok-text: #1f5a2c; --ok-border: #bfe0c8;
  --bad: #c0503d; --bad-bg: rgba(192,80,61,0.10); --bad-text: #8a2f22; --bad-border: #efc6bd;
  --goal-bg: rgba(217,164,65,0.14); --goal-border: #ecd6a6;
  --chip-border: #d9b76e;
  --overlay: rgba(0,0,0,0.3);
  --log-session-bg: #e8e5fb; --log-session: #4b3fa8;
  --log-tool-bg: #e3f1e6;
  --log-manual-bg: #f7ecd8; --log-manual: #8a5a0c;
  --log-tab-bg: #e1ecf6;    --log-tab: #2d628f;
  --ms: #3d5bc9; --ms-bg: rgba(61,91,201,0.10);
}
:root{
  --mono: "SF Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* In landscape the notch / Dynamic Island sits on the left or right edge. */
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --tabbar-h: 56px;
  /* Corner rounding — each skin sets its own (square in retro, slight in medieval). */
  --r-sm: 10px; --r: 12px; --r-lg: 16px; --r-pill: 20px; --r-tail: 4px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; height:100%; overscroll-behavior:none;}
/* html shows only outside the page: under Safari's bottom toolbar. Same colour as the tab bar, so no seam. */
html{background:var(--panel);}
body{
  background:var(--bg); color:var(--text); font-family:var(--sans);
  display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden; font-size:15px;
  position:fixed; inset:0; /* stops iOS "rubber band" bounce of the whole page */
  -webkit-text-size-adjust:100%;
}
/* No height tricks for the home-screen app: the iOS 26 bottom-strip bug is avoided by the
   opaque status-bar style in index.html (see the comment there). Stretching the page past
   the window only pushes the tab bar into the area iOS won't paint. */
/* No double-tap zoom on controls — taps register instantly like in a native app. */
button, input, textarea, select, summary, .tabbar, .qr-chip{touch-action:manipulation;}
button{font-family:var(--sans);}

/* HEADER, Telegram-style: name + status centred, avatar on the right.
   Long-press the name (or 5 quick taps) opens the hidden agent settings. */
.chat-header{
  flex:0 0 auto; border-bottom:1px solid var(--line); background:var(--panel);
  padding:calc(var(--safe-top) + 6px) calc(var(--safe-right) + 12px) 6px calc(var(--safe-left) + 12px);
  display:flex; align-items:center; gap:10px;
}
.hdr-side{width:38px; flex:0 0 auto;}
.hdr-center{
  flex:1; min-width:0; text-align:center; cursor:default;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.hdr-name{font-weight:600; font-size:16px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hdr-status{font-size:12.5px; color:var(--muted); line-height:1.3; height:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hdr-status.typing{color:var(--accent);}
/* "typing…" dots, like Telegram's */
.typing-dots{display:inline-flex; gap:2px; margin-left:3px; vertical-align:middle;}
.typing-dots i{width:4px; height:4px; border-radius:50%; background:currentColor; animation:dot-bounce 1.2s infinite ease-in-out;}
.typing-dots i:nth-child(2){animation-delay:.15s;}
.typing-dots i:nth-child(3){animation-delay:.3s;}
@keyframes dot-bounce{0%,60%,100%{transform:translateY(0); opacity:.4;} 30%{transform:translateY(-3px); opacity:1;}}
.hdr-avatar{
  width:38px; height:38px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  background:linear-gradient(145deg, var(--accent-fill), #b97a26); display:flex; align-items:flex-end; justify-content:center;
}
.hdr-avatar svg{width:34px; height:34px; fill:rgba(255,255,255,.92);}
/* The manager's portrait fills the whole circle (its own background colour). */
.hdr-avatar:has(svg.avatar){background:none; align-items:center;}
.hdr-avatar svg.avatar{width:100%; height:100%;}

/* MAIN AREA */
main{flex:1; min-height:0; display:flex; overflow:hidden; padding:0 var(--safe-right) 0 var(--safe-left);}
.panel{flex:1; min-width:0; min-height:0; display:none; flex-direction:column; overflow:hidden;}
.panel.active{display:flex;}
.panel-scroll{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px;}
/* Tab switch: the new tab slides in from the side it lives on */
.panel.enter-from-right{animation:tab-in-right .24s cubic-bezier(.2,.8,.2,1);}
.panel.enter-from-left{animation:tab-in-left .24s cubic-bezier(.2,.8,.2,1);}
@keyframes tab-in-right{from{opacity:0; transform:translateX(22px);} to{opacity:1; transform:none;}}
@keyframes tab-in-left{from{opacity:0; transform:translateX(-22px);} to{opacity:1; transform:none;}}

/* Small round icon button (e.g. "history" in Goal / Tasks) */
.icon-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--panel-2);
  color:var(--muted); display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; flex:0 0 auto;
  transition:transform .15s ease, background .15s ease;
}
.icon-btn:active{transform:scale(.9); background:var(--accent-dim); color:var(--accent);}
.icon-btn svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}

/* PAGE HEADER (Goal, Tasks, Settings) — iOS-style large title. The chat keeps the
   Telegram-style manager header; only one of the two is shown at a time. */
body:not([data-tab="chat"]) .chat-header{display:none;}
body[data-tab="chat"] .page-header{display:none;}
.page-header{
  flex:0 0 auto; position:relative; background:var(--bg); border-bottom:1px solid var(--line);
  padding:calc(var(--safe-top) + 12px) calc(var(--safe-right) + 16px) 12px calc(var(--safe-left) + 16px);
  display:flex; align-items:flex-end; gap:12px;
}
.ph-text{flex:1; min-width:0;}
.ph-text.swap{animation:ph-swap .24s cubic-bezier(.2,.8,.2,1);}
@keyframes ph-swap{from{opacity:0; transform:translateY(5px);} to{opacity:1; transform:none;}}
.ph-title{margin:0; font-size:30px; font-weight:700; letter-spacing:-.4px; line-height:1.1;}
.ph-sub{font-size:13.5px; color:var(--muted); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ph-sub:empty{display:none;}
.page-header .icon-btn[hidden]{display:none;}
/* Thin progress line along the header's bottom edge (milestones reached / tasks done) */
.ph-progress{position:absolute; left:0; right:0; bottom:-1px; height:3px;}
.ph-progress[hidden]{display:none;}
.ph-progress i{display:block; height:100%; width:0; background:var(--accent-fill); border-radius:0 3px 3px 0; transition:width .6s cubic-bezier(.2,.8,.2,1);}

/* SUB-PAGES (Journal, Log): a full screen sliding in from the right, like Telegram */
.subpage{
  position:fixed; inset:0; z-index:9; background:var(--bg); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.8,.2,1); visibility:hidden;
  padding:0 var(--safe-right) var(--safe-bottom) var(--safe-left);
}
.subpage.open{transform:none; visibility:visible;}
.subpage-head{
  flex:0 0 auto; display:flex; align-items:center; gap:6px; background:var(--panel); border-bottom:1px solid var(--line);
  padding:calc(var(--safe-top) + 6px) 8px 6px;
}
.subpage-head strong{flex:1; text-align:center; font-size:16px;}
.subpage-head .hdr-side{width:56px;}
.back-btn{width:44px; height:40px; border:none; background:none; color:var(--accent); display:flex; align-items:center; padding:0; cursor:pointer;}
.back-btn svg{width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.text-btn{background:none; border:none; color:var(--accent); font-size:14px; padding:8px 6px; cursor:pointer; min-width:56px; text-align:right;}

/* Settings tab: a row that opens a sub-page */
.settings-row{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r); color:var(--text);
  padding:13px 14px; font-size:15px; cursor:pointer; text-align:left; transition:transform .15s ease;
}
.settings-row:active{transform:scale(.98); background:var(--accent-dim);}
.settings-row svg{width:18px; height:18px; stroke:var(--muted); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

/* BOTTOM TAB BAR */
.tabbar{
  flex:0 0 auto; display:flex; background:var(--panel); border-top:1px solid var(--line);
  padding:0 var(--safe-right) var(--safe-bottom) var(--safe-left);
}
.tabbar button{
  flex:1; background:none; border:none; color:var(--muted); height:var(--tabbar-h);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:10.5px; cursor:pointer; padding:0;
}
.tabbar svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.tabbar button.active{color:var(--accent); font-weight:600;}
/* Give the chat's text box more room while the iPhone keyboard is open. */
body.typing .tabbar{display:none;}