/* CCA Meeting Room — Styles */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f4f0eb;--bg2:#ece7e1;--bg3:#e3ded7;--border:#d4cfc8;
  --text:#1a1a1a;--text2:#6b6560;--text3:#9e9890;
  --accent:#c23a22;--accent2:#2a5da8;--accent3:#3a7d44;
  --surface:#faf8f5;--surface2:#f0ece6;
}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);overflow:hidden;height:100vh;font-weight:400;letter-spacing:-.01em}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* Focus styles for accessibility */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Skip to content link */
.skip-link{position:absolute;top:-40px;left:0;background:var(--accent);color:#fff;padding:8px 16px;z-index:1000;font-size:12px;transition:top .2s}
.skip-link:focus{top:0}

/* ===== SETUP SCREEN ===== */
#setup-screen{display:block;height:100vh;padding:40px 20px 80px;overflow-y:auto}
#setup-screen.hidden{display:none}
.setup-container{width:100%;max-width:900px;margin:0 auto}
.brand{text-align:center;margin-bottom:48px;animation:fadeSlideUp .8s ease}
.brand h1{font-size:32px;font-weight:300;letter-spacing:8px;color:var(--text);text-transform:uppercase}
.brand h1 span{color:var(--accent);font-weight:600}
.brand .sub{font-size:10px;color:var(--text3);letter-spacing:4px;margin-top:6px;text-transform:uppercase;font-weight:500}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.setup-card{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:20px 24px;margin-bottom:16px;animation:fadeSlideUp .6s ease both}
.setup-card:nth-child(2){animation-delay:.1s}.setup-card:nth-child(3){animation-delay:.15s}.setup-card:nth-child(4){animation-delay:.2s}.setup-card:nth-child(5){animation-delay:.25s}
.setup-card h3{font-size:9px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:2px;margin-bottom:12px}
.setup-row{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.setup-row select,.setup-row input[type=text]{flex:1;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:3px;padding:10px 14px;font-size:13px;outline:none;font-family:inherit;transition:border-color .2s}
.setup-row select:focus,.setup-row input:focus{border-color:var(--accent)}
.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.char-card{background:var(--bg);border:1px solid var(--border);border-radius:3px;padding:12px;cursor:pointer;transition:all .25s;position:relative;user-select:none;opacity:.5}
.char-card:hover{border-color:var(--text3);opacity:.7}
.char-card.selected{border-color:var(--text);opacity:1;background:var(--surface)}
.char-card.founder{opacity:1}
.char-card.founder.selected{border-color:var(--accent2);background:rgba(42,93,168,.06)}
.char-card.moderator{opacity:.5}
.char-card.moderator.selected{border-color:var(--accent3);opacity:1;background:rgba(58,125,68,.06)}
.char-check{position:absolute;top:8px;right:8px;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:8px;color:transparent;transition:all .25s}
.char-card.selected .char-check{border-color:var(--text);background:var(--text);color:var(--bg)}
.char-card.founder .char-check,.char-card.founder.selected .char-check{border-color:var(--accent2);background:var(--accent2);color:#fff}
.char-card.moderator.selected .char-check{border-color:var(--accent3);background:var(--accent3);color:#fff}
.char-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.char-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0;letter-spacing:-.5px}
.char-info h4{font-size:12px;font-weight:500;color:var(--text)}
.char-info .role{font-size:8px;color:var(--text2);text-transform:uppercase;letter-spacing:1px;font-weight:500}
.char-desc{font-size:9px;color:var(--text3);line-height:1.5}
.char-lead{position:absolute;bottom:8px;right:8px;font-size:7px;padding:2px 6px;border-radius:2px;border:1px solid var(--border);color:var(--text3);cursor:pointer;background:var(--bg);transition:all .2s;user-select:none;text-transform:uppercase;letter-spacing:.5px}
.char-lead:hover{border-color:var(--accent);color:var(--accent)}
.char-lead.active{border-color:var(--accent);background:rgba(194,58,34,.08);color:var(--accent);font-weight:600}
.agenda-list{list-style:none;margin-bottom:8px}
.agenda-item{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--border)}
.agenda-item span{flex:1;font-size:12px}.agenda-num{font-size:10px;color:var(--accent);font-weight:700;width:20px;text-align:center}
.agenda-rm{background:none;border:none;color:var(--text3);cursor:pointer;font-size:14px;padding:2px 6px}
.agenda-rm:hover{color:var(--accent)}
.agenda-add{display:flex;gap:8px}
.agenda-add input{flex:1;background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:6px 10px;font-size:12px;outline:none;font-family:inherit}
.agenda-add input:focus{border-color:var(--accent)}
.agenda-add button{background:var(--bg3);border:1px solid var(--border);color:var(--text2);border-radius:4px;padding:6px 12px;font-size:11px;cursor:pointer;white-space:nowrap}
.agenda-add button:hover{border-color:var(--accent);color:var(--accent)}
.briefing-area{width:100%;min-height:100px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:5px;padding:10px;font-size:11px;font-family:'JetBrains Mono',monospace;outline:none;resize:vertical;line-height:1.5}
.briefing-area:focus{border-color:var(--accent)}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.gallery-item{border-radius:5px;overflow:hidden;border:1px solid var(--border);cursor:pointer;transition:all .15s;padding:8px;background:var(--bg2)}
.gallery-item:hover{border-color:var(--accent)}
.gallery-item .gi-title{font-size:10px;font-weight:600;color:var(--text);margin-bottom:2px}
.gallery-item .gi-desc{font-size:8px;color:var(--text3);line-height:1.3}
.gallery-item .gi-params{font-size:7px;color:var(--accent);margin-top:3px;font-family:monospace;opacity:.5}
.meeting-type-grid{display:flex;flex-wrap:wrap;gap:6px}
.mt-btn{background:var(--bg);border:1px solid var(--border);color:var(--text3);border-radius:2px;padding:8px 14px;font-size:10px;cursor:pointer;transition:all .25s;font-family:inherit;font-weight:500;letter-spacing:.3px}
.mt-btn:hover{border-color:var(--text2);color:var(--text)}
.mt-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(194,58,34,.05)}
.mt-btn .mt-icon{font-size:14px;display:block;text-align:center;margin-bottom:2px}
.start-row{text-align:center;margin-top:32px}
#start-btn{background:var(--text);color:var(--bg);border:none;border-radius:2px;padding:16px 56px;font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;cursor:pointer;transition:all .3s;font-family:inherit}
#start-btn:hover{background:var(--accent);transform:translateY(-1px);letter-spacing:4px}

/* ===== MEETING SCREEN ===== */
#meeting-screen{display:none;height:100vh;flex-direction:row}
#meeting-screen.active{display:flex}
.sidebar{width:220px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:width .3s}
.sidebar-header{padding:14px 16px;border-bottom:1px solid var(--border)}
.sidebar-header h2{font-size:10px;font-weight:400;letter-spacing:4px;text-transform:uppercase;color:var(--text3)}
.sidebar-header h2 span{color:var(--accent);font-weight:600}
.meeting-info{padding:12px 16px;border-bottom:1px solid var(--border)}
.meeting-info .topic{font-size:11px;font-weight:500;color:var(--text);margin-bottom:4px;line-height:1.4}
.meeting-info .meta{font-size:9px;color:var(--text3);font-weight:400}
.meeting-type-badge{display:inline-block;font-size:7px;padding:2px 8px;border-radius:1px;background:var(--text);color:var(--bg);text-transform:uppercase;letter-spacing:1px;margin-top:4px;font-weight:600}
.participant-list{flex:1;overflow-y:auto;padding:8px 12px}
.participant{display:flex;align-items:center;gap:8px;padding:7px 4px;border-radius:2px;margin-bottom:1px;transition:all .3s}
.participant.speaking{background:rgba(194,58,34,.06)}
.participant .p-avatar{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;flex-shrink:0;transition:transform .3s}
.participant.speaking .p-avatar{transform:scale(1.15)}
.participant .p-name{font-size:10px;font-weight:500;color:var(--text)}
.participant .p-role{font-size:7px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
/* Speaking indicator animation */
.participant.speaking::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--accent);margin-left:auto;animation:speakPulse 1.2s infinite}
@keyframes speakPulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
.sidebar-actions{padding:8px 12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:3px}
.sidebar-actions button{background:transparent;border:1px solid var(--border);color:var(--text2);border-radius:2px;padding:7px;font-size:8px;cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:all .25s;font-family:inherit;font-weight:500}
.sidebar-actions button:hover{border-color:var(--text);color:var(--text)}
.sidebar-actions button.primary{background:var(--text);border-color:var(--text);color:var(--bg)}
.sidebar-actions button.primary:hover{background:var(--accent);border-color:var(--accent)}
.sidebar-actions button.warn{color:var(--accent);border-color:var(--accent)}
.sidebar-actions button.live{color:var(--accent3);border-color:var(--accent3)}

/* Sidebar toggle for mobile */
.sidebar-toggle{display:none;position:fixed;bottom:16px;left:16px;z-index:600;background:var(--text);color:var(--bg);border:none;border-radius:50%;width:44px;height:44px;font-size:18px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2)}

/* Chat area */
.chat-area{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.chat-header{padding:10px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--surface)}
.chat-header .agenda-current{font-size:9px;color:var(--text2);letter-spacing:.3px}.chat-header .agenda-current b{color:var(--accent)}
.msg-count{font-size:8px;color:var(--text3);letter-spacing:.5px}
.meeting-status{font-size:7px;padding:3px 8px;border-radius:1px;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.meeting-status.running{background:var(--accent3);color:#fff}
.meeting-status.paused{background:var(--text3);color:#fff}

.chat-messages{flex:1;overflow-y:auto;padding:20px 28px;display:flex;flex-direction:column;gap:0}
.msg{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid rgba(0,0,0,.04);animation:msgIn .5s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.msg-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0;margin-top:3px;transition:transform .3s}
.msg:hover .msg-avatar{transform:scale(1.1)}
.msg-body{flex:1;min-width:0}
.msg-header{display:flex;align-items:baseline;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.msg-name{font-size:11px;font-weight:600;letter-spacing:-.02em}
.msg-role{font-size:7px;padding:2px 6px;border-radius:1px;text-transform:uppercase;letter-spacing:.8px;font-weight:500;border:1px solid}
.msg-time{font-size:8px;color:var(--text3);margin-left:auto;font-weight:400}
.msg-text{font-size:13px;line-height:1.7;color:var(--text);word-wrap:break-word;font-weight:400}
.msg-text p{margin-bottom:6px}.msg-text p:last-child{margin-bottom:0}
.msg-text strong{color:var(--text);font-weight:600}
.msg-text code{background:var(--bg2);padding:2px 5px;border-radius:2px;font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--accent)}
.msg-text ul,.msg-text ol{margin:4px 0 4px 18px}.msg-text li{margin-bottom:2px}
.msg-text blockquote{border-left:2px solid var(--accent);padding-left:10px;color:var(--text2);margin:6px 0;font-style:italic}
.msg-system{padding:10px 0;text-align:center}
.msg-system span{font-size:8px;color:var(--text3);background:var(--surface2);padding:4px 14px;border-radius:1px;letter-spacing:.5px;text-transform:uppercase}
.msg.founder{background:rgba(42,93,168,.03);border-radius:3px;margin:4px -8px;padding:14px 8px;border-bottom:none}
.msg.founder .msg-text{border-left:2px solid var(--accent2);padding-left:10px}
.msg.moderator .msg-name{color:var(--accent3)!important}

/* Thinking animation */
.thinking-avatar{animation:thinkPulse 2s ease-in-out infinite}
@keyframes thinkPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.95)}}

.typing-indicator{display:none;padding:10px 0;align-items:center;gap:12px;margin-left:42px}.typing-indicator.active{display:flex}
.typing-dots{display:flex;gap:4px;align-items:center}
.typing-dots span{width:4px;height:4px;border-radius:50%;background:var(--text3);animation:typeBounce 1.4s infinite}
.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes typeBounce{0%,80%,100%{transform:scale(1);opacity:.3}40%{transform:scale(1.4);opacity:.8}}
.typing-name{font-size:9px;color:var(--text3);font-weight:500;letter-spacing:.3px}
.typing-status{font-size:8px;color:var(--text3);font-style:italic;margin-left:4px}

/* Input area */
.chat-input{padding:12px 24px;border-top:1px solid var(--border);background:var(--surface)}
.input-row{display:flex;gap:8px;align-items:flex-end}
.input-row textarea{flex:1;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:2px;padding:10px 14px;font-size:12px;font-family:inherit;outline:none;resize:none;min-height:40px;max-height:100px;line-height:1.5;transition:border-color .2s}
.input-row textarea:focus{border-color:var(--text)}
.input-row textarea::placeholder{color:var(--text3)}
.send-btn{background:var(--text);color:var(--bg);border:none;border-radius:2px;padding:10px 16px;cursor:pointer;font-size:9px;font-weight:600;white-space:nowrap;transition:all .25s;text-transform:uppercase;letter-spacing:1px}
.send-btn:hover{background:var(--accent)}
.speak-btn{background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:2px;padding:10px 14px;cursor:pointer;font-size:9px;font-weight:600;white-space:nowrap;transition:all .25s;text-transform:uppercase;letter-spacing:.5px}
.speak-btn:hover{background:var(--accent);color:#fff}
.speak-btn.active{background:var(--accent);color:#fff;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}

/* API panel */
.api-panel{display:none;padding:6px 24px;border-top:1px solid var(--border);background:var(--surface)}
.api-panel.show{display:block}
.api-panel label{font-size:8px;color:var(--text3);text-transform:uppercase;letter-spacing:1px;font-weight:500}
.api-panel input{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:2px;padding:6px 8px;font-size:10px;font-family:'JetBrains Mono',monospace;outline:none;margin-top:3px}
.api-toggle{font-size:7px;color:var(--text3);cursor:pointer;text-align:right;padding:3px 24px;letter-spacing:.5px;text-transform:uppercase}
.api-toggle:hover{color:var(--accent)}

/* Error toast */
.error-toast{position:fixed;top:16px;right:16px;background:#dc2626;color:#fff;padding:12px 20px;border-radius:4px;font-size:12px;z-index:1000;animation:slideInRight .3s ease;max-width:400px;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.error-toast.fade-out{animation:fadeOut .3s ease forwards}
@keyframes slideInRight{from{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeOut{to{opacity:0;transform:translateY(-10px)}}

/* Live panel */
.live-panel{display:none;position:fixed;top:0;right:0;width:55vw;height:100vh;background:var(--bg);border-left:1px solid var(--border);z-index:500;flex-direction:column;box-shadow:-4px 0 20px rgba(0,0,0,.08)}
.live-panel.open{display:flex}
.live-panel-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--surface);border-bottom:1px solid var(--border)}
.live-panel-header h3{font-size:8px;color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;font-weight:600}
.live-panel-header button{background:transparent;border:1px solid var(--border);color:var(--text2);border-radius:2px;padding:4px 10px;font-size:8px;cursor:pointer;font-family:inherit}
.live-panel-header button:hover{border-color:var(--text);color:var(--text)}
.live-panel iframe{flex:1;border:none}
.lightbox{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.85);z-index:600;align-items:center;justify-content:center;cursor:pointer}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:90vh;border-radius:3px}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .sidebar{position:fixed;left:-240px;top:0;height:100vh;width:220px;z-index:500;box-shadow:2px 0 12px rgba(0,0,0,.1);transition:left .3s}
  .sidebar.open{left:0}
  .sidebar-toggle{display:block}
  .chat-messages{padding:14px 16px}
  .chat-header{padding:8px 16px}
  .chat-input{padding:10px 12px}
  .input-row{gap:4px}
  .speak-btn{padding:8px 10px;font-size:8px}
  .send-btn{padding:8px 12px;font-size:8px}
  .msg{gap:10px}
  .msg-avatar{width:24px;height:24px;font-size:9px}
  .msg-text{font-size:12px;line-height:1.6}
  .msg-role{display:none}
  .brand h1{font-size:22px;letter-spacing:4px}
  .setup-container{padding:0 4px}
  .char-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .live-panel{width:100vw}
  #start-btn{padding:14px 36px}
}

@media(max-width:480px){
  .brand h1{font-size:18px;letter-spacing:2px}
  .brand .sub{font-size:8px;letter-spacing:2px}
  .setup-card{padding:14px 16px}
  .char-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .meeting-type-grid{gap:4px}
  .mt-btn{padding:6px 10px;font-size:9px}
  .msg-header{gap:4px}
  .msg-name{font-size:10px}
  .input-row textarea{font-size:14px;min-height:36px}
}

/* Reduced motion preference */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}