* { box-sizing: border-box; font-family: system-ui, sans-serif; }
body { margin: 0; background: #f4f5f7; color: #1c1e21; }
#login { max-width: 320px; margin: 15vh auto; text-align: center; }
#login input, #login button { width: 100%; padding: 12px; margin: 6px 0; font-size: 16px; border-radius: 8px; border: 1px solid #ccc; }
#loginErr { color: #c0392b; min-height: 1.2em; }
:root { --app-h: 100vh; }
/* 100vh на Android не се свива при отворена клавиатура — композерът остава
   под нея. --app-h идва от visualViewport (виж app.js), dvh е резервата. */
@supports (height: 100dvh) { :root { --app-h: 100dvh; } }
#app { display: flex; flex-direction: column; height: var(--app-h); max-width: 720px; margin: 0 auto; }
#topbar { display: flex; align-items: center; gap: 6px; background: #fff; border-bottom: 1px solid #e3e3e3; padding-right: 8px; }
#topbar #tabs { flex: 1; border-bottom: none; }
#archiveBtn { border: none; background: #eceef0; border-radius: 999px; padding: 8px 12px; cursor: pointer; font-size: 16px; flex: none; }
#archivePanel { background: #fff; border-bottom: 1px solid #e3e3e3; max-height: 45vh; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
#teamBtn { border: none; background: #eceef0; border-radius: 999px; padding: 8px 12px; cursor: pointer; font-size: 16px; flex: none; }
.panel-hdr { font-size: 12px; color: #888; padding: 4px 8px; }
.teamlog { white-space: pre-wrap; font-size: 13px; max-width: 100%; }
.day-item { text-align: left; border: none; background: #f4f5f7; border-radius: 8px; padding: 10px 12px; cursor: pointer; font-size: 14px; }
.day-item:hover { background: #e7e9ec; }
#archiveBanner { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; background: #fff7e6; border-bottom: 1px solid #f0e0b8; font-size: 13px; color: #7a5b00; }
#archiveBanner button { border: none; background: #1877f2; color: #fff; border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 13px; }
#tabs { display: flex; gap: 6px; padding: 8px; background: #fff; border-bottom: 1px solid #e3e3e3; }
.tab { padding: 8px 14px; border: none; border-radius: 999px; background: #eceef0; cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }

/* ─── Табовете да не бутат цялата страница настрани ─────────────────────────
   Табовете са седем, с дълги етикети („Секретар · @test_jarvis3_bot") плюс
   кръгче, процент, значка и чипче за модела — редът им излиза ~1715px. #tabs
   беше flex без overflow и без право да се свива, затова изнасяше страницата:
   измерено на 11.09 — 2150px при екран 390px (1760px празно надясно) и 2430px
   при екран 1280px. Оттам идваше „ходи 1 км надясно".
   Сега табовете се плъзгат САМО в своята лента; страницата стои на място.   */
html, body { overflow-x: hidden; }
#topbar { flex-wrap: wrap; }
#topbar #tabs {
  /* Цял ред за табовете, иконките отиват отдолу. Ако делят реда с осемте
     копчета, за табовете остават 276px на екран 1280px — тоест пак не се
     стига до тях, само че сега мълчаливо. */
  flex: 1 1 100%;
  min-width: 0;              /* без това flex-дете отказва да се свие под съдържанието си */
  /* ПРЕЧУПВАТ СЕ, не се плъзгат. Първо ги направих плъзгаща се лента и стана
     по-лошо: Джарви е пети таб, Копола седми — оставаха извън екрана зад скрит
     хоризонтален плъзгач и Тони не можеше да влезе в тях. Всеки таб трябва да
     се вижда и да се цъка веднага, без плъзгане. */
  flex-wrap: wrap;
  row-gap: 6px;
}
.tab { flex: none; white-space: nowrap; }

/* Етикетите носят и ботското име („Архи · @jarvisoriginaltoni_bot") — сложено
   е нарочно, след като двата бота се оказаха с разменени имена. Пази се, но се
   отрязва с многоточие, за да не заема седем реда. Името на агента е отпред и
   отличаващата се част от адреса остава видима. */
.tab { max-width: 240px; }
.tab > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tab.active { background: #1877f2; color: #fff; }
.ctx-ring { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.ctx-ring::after { content: ''; display: block; width: 6px; height: 6px; margin: 4px; border-radius: 50%; background: #fff; }
.tab.active .ctx-ring::after { background: #1877f2; }
.ctx-pct { font-size: 11px; opacity: .8; }
.tab-badge { display: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e0245e; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; flex: none; box-sizing: border-box; }
#thread { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 80%; padding: 8px 12px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; }
.bubble.user { align-self: flex-end; background: #1877f2; color: #fff; }
.bubble.agent { align-self: flex-start; background: #fff; border: 1px solid #e3e3e3; }
.bubble.status { align-self: flex-start; background: #fff; color: #888; font-style: italic; }
.bubble.error { align-self: center; background: #fdecea; color: #c0392b; font-size: 13px; }
#sendForm { display: flex; gap: 8px; padding: 8px; background: #fff; border-top: 1px solid #e3e3e3; align-items: flex-end; }
#sendForm #msg { flex: 1 1 auto; min-width: 0; padding: 11px 14px; font-size: 16px; line-height: 1.35; border-radius: 18px; border: 1px solid #ccc; resize: none; max-height: 280px; overflow-y: auto; font-family: inherit; }
#sendForm button { padding: 12px 18px; border: none; border-radius: 999px; background: #1877f2; color: #fff; cursor: pointer; flex: 0 0 auto; }
#attachBtn { font-size: 22px; cursor: pointer; padding: 6px 8px; user-select: none; line-height: 1; flex: 0 0 auto; align-self: flex-end; }
#micBtn { font-size: 20px; background: none; border: none; cursor: pointer; padding: 6px 8px; line-height: 1; flex: 0 0 auto; align-self: flex-end; border-radius: 50%; transition: background .15s; }
#micBtn.rec { background: #e53e3e; animation: micpulse 1s ease-in-out infinite; }
@keyframes micpulse { 0%,100%{box-shadow:0 0 0 0 rgba(229,62,62,.4)} 50%{box-shadow:0 0 0 8px rgba(229,62,62,0)} }
#filePreview { padding: 6px 14px; background: #fff; border-top: 1px solid #e3e3e3; font-size: 13px; color: #444; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.attach-chip { display: inline-flex; align-items: center; gap: 6px; background: #f0f2f5; border-radius: 999px; padding: 3px 6px 3px 10px; }
#filePreview button { border: none; background: #eceef0; border-radius: 999px; padding: 2px 8px; cursor: pointer; font-size: 13px; }
.bubble.agent { max-width: 92%; }
.attach-img { max-width: 100%; border-radius: 8px; margin-top: 6px; display: block; cursor: pointer; }
.attach-file { display: inline-block; margin-top: 6px; color: #1877f2; text-decoration: none; }

/* Контакт бутон + меню команди (добавено) */
#contactBtn { border: none; background: #e6f4ea; color: #1e7d45; border-radius: 999px; padding: 8px 12px; cursor: pointer; font-size: 16px; flex: none; }
#contactBtn:hover { background: #d4ecdd; }
#cmdMenu { display: flex; gap: 8px; padding: 8px 8px 0; background: #fff; flex-wrap: wrap; }
#cmdMenu[hidden] { display: none; }
.cmd-chip { border: 1px solid #cdd3df; background: #f4f5f7; border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
.cmd-chip:hover { background: #e7e9ec; }

/* Планове */
#plansBtn { border: none; background: #eceef0; border-radius: 999px; padding: 8px 12px; cursor: pointer; font-size: 16px; flex: none; }
#plansBtn.active { background: #1877f2; color: #fff; }
#plansPanel { flex: 1; overflow-y: auto; padding: 12px 16px; background: #f4f5f7; display: flex; flex-direction: column; gap: 12px; }
#plansPanel[hidden] { display: none; }
#plansHeader { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#plansDate { font-weight: 600; font-size: 16px; flex: 1; }
#pushEnableBtn, #pushTestBtn { border: none; background: #1877f2; color: #fff; border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
#pushEnableBtn:hover, #pushTestBtn:hover { background: #0d65e0; }
#plansEmpty { color: #888; font-style: italic; padding: 20px 0; text-align: center; }
.tasks-progress { font-size: 14px; color: #444; font-weight: 500; }
.tasks-bar { height: 6px; background: #dde0e6; border-radius: 99px; overflow: hidden; }
.tasks-bar-fill { height: 100%; background: #1877f2; border-radius: 99px; transition: width .3s; }
.task-row { display: flex; align-items: flex-start; gap: 12px; background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.07); cursor: pointer; }
.task-row.done { opacity: .55; }
.task-cb { width: 22px; height: 22px; flex: none; cursor: pointer; accent-color: #1877f2; margin-top: 1px; }
.task-text { font-size: 16px; line-height: 1.4; word-break: break-word; }
.task-row.done .task-text { text-decoration: line-through; color: #888; }

/* Usage джаджа (лимити на плана) */
.usage-widget { flex: none; font-size: 11px; line-height: 1; padding: 6px 10px; border-radius: 999px; white-space: nowrap; cursor: default; user-select: none; }
.usage-widget[hidden] { display: none; }
.usage-widget b { font-weight: 700; }
.usage-widget .usage-sep { opacity: .4; margin: 0 2px; }
.usage-widget.ok { background: #e6f4ea; color: #1e7d45; }
.usage-widget.warn { background: #fff3d6; color: #8a6100; }
.usage-widget.crit { background: #fdecea; color: #c0392b; }
.usage-widget.stale { background: #eceef0; color: #888; }

/* Табло на услугите */
#boardPanel { background: #fff; border-bottom: 1px solid #e0e3e8; padding: 0 16px 12px; max-height: 320px; overflow-y: auto; }
.board-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; padding: 8px 0; border-bottom: 1px solid #f0f2f5; font-size: 15px; }
.board-row:last-child { border-bottom: none; }
.board-log { width: 100%; font-size: 12px; color: #888; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-age { font-size: 11px; color: #aaa; padding-top: 6px; text-align: right; }

/* Статус-лента (винаги видима) */
#statusBar { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 5px 14px; background: #f8f9fb; border-bottom: 1px solid #e5e7eb; min-height: 0; }
#statusBar:empty { display: none; }
.sb-team { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #555; white-space: nowrap; }
.sb-team.sb-warn { color: #b91c1c; font-weight: 600; }
.sb-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sb-q { background: #e2e8f0; border-radius: 99px; padding: 1px 5px; font-size: 11px; color: #475569; }

/* Навигационна лента към приложенията */
#appNav { display: flex; gap: 6px; padding: 6px 12px; background: #1a1a2e; border-bottom: 1px solid #2d2d4e; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }

/* Topic bar — под appNav, само за Секретаря */
#topicBar { display: flex; gap: 4px; padding: 4px 10px; background: #12122a; border-bottom: 1px solid #1e1e3a; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-shrink: 0; }
#topicBar::-webkit-scrollbar { display: none; }
.topic-btn { background: #1e1e3a; border: 1px solid #3a3a5c; color: #a0aabf; font-size: 12px; padding: 3px 10px; border-radius: 12px; cursor: pointer; white-space: nowrap; transition: background .15s; }
.topic-btn:hover { background: #2d2d55; color: #c8cfe8; }
.topic-btn.active { background: #3b4cc0; border-color: #5b6af0; color: #fff; }
.topic-btn.topic-new { background: none; border-style: dashed; color: #5b6af0; font-weight: bold; font-size: 14px; padding: 2px 8px; }
#appNav::-webkit-scrollbar { display: none; }
.app-link { flex: none; display: inline-block; padding: 6px 14px; border-radius: 20px; background: #2d2d4e; color: #c8cfe8; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .15s; }
.app-link:hover, .app-link:active { background: #3d4070; color: #fff; }

/* Iframe за приложения */
#appFrame { border: none; background: #fff; }
#appFrame[hidden] { display: none; }
.app-link.active { background: #5b6af0; color: #fff; }

/* Split контейнер — винаги flex, запълва #app */
#appSplit {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

/* Chat panel — по подразбиране заема цялата ширина */
#appChatPanel {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

/* App-mode: скрий панели, покажи iframe вдясно */
body.app-mode #topbar,
body.app-mode #statusBar,
body.app-mode #boardPanel,
body.app-mode #archivePanel,
body.app-mode #archiveBanner,
body.app-mode #plansPanel { display: none !important; }

body.app-mode #appChatPanel {
  flex: none;
  width: 340px;
  border-right: 2px solid #2d2d4e;
  background: #0f0f1a;
  transition: width .2s;
}
body.app-mode #appChatPanel.collapsed { width: 0; border-right: none; }
body.app-mode #appChatPanel.collapsed + #chatToggleBtn { border-radius: 0 50% 50% 0; }

body.app-mode #sendForm {
  flex: none;
  border-top: 2px solid #2d2d4e;
  padding: 6px 8px;
}
body.app-mode #sendForm #msg { max-height: 280px; }

body.app-mode #appFrame {
  display: block !important;
  position: static !important;
  flex: 1 1 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  width: 100% !important;
}

/* Toggle бутон — между chat panel и iframe */
#chatToggleBtn {
  display: none;
  flex: none;
  align-self: center;
  background: #2d2d4e;
  border: none;
  color: #c8cfe8;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 12px;
  cursor: pointer;
  margin: 0 2px;
  z-index: 5;
}
body.app-mode #chatToggleBtn { display: flex; align-items: center; justify-content: center; }

@media (max-width: 720px) {
  body.app-mode #appChatPanel { width: 280px; }
  body.app-mode #appChatPanel.collapsed { width: 0; }
  #chatToggleBtn { width: 32px; height: 44px; border-radius: 0 8px 8px 0; font-size: 14px; }

  /* На телефон седемте иконки и табовете не се събират в един ред. Табовете
     получават свой ред (плъзга се настрани в самата лента), иконките падат
     отдолу и се пречупват — вместо да излизат извън екрана. */
  #topbar { padding: 2px 6px 2px 0; row-gap: 2px; }
  #topbar #tabs { padding: 6px 8px; row-gap: 4px; }
  #topbar button { padding: 6px 9px; font-size: 15px; }
  /* На телефон: два таба на ред. Чипчето с модела пада — то е за справка,
     а тук всеки пиксел се брои. Кръгчето за контекста остава. */
  .tab { padding: 7px 10px; font-size: 13px; max-width: 47vw; gap: 4px; }
  .tab .tab-model { display: none; }
  .usage-widget { font-size: 10px; padding: 5px 8px; }
}


/* ── Тайно прозорче за API ключове (21.09.2026) ───────────────────────── */
#secretsPanel { background: #fff; border-bottom: 1px solid #e3e3e3; max-height: 60vh; overflow-y: auto; padding: 10px 16px; display: flex; flex-direction: column; gap: 8px; }
#secretsPanel[hidden] { display: none; }
body.app-mode #secretsPanel { display: none !important; }
#secretsAgentRow { display: flex; gap: 6px; flex-wrap: wrap; }
#secretsAgentRow button { padding: 4px 10px; border-radius: 12px; border: 1px solid #ccc; background: #f4f5f7; font-size: 13px; }
#secretsAgentRow button.active { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }
#secretsList { display: flex; flex-direction: column; gap: 6px; }
.secret-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #eee; border-radius: 8px; }
.secret-row .dot { width: 9px; height: 9px; border-radius: 50%; background: #ccc; flex: none; }
.secret-row .dot.on { background: #2e9e4e; }
.secret-row .label { flex: 1; font-size: 14px; }
.secret-row input[type="password"], .secret-row input[type="text"] { width: 40%; min-width: 140px; }
#secretsCustomRow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; border-top: 1px dashed #ddd; padding-top: 8px; }
#secretsCustomRow input { flex: 1; min-width: 120px; }
.eye-btn { flex: none; padding: 4px 8px; font-size: 14px; line-height: 1; cursor: pointer; }
#secretsResult { font-size: 13px; color: #555; min-height: 18px; }


/* ── Телефон: чатът на цял екран (26.09.2026) ────────────────────────────────
   Тони, със снимка на телефона си: „Погледни каква свинщина е при мене“ — срещу
   телефона на Дима (един чат, цял екран). Мерено при 411x917: разговорът беше
   308 px (34%), останалото — пет етажа копчета.
   Първата версия (04:00) имаше падащо „Архи ▾“ и ⚙ до полето. Тони, 04:50:
   полето стана „2-3 букви“, не личеше как се сменя агентът, а от стария изглед
   „няма връщане“. Затова сега:
   - агентите стоят горе ВИНАГИ, с кратките имена — едно докосване сменя;
   - полето за писане е на свой ред, през целия екран, копчетата са под него
     (при по-едър шрифт на телефона то беше 38 px — мерено);
   - двата изгледа имат видимо копче с надпис за смяна.
   Само под 720 px и само докато Тони не избере стария изглед.            */
#mobBar, #mobCmd, #mobStar, #mobNazad { display: none; }
body.mob-star #mobNazad { display: inline-block; order: -1; background: #1877f2; color: #fff; border-radius: 999px; font-size: 14px; }
/* 26.09 сутринта, Тони: „Има място накрая да отиде Копола“ — ☰ беше отделна колона и крадеше
   ширина от всеки ред. Сега ☰ е в общия поток; ако пак не стигнат два реда (по-едър шрифт на
   телефона), app.js смалява надписите до 12 px — виж stisni(). */
body.mob #mobBar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 6px 8px; background: #1a1a2e; flex: none; }
body.mob #mobAgenti { display: contents; }
body.mob .mob-ag { display: inline-flex; align-items: center; gap: 5px; background: #2d2d4e; color: #fff; border: none; border-radius: 999px; padding: .5em .7em; font-size: var(--mob-fs, 14px); cursor: pointer; }
body.mob .mob-ag * { pointer-events: none; } /* докосването да стига винаги до копчето */
body.mob .mob-ag.active { background: #1877f2; }
body.mob .mob-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e0245e; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-sizing: border-box; }
body.mob #mobMenu { flex: none; margin-left: auto; background: transparent; color: #fff; border: 1px solid #3a3a5e; border-radius: 10px; font-size: 20px; line-height: 1; padding: 7px 12px; cursor: pointer; }
body.mob.mob-menu #mobMenu { box-shadow: 0 0 0 2px #8fb8ff; }
body.mob #topbar, body.mob #appNav, body.mob #statusBar { display: none; }
/* Тези три са скрити, но „display: flex“ отгоре надделява над „hidden“ и всяка
   оставаше празна ивица (13 + 17 + 13 px, жълтата се вижда и на снимката на Тони). */
body.mob #archivePanel[hidden], body.mob #archiveBanner[hidden], body.mob #filePreview[hidden] { display: none; }
/* „Главна +“ — лентата с кабинетите на Секретаря. Тони: „какво прави, никой не знае… заема цял ред“.
   Последният кабинет е затворен на 05.08; без кабинети лентата е само „Главна“ и „+“. Показва се
   само ако има отворен кабинет (трето копче). И: при другите агенти стоеше лентата на Секретаря,
   защото „display: flex“ бие „hidden“. */
body.mob #topicBar[hidden], body.mob #topicBar:not(:has(> :nth-child(3))) { display: none; }
body.mob.mob-menu #topbar { display: flex; }
body.mob.mob-menu #topbar #tabs { display: none; }
body.mob.mob-menu #appNav { display: flex; }
body.mob.mob-menu #statusBar:not(:empty) { display: flex; }
body.mob.mob-menu #mobStar { display: inline-block; padding: 6px 10px; font-size: 13px; }
body.mob #cmdMenu { display: none; }
body.mob.mob-cmd #cmdMenu:not([hidden]) { display: flex; }
/* Полето отгоре, на цял ред, поне два реда високо; копчетата отдолу, „Прати“ вдясно. */
body.mob #sendForm { flex-wrap: wrap; row-gap: 6px; }
body.mob #sendForm #msg { order: -1; flex: 1 1 100%; min-height: calc(2.7em + 24px); }
body.mob #sendForm > button:last-child { margin-left: auto; }
body.mob #mobCmd { display: inline-flex; align-items: center; justify-content: center; flex: none; background: #eceef0; color: #1c1e21; border: none; border-radius: 50%; width: 40px; height: 40px; padding: 0; font-size: 18px; cursor: pointer; }
body.mob #mobCmd[hidden] { display: none; }
body.mob.mob-cmd #mobCmd { background: #1877f2; color: #fff; }