/* Styles for lab/webllm/index.html */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#06060e;--text:#e0e0e8;--text-dim:#7a7a8e;--text-muted:#4a4a5e;
  --accent:#00e5a0;--accent2:#00b4d8;--accent3:#7b61ff;
  --panel-bg:rgba(8,8,20,0.85);--panel-border:rgba(255,255,255,0.06);
  --glow:rgba(0,229,160,0.15);--error:#ff6b6b;--warning:#ffd93d;
  --mono:'JetBrains Mono',monospace;--sans:'Space Grotesk',sans-serif;
}
html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;}

.wrapper{display:flex;flex-direction:column;height:100vh;padding:0;}

/* Header */
.header{
  padding:20px 24px;border-bottom:1px solid var(--panel-border);
  background:linear-gradient(to bottom,rgba(8,8,20,0.9),transparent);
  flex-shrink:0;z-index:100;
}
.header-content{max-width:100%;display:flex;justify-content:space-between;align-items:flex-start;}
.header-left{}
.header-left a{font-family:var(--mono);font-size:13px;color:var(--accent);text-decoration:none;display:inline-block;margin-bottom:8px;}
.header-left a:hover{color:#fff;}
.header-left h1{font-size:24px;font-weight:600;margin-bottom:4px;}
.header-left p{font-size:13px;color:var(--text-dim);}
.header-right{display:flex;gap:12px;align-items:center;}
.status-badge{
  display:flex;gap:6px;align-items:center;
  font-family:var(--mono);font-size:11px;color:var(--text-muted);
  padding:6px 10px;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:6px;
}
.status-dot{width:6px;height:6px;border-radius:50%;display:inline-block;}
.status-dot.loading{background:#ffd93d;animation:pulse 1.5s infinite;}
.status-dot.ready{background:var(--accent);}
.status-dot.error{background:var(--error);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}

/* Main content area */
.content{flex:1;display:flex;gap:20px;padding:20px 24px;min-height:0;overflow:hidden;}

/* Chat panel (left) */
.chat-panel{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;}
.chat-messages{
  flex:1;overflow-y:auto;margin-bottom:16px;padding-right:4px;
  display:flex;flex-direction:column;gap:12px;
}
.message{
  padding:12px 14px;border-radius:8px;word-wrap:break-word;
  animation:slideIn 0.2s ease-out;
}
@keyframes slideIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
.message.user{
  background:rgba(0,229,160,0.15);border-left:2px solid var(--accent);margin-left:24px;
  color:var(--text);
}
.message.assistant{
  background:var(--panel-bg);border:1px solid var(--panel-border);margin-right:24px;
  color:var(--text-dim);
}
.message-thinking{
  font-style:italic;color:var(--text-muted);opacity:0.7;
}
.message code{
  background:rgba(0,0,0,0.3);padding:1px 4px;border-radius:3px;font-family:var(--mono);font-size:12px;
}
.message pre{
  background:rgba(0,0,0,0.4);padding:8px;border-radius:4px;overflow-x:auto;font-size:11px;
  margin-top:6px;font-family:var(--mono);
}

/* Chat input */
.chat-input{
  display:flex;gap:8px;flex-shrink:0;
}
.chat-input input{
  flex:1;background:var(--panel-bg);border:1px solid var(--panel-border);
  color:var(--text);padding:10px 14px;border-radius:6px;
  font-family:var(--sans);font-size:14px;
  transition:border-color 0.2s;
}
.chat-input input:focus{outline:none;border-color:var(--accent);}
.chat-input input::placeholder{color:var(--text-muted);}
.chat-input input:disabled{opacity:0.5;cursor:not-allowed;}
.chat-input button{
  padding:10px 16px;background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#000;border:none;border-radius:6px;font-family:var(--mono);font-size:12px;
  font-weight:600;cursor:pointer;transition:all 0.2s;
  box-shadow:0 0 12px rgba(0,229,160,0.2);
}
.chat-input button:hover:not(:disabled){
  box-shadow:0 0 20px rgba(0,229,160,0.4);transform:translateY(-1px);
}
.chat-input button:disabled{opacity:0.5;cursor:not-allowed;}

/* Sidebar (right) */
.sidebar{width:280px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;padding-right:4px;}

/* Model selector */
.model-selector{
  background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;padding:12px;
}
.model-selector label{
  display:block;font-family:var(--mono);font-size:11px;color:var(--text-muted);margin-bottom:6px;
}
.model-selector select{
  width:100%;background:rgba(0,0,0,0.3);border:1px solid var(--panel-border);
  color:var(--text);padding:6px 8px;border-radius:4px;font-family:var(--sans);font-size:12px;
  cursor:pointer;
}
.model-selector select:focus{outline:none;border-color:var(--accent);}
.model-selector select:disabled{opacity:0.5;cursor:not-allowed;}

/* Status panel */
.status-panel{
  background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;padding:12px;
}
.status-item{
  font-family:var(--mono);font-size:11px;color:var(--text-muted);margin-bottom:8px;
  display:flex;justify-content:space-between;
}
.status-item:last-child{margin-bottom:0;}
.status-item .value{color:var(--text-dim);font-weight:600;}
.progress-bar{
  width:100%;height:4px;background:rgba(255,255,255,0.1);border-radius:2px;overflow:hidden;margin-top:6px;
}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0%;transition:width 0.2s;}
#progressContainer{display:none;margin-top:8px;}
.download-label{font-family:var(--mono);font-size:10px;color:var(--text-muted);margin-top:4px;}

/* Info panel */
.info-panel{
  background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;padding:12px;cursor:pointer;
  transition:border-color 0.2s;
}
.info-panel:hover{border-color:var(--accent3);}
.info-toggle{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:11px;color:var(--text-dim);font-weight:600;
  user-select:none;
}
.toggle-arrow{transition:transform 0.2s;}
.toggle-arrow.open{transform:rotate(180deg);}
.info-content{
  max-height:0;overflow:hidden;transition:max-height 0.3s ease-out;
  margin-top:0;
}
.info-content.open{max-height:500px;margin-top:12px;}
.info-text{font-size:12px;color:var(--text-dim);line-height:1.5;}
.info-text strong{color:var(--text);}
.info-text p{margin-bottom:8px;}
.info-text p:last-child{margin-bottom:0;}

/* Prompts panel */
.prompts-panel{
  background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;padding:12px;
}
.prompts-title{
  font-family:var(--mono);font-size:11px;color:var(--text-muted);font-weight:600;margin-bottom:8px;
}
.prompt-btn{
  display:block;width:100%;text-align:left;padding:8px;
  background:rgba(255,255,255,0.04);border:1px solid var(--panel-border);
  color:var(--text-dim);font-family:var(--sans);font-size:11px;
  border-radius:4px;margin-bottom:6px;cursor:pointer;
  transition:all 0.2s;
}
.prompt-btn:hover{
  background:rgba(0,229,160,0.1);border-color:var(--accent);color:var(--text);
}
.prompt-btn:last-child{margin-bottom:0;}

/* Error state */
.error-banner{
  background:rgba(255,107,107,0.15);border:1px solid var(--error);border-radius:6px;
  padding:10px 12px;font-size:12px;color:var(--error);margin-bottom:12px;
}

/* Mobile responsive */
@media(max-width:768px){
  .content{flex-direction:column;gap:12px;}
  .sidebar{width:100%;height:200px;}
  .header-content{flex-direction:column;gap:12px;}
  .header-right{width:100%;}
  .chat-messages,.sidebar{padding-right:0;}
}

/* Scrollbar styling */
.chat-messages::-webkit-scrollbar,.sidebar::-webkit-scrollbar{width:6px;}
.chat-messages::-webkit-scrollbar-track,.sidebar::-webkit-scrollbar-track{background:transparent;}
.chat-messages::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.1);border-radius:3px;
}
.chat-messages::-webkit-scrollbar-thumb:hover,.sidebar::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,0.2);
}
.skip-link{position:absolute;top:-40px;left:0;background:var(--accent,#64ffda);color:var(--bg,#0a0a0f);padding:10px 18px;z-index:1000;font-size:13px;font-weight:600;text-decoration:none;border-radius:0 0 6px 0;transition:top .2s}
.skip-link:focus{top:0;outline:2px solid var(--accent,#64ffda);outline-offset:2px}