/* ═══════════════════════════════════════════════════════════
   AI Console v2 — CSS
   ═══════════════════════════════════════════════════════════ */

/* ── Variables ───────────────────────────────────────────── */
:root {
  --bg:#0f1117; --bg2:#1a1d2e; --bg3:#252840;
  --surface:#1e2133; --surface2:#272b42;
  --border:#2e3352; --text:#e2e8f0; --text2:#8892b0; --text3:#4a5568;
  --accent:#6366f1; --accent2:#4f52c9;
  --danger:#ef4444; --success:#22c55e; --warning:#f59e0b;
  --human:#10b981; --radius:10px; --radius-sm:6px;
  --shadow:0 4px 24px rgba(0,0,0,.4);
  --font:'Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:'Cascadia Code','Fira Code','Consolas',monospace;
  --fs:14px; --transition:.18s ease;
}
[data-theme="light"]{--bg:#f8fafc;--bg2:#f1f5f9;--bg3:#e2e8f0;--surface:#fff;--surface2:#f8fafc;--border:#cbd5e1;--text:#1e293b;--text2:#475569;--text3:#94a3b8;}
[data-theme="matrix"]{--bg:#000d00;--bg2:#001800;--bg3:#002200;--surface:#001400;--surface2:#002000;--border:#00ff4120;--text:#00ff41;--text2:#00cc33;--text3:#006616;--accent:#00ff41;--accent2:#00cc33;--human:#00ff41;}
[data-theme="cyberpunk"]{--bg:#0d0015;--bg2:#140020;--bg3:#1a0028;--surface:#110018;--surface2:#1a002a;--border:#ff00ff30;--text:#ff00ff;--text2:#cc00cc;--text3:#660066;--accent:#ff00ff;--accent2:#cc00cc;--human:#00ffff;}

/* ── Reset ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;font-family:var(--font);font-size:var(--fs);background:var(--bg);color:var(--text);overflow:hidden;}

/* ── Header ───────────────────────────────────────────────── */
.header{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:52px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;z-index:10;gap:12px;}
.header-left{display:flex;align-items:center;gap:10px;min-width:0;}
.logo{font-size:17px;font-weight:700;color:var(--accent);white-space:nowrap;}
.project-title{font-size:13px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;}
.header-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}

/* ── User menu ────────────────────────────────────────────── */
.user-menu-wrap{position:relative;}
.user-btn{display:flex;align-items:center;gap:7px;}
.user-avatar{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}
.user-dropdown{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);min-width:180px;box-shadow:var(--shadow);z-index:200;display:none;}
.user-dropdown.open{display:block;}
.dropdown-header{padding:10px 14px;font-size:12px;color:var(--text2);border-bottom:1px solid var(--border);}
.dropdown-item{display:block;width:100%;text-align:left;padding:9px 14px;background:none;border:none;cursor:pointer;font-size:13px;color:var(--text);transition:var(--transition);}
.dropdown-item:hover{background:var(--bg3);}
.dropdown-item.danger{color:var(--danger);}
.dropdown-divider{height:1px;background:var(--border);margin:4px 0;}

/* ── Layout ───────────────────────────────────────────────── */
.layout{display:flex;height:calc(100vh - 52px);overflow:hidden;}

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar{width:230px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;transition:width .2s ease;}
.sidebar.collapsed{width:0;}
.sidebar-section{display:flex;flex-direction:column;min-height:0;}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:1px;flex-shrink:0;}

/* Projects */
.project-list{flex:1;overflow-y:auto;padding:6px;}
.project-item{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid transparent;transition:var(--transition);margin-bottom:2px;}
.project-item:hover{background:var(--surface);}
.project-item.active{background:var(--surface);border-color:var(--accent);}
.project-name{font-size:13px;font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.project-actions{display:flex;gap:2px;opacity:0;transition:var(--transition);}
.project-item:hover .project-actions{opacity:1;}
.project-actions button{background:none;border:none;cursor:pointer;font-size:12px;padding:2px 4px;border-radius:3px;color:var(--text2);}
.project-actions button:hover{background:var(--bg3);color:var(--text);}

/* Agents */
.agent-list{overflow-y:auto;padding:6px;max-height:220px;}
.agent-card{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-sm);cursor:default;border:1px solid transparent;transition:var(--transition);margin-bottom:3px;background:var(--surface);}
.agent-card:hover{border-color:var(--border);}
.agent-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.agent-info{flex:1;min-width:0;}
.agent-name{font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.agent-model{font-size:10px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.agent-status{width:7px;height:7px;border-radius:50%;background:var(--text3);flex-shrink:0;}
.agent-status.ready{background:var(--success);box-shadow:0 0 5px var(--success);}
.agent-status.thinking{background:var(--warning);animation:pulse 1s infinite;}
.agent-status.error{background:var(--danger);}
.agent-actions{display:flex;gap:2px;opacity:0;transition:var(--transition);}
.agent-card:hover .agent-actions{opacity:1;}
.agent-actions button{background:none;border:none;cursor:pointer;font-size:12px;padding:2px 4px;border-radius:3px;color:var(--text2);}
.agent-actions button:hover{background:var(--bg3);}

/* Orchestration */
.orch-panel{border-top:1px solid var(--border);padding:10px 12px;background:var(--surface);flex-shrink:0;}
.orch-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text2);margin-bottom:8px;}
.orch-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;font-size:12px;gap:6px;}
.orch-row span{color:var(--text2);}
.orch-row select,.orch-row input[type="number"]{background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:3px 6px;font-size:11px;width:96px;}

/* Empty states */
.empty-state{text-align:center;padding:16px 10px;color:var(--text2);font-size:12px;line-height:1.6;}

/* ── Arena ────────────────────────────────────────────────── */
.arena{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);}
.welcome-screen{flex:1;display:flex;align-items:center;justify-content:center;}
.welcome-card{max-width:460px;text-align:center;padding:40px 32px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);}
.welcome-icon{font-size:44px;margin-bottom:14px;}
.welcome-card h2{font-size:20px;margin-bottom:10px;}
.welcome-card p{color:var(--text2);line-height:1.7;margin-bottom:24px;font-size:13px;}
.arena-inner{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.arena-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px;}
.arena-messages::-webkit-scrollbar{width:5px;}
.arena-messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
.arena-empty{text-align:center;color:var(--text2);font-size:13px;padding:40px 20px;margin:auto;}

/* ── Messages ─────────────────────────────────────────────── */
.message{display:flex;gap:10px;max-width:800px;}
.message.anim{animation:fadeSlide .2s ease;}
.message.human-msg{flex-direction:row-reverse;align-self:flex-end;}
.message.human-msg .bubble{background:var(--bg3);border-color:var(--human);}
.msg-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;margin-top:3px;}
.msg-body{flex:1;}
.msg-header{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;}
.msg-name{font-weight:700;font-size:13px;}
.msg-time{font-size:11px;color:var(--text2);}
.msg-model{font-size:10px;color:var(--text3);font-family:var(--font-mono);}
.bubble{background:var(--surface);border:1px solid var(--border);border-radius:0 var(--radius) var(--radius) var(--radius);padding:10px 14px;line-height:1.7;word-break:break-word;font-size:var(--fs);}
.message.human-msg .bubble{border-radius:var(--radius) 0 var(--radius) var(--radius);}
.bubble pre{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;overflow-x:auto;font-family:var(--font-mono);font-size:12px;margin:6px 0;white-space:pre-wrap;}
.bubble code{font-family:var(--font-mono);font-size:12px;background:var(--bg);padding:1px 4px;border-radius:3px;}
.bubble p{margin-bottom:6px;}.bubble p:last-child{margin-bottom:0;}
.bubble ul,.bubble ol{padding-left:18px;margin:4px 0;}.bubble li{margin-bottom:2px;}
.thinking-bubble .bubble{background:transparent;border-style:dashed;color:var(--text2);font-style:italic;}
.thinking-dots::after{content:'';animation:dots 1.4s infinite;}
.system-msg{text-align:center;color:var(--text2);font-size:12px;padding:3px 12px;background:var(--bg2);border-radius:20px;align-self:center;border:1px solid var(--border);}

/* ── Input Bar ────────────────────────────────────────────── */
.input-bar{border-top:1px solid var(--border);background:var(--surface);padding:10px 14px;flex-shrink:0;}
.input-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px;flex-wrap:wrap;}
.input-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.input-label{font-size:12px;color:var(--text2);font-weight:600;}
.sender-select,.target-select{background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:4px 8px;font-size:12px;}
.input-controls{display:flex;gap:6px;}
.input-compose{display:flex;gap:8px;}
.msg-input{flex:1;background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:9px 12px;resize:none;font-family:var(--font);font-size:var(--fs);transition:border-color var(--transition);line-height:1.5;}
.msg-input:focus{outline:none;border-color:var(--accent);}
.msg-input::placeholder{color:var(--text3);}
.send-btn{align-self:flex-end;padding:9px 18px;}

/* ── Buttons ──────────────────────────────────────────────── */
.btn{padding:7px 13px;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;font-size:13px;font-weight:600;transition:var(--transition);display:inline-flex;align-items:center;gap:5px;line-height:1;}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn-primary:hover{background:var(--accent2);border-color:var(--accent2);}
.btn-ghost{background:transparent;color:var(--text2);border-color:var(--border);}
.btn-ghost:hover{color:var(--text);background:var(--bg3);}
.btn-danger-ghost{background:transparent;color:var(--danger);border-color:transparent;}
.btn-danger-ghost:hover{background:rgba(239,68,68,.1);border-color:var(--danger);}
.btn-sm{padding:4px 10px;font-size:12px;}
.btn-icon{padding:6px 8px;font-size:16px;}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.badge{background:var(--accent);color:#fff;border-radius:10px;padding:1px 6px;font-size:11px;font-weight:700;}

/* ── Modals ───────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity var(--transition);}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:500px;max-width:94vw;max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow);transform:translateY(16px);transition:transform var(--transition);}
.modal-overlay.open .modal{transform:translateY(0);}
.modal-sm{width:380px;}
.modal-lg{width:660px;}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);font-weight:700;font-size:15px;}
.modal-close{background:none;border:none;cursor:pointer;color:var(--text2);font-size:15px;padding:4px 6px;border-radius:4px;}
.modal-close:hover{color:var(--text);background:var(--bg3);}
.modal-body{padding:18px;overflow-y:auto;flex:1;}
.modal-body::-webkit-scrollbar{width:4px;}
.modal-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--border);}

/* ── Forms ────────────────────────────────────────────────── */
.form-group{margin-bottom:14px;}
.form-group label{display:block;font-size:11px;font-weight:600;color:var(--text2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px;}
.form-group input[type="text"],.form-group input[type="password"],.form-group input[type="email"],.form-group input[type="number"],.form-group select,.form-group textarea{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:8px 11px;font-family:var(--font);font-size:13px;transition:border-color var(--transition);}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--accent);}
.form-group input[type="color"]{width:44px;height:34px;padding:2px;cursor:pointer;border-radius:var(--radius-sm);}
.form-row{display:flex;gap:12px;}.form-group.half{flex:1;}
.input-with-btn{display:flex;gap:6px;}.input-with-btn input{flex:1;}

/* ── Profile ──────────────────────────────────────────────── */
.profile-avatar-row{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding:14px;background:var(--bg3);border-radius:var(--radius);}
.profile-avatar{width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0;}

/* ── Admin ────────────────────────────────────────────────── */
.admin-user-row{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px;background:var(--bg3);}
.admin-user-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.admin-user-avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;}
.admin-user-meta{display:flex;gap:6px;align-items:center;flex-shrink:0;}
.admin-user-actions{display:flex;gap:6px;flex-shrink:0;}
.badge-admin{background:rgba(99,102,241,.2);color:var(--accent);border:1px solid var(--accent);border-radius:10px;padding:2px 8px;font-size:11px;font-weight:600;}
.badge-status{border-radius:10px;padding:2px 8px;font-size:11px;font-weight:600;}
.badge-status.active{background:rgba(34,197,94,.15);color:var(--success);border:1px solid var(--success);}
.badge-status.inactive{background:rgba(239,68,68,.1);color:var(--danger);border:1px solid var(--danger);}

/* ── Animations ───────────────────────────────────────────── */
@keyframes fadeSlide{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes dots{0%{content:''}33%{content:'.'}66%{content:'..'}100%{content:'...'}}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;display:inline-block;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}


/* ═══════════════════════════════════════════════════════════
   MOBILE-RESPONSIVE OVERHAUL — AI Console
   All breakpoints: ≤768px (tablet), ≤480px (phone)
   ═══════════════════════════════════════════════════════════ */

/* ── Base touch/mobile improvements (all screen sizes) ───── */
input, select, textarea, button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
input, select, textarea {
  font-size: 16px !important; /* prevents iOS auto-zoom on focus */
}

/* ── Tablet (≤768px) ──────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --fs: 15px; }

  /* Header: tighter */
  .header { padding: 0 10px; gap: 8px; }
  .project-title { display: none; }
  .header-right .btn-sm { padding: 5px 8px; font-size: 12px; }

  /* Sidebar: overlay mode */
  .sidebar {
    position: fixed;
    top: 52px; left: 0; bottom: 0;
    z-index: 50;
    width: 280px !important;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.5);
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }
  /* When sidebar is collapsed via desktop toggle, keep mobile behavior */
  .sidebar.collapsed {
    width: 280px !important;
    transform: translateX(-100%);
  }
  .sidebar.collapsed.mobile-open {
    transform: translateX(0);
  }

  /* Backdrop to close sidebar */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 49;
    background: rgba(0,0,0,.6);
  }
  .sidebar-backdrop.open { display: block; }

  /* Arena fills full width */
  .arena { width: 100%; }

  /* Messages: full width */
  .message { max-width: 100%; }
  .arena-messages { padding: 12px 10px; gap: 10px; }

  /* Input bar */
  .input-bar { padding: 8px 10px; }
  .input-row { margin-bottom: 6px; }
  .input-meta { gap: 5px; font-size: 13px; }
  .input-controls { gap: 4px; }
  .input-controls .btn-sm { padding: 4px 8px; font-size: 12px; }
  .input-compose { gap: 6px; }
  .msg-input { font-size: 15px !important; min-height: 44px; }
  .send-btn { padding: 9px 14px; font-size: 14px; }

  /* Modal: full-width on tablet */
  .modal { width: 94vw !important; }
}

/* ── Phone (≤480px) ───────────────────────────────────────── */
@media (max-width: 480px) {
  :root { --fs: 15px; }

  /* Header: compact, bigger touch targets */
  .header { height: 52px; padding: 0 8px; gap: 6px; }
  .header-left { gap: 6px; }
  .logo { font-size: 15px; }
  .header-left > a.btn { display: none; } /* hide Parliament link in header on phone */
  #btnExport { display: none; } /* hide export btn — put in menu */
  .user-btn { gap: 4px; }
  .user-btn span:not(.user-avatar) { display: none; } /* hide name, show avatar only */

  /* Sidebar full-overlay */
  .sidebar {
    position: fixed;
    top: 52px; left: 0; bottom: 0;
    z-index: 50;
    width: 85vw !important;
    max-width: 320px !important;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }

  /* Input bar: stack vertically */
  .input-bar { padding: 8px; }
  .input-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 6px;
  }
  .input-meta {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    align-items: center;
    gap: 4px 6px;
    font-size: 13px;
  }
  .input-controls {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
  }
  .input-compose { gap: 6px; }
  .msg-input {
    font-size: 15px !important;
    min-height: 48px;
    max-height: 120px;
    border-radius: 10px;
    padding: 10px 12px;
  }
  .send-btn {
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 700;
    min-width: 70px;
    align-self: flex-end;
  }

  /* Messages */
  .arena-messages { padding: 10px 8px; gap: 10px; }
  .message { max-width: 100%; gap: 7px; }
  .msg-avatar { width: 28px; height: 28px; font-size: 14px; }
  .bubble { font-size: 15px; padding: 9px 12px; line-height: 1.65; }
  .bubble pre { font-size: 12px; padding: 8px; overflow-x: auto; }
  .msg-name { font-size: 13px; }
  .msg-time { font-size: 11px; }

  /* Welcome screen */
  .welcome-card { padding: 28px 16px; margin: 16px; }
  .welcome-card h2 { font-size: 18px; }
  .welcome-card p { font-size: 14px; }

  /* Orchestration panel */
  .orch-panel { padding: 10px; }
  .orch-row { gap: 6px; font-size: 13px; }

  /* Modal: full-screen sheet on phone */
  .modal-overlay {
    align-items: flex-end;
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
    max-height: 90vh !important;
  }
  .modal-header { padding: 14px 16px; font-size: 16px; }
  .modal-body { padding: 14px 16px; }
  .modal-footer { padding: 10px 16px; gap: 8px; }
  .modal-footer .btn { flex: 1; padding: 12px; font-size: 15px; }

  /* Forms inside modals */
  .form-group label { font-size: 12px; }
  .form-group input, .form-group select, .form-group textarea {
    font-size: 16px !important;
    padding: 10px 12px;
  }
  .form-row { flex-direction: column; gap: 0; }
  .form-group.half { flex: unset; }

  /* Buttons */
  .btn { font-size: 14px; padding: 8px 14px; }
  .btn-sm { font-size: 13px; padding: 6px 10px; }
  .btn-icon { padding: 8px 10px; font-size: 18px; }

  /* Agent list */
  .agent-list { max-height: 180px; }
  .agent-actions { opacity: 1; } /* always visible on touch */
  .project-actions { opacity: 1; }

  /* Dropdown menu */
  .user-dropdown {
    right: -4px;
    min-width: 200px;
  }
  .dropdown-item { padding: 12px 16px; font-size: 14px; }

  /* System msg */
  .system-msg { font-size: 12px; padding: 4px 12px; }

  /* Scrollbars: wider touch target */
  ::-webkit-scrollbar { width: 3px; height: 3px; }
}

/* ── Parliament mobile ────────────────────────────────────── */
@media (max-width: 768px) {
  .parl-layout { flex-direction: column; height: calc(100vh - 52px); }

  .parl-sidebar {
    position: fixed;
    top: 52px; left: 0; bottom: 0;
    z-index: 50;
    width: 280px !important;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.5);
    height: auto;
    flex-shrink: 0;
  }
  .parl-sidebar.mobile-open { transform: translateX(0); }
  .parl-sidebar.collapsed { width: 280px !important; transform: translateX(-100%); }
  .parl-sidebar.collapsed.mobile-open { transform: translateX(0); }

  .parl-main { flex: 1; min-height: 0; }

  /* Prompt row: stack on narrow */
  .parl-prompt-row { flex-wrap: wrap; gap: 8px; }
  .parl-prompt-input { font-size: 15px !important; min-height: 48px; }
  .parl-convene-btn { width: 100%; padding: 13px; font-size: 16px; }

  /* Deliberation */
  .parl-deliberation { padding: 10px; }
  .agent-panel-header { padding: 10px 12px; }
  .agent-panel-body { padding: 10px 12px; font-size: 14px; }

  /* Agent name/role labels */
  .agent-role-label { font-size: 12px; }
  .agent-name-label { font-size: 14px; }

  /* Rating */
  .parl-rating { font-size: 20px; gap: 6px; }

  /* Welcome card */
  .parl-welcome-card { padding: 24px 16px; margin: 0 8px; }
  .parl-welcome-steps { gap: 6px; }
  .parl-step { padding: 10px 6px; }
  .parl-step-icon { font-size: 18px; }
  .parl-step-label { font-size: 10px; }
}

@media (max-width: 480px) {
  .parl-prompt-area { padding: 10px; }
  .parl-prompt-input { font-size: 15px !important; }
  .credits-amount { font-size: 18px; }
  .credits-sub { font-size: 10px; }
  .parl-history-title { font-size: 13px; }

  /* Agent panel: more readable */
  .agent-panel-body { font-size: 15px; line-height: 1.65; }
  .agent-panel-body pre { font-size: 12px; overflow-x: auto; }

  /* synthesis block */
  .synthesis-card { padding: 14px 12px; }
  .synthesis-card p, .synthesis-card li { font-size: 15px; line-height: 1.65; }
}

/* ── Accounts page mobile ─────────────────────────────────── */
@media (max-width: 480px) {
  .accounts-layout { padding: 16px 12px; }
  .provider-card { flex-wrap: wrap; padding: 14px 12px; gap: 10px; }
  .provider-actions { width: 100%; justify-content: flex-end; }
  .key-input-row { flex-direction: column; }
  .key-input-row input, .key-input-row button { width: 100%; }
}