/* Visual tokens and components copied from docs/web-ui/003-wireframe-auth.html (validated wireframes). */
/* Theme: the dark tokens are the default. The light ones apply when the person chose light (data-theme="light", set by
   theme.js) or, with no choice made, when the system prefers light. The terminal never follows the theme: its tokens are
   dark in both, and the whole .term-screen puts the dark tokens back for itself. */
/* ROOT:BEGIN (bloco de tokens dos 5 arquivos 003-wireframe-*.html, com o tema escolhido pela pessoa) */
:root,.term-screen{
  --bg:#0d1117;--surface:#161b22;--surface-2:#1f262e;--surface-3:#2a323c;
  --border:#30363d;--border-strong:#4a5460;
  --text:#e6edf3;--text-muted:#a0aab5;
  --accent:#2f6fe4;--accent-hover:#3d7cf0;--accent-press:#2459bd;--accent-text:#79b8ff;--accent-bg:#13243f;--on-accent:#ffffff;
  --focus:#79b8ff;
  --success:#3fb950;--success-bg:#12261a;
  --warn:#e3b341;--warn-bg:#2b2208;
  --danger:#ff7b72;--danger-bg:#2d1214;--danger-solid:#da3633;--danger-hover:#e5534b;--on-danger:#ffffff;
  --info:#58a6ff;--info-bg:#10243d;
  --scrim:rgba(1,4,9,.72);--scrim-soft:rgba(1,4,9,.8);
  --shadow:0 8px 24px rgba(0,0,0,.45);
}
:root{
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:40px;
  --radius:10px;--radius-lg:14px;--touch:44px;
  --term-bg:#010409;--term-text:#d0d7de;--term-dim:#8b949e;--term-line:#21262d;
  --term-green:#56d364;--term-amber:#e3b341;--term-blue:#79b8ff;--term-red:#ff7b72;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#f6f8fa;--surface:#ffffff;--surface-2:#eef1f4;--surface-3:#e1e6eb;
    --border:#d0d7de;--border-strong:#8c959f;
    --text:#1f2328;--text-muted:#59636e;
    --accent:#0b57d0;--accent-hover:#1a66e0;--accent-press:#0a4cb3;--accent-text:#0b57d0;--accent-bg:#e3eefc;--on-accent:#ffffff;
    --focus:#0b57d0;
    --success:#1a7f37;--success-bg:#e2f5e7;
    --warn:#8a5a00;--warn-bg:#fff3d1;
    --danger:#cf222e;--danger-bg:#ffe5e7;--danger-solid:#cf222e;--danger-hover:#b31d28;--on-danger:#ffffff;
    --info:#0550ae;--info-bg:#ddeeff;
    --scrim:rgba(31,35,40,.5);--scrim-soft:rgba(255,255,255,.82);
    --shadow:0 8px 24px rgba(31,35,40,.18);
  }
}
:root[data-theme="light"]{
  --bg:#f6f8fa;--surface:#ffffff;--surface-2:#eef1f4;--surface-3:#e1e6eb;
  --border:#d0d7de;--border-strong:#8c959f;
  --text:#1f2328;--text-muted:#59636e;
  --accent:#0b57d0;--accent-hover:#1a66e0;--accent-press:#0a4cb3;--accent-text:#0b57d0;--accent-bg:#e3eefc;--on-accent:#ffffff;
  --focus:#0b57d0;
  --success:#1a7f37;--success-bg:#e2f5e7;
  --warn:#8a5a00;--warn-bg:#fff3d1;
  --danger:#cf222e;--danger-bg:#ffe5e7;--danger-solid:#cf222e;--danger-hover:#b31d28;--on-danger:#ffffff;
  --info:#0550ae;--info-bg:#ddeeff;
  --scrim:rgba(31,35,40,.5);--scrim-soft:rgba(255,255,255,.82);
  --shadow:0 8px 24px rgba(31,35,40,.18);
}
/* ROOT:END */

*{box-sizing:border-box}
html{color-scheme:dark light}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
.term-screen{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 var(--font)}
h1,h2,h3,p{margin:0}
code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);padding:1px 5px;border-radius:4px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

.stack>*+*{margin-top:var(--sp-3)}
.brand{font:700 26px var(--mono);letter-spacing:-.5px}
.brand span{color:var(--accent-text)}
.muted{color:var(--text-muted)}
.small{font-size:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--touch);padding:0 var(--sp-4);border-radius:var(--radius);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);font:600 15px var(--font);cursor:pointer;text-align:center}
.btn:hover,.btn.is-hover{background:var(--surface-3)}
.btn:active,.btn.is-pressed{transform:translateY(1px);box-shadow:inset 0 0 0 2px var(--accent)}
.btn-block{display:flex;width:100%}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-primary:hover,.btn-primary.is-hover{background:var(--accent-hover)}
.btn-primary:active,.btn-primary.is-pressed{background:var(--accent-press);box-shadow:inset 0 0 0 2px var(--focus)}
.btn-danger{background:var(--danger-solid);border-color:var(--danger-solid);color:var(--on-danger)}
.btn-danger:hover,.btn-danger.is-hover{background:var(--danger-hover)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--accent-text)}
.btn-google{background:#ffffff;border-color:#c6cbd1;color:#1f1f1f}
.btn-google:hover{background:#f1f3f4}
.btn-google .g{width:22px;height:22px;border-radius:50%;background:#4285f4;color:#fff;font:700 13px/22px var(--font);text-align:center}
.btn-success{background:var(--success-bg);border-color:var(--success);color:var(--success)}
.btn.is-error{border-color:var(--danger);color:var(--danger)}
.btn[disabled],.btn.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn.is-loading::before{content:"";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
.project-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-3)}
.alert{display:flex;gap:var(--sp-2);padding:var(--sp-3);border-radius:var(--radius);border:1px solid var(--border);font-size:14px}
.alert .ic{flex:none;width:20px;text-align:center;font-weight:700}
.alert strong{display:block}
.alert-info{background:var(--info-bg);border-color:var(--info)}.alert-info .ic{color:var(--info)}
.alert-success{background:var(--success-bg);border-color:var(--success)}.alert-success .ic{color:var(--success)}
.alert-warn{background:var(--warn-bg);border-color:var(--warn)}.alert-warn .ic{color:var(--warn)}
.alert-danger{background:var(--danger-bg);border-color:var(--danger)}.alert-danger .ic{color:var(--danger)}
.banner{padding:var(--sp-2) var(--sp-3);font-size:13px;font-weight:600;text-align:center;flex:none}
.banner-offline{background:var(--danger-solid);color:var(--on-danger)}

/* page layout */
[hidden]{display:none!important}
.page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.screen{flex:1;display:flex;flex-direction:column;justify-content:center;gap:var(--sp-4);padding:var(--sp-5);width:100%;max-width:440px;margin:0 auto}
.screen h1{font-size:24px}
a.btn{text-decoration:none}
.footer-line{padding:var(--sp-3);text-align:center;font-size:12px;color:var(--text-muted);flex:none}
.value{font-weight:600;overflow-wrap:anywhere}
.alert-slot>*+*{margin-top:var(--sp-2)}
.tagline{margin-top:var(--sp-2)}
.card-gap{margin-top:var(--sp-2)}

/* projects (T5) and open sheet (T6): tokens and components follow 003-wireframe-projetos.html */
.screen-wide{max-width:760px;justify-content:flex-start}
.projects>*+*{margin-top:var(--sp-3)}
.projects-head{display:flex;align-items:center;justify-content:space-between}
.projects-head h2{font-size:18px}
.projects-tools{display:flex;flex-direction:column;gap:var(--sp-2)}
@media (min-width:640px){.projects-tools{flex-direction:row}.projects-tools .input{flex:1}.projects-tools .seg{width:280px}}
.projects-list>*+*{margin-top:var(--sp-2)}
.project-card.is-attached{border-color:var(--accent)}
.project-card.needs-attention{border-color:var(--warn)}
.card-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.card-name{font:600 16px var(--mono);overflow-wrap:anywhere}
.card-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}
.card-note{margin-top:var(--sp-2)}
.project-card .btn{flex:none}
.project-card.is-stale{opacity:.6}
.card-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}
.card-actions .btn{min-height:36px;font-size:13px}
#act-details .orphans li{border-top:0;padding:2px 0}
#act-reasons{font-family:var(--font)}
#act-children{max-height:30dvh;overflow-y:auto}
.empty{text-align:center;padding:var(--sp-5) var(--sp-3)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:20px;border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text-muted);white-space:nowrap}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.badge-running{color:var(--success);background:var(--success-bg);border-color:var(--success)}
.badge-saved{color:var(--info);background:var(--info-bg);border-color:var(--info)}
.badge-busy,.badge-attention{color:var(--warn);background:var(--warn-bg);border-color:var(--warn)}
.badge-attached{color:var(--accent-text);background:var(--accent-bg);border-color:var(--accent)}
@keyframes pulse{50%{opacity:.35}}
.badge-attention::before{animation:pulse 1.2s infinite}
.seg{display:flex;border:1px solid var(--border-strong);border-radius:var(--radius);overflow:hidden}
.seg button{flex:1;min-height:var(--touch);padding:0 var(--sp-2);background:var(--surface);color:var(--text);border:0;border-left:1px solid var(--border);font:600 14px var(--font);cursor:pointer}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.field{display:flex;flex-direction:column;gap:6px}
.field>label{font-size:13px;font-weight:600}
.input{display:block;width:100%;min-height:var(--touch);padding:0 var(--sp-3);background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius);font:15px var(--font)}
.input::placeholder{color:var(--text-muted)}
@keyframes shimmer{to{background-position:-200% 0}}
.skeleton{background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:6px}
.skeleton-line{height:16px;width:60%}
.skeleton-line.short{height:12px;width:35%;margin-top:var(--sp-2)}
.orphans{list-style:none;margin:var(--sp-2) 0 0;padding:0;font:13px var(--mono)}
.orphans li{display:flex;gap:var(--sp-3);padding:var(--sp-1) 0;border-top:1px solid var(--border)}
.orphans .cmd{overflow-wrap:anywhere;flex:1}
details>summary{cursor:pointer;font-weight:600}
.totals{padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.totals.is-over{border-color:var(--danger);color:var(--danger)}
.toast{position:fixed;left:var(--sp-3);right:var(--sp-3);bottom:var(--sp-3);z-index:8;max-width:440px;margin:0 auto;padding:var(--sp-3);border-radius:var(--radius);background:var(--surface-3);border:1px solid var(--success);box-shadow:var(--shadow);font-size:14px}
.sheet{width:min(440px,100%);max-height:94dvh;overflow-y:auto;background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:var(--sp-4);box-shadow:var(--shadow)}
.sheet::backdrop{background:var(--scrim)}
@media (max-width:639px){.sheet{margin:auto 0 0;border-radius:20px 20px 0 0;border-bottom:0;max-width:none}}
.sheet h2{font-size:18px}
.sheet-head{position:sticky;top:calc(var(--sp-4) * -1);z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-2);margin:calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) 0;padding:var(--sp-4) var(--sp-4) var(--sp-2);background:var(--surface)}
.sheet-x{min-width:var(--touch);min-height:var(--touch);font-size:26px;line-height:1;padding:0}
.clone-sheet .sheet-head{align-items:center;padding-bottom:0;flex:none}
.clone-sheet .sheet-head h2{min-width:0;overflow-wrap:anywhere}
.clone-sheet.tall .sheet-head{margin-bottom:0}
.sheet .actions{display:flex;gap:var(--sp-2)}
.sheet .actions .btn{flex:1}
.group{border:0;margin:0;padding:0;min-width:0}
.group legend{font-size:13px;font-weight:600;padding:0;margin-bottom:var(--sp-2)}
.group>.field+.field{margin-top:var(--sp-3)}
.options{display:flex;flex-direction:column;gap:var(--sp-2)}
.option{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--touch);padding:var(--sp-2) var(--sp-3);border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);cursor:pointer}
.option:has(input:checked){border-color:var(--accent);background:var(--accent-bg)}
.option.is-disabled{opacity:.5;cursor:not-allowed}
.option input{width:18px;height:18px;flex:none;accent-color:var(--accent)}
.check{display:flex;gap:var(--sp-2);align-items:flex-start;font-weight:600;cursor:pointer}
.check input{width:20px;height:20px;flex:none;margin-top:1px}

/* delete sheet (Sprint 4): follows 003-wireframe-exclusao.html */
.card-buttons{display:flex;align-items:center;gap:var(--sp-1)}
.icon-del{flex:none;width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;color:var(--danger);cursor:pointer}
.icon-del .sq{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:8px;background:var(--danger-bg)}
.icon-del:hover .sq,.icon-del:focus-visible .sq{border-color:var(--danger)}
.icon-del[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
.mono{font-family:var(--mono)}
.del-row{display:flex;align-items:center;gap:var(--sp-2)}
.spinner{display:inline-block;flex:none;width:16px;height:16px;border:2px solid var(--text-muted);border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
.hint{font-size:12px;color:var(--text-muted)}
.hint.error{color:var(--danger)}
.hint.ok{color:var(--success)}
.input.is-invalid{border-color:var(--danger)}
.input.is-valid{border-color:var(--success)}
.section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:var(--sp-2) 0 0}
.facts{display:grid;grid-template-columns:1fr auto;gap:6px var(--sp-3);margin:0;font-size:14px}
.facts dt{color:var(--text-muted)}
.facts dd{margin:0;text-align:right;font-weight:600;overflow-wrap:anywhere}
.ok-text{color:var(--success);font-weight:600}
.bad-text{color:var(--danger);font-weight:600}
.proc-list{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;max-height:34dvh;overflow-y:auto}
.proc-list li{display:flex;justify-content:space-between;gap:var(--sp-2);padding:10px 12px;border-top:1px solid var(--border);font:13px var(--mono);overflow-wrap:anywhere}
.proc-list li:first-child{border-top:0}
.proc-list .mb{color:var(--text-muted);white-space:nowrap}
.proc-list li.none{font-family:var(--font);color:var(--text-muted)}
.check-plain{min-height:var(--touch);align-items:center;font-size:14px;font-weight:400}
.check-plain input{width:24px;height:24px;margin:0;accent-color:var(--danger-solid)}
.adv{border:1px solid var(--border);border-radius:var(--radius);padding:0 var(--sp-3)}
.adv summary{min-height:var(--touch);display:flex;align-items:center;cursor:pointer;font-size:14px;font-weight:600;color:var(--text-muted)}
.adv .adv-body{padding-bottom:var(--sp-3)}
.link-danger{background:none;border:0;padding:0;min-height:var(--touch);color:var(--danger);font:600 14px var(--font);text-decoration:underline;cursor:pointer;text-align:left}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.steps li{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--radius);font-size:14px;color:var(--text-muted)}
.steps li i{font-style:normal;width:16px;text-align:center;font-weight:700}
.steps li.done{color:var(--text)}
.steps li.done i{color:var(--success)}
.steps li.now{color:var(--text);border-color:var(--accent);background:var(--accent-bg)}
.branch-box{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3);border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface-2);font:13px var(--mono);overflow-wrap:anywhere}
.branch-box span{flex:1;min-width:0}
.branch-box .btn{min-height:36px;padding:0 var(--sp-3);font-size:13px}
.recover{border:1px solid var(--border);font:12px var(--mono);background:var(--term-bg);color:var(--term-text);padding:var(--sp-3);border-radius:var(--radius);white-space:pre-wrap;overflow-wrap:anywhere}
#del-sheet .skeleton{height:14px}
#del-sheet .sk-2{width:70%}
#del-sheet .sk-3{width:40%}
#del-body{min-width:0}
#del-body>*+*{margin-top:var(--sp-3)}
#del-body>:first-child{margin-top:0}

/* terminal (T7) and special keys bar (T8): layout follows 003-wireframe-terminal.html */
.term-screen{position:fixed;top:0;left:0;right:0;height:100dvh;display:flex;flex-direction:row;background:var(--bg);color:var(--text);z-index:5}
.term-main{flex:1;min-width:0;display:flex;flex-direction:column}
.term-top{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border);background:var(--surface);flex:none}
.term-title{flex:1;min-width:0;font:600 16px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.term-top .btn{white-space:nowrap}
.term-top #term-tmuxbar[aria-pressed="true"]{background:var(--accent-bg);color:var(--accent-text)}
.term-conn{display:inline-flex;align-items:center;gap:6px;padding:0 var(--sp-2);font-size:12px;font-weight:600;white-space:nowrap}
.term-conn[hidden]{display:none}
.term-conn.is-quiet .term-conn-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.term-conn.is-warn::before{animation:pulse 1.2s infinite}
.term-conn::before,.term-dot{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.term-dot{display:inline-block}
.term-conn.is-ok,.term-dot.is-ok{color:var(--success)}
.term-conn.is-warn,.term-dot.is-warn{color:var(--warn)}
.term-conn.is-bad,.term-dot.is-bad{color:var(--danger)}
.term-dot.is-off{color:var(--text-muted)}
.term-dot.is-off{color:var(--text-muted)}
.term-banner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);padding:var(--sp-2) var(--sp-3);font-size:14px;font-weight:600;flex:none;border-bottom:1px solid var(--border)}
.term-banner.is-warn{background:var(--warn-bg);color:var(--warn)}
.term-banner.is-bad{background:var(--danger-bg);color:var(--danger)}
.term-banner-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.term-notice{padding:var(--sp-2) var(--sp-3);font-size:13px;font-weight:600;background:var(--surface-3);border-bottom:1px solid var(--border);flex:none}
.term-area{position:relative;flex:1;min-height:0;background:var(--term-bg);overflow:hidden}
.term-host{position:absolute;inset:var(--sp-1) 0 var(--term-bottom-gap,0px) var(--sp-2)}
.term-host .xterm{height:100%}
.term-host .xterm-viewport{background:var(--term-bg)!important}
.term-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);color:var(--term-dim);text-align:center;padding:var(--sp-5)}
.term-bottom{flex:none;display:flex;flex-direction:column}
.term-bottom[hidden]{display:none}
.term-tools{display:flex;gap:var(--sp-2);padding:var(--sp-1) var(--sp-2);background:var(--surface);border-top:1px solid var(--border);flex:none}
.term-tool{flex:1;min-height:36px;font-size:13px}
.term-keys{display:flex;gap:var(--sp-2);padding:var(--sp-2);background:var(--surface);overflow-x:auto;flex:none;padding-bottom:max(var(--sp-2),env(safe-area-inset-bottom))}
.term-key{flex:none;min-width:var(--touch);min-height:var(--touch);padding:0 var(--sp-3);border-radius:var(--radius);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);font:600 15px var(--mono);cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.term-key:active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.term-key:disabled,.term-tool:disabled{opacity:.45;cursor:not-allowed}
.term-key.is-modifier[aria-pressed="true"]{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-text)}
.term-key.is-modifier.is-locked{background:var(--accent);color:var(--on-accent)}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.term-key.is-shake{animation:shake .25s 2;border-color:var(--danger)}
/* the bar is for touch screens, a physical keyboard does not need it */
@media (min-width:768px) and (pointer:fine){.term-bottom,.term-bottom-open{display:none!important}}
.term-tool-square{flex:none;width:var(--touch);padding:0}
.term-bottom-open{position:absolute;right:var(--sp-2);bottom:var(--sp-2);z-index:2;width:var(--touch);height:var(--touch);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);cursor:pointer;opacity:.92}
.term-bottom-open[hidden]{display:none}
.icon-btn{width:var(--touch);height:var(--touch);flex:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;background:transparent;color:var(--text);border-radius:var(--radius);font:600 22px var(--font);cursor:pointer}
.icon-btn:hover{background:var(--surface-2)}

/* side menu of the terminal (docs/web-ui/010-wireframe-terminal-unified-sidebar.html): over the terminal on phones, pinned beside it on wide screens */
.term-drawer{position:absolute;top:0;bottom:0;left:0;width:300px;max-width:84%;z-index:7;display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--border-strong);box-shadow:var(--shadow)}
.term-drawer[hidden],.term-scrim[hidden]{display:none}
.term-scrim{position:absolute;inset:0;z-index:6;background:var(--scrim)}
.term-drawer-head{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3);min-height:56px;border-bottom:1px solid var(--border);flex:none}
.back{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--touch);padding:0 var(--sp-3);border-radius:var(--radius);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);font:600 14px var(--font);white-space:nowrap;cursor:pointer}
.back .ic{color:var(--text-muted)}
.divider{height:1px;background:var(--border);margin:var(--sp-1) 0;flex:none}
.term-drawer-body{flex:1;min-height:0;overflow-y:auto;padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-3)}
.term-drawer .section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:var(--sp-2) 0 0}
.nav{display:flex;flex-direction:column;gap:var(--sp-1)}
.nav-item{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--touch);padding:0 var(--sp-3);border-radius:var(--radius);border:1px solid transparent;background:transparent;color:var(--text);font:600 15px var(--font);text-align:left;width:100%;cursor:pointer;text-decoration:none}
.nav-item:hover{background:var(--surface-2)}
.nav-item .ic{width:20px;text-align:center;color:var(--text-muted)}
.nav-item[disabled]{opacity:.45;cursor:not-allowed}
.nav-item[hidden]{display:none}
.sess{display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2)}
.sess.is-active{background:var(--accent-bg);border-color:var(--accent)}
.sess-select{flex:1;min-width:0;display:flex;align-items:center;gap:var(--sp-2);min-height:var(--touch);padding:0 var(--sp-3);border:0;background:transparent;color:var(--text);font:600 14px var(--mono);text-align:left;cursor:pointer}
.sess-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sess-state{margin-left:auto;font:600 11px var(--font);color:var(--text-muted);white-space:nowrap}
.sess-close{width:var(--touch);min-height:var(--touch);border:0;background:transparent;color:var(--text-muted);font-size:20px;flex:none;cursor:pointer}
.sess-add{border:1px dashed var(--border-strong);color:var(--accent-text)}
.term-dot.is-warn{animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.45}}
.note{font-size:12px;color:var(--text-muted);padding:0 var(--sp-1)}
.note.is-warn{color:var(--warn)}
@media (min-width:768px){
  .term-drawer{position:relative;flex:none;width:280px;max-width:none;box-shadow:none}
  .term-scrim{display:none!important}
}
/* current session card and the Control de sessao accordion */
.cur{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-3);border-radius:var(--radius);border:1px solid var(--border-strong);background:var(--surface-2);flex:none}
.cur .name{font:700 15px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cur .st{display:flex;align-items:center;gap:var(--sp-2);font-size:13px;font-weight:600;color:var(--success)}
.cur.is-warn{border-color:var(--warn)}
.cur.is-warn .st{color:var(--warn)}
.cur.is-bad{border-color:var(--danger)}
.cur.is-bad .st{color:var(--danger)}
.cur.is-off .name,.cur.is-off .st{color:var(--text-muted)}
.acc{border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface-2);overflow:hidden;flex:none}
.acc.is-disabled{opacity:.5}
.acc-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);width:100%;min-height:var(--touch);padding:var(--sp-1) var(--sp-3);border:0;background:transparent;color:var(--text);font:600 15px var(--font);text-align:left;cursor:pointer}
.acc-head:disabled{cursor:not-allowed}
.acc.is-open .acc-head{border-bottom:1px solid var(--border);background:var(--accent-bg)}
.acc-head .hint{display:block;font:400 12px var(--font);color:var(--text-muted)}
.acc-head .hint:empty{display:none}
.acc-body{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3)}
.acc-body[hidden]{display:none}
.grp-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:var(--sp-1) 0 0}
.grp-title:first-child{margin-top:0}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.chip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:var(--touch);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius);border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font:600 14px var(--mono);text-align:left;cursor:pointer}
.chip small{font:400 11px var(--font);color:var(--text-muted)}
.switch-row{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--touch);padding:var(--sp-1) var(--sp-3);border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);color:var(--text);font:600 14px var(--font);text-align:left;width:100%;cursor:pointer}
.switch-row small{display:block;font-weight:400;font-size:11px;color:var(--text-muted)}
.sw{margin-left:auto;width:40px;height:24px;border-radius:12px;background:var(--surface-3);border:1px solid var(--border-strong);position:relative;flex:none}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--text)}
.switch-row[aria-checked="true"] .sw{background:var(--accent);border-color:var(--accent)}
.switch-row[aria-checked="true"] .sw::after{left:18px;background:var(--on-accent)}
.choice{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:var(--touch);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius);border:1px solid var(--border-strong);background:var(--surface);color:var(--text);text-align:left;font:600 14px var(--font);cursor:pointer}
.choice small{font-weight:400;font-size:12px;color:var(--text-muted)}
.choice.is-danger{border-color:var(--danger);color:var(--danger)}
.acc-body .stepper{padding:var(--sp-2)}
.acc-body .stepper .lbl{font-size:14px}
.acc-body .stepper button{width:40px;height:40px}
.acc-body .stepper output{min-width:44px;font-size:14px}

/* clone (Fase 5, T5a): follows 003-wireframe-clonar.html */
.spacer{flex:1}
.projects-toolbar{display:flex;align-items:center;gap:var(--sp-2)}
.btn-clone{padding:0 var(--sp-3);font-size:14px;color:var(--accent-text);border-color:var(--border);background:transparent}
.btn-clone:hover{background:var(--surface-2)}
.btn-refresh{padding:0 var(--sp-3);font-size:14px;background:transparent;border-color:var(--border);color:var(--text-muted)}
.clone-sheet{padding:var(--sp-4)}
@media (min-width:640px){.clone-sheet{width:min(560px,100%)}}
.clone-sheet.tall[open]{display:flex;flex-direction:column;height:94dvh;overflow:hidden}
@media (min-width:640px){.clone-sheet.tall[open]{height:min(660px,94dvh)}}
.clone-sheet.tall>.stack{display:flex;flex-direction:column;flex:1;min-height:0}
.clone-sheet.tall .clone-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.clone-sheet.tall .clone-body>*+*{margin-top:0}
.clone-sheet.tall .actions{flex:none}
.clone-body>*+*{margin-top:var(--sp-3)}
.clone-sheet .scroll{flex:1;min-height:0;overflow-y:auto}
.clone-sheet .scroll>*+*{margin-top:var(--sp-3)}
.filters{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.filters .field{flex:1;min-width:140px}
select.input{appearance:auto}
.repo-list{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.repo-item{display:flex;gap:var(--sp-3);align-items:center;padding:var(--sp-3);border-top:1px solid var(--border);background:var(--surface)}
.repo-item:first-child{border-top:0}
.repo-item .info{flex:1;min-width:0}
.repo-item .rname{font:600 14px var(--mono);overflow-wrap:anywhere}
.repo-item .rname span{color:var(--text-muted);font-weight:400}
.repo-item .desc{font-size:13px;color:var(--text-muted);margin-top:2px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.repo-item .when{font-size:12px;color:var(--text-muted);margin-top:4px}
.repo-item .tags,.preview .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.repo-item .btn{flex:none;min-width:84px}
.repo-item.is-cloned{background:var(--surface-2)}
.repo-item.is-sk .skeleton{height:14px;margin-bottom:8px;width:80%}
.repo-item.is-sk .sk-a{width:55%}
.is-dim{opacity:.6}
.badge.no-dot::before{display:none}
.badge-private{color:var(--warn);background:var(--warn-bg);border-color:var(--warn)}
.badge-cloned{color:var(--success);background:var(--success-bg);border-color:var(--success)}
.badge-archived{color:var(--text-muted);background:var(--surface-3)}
.more{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);font-size:12px;color:var(--text-muted);padding:var(--sp-2) 0}
.clone-refresh{align-self:flex-start;min-height:var(--touch)}
.clone-empty{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);text-align:center;padding:var(--sp-5) var(--sp-3)}
.clone-empty .glyph{font-size:34px;line-height:1;opacity:.85}
.clone-empty h3{font-size:16px}
.clone-empty p{color:var(--text-muted);font-size:14px;max-width:290px}
.input-wrap{position:relative}
.input-wrap .spinner{position:absolute;right:14px;top:14px}
.preview{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:var(--sp-3)}
.preview .rname{font:600 15px var(--mono);overflow-wrap:anywhere}
.preview .desc{font-size:13px;color:var(--text-muted);margin-top:4px}
.preview .facts{margin-top:var(--sp-3)}
.check-accent input{accent-color:var(--accent)}
.preset-line{font-size:13px;color:var(--text-muted)}
button.option{width:100%;text-align:left;color:var(--text);font:inherit;align-items:flex-start}
.option .radio{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--border-strong);margin-top:2px}
.option .opt-title{display:block;font-weight:600}
.option .opt-desc{display:block;font-size:13px;color:var(--text-muted);margin-top:2px}
.option.is-selected{border-color:var(--accent);background:var(--accent-bg)}
.option.is-selected .radio{border-color:var(--accent);background:radial-gradient(var(--accent) 0 42%,transparent 48%)}

/* theme toggle (theme.js): sits in the header of the project list */
.theme-toggle{min-height:36px;padding:0 var(--sp-3);font-size:13px;background:transparent;border-color:var(--border);color:var(--text-muted)}
.field .label{font-size:13px;font-weight:600}

.sheet .actions:empty{display:none}
.stepper{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface-2)}
.stepper .lbl{flex:1;font-weight:600}
.stepper .lbl small{display:block;font-weight:400;font-size:12px;color:var(--text-muted)}
.stepper button{width:var(--touch);height:var(--touch);border-radius:var(--radius);border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font:700 16px var(--font);cursor:pointer}
.stepper button[disabled]{opacity:.4;cursor:not-allowed}
.stepper output{min-width:52px;text-align:center;font:700 16px var(--mono)}
.preview-line{padding:var(--sp-2) var(--sp-3);border-radius:var(--radius);background:var(--term-bg);color:var(--term-text);font-family:var(--mono);border:1px solid var(--border);overflow:hidden;white-space:nowrap}

/* Visão Web (Fase 7, S2.T1): contêiner dentro de #term-area e classes que o session-web.js usa (docs/web-ui/session-web-mode/fase-7-arquitetura.md, 2.2b). Segue o wireframe 011. */
.web-view{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg);color:var(--text);min-height:0}
.web-view[hidden]{display:none}
.web-feed{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-3);overflow-wrap:anywhere}
.web-more{align-self:center;flex:none;min-height:var(--touch);padding:0 var(--sp-4);border-radius:var(--radius);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);font:600 13px var(--font);cursor:pointer}
.web-banner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);flex:none;padding:var(--sp-2) var(--sp-3);font-size:13px;font-weight:600;border-bottom:1px solid var(--border);background:var(--surface-2)}
.web-banner.is-warn{background:var(--warn-bg);color:var(--warn);border-bottom-color:var(--warn)}
.web-banner.is-bad{background:var(--danger-bg);color:var(--danger);border-bottom-color:var(--danger)}
.web-strip{display:flex;align-items:center;gap:var(--sp-2);flex:none;padding:var(--sp-1) var(--sp-3);min-height:32px;font-size:12px;color:var(--text-muted);border-top:1px solid var(--border);background:var(--surface);padding-bottom:max(var(--sp-1),env(safe-area-inset-bottom))}
.web-strip-what{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--warn);font-weight:600}
.web-ctx{position:relative;width:56px;height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden;flex:none}
.web-ctx::before{content:"";display:block;height:100%;width:var(--web-ctx-pct,0%);background:var(--accent)}
.web-ctx.is-hot::before{background:var(--warn)}
.web-msg{font-size:14px;max-width:100%}
.web-msg-user{align-self:flex-end;max-width:88%;background:var(--accent-bg);border:1px solid var(--accent);border-radius:14px 14px 4px 14px;padding:var(--sp-2) var(--sp-3);white-space:pre-wrap}
.web-msg-ai{display:flex;flex-direction:column;gap:var(--sp-2)}
.web-think{border-left:2px solid var(--border-strong);padding:0 0 0 var(--sp-3);color:var(--text-muted);font-size:13px}
.web-think summary{cursor:pointer;list-style:none}
.web-think summary::-webkit-details-marker{display:none}
.web-think summary::before{content:"\25B8 "}
.web-think[open] summary::before{content:"\25BE "}
.web-tool{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;flex:none}
.web-tool.is-running{border-color:var(--accent)}
.web-tool.is-ok{border-color:var(--border)}
.web-tool.is-error{border-color:var(--danger)}
.web-tool-head{display:flex;align-items:center;gap:var(--sp-2);min-height:40px;padding:0 var(--sp-3);font:600 12px var(--mono)}
.web-tool-name{flex:none;color:var(--accent-text)}
.web-tool-arg{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;color:var(--text-muted)}
.web-tool-state{flex:none;font:600 11px var(--font);color:var(--text-muted)}
.web-tool.is-ok .web-tool-state{color:var(--success)}
.web-tool.is-error .web-tool-state{color:var(--danger)}
.web-tool-body{border-top:1px solid var(--border);background:var(--term-bg);padding:var(--sp-2) var(--sp-3);font:12px/1.4 var(--mono);color:var(--term-text);white-space:pre-wrap;overflow-x:auto}
.web-spin{width:12px;height:12px;border-radius:50%;border:2px solid var(--border-strong);border-top-color:var(--accent);animation:spin .9s linear infinite;flex:none}
.web-diff{font:12px/1.4 var(--mono)}
.web-diff-add,.web-diff-del,.web-diff-ctx{display:block;white-space:pre-wrap}
.web-diff-add{background:var(--success-bg);color:var(--term-green)}
.web-diff-del{background:var(--danger-bg);color:var(--term-red)}
.web-diff-ctx{color:var(--term-dim)}
.web-todo{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:var(--sp-2) var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-1);font-size:13px;flex:none}
.web-todo-item{display:flex;gap:var(--sp-2);align-items:flex-start}
.web-todo-item.is-done{color:var(--text-muted);text-decoration:line-through}
.web-todo-item.is-now{font-weight:600}
.web-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);padding:var(--sp-5);text-align:center;color:var(--text-muted)}
.web-skeleton{flex:none;height:12px;border-radius:6px;background:var(--surface-3);animation:web-pulse 1.2s ease-in-out infinite}
.web-notice{flex:none;padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);color:var(--text-muted);font-size:13px}
@keyframes web-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.web-spin,.web-skeleton{animation:none}}
.md-p{margin:0}
.md-h{margin:0;font-size:15px;font-weight:700;line-height:1.3}
.md-ul,.md-ol{margin:0;padding-left:var(--sp-5)}
.md-ul li+li,.md-ol li+li{margin-top:2px}
.md-code{margin:0;background:var(--term-bg);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-2) var(--sp-3);font:12px/1.4 var(--mono);color:var(--term-text);white-space:pre;overflow-x:auto}
.md-quote{margin:0;border-left:3px solid var(--border-strong);padding:0 0 0 var(--sp-3);color:var(--text-muted)}
.md-link{color:var(--accent-text);text-decoration:underline;overflow-wrap:anywhere}
.md-inline-code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);padding:1px 5px;border-radius:4px}
/* S3.T1: seletor de modo (Terminal ou Web) */
.mode-pill{display:inline-flex;flex:none;border:1px solid var(--border-strong);border-radius:999px;overflow:hidden;background:var(--surface)}
.mode-pill button{min-height:32px;min-width:32px;padding:0 var(--sp-3);background:transparent;color:var(--text);border:0;border-left:1px solid var(--border);font:600 12px var(--font);cursor:pointer;white-space:nowrap}
.mode-pill button:first-child{border-left:0}
.mode-pill button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.mode-seg{display:flex;align-items:center;gap:0;margin-top:var(--sp-2);border:1px solid var(--border-strong);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.mode-seg .mode-label{padding:0 var(--sp-3);font-size:12px;font-weight:700;color:var(--text-muted);white-space:nowrap}
.mode-seg button{flex:1;min-height:var(--touch);padding:0 var(--sp-2);background:transparent;color:var(--text);border:0;border-left:1px solid var(--border);font:600 14px var(--font);cursor:pointer}
.mode-seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.mode-field{display:flex;flex-direction:column;gap:var(--sp-2)}
.mode-field .mode-label{font-size:13px;font-weight:600}
.mode-field .mode-options{display:flex;border:1px solid var(--border-strong);border-radius:var(--radius);overflow:hidden}
.mode-field .mode-options button{flex:1;min-height:var(--touch);padding:0 var(--sp-2);background:var(--surface);color:var(--text);border:0;border-left:1px solid var(--border);font:600 14px var(--font);cursor:pointer}
.mode-field .mode-options button:first-child{border-left:0}
.mode-field .mode-options button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.mode-pill button:focus-visible,.mode-seg button:focus-visible,.mode-field button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
/* Visão Web (Fase 7, S4.T1): estados carregando, vazio, reconectando e leitura pausada. Sem classe nova, só as da tabela 2.2b. */
.web-banner>div{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.web-banner button{min-height:var(--touch);padding:0 var(--sp-4);border-radius:var(--radius);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);font:600 13px var(--font);cursor:pointer}
.web-banner button:first-of-type{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.web-banner strong{font-weight:700}
.web-empty h2{margin:0;font-size:17px;font-weight:700;color:var(--text)}
.web-empty p{margin:0;font-size:13px}
.web-empty button{min-height:var(--touch);width:100%;max-width:360px;padding:var(--sp-2) var(--sp-4);border-radius:var(--radius);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);font:500 14px var(--font);text-align:left;cursor:pointer}
.web-skeleton:nth-child(1){align-self:flex-end;width:55%;height:34px;border-radius:14px}
.web-skeleton:nth-child(2){width:92%}
.web-skeleton:nth-child(3){width:84%}
.web-skeleton:nth-child(4){width:60%}
.web-skeleton:nth-child(5){height:40px;border-radius:10px}
.web-skeleton:nth-child(6){width:90%}

/* reset dos botoes da visao Web (o navegador pinta botao de cinza): raciocinio, cabecalho de ferramenta e diff recolhido */
.web-think>button{display:block;width:100%;padding:var(--sp-2) 0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.web-think>button::before{content:"\25B8 "}
.web-think>button[aria-expanded="true"]::before{content:"\25BE "}
.web-tool-head{width:100%;border:0;background:transparent;color:var(--text);text-align:left;cursor:pointer}
.web-tool-body button,.web-diff button{border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface-2);color:var(--text);font:600 12px var(--font);min-height:32px;padding:0 var(--sp-3);cursor:pointer}
/* Fase 8 (WebAct): compositor da visão Web (cmp-*) e cartões de decisão (perm-*). Quadros 4 a 8 do wireframe 011. */
.cmp-bar{position:relative;display:flex;flex-direction:column;gap:var(--sp-2);flex:none;padding:var(--sp-2) var(--sp-3) max(var(--sp-3),env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border);color:var(--text)}
.cmp-bar[aria-disabled="true"]{opacity:.55}
.cmp-chips{display:flex;gap:var(--sp-2);overflow-x:auto;scrollbar-width:none}
.cmp-chips::-webkit-scrollbar{display:none}
.cmp-chip{flex:none;min-height:var(--touch);padding:0 var(--sp-3);display:inline-flex;align-items:center;gap:6px;border-radius:22px;border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);font:600 12px var(--font);cursor:pointer}
.cmp-chip[hidden]{display:none}
.cmp-chip.is-on{border-color:var(--accent);background:var(--accent-bg);color:var(--accent-text)}
.cmp-chip.is-danger{border-color:var(--danger);color:var(--danger)}
.cmp-chip:disabled{opacity:.45;cursor:not-allowed}
.cmp-row{display:flex;gap:var(--sp-2);align-items:flex-end}
.cmp-field{flex:1;min-width:0;min-height:var(--touch);max-height:140px;padding:11px var(--sp-3);border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--bg);color:var(--text);font:16px/1.35 var(--font);resize:none;box-sizing:border-box}
.cmp-field::placeholder{color:var(--text-muted)}
.cmp-field:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.cmp-send{width:var(--touch);height:var(--touch);flex:none;border-radius:var(--radius);border:0;background:var(--accent);color:var(--on-accent);font:700 18px var(--font);cursor:pointer}
.cmp-send:hover{background:var(--accent-hover)}
.cmp-send:active{background:var(--accent-press)}
.cmp-send:disabled{background:var(--surface-3);color:var(--text-muted);cursor:not-allowed}
.cmp-palette{position:absolute;left:var(--sp-3);right:var(--sp-3);bottom:100%;z-index:4;max-height:40vh;overflow-y:auto;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow)}
.cmp-palette[hidden]{display:none}
.cmp-palette-item{display:flex;gap:var(--sp-3);align-items:baseline;min-height:var(--touch);padding:var(--sp-2) var(--sp-3);box-sizing:border-box;font-size:13px;border-bottom:1px solid var(--border);cursor:pointer}
.cmp-palette-item:last-child{border-bottom:0}
.cmp-palette-item.is-on{background:var(--accent-bg)}
.cmp-palette-cmd{min-width:92px;font-family:var(--mono)}
.cmp-palette-desc{color:var(--text-muted)}
.cmp-error{padding:var(--sp-2) var(--sp-3);border:1px solid var(--danger);border-radius:var(--radius);background:var(--danger-bg);color:var(--danger);font-size:13px;font-weight:600}
.cmp-error[hidden]{display:none}
.cmp-attach{width:var(--touch);height:var(--touch);flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);font:600 16px var(--font);cursor:pointer}
.cmp-attach:disabled{opacity:.45;cursor:not-allowed}
.cmp-attach.is-sending{border-color:var(--accent);color:var(--accent-text);opacity:.7;cursor:progress}
.cmp-attach.is-error{border-color:var(--danger);background:var(--danger-bg);color:var(--danger)}
.cmp-thumb{width:var(--touch);height:var(--touch);flex:none;border-radius:var(--radius);border:1px solid var(--border);object-fit:cover;background:var(--surface-3)}
.perm-card{display:flex;flex-direction:column;gap:var(--sp-2);flex:none;padding:var(--sp-3);border:1px solid var(--warn);border-radius:var(--radius-lg);background:var(--warn-bg);color:var(--text);font-size:13px;overflow-wrap:anywhere}
.perm-card.is-ask{border-color:var(--accent);background:var(--accent-bg)}
.perm-card.is-done{border-color:var(--border);background:var(--surface);opacity:.8}
.perm-title{font:700 13px var(--font)}
.perm-cmd{padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:var(--radius);background:var(--term-bg);color:var(--term-text);font:12px/1.4 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;max-height:240px;overflow:auto;unicode-bidi:isolate-override;direction:ltr}
.perm-why{font-size:12px;color:var(--text-muted)}
.perm-btns{display:flex;flex-direction:column;gap:var(--sp-2)}
.perm-btn{width:100%;min-height:var(--touch);padding:var(--sp-2) var(--sp-4);border-radius:var(--radius);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);font:600 14px var(--font);cursor:pointer}
.perm-btn.is-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.perm-btn.is-danger{border-color:var(--danger);color:var(--danger)}
.perm-btn:disabled{opacity:.5;cursor:not-allowed}
.perm-opt{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:var(--touch);padding:var(--sp-1) var(--sp-3);border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface-2);color:var(--text);font:600 14px var(--font);text-align:left;cursor:pointer}
.perm-opt::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;border:2px solid var(--border-strong)}
.perm-opt small{display:block;font-weight:400;font-size:12px;color:var(--text-muted)}
.perm-opt.is-on{border-color:var(--accent);background:var(--accent-bg)}
.perm-opt.is-on::before{border-color:var(--accent);background:radial-gradient(var(--accent) 45%,transparent 50%)}
.perm-opt:disabled{opacity:.5;cursor:not-allowed}
.perm-other{width:100%;min-height:var(--touch);padding:var(--sp-2) var(--sp-3);box-sizing:border-box;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--bg);color:var(--text);font:16px var(--font)}
.perm-other:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.perm-result{font-size:12px;color:var(--text-muted)}
.perm-result strong{color:var(--text)}
.perm-label{font-size:12px;font-weight:700;color:var(--text-muted)}
.perm-warn{padding:var(--sp-2) var(--sp-3);border:1px solid var(--danger);border-radius:var(--radius);background:var(--danger-bg);color:var(--danger);font-size:12px;font-weight:700}
.perm-warn[hidden]{display:none}
.cmp-modes .cmp-palette-item{width:100%;border:0;border-bottom:1px solid var(--border);background:transparent;color:inherit;font:inherit;font-size:13px;text-align:left}
.cmp-modes .cmp-palette-item:last-child{border-bottom:0}
.cmp-modes .cmp-palette-item:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.cmp-chip.is-open{box-shadow:inset 0 0 0 1px var(--accent)}
/* Fase 8, S3.T2: desktop, coluna central de leitura de 720 px. Sem classe nova. As barras (aviso, faixa, compositor) mantêm borda e fundo na largura toda; só o conteúdo fica na coluna. O painel lateral fica fora da v1. */
@media (min-width:768px){
.web-feed,.web-banner,.web-strip,.cmp-bar{padding-left:max(var(--sp-4),calc((100% - 720px) / 2));padding-right:max(var(--sp-4),calc((100% - 720px) / 2))}
.web-feed{padding-top:var(--sp-4);padding-bottom:var(--sp-4);gap:var(--sp-4)}
.web-msg{font-size:15px;line-height:1.55}
.md-h{font-size:16px}
.web-tool,.web-todo,.perm-card,.md-code{max-width:100%}
.perm-btns{flex-direction:row;flex-wrap:wrap}
.perm-btn{width:auto;flex:1 1 160px}
.web-more{align-self:center;margin-inline:auto}
.cmp-palette{left:max(var(--sp-4),calc((100% - 720px) / 2));right:max(var(--sp-4),calc((100% - 720px) / 2))}
.cmp-bar[aria-disabled="true"],.cmp-bar[inert]{opacity:.55}
.cmp-bar[inert] .cmp-field{background:var(--surface-3);color:var(--text-muted)}
.cmp-bar[inert] .cmp-send,.cmp-bar[inert] .cmp-attach,.cmp-bar[inert] .cmp-chip{cursor:not-allowed}
}