/* Design tokens duplicated from /wwwroot/index.html (landing) - keep in sync */
:root{
  --bg:#f4f4f2;
  --surface:#fdfdfc;
  --ink:#1b1c1e;
  --ink-soft:#5a5c61;
  --line:rgba(27,28,30,.1);
  --note-yellow:#ffd84d;
  --note-yellow-deep:#e8bd25;
  --note-pink:#ffb3c7;
  --note-green:#b8e6a3;
  --note-blue:#a9d3ff;
  --tint-yellow:#fdf3cf;
  --tint-pink:#fce8ee;
  --tint-green:#e9f5e0;
  --tint-blue:#e4f0fd;
  --pill-bg:#1b1c1e;
  --pill-ink:#f7f7f5;
  --danger:#c2453a;
  --shadow-note:0 6px 16px rgba(90,80,40,.16);
  --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-note:"Segoe Print","Bradley Hand","Marker Felt","Comic Sans MS",cursive;
}
/* Tells the browser to render native controls (select popups, scrollbars, etc.) in the
   matching palette — without this the <select> options list defaults to light/dark based
   on OS scheme regardless of our own theme, making text unreadable against it. */
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){color-scheme:dark}
}
:root[data-theme="dark"]{
  --bg:#161719;
  --surface:#1e2023;
  --ink:#ececea;
  --ink-soft:#a4a6ab;
  --line:rgba(236,236,234,.12);
  --note-yellow:#e8c53f;
  --note-yellow-deep:#c7a422;
  --note-pink:#e79cb1;
  --note-green:#a3cf8f;
  --note-blue:#93bfea;
  --tint-yellow:#33301f;
  --tint-pink:#332229;
  --tint-green:#24301f;
  --tint-blue:#1f2a36;
  --pill-bg:#ececea;
  --pill-ink:#1b1c1e;
  --danger:#e06a5f;
  --shadow-note:0 6px 16px rgba(0,0,0,.4);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#161719;
    --surface:#1e2023;
    --ink:#ececea;
    --ink-soft:#a4a6ab;
    --line:rgba(236,236,234,.12);
    --note-yellow:#e8c53f;
    --note-yellow-deep:#c7a422;
    --note-pink:#e79cb1;
    --note-green:#a3cf8f;
    --note-blue:#93bfea;
    --tint-yellow:#33301f;
    --tint-pink:#332229;
    --tint-green:#24301f;
    --tint-blue:#1f2a36;
    --pill-bg:#ececea;
    --pill-ink:#1b1c1e;
    --danger:#e06a5f;
    --shadow-note:0 6px 16px rgba(0,0,0,.4);
  }
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
  overflow:hidden;
}
::selection{background:var(--note-yellow);color:#1b1c1e}
button{font:inherit;color:inherit}
[hidden]{display:none !important}

/* ---------- Scrollbars ---------- */
.board-scroll,.chat-list,.notes-list,.settings-col,.user-pop,textarea{
  scrollbar-width:thin;
  scrollbar-color:var(--scroll-thumb) transparent;
}
:root{--scroll-thumb:rgba(27,28,30,.28);--scroll-thumb-hover:rgba(27,28,30,.46)}
:root[data-theme="dark"]{--scroll-thumb:rgba(236,236,234,.26);--scroll-thumb-hover:rgba(236,236,234,.44)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--scroll-thumb:rgba(236,236,234,.26);--scroll-thumb-hover:rgba(236,236,234,.44)}
}
.board-scroll::-webkit-scrollbar,
.chat-list::-webkit-scrollbar,
.notes-list::-webkit-scrollbar,
.settings-col::-webkit-scrollbar,
.user-pop::-webkit-scrollbar,
textarea::-webkit-scrollbar{width:10px;height:10px}
.board-scroll::-webkit-scrollbar-track,
.chat-list::-webkit-scrollbar-track,
.notes-list::-webkit-scrollbar-track,
.settings-col::-webkit-scrollbar-track,
.user-pop::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track{background:transparent}
.board-scroll::-webkit-scrollbar-thumb,
.chat-list::-webkit-scrollbar-thumb,
.notes-list::-webkit-scrollbar-thumb,
.settings-col::-webkit-scrollbar-thumb,
.user-pop::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
.board-scroll::-webkit-scrollbar-thumb:hover,
.chat-list::-webkit-scrollbar-thumb:hover,
.notes-list::-webkit-scrollbar-thumb:hover,
.settings-col::-webkit-scrollbar-thumb:hover,
.user-pop::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}
.board-scroll::-webkit-scrollbar-corner{background:transparent}

/* ---------- Buttons ---------- */
.btn-primary{
  background:var(--pill-bg);color:var(--pill-ink);
  border:0;border-radius:999px;padding:11px 22px;
  font-weight:600;font-size:.92rem;line-height:1;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  transition:transform .15s ease,opacity .15s ease;
}
.btn-primary:hover{opacity:.9}
.btn-primary:active{transform:scale(.97)}
.btn-primary:disabled{opacity:.5;cursor:default}
.btn-ghost{
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:10px 20px;font-weight:600;font-size:.92rem;cursor:pointer;color:var(--ink-soft);
}
.btn-ghost:hover{background:var(--surface)}
.btn-danger{
  background:transparent;border:1px solid var(--danger);color:var(--danger);
  border-radius:999px;padding:10px 20px;font-weight:600;font-size:.92rem;cursor:pointer;
}
.btn-danger:hover{background:var(--danger);color:#fff}

/* ---------- Nav ---------- */
nav{
  flex:none;z-index:40;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
.nav-inner{display:flex;align-items:center;gap:18px;height:60px;padding:0 18px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1rem;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.tabs{display:flex;gap:4px;flex:1}
.tab{
  padding:7px 16px;border-radius:999px;text-decoration:none;
  color:var(--ink-soft);font-weight:600;font-size:.9rem;
  transition:background .2s,color .2s;
}
.tab:hover{background:var(--surface)}
.tab[aria-current="true"]{background:var(--ink);color:var(--bg)}
.nav-tools{display:flex;align-items:center;gap:10px;margin-left:auto}
.sync-dot{width:9px;height:9px;border-radius:50%;background:var(--ink-soft);opacity:.45;transition:background .3s,opacity .3s}
.sync-dot[data-state="saved"]{background:#4caf6d;opacity:1}
.sync-dot[data-state="syncing"]{background:var(--note-yellow-deep);opacity:1}
.sync-dot[data-state="offline"]{background:var(--danger);opacity:1}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.lang button{
  font-size:.76rem;font-weight:600;padding:5px 12px;border:0;cursor:pointer;
  background:transparent;color:var(--ink-soft);transition:background .2s,color .2s;
}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.theme-btn{
  width:34px;height:34px;border-radius:999px;border:1px solid var(--line);
  background:transparent;cursor:pointer;display:grid;place-items:center;
  transition:background .2s;
}
.theme-btn:hover{background:var(--surface)}
.theme-btn svg{width:17px;height:17px}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .sun{display:none}
  :root:not([data-theme="light"]) .theme-btn .moon{display:block}
}
.user-menu{position:relative}
.user-btn{
  display:flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:999px;background:transparent;
  padding:6px 13px;font-size:.84rem;font-weight:600;cursor:pointer;color:var(--ink);
  max-width:190px;
}
.user-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-pop{
  position:absolute;right:0;top:calc(100% + 8px);z-index:50;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:12px;min-width:210px;box-shadow:0 10px 30px rgba(0,0,0,.14);
  display:flex;flex-direction:column;gap:10px;
}
.user-email{font-size:.8rem;color:var(--ink-soft);word-break:break-all}
.user-pop button{
  border:1px solid var(--line);background:transparent;border-radius:999px;
  padding:8px 14px;font-weight:600;font-size:.85rem;cursor:pointer;
}
.user-pop button:hover{background:var(--danger);border-color:var(--danger);color:#fff}

/* Guest banner */
.guest-banner{
  display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap;
  background:var(--tint-yellow);border-bottom:1px solid var(--line);
  padding:9px 44px 9px 18px;font-size:.88rem;position:relative;
}
.guest-banner button:not(.banner-x){
  border:0;background:var(--ink);color:var(--bg);border-radius:999px;
  padding:6px 14px;font-size:.8rem;font-weight:600;cursor:pointer;
}
.banner-x{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;font-size:1.2rem;cursor:pointer;color:var(--ink-soft);
  width:30px;height:30px;border-radius:50%;
}
.banner-x:hover{background:rgba(0,0,0,.08)}

/* ---------- Auth ---------- */
#authView{
  flex:1;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;padding:24px;
}
.auth-bg{position:absolute;inset:0;pointer-events:none}
.auth-bg .note{position:absolute;width:120px;height:110px;opacity:.55}
.auth-card{
  position:relative;width:min(420px,100%);
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:34px 30px 30px;box-shadow:0 18px 48px rgba(0,0,0,.12);
}
.auth-brand{justify-content:center;margin-bottom:22px;font-size:1.15rem}
.auth-tabs{display:flex;gap:4px;background:var(--bg);border-radius:999px;padding:4px;margin-bottom:22px}
.auth-tab{
  flex:1;border:0;border-radius:999px;padding:9px 0;font-weight:600;font-size:.9rem;
  background:transparent;color:var(--ink-soft);cursor:pointer;transition:background .2s,color .2s;
}
.auth-tab[aria-selected="true"]{background:var(--ink);color:var(--bg)}
form label{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;font-size:.86rem;font-weight:600}
form label small{font-weight:400;color:var(--ink-soft)}
form input,
form select,
form textarea{
  font:inherit;font-size:.95rem;
  background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
form input:focus,
form select:focus,
form textarea:focus{border-color:var(--note-yellow-deep);box-shadow:0 0 0 3px color-mix(in srgb, var(--note-yellow) 35%, transparent)}
.form-error{color:var(--danger);font-size:.85rem;margin:-6px 0 14px}
#authForm .btn-primary{width:100%;padding:13px 0}
.guest-link{
  display:block;width:100%;margin-top:16px;text-align:center;
  border:0;background:transparent;color:var(--ink-soft);
  font-size:.88rem;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.guest-link:hover{color:var(--ink)}

/* ---------- Main / views ---------- */
main{flex:1;min-height:0;display:flex;flex-direction:column}
main > section{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}

/* ---------- Board ---------- */
/* touch-action:none so JS owns ALL touch panning on this container (see initPinchPan in
   board.js) — both single-finger pan and two-finger pinch-zoom are driven entirely by that
   handler; letting the browser's native touch-scroll recognizer also react to the first
   finger would fight the JS transform and cause jank/double-movement. */
.board-scroll{
  flex:1;overflow:auto;overscroll-behavior:none;touch-action:none;
  /* iOS's long-press text-selection callout can otherwise interrupt a one-finger pan
     gesture partway through, since the empty canvas background has no text of its own but
     iOS doesn't know that ahead of a long-press. */
  -webkit-touch-callout:none;user-select:none;
}
/* .board-sizer establishes the REAL scrollable size at the current zoom level (CSS transforms
   don't affect layout/scroll size, so scaling .board-canvas alone would leave dead scroll
   space) — .board-canvas is transform-scaled to visually fill it exactly. */
.board-sizer{
  position:relative;
  width:calc(3000px * var(--zoom, 1));
  height:calc(2000px * var(--zoom, 1));
}
.board-canvas{
  position:relative;width:3000px;height:2000px;
  transform:scale(var(--zoom, 1));transform-origin:0 0;
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:22px 22px;
}
.board-hint{
  position:absolute;left:16px;bottom:12px;
  font-size:.76rem;color:var(--ink-soft);opacity:.7;pointer-events:none;
}
/* Rests as a slim outline ring (quiet, minimal footprint) and only fills solid yellow on
   hover/focus — the soft halo animation is the idle "interactive" cue instead of a bulky
   always-on fill. */
.fab{
  position:absolute;
  right:calc(22px + env(safe-area-inset-right));
  bottom:calc(22px + env(safe-area-inset-bottom));
  z-index:20;
  width:50px;height:50px;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--note-yellow-deep);
  background:color-mix(in srgb, var(--note-yellow) 14%, var(--surface));
  color:var(--ink);
  font-size:1.7rem;line-height:1;font-weight:500;
  box-shadow:0 6px 16px rgba(90,80,40,.16);
  animation:fab-breathe 3.2s ease-in-out infinite;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),
             box-shadow .28s ease, background .28s ease, color .2s ease, border-color .2s ease;
}
.fab:hover{
  animation-play-state:paused;
  transform:scale(1.1) rotate(90deg);
  background:var(--note-yellow);color:#1b1c1e;border-color:var(--note-yellow);
  box-shadow:0 12px 28px rgba(90,80,40,.38);
}
.fab:active{transform:scale(.92) rotate(90deg);transition-duration:.1s}
.fab:focus-visible{outline:2px solid var(--note-yellow-deep);outline-offset:3px}
@keyframes fab-breathe{
  0%,100%{box-shadow:0 6px 16px rgba(90,80,40,.16)}
  50%{box-shadow:0 6px 20px rgba(90,80,40,.3),0 0 0 6px rgba(255,216,77,.1)}
}
@media (prefers-reduced-motion: reduce){
  .fab{animation:none}
}

.zoom-ctl{
  position:absolute;
  left:calc(22px + env(safe-area-inset-left));
  bottom:calc(22px + env(safe-area-inset-bottom));
  z-index:20;display:flex;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  box-shadow:0 8px 22px rgba(0,0,0,.16);
  overflow:hidden;
}
.zoom-ctl button{
  border:0;background:transparent;color:var(--ink);cursor:pointer;
  font:inherit;line-height:1;
  display:grid;place-items:center;
}
.zoom-ctl button:hover{background:rgba(128,128,128,.16)}
#zoomOut,#zoomIn{width:38px;height:38px;font-size:1.15rem}
#zoomLabel{padding:0 10px;height:38px;font-size:.78rem;font-weight:600;min-width:44px}

/* Notes mirror the Windows client (NoteWindow.xaml + NoteColors.cs): saturated header
   strip, pastel body (shared dark body in dark mode), Segoe UI 14px, bottom formatting
   toolbar. Per-color vars: --nh header, --nb body, --nbd border. */
.note{
  position:absolute;
  /* --z is a persistent per-note "bring to front" rank (see bringToFront() in board.js) —
     whichever note was most recently clicked/dragged/resized keeps sitting above untouched
     siblings, even after it's deselected, until a different note is interacted with. */
  z-index:var(--z, 1);
  display:flex;flex-direction:column;
  width:240px;min-height:150px;
  background:var(--nb);
  border:1px solid var(--nbd);
  border-radius:8px;
  box-shadow:var(--shadow-note);
  cursor:grab;touch-action:none;user-select:none;
  transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r,0deg));
  transition:box-shadow .2s ease;
  --ntext:#3A3A3A;--nbar:rgba(0,0,0,.08);--ndiv:rgba(0,0,0,.13);
}
.note:hover{box-shadow:0 12px 26px rgba(0,0,0,.26)}
/* Reserved, well above any realistic --z rank, so an actively-dragged/menu-open note always
   wins even during a very long session with many prior interactions. */
.note.dragging{cursor:grabbing;box-shadow:0 16px 32px rgba(0,0,0,.32);z-index:100000}
.note.editing{cursor:default}
.note.menu-open{z-index:100001}
/* Closed (header "×") — hidden but NOT deleted, same distinction as the Windows client
   (deletion only happens via the "⋯" menu). Reopen from the .closed-tray chip row or the
   List tab (List always shows every note regardless of open/closed-on-board state). */
.note.closed{display:none}

/* ---------- Closed notes tray ---------- */
.closed-tray{
  flex:none;display:flex;gap:8px;overflow-x:auto;
  padding:8px 12px;border-bottom:1px solid var(--line);
}
.closed-tray:empty{display:none}
.closed-chip{
  flex:none;display:flex;align-items:center;gap:7px;max-width:180px;
  padding:6px 12px;border-radius:999px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);
  font:inherit;font-size:.8rem;font-weight:600;color:var(--ink);
}
.closed-chip:hover{border-color:var(--note-yellow-deep)}
.cc-dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--nh)}
.cc-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.n-yellow{--nh:#FFE66E;--nb:#FDF4A1;--nbd:#E6D876}
.n-orange{--nh:#FFAF6E;--nb:#FFD7A8;--nbd:#E6B87E}
.n-green{--nh:#9BD98A;--nb:#C6E6C1;--nbd:#A3C99C}
.n-blue{--nh:#7FC8F0;--nb:#B8DFF0;--nbd:#8FC3DB}
.n-pink{--nh:#F0A0C6;--nb:#F5C4D8;--nbd:#DE9DBC}
.n-purple{--nh:#C5A3E8;--nb:#D9C9EE;--nbd:#B99FD4}
.n-grey{--nh:#C9C9C9;--nb:#D6D6D6;--nbd:#B0B0B0}
.n-small{width:120px;min-height:96px}

.note-head{
  flex:none;height:30px;
  display:flex;align-items:stretch;
  background:var(--nh);
  border-radius:7px 7px 0 0;
}
.nh-spacer{flex:1}
.nh-btn{
  width:34px;border:0;background:transparent;cursor:pointer;
  color:rgba(0,0,0,.85);font-size:15px;line-height:1;font-family:var(--font-ui);
  display:grid;place-items:center;padding:0;
  opacity:0;transition:opacity .15s,background .15s;
}
.note:hover .nh-btn,.note:focus-within .nh-btn,.note.menu-open .nh-btn{opacity:1}
.nh-btn:hover{background:rgba(0,0,0,.14)}
.nh-btn:active{background:rgba(0,0,0,.22)}

.note-body{
  flex:1;min-height:0;
  padding:8px 12px 10px;
  overflow-y:auto;overflow-x:hidden;
  font-family:"Segoe UI",var(--font-ui);
  font-size:14px;line-height:1.4;color:var(--ntext);
  outline:none;cursor:text;user-select:text;
  word-wrap:break-word;white-space:pre-wrap;
  caret-color:var(--ntext);
}
.note-body img{max-width:100%;height:auto;border-radius:2px}
.note-body ul,.note-body ol{margin:0;padding-left:1.5em;white-space:normal}
.note-body ul div,.note-body ol div{white-space:pre-wrap}

.note-bar{
  flex:none;display:none;align-items:center;gap:2px;
  padding:2px 4px;
  background:var(--nbar);border-top:1px solid var(--ndiv);
  border-radius:0 0 7px 7px;
  cursor:default;
}
.note.editing .note-bar{display:flex}
.nb-btn{
  width:30px;height:26px;border:0;border-radius:3px;padding:0;
  background:transparent;color:var(--ntext);cursor:pointer;
  font-size:13.5px;line-height:1;font-family:var(--font-ui);
  display:grid;place-items:center;
}
.nb-btn:hover{background:rgba(128,128,128,.25)}
.nb-btn:active{background:rgba(128,128,128,.38)}
.nb-btn.fmt-b{font-weight:700}
.nb-btn.fmt-i{font-style:italic;font-family:Georgia,"Times New Roman",serif}
.nb-btn.fmt-u{text-decoration:underline}
.nb-btn.fmt-s{text-decoration:line-through}

.note-menu{
  position:absolute;top:32px;right:4px;z-index:6;
  background:var(--nb);border:1px solid var(--ndiv);border-radius:8px;
  padding:8px;box-shadow:0 10px 28px rgba(0,0,0,.3);
  cursor:default;
}
.swatches{display:flex;gap:4px}
.swatch{
  width:28px;height:28px;border:1px solid rgba(0,0,0,.28);cursor:pointer;padding:0;
  position:relative;border-radius:2px;
}
.swatch:hover{filter:brightness(1.06)}
.swatch[aria-pressed="true"]::after{
  content:"✓";position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(0,0,0,.8);font-size:13px;font-weight:700;
}
.swatch[data-c="Yellow"]{background:#FFE66E}
.swatch[data-c="Orange"]{background:#FFAF6E}
.swatch[data-c="Green"]{background:#9BD98A}
.swatch[data-c="Blue"]{background:#7FC8F0}
.swatch[data-c="Pink"]{background:#F0A0C6}
.swatch[data-c="Purple"]{background:#C5A3E8}
.swatch[data-c="Grey"]{background:#C9C9C9}
.note-menu-del{
  display:flex;align-items:center;gap:8px;width:100%;
  margin-top:8px;padding:7px 8px;
  border:0;border-top:1px solid var(--ndiv);border-radius:0 0 4px 4px;
  background:transparent;color:var(--ntext);
  font-size:12.5px;font-weight:600;cursor:pointer;text-align:left;
}
.note-menu-del:hover{background:rgba(128,128,128,.22)}
.resize-handle{
  position:absolute;right:0;bottom:0;width:22px;height:22px;
  cursor:nwse-resize;touch-action:none;z-index:2;
}

/* Touch-primary input (regardless of screen width — a touch laptop/tablet benefits too):
   enlarge small hit targets and make note header controls discoverable without first
   tapping into the note body (there's no :hover on touch to reveal them otherwise). */
@media (hover: none) and (pointer: coarse){
  .resize-handle{width:36px;height:36px}
  .nh-btn{width:44px;opacity:.6}
  .swatch{width:36px;height:36px}
  .nb-btn{width:40px;height:36px}
}

/* Dark mode: colored header keeps its saturated dark variant, all bodies share one
   neutral dark surface — exactly like the Windows dark palette. */
:root[data-theme="dark"] .note{
  --nb:#2B2B2B;--nbd:#1F1F1F;--ntext:#F5F5F5;--nbar:#262626;--ndiv:#3F3F3F;
}
:root[data-theme="dark"] .n-yellow{--nh:#E6B800}
:root[data-theme="dark"] .n-orange{--nh:#F28C33}
:root[data-theme="dark"] .n-green{--nh:#5FBF6E}
:root[data-theme="dark"] .n-blue{--nh:#3D9BD9}
:root[data-theme="dark"] .n-pink{--nh:#E667A0}
:root[data-theme="dark"] .n-purple{--nh:#9B72D9}
:root[data-theme="dark"] .n-grey{--nh:#767676}
:root[data-theme="dark"] .note-menu{background:#2B2B2B}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .note{
    --nb:#2B2B2B;--nbd:#1F1F1F;--ntext:#F5F5F5;--nbar:#262626;--ndiv:#3F3F3F;
  }
  :root:not([data-theme="light"]) .n-yellow{--nh:#E6B800}
  :root:not([data-theme="light"]) .n-orange{--nh:#F28C33}
  :root:not([data-theme="light"]) .n-green{--nh:#5FBF6E}
  :root:not([data-theme="light"]) .n-blue{--nh:#3D9BD9}
  :root:not([data-theme="light"]) .n-pink{--nh:#E667A0}
  :root:not([data-theme="light"]) .n-purple{--nh:#9B72D9}
  :root:not([data-theme="light"]) .n-grey{--nh:#767676}
  :root:not([data-theme="light"]) .note-menu{background:#2B2B2B}
}

/* ---------- Chat ---------- */
/* ---------- Notes list (searchable, like the Windows Notes List window) ---------- */
.list-col{
  flex:1;min-height:0;display:flex;flex-direction:column;
  width:min(720px,100%);margin:0 auto;padding:18px 18px 16px;
}
.list-toolbar{margin-bottom:12px}
#notesListSearch{
  width:100%;font:inherit;font-size:.95rem;
  background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;
  padding:10px 13px;outline:none;
}
#notesListSearch:focus{border-color:var(--note-yellow-deep)}
.notes-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:2px}
.notes-list-item{
  display:flex;align-items:stretch;gap:0;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;
}
.notes-list-item:hover{border-color:var(--note-yellow-deep)}
.nl-color{flex:none;width:6px}
.nl-body{flex:1;min-width:0;padding:10px 14px}
.nl-preview{
  font-size:.88rem;line-height:1.4;color:var(--ink);
  white-space:pre-wrap;word-wrap:break-word;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.nl-time{font-size:.74rem;color:var(--ink-soft);margin-top:4px}
.list-empty{color:var(--ink-soft);font-size:.9rem;text-align:center;margin-top:40px}

.chat-view-wrap{flex:1;min-height:0;display:flex}

/* ---------- Chat history sidebar ---------- */
/* There's only one flat conversation on the server — these are client-side groupings
   (see planning/chat.js) rendered to feel like a real per-chat history list. */
.chat-sidebar{
  flex:none;width:240px;display:flex;flex-direction:column;gap:10px;
  border-right:1px solid var(--line);padding:16px 10px;overflow-y:auto;
}
.chat-new-btn{
  display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;font:inherit;font-size:.88rem;font-weight:600;color:var(--ink);
  cursor:pointer;transition:border-color .15s ease;
}
.chat-new-btn:hover{border-color:var(--note-yellow-deep)}
.chat-history-label{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-soft);padding:6px 8px 0;
}
.chat-history-list{display:flex;flex-direction:column;gap:2px;overflow-y:auto;min-height:0}
.chat-history-empty{color:var(--ink-soft);font-size:.82rem;padding:8px}
.chat-history-item{
  display:flex;align-items:center;gap:4px;border-radius:8px;
  transition:background .15s ease;
}
.chat-history-item:hover{background:var(--surface)}
.chat-history-item.active{background:var(--surface);box-shadow:inset 2px 0 0 var(--note-yellow-deep)}
.chat-history-btn{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  border:0;background:transparent;text-align:left;cursor:pointer;padding:8px 8px;
}
.chi-title{
  font-size:.85rem;color:var(--ink);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
.chi-time{font-size:.7rem;color:var(--ink-soft)}
.chi-del{
  flex:none;border:0;background:transparent;color:var(--ink-soft);cursor:pointer;
  font-size:.95rem;line-height:1;padding:4px 8px;border-radius:50%;opacity:0;
}
.chat-history-item:hover .chi-del{opacity:1}
.chi-del:hover{background:var(--danger);color:#fff}

.chat-col{
  flex:1;min-height:0;display:flex;flex-direction:column;
  width:min(720px,100%);margin:0 auto;padding:18px 18px 16px;
}
.chat-head{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:10px}
.chat-head h2{flex:1}
.chat-sidebar-toggle{
  display:none;flex:none;width:32px;height:32px;border-radius:8px;
  align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer;
}
.chat-head h2{font-size:1.15rem;letter-spacing:-.01em}
.chat-clear{
  border:0;background:transparent;color:var(--ink-soft);font-size:.8rem;font-weight:600;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.chat-clear:hover{color:var(--danger)}
.chat-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:6px 2px}
.msg{
  max-width:78%;padding:10px 14px;border-radius:16px;
  font-size:.93rem;line-height:1.5;white-space:pre-wrap;word-wrap:break-word;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  align-self:flex-start;position:relative;
}
.msg.me{background:var(--ink);color:var(--bg);border:0;align-self:flex-end}
.msg.err{border-color:var(--danger);color:var(--danger)}
/* Assistant replies read as plain flowing text (no bubble box), matching typical AI chat
   UIs — only the user's own messages keep the bubble treatment. */
.msg:not(.me):not(.err){
  max-width:100%;background:transparent;border:0;padding:4px 2px;align-self:stretch;
}
.msg-md{white-space:normal}
.msg-md > *:first-child{margin-top:0}
.msg-md > *:last-child{margin-bottom:0}
.msg-md p,.msg-md ul,.msg-md ol,.msg-md h1,.msg-md h2,.msg-md h3,.msg-md h4,.msg-md h5,.msg-md h6{margin:0 0 8px}
.msg-md ul,.msg-md ol{padding-left:1.3em}
.msg-md li{margin-bottom:2px}
.msg-md h1,.msg-md h2,.msg-md h3{font-size:1.02em;font-weight:700;margin-top:10px}
.msg-md h4,.msg-md h5,.msg-md h6{font-size:1em;font-weight:700;margin-top:8px}
.msg-md hr{border:0;border-top:1px solid var(--line);margin:10px 0}
.msg-md code{
  background:rgba(0,0,0,.08);border-radius:4px;padding:1px 5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
}
:root[data-theme="dark"] .msg-md code{background:rgba(255,255,255,.1)}
.msg-md strong{font-weight:700}
.msg .msg-del{
  position:absolute;top:-8px;right:-8px;display:none;
  width:20px;height:20px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-soft);cursor:pointer;font-size:.75rem;line-height:1;
}
.msg:hover .msg-del{display:block}
.msg .msg-del:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.msg .caret{display:inline-block;width:1px;background:currentColor;height:.95em;vertical-align:-.12em}
@media (prefers-reduced-motion: no-preference){
  .msg .caret{animation:blink 1s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}
}
.chat-setup{
  background:var(--tint-yellow);border:1px solid var(--line);border-radius:14px;
  padding:22px;text-align:center;margin:20px 0;
  display:flex;flex-direction:column;gap:14px;align-items:center;
}

/* Empty state: logo + title centered where the message list would be, composer pill
   sitting right under it — the list is hidden entirely rather than just empty. */
.chat-hero{display:none}
.chat-col.empty .chat-list{display:none}
.chat-col.empty .chat-hero{
  display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;
}
.chat-hero h1{font-size:1.6rem;letter-spacing:-.02em;font-weight:700}

.composer{padding-top:12px}
.composer-pill{
  display:flex;align-items:center;gap:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:6px 8px 6px 6px;
  transition:border-color .15s ease;
}
.composer-pill:focus-within{border-color:var(--note-yellow-deep)}
.composer-pill textarea{
  flex:1;resize:none;max-height:120px;border:0;background:transparent;padding:8px 4px;
}
.composer-pill textarea:focus{outline:none}
.composer-icon-btn{
  flex:none;width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--bg);color:var(--ink-soft);cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.composer-icon-btn:hover{border-color:var(--note-yellow-deep)}
.composer-icon-btn[aria-pressed="true"]{
  background:var(--note-yellow);border-color:var(--note-yellow-deep);color:#1b1c1e;
}
.composer-send{
  flex:none;width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;background:var(--ink);color:var(--bg);cursor:pointer;
  transition:opacity .15s ease, transform .1s ease;
}
.composer-send:hover{opacity:.88}
.composer-send:active{transform:scale(.94)}
.composer-send:disabled{opacity:.5;cursor:default}

/* ---------- Settings ---------- */
.settings-col{
  width:min(560px,100%);margin:0 auto;padding:34px 20px;
  overflow-y:auto;
}
.settings-col h2{font-size:1.4rem;letter-spacing:-.02em;margin-bottom:6px;margin-top:32px}
.settings-col h2:first-child{margin-top:0}
.settings-sub{color:var(--ink-soft);font-size:.92rem;margin-bottom:22px}
.settings-card{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:26px 24px;
}
.settings-card input{width:100%}
.settings-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}

.pref-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:.9rem;font-weight:600;
  padding:12px 0;
}
.pref-row + .pref-row{border-top:1px solid var(--line)}
.pref-checkbox{cursor:pointer}
.pref-checkbox input{width:auto;flex:none}
.theme-radios{display:flex;gap:14px;font-weight:400}
.theme-radios label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:.86rem}
.theme-radios input{width:auto;flex:none;margin:0}

/* ---------- Teams tab badge ---------- */
.tab-badge{
  display:inline-grid;place-items:center;
  min-width:17px;height:17px;padding:0 4px;margin-left:6px;
  border-radius:999px;background:var(--danger);color:#fff;
  font-size:.68rem;font-weight:700;line-height:1;vertical-align:1px;
}

/* ---------- Nav scope control (My notes / team + tag filter) ---------- */
/* Lives in the navbar next to the tabs instead of a separate bar over the canvas. Only
   meaningful while Board or List is the active tab (it drives what those two views show),
   so it's hidden the rest of the time via the :has() rules below. */
.nav-scope{
  display:flex;gap:4px;align-items:center;
  padding:3px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
}
#appNav:not(:has(.tab[data-tab="board"][aria-current="true"])):not(:has(.tab[data-tab="list"][aria-current="true"])) .nav-scope{
  display:none;
}
/* Opaque (not transparent) background is intentional: some browsers render a <select>'s
   native options popup using its own background/color, and a transparent background lets
   whatever's behind it (note colors, canvas) bleed through the popup, making the option
   text unreadable in dark mode. */
.board-select{
  font:inherit;font-size:.78rem;font-weight:600;
  background:var(--surface);color:var(--ink);
  border:1px solid transparent;border-radius:999px;
  padding:5px 10px;cursor:pointer;outline:none;max-width:150px;
  transition:background .15s ease, border-color .15s ease;
}
.board-select:hover{background:color-mix(in srgb, var(--ink) 10%, var(--surface))}
.board-select:focus{border-color:var(--note-yellow-deep)}
.board-select option{background:var(--surface);color:var(--ink)}
/* Tag filter only applies on the Board itself, not List. */
#appNav:has(.tab[data-tab="list"][aria-current="true"]) #tagFilter{display:none}

/* ---------- Note tags ---------- */
.note-tags{
  flex:none;display:flex;flex-wrap:wrap;gap:4px;
  padding:0 10px 8px;
}
.tag-chip{
  display:inline-flex;align-items:center;gap:3px;
  background:rgba(0,0,0,.1);color:var(--ntext);
  border-radius:999px;padding:2px 8px;font-size:11px;font-weight:600;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
:root[data-theme="dark"] .tag-chip{background:rgba(255,255,255,.14)}
.tag-editor{
  margin-top:8px;padding-top:8px;border-top:1px solid var(--ndiv);
  display:flex;flex-direction:column;gap:6px;width:212px;max-width:60vw;
}
.tag-editor-label{font-size:11px;font-weight:700;color:var(--ntext);opacity:.75}
.tag-editor-chips{display:flex;flex-wrap:wrap;gap:4px}
.tag-chip.removable{padding-right:3px}
.tag-x{
  border:0;background:transparent;color:inherit;cursor:pointer;
  font-size:13px;line-height:1;padding:0 2px;border-radius:50%;
}
.tag-x:hover{background:rgba(0,0,0,.18)}
.tag-input{
  font:inherit;font-size:12px;
  background:var(--nb);color:var(--ntext);
  border:1px solid var(--ndiv);border-radius:6px;padding:5px 8px;outline:none;
}
.tag-input:focus{border-color:var(--note-yellow-deep)}
.note.filtered-out{display:none !important}

/* ---------- Teams view ---------- */
.teams-col{
  width:min(640px,100%);margin:0 auto;padding:34px 20px;overflow-y:auto;
}
.teams-col h2{font-size:1.4rem;letter-spacing:-.02em;margin-bottom:6px}
.teams-block{margin-bottom:22px}
.teams-block h3{font-size:1rem;margin-bottom:12px}
.team-create{display:flex;gap:10px}
.team-create input{flex:1;font:inherit;font-size:.95rem;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:11px 13px;outline:none}
.team-create input:focus{border-color:var(--note-yellow-deep);box-shadow:0 0 0 3px color-mix(in srgb, var(--note-yellow) 35%, transparent)}
.teams-empty{color:var(--ink-soft);font-size:.92rem;padding:8px 0}
.team-card{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px;margin-bottom:14px;
}
.team-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.team-head h3{font-size:1.1rem;margin:0}
.team-sublabel{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin-bottom:8px}
.member-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.member-chip{
  background:var(--bg);border:1px solid var(--line);border-radius:999px;
  padding:5px 12px;font-size:.82rem;color:var(--ink);
}
.member-chip.is-owner{border-color:var(--note-yellow-deep)}
.team-invite{display:flex;gap:8px}
.team-invite input{flex:1;font:inherit;font-size:.9rem;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:9px 14px;outline:none}
.team-invite input:focus{border-color:var(--note-yellow-deep)}
.btn-sm{padding:8px 16px;font-size:.85rem}
.inv-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--tint-yellow);border:1px solid var(--line);border-radius:12px;
  padding:12px 16px;margin-bottom:8px;
}
.inv-text{font-size:.9rem}
.inv-actions{display:flex;gap:8px}

/* ---------- Modals ---------- */
.modal-back{
  position:fixed;inset:0;z-index:60;
  background:rgba(0,0,0,.44);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal{
  width:min(420px,100%);
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:28px 26px;box-shadow:0 24px 60px rgba(0,0,0,.3);
}
.modal h2{font-size:1.2rem;margin-bottom:6px}
.modal p{margin-bottom:16px}

/* ---------- Toasts ---------- */
.toasts{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:70;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;
}
.toast{
  background:var(--ink);color:var(--bg);
  border-radius:999px;padding:10px 20px;font-size:.87rem;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.24);
  display:flex;align-items:center;gap:12px;pointer-events:auto;
}
.toast button{
  border:0;background:var(--note-yellow);color:#1b1c1e;border-radius:999px;
  padding:4px 12px;font-size:.78rem;font-weight:700;cursor:pointer;
}
@media (prefers-reduced-motion: no-preference){
  .toast{animation:toast-in .3s cubic-bezier(.16,1,.3,1)}
  @keyframes toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .note.pop{animation:note-pop .35s cubic-bezier(.34,1.56,.64,1)}
  @keyframes note-pop{from{opacity:0;transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r,0deg)) scale(.6)}to{opacity:1;transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r,0deg)) scale(1)}}
}

/* ---------- Planning / Project manager ---------- */
/* Priority accent hues (theme-agnostic — mixed with transparent so the surface shows through) */
.pm-prio-critica,.pm-sprio-critica{--c:#d64545}
.pm-prio-inalta,.pm-sprio-importanta{--c:#e0842f}
.pm-prio-medie{--c:#c69214}
.pm-prio-scazuta,.pm-sprio-normala{--c:#7c8088}

.pm-root{display:flex;flex:1;min-height:0;width:100%;position:relative}
.pm-sidebar,.pm-aside{flex:none;overflow-y:auto;background:var(--surface);display:flex;flex-direction:column}
.pm-sidebar{width:252px;border-right:1px solid var(--line);padding:18px 14px;gap:22px}
.pm-aside{width:300px;border-left:1px solid var(--line);padding:18px 16px;gap:16px}
.pm-main{flex:1;min-width:0;overflow-y:auto;padding:22px 26px 60px}

/* ----- sidebar ----- */
.pm-side-group{display:flex;flex-direction:column;gap:6px}
.pm-side-h{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:space-between;padding:0 6px;margin-bottom:2px}
.pm-side-h button{border:0;background:transparent;color:var(--note-yellow-deep);cursor:pointer;font-size:.74rem;font-weight:700;padding:2px 4px;border-radius:6px}
.pm-side-h button:hover{background:var(--tint-yellow)}
.pm-new-btn{width:100%;justify-content:center;gap:6px}

.pm-plan-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;cursor:pointer;
  transition:background .15s ease}
.pm-plan-item:hover{background:var(--bg)}
.pm-plan-item.active{background:var(--tint-yellow)}
.pm-plan-star{flex:none;border:0;background:transparent;cursor:pointer;color:var(--ink-soft);font-size:.9rem;line-height:1;padding:0}
.pm-plan-star.on{color:var(--note-yellow-deep)}
.pm-plan-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.pm-plan-name{font-weight:600;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-plan-meta{display:flex;align-items:center;gap:7px}
.pm-mini-bar{flex:1;height:4px;border-radius:999px;background:var(--line);overflow:hidden}
.pm-mini-fill{display:block;height:100%;background:var(--note-yellow-deep);border-radius:999px;transition:width .4s cubic-bezier(.16,1,.3,1)}
.pm-plan-pct{font-size:.68rem;font-weight:700;color:var(--ink-soft);min-width:2.2em;text-align:right}
.pm-plan-del{flex:none;border:0;background:transparent;color:var(--ink-soft);cursor:pointer;font-size:1rem;line-height:1;padding:0 3px;opacity:0;border-radius:6px}
.pm-plan-item:hover .pm-plan-del{opacity:.7}
.pm-plan-del:hover{opacity:1;color:var(--danger)}

.pm-filter-item,.pm-label-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;cursor:pointer;font-size:.86rem;transition:background .15s ease}
.pm-filter-item:hover,.pm-label-item:hover{background:var(--bg)}
.pm-filter-item.active,.pm-label-item.active{background:var(--tint-yellow);font-weight:600}
.pm-filter-item svg{flex:none;color:var(--ink-soft)}
.pm-filter-name,.pm-label-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-count{font-size:.72rem;font-weight:700;color:var(--ink-soft);background:var(--bg);border:1px solid var(--line);padding:1px 8px;border-radius:999px}
.pm-filter-item.active .pm-count,.pm-label-item.active .pm-count{background:var(--surface)}
.pm-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--lc,var(--ink-soft))}
.pm-label-del{flex:none;border:0;background:transparent;color:var(--ink-soft);cursor:pointer;font-size:.95rem;line-height:1;padding:0 2px;opacity:0}
.pm-label-item:hover .pm-label-del{opacity:.7}
.pm-label-del:hover{opacity:1;color:var(--danger)}

/* ----- main header ----- */
.pm-head{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.pm-title-row{display:flex;align-items:center;gap:10px}
.pm-drawer-btn{display:none;flex:none;border:1px solid var(--line);background:transparent;color:var(--ink-soft);border-radius:9px;padding:6px 9px;cursor:pointer}
.pm-title{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;outline:none;border-radius:6px;padding:1px 5px;margin:-1px -5px;flex:1;min-width:0}
.pm-title:focus{background:var(--surface)}
.pm-star{flex:none;border:0;background:transparent;color:var(--ink-soft);cursor:pointer;font-size:1.35rem;line-height:1;padding:0}
.pm-star.on{color:var(--note-yellow-deep)}
.pm-desc{color:var(--ink-soft);font-size:.92rem;outline:none;border-radius:6px;padding:2px 5px;margin:-2px -5px}
.pm-desc:empty::before{content:attr(data-ph);color:var(--ink-soft);opacity:.7}
.pm-desc:focus{background:var(--surface)}
.pm-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pm-views{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:3px;gap:2px}
.pm-view-tab{border:0;background:transparent;color:var(--ink-soft);cursor:pointer;font-size:.84rem;font-weight:600;padding:6px 13px;border-radius:8px;transition:background .15s ease,color .15s ease}
.pm-view-tab:hover{color:var(--ink)}
.pm-view-tab.active{background:var(--pill-bg);color:var(--pill-ink)}
.pm-toolbar-spacer{flex:1}
.pm-tool-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:transparent;color:var(--ink-soft);border-radius:9px;padding:7px 13px;font-size:.84rem;font-weight:600;cursor:pointer}
.pm-tool-btn:hover{background:var(--surface);color:var(--ink)}
.pm-menu-wrap{position:relative}
.pm-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-note);padding:6px;min-width:180px;z-index:30;display:flex;flex-direction:column;gap:2px}
.pm-menu button{text-align:left;border:0;background:transparent;color:var(--ink);padding:8px 12px;border-radius:8px;font-size:.86rem;cursor:pointer}
.pm-menu button:hover{background:var(--bg)}
.pm-menu label{padding:5px 12px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}

/* ----- stats bar ----- */
.pm-stats{display:flex;align-items:center;gap:22px;padding:16px 20px;background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:18px;flex-wrap:wrap}
.pm-stats-progress{flex:1;min-width:180px;display:flex;flex-direction:column;gap:8px}
.pm-stats-progress .pm-sp-top{display:flex;justify-content:space-between;align-items:baseline;font-size:.82rem;color:var(--ink-soft)}
.pm-sp-top b{font-size:1rem;color:var(--ink)}
.pm-bar{height:8px;border-radius:999px;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.pm-bar-fill{display:block;height:100%;border-radius:999px;background:var(--note-yellow-deep);transition:width .5s cubic-bezier(.16,1,.3,1)}
.pm-bar-fill.done{background:var(--note-green)}
.pm-stat{text-align:center;min-width:56px}
.pm-stat b{display:block;font-size:1.35rem;font-weight:800;line-height:1.1}
.pm-stat span{font-size:.72rem;color:var(--ink-soft)}
.pm-stat.doing b{color:var(--note-yellow-deep)}

/* ----- sections view ----- */
.pm-section{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:14px}
.pm-section-head{display:flex;align-items:center;gap:11px;padding:13px 18px;cursor:pointer;user-select:none}
.pm-chevron{flex:none;border:0;background:transparent;color:var(--ink-soft);cursor:pointer;display:flex;padding:2px;border-radius:7px;
  transition:transform .3s cubic-bezier(.16,1,.3,1)}
.pm-section.collapsed .pm-chevron{transform:rotate(-90deg)}
.pm-section-title{font-weight:700;font-size:1.02rem;outline:none;border-radius:6px;padding:1px 4px;margin:-1px -4px;flex:1;min-width:0}
.pm-section-title:focus{background:var(--bg)}
.pm-section-count{font-size:.78rem;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.pm-ring{flex:none}
.pm-section-del,.pm-section-add-here{flex:none;border:0;background:transparent;color:var(--ink-soft);cursor:pointer;font-size:1.05rem;line-height:1;padding:2px 6px;border-radius:6px;opacity:0}
.pm-section-head:hover .pm-section-del{opacity:.7}
.pm-section-del:hover{opacity:1;color:var(--danger)}
.pm-section-body{display:grid;grid-template-rows:1fr;min-height:0}
.pm-section.collapsed .pm-section-body{grid-template-rows:0fr}
.pm-section-inner{overflow:hidden;min-height:0}
.pm-task-list{padding:0 12px 6px}
.pm-add-task{display:flex;gap:8px;padding:8px 6px 12px}
.pm-add-task input{flex:1;font:inherit;font-size:.86rem;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 11px;outline:none;
  transition:border-color .18s ease,box-shadow .18s ease}
.pm-add-task input:focus{border-color:var(--note-yellow-deep);box-shadow:0 0 0 3px var(--tint-yellow)}
.pm-add-section-btn{margin-top:4px}

/* ----- task row ----- */
.pm-task{display:flex;align-items:center;gap:11px;padding:10px 10px;border-radius:9px;border-bottom:1px solid var(--line)}
.pm-task:last-child{border-bottom:0}
.pm-task:hover{background:var(--bg)}
.pm-task.dragging{opacity:.4}
.pm-task-handle{flex:none;cursor:grab;color:var(--ink-soft);opacity:0;font-size:.95rem;touch-action:none}
.pm-task:hover .pm-task-handle{opacity:.45}
.pm-task-check{flex:none;width:19px;height:19px;border:2px solid var(--line);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--surface);transition:background .15s ease,border-color .15s ease}
.pm-task-check:hover{border-color:var(--note-yellow-deep)}
.pm-task-check svg{width:12px;height:12px;color:#fff;opacity:0;transition:opacity .12s ease}
.pm-task.done .pm-task-check{background:var(--note-green);border-color:var(--note-green)}
.pm-task.done .pm-task-check svg{opacity:1;color:#1b1c1e}
.pm-task.doing .pm-task-check{border-color:var(--note-yellow-deep);background:color-mix(in srgb,var(--note-yellow-deep) 22%,transparent)}
.pm-task-text{flex:1;min-width:0;font-size:.92rem;line-height:1.4;outline:none;border-radius:6px;padding:2px 4px;margin:-2px 0}
.pm-task-text:focus{background:var(--surface)}
.pm-task.done .pm-task-text{color:var(--ink-soft);text-decoration:line-through}
.pm-task-meta{flex:none;display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.pm-task-date{font-size:.78rem;color:var(--ink-soft);white-space:nowrap}
.pm-task-date.overdue{color:var(--danger);font-weight:600}
.pm-task-del{flex:none;border:0;background:transparent;color:var(--ink-soft);cursor:pointer;font-size:1rem;line-height:1;padding:0 4px;opacity:0}
.pm-task:hover .pm-task-del{opacity:1}
.pm-task-del:hover{color:var(--danger)}

/* badges + label chips */
.pm-badge{font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;
  color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent);border:1px solid color-mix(in srgb,var(--c) 32%,transparent)}
.pm-label-chip{font-size:.7rem;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;
  color:var(--lc);background:color-mix(in srgb,var(--lc) 15%,transparent);border:1px solid color-mix(in srgb,var(--lc) 32%,transparent)}

/* ----- list view ----- */
.pm-list{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.pm-list .pm-task{padding:12px 18px}
.pm-list-sec{padding:11px 18px;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);background:var(--bg);border-bottom:1px solid var(--line)}

/* ----- kanban ----- */
.pm-kanban{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding-bottom:10px}
.pm-col{flex:0 0 300px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:9px}
.pm-col-head{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:.84rem;padding:2px 4px}
.pm-col-head .pm-count{background:var(--bg)}
.pm-col-drop{display:flex;flex-direction:column;gap:9px;min-height:40px;border-radius:10px;transition:background .15s ease}
.pm-col.drop .pm-col-drop{background:var(--tint-yellow)}
.pm-card{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 13px;cursor:grab;display:flex;flex-direction:column;gap:8px}
.pm-card:active{cursor:grabbing}
.pm-card.dragging{opacity:.4}
.pm-card-text{font-size:.9rem;line-height:1.35}
.pm-card-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pm-card-sec{font-size:.72rem;color:var(--ink-soft)}

/* ----- timeline ----- */
.pm-timeline{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.pm-tl-grid{min-width:640px}
.pm-tl-months{display:flex;margin-left:190px;border-bottom:1px solid var(--line);margin-bottom:8px}
.pm-tl-month{flex:1;font-size:.74rem;font-weight:700;color:var(--ink-soft);text-align:center;padding-bottom:6px}
.pm-tl-row{display:flex;align-items:center;height:34px}
.pm-tl-label{width:190px;flex:none;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:12px}
.pm-tl-track{position:relative;flex:1;height:22px;border-radius:6px;background:var(--bg)}
.pm-tl-bar{position:absolute;top:0;height:22px;border-radius:6px;background:color-mix(in srgb,var(--c,var(--note-yellow-deep)) 55%,transparent);border:1px solid var(--c,var(--note-yellow-deep));min-width:6px}
.pm-tl-nodate{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.pm-tl-nodate h4{font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:8px}

/* ----- aside panels ----- */
.pm-panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px 16px}
.pm-panel h3{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);margin-bottom:12px}
.pm-about-row{display:flex;justify-content:space-between;gap:10px;font-size:.85rem;padding:5px 0}
.pm-about-row span:first-child{color:var(--ink-soft)}
.pm-about-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pm-donut-wrap{display:flex;align-items:center;gap:16px}
.pm-donut{flex:none}
.pm-donut-legend{display:flex;flex-direction:column;gap:7px;font-size:.82rem}
.pm-donut-legend div{display:flex;align-items:center;gap:8px}
.pm-donut-legend b{margin-left:auto;font-variant-numeric:tabular-nums}
.pm-prio-row{display:flex;align-items:center;gap:9px;font-size:.85rem;padding:5px 0}
.pm-prio-row .pm-dot{width:9px;height:9px}
.pm-prio-row b{margin-left:auto;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.pm-act{display:flex;gap:10px;padding:7px 0;font-size:.84rem}
.pm-act-ico{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--ink-soft);font-size:.8rem}
.pm-act-ico.done{background:color-mix(in srgb,var(--note-green) 30%,transparent);color:var(--note-green)}
.pm-act-body{flex:1;min-width:0}
.pm-act-time{font-size:.74rem;color:var(--ink-soft);margin-top:1px}

/* empty states */
.pm-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;color:var(--ink-soft);padding:60px 20px}
.pm-empty svg{color:var(--note-yellow-deep);opacity:.8}
.pm-empty p{font-size:1.05rem;font-weight:700;color:var(--ink)}
.pm-empty span{font-size:.9rem}

/* task detail modal fields */
.pm-detail-field{margin-bottom:14px}
.pm-detail-field label{display:block;font-size:.76rem;font-weight:700;color:var(--ink-soft);margin-bottom:6px}
.pm-detail-field input[type=date],.pm-detail-field textarea{width:100%;font:inherit;font-size:.9rem;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:9px 11px;outline:none}
.pm-detail-field input:focus,.pm-detail-field textarea:focus{border-color:var(--note-yellow-deep);box-shadow:0 0 0 3px var(--tint-yellow)}
.pm-chip-row{display:flex;flex-wrap:wrap;gap:7px}
.pm-choice{border:1px solid var(--line);background:transparent;color:var(--ink-soft);border-radius:999px;padding:5px 12px;font-size:.8rem;font-weight:600;cursor:pointer}
.pm-choice.on{border-color:transparent;color:var(--c,var(--lc,var(--ink)));background:color-mix(in srgb,var(--c,var(--lc,var(--note-yellow-deep))) 18%,transparent)}

@media (prefers-reduced-motion: no-preference){
  .pm-section-body{transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1)}
  .pm-section,.pm-card{animation:pm-in .3s cubic-bezier(.16,1,.3,1)}
  @keyframes pm-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .pm-task{transition:opacity .25s ease,transform .28s cubic-bezier(.16,1,.3,1),background .15s ease}
}

/* ---------- Chat plan mode confirmation card ---------- */
.chat-plan-card{
  margin-top:8px;background:var(--tint-yellow);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;max-width:78%;
}
.chat-plan-title{font-weight:700;margin-bottom:8px}
.chat-plan-items{list-style:disc;padding-left:1.2em;display:flex;flex-direction:column;gap:3px;font-size:.88rem}
.chat-plan-more{list-style:none;margin-left:-1.2em;color:var(--ink-soft);font-size:.82rem}
.chat-plan-actions{display:flex;gap:10px;margin-top:12px}
.chat-plan-added{font-size:.85rem;font-weight:700;color:var(--ink-soft)}

/* ---------- Mobile ---------- */
@media (max-width: 720px){
  .nav-inner{gap:10px;padding:0 12px;height:56px;flex-wrap:nowrap}
  .brand-name{display:none}
  .tab{padding:6px 12px;font-size:.84rem}
  .user-btn span{max-width:60px}
  .lang{display:none}
  .board-hint{display:none}
  .chat-col{padding:12px 12px 10px}
  .msg{max-width:88%}
  .chat-plan-card{max-width:88%}
  .settings-col{padding:22px 16px}
  .teams-col{padding:22px 16px}
  .planning-col{padding:22px 16px}
  .team-create{flex-direction:column}
  .tabs{overflow-x:auto;flex:none;-ms-overflow-style:none;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .board-select{max-width:22vw}

  .chat-sidebar-toggle{display:inline-flex}
  .chat-view-wrap{position:relative}
  .chat-sidebar{
    position:fixed;top:56px;left:0;bottom:0;z-index:55;width:80vw;max-width:300px;
    background:var(--bg);transform:translateX(-100%);transition:transform .2s ease;
  }
  .chat-view-wrap.sidebar-open .chat-sidebar{transform:translateX(0)}
  .chat-view-wrap.sidebar-open::after{
    content:'';position:fixed;top:56px;left:0;right:0;bottom:0;z-index:54;background:rgba(0,0,0,.4);
  }

  /* project manager: sidebar & aside become off-canvas drawers */
  .pm-main{padding:16px 14px 50px}
  .pm-drawer-btn{display:inline-flex}
  .pm-sidebar,.pm-aside{position:fixed;top:56px;bottom:0;z-index:55;width:82vw;max-width:300px;
    transform:translateX(-100%);transition:transform .2s ease}
  .pm-sidebar{left:0}
  .pm-aside{right:0;transform:translateX(100%)}
  .pm-root.side-open .pm-sidebar{transform:translateX(0)}
  .pm-root.aside-open .pm-aside{transform:translateX(0)}
  .pm-root.side-open::after,.pm-root.aside-open::after{
    content:'';position:fixed;top:56px;left:0;right:0;bottom:0;z-index:54;background:rgba(0,0,0,.4);
  }
}