:root {
  /* Light (EnDanDit's own palette) is Edd's default theme — same token values as protopi's own
     base :root block, which already IS this theme (protopi/app.css's own comment: "Light -> Edd,
     Metro -> Saga" later). */
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f7f6f4;
  --sunken: #f7f6f4;
  --line: #e8e6e1;
  --ink: #0d0d0d;
  --ink-body: #0d0d0d;
  --ink-soft: #737373;
  --ink-faint: #a3a3a3;
  --accent: #2e8a8a;
  --error: #c0392b;
  --shadow-lifted: 0 0 0 1px rgba(13,13,13,.06), 0 12px 28px -16px rgba(13,13,13,.12);
  --shadow-composer: 0 0 0 1px rgba(13,13,13,.06), 0 12px 28px -16px rgba(13,13,13,.10);
  --shadow-bubble: 0 0 0 1px rgba(13,13,13,.05), 0 8px 20px -12px rgba(13,13,13,.14);
  --font: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font);
  --font-label: var(--font);
  --bg-image: none;
  --hover: rgba(46,138,138,.08);
  --link-underline: color-mix(in srgb, var(--accent) 35%, transparent);
}

* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background-color: var(--bg);
  background-image: var(--bg-image); background-size: cover; background-position: center; background-attachment: fixed;
}
button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }
a { color: var(--accent); }
a:hover { color: var(--ink); }

/* ── login ── */
.login { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.login-card {
  background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-lifted);
  padding: 2.5rem 2rem; max-width: 23rem; width: 100%;
}
.brand { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.login-card h1 { font-size: 1.25rem; font-weight: 600; margin: 1rem 0 .4rem; }
.login-card .sub { color: var(--ink-soft); font-size: .9rem; line-height: 1.5; margin: 0 0 1.5rem; }
.login-card form { display: flex; flex-direction: column; gap: .7rem; }
.login-card input {
  border: 1px solid var(--line); border-radius: 12px; padding: .75rem 1rem; font-size: .95rem;
  width: 100%; font-family: inherit; background: var(--bg); color: var(--ink);
}
.login-card input:focus { outline: none; border-color: var(--accent); }
.login-card button {
  background: var(--ink); color: var(--bg); border: 0; border-radius: 12px;
  padding: .75rem; font-size: .95rem; font-weight: 500;
}
.login-card button:disabled { opacity: .5; }
.msg { color: var(--ink-soft); font-size: .9rem; line-height: 1.5; margin-top: 1rem; }

/* ── app shell — Chat / Workspace, two always-present columns for now (protopi's third "Bulletin
   board" column is parked here, see app.html's own comment - not built content-wise yet, and the
   first pass that tried to fill it wasn't safe as built). Layout mechanics/measurements copied
   1:1 from protopi's own 3-column restructure so the two shared columns read identically. ── */
.app { display: flex; flex-direction: column; height: 100%; }
.stage { display: flex; align-items: stretch; padding: 37px 40px 40px; flex: 1; min-height: 0; }
.chat-area { flex: 0 0 30%; min-width: 340px; padding: 24px 24px 0 0; margin: 0; display: flex; flex-direction: column; }
.workspace-area { flex: 3 1 0; min-width: 300px; display: flex; flex-direction: column; padding: 24px 24px 0; }

.col-header { display: flex; align-items: center; gap: 10px; margin-bottom: 75px; flex-shrink: 0; }
.col-title { font-size: 16px; line-height: 24px; font-weight: 400; }
/* Chat's own icon+name row, below col-header, not inside it (protopi: the row is meant to become
   clickable later, switch which agent's board this is - inert here for now, same as there). */
.chat-identity { display: flex; align-items: center; gap: 8px; margin-bottom: 43px; flex-shrink: 0; color: var(--ink-soft); }
.chat-identity .icon-btn { width: 20px; height: 20px; pointer-events: none; }

.icon-btn.header-logo { width: 24px; height: 24px; color: var(--ink); cursor: pointer; background: none; border: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
#logoBtn.icon-btn.header-logo { width: 30px; height: 30px; }
.header-logo:hover { background: none; color: var(--ink-soft); }
.header-logo .spark-spin { display: block; width: 30px; height: 30px; color: inherit; }
/* Asterisk spin = the "still working" signal (ported from protopi, 24 Sep 2026) - .spinning is
   toggled on logoBtn by setLoading() in app.js for the duration of a turn. */
.header-logo.spinning .spark-spin { animation: spark-spin 1s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes spark-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Header ticker - the last action/status message, next to the spinning asterisk (ported from
   protopi's own .ticker, 24 Sep 2026: "let's fix the last action message thing like we have it
   for protopi"). Replaces the old inline typing-dots/status-bubble-in-the-feed treatment below. */
.ticker { flex: 1; min-width: 0; color: var(--ink-soft); font-size: 13.5px; font-style: italic; white-space: nowrap; overflow: hidden; }
.status-read, .status-write, .status-connect, .status-notify { color: var(--accent); }
#newNoteBtn.icon-btn.header-logo { width: 24px; height: 24px; }
/* Icon button, not text (24 Sep 2026 fix - matches protopi's own icon-only signout exactly; the
   Dutch label moved to title/aria-label). */
.signout {
  background: none; border: 0; padding: 0; width: 24px; height: 24px; border-radius: 50%;
  color: var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  margin-left: auto;
}
.signout:hover { background: none; color: var(--ink-soft); }

/* Theme-cycle spin (asterisk click) */
.theme-spin svg { animation: theme-spin .7s cubic-bezier(.4,0,.2,1); }
@keyframes theme-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── chat + ticket thread share the exact same transcript/composer treatment — same visual
   language, two separate conversations. ── */
.messages {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 21px; min-height: 0;
  padding: 4px 20px 26px 0; scrollbar-width: none;
}
.messages::-webkit-scrollbar { display: none; }
.m { max-width: 90%; font-size: 16px; line-height: 24px; }
.m p { margin: 0 0 10px; }
.m p:last-child { margin-bottom: 0; }
.m ul { margin: 4px 0 10px; padding-left: 20px; }
.m ul:last-child { margin-bottom: 0; }
.m li { margin: 3px 0; }
.m code {
  background: var(--sunken); color: var(--ink); padding: 2px 6px; border-radius: 6px;
  font-size: .9em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.m a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--link-underline); word-break: break-word; }
.m a:hover { color: var(--ink); }
.m.assistant { align-self: flex-start; color: var(--ink-body); }
.m.user {
  align-self: flex-end; background: var(--ink); color: var(--bg);
  padding: 12px 18px; border-radius: 16px 16px 4px 16px; box-shadow: var(--shadow-bubble);
}
.m.user code { background: color-mix(in srgb, var(--bg) 16%, transparent); color: var(--bg); }
.m.user a { color: var(--bg); text-decoration-color: color-mix(in srgb, var(--bg) 55%, transparent); }
.m.error { align-self: flex-start; color: var(--error); font-size: 14.5px; }

.composer-wrap { padding: 24px 0 8px; flex-shrink: 0; }
.composer {
  display: flex; align-items: flex-end; gap: 10px;
  background: var(--surface); border-radius: 22px; padding: 8px 8px 8px 20px;
  box-shadow: var(--shadow-composer);
}
.composer textarea {
  flex: 1; resize: none; max-height: 8rem; border: 0; background: transparent;
  font-family: inherit; font-size: 14.5px; line-height: 1.5; color: var(--ink); padding: 8px 0;
}
.composer textarea:focus { outline: none; }
.composer textarea::placeholder { color: var(--ink-faint); }
.send-btn {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--ink); color: var(--bg); border: 0;
  display: flex; align-items: center; justify-content: center;
}
.send-btn:disabled { opacity: .5; }

/* ── Workspace: notes (protopi's wsitem/todo-items pattern) + ephemeral upload/preview cards ── */
.workspace-body {
  flex: 1; overflow-y: auto; min-height: 0; padding-bottom: 36px; scrollbar-width: none;
}
.workspace-body::-webkit-scrollbar { display: none; }
.workspace-body { display: flex; flex-direction: column; gap: 75px; }

.wsitem { position: relative; }
.todo-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.todo-items li { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 21px; font-weight: 300; color: var(--ink-body); }
.todo-check {
  flex-shrink: 0; width: 20px; height: 20px; padding: 0; border-radius: 50%; margin-top: 1px;
  border: 1.5px solid var(--ink-faint); background: var(--surface); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.todo-check:hover { border-color: var(--ink-soft); }
.todo-label { cursor: pointer; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.todo-label:hover { color: var(--ink); }
.todo-items li.done .todo-check { background: var(--ink-faint); border-color: var(--ink-faint); }
.todo-items li.done .todo-label { color: var(--ink-faint); text-decoration: line-through; }

/* Bucket card — a flat card listing the notes, click one to open it for editing below. */
.card { position: relative; background: var(--sunken); border-radius: 12px; padding: 21px 20px; box-shadow: none; flex-shrink: 0; }
.card h3 { margin: 0 0 21px; font-size: 16px; line-height: 21px; font-weight: 400; color: var(--ink-soft); overflow-wrap: anywhere; }
.card p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-soft); overflow-wrap: anywhere; }
.card .hint { margin-top: 10px; font-size: 12px; color: var(--ink-faint); }

/* Note editor (an open item, or a new draft) — plain flowing block, no card chrome, matches
   protopi's own "not a card" correction for Workspace items. */
.ws-heading.inline-field, .ws-body.inline-field {
  display: block; cursor: text; outline: none; width: 100%; border: 0; background: transparent;
  font-family: inherit; color: var(--ink); resize: vertical;
}
.ws-heading.inline-field { font-size: 15px; font-weight: 500; line-height: 21px; margin-bottom: 8px; }
.ws-body.inline-field { font-size: 14px; line-height: 1.5; color: var(--ink-body); min-height: 4rem; }
.ws-footer { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.draft-error { font-size: 12px; color: var(--error); flex: 1; }

.card-close {
  position: absolute; top: 0; right: 0; width: 22px; height: 22px; border-radius: 50%;
  background: transparent; border: 0; color: var(--ink-faint);
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.card-close:hover { background: var(--sunken); color: var(--ink); }

/* ── ephemeral work cards (upload, live site preview) — ported from the old edd-shell "Shell"
   column near-verbatim, just hosted in Workspace now instead of their own column. ── */
.card.wide { width: 100%; }
.site-embed { margin-top: 14px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.site-embed iframe { display: block; width: 100%; height: min(60vh, 640px); border: 0; background: var(--bg); }
.current-photo { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.current-photo img {
  width: 52px; height: 52px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line);
  flex-shrink: 0; background: var(--sunken);
}
.current-photo span { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
.dropzone {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1.5px dashed var(--line); border-radius: 14px; padding: 22px 14px; margin-top: 12px;
  cursor: pointer; color: var(--ink-soft); font-size: 13px; line-height: 1.4;
  transition: border-color .15s, background .15s, color .15s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: var(--surface); color: var(--ink); }
.dropzone.done { border-style: solid; border-color: var(--accent); color: var(--ink); }
.upload-status { min-height: 16px; font-size: 12px; color: var(--ink-faint); margin-top: 6px; }
.upload-status.err { color: var(--error); }

/* ── new-note composer at the top of Workspace ── */
.new-note-btn {
  display: block; width: 100%; text-align: left; background: none; border: 1px dashed var(--line);
  border-radius: 12px; padding: 12px 16px; color: var(--ink-faint); font-size: 14px; font-family: inherit;
}
.new-note-btn:hover { border-color: var(--accent); color: var(--ink-soft); }

@media (max-width: 860px) {
  .stage { flex-direction: column; gap: 20px; overflow-y: auto; padding: 20px; }
  .chat-area, .workspace-area { min-width: 0; padding: 0; }
}

/* ════════════════════════════════════════════════════════════════════════════════════════════
   Themes — ported from protopi (app.css's own theme blocks), so Edd stays visually aligned with
   Pitr/Saga on the same four themes. Light (above) is Edd's default; click the asterisk to cycle.
   ════════════════════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] body::before {
  content: ''; position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 92% 8%,  rgba(46,138,138,0.09) 0%, transparent 100%),
    radial-gradient(ellipse 55% 45% at 8%  72%,  rgba(46,138,138,0.07) 0%, transparent 100%),
    radial-gradient(ellipse 40% 35% at 60% 90%,  rgba(46,138,138,0.05) 0%, transparent 100%);
  pointer-events: none; z-index: 0;
}
:root[data-theme="light"] body::after {
  content: ''; position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 180px; opacity: 0.025; pointer-events: none; z-index: 0;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1a1a18; --surface: #222220; --sunken: #232321; --line: #34342f;
  --ink: #faf9f5; --ink-body: #e2e1da; --ink-soft: #a8a79d; --ink-faint: #7a796f;
  --accent: #7eab85; --error: #e0798a;
  --shadow-lifted: 0 0 0 1px rgba(255,255,255,.06), 0 16px 32px -16px rgba(0,0,0,.7);
  --shadow-composer: 0 0 0 1px rgba(255,255,255,.07), 0 14px 32px -14px rgba(0,0,0,.7);
  --shadow-bubble: 0 1px 2px rgba(0,0,0,.3), 0 10px 24px -12px rgba(0,0,0,.6);
  --font: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-display: Georgia, 'Times New Roman', serif;
  --font-label: 'Courier New', Courier, monospace;
  --hover: rgba(126,171,133,.14);
}
:root[data-theme="dark"] .m.user { background: var(--accent); }
:root[data-theme="dark"] .col-title, :root[data-theme="dark"] .card h3 { font-family: var(--font-display); font-weight: 400; }

:root[data-theme="amber"] {
  color-scheme: dark;
  --bg: #000000; --surface: #0d0904; --sunken: #1a1208; --line: #3b2810;
  --ink: #ffb04a; --ink-body: #f2a340; --ink-soft: #c48739; --ink-faint: #8f622a;
  --accent: #ffc266; --error: #ff6a3d;
  --shadow-lifted: 0 0 0 1px rgba(255,176,74,.12), 0 12px 32px -12px rgba(0,0,0,.95);
  --shadow-composer: 0 0 0 1px rgba(255,176,74,.16), 0 12px 32px -12px rgba(0,0,0,.95);
  --shadow-bubble: 0 0 0 1px rgba(255,176,74,.2), 0 0 18px -4px rgba(255,176,74,.35);
  --font: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace;
  --hover: rgba(255,176,74,.12);
  --bg-image: url('/themes/clode-mars.jpg');
}
:root[data-theme="amber"] .card { background: rgba(9,6,2,.72); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); box-shadow: var(--shadow-lifted); }
:root[data-theme="amber"] * { text-shadow: 0 0 6px color-mix(in srgb, currentColor 42%, transparent); }
:root[data-theme="amber"] svg { filter: drop-shadow(0 0 2.5px color-mix(in srgb, currentColor 55%, transparent)); }
:root[data-theme="amber"] .m.user, :root[data-theme="amber"] .m.user * { text-shadow: none; }
:root[data-theme="amber"] textarea, :root[data-theme="amber"] input { caret-color: var(--ink); }

:root[data-theme="metro"] {
  color-scheme: dark;
  --bg: #0a1428; --surface: #16294f; --sunken: #112040; --line: #2a3b5c;
  --ink: #ffffff; --ink-body: #e8e6e1; --ink-soft: #a9b0c4; --ink-faint: #6b7391;
  --accent: #f5f0e3; --error: #e0798a;
  --shadow-lifted: 0 0 0 1px rgba(232,230,225,.08), 0 16px 32px -16px rgba(0,0,0,.75);
  --shadow-composer: 0 0 0 1px rgba(232,230,225,.10), 0 14px 32px -14px rgba(0,0,0,.75);
  --shadow-bubble: 0 1px 2px rgba(0,0,0,.3), 0 10px 24px -12px rgba(0,0,0,.6);
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: Georgia, 'Times New Roman', serif;
  --hover: rgba(232,230,225,.10);
  --bg-image: url('/themes/metro-tokyo.jpg');
}
:root[data-theme="metro"] .col-title, :root[data-theme="metro"] .card h3 { font-family: var(--font-display); font-weight: 400; }
:root[data-theme="metro"] body { background-image: none; }
:root[data-theme="metro"] body::before {
  content: ''; position: fixed; inset: 0;
  background-image: var(--bg-image); background-size: cover; background-position: center; background-attachment: fixed;
  filter: brightness(.55) contrast(1.05); pointer-events: none; z-index: -2;
}
:root[data-theme="metro"] body::after {
  content: ''; position: fixed; inset: 0; background: rgba(10,20,40,.28); pointer-events: none; z-index: -1;
}
:root[data-theme="metro"] .card, :root[data-theme="metro"] .composer {
  --bg: #e8e6e1; --surface: #e8e6e1; --sunken: #dbd6ca; --line: #c7c0b0;
  --ink: #1a3063; --ink-body: #1a3063; --ink-soft: #5c6a8c; --ink-faint: #8891a8; --accent: #1a3063;
  color: var(--ink);
}
:root[data-theme="metro"] .m.user { --bg: #e8e6e1; --ink: #1a3063; }
:root[data-theme="metro"] .card { background: var(--surface); box-shadow: var(--shadow-lifted); }