* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #212121;
  color: #e0e0e0;
  overflow: hidden;
}

/* ── App shell ──────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  height: 100dvh; /* dynamic viewport — fixes mobile browser chrome */
  overflow: hidden;
}

/* ── Top strip ──────────────────────────────────────────── */
.top-strip {
  background: #1c2733;
  border-bottom: 1px solid #0d1117;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 26px;
  z-index: 50;
}
.limits-badge {
  font-size: 11px; color: #7a8fa6;
  line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1;
}
.btn-burger {
  display: none; /* hidden on desktop */
  background: none; border: none; color: #8899aa;
  font-size: 20px; cursor: pointer; padding: 4px 8px; border-radius: 6px;
  flex-shrink: 0;
}
.btn-burger:hover { color: #fff; background: #243447; }
.burger-menu {
  position: fixed; top: 34px; right: 0;
  background: #1c2733; border: 1px solid #2a3a4a; border-radius: 0 0 0 10px;
  z-index: 200; min-width: 160px;
  box-shadow: -4px 4px 16px rgba(0,0,0,0.4);
}
.burger-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 12px 16px;
  background: none; border: none; color: #c5d0dd;
  font-size: 15px; cursor: pointer; text-align: left;
}
.burger-item:hover { background: #243447; }
.burger-item span { font-size: 18px; }

.app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Nav rail ───────────────────────────────────────────── */
.nav-rail {
  width: 72px;
  background: #1c2733;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  flex-shrink: 0;
  border-right: 1px solid #0d1117;
  z-index: 10;
}
.nav-top { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 60px; padding: 8px 4px; border-radius: 12px;
  background: none; border: none; color: #8899aa; cursor: pointer;
  transition: all 0.15s;
}
.nav-item:hover { background: #243447; color: #c5d0dd; }
.nav-item.active { background: #2b5278; color: #fff; }
.nav-icon { font-size: 22px; line-height: 1; }
.nav-label { font-size: 10px; font-weight: 500; letter-spacing: 0.2px; }

/* ── List panel ─────────────────────────────────────────── */
.list-panel {
  width: 280px;
  background: #17212b;
  display: flex; flex-direction: column;
  flex-shrink: 0;
  border-right: 1px solid #0d1117;
  overflow: hidden;
}
/* Collapsed only on desktop — on mobile panel is position:fixed so width:0 breaks it */
@media (min-width: 701px) {
  .list-panel { transition: width 0.22s ease; }
  .list-panel.collapsed { width: 0; border-right: none; }
}
.list-section { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.list-section.hidden { display: none !important; }
.list-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  flex-shrink: 0;
}
.list-title { font-size: 16px; font-weight: 600; color: #e0e0e0; }
.list-header-actions { display: flex; gap: 4px; }
.list-header-actions button, .list-header button {
  background: none; border: none; color: #556677; cursor: pointer;
  font-size: 18px; padding: 4px 6px; border-radius: 8px;
  transition: color 0.1s, background 0.1s;
}
.list-header-actions button:hover, .list-header button:hover { color: #aabbcc; background: #243447; }

#standalone-agents-list, #projects-list, #skills-list {
  overflow-y: auto; flex: 1; padding: 4px 8px;
}
#standalone-agents-list:empty { padding: 0; flex: 0; }

/* ── Agent card in list ─────────────────────────────────── */
.agent-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px; border-radius: 10px; cursor: pointer;
  transition: background 0.1s; position: relative;
  margin-bottom: 2px;
}
.agent-card:hover { background: #202e3e; }
.agent-card.active-chat { background: #2b5278; }
.agent-card-inner { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.agent-card-avatar { width: 40px; height: 44px; flex-shrink: 0; }
.agent-card-avatar svg { width: 40px; height: 44px; }
.agent-card-text { flex: 1; min-width: 0; }
.agent-card-name { font-size: 14px; font-weight: 500; color: #d0dae4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-card-desc { font-size: 12px; color: #556677; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.agent-actions { display: none; gap: 2px; flex-shrink: 0; }
.agent-card:hover .agent-actions { display: flex; }
.agent-actions button {
  background: none; border: none; color: #556677; cursor: pointer;
  padding: 2px 5px; font-size: 13px; border-radius: 4px;
}
.agent-actions button:hover { color: #e05555; background: #2a2a2a; }

/* Streaming badge */
.agent-card-badge {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4caf50; flex-shrink: 0;
  animation: pulse-dot 1.2s infinite;
  display: none;
}
.agent-card.streaming .agent-card-badge { display: block; }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* Sidebar section label */
.sidebar-section-label {
  font-size: 11px; color: #3a4a5a; text-transform: uppercase;
  padding: 10px 12px 4px; letter-spacing: 0.5px; font-weight: 600;
}

/* ── Projects accordion in list ─────────────────────────── */
.project-item { margin-bottom: 2px; }
.project-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 10px; border-radius: 10px; cursor: pointer;
  transition: background 0.1s; position: relative;
}
.project-header:hover { background: #202e3e; }
.project-header.open { background: #1e2d3e; }
.project-door { flex-shrink: 0; }
.project-name { font-size: 14px; font-weight: 500; color: #c0ccd8; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-arrow { font-size: 10px; color: #445566; transition: transform 0.2s; flex-shrink: 0; }
.project-header.open .project-arrow { transform: rotate(90deg); }
.project-actions { display: none; gap: 2px; flex-shrink: 0; }
.project-header:hover .project-actions { display: flex; }
.project-actions button {
  background: none; border: none; color: #445566; cursor: pointer;
  padding: 1px 4px; font-size: 11px; border-radius: 4px;
}
.project-actions button:hover { color: #e0e0e0; background: #2a3a4a; }
.project-agents { padding-left: 10px; }

/* ── Chat panel ─────────────────────────────────────────── */
.chat-panel {
  flex: 1;
  display: flex; flex-direction: column;
  background: #0e1621;
  overflow: hidden;
  min-width: 0;
}

/* Top bar */
.chat-top-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; height: 56px;
  background: #17212b; border-bottom: 1px solid #0d1117;
  flex-shrink: 0;
}
.btn-back {
  display: none; /* hidden on desktop */
  background: none; border: none; color: #8899aa;
  font-size: 20px; cursor: pointer; padding: 4px 8px;
  border-radius: 8px; flex-shrink: 0;
}
.btn-back:hover { color: #e0e0e0; background: #243447; }
.chat-agent-info {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
}
.chat-agent-avatar { width: 36px; height: 40px; flex-shrink: 0; }
.chat-agent-avatar svg { width: 36px; height: 40px; }
#chat-title { font-size: 15px; font-weight: 600; color: #e0e0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-top-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.chat-top-actions button {
  background: none; border: none; color: #556677; cursor: pointer;
  font-size: 16px; padding: 6px 8px; border-radius: 8px; transition: all 0.1s;
}
.chat-top-actions button:hover { color: #aabbcc; background: #243447; }

#model-select {
  background: #243447; color: #8899aa;
  border: 1px solid #2a3a4a; border-radius: 8px;
  padding: 5px 8px; font-size: 12px; cursor: pointer;
}
#model-select:focus { outline: none; }

/* Messages */
#messages {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px 16px;
  display: flex; flex-direction: column; gap: 4px;
  width: 100%; box-sizing: border-box;
}
.message { max-width: 75%; display: flex; flex-direction: column; min-width: 0; word-break: break-word; }
.message.user { align-self: flex-end; }
.message.assistant { align-self: flex-start; }
.message-bubble {
  padding: 8px 12px; border-radius: 16px; font-size: 14px; line-height: 1.6;
  position: relative;
}
.message.user .message-bubble {
  background: #2b5278; color: #e8f0fe;
  border-bottom-right-radius: 4px;
}
.message.assistant .message-bubble {
  background: #182533; color: #d0dae4;
  border-bottom-left-radius: 4px;
}
.message-bubble p { margin: 0 0 8px; }
.message-bubble p:last-child { margin-bottom: 0; }
.message-bubble pre {
  background: #0d1117; padding: 10px; border-radius: 8px;
  overflow-x: auto; margin: 8px 0; border: 1px solid #1e2d3e;
}
.message-bubble code { font-family: monospace; font-size: 13px; }
.message-bubble p code { background: #1e2d3e; padding: 1px 5px; border-radius: 4px; }
.message-time {
  font-size: 11px; color: #445566; margin-top: 3px; padding: 0 4px;
}
.message.user .message-time { text-align: right; }

.typing-indicator {
  display: flex; gap: 4px; padding: 10px 14px;
  background: #182533; border-radius: 16px; border-bottom-left-radius: 4px;
  align-self: flex-start;
}
.typing-indicator span {
  width: 6px; height: 6px; background: #556677;
  border-radius: 50%; animation: bounce 1.2s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
}

/* Welcome screen */
.welcome-screen {
  flex: 1; overflow-y: auto; padding: 32px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.welcome-agents {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; width: 100%;
}
.welcome-agent-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer; padding: 18px 14px; border-radius: 14px;
  background: #17212b; border: 1px solid #1e2d3e;
  transition: all 0.15s; width: 130px;
}
.welcome-agent-card:hover { background: #1e2d3e; border-color: #2b5278; transform: translateY(-2px); }
.welcome-agent-card .agent-avatar { width: 60px; height: 68px; }
.welcome-agent-card .agent-card-name { font-size: 13px; font-weight: 600; text-align: center; color: #d0dae4; }
.welcome-agent-card .agent-card-desc { font-size: 11px; color: #445566; text-align: center; line-height: 1.4; }
.welcome-project-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer; padding: 18px 14px; border-radius: 14px;
  background: #17212b; border: 1px solid #1e2d3e;
  transition: all 0.15s; width: 130px;
}
.welcome-project-card:hover { background: #1e2d3e; border-color: #2b5278; transform: translateY(-2px); }
.welcome-project-card .project-card-name { font-size: 13px; font-weight: 600; text-align: center; color: #d0dae4; }
.welcome-project-card .project-card-desc { font-size: 11px; color: #445566; text-align: center; line-height: 1.4; }
.welcome-skills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: 100%; }
.welcome-skill-card {
  padding: 16px 18px; border-radius: 12px; cursor: pointer;
  background: #17212b; border: 1px solid #1e2d3e;
  transition: all 0.15s; width: 200px;
}
.welcome-skill-card:hover { background: #1e2d3e; border-color: #2b5278; transform: translateY(-2px); }
.welcome-skill-card .skill-card-icon { font-size: 24px; margin-bottom: 6px; }
.welcome-skill-card .skill-card-title { font-size: 13px; font-weight: 600; color: #d0dae4; margin-bottom: 4px; }
.welcome-skill-card .skill-card-body { font-size: 11px; color: #445566; line-height: 1.5; }

/* Skills list */
.skill-card {
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  margin-bottom: 2px; transition: background 0.1s; position: relative;
}
.skill-card:hover { background: #202e3e; }
.skill-card-actions { display: none; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.skill-card:hover .skill-card-actions { display: flex; }
.skill-card-actions button { background: none; border: none; color: #445566; cursor: pointer; padding: 2px 4px; font-size: 12px; border-radius: 4px; }
.skill-card-actions button:hover { color: #e05555; }
.skill-name { font-size: 13px; font-weight: 500; color: #c0ccd8; }
.skill-desc { font-size: 11px; color: #445566; margin-top: 2px; }
.skill-upload-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.skill-icon-letter {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: white; margin-bottom: 6px;
  flex-shrink: 0;
}

/* ── Attachment preview ──────────────────────────────────── */
.doc-attach-preview {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 16px; background: #182533; border-top: 1px solid #1e2d3e;
  font-size: 13px; color: #6aaf6a; flex-shrink: 0;
}
.doc-attach-preview.hidden { display: none !important; }
#doc-attach-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#doc-attach-remove {
  background: none; border: none; color: #8a5555; cursor: pointer;
  font-size: 14px; padding: 0 4px; line-height: 1;
}

/* ── Slash command menu ─────────────────────────────────── */
.input-wrap { position: relative; flex-shrink: 0; }

.slash-menu {
  position: absolute; bottom: 100%; left: 0; right: 0;
  background: #1c2733; border: 1px solid #2a3a4a;
  border-radius: 12px 12px 0 0;
  max-height: 300px; overflow-y: auto;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.5);
  z-index: 100;
}
.slash-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 16px; cursor: pointer;
  border-bottom: 1px solid #1a2633; transition: background 0.1s;
}
.slash-item:last-child { border-bottom: none; }
.slash-item:hover, .slash-item.selected { background: #243447; }
.slash-item-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.slash-item-name { font-size: 14px; font-weight: 600; color: #e0e0e0; }
.slash-item-desc { font-size: 12px; color: #556677; margin-top: 2px; }

/* ── Input area ─────────────────────────────────────────── */
#input-area {
  padding: 8px 12px; border-top: 1px solid #0d1117;
  display: flex; gap: 6px; align-items: flex-end; background: #17212b;
  flex-shrink: 0;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.attach-wrap { position: relative; flex-shrink: 0; }
#btn-attach-menu {
  background: none; border: none; color: #556677;
  width: 38px; height: 38px; border-radius: 50%;
  cursor: pointer; font-size: 22px; font-weight: 300;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s;
}
#btn-attach-menu:hover:not(:disabled) { color: #8899aa; }
#btn-attach-menu:disabled { opacity: 0.3; cursor: default; }

.attach-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0;
  background: #17212b; border: 1px solid #2a3a4a; border-radius: 12px;
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
  min-width: 160px; z-index: 20;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.attach-menu.hidden { display: none !important; }
.attach-menu button {
  background: none; border: none; color: #c0ccd8;
  padding: 10px 14px; border-radius: 8px; cursor: pointer;
  font-size: 14px; text-align: left; white-space: nowrap; width: 100%;
}
.attach-menu button:hover { background: #243447; }

#user-input {
  flex: 1; background: #182533; color: #d0dae4;
  border: 1px solid #2a3a4a; border-radius: 20px;
  padding: 9px 14px; font-size: 16px; resize: none;
  font-family: inherit; line-height: 1.5;
  max-height: 120px; overflow-y: auto;
  transition: border-color 0.15s;
}
#user-input:focus { outline: none; border-color: #2b5278; }
#user-input:disabled { opacity: 0.4; }
#user-input::placeholder { color: #445566; }

.input-right { flex-shrink: 0; display: flex; align-items: flex-end; position: relative; }

#btn-send, #btn-mic, #btn-stop {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
#btn-send { background: #2b5278; color: #fff; }
#btn-send:hover:not(:disabled) { background: #3a6a9a; }
#btn-send:disabled { opacity: 0.4; cursor: default; }
#btn-send.hidden { display: none !important; }
#btn-mic { background: none; color: #556677; font-size: 22px; }
#btn-mic:hover:not(:disabled) { color: #8899aa; }
#btn-mic:disabled { opacity: 0.3; cursor: default; }
#btn-mic.recording { color: #ff4444; animation: pulse-dot 0.8s infinite; }
#btn-stop { background: #5f1e1e; color: #e0e0e0; }
#btn-stop:hover { background: #7f2a2a; }
.mic-cancel-hint {
  position: absolute; right: 44px; bottom: 8px;
  font-size: 12px; color: #ff6060; white-space: nowrap; pointer-events: none;
}
.mic-cancel-hint.hidden { display: none !important; }

/* ── Modal ──────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal.hidden { display: none; }
.modal-box {
  background: #17212b; border: 1px solid #2a3a4a;
  border-radius: 14px; padding: 24px; width: 480px; max-width: 95vw;
  display: flex; flex-direction: column; gap: 12px;
  max-height: 90vh; overflow-y: auto;
}
.modal-box h3 { font-size: 16px; color: #e0e0e0; margin-bottom: 4px; }
.modal-box input, .modal-box select, .modal-box textarea {
  background: #0e1621; color: #d0dae4;
  border: 1px solid #2a3a4a; border-radius: 8px;
  padding: 9px 12px; font-size: 14px; font-family: inherit; width: 100%;
}
.modal-box input:focus, .modal-box select:focus, .modal-box textarea:focus {
  outline: none; border-color: #2b5278;
}
.modal-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.modal-buttons button {
  padding: 9px 20px; border-radius: 8px; cursor: pointer; font-size: 14px; border: none;
}
#modal-save, #modal-project-save, #skill-new-save {
  background: #2b5278; color: #fff;
}
#modal-save:hover, #modal-project-save:hover, #skill-new-save:hover { background: #3a6a9a; }
#modal-cancel, #modal-project-cancel, #skill-new-cancel, #skill-modal-close {
  background: #243447; color: #8899aa;
}
#modal-cancel:hover, #modal-project-cancel:hover, #skill-new-cancel:hover, #skill-modal-close:hover {
  background: #2a3a4a; color: #d0dae4;
}
.modal-skill-box { width: 640px; max-height: 80vh; }
.modal-skill-box pre {
  background: #0e1621; padding: 12px; border-radius: 8px;
  font-size: 12px; line-height: 1.5; overflow-y: auto;
  max-height: 50vh; white-space: pre-wrap; word-break: break-word;
  color: #c0ccd8; font-family: monospace; border: 1px solid #2a3a4a;
}

/* ── Avatar / color picker ──────────────────────────────── */
.avatar-picker-row { display: flex; gap: 16px; align-items: center; padding: 4px 0; }
.avatar-picker-controls { display: flex; flex-direction: column; }
.picker-label { font-size: 11px; color: #556677; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.color-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.color-swatch {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform 0.1s;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.selected { border-color: #fff; transform: scale(1.15); }
.gender-btns { display: flex; gap: 6px; }
.gender-btn {
  background: #243447; border: 2px solid transparent; color: #556677;
  padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 12px;
}
.gender-btn.active { border-color: #2b5278; color: #e0e0e0; background: #1e2d3e; }

/* ── KB ─────────────────────────────────────────────────── */
.kb-section { display: flex; flex-direction: column; gap: 8px; }
.kb-header { display: flex; align-items: center; justify-content: space-between; }
.kb-header span { font-size: 13px; color: #556677; }
.btn-upload {
  background: #243447; color: #c0ccd8; border: none;
  padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 12px;
}
.btn-upload:hover { background: #2a3a4a; }
.kb-files { display: flex; flex-direction: column; gap: 4px; max-height: 120px; overflow-y: auto; }
.kb-file {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 8px; background: #0e1621; border-radius: 6px; font-size: 12px;
  border: 1px solid #2a3a4a;
}
.kb-file-name { color: #c0ccd8; }
.kb-file-size { color: #445566; font-size: 11px; margin-left: 8px; }
.kb-summary-status { font-size: 11px; margin-left: 4px; }
.kb-file-del { background: none; border: none; color: #445566; cursor: pointer; padding: 0 4px; }
.kb-file-del:hover { color: #e05555; }
.kb-hint { font-size: 11px; color: #3a4a5a; }

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a3a4a; border-radius: 4px; }

.hidden { display: none !important; }

/* ── Mobile header + tabs (hidden on desktop) ───────────── */
.list-mobile-header { display: none; }
.nav-tabs { display: none; }
.limits-badge-mobile { display: none; }
.model-select-mobile { display: none; }

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* Fix overflow — nothing escapes the viewport */
  html, body { overflow: hidden; max-width: 100vw; }
  .app-body { flex-direction: column; overflow: hidden; }

  /* Top strip: hidden on mobile (replaced by list-mobile-header) */
  .top-strip { display: none; }
  .btn-burger { display: none; }

  /* Nav rail: hidden on mobile */
  .nav-rail { display: none; }

  /* Mobile list-panel top bar — safe area for status bar */
  .list-mobile-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
    flex-shrink: 0;
    background: #17212b; border-bottom: 1px solid #0d1117;
  }
  .list-mobile-title {
    font-size: 17px; font-weight: 700; color: #e0e0e0;
  }
  .list-mobile-right {
    display: flex; align-items: center; gap: 8px;
  }
  .limits-badge-mobile {
    display: block;
    font-size: 10px; color: #556677; text-align: right;
    line-height: 1.3; max-width: 120px;
  }
  .model-select-mobile {
    display: block;
    background: #243447; color: #8899aa;
    border: 1px solid #2a3a4a; border-radius: 8px;
    padding: 4px 6px; font-size: 11px; cursor: pointer;
  }

  /* Mobile nav tabs (TG folder-style) */
  .nav-tabs {
    display: flex; overflow-x: auto; gap: 4px;
    padding: 6px 12px; flex-shrink: 0;
    background: #17212b; border-bottom: 1px solid #0d1117;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tab {
    flex-shrink: 0; padding: 5px 14px; border-radius: 20px;
    background: #1e2d3d; border: none; color: #7a8fa6;
    font-size: 13px; cursor: pointer; white-space: nowrap;
    transition: all 0.15s;
  }
  .nav-tab.active { background: #2b5278; color: #fff; }
  .nav-tab:hover:not(.active) { background: #243447; color: #c5d0dd; }

  /* List panel: full screen */
  .list-panel {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; border-right: none; overflow: hidden;
    z-index: 20;
  }

  /* Chat panel: full screen, slides from right */
  .chat-panel {
    position: fixed; top: 0; left: 0; right: 0;
    height: 100dvh; /* shrinks when keyboard opens */
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(.4,0,.2,1);
    z-index: 25;
    display: flex; flex-direction: column;
  }
  .chat-panel.active { transform: translateX(0); }

  /* Show back button on mobile */
  .btn-back { display: flex; }

  /* Chat top bar: safe area for status bar */
  .chat-top-bar {
    padding-top: max(10px, env(safe-area-inset-top));
    height: auto; min-height: 56px;
  }

  /* Input safe area on mobile */
  #input-area {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    flex-shrink: 0; width: 100%;
  }

  /* Messages: no horizontal overflow */
  #messages {
    padding: 12px 10px; flex: 1;
    overflow-y: auto; overflow-x: hidden;
    width: 100%;
  }
  .message { max-width: 88%; }
  .message-bubble { overflow-wrap: break-word; word-break: break-word; overflow-x: hidden; }
  .message-bubble pre { max-width: 100%; overflow-x: auto; }

  /* Welcome */
  .welcome-agents { gap: 10px; }
  .welcome-agent-card, .welcome-project-card { width: 110px; padding: 14px 10px; }

  /* List header */
  .list-header { padding: 12px 14px 8px; }
}

/* ─── Image Generation Panel ──────────────────────────────── */

.image-gen-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  background: var(--bg, #1a1a1a);
}

.image-history-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  align-content: start;
}

.img-card {
  background: #242424;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #333;
  transition: border-color .2s;
}
.img-card:hover { border-color: #555; }

.img-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 6px;
  font-size: 11px;
  color: #999;
}
.img-card-type { color: #aaa; }
.img-card-model {
  background: #333;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  color: #bbb;
}
.img-card-status { margin-left: auto; color: #6c6; font-size: 11px; }

.img-card-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: #1a1a1a;
}

.img-card-prompt {
  padding: 8px 10px 6px;
  font-size: 12px;
  color: #bbb;
  line-height: 1.4;
  min-height: 36px;
}

.img-card-actions {
  display: flex;
  gap: 6px;
  padding: 6px 10px 10px;
}
.img-btn-download, .img-btn-delete {
  flex: 1;
  padding: 6px 0;
  border-radius: 7px;
  border: none;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s;
}
.img-btn-download { background: #2a3a2a; color: #8d8; }
.img-btn-download:hover { background: #2e4a2e; }
.img-btn-delete { background: #3a2a2a; color: #d88; }
.img-btn-delete:hover { background: #4a2a2a; }

.img-card-loading .img-card-spinner {
  width: 100%;
  aspect-ratio: 1;
  background: #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-card-spinner::after {
  content: "";
  width: 36px; height: 36px;
  border: 3px solid #333;
  border-top-color: #888;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.img-card-error {
  padding: 8px 10px;
  color: #f88;
  font-size: 12px;
}

/* Image input bar */
.image-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid #2a2a2a;
  background: #1e1e1e;
  flex-shrink: 0;
}

.image-model-select {
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  color: #ccc;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  flex-shrink: 0;
  cursor: pointer;
  max-width: 150px;
}

#image-prompt {
  flex: 1;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  color: #eee;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  resize: none;
  line-height: 1.4;
  font-family: inherit;
}
#image-prompt:focus { outline: none; border-color: #555; }
#image-prompt::placeholder { color: #666; }

.btn-generate {
  background: #4a3a6a;
  color: #ddd;
  border: none;
  border-radius: 10px;
  width: 38px; height: 38px;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.btn-generate:hover:not(:disabled) { background: #5a4a7a; }
.btn-generate:disabled { opacity: .4; cursor: default; }

@media (max-width: 700px) {
  .image-history-list {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    padding: 10px;
    gap: 10px;
  }
  .image-model-select { max-width: 120px; font-size: 11px; }
}