/* ── APP SHELL ──────────────────────────────────────── */
#app{display:none;height:100vh;flex-direction:column;position:relative;z-index:1;}
#app.visible{display:flex;}

/* TOP BAR */
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:0 18px;height:54px;display:flex;align-items:center;gap:12px;flex-shrink:0;position:relative;z-index:10;}
.topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--amber) 0%,transparent 50%);opacity:0.3;}
.tb-mark{width:30px;height:30px;background:var(--amber);border-radius:3px;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:12px;color:#000;flex-shrink:0;}
.tb-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;letter-spacing:0.05em;}
.tb-div{width:1px;height:20px;background:var(--border);}
.tb-platform{font-size:11px;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase;}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.tb-btn{background:none;border:1px solid var(--border);border-radius:3px;padding:5px 11px;font-family:'Barlow',sans-serif;font-size:12px;color:var(--muted);cursor:pointer;transition:all 0.15s;letter-spacing:0.04em;}
.tb-btn:hover{border-color:var(--border-lt);color:var(--text);}
.tb-btn.amber{background:var(--amber-dim);border-color:var(--amber-border);color:var(--amber);}
.tb-btn.amber:hover{background:rgba(245,168,0,0.18);}
.tb-btn.feedback{background:rgba(59,130,246,0.10);border-color:rgba(59,130,246,0.28);color:#3B82F6;}
.tb-btn.feedback:hover{background:rgba(59,130,246,0.18);}
.sm-btn.copy-out{opacity:0.45;cursor:not-allowed;pointer-events:none;}
.sm-btn.copy-out.ready{opacity:1;cursor:pointer;pointer-events:all;color:var(--amber);border-color:var(--amber-border);background:var(--amber-dim);}
.sm-btn.copy-out.ready:hover{background:rgba(245,168,0,0.18);}

/* MAIN LAYOUT */
.main-wrap{display:flex;flex:1;overflow:hidden;}

/* AGENT SIDEBAR */
.agent-sidebar{width:200px;background:var(--surface);border-right:1px solid var(--border);padding:16px 0;display:flex;flex-direction:column;gap:4px;flex-shrink:0;overflow-y:auto;position:relative;}
.sidebar-head{font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim);padding:0 16px;margin-bottom:8px;}
.agent-btn{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background 0.15s;border:none;background:none;width:100%;text-align:left;position:relative;}
.agent-btn:hover{background:var(--surface2);}
.agent-btn.active{background:var(--amber-dim);}
.agent-btn.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--amber);border-radius:0 2px 2px 0;}
.agent-icon{width:32px;height:32px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:15px;background:var(--surface3);flex-shrink:0;transition:background 0.15s;}
.agent-btn.active .agent-icon{background:rgba(245,168,0,0.18);}
.agent-info{flex:1;min-width:0;}
.agent-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:0.04em;color:var(--muted);transition:color 0.15s;}
.agent-btn.active .agent-name{color:var(--amber);}
.agent-role{font-size:10px;color:var(--dim);letter-spacing:0.03em;margin-top:1px;}
.agent-badge{font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:2px 6px;border-radius:2px;}
.badge-live{background:rgba(34,197,94,0.12);color:var(--green);border:1px solid rgba(34,197,94,0.25);}
.badge-soon{background:var(--surface3);color:var(--dim);border:1px solid var(--border);}

.sidebar-divider{height:1px;background:var(--border);margin:6px 14px;}
.sidebar-section{font-size:9px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--dim);padding:12px 16px 5px;display:flex;align-items:center;gap:6px;}
.sidebar-section::after{content:'';flex:1;height:1px;background:var(--border);}

/* AGENT CONTENT AREA */
.agent-area{flex:1;display:flex;flex-direction:column;overflow:hidden;}

/* ── JOB CONTEXT BAR ────────────────────────────────── */
.job-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:0 14px;height:40px;display:flex;align-items:center;gap:8px;flex-shrink:0;}
.jb-label{font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;}
.jb-input{background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:4px 9px;font-family:'Barlow',sans-serif;font-size:12px;color:var(--text);outline:none;transition:border-color 0.2s;height:26px;}
.jb-input:focus{border-color:var(--amber-border);}
.jb-input::placeholder{color:var(--dim);}
.jb-num{width:110px;}.jb-client{width:170px;}.jb-site{flex:1;max-width:240px;}
.jb-div{width:1px;height:16px;background:var(--border);}
.jb-tag{display:flex;align-items:center;gap:5px;background:var(--amber-dim);border:1px solid var(--amber-border);border-radius:2px;padding:2px 8px;font-size:10.5px;color:var(--amber);font-weight:600;letter-spacing:0.04em;white-space:nowrap;transition:opacity 0.2s;}
.jb-tag.empty{opacity:0;}