/* Дополнения v2 к стилям старой панели (kubik.css). Здесь только то, чего в старой панели нет. */

/* Логотип: картинка вместо анимированного «Кубика» */
.logo { display: flex; align-items: center; gap: 9px; }
.logo-img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.logo-txt { display: flex; flex-direction: column; line-height: 1.15; }
.logo-name b { font-weight: 700; }
.lt-ii { color: var(--muted); font-weight: 400; }
.ver { font-size: 11.5px; color: var(--muted); }
.home-logo { width: 46px; height: 46px; object-fit: contain; vertical-align: middle; margin-right: 6px; }
.login-logo { width: 40px; height: 40px; object-fit: contain; vertical-align: middle; margin-right: 8px; }

/* Меню: всплывающее меню снизу, статус */
.job-line { font-size: 12.5px; color: var(--muted); padding: 2px 0; }
#pop-user { left: 10px; right: 10px; bottom: 56px; }

/* Лента: файлы в пузыре, плашка «Работаю…» */
.bfiles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.bfile { font-size: 12px; background: var(--input); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; }
.working .w-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); animation: wpulse 1.2s ease-in-out infinite; flex: none; }
@keyframes wpulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.tools-group[hidden] { display: none; }
.thinking-toggle[hidden] { display: none; }

/* Поле ввода: кнопка «Стоп», выпадающие списки режима, модели и усилия */
.send .sq { width: 10px; height: 10px; background: #fff; border-radius: 2px; display: block; }
select.pick { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--text); padding: 4px 8px; border-radius: 7px; cursor: pointer; }
select.pick:hover { background: var(--hover); }
label.pick { display: inline-flex; align-items: center; cursor: pointer; padding: 4px 6px; border-radius: 7px; }
label.pick:hover { background: var(--hover); }
.chat-err { min-height: 0; margin-top: 4px; }
.chat-err:empty { display: none; }
.attach-row .attach-chip { font-size: 12.5px; background: var(--pill); border-radius: 6px; padding: 3px 8px; }
.attach-row .attach-chip button { border: 0; background: none; color: var(--muted); padding: 0 2px; cursor: pointer; }
.attach-row .attach-chip.up { opacity: .75; }
.attach-row .attach-chip.up .attach-pct { color: var(--muted); font-variant-numeric: tabular-nums; }
.attach-row .attach-chip.bad { background: rgba(200,40,40,.1); color: #a12828; cursor: help; }

/* Телефон: затемнение под выехавшим меню */
.sb-scrim { display: none; }
@media (max-width: 760px) {
  .app.sb-open .sb-scrim { display: block; position: fixed; inset: 0; background: rgba(20,20,18,.25); z-index: 20; }
}

/* ── Окно настроек: содержимое вкладок v2 ── */
.st-body h2 { font-size: 15px; font-weight: 600; margin: 4px 0 10px; }
.st-body .section-gap { margin-top: 22px; }
.st-body .muted { color: var(--muted); }
.st-body .small { font-size: 12.5px; }
.st-body .error { color: var(--err, #b3261e); min-height: 1.2em; font-size: 13px; margin: 6px 0 0; }
.st-body .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.st-body label { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; color: var(--muted); font-size: 13px; }
.st-body input { width: 100%; }
.st-body button { font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--input); color: var(--text); cursor: pointer; }
.st-body button:hover { background: var(--pill); }
.st-body button.primary { background: var(--text); color: #fff; border-color: var(--text); }
.st-body button.primary:hover { background: #2a2a2a; }
.st-body button.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.st-body button.ghost:hover { background: var(--hover); color: var(--text); }
.token-box { border: 1px dashed var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; }
.check-box { border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 14px; margin-top: 14px; background: var(--sidebar); }
.steps { margin: 10px 0 0; padding-left: 0; list-style: none; }
.steps li { padding: 5px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.steps li:last-child { border-bottom: 0; }
.steps .mark { display: inline-block; width: 18px; font-weight: 700; }
.steps .good .mark { color: var(--ok); }
.steps .bad { color: #b3261e; }
.idx-box { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.crumbs { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; margin: 10px 0 6px; font-size: 13px; }
.st-body .crumb { border: 0; background: none; padding: 2px 4px; color: var(--blue); }
.folders { border: 1px solid var(--line); border-radius: 10px; max-height: 40vh; overflow-y: auto; min-height: 120px; background: var(--input); }
.st-body .folder { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: none; padding: 8px 12px; }
.st-body .folder:last-child { border-bottom: 0; }
.st-body .folder:hover { background: var(--hover); }
.radio-group { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.st-body .radio-group label { flex-direction: row; align-items: center; gap: 10px; color: var(--text); margin: 0; font-size: 14px; }
.st-body .radio-group input { width: auto; }
.journal { margin-top: 10px; display: flex; flex-direction: column; font-size: 13px; }
.jrow { border-bottom: 1px solid var(--line-soft); padding: 6px 0; }

/* Файлы в ответе и предпросмотр */
.msg-ai .shows { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.msg-ai .shows:empty { display: none; }
.show-card { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--input); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.show-card:hover { background: var(--hover); }
.show-ico { display: inline-flex; color: var(--muted); }
.show-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-box { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Панель справа, как терминал: на широком экране чат сжимается, на телефоне — весь экран (07.11.2026) */
.file-panel { display: none; }
@media (min-width: 761px) {
  .file-panel.show { display: flex; position: fixed; top: 0; right: 0; bottom: 0; width: 44vw; min-width: 360px; max-width: 760px; z-index: 35; background: var(--bg, #fff); border-left: 1px solid var(--line); box-shadow: -4px 0 20px rgba(0,0,0,.06); box-sizing: border-box; padding: 12px 14px; }
  body.file-docked .app { width: calc(100vw - min(44vw, 760px)); }
}
@media (max-width: 760px) {
  .file-panel.show { display: flex; position: fixed; inset: 0; z-index: 60; background: var(--bg, #fff); box-sizing: border-box; padding: 12px; }
  #file-full { display: none; }
}
.file-tools { display: flex; gap: 8px; flex-shrink: 0; }
@media (min-width: 761px) {
  .file-panel.show.full { width: 100vw; min-width: 0; max-width: none; border-left: 0; }
  body.file-docked.file-full .app { width: 0; overflow: hidden; }
}
.file-body.pages img { max-width: 900px; margin-left: auto; margin-right: auto; }
.file-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.file-head h2 { font-size: 16px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-head button { font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.file-body { flex: 1; min-height: 0; margin: 10px 0; border: 1px solid var(--line); border-radius: 10px; overflow: auto; display: flex; align-items: center; justify-content: center; background: #f4f4f2; }
.file-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.file-body.pages { display: block; overflow: auto; background: #e7e7e4; padding: 12px; box-sizing: border-box; -webkit-overflow-scrolling: touch; }
.file-body.pages img { display: block; width: 100%; height: auto; margin: 0 auto 12px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12); border-radius: 2px; }
.file-body.pages .file-state { text-align: center; margin: 4px 0 0; }
.file-body img { max-width: 100%; max-height: 100%; object-fit: contain; }
.file-actions .file-dl { font: inherit; font-size: 13px; padding: 6px 14px; border-radius: 8px; background: var(--text); color: #fff; border: 1px solid var(--text); cursor: pointer; }
.file-actions .file-dl[hidden] { display: none; }
.file-state { color: var(--muted); font-size: 13px; }
.file-box .error { color: var(--err, #b3261e); font-size: 13px; margin: 6px 0 0; min-height: 1.2em; }

/* Вход в Claude */
#tab-claude h3 { margin: 22px 0 6px; font-size: 15px; }
#tab-claude .row input { flex: 1; min-width: 0; }
#sub-flow { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line, #e5e5e5); border-radius: 10px; }
#tab-claude .bad { color: var(--red, #c0392b); }

/* Терминал в правой панели */
.file-body.term { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; overflow: hidden; background: #1e1e1c; border-color: #1e1e1c; }

/* Вложения: кнопки открывают предпросмотр */
button.bfile { font: inherit; cursor: pointer; border: 0; }
.attach-name { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* Ключи моделей */
.mk-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.mk-row .row input { flex: 1; min-width: 0; }

/* Безопасность */
#tab-security .jrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
#tab-security .row input { flex: 1; min-width: 0; }
.sec-browser { margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.sec-items { max-height: 220px; overflow: auto; margin: 8px 0; }
.sec-items .mcp-folder-item { display: block; width: 100%; text-align: left; padding: 6px 4px; background: none; border: 0; cursor: pointer; font: inherit; }
.sec-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 6px; }
.sec-tool { font-size: 13px; display: flex; align-items: center; gap: 6px; }
#sec-msg.bad { color: var(--err, #b3261e); }
@media (max-width: 760px) { .sec-tools { grid-template-columns: 1fr; } }

/* Статус модели над полем ввода */
.model-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12.5px; color: var(--muted); padding: 2px 6px 6px; }
.model-status b { color: var(--text); font-weight: 600; }
.model-status .ms-item { white-space: nowrap; }
.model-status.warn { color: #a15c00; }
.model-status.bad { color: var(--err, #b3261e); }

/* Картинка, которую сгенерировала модель */
.msg-ai .shows .gen-img-btn { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; max-width: 100%; }
.msg-ai .shows .gen-img { display: block; max-width: 100%; max-height: 420px; border-radius: 10px; border: 1px solid var(--line); }

/* Версии файла */
.file-body.versions { display: block; overflow: auto; background: var(--bg, #fff); padding: 12px; }
.ver-head { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.ver-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.ver-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.file-actions #file-versions { background: transparent; color: var(--text); border: 1px solid var(--line); }

/* Списки галочек: галочка и текст в одной строке, без лишних отступов (исправлено после проверки на телефоне) */
.st-body .sec-tool { flex-direction: row; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--text); }
.st-body .sec-tool input { margin: 0; flex: none; }
.sec-tools { align-items: center; }
@media (max-width: 760px) { .st-tab { padding: 8px 7px; font-size: 13px; } }

/* Свои галочки: одинаковые во всех разделах панели, в цветах оформления Кубика */
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; flex: none; margin: 0; padding: 0;
  display: inline-block; vertical-align: middle; cursor: pointer;
  border: 1.5px solid #c9c7c0; border-radius: 5px;
  background: var(--input) center / 12px no-repeat;
  transition: background-color .12s, border-color .12s;
}
input[type="checkbox"]:hover { border-color: var(--text); }
input[type="checkbox"]:checked {
  background-color: var(--text); border-color: var(--text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6 9.5 3.6' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type="checkbox"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
input[type="checkbox"]:disabled { opacity: .5; cursor: default; }

/* Выбор модели, усилия и режима: всплывающие окна как в старой панели */
.under { position: relative; }
.model-btn { border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--text); max-width: 55vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; border-radius: 7px; }
.model-btn:hover { background: var(--hover); }

/* Модели: компактное окно, группы сворачиваются по одной (model-picker старой панели) */
.composer-in > #pop-model { width: 280px; max-height: min(440px, 60vh); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
#pop-model .model-group + .model-group { border-top: 1px solid var(--line-soft); }
#pop-model .model-group-heading { display: flex; align-items: center; gap: 8px; padding: 9px 8px; border-radius: 7px; list-style: none; cursor: pointer; user-select: none; font-weight: 500; }
#pop-model .model-group-heading::-webkit-details-marker { display: none; }
#pop-model .model-group-heading:hover { background: var(--pill); }
#pop-model .model-group-heading:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
#pop-model .model-group-heading .grow { flex: 1; }
#pop-model .model-count { color: var(--muted); font-size: 11px; font-weight: 400; }
#pop-model .model-chevron { display: inline-block; color: var(--muted); font-size: 18px; line-height: 1; transition: transform .15s; }
#pop-model .model-group[open] > summary .model-chevron { transform: rotate(90deg); }
#pop-model .model-group-heading .check { color: var(--blue); }
#pop-model .model-group-body { padding: 0 0 5px 12px; }
#pop-model .model-item .grow { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .composer-in > #pop-model { right: 0; width: min(280px, calc(100vw - 32px)); }
}
/* Метка провайдера в списке чатов: цвет как у группы в выборе модели */
.chat-row .gem-tag.pv-tag { color: var(--pc); border-color: color-mix(in srgb, var(--pc) 40%, transparent); }

/* Полноценный терминал (xterm.js) */
.term-host { flex: 1; min-height: 0; background: #1e1e1e; padding: 6px; overflow: hidden; }
.term-foot { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-top: 1px solid #333; flex-shrink: 0; }
/* Терминал не шире экрана: контейнер может сжиматься, лишнее обрезается */
.file-body.term { min-width: 0; max-width: 100%; }
.term-host { min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
.file-box:has(.term-host) { min-width: 0; max-width: 100%; width: 100%; }

/* Ожидающие действия в чате: перенос и удаление в базе */
.pending-card { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--input); }
.pending-card .pc-text { font-size: 13.5px; color: var(--text); }
.pending-card .pc-row { display: flex; gap: 8px; margin-top: 8px; }
.pending-card .pc-row button { font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; }
.pending-card .pc-row button.primary { background: var(--text); color: #fff; border-color: var(--text); }
.pending-card .pc-row button.ghost { background: transparent; color: var(--muted); }
.pending-card .pc-row button:disabled { opacity: .5; cursor: default; }

/* Кнопки F1–F12 под терминалом */
.term-keys { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px; background: #2a2a2a; border-top: 1px solid #333; flex-shrink: 0; }
.term-keys button { flex: 1 1 calc(100% / 6 - 4px); min-width: 42px; font: 12px/1 ui-monospace, Menlo, Consolas, monospace; padding: 8px 0; border: 1px solid #444; border-radius: 6px; background: #3a3a3a; color: #e6e6e6; cursor: pointer; }
.term-keys button:active { background: #4a4a4a; }