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

html, body {
  height: 100%;
  background: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: #e4e4e4;
  overscroll-behavior: none;
}

.hidden { display: none !important; }

.page {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* Боковые вырезы (альбомная ориентация на iPhone) */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ── Верхняя панель ─────────────────────────────────────────────────────── */
/* Уходит фоном под «чёлку»: в PWA нет чёрной полосы над вкладками */
.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: calc(42px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  flex-shrink: 0;
  background: #242424;
  border-bottom: 1px solid #333;
}

/* Дропдаун проектов */
.project-dd { position: relative; flex-shrink: 0; }

.dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #ddd;
  background: #2c2c2c;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  cursor: pointer;
  max-width: 220px;
}

.dd-btn:hover { border-color: #D97757; }

#ddName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.dd-caret { color: #888; font-size: 11px; }

.dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 280px;
  max-width: 90vw;
  background: #2c2c2c;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid #363636;
}

.dd-item:hover { background: #333; }
.dd-item.active { background: #3a2c26; }

.dd-item-info { flex: 1; min-width: 0; }

.dd-item-name {
  font-size: 13px;
  font-weight: 600;
  color: #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dd-item-path {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dd-item-close {
  flex-shrink: 0;
  padding: 4px 7px;
  font-size: 11px;
  color: #777;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 3px;
}

.dd-item-close:hover { color: #e66; background: #3a2626; }

.dd-open {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  color: #D97757;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.dd-open:hover { background: #333; }

/* Вкладки */
.tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-size: 12px;
  color: #999;
  background: #2c2c2c;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.tab:hover { background: #333; color: #ccc; }

.tab.active {
  background: #3a2c26;
  border-color: #D97757;
  color: #eee;
}

.tab-rename {
  width: 120px;
  padding: 1px 6px;
  font-size: 12px;
  font-family: inherit;
  color: #eee;
  background: #1a1a1a;
  border: 1px solid #D97757;
  border-radius: 3px;
  outline: none;
}

.tab-rename-btn { color: #666; font-size: 11px; padding: 0 2px; }
.tab-rename-btn:hover { color: #D97757; }

.tab-close { color: #666; font-size: 11px; padding: 0 2px; }
.tab-close:hover { color: #e66; }

.tab-add {
  flex-shrink: 0;
  padding: 5px 10px;
  font-size: 13px;
  color: #999;
  background: transparent;
  border: 1px dashed #444;
  border-radius: 4px;
  cursor: pointer;
}

.tab-add:hover { color: #D97757; border-color: #D97757; }

.copy-btn {
  flex-shrink: 0;
  padding: 5px 9px;
  font-size: 13px;
  color: #999;
  background: transparent;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  cursor: pointer;
}

.copy-btn:hover { color: #D97757; border-color: #D97757; }
/* Уведомления включены */
.copy-btn.on { color: #16a34a; border-color: #16a34a; }

/* Индикаторы состояния Claude во вкладке */
.tab-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; }
.tab-dot.busy { background: #D97757; animation: dot-pulse 1.4s ease-in-out infinite; }
.tab-dot.done { background: #16a34a; }

@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.conn-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; }
.conn-dot.ok { background: #16a34a; }
.conn-dot.bad { background: #dc2626; }

/* ── Мобильная шапка и боковое меню ─────────────────────────────────────── */
.menu-btn {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}

.mobile-title {
  display: none;
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}

.drawer-overlay.open { opacity: 1; visibility: visible; }

.drawer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(300px, 85vw);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: #242424;
  border-right: 1px solid #333;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  transform: translateX(-100%);
  transition: transform 0.2s ease;
}

.drawer-overlay.open .drawer { transform: translateX(0); }

.drawer-section {
  padding: 14px 14px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
}

.drawer-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-size: 13px;
  color: #ccc;
  cursor: pointer;
  border-bottom: 1px solid #2e2e2e;
}

.drawer-tab.active { background: #3a2c26; color: #eee; }

.drawer-tab-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-tab button {
  flex-shrink: 0;
  padding: 4px 7px;
  font-size: 12px;
  color: #777;
  background: transparent;
  border: none;
  cursor: pointer;
}

@media (max-width: 640px) {
  .menu-btn { display: inline-flex; }
  .mobile-title { display: block; }
  .topbar .project-dd,
  .topbar .tabs,
  .topbar .tab-add { display: none; }
}

/* ── Баннер ошибок ──────────────────────────────────────────────────────── */
.error-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  flex-shrink: 0;
  background: #3b1d1d;
  border-bottom: 1px solid #7f1d1d;
  color: #fca5a5;
  font-size: 13px;
}

.error-banner span { flex: 1; word-break: break-word; }

.error-banner button {
  background: transparent;
  border: none;
  color: #fca5a5;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
}

/* ── Терминал ───────────────────────────────────────────────────────────── */
.term-wrap {
  flex: 1;
  min-height: 0;
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom)) 8px;
  /* Панорамирование забираем себе (свайп = прокрутка терминала),
     пинч-зум оставляем браузеру */
  touch-action: pinch-zoom;
}

.term-wrap .xterm { height: 100%; }
#terminal { height: 100%; }

/* ── Приветствие ────────────────────────────────────────────────────────── */
.welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #999;
  text-align: center;
  padding: 20px;
  line-height: 1.5;
}

/* ── Кнопки ─────────────────────────────────────────────────────────────── */
.btn-accent {
  padding: 9px 18px;
  font-size: 13px;
  color: #fff;
  background: #D97757;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-accent:hover { background: #c46647; }
.btn-accent:disabled { opacity: 0.6; cursor: wait; }

.btn-plain {
  padding: 9px 14px;
  font-size: 13px;
  color: #ccc;
  background: #2c2c2c;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  cursor: pointer;
}

.btn-plain:hover { border-color: #666; }

/* ── Панель клавиш ──────────────────────────────────────────────────────── */
.keys-panel {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: #242424;
  border-top: 1px solid #333;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.keys-panel::-webkit-scrollbar { display: none; }

.key-btn {
  flex-shrink: 0;
  min-width: 44px;
  padding: 8px 12px;
  font-size: 13px;
  color: #ccc;
  background: #2c2c2c;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x;
  white-space: nowrap;
}

.key-btn:active {
  background: #3a2c26;
  border-color: #D97757;
  color: #eee;
}

.keys-fab {
  /* absolute, а не fixed: .page ужимается под клавиатуру (syncViewport),
     и кнопка должна ехать вместе с ней, а не оставаться под клавиатурой */
  position: absolute;
  right: calc(12px + env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 20;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #999;
  background: rgba(44, 44, 44, 0.9);
  border: 1px solid #3a3a3a;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.keys-fab.open {
  bottom: calc(64px + env(safe-area-inset-bottom));
  color: #D97757;
  border-color: #D97757;
}

/* ── Тост ───────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  right: calc(64px + env(safe-area-inset-right));
  left: calc(12px + env(safe-area-inset-left));
  bottom: calc(16px + env(safe-area-inset-bottom));
  text-align: right;
  z-index: 30;
  padding: 8px 14px;
  background: #2c2c2c;
  border: 1px solid #D97757;
  border-radius: 4px;
  color: #eee;
  font-size: 13px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.toast.fail { border-color: #dc2626; color: #fca5a5; }

/* ── Модалка выбора папки ───────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal {
  width: 480px;
  max-width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: #242424;
  border: 1px solid #3a3a3a;
  border-radius: 8px;
  overflow: hidden;
}

.modal-title {
  padding: 14px 16px 10px;
  font-size: 14px;
  font-weight: 600;
  color: #ddd;
}

.picker-path {
  padding: 8px 16px;
  font-family: Menlo, Monaco, monospace;
  font-size: 12px;
  color: #D97757;
  background: #1f1f1f;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  word-break: break-all;
}

.picker-list {
  flex: 1;
  min-height: 200px;
  overflow-y: auto;
}

.picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13px;
  color: #ccc;
  cursor: pointer;
  border-bottom: 1px solid #2e2e2e;
}

.picker-item:hover { background: #2e2e2e; }
.picker-item .ico { color: #D97757; font-size: 13px; }
.picker-empty { padding: 20px 16px; color: #777; font-size: 13px; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #333;
}

/* ── Вход по одноразовому коду ───────────────────────────────────────────── */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #1a1a1a;
}

.auth-card {
  width: 100%;
  max-width: 340px;
  padding: 26px;
  background: #242424;
  border: 1px solid #333;
  border-radius: 8px;
}

.auth-title {
  font-size: 17px;
  font-weight: 600;
  color: #eee;
  margin-bottom: 6px;
}

.auth-hint {
  margin: 0 0 16px;
  font-size: 12px;
  color: #888;
}

.auth-card input {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
  color: #eee;
  background: #1d1d1d;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  outline: none;
}

.auth-card input:focus { border-color: #D97757; }

.auth-card .btn-accent { width: 100%; }

.auth-back {
  width: 100%;
  margin-top: 8px;
}

.auth-sent {
  margin: 0 0 12px;
  font-size: 12px;
  color: #4ade80;
}

.auth-error {
  margin: 12px 0 0;
  padding: 8px 10px;
  font-size: 12px;
  color: #fca5a5;
  background: #2b1616;
  border: 1px solid #7f1d1d;
  border-radius: 4px;
}

/* ── Аккаунт в меню ──────────────────────────────────────────────────────── */
.dd-account { border-top: 1px solid #333; }

.account-who {
  padding: 10px 14px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #888;
}

.account-btn {
  display: block;
  width: 100%;
  padding: 9px 14px;
  font-size: 12px;
  font-family: inherit;
  text-align: left;
  color: #ccc;
  background: transparent;
  border: none;
  cursor: pointer;
}

.account-btn:hover { background: #2e2e2e; color: #eee; }

/* ── Пользователи (админка) ──────────────────────────────────────────────── */
.users-hint {
  margin: 0 0 12px;
  font-size: 12px;
  color: #888;
}

.users-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  max-height: 40vh;
  overflow-y: auto;
}

.user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #1d1d1d;
  border: 1px solid #333;
  border-radius: 6px;
}

.user-row-info { flex: 1; min-width: 0; }

.user-row-name {
  font-size: 13px;
  color: #eee;
}

.user-row-detail {
  font-size: 11px;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-row button {
  flex-shrink: 0;
  padding: 4px 8px;
  font-size: 12px;
  color: #999;
  background: transparent;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  cursor: pointer;
}

.user-row button:hover { color: #D97757; border-color: #D97757; }

.users-form {
  padding-top: 12px;
  border-top: 1px solid #333;
}

.users-form-title {
  font-size: 12px;
  font-weight: 600;
  color: #aaa;
  margin-bottom: 10px;
}

.users-form input[type="text"],
.users-form input:not([type]) {
  width: 100%;
  margin-bottom: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  color: #eee;
  background: #1d1d1d;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  outline: none;
}

.users-form input:focus { border-color: #D97757; }

.user-admin-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #ccc;
  cursor: pointer;
}

.user-projects {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 8px;
  padding: 8px 10px;
  max-height: 140px;
  overflow-y: auto;
  font-size: 12px;
  color: #999;
  background: #1d1d1d;
  border: 1px solid #333;
  border-radius: 4px;
}

.user-projects label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ccc;
  cursor: pointer;
}

/* ── Инпуты на тач-устройствах ───────────────────────────────────────────── */
/* iOS Safari зумит страницу при фокусе поля со шрифтом меньше 16px —
   на тач-экранах поднимаем шрифт всех полей до порога, зум не срабатывает */
@media (pointer: coarse) {
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}


/* ── Открытая клавиатура ─────────────────────────────────────────────────── */
/* Страница ужата до видимой области (syncViewport), нижняя safe-area закрыта
   самой клавиатурой — отступы под home indicator больше не нужны */
.page.kb-open .term-wrap { padding-bottom: 6px; }
.page.kb-open .keys-panel { padding-bottom: 8px; }
.page.kb-open .keys-fab { bottom: 12px; }
.page.kb-open .keys-fab.open { bottom: 64px; }