:root {
  --accent:#d97757; --accent-soft:#fceee8; --ink:#1a1a1e; --muted:#6b6b76;
  --bg:#f6f5f2; --line:#e7e5e0; --card:#ffffff;
  --blue:#2563eb; --blue-soft:#e8effd; --green:#0e9f6e; --green-soft:#e4f5ee;
  --purple:#7c3aed; --purple-soft:#f1eafd; --amber:#b45309; --amber-soft:#fdf1df;
  --red:#b42318; --red-soft:#fdebe9;
}
* { box-sizing:border-box; margin:0; }
body { font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink); }
input, textarea, button, select { font-family:inherit; }
a { color:inherit; }

/* ---------- shell ---------- */
.shell { display:flex; min-height:100dvh; }
.sidebar { width:240px; flex-shrink:0; background:#fffdfa; border-right:1px solid var(--line);
           padding:18px 12px; display:flex; flex-direction:column; gap:2px; position:sticky; top:0; height:100dvh; overflow-y:auto; }
.logo { font-size:19px; font-weight:700; letter-spacing:-.02em; padding:0 10px 14px; }
.logo em { color:var(--accent); font-style:normal; }
.nav-item { display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:9px; font-size:14px;
            font-weight:500; color:var(--ink); text-decoration:none; }
.nav-item:hover { background:#f1efe9; }
.nav-item.active { background:var(--accent-soft); color:#a14f35; font-weight:600; }
.nav-item .ico { width:18px; text-align:center; }
.nav-item .count { margin-left:auto; font-size:11.5px; color:var(--muted); background:#eeece7; border-radius:99px; padding:1px 7px; }
.nav-sec { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
           padding:16px 10px 6px; display:flex; align-items:center; justify-content:space-between; }
.nav-sec form { display:inline; }
.nav-sec button { background:none; border:0; color:var(--muted); cursor:pointer; font-size:13px; }
.proj-dot { width:9px; height:9px; border-radius:99px; flex-shrink:0; }
.mini-form { display:flex; gap:5px; padding:4px 10px 6px; }
.mini-form input[type=text], .mini-form input[type=url] { flex:1; min-width:0; border:1px solid var(--line); border-radius:7px;
  padding:5px 8px; font-size:12.5px; background:#fff; }
.mini-form button { border:1px solid var(--line); background:#fff; border-radius:7px; font-size:12px; padding:4px 8px; cursor:pointer; }
.cal-row { display:flex; align-items:center; gap:8px; padding:4px 10px; font-size:12.5px; color:var(--muted); }
.cal-row .del-mini { margin-left:auto; background:none; border:0; color:#c0bcb3; cursor:pointer; }
.cal-row .del-mini:hover { color:var(--red); }
.cal-err { color:var(--red); font-size:10.5px; padding:0 10px 4px 27px; }
.sidebar .foot { margin-top:auto; padding:10px 6px; display:flex; align-items:center; justify-content:space-between; gap:6px; }
.mockpill { font-size:10.5px; background:var(--amber-soft); color:var(--amber); padding:3px 8px; border-radius:99px; font-weight:600; white-space:nowrap; }
.logout { background:none; border:0; color:var(--muted); font-size:12.5px; cursor:pointer; white-space:nowrap; }
.logout:hover { color:var(--ink); }

.content { flex:1; min-width:0; padding:26px 24px 90px; }
.content-inner { max-width:780px; margin:0 auto; }
.page-h { display:flex; align-items:baseline; gap:12px; margin-bottom:18px; }
.page-h h1 { font-size:21px; letter-spacing:-.01em; }
.page-h .sub { color:var(--muted); font-size:13.5px; }
.sec-h { font-size:13px; font-weight:700; color:var(--muted); margin:20px 0 8px; display:flex; gap:8px; align-items:center; }
.sec-h.red { color:var(--red); }

/* hamburger for mobile */
.menu-btn { display:none; position:fixed; top:12px; left:12px; z-index:20; background:#fffdfa; border:1px solid var(--line);
            border-radius:9px; padding:7px 10px; font-size:16px; cursor:pointer; }
@media (max-width: 900px) {
  .sidebar { position:fixed; left:-260px; z-index:19; transition:left .22s; box-shadow:0 0 40px rgba(0,0,0,.15); }
  body.nav-open .sidebar { left:0; }
  .menu-btn { display:block; }
  .content { padding-top:56px; }
}

/* ---------- add form ---------- */
form.add { display:flex; flex-direction:column; gap:8px; background:var(--card); border:1px solid var(--line);
           border-radius:14px; padding:14px; margin-bottom:22px; box-shadow:0 2px 10px rgba(0,0,0,.03); }
form.add input[type=text], form.add textarea { border:0; font-size:15px; resize:none; background:transparent; }
form.add input[type=text]:focus, form.add textarea:focus { outline:none; }
form.add input[type=text] { font-weight:600; }
form.add textarea { color:var(--muted); font-size:13.5px; min-height:20px; }
.add-opts { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.add-opts label { font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:5px; }
.add-opts input[type=date], .add-opts select { border:1px solid var(--line); border-radius:7px; padding:4px 7px;
  font-size:12.5px; background:#fff; color:var(--ink); }
.add-actions { display:flex; gap:8px; justify-content:flex-end; margin-left:auto; }
.btn { border:1px solid var(--line); background:#fff; border-radius:9px; padding:8px 14px; font-size:13.5px; font-weight:600;
       cursor:pointer; color:var(--ink); text-decoration:none; display:inline-block; }
.btn:hover { border-color:#c9c5bc; }
.btn.primary { background:var(--ink); border-color:var(--ink); color:#fff; }
.btn.primary:hover { background:#000; }
.btn.claude { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.claude:hover { filter:brightness(.95); }
.btn.small { padding:5px 10px; font-size:12.5px; }

/* ---------- task rows ---------- */
.task { display:flex; align-items:flex-start; gap:12px; background:var(--card); border:1px solid var(--line);
        border-radius:14px; padding:14px 16px; margin-bottom:10px; transition:border-color .15s; }
.task:hover { border-color:#d5d1c8; }
.task.done .title { text-decoration:line-through; color:var(--muted); }
.check { margin-top:2px; width:19px; height:19px; border-radius:6px; border:1.5px solid #c9c5bc; background:#fff;
         cursor:pointer; flex-shrink:0; display:grid; place-items:center; font-size:12px; color:#fff; }
.task.done .check { background:var(--green); border-color:var(--green); }
.tbody { flex:1; min-width:0; }
.title { font-size:15px; font-weight:600; line-height:1.35; }
.notes { font-size:13px; color:var(--muted); margin-top:2px; white-space:pre-wrap; }
.meta-row { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.badge { font-size:11.5px; font-weight:700; letter-spacing:.02em; padding:3px 9px; border-radius:99px; }
.badge.todo     { background:#eeece7; color:#57534e; }
.badge.assigned { background:var(--amber-soft); color:var(--amber); }
.badge.working  { background:var(--blue-soft); color:var(--blue); }
.badge.review   { background:var(--purple-soft); color:var(--purple); }
.badge.done     { background:var(--green-soft); color:var(--green); }
.badge.failed   { background:var(--red-soft); color:var(--red); }
.badge.cowork   { background:var(--accent-soft); color:var(--accent); }
.badge.working::before { content:""; display:inline-block; width:6px; height:6px; border-radius:99px; background:var(--blue);
                         margin-right:5px; animation:pulse 1.2s infinite; vertical-align:1px; }
@keyframes pulse { 0%,100%{opacity:.35} 50%{opacity:1} }
.chip { font-size:11.5px; padding:3px 9px; border-radius:99px; background:#f1efe9; color:var(--muted);
        display:inline-flex; align-items:center; gap:5px; }
.chip.overdue { background:var(--red-soft); color:var(--red); font-weight:600; }
.del { background:none; border:0; color:#c0bcb3; cursor:pointer; font-size:16px; padding:2px 4px; }
.del:hover { color:var(--red); }
.empty { text-align:center; color:var(--muted); padding:40px 0 24px; font-size:14.5px; }

/* scheduling popover */
details.sched { position:relative; }
details.sched summary { list-style:none; cursor:pointer; font-size:13px; color:var(--muted); border:1px solid var(--line);
  border-radius:99px; padding:2px 9px; background:#fff; }
details.sched summary::-webkit-details-marker { display:none; }
details.sched .pop { position:absolute; z-index:8; top:26px; left:0; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:12px; box-shadow:0 10px 30px rgba(0,0,0,.12); display:flex; flex-direction:column; gap:8px; width:230px; }
details.sched .pop label { font-size:11.5px; color:var(--muted); display:flex; justify-content:space-between; align-items:center; gap:8px; }
details.sched .pop input[type=date], details.sched .pop select { border:1px solid var(--line); border-radius:7px;
  padding:4px 7px; font-size:12.5px; background:#fff; max-width:140px; }

/* ---------- today events ---------- */
.events-card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:6px 16px; margin-bottom:6px; }
.event-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #f1efe9; font-size:13.5px; }
.event-row:last-child { border-bottom:0; }
.event-dot { width:9px; height:9px; border-radius:99px; flex-shrink:0; }
.event-time { color:var(--muted); font-size:12.5px; width:110px; flex-shrink:0; }

/* ---------- upcoming calendar ---------- */
.cal-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.cal-head h1 { font-size:20px; }
.cal-head .spacer { flex:1; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-dow { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;
           text-align:center; padding:4px 0; }
.cal-cell { background:var(--card); border:1px solid var(--line); border-radius:10px; min-height:96px; padding:6px;
            font-size:11.5px; display:flex; flex-direction:column; gap:3px; overflow:hidden; }
.cal-cell.dim { opacity:.45; }
.cal-cell.today-cell { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.cal-daynum { font-size:11.5px; font-weight:700; color:var(--muted); }
.cal-cell.today-cell .cal-daynum { color:var(--accent); }
.cal-ev { display:flex; align-items:center; gap:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted); }
.cal-ev .event-dot { width:6px; height:6px; }
.cal-task { background:#f1efe9; border-radius:5px; padding:1px 5px; white-space:nowrap; overflow:hidden;
            text-overflow:ellipsis; cursor:pointer; font-weight:600; }
.cal-task.t-done { text-decoration:line-through; color:var(--muted); font-weight:400; }
.cal-task.t-claude { background:var(--accent-soft); color:#a14f35; }
.cal-more { color:var(--muted); font-size:10.5px; }
@media (max-width: 900px) { .cal-cell { min-height:64px; } }

/* ---------- artifacts ---------- */
.art-group { margin-bottom:22px; }
.art-group .g-title { font-size:14px; font-weight:700; margin-bottom:8px; }
.art-file { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line);
            border-radius:12px; padding:12px 16px; margin-bottom:8px; font-size:14px; }
.art-file .fname { font-weight:600; }
.art-file .fmeta { color:var(--muted); font-size:12.5px; }
.art-file .dl { margin-left:auto; }

/* ---------- chat drawer ---------- */
#overlay { position:fixed; inset:0; background:rgba(20,18,15,.35); opacity:0; pointer-events:none; transition:opacity .2s; z-index:9; }
#drawer { position:fixed; top:0; right:-560px; width:min(560px,100vw); height:100dvh; background:#fffdfa; z-index:10;
          border-left:1px solid var(--line); display:flex; flex-direction:column; transition:right .25s ease; }
body.chat-open #overlay { opacity:1; pointer-events:auto; }
body.chat-open #drawer { right:0; }
.dhead { padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.dhead .dtitle { font-weight:700; font-size:15px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dclose { background:none; border:0; font-size:20px; cursor:pointer; color:var(--muted); }
#chatlog { flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; }
.msg { max-width:88%; padding:10px 13px; border-radius:14px; font-size:14px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; }
.msg.user { align-self:flex-end; background:var(--ink); color:#fff; border-bottom-right-radius:4px; }
.msg.assistant { align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px; }
.msg.system { align-self:center; background:var(--amber-soft); color:var(--amber); font-size:12.5px; border-radius:9px; }
.msg.error { align-self:center; background:var(--red-soft); color:var(--red); font-size:12.5px; border-radius:9px; }
.toolchip { align-self:flex-start; display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted);
            background:#f1efe9; border-radius:99px; padding:5px 12px; }
.toolchip::before { content:"⚙"; font-size:12px; }
.thinking { align-self:flex-start; color:var(--muted); font-size:13px; display:flex; gap:6px; align-items:center; padding:2px 4px; }
.dots span { display:inline-block; width:5px; height:5px; border-radius:99px; background:var(--accent); margin-right:3px;
             animation:pulse 1.2s infinite; }
.dots span:nth-child(2){ animation-delay:.2s } .dots span:nth-child(3){ animation-delay:.4s }
.dfoot { border-top:1px solid var(--line); padding:12px 14px; }
.composer { display:flex; gap:8px; }
.composer textarea { flex:1; border:1px solid var(--line); border-radius:11px; padding:10px 12px; font-size:14px; resize:none;
                     font-family:inherit; min-height:42px; max-height:120px; background:#fff; }
.composer textarea:focus { outline:2px solid var(--accent); border-color:transparent; }
.usage { font-size:11.5px; color:var(--muted); margin-top:8px; text-align:right; }
.review-bar { display:flex; gap:8px; padding:10px 14px 0; }
.review-bar .btn { flex:1; }
#noReplyHint { display:none; font-size:12.5px; color:var(--muted); text-align:center; padding:4px 0 8px; }