static/css/app.css

/* ── AgentScope PWA — app.css ───────────────────────────────────────────── */
/* Aesthetic: industrial-terminal, cyan on near-black, monospace precision   */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Syne:wght@400;600;700;800&display=swap');

/* ── CSS Variables ── */
:root {
  --bg:       #080c14;
  --bg2:      #0d1220;
  --bg3:      #111827;
  --border:   rgba(0,229,255,.12);
  --border2:  rgba(0,229,255,.22);
  --accent:   #00e5ff;
  --accent2:  #7c3aed;
  --accent3:  #10b981;
  --warn:     #f59e0b;
  --error:    #ef4444;
  --text:     #e2e8f0;
  --text2:    #94a3b8;
  --text3:    #64748b;
  --sidebar-w: 260px;
  --radius:   6px;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-ui:   'Syne', 'JetBrains Mono', sans-serif;
  --transition: .18s cubic-bezier(.4,0,.2,1);
}

body.light {
  --bg:       #f0f4f8;
  --bg2:      #ffffff;
  --bg3:      #e8edf4;
  --border:   rgba(0,100,180,.14);
  --border2:  rgba(0,100,180,.28);
  --accent:   #0284c7;
  --text:     #0f172a;
  --text2:    #475569;
  --text3:    #94a3b8;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  height: 100%;
}
body {
  /* body IS the layout flex container (no .layout wrapper in HTML) */
  display: flex;
  height: 100vh;
  height: 100dvh; /* dynamic: shrinks when mobile keyboard appears */
  width: 100vw;
  overflow: hidden;
  font-family: var(--font-mono);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Layout (alias — body already is the flex container) ── */
.layout {
  display: flex;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
}

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--transition);
  z-index: 100;
  position: relative;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-ui);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--accent);
}

.logo-icon {
  font-size: 1.4rem;
  filter: drop-shadow(0 0 6px var(--accent));
}

.btn-new {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition);
}
.btn-new:hover { background: rgba(0,229,255,.1); }
.btn-new svg { width: 14px; height: 14px; }

/* Nav */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: .5rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .75rem;
  background: transparent;
  border: none;
  color: var(--text2);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: all var(--transition);
  text-align: left;
}
.nav-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.nav-item:hover { background: rgba(0,229,255,.07); color: var(--text); }
.nav-item.active { background: rgba(0,229,255,.12); color: var(--accent); }

/* Session list */
.session-list-header {
  padding: .5rem 1rem .25rem;
  font-size: .65rem;
  letter-spacing: .12em;
  color: var(--text3);
  font-family: var(--font-ui);
  font-weight: 700;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btn-new-session {
  font-size: .65rem;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--accent);
  background: rgba(0,229,255,.08);
  border: 1px solid rgba(0,229,255,.2);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.btn-new-session:hover { background: rgba(0,229,255,.18); }

.session-list {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  padding: .25rem .5rem;
}
.session-list::-webkit-scrollbar { width: 4px; }
.session-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

.session-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .6rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition);
  border: 1px solid transparent;
}
.session-item:hover { background: rgba(0,229,255,.05); }
.session-item.active { background: rgba(0,229,255,.1); border-color: var(--border2); }

.session-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent3);
  flex-shrink: 0;
}

.session-title {
  flex: 1;
  font-size: .78rem;
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-item.active .session-title { color: var(--text); }

.session-del {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--text3); cursor: pointer;
  border-radius: 4px; opacity: 0;
  transition: opacity var(--transition);
}
.session-item:hover .session-del { opacity: 1; }
.session-del:hover { color: var(--error); }
.session-del svg { width: 12px; height: 12px; }

/* Sidebar footer */
.sidebar-footer {
  padding: .75rem 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--error);
  margin-left: auto;
  transition: background .3s;
}
.status-dot.online { background: var(--accent3); box-shadow: 0 0 6px var(--accent3); }

/* ── Mobile topbar ── */
.mobile-topbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  align-items: center;
  justify-content: space-between;
  padding: 0 .75rem;
  z-index: 200;
}
.mobile-title {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
}

/* ── Main ── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ── Views ── */
.view { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.view.active { display: flex; }

/* ── Chat view ── */
.chat-header {
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg2);
  flex-shrink: 0;
}
.chat-header-info { display: flex; flex-direction: column; gap: 2px; }
.chat-agent-name {
  font-family: var(--font-ui);
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
}
.chat-model-tag {
  font-size: .7rem;
  color: var(--accent);
  background: rgba(0,229,255,.1);
  padding: 1px 6px;
  border-radius: 3px;
  width: fit-content;
  border: 1px solid rgba(0,229,255,.2);
}
.chat-header-actions { display: flex; gap: .5rem; }

/* Messages */
.messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.messages::-webkit-scrollbar { width: 4px; }
.messages::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

.message {
  display: flex;
  gap: .75rem;
  animation: msgIn .2s ease-out;
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.message.user { flex-direction: row-reverse; }

.msg-avatar {
  width: 32px; height: 32px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
  font-family: var(--font-ui);
}
.message.user .msg-avatar {
  background: rgba(124,58,237,.2);
  border: 1px solid rgba(124,58,237,.4);
  color: #a78bfa;
}
.message.assistant .msg-avatar {
  background: rgba(0,229,255,.1);
  border: 1px solid rgba(0,229,255,.25);
  color: var(--accent);
}
.message.system .msg-avatar {
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.25);
  color: var(--accent3);
}

.msg-body { flex: 1; min-width: 0; }

.msg-meta {
  font-size: .68rem;
  color: var(--text3);
  margin-bottom: .25rem;
}

.msg-content {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-size: .85rem;
  line-height: 1.7;
  word-break: break-word;
  position: relative;
}
.message.user .msg-content {
  background: rgba(124,58,237,.1);
  border-color: rgba(124,58,237,.25);
}

/* Markdown in messages */
.msg-content h1, .msg-content h2, .msg-content h3 {
  font-family: var(--font-ui);
  color: var(--accent);
  margin: .75rem 0 .35rem;
}
.msg-content h1 { font-size: 1.2rem; }
.msg-content h2 { font-size: 1rem; }
.msg-content h3 { font-size: .9rem; }
.msg-content p { margin: .4rem 0; }
.msg-content ul, .msg-content ol { margin: .4rem 0 .4rem 1.2rem; }
.msg-content li { margin: .2rem 0; }
.msg-content a { color: var(--accent); text-decoration: underline; }
.msg-content code {
  font-family: var(--font-mono);
  font-size: .8em;
  background: rgba(0,229,255,.08);
  border: 1px solid rgba(0,229,255,.15);
  padding: 1px 5px;
  border-radius: 3px;
}
.msg-content pre {
  background: #030712;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  overflow-x: auto;
  max-width: 100%;
  margin: .5rem 0;
  position: relative;
  box-sizing: border-box;
}
.msg-content pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: .78rem;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}
.copy-code-btn {
  position: absolute;
  top: .4rem; right: .4rem;
  background: rgba(0,229,255,.1);
  border: 1px solid rgba(0,229,255,.2);
  color: var(--accent);
  font-size: .65rem;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--font-mono);
  transition: background var(--transition);
}
.copy-code-btn:hover { background: rgba(0,229,255,.2); }

/* Tool call events */
.tool-event {
  font-size: .75rem;
  color: var(--text2);
  background: rgba(16,185,129,.06);
  border: 1px solid rgba(16,185,129,.2);
  border-radius: var(--radius);
  padding: .4rem .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.tool-event .tool-name { color: var(--accent3); font-weight: 600; }
.tool-event .tool-status { color: var(--text3); }
.tool-event-result {
  font-size: .72rem;
  color: var(--text3);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .4rem .75rem;
  font-family: var(--font-mono);
  max-height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Streaming cursor */
.streaming-cursor::after {
  content: '▌';
  color: var(--accent);
  animation: blink .7s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Message actions */
.msg-actions {
  display: flex;
  gap: .25rem;
  margin-top: .35rem;
  opacity: 0;
  transition: opacity var(--transition);
}
.message:hover .msg-actions { opacity: 1; }
.msg-action-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text3);
  font-size: .68rem;
  padding: 2px 7px;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all var(--transition);
}
.msg-action-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Welcome screen */
.welcome-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 2rem;
}
.welcome-screen.hidden { display: none; }
.welcome-logo {
  font-size: 4rem;
  color: var(--accent);
  filter: drop-shadow(0 0 20px var(--accent));
  line-height: 1;
}
.welcome-title {
  font-family: var(--font-ui);
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
}
.welcome-sub { color: var(--text2); font-size: .85rem; max-width: 400px; }

.welcome-features {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  max-width: 500px;
}
.feature-chip {
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text2);
  padding: .35rem .75rem;
  border-radius: 20px;
  font-size: .75rem;
}

/* Chat form */
.chat-form {
  padding: .75rem 1.25rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0;
}
.input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: .5rem;
  transition: border-color var(--transition);
}
.input-wrapper:focus-within { border-color: var(--accent); }

.chat-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .85rem;
  resize: none;
  outline: none;
  line-height: 1.5;
  max-height: 200px;
  overflow-y: auto;
}
.chat-input::placeholder { color: var(--text3); }
.chat-input:disabled { opacity: .4; cursor: not-allowed; }

.input-hint {
  font-size: .68rem;
  color: var(--text3);
  margin-top: .35rem;
  padding: 0 .25rem;
}

/* Buttons */
.btn-send {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent);
  border: none;
  border-radius: 5px;
  color: var(--bg);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition);
}
.btn-send:hover { filter: brightness(1.1); }
.btn-send:disabled { opacity: .3; cursor: not-allowed; }
.btn-send svg { width: 14px; height: 14px; }

.btn-send.stop-mode { background: var(--error); }

.icon-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.icon-btn:hover { border-color: var(--border2); color: var(--text); }
.icon-btn.active { border-color: var(--accent); color: var(--accent); }
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:disabled { opacity: .3; cursor: not-allowed; }

.input-action {
  width: 28px; height: 28px;
  border: none;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  padding: .5rem 1.25rem;
  font-family: var(--font-ui);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary.btn-lg { padding: .75rem 2rem; font-size: .95rem; }

.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: .4rem 1rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-outline:hover { background: rgba(0,229,255,.08); border-color: var(--accent); }
.btn-sm { padding: .3rem .7rem; font-size: .72rem; }

/* ── View header ── */
.view-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.view-header h2 {
  font-family: var(--font-ui);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.view-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.view-body::-webkit-scrollbar { width: 4px; }
.view-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* ── Card ── */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.card-title {
  font-family: var(--font-ui);
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .75rem;
  letter-spacing: .02em;
}
.card-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* ── Forms ── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.form-group { display: flex; flex-direction: column; gap: .35rem; }
.form-group.full { grid-column: 1 / -1; }
.form-group label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hint {
  font-size: .65rem;
  color: var(--text3);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.input {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: .5rem .75rem;
  font-family: var(--font-mono);
  font-size: .82rem;
  outline: none;
  width: 100%;
  transition: border-color var(--transition);
}
.input:focus { border-color: var(--accent); }
.input option { background: var(--bg3); }
textarea.input { resize: vertical; }

/* Checkbox */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.checkbox-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  color: var(--text2);
  cursor: pointer;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .3rem .6rem;
  transition: border-color var(--transition);
}
.checkbox-item:hover { border-color: var(--border2); }
.checkbox-item input[type=checkbox] { accent-color: var(--accent); }

/* ── Provider select (with free badges) ── */
.provider-option-free::after {
  content: " ✦ FREE";
  color: var(--accent3);
  font-size: .7em;
}

/* ── Agents grid ── */
.agent-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .75rem;
}
.agent-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  cursor: pointer;
  transition: border-color var(--transition);
}
.agent-card:hover { border-color: var(--accent); }
.agent-card-name {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .9rem;
  color: var(--text);
  margin-bottom: .3rem;
}
.agent-card-meta {
  font-size: .72rem;
  color: var(--text3);
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.badge {
  background: rgba(0,229,255,.1);
  border: 1px solid rgba(0,229,255,.2);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: .68rem;
}
.badge.free { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.2); color: var(--accent3); }

/* ── Tools grid ── */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem;
}
.tool-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}
.tool-card-name {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .85rem;
  color: var(--text);
  margin-bottom: .3rem;
}
.tool-card-desc { font-size: .75rem; color: var(--text2); }

.skeleton-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: 90px;
  animation: skeletonPulse 1.5s ease-in-out infinite;
}
@keyframes skeletonPulse {
  0%,100% { opacity: .5; }
  50% { opacity: 1; }
}

/* MCP rows */
.mcp-list { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .4rem; }
.mcp-row {
  display: flex;
  gap: .4rem;
  align-items: center;
}

/* MCP inspect result */
.mcp-inspect-result {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: .75rem;
  margin-top: .75rem;
  font-size: .78rem;
}
.mcp-inspect-result.hidden { display: none; }

/* Settings */
.about-info { display: flex; flex-direction: column; gap: .5rem; }
.about-row {
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text2);
}
.about-row:last-child { border-bottom: none; }
.about-row a { color: var(--accent); text-decoration: none; }

.text-muted { color: var(--text2); font-size: .8rem; }

/* Error/success */
.error-banner {
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.3);
  color: var(--error);
  border-radius: var(--radius);
  padding: .5rem .75rem;
  font-size: .8rem;
  margin-top: .5rem;
}
.error-banner.hidden { display: none; }
.success-msg { color: var(--accent3); font-size: .8rem; }
.success-msg.hidden { display: none; }

/* Toast */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  z-index: 9999;
}
.toast {
  background: var(--bg2);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: .6rem 1rem;
  border-radius: var(--radius);
  font-size: .8rem;
  animation: toastIn .2s ease-out;
  max-width: 300px;
}
.toast.error { border-color: rgba(239,68,68,.4); color: var(--error); }
.toast.success { border-color: rgba(16,185,129,.4); color: var(--accent3); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Sidebar overlay mobile */
.sidebar-overlay {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.sidebar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Provider grid for settings */
.provider-keys-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .6rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  :root { --sidebar-w: 280px; }

  .mobile-topbar { display: flex; }

  /* Apply top padding to body (no .layout div in HTML) */
  body { padding-top: 52px; height: calc(100vh - 52px); height: calc(100dvh - 52px); }

  .sidebar {
    position: fixed;
    top: 52px; left: 0;
    height: calc(100vh - 52px);
    height: calc(100dvh - 52px);
    transform: translateX(-100%);
    z-index: 150;
  }
  .sidebar.open { transform: translateX(0); }

  /* overlay visibility handled by .active class + pointer-events (see above) */

  .form-grid { grid-template-columns: 1fr; }

  .agent-cards, .tools-grid, .provider-keys-grid {
    grid-template-columns: 1fr;
  }

  /* ── Mobile fixes v2.2 ── */

  /* Less padding in view panels */
  .view-header { padding: 0.5rem 0.75rem; }
  .view-body { padding: 0.75rem; }

  /* Stack side-by-side form rows vertically on mobile */
  .form-row { flex-direction: column; gap: 0; }

  /* Presets: compact horizontal scroll strip instead of tall grid */
  .presets-section {
    overflow: hidden;
    flex-shrink: 0;
  }
  .presets-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 6px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .presets-grid::-webkit-scrollbar { display: none; }
  .preset-card {
    flex: 0 0 auto;
    width: 80px;
    min-width: 80px;
    padding: 7px 5px;
    scroll-snap-align: start;
  }
  .preset-icon { font-size: 18px; margin-bottom: 2px; }
  .preset-name { font-size: 10px; }
  .preset-desc { display: none; }

  /* Chat header compact on mobile */
  .chat-header { padding: 0.5rem 0.75rem; }

  /* Welcome screen on mobile */
  .welcome-title { font-size: 1.4rem; }
  .welcome-features { gap: 0.35rem; }
  .feature-chip { font-size: 0.7rem; padding: 0.25rem 0.5rem; }

  /* Tools inspector input row stacks vertically */
  .input-row { flex-direction: column; }
  .input-row .btn-primary { width: 100%; margin-top: 0.4rem; }

  /* MCP actions row wraps on mobile */
  .mcp-actions { flex-wrap: wrap; gap: 0.4rem; }
}

/* ── File Upload UI ────────────────────────────────────────────────────────── */
.attached-files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem 0;
  width: 100%;
}

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface-2, rgba(108,99,255,0.15));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  color: var(--text-2, #aaa);
  max-width: 200px;
}

.file-chip .file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-chip .file-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.7;
  flex-shrink: 0;
}

.file-chip .file-remove:hover { opacity: 1; color: #ff6b6b; }

.file-chip .file-icon {
  flex-shrink: 0;
  font-size: 1rem;
}

.file-chip.uploading { opacity: 0.6; }
.file-chip.error { border-color: #ff6b6b; color: #ff6b6b; }

.msg-file-list {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.msg-file-badge {
  background: rgba(108,99,255,0.2);
  border: 1px solid rgba(108,99,255,0.3);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  font-size: 0.72rem;
  color: #a0a0ff;
}

/* ── Range slider ── */
.range-input{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:var(--border);outline:none;padding:0;margin:.5rem 0 .25rem;cursor:pointer}
.range-input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg-primary);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.range-input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-primary);cursor:pointer}
.range-labels{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-muted)}
.btn-danger{background:transparent;border:1px solid #e55;color:#e55;padding:.35rem .75rem;border-radius:6px;cursor:pointer;font-size:.8rem;transition:background .15s}
.btn-danger:hover{background:rgba(238,85,85,.12)}


/* ═══════════════════════════════ v2.2 Styles ═══════════════════════════════ */

/* F6: Collapsible tool results */
.tool-result-pre { max-height: 200px; overflow: hidden; transition: max-height 0.2s; }
.tool-collapse-btn {
  display: block; width: 100%; margin-top: 4px; padding: 4px 8px;
  background: var(--surface2, #1e2530); border: 1px solid var(--border, #2a3341);
  border-radius: 4px; color: var(--text-muted, #8899aa); font-size: 11px;
  cursor: pointer; text-align: left; font-family: monospace;
}
.tool-collapse-btn:hover { background: var(--surface3, #252f3f); color: var(--text, #e2e8f0); }

/* F7: Thinking / streaming visual */
.thinking-steps {
  display: flex; align-items: center; gap: 8px;
  color: var(--accent, #38bdf8); font-size: 13px; padding: 8px 0; font-family: monospace;
}
.thinking-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent, #38bdf8);
  animation: thinking-pulse 1s ease-in-out infinite;
}
@keyframes thinking-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.7)} }

/* F3: Image paste preview */
.paste-preview {
  display: flex; align-items: center; gap: 8px; padding: 8px;
  background: var(--surface2, #1e2530); border-radius: 8px;
  border: 1px solid var(--border, #2a3341); margin-bottom: 6px;
}

/* F9: Slash command menu */
.slash-menu {
  position: absolute; bottom: 100%; left: 0; right: 0;
  background: var(--surface, #13161e); border: 1px solid var(--border, #2a3341);
  border-radius: 8px; box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
  z-index: 1000; overflow: hidden; margin-bottom: 4px;
}
.slash-menu.hidden { display: none; }
.slash-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  cursor: pointer; transition: background 0.12s; font-size: 13px;
}
.slash-item:hover, .slash-item.active { background: var(--surface2, #1e2530); }
.slash-item code { color: var(--accent, #38bdf8); font-size: 12px; min-width: 80px; }
.slash-item span { color: var(--text-muted, #8899aa); }

/* F5: Agent presets grid */
.presets-section { margin-bottom: 16px; }
.presets-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px;
}
.preset-card {
  background: var(--surface2, #1e2530); border: 1px solid var(--border, #2a3341);
  border-radius: 8px; padding: 12px; cursor: pointer; transition: all 0.15s;
  text-align: center;
}
.preset-card:hover { border-color: var(--accent, #38bdf8); transform: translateY(-1px); }
.preset-card.active { border-color: var(--accent, #38bdf8); background: rgba(56,189,248,0.08); }
.preset-icon { font-size: 24px; margin-bottom: 6px; }
.preset-name { font-size: 12px; font-weight: 600; color: var(--text, #e2e8f0); margin-bottom: 4px; }
.preset-desc { font-size: 10px; color: var(--text-muted, #8899aa); line-height: 1.4; }

/* F12: Context window meter */
.context-meter {
  display: flex; align-items: center; gap: 8px; height: 18px;
  padding: 0 2px; margin-bottom: 4px;
}
.meter-bar {
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--accent, #38bdf8); transition: width 0.3s, background 0.3s;
  min-width: 0;
}
.meter-bar.meter-warn { background: #f59e0b; }
.meter-bar.meter-danger { background: #f43f5e; animation: meter-flash 1s ease infinite; }
.meter-label { font-size: 10px; color: var(--text-muted, #8899aa); font-family: monospace; white-space: nowrap; }
@keyframes meter-flash { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* Pipeline section styling */
.pipeline-section { margin-top: 16px; padding: 12px; background: var(--surface2,#1e2530); border-radius: 8px; }
.pipeline-step { display:flex; align-items:center; gap:8px; padding:8px; margin:4px 0; background:var(--surface,#13161e); border-radius:6px; }

/* Export buttons */
#btn-export-md, #btn-export-json { font-size: 11px; padding: 4px 8px; }


/* ── Bottom Nav Bar (Mobile) v2.3 ──────────────────────────────────────────── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: var(--bg, #0d1117);
  border-top: 1px solid var(--border, #21262d);
  z-index: 400;
  flex-direction: row;
  align-items: stretch;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.45);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 768px) {
  .bottom-nav { display: flex; }
  .chat-input-bar { bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; }
  .messages { padding-bottom: 80px; }
  #messages { padding-bottom: 80px; }
}
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted, #7d8590);
  font-size: 10px;
  font-weight: 500;
  font-family: inherit;
  padding: 6px 4px 4px;
  transition: color 0.15s, background 0.15s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-item:focus-visible { outline: 2px solid var(--accent, #00e5a0); outline-offset: -2px; }
.bottom-nav-item:hover { color: var(--accent, #00e5a0); background: rgba(0,229,160,0.05); }
.bottom-nav-item.active { color: var(--accent, #00e5a0); }
.bottom-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0; left: 25%; right: 25%;
  height: 2px;
  background: var(--accent, #00e5a0);
  border-radius: 0 0 2px 2px;
}
.bottom-nav-item svg { transition: transform 0.15s; }
.bottom-nav-item:active svg { transform: scale(0.88); }
.bottom-nav-item span { line-height: 1; }


/* ── Mobile: Compact token meter (ne zauzima input prostor) v2.3 ────────────── */
@media (max-width: 768px) {
  /* Meter postaje tanka linija na dnu input-wrappera, bez zauzimanja prostora */
  .input-wrapper { position: relative; }
  .context-meter {
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 0 0 var(--radius, 8px) var(--radius, 8px);
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
  }
  .meter-bar {
    height: 2px !important;
    border-radius: 0 !important;
    position: absolute;
    left: 0; bottom: 0; top: 0;
  }
  .meter-label { display: none !important; }
  /* Sakrij input hint na mobilnom (samo zauzima prostor) */
  .input-hint { display: none; }
}

/* ── HTML Code Preview v2.4 ──────────────────────────────────────────────── */
.code-preview-btn {
  display:inline-flex;align-items:center;gap:5px;font-size:11px;
  font-family:var(--font-mono,monospace);padding:3px 10px;margin-top:4px;
  background:rgba(0,212,255,0.08);border:1px solid rgba(0,212,255,0.25);
  color:#00d4ff;border-radius:4px;cursor:pointer;transition:background 0.15s;
  -webkit-tap-highlight-color:transparent;
}
.code-preview-btn:hover{background:rgba(0,212,255,0.16);}
.code-preview-wrap{margin-top:6px;border-radius:8px;overflow:hidden;border:1px solid var(--border,#21262d);}
.code-preview-iframe{width:100%;height:320px;border:none;background:#fff;display:block;}

/* ── v2.5 ──────────────────────────────────────────────────────────────────── */
.btn-stop{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;background:rgba(255,95,95,0.1);border:1px solid rgba(255,95,95,0.3);color:#ff5f5f;border-radius:8px;cursor:pointer;font-size:13px;font-family:var(--font-mono,monospace);transition:background 0.15s;-webkit-tap-highlight-color:transparent;}
.btn-stop:hover{background:rgba(255,95,95,0.2);}
.code-toolbar{display:flex;align-items:center;gap:6px;padding:4px 10px;background:rgba(255,255,255,0.03);border:1px solid var(--border,#21262d);border-bottom:none;border-radius:6px 6px 0 0;margin-top:8px;}
.code-toolbar + pre{margin-top:0 !important;border-radius:0 0 6px 6px;}
.code-lang-badge{font-family:var(--font-mono,monospace);font-size:10px;font-weight:600;padding:1px 7px;border-radius:4px;letter-spacing:0.5px;background:rgba(0,212,255,0.1);border:1px solid rgba(0,212,255,0.2);color:#00d4ff;}
.code-copy-btn{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:10px;font-family:var(--font-mono,monospace);padding:2px 8px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:#8b949e;border-radius:4px;cursor:pointer;transition:all 0.15s;-webkit-tap-highlight-color:transparent;}
.code-copy-btn:hover{background:rgba(255,255,255,0.1);color:#e2e8f0;}
.code-collapsed{max-height:160px;overflow:hidden;position:relative;}
.code-collapsed::after{content:'';position:absolute;bottom:0;left:0;right:0;height:48px;background:linear-gradient(transparent,var(--bg-secondary,#161b22));pointer-events:none;}
.code-expand-btn{display:block;width:100%;text-align:center;font-size:11px;font-family:var(--font-mono,monospace);padding:4px;margin-top:2px;background:rgba(255,255,255,0.04);border:1px solid var(--border,#21262d);color:#8b949e;border-radius:0 0 6px 6px;cursor:pointer;transition:background 0.15s;}
.code-expand-btn:hover{background:rgba(255,255,255,0.08);color:#e2e8f0;}
.mermaid-wrap{background:rgba(255,255,255,0.03);border:1px solid var(--border,#21262d);border-radius:8px;padding:16px;margin:8px 0;overflow-x:auto;text-align:center;}
.mermaid-wrap svg{max-width:100%;height:auto;}
.img-lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:9999;align-items:center;justify-content:center;}
.img-lightbox.active{display:flex;}
.lb-img{max-width:92vw;max-height:90vh;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,0.6);}
.lb-close{position:absolute;top:16px;right:16px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#fff;border-radius:50%;width:36px;height:36px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.lb-close:hover{background:rgba(255,255,255,0.2);}
.prose table,.message-bubble table{border-collapse:collapse;width:100%;margin:10px 0;font-size:13px;border-radius:6px;overflow:hidden;}
.prose th,.message-bubble th{background:rgba(0,212,255,0.08);color:#00d4ff;padding:7px 12px;text-align:left;font-weight:600;border-bottom:1px solid rgba(0,212,255,0.2);}
.prose td,.message-bubble td{padding:6px 12px;border-bottom:1px solid rgba(255,255,255,0.05);}
.prose tr:last-child td,.message-bubble tr:last-child td{border-bottom:none;}
.prose tr:hover td,.message-bubble tr:hover td{background:rgba(255,255,255,0.03);}
.prose table,.message-bubble table{display:block;overflow-x:auto;}
/* v3.0 */
.token-badge{display:inline-flex;align-items:center;font-family:var(--font-mono,monospace);font-size:9px;color:rgba(0,212,255,.45);margin-top:3px;padding:1px 6px;border-radius:4px;background:rgba(0,212,255,.05);border:1px solid rgba(0,212,255,.1);}
.token-session-bar{display:flex;align-items:center;gap:6px;padding:3px 10px;font-size:10px;color:#6b7280;background:rgba(0,0,0,.2);border-bottom:1px solid rgba(255,255,255,.05);font-family:monospace;}
.file-manager-panel{position:fixed;right:0;top:0;bottom:0;width:280px;background:#0e1119;border-left:1px solid rgba(255,255,255,.08);z-index:200;transform:translateX(100%);transition:transform .25s;display:flex;flex-direction:column;overflow:hidden;}
.file-manager-panel.open{transform:translateX(0);}
.fm-header{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06);gap:8px;}
.fm-header h3{font-size:14px;font-weight:600;flex:1;}
.fm-close{background:none;border:none;color:#8b949e;cursor:pointer;font-size:18px;}
.fm-tree{flex:1;overflow-y:auto;padding:10px;}
.fm-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;cursor:pointer;transition:background .15s;}
.fm-item:hover{background:rgba(255,255,255,.05);}
.fm-name{font-size:12px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fm-size{font-size:10px;color:#6b7280;font-family:monospace;}
.fm-empty{text-align:center;color:#6b7280;font-size:12px;padding:20px;}
.memory-item{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;background:rgba(0,212,255,.04);border:1px solid rgba(0,212,255,.12);border-radius:7px;margin-bottom:6px;}
.memory-key{font-weight:600;font-size:12px;color:#00d4ff;min-width:80px;flex-shrink:0;}
.memory-val{font-size:12px;color:#dde3ef;flex:1;word-break:break-word;}
.memory-del{background:none;border:none;color:#6b7280;cursor:pointer;font-size:14px;}
.memory-del:hover{color:#ff4757;}
.memory-add{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.memory-add input{flex:1;min-width:80px;padding:5px 8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#dde3ef;font-size:12px;}
.multiagent-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:500;align-items:center;justify-content:center;}
.multiagent-modal.open{display:flex;}
.ma-box{background:#0e1119;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:24px;width:90%;max-width:520px;max-height:80vh;overflow-y:auto;}
.ma-title{font-size:16px;font-weight:700;margin-bottom:16px;}
.ma-chat{background:#07090f;border-radius:8px;padding:12px;max-height:300px;overflow-y:auto;margin-top:12px;}
.ma-msg{padding:8px 10px;border-radius:7px;margin-bottom:8px;font-size:12px;line-height:1.5;}
.ma-msg.a{background:rgba(0,212,255,.08);border-left:3px solid #00d4ff;}
.ma-msg.b{background:rgba(180,124,245,.08);border-left:3px solid #b47cf5;}
.ma-label{font-size:10px;font-weight:700;opacity:.7;margin-bottom:3px;font-family:monospace;}
.cm-editor-wrap{border:1px solid rgba(0,212,255,.2);border-radius:0 0 6px 6px;margin-top:0;}
.cm-editor-wrap .CodeMirror{height:auto;max-height:400px;font-size:12px;border-radius:0 0 6px 6px;}
.code-edit-btn{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-family:var(--font-mono,monospace);padding:2px 8px;background:rgba(180,124,245,.08);border:1px solid rgba(180,124,245,.2);color:#b47cf5;border-radius:4px;cursor:pointer;}
.code-edit-btn:hover{background:rgba(180,124,245,.15);}
.code-run-btn{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-family:var(--font-mono,monospace);padding:2px 8px;background:rgba(57,211,83,.08);border:1px solid rgba(57,211,83,.2);color:#39d353;border-radius:4px;cursor:pointer;margin-left:4px;}
.code-run-btn:hover{background:rgba(57,211,83,.15);}
.plotly-wrap{margin:8px 0;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.07);background:#0d1225;}
.btn-files{position:fixed;bottom:80px;right:16px;width:44px;height:44px;background:rgba(0,212,255,.12);border:1px solid rgba(0,212,255,.25);color:#00d4ff;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,212,255,.15);z-index:100;transition:background .15s;}
.btn-files:hover{background:rgba(0,212,255,.22);}
/* v3.0 */
.token-badge{display:inline-flex;align-items:center;font-family:var(--font-mono,monospace);font-size:9px;color:rgba(0,212,255,.45);margin-top:3px;padding:1px 6px;border-radius:4px;background:rgba(0,212,255,.05);border:1px solid rgba(0,212,255,.1);}
.token-session-bar{display:flex;align-items:center;gap:6px;padding:3px 10px;font-size:10px;color:#6b7280;background:rgba(0,0,0,.2);border-bottom:1px solid rgba(255,255,255,.05);font-family:monospace;}
.file-manager-panel{position:fixed;right:0;top:0;bottom:0;width:280px;background:#0e1119;border-left:1px solid rgba(255,255,255,.08);z-index:200;transform:translateX(100%);transition:transform .25s;display:flex;flex-direction:column;overflow:hidden;}
.file-manager-panel.open{transform:translateX(0);}
.fm-header{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06);gap:8px;}
.fm-header h3{font-size:14px;font-weight:600;flex:1;}
.fm-close{background:none;border:none;color:#8b949e;cursor:pointer;font-size:18px;}
.fm-tree{flex:1;overflow-y:auto;padding:10px;}
.fm-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;cursor:pointer;transition:background .15s;}
.fm-item:hover{background:rgba(255,255,255,.05);}
.fm-name{font-size:12px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fm-size{font-size:10px;color:#6b7280;font-family:monospace;}
.fm-empty{text-align:center;color:#6b7280;font-size:12px;padding:20px;}
.memory-item{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;background:rgba(0,212,255,.04);border:1px solid rgba(0,212,255,.12);border-radius:7px;margin-bottom:6px;}
.memory-key{font-weight:600;font-size:12px;color:#00d4ff;min-width:80px;flex-shrink:0;}
.memory-val{font-size:12px;color:#dde3ef;flex:1;word-break:break-word;}
.memory-del{background:none;border:none;color:#6b7280;cursor:pointer;font-size:14px;}
.memory-del:hover{color:#ff4757;}
.memory-add{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.memory-add input{flex:1;min-width:80px;padding:5px 8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#dde3ef;font-size:12px;}
.multiagent-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:500;align-items:center;justify-content:center;}
.multiagent-modal.open{display:flex;}
.ma-box{background:#0e1119;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:24px;width:90%;max-width:520px;max-height:80vh;overflow-y:auto;}
.ma-title{font-size:16px;font-weight:700;margin-bottom:16px;}
.ma-chat{background:#07090f;border-radius:8px;padding:12px;max-height:300px;overflow-y:auto;margin-top:12px;}
.ma-msg{padding:8px 10px;border-radius:7px;margin-bottom:8px;font-size:12px;line-height:1.5;}
.ma-msg.a{background:rgba(0,212,255,.08);border-left:3px solid #00d4ff;}
.ma-msg.b{background:rgba(180,124,245,.08);border-left:3px solid #b47cf5;}
.ma-label{font-size:10px;font-weight:700;opacity:.7;margin-bottom:3px;font-family:monospace;}
.cm-editor-wrap{border:1px solid rgba(0,212,255,.2);border-radius:0 0 6px 6px;margin-top:0;}
.cm-editor-wrap .CodeMirror{height:auto;max-height:400px;font-size:12px;border-radius:0 0 6px 6px;}
.code-edit-btn{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-family:var(--font-mono,monospace);padding:2px 8px;background:rgba(180,124,245,.08);border:1px solid rgba(180,124,245,.2);color:#b47cf5;border-radius:4px;cursor:pointer;}
.code-edit-btn:hover{background:rgba(180,124,245,.15);}
.code-run-btn{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-family:var(--font-mono,monospace);padding:2px 8px;background:rgba(57,211,83,.08);border:1px solid rgba(57,211,83,.2);color:#39d353;border-radius:4px;cursor:pointer;margin-left:4px;}
.code-run-btn:hover{background:rgba(57,211,83,.15);}
.plotly-wrap{margin:8px 0;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.07);background:#0d1225;}
.btn-files{position:fixed;bottom:80px;right:16px;width:44px;height:44px;background:rgba(0,212,255,.12);border:1px solid rgba(0,212,255,.25);color:#00d4ff;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,212,255,.15);z-index:100;transition:background .15s;}
.btn-files:hover{background:rgba(0,212,255,.22);}

/* ── Build Preview Panel ─────────────────────────────────────────────────── */
.build-panel {
  position:fixed;right:0;top:0;bottom:0;
  width:min(48%,760px);min-width:280px;
  background:#0b0e1a;
  border-left:1px solid rgba(0,212,255,0.18);
  display:flex;flex-direction:column;
  z-index:300;
  transform:translateX(102%);
  transition:transform 0.28s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
  box-shadow:-4px 0 24px rgba(0,0,0,0.5);
}
.build-panel.open{transform:translateX(0);pointer-events:all;}
.build-panel-head {
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;
  background:rgba(0,212,255,0.05);
  border-bottom:1px solid rgba(0,212,255,0.12);
  font-size:12px;font-weight:600;color:#00d4ff;flex-shrink:0;
}
.build-panel-title{display:flex;align-items:center;gap:8px;}
.build-live-dot{width:7px;height:7px;border-radius:50%;background:#00ff88;box-shadow:0 0 6px #00ff88;animation:livePulse 1.8s ease-in-out infinite;}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.8);}}
.build-panel-actions{display:flex;gap:4px;}
.build-panel-btn{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:#aab;border-radius:4px;padding:3px 9px;cursor:pointer;font-size:13px;line-height:1;transition:background .15s;-webkit-tap-highlight-color:transparent;}
.build-panel-btn:hover{background:rgba(255,255,255,0.14);color:#fff;}
.build-iframe{flex:1;border:none;background:#fff;width:100%;}
@media(max-width:700px){.build-panel{width:100%;}}

/* ═══════════════════════════════════════════════════════════════
   AgentScoop v2.8 — UX Upgrade Pack styles
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Reconnect banner ─────────────────────────────────────── */
.reconnect-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9000;
  background: linear-gradient(90deg, #7c2d12, #92400e);
  color: #fef3c7;
  font-size: 12px;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(251,191,36,.3);
  animation: slideDown .3s ease;
}
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.reconnect-banner button {
  background: rgba(251,191,36,.2);
  border: 1px solid rgba(251,191,36,.4);
  color: #fef3c7;
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
  font-size: 11px;
  font-family: var(--font-mono);
  transition: background .15s;
}
.reconnect-banner button:hover { background: rgba(251,191,36,.35); }

/* ── 2. Upload progress chip ─────────────────────────────────── */
.file-chip {
  display: flex;
  align-items: center;
  gap: .3rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .25rem .5rem;
  font-size: .75rem;
  max-width: 200px;
  position: relative;
  overflow: hidden;
}
.file-chip .upload-pct {
  font-size: 10px;
  color: var(--accent);
  white-space: nowrap;
  font-family: var(--font-mono);
}
.upload-bar-wrap {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--border);
}
.upload-bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width .15s linear;
  border-radius: 0 0 6px 6px;
}
.file-chip.error { border-color: var(--error); color: var(--error); }
.file-chip .file-remove {
  background: none; border: none; cursor: pointer;
  color: var(--text3); font-size: .9rem; padding: 0; flex-shrink: 0;
  line-height: 1;
}
.file-chip .file-remove:hover { color: var(--error); }
.file-chip .file-icon { flex-shrink: 0; }
.file-chip .file-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Drag-over highlight on message area */
#messages.drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
  background: rgba(0,229,255,.03);
}

/* ── 3. Tool accordion ───────────────────────────────────────── */
.tool-call-card {
  background: var(--bg3);
  border: 1px solid rgba(16,185,129,.2);
  border-radius: 8px;
  overflow: hidden;
  font-size: 12px;
  font-family: var(--font-mono);
  margin: 4px 0;
  transition: border-color .15s;
}
.tool-call-card:hover { border-color: rgba(16,185,129,.4); }
.tool-call-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(16,185,129,.06);
  border-bottom: 1px solid rgba(16,185,129,.12);
  user-select: none;
}
.tool-call-name { font-weight: 600; color: var(--accent3); flex: 1; }
.tool-call-status {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.tool-call-status.running {
  background: rgba(245,158,11,.12);
  color: var(--warn);
  animation: statusPulse 1.2s ease infinite;
}
.tool-call-status.done {
  background: rgba(16,185,129,.12);
  color: var(--accent3);
}
@keyframes statusPulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.tool-args-toggle {
  font-size: 10px;
  color: var(--text3);
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  cursor: pointer;
  flex-shrink: 0;
  transition: color .12s;
}
.tool-call-header:hover .tool-args-toggle { color: var(--text2); }
.tool-call-args {
  padding: 6px 10px;
  background: rgba(0,0,0,.2);
  border-bottom: 1px solid var(--border);
}
.tool-call-args pre {
  font-size: 11px;
  color: var(--text2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow-y: auto;
}
.tool-call-result { padding: 6px 10px; }
.tool-result-pre {
  font-size: 11px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  max-height: 100px;
  overflow: hidden;
  transition: max-height .25s ease;
}
.tool-result-pre:not(.tool-result-collapsed) { max-height: none; }
.tool-toggle-btn {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 4px 8px;
  background: rgba(0,229,255,.04);
  border: 1px solid rgba(0,229,255,.15);
  border-radius: 4px;
  color: var(--text3);
  font-size: 10px;
  font-family: var(--font-mono);
  cursor: pointer;
  text-align: left;
  transition: all .12s;
}
.tool-toggle-btn:hover { background: rgba(0,229,255,.1); color: var(--accent); }

/* ── 4. System prompt template selector ──────────────────────── */
#prompt-template-select {
  outline: none;
  cursor: pointer;
  transition: border-color .15s;
}
#prompt-template-select:focus { border-color: var(--accent); }
#prompt-template-select option { background: var(--bg2); }

/* ── 5. Keyboard shortcut overlay ────────────────────────────── */
.shortcut-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.shortcut-overlay.hidden { display: none; }
.shortcut-box {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 24px;
  width: min(480px, 90vw);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.shortcut-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}
.shortcut-close {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color .12s;
}
.shortcut-close:hover { color: var(--text); }
.shortcut-list { display: flex; flex-direction: column; gap: 10px; }
.shortcut-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.shortcut-key {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 5px;
  padding: 3px 8px;
  color: var(--accent);
  white-space: nowrap;
  min-width: 110px;
  text-align: center;
}
.shortcut-desc {
  font-size: 13px;
  color: var(--text2);
}
.shortcut-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text3);
  text-align: center;
}
#btn-shortcuts {
  font-size: 13px;
  padding: 3px 8px;
}
#btn-export-pdf { font-size: 11px; padding: 4px 8px; }

/* tool-warning inline */
.tool-warning {
  font-size: 11px;
  color: var(--warn);
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 6px;
  padding: 5px 10px;
  margin: 4px 0;
  font-family: var(--font-mono);
}

/* ── Memory View (v2.7) ─────────────────────────────────────────── */
.memory-item{display:flex;align-items:center;gap:.5rem;padding:7px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:5px;}
.memory-item .mem-key{font-weight:600;color:var(--accent);font-size:.75rem;min-width:110px;}
.memory-item .mem-val{flex:1;color:var(--text2);font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.memory-item .mem-del{background:transparent;border:none;cursor:pointer;color:var(--error);opacity:.5;font-size:.8rem;padding:0 4px;transition:opacity .15s;}
.memory-item .mem-del:hover{opacity:1;}
/* ── Multi-Agent Modal (v2.7) ───────────────────────────────────── */
.ma-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.ma-chat-wrap{background:#07090f;border-radius:8px;padding:10px;max-height:280px;overflow-y:auto;margin-top:.75rem;}
/* ── Pipeline View (v2.7) ───────────────────────────────────────── */
.pipeline-chain{display:flex;align-items:center;gap:0;margin:.75rem 0;overflow-x:auto;padding-bottom:4px;}
.agent-node{background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:10px 14px;min-width:100px;text-align:center;flex-shrink:0;}
.agent-node-icon{font-size:1.2rem;margin-bottom:3px;}
.agent-node-label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);}
.agent-node-name{font-size:.7rem;color:var(--text2);margin-top:2px;}
.chain-arrow{padding:0 6px;color:var(--text3);font-size:1rem;flex-shrink:0;}


/* ── v2.8 Fix: message-bubble overflow on mobile ──────────────────────────── */
.message-bubble {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
.message-bubble pre,
.prose pre,
.msg-content pre {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
}
.message-bubble pre code,
.prose pre code,
.msg-content pre code {
  white-space: pre-wrap !important;
  word-break: break-word !important;
}
.message-body, .msg-body { min-width: 0; max-width: 100%; overflow: hidden; }
.message { min-width: 0; max-width: 100%; }
.tool-call-args pre, .tool-result-pre {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  overflow-x: auto;
}

/* ── F05 + Token Saver v2.7.1 ───────────────────────────────────────────────── */
.token-saver-banner{margin:10px 16px;}
.tsb-inner{background:linear-gradient(135deg,rgba(0,212,255,.07),rgba(0,150,180,.04));border:1px solid rgba(0,212,255,.22);border-radius:10px;padding:10px 14px;}
.tsb-header{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:rgba(0,212,255,.85);font-family:var(--font-mono,monospace);}
.tsb-icon{font-size:14px;}.tsb-title{letter-spacing:.3px;}
.tsb-summary{margin-top:7px;font-size:12px;color:rgba(180,200,220,.75);line-height:1.6;border-left:2px solid rgba(0,212,255,.2);padding-left:8px;}
.export-dropdown-wrap{position:relative;display:inline-flex;}
.export-drop-btn{font-size:12px !important;padding:3px 8px !important;white-space:nowrap;}
.export-drop-menu{display:none;position:absolute;top:calc(100% + 4px);right:0;background:#131c2b;border:1px solid rgba(0,212,255,.2);border-radius:8px;min-width:175px;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.5);overflow:hidden;}
.export-drop-menu.open{display:block;}
.export-drop-menu button{display:block;width:100%;text-align:left;padding:9px 14px;font-size:13px;color:#c9d5e0;background:transparent;border:none;cursor:pointer;transition:background .15s;}
.export-drop-menu button:hover{background:rgba(0,212,255,.1);color:#00d4ff;}
.export-drop-menu button+button{border-top:1px solid rgba(255,255,255,.05);}