/* === RESET & VARIABLES === */
*{margin:0;padding:0;box-sizing:border-box}
:root {
  --bg-base: #0a0b0f;
  --bg-surface: #12131a;
  --bg-raised: #1a1b25;
  --bg-overlay: #222332;
  --bg-hover: #2a2b3d;
  --border: #2a2b3d;
  --border-light: #353648;
  --text: #e8e8ed;
  --text-dim: #8b8ca0;
  --text-muted: #5c5d72;
  --accent: #7c5cfc;
  --accent-dim: #6347d6;
  --accent-glow: rgba(124,92,252,0.15);
  --green: #34d399;
  --green-dim: rgba(52,211,153,0.15);
  --red: #f87171;
  --red-dim: rgba(248,113,113,0.15);
  --orange: #fbbf24;
  --orange-dim: rgba(251,191,36,0.15);
  --blue: #60a5fa;
  --blue-dim: rgba(96,165,250,0.15);
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 4px 24px rgba(0,0,0,0.3);
}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:var(--bg-base);color:var(--text);height:100vh;overflow:hidden;font-size:14px;line-height:1.5}
input,textarea,select,button{font-family:inherit;font-size:inherit}
a{color:var(--accent);text-decoration:none}

/* === LAYOUT === */
#app{display:flex;height:100vh}

/* === SIDEBAR === */
#sidebar{width:240px;background:var(--bg-surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;z-index:10}
.agents-section{border-bottom:1px solid var(--border)}
.agent-profile{padding:12px 20px;display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--border);cursor:pointer;transition:.15s}
.agent-profile:last-child{border-bottom:none}
.agent-profile:hover{background:var(--bg-raised)}
.agent-avatar{width:36px;height:36px;background:var(--accent-glow);border:2px solid var(--accent);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.agent-profile[data-agent="toby2"] .agent-avatar{border-color:var(--green);background:var(--green-dim)}
.agent-name{font-weight:700;font-size:.9rem}
.agent-role{font-size:.7rem;color:var(--text-dim)}
.agent-info{flex:1;min-width:0}
.agent-status-dot{flex-shrink:0}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;animation:pulse 2s infinite}
.status-dot.idle{background:var(--orange)}.status-dot.active{background:var(--green)}.status-dot.ready{background:var(--blue)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.status-text{color:var(--text-dim)}

/* Agent Detail Panel */
.agent-detail-panel{padding:16px;border-bottom:1px solid var(--border);background:var(--bg-raised);overflow-y:auto;max-height:50vh}
.agent-detail-panel.hidden{display:none}
.agent-detail-header{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem;margin-bottom:10px}
.agent-detail-header .btn-icon{margin-left:auto}
.agent-detail-status{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-dim);margin-bottom:14px;padding:8px 10px;background:var(--bg-surface);border-radius:var(--radius-sm)}
.agent-detail-section{margin-bottom:12px}
.agent-detail-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:6px}
.agent-detail-task{padding:8px 10px;background:var(--bg-surface);border-radius:var(--radius-sm);margin-bottom:4px;font-size:.82rem;cursor:pointer;border-left:3px solid var(--border);transition:.15s}
.agent-detail-task:hover{background:var(--bg-overlay)}
.agent-detail-task.priority-urgent{border-left-color:var(--red)}
.agent-detail-task.priority-high{border-left-color:var(--orange)}
.agent-detail-task.priority-normal{border-left-color:var(--blue)}
.agent-detail-task.priority-low{border-left-color:var(--text-muted)}
.agent-detail-task .task-meta{font-size:.7rem;color:var(--text-muted);margin-top:2px}
.agent-detail-empty{font-size:.78rem;color:var(--text-muted);font-style:italic;padding:6px 0}
.btn-full{width:100%;justify-content:center;margin-top:4px}
.agent-profile.selected{background:var(--accent-glow);border-left:3px solid var(--accent)}
.agent-profile[data-agent="toby2"].selected{background:var(--green-dim);border-left-color:var(--green)}

.nav-links{flex:1;padding:12px 0}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 20px;color:var(--text-dim);font-weight:500;font-size:.85rem;transition:all .15s;border-left:3px solid transparent}
.nav-item:hover{color:var(--text);background:var(--bg-raised)}
.nav-item.active{color:var(--accent);background:var(--accent-glow);border-left-color:var(--accent)}
.nav-icon{font-size:1.1rem;width:20px;text-align:center}

.sidebar-stats{padding:16px 20px;border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sidebar-stat{background:var(--bg-raised);border-radius:var(--radius-sm);padding:10px;text-align:center}
.sidebar-stat .stat-val{font-size:1.3rem;font-weight:700;display:block}
.sidebar-stat .stat-lbl{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.sidebar-stat.overdue .stat-val{color:var(--red)}

.sidebar-footer{padding:12px 20px;border-top:1px solid var(--border);font-size:.75rem;color:var(--text-muted)}

/* === MAIN === */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

/* === TOPBAR === */
#topbar{display:flex;align-items:center;padding:0 24px;height:56px;border-bottom:1px solid var(--border);background:var(--bg-surface);flex-shrink:0;gap:16px}
.topbar-left{display:flex;flex-direction:column;justify-content:center}
#topbar h1{font-size:1.05rem;font-weight:700;line-height:1.2}
.breadcrumb{font-size:.72rem;color:var(--text-muted)}
.topbar-center{display:flex;gap:6px;align-items:center;flex:1;justify-content:center}
.agent-tabs{display:flex;gap:4px;margin-right:8px}
.agent-tab{padding:5px 12px;border:1px solid var(--border);background:var(--bg-raised);color:var(--text-dim);border-radius:var(--radius-sm);font-size:.78rem;font-weight:600;cursor:pointer;transition:.15s}
.agent-tab:hover{color:var(--text);background:var(--bg-overlay)}
.agent-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.topbar-center select,.topbar-center input{background:var(--bg-raised);border:1px solid var(--border);color:var(--text);padding:5px 10px;border-radius:var(--radius-sm);font-size:.8rem;outline:none;transition:.2s}
.topbar-center select:focus,.topbar-center input:focus{border-color:var(--accent)}
.topbar-right{display:flex;gap:8px;align-items:center}

/* === BUTTONS === */
.btn{padding:7px 16px;border:none;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;font-size:.82rem;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.btn-accent{background:var(--accent);color:#fff}.btn-accent:hover{background:var(--accent-dim);box-shadow:0 0 20px var(--accent-glow)}
.btn-ghost{background:transparent;color:var(--text-dim);border:1px solid var(--border)}.btn-ghost:hover{color:var(--text);background:var(--bg-raised)}
.btn-danger{background:var(--red);color:#fff}.btn-danger:hover{opacity:.85}
.btn-icon{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:1rem;padding:4px;transition:.15s}.btn-icon:hover{color:var(--text)}

/* === PAGES === */
.page{display:none;overflow-y:auto;flex:1;padding:20px 24px}.page.active{display:flex;flex-direction:column}

/* === KANBAN BOARD === */
.board-wrapper{flex:1;overflow:hidden;display:flex}
.kanban-board{display:flex;gap:14px;flex:1;overflow-x:auto;padding-bottom:20px}
.kanban-col{min-width:240px;flex:1;background:var(--bg-surface);border-radius:var(--radius);display:flex;flex-direction:column;border:1px solid var(--border)}
.col-header{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}
.col-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.78rem;letter-spacing:.06em;color:var(--text-dim)}
.col-dot{width:8px;height:8px;border-radius:50%}
.col-dot.backlog{background:var(--text-muted)}.col-dot.todo{background:var(--blue)}.col-dot.inprogress{background:var(--orange)}.col-dot.done{background:var(--green)}.col-dot.archive{background:var(--text-muted)}
.col-count{background:var(--bg-overlay);padding:2px 10px;border-radius:10px;font-size:.75rem;font-weight:600;color:var(--text-dim)}
.col-cards{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:80px}

/* === CARDS === */
.card{background:var(--bg-raised);border-radius:var(--radius-sm);padding:14px;cursor:grab;border:1px solid transparent;transition:all .15s;position:relative}
.card:hover{border-color:var(--border-light);background:var(--bg-overlay);transform:translateY(-1px);box-shadow:var(--shadow)}
.card.dragging{opacity:.4;transform:rotate(2deg) scale(.96)}
.card-priority-bar{position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.card.priority-urgent .card-priority-bar{background:var(--red)}
.card.priority-high .card-priority-bar{background:var(--orange)}
.card.priority-normal .card-priority-bar{background:var(--blue)}
.card.priority-low .card-priority-bar{background:var(--text-muted)}
.card-title{font-weight:600;font-size:.88rem;margin-top:4px;margin-bottom:6px;line-height:1.3}
.card-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:.73rem;color:var(--text-dim)}
.card-tag{background:var(--accent-glow);color:var(--accent);padding:2px 8px;border-radius:4px;font-weight:500}
.card-recurring{color:var(--green);font-weight:600}
.card-overdue{color:var(--red);font-weight:600}
.card-assignee{opacity:.7}
.card-assignee.agent-toby{color:var(--accent);opacity:1;font-weight:600}
.card-assignee.agent-toby2{color:var(--green);opacity:1;font-weight:600}
.card-assignee.agent-cedric{color:var(--orange);opacity:1;font-weight:600}
.card.assigned-toby{border-left:3px solid var(--accent)}
.card.assigned-toby2{border-left:3px solid var(--green)}
.card.assigned-cedric{border-left:3px solid var(--orange)}

/* === RIGHT PANELS === */
.right-panel{width:0;overflow:hidden;background:var(--bg-surface);border-left:1px solid var(--border);display:flex;flex-direction:column;transition:width .2s ease;flex-shrink:0}
.right-panel.open{width:340px}
.panel-header{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);flex-shrink:0}
.panel-header h3{font-size:.95rem;font-weight:700}

/* Chat */
.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.chat-msg{display:flex;flex-direction:column}
.chat-msg.agent .chat-bubble{background:var(--bg-raised);border-radius:var(--radius) var(--radius) var(--radius) 4px;align-self:flex-start}
.chat-msg.user .chat-bubble{background:var(--accent-dim);border-radius:var(--radius) var(--radius) 4px var(--radius);align-self:flex-end}
.chat-bubble{padding:10px 14px;max-width:90%;font-size:.85rem;line-height:1.5}
.chat-time{font-size:.68rem;color:var(--text-muted);margin-top:4px;padding:0 4px}
.chat-msg.user .chat-time{text-align:right}
.chat-input{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);flex-shrink:0}
.chat-input input{flex:1;background:var(--bg-raised);border:1px solid var(--border);color:var(--text);padding:10px 14px;border-radius:var(--radius);outline:none;transition:.2s}
.chat-input input:focus{border-color:var(--accent)}
.chat-input .btn{padding:10px 14px;font-size:1rem}

/* Notes */
.notes-content{flex:1;padding:16px;overflow:hidden}
#notes-area{width:100%;height:100%;background:transparent;border:none;color:var(--text);resize:none;outline:none;font-size:.85rem;line-height:1.7}
.notes-footer{padding:8px 16px;border-top:1px solid var(--border);font-size:.72rem;color:var(--text-muted)}

/* === MODAL === */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:100}
.modal.hidden{display:none}
.modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.modal-content{position:relative;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);width:520px;max-width:92vw;max-height:90vh;overflow-y:auto;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.modal-header h2{font-size:1.1rem}
.field{margin-bottom:14px}
.field label{display:block;font-size:.78rem;color:var(--text-dim);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.field input,.field textarea,.field select{width:100%;padding:9px 12px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);outline:none;transition:.2s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.form-row{display:flex;gap:14px}.form-row>.field{flex:1}
.hint{font-weight:400;color:var(--text-muted);text-transform:none;letter-spacing:0}
.check-label{display:flex!important;align-items:center;gap:8px;cursor:pointer;text-transform:none!important;letter-spacing:0!important;font-weight:500!important}
.check-label input{width:auto!important}
.modal-actions{display:flex;justify-content:space-between;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.modal-actions-right{display:flex;gap:8px}

/* === OVERVIEW PAGE === */
.overview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.ov-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;text-align:center}
.ov-num{font-size:2.2rem;font-weight:800;line-height:1}
.ov-label{font-size:.78rem;color:var(--text-dim);margin-top:6px;text-transform:uppercase;letter-spacing:.05em}
.ov-card.warn .ov-num{color:var(--red)}.ov-card.accent .ov-num{color:var(--accent)}.ov-card.success .ov-num{color:var(--green)}
.ov-sections{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ov-section{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.ov-section h3{margin-bottom:14px;font-size:.9rem}
.quick-form{display:flex;gap:8px}
.quick-form input{flex:1;padding:9px 12px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);outline:none}
.quick-form select{padding:9px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text)}

/* === GUIDELINES === */
.guidelines-container{max-width:820px}
.guideline-doc{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;margin-bottom:16px}
.guideline-doc .rendered h1{font-size:1.4rem;color:var(--accent);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.guideline-doc .rendered h2{font-size:1.1rem;color:var(--text);margin:20px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.guideline-doc .rendered ul{margin-left:20px;margin-bottom:12px}
.guideline-doc .rendered li{margin-bottom:4px;color:var(--text-dim)}
.guideline-edit{width:100%;min-height:400px;padding:14px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'JetBrains Mono','Fira Code',monospace;font-size:.82rem;line-height:1.6;display:none;outline:none;resize:vertical}
.guideline-actions{display:flex;gap:8px;margin-top:14px}
.guideline-meta{font-size:.72rem;color:var(--text-muted);margin-top:10px}

/* === ACTIVITY === */
.activity-container h2{margin-bottom:16px}
.activity-item{padding:12px 16px;display:flex;gap:14px;align-items:flex-start;border-bottom:1px solid var(--border);transition:.1s}
.activity-item:hover{background:var(--bg-raised)}
.activity-icon{width:34px;height:34px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.activity-icon.created{background:var(--green-dim)}.activity-icon.moved{background:var(--blue-dim)}.activity-icon.updated{background:var(--orange-dim)}.activity-icon.deleted{background:var(--red-dim)}
.activity-text{font-size:.85rem;line-height:1.4}
.activity-time{font-size:.72rem;color:var(--text-muted);margin-top:2px}

/* === SCROLLBAR === */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg-overlay);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--border-light)}

/* === RESPONSIVE === */
@media(max-width:1200px){.right-panel.open{width:300px}}
@media(max-width:900px){#sidebar{width:60px}.agent-profile .agent-info,.agent-status .status-text,.nav-item span:not(.nav-icon),.sidebar-stats,.sidebar-footer{display:none}.nav-item{justify-content:center;padding:12px}.agent-profile{padding:12px;justify-content:center}}