:root {
    --bg: #1b1815;
    --panel: #221e19;
    --panel-2: #2a2520;
    --border: rgba(240,228,206,0.09);
    --border-strong: rgba(240,228,206,0.2);
    --text: #f0e6d2;
    --text-dim: #a89a83;
    --text-faint: #6e6355;
    --copper: #c8783c;
    --copper-bright: #e0a05a;
    --sage: #7f9c6f;
    --amber: #d9a441;
    --mono: 'IBM Plex Mono', monospace;
    --sans: 'IBM Plex Sans', sans-serif;
    --display: 'Big Shoulders Display', sans-serif;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans);
    height: 100vh; overflow: hidden; position: relative;
  }
  body::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
  }

  .app { display: flex; flex-direction: column; height: 100vh; }

  /* ---------- Top bar ---------- */
  #topbar {
    height: 56px; min-height: 56px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 22px; border-bottom: 1px solid var(--border); background: rgba(18,19,25,0.6);
    backdrop-filter: blur(12px); z-index: 10; position: relative;
  }
  .brand { display: flex; align-items: center; gap: 10px; }
  .brand-mark { width: 20px; height: 20px; flex-shrink: 0; }
  .brand-mark circle.dim { fill: var(--text-dim); }
  .brand-mark circle.accent { fill: var(--copper-bright); }
  .brand-name { font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: 0.3px; }
  #clock { font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--text-faint); letter-spacing: 0.2px; }

  .conv-switcher { position: relative; }
  .conv-btn {
    display: flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--border);
    color: var(--text-dim); font-family: var(--sans); font-size: 13px; padding: 7px 12px 7px 14px;
    border-radius: 8px; cursor: pointer; transition: border-color 0.15s;
  }
  .conv-btn:hover { border-color: var(--border-strong); color: var(--text); }
  .conv-btn svg { width: 12px; height: 12px; opacity: 0.6; }
  .conv-menu {
    position: absolute; top: calc(100% + 8px); right: 0; width: 260px; background: var(--panel);
    border: 1px solid var(--border-strong); border-radius: 10px; padding: 6px; display: none;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4); z-index: 20;
  }
  .conv-menu.open { display: block; }
  .conv-new {
    display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 7px; cursor: pointer;
    font-size: 13px; color: var(--copper-bright); border-bottom: 1px solid var(--border); margin-bottom: 4px;
  }
  .conv-new:hover { background: rgba(200,120,60,0.1); }
  .conv-item { padding: 9px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--text-dim); }
  .conv-item:hover { background: var(--panel-2); color: var(--text); }
  .conv-item .conv-time { display: block; font-family: var(--mono); font-size: 10px; color: var(--text-faint); margin-top: 2px; }
  .conv-item.active { color: var(--text); background: var(--panel-2); }

  /* ---------- Body layout ---------- */
  #body { flex: 1; display: flex; min-height: 0; }

  #sidebar {
    width: 320px; min-width: 320px; border-right: 1px solid var(--border); background: rgba(18,19,25,0.4);
    padding: 20px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 26px;
  }
  .side-section h2 {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--text-faint); margin: 0 0 12px; font-weight: 500;
  }

  /* Calendar */
  #cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  #cal-header button { background: none; border: none; color: var(--text-dim); font-size: 15px; cursor: pointer; padding: 2px 6px; }
  #cal-header button:hover { color: var(--text); }
  #cal-month { font-family: var(--sans); font-size: 12.5px; color: var(--text-dim); font-weight: 500; }
  #cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .cal-day-label { font-family: var(--mono); font-size: 9px; color: var(--text-faint); text-align: center; padding: 3px 0; }
  .cal-day {
    font-family: var(--sans); font-size: 11.5px; text-align: center; padding: 7px 0; border-radius: 6px;
    position: relative; color: var(--text-dim); cursor: pointer; transition: background 0.12s;
  }
  .cal-day:hover:not(.empty) { background: var(--panel-2); color: var(--text); }
  .cal-day.today { background: rgba(200,120,60,0.16); color: var(--copper-bright); font-weight: 600; }
  .cal-day.selected { box-shadow: inset 0 0 0 1.5px var(--sage); color: var(--text); }
  .cal-day.today.selected { box-shadow: inset 0 0 0 1.5px var(--sage); background: rgba(200,120,60,0.16); color: var(--copper-bright); }
  .cal-day.has-event::after {
    content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
    width: 3.5px; height: 3.5px; border-radius: 50%; background: var(--amber);
  }
  .cal-day.empty { visibility: hidden; cursor: default; }

  /* Day detail popover */
  #day-detail {
    margin-top: 10px; padding: 12px; border-radius: 8px; background: var(--panel-2);
    border: 1px solid var(--border); display: none;
  }
  #day-detail.open { display: block; }
  #day-detail .dd-date { font-family: var(--mono); font-size: 10.5px; color: var(--amber); margin-bottom: 8px; letter-spacing: 0.4px; }
  #day-detail .dd-item { font-size: 12.5px; color: var(--text-dim); padding: 5px 0; border-bottom: 1px solid var(--border); }
  #day-detail .dd-item:last-child { border-bottom: none; }
  #day-detail .dd-empty { font-size: 12px; color: var(--text-faint); font-style: italic; }

  /* To-do */
  .todo-item {
    display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border);
  }
  .todo-item:last-child { border-bottom: none; }
  .todo-check {
    width: 17px; height: 17px; min-width: 17px; border-radius: 5px; border: 1.5px solid var(--border-strong);
    margin-top: 1px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; position: relative;
  }
  .todo-check.checking { border-color: var(--amber); }
  .todo-check.checking::after {
    content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--amber);
    border-top-color: transparent; animation: spin 0.6s linear infinite;
  }
  .todo-check.done { background: var(--copper); border-color: var(--copper); }
  .todo-check.done::after { content: '✓'; color: #fff; font-size: 11px; line-height: 1; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .todo-text { font-size: 13px; color: var(--text-dim); line-height: 1.4; flex: 1; }
  .todo-item.completed .todo-text { color: var(--text-faint); text-decoration: line-through; }
  .todo-tag {
    display: inline-block; margin-top: 4px; font-family: var(--mono); font-size: 9.5px; color: var(--sage);
    letter-spacing: 0.3px; opacity: 0; transition: opacity 0.2s;
  }
  /* Upcoming (collapsible) */
  .upcoming-header {
    display: flex; align-items: center; justify-content: space-between; cursor: pointer;
    padding-bottom: 12px;
  }
  .upcoming-header svg { width: 11px; height: 11px; color: var(--text-faint); transition: transform 0.2s; }
  .upcoming-header.open svg { transform: rotate(180deg); }
  #upcoming-list { display: none; flex-direction: column; gap: 2px; }
  #upcoming-list.open { display: flex; }
  .up-item { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--text-dim); }
  .up-item:last-child { border-bottom: none; }
  .up-item .up-date { font-family: var(--mono); font-size: 10px; color: var(--amber); display: block; margin-bottom: 2px; }
  #upcoming-empty { font-size: 12px; color: var(--text-faint); font-style: italic; padding: 4px 0; }

  /* To-do confirm prompt */
  .todo-confirm { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
  .todo-confirm span { font-size: 11px; color: var(--text-dim); font-family: var(--sans); }
  .confirm-btn {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.5px; text-transform: uppercase;
    padding: 3px 9px; border-radius: 4px; cursor: pointer; background: transparent;
    border: 1px solid var(--border-strong); color: var(--text-dim); transition: all 0.15s;
  }
  .confirm-btn.yes { border-color: rgba(127,156,111,0.35); color: var(--sage); }
  .confirm-btn.yes:hover { background: rgba(127,156,111,0.12); border-color: var(--sage); }
  .confirm-btn.no:hover { background: var(--panel-2); border-color: var(--text-dim); color: var(--text-dim); }

  /* To-do empty state and add-task row */
  .todo-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .clear-completed-btn {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.4px; text-transform: uppercase;
    background: transparent; border: none; color: var(--text-faint); cursor: pointer; padding: 2px 0;
    transition: color 0.15s;
  }
  .clear-completed-btn:hover { color: var(--copper-bright); }
  #todo-empty { font-size: 12px; color: var(--text-faint); font-style: italic; padding: 10px 0; }
  .todo-add-row { display: flex; align-items: center; gap: 8px; padding-top: 10px; }
  .todo-add-btn {
    width: 22px; height: 22px; min-width: 22px; border-radius: 6px; border: 1px dashed var(--border-strong);
    background: transparent; color: var(--text-faint); font-family: var(--sans); font-size: 14px;
    line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
  }
  .todo-add-btn:hover { border-color: var(--copper); color: var(--copper-bright); border-style: solid; }
  .todo-add-input {
    flex: 1; background: transparent; border: none; border-bottom: 1px solid var(--border);
    color: var(--text); font-family: var(--sans); font-size: 13px; padding: 4px 2px; outline: none;
  }
  .todo-add-input:focus { border-bottom-color: var(--copper); }

  /* ---------- Main ---------- */
  #main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
  #main-inner { display: flex; flex-direction: column; align-items: center; }
  #orb-wrap { position: relative; width: 240px; height: 240px; }
  #orb-glow {
    position: absolute; inset: -36px; border-radius: 50%; opacity: 0.18; filter: blur(28px);
    background: radial-gradient(circle, var(--copper), transparent 72%); transition: opacity 0.4s;
  }
  #status {
    font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.8px; text-transform: uppercase;
    color: var(--text-faint); margin-top: 22px;
  }
  #transcript { max-width: 440px; text-align: center; font-size: 14.5px; color: var(--text-dim); margin-top: 12px; min-height: 20px; }
  #reply { max-width: 460px; text-align: center; font-size: 15.5px; margin-top: 16px; color: var(--text); min-height: 20px; line-height: 1.5; }
  .switch-wrap { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
  .switch-label {
    font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px; color: var(--text-faint); text-transform: uppercase;
  }
  .rocker {
    width: 52px; height: 26px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--border-strong);
    position: relative; cursor: pointer; box-shadow: inset 0 2px 4px rgba(0,0,0,0.45);
    transition: background 0.2s, border-color 0.2s; padding: 0;
  }
  .rocker-knob {
    position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
    background: linear-gradient(180deg, #4a443c, #322e28);
    box-shadow: 0 1px 2px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
    transition: left 0.2s, background 0.2s;
  }
  .rocker.on { border-color: var(--copper); background: rgba(200,120,60,0.16); }
  .rocker.on .rocker-knob { left: 28px; background: linear-gradient(180deg, var(--copper-bright), var(--copper)); }
  .switch-state { font-family: var(--mono); font-size: 11px; color: var(--text-faint); min-width: 30px; }
  .switch-state.on { color: var(--copper-bright); }