/* 專注工作台 — B 的留白版面 × C 的晨曦色調：天空漸層上的一整張毛玻璃頁面，頁內只用細線與留白分隔。 */
:root {
  --ink: #26244d;            /* 深靛：主要文字 */
  --ink2: #3f3c72;
  --muted: #575482;          /* 次要文字，對白底約 6.5:1 */
  --faint: #8b88b0;          /* 只用在線條、裝飾 */
  --hair: rgba(38, 36, 77, .11);
  --hair-strong: rgba(38, 36, 77, .55);
  --accent: #5a4fb3;         /* 薰衣草紫：唯一強調色 */
  --accent-soft: rgba(90, 79, 179, .09);
  --warn: #e5546f;           /* 珊瑚粉：逾期、緊急 */
  --warn-soft: rgba(229, 84, 111, .10);
  --ok: #2f9e72;
  --ok-soft: rgba(47, 158, 114, .10);
  --sun: #e9a23b;
  --sheet: rgba(255, 255, 255, .62);
  --sans: "Outfit", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  /* aliases for AI-generated custom widgets */
  --fg: var(--ink); --bg: transparent; --card: rgba(255,255,255,.6); --card2: rgba(255,255,255,.75); --line: var(--hair);
  --sky: #8fbaf2; --sky-deep: var(--accent); --sky-soft: var(--accent-soft); --paper: rgba(255,255,255,.6);
  --red: var(--warn); --coral: var(--warn); --orange: var(--sun); --peach: #f6b38f; --green: var(--ok); --mint: var(--ok); --blue: #6d9be0; --lilac: #b3a7f0;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: #c7b5f0; }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 14px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background: linear-gradient(168deg, #ffcfb8 0%, #f7b6cf 16%, #c9b6f0 38%, #96bdf2 62%, #bcdcfb 82%, #eef6ff 100%) fixed; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
.muted { color: var(--muted); } .small { font-size: 13px; } .hidden { display: none !important; }
.hand { font-family: var(--sans); }
::selection { background: rgba(90,79,179,.18); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(38,36,77,.15); border-radius: 8px; }

/* ---------- sky: soft cloud light, no outlines ---------- */
#sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#sky .sun { position: absolute; right: -160px; top: -200px; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,240,220,.85), rgba(255,240,220,0) 65%); }
#sky .blob { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.8), rgba(255,255,255,0)); filter: blur(8px);
  animation: drift linear infinite; }
@keyframes drift { from { transform: translateX(-12vw); } to { transform: translateX(12vw); } }

/* ---------- hero (on the sky) ---------- */
#topbar { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; max-width: 1400px; margin: 0 auto; padding: 40px 56px 26px; color: var(--ink); }
#brand { display: none; }
#clock { font-size: 46px; font-weight: 400; letter-spacing: -1.4px; line-height: 1.05; color: var(--ink); }
#clock span { color: var(--ink2); font-weight: 300; }
#ask { flex: 1; min-width: 240px; max-width: 520px; margin-left: auto; display: flex; position: relative; }
#ask input { flex: 1; padding: 11px 18px 11px 42px; border-radius: 999px; border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.85); color: var(--ink); outline: none;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#ask input::placeholder { color: var(--muted); }
#ask input:focus { background: #fff; border-color: var(--accent); }
#ask svg { position: absolute; left: 15px; top: 50%; translate: 0 -50%; width: 17px; color: var(--muted); }
.iconbtn { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.85); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(14px); transition: background .2s; }
.iconbtn:hover { background: #fff; }
.iconbtn svg { width: 19px; height: 19px; }
.badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--warn); color: #fff; font-size: 11px; display: grid; place-items: center; padding: 0 5px; font-weight: 600; }

/* ---------- the glass sheet ---------- */
#sheet { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto 60px; padding: 0 56px 56px; border-radius: 36px;
  background: rgba(255,255,255,.93);
  box-shadow: 0 30px 80px rgba(70,60,140,.18), inset 0 1px 0 rgba(255,255,255,.9); }
@media (min-width: 1460px) { #sheet { margin-left: auto; margin-right: auto; } }
@media (max-width: 1460px) { #sheet { margin-left: 24px; margin-right: 24px; } }

/* metrics row (B) */
#chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); border-bottom: 1px solid var(--hair-strong); }
.metric { padding: 26px 0 22px 20px; border-right: 1px solid var(--hair); cursor: default; }
.metric:first-child { padding-left: 0; }
.metric:last-child { border-right: 0; }
.metric .n { font-size: 40px; font-weight: 300; letter-spacing: -1px; line-height: 1; }
.metric .l { font-size: 13px; color: var(--muted); margin-top: 8px; }
.metric.alert .n { color: var(--warn); }
.metric.go { cursor: pointer; }
.metric.go:hover .l { color: var(--accent); }

/* mention strip (B) */
#mentions { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
#mentions:empty { display: none; }
.mention { display: flex; align-items: center; gap: 16px; padding: 13px 18px; border-left: 2px solid var(--warn); background: var(--warn-soft); cursor: pointer; animation: slideIn .5s cubic-bezier(.2,1,.3,1); }
.mention.seen { border-left-color: var(--accent); background: var(--accent-soft); }
.mention .ring { display: none; }
.mention .who { font-weight: 600; white-space: nowrap; }
.mention .txt { color: var(--ink2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention > div { display: contents; }
.mention .small { white-space: nowrap; }
.mention::after { content: "回覆 →"; color: var(--accent); font-weight: 600; white-space: nowrap; }
.mention:not(.seen) .who::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); margin-right: 9px; vertical-align: 2px; animation: pulse 1.4s infinite; }

/* ---------- widget grid: sections, not cards ---------- */
#grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; row-gap: 44px; padding-top: 40px; align-items: start; }
@media (max-width: 1200px) { #grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  #grid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; padding-top: 28px; } .w2, .w3 { grid-column: span 1 !important; }
  #topbar { padding: calc(18px + env(safe-area-inset-top)) 16px 14px; gap: 10px; }
  #clock { font-size: 30px; width: 100%; }
  #ask { min-width: 0; flex: 1; max-width: none; margin-left: 0; }
  #ask input { min-width: 0; width: 100%; }
  #ask input, .in, textarea.in, select.in, .addrow input { font-size: 16px; }   /* iOS: no zoom on focus */
  .iconbtn { width: 40px; height: 40px; flex: none; }
  #sheet { padding: 0 18px 28px; margin: 0 8px calc(24px + env(safe-area-inset-bottom)); border-radius: 24px; }
  #chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metric { padding: 16px 0 14px 10px; border-right: 1px solid var(--hair); }
  .metric:nth-child(4n + 1) { padding-left: 0; } .metric:nth-child(4n) { border-right: 0; }
  .metric .n { font-size: 28px; } .metric .l { font-size: 12px; line-height: 1.3; }
  .widget { max-height: none; } .wbody { max-height: 620px; }
  .whead .grip { display: none; } .whead .edit-hint { opacity: 1; }
  .focus-title { font-size: 22px; } .timer { font-size: 44px; } .focus-row { gap: 14px; } .progress { flex-basis: 100%; order: 5; }
  .mention { flex-wrap: wrap; gap: 4px 12px; } .mention .txt { white-space: normal; flex-basis: 100%; }
  #drawer { inset: 0; width: 100vw; border-radius: 0; padding-top: env(safe-area-inset-top); }
  #drawer header { padding: 14px 18px 10px; } #drawer .content { padding: 6px 18px calc(28px + env(safe-area-inset-bottom)); }
  #toasts { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); } .toast { min-width: 0; max-width: none; width: 100%; }
  .cal-week { grid-template-columns: 38px repeat(var(--days, 7), minmax(0, 1fr)); }
  .cal-cell { min-height: 64px; padding: 3px; } .cal-cell .cal-chip, .cal-cell .cal-task { font-size: 10.5px; }
  .bigmsg { font-size: 34px; white-space: normal; text-align: center; width: 90vw; }
}
.w2 { grid-column: span 2; } .w3 { grid-column: 1 / -1; }
.widget { position: relative; display: flex; flex-direction: column; min-height: 80px; max-height: 720px; animation: rise .6s both; }
.widget.dragging { opacity: .4; }
.widget.drop-target::before { content: ""; position: absolute; inset: -12px; border: 1.5px dashed var(--accent); border-radius: 14px; }
.whead { display: flex; align-items: baseline; gap: 10px; padding: 0 0 14px; cursor: pointer; user-select: none; }
.wtitle { flex: 1; display: flex; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 1.2px; color: var(--ink2); }
.wtitle .ic, .wtitle .scribble { display: none; }
.wtitle .count { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.whead .grip { cursor: grab; color: var(--faint); letter-spacing: -2px; opacity: 0; transition: opacity .2s; }
.whead .edit-hint { font-size: 12px; color: var(--accent); opacity: 0; transition: opacity .2s; display: flex; gap: 4px; align-items: center; }
.whead .edit-hint svg { width: 13px; }
.widget:hover .grip, .whead:hover .edit-hint { opacity: 1; }
.whead:hover .wtitle { color: var(--ink); }
.wbody { overflow: auto; flex: 1; border-top: 1px solid var(--hair-strong); padding-top: 4px; }
.wbody iframe { width: 100%; border: 0; min-height: 220px; background: transparent; }
.empty { color: var(--muted); padding: 22px 0; font-size: 13.5px; }
.empty svg { display: none; }
.add-widget { border: 1px dashed var(--faint); border-radius: 16px; min-height: 110px; color: var(--muted); cursor: pointer; background: transparent; font-size: 14px; transition: all .2s; }
.add-widget:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-16px); } }

/* ---------- rows ---------- */
.row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--hair); cursor: pointer; position: relative; }
.row:last-child { border-bottom: 0; }
.row:hover .t { color: var(--accent); }
.row .main { flex: 1; min-width: 0; }
.row .t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.row .sub { color: var(--muted); font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.row.done .t { color: var(--muted); text-decoration: line-through; }
.row.overdue .due { color: var(--warn); font-weight: 600; }
.row[draggable="true"] { cursor: grab; }
.check { width: 18px; height: 18px; flex: none; margin-top: 3px; cursor: pointer; background: none; border: 0; padding: 0; color: var(--ink); }
.check svg { width: 18px; height: 18px; overflow: visible; }
.check .circle { fill: none; stroke: currentColor; stroke-width: 1.6; }
.check .tick { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .4s ease; }
.check.on .circle { fill: var(--ink); }
.check.on .tick { stroke-dashoffset: 0; }
.check:hover .circle { stroke: var(--accent); }
.prio { flex: none; font-size: 12px; font-weight: 700; padding: 0; border: 0; background: none; cursor: pointer; margin-top: 3px; width: 20px; text-align: left; }
.p1 { color: #c93a57; } .p2 { color: var(--ink); } .p3 { color: var(--ink2); } .p4 { color: var(--muted); }
.tag { display: inline-block; font-size: 11.5px; font-weight: 600; margin-right: 8px; white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; margin-top: 8px; }
.u-critical { background: var(--warn); animation: pulse 1.3s infinite; } .u-high { background: #f08a5d; } .u-medium { background: var(--sun); } .u-low { background: var(--faint); } .u- { background: transparent; }
input.due { background: transparent; border: 0; font-size: 13px; color: var(--ink2); padding: 0; width: 112px; text-align: right; font-variant-numeric: tabular-nums; }
input.due:focus { outline: none; color: var(--accent); }
.addrow { display: flex; gap: 10px; margin: 8px 0 6px; }
.addrow input, .addrow select { flex: 1; padding: 9px 0; border: 0; border-bottom: 1px solid var(--hair); background: transparent; outline: none; }
.addrow input:focus { border-bottom-color: var(--accent); }

/* ---------- buttons / forms ---------- */
.btn { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--ink); background: transparent; cursor: pointer; white-space: nowrap; font-weight: 500; transition: all .15s; }
.btn:hover { background: rgba(255,255,255,.6); }
.btn.primary { background: var(--ink); color: #fff; }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); }
.btn.good { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.warn { color: var(--warn); border-color: var(--warn); }
.btn.sm { padding: 3px 12px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: wait; }
.btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; align-items: center; }
label.f { display: block; margin: 16px 0 4px; font-size: 12.5px; color: var(--ink2); font-weight: 600; letter-spacing: .8px; }
.in, textarea.in, select.in { width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--hair); background: rgba(255,255,255,.75); outline: none; }
.in:focus { border-color: var(--accent); }
textarea.in { min-height: 96px; resize: vertical; line-height: 1.65; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
pre.body { white-space: pre-wrap; word-break: break-word; background: rgba(255,255,255,.6); padding: 14px 16px; border-radius: 12px; font-family: inherit; font-size: 13.5px; line-height: 1.7; max-height: 400px; overflow: auto; margin: 6px 0; }
.note { padding: 13px 16px; border-left: 2px solid var(--accent); background: var(--accent-soft); margin: 10px 0; font-size: 13.5px; line-height: 1.7; }
.note.warm { border-left-color: var(--sun); background: rgba(233,162,59,.1); } .note.rose { border-left-color: var(--warn); background: var(--warn-soft); }
.md { line-height: 1.75; } .md p { margin: .4em 0; } .md h3 { font-size: 16px; font-weight: 600; margin: 1.1em 0 .3em; } .md h4 { font-size: 14px; margin: .9em 0 .2em; }
.md table { border-collapse: collapse; margin: 8px 0; font-size: 13px; } .md td, .md th { border-bottom: 1px solid var(--hair); padding: 5px 12px 5px 0; text-align: left; }
.seg { display: inline-flex; gap: 18px; }
.seg button { border: 0; background: none; padding: 2px 0; cursor: pointer; font-size: 13.5px; color: var(--muted); border-bottom: 1.5px solid transparent; }
.seg button.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.toggle { display: inline-flex; gap: 7px; align-items: center; font-size: 13px; cursor: pointer; }
.toggle input { accent-color: var(--accent); width: 15px; height: 15px; }

/* ---------- focus ---------- */
.focus-title { font-size: 28px; font-weight: 400; letter-spacing: -.5px; line-height: 1.25; margin: 16px 0 6px; }
.focus-goal { color: var(--muted); }
.focus-row { display: flex; align-items: center; gap: 24px; margin: 22px 0 6px; flex-wrap: wrap; }
.timer { font-size: 54px; font-weight: 200; letter-spacing: -2px; font-variant-numeric: tabular-nums; line-height: 1; }
.progress { flex: 1; min-width: 80px; height: 2px; background: var(--hair); position: relative; }
.progress i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); transition: width 1s linear; }
.focus-pick { border: 0; background: transparent; color: var(--ink2); padding: 10px 0 0; font-size: 13px; max-width: 100%; cursor: pointer; }

/* ---------- usage ---------- */
.meter { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.meter:last-of-type { border-bottom: 0; }
.meter .lbl { display: flex; justify-content: space-between; align-items: baseline; }
.meter .lbl b { font-size: 22px; font-weight: 300; font-variant-numeric: tabular-nums; }
.meter .bar { height: 2px; background: var(--hair); margin-top: 8px; }
.meter .bar i { display: block; height: 100%; background: var(--ink); transition: width .8s; }
.meter.mid .bar i { background: var(--sun); } .meter.high .bar i { background: var(--warn); }

/* ---------- meetings / agenda ---------- */
.mtg { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hair); cursor: pointer; position: relative; }
.mtg:last-child { border-bottom: 0; }
.mtg:hover .t { color: var(--accent); }
.mtg.past { opacity: .45; }
.mtg .time { color: var(--ink2); font-variant-numeric: tabular-nums; font-size: 13.5px; }
.mtg.now .time { color: var(--accent); font-weight: 600; }
.mtg.now::before { content: ""; position: absolute; left: -14px; top: 20px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.next-mtg { padding: 10px 0; color: var(--ink2); border-bottom: 1px solid var(--hair); font-size: 13px; }
.meet-btn { color: var(--ok); font-weight: 600; text-decoration: none; margin-left: 6px; }

/* ---------- calendar (thin lines) ---------- */
.cal-head { display: flex; align-items: center; gap: 12px; margin: 10px 0 14px; flex-wrap: wrap; }
.cal-head .ttl { font-size: 18px; font-weight: 400; flex: 1; letter-spacing: -.3px; }
.cal-head .btn.sm { border-color: var(--hair); }
.cal-week { display: grid; grid-template-columns: 44px repeat(var(--days, 7), minmax(0, 1fr)); position: relative; }
.cal-dayhead { padding: 4px 0 8px 8px; font-size: 12.5px; color: var(--ink2); border-left: 1px solid var(--hair); }
.cal-dayhead b { font-size: 22px; font-weight: 300; color: var(--ink); margin-right: 5px; }
.cal-dayhead.today b { color: var(--accent); font-weight: 500; }
.cal-dayhead.drop, .cal-cell.drop, .cal-allday.drop { background: var(--accent-soft); }
.cal-allday { min-height: 24px; padding: 2px 3px; display: flex; flex-direction: column; gap: 3px; border-left: 1px solid var(--hair); border-bottom: 1px solid var(--hair-strong); }
.cal-col { position: relative; border-left: 1px solid var(--hair); }
.cal-col.today { background: rgba(90,79,179,.045); }
.cal-hour { height: 42px; border-top: 1px solid rgba(38,36,77,.05); cursor: copy; }
.cal-hour:hover { background: rgba(255,255,255,.5); }
.cal-time { font-size: 12px; color: var(--muted); text-align: right; padding-right: 8px; height: 42px; transform: translateY(-7px); font-variant-numeric: tabular-nums; }
.cal-ev { position: absolute; left: 3px; right: 3px; padding: 3px 7px; font-size: 12px; color: var(--ink2); line-height: 1.35; overflow: hidden; cursor: pointer; z-index: 2;
  background: rgba(255,255,255,.88); border-left: 2px solid var(--c, var(--accent)); transition: background .15s; }
.cal-ev:hover { background: #fff; z-index: 5; }
.cal-ev b { display: block; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev .meet { color: var(--ok); }
.cal-task { font-size: 12px; padding: 0 0 0 6px; border-left: 2px dotted var(--warn); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: grab; }
.cal-task.done { text-decoration: line-through; opacity: .5; }
.cal-now { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--warn); z-index: 4; pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.cal-scroll { max-height: 440px; overflow-y: auto; }
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--hair-strong); }
.cal-month .wd { font-size: 12px; color: var(--ink2); padding: 6px 0 6px 6px; letter-spacing: 1px; }
.cal-cell { min-height: 88px; border-left: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 5px 6px; cursor: copy; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-cell:hover { background: rgba(255,255,255,.45); }
.cal-cell.other { opacity: .4; }
.cal-cell .n { font-size: 15px; font-weight: 300; }
.cal-cell.today .n { color: var(--accent); font-weight: 600; }
.cal-chip { font-size: 12px; padding-left: 6px; border-left: 2px solid var(--c, var(--accent)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); margin-top: 10px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 2px; margin-right: 6px; vertical-align: 3px; }

/* ---------- charts (thin) ---------- */
.chart-svg { width: 100%; height: 190px; display: block; overflow: visible; }
.chart-svg text { font-family: var(--sans); fill: var(--ink2); font-size: 12.5px; }
.chart-svg .big { font-size: 28px; fill: var(--ink); font-weight: 300; }
.chart-tabs { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0 8px; }
.chart-tabs button { border: 0; background: none; font-size: 13px; padding: 2px 0; cursor: pointer; color: var(--muted); border-bottom: 1.5px solid transparent; }
.chart-tabs button.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.chart-sum { color: var(--ink2); font-size: 13.5px; margin-bottom: 6px; }
.chart-sum b { font-size: 30px; font-weight: 300; color: var(--ink); margin: 0 4px; letter-spacing: -1px; }

/* ---------- sessions / LINE / timeline ---------- */
.sess { padding: 13px 0; border-bottom: 1px solid var(--hair); cursor: pointer; }
.sess:last-child { border-bottom: 0; }
.sess:hover .ttl { color: var(--accent); }
.sess .top { display: flex; gap: 10px; align-items: baseline; }
.sess .ttl { font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess.needs_input .ttl::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 2px; animation: pulse 1.4s infinite; }
.st { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.st.running { color: #2f62b8; } .st.needs_input { color: var(--accent); } .st.done { color: var(--muted); } .st.idle, .st.queued { color: var(--muted); } .st.failed { color: #c93a57; }
.spin { display: inline-block; width: 11px; height: 11px; border: 1.5px solid var(--accent); border-right-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; vertical-align: -1px; }
.msg { display: flex; gap: 12px; padding: 9px 0; cursor: pointer; border-bottom: 1px solid var(--hair); }
.msg:last-child { border-bottom: 0; }
.msg .avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 600; color: #fff; font-size: 12px; }
.msg .who { font-weight: 600; font-size: 12.5px; }
.msg .txt { white-space: pre-wrap; word-break: break-word; margin-top: 1px; }
.msg.issue .txt { padding-left: 10px; border-left: 2px solid var(--sun); }
.msg.me-tag .txt { padding-left: 10px; border-left: 2px solid var(--warn); }
.cat { font-size: 12px; font-weight: 600; margin-left: 6px; }
.cat.bug { color: #c93a57; } .cat.feature { color: var(--accent); } .cat.question { color: #a8650f; } .cat.info { color: var(--muted); }
.tabs { display: flex; gap: 16px; overflow-x: auto; margin: 10px 0 6px; padding-bottom: 2px; }
.tabs button { flex: none; border: 0; background: none; padding: 2px 0; cursor: pointer; font-size: 13px; color: var(--muted); border-bottom: 1.5px solid transparent; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.tl { margin-left: 4px; padding-left: 20px; border-left: 1px solid var(--hair-strong); }
.tl .it { position: relative; padding: 8px 0; cursor: pointer; }
.tl .it:hover .t { color: var(--accent); }
.tl .it::before { content: ""; position: absolute; left: -24px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.tl .it.mail::before { background: var(--blue); } .tl .it.line::before { background: var(--ok); } .tl .it.commit::before { background: var(--sun); }
.tl .it.minutes::before { background: var(--accent); } .tl .it.note::before { background: var(--faint); } .tl .it.task::before { background: var(--warn); }
.drop-zone { border: 1px dashed var(--faint); border-radius: 14px; padding: 18px; text-align: center; color: var(--muted); cursor: pointer; margin-top: 10px; transition: all .2s; }
.drop-zone:hover, .drop-zone.over { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.drop-zone svg { width: 26px; height: 26px; display: block; margin: 0 auto 6px; }
.drop-zone b.hand { font-size: 14px !important; font-weight: 600; }

/* ---------- drawer ---------- */
#scrim { position: fixed; inset: 0; background: rgba(60,50,120,.18); backdrop-filter: blur(2px); z-index: 40; }
#drawer { position: fixed; top: 16px; right: 16px; bottom: 16px; width: min(620px, calc(100vw - 32px)); border-radius: 28px;
  background: rgba(252,251,255,.9); backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%);
  z-index: 41; display: flex; flex-direction: column; transform: translateX(110%); transition: transform .35s cubic-bezier(.2,1,.3,1);
  box-shadow: 0 30px 80px rgba(60,50,120,.25); }
#drawer.open { transform: none; }
#drawer header { display: flex; align-items: center; gap: 10px; padding: 22px 28px 12px; border-bottom: 1px solid var(--hair); }
#drawer header h3 { margin: 0; flex: 1; font-size: 20px; font-weight: 400; letter-spacing: -.3px; }
#drawer header .iconbtn { color: var(--ink); border-color: var(--hair); background: transparent; width: 36px; height: 36px; }
#drawer .content { padding: 8px 28px 32px; overflow: auto; flex: 1; }
#drawer h4 { font-size: 13px; font-weight: 600; letter-spacing: 1px; color: var(--ink2); margin: 26px 0 6px; }

/* ---------- toasts & delight ---------- */
#toasts { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.toast { min-width: 280px; max-width: 400px; padding: 14px 18px 14px 20px; border-radius: 18px; background: rgba(255,255,255,.94); backdrop-filter: blur(16px);
  box-shadow: 0 18px 50px rgba(60,50,120,.22); cursor: pointer; animation: toastIn .5s cubic-bezier(.2,1.3,.4,1); border-left: 3px solid var(--accent); }
.toast .tt { font-weight: 600; } .toast .tb { color: var(--muted); font-size: 13px; margin-top: 2px; }
.toast.task_done, .toast.minutes_done { border-left-color: var(--ok); }
.toast.mail_urgent, .toast.line_mention { border-left-color: var(--warn); }
.toast.mail_urgent { animation: toastIn .5s, shake .5s .5s; }
.toast.session_input { border-left-color: var(--sun); }
.toast.out { animation: toastOut .3s forwards; }
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 55; }
.flyer { position: fixed; z-index: 56; pointer-events: none; width: 48px; height: 48px; color: var(--accent); }
.flyer svg { width: 100%; height: 100%; overflow: visible; }
.flyer path, .flyer circle, .flyer line, .flyer polyline, .flyer rect { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bigmsg { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 57; pointer-events: none; font-size: 52px; font-weight: 200; letter-spacing: -1.5px;
  color: var(--ink); text-shadow: 0 0 18px #fff, 0 0 36px #fff, 0 0 60px rgba(255,255,255,.9); animation: bigmsg 1.9s ease-out forwards; white-space: nowrap; }
.widget.flash-green .wbody, .widget.flash-blue .wbody, .widget.flash-red .wbody, .widget.flash-orange .wbody { animation: flashLine 1.2s ease 2; }
.widget.flash-red .wbody { --fc: var(--warn); } .widget.flash-orange .wbody { --fc: var(--sun); } .widget.flash-green .wbody { --fc: var(--ok); }
@keyframes flashLine { 50% { border-top-color: var(--fc, var(--accent)); box-shadow: 0 -2px 0 var(--fc, var(--accent)); } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toastIn { from { transform: translateY(24px); opacity: 0; } }
@keyframes toastOut { to { transform: translateX(120%); opacity: 0; } }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes bigmsg { 0% { opacity: 0; transform: translate(-50%, -35%); } 20% { opacity: 1; transform: translate(-50%, -50%); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -62%); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; } }

/* ---------- login ---------- */
#login { position: fixed; inset: 0; display: grid; place-items: center; z-index: 100; }
#login form { background: var(--sheet); backdrop-filter: blur(24px); padding: 36px; border-radius: 28px; box-shadow: 0 30px 80px rgba(70,60,140,.18); width: min(380px, 90vw); }
#login h2 { font-size: 26px; font-weight: 300; margin: 0 0 6px; }