/* Weight Coach — Birchline visual language (html-effectiveness skill).
   Token-driven: the dark theme is nothing but the palette remap below. */

:root {
  /* ── palette ─────────────────────────── */
  --ivory:   #FAF9F5;
  --paper:   #FFFFFF;
  --slate:   #141413;
  --clay:    #D97757;
  --clay-d:  #B85C3E;
  --oat:     #E3DACC;
  --olive:   #788C5D;
  --rust:    #B04A3F;

  --g100:    #F0EEE6;
  --g200:    #E6E3DA;
  --g300:    #D1CFC5;
  --g500:    #87867F;
  --g700:    #3D3D3A;

  /* ── type stacks ─────────────────────── */
  --serif: ui-serif, Georgia, "Times New Roman", Times, serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* ── shape ───────────────────────────── */
  --radius-card:  14px;
  --radius-panel: 12px;
  --radius-row:   8px;
  --border:       1.5px solid var(--g300);
  --shadow-hover: 0 10px 30px rgba(20, 20, 19, 0.10);

  color-scheme: light;
}

/* Dark theme = pure token remap. Two triggers share one token list:
   1. OS prefers dark AND user hasn't forced light via the toggle
   2. toggle has explicitly forced dark (data-theme="dark") */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* %dark-tokens% — keep identical to the [data-theme="dark"] block below */
    --ivory:   #1A1815;
    --paper:   #262218;
    --slate:   #F2F0E9;
    --clay:    #E08A6A;
    --clay-d:  #C56F4F;
    --oat:     #383026;
    --olive:   #94A974;
    --rust:    #CB6055;
    --g100:    #14120E;
    --g200:    #322E25;
    --g300:    #423C32;
    --g500:    #9A988E;
    --g700:    #C9C6BC;
    --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  /* %dark-tokens% — keep identical to the prefers-color-scheme block above */
  --ivory:   #1A1815;
  --paper:   #262218;
  --slate:   #F2F0E9;
  --clay:    #E08A6A;
  --clay-d:  #C56F4F;
  --oat:     #383026;
  --olive:   #94A974;
  --rust:    #CB6055;
  --g100:    #14120E;
  --g200:    #322E25;
  --g300:    #423C32;
  --g500:    #9A988E;
  --g700:    #C9C6BC;
  --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--ivory);
  color: var(--slate);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  height: 100vh;
  overflow: hidden;
}

.layout {
  display: grid;
  grid-template-columns: 1fr 6px var(--chat-w, 420px);
  height: 100vh;
}

/* resize handle */
.resizer {
  cursor: col-resize;
  background: var(--g200);
  transition: background 0.15s;
}
.resizer:hover, .resizer.dragging { background: var(--clay); }
body.resizing { user-select: none; cursor: col-resize; }

/* ===== Dashboard ===== */
.dashboard {
  overflow-y: auto;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
h1 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
/* card section headers = mono eyebrows */
h2 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--g500);
  margin-bottom: 14px;
}

.phase-badge {
  margin-top: 8px; display: inline-block; padding: 3px 10px; border-radius: var(--radius-row);
  background: var(--oat); color: var(--slate);
  font-family: var(--mono); font-size: 12px;
}

.headline-stats { display: flex; gap: 26px; }
.stat { text-align: right; }
.stat span {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
}
.stat label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.card {
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius-card);
  padding: 20px 22px;
}
.half-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

/* progress bars */
.bars { display: flex; flex-direction: column; gap: 11px; margin-bottom: 16px; }
.bar-row { display: grid; grid-template-columns: 70px 1fr 110px; align-items: center; gap: 12px; font-size: 13px; }
.bar-row label { color: var(--g700); }
.bar-row span { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12px; color: var(--g700); }
.bar { background: var(--g100); border: 1px solid var(--g200); border-radius: 6px; height: 14px; overflow: hidden; }
.fill { height: 100%; width: 0%; border-radius: 5px; transition: width 0.4s; }
.fill.cal { background: var(--clay); }
.fill.cal.over { background: var(--rust); }
.fill.prot { background: var(--olive); }
.fill.water { background: var(--g500); }

/* checklist */
.checklist { display: flex; flex-wrap: wrap; gap: 8px; }
.check-item {
  font-size: 12.5px; padding: 4px 11px; border-radius: 16px;
  border: 1px solid var(--g300); color: var(--g500); background: transparent;
}
.check-item.done {
  background: var(--oat);
  border-color: var(--olive);
  color: var(--slate);
}

/* day log */
.day-log { font-size: 13.5px; display: flex; flex-direction: column; gap: 6px; }
.day-log .row {
  display: flex; justify-content: space-between; gap: 10px; padding: 7px 11px;
  background: var(--g100); border-radius: var(--radius-row);
}
.day-log .row .desc { flex: 1; color: var(--g700); }
.day-log .row .nums { color: var(--g500); white-space: nowrap; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12px; }
.day-log em { color: var(--g500); }

/* ===== Chat ===== */
.chat-panel {
  display: flex; flex-direction: column;
  background: var(--paper);
  border-left: var(--border);
  height: 100vh;
  min-width: 0;
}
.chat-header {
  padding: 14px 16px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  border-bottom: 1.5px solid var(--g200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hdr-actions { display: flex; gap: 6px; }
.hdr-btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  background: none;
  border: 1px solid var(--g300);
  border-radius: 6px;
  color: var(--g500);
  cursor: pointer;
  padding: 4px 9px;
  transition: border-color 150ms ease, color 150ms ease;
}
.hdr-btn:hover { border-color: var(--slate); color: var(--slate); }
.chat-log { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--ivory); }

.msg { max-width: 88%; padding: 10px 14px; border-radius: var(--radius-panel); font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.msg.user { align-self: flex-end; background: var(--oat); color: var(--slate); border-bottom-right-radius: 4px; }
.msg.assistant { align-self: flex-start; background: var(--paper); border: var(--border); border-bottom-left-radius: 4px; white-space: normal; }
.msg.thinking { align-self: flex-start; color: var(--g500); background: transparent; font-style: italic; }
.tool-note { align-self: flex-start; font-family: var(--mono); font-size: 11px; color: var(--olive); padding-left: 6px; }

/* markdown inside assistant messages */
.msg.assistant > :first-child { margin-top: 0; }
.msg.assistant > :last-child { margin-bottom: 0; }
.msg.assistant p, .msg.assistant ul, .msg.assistant ol, .msg.assistant pre, .msg.assistant blockquote, .msg.assistant table { margin: 8px 0; }
.msg.assistant h1, .msg.assistant h2, .msg.assistant h3, .msg.assistant h4 {
  font-family: var(--serif); font-weight: 500; margin: 12px 0 6px; line-height: 1.3;
  text-transform: none; letter-spacing: -0.008em; color: var(--slate); font-size: 16px;
}
.msg.assistant h1 { font-size: 18px; }
.msg.assistant ul, .msg.assistant ol { padding-left: 20px; }
.msg.assistant li { margin: 3px 0; }
.msg.assistant strong { font-weight: 600; }
.msg.assistant a { color: var(--clay); text-decoration-color: var(--oat); text-underline-offset: 3px; }
.msg.assistant a:hover { text-decoration-color: var(--clay); }
.msg.assistant code { font-family: var(--mono); background: var(--g100); border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }
.msg.assistant pre { font-family: var(--mono); background: var(--g100); border: 1px solid var(--g200); border-radius: var(--radius-row); padding: 10px 12px; overflow-x: auto; }
.msg.assistant pre code { background: none; padding: 0; border: none; }
.msg.assistant hr { border: none; border-top: 1px solid var(--g300); margin: 10px 0; }
.msg.assistant blockquote { border-left: 3px solid var(--oat); padding-left: 10px; color: var(--g700); }
.msg.assistant table { border-collapse: collapse; font-size: 13px; }
.msg.assistant th, .msg.assistant td { border: 1px solid var(--g300); padding: 4px 8px; }
.msg.assistant th { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--g500); }

/* images inside chat messages */
.msg img { max-width: 200px; max-height: 200px; border-radius: var(--radius-row); display: block; margin: 4px 0; cursor: pointer; border: 1px solid var(--g300); }

/* attachment previews */
.attach-preview { display: none; gap: 8px; padding: 8px 12px 0; flex-wrap: wrap; }
.attach-preview.has-items { display: flex; }
.attach-chip { position: relative; }
.attach-chip img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-row); border: var(--border); display: block; }
.attach-chip .remove {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--rust); color: var(--paper); border: none;
  font-size: 11px; line-height: 1; cursor: pointer; padding: 0;
}
.attach-chip.converting img { opacity: 0.4; }

.chat-panel.dragover { outline: 2px dashed var(--clay); outline-offset: -6px; }

.chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1.5px solid var(--g200); align-items: flex-end; background: var(--paper); }
.attach-btn { cursor: pointer; font-size: 18px; padding: 8px 4px; opacity: 0.6; }
.attach-btn:hover { opacity: 1; }
.chat-input textarea {
  flex: 1; resize: none; background: var(--ivory); border: var(--border);
  border-radius: var(--radius-row); color: var(--slate); padding: 9px 12px; font-size: 14px; font-family: inherit;
}
.chat-input textarea:focus { outline: none; border-color: var(--clay); }
.chat-input button {
  background: var(--clay); color: var(--paper); border: none; border-radius: var(--radius-row);
  padding: 10px 18px; font-weight: 600; cursor: pointer; font-size: 14px;
  transition: background 150ms ease;
}
.chat-input button:hover { background: var(--clay-d); }
.chat-input button:disabled { opacity: 0.5; cursor: default; }

/* ===== Auth ===== */
.auth-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--ivory);
  display: flex; align-items: center; justify-content: center;
}
/* the hidden attribute must beat the display:flex above */
.auth-overlay[hidden] { display: none; }
.auth-card {
  width: min(380px, 90vw);
  background: var(--paper); border: var(--border); border-radius: var(--radius-card);
  padding: 30px; display: flex; flex-direction: column; gap: 12px;
}
.auth-card h1 { font-size: 26px; }
.auth-sub { color: var(--g700); font-size: 13.5px; margin-bottom: 6px; }
.auth-card input {
  background: var(--ivory); border: var(--border); border-radius: var(--radius-row);
  color: var(--slate); padding: 10px 12px; font-size: 16px; font-family: inherit;
}
.auth-card input:focus { outline: none; border-color: var(--clay); }
.auth-error { color: var(--rust); font-size: 13px; min-height: 16px; }
.auth-actions { display: flex; gap: 8px; }
.auth-actions button {
  flex: 1; padding: 10px; border-radius: var(--radius-row); font-weight: 600; cursor: pointer; font-size: 14px;
  font-family: inherit;
}
#auth-login { background: var(--clay); color: var(--paper); border: none; }
#auth-login:hover { background: var(--clay-d); }
#auth-register { background: transparent; color: var(--slate); border: var(--border); }
#auth-register:hover { border-color: var(--slate); }

.logout-btn:hover { color: var(--rust) !important; border-color: var(--rust) !important; }

/* desktop: no tab bar */
.tabbar { display: none; }

/* ===== Mobile: tabbed app layout (chat-first) ===== */
@media (max-width: 900px) {
  html, body { height: 100dvh; overflow: hidden; }

  .layout {
    display: block;
    height: calc(100dvh - var(--tabbar-h, 56px));
  }
  .resizer { display: none; }

  .dashboard, .chat-panel { height: 100%; }
  body[data-tab="chat"] .dashboard { display: none; }
  body[data-tab="dash"] .chat-panel { display: none; }

  .dashboard { padding: 16px 14px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .chat-panel { border: none; }
  .chat-log { -webkit-overflow-scrolling: touch; }

  .chat-input { padding: 10px 10px calc(10px + env(safe-area-inset-bottom) * 0.3); }
  .chat-input textarea { font-size: 16px; }
  .chat-input button { padding: 0 20px; min-height: 44px; }
  .attach-btn { font-size: 22px; padding: 8px; }
  .msg { max-width: 92%; font-size: 15px; }

  header { flex-direction: column; align-items: stretch; gap: 8px; }
  .headline-stats { justify-content: space-between; }
  .stat span { font-size: 24px; }
  .half-grid { grid-template-columns: 1fr; }
  h1 { font-size: 24px; }

  .tabbar {
    display: flex;
    height: calc(var(--tabbar-h, 56px) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--paper);
    border-top: 1.5px solid var(--g200);
  }
  .tabbar .tab {
    flex: 1;
    background: none;
    border: none;
    color: var(--g500);
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
  }
  .tabbar .tab.active { color: var(--clay); }
}