/* Partiu — tokens no :root, modo escuro por preferência do sistema e por data-theme. Tinta suave + barra (nunca tracejado, nunca bloco saturado). */
:root{
  --accent:#2a78d6; --accent-2:#eb6834; --ok:#10b981; --warn:#f59e0b; --danger:#dc2626;
  --bg:#f5f7fb; --surface:#ffffff; --surface-2:#eef2f8; --border:#dde3ec; --text:#1b2430; --muted:#5b6778;
  --red:#dc2626; --amber:#d97706; --blue:#2a78d6; --gray:#64748b; --grn:#059669;
  --red-bg:color-mix(in srgb,var(--red) 12%,var(--surface)); --amber-bg:color-mix(in srgb,var(--amber) 14%,var(--surface));
  --blue-bg:color-mix(in srgb,var(--blue) 12%,var(--surface)); --gray-bg:color-mix(in srgb,var(--gray) 12%,var(--surface));
  --grn-bg:color-mix(in srgb,var(--grn) 12%,var(--surface));
  --radius:12px; --shadow:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.06);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0f1520; --surface:#161e2b; --surface-2:#1f2937; --border:#2b3647; --text:#e6ebf2; --muted:#9aa7b8;
  --red:#f87171; --amber:#fbbf24; --blue:#60a5fa; --gray:#94a3b8; --grn:#34d399; --shadow:0 1px 2px rgba(0,0,0,.4);
}}
:root[data-theme="dark"]{
  --bg:#0f1520; --surface:#161e2b; --surface-2:#1f2937; --border:#2b3647; --text:#e6ebf2; --muted:#9aa7b8;
  --red:#f87171; --amber:#fbbf24; --blue:#60a5fa; --gray:#94a3b8; --grn:#34d399; --shadow:0 1px 2px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 var(--font)}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0 0 .4em;line-height:1.2}
h1{font-size:24px}h2{font-size:17px}h3{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.small{font-size:12.5px;color:var(--muted)}
.muted{color:var(--muted)}
.hide{display:none!important}

/* topo */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;height:56px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px;color:var(--text);text-decoration:none}
.logo{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-size:15px}
.topnav{flex:1;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.topnav a{white-space:nowrap;padding:6px 10px;border-radius:8px;color:var(--muted);text-decoration:none;font-weight:600;font-size:13.5px}
.topnav a.active{background:var(--surface-2);color:var(--text)}
.user{display:flex;align-items:center;gap:8px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-weight:700;font-size:13px;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}

.view{max-width:1400px;margin:0 auto;padding:18px 16px 60px}
@media (max-width:480px){.view{padding:12px 16px 60px}}

/* botões, chips, campos */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-weight:600;font-size:13.5px;line-height:1.2;white-space:nowrap}
.btn:hover{background:var(--surface-2)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--border))}
.btn.sm{padding:4px 9px;font-size:12.5px}
.btn.icon{padding:6px 8px}
/* estado selecionado = tinta suave + barra (princípio do dono); azul cheio fica só para a ação principal (.primary) — revisão I10 */
.btn.active{background:color-mix(in srgb,var(--accent) 12%,var(--surface));border-color:var(--accent);color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--surface-2);color:var(--muted);border-left:3px solid transparent}
.chip.red{background:var(--red-bg);color:var(--red);border-left-color:var(--red)}
.chip.amber{background:var(--amber-bg);color:var(--amber);border-left-color:var(--amber)}
.chip.blue{background:var(--blue-bg);color:var(--blue);border-left-color:var(--blue)}
.chip.gray{background:var(--gray-bg);color:var(--gray);border-left-color:var(--gray)}
.chip.grn{background:var(--grn-bg);color:var(--grn);border-left-color:var(--grn)}
.chip.role-owner{background:color-mix(in srgb,var(--accent-2) 14%,var(--surface));color:var(--accent-2)}
.chip.role-editor{background:var(--blue-bg);color:var(--blue)}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.field input,.field select,.field textarea{padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface);min-width:0;width:100%}
.field textarea{min-height:70px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.field .hint{font-size:12px;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.form-grid .full{grid-column:1/-1}
.check{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.grow{flex:1}

/* cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;min-width:0}
.card,.item,.msg,td.wrap,.mbody,.vrow{overflow-wrap:anywhere}   /* URL longa em nota não pode alargar a página */
/* B2 da revisão: tabela no celular ROLA dentro do .table-wrap, não esmaga palavra ("PE/SS/OA", "Gi/gi"); só a descrição (td.wrap) quebra */
th,td.num,td:first-child,.chip{white-space:nowrap}
.tbl-exp{min-width:720px}.tbl-exp td.wrap{min-width:240px}   /* descrição com espaço: sem isso a 1ª linha chegava a 205 px de altura no celular */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.stat{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:10px;background:var(--surface-2);border-left:4px solid var(--border)}
.stat b{font-size:20px;font-variant-numeric:tabular-nums}
.stat.red{border-left-color:var(--red);background:var(--red-bg)}.stat.amber{border-left-color:var(--amber);background:var(--amber-bg)}
.stat.blue{border-left-color:var(--blue);background:var(--blue-bg)}.stat.grn{border-left-color:var(--grn);background:var(--grn-bg)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.list{display:flex;flex-direction:column;gap:8px}
.item{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--surface-2);border-left:4px solid var(--border)}
.item.red{border-left-color:var(--red);background:var(--red-bg)}.item.amber{border-left-color:var(--amber);background:var(--amber-bg)}
.item.blue{border-left-color:var(--blue);background:var(--blue-bg)}.item.gray{border-left-color:var(--gray)}.item.grn{border-left-color:var(--grn);background:var(--grn-bg)}
.item.clickable{cursor:pointer}.item.clickable:hover{filter:brightness(.97)}
.item .t{font-weight:600}.item .s{font-size:12.5px;color:var(--muted)}
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:10px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;background:var(--surface-2);position:sticky;top:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.clickable{cursor:pointer}tr.clickable:hover td{background:var(--surface-2)}
.empty{padding:28px;text-align:center;color:var(--muted);border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.bar{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}.bar i{display:block;height:100%;background:var(--accent)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:14px 0;overflow-x:auto;scrollbar-width:none}
.tabs a{padding:9px 12px;color:var(--muted);text-decoration:none;font-weight:700;font-size:13.5px;border-bottom:3px solid transparent;white-space:nowrap}
.tabs a.active{color:var(--text);border-bottom-color:var(--accent)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin:0 0 12px}
.filters .field{min-width:140px}
.filters .field input,.filters .field select{padding:6px 9px}
.filters .cal-right{margin-left:auto;gap:12px}
.filters .cal-nav .btn{font-weight:800}
.sticky-head{position:sticky;top:56px;z-index:5;background:var(--bg);padding:6px 0}

/* login */
.login{max-width:420px;margin:60px auto;text-align:center}
.login .logo{width:56px;height:56px;font-size:28px;margin:0 auto 10px}
.login h1{font-size:30px}

/* modal */
dialog.modal{border:0;border-radius:14px;padding:0;width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 40px);background:var(--surface);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog.modal.wide{width:min(960px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(10,15,25,.55)}
.mhead{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:2}
.mhead h2{flex:1;font-size:17px;margin:0}
.mbody{padding:16px 18px}
.mfoot{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--border);position:sticky;bottom:0;background:var(--surface)}
.mbody h3{margin-top:14px}
.mbody ul{margin:4px 0 0 18px;padding:0}
.mbody li{margin:3px 0}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:8px 0}
.kv div{background:var(--surface-2);border-radius:10px;padding:8px 10px}
.kv small{display:block;font-size:11px;color:var(--muted);text-transform:uppercase}
.kv b{font-variant-numeric:tabular-nums}

/* toasts */
.toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:60}
.toast{padding:10px 14px;border-radius:10px;background:var(--text);color:var(--bg);font-weight:600;box-shadow:var(--shadow);max-width:360px}
.toast.err{background:var(--danger);color:#fff}

/* sol onde a pessoa está (protótipo): laranja de dia, intermediário no crepúsculo, cinza-escuro à noite */
/* fases do sol no fundo: tinta BEM suave (dono, 04/10: "estão chamando mais atenção que os eventos") — era 24%, agora 7–8% */
:root{--sun-d:color-mix(in srgb,#fb923c 7%,var(--surface));--sun-n:color-mix(in srgb,#475569 8%,var(--surface));--sun-t:color-mix(in srgb,#fb923c 4%,color-mix(in srgb,#475569 4%,var(--surface)))}
.s-d{background:var(--sun-d)}.s-t{background:var(--sun-t)}.s-n{background:var(--sun-n)}
/* nascer/pôr: glifo de texto pequeno e espremido DENTRO da célula da hora; sol laranja, lua cinza (dono, 04/10) */
.sun-ico{font-size:11px;line-height:1;margin-left:1px;display:inline-block;font-weight:400;font-family:"Segoe UI Symbol","Segoe UI",sans-serif}
.sun-ico.rise{color:var(--accent-2)}.sun-ico.set{color:var(--muted)}   /* I5: #eb6834 dá 3:1 sobre a tinta do dia; o --warn dava 2:1 */
.hrow.sunmark .lt{min-width:0;max-width:45px;display:inline-flex;align-items:center;gap:1px;font-size:10.5px;letter-spacing:-.3px;white-space:nowrap;color:var(--text);font-weight:700}
.cal-times.local div.sunmark{font-size:10.5px;letter-spacing:-.3px;white-space:nowrap;padding-left:3px;padding-right:2px;color:var(--text);font-weight:700}
.cal-legend i.s-d,.cal-legend i.s-t,.cal-legend i.s-n{border:1px solid var(--border)}

/* calendário horizontal: eixo do fuso de referência fixo à esquerda + 1 coluna por dia */
.cal-wrap{position:relative;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.cal-scroll{overflow:auto;max-height:calc(100vh - 230px)}
.cal-grid{display:flex;min-width:max-content;align-items:flex-start}
.cal-axis{position:sticky;left:0;z-index:6;flex:0 0 48px;background:var(--surface);border-right:1px solid var(--border)}
.cal-axis-head{position:sticky;top:0;z-index:7;height:72px;background:var(--surface);border-bottom:1px solid var(--border);padding:8px 6px;font-size:11px;color:var(--muted);display:flex;flex-direction:column;gap:2px}
.cal-axis-head b{font-size:12px;color:var(--text)}
.cal-axis-body div{height:var(--rowh,24px);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;padding:1px 4px;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
.cal-axis-body div.hour{font-weight:700;color:var(--text)}
.cal-axis-body sup{font-size:10px;color:var(--warn);margin-left:1px}
.cal-day{width:var(--colw,280px);flex:0 0 var(--colw,280px);border-right:1px solid var(--border);position:relative}
.cal-day:last-child{border-right:0}
.cal-head,.vhead{position:sticky;top:0;z-index:4;background:var(--surface);border-bottom:1px solid var(--border);padding:8px 10px;cursor:pointer}
.cal-head{height:72px;overflow:hidden}
.cal-head:hover,.vhead:hover{background:var(--surface-2)}
.cal-head .d1 b,.vhead .d1 b{font-size:14px}.cal-head .city,.vhead .city{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-head .chip,.vhead .chip{margin-top:3px;font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-head.today,.vhead.today{box-shadow:inset 0 -3px 0 var(--accent)}
.wx{display:inline-flex;align-items:center;gap:2px;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--surface-2);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;vertical-align:middle}
.wx.ref{opacity:.75;font-style:italic}.wx small{font-size:9px;color:var(--muted)}
/* tempo no canto superior direito da célula do dia, na linha do título (dono, 04/10) — o título recua para não passar por baixo */
.wx.corner{margin-left:auto;flex:0 0 auto;padding:1px 6px}   /* I6: no fluxo da linha do título; chip largo encurta o título, não passa por baixo */
.cal-head .d1{display:flex;align-items:center;flex-wrap:nowrap;gap:0 2px;white-space:nowrap;overflow:hidden}
.cal-head .d1 b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.vhead .wx.corner{margin-left:auto}
td.split{min-width:150px}td.split .chip{margin:0 4px 3px 0;font-size:11px;white-space:nowrap}
td.split .chip small{display:none;margin-left:4px;color:var(--muted);font-weight:400}
@media (min-width:900px){td.split .chip small{display:inline}}   /* M9: R$ da parte visível quando há espaço; no toque, o painel do gasto mostra */
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin:12px 0}.inline-form .field{min-width:140px}.inline-form .field input,.inline-form .field select{padding:6px 9px}
.kv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px 14px}.kv{display:flex;flex-direction:column;gap:2px}.kv b{font-weight:600}
.hcol{position:relative}
.hrow{height:var(--rowh,24px);border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);display:flex;align-items:flex-start;gap:4px;padding:1px 0 0 3px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.hrow.hour{border-bottom-color:var(--border)}
.hrow .lt{display:inline-block;min-width:38px;font-weight:700;color:var(--text)}
.hrow .ltz{font-size:11px;color:var(--accent-2);font-weight:700}
.hrow.chg{border-top:2px solid var(--accent-2)}
.hrow.out{background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--border) 50%,transparent) 6px 7px)}
.hcol .blk{left:calc(46px + 3px)!important;width:calc(100% - 46px - 6px)!important}
.hcol .blk.nar{width:auto}
.nowline{position:absolute;left:0;right:0;height:2px;background:var(--danger);z-index:2;pointer-events:none}
.nowline::before{content:"";position:absolute;left:-1px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--danger)}
.cal-body{position:relative;display:flex}
.cal-times{flex:0 0 42px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;border-right:1px solid var(--border)}
.cal-times.local{flex-basis:46px;color:var(--text)}
.cal-times div{height:var(--rowh,24px);padding:2px 4px;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
.cal-times div.hour{font-weight:700}
.cal-times div.chg{border-top:2px solid var(--accent-2)}
.cal-times div small{font-size:9px;color:var(--accent-2)}
.cal-canvas{flex:1;position:relative;min-width:0}
.cal-row{height:var(--rowh,24px);border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
.cal-row.hour{border-bottom-color:var(--border)}
.blk{position:absolute;left:3px;right:3px;border-radius:7px;padding:3px 7px;font-size:12px;line-height:1.25;overflow:hidden;cursor:pointer;background:var(--blue-bg);border-left:4px solid var(--blue);color:var(--text)}
.blk.red{background:var(--red-bg);border-left-color:var(--red)}.blk.amber{background:var(--amber-bg);border-left-color:var(--amber)}
.blk.gray{background:var(--gray-bg);border-left-color:var(--gray)}.blk.grn{background:var(--grn-bg);border-left-color:var(--grn)}
.blk.est{border-left-style:solid;opacity:.9}
.blk:hover{filter:brightness(.96)}.blk:focus-visible{outline:2px solid var(--accent)}
.blk .tm{font-weight:700;margin-right:4px;font-variant-numeric:tabular-nums}
.blk .cont{font-style:italic;color:var(--muted)}
.blk.ct{border-top-left-radius:0;border-top-right-radius:0}.blk.cb{border-bottom-left-radius:0;border-bottom-right-radius:0}
.blk.one{white-space:nowrap;text-overflow:ellipsis;padding-top:1px}
.hcol .blk{font-size:11.5px}
.cal-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);padding:8px 2px}
.cal-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
/* vertical = a mesma grade, dia abaixo de dia, todas as horas, largura inteira */
.vcal{display:flex;flex-direction:column;gap:16px}
.vday-grid{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:clip}   /* clip, não hidden: hidden vira "rolagem" e mata o sticky do cabeçalho do dia */
.vhead{top:56px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:10px 12px}
.vhead .d1 b{font-size:15px}
.vcal .cal-times{flex-basis:52px}.vcal .cal-times.local{flex-basis:56px}
.vcal .blk{font-size:13px;padding:4px 9px}
.vcal .blk .loc{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.vempty{padding:10px 12px;color:var(--muted);font-size:13px}
@media (max-width:600px){.vcal .cal-times{flex-basis:44px}.vcal .cal-times.local{flex-basis:48px}.vcal .blk{font-size:12px}}
/* filtros-recolhidos-no-celular (dono, 04/10): ≤ 640 px a barra mostra só "⚙ Filtros (n)" + ação principal + vista/navegação */
.f-toggle{display:none}
.f-clear[hidden]{display:none!important}
/* I3: alvo de toque ≥ 40 px só onde o ponteiro é dedo; o desktop fica compacto */
@media (pointer:coarse){.btn,.btn.sm,.vote button{min-height:40px;padding:8px 12px}.item input[type=checkbox]{width:20px;height:20px;margin-top:2px}}
@media (max-width:640px){
  .filters .f-toggle{display:inline-flex;align-items:center;gap:6px;order:-3}
  .filters .f-toggle.has{border-color:var(--accent);color:var(--accent);font-weight:700}
  .filters > .btn.primary{order:-2;margin-left:auto}          /* I1/I2: "Filtros ▾ …… ＋ Evento" na MESMA linha, aberto ou fechado; ação à direita (polegar) */
  .filters .cal-right{order:-1;margin-left:0;width:100%;justify-content:space-between;gap:6px}
  .filters > .f-opt,.filters > .grow{display:none}
  .filters.open > .f-opt{display:flex;order:0}
  .filters.open > .f-opt.field{flex:1 1 calc(50% - 8px);min-width:0}
  .filters.open > .f-opt.row{width:100%}
  .filters.open > span.f-opt{display:block;width:100%}
  .filters.open > .f-clear{width:100%;justify-content:center}
  .filters.open.sticky-head{position:static}                  /* I7: aberta, a barra rola com a página em vez de prender 300 px no topo */
  .people.head-people,.tz-home{display:none}                 /* I9: pessoas moram na aba Pessoas e o fuso no eixo do calendário — ganha ~60 px */
  .hide-sm{display:none!important}                           /* M1: a classe era usada e não existia */
  .tabs{mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}   /* I8: pista de que as abas rolam */
  /* 1 dia inteiro por tela na horizontal, com encaixe ao rolar (como o protótipo no celular) */
  .cal-day{--colw:calc(100vw - 100px)}
  .cal-scroll{scroll-snap-type:x mandatory;scroll-padding-left:48px}.cal-day{scroll-snap-align:start}
}

/* IA */
.ai{display:grid;grid-template-columns:240px 1fr;gap:14px;min-height:60vh}
@media (max-width:860px){.ai{grid-template-columns:1fr}.ai-side{order:2}}
.ai-side .list a{display:block;padding:8px 10px;border-radius:9px;color:var(--text);text-decoration:none;font-size:13px;background:var(--surface-2)}
.ai-side .list a.active{outline:2px solid var(--accent)}
.ai-main{display:flex;flex-direction:column;min-height:60vh}
.msgs{flex:1;display:flex;flex-direction:column;gap:10px;padding:4px 2px 14px;overflow:auto;max-height:calc(100vh - 330px)}
.msg{max-width:85%;padding:10px 14px;border-radius:14px;background:var(--surface-2);white-space:pre-wrap;word-break:break-word}
.msg.user{align-self:flex-end;background:color-mix(in srgb,var(--accent) 16%,var(--surface))}
.msg.assistant{align-self:flex-start;border-left:4px solid var(--accent)}
.msg .meta{font-size:11px;color:var(--muted);margin-top:4px}
.prop{margin-top:8px;padding:8px 10px;border-radius:10px;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--amber)}
.prop.applied{border-left-color:var(--grn)}.prop.failed{border-left-color:var(--red)}.prop.discarded{opacity:.6}
.prop pre{font-size:11px;white-space:pre-wrap;max-height:120px;overflow:auto;margin:6px 0;color:var(--muted)}
.composer{display:flex;gap:8px;align-items:flex-end;border-top:1px solid var(--border);padding-top:10px}
.composer textarea{flex:1;min-height:44px;max-height:160px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.banner{padding:10px 14px;border-radius:10px;background:var(--amber-bg);border-left:4px solid var(--amber);margin-bottom:10px}
.tbd{padding:14px;border-radius:12px;background:var(--surface-2);text-align:center;color:var(--muted);margin-bottom:14px}
.vote{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.vote button{border:0;background:transparent;padding:4px 8px;cursor:pointer;font-size:13px}
.vote button.on{background:var(--accent);color:#fff}
.people{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--surface-2);font-size:12.5px}
.pill .avatar{width:22px;height:22px;font-size:11px}
.mark{font-size:12px}
footer.foot{margin-top:30px;color:var(--muted);font-size:12px;text-align:center}