.chat-scroll-btn{display:none;position:absolute;bottom:68px;left:50%;transform:translateX(-50%) translateY(4px);border:none;background:transparent;color:var(--pb-text-dim);cursor:pointer;z-index:20;align-items:center;justify-content:center;padding:2px 16px;transition:all .2s ease;opacity:0.5}
.chat-scroll-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.chat-scroll-btn:hover{opacity:1;color:var(--pb-blue)}
.chat-scroll-btn:hover svg{transform:translateY(2px)}
.chat-scroll-btn.visible{display:flex;animation:scrollBtnFadeIn .2s ease}
@keyframes scrollBtnFadeIn{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:0.5;transform:translateX(-50%) translateY(4px)}}
[data-theme="light"] .chat-scroll-btn{color:#475569}
[data-theme="light"] .chat-scroll-btn:hover{color:var(--pb-blue)}
[data-theme="girly"] .chat-scroll-btn{color:#9f1239}
[data-theme="girly"] .chat-scroll-btn:hover{color:#e11d48}
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:8px 20px;border-bottom:1px solid var(--pb-border);background:rgba(10,14,26,0.9)}
.chat-header-left{display:flex;align-items:center;gap:8px}
.chat-subtabs{display:flex;gap:2px;background:rgba(255,255,255,0.04);border-radius:6px;padding:2px}
.chat-subtab{display:flex;align-items:center;gap:5px;padding:5px 12px;border:none;border-radius:4px;background:transparent;color:var(--pb-text-dim);font-size:12px;font-weight:500;font-family:inherit;cursor:pointer;transition:all .15s}
.chat-subtab svg{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chat-subtab:hover{color:var(--pb-text-muted);background:rgba(255,255,255,0.04)}
.chat-subtab.active{color:var(--pb-blue-light);background:rgba(42,147,193,0.15)}
.cc-badge,.inbox-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--pb-orange);color:#fff;font-size:9px;font-weight:700;line-height:1}
.cc-badge:empty,.inbox-badge:empty{display:none}
/* CC View */
.cc-view{display:none;flex-direction:column;flex:1;overflow:hidden}
.cc-view.visible{display:flex}
.cc-toolbar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--pb-border);background:rgba(10,14,26,0.6)}
.cc-toolbar select{padding:5px 8px;border-radius:6px;border:1px solid var(--pb-border);background:var(--pb-surface);color:var(--pb-text);font-size:11px;font-family:inherit;outline:none}
.cc-toolbar select:focus{border-color:var(--pb-blue)}
.cc-toolbar .cc-status{font-size:10px;color:var(--pb-text-dim);margin-left:auto}
.cc-messages{flex:1;overflow-y:auto;padding:12px}
.cc-msg{display:flex;gap:10px;padding:8px 10px;border-radius:8px;margin-bottom:4px;transition:background .15s}
.cc-msg:hover{background:rgba(255,255,255,0.03)}
.cc-msg-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.cc-msg-avatar.ai{background:linear-gradient(135deg,var(--pb-purple),var(--pb-blue))}
.cc-msg-avatar.human{background:linear-gradient(135deg,var(--pb-orange),var(--pb-yellow))}
.cc-msg-body{flex:1;min-width:0}
.cc-msg-header{display:flex;align-items:center;gap:6px;margin-bottom:2px;flex-wrap:wrap}
.cc-msg-sender{font-size:12px;font-weight:600;color:var(--pb-text)}
.cc-msg-time{font-size:10px;color:var(--pb-text-dim)}
.cc-channel-pill{display:inline-flex;align-items:center;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(139,92,246,0.15);color:var(--pb-purple);letter-spacing:0.02em}
.cc-msg-text{font-size:13px;line-height:1.55;color:var(--pb-text);word-break:break-word}
.cc-msg-text h1,.cc-msg-text h2,.cc-msg-text h3,.cc-msg-text h4,.cc-msg-text h5,.cc-msg-text h6{margin:8px 0 4px;font-weight:700;color:var(--pb-text)}
.cc-msg-text h1{font-size:18px}.cc-msg-text h2{font-size:16px}.cc-msg-text h3{font-size:14px}
.cc-msg-text h4,.cc-msg-text h5,.cc-msg-text h6{font-size:13px}
.cc-msg-text pre{background:var(--pb-bg);border:1px solid var(--pb-border);border-radius:6px;padding:8px 12px;margin:6px 0;overflow-x:auto;font-size:12px;line-height:1.5}
.cc-msg-text code{background:var(--pb-bg);padding:1px 5px;border-radius:3px;font-size:12px;font-family:'SF Mono',Monaco,Consolas,monospace}
.cc-msg-text pre code{background:none;padding:0;border-radius:0}
.cc-msg-text strong{font-weight:700;color:var(--pb-text)}
.cc-msg-text em{font-style:italic}
.cc-msg-text ul{margin:4px 0;padding-left:20px}.cc-msg-text li{margin:2px 0}
.cc-msg-text a{color:var(--pb-blue);text-decoration:none}.cc-msg-text a:hover{text-decoration:underline}
.cc-msg-text p{margin:4px 0}
.cc-msg-text .cc-mention{background:rgba(42,147,193,0.2);color:var(--pb-blue-light);padding:0 3px;border-radius:3px;font-weight:600}
.cc-reply-btn{visibility:hidden;padding:3px 8px;border:1px solid var(--pb-border);border-radius:4px;background:transparent;color:var(--pb-text-dim);font-size:10px;font-family:inherit;cursor:pointer;transition:all .15s;margin-top:4px;height:22px}
.cc-msg:hover .cc-reply-btn{visibility:visible}
.cc-reply-btn:hover{border-color:var(--pb-blue);color:var(--pb-blue-light);background:rgba(42,147,193,0.08)}
.cc-reply-composer{display:flex;gap:6px;padding:6px 8px;margin-top:6px;background:rgba(0,0,0,0.2);border-radius:6px;border:1px solid var(--pb-border)}
.cc-reply-composer input{flex:1;padding:4px 8px;border:none;background:transparent;color:var(--pb-text);font-size:12px;font-family:inherit;outline:none}
.cc-reply-composer button{padding:4px 12px;border:none;border-radius:4px;background:var(--pb-blue);color:#fff;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit}
.cc-reply-composer button:hover{background:var(--pb-blue-light)}
.cc-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--pb-text-dim);text-align:center}
/* Agent Identity Badges */
.agent-badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:700;letter-spacing:0.03em;margin-right:4px;text-transform:uppercase}
.agent-badge.primary{background:rgba(42,147,193,0.15);color:var(--pb-blue-light)}
.agent-badge.team-lead{background:rgba(139,92,246,0.15);color:var(--pb-purple)}
.agent-badge.specialist{background:rgba(34,197,94,0.15);color:var(--pb-green)}
.agent-badge.system{background:rgba(125,143,163,0.15);color:var(--pb-text-muted)}
.inbox-badge{font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;background:rgba(241,66,11,0.2);color:var(--pb-orange)}
.inbox-view{flex:1;overflow-y:auto;display:flex;flex-direction:column}
#inboxView .inbox-account-tabs{display:flex !important;align-items:center;gap:4px;padding:8px 16px;border-bottom:1px solid var(--pb-border);background:rgba(10,14,26,0.5);overflow-x:auto;flex-shrink:0}
#inboxView .inbox-acct-tab{display:inline-flex !important;align-items:center;gap:4px;padding:6px 14px;border-radius:6px;background:rgba(255,255,255,0.04);color:var(--pb-text-dim);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap;border:1px solid var(--pb-border);user-select:none;font-family:inherit}
#inboxView .inbox-acct-tab:hover{color:var(--pb-text);background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.12)}
#inboxView .inbox-acct-tab.active{color:var(--pb-blue-light);background:rgba(42,147,193,0.15);border-color:rgba(42,147,193,0.35)}
#inboxView .inbox-acct-remove{background:none;border:none;color:var(--pb-text-dim);font-size:14px;cursor:pointer;padding:0 0 0 4px;line-height:1;opacity:0;transition:opacity .15s;font-family:inherit}
#inboxView .inbox-acct-tab:hover .inbox-acct-remove{opacity:0.6}
#inboxView .inbox-acct-remove:hover{opacity:1;color:var(--pb-red,#ef4444)}
#inboxView .inbox-acct-add{color:var(--pb-text-dim);font-size:16px;font-weight:400;padding:5px 12px;border:1px dashed rgba(255,255,255,0.12);border-radius:6px;background:transparent;cursor:pointer;transition:all .15s}
#inboxView .inbox-acct-add:hover{border-color:var(--pb-blue);color:var(--pb-blue);background:rgba(42,147,193,0.06)}
[data-theme="light"] #inboxView .inbox-account-tabs{background:#e2e8f0;border-bottom-color:rgba(42,80,120,0.1)}
[data-theme="light"] #inboxView .inbox-acct-tab{background:rgba(255,255,255,0.6);color:#475569;border-color:rgba(42,80,120,0.12)}
[data-theme="light"] #inboxView .inbox-acct-tab:hover{background:rgba(255,255,255,0.8);color:#1e3a5f;border-color:rgba(42,80,120,0.2)}
[data-theme="light"] #inboxView .inbox-acct-tab.active{background:rgba(42,147,193,0.1);color:var(--pb-blue-dark);border-color:var(--pb-blue)}
[data-theme="light"] #inboxView .inbox-acct-add{border-color:rgba(42,80,120,0.15);color:#475569}
[data-theme="light"] #inboxView .inbox-acct-add:hover{border-color:var(--pb-blue);color:var(--pb-blue);background:rgba(42,147,193,0.06)}
[data-theme="light"] #inboxView .inbox-acct-remove:hover{color:#dc2626}
[data-theme="girly"] #inboxView .inbox-account-tabs{background:rgba(225,29,72,0.03);border-bottom-color:rgba(225,29,72,0.1)}
[data-theme="girly"] #inboxView .inbox-acct-tab{background:rgba(255,255,255,0.5);color:#6b4a68;border-color:rgba(225,29,72,0.1)}
[data-theme="girly"] #inboxView .inbox-acct-tab:hover{background:rgba(255,255,255,0.7);color:#9f1239;border-color:rgba(225,29,72,0.2)}
[data-theme="girly"] #inboxView .inbox-acct-tab.active{color:#e11d48;background:rgba(225,29,72,0.1);border-color:rgba(225,29,72,0.3)}
[data-theme="girly"] #inboxView .inbox-acct-add{border-color:rgba(225,29,72,0.15);color:#9f1239}
[data-theme="girly"] #inboxView .inbox-acct-add:hover{border-color:#e11d48;color:#e11d48;background:rgba(225,29,72,0.06)}
[data-theme="girly"] #inboxView .inbox-acct-remove:hover{color:#e11d48}
.inbox-toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 20px;border-bottom:1px solid var(--pb-border);font-size:11px}
.inbox-toolbar-left{display:flex;align-items:center;gap:8px;color:var(--pb-text-dim)}
.inbox-status-dot{width:6px;height:6px;border-radius:50%;background:var(--pb-green)}
.inbox-toolbar-right{display:flex;align-items:center;gap:8px}
.inbox-sync-btn{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:5px;border:1px solid var(--pb-border);background:transparent;color:var(--pb-text-muted);font-size:10px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .15s}
.inbox-sync-btn:hover{border-color:var(--pb-blue);color:var(--pb-blue)}
.inbox-sync-btn svg{stroke:currentColor;fill:none;stroke-width:2}
.inbox-filter{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:5px;color:var(--pb-text-muted);font-size:10px;padding:4px 8px;font-family:inherit;cursor:pointer}
.inbox-list{flex:1;overflow-y:auto}
.inbox-item{display:flex;align-items:flex-start;gap:10px;padding:12px 20px;border-bottom:1px solid rgba(255,255,255,0.03);cursor:pointer;transition:background .15s}
.inbox-item:hover{background:rgba(255,255,255,0.02)}
.inbox-item.unread{background:rgba(42,147,193,0.04)}
.inbox-item.unread .inbox-item-from{font-weight:700;color:var(--pb-text)}
.inbox-item.unread .inbox-item-subject{font-weight:600;color:var(--pb-text)}
.inbox-item-check{padding-top:2px}
.inbox-item-check input{accent-color:var(--pb-blue)}
.inbox-item-flag{padding-top:2px;cursor:pointer;color:var(--pb-text-dim);transition:color .15s}
.inbox-item-flag svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.inbox-item-flag:hover{color:var(--pb-yellow)}
.inbox-item-flag.flagged{color:var(--pb-yellow)}
.inbox-item-flag.flagged svg{fill:var(--pb-yellow)}
.inbox-item-body{flex:1;min-width:0}
.inbox-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.inbox-item-from{font-size:12px;font-weight:500;color:var(--pb-text-muted)}
.inbox-item-time{font-size:10px;color:var(--pb-text-dim);flex-shrink:0}
.inbox-item-subject{font-size:12px;color:var(--pb-text-muted);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox-item-preview{font-size:11px;color:var(--pb-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-theme="light"] .inbox-item.unread{background:rgba(42,147,193,0.06)}
[data-theme="light"] .inbox-item:hover{background:rgba(0,0,0,0.02)}
[data-theme="light"] .inbox-toolbar{border-color:rgba(0,0,0,0.08)}
[data-theme="light"] .inbox-item{border-color:rgba(0,0,0,0.05)}
[data-theme="light"] .chat-subtabs{background:rgba(0,0,0,0.04)}
[data-theme="girly"] .inbox-item.unread{background:rgba(225,29,72,0.06)}
[data-theme="girly"] .inbox-item:hover{background:rgba(0,0,0,0.02)}
[data-theme="girly"] .chat-subtabs{background:rgba(0,0,0,0.04)}
[data-theme="girly"] .chat-subtab.active{color:#e11d48;background:rgba(225,29,72,0.15)}
[data-theme="light"] .cc-view{background:#e8eef4}
[data-theme="light"] .cc-toolbar{background:rgba(0,0,0,0.03);border-bottom-color:rgba(0,0,0,0.08)}
[data-theme="light"] .cc-msg:hover{background:rgba(0,0,0,0.03)}
[data-theme="light"] .cc-msg-text{color:#1a202c}
[data-theme="light"] .cc-reply-composer{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1)}
[data-theme="girly"] .cc-view{background:#fff1f2}
[data-theme="girly"] .cc-toolbar{background:rgba(225,29,72,0.03);border-bottom-color:rgba(225,29,72,0.08)}
[data-theme="girly"] .cc-channel-pill{background:rgba(225,29,72,0.1);color:#be123c}
[data-theme="girly"] .cc-msg-text .cc-mention{background:rgba(225,29,72,0.15);color:#e11d48}
/* Email detail view */
.email-detail{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.email-detail-header{padding:16px 20px;border-bottom:1px solid var(--pb-border)}
.email-detail-back{display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--pb-text-muted);font-size:12px;font-family:inherit;cursor:pointer;padding:4px 0;margin-bottom:12px;transition:color .15s}
.email-detail-back:hover{color:var(--pb-blue)}
.email-detail-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.email-detail-subject{font-size:16px;font-weight:600;color:var(--pb-text);margin-bottom:10px}
.email-detail-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--pb-text-dim)}
.email-detail-meta strong{color:var(--pb-text-muted);font-weight:600}
.email-detail-body{flex:1;padding:20px;font-size:13px;line-height:1.7;color:var(--pb-text-muted)}
.email-detail-body p{margin-bottom:12px}
.email-detail-actions{display:flex;gap:8px;padding:12px 20px;border-top:1px solid var(--pb-border);background:var(--pb-surface)}
.email-action-btn{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;border:1px solid var(--pb-border);background:transparent;color:var(--pb-text-muted);font-size:11px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .15s}
.email-action-btn:hover{border-color:var(--pb-blue);color:var(--pb-blue)}
.email-action-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.email-action-btn.primary{background:rgba(42,147,193,0.12);border-color:var(--pb-blue);color:var(--pb-blue-light)}
.email-action-btn.primary:hover{background:rgba(42,147,193,0.2)}
.inbox-compose-btn{display:flex;align-items:center;gap:5px;padding:5px 12px;border-radius:5px;border:1px solid var(--pb-blue);background:rgba(42,147,193,0.12);color:var(--pb-blue-light);font-size:10px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.inbox-compose-btn:hover{background:rgba(42,147,193,0.2)}
.inbox-compose-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.email-action-menu{display:none;position:absolute;bottom:100%;left:0;margin-bottom:6px;background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:8px;padding:4px;min-width:160px;box-shadow:var(--pb-shadow);z-index:10}
.email-action-menu.open{display:block}
.email-action-menu button{display:block;width:100%;text-align:left;padding:8px 12px;border:none;background:transparent;color:var(--pb-text-muted);font-size:12px;font-family:inherit;border-radius:5px;cursor:pointer;transition:all .12s}
.email-action-menu button:hover{background:rgba(42,147,193,0.1);color:var(--pb-blue-light)}
[data-theme="light"] .email-action-menu{background:#fff;border-color:rgba(0,0,0,0.1);box-shadow:0 4px 16px rgba(0,0,0,0.1)}
[data-theme="light"] .email-action-menu button:hover{background:rgba(42,147,193,0.08)}
[data-theme="girly"] .email-action-menu{background:#fff;border-color:rgba(225,29,72,0.15)}
[data-theme="girly"] .email-action-menu button:hover{background:rgba(225,29,72,0.08);color:#e11d48}
[data-theme="light"] .email-detail-actions{background:#dce4ed}
[data-theme="light"] .email-detail-header{border-color:rgba(0,0,0,0.08)}
[data-theme="girly"] .email-detail-actions{background:#ffe4e6}
[data-theme="girly"] .email-action-btn.primary{background:rgba(225,29,72,0.12);border-color:#e11d48;color:#e11d48}
[data-theme="girly"] .inbox-compose-btn{border-color:#e11d48;background:rgba(225,29,72,0.12);color:#e11d48}
/* Inbox explicit backgrounds — ensures correct bg regardless of DOM position (e.g. docked-promoted) */
[data-theme="light"] #inboxView{background:#e8eef4}
[data-theme="girly"] #inboxView{background:#fff1f2}
/* Girly inbox item separators (base uses rgba(255,255,255,0.03) which is invisible on rose bg) */
[data-theme="girly"] .inbox-item{border-color:rgba(225,29,72,0.06)}
/* Girly inbox toolbar and email header borders */
[data-theme="girly"] .inbox-toolbar{border-color:rgba(225,29,72,0.1)}
[data-theme="girly"] .email-detail-header{border-color:rgba(225,29,72,0.08)}
/* Light inbox compose button */
[data-theme="light"] .inbox-compose-btn{background:rgba(42,147,193,0.1);color:var(--pb-blue-dark)}
/* Email wizard: label text is rgba(255,255,255,0.6) in dark — fix for light/girly */
[data-theme="light"] .ew-label{color:rgba(0,0,0,0.55)}
[data-theme="girly"] .ew-label{color:#a07a9d}
/* Email wizard: progress dots use rgba(255,255,255,0.1) in dark — fix for light/girly */
[data-theme="light"] .ew-dot{background:rgba(42,80,120,0.15)}
[data-theme="girly"] .ew-dot{background:rgba(225,29,72,0.15)}
.ch-dot{width:6px;height:6px;border-radius:50%;background:var(--pb-orange);box-shadow:0 0 6px rgba(241,66,11,0.4)}
.ch-title{font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;color:var(--pb-text-muted);letter-spacing:0.08em;text-transform:uppercase}
.ch-search{padding:4px 10px;border-radius:5px;border:1px solid var(--pb-border);background:transparent;color:var(--pb-text-dim);font-size:11px;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:4px;transition:var(--transition)}
.ch-search:hover{border-color:var(--pb-blue);color:var(--pb-text-muted)}
.ch-search-active,.ch-search-active:hover{border-color:var(--pb-blue);color:var(--pb-blue);background:rgba(42,147,193,0.12)}
.ch-search svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.poke-btn{padding:5px 14px;border-radius:6px;border:1px solid rgba(42,147,193,0.3);background:rgba(42,147,193,0.08);color:var(--pb-blue-light);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:var(--transition);display:flex;align-items:center;gap:5px}
.poke-btn:hover{background:rgba(42,147,193,0.15);border-color:rgba(42,147,193,0.5)}
.poke-btn svg{width:12px;height:12px;stroke:#facc15;fill:none;stroke-width:2}

/* Topic Filter */
.msg.topic-dimmed{opacity:0.5;transition:opacity 0.2s;border-left:2px solid var(--pb-text-dim)}
.topic-pill{display:inline-block;padding:1px 7px;border-radius:9px;font-size:9px;font-weight:600;letter-spacing:0.02em;margin-left:6px;vertical-align:middle}

/* Topic Selector Pill (composer) */
.topic-selector{display:flex;align-items:center;gap:6px;padding:4px 12px 2px;font-size:11px}
.topic-selector-label{color:var(--pb-text-dim);font-weight:500}
.topic-selector-pill{display:flex;align-items:center;gap:5px;padding:3px 10px;border-radius:12px;border:1px solid var(--pb-border);background:rgba(139,92,246,0.06);color:var(--pb-purple);font-size:11px;font-weight:500;cursor:pointer;transition:var(--transition)}
.topic-selector-pill:hover{border-color:var(--pb-purple);background:rgba(139,92,246,0.1)}
.topic-selector-pill.topic-active{padding:5px 14px;font-size:12px;font-weight:600;border-color:var(--pb-purple);background:rgba(139,92,246,0.18);box-shadow:0 0 10px rgba(139,92,246,0.3);animation:topicPulse 2.5s ease-in-out infinite}
@keyframes topicPulse{0%,100%{box-shadow:0 0 8px rgba(139,92,246,0.25)}50%{box-shadow:0 0 16px rgba(139,92,246,0.5)}}
.topic-selector-pill .ts-dot{width:6px;height:6px;border-radius:50%;background:var(--pb-purple)}
.topic-selector-pill.topic-active .ts-dot{width:8px;height:8px;background:#3fb950}
.topic-selector-pill .ts-x{margin-left:4px;opacity:0.5;font-size:13px;line-height:1}
.topic-selector-pill .ts-x:hover{opacity:1}
.topic-selector-pill.topic-active .ts-x{opacity:0.7;font-size:15px;font-weight:700}
.topic-selector-dropdown{display:none;position:absolute;bottom:calc(100% + 4px);left:12px;width:220px;background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:var(--pb-radius-sm);box-shadow:var(--pb-shadow);z-index:200;overflow:hidden}
.topic-selector-dropdown.show{display:block}
.topic-selector-dropdown .tsd-header{padding:8px 12px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--pb-text-dim);border-bottom:1px solid var(--pb-border)}
.topic-selector-dropdown .tsd-item{padding:7px 12px;font-size:12px;color:var(--pb-text-muted);cursor:pointer;display:flex;align-items:center;gap:8px;transition:background 0.12s}
.topic-selector-dropdown .tsd-item:hover{background:rgba(42,147,193,0.06);color:var(--pb-text)}
.topic-selector-dropdown .tsd-item.active{background:rgba(139,92,246,0.08);color:var(--pb-text);font-weight:500}
.topic-selector-dropdown .tsd-new{padding:8px 12px;border-top:1px solid var(--pb-border);display:flex;align-items:center;gap:6px}
.topic-selector-dropdown .tsd-new input{flex:1;background:transparent;border:1px solid var(--pb-border);border-radius:4px;padding:4px 8px;font-size:11px;color:var(--pb-text);font-family:inherit;outline:none}
.topic-selector-dropdown .tsd-new input:focus{border-color:var(--pb-purple)}
.topic-selector-dropdown .tsd-new button{padding:4px 8px;border:none;border-radius:4px;background:var(--pb-purple);color:#fff;font-size:10px;font-weight:600;cursor:pointer}

/* Messages */
.chat-messages-wrapper{flex:1;position:relative;overflow:hidden;min-height:0;display:flex;flex-direction:column}
.chat-messages{position:relative;z-index:1;flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:16px;min-height:0}
.msg{display:flex;gap:10px;max-width:85%;box-sizing:border-box;min-width:0}
.msg-user{align-self:flex-end;flex-direction:row-reverse}
.msg-ai{align-self:flex-start}
.msg-avatar{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;font-family:'Oswald',sans-serif}
.msg-user .msg-avatar{background:linear-gradient(135deg,rgba(241,66,11,0.15),rgba(42,147,193,0.15));color:var(--pb-blue-light);border:1px solid rgba(42,147,193,0.2)}
.msg-ai .msg-avatar{background:rgba(241,66,11,0.08);color:var(--pb-orange);border:1px solid rgba(241,66,11,0.15)}
.msg-content{display:flex;flex-direction:column;gap:3px;min-width:0;overflow:hidden}
.msg-reply-link{display:block;padding:4px 8px;margin-bottom:2px;border:none;border-left:2px solid var(--pb-blue);background:rgba(42,147,193,0.06);border-radius:0 4px 4px 0;font-size:11px;color:var(--pb-text-dim);cursor:pointer;text-align:left;width:100%;font-family:inherit;line-height:1.4;transition:background 0.15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-reply-link:hover{background:rgba(42,147,193,0.12)}
.msg-reply-link:focus-visible{outline:2px solid var(--pb-blue);outline-offset:1px}
.msg-reply-link .msg-reply-author{font-weight:600;color:var(--pb-text)}
.msg-reply-link.unavailable{cursor:default;opacity:0.5}
.msg-reply-link.unavailable:hover{background:rgba(42,147,193,0.06)}
@keyframes msg-flash{0%{background:rgba(42,147,193,0.2)}100%{background:transparent}}
.msg-highlight-flash{animation:msg-flash 1.5s ease-out}
.msg-bubble{padding:12px 16px;border-radius:var(--pb-radius);font-size:var(--chat-font-size,13px);line-height:1.65;color:var(--pb-text);overflow-wrap:anywhere;word-break:break-word;min-width:0}
.msg-user .msg-bubble{background:rgba(42,147,193,0.08);border:1px solid rgba(42,147,193,0.12);border-bottom-right-radius:4px}
.msg-ai .msg-bubble{background:rgba(17,24,39,0.85);border:1px solid var(--pb-border);border-bottom-left-radius:4px}
.msg-meta{font-size:calc(var(--chat-font-size,13px) - 3px);color:var(--pb-text-dim);padding:0 4px;display:flex;align-items:center;gap:8px}
.msg-user .msg-meta{justify-content:flex-end}
.msg-actions{display:flex;gap:4px;opacity:0;transition:opacity .15s}
.msg:hover .msg-actions{opacity:1}
.msg-action-btn{background:none;border:none;cursor:pointer;padding:2px 5px;border-radius:4px;display:flex;align-items:center;gap:3px;font-size:9px;color:var(--pb-text-dim);font-family:inherit;transition:all .15s}
.msg-action-btn:hover{background:rgba(42,147,193,0.12);color:var(--pb-blue-light)}
.msg-action-btn svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2}
.msg-action-btn.pinned{opacity:1;color:var(--pb-orange)}
.msg-date-sep{text-align:center;font-size:10px;color:var(--pb-text-dim);padding:4px 0;position:relative}
.msg-date-sep::before,.msg-date-sep::after{content:'';position:absolute;top:50%;width:calc(50% - 50px);height:1px;background:var(--pb-border)}
.msg-date-sep::before{left:0}
.msg-date-sep::after{right:0}
.msg-reply-indicator{font-size:10px;color:var(--pb-text-dim);padding:2px 8px;margin-bottom:2px;border-left:2px solid rgba(42,147,193,0.4);font-style:italic}

/* BRAIN STREAM BANNER */
.brain-banner{position:relative;z-index:1;text-align:center;padding:6px 0;font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;background:linear-gradient(90deg,#f1420b,#e0693a,#8a7a72,#4a8da8,#2a93c1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-fill-color:transparent;border-top:1px solid rgba(42,147,193,0.1)}

/* COMPOSER */
.composer{position:relative;z-index:1;padding:8px 20px 6px;background:rgba(10,14,26,0.85)}
.composer-box{display:flex;flex-direction:column;gap:8px;background:var(--pb-surface-2);border:1px solid var(--pb-border);border-radius:var(--pb-radius);padding:12px 14px 8px;transition:border-color .2s}
.composer-box:focus-within{border-color:rgba(42,147,193,0.4)}
.composer-textarea{width:100%;background:none;border:none;outline:none;color:var(--pb-text);font-family:inherit;font-size:14px;line-height:1.5;resize:none;min-height:20px;max-height:120px}
.composer-textarea::placeholder{color:var(--pb-text-dim)}
.composer-toolbar{display:flex;align-items:center;justify-content:space-between}
.composer-tools-left{display:flex;align-items:center;gap:2px}
.composer-tools-right{display:flex;align-items:center;gap:8px}
.composer-divider{width:1px;height:16px;background:var(--pb-border);margin:0 4px}
.c-send-circle{width:32px;height:32px;border-radius:50%;background:var(--pb-blue);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.c-send-circle svg{stroke:#fff;fill:none;stroke-width:2}
.c-send-circle:hover{background:var(--pb-blue-dark);box-shadow:0 2px 12px rgba(42,147,193,0.3)}
.c-send-circle:disabled{opacity:0.5;cursor:not-allowed}
.thinking-dots{display:inline-flex;align-items:center;gap:6px}
.thinking-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(42,147,193,0.2);border-top-color:var(--pb-blue,#2a93c1);border-radius:50%;animation:thinkingSpin 0.8s linear infinite;flex-shrink:0}
@keyframes thinkingSpin{to{transform:rotate(360deg)}}
.thinking-dots span{animation:thinkingDot 1.4s infinite both}
.thinking-dots span:nth-child(2){animation-delay:0.2s}
.thinking-dots span:nth-child(3){animation-delay:0.4s}
@keyframes thinkingDot{0%,80%,100%{opacity:0.3}40%{opacity:1}}
.msg.thinking .msg-bubble{opacity:0.65;font-style:italic;font-size:13px}
.chat-loading{text-align:center;padding:40px 20px;color:var(--pb-text-dim);font-size:13px}
.msg-bubble pre{position:relative;background:rgba(0,0,0,0.3);border-radius:6px;padding:12px;overflow-x:auto;margin:8px 0;max-width:100%;box-sizing:border-box}
.msg-bubble pre code{font-family:'JetBrains Mono','Fira Code',monospace;font-size:12px;line-height:1.5}
.msg-bubble code{background:rgba(0,0,0,0.2);padding:1px 5px;border-radius:3px;font-family:'JetBrains Mono','Fira Code',monospace;font-size:12px}
.msg-bubble pre code{background:transparent;padding:0}
.msg-bubble h1,.msg-bubble h2,.msg-bubble h3,.msg-bubble h4,.msg-bubble h5,.msg-bubble h6{margin:12px 0 6px;font-weight:700}
.msg-bubble h1{font-size:18px}.msg-bubble h2{font-size:16px}.msg-bubble h3{font-size:14px}
.msg-bubble ul{margin:6px 0;padding-left:20px}
.msg-bubble li{margin:2px 0}
.msg-bubble a{color:var(--pb-blue-light);text-decoration:underline}
.msg-bubble p{margin:4px 0}
.composer-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.c-btn{width:30px;height:30px;border-radius:var(--pb-radius-sm);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);background:transparent}
.c-btn svg{width:16px;height:16px;stroke:var(--pb-text-dim);fill:none;stroke-width:1.8}
.c-btn:hover{background:rgba(255,255,255,0.06)}
.c-btn:hover svg{stroke:var(--pb-text)}
.c-btn-active{background:rgba(34,197,94,0.15)}
.c-btn-active svg{stroke:var(--pb-green, #22c55e)}
@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.4)}50%{box-shadow:0 0 0 6px rgba(239,68,68,0)}}
.c-btn-active.c-btn-voice{background:rgba(239,68,68,0.15);animation:mic-pulse 1.5s ease infinite}
.c-btn-active.c-btn-voice svg{stroke:#ef4444}
.c-btn-stack{display:flex;flex-direction:column;gap:3px}
.attach-preview-bar{display:none;flex-direction:column;gap:4px;padding:8px 12px;background:var(--pb-surface-2);border:1px solid var(--pb-border);border-bottom:none;border-radius:var(--pb-radius) var(--pb-radius) 0 0;margin-bottom:-1px}
.attach-preview-bar.active{display:flex}
.attach-preview-item{display:flex;align-items:center;gap:8px;font-size:0.78rem}
.attach-preview-thumb{width:40px;height:40px;border-radius:6px;object-fit:cover;border:1px solid var(--pb-border);flex-shrink:0}
.attach-preview-icon{font-size:1.1rem;flex-shrink:0;width:40px;text-align:center}
.attach-preview-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--pb-text);font-weight:600;font-size:0.75rem}
.attach-preview-size{color:var(--pb-text-dim);font-size:0.7rem;flex-shrink:0}
.attach-preview-remove{background:none;border:none;color:var(--pb-text-dim);cursor:pointer;font-size:1rem;padding:2px 6px;line-height:1;flex-shrink:0;border-radius:4px;transition:color .15s}
.attach-preview-remove:hover{color:var(--pb-text);background:rgba(255,255,255,0.06)}
.msg-inline-img{max-width:300px;border-radius:var(--pb-radius);border:1px solid var(--pb-border);margin-top:6px;display:block;cursor:pointer;transition:opacity .2s}
.msg-inline-img:hover{opacity:0.85}
.c-task-btn{padding:5px 10px;background:transparent;color:var(--pb-blue-light);border:1.5px solid var(--pb-blue);border-radius:var(--pb-radius-sm);font-size:11px;font-weight:700;cursor:pointer;transition:background .15s,box-shadow .15s;letter-spacing:0.04em;white-space:nowrap;font-family:inherit}
.c-task-btn:hover{background:rgba(42,147,193,0.1);box-shadow:0 0 10px rgba(42,147,193,0.15)}
.c-send-btn{background:var(--pb-blue);color:#fff !important;border-color:var(--pb-blue)}
.c-send-btn:hover{background:var(--pb-blue-dark);box-shadow:0 2px 12px rgba(42,147,193,0.3)}
.sched-tasks-section{border-top:2px solid var(--pb-border);margin-top:8px;padding:0}
.sched-tasks-header{display:flex;align-items:center;gap:8px;padding:12px 16px;font-size:12px;font-weight:700;color:var(--pb-blue-light);font-family:'Oswald',sans-serif;letter-spacing:0.06em}
.sched-task-item{padding:10px 16px;border-bottom:1px solid rgba(255,255,255,0.03);transition:background .15s}
.sched-task-item:hover{background:rgba(42,147,193,0.04)}
.sched-task-top{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.sched-task-agent{font-size:11px;font-weight:600;color:var(--pb-blue-light)}
.sched-task-schedule{font-size:10px;color:var(--pb-text-dim);margin-left:auto}
.sched-task-del{background:none;border:none;color:var(--pb-text-dim);cursor:pointer;font-size:11px;padding:2px 6px;border-radius:4px;transition:all .15s;margin-left:6px}
.sched-task-del:hover{background:rgba(241,66,11,0.1);color:var(--pb-orange-light)}
.sched-task-prompt{font-size:12px;color:var(--pb-text);line-height:1.4}

/* Slash command dropdown */
.slash-dropdown{display:none;position:absolute;bottom:100%;left:0;right:0;margin-bottom:8px;background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.4);overflow:hidden;z-index:100}
.slash-dropdown.visible{display:block}
.slash-dropdown-header{padding:10px 16px 6px;font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--pb-text-dim)}
.slash-item{display:flex;align-items:center;gap:12px;padding:8px 16px;cursor:pointer;transition:background .12s}
.slash-item:hover,.slash-item.selected{background:rgba(42,147,193,0.08)}
.slash-item[style*="display: none"]{display:none}
.slash-cmd{font-size:13px;font-weight:600;color:var(--pb-blue-light);min-width:90px}
.slash-desc{font-size:12px;color:var(--pb-text-dim)}
.composer-hint{font-size:11px;color:var(--pb-text-dim);margin-top:6px;padding-left:4px;position:relative;z-index:1}
.composer-hint kbd{padding:1px 5px;border-radius:3px;background:rgba(255,255,255,0.06);border:1px solid var(--pb-border);font-family:inherit;font-size:10px;color:var(--pb-text-muted)}

/* FILES PANEL */
.files-area{display:none;flex-direction:column;flex:1;overflow:hidden;z-index:1;position:relative;background:rgba(10,14,26,0.92)}
.files-area.visible{display:flex}
.files-header{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-bottom:1px solid rgba(255,255,255,0.04);background:rgba(10,14,26,0.96)}
.files-header-left{display:flex;align-items:center;gap:12px}
.files-header-title{font-family:'Oswald',sans-serif;font-size:14px;font-weight:700;color:var(--pb-text-muted);letter-spacing:0.08em;text-transform:uppercase}
.files-search{display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.025);font-size:11px;color:var(--pb-text-dim);min-width:220px;transition:all .2s}
.files-search:focus-within{border-color:rgba(42,147,193,0.4);box-shadow:0 0 0 3px rgba(42,147,193,0.08);background:rgba(255,255,255,0.035)}
.files-search input{background:none;border:none;outline:none;color:var(--pb-text);font-family:inherit;font-size:11px;width:100%}
.files-search input::placeholder{color:var(--pb-text-dim)}
.files-search svg{width:13px;height:13px;stroke:var(--pb-text-dim);fill:none;stroke-width:2;flex-shrink:0}
.files-toolbar{display:flex;gap:6px;align-items:center}
.ft-btn{padding:7px 14px;border-radius:8px;font-size:11px;font-weight:500;color:var(--pb-text-dim);background:transparent;border:1px solid rgba(255,255,255,0.06);cursor:pointer;font-family:inherit;transition:all .2s;display:flex;align-items:center;gap:5px}
.ft-btn:hover{color:var(--pb-text);border-color:rgba(42,147,193,0.4);box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.ft-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.ft-btn.primary{background:rgba(42,147,193,0.1);border-color:rgba(42,147,193,0.3);color:var(--pb-blue-light)}
.ft-btn.primary:hover{background:rgba(42,147,193,0.18);box-shadow:0 2px 12px rgba(42,147,193,0.15)}
.view-toggle{display:flex;border:1px solid rgba(255,255,255,0.06);border-radius:8px;overflow:hidden;margin-left:6px}
.view-toggle-btn{width:30px;height:30px;border:none;background:transparent;color:var(--pb-text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.view-toggle-btn:first-child{border-right:1px solid rgba(255,255,255,0.06)}
.view-toggle-btn.active{background:rgba(42,147,193,0.12);color:var(--pb-blue-light)}
.view-toggle-btn:hover:not(.active){background:rgba(255,255,255,0.03);color:var(--pb-text-muted)}
.view-toggle-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}

.files-body{flex:1;overflow-y:auto;padding:0;display:flex;gap:0}

/* Sidebar */
.files-tree{width:220px;flex-shrink:0;background:rgba(8,11,22,0.6);border-right:1px solid rgba(255,255,255,0.04);display:flex;flex-direction:column;padding:16px 12px;overflow-y:auto;transition:width .25s ease}
.files-tree.collapsed{width:56px;padding:16px 8px}
.files-tree.collapsed .ft-label,.files-tree.collapsed .ft-count,.files-tree.collapsed .ft-sec-title span,
.files-tree.collapsed .f-storage,.files-tree.collapsed .ft-sec-chevron{display:none}
.files-tree.collapsed .ft-sec-title{justify-content:center;padding:6px}
.files-tree.collapsed .ft-item{justify-content:center;padding:8px}
.files-tree.collapsed .ft-item svg{margin:0}
.ft-collapse-btn{display:flex;align-items:center;justify-content:flex-end;margin-bottom:14px;padding:0 4px}
.ft-collapse-btn button{width:28px;height:28px;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.03);color:var(--pb-text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:14px}
.ft-collapse-btn button:hover{background:rgba(255,255,255,0.06);color:var(--pb-text)}
.files-tree.collapsed .ft-collapse-btn{justify-content:center}
.files-tree.collapsed .ft-collapse-btn button{transform:rotate(180deg)}

/* Section groups */
.ft-sec{margin-bottom:8px}
.ft-sec-title{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;cursor:pointer;user-select:none}
.ft-sec-title span{font-size:10px;font-weight:700;color:rgba(255,255,255,0.25);text-transform:uppercase;letter-spacing:0.1em}
.ft-sec-chevron{width:14px;height:14px;stroke:rgba(255,255,255,0.2);fill:none;stroke-width:2;transition:transform .2s}
.ft-sec.closed .ft-sec-chevron{transform:rotate(-90deg)}
.ft-sec.closed .ft-sec-items{display:none}
.ft-sec-items{display:flex;flex-direction:column;gap:2px;margin-top:4px}

/* Sidebar items */
.ft-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size:12px;font-weight:500;color:var(--pb-text-dim);cursor:pointer;transition:all .15s;white-space:nowrap;overflow:hidden}
.ft-item:hover{color:var(--pb-text-muted);background:rgba(255,255,255,0.03)}
.ft-item.active{color:var(--pb-text);background:rgba(42,147,193,0.1)}
.ft-item svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0}
.ft-item.active svg{stroke:var(--pb-blue-light)}
.ft-label{flex:1;overflow:hidden;text-overflow:ellipsis}
.ft-count{margin-left:auto;font-size:9px;color:var(--pb-text-dim);background:rgba(255,255,255,0.05);padding:2px 7px;border-radius:10px;font-weight:500;flex-shrink:0}

.ft-divider{height:1px;background:rgba(255,255,255,0.03);margin:8px 10px}
.f-storage{padding:12px 10px;margin-top:auto}
.f-storage-label{font-size:10px;color:var(--pb-text-dim);margin-bottom:6px;display:flex;justify-content:space-between}
.f-storage-track{height:4px;border-radius:3px;background:rgba(255,255,255,0.04);overflow:hidden}
.f-storage-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--pb-blue),var(--pb-blue-light));width:34%}

.files-content{flex:1;min-width:0;overflow-y:auto;padding:20px 24px}
.fs-section{margin-bottom:28px}
.fs-header{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;color:var(--pb-text-muted);margin-bottom:14px;text-transform:uppercase;letter-spacing:0.06em}
.fs-header span:first-of-type{flex:1}
.fs-count{font-size:9px;color:var(--pb-text-dim);background:rgba(255,255,255,0.05);padding:2px 8px;border-radius:10px;font-weight:500}
.files-bc{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--pb-text-dim);margin-bottom:6px}
.files-bc span{cursor:pointer;transition:color .15s}.files-bc span:hover{color:var(--pb-text-muted)}
.files-bc .bc-sep{cursor:default;color:rgba(255,255,255,0.15)}.files-bc .bc-cur{color:var(--pb-text);font-weight:600}
.files-info-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-size:10px;color:var(--pb-text-dim)}

/* Grid view */
.files-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:12px}
.files-grid.hidden{display:none}
#filesGridView.hidden{display:none}
.f-card{padding:18px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.015);cursor:pointer;transition:all .25s ease;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;backdrop-filter:blur(4px)}
.f-card:hover{border-color:rgba(42,147,193,0.25);background:rgba(42,147,193,0.04);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.15),0 2px 8px rgba(42,147,193,0.06)}
.f-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;position:relative;backdrop-filter:blur(8px)}
.f-icon svg{width:22px;height:22px;stroke-width:1.5;fill:none}
.f-icon.fc-pdf{background:rgba(241,66,11,0.1);box-shadow:0 2px 8px rgba(241,66,11,0.08)}.f-icon.fc-pdf svg{stroke:var(--pb-orange-light)}
.f-icon.fc-doc{background:rgba(61,184,245,0.1);box-shadow:0 2px 8px rgba(61,184,245,0.08)}.f-icon.fc-doc svg{stroke:var(--pb-blue-light)}
.f-icon.fc-img{background:rgba(34,197,94,0.1);box-shadow:0 2px 8px rgba(34,197,94,0.08)}.f-icon.fc-img svg{stroke:var(--pb-green)}
.f-icon.fc-code{background:rgba(139,92,246,0.1);box-shadow:0 2px 8px rgba(139,92,246,0.08)}.f-icon.fc-code svg{stroke:var(--pb-purple)}
.f-icon.fc-csv{background:rgba(245,158,11,0.1);box-shadow:0 2px 8px rgba(245,158,11,0.08)}.f-icon.fc-csv svg{stroke:var(--pb-yellow)}
.f-icon.fc-md{background:rgba(99,102,241,0.1);box-shadow:0 2px 8px rgba(99,102,241,0.08)}.f-icon.fc-md svg{stroke:#818cf8}
.f-icon.fc-json{background:rgba(234,179,8,0.1);box-shadow:0 2px 8px rgba(234,179,8,0.08)}.f-icon.fc-json svg{stroke:#facc15}
.f-icon.fc-html{background:rgba(249,115,22,0.1);box-shadow:0 2px 8px rgba(249,115,22,0.08)}.f-icon.fc-html svg{stroke:#fb923c}
.f-icon.fc-xlsx{background:rgba(34,197,94,0.1);box-shadow:0 2px 8px rgba(34,197,94,0.08)}.f-icon.fc-xlsx svg{stroke:var(--pb-green)}
.f-name{font-size:11px;font-weight:600;color:var(--pb-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;letter-spacing:-0.01em}
.f-meta{font-size:9px;color:var(--pb-text-dim);letter-spacing:0.02em}

/* List view */
.files-list{display:flex;flex-direction:column}
.files-list.hidden{display:none}
.files-list-header{display:grid;grid-template-columns:1fr 80px 80px 60px;gap:8px;padding:8px 14px;font-size:9px;font-weight:600;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.08em;border-bottom:1px solid rgba(255,255,255,0.06)}
.fl-row{display:grid;grid-template-columns:1fr 80px 80px 60px;gap:8px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.02);cursor:pointer;transition:all .15s;align-items:center;border-radius:8px;margin-bottom:1px;position:relative}
.fl-row:hover{background:rgba(42,147,193,0.04);box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.fl-row:nth-child(even){background:rgba(255,255,255,0.008)}
.fl-row:nth-child(even):hover{background:rgba(42,147,193,0.04)}
.fl-name{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:500;color:var(--pb-text);min-width:0}
.fl-name .f-icon{width:32px;height:32px;border-radius:8px;flex-shrink:0}
.fl-name .f-icon svg{width:17px;height:17px}
.fl-name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-cell{font-size:11px;color:var(--pb-text-dim);font-variant-numeric:tabular-nums}

/* MODAL — dead center overlay */
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;background:rgba(0,0,0,0.82);backdrop-filter:blur(10px)}
.modal-overlay.open{display:block}
.modal{background:#0f111c;border:1px solid rgba(42,147,193,0.25);border-radius:20px;width:90%;max-width:720px;padding:40px;overflow-y:auto;max-height:80vh;box-shadow:0 32px 100px rgba(0,0,0,0.7),0 0 60px rgba(42,147,193,0.08);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10000}
.modal h2{font-family:'Oswald',sans-serif;font-size:24px;font-weight:700;color:#fff;margin-bottom:24px;letter-spacing:0.04em}
.modal label{display:block;font-size:12px;font-weight:700;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;margin-top:18px}
.modal label:first-of-type{margin-top:0}
.modal input[type="text"],.modal input[type="date"],.modal textarea,.modal select{width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:10px;padding:12px 16px;color:#fff;font-size:14px;font-family:inherit;outline:none;transition:border-color .2s}
.modal input:focus,.modal textarea:focus,.modal select:focus{border-color:var(--pb-blue)}
.modal select{cursor:pointer}.modal select option{background:#0f111c;color:#fff}
.modal textarea{resize:vertical;min-height:80px}
.radio-row{display:flex;gap:12px;margin-top:4px}
.radio-row label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--pb-text-muted);text-transform:none;letter-spacing:0;margin:0;cursor:pointer;font-weight:500}
.radio-row input[type="radio"]{accent-color:var(--pb-blue);width:16px;height:16px}
.slider-wrap{display:flex;align-items:center;gap:12px;margin-top:4px}
.slider-wrap input[type="range"]{flex:1;accent-color:var(--pb-blue)}.slider-wrap .slider-val{font-size:14px;font-weight:700;color:var(--pb-text);min-width:40px;text-align:right}
.modal-actions{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.btn-primary{padding:12px 28px;background:linear-gradient(135deg,#2a93c1,#1a6f94);border:none;border-radius:10px;color:#fff;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;transition:opacity .2s}
.btn-primary:hover{opacity:0.85}
.btn-secondary{padding:12px 28px;background:rgba(255,255,255,0.06);border:1px solid var(--pb-border);border-radius:10px;color:var(--pb-text-muted);font-weight:600;font-size:14px;cursor:pointer;font-family:inherit}
.btn-secondary:hover{background:rgba(255,255,255,0.1)}
.btn-danger{padding:12px 28px;background:rgba(241,66,11,0.1);border:1px solid rgba(241,66,11,0.3);border-radius:10px;color:var(--pb-orange-light);font-weight:600;font-size:14px;cursor:pointer;font-family:inherit;margin-left:auto}

/* NOTIFICATION BELL */
.tn-notif{position:relative}
.tn-notif .notif-badge{position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:var(--pb-orange);color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--pb-bg);pointer-events:none}
.notif-panel{display:none;position:absolute;top:100%;right:0;margin-top:8px;width:320px;background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,0.5);z-index:200;overflow:hidden}
.notif-panel.open{display:block}
.notif-panel-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--pb-border)}
.notif-panel-title{font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;color:var(--pb-text-muted);text-transform:uppercase;letter-spacing:0.08em}
.notif-clear{font-size:10px;color:var(--pb-blue-light);cursor:pointer;background:none;border:none;font-family:inherit}
.notif-list{max-height:280px;overflow-y:auto}
.notif-item{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.03);cursor:pointer;transition:background .15s}
.notif-item:hover{background:rgba(42,147,193,0.06)}
.notif-item.notif-unread{background:rgba(42,147,193,0.05)}
.notif-item.notif-unread .notif-item-title{font-weight:600}
.notif-item-icon{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--pb-surface);border-radius:8px;color:var(--pb-text-dim)}
.notif-item-content{flex:1;min-width:0}
.notif-item-title{font-size:12px;color:var(--pb-text);margin-bottom:2px}
.notif-item-body{font-size:11px;color:var(--pb-text-dim);white-space:pre-line;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.notif-item-time{font-size:10px;color:var(--pb-text-dim);margin-top:3px;opacity:0.7}
.notif-dot{width:6px;height:6px;border-radius:50%;margin-top:5px;flex-shrink:0}
.notif-dot.blue{background:var(--pb-blue)}.notif-dot.orange{background:var(--pb-orange)}.notif-dot.green{background:var(--pb-green)}
.notif-body{flex:1;min-width:0}
.notif-text{font-size:12px;color:var(--pb-text);line-height:1.4}
.notif-text strong{font-weight:600}
.notif-time{font-size:10px;color:var(--pb-text-dim);margin-top:2px}

/* UPDATE NOTIFICATION */
.tn-update{position:relative}
.tn-update .update-badge{position:absolute;top:1px;right:1px;width:14px;height:14px;border-radius:50%;background:var(--pb-green);color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--pb-bg);animation:updatePulse 2s ease infinite;cursor:pointer;pointer-events:auto}
@keyframes updatePulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.4)}50%{box-shadow:0 0 0 6px rgba(34,197,94,0)}}
.update-panel{display:none;position:absolute;top:100%;right:0;margin-top:8px;width:340px;background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,0.5);z-index:200;overflow:hidden}
.update-panel.open{display:block}
.update-panel-header{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--pb-border)}
.update-panel-header svg{width:16px;height:16px;stroke:var(--pb-green);fill:none;stroke-width:2}
.update-panel-title{font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;color:var(--pb-text-muted);text-transform:uppercase;letter-spacing:0.08em}
.update-panel-ver{margin-left:auto;font-size:10px;color:var(--pb-green);font-weight:700;background:rgba(34,197,94,0.1);padding:2px 8px;border-radius:4px}
.update-panel-body{padding:14px}
.update-panel-current{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.update-panel-current-label{font-size:10px;color:var(--pb-text-dim)}
.update-panel-current-ver{font-size:10px;color:var(--pb-text-muted);font-weight:600}
.update-changelog{margin-bottom:14px}
.update-changelog-title{font-size:10px;font-weight:700;color:var(--pb-text-muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px}
.update-changelog-list{list-style:none;padding:0;margin:0}
.update-changelog-list li{font-size:11px;color:var(--pb-text-dim);padding:3px 0;display:flex;align-items:flex-start;gap:6px;line-height:1.4}
.update-changelog-list li::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--pb-blue);flex-shrink:0;margin-top:5px}
.update-changelog-list li.feat::before{background:var(--pb-green)}
.update-changelog-list li.fix::before{background:var(--pb-yellow)}
.update-changelog-list li.breaking::before{background:var(--pb-orange)}
.update-panel-actions{display:flex;gap:8px}
.update-install-btn{flex:1;padding:8px 16px;border-radius:8px;border:none;background:rgba(34,197,94,0.15);color:var(--pb-green);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px}
.update-install-btn:hover{background:rgba(34,197,94,0.25)}
.update-install-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.update-dismiss-btn{padding:8px 14px;border-radius:8px;border:1px solid var(--pb-border);background:transparent;color:var(--pb-text-dim);font-size:11px;cursor:pointer;font-family:inherit;transition:all .15s}
.update-dismiss-btn:hover{border-color:var(--pb-blue);color:var(--pb-text)}
.update-panel-note{font-size:9px;color:var(--pb-text-dim);margin-top:10px;line-height:1.4;text-align:center}
.update-check-btn{width:100%;padding:8px 16px;border-radius:8px;border:1px solid var(--pb-border);background:rgba(59,130,246,0.1);color:var(--pb-blue);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;margin-top:8px}
.update-check-btn:hover{background:rgba(59,130,246,0.2);border-color:var(--pb-blue)}
.update-check-btn:disabled{opacity:0.5;cursor:not-allowed}
.update-release-notes{max-height:260px;overflow-y:auto;margin-top:8px;border-top:1px solid var(--pb-border);padding-top:8px}
.update-release-notes h4{font-size:12px;font-weight:700;color:var(--pb-text);margin:0 0 4px 0}
.update-release-notes .release-date{font-size:10px;color:var(--pb-text-dim);margin-bottom:6px}
.update-release-notes ul{margin:0 0 8px 0;padding-left:16px;list-style:disc}
.update-release-notes li{font-size:10px;color:var(--pb-text-muted);line-height:1.5;margin-bottom:2px}

/* DASHBOARD PANEL */
.dash-area{display:none}
.dash-header{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:1px solid var(--pb-border);background:rgba(10,14,26,0.95)}
.dash-header-title{font-family:'Oswald',sans-serif;font-size:14px;font-weight:700;color:var(--pb-text-muted);letter-spacing:0.08em;text-transform:uppercase}
.dash-header-sub{font-size:11px;color:var(--pb-text-dim)}
.dash-body{padding:16px 20px;display:flex;flex-direction:column;gap:16px}
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dash-stat{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.dash-stat-label{font-size:10px;font-weight:600;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.08em}
.dash-stat-row{display:flex;align-items:baseline;gap:6px}
.dash-stat-val{font-family:'Oswald',sans-serif;font-size:22px;font-weight:700}
.dash-stat-val.blue{color:var(--pb-blue-light)}.dash-stat-val.green{color:var(--pb-green)}.dash-stat-val.orange{color:var(--pb-orange-light)}.dash-stat-val.yellow{color:var(--pb-yellow)}
.dash-stat-delta{font-size:10px;font-weight:600;padding:1px 5px;border-radius:4px}
.dash-stat-delta.up{background:rgba(34,197,94,0.1);color:var(--pb-green)}
.dash-stat-delta.down{background:rgba(241,66,11,0.1);color:var(--pb-orange-light)}
.dash-stat-sub{font-size:10px;color:var(--pb-text-dim)}
.dash-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dash-card{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:12px;overflow:hidden}
.dash-card-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--pb-border)}
.dash-card-title{font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;color:var(--pb-text-muted);text-transform:uppercase;letter-spacing:0.06em}
.dash-card-link{font-size:10px;color:var(--pb-blue-light);cursor:pointer;background:none;border:none;font-family:inherit;text-decoration:none}
.dash-card-body{padding:10px 14px}
.project-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.02)}
.project-row:last-child{border:none}
.project-status{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.project-status.green{background:var(--pb-green)}.project-status.blue{background:var(--pb-blue)}.project-status.yellow{background:var(--pb-yellow)}.project-status.orange{background:var(--pb-orange)}
.project-info{flex:1;min-width:0}
.project-name{font-size:12px;font-weight:600;color:var(--pb-text)}
.project-detail{font-size:10px;color:var(--pb-text-dim)}
.project-pct{font-family:'Oswald',sans-serif;font-size:13px;font-weight:600;color:var(--pb-text-muted)}
.project-bar{width:60px;height:4px;border-radius:2px;background:rgba(255,255,255,0.04);overflow:hidden}
.project-bar-fill{height:100%;border-radius:2px;background:var(--pb-blue)}
.agent-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,0.02)}
.agent-row:last-child{border:none}
.agent-row-dot{width:6px;height:6px;border-radius:50%}
.agent-row-dot.on{background:var(--pb-green);box-shadow:0 0 4px rgba(34,197,94,0.4)}
.agent-row-dot.off{background:var(--pb-text-dim)}
.agent-row-name{font-size:12px;font-weight:500;color:var(--pb-text);flex:1}
.agent-row-task{font-size:10px;color:var(--pb-text-dim);max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* TASKS PANEL — SCHEDULED TASK LIST */
.tasks-area{display:none;flex-direction:column;flex:1;overflow:hidden;z-index:1;position:relative;background:rgba(10,14,26,0.92)}
.tasks-area.visible{display:flex}
.tasks-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--pb-border);background:rgba(10,14,26,0.95);flex-shrink:0}
.tasks-header-left{display:flex;align-items:center;gap:12px}
.tasks-header-title{font-family:'Oswald',sans-serif;font-size:14px;font-weight:700;color:var(--pb-blue-light);letter-spacing:0.08em;text-transform:uppercase}
.tasks-filter-pills{display:flex;gap:4px}
.tasks-pill{padding:4px 10px;border-radius:20px;font-size:10px;font-weight:600;border:1px solid var(--pb-border);background:transparent;color:var(--pb-text-dim);cursor:pointer;font-family:inherit;transition:var(--transition)}
.tasks-pill:hover{border-color:var(--pb-blue);color:var(--pb-text-muted)}
.tasks-pill.active{background:rgba(42,147,193,0.1);border-color:rgba(42,147,193,0.3);color:var(--pb-blue-light)}
/* Summary strip */
.tasks-summary-strip{display:flex;gap:16px;padding:10px 20px;border-bottom:1px solid var(--pb-border);flex-shrink:0;background:rgba(10,14,26,0.95)}
.tasks-summary-chip{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--pb-text-dim)}
.tasks-summary-chip strong{font-family:'Oswald',sans-serif;font-size:14px;font-weight:700;color:var(--pb-text)}
.tasks-summary-chip .ts-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.ts-dot.active{background:var(--pb-green)}.ts-dot.pending{background:var(--pb-yellow)}.ts-dot.completed{background:var(--pb-text-dim)}.ts-dot.failed{background:var(--pb-orange)}
/* Task list */
.tasks-list-wrap{flex:1;overflow-y:auto;padding:0 20px 20px}
.tasks-list-table{width:100%;border-collapse:collapse}
.tasks-list-table thead th{font-size:9px;font-weight:700;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.06em;text-align:left;padding:10px 10px;border-bottom:1px solid var(--pb-border);position:sticky;top:0;background:rgba(10,14,26,0.98);z-index:1}
.tasks-list-table tbody tr{border-bottom:1px solid rgba(255,255,255,0.03);cursor:pointer;transition:background .1s}
.tasks-list-table tbody tr:hover{background:rgba(42,147,193,0.04)}
.tasks-list-table td{padding:10px 10px;vertical-align:middle}
.tl-task-cell{display:flex;flex-direction:column;gap:2px}
.tl-task-name{font-size:12px;font-weight:600;color:var(--pb-text)}
.tl-task-desc{font-size:10px;color:var(--pb-text-dim);line-height:1.3}
.tl-agent{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--pb-text-muted)}
.tl-agent-dot{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:700;font-family:'Oswald',sans-serif}
.tl-agent-dot.human{background:rgba(42,147,193,0.12);color:var(--pb-blue-light);border:1px solid rgba(42,147,193,0.2)}
.tl-agent-dot.ai{background:rgba(241,66,11,0.08);color:var(--pb-orange);border:1px solid rgba(241,66,11,0.15)}
.tl-schedule{font-size:10px;color:var(--pb-text-dim);display:flex;align-items:center;gap:4px}
.tl-schedule svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
.tl-status-badge{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;padding:3px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:0.03em}
.tl-status-badge.active{background:rgba(34,197,94,0.1);color:var(--pb-green)}
.tl-status-badge.pending{background:rgba(245,158,11,0.1);color:var(--pb-yellow)}
.tl-status-badge.completed{background:rgba(255,255,255,0.04);color:var(--pb-text-dim)}
.tl-status-badge.failed{background:rgba(241,66,11,0.08);color:var(--pb-orange)}
.tl-priority{font-size:8px;font-weight:700;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:0.04em}
.tl-priority.high{background:rgba(245,158,11,0.1);color:var(--pb-yellow)}
.tl-priority.medium{background:rgba(42,147,193,0.1);color:var(--pb-blue-light)}
.tl-priority.low{background:rgba(255,255,255,0.04);color:var(--pb-text-dim)}
.tl-lastrun{font-size:10px;color:var(--pb-text-dim)}
.tl-actions{display:flex;gap:4px}
.tl-action-btn{width:26px;height:26px;border-radius:6px;border:1px solid var(--pb-border);background:transparent;color:var(--pb-text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.tl-action-btn:hover{border-color:var(--pb-blue);color:var(--pb-blue-light);background:rgba(42,147,193,0.06)}
.tl-action-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.tl-action-btn.danger:hover{border-color:var(--pb-orange);color:var(--pb-orange);background:rgba(241,66,11,0.06)}
/* Empty state */
.tasks-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--pb-text-dim);text-align:center}
.tasks-empty-icon{font-size:36px;margin-bottom:12px;opacity:0.4}
.tasks-empty-title{font-family:'Oswald',sans-serif;font-size:14px;color:var(--pb-text-muted);margin-bottom:6px}
.tasks-empty-sub{font-size:11px;line-height:1.5;max-width:300px}

/* EARN MORE SIDEBAR HIGHLIGHT */
.sidebar-version{padding:8px 16px;font-size:10px;color:var(--pb-text-dim);opacity:0.5;text-align:center;margin-top:auto}
.sidebar-earn{color:var(--pb-green) !important;position:relative}
.sidebar-earn::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pb-green);border-radius:0 2px 2px 0;opacity:0.6}
.sidebar-earn:hover{background:rgba(34,197,94,0.08) !important;color:#4ade80 !important}
.sidebar-earn svg{stroke:var(--pb-green)}

/* TEAMS PANEL */
.teams-area{display:none;flex-direction:column;flex:1;overflow-y:auto;z-index:1;position:relative;background:rgba(10,14,26,0.92)}
.teams-area.visible{display:flex}
.teams-header{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:1px solid var(--pb-border);background:rgba(10,14,26,0.95)}
.teams-header-title{font-family:'Oswald',sans-serif;font-size:14px;font-weight:700;color:var(--pb-blue-light);letter-spacing:0.08em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.teams-header-title svg{width:18px;height:18px;stroke:var(--pb-blue);fill:none;stroke-width:1.8}
.teams-tab-bar{display:flex;gap:4px;padding:8px 16px 0;border-bottom:1px solid var(--pb-border);overflow-x:auto;flex-shrink:0;background:rgba(10,14,26,0.95)}
.teams-tab{padding:6px 14px;font-size:11px;font-family:inherit;background:none;border:1px solid var(--pb-border);border-bottom:none;border-radius:6px 6px 0 0;color:var(--pb-text-dim);cursor:pointer;white-space:nowrap;transition:all .15s}
.teams-tab.active{background:var(--pb-surface);color:var(--pb-blue-light);border-color:var(--pb-blue)}
.teams-tab:hover:not(.active){color:var(--pb-text)}
.teams-tab .pane-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px}
.teams-tab .pane-dot.live{background:var(--pb-green);box-shadow:0 0 4px rgba(34,197,94,0.5)}
.teams-tab .pane-dot.idle{background:var(--pb-yellow)}
.teams-pane-content{flex:1;overflow-y:auto;font-family:'JetBrains Mono',monospace;font-size:12px;white-space:pre-wrap;word-break:break-all;padding:14px 16px;background:rgba(0,0,0,0.3);color:#4ade80;min-height:200px;line-height:1.5}
.teams-inject-bar{display:flex;gap:8px;padding:10px 16px;background:rgba(10,14,26,0.95);border-top:1px solid var(--pb-border)}
.teams-inject-bar input{flex:1;background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:6px;color:var(--pb-text);font-family:inherit;font-size:12px;padding:8px 12px;outline:none}
.teams-inject-bar input:focus{border-color:var(--pb-blue)}
.teams-inject-btn{padding:8px 18px;background:var(--pb-blue);color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;letter-spacing:0.05em}
.teams-inject-btn:hover{background:#3b9fd1}
.teams-hotkeys{display:flex;gap:6px;padding:6px 16px 8px;background:rgba(10,14,26,0.95);flex-wrap:wrap;align-items:center}
.hk{padding:3px 8px;font-size:10px;font-family:'JetBrains Mono',monospace;font-weight:700;border:1px solid rgba(74,222,128,0.25);border-radius:4px;color:#4ade80;cursor:pointer;transition:all .15s;letter-spacing:0.03em}
.hk:hover{background:rgba(74,222,128,0.1);border-color:rgba(74,222,128,0.5)}
.hk.red{color:#f87171;border-color:rgba(248,113,113,0.25)}
.hk.red:hover{background:rgba(248,113,113,0.1);border-color:rgba(248,113,113,0.5)}
.hk.yellow{color:#facc15;border-color:rgba(250,204,21,0.25)}
.hk.yellow:hover{background:rgba(250,204,21,0.1);border-color:rgba(250,204,21,0.5)}
.hk.green{color:#4ade80;border-color:rgba(74,222,128,0.35)}
.hk:active{transform:scale(0.92);filter:brightness(1.3)}

/* COMPACT BANNER */
.compact-banner{display:none;width:100%;padding:8px 20px;font-size:12px;font-weight:700;text-align:center;background:linear-gradient(90deg,#7f1d1d,#b91c1c,#7f1d1d);color:#fca5a5;animation:compactPulse 1.5s ease-in-out infinite alternate;letter-spacing:0.05em;z-index:50}
.compact-banner.active{display:block}
@keyframes compactPulse{from{opacity:0.7}to{opacity:1}}
@keyframes ctxFlash{from{opacity:0.5}to{opacity:1}}

/* PAYMENTS PANEL */
.payments-area{display:none;flex-direction:column;flex:1;overflow-y:auto;z-index:1;position:relative;background:rgba(10,14,26,0.92);padding:24px}
.payments-area.visible{display:flex}
.payments-header{font-family:'Oswald',sans-serif;font-size:14px;font-weight:700;color:var(--pb-text);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:20px;display:flex;align-items:center;gap:8px}
.payments-header svg{width:18px;height:18px;stroke:var(--pb-blue);fill:none;stroke-width:1.8}
.pay-current{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:12px;padding:20px 24px;margin-bottom:20px}
.pay-current-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:12px}
.pay-plan-badge{font-family:'Oswald',sans-serif;font-size:20px;font-weight:700;color:var(--pb-blue-light);display:flex;align-items:center;gap:10px}
.pay-plan-tier{font-size:10px;padding:3px 10px;border-radius:20px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em}
.pay-plan-tier.starter{background:rgba(42,147,193,0.12);color:var(--pb-blue-light)}
.pay-plan-tier.pro{background:rgba(241,66,11,0.12);color:var(--pb-orange)}
.pay-plan-tier.max{background:rgba(139,92,246,0.12);color:var(--pb-purple)}
.pay-price{font-family:'Oswald',sans-serif;font-size:28px;font-weight:700;color:var(--pb-text)}
.pay-price span{font-size:13px;font-weight:400;color:var(--pb-text-dim)}
.pay-details{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.pay-detail-card{background:rgba(0,0,0,0.15);border:1px solid var(--pb-border);border-radius:8px;padding:12px 14px;text-align:center}
.pay-detail-label{font-size:9px;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:4px}
.pay-detail-value{font-size:13px;font-weight:600;color:var(--pb-text)}
.pay-detail-value.green{color:var(--pb-green)}
.pay-detail-value.yellow{color:var(--pb-yellow)}
.pay-features{margin-bottom:16px}
.pay-features-title{font-size:11px;font-weight:700;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px}
.pay-feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.pay-feature{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--pb-text-muted)}
.pay-feature svg{width:14px;height:14px;stroke:var(--pb-green);fill:none;stroke-width:2;flex-shrink:0}
.pay-upgrade-section{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:12px;padding:20px 24px;margin-bottom:20px}
.pay-upgrade-title{font-family:'Oswald',sans-serif;font-size:14px;font-weight:700;color:var(--pb-text);margin-bottom:14px;letter-spacing:0.04em}
.pay-plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pay-plan-card{background:rgba(0,0,0,0.15);border:1px solid var(--pb-border);border-radius:10px;padding:16px;text-align:center;transition:all .2s;cursor:pointer;position:relative}
.pay-plan-card:hover{border-color:var(--pb-blue);transform:translateY(-2px)}
.pay-plan-card.current{border-color:rgba(42,147,193,0.4);background:rgba(42,147,193,0.04)}
.pay-plan-card.current::after{content:'Current';position:absolute;top:8px;right:8px;font-size:8px;padding:2px 6px;border-radius:10px;background:rgba(42,147,193,0.15);color:var(--pb-blue-light);font-weight:700;text-transform:uppercase;letter-spacing:0.04em}
.pay-plan-name{font-family:'Oswald',sans-serif;font-size:16px;font-weight:700;color:var(--pb-text);margin-bottom:2px}
.pay-plan-price{font-size:22px;font-weight:700;color:var(--pb-blue-light);margin-bottom:8px}
.pay-plan-price span{font-size:12px;font-weight:400;color:var(--pb-text-dim)}
.pay-plan-expand-hint{font-size:9px;color:var(--pb-text-dim);opacity:0;transition:opacity .2s;margin-top:4px;letter-spacing:0.03em}
.pay-plan-card:hover .pay-plan-expand-hint{opacity:1}
.pay-plan-card.expanded .pay-plan-expand-hint span::after{content:'Click to collapse'}
.pay-plan-card:not(.expanded) .pay-plan-expand-hint span::after{content:'Click for details'}
.pay-plan-desc{font-size:11px;color:var(--pb-text-dim);line-height:1.4;margin-bottom:12px}
.pay-plan-features{text-align:left;margin-bottom:14px;padding:0 4px;max-height:0;overflow:hidden;transition:max-height .3s ease,margin .3s ease,opacity .3s ease;opacity:0;margin-bottom:0}
.pay-plan-card.expanded .pay-plan-features{max-height:200px;opacity:1;margin-bottom:14px}
.pay-plan-features li{font-size:10px;color:var(--pb-text-muted);line-height:1.6;list-style:none;padding-left:14px;position:relative}
.pay-plan-features li::before{content:'✓';position:absolute;left:0;color:var(--pb-green);font-size:9px;font-weight:700}
.pay-plan-btn{width:100%;padding:8px;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;border:none;transition:all .15s;letter-spacing:0.03em}
.pay-plan-btn.upgrade{background:var(--pb-blue);color:#fff}
.pay-plan-btn.upgrade:hover{background:#3b9fd1}
.pay-plan-btn.current-btn{background:rgba(42,147,193,0.1);color:var(--pb-blue-light);border:1px solid rgba(42,147,193,0.2);cursor:default}
.pay-plan-btn.contact{background:rgba(139,92,246,0.1);color:var(--pb-purple);border:1px solid rgba(139,92,246,0.2)}
.pay-plan-btn.contact:hover{background:rgba(139,92,246,0.2)}
.pay-history{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:12px;padding:20px 24px}
.pay-history-title{font-family:'Oswald',sans-serif;font-size:14px;font-weight:700;color:var(--pb-text);margin-bottom:14px;letter-spacing:0.04em}
.pay-history-table{width:100%;border-collapse:collapse}
.pay-history-table th{font-size:9px;font-weight:700;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.06em;text-align:left;padding:8px 10px;border-bottom:1px solid var(--pb-border)}
.pay-history-table td{font-size:12px;color:var(--pb-text-muted);padding:10px;border-bottom:1px solid rgba(255,255,255,0.03)}
.pay-history-status{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600}
.pay-history-status.paid{background:rgba(34,197,94,0.1);color:var(--pb-green)}
.pay-history-status.pending{background:rgba(245,158,11,0.1);color:var(--pb-yellow)}
@media(max-width:1024px){.pay-details{grid-template-columns:1fr}.pay-plans-grid{grid-template-columns:1fr}.pay-feature-list{grid-template-columns:1fr}}

/* REFER PANEL */
.refer-area{display:none;flex-direction:column;flex:1;overflow-y:auto;z-index:1;position:relative;background:rgba(10,14,26,0.92);padding:24px}
.refer-area.visible{display:flex}
.refer-card{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:14px;padding:24px;max-width:500px}
.refer-card h3{font-family:'Oswald',sans-serif;font-size:18px;color:var(--pb-green);margin:0 0 8px;letter-spacing:0.04em}
.refer-card p{font-size:13px;color:var(--pb-text-muted);line-height:1.6;margin:0 0 16px}
.refer-link-box{display:flex;gap:8px;margin-bottom:16px}
.refer-link-box input{flex:1;background:rgba(0,0,0,0.3);border:1px solid var(--pb-border);border-radius:6px;color:var(--pb-text);font-size:12px;padding:8px 12px;font-family:inherit}
.refer-link-box button{padding:8px 16px;background:var(--pb-green);color:#000;border:none;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer}
.refer-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.refer-stat{background:rgba(0,0,0,0.2);border:1px solid var(--pb-border);border-radius:8px;padding:12px;text-align:center}
.refer-stat-val{font-family:'Oswald',sans-serif;font-size:20px;font-weight:700;color:var(--pb-green)}
.refer-stat-label{font-size:10px;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.1em;margin-top:4px}

/* TO DO PANEL */
/* ═══ TO DO TAB — REDESIGNED ═══ */
.todo-area{display:none;flex-direction:column;flex:1;overflow:hidden;z-index:1;position:relative;background:rgba(10,14,26,0.92)}
.todo-area.visible{display:flex}
.todo-header{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--pb-border);background:rgba(10,14,26,0.95)}
.todo-header-title{font-family:'Oswald',sans-serif;font-size:14px;font-weight:700;color:var(--pb-text);letter-spacing:0.06em;display:flex;align-items:center;gap:8px}
.todo-count{background:var(--pb-blue);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:12px}
.todo-header-actions{display:flex;gap:6px;margin-left:auto}
.todo-header-btn{padding:6px 14px;border-radius:6px;font-size:10px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;border:1px solid rgba(42,147,193,0.2);background:rgba(42,147,193,0.1);color:var(--pb-blue-light)}
.todo-header-btn:hover{background:rgba(42,147,193,0.2)}
.todo-filter{background:var(--pb-surface);color:var(--pb-text-dim);border:1px solid var(--pb-border);border-radius:6px;padding:5px 10px;font-size:11px;font-family:inherit;cursor:pointer}
.todo-wrap{flex:1;overflow-y:auto;padding:16px 20px}
/* Email status banner */
.todo-email-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:10px;margin-bottom:14px}
.todo-email-banner.configured{background:rgba(34,197,94,0.06);border:1px solid rgba(34,197,94,0.15)}
.todo-email-banner.not-configured{background:rgba(241,66,11,0.06);border:1px solid rgba(241,66,11,0.15)}
.todo-email-icon{font-size:20px;flex-shrink:0}
.todo-email-info{flex:1;min-width:0}
.todo-email-title{font-size:12px;font-weight:700;color:var(--pb-text);margin-bottom:2px}
.todo-email-sub{font-size:10px;color:var(--pb-text-dim)}
.todo-email-btn{padding:6px 14px;border-radius:6px;font-size:10px;font-weight:600;cursor:pointer;font-family:inherit;border:none;transition:all .15s;flex-shrink:0}
.todo-email-btn.setup{background:rgba(42,147,193,0.15);color:var(--pb-blue-light);border:1px solid rgba(42,147,193,0.25)}
.todo-email-btn.setup:hover{background:rgba(42,147,193,0.25)}
.todo-email-btn.compose{background:rgba(34,197,94,0.12);color:var(--pb-green);border:1px solid rgba(34,197,94,0.25)}
.todo-email-btn.compose:hover{background:rgba(34,197,94,0.2)}
/* Summary stats */
.todo-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.todo-stat{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:8px;padding:10px;text-align:center}
.todo-stat-val{font-size:18px;font-weight:800;margin-bottom:1px}
.todo-stat-label{font-size:8px;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.06em;font-weight:600}
/* Section headers */
.todo-section{margin-bottom:12px}
.todo-section-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.todo-section-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.todo-section-title{font-size:11px;font-weight:800;color:rgba(255,255,255,0.7);text-transform:uppercase;letter-spacing:0.08em}
.todo-section-count{font-size:9px;color:var(--pb-text-dim);font-weight:600;margin-left:auto}
/* Task cards */
.todo-card{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:10px;padding:14px 16px;margin-bottom:8px;transition:border-color .15s}
.todo-card:hover{border-color:rgba(42,147,193,0.25)}
.todo-card.urgent{border-left:3px solid var(--pb-orange)}
.todo-card-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.todo-check{width:18px;height:18px;border-radius:5px;border:2px solid var(--pb-border);flex-shrink:0;cursor:pointer;margin-top:1px;transition:all .15s;appearance:none;-webkit-appearance:none;background:transparent}
.todo-check:hover{border-color:var(--pb-blue)}
.todo-check:checked{background:var(--pb-green);border-color:var(--pb-green)}
.todo-card-body{flex:1;min-width:0}
.todo-title{font-size:13px;font-weight:700;color:var(--pb-text);margin-bottom:4px}
.todo-preview{font-size:10px;color:var(--pb-text-dim);line-height:1.5;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:8px}
.todo-card-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,0.03);border-radius:6px;overflow:hidden;margin-bottom:8px}
.todo-meta-cell{background:var(--pb-surface);padding:6px 8px}
.todo-meta-label{font-size:7px;font-weight:700;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:1px}
.todo-meta-val{font-size:10px;color:var(--pb-text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.todo-card-footer{display:flex;gap:6px;justify-content:flex-end}
.todo-btn{padding:5px 12px;border-radius:6px;font-size:10px;font-weight:600;cursor:pointer;border:1px solid var(--pb-border);background:transparent;color:var(--pb-text-dim);transition:all .15s;font-family:inherit}
.todo-btn:hover{border-color:var(--pb-blue);color:var(--pb-text)}
.todo-btn.approve{background:rgba(34,197,94,0.1);border-color:rgba(34,197,94,0.3);color:var(--pb-green)}
.todo-btn.approve:hover{background:rgba(34,197,94,0.2)}
.todo-btn.email-action{background:rgba(42,147,193,0.1);border-color:rgba(42,147,193,0.2);color:var(--pb-blue-light)}
.todo-btn.email-action:hover{background:rgba(42,147,193,0.2)}
.todo-tag{display:inline-block;padding:2px 7px;border-radius:4px;font-size:8px;font-weight:700;margin-left:6px}
.todo-tag.overdue{background:rgba(241,66,11,0.12);color:var(--pb-orange-light)}
.todo-tag.due{background:rgba(245,158,11,0.12);color:#f59e0b}
/* Email setup wizard modal */
.email-wizard-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);z-index:1100;align-items:center;justify-content:center}
.email-wizard-overlay.open{display:flex}
.email-wizard{background:var(--pb-bg);border:1px solid var(--pb-border);border-radius:14px;width:480px;max-width:90vw;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.email-wizard-step{display:none}
.email-wizard-step.active{display:block}
.ew-title{font-family:'Oswald',sans-serif;font-size:16px;font-weight:700;color:var(--pb-text);margin-bottom:4px;letter-spacing:0.04em}
.ew-sub{font-size:11px;color:var(--pb-text-dim);margin-bottom:16px;line-height:1.5}
.ew-label{font-size:10px;font-weight:700;color:rgba(255,255,255,0.6);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:5px;display:block}
.ew-input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--pb-border);background:var(--pb-surface);color:var(--pb-text);font-size:13px;font-family:inherit;margin-bottom:12px;outline:none;box-sizing:border-box}
.ew-input:focus{border-color:var(--pb-blue)}
.ew-select{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--pb-border);background:var(--pb-surface);color:var(--pb-text);font-size:13px;font-family:inherit;margin-bottom:12px;outline:none;cursor:pointer}
.ew-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.ew-btn{padding:8px 20px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;border:1px solid var(--pb-border);background:transparent;color:var(--pb-text-dim)}
.ew-btn:hover{border-color:var(--pb-blue);color:var(--pb-text)}
.ew-btn.primary{background:rgba(42,147,193,0.15);border-color:rgba(42,147,193,0.3);color:var(--pb-blue-light)}
.ew-btn.primary:hover{background:rgba(42,147,193,0.25)}
.ew-progress{display:flex;gap:6px;margin-bottom:16px}
.ew-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.1)}
.ew-dot.active{background:var(--pb-blue)}
.ew-dot.done{background:var(--pb-green)}

/* AGENT ROSTER PANEL */
.agents-area{display:none;flex-direction:column;flex:1;overflow:hidden;z-index:1;position:relative;background:rgba(10,14,26,0.92)}
.agents-area.visible{display:flex}
.ar-header{display:flex;align-items:center;gap:10px;padding:12px 16px 8px;border-bottom:1px solid var(--pb-border);flex-wrap:wrap;flex-shrink:0}
.ar-title{font-size:14px;font-weight:700;color:var(--pb-blue-light);white-space:nowrap}
.ar-stats{display:flex;gap:6px;flex-wrap:wrap;font-size:11px;margin-left:auto}
.ar-stat-pill{padding:2px 8px;border-radius:10px;background:var(--pb-surface);border:1px solid var(--pb-border);color:var(--pb-text-dim);white-space:nowrap}
.ar-num{font-weight:700;color:var(--pb-text);margin-right:3px}
.ar-view-toggle{display:flex;gap:2px;background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:6px;padding:2px;flex-shrink:0}
.ar-view-btn{background:none;border:none;color:var(--pb-text-dim);padding:3px 7px;font-size:12px;cursor:pointer;border-radius:4px;transition:all .15s}
.ar-view-btn.active{background:rgba(255,255,255,0.06);color:var(--pb-text)}
.ar-filters{display:flex;gap:8px;padding:8px 16px;border-bottom:1px solid var(--pb-border);flex-wrap:wrap;flex-shrink:0}
.ar-search-input{background:var(--pb-surface);color:var(--pb-text);border:1px solid var(--pb-border);border-radius:6px;padding:5px 10px;font-size:11px;font-family:inherit;flex:1;min-width:100px;outline:none}
.ar-search-input:focus{border-color:var(--pb-blue)}
.ar-filter-select{background:var(--pb-surface);color:var(--pb-text);border:1px solid var(--pb-border);border-radius:6px;padding:5px 8px;font-size:11px;cursor:pointer;outline:none;font-family:inherit}
.agents-panel-header{padding:14px 20px;border-bottom:1px solid var(--pb-border);background:rgba(10,14,26,0.95)}
.agents-panel-title{font-family:'Oswald',sans-serif;font-size:14px;font-weight:700;color:var(--pb-blue-light);letter-spacing:0.06em}
.agents-subtabs{display:flex;gap:0;border-bottom:1px solid var(--pb-border);background:rgba(10,14,26,0.95);flex-shrink:0}
.agents-subtab{padding:10px 20px;font-size:12px;font-weight:600;color:var(--pb-text-dim);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;font-family:inherit;background:none;border-top:none;border-left:none;border-right:none}
.agents-subtab:hover{color:var(--pb-text)}
.agents-subtab.active{color:var(--pb-blue-light);border-bottom-color:var(--pb-blue)}
.agents-subtab-content{display:none;flex-direction:column;flex:1;overflow-y:auto}
.agents-subtab-content.visible{display:flex}
/* ═══ MY ACTIVE AGENTS — LIVE DASHBOARD ═══ */
.aa-dash{padding:16px 20px;overflow-y:auto;height:100%}
.aa-dash-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.aa-dash-stat{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:10px;padding:14px 16px;text-align:center}
.aa-dash-stat-val{font-size:22px;font-weight:800;margin-bottom:2px}
.aa-dash-stat-label{font-size:9px;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.06em;font-weight:600}
/* Live agent strip */
.aa-agent-strip{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:12px;margin-bottom:12px;overflow:hidden}
.aa-agent-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,0.04)}
.aa-hex{width:40px;height:40px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0}
.aa-agent-info{flex:1;min-width:0}
.aa-agent-name{font-size:14px;font-weight:700;color:var(--pb-text)}
.aa-agent-role{font-size:10px;color:var(--pb-text-dim)}
.aa-live-dot{width:8px;height:8px;border-radius:50%;background:var(--pb-green);box-shadow:0 0 8px rgba(34,197,94,0.5);animation:ar-pulse 1.6s ease-in-out infinite;flex-shrink:0}
.aa-live-label{font-size:9px;color:var(--pb-green);font-weight:700;text-transform:uppercase;letter-spacing:0.04em}
.aa-agent-body{padding:12px 16px}
.aa-task-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.aa-task-icon{width:18px;height:18px;border-radius:4px;background:rgba(42,147,193,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:9px;color:var(--pb-blue-light)}
.aa-task-text{font-size:11px;color:var(--pb-text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aa-task-time{font-size:9px;color:var(--pb-text-dim);flex-shrink:0}
.aa-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,0.03);border-radius:8px;overflow:hidden;margin-bottom:10px}
.aa-metric{background:var(--pb-surface);padding:8px 6px;text-align:center}
.aa-metric-val{font-size:13px;font-weight:800}
.aa-metric-label{font-size:7px;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.05em;margin-top:2px;font-weight:600}
/* Activity feed */
.aa-feed{list-style:none;padding:0;margin:0}
.aa-feed li{font-size:10px;color:var(--pb-text-muted);padding:4px 0;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,0.02)}
.aa-feed li:last-child{border-bottom:none}
.aa-feed-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.aa-feed-time{margin-left:auto;font-size:8px;color:var(--pb-text-dim);flex-shrink:0}
.aa-agent-actions{display:flex;gap:6px;padding:10px 16px;border-top:1px solid rgba(255,255,255,0.04)}
.aa-agent-actions button{flex:1;padding:7px;border-radius:7px;font-size:10px;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:all .15s;text-align:center}
.aa-btn-primary{background:rgba(42,147,193,0.12);color:var(--pb-blue-light);border:1px solid rgba(42,147,193,0.2)!important}
.aa-btn-primary:hover{background:rgba(42,147,193,0.22)}
.aa-btn-secondary{background:rgba(255,255,255,0.03);color:var(--pb-text-dim);border:1px solid var(--pb-border)!important}
.aa-btn-secondary:hover{background:rgba(255,255,255,0.06);color:var(--pb-text)}
/* Timeline section */
.aa-timeline-title{font-size:9px;font-weight:800;color:rgba(255,255,255,0.7);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;padding:0 2px}
.aa-timeline{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:10px;padding:14px 16px}
.aa-tl-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.03)}
.aa-tl-item:last-child{border-bottom:none}
.aa-tl-hex{width:28px;height:28px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:#fff;flex-shrink:0}
.aa-tl-body{flex:1;min-width:0}
.aa-tl-text{font-size:11px;color:var(--pb-text)}
.aa-tl-text strong{color:var(--pb-blue-light);font-weight:700}
.aa-tl-sub{font-size:9px;color:var(--pb-text-dim);margin-top:2px}
.aa-tl-time{font-size:9px;color:var(--pb-text-dim);flex-shrink:0}
/* ═══ ACTIVE BOOPS TAB ═══ */
.boops-wrap{padding:16px 20px;overflow-y:auto;height:100%}
.boops-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.boops-stat{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:10px;padding:14px 16px;text-align:center}
.boops-stat-val{font-size:22px;font-weight:800;margin-bottom:2px}
.boops-stat-val.green{color:var(--pb-green)}
.boops-stat-val.blue{color:var(--pb-blue-light)}
.boops-stat-val.orange{color:var(--pb-orange-light)}
.boops-stat-val.dim{color:var(--pb-text-dim)}
.boops-stat-label{font-size:9px;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.06em;font-weight:600}
.boops-list{display:flex;flex-direction:column;gap:10px}
.boop-card{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:12px;padding:16px 18px;transition:border-color .2s;position:relative}
.boop-card:hover{border-color:rgba(42,147,193,0.3)}
.boop-card.st-error{border-left:3px solid var(--pb-orange)}
.boop-card.st-running{border-left:3px solid var(--pb-green)}
.boop-card.st-scheduled{border-left:3px solid var(--pb-blue-light)}
.boop-card.st-paused{border-left:3px solid var(--pb-text-dim)}
.boop-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.boop-title-area{flex:1;min-width:0}
.boop-name{font-size:14px;font-weight:700;color:var(--pb-text);margin-bottom:3px}
.boop-desc{font-size:11px;color:var(--pb-text-muted);line-height:1.4}
.boop-status{font-size:9px;font-weight:700;padding:3px 10px;border-radius:12px;text-transform:uppercase;letter-spacing:0.04em;flex-shrink:0;margin-left:12px}
.boop-status.running{background:rgba(34,197,94,0.12);color:var(--pb-green);box-shadow:0 0 8px rgba(34,197,94,0.15)}
.boop-status.scheduled{background:rgba(42,147,193,0.12);color:var(--pb-blue-light)}
.boop-status.error{background:rgba(241,66,11,0.12);color:var(--pb-orange-light)}
.boop-status.paused{background:rgba(255,255,255,0.05);color:var(--pb-text-dim)}
.boop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,0.03);border-radius:8px;overflow:hidden;margin-bottom:10px}
.boop-cell{background:var(--pb-surface);padding:8px 10px}
.boop-cell-label{font-size:7px;font-weight:700;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:2px}
.boop-cell-val{font-size:11px;font-weight:600;color:var(--pb-text)}
.boop-footer{display:flex;align-items:center;justify-content:space-between}
.boop-tags{display:flex;gap:4px;flex-wrap:wrap}
.boop-tag{font-size:8px;padding:3px 8px;border-radius:4px;background:rgba(42,147,193,0.06);color:var(--pb-blue-light);border:1px solid rgba(42,147,193,0.1)}
.boop-actions{display:flex;gap:6px}
.boop-action{padding:5px 12px;border-radius:6px;font-size:9px;font-weight:600;cursor:pointer;border:1px solid var(--pb-border);background:transparent;color:var(--pb-text-dim);font-family:inherit;transition:all .15s}
.boop-action:hover{border-color:var(--pb-blue);color:var(--pb-blue-light)}
.boop-action.danger{border-color:rgba(241,66,11,0.2);color:var(--pb-orange-light)}
.boop-action.danger:hover{background:rgba(241,66,11,0.08)}
.boop-action.primary{background:rgba(42,147,193,0.1);border-color:rgba(42,147,193,0.2);color:var(--pb-blue-light)}
.boop-action.primary:hover{background:rgba(42,147,193,0.2)}
.boop-progress{height:3px;border-radius:2px;background:rgba(255,255,255,0.04);margin-bottom:10px;overflow:hidden}
.boop-progress-fill{height:100%;border-radius:2px;transition:width .3s}
.agent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.ar-grid{flex:1;overflow-y:auto;padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;align-content:start}
.ar-grid.list-view{grid-template-columns:1fr}
/* Flip card container */
.ar-flip{perspective:800px;height:320px}
.ar-flip-inner{position:relative;width:100%;height:100%;transition:transform 0.5s ease;transform-style:preserve-3d}
.ar-flip.flipped .ar-flip-inner{transform:rotateY(180deg)}
.ar-flip-front,.ar-flip-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;overflow:hidden}
.ar-flip-back{transform:rotateY(180deg)}
/* Front face — Hex card */
.ar-card{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:16px;padding:20px;height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:all .3s}
.ar-card:hover{border-color:rgba(42,147,193,0.2)}
.ar-card::before{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;border-radius:50%;opacity:0.04;transition:opacity .3s}
.ar-card:hover::before{opacity:0.08}
.ar-card.glow-purple::before{background:#a855f7}
.ar-card.glow-green::before{background:#22c55e}
.ar-card.glow-blue::before{background:#2a93c1}
.ar-card.glow-orange::before{background:#f97316}
.ar-card.glow-pink::before{background:#f472b6}
.ar-card.glow-red::before{background:#ef4444}
.ar-card.glow-yellow::before{background:#fbbf24}
.ar-card.glow-teal::before{background:#14b8a6}
.ar-back-activity{list-style:none;padding:0;margin:0;font-size:10px;color:var(--pb-text-muted);line-height:1.8}
.ar-back-activity li{display:flex;justify-content:space-between;align-items:center}
.ar-back-activity .time{color:var(--pb-text-dim);font-size:9px}
#subtab-active-agents .ar-flip,#subtab-active-boops .ar-flip{height:auto}
#subtab-active-boops .ar-flip-front{position:relative}
#subtab-active-agents .ar-flip-front{position:relative}
/* Flip info button */
.ar-flip-btn{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:6px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);color:var(--pb-text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;transition:all .15s;z-index:2}
.ar-flip-btn:hover{background:rgba(42,147,193,0.12);color:var(--pb-blue-light);border-color:rgba(42,147,193,0.3)}
/* Card top */
.ar-card-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ar-hex-av{width:44px;height:44px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0}
.ar-card-info{flex:1;min-width:0}
.ar-card-name{font-size:13px;font-weight:700;color:var(--pb-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-card-meta{font-size:9px;color:var(--pb-text-dim);display:flex;align-items:center;gap:6px;margin-top:2px}
.ar-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ar-dot.st-active{background:#22c55e;box-shadow:0 0 6px #22c55e;animation:ar-pulse 1.6s ease-in-out infinite}
.ar-dot.st-idle{background:#f59e0b}
.ar-dot.st-working{background:#3b82f6;animation:ar-pulse-blue 1.6s ease-in-out infinite}
.ar-dot.st-offline{background:#6b7280}
@keyframes ar-pulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.7)}50%{box-shadow:0 0 0 5px rgba(34,197,94,0)}}
@keyframes ar-pulse-blue{0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,0.7)}50%{box-shadow:0 0 0 5px rgba(59,130,246,0)}}
/* Type badge */
.ar-type-badge{font-size:8px;padding:2px 7px;border-radius:4px;text-transform:uppercase;font-weight:700;letter-spacing:0.04em}
.ar-type-badge.t-specialist{background:rgba(42,147,193,0.12);color:#2a93c1;border:1px solid rgba(42,147,193,0.2)}
.ar-type-badge.t-core{background:rgba(34,197,94,0.1);color:#22c55e;border:1px solid rgba(34,197,94,0.18)}
.ar-type-badge.t-orchestration{background:rgba(168,85,247,0.1);color:#a855f7;border:1px solid rgba(168,85,247,0.18)}
.ar-type-badge.t-governance{background:rgba(241,66,11,0.1);color:#f1420b;border:1px solid rgba(241,66,11,0.18)}
.ar-type-badge.t-pipeline{background:rgba(251,191,36,0.1);color:#fbbf24;border:1px solid rgba(251,191,36,0.18)}
/* Description */
.ar-card-desc{font-size:10px;color:var(--pb-text-muted);line-height:1.5;margin-bottom:0}
/* Skills */
.ar-card-caps{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}
.ar-cap{font-size:8px;padding:3px 8px;border-radius:4px;background:rgba(255,255,255,0.03);border:1px solid var(--pb-border);color:var(--pb-text-dim)}
/* Utilization bar on front */
.ar-util-bar{height:3px;border-radius:2px;background:rgba(255,255,255,0.04);margin-bottom:12px;overflow:hidden}
.ar-util-fill{height:100%;border-radius:2px}
/* Action buttons on front */
.ar-card-actions{display:flex;gap:6px;margin-top:auto}
.ar-action-btn{flex:1;padding:7px;border-radius:7px;font-size:10px;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:all .15s;text-align:center}
.ar-action-btn.primary{background:rgba(42,147,193,0.12);color:var(--pb-blue-light);border:1px solid rgba(42,147,193,0.2)}
.ar-action-btn.primary:hover{background:rgba(42,147,193,0.22);transform:translateY(-1px)}
.ar-action-btn.secondary{background:rgba(255,255,255,0.03);color:var(--pb-text-dim);border:1px solid var(--pb-border)}
.ar-action-btn.secondary:hover{background:rgba(255,255,255,0.06);color:var(--pb-text)}

/* ═══ BACK FACE ═══ */
.ar-back{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:16px;padding:14px;height:100%;display:flex;flex-direction:column;overflow:hidden}
.ar-back-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,0.04)}
.ar-back-name{font-size:13px;font-weight:700}
.ar-back-id{font-size:9px;color:var(--pb-text-dim);font-family:monospace}
.ar-back-section{margin-bottom:8px}
.ar-back-label{font-size:8px;font-weight:800;color:rgba(255,255,255,0.7);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:5px}
/* Mini bar chart */
.ar-mini-chart{display:flex;align-items:flex-end;gap:3px;height:32px;margin-bottom:4px}
.ar-mini-bar{flex:1;border-radius:2px 2px 0 0;min-height:3px;transition:height .3s}
.ar-mini-legend{display:flex;justify-content:space-between;font-size:7px;color:rgba(255,255,255,0.2)}
/* Stats row */
.ar-back-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:rgba(255,255,255,0.03);border-radius:8px;overflow:hidden;margin-bottom:12px}
.ar-back-stat{background:var(--pb-surface);padding:8px;text-align:center}
.ar-back-stat-val{font-size:14px;font-weight:800}
.ar-back-stat-label{font-size:9px;color:#7d8fa3;text-transform:uppercase;letter-spacing:0.06em;margin-top:4px;font-weight:700;display:block}
/* Skills full list */
.ar-back-skills{display:flex;flex-wrap:wrap;gap:4px}
.ar-back-skill{font-size:8px;padding:3px 8px;border-radius:4px;background:rgba(42,147,193,0.06);color:var(--pb-blue-light);border:1px solid rgba(42,147,193,0.1)}
/* Activity list */
.ar-back-activity{list-style:none;padding:0}
.ar-back-activity li{font-size:10px;color:var(--pb-text-dim);padding:3px 0;display:flex;align-items:center;gap:6px}
.ar-back-activity li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--pb-green);flex-shrink:0}
.ar-back-activity .time{margin-left:auto;font-size:8px;color:rgba(255,255,255,0.2)}

/* Front face additions */
.ar-task-line{font-size:10px;color:var(--pb-text-muted);margin-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-front-meta{display:flex;align-items:center;gap:8px;margin-bottom:0;font-size:9px;color:var(--pb-text-muted)}
.ar-front-meta .meta-item{display:flex;align-items:center;gap:3px}
.ar-queue-badge{background:rgba(241,66,11,0.15);color:var(--pb-orange-light);font-size:8px;font-weight:700;padding:1px 6px;border-radius:10px;margin-left:auto}
/* Back face enhanced */
.ar-back-stats-6{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:1px;background:rgba(255,255,255,0.03);border-radius:6px;margin-bottom:8px}
.ar-back-stats-6 .ar-back-stat{padding:5px 3px}
.ar-back-stats-6 .ar-back-stat-val{font-size:11px}
.ar-back-stats-6 .ar-back-stat-label{font-size:7px;margin-top:2px}
.ar-back-chart-row{display:flex;gap:8px;margin-bottom:10px}
.ar-back-chart-box{flex:1;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);border-radius:6px;padding:6px 8px}
.ar-back-chart-title{font-size:7px;font-weight:700;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:4px}
.ar-trend-chart{display:flex;align-items:flex-end;gap:2px;height:20px}
.ar-trend-bar{flex:1;border-radius:1px 1px 0 0;min-height:2px}
.ar-stacked-chart{display:flex;align-items:flex-end;gap:3px;height:24px}
.ar-stacked-bar{flex:1;border-radius:2px 2px 0 0;display:flex;flex-direction:column-reverse;overflow:hidden}
.ar-stacked-seg{width:100%}
.ar-back-tags{display:flex;flex-wrap:wrap;gap:4px}
.ar-back-tag{font-size:8px;padding:3px 8px;border-radius:4px;background:rgba(42,147,193,0.06);color:var(--pb-blue-light);border:1px solid rgba(42,147,193,0.1)}
.ar-back-inline{font-size:9px;color:var(--pb-text-muted);display:flex;align-items:center;gap:4px;margin-bottom:8px}
.ar-back-inline .ar-back-label{margin-bottom:0;margin-right:4px}
.ar-back-chain .chain-arrow{color:rgba(255,255,255,0.2)}

/* Assign Task Modal */
.atm-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);z-index:1000;align-items:center;justify-content:center}
.atm-overlay.open{display:flex}
.atm{background:var(--pb-bg);border:1px solid var(--pb-border);border-radius:14px;width:440px;max-width:90vw;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,0.4)}
.atm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.atm-title{font-size:15px;font-weight:700;color:var(--pb-text)}
.atm-x{width:28px;height:28px;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.03);color:var(--pb-text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .15s}
.atm-x:hover{background:rgba(255,255,255,0.08);color:var(--pb-text)}
.atm-agent{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);margin-bottom:16px}
.atm-agent-name{font-size:13px;font-weight:600;color:var(--pb-text)}
.atm-agent-type{font-size:10px;color:var(--pb-text-dim)}
.atm-label{font-size:11px;font-weight:600;color:var(--pb-text-dim);display:block;margin-bottom:5px;text-transform:uppercase;letter-spacing:0.04em}
.atm-textarea{width:100%;height:80px;padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.025);color:var(--pb-text);font-family:inherit;font-size:12px;resize:vertical;outline:none;transition:border-color .2s;box-sizing:border-box}
.atm-textarea:focus{border-color:rgba(42,147,193,0.4)}
.atm-textarea::placeholder{color:var(--pb-text-dim)}
.atm-pri-row{display:flex;gap:6px;margin:6px 0 18px}
.atm-pri{padding:5px 14px;border-radius:6px;font-size:10px;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.03);color:var(--pb-text-dim);font-family:inherit;transition:all .15s}
.atm-pri:hover{background:rgba(255,255,255,0.06)}
.atm-pri.sel{border-color:rgba(42,147,193,0.4);background:rgba(42,147,193,0.12);color:var(--pb-blue-light)}
.atm-boop-row{display:flex;align-items:center;height:40px;padding:0 14px;margin:0 0 14px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:8px}
.atm-boop-text{font-size:12px;font-weight:600;color:var(--pb-text);margin-right:auto}
.atm-switch{position:relative;display:block;width:40px;height:20px;cursor:pointer}
.atm-switch input{opacity:0;width:0;height:0;position:absolute}
.atm-switch-track{position:absolute;inset:0;border-radius:10px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);transition:background .2s,border-color .2s}
.atm-switch-knob{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,0.4);transition:transform .2s,background .2s;z-index:1}
.atm-switch input:checked~.atm-switch-track{background:rgba(42,147,193,0.3);border-color:rgba(42,147,193,0.5)}
.atm-switch input:checked~.atm-switch-knob{transform:translateX(20px);background:var(--pb-blue-light)}
.atm-boop-fields{padding:12px;border-radius:8px;background:rgba(255,255,255,0.015);border:1px solid rgba(255,255,255,0.04);margin-bottom:14px}
.atm-boop-pair{display:flex;gap:10px;margin-bottom:8px}
.atm-boop-pair:last-child{margin-bottom:0}
.atm-boop-col{flex:1}
.atm-boop-col label{font-size:10px;font-weight:600;color:var(--pb-text-dim);display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.04em}
.atm-sel,.atm-inp{width:100%;padding:6px 10px;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.025);color:var(--pb-text);font-family:inherit;font-size:11px;outline:none;box-sizing:border-box;transition:border-color .2s}
.atm-sel:focus,.atm-inp:focus{border-color:rgba(42,147,193,0.4)}
.atm-sel option{background:var(--pb-bg);color:var(--pb-text)}
.atm-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.atm-cancel{padding:8px 16px;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--pb-text-dim);font-family:inherit;transition:all .15s}
.atm-cancel:hover{color:var(--pb-text);background:rgba(255,255,255,0.04)}
.atm-submit{padding:8px 20px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;border:none;background:linear-gradient(135deg,var(--pb-blue),var(--pb-blue-light));color:#fff;font-family:inherit;transition:all .2s;box-shadow:0 2px 8px rgba(42,147,193,0.2)}
.atm-submit:hover{box-shadow:0 4px 16px rgba(42,147,193,0.3);transform:translateY(-1px)}

/* BOOP Cycle fields */

/* Batch toolbar */
.ar-batch-bar{display:none;align-items:center;gap:8px;padding:8px 12px;margin-bottom:10px;border-radius:8px;background:rgba(42,147,193,0.06);border:1px solid rgba(42,147,193,0.15)}
.ar-batch-bar.visible{display:flex}
.ar-batch-count{font-size:11px;font-weight:600;color:var(--pb-blue-light);flex:1}
.ar-batch-btn{padding:5px 12px;border-radius:6px;font-size:10px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;display:flex;align-items:center;gap:4px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.04);color:var(--pb-text-dim)}
.ar-batch-btn:hover{color:var(--pb-text);background:rgba(255,255,255,0.08)}
.ar-batch-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.ar-batch-btn.team-btn{background:rgba(168,85,247,0.1);border-color:rgba(168,85,247,0.25);color:#a855f7}
.ar-batch-btn.team-btn:hover{background:rgba(168,85,247,0.2)}
.ar-batch-btn.wake-btn{background:rgba(34,197,94,0.1);border-color:rgba(34,197,94,0.25);color:#22c55e}
.ar-batch-btn.wake-btn:hover{background:rgba(34,197,94,0.2)}
.ar-batch-btn.cancel-btn{background:transparent;border-color:rgba(255,255,255,0.06);color:var(--pb-text-dim)}

/* Card select checkbox */
.ar-card-select{position:absolute;top:12px;left:12px;width:18px;height:18px;border-radius:5px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.03);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;opacity:0;z-index:2}
.ar-flip:hover .ar-card-select,.ar-card-select.checked{opacity:1}
.ar-card-select.checked{background:rgba(42,147,193,0.3);border-color:var(--pb-blue-light)}
.ar-card-select.checked::after{content:'✓';font-size:10px;color:var(--pb-blue-light);font-weight:700}
.todo-section{margin-bottom:4px}
/* (todo extra styles moved to main todo block above) */
.todo-item.approval{border-left:3px solid var(--pb-orange-light)}
/* AGENT HUB */
.hub-area{display:none;flex-direction:column;flex:1;overflow:hidden;z-index:1;position:relative;background:rgba(10,14,26,0.92)}
.hub-area.visible{display:flex}
.hub-scroll{flex:1;overflow-y:auto;padding:0}
.hub-hero{display:flex;align-items:center;gap:14px;padding:20px 20px 16px;border-bottom:1px solid var(--pb-border);background:linear-gradient(135deg,rgba(42,147,193,0.04) 0%,transparent 60%);flex-shrink:0}
.hub-avatar-ring{width:60px;height:60px;border-radius:50%;border:2px solid transparent;background:linear-gradient(var(--pb-surface),var(--pb-surface)) padding-box,linear-gradient(135deg,var(--pb-blue),transparent,var(--pb-blue)) border-box;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.hub-avatar-pulse{position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(42,147,193,0.3);animation:hub-pulse-ring 3s ease-in-out infinite}
@keyframes hub-pulse-ring{0%,100%{opacity:0.3;transform:scale(1)}50%{opacity:0.8;transform:scale(1.05)}}
.hub-avatar{width:52px;height:52px;border-radius:50%;background:var(--pb-blue);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff}
.hub-civ-name{font-size:18px;font-weight:700;color:var(--pb-blue-light);letter-spacing:0.05em;line-height:1}
.hub-civ-sub{font-size:10px;color:var(--pb-text-dim);margin-top:4px;letter-spacing:0.08em;text-transform:uppercase}
.hub-status-badge{display:flex;align-items:center;gap:6px;margin-left:auto}
.hub-online-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,0.5)}
.hub-online-label{font-size:12px;font-weight:600;color:#22c55e}
.hub-uptime{text-align:right;flex-shrink:0;margin-left:12px}
.hub-uptime-val{font-size:13px;font-weight:600;color:var(--pb-text)}
.hub-uptime-label{font-size:9px;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.1em;margin-top:2px}
.hub-section-label{font-size:10px;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.12em;padding:14px 20px 6px;font-weight:600}
.hub-gauges{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 16px 12px}
.hub-gauge{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:10px;padding:12px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:border-color .3s}
.hub-gauge:hover{border-color:rgba(42,147,193,0.3)}
.hub-ring-wrap{position:relative;width:56px;height:56px}
.hub-ring-svg{width:56px;height:56px;transform:rotate(-90deg)}
.hub-ring-track{fill:none;stroke:rgba(255,255,255,0.06);stroke-width:4}
.hub-ring-fill{fill:none;stroke-width:4;stroke-linecap:round}
.hub-ring-fill.green{stroke:#22c55e}
.hub-ring-fill.blue{stroke:#60a5fa}
.hub-ring-fill.purple{stroke:#a78bfa}
.hub-ring-fill.warn{stroke:#fbbf24}
.hub-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hub-ring-pct{font-size:13px;font-weight:700;color:var(--pb-text);line-height:1}
.hub-ring-unit{font-size:9px;color:var(--pb-text-dim);margin-top:1px}
.hub-gauge-label{font-size:10px;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.08em;text-align:center}
.hub-gauge-sub{font-size:9px;color:var(--pb-text-dim);text-align:center;margin-top:-4px}
.hub-services{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0 16px 12px}
.hub-svc{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:8px;padding:10px 14px;display:flex;align-items:center;gap:10px}
.hub-svc-led{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.hub-svc-led.ok{background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,0.5)}
.hub-svc-led.warn{background:#fbbf24;box-shadow:0 0 6px rgba(251,191,36,0.5)}
.hub-svc-led.bad{background:#ef4444;box-shadow:0 0 6px rgba(239,68,68,0.5)}
.hub-svc-name{font-size:12px;font-weight:600;color:var(--pb-text);flex:1}
.hub-svc-val{font-size:10px;color:var(--pb-text-dim)}
.hub-live-agents{display:flex;flex-direction:column;gap:4px;padding:0 16px 12px}
.hub-agent-row{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:6px;background:rgba(255,255,255,0.02);font-size:12px}
.hub-agent-row:hover{background:rgba(255,255,255,0.05)}
.hub-agent-row.sub{opacity:0.8}
.hub-agent-row.sub .hub-agent-name{font-size:11px}
.hub-agent-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.hub-agent-dot.live{background:#22c55e;box-shadow:0 0 4px rgba(34,197,94,0.4);animation:hub-dot-pulse 2s ease-in-out infinite}
.hub-agent-dot.idle{background:#6b7280;box-shadow:none}
@keyframes hub-dot-pulse{0%,100%{opacity:1}50%{opacity:0.5}}
.hub-agent-name{flex:1;color:var(--pb-text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-agent-time{color:var(--pb-text-dim);font-size:10px;flex-shrink:0}
.hub-actions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 16px 12px}
.hub-action-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 4px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);color:var(--pb-text-dim);cursor:pointer;transition:all .15s;font-family:inherit}
.hub-action-btn:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.12);color:var(--pb-text)}
.hub-action-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hub-action-label{font-size:9px;font-weight:500;line-height:1.2;text-align:center}
.hub-action-btn.tint-red{color:#ef4444;border-color:rgba(239,68,68,0.15)}
.hub-action-btn.tint-red:hover{background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.3)}
.hub-action-btn.tint-amber{color:#f59e0b;border-color:rgba(245,158,11,0.15)}
.hub-action-btn.tint-amber:hover{background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,0.3)}
.hub-action-btn.tint-green{color:#22c55e;border-color:rgba(34,197,94,0.15)}
.hub-action-btn.tint-green:hover{background:rgba(34,197,94,0.1);border-color:rgba(34,197,94,0.3)}
.hub-action-btn.tint-blue{color:#3b82f6;border-color:rgba(59,130,246,0.15)}
.hub-action-btn.tint-blue:hover{background:rgba(59,130,246,0.1);border-color:rgba(59,130,246,0.3)}
.hub-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px 12px}
.hub-stat{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:8px;padding:10px 12px}
.hub-stat-val{font-size:16px;font-weight:700;color:var(--pb-blue-light);line-height:1}
.hub-stat-label{font-size:9px;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.08em;margin-top:4px}
.hub-activity{display:flex;flex-direction:column;gap:0;padding:0 16px 16px}
.hub-activity-item{display:flex;align-items:flex-start;gap:8px;padding:6px 10px;border-left:2px solid var(--pb-border);font-size:11px}
.hub-activity-item.blue{border-color:var(--pb-blue)}
.hub-activity-item.green{border-color:#22c55e}
.hub-activity-item.amber{border-color:#f59e0b}
.hub-activity-item.red{border-color:#ef4444}
.hub-act-time{color:var(--pb-text-dim);font-size:10px;flex-shrink:0;min-width:36px;font-family:'JetBrains Mono',monospace}
.hub-act-text{color:var(--pb-text);line-height:1.4}
.hub-apis{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 16px 12px}
.hub-api-card{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:8px;padding:8px 10px;transition:border-color .15s}
.hub-api-card:hover{border-color:rgba(42,147,193,0.25)}
.hub-api-top{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.hub-api-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.hub-api-dot.ok{background:#22c55e;box-shadow:0 0 5px rgba(34,197,94,0.5)}
.hub-api-dot.warn{background:#fbbf24;box-shadow:0 0 5px rgba(251,191,36,0.4)}
.hub-api-dot.error{background:#f87171;box-shadow:0 0 5px rgba(248,113,113,0.4)}
.hub-api-name{font-size:12px;font-weight:600;color:var(--pb-text);flex:1}
.hub-api-badge{font-size:8px;padding:1px 6px;border-radius:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;flex-shrink:0}
.hub-api-badge.ok{background:rgba(34,197,94,0.12);color:#22c55e}
.hub-api-badge.warn{background:rgba(251,191,36,0.12);color:#fbbf24}
.hub-api-badge.error{background:rgba(248,113,113,0.15);color:#f87171}
.hub-api-desc{font-size:10px;color:var(--pb-text-dim);line-height:1.3;margin-bottom:6px}
.hub-api-meta{display:flex;justify-content:space-between;font-size:9px;color:var(--pb-text-dim);border-top:1px solid rgba(255,255,255,0.03);padding-top:5px}
.hub-api-agents{color:var(--pb-blue-light);font-weight:500}
@media(max-width:1024px){.hub-apis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.hub-gauges{grid-template-columns:repeat(2,1fr)}.hub-services{grid-template-columns:1fr}.hub-actions-grid{grid-template-columns:repeat(2,1fr)}.hub-stats{grid-template-columns:1fr}.hub-apis{grid-template-columns:1fr}}

.about-area{display:none;flex-direction:column;flex:1;overflow:hidden;z-index:1;position:relative;background:rgba(10,14,26,0.92)}
.about-area.visible{display:flex}
.about-header{padding:14px 20px;border-bottom:1px solid var(--pb-border);background:rgba(10,14,26,0.95)}
.about-header-title{font-family:'Oswald',sans-serif;font-size:14px;font-weight:700;color:var(--pb-text);letter-spacing:0.06em}
.about-resources{padding:20px;display:flex;flex-direction:column;gap:10px;flex-shrink:0}
.about-resource-card{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:10px;cursor:pointer;transition:all .15s}
.about-resource-card:hover{border-color:var(--pb-blue);background:rgba(42,147,193,0.04)}
.about-resource-card.selected{border-color:var(--pb-blue);background:rgba(42,147,193,0.06)}
.about-resource-icon{font-size:28px;flex-shrink:0}
.about-resource-info{flex:1;min-width:0}
.about-resource-name{font-size:14px;font-weight:700;color:var(--pb-text);margin-bottom:3px}
.about-resource-desc{font-size:11px;color:var(--pb-text-dim);line-height:1.4}
.about-resource-actions{display:flex;gap:6px;flex-shrink:0}
.about-btn{padding:6px 14px;border-radius:6px;font-size:10px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;border:1px solid var(--pb-border);background:transparent;color:var(--pb-text-dim)}
.about-btn:hover{border-color:var(--pb-blue);color:var(--pb-blue-light)}
.about-btn.primary{background:rgba(42,147,193,0.1);border-color:rgba(42,147,193,0.2);color:var(--pb-blue-light)}
.about-btn.primary:hover{background:rgba(42,147,193,0.2)}
/* Knowledge Hub Popup Modal */
.kh-popup-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);z-index:1100;align-items:center;justify-content:center}
.kh-popup-overlay.open{display:flex}
.kh-popup{width:85vw;height:80vh;background:var(--pb-bg);border:1px solid var(--pb-border);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,0.5)}
.kh-popup-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--pb-border);background:rgba(10,14,26,0.95);flex-shrink:0}
.kh-popup-title{font-size:13px;font-weight:700;color:var(--pb-text)}
.kh-popup-actions{display:flex;gap:6px;align-items:center}
.kh-popup-btn{background:none;border:1px solid var(--pb-border);color:var(--pb-text-dim);padding:4px 12px;border-radius:6px;font-size:11px;cursor:pointer;font-family:inherit;transition:all .15s}
.kh-popup-btn:hover{border-color:var(--pb-blue);color:var(--pb-text)}
.kh-popup-close{background:none;border:none;color:var(--pb-text-dim);font-size:18px;cursor:pointer;padding:2px 6px;transition:color .15s}
.kh-popup-close:hover{color:var(--pb-text)}
.kh-popup iframe{flex:1;width:100%;border:none;background:#fff}
.about-viewer{display:none;flex-direction:column;flex:1;overflow:hidden}
.about-viewer.visible{display:flex}
.about-viewer-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-bottom:1px solid var(--pb-border);background:rgba(10,14,26,0.95);flex-shrink:0}
.about-viewer-back,.about-viewer-open{background:none;border:1px solid var(--pb-border);color:var(--pb-text-dim);padding:4px 12px;border-radius:6px;font-size:11px;cursor:pointer;font-family:inherit;transition:all .15s}
.about-viewer-back:hover,.about-viewer-open:hover{border-color:var(--pb-blue);color:var(--pb-text)}
.about-iframe{flex:1;width:100%;border:none;background:#fff;border-radius:0 0 8px 8px}

/* ADMIN DASHBOARD */
.admin-area{display:none;flex-direction:column;flex:1;overflow-y:auto;z-index:1;position:relative;background:rgba(10,14,26,0.92)}
.admin-area.visible{display:flex}
.admin-header{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:1px solid var(--pb-border);background:rgba(10,14,26,0.95)}
.admin-header-title{font-family:'Oswald',sans-serif;font-size:14px;font-weight:700;color:var(--pb-orange-light);letter-spacing:0.08em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.admin-header-title svg{width:18px;height:18px;stroke:var(--pb-orange);fill:none;stroke-width:1.8}
.admin-body{padding:16px 20px;display:flex;flex-direction:column;gap:16px}

/* Fleet Overview Stats */
.fleet-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.fleet-stat{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.fleet-stat-label{font-size:10px;font-weight:600;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.1em}
.fleet-stat-val{font-family:'Oswald',sans-serif;font-size:22px;font-weight:700;color:var(--pb-text)}
.fleet-stat-val.green{color:var(--pb-green)}.fleet-stat-val.blue{color:var(--pb-blue-light)}.fleet-stat-val.orange{color:var(--pb-orange-light)}.fleet-stat-val.yellow{color:var(--pb-yellow)}
.fleet-stat-sub{font-size:10px;color:var(--pb-text-dim)}

/* Agent Table */
.admin-section{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:12px;overflow:hidden}
.admin-section-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--pb-border)}
.admin-section-title{font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;color:var(--pb-text-muted);letter-spacing:0.08em;text-transform:uppercase}
.admin-section-actions{display:flex;gap:6px}
.adm-btn{padding:4px 10px;border-radius:6px;font-size:10px;font-weight:600;border:1px solid var(--pb-border);background:transparent;color:var(--pb-text-dim);cursor:pointer;font-family:inherit;transition:var(--transition)}
.adm-btn:hover{border-color:var(--pb-blue);color:var(--pb-blue-light)}
.adm-btn.danger{border-color:rgba(241,66,11,0.3);color:var(--pb-orange-light)}.adm-btn.danger:hover{background:rgba(241,66,11,0.08)}

.agent-table{width:100%;border-collapse:collapse;font-size:12px}
.agent-table th{text-align:left;padding:8px 12px;font-size:10px;font-weight:600;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.08em;border-bottom:1px solid var(--pb-border);background:rgba(0,0,0,0.15)}
.agent-table td{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,0.03);color:var(--pb-text-muted);vertical-align:middle}
.agent-table tr:hover td{background:rgba(42,147,193,0.03)}
.agent-name-cell{display:flex;align-items:center;gap:8px}
.agent-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.agent-dot.online{background:var(--pb-green);box-shadow:0 0 6px rgba(34,197,94,0.5)}
.agent-dot.idle{background:var(--pb-yellow);box-shadow:0 0 6px rgba(245,158,11,0.4)}
.agent-dot.offline{background:var(--pb-text-dim)}
.agent-dot.error{background:var(--pb-orange);box-shadow:0 0 6px rgba(241,66,11,0.5)}
.agent-name-text{font-weight:600;color:var(--pb-text)}
.agent-role{font-size:10px;color:var(--pb-text-dim)}
.agent-tag{display:inline-block;padding:2px 6px;border-radius:4px;font-size:9px;font-weight:700}
.agent-tag.active{background:rgba(34,197,94,0.1);color:var(--pb-green)}
.agent-tag.idle{background:rgba(245,158,11,0.1);color:var(--pb-yellow)}
.agent-tag.stopped{background:rgba(255,255,255,0.05);color:var(--pb-text-dim)}
.agent-tag.error{background:rgba(241,66,11,0.1);color:var(--pb-orange-light)}
.agent-actions{display:flex;gap:4px}
.agent-act-btn{width:24px;height:24px;border-radius:4px;border:1px solid var(--pb-border);background:transparent;color:var(--pb-text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.agent-act-btn:hover{border-color:var(--pb-blue);color:var(--pb-blue-light)}
.agent-act-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}

/* Activity Feed */
.activity-feed{max-height:200px;overflow-y:auto}
.activity-item{display:flex;align-items:flex-start;gap:10px;padding:8px 16px;border-bottom:1px solid rgba(255,255,255,0.02)}
.activity-time{font-size:10px;color:var(--pb-text-dim);min-width:52px;flex-shrink:0;padding-top:1px}
.activity-dot{width:6px;height:6px;border-radius:50%;margin-top:5px;flex-shrink:0}
.activity-dot.info{background:var(--pb-blue)}.activity-dot.warn{background:var(--pb-yellow)}.activity-dot.err{background:var(--pb-orange)}.activity-dot.ok{background:var(--pb-green)}
.activity-text{font-size:12px;color:var(--pb-text-muted);line-height:1.4}
.activity-text strong{color:var(--pb-text)}

/* Resource Monitor */
.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px 16px}
.resource-card{display:flex;flex-direction:column;gap:6px}
.resource-label{font-size:10px;font-weight:600;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.08em;display:flex;justify-content:space-between}
.resource-bar{height:6px;border-radius:3px;background:rgba(255,255,255,0.04);overflow:hidden}
.resource-fill{height:100%;border-radius:3px;transition:width .6s ease}
.resource-fill.low{background:var(--pb-green)}.resource-fill.mid{background:var(--pb-yellow)}.resource-fill.high{background:var(--pb-orange)}

/* Alerts */
.alert-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,0.02)}
.alert-icon{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.alert-icon.warn{background:rgba(245,158,11,0.1)}.alert-icon.crit{background:rgba(241,66,11,0.1)}.alert-icon.info{background:rgba(42,147,193,0.1)}
.alert-body{flex:1;min-width:0}
.alert-title{font-size:12px;font-weight:600;color:var(--pb-text)}
.alert-desc{font-size:11px;color:var(--pb-text-dim);margin-top:1px}
.alert-time{font-size:10px;color:var(--pb-text-dim);flex-shrink:0}
.alert-dismiss{width:20px;height:20px;border-radius:4px;border:none;background:transparent;color:var(--pb-text-dim);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}
.alert-dismiss:hover{color:var(--pb-orange);background:rgba(241,66,11,0.08)}

/* Audit Log */
.audit-table{width:100%;border-collapse:collapse;font-size:11px}
.audit-table th{text-align:left;padding:6px 12px;font-size:9px;font-weight:600;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.08em;border-bottom:1px solid var(--pb-border);background:rgba(0,0,0,0.15)}
.audit-table td{padding:6px 12px;border-bottom:1px solid rgba(255,255,255,0.02);color:var(--pb-text-dim)}
.audit-action{font-weight:600;color:var(--pb-text-muted)}

/* ===== CONSTITUTION & GOVERNANCE TABS ===== */
.const-area,.gov-area{display:none;flex-direction:column;flex:1;overflow-y:auto;z-index:1;position:relative;background:rgba(10,14,26,0.92);padding:24px}
.deploy-area,.settings-area{display:none;flex-direction:column;flex:1;overflow:hidden;z-index:1;position:relative;background:rgba(10,14,26,0.92)}
.const-area.visible,.gov-area.visible{display:flex}
.deploy-area.visible,.settings-area.visible{display:flex}
.clients-area{display:none;flex-direction:column;flex:1;overflow-y:auto;z-index:1;position:relative;background:rgba(10,14,26,0.92);padding:24px}
.clients-area.visible{display:flex}
.tab-menu-item[data-panel]{display:none}
/* Defense-in-depth: panels and tab content stay in main-col (grid col 2) */
.panel,.agents-subtab-content,.aa-dash{min-width:0}
.panel{display:none;flex-direction:column;flex:1;overflow:hidden;z-index:1;position:relative;background:rgba(10,14,26,0.92)}
.panel.visible{display:flex}
.sidebar .nav-item[data-panel]{display:flex;align-items:center;gap:10px;padding:8px 16px;border-radius:var(--pb-radius-sm);color:var(--pb-text-muted);text-decoration:none;font-size:13px;font-weight:500;transition:var(--transition);cursor:pointer}
.sidebar .nav-item[data-panel]:hover{background:rgba(42,147,193,0.08);color:var(--pb-text)}
.sidebar .nav-item[data-panel].active{background:rgba(42,147,193,0.12);color:var(--pb-blue)}
.sidebar .nav-item[data-panel] .nav-icon{font-size:16px;width:20px;text-align:center}
.deploy-subtab{padding:8px 16px;font-size:12px;font-weight:600;color:var(--pb-text-dim);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:inherit;transition:all .15s}
.deploy-subtab.active{color:var(--pb-blue-light);border-bottom-color:var(--pb-blue)}
.deploy-subtab:hover{color:var(--pb-text)}
.deploy-card-actions{padding-top:8px;border-top:1px solid var(--pb-border);margin-top:8px;display:flex}
.deploy-visit-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;font-size:11px;font-weight:600;color:var(--pb-blue-light);background:rgba(42,147,193,0.1);border:1px solid rgba(42,147,193,0.3);border-radius:5px;text-decoration:none;font-family:inherit;transition:all .15s}
.deploy-visit-btn:hover{background:rgba(42,147,193,0.25);border-color:var(--pb-blue)}
.deploy-visit-btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
/* Deployment status badges */
.dep-status-badge{font-size:9px;font-weight:700;padding:3px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:0.06em}
.dep-status-live{background:rgba(34,197,94,0.12);color:var(--pb-green)}
.dep-status-staging{background:rgba(234,179,8,0.15);color:#eab308}
.dep-status-maintenance{background:rgba(245,158,11,0.15);color:#f59e0b}
.dep-status-offline{background:rgba(239,68,68,0.12);color:#ef4444}
/* Deployment card actions - extend with gap */
.deploy-card-actions{gap:6px;flex-wrap:wrap}
.dep-edit-btn,.dep-delete-btn{padding:5px 10px;font-size:10px}
.dep-delete-btn{color:#ef4444;background:rgba(239,68,68,0.08);border-color:rgba(239,68,68,0.3)}
.dep-delete-btn:hover{background:rgba(239,68,68,0.2);border-color:#ef4444}
/* Health indicator */
.dep-health-indicator{display:inline-flex;align-items:center;gap:4px}
.dep-health-dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.dep-health-dot.ok{background:var(--pb-green)}
.dep-health-dot.down{background:#ef4444}
.dep-health-dot.checking{background:var(--pb-yellow);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
/* Mod action buttons (legacy) */
.mod-action-btn{padding:8px 16px;border-radius:6px;border:1px solid var(--pb-border);background:rgba(255,255,255,0.04);color:var(--pb-text-muted);cursor:pointer;font-size:11px;font-weight:600;font-family:inherit;display:flex;align-items:center;gap:6px;transition:all .15s}
.mod-action-btn:hover{background:rgba(255,255,255,0.08);border-color:var(--pb-blue);color:var(--pb-blue-light)}
.mod-action-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* ── Mods Pane v2 ─────────────────────────────────────────── */
.mods-toolbar{display:flex;gap:4px;margin-bottom:20px;flex-wrap:wrap;padding:6px;border-radius:8px;background:rgba(255,255,255,0.02);border:1px solid var(--pb-border)}
.mods-toolbar-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:none;background:none;color:var(--pb-text-dim);cursor:pointer;font-size:11px;font-weight:500;font-family:inherit;border-radius:5px;transition:all .15s}
.mods-toolbar-btn:hover{background:rgba(255,255,255,0.06);color:var(--pb-text)}
.mods-toolbar-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.mods-section{margin-bottom:20px}
.mods-section-title{font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;color:var(--pb-text-dim);letter-spacing:0.1em;text-transform:uppercase;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.mods-count{font-family:'Inter',sans-serif;font-size:10px;font-weight:500;color:var(--pb-text-dim);background:rgba(255,255,255,0.04);padding:1px 6px;border-radius:3px;letter-spacing:0;text-transform:none}
.mods-panels-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.mods-panel-card{padding:10px 12px;border-radius:6px;border:1px solid var(--pb-border);background:rgba(255,255,255,0.02);display:flex;flex-direction:column;gap:4px}
.mods-panel-info{display:flex;align-items:center;gap:8px}
.mods-panel-name{font-size:12px;font-weight:600;color:var(--pb-text)}
.mods-panel-badge{font-size:9px;font-weight:600;padding:1px 6px;border-radius:3px;background:rgba(34,197,94,0.1);color:var(--pb-green);text-transform:uppercase;letter-spacing:0.04em}
.mods-panel-desc{font-size:10px;color:var(--pb-text-dim);line-height:1.4}
.mods-panel-link{align-self:flex-start;font-size:10px;font-weight:600;color:var(--pb-blue);background:none;border:none;cursor:pointer;padding:0;font-family:inherit;text-decoration:none;opacity:0.8;transition:opacity .15s}
.mods-panel-link:hover{opacity:1;text-decoration:underline}
.mods-module-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border-radius:6px;overflow:hidden;border:1px solid var(--pb-border)}
.mods-module{padding:7px 10px;background:rgba(255,255,255,0.015);display:flex;align-items:baseline;gap:8px;min-width:0}
.mods-module code{font-size:11px;font-weight:600;color:var(--pb-text);white-space:nowrap;flex-shrink:0}
.mods-module span{font-size:10px;color:var(--pb-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mods-css-list{display:flex;gap:6px;flex-wrap:wrap}
.mods-css-list code{font-size:10px;color:var(--pb-text-dim);padding:2px 8px;border-radius:3px;background:rgba(255,255,255,0.03);border:1px solid var(--pb-border)}
.mods-footer{font-size:10px;color:var(--pb-text-dim);padding-top:16px;border-top:1px solid var(--pb-border);letter-spacing:0.02em}
@media(max-width:900px){.mods-module-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.mods-module-grid{grid-template-columns:1fr}.mods-panels-row{grid-template-columns:1fr}.mods-toolbar-btn span{display:none}}
/* Deploy cards grid within depCards */
#depCards{grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:1024px){#depCards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){#depCards{grid-template-columns:1fr}}
.deploy-pane{display:none}
.deploy-pane.active{display:block}
#modsPane.active{display:block}
.const-header,.gov-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.const-header-title,.gov-header-title{font-family:'Oswald',sans-serif;font-size:18px;font-weight:700;color:var(--pb-blue-light);letter-spacing:0.06em;display:flex;align-items:center;gap:10px}
.const-header-title svg,.gov-header-title svg{width:22px;height:22px;stroke:var(--pb-blue);fill:none;stroke-width:1.8}
.const-subtabs,.gov-subtabs{display:flex;gap:4px;margin-bottom:20px;border-bottom:1px solid var(--pb-border);padding-bottom:0}
.const-subtab,.gov-subtab{padding:8px 16px;font-size:12px;font-weight:600;color:var(--pb-text-dim);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:inherit;transition:all .15s}
.const-subtab.active,.gov-subtab.active{color:var(--pb-blue-light);border-bottom-color:var(--pb-blue)}
.const-subtab:hover,.gov-subtab:hover{color:var(--pb-text)}
.profile-hero{display:flex;align-items:center;gap:20px;padding:24px;background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:12px;margin-bottom:24px;flex-wrap:wrap}
.profile-avatar-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.profile-avatar{width:80px;height:80px;border-radius:50%;background:rgba(42,147,193,0.08);border:2px dashed rgba(42,147,193,0.4);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:border-color .2s}
.profile-avatar:hover{border-color:var(--pb-blue)}
.profile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.profile-avatar-btn{font-size:10px;color:var(--pb-blue-light);background:none;border:none;cursor:pointer;font-family:inherit}
.profile-hero-info{flex:1;min-width:160px}
.profile-hero-name{font-size:24px;font-weight:700;color:var(--pb-text);margin-bottom:2px}
.profile-hero-by{font-size:13px;color:var(--pb-text-dim)}
.profile-hero-by span{color:var(--pb-blue-light);font-weight:600}
.profile-hero-tagline{font-size:11px;color:var(--pb-text-dim);margin-top:6px}
.profile-hero-actions{display:flex;gap:8px;flex-wrap:wrap}
.profile-share-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;font-size:12px;font-weight:600;color:var(--pb-blue-light);background:rgba(42,147,193,0.1);border:1px solid rgba(42,147,193,0.3);border-radius:6px;cursor:pointer;font-family:inherit;transition:all .15s}
.profile-share-btn:hover{background:rgba(42,147,193,0.2);border-color:var(--pb-blue)}
.profile-section{margin-bottom:24px}
.profile-section-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--pb-text);margin-bottom:12px;text-transform:uppercase;letter-spacing:0.04em}
.profile-section-title svg{width:18px;height:18px;stroke:var(--pb-blue);flex-shrink:0}
.profile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.profile-grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.profile-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.profile-grid-4{grid-template-columns:1fr}}
.profile-card{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:6px;padding:8px 10px}
.profile-card[onclick]:hover{cursor:pointer;border-color:var(--pb-blue)}
.profile-card[onclick] .profile-label::after{content:' \270E';opacity:0.3;font-size:10px}
.profile-contact-row[onclick]:hover{cursor:pointer;background:rgba(42,147,193,0.06);border-radius:4px}
.profile-contact-row[onclick] .profile-contact-label::after{content:' \270E';opacity:0.3;font-size:10px}
.profile-label{font-size:9px;color:var(--pb-text-dim);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:2px}
.profile-value{font-size:12px;color:var(--pb-text);font-weight:500}
.profile-contact-card{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:8px;padding:14px 16px}
.profile-contact-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.04)}
.profile-contact-row:last-of-type{border-bottom:none}
.profile-contact-label{font-size:11px;color:var(--pb-text-dim);font-weight:500}
.profile-contact-value{font-size:12px;color:var(--pb-text);font-weight:600}
.profile-share-contact-btn{display:inline-flex;align-items:center;gap:5px;margin-top:10px;padding:6px 12px;font-size:11px;font-weight:600;color:var(--pb-blue-light);background:rgba(42,147,193,0.1);border:1px solid rgba(42,147,193,0.3);border-radius:5px;cursor:pointer;font-family:inherit;transition:all .15s}
.profile-share-contact-btn:hover{background:rgba(42,147,193,0.2);border-color:var(--pb-blue)}
.profile-mission{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:8px;padding:16px;font-size:13px;color:var(--pb-text);line-height:1.6;font-style:italic;border-left:3px solid var(--pb-blue)}
.profile-key-wrap{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:8px;padding:14px}
.profile-key-field{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.profile-key-input{flex:1;background:rgba(0,0,0,0.2);border:1px solid var(--pb-border);border-radius:6px;padding:8px 12px;font-size:12px;color:var(--pb-text);font-family:'JetBrains Mono',monospace;letter-spacing:0.02em}
.profile-key-toggle,.profile-key-copy{background:rgba(42,147,193,0.1);border:1px solid rgba(42,147,193,0.3);border-radius:6px;padding:6px 8px;cursor:pointer;display:flex;align-items:center;transition:all .15s}
.profile-key-toggle:hover,.profile-key-copy:hover{background:rgba(42,147,193,0.2)}
.profile-key-toggle svg,.profile-key-copy svg{stroke:var(--pb-blue-light)}
.profile-key-regen{font-size:11px;color:var(--pb-text-dim);background:none;border:none;cursor:pointer;font-family:inherit;text-decoration:underline;text-underline-offset:2px}
.profile-key-regen:hover{color:var(--pb-blue-light)}
.const-pane,.gov-pane{display:none}
.const-pane.active,.gov-pane.active{display:block}
.rule-card{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:12px;padding:16px;margin-bottom:12px;transition:all .15s}
.rule-card:hover{border-color:var(--pb-border-hover)}
.rule-card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px}
.rule-card-title{font-size:14px;font-weight:700;color:var(--pb-text)}
.rule-card-badge{font-size:9px;font-weight:700;padding:3px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:0.06em}
.rule-card-badge.enforced{background:rgba(34,197,94,0.12);color:var(--pb-green)}
.rule-card-badge.warning{background:rgba(245,158,11,0.12);color:#f59e0b}
.rule-card-badge.critical{background:rgba(239,68,68,0.12);color:#ef4444}
.rule-card-body{font-size:12px;color:var(--pb-text-muted);line-height:1.6;margin-bottom:10px}
.rule-card-meta{display:flex;gap:12px;font-size:10px;color:var(--pb-text-dim)}
.rule-card-meta span{display:flex;align-items:center;gap:4px}
.rule-card-actions{display:flex;gap:6px;margin-top:10px}
.rule-card-actions button{padding:5px 12px;font-size:11px;font-weight:600;border-radius:6px;cursor:pointer;font-family:inherit;transition:all .15s}
.rule-btn-edit{background:rgba(42,147,193,0.08);color:var(--pb-blue-light);border:1px solid rgba(42,147,193,0.2)}
.rule-btn-edit:hover{background:rgba(42,147,193,0.15)}
.rule-btn-delete{background:rgba(239,68,68,0.06);color:#ef4444;border:1px solid rgba(239,68,68,0.15)}
.rule-btn-delete:hover{background:rgba(239,68,68,0.12)}
.rule-btn-toggle{background:rgba(34,197,94,0.06);color:var(--pb-green);border:1px solid rgba(34,197,94,0.15)}
.rule-btn-toggle.is-enable{background:rgba(42,147,193,0.25);color:#fff;border:1px solid rgba(42,147,193,0.7);box-shadow:0 0 10px rgba(42,147,193,0.4);font-weight:700}
.rule-card.disabled,.gov-card.disabled{position:relative}
.rule-card.disabled .rule-card-header,.rule-card.disabled .rule-card-body,.rule-card.disabled .rule-card-meta,.rule-card.disabled .rule-btn-edit,.rule-card.disabled .rule-btn-delete,
.gov-card.disabled .gov-card-header,.gov-card.disabled .gov-card-body,.gov-card.disabled .gov-card-meta{opacity:0.35;filter:grayscale(0.5)}
.rule-card.disabled .rule-card-badge,.gov-card.disabled .gov-card-badge{background:rgba(255,255,255,0.05);color:var(--pb-text-dim)}
.add-rule-btn{display:flex;align-items:center;gap:6px;padding:10px 18px;background:var(--pb-blue);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s}
.add-rule-btn:hover{background:var(--pb-blue-dark);box-shadow:0 2px 12px rgba(42,147,193,0.3)}
.add-rule-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5}
.rule-agent-tag{display:inline-block;padding:2px 8px;font-size:10px;font-weight:600;border-radius:4px;background:rgba(168,85,247,0.1);color:#a855f7;margin-right:4px}
.rule-empty{text-align:center;padding:40px 20px;color:var(--pb-text-dim);font-size:13px}
.rule-empty svg{width:40px;height:40px;stroke:var(--pb-text-dim);fill:none;stroke-width:1.2;margin-bottom:12px;opacity:0.4}
/* Gov specific */
.gov-section{margin-bottom:24px}
.gov-section-title{font-family:'Oswald',sans-serif;font-size:13px;font-weight:700;color:var(--pb-text-muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.gov-section-title svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.gov-card{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:12px;padding:16px;margin-bottom:10px}
.gov-card-title{font-size:14px;font-weight:700;color:var(--pb-text);margin-bottom:6px}
.gov-card-body{font-size:12px;color:var(--pb-text-muted);line-height:1.6}
.gov-card-footer{display:flex;gap:8px;margin-top:10px;align-items:center}
/* Light + girly overrides */
[data-theme="light"] .const-area,[data-theme="light"] .deploy-area,[data-theme="light"] .settings-area{background:#e8eef4}
[data-theme="light"] .rule-card,[data-theme="light"] .gov-card{background:#edf2f7;border-color:rgba(42,80,120,0.1)}
[data-theme="light"] .rule-card-title,[data-theme="light"] .gov-card-title{color:#1a1a2e}
[data-theme="light"] .rule-card-body,[data-theme="light"] .gov-card-body{color:#4a5568}
[data-theme="light"] .rule-card-meta span{color:#718096}
[data-theme="light"] .gov-section-title{color:#4a5568}
[data-theme="light"] .gov-card-footer span{color:#718096}
[data-theme="light"] .const-header-title{color:#1a6a8f}
[data-theme="light"] .const-subtab,[data-theme="light"] .deploy-subtab{color:#718096}
[data-theme="light"] .const-subtab.active,[data-theme="light"] .deploy-subtab.active{color:#1a6a8f;border-bottom-color:#2a93c1}
[data-theme="light"] .const-subtab:hover,[data-theme="light"] .deploy-subtab:hover{color:#1a1a2e}
[data-theme="light"] .mod-action-btn{background:rgba(0,0,0,0.04);color:#4a5568;border-color:rgba(42,80,120,0.15)}
[data-theme="light"] .mod-action-btn:hover{background:rgba(42,147,193,0.08);color:#1a6a8f;border-color:#2a93c1}
[data-theme="light"] .mods-toolbar{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.08)}
[data-theme="light"] .mods-toolbar-btn{color:#718096}
[data-theme="light"] .mods-toolbar-btn:hover{background:rgba(0,0,0,0.04);color:#1a1a2e}
[data-theme="light"] .mods-section-title{color:#718096}
[data-theme="light"] .mods-count{background:rgba(0,0,0,0.04);color:#718096}
[data-theme="light"] .mods-panel-card{background:#f7fafc;border-color:rgba(0,0,0,0.08)}
[data-theme="light"] .mods-panel-name{color:#1a1a2e}
[data-theme="light"] .mods-module{background:rgba(0,0,0,0.015)}
[data-theme="light"] .mods-module-grid{border-color:rgba(0,0,0,0.08)}
[data-theme="light"] .mods-module code{color:#1a1a2e}
[data-theme="light"] .mods-module span{color:#718096}
[data-theme="light"] .mods-css-list code{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.08);color:#718096}
[data-theme="light"] .mods-footer{color:#718096;border-top-color:rgba(0,0,0,0.08)}
[data-theme="light"] .dep-delete-btn{color:#dc2626;background:rgba(220,38,38,0.06);border-color:rgba(220,38,38,0.2)}
[data-theme="light"] .const-subtabs{border-bottom-color:rgba(0,0,0,0.08)}
[data-theme="girly"] .const-area,[data-theme="girly"] .deploy-area,[data-theme="girly"] .settings-area{background:#fff1f2}
[data-theme="girly"] .rule-card,[data-theme="girly"] .gov-card{background:#fff;border-color:rgba(225,29,72,0.1)}
[data-theme="girly"] .rule-card-title,[data-theme="girly"] .gov-card-title{color:#2e1a2b}
[data-theme="girly"] .rule-card-body,[data-theme="girly"] .gov-card-body{color:#6b4a68}
[data-theme="girly"] .rule-card-meta span{color:#a07a9d}
[data-theme="girly"] .gov-section-title{color:#6b4a68}
[data-theme="girly"] .gov-card-footer span{color:#a07a9d}
[data-theme="girly"] .const-header-title{color:#be123c}
[data-theme="girly"] .const-subtab{color:#a07a9d}
[data-theme="girly"] .const-subtab.active{color:#be123c;border-bottom-color:#be123c}
[data-theme="girly"] .mod-action-btn{background:rgba(225,29,72,0.04);color:#9f1239;border-color:rgba(225,29,72,0.15)}
[data-theme="girly"] .mod-action-btn:hover{background:rgba(225,29,72,0.1);color:#e11d48;border-color:#e11d48}
[data-theme="girly"] .mods-toolbar{background:rgba(225,29,72,0.02);border-color:rgba(225,29,72,0.08)}
[data-theme="girly"] .mods-toolbar-btn{color:#a07a9d}
[data-theme="girly"] .mods-toolbar-btn:hover{background:rgba(225,29,72,0.06);color:#be123c}
[data-theme="girly"] .mods-section-title{color:#a07a9d}
[data-theme="girly"] .mods-count{background:rgba(225,29,72,0.05);color:#a07a9d}
[data-theme="girly"] .mods-panel-card{background:#fff;border-color:rgba(225,29,72,0.1)}
[data-theme="girly"] .mods-panel-name{color:#2e1a2b}
[data-theme="girly"] .mods-panel-badge{background:rgba(225,29,72,0.08);color:#e11d48}
[data-theme="girly"] .mods-panel-link{color:#e11d48}
[data-theme="girly"] .mods-module{background:rgba(225,29,72,0.01)}
[data-theme="girly"] .mods-module-grid{border-color:rgba(225,29,72,0.08)}
[data-theme="girly"] .mods-module code{color:#2e1a2b}
[data-theme="girly"] .mods-module span{color:#a07a9d}
[data-theme="girly"] .mods-css-list code{background:rgba(225,29,72,0.03);border-color:rgba(225,29,72,0.1);color:#a07a9d}
[data-theme="girly"] .mods-footer{color:#a07a9d;border-top-color:rgba(225,29,72,0.08)}
[data-theme="girly"] .dep-delete-btn{color:#e11d48;background:rgba(225,29,72,0.06);border-color:rgba(225,29,72,0.2)}
[data-theme="girly"] .const-subtab:hover{color:#2e1a2b}
[data-theme="girly"] .const-subtabs{border-bottom-color:rgba(225,29,72,0.08)}
[data-theme="girly"] .rule-btn-edit{background:rgba(225,29,72,0.08);color:#be123c;border-color:rgba(225,29,72,0.2)}
[data-theme="girly"] .add-rule-btn{background:#be123c}
[data-theme="girly"] .add-rule-btn:hover{background:#9f1239}

/* ===== THEME DROPDOWN (tablet & mobile) ===== */
.theme-dropdown{display:none;position:relative}
.theme-quick-btns{display:flex;align-items:center;gap:2px}
.theme-quick-btns button{background:none;border:1px solid transparent;border-radius:6px;padding:5px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0.5;transition:all .2s}
.theme-quick-btns button:hover{opacity:1;border-color:var(--pb-border)}
.theme-quick-btns button.active{opacity:1;border-color:var(--pb-blue);background:rgba(42,147,193,0.1)}
.theme-quick-btns button svg{width:14px;height:14px;stroke:var(--pb-text-muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-dropdown-btn{width:32px;height:32px;border:1px solid var(--pb-border);border-radius:6px;background:rgba(255,255,255,0.04);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.theme-dropdown-btn svg{width:16px;height:16px;stroke:var(--pb-text-muted);fill:none;stroke-width:2}
.theme-dropdown-menu{display:none;position:absolute;top:100%;right:0;margin-top:6px;background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.4);z-index:300;overflow:hidden;min-width:150px}
.theme-dropdown-menu.open{display:block}
.theme-dropdown-item{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;font-size:12px;font-weight:600;color:var(--pb-text-muted);transition:background .15s;border:none;background:none;width:100%;font-family:inherit}
.theme-dropdown-item:hover{background:rgba(255,255,255,0.06)}
.theme-dropdown-item.active{color:var(--pb-blue-light)}
.theme-dropdown-item svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
[data-theme="light"] .theme-dropdown-btn{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1)}
[data-theme="light"] .theme-dropdown-menu{background:#fff;border-color:rgba(0,0,0,0.1);box-shadow:0 8px 24px rgba(0,0,0,0.12)}
[data-theme="light"] .theme-dropdown-item:hover{background:rgba(0,0,0,0.04)}
[data-theme="girly"] .theme-dropdown-btn{background:rgba(225,29,72,0.06);border-color:rgba(225,29,72,0.15)}
[data-theme="girly"] .theme-dropdown-menu{background:#fff;border-color:rgba(225,29,72,0.12);box-shadow:0 8px 24px rgba(225,29,72,0.1)}
[data-theme="girly"] .theme-dropdown-item:hover{background:rgba(225,29,72,0.04)}
[data-theme="girly"] .theme-dropdown-item.active{color:#be123c}

/* ===== TABLET (iPad portrait, split view, narrow windows) ===== */
/* ===== TABLET & MOBILE (iPad + phones) ===== */
/* Base: hide mobile tabbar */
.mobile-tabbar{display:none}
@media(max-width:1024px){
  html,body{overflow:hidden;height:100%;-webkit-text-size-adjust:100%}
  .app{grid-template-columns:1fr;grid-template-rows:48px 1fr;height:100vh;height:100dvh;padding-bottom:56px}
  /* Top nav */
  .topnav{padding:0 10px;height:48px}
  .topnav-left{gap:6px}
  .topnav-brand{font-size:13px}
  .topnav-divider{display:none}
  .topnav-page{display:none}
  .topnav-right{gap:4px}
  .topnav-right .ctx-pill{display:none}
  .topnav-right .online-pill{display:none}
  .tn-update .update-panel{width:280px;right:-10px}
  /* Sidebar as overlay */
  .sidebar{position:fixed;top:48px;left:0;bottom:56px;width:280px;z-index:500;transform:translateX(-100%);transition:transform .25s ease;border-right:1px solid var(--pb-border);box-shadow:4px 0 20px rgba(0,0,0,0.3)}
  .sidebar.mobile-open{transform:translateX(0)}
  .sidebar-overlay{display:none;position:fixed;top:48px;left:0;right:0;bottom:56px;background:rgba(0,0,0,0.5);z-index:499}
  .sidebar-overlay.visible{display:block}
  /* Bookmarks bar: hide on mobile to reclaim space */
  .bookmarks-bar{display:none}
  /* Main content area — must override desktop grid-column:2 to grid-column:1 for single-column mobile grid */
  .main-col{grid-row:2;grid-column:1;overflow:hidden;height:calc(100vh - 48px - 56px);height:calc(100dvh - 48px - 56px)}
  .chat-area{padding-bottom:0;height:calc(100vh - 48px - 56px);height:calc(100dvh - 48px - 56px);max-height:calc(100vh - 48px - 56px);max-height:calc(100dvh - 48px - 56px);overflow:hidden}
  .chat-messages-wrapper{flex:1;min-height:0}
  .chat-messages{padding:10px 12px;overflow-y:auto}
  .msg-bubble{font-size:14px;padding:10px 12px}
  .composer{padding:6px 10px 4px;flex-shrink:0}
  .composer-box{padding:8px 10px 6px}
  .composer-textarea{font-size:13px;min-height:18px;max-height:80px}
  .composer-toolbar{flex-wrap:wrap;gap:4px}
  .composer-tools-left{flex-wrap:wrap;gap:2px}
  .composer-tools-right{flex-shrink:0}
  .composer-divider{display:none}
  .c-btn{width:28px;height:28px}
  .c-task-btn,.c-send-btn{padding:5px 8px;font-size:10px}
  .brain-banner{font-size:9px;padding:4px 0;flex-shrink:0}
  /* Panels */
  .tasks-area,.files-area,.teams-area,.todo-area,.agents-area,.refer-area,.about-area,.hub-area,.payments-area,.clients-area{overflow-y:auto}
  .ar-grid{grid-template-columns:repeat(2,1fr) !important;padding:10px}
  .f-grid{grid-template-columns:repeat(3,1fr)}
  .files-body{flex-direction:column}
  .files-grid{grid-template-columns:repeat(2,1fr) !important;gap:8px}
  .files-tree{width:100% !important;max-height:160px;border-right:none;border-bottom:1px solid var(--pb-border);overflow-y:auto}
  .files-tree.collapsed{width:100% !important}
  .files-content{padding:10px;overflow-y:auto}
  .files-header{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .files-toolbar{flex-wrap:wrap;gap:6px}
  .ft-btn{font-size:10px;padding:4px 8px}
  .f-card{padding:8px}
  .f-name{font-size:11px}
  .f-meta{font-size:9px}
  .fleet-stats{grid-template-columns:repeat(2,1fr)}
  .tasks-list-table{font-size:11px}
  .tasks-list-table th,.tasks-list-table td{padding:8px 6px}
  .resource-grid{grid-template-columns:1fr}
  .hub-stats{grid-template-columns:repeat(2,1fr)}
  .teams-hotkeys{gap:4px;padding:4px 10px 6px}
  .hk{padding:2px 6px;font-size:9px}
  /* Bottom tab bar */
  .mobile-tabbar{display:flex !important;align-items:center;justify-content:space-around;background:rgba(10,14,26,0.97);border-top:1px solid var(--pb-border);padding:4px 0 env(safe-area-inset-bottom,4px);z-index:9999;position:fixed;bottom:0;left:0;right:0;height:56px}
  .mob-tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 8px;border:none;background:none;cursor:pointer;color:var(--pb-text-dim);font-size:9px;font-family:inherit;font-weight:600;transition:color .15s}
  .mob-tab svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
  .mob-tab.active{color:var(--pb-blue-light)}
  .mob-tab .mob-badge{position:absolute;top:-2px;right:-6px;width:14px;height:14px;border-radius:50%;background:var(--pb-orange);color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;font-weight:700}
  /* Theme overrides for mobile tabbar */
  [data-theme="light"] .mobile-tabbar{background:rgba(226,232,240,0.97);border-top-color:rgba(42,80,120,0.1)}
  [data-theme="light"] .sidebar-overlay{background:rgba(0,0,0,0.3)}
  [data-theme="girly"] .mobile-tabbar{background:linear-gradient(90deg,#ffe4e6,#fecdd3,#ffe4e6);border-top:2px solid rgba(225,29,72,0.15)}
  [data-theme="girly"] .mob-tab.active{color:#be123c}
  [data-theme="girly"] .sidebar-overlay{background:rgba(0,0,0,0.2)}
  .notif-panel,.update-panel{width:calc(100vw - 20px);right:-50px}
  .mobile-menu-btn{display:flex !important}
  .modal-content{width:95vw;max-height:80vh;margin:10vh auto}
  /* Show theme dropdown, hide inline toggle */
  .theme-toggle-wrap{display:none !important}
  .theme-dropdown{display:block}

  /* === MOBILE RESPONSIVENESS FIXES (Priority 1: Chat) === */

  /* 1. Chat subtabs: compact on small screens */
  .chat-subtabs{gap:1px;padding:1px;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-shrink:0}
  .chat-subtab{padding:4px 8px;font-size:11px;gap:3px;white-space:nowrap;flex-shrink:0}
  .chat-subtab svg{width:11px;height:11px}

  /* 2. Top bar: hide non-essential buttons, tighten spacing */
  .topnav-right .theme-quick-btns{display:none}
  .topnav-right #restartBtn{display:none}

  /* 3. Message bubbles: prevent text overflow */
  .msg{max-width:92%;box-sizing:border-box}
  .msg-content{min-width:0;max-width:100%;overflow:hidden}
  .msg-bubble{word-break:break-word;overflow-wrap:anywhere;max-width:100%;min-width:0;overflow-x:auto;box-sizing:border-box}
  .msg-bubble p,.msg-bubble li,.msg-bubble h1,.msg-bubble h2,.msg-bubble h3,.msg-bubble h4,.msg-bubble h5,.msg-bubble h6,.msg-bubble strong,.msg-bubble em{overflow-wrap:anywhere;word-break:break-word}
  .msg-bubble pre{max-width:100%;overflow-x:auto;overflow-y:visible;white-space:pre-wrap;word-wrap:break-word}
  .msg-bubble img{max-width:100%;height:auto}
  .msg-bubble code{word-break:break-all}
  .msg-bubble pre code{word-break:normal;white-space:pre-wrap}
  .chat-messages{overflow-x:hidden;width:100%;box-sizing:border-box}

  /* 4. Chat header actions: icon-only on mobile */
  .ch-search{padding:4px 8px;font-size:0;line-height:0}
  .ch-search svg{width:14px;height:14px;font-size:initial}
  .poke-btn{padding:4px 8px;font-size:0;line-height:0}
  .poke-btn svg{width:14px;height:14px;font-size:initial}
  .chat-header{padding:6px 10px}
  .chat-header-actions{gap:4px !important}

  /* 5. Topic selector: compact */
  .topic-selector{padding:2px 10px 1px;font-size:10px}
  .topic-selector-label{display:none}
  .topic-selector-pill{padding:2px 8px;font-size:10px}

  /* 6. Inbox toolbar: wrap and compact */
  .inbox-toolbar{flex-wrap:wrap;padding:6px 10px;gap:6px}
  .inbox-toolbar-right{flex-wrap:wrap;gap:4px}
  .inbox-sync-btn{padding:3px 8px;font-size:9px}

  /* 7. Attachment preview: constrain width */
  .attach-preview-bar{padding:6px 10px}
  .attach-preview-name{max-width:120px}

  /* 8. Agents subtabs: scrollable */
  .agents-subtabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .agents-subtab{padding:8px 14px;font-size:11px;white-space:nowrap;flex-shrink:0}

  /* 9. CC message text: prevent overflow */
  .cc-msg-text{word-break:break-word;overflow-wrap:anywhere}

  /* 10. Deploy/Constitution subtabs: scrollable */
  .const-subtabs,.gov-subtabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .const-subtab,.gov-subtab{white-space:nowrap;flex-shrink:0;padding:6px 12px;font-size:11px}
  .deploy-subtab{white-space:nowrap;flex-shrink:0}

  /* 11. Hub panel grids */
  .hub-actions-grid{grid-template-columns:repeat(2,1fr)}

  /* 12. Tasks table: horizontal scroll on very narrow */
  .tasks-list-table{display:block;overflow-x:auto}

  /* 13. Todo area compact */
  .todo-area{padding:10px}

  /* 14. Kanban / custom panels */
  .kanban-board{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* 15. Settings area */
  .settings-toggle-card{padding:12px}

  /* 16. Email detail on mobile */
  .email-detail-header{padding:10px 12px}
  .email-detail-body{padding:10px 12px;word-break:break-word;overflow-wrap:anywhere}

  /* 17. Dock Chat: completely disabled on mobile */
  .app.chat-docked #chatArea{position:static !important;left:auto !important;right:auto !important;bottom:auto !important;border-top:none !important;height:auto !important;max-height:none !important;box-shadow:none !important;z-index:1 !important}
  .dock-btn{display:none !important}
  .dock-resize{display:none !important}
  .topnav-dock{display:none !important}
}

/* ===== VERY SMALL (iPad Slide Over ~320px, small phones) ===== */
@media(max-width:400px){
  .topnav-brand{display:none}
  .f-grid{grid-template-columns:1fr}
  .mob-tab{padding:4px 4px;font-size:8px}
  .mob-tab svg{width:18px;height:18px}
  .sidebar{width:85vw}
  .files-grid{grid-template-columns:1fr !important}
  .msg-avatar{width:24px;height:24px;font-size:9px}
  .composer-tools-left .c-btn{width:24px;height:24px}
  .composer-tools-left .c-btn:nth-child(n+4){display:none}
  .c-task-btn,.c-send-btn{padding:4px 6px;font-size:9px}

  /* Chat subtabs: even more compact */
  .chat-subtab{padding:3px 6px;font-size:10px}
  .chat-header{padding:4px 8px}
  .msg{max-width:95%}
  .msg-bubble{padding:8px 10px;font-size:13px}

  /* Hide text labels on chat header buttons entirely */
  .ch-search{gap:0}
  .poke-btn{gap:0}

  /* Agent grid: single column */
  .ar-grid{grid-template-columns:1fr !important}

  /* Inbox toolbar: stack vertically */
  .inbox-toolbar{flex-direction:column;align-items:stretch}
  .inbox-toolbar-right{justify-content:flex-start}

  /* Fleet stats: single column */
  .fleet-stats{grid-template-columns:1fr}
}

@media(min-width:1025px){
  .theme-dropdown{display:none !important}
  .mobile-tabbar{display:none !important}
  .sidebar-overlay{display:none !important}
  .mobile-menu-btn{display:none !important}
}

/* Theme Toggle */
.theme-toggle-wrap{display:flex;align-items:center;gap:2px;background:rgba(255,255,255,0.04);border:1px solid var(--pb-border);border-radius:6px;padding:2px}
.theme-toggle-btn{width:26px;height:26px;border:none;border-radius:4px;background:transparent;color:var(--pb-text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.theme-toggle-btn:hover{color:var(--pb-text-muted);background:rgba(255,255,255,0.06)}
.theme-toggle-btn.active{background:rgba(42,147,193,0.15);color:var(--pb-blue-light)}
.settings-theme-btn{display:flex;align-items:center;gap:10px;padding:14px 24px;border-radius:var(--pb-radius);border:1px solid var(--pb-border);background:var(--pb-surface);color:var(--pb-text-muted);cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;transition:all .2s}
.settings-theme-btn:hover{border-color:var(--pb-border-hover);color:var(--pb-text)}
.settings-theme-btn.active{border-color:var(--pb-blue);background:rgba(42,147,193,0.1);color:var(--pb-blue-light)}
.settings-toggle-card{cursor:pointer;transition:all .2s}
.settings-toggle-card:hover{border-color:var(--pb-border-hover)}
.settings-toggle-card.full-width{grid-column:1 / -1}
.settings-select{width:100%;padding:8px 32px 8px 12px;background:var(--pb-surface);color:var(--pb-text);border:1px solid var(--pb-border);border-radius:6px;font-size:13px;font-family:inherit;cursor:pointer;margin-top:6px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;transition:border-color 0.2s,box-shadow 0.2s}
.settings-select:hover{border-color:var(--pb-blue)}
.settings-select:focus{border-color:var(--pb-blue);box-shadow:0 0 0 2px rgba(42,147,193,0.15)}
.settings-select option{background:var(--pb-surface);color:var(--pb-text);padding:8px}
/* Toggle switch */
.settings-toggle-switch{flex-shrink:0}
.settings-toggle-track{width:40px;height:22px;background:var(--pb-border);border-radius:11px;position:relative;transition:background 0.2s;cursor:pointer}
.settings-toggle-card[data-on="true"] .settings-toggle-track{background:var(--pb-blue)}
.settings-toggle-thumb{width:18px;height:18px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:transform 0.2s;box-shadow:0 1px 3px rgba(0,0,0,0.3)}
.settings-toggle-card[data-on="true"] .settings-toggle-thumb{transform:translateX(18px)}

/* ============================================ */
/* HMI VOICE OVERLAY (Ported from Portal 1.x)  */
/* ============================================ */
/* Let's Talk area */
.letstalk-area{display:none;flex-direction:column;flex:1;position:relative;overflow:hidden}
.letstalk-area.visible{display:flex}

/* HMI Voice Panel — inline panel layout */
.hmi-voice-panel {
  display: flex; flex: 1; overflow: hidden;
  background: var(--pb-bg);
}
.hmi-voice-panel__main {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; overflow: hidden; padding: 16px 24px 14px; gap: 6px; min-width: 0;
  position: relative;
}
/* Canvas wrapper — the HERO. Fills available space, stays circular */
.hmi-voice-panel__canvas-wrap {
  position: relative; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; min-height: 140px; width: auto;
  max-height: calc(100vh - 380px); max-width: min(500px, 60vw, calc(100vh - 380px));
  height: min(500px, 60vw, calc(100vh - 380px));
  margin: 0 auto;
}
/* Ambient glow behind the canvas — creates depth */
.hmi-voice-panel__canvas-wrap::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 115%; height: 115%; border-radius: 50%;
  background: radial-gradient(circle, rgba(42,147,193,0.07) 0%, rgba(42,147,193,0.02) 45%, transparent 70%);
  pointer-events: none; z-index: 0;
  transition: opacity 0.6s ease;
}
.hmi-voice-panel__canvas-wrap canvas {
  position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; z-index: 1;
}

/* Hidden readouts — kept in DOM for JS, invisible */
.hmi-voice-overlay__readouts-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.hmi-voice-overlay__audio-level { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.hmi-voice-overlay__level-bar { width: 3px; height: 20px; }

/* Transcript as right sidebar */
.hmi-voice-panel__transcript {
  display: none; flex-direction: column;
  width: 300px; flex-shrink: 0;
  background: var(--pb-surface); border-left: 1px solid var(--pb-border);
  overflow: hidden;
}
@media (min-width: 900px) {
  .hmi-voice-panel__transcript { display: flex; }
}
.hmi-transcript__header {
  padding: 14px 16px 10px; border-bottom: 1px solid var(--pb-border);
  font-size: 11px; color: var(--pb-text-muted); letter-spacing: 0.06em;
  text-transform: uppercase; font-family: 'Inter', sans-serif; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.hmi-transcript__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pb-green, #22c55e); animation: hmitDot 2s infinite; }
@keyframes hmitDot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.hmi-transcript__messages {
  flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin; scrollbar-color: rgba(42,147,193,0.2) transparent;
}
.hmi-transcript__msg {
  font-size: 13px; line-height: 1.6; font-family: 'Inter', sans-serif;
  padding: 10px 14px; border-radius: var(--pb-radius, 12px); max-width: 100%; word-wrap: break-word;
  animation: hmitFadeIn 0.3s ease;
}
@keyframes hmitFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.hmi-transcript__msg--user {
  background: rgba(42,147,193,0.08); border: 1px solid rgba(42,147,193,0.12);
  color: var(--pb-text);
}
.hmi-transcript__msg--ai {
  background: var(--pb-surface-2); border: 1px solid var(--pb-border);
  color: var(--pb-text);
}
.hmi-transcript__msg-label {
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600; margin-bottom: 4px; display: block;
}
.hmi-transcript__msg--user .hmi-transcript__msg-label { color: var(--pb-blue); }
.hmi-transcript__msg--ai .hmi-transcript__msg-label { color: var(--pb-text-muted); }

/* Logo — centered in canvas */
.hmi-voice-overlay__logo { position: absolute; z-index: 2; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; transition: transform 0.1s ease-out; }
.hmi-voice-overlay__logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 18px rgba(42,147,193,0.35)); animation: hmiLogoSpin 30s linear infinite; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
@keyframes hmiLogoSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Identity — name below canvas, subtle */
.hmi-voice-overlay__identity { text-align: center; z-index: 10; margin-top: -2px; flex-shrink: 0; }
.hmi-voice-overlay__name {
  font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600;
  letter-spacing: 0.22em; color: var(--pb-text);
  text-shadow: 0 0 30px rgba(42,147,193,0.12);
}

/* Status line */
.hmi-voice-overlay__mic-status {
  font-size: 11px; color: var(--pb-text-muted); font-family: 'Inter', sans-serif;
  font-weight: 500; letter-spacing: 0.04em; text-align: center;
  max-width: 280px; margin: 0 auto; line-height: 1.4;
  word-wrap: break-word; overflow-wrap: break-word;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.hmi-voice-overlay__mic-status.listening {
  color: var(--pb-blue); font-weight: 600;
  text-shadow: 0 0 20px rgba(42,147,193,0.2);
}

/* Controls */
.hmi-voice-overlay__controls {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  z-index: 100; flex-shrink: 0; width: 100%; max-width: 400px;
}
.hmi-voice-overlay__mic-row { display: flex; align-items: center; gap: 14px; }

/* Mic button — premium glassmorphism circle */
.hmi-voice-overlay__mic {
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(42,147,193,0.08); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(42,147,193,0.25);
  color: var(--pb-text); font-size: 24px; cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(42,147,193,0), 0 4px 12px rgba(0,0,0,0.1);
}
.hmi-voice-overlay__mic:hover {
  border-color: var(--pb-blue); background: rgba(42,147,193,0.14);
  box-shadow: 0 0 24px rgba(42,147,193,0.15), 0 0 0 1px rgba(42,147,193,0.08);
  transform: scale(1.05);
}
.hmi-voice-overlay__mic.active {
  background: rgba(42,147,193,0.18); border-color: var(--pb-blue);
  box-shadow: 0 0 30px rgba(42,147,193,0.3), 0 0 60px rgba(42,147,193,0.08);
  animation: hmiMicPulse 1.5s ease-in-out infinite;
}
@keyframes hmiMicPulse {
  0%,100% { box-shadow: 0 0 30px rgba(42,147,193,0.3), 0 0 60px rgba(42,147,193,0.08); }
  50% { box-shadow: 0 0 40px rgba(42,147,193,0.45), 0 0 80px rgba(42,147,193,0.12); }
}

/* State buttons — pill toggles */
.hmi-voice-overlay__state-controls { display: flex; gap: 6px; }
.hmi-voice-overlay__state-btn {
  padding: 6px 14px; border-radius: 20px;
  background: var(--pb-surface-2); border: 1px solid var(--pb-border);
  color: var(--pb-text-muted); font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 500; cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); letter-spacing: 0.02em;
}
.hmi-voice-overlay__state-btn:hover {
  border-color: var(--pb-border-hover); color: var(--pb-text);
  background: var(--pb-surface-3);
}
.hmi-voice-overlay__state-btn.active {
  background: rgba(42,147,193,0.12); border-color: var(--pb-blue);
  color: var(--pb-blue-light); font-weight: 600;
  box-shadow: 0 0 12px rgba(42,147,193,0.06);
}

/* Voice selector row — tucked away, subtle */
.hmi-voice-overlay__voice-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: var(--pb-radius-sm, 8px);
  background: var(--pb-surface-2); border: 1px solid var(--pb-border);
  width: 100%; max-width: 320px; justify-content: center;
  opacity: 0.65; transition: opacity 0.25s ease;
}
.hmi-voice-overlay__voice-row:hover,
.hmi-voice-overlay__voice-row:focus-within { opacity: 1; }
.hmi-voice-overlay__voice-label {
  font-size: 11px; color: var(--pb-text-dim); font-weight: 500;
  font-family: 'Inter', sans-serif; white-space: nowrap;
}
.hmi-voice-overlay__voice-select {
  flex: 1; background: transparent; color: var(--pb-text);
  border: none; font-size: 11px; font-family: 'Inter', sans-serif;
  cursor: pointer; outline: none; max-width: 200px;
  -webkit-appearance: none; appearance: none;
}
.hmi-voice-overlay__voice-select option { background: var(--pb-surface); color: var(--pb-text); }

/* Settings toggle — minimal gear icon */
.hmi-voice-settings-toggle {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  color: var(--pb-text-dim); cursor: pointer; border-radius: var(--pb-radius-sm, 8px);
  border: 1px solid var(--pb-border); transition: all 0.2s; flex-shrink: 0;
  font-size: 11px; background: transparent;
}
.hmi-voice-settings-toggle:hover { color: var(--pb-text); border-color: var(--pb-border-hover); }
.hmi-voice-settings-toggle.open { color: var(--pb-blue); border-color: var(--pb-blue); }
.hmi-voice-settings-toggle .arrow { display: inline-block; transition: transform 0.25s ease; }
.hmi-voice-settings-toggle.open .arrow { transform: rotate(180deg); }

/* Settings panel — portal card */
.hmi-voice-settings { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.25s ease; opacity: 0; width: 100%; max-width: 340px; }
.hmi-voice-settings.open { max-height: 200px; opacity: 1; }
.hmi-voice-settings__card {
  background: var(--pb-surface); border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius, 12px); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px; margin-top: 6px;
}
.hmi-voice-settings__row {
  display: flex; align-items: center; gap: 8px;
}
.hmi-voice-settings__label {
  font-size: 11px; color: var(--pb-text-dim); font-weight: 500;
  font-family: 'Inter', sans-serif; white-space: nowrap; min-width: 70px;
}
.hmi-voice-settings__input {
  flex: 1; background: var(--pb-surface-2); color: var(--pb-text);
  border: 1px solid var(--pb-border); border-radius: var(--pb-radius-sm, 8px);
  padding: 5px 10px; font-size: 12px; font-family: 'Inter', sans-serif;
  outline: none; transition: border-color 0.2s; min-width: 0;
}
.hmi-voice-settings__input:focus { border-color: var(--pb-blue); }
.hmi-voice-settings__save-btn {
  background: rgba(42,147,193,0.1); border: 1px solid var(--pb-border);
  color: var(--pb-blue); font-size: 11px; font-weight: 600;
  padding: 5px 12px; border-radius: var(--pb-radius-sm, 8px);
  cursor: pointer; font-family: 'Inter', sans-serif; transition: all 0.2s;
  white-space: nowrap;
}
.hmi-voice-settings__save-btn:hover { background: rgba(42,147,193,0.2); border-color: var(--pb-blue); }

/* Engine toggle — restyled */
.hmi-engine-toggle {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--pb-border); border-radius: 20px;
  overflow: hidden; flex-shrink: 0;
}
.hmi-engine-btn {
  padding: 4px 12px; font-size: 10px; font-family: 'Inter', sans-serif;
  font-weight: 500; cursor: pointer; transition: all 0.2s;
  background: transparent; color: var(--pb-text-dim); border: none;
}
.hmi-engine-btn.active { background: rgba(42,147,193,0.12); color: var(--pb-blue); }
.hmi-engine-btn.active.el-active { background: rgba(201,162,39,0.12); color: var(--gold, #c9a227); }
.hmi-engine-divider { width: 1px; background: var(--pb-border); align-self: stretch; }

/* ElevenLabs gear button */
.hmi-el-gear-btn {
  width: 28px; height: 28px; border-radius: var(--pb-radius-sm, 8px);
  background: transparent; border: 1px solid var(--pb-border);
  color: var(--pb-text-dim); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; flex-shrink: 0;
}
.hmi-el-gear-btn:hover { background: rgba(42,147,193,0.08); color: var(--pb-text); border-color: var(--pb-border-hover); }
.hmi-el-gear-btn.active { color: var(--gold, #c9a227); border-color: var(--gold, #c9a227); background: rgba(201,162,39,0.08); }

/* ElevenLabs settings modal */
#elSettingsModal {
  display: none; position: fixed; inset: 0; z-index: 10010;
  align-items: center; justify-content: center;
  background: rgba(1,4,9,0.85); backdrop-filter: blur(6px);
}
#elSettingsModal.open { display: flex; }
.el-modal-box {
  background: var(--pb-surface, #111827); border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius, 12px); padding: 24px 28px; width: 360px; max-width: 92vw;
  box-shadow: var(--pb-shadow);
}
.el-modal-title {
  font-family: 'Oswald', sans-serif; font-size: 14px; letter-spacing: 0.1em;
  color: var(--gold, #c9a227); margin-bottom: 6px; text-transform: uppercase;
}
.el-modal-sub {
  font-size: 11px; color: var(--pb-text-dim); font-family: 'Inter', sans-serif;
  margin-bottom: 18px; line-height: 1.5;
}
.el-modal-label {
  font-size: 10px; color: var(--pb-text-muted); font-family: 'Inter', sans-serif;
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 6px; display: block;
}
.el-modal-input {
  width: 100%; box-sizing: border-box; background: var(--pb-surface-2);
  border: 1px solid var(--pb-border); border-radius: var(--pb-radius-sm, 8px);
  color: var(--pb-text); font-family: 'JetBrains Mono', monospace; font-size: 14px;
  padding: 8px 12px; margin-bottom: 14px; outline: none;
  transition: border-color 0.2s;
}
.el-modal-input:focus { border-color: var(--pb-blue); }
.el-voice-select {
  width: 100%; box-sizing: border-box; background: var(--pb-surface-2);
  border: 1px solid var(--pb-border); border-radius: var(--pb-radius-sm, 8px);
  color: var(--pb-blue); font-family: 'Inter', sans-serif; font-size: 14px;
  padding: 8px 12px; margin-bottom: 18px; cursor: pointer; outline: none;
  -webkit-appearance: menulist; appearance: menulist;
}
.el-modal-row { display: flex; gap: 10px; margin-top: 4px; }
.el-modal-btn {
  flex: 1; padding: 10px 0; border-radius: var(--pb-radius-sm, 8px);
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer; transition: all 0.2s; border: 1px solid transparent;
  min-height: 40px;
}
.el-modal-btn.save { background: rgba(42,147,193,0.12); border-color: rgba(42,147,193,0.3); color: var(--pb-blue); }
.el-modal-btn.save:hover { background: rgba(42,147,193,0.25); }
.el-modal-btn.test { background: rgba(201,162,39,0.08); border-color: rgba(201,162,39,0.3); color: var(--gold, #c9a227); }
.el-modal-btn.test:hover { background: rgba(201,162,39,0.15); }
.el-modal-btn.cancel { background: transparent; border-color: var(--pb-border); color: var(--pb-text-dim); }
.el-modal-btn.cancel:hover { border-color: var(--pb-border-hover); color: var(--pb-text); }
.el-modal-link {
  font-size: 10px; color: var(--pb-text-dim); text-decoration: none;
  font-family: 'Inter', sans-serif; display: block; text-align: center;
  margin-top: 12px; transition: color 0.2s;
}
.el-modal-link:hover { color: var(--pb-blue); }
.el-status-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.2); margin-right: 6px;
  vertical-align: middle; transition: background 0.3s;
}
.el-status-dot.ok { background: var(--pb-green, #22c55e); }
.el-status-dot.error { background: var(--pb-orange, #f1420b); }

/* HMI Voice Panel — mobile responsive */
@media (max-width: 768px) {
  .hmi-voice-panel { flex-direction: column; }
  .hmi-voice-panel__main { padding: 12px 16px 12px; gap: 4px; }
  .hmi-voice-panel__canvas-wrap { max-width: 260px; max-height: calc(100vh - 320px); }
  .hmi-voice-overlay__logo { width: 50px; height: 50px; }
  .hmi-voice-overlay__identity { margin-top: -4px; }
  .hmi-voice-overlay__name { font-size: 18px; letter-spacing: 0.12em; }
  .hmi-voice-overlay__controls { gap: 6px; }
  .hmi-voice-overlay__mic { width: 52px; height: 52px; font-size: 20px; }
  .hmi-voice-overlay__mic-row { gap: 10px; }
  .hmi-voice-overlay__mic-status { font-size: 10px; }
  .hmi-voice-overlay__state-controls { flex-wrap: wrap; justify-content: center; gap: 4px; }
  .hmi-voice-overlay__state-btn { padding: 4px 10px; font-size: 10px; }
  .hmi-voice-overlay__voice-row { max-width: 100%; opacity: 0.5; }
  .hmi-voice-settings { max-width: 100%; }
  .hmi-engine-btn { padding: 6px 12px; font-size: 11px; min-height: 32px; }
  .hmi-el-gear-btn { width: 30px; height: 30px; font-size: 15px; }
}
@media (max-width: 400px) {
  .hmi-voice-panel__canvas-wrap { max-width: 220px; max-height: calc(100vh - 340px); }
  .hmi-voice-overlay__logo { width: 36px; height: 36px; }
  .hmi-voice-overlay__identity { margin-top: -2px; }
  .hmi-voice-overlay__name { font-size: 16px; }
  .hmi-voice-overlay__mic { width: 46px; height: 46px; font-size: 18px; }
  .hmi-voice-overlay__state-btn { padding: 4px 8px; font-size: 9px; }
}

/* HMI Voice Panel — docked mode (less vertical space) */
.app.chat-docked .hmi-voice-panel__canvas-wrap { max-width: 280px; max-height: calc(50vh - 100px); }
.app.chat-docked .hmi-voice-panel__main { padding: 8px 16px; gap: 4px; justify-content: center; }
.app.chat-docked .hmi-voice-overlay__logo { width: 50px; height: 50px; }
.app.chat-docked .hmi-voice-overlay__identity { margin-top: -4px; }
.app.chat-docked .hmi-voice-overlay__name { font-size: 18px; letter-spacing: 0.12em; }
.app.chat-docked .hmi-voice-overlay__controls { gap: 4px; }
.app.chat-docked .hmi-voice-overlay__mic { width: 48px; height: 48px; font-size: 20px; }
.app.chat-docked .hmi-voice-overlay__mic-status { font-size: 10px; }
.app.chat-docked .hmi-voice-overlay__state-controls { gap: 4px; }
.app.chat-docked .hmi-voice-overlay__state-btn { padding: 4px 10px; font-size: 10px; }
.app.chat-docked .hmi-voice-overlay__voice-row { display: none; }
.app.chat-docked .hmi-voice-settings-toggle { display: none; }
.app.chat-docked .hmi-voice-settings { display: none !important; }

/* ── AI Organogram ──────────────────────────────────────────────── */
#subtab-ai-organogram{align-items:stretch}
#subtab-ai-organogram *{box-sizing:border-box}
#aio-canvas .aio-card{width:200px !important;max-width:200px !important;min-width:200px !important;border-radius:12px;overflow:hidden;cursor:pointer;position:relative;border:1.5px solid rgba(42,147,193,0.4);box-shadow:0 4px 16px rgba(0,0,0,0.18);transition:all 0.15s ease;background:var(--pb-card);flex-shrink:0;display:block}
#aio-canvas .aio-group{align-items:center;width:auto}
#aio-canvas .aio-children{align-items:flex-start}
#aio-canvas .aio-child-wrap{align-items:center;width:auto}
.aio-card:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,0.28)}
.aio-card.search-match{box-shadow:0 0 0 3px var(--pb-blue)}
.aio-card.search-dim{opacity:0.2}
.aio-card-body{padding:12px;display:flex;align-items:center;gap:10px}
.aio-initials{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.aio-pill{font-size:8px;font-weight:700;padding:1px 6px;border-radius:3px;text-transform:uppercase;letter-spacing:0.03em;display:inline-block}
.aio-status-pill{font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:0.04em}
.aio-skill-tag{background:rgba(0,229,160,0.12);color:#00E5A0;font-size:9px;padding:1px 5px;border-radius:3px;display:inline-block}
.aio-group{display:flex;flex-direction:column;align-items:center;gap:0;position:relative}
.aio-children{display:flex;gap:36px;margin-top:0;position:relative;justify-content:center;padding-top:28px}
.aio-vline{width:2px;height:28px;background:rgba(42,147,193,0.4);position:relative;overflow:visible}
.aio-hline{height:2px;background:rgba(42,147,193,0.4);position:absolute;top:0;overflow:visible}
.aio-child-wrap{display:flex;flex-direction:column;align-items:center;position:relative}
.aio-drop{width:2px;height:28px;background:rgba(42,147,193,0.4);position:absolute;top:-28px;left:50%;transform:translateX(-50%)}
.aio-beep{position:absolute;width:6px;height:6px;border-radius:50%;background:#00E5A0;box-shadow:0 0 6px #00E5A0,0 0 12px rgba(0,229,160,0.4);opacity:0;pointer-events:none}
.aio-vline>.aio-beep{left:50%;transform:translateX(-50%);animation:aio-beep-down 3.5s ease-in-out infinite}
.aio-hline .aio-beep-left{top:-2px;animation:aio-beep-left 3.5s ease-in-out infinite;animation-delay:1s}
.aio-hline .aio-beep-right{top:-2px;animation:aio-beep-right 3.5s ease-in-out infinite;animation-delay:1s}
.aio-drop>.aio-beep{left:50%;transform:translateX(-50%);animation:aio-beep-child 3.5s ease-in-out infinite;animation-delay:1.7s}
@keyframes aio-beep-down{0%,12%{top:-2px;opacity:0}16%{opacity:1}40%{top:calc(100% - 4px);opacity:1}50%,100%{top:calc(100% - 4px);opacity:0}}
@keyframes aio-beep-left{0%,25%{left:50%;opacity:0}30%{opacity:1}55%{left:-2px;opacity:1}65%,100%{left:-2px;opacity:0}}
@keyframes aio-beep-right{0%,25%{left:50%;opacity:0}30%{opacity:1}55%{left:calc(100% - 4px);opacity:1}65%,100%{left:calc(100% - 4px);opacity:0}}
@keyframes aio-beep-child{0%,42%{top:-30px;opacity:0}48%{opacity:1}72%{top:-4px;opacity:1}82%,100%{top:-4px;opacity:0}}
.aio-collapse-btn{width:22px;height:22px;border-radius:50%;background:var(--pb-card);border:1.5px solid rgba(42,147,193,0.3);font-size:10px;cursor:pointer;color:var(--pb-text-dim);display:flex;align-items:center;justify-content:center;transition:all 0.15s;z-index:2}
.aio-collapse-btn:hover{background:var(--pb-blue);color:#fff;border-color:var(--pb-blue)}
.aio-canvas{border-radius:12px;flex:1;overflow:auto;padding:32px;position:relative;cursor:grab;background-color:var(--pb-card);background-image:radial-gradient(circle,rgba(42,147,193,0.08) 1px,transparent 1px);background-size:24px 24px;margin:0 16px 16px}
.aio-zoom-ctrl{position:fixed;bottom:24px;left:272px;display:flex;align-items:center;gap:4px;background:var(--pb-card);border:1px solid var(--pb-border);border-radius:8px;padding:4px 8px;box-shadow:0 2px 12px rgba(0,0,0,0.1);z-index:100}
.aio-zoom-ctrl button{padding:2px 8px;font-size:11px;background:rgba(255,255,255,0.06);border:1px solid var(--pb-border);border-radius:4px;color:var(--pb-text-dim);cursor:pointer}
.aio-zoom-ctrl button:hover{background:rgba(42,147,193,0.15);color:var(--pb-blue-light)}
.aio-panel{display:none;position:fixed;right:0;top:0;width:340px;height:100vh;background:#0a0e1a;border-left:1px solid var(--pb-border);box-shadow:-4px 0 24px rgba(0,0,0,0.3);z-index:9998;padding:24px;overflow-y:auto;color:var(--pb-text)}
.aio-panel-field{margin-bottom:12px}
.aio-panel-label{font-size:11px;font-weight:600;display:block;margin-bottom:4px;color:var(--pb-text-dim)}
.aio-panel-input{width:100%;padding:7px 10px;border-radius:6px;border:1px solid var(--pb-border);background:rgba(255,255,255,0.05);color:var(--pb-text);font-size:12px;box-sizing:border-box}
.aio-panel-input:focus{outline:none;border-color:var(--pb-blue)}

/* ══════════════════════════════════════════════════════════════
   KANBAN TO DO BOARD
   ══════════════════════════════════════════════════════════════ */
.kb-board{display:flex;gap:12px;height:100%;min-height:300px;padding:4px 0}
.kb-col{flex:1;min-width:0;display:flex;flex-direction:column;background:rgba(255,255,255,0.02);border:1px solid var(--pb-border);border-radius:10px;overflow:hidden;min-height:200px}
.kb-col-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 8px;border-top:3px solid transparent;background:rgba(255,255,255,0.02);flex-shrink:0}
.kb-col-title{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.07em;color:rgba(255,255,255,0.65)}
.kb-col-count{font-size:11px;font-weight:700;color:var(--pb-text-dim);background:rgba(255,255,255,0.06);border-radius:10px;padding:0 6px;min-width:20px;text-align:center}
.kb-cards{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:8px}
.kb-card{background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:8px;padding:10px 12px;cursor:pointer;transition:border-color .15s,box-shadow .15s;user-select:none}
.kb-card:hover{border-color:rgba(42,147,193,0.4);box-shadow:0 2px 8px rgba(0,0,0,0.2)}
.kb-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:6px}
.kb-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:4px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em}
.kb-badge svg{flex-shrink:0}
.kb-badge-email{background:rgba(42,147,193,0.12);color:var(--pb-blue-light)}
.kb-badge-manual{background:rgba(34,197,94,0.1);color:var(--pb-green)}
.kb-card-time{font-size:9px;color:var(--pb-text-dim);white-space:nowrap;margin-left:auto}
.kb-card-title{font-size:12px;font-weight:600;color:var(--pb-text);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:4px}
.kb-card-from{font-size:10px;color:var(--pb-text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-empty{padding:20px;text-align:center;font-size:11px;color:var(--pb-text-dim);opacity:0.6}

/* Drawer */
.kb-drawer-overlay{display:none;position:fixed;inset:0;z-index:9990;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px)}
.kb-drawer-overlay.open{display:block}
.kb-drawer{position:absolute;right:0;top:0;width:380px;max-width:95vw;height:100vh;background:#0a0e1a;border-left:1px solid var(--pb-border);box-shadow:-6px 0 32px rgba(0,0,0,0.4);display:flex;flex-direction:column;overflow:hidden}
.kb-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--pb-border);flex-shrink:0}
.kb-drawer-title-label{font-family:'Oswald',sans-serif;font-size:13px;font-weight:700;color:var(--pb-blue-light);letter-spacing:0.05em}
.kb-drawer-close{background:none;border:none;color:var(--pb-text-dim);font-size:18px;cursor:pointer;padding:2px 6px;border-radius:4px;transition:color .15s;line-height:1;font-family:inherit}
.kb-drawer-close:hover{color:var(--pb-text);background:rgba(255,255,255,0.06)}
.kb-drawer-body{flex:1;overflow-y:auto;padding:20px}
.kb-detail-title{font-size:15px;font-weight:700;color:var(--pb-text);line-height:1.4;margin-bottom:16px}
.kb-drawer-meta{background:rgba(255,255,255,0.02);border:1px solid var(--pb-border);border-radius:8px;margin-bottom:16px;overflow:hidden}
.kb-drawer-meta-row{display:flex;align-items:flex-start;gap:10px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,0.04)}
.kb-drawer-meta-row:last-child{border-bottom:none}
.kb-drawer-meta-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--pb-text-dim);flex-shrink:0;min-width:56px;padding-top:2px}
.kb-drawer-meta-row span:last-child{font-size:11px;color:var(--pb-text);word-break:break-all}
.kb-drawer-section-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--pb-text-dim);margin-bottom:6px}
.kb-detail-body{font-size:12px;color:var(--pb-text-muted);line-height:1.7;white-space:pre-wrap;word-break:break-word;background:rgba(255,255,255,0.02);border:1px solid var(--pb-border);border-radius:8px;padding:12px;max-height:280px;overflow-y:auto}
.kb-detail-status-sel{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--pb-border);background:var(--pb-surface);color:var(--pb-text);font-size:12px;font-family:inherit;outline:none;cursor:pointer}
.kb-detail-status-sel:focus{border-color:var(--pb-blue)}
.kb-drawer-footer{padding:16px 20px;border-top:1px solid var(--pb-border);flex-shrink:0}
.kb-drawer-delete-btn{width:100%;padding:8px;border-radius:8px;border:1px solid rgba(239,68,68,0.25);background:rgba(239,68,68,0.06);color:#f87171;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.kb-drawer-delete-btn:hover{background:rgba(239,68,68,0.15);border-color:rgba(239,68,68,0.5)}

/* Add task modal */
.kb-add-overlay{display:none;position:fixed;inset:0;z-index:9995;background:rgba(0,0,0,0.65);backdrop-filter:blur(5px);align-items:center;justify-content:center}
.kb-add-overlay.open{display:flex}
.kb-add-modal{background:var(--pb-bg);border:1px solid var(--pb-border);border-radius:12px;width:440px;max-width:92vw;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.kb-add-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--pb-border)}
.kb-add-label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:rgba(255,255,255,0.5);margin-bottom:5px}
.kb-add-input{width:100%;padding:9px 12px;border-radius:8px;border:1px solid var(--pb-border);background:var(--pb-surface);color:var(--pb-text);font-size:13px;font-family:inherit;outline:none;box-sizing:border-box;margin-bottom:12px;resize:vertical}
.kb-add-input:focus{border-color:var(--pb-blue)}

/* Responsive — stack columns on mobile */
@media (max-width:600px){
  .kb-board{flex-direction:column;height:auto}
  .kb-col{flex:none;min-height:120px}
  .kb-drawer{width:100vw}
}

/* Light theme */
[data-theme="light"] .kb-col{background:rgba(42,80,120,0.03);border-color:rgba(42,80,120,0.12)}
[data-theme="light"] .kb-col-header{background:rgba(42,80,120,0.04)}
[data-theme="light"] .kb-card{background:#fff;border-color:rgba(42,80,120,0.12)}
[data-theme="light"] .kb-drawer{background:#f1f5f9}
[data-theme="light"] .kb-detail-body{background:rgba(42,80,120,0.03);border-color:rgba(42,80,120,0.12)}
[data-theme="light"] .kb-drawer-meta{background:rgba(42,80,120,0.03);border-color:rgba(42,80,120,0.1)}
[data-theme="light"] .kb-add-modal{background:#f1f5f9}

/* =====================================================================
   SKILLS SHOP PANEL — Premium Redesign
   =====================================================================
   Design goals: App-store quality dark theme with subtle gradients,
   glass-morphism detail overlay, refined typography hierarchy, and
   micro-interactions that feel intentional.

   All class names preserved from skills.js rendering.
   Uses existing design tokens from base.css exclusively.
   ===================================================================== */

/* ---------------------------------------------------------------------------
   Category accent colors — each category gets a signature hue
   applied via left-border gradient on cards and section header accents
   --------------------------------------------------------------------------- */
:root {
  --sk-cat-dev: #3db8f5;          /* Development — blue-light */
  --sk-cat-arch: #8b5cf6;         /* Architecture — purple */
  --sk-cat-sec: #ef4444;          /* Security — red */
  --sk-cat-social: #f59e0b;       /* Social & Content — yellow */
  --sk-cat-infra: #06b6d4;        /* Infrastructure — cyan */
  --sk-cat-comm: #22c55e;         /* Communication — green */
  --sk-cat-cere: #e879f9;         /* Ceremonies — pink/magenta */
  --sk-cat-uncat: var(--pb-text-dim); /* Uncategorized — muted */
  --sk-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------------------------------
   Layout container
   --------------------------------------------------------------------------- */
.skills-area {
  display: none;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.skills-area.visible {
  display: flex;
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */
.skills-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--pb-border);
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(42,147,193,0.04) 0%, transparent 100%);
}

.skills-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.skills-title {
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--pb-text);
  margin: 0;
  letter-spacing: 0.02em;
}

/* Stats — refined pill style */
.skills-stats {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.skills-stat {
  font-size: 11px;
  color: var(--pb-text-muted);
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
   Category pills — refined tag style
   --------------------------------------------------------------------------- */
.skills-category-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.skills-pill {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--pb-border);
  background: transparent;
  color: var(--pb-text-dim);
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: all var(--sk-transition);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.skills-pill:hover {
  border-color: rgba(42,147,193,0.4);
  color: var(--pb-text-muted);
  background: rgba(42,147,193,0.05);
}

.skills-pill.active {
  border-color: var(--pb-blue);
  color: var(--pb-blue-light);
  background: rgba(42,147,193,0.12);
  box-shadow: 0 0 12px rgba(42,147,193,0.1);
}

.skills-pill-count {
  font-size: 9px;
  opacity: 0.5;
  margin-left: 3px;
  font-weight: 400;
}

/* ---------------------------------------------------------------------------
   Search bar — refined with focus animation
   --------------------------------------------------------------------------- */
.skills-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  transition: all var(--sk-transition);
}

.skills-search-row:focus-within {
  border-color: var(--pb-blue);
  box-shadow: 0 0 0 3px rgba(42,147,193,0.1), 0 0 16px rgba(42,147,193,0.06);
  background: rgba(42,147,193,0.03);
}

.skills-search-icon {
  width: 14px;
  height: 14px;
  stroke: var(--pb-text-dim);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  transition: stroke var(--sk-transition);
}

.skills-search-row:focus-within .skills-search-icon {
  stroke: var(--pb-blue);
}

.skills-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--pb-text);
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.01em;
}

.skills-search-input::placeholder {
  color: var(--pb-text-dim);
  opacity: 0.7;
}

/* ---------------------------------------------------------------------------
   Grid area and empty state
   --------------------------------------------------------------------------- */
.skills-grid {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.skills-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 80px 20px;
  color: var(--pb-text-dim);
  font-size: 14px;
  gap: 8px;
}

/* ---------------------------------------------------------------------------
   Category sections — visual dividers with accent
   --------------------------------------------------------------------------- */
.skills-category-section {
  margin-bottom: 32px;
}

.skills-category-section:last-child {
  margin-bottom: 16px;
}

.skills-category-heading {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--pb-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  position: relative;
}

/* Category accent bar — 40px gradient line under heading */
.skills-category-heading::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  border-radius: 1px;
  background: var(--pb-blue);
  opacity: 0.6;
}

.skills-category-count {
  font-size: 10px;
  color: var(--pb-text-dim);
  font-weight: 400;
  font-family: inherit;
  background: rgba(255,255,255,0.04);
  padding: 1px 7px;
  border-radius: 10px;
}

/* ---------------------------------------------------------------------------
   Card grid
   --------------------------------------------------------------------------- */
.skills-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* ---------------------------------------------------------------------------
   Card — premium dark card with gradient accent
   --------------------------------------------------------------------------- */
.skills-card {
  background: linear-gradient(135deg, var(--pb-surface) 0%, rgba(26,37,53,0.8) 100%);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  padding: 16px 18px;
  transition: all var(--sk-transition);
  cursor: default;
  position: relative;
  overflow: hidden;
}

/* Subtle top accent line */
.skills-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pb-blue) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--sk-transition);
}

.skills-card:hover {
  border-color: rgba(42,147,193,0.35);
  background: linear-gradient(135deg, rgba(42,147,193,0.06) 0%, var(--pb-surface) 100%);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 24px rgba(42,147,193,0.06);
  transform: translateY(-1px);
}

.skills-card:hover::before {
  opacity: 1;
}

/* Installed card — green left accent */
.skills-card.installed {
  border-left: 3px solid var(--pb-green);
}

.skills-card.installed::before {
  background: linear-gradient(90deg, var(--pb-green) 0%, transparent 50%);
}

/* ---------------------------------------------------------------------------
   Card header — name + status badge
   --------------------------------------------------------------------------- */
.skills-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.skills-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--pb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  letter-spacing: 0.01em;
}

/* Status badges — more prominent, pill-shaped */
.skills-badge-installed {
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(34,197,94,0.12);
  color: var(--pb-green);
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid rgba(34,197,94,0.2);
}

.skills-badge-available {
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(42,147,193,0.1);
  color: var(--pb-blue-light);
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid rgba(42,147,193,0.15);
}

/* ---------------------------------------------------------------------------
   Card description
   --------------------------------------------------------------------------- */
.skills-card-desc {
  font-size: 12px;
  color: var(--pb-text-dim);
  line-height: 1.6;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Card footer — source badge + action buttons
   --------------------------------------------------------------------------- */
.skills-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.skills-source-badge {
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(250,204,21,0.08);
  color: #facc15;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid rgba(250,204,21,0.15);
  letter-spacing: 0.02em;
}

.skills-card-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

/* ---------------------------------------------------------------------------
   Action buttons — refined with clear hierarchy
   --------------------------------------------------------------------------- */
.skills-btn {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--pb-border);
  background: transparent;
  color: var(--pb-text-dim);
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: all var(--sk-transition);
  letter-spacing: 0.01em;
}

.skills-btn:hover {
  border-color: var(--pb-blue);
  color: var(--pb-text);
  transform: translateY(-1px);
}

.skills-btn:active {
  transform: translateY(0);
}

/* Install button — green accent, primary action feel */
.skills-btn-install {
  border-color: rgba(34,197,94,0.3);
  color: var(--pb-green);
  background: rgba(34,197,94,0.06);
}

.skills-btn-install:hover {
  background: rgba(34,197,94,0.15);
  border-color: rgba(34,197,94,0.5);
  box-shadow: 0 0 12px rgba(34,197,94,0.1);
}

/* Remove button — red accent, destructive action feel */
.skills-btn-remove {
  border-color: rgba(239,68,68,0.3);
  color: #ef4444;
  background: rgba(239,68,68,0.05);
}

.skills-btn-remove:hover {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.5);
  box-shadow: 0 0 12px rgba(239,68,68,0.08);
}

/* View button — blue accent */
.skills-btn-view {
  border-color: rgba(42,147,193,0.25);
  color: var(--pb-blue);
}

.skills-btn-view:hover {
  background: rgba(42,147,193,0.1);
  border-color: rgba(42,147,193,0.5);
}

/* ---------------------------------------------------------------------------
   Detail overlay — glassmorphism elevated card
   --------------------------------------------------------------------------- */
.skills-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 300;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 24px;
  animation: sk-overlay-in 0.2s ease-out;
}

@keyframes sk-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.skills-detail-overlay.open {
  display: flex;
}

/* Detail content card — glass-morphism panel */
.skills-detail-content {
  background: linear-gradient(160deg, rgba(17,24,39,0.97) 0%, rgba(26,37,53,0.97) 100%);
  border: 1px solid rgba(42,147,193,0.2);
  border-radius: 16px;
  max-width: 720px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  padding: 0;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.5),
    0 0 40px rgba(42,147,193,0.06),
    inset 0 1px 0 rgba(255,255,255,0.04);
  animation: sk-card-in 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes sk-card-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Detail header */
.skills-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 0;
  margin-bottom: 4px;
}

.skills-detail-header h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--pb-text);
  margin: 0;
  letter-spacing: 0.02em;
}

.skills-detail-close {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--pb-text-dim);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 8px;
  transition: all var(--sk-transition);
  line-height: 1;
}

.skills-detail-close:hover {
  color: var(--pb-text);
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
}

/* Detail meta row */
.skills-detail-meta {
  display: flex;
  gap: 8px;
  padding: 0 28px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* Detail description */
.skills-detail-desc {
  font-size: 14px;
  color: var(--pb-text-muted);
  line-height: 1.65;
  margin: 0;
  padding: 0 28px 20px;
}

/* ---------------------------------------------------------------------------
   Detail body — markdown content with proper rendering
   --------------------------------------------------------------------------- */
.skills-detail-body {
  font-size: 13px;
  color: var(--pb-text-dim);
  line-height: 1.75;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 24px 28px;
  white-space: pre-wrap;
  word-wrap: break-word;
  background: rgba(0,0,0,0.15);
}

/* Markdown headings */
.skills-detail-body h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--pb-text);
  margin: 28px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  letter-spacing: 0.02em;
}

.skills-detail-body h2:first-child {
  margin-top: 0;
}

.skills-detail-body h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--pb-text-muted);
  margin: 20px 0 8px;
  letter-spacing: 0.02em;
}

.skills-detail-body strong {
  color: var(--pb-text);
  font-weight: 600;
}

/* Inline code */
.skills-detail-body code {
  background: rgba(42,147,193,0.1);
  color: var(--pb-blue-light);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
}

/* Code blocks */
.skills-detail-body pre {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 12px 0;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.6;
}

.skills-detail-body pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--pb-text-dim);
}

/* Lists */
.skills-detail-body ul,
.skills-detail-body ol {
  padding-left: 20px;
  margin: 8px 0;
}

.skills-detail-body li {
  margin-bottom: 4px;
}

/* Links */
.skills-detail-body a {
  color: var(--pb-blue-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(42,147,193,0.3);
  transition: border-color var(--sk-transition);
}

.skills-detail-body a:hover {
  border-bottom-color: var(--pb-blue-light);
}

/* Tables */
.skills-detail-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 12px;
}

.skills-detail-body th,
.skills-detail-body td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.skills-detail-body th {
  color: var(--pb-text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Blockquotes */
.skills-detail-body blockquote {
  border-left: 3px solid var(--pb-blue);
  padding: 8px 16px;
  margin: 12px 0;
  color: var(--pb-text-muted);
  background: rgba(42,147,193,0.04);
  border-radius: 0 6px 6px 0;
}

/* ---------------------------------------------------------------------------
   Detail actions — prominent bottom bar
   --------------------------------------------------------------------------- */
.skills-detail-actions {
  margin: 0;
  padding: 16px 28px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  gap: 10px;
  background: rgba(0,0,0,0.1);
  border-radius: 0 0 16px 16px;
}

/* Larger action buttons in detail view */
.skills-detail-actions .skills-btn {
  padding: 8px 20px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
}

.skills-detail-actions .skills-btn-install {
  background: linear-gradient(135deg, rgba(34,197,94,0.15) 0%, rgba(34,197,94,0.08) 100%);
  border-color: rgba(34,197,94,0.4);
  box-shadow: 0 0 16px rgba(34,197,94,0.08);
}

.skills-detail-actions .skills-btn-install:hover {
  background: linear-gradient(135deg, rgba(34,197,94,0.25) 0%, rgba(34,197,94,0.15) 100%);
  box-shadow: 0 0 24px rgba(34,197,94,0.15);
}

.skills-detail-actions .skills-btn-remove {
  background: linear-gradient(135deg, rgba(239,68,68,0.12) 0%, rgba(239,68,68,0.06) 100%);
  border-color: rgba(239,68,68,0.4);
}

.skills-detail-actions .skills-btn-remove:hover {
  background: linear-gradient(135deg, rgba(239,68,68,0.22) 0%, rgba(239,68,68,0.12) 100%);
}

/* ---------------------------------------------------------------------------
   Detail loading state
   --------------------------------------------------------------------------- */
.skills-detail-loading {
  text-align: center;
  color: var(--pb-text-dim);
  padding: 60px 28px;
  font-size: 13px;
}

/* Loading pulse animation */
.skills-detail-loading::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--pb-blue), transparent);
  animation: sk-loading-pulse 1.5s ease-in-out infinite;
}

@keyframes sk-loading-pulse {
  0%, 100% { opacity: 0.3; transform: scaleX(0.5); }
  50%      { opacity: 1;   transform: scaleX(1); }
}

/* ---------------------------------------------------------------------------
   Responsive adjustments
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .skills-card-row {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
  }

  .skills-header {
    padding: 16px 16px 12px;
  }

  .skills-grid {
    padding: 16px;
  }

  .skills-detail-content {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 12px;
  }

  .skills-detail-header {
    padding: 20px 20px 0;
  }

  .skills-detail-meta,
  .skills-detail-desc {
    padding-left: 20px;
    padding-right: 20px;
  }

  .skills-detail-body {
    padding: 20px;
  }

  .skills-detail-actions {
    padding: 14px 20px;
  }
}

@media (max-width: 640px) {
  .skills-card-row {
    grid-template-columns: 1fr;
  }

  .skills-stats {
    display: none;
  }

  .skills-detail-overlay {
    padding: 12px;
  }
}


/* Category-specific accent colors for section headings and card borders */
[data-category="development"] .skills-category-heading::before{background:linear-gradient(90deg,var(--sk-cat-dev),transparent)}
[data-category="development"] .skills-card:hover{border-color:rgba(61,184,245,0.3)}
[data-category="development"] .skills-card.installed{border-left-color:var(--sk-cat-dev)}
[data-category="architecture"] .skills-category-heading::before{background:linear-gradient(90deg,var(--sk-cat-arch),transparent)}
[data-category="architecture"] .skills-card:hover{border-color:rgba(139,92,246,0.3)}
[data-category="architecture"] .skills-card.installed{border-left-color:var(--sk-cat-arch)}
[data-category="security"] .skills-category-heading::before{background:linear-gradient(90deg,var(--sk-cat-sec),transparent)}
[data-category="security"] .skills-card:hover{border-color:rgba(239,68,68,0.3)}
[data-category="security"] .skills-card.installed{border-left-color:var(--sk-cat-sec)}
[data-category="social---content"] .skills-category-heading::before{background:linear-gradient(90deg,var(--sk-cat-social),transparent)}
[data-category="social---content"] .skills-card:hover{border-color:rgba(245,158,11,0.3)}
[data-category="social---content"] .skills-card.installed{border-left-color:var(--sk-cat-social)}
[data-category="infrastructure"] .skills-category-heading::before{background:linear-gradient(90deg,var(--sk-cat-infra),transparent)}
[data-category="infrastructure"] .skills-card:hover{border-color:rgba(6,182,212,0.3)}
[data-category="infrastructure"] .skills-card.installed{border-left-color:var(--sk-cat-infra)}
[data-category="communication"] .skills-category-heading::before{background:linear-gradient(90deg,var(--sk-cat-comm),transparent)}
[data-category="communication"] .skills-card:hover{border-color:rgba(34,197,94,0.3)}
[data-category="communication"] .skills-card.installed{border-left-color:var(--sk-cat-comm)}
[data-category="ceremonies"] .skills-category-heading::before{background:linear-gradient(90deg,var(--sk-cat-cere),transparent)}
[data-category="ceremonies"] .skills-card:hover{border-color:rgba(232,121,249,0.3)}
[data-category="ceremonies"] .skills-card.installed{border-left-color:var(--sk-cat-cere)}

/* SKILLS SHOP — Light theme overrides */
[data-theme="light"] .skills-area{background:#e8eef4}
[data-theme="light"] .skills-header{background:rgba(255,255,255,0.7);border-bottom-color:rgba(42,80,120,0.1)}
[data-theme="light"] .skills-title{color:#1e3a5f}
[data-theme="light"] .skills-stat{background:rgba(42,80,120,0.06);color:#4a6a8a}
[data-theme="light"] .skills-pill{border-color:rgba(42,80,120,0.15);color:#4a6a8a;background:rgba(255,255,255,0.5)}
[data-theme="light"] .skills-pill:hover{border-color:var(--pb-blue);color:var(--pb-blue);background:rgba(42,147,193,0.06)}
[data-theme="light"] .skills-pill.active{border-color:var(--pb-blue);color:var(--pb-blue);background:rgba(42,147,193,0.1)}
[data-theme="light"] .skills-search-row{background:#ffffff;border-color:rgba(42,80,120,0.12)}
[data-theme="light"] .skills-search-input{color:#1e3a5f}
[data-theme="light"] .skills-search-row:focus-within{border-color:var(--pb-blue);box-shadow:0 0 0 2px rgba(42,147,193,0.15)}
[data-theme="light"] .skills-grid{background:#e8eef4}
[data-theme="light"] .skills-category-heading{color:#2d4a6a}
[data-theme="light"] .skills-card{background:#ffffff;border-color:rgba(42,80,120,0.1);box-shadow:0 1px 3px rgba(30,60,90,0.06)}
[data-theme="light"] .skills-card:hover{border-color:rgba(42,147,193,0.3);box-shadow:0 4px 12px rgba(30,60,90,0.1);background:#ffffff}
[data-theme="light"] .skills-card.installed{border-left-color:#16a34a}
[data-theme="light"] .skills-card-name{color:#1e3a5f}
[data-theme="light"] .skills-card-desc{color:#5a7a9a}
[data-theme="light"] .skills-badge-installed{background:rgba(22,163,74,0.1);color:#16a34a;border-color:rgba(22,163,74,0.2)}
[data-theme="light"] .skills-badge-available{background:rgba(42,147,193,0.08);color:#1a7aaa;border-color:rgba(42,147,193,0.2)}
[data-theme="light"] .skills-source-badge{background:rgba(180,140,20,0.08);color:#a08520;border-color:rgba(180,140,20,0.2)}
[data-theme="light"] .skills-btn{border-color:rgba(42,80,120,0.15);color:#4a6a8a}
[data-theme="light"] .skills-btn:hover{border-color:var(--pb-blue);color:#1a7aaa}
[data-theme="light"] .skills-btn-install{border-color:rgba(22,163,74,0.3);color:#16a34a;background:rgba(22,163,74,0.04)}
[data-theme="light"] .skills-btn-install:hover{background:rgba(22,163,74,0.1)}
[data-theme="light"] .skills-btn-remove{border-color:rgba(220,50,50,0.3);color:#dc3232;background:rgba(220,50,50,0.04)}
[data-theme="light"] .skills-btn-remove:hover{background:rgba(220,50,50,0.1)}
[data-theme="light"] .skills-detail-overlay{background:rgba(30,58,95,0.4)}
[data-theme="light"] .skills-detail-content{background:#ffffff;border-color:rgba(42,80,120,0.15);box-shadow:0 12px 40px rgba(30,60,90,0.15)}
[data-theme="light"] .skills-detail-header h2{color:#1e3a5f}
[data-theme="light"] .skills-detail-close{color:#7a8a9a;background:rgba(42,80,120,0.06)}
[data-theme="light"] .skills-detail-close:hover{background:rgba(42,80,120,0.12);color:#1e3a5f}
[data-theme="light"] .skills-detail-desc{color:#4a6a8a}
[data-theme="light"] .skills-detail-body{color:#3a5a7a;border-top-color:rgba(42,80,120,0.1);background:rgba(42,80,120,0.02)}
[data-theme="light"] .skills-detail-actions{background:rgba(42,80,120,0.03);border-top-color:rgba(42,80,120,0.1)}
[data-theme="light"] .skills-empty{color:#7a8a9a}
[data-theme="light"] .skills-card-footer{border-top-color:rgba(42,80,120,0.06)}

/* SKILLS SHOP — Rose/Girly theme overrides */
[data-theme="girly"] .skills-area{background:linear-gradient(180deg,#fefafc,#fff1f2)}
[data-theme="girly"] .skills-header{background:rgba(255,228,230,0.5);border-bottom-color:rgba(225,29,72,0.1)}
[data-theme="girly"] .skills-title{color:#9f1239}
[data-theme="girly"] .skills-stat{background:rgba(225,29,72,0.06);color:#be123c}
[data-theme="girly"] .skills-pill{border-color:rgba(225,29,72,0.15);color:#9f1239;background:rgba(255,255,255,0.5)}
[data-theme="girly"] .skills-pill:hover{border-color:#e11d48;color:#e11d48;background:rgba(225,29,72,0.06)}
[data-theme="girly"] .skills-pill.active{border-color:#e11d48;color:#e11d48;background:rgba(225,29,72,0.1)}
[data-theme="girly"] .skills-search-row{background:#ffffff;border-color:rgba(225,29,72,0.12)}
[data-theme="girly"] .skills-search-input{color:#881337}
[data-theme="girly"] .skills-search-row:focus-within{border-color:#e11d48;box-shadow:0 0 0 2px rgba(225,29,72,0.15)}
[data-theme="girly"] .skills-search-icon{stroke:#be123c}
[data-theme="girly"] .skills-grid{background:linear-gradient(180deg,#fefafc,#fff1f2)}
[data-theme="girly"] .skills-category-heading{color:#9f1239}
[data-theme="girly"] .skills-category-heading::before{background:linear-gradient(90deg,#e11d48,transparent)!important}
[data-theme="girly"] .skills-card{background:#ffffff;border-color:rgba(225,29,72,0.1);box-shadow:0 1px 4px rgba(225,29,72,0.06)}
[data-theme="girly"] .skills-card:hover{border-color:rgba(225,29,72,0.25);box-shadow:0 4px 16px rgba(225,29,72,0.1);background:linear-gradient(135deg,#ffffff,rgba(255,228,230,0.3))}
[data-theme="girly"] .skills-card.installed{border-left-color:#e11d48}
[data-theme="girly"] .skills-card-name{color:#881337}
[data-theme="girly"] .skills-card-desc{color:#9f6070}
[data-theme="girly"] .skills-badge-installed{background:rgba(225,29,72,0.08);color:#e11d48;border-color:rgba(225,29,72,0.2)}
[data-theme="girly"] .skills-badge-available{background:rgba(147,51,234,0.08);color:#9333ea;border-color:rgba(147,51,234,0.2)}
[data-theme="girly"] .skills-source-badge{background:rgba(225,29,72,0.06);color:#be123c;border-color:rgba(225,29,72,0.15)}
[data-theme="girly"] .skills-btn{border-color:rgba(225,29,72,0.15);color:#9f1239}
[data-theme="girly"] .skills-btn:hover{border-color:#e11d48;color:#e11d48}
[data-theme="girly"] .skills-btn-install{border-color:rgba(225,29,72,0.3);color:#e11d48;background:rgba(225,29,72,0.04)}
[data-theme="girly"] .skills-btn-install:hover{background:rgba(225,29,72,0.1)}
[data-theme="girly"] .skills-btn-remove{border-color:rgba(120,30,50,0.3);color:#881337;background:rgba(120,30,50,0.04)}
[data-theme="girly"] .skills-btn-remove:hover{background:rgba(120,30,50,0.1)}
[data-theme="girly"] .skills-detail-overlay{background:rgba(136,19,55,0.3);backdrop-filter:blur(8px)}
[data-theme="girly"] .skills-detail-content{background:linear-gradient(180deg,#ffffff,#fef2f4);border-color:rgba(225,29,72,0.15);box-shadow:0 12px 40px rgba(225,29,72,0.12)}
[data-theme="girly"] .skills-detail-header h2{color:#881337}
[data-theme="girly"] .skills-detail-close{color:#be123c;background:rgba(225,29,72,0.06)}
[data-theme="girly"] .skills-detail-close:hover{background:rgba(225,29,72,0.15);color:#881337}
[data-theme="girly"] .skills-detail-desc{color:#9f6070}
[data-theme="girly"] .skills-detail-body{color:#6b4a58;border-top-color:rgba(225,29,72,0.1);background:rgba(225,29,72,0.02)}
[data-theme="girly"] .skills-detail-actions{background:rgba(225,29,72,0.03);border-top-color:rgba(225,29,72,0.1)}
[data-theme="girly"] .skills-empty{color:#be123c}
[data-theme="girly"] .skills-card-footer{border-top-color:rgba(225,29,72,0.06)}

/* Skills Shop filter buttons (All / Installed / Available) */
.skills-filter-btn{padding:4px 10px;border-radius:6px;border:1px solid var(--pb-border);background:transparent;color:var(--pb-text-dim);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
.skills-filter-btn:hover{border-color:var(--pb-blue);color:var(--pb-text-muted)}
.skills-filter-btn.active{border-color:var(--pb-blue);color:var(--pb-blue);background:rgba(42,147,193,0.1)}
[data-theme="light"] .skills-filter-btn{border-color:rgba(42,80,120,0.15);color:#4a6a8a}
[data-theme="light"] .skills-filter-btn.active{border-color:var(--pb-blue);color:var(--pb-blue);background:rgba(42,147,193,0.08)}
[data-theme="girly"] .skills-filter-btn{border-color:rgba(225,29,72,0.15);color:#9f1239}
[data-theme="girly"] .skills-filter-btn.active{border-color:#e11d48;color:#e11d48;background:rgba(225,29,72,0.08)}

/* Skills detail markdown rendering */
.skills-code-block{background:rgba(0,0,0,0.3);border:1px solid var(--pb-border);border-radius:6px;padding:12px 16px;overflow-x:auto;margin:8px 0;font-size:11px;line-height:1.6}
.skills-code-block code{color:var(--pb-text);font-family:'Courier New',monospace;white-space:pre}
.skills-inline-code{background:rgba(42,147,193,0.1);color:var(--pb-blue-light);padding:1px 5px;border-radius:3px;font-size:11px;font-family:'Courier New',monospace}
.skills-detail-body ul{margin:4px 0 4px 16px;padding:0;list-style:disc}
.skills-detail-body li{margin:2px 0;line-height:1.5}
.skills-detail-body h2{margin:16px 0 8px;font-size:16px;color:var(--pb-text);border-bottom:1px solid var(--pb-border);padding-bottom:4px}
.skills-detail-body h3{margin:12px 0 6px;font-size:14px;color:var(--pb-text-muted)}
.skills-detail-body h4{margin:10px 0 4px;font-size:12px;color:var(--pb-text-muted);font-weight:600}
[data-theme="light"] .skills-code-block{background:rgba(42,80,120,0.04);border-color:rgba(42,80,120,0.12)}
[data-theme="light"] .skills-inline-code{background:rgba(42,147,193,0.08);color:#1a7aaa}
[data-theme="girly"] .skills-code-block{background:rgba(225,29,72,0.03);border-color:rgba(225,29,72,0.1)}
[data-theme="girly"] .skills-inline-code{background:rgba(225,29,72,0.06);color:#e11d48}

/* Skills Shop loading state */
.skills-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:16px}
.skills-loading-spinner{width:32px;height:32px;border:3px solid var(--pb-border);border-top-color:var(--pb-blue);border-radius:50%;animation:spin 0.8s linear infinite}
.skills-loading-text{font-size:13px;color:var(--pb-text-dim);font-weight:500}
@keyframes spin{to{transform:rotate(360deg)}}