/* Токены и примитивы — из /static/style.css. Здесь только экраны кабинета.
   Страница подключает style.css первой (см. cabinet/index.html), поэтому
   вся шкала --s*/--r*/--dur*/цвета доступна и дублировать её не нужно.

   Приведено к языку взаимодействия продукта:
   ─ радиусы по шкале --r-* (ближайшая ступень, при равенстве вверх:
     12px → --r-lg 14px, 16px и 20px → --r-xl 18px);
   ─ длительности: .1s/.15s/.2s/140ms откликов → --dur-tap, выезд боковой
     панели → --dur-3 (реальная смена состояния, а не появление);
   ─ у каждого управляющего элемента все четыре состояния, включая
     :focus-visible, которого в этом файле не было ни одного. */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--text);line-height:1.6;-webkit-text-size-adjust:100%}
a{color:var(--accent);text-decoration:none}
button{cursor:pointer;font-family:inherit}

/* Единое кольцо фокуса кабинета: одно правило вместо пятнадцати забытых */
:is(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:var(--ring) solid var(--accent);outline-offset:var(--ring-offset)}

/* ── Login ────────────────────────────────────────────── */
.login-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  overflow-y:auto;-webkit-overflow-scrolling:touch;padding:24px}
.login-card{max-width:400px;width:100%;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--r-xl);padding:40px 32px;text-align:center}
.cabinet-brand{display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);
  color:var(--text);font-size:20px;font-weight:750;letter-spacing:-.02em;margin-bottom:var(--s4)}
.cabinet-brand img{display:block;width:auto;height:30px}
.cabinet-brand:hover{color:var(--accent)}
.cabinet-brand-sidebar{justify-content:flex-start;margin:0;min-width:0}
.cabinet-brand-sidebar img{height:24px}
.cabinet-brand-sidebar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login-card h1{font-size:24px;font-weight:700;margin-bottom:8px}
.login-sub{color:var(--muted);font-size:14px;margin-bottom:28px}
.form-row{margin-bottom:14px}
.form-row input{width:100%;padding:14px 16px;background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-lg);color:var(--text);
  font-size:16px;transition:border-color var(--dur-tap) var(--ease-out)}
.form-row input:hover:not(:disabled){border-color:var(--border-strong)}
/* фокус: раньше здесь стоял outline:none, и от фокуса оставался только
   акцентный бордюр в 1px — с клавиатуры поле терялось. Кольцо вернули,
   бордюр оставили как дополнительный признак. */
.form-row input:focus{border-color:var(--accent)}
.form-row input:disabled{opacity:.45;cursor:not-allowed}
.login-error{background:var(--danger-soft);border:1px solid var(--danger-line);
  border-radius:var(--r-md);padding:10px 14px;font-size:14px;color:var(--danger);margin-bottom:14px}
.login-success{background:var(--ok-soft);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent);
  border-radius:var(--r-md);padding:10px 14px;font-size:14px;color:var(--ok);margin-bottom:14px}
.login-captcha{background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:var(--r-lg);padding:12px 14px;margin-bottom:14px}
.login-captcha-q{font-size:14px;margin-bottom:8px}
.login-captcha input{width:100%;padding:10px 12px;background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);
  font-size:15px;transition:border-color var(--dur-tap) var(--ease-out)}
.login-captcha input:hover:not(:disabled){border-color:var(--border-strong)}
/* фокус: тот же случай — outline:none убран, кольцо задаёт общее правило */
.login-captcha input:focus{border-color:var(--accent)}
.login-captcha input:disabled{opacity:.45;cursor:not-allowed}
.login-btn{width:100%;padding:14px;background:var(--accent-2);color:var(--accent-fg);
  border:1px solid var(--accent-2);border-radius:var(--r-lg);font-size:17px;font-weight:650;
  min-height:0;transition:background-color var(--dur-tap) var(--ease-out),
  border-color var(--dur-tap) var(--ease-out),transform var(--dur-tap) var(--ease-tap)}
.login-btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent)}
.login-btn:not(:disabled):active{background:var(--accent-press);transform:scale(var(--press))}
.login-btn:disabled{opacity:.6;cursor:wait;transform:none}
/* Основной путь входа — общая учётная запись платформы. Локальная форма
   ниже подана как запасная, поэтому разделена явной подписью, а не просто
   поставлена рядом: человек должен видеть, что это один и тот же аккаунт. */
.login-btn-apex{display:flex;align-items:center;justify-content:center;
  text-decoration:none;margin-bottom:var(--s4)}
.login-alt{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s4);
  color:var(--text-faint);font-size:var(--t-xs)}
.login-alt::before,.login-alt::after{content:"";flex:1;height:1px;background:var(--border)}
.login-foot{margin-top:20px;font-size:14px;color:var(--muted)}

/* ── Chat layout ──────────────────────────────────────── */
.chat-screen{display:flex;height:100vh}

/* Sidebar */
.sidebar{width:280px;min-width:280px;background:var(--panel);
  border-right:1px solid var(--border);display:flex;flex-direction:column}
.sidebar-header{padding:16px 20px;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--border)}
.sidebar-logo{font-size:24px}
.sidebar-title{font-size:18px;font-weight:700}
.new-chat-btn{margin:12px 16px;padding:10px 16px;background:var(--panel-2);
  border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);
  font-size:14px;font-weight:600;text-align:left;
  transition:background-color var(--dur-tap) var(--ease-out),
  border-color var(--dur-tap) var(--ease-out),transform var(--dur-tap) var(--ease-tap)}
.new-chat-btn:hover:not(:disabled){border-color:var(--accent);background:var(--surface-3)}
.new-chat-btn:not(:disabled):active{transform:scale(var(--press))}
.new-chat-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.chat-list{flex:1;overflow-y:auto;padding:4px 8px}
.chat-item{padding:10px 14px;border-radius:var(--r-md);font-size:14px;
  color:var(--muted);cursor:pointer;
  transition:background-color var(--dur-tap) var(--ease-out),
  color var(--dur-tap) var(--ease-out),transform var(--dur-tap) var(--ease-tap);
  display:flex;align-items:center;gap:8px}
.chat-item-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item-del{background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:13px;opacity:0;border-radius:var(--r-sm);
  transition:opacity var(--dur-tap) var(--ease-out),color var(--dur-tap) var(--ease-out),
  transform var(--dur-tap) var(--ease-tap);flex-shrink:0;padding:2px 4px}
.chat-item:hover{background:var(--panel-2)}
.chat-item:focus-visible{outline:var(--ring) solid var(--accent);outline-offset:var(--ring-offset)}
/* Внутри строки живёт кнопка удаления, а :active достаётся и предку:
   сжимаем строку только когда нажали её саму, а не крестик внутри. */
.chat-item:active:not(:has(:active)){transform:scale(var(--press))}
.chat-item[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.chat-item:hover .chat-item-del{opacity:.7}
.chat-item-del:hover:not(:disabled){opacity:1;color:var(--danger)}
/* Кнопка удаления не должна быть невидимой для клавиатуры: при фокусе
   показываем её так же, как при наведении на строку. */
.chat-item-del:focus-visible{opacity:1;color:var(--danger)}
.chat-item-del:not(:disabled):active{transform:scale(var(--press))}
.chat-item-del:disabled{opacity:.45;cursor:not-allowed;transform:none}
.chat-item.active{background:var(--panel-2);color:var(--text)}
.chat-item.active .chat-item-del{opacity:.7}
.sidebar-footer{padding:12px 16px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between}
.user-info{display:flex;align-items:center;gap:10px;min-width:0}
.user-avatar{width:32px;height:32px;border-radius:var(--r-full);background:var(--accent-2);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
  color:var(--accent-fg);flex-shrink:0}
.user-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logout-btn{background:none;border:none;color:var(--muted);font-size:20px;
  padding:6px 10px;border-radius:var(--r-sm);
  transition:color var(--dur-tap) var(--ease-out),
  background-color var(--dur-tap) var(--ease-out),transform var(--dur-tap) var(--ease-tap)}
.logout-btn:hover:not(:disabled){color:var(--danger);background:var(--danger-soft)}
.logout-btn:not(:disabled):active{transform:scale(var(--press))}
.logout-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* Main area */
.main-area{flex:1;display:flex;flex-direction:column;min-width:0}
.chat-header{padding:14px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.chat-title{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.route-select{background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-sm);color:var(--text);font-size:13px;padding:6px 10px;
  transition:border-color var(--dur-tap) var(--ease-out)}
.route-select:hover:not(:disabled){border-color:var(--border-strong)}
/* фокус: outline:none убран, кольцо задаёт общее правило файла */
.route-select:focus{border-color:var(--accent)}
.route-select:disabled{opacity:.45;cursor:not-allowed}

/* Messages */
.messages{flex:1;overflow-y:auto;padding:20px}
.msg{max-width:780px;margin:0 auto 16px}
.msg-user{display:flex;justify-content:flex-end}
/* 4px у «хвоста» пузыря — срез угла со стороны автора, а не радиус из шкалы */
.msg-user .msg-bubble{background:var(--accent-2);color:var(--accent-fg);
  border-radius:var(--r-xl) var(--r-xl) 4px var(--r-xl)}
.msg-ai .msg-bubble{background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-xl) var(--r-xl) var(--r-xl) 4px}
.msg-bubble{padding:12px 16px;font-size:15px;line-height:1.6;max-width:680px;word-wrap:break-word}
.msg-bubble pre{background:var(--bg);border-radius:var(--r-sm);padding:12px;overflow-x:auto;margin:8px 0;font-size:13px}
.msg-bubble code{font-family:"SF Mono",Consolas,monospace;font-size:13px}
.msg-bubble p{margin:4px 0}
.msg-meta{font-size:12px;color:var(--muted);margin-top:4px}
.msg-files{margin-top:8px}
.msg-files a{display:inline-block;padding:4px 12px;background:var(--panel-2);
  border:1px solid var(--border);border-radius:var(--r-sm);font-size:13px;margin:2px;
  transition:background-color var(--dur-tap) var(--ease-out),
  border-color var(--dur-tap) var(--ease-out),transform var(--dur-tap) var(--ease-tap)}
.msg-files a:hover{border-color:var(--accent);background:var(--surface-3)}
.msg-files a:active{transform:scale(var(--press))}
.msg-files a[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.msg-queue{font-size:13px;color:var(--muted);text-align:center;padding:8px;
  background:var(--panel);border-radius:var(--r-md);margin:8px auto;max-width:300px}
.msg-error{color:var(--danger);font-size:14px;text-align:center;padding:12px}
.ad-banner{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-md);
  padding:10px 14px;margin:8px 0;font-size:13px;color:var(--muted);text-align:center}
.ad-banner a{color:var(--accent);font-weight:700;text-decoration:none}
.ad-banner a:hover{text-decoration:underline}

/* Input area */
.input-area{padding:16px 20px;border-top:1px solid var(--border);
  display:flex;gap:12px;align-items:flex-end;max-width:820px;margin:0 auto;width:100%}
#msgInput{flex:1;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-lg);color:var(--text);font-size:15px;padding:12px 16px;
  resize:none;max-height:200px;font-family:inherit;
  transition:border-color var(--dur-tap) var(--ease-out)}
#msgInput:hover:not(:disabled){border-color:var(--border-strong)}
/* фокус: outline:none убран — кольцо теперь видно и с клавиатуры */
#msgInput:focus{border-color:var(--accent)}
#msgInput:focus-visible{outline:var(--ring) solid var(--accent);outline-offset:var(--ring-offset)}
#msgInput:disabled{opacity:.45;cursor:not-allowed}
.send-btn{width:44px;height:44px;background:var(--accent-2);color:var(--accent-fg);
  border:none;border-radius:var(--r-lg);font-size:18px;flex-shrink:0;
  transition:background-color var(--dur-tap) var(--ease-out),transform var(--dur-tap) var(--ease-tap)}
.send-btn:hover:not(:disabled){background:var(--accent)}
.send-btn:not(:disabled):active{background:var(--accent-press);transform:scale(var(--press))}
.send-btn:disabled{opacity:.5;cursor:wait;transform:none}

/* Scrollbar */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
/* 3px — половина ширины полосы, ступени мельче --r-sm в шкале нет */
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* Empty state */
.empty-state{text-align:center;color:var(--muted);padding:60px 20px}
.empty-state-icon{font-size:48px;margin-bottom:12px}

/* Mobile */
@media(max-width:768px){
  .login-screen{align-items:flex-start;padding:40px 16px}
  .login-card{padding:32px 20px}
  .login-logo{font-size:40px}
  .login-card h1{font-size:22px}
  /* Выезд панели — реальная смена состояния по жесту, движение оправдано */
  .sidebar{position:fixed;left:-280px;z-index:var(--z-drawer);
    transition:left var(--dur-3) var(--ease-out);height:100vh}
  .sidebar.open{left:0}
  .chat-screen{position:relative}
  .messages{padding:12px}
  .msg-bubble{max-width:100%}
  .input-area{padding:10px 12px}
}

/* ── Idle popup ───────────────────────────────────────── */
.idle-popup{position:fixed;inset:0;z-index:var(--z-modal);display:flex;
  align-items:center;justify-content:center;
  background:var(--scrim);backdrop-filter:blur(4px)}
.idle-popup-card{background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:40px 32px;text-align:center;max-width:380px}
.idle-popup-icon{font-size:48px;margin-bottom:16px}
.idle-popup-card h2{font-size:22px;margin-bottom:8px}
.idle-popup-card p{color:var(--muted);margin-bottom:24px;font-size:15px}
.idle-popup-btn{background:var(--accent-2);color:var(--accent-fg);border:none;
  border-radius:var(--r-lg);padding:14px 28px;font-size:16px;font-weight:600;
  transition:background-color var(--dur-tap) var(--ease-out),transform var(--dur-tap) var(--ease-tap)}
.idle-popup-btn:hover:not(:disabled){background:var(--accent)}
.idle-popup-btn:not(:disabled):active{background:var(--accent-press);transform:scale(var(--press))}
.idle-popup-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ── Restore overlay ──────────────────────────────────── */
.restore-overlay{position:fixed;inset:0;z-index:var(--z-modal);display:flex;
  align-items:center;justify-content:center;
  background:var(--scrim);backdrop-filter:blur(4px)}
.restore-card{text-align:center}
.restore-card p{color:var(--text);font-size:18px;margin-top:20px}
/* Спиннер — индикатор работы, а не анимация появления экрана */
.restore-spinner{width:48px;height:48px;margin:0 auto;
  border:4px solid var(--border);border-top-color:var(--accent);
  border-radius:var(--r-full);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Chat header right ────────────────────────────────── */
.chat-header-right{display:flex;align-items:center;gap:8px}
.connect-btn{background:var(--accent-2);color:var(--accent-fg);border:none;
  border-radius:var(--r-md);padding:8px 14px;font-size:13px;font-weight:600;
  white-space:nowrap;
  transition:background-color var(--dur-tap) var(--ease-out),transform var(--dur-tap) var(--ease-tap)}
.connect-btn:hover:not(:disabled){background:var(--accent)}
.connect-btn:not(:disabled):active{background:var(--accent-press);transform:scale(var(--press))}
.connect-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ── VNC modal ────────────────────────────────────────── */
.vnc-modal{position:fixed;inset:0;z-index:var(--z-toast);display:flex;flex-direction:column;
  background:var(--n-950)}
/* КРИТИЧНО: у оверлеев display:flex/… перебивал атрибут hidden (специфичность
   .class == [hidden], но author-правило выигрывает у UA) → модалка «Подключение
   аккаунта» и служебные попапы висели поверх формы входа (чёрный экран, особенно
   на мобильном). Заставляем hidden работать для ВСЕХ оверлеев. */
.vnc-modal[hidden],
.idle-popup[hidden],
.restore-overlay[hidden],
.chat-screen[hidden],
.login-screen[hidden]{display:none !important}
.vnc-modal-bar{display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--border)}
.vnc-modal-title{font-size:16px;font-weight:600}
.vnc-modal-close{background:none;border:none;color:var(--muted);font-size:20px;
  cursor:pointer;padding:4px 8px;border-radius:var(--r-sm);
  transition:color var(--dur-tap) var(--ease-out),transform var(--dur-tap) var(--ease-tap)}
.vnc-modal-close:hover:not(:disabled){color:var(--danger)}
.vnc-modal-close:not(:disabled):active{transform:scale(var(--press))}
.vnc-modal-close:disabled{opacity:.45;cursor:not-allowed;transform:none}
.vnc-modal-body{flex:1;overflow:hidden;position:relative}
.vnc-frame{width:100%;height:100%;border:none;background:var(--n-950)}
.vnc-modal-footer{padding:12px 16px;background:var(--panel);border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.vnc-modal-footer p{color:var(--muted);font-size:14px;flex:1}
.vnc-done-btn{background:var(--ok);color:var(--accent-fg);border:none;
  border-radius:var(--r-md);padding:10px 20px;font-size:15px;font-weight:600;
  white-space:nowrap;
  transition:background-color var(--dur-tap) var(--ease-out),transform var(--dur-tap) var(--ease-tap)}
.vnc-done-btn:hover:not(:disabled){background:color-mix(in srgb,var(--ok) 86%,var(--text))}
.vnc-done-btn:not(:disabled):active{transform:scale(var(--press))}
.vnc-done-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ── Message info (connect prompt) ────────────────────── */
.msg-info{color:var(--accent);font-size:14px}
.register-consent{display:flex;gap:9px;align-items:flex-start;margin:10px 0;color:var(--muted);font-size:12px;line-height:1.45;text-align:left}
.register-consent input{margin-top:3px;flex:0 0 auto;accent-color:var(--accent)}
.register-consent a{color:var(--accent);text-decoration:underline}
.required-consent{color:var(--text)}