/* ============================================================================
   app.css — общий каркас рабочих страниц нового дизайна 4gen (пакет A):
   app-shell, рельса, сайдбар истории, гостевые блоки, балансовая модалка.
   Источник: ai-studio.html + ai-studio-guest.html. Постраничное (чат,
   композер, панель настроек, workspace ассистента) сюда НЕ входит — уедет
   в шаблоны страниц. Требует site-theme.css.
   ========================================================================== */

/* ===================== APP SHELL ===================== */
body{overflow:hidden;} /* в макете рабочие страницы не скроллят body */
.app-shell{display:flex; height:100vh; width:100vw; overflow:hidden;}
.content-wrapper{display:flex; flex:1; min-width:0; height:100%;}
.overlay{display:none; position:fixed; inset:0; background:rgba(10,10,14,.45); z-index:60;}
.overlay.open{display:block;}
.icon{width:18px; height:18px; flex-shrink:0;}

/* ---------- main column ---------- */
.main-panel{flex:1; display:flex; flex-direction:column; min-width:0; height:100%;}

/* ===================== LEFT SIDEBAR (history) ===================== */
.sidebar{
  width:250px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border);
  overflow:hidden; transition:width .2s ease; position:relative;
}
.sidebar.sidebar-hidden{width:56px;}
.sidebar-inner{width:250px; display:flex; flex-direction:column; height:100%;}
.sidebar.sidebar-hidden .sidebar-inner{display:none;}
.sidebar-rail{display:none; width:56px; flex-direction:column; align-items:center; height:100%; padding:16px 0; gap:8px;}
.sidebar.sidebar-hidden .sidebar-rail{display:flex;}
.sidebar-backdrop{display:none;}
@media (max-width:600px){
  /* На узких экранах развёрнутая панель не сжимает рабочую область, а всплывает поверх неё */
  .sidebar:not(.sidebar-hidden){
    position:fixed; top:0; left:0; height:100%; z-index:60; width:min(84vw, 300px);
    box-shadow:2px 0 24px rgba(10,10,14,.25);
  }
  .sidebar-backdrop{
    display:none; position:fixed; inset:0; background:rgba(10,10,14,.45); z-index:55;
  }
  .sidebar-backdrop.open{display:block;}
}
.rail-btn{
  width:34px; height:34px; border-radius:9px; border:none; background:none; color:var(--muted);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.rail-btn svg{width:16px; height:16px;}
.rail-btn:hover{background:var(--surface-2); color:var(--ink);}
.rail-btn.rail-primary{background-image:linear-gradient(120deg, var(--red), var(--orange)); color:#fff;}
.rail-btn.rail-primary:hover{opacity:.9;}
.rail-spacer{flex:1;}
.sidebar-top{padding:18px 16px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px;}
.panel-close{display:flex; width:30px; height:30px; border-radius:8px; border:1px solid var(--border-strong); background:transparent; color:var(--muted); align-items:center; justify-content:center;}
/* SVG без явного размера раздувается до 300×150 и «исчезает» из кнопки. */
.panel-close svg{width:16px; height:16px; flex-shrink:0;}
.new-gen-btn{
  margin:4px 16px 14px; padding:11px 14px; border-radius:10px; border:none;
  background-image:linear-gradient(120deg, var(--red), var(--orange)); color:#fff;
  font-size:13.5px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px;
}
.sidebar-search{margin:0 16px 12px; position:relative;}
.sidebar-search input{width:100%; padding:9px 12px 9px 34px; border-radius:9px; border:1px solid var(--border); background:var(--bg); color:var(--ink); font-size:13px;}
.sidebar-search input:focus{outline:2px solid var(--red); outline-offset:-1px;}
.sidebar-search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--muted-2);}

.sidebar-history{flex:1; overflow-y:auto; padding:0 10px;}
.hist-group-label{font-family:'JetBrains Mono'; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:12px 10px 6px;}
.hist-item{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; cursor:pointer; font-size:13px; color:var(--muted);}
.hist-item:hover{background:var(--surface-2);}
.hist-item.active{background:var(--surface-2); color:var(--ink); font-weight:500;}
.hist-ic{width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.hist-ic svg{width:13px; height:13px; color:#fff;}
.hist-text{overflow:hidden;}
.hist-title{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block;}
.hist-time{font-size:11px; color:var(--muted); display:block;}

/* ---------- пустая история для гостя (из ai-studio-guest.html) ---------- */
.hist-empty{display:flex; flex-direction:column; align-items:center; text-align:center; padding:30px 16px; color:var(--muted-2);}
.hist-empty svg{width:26px; height:26px; margin-bottom:12px; color:var(--muted-2);}
.hist-empty p{font-size:12.5px; line-height:1.55; margin-bottom:16px;}

/* ---------- низ сайдбара ---------- */
.sidebar-bottom{border-top:1px solid var(--border); padding:12px;}
.balance-row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-radius:10px; background:var(--surface-2); margin-bottom:8px; cursor:pointer; border:1px solid transparent;}
.balance-row:hover{border-color:var(--border-strong);}
.balance-row .blabel{font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:6px;}
.balance-row .bval{font-family:'JetBrains Mono'; font-size:13.5px; font-weight:600;}
.balance-row .badd{width:20px; height:20px; border-radius:50%; background-image:linear-gradient(120deg, var(--red), var(--orange)); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.sidebar-link{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; font-size:13px; color:var(--muted); background:none; border:none; width:100%; text-align:left;}
.sidebar-link:hover{background:var(--surface-2); color:var(--ink);}
.nav-toggle .nav-chevron{width:14px; height:14px; margin-left:auto; flex-shrink:0; color:var(--muted-2); transition:transform .2s ease;}
.nav-toggle[aria-expanded="true"] .nav-chevron{transform:rotate(180deg);}
.sidebar-nav-links{display:none; flex-direction:column; gap:2px; padding-top:2px;}
.sidebar-nav-links.open{display:flex;}

/* ---------- гостевая строка в сайдбаре (из ai-studio-guest.html) ---------- */
.guest-status{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--muted); padding:2px 2px 10px;}
.guest-status svg{width:15px; height:15px; flex-shrink:0; color:var(--muted-2);}
.guest-auth-btns{display:flex; gap:8px; margin-bottom:8px;}
.gbtn{flex:1; padding:9px 8px; border-radius:9px; font-size:12.5px; font-weight:500; cursor:pointer; text-align:center; white-space:nowrap;}
.gbtn-signin{border:1px solid var(--border-strong); background:var(--bg); color:var(--ink);}
.gbtn-signin:hover{border-color:var(--muted);}
.gbtn-signup{border:none; background-image:linear-gradient(120deg, var(--red), var(--orange)); color:#fff; font-weight:600;}
.gbtn-signup:hover{opacity:.92;}

/* ===================== BALANCE MODAL =====================
   Из ai-studio.html. Обёртка .modal-overlay задана в site-theme.css
   (канон z-index:200; в макете ai-studio у неё был z-index:95). */
.modal-card{background:var(--bg); border:1px solid var(--border); border-radius:18px; padding:28px; width:100%; max-width:340px; box-shadow:var(--shadow); position:relative;}
.modal-card h3{font-size:17px; margin-bottom:6px;}
.modal-card .m-sub{color:var(--muted); font-size:13px; margin-bottom:20px;}
.bm-amounts{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px;}
.bm-amt{padding:11px 6px; border-radius:10px; border:1px solid var(--border); background:var(--surface); font-size:13.5px; font-weight:500; text-align:center;}
.bm-amt.active{border-color:var(--red); background:color-mix(in srgb, var(--red) 8%, var(--surface));}
.bm-input{width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); font-size:14px; margin-bottom:16px;}
.bm-input:focus{outline:2px solid var(--red); outline-offset:-1px;}
.bm-confirm{width:100%; padding:12px; border-radius:10px; border:none; background-image:linear-gradient(120deg, var(--red), var(--orange)); color:#fff; font-weight:600; font-size:14px;}
/* ссылка в кабинет из модалки пополнения (макет v2 assistant.html) */
.bm-cab-link{display:block; text-align:center; margin-top:14px; font-size:12.5px; color:var(--muted); text-decoration:underline; text-underline-offset:3px;}
.bm-cab-link:hover{color:var(--ink);}

/* ===================== История сайдбара + модалка управления чатами
   (рендер js/api/gen-history.js; общие для всех страниц base_app) —
   перенесено из pages/ai-studio.html extra_head ===================== */
section.history{display:flex; flex-direction:column; min-height:0;}
section.history h2{font-family:'JetBrains Mono'; font-size:10.5px; font-weight:500; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:12px 10px 6px;}
.gen-list{list-style:none; margin:0; padding:0;}
.gen-list-item{border-radius:9px;}
.gen-list-item:hover, .gen-list-item--active{background:var(--surface-2);}
.gen-item{position:relative;}
.gen-item__link{display:flex; align-items:center; gap:10px; padding:9px 64px 9px 10px; font-size:13px; color:var(--muted); min-width:0;}
.gen-list-item--active .gen-item__link{color:var(--ink); font-weight:500;}
.gen-item__icon{width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--muted-2);}
.gen-item__icon svg{width:13px; height:13px; color:#fff;}
/* цвет плашки по модальности (li[data-modality] проставляет gen-history.js) — палитра из макета */
.gen-list-item[data-modality="text"] .gen-item__icon, .gen-list-item[data-modality="code"] .gen-item__icon{background:var(--teal);}
.gen-list-item[data-modality="image"] .gen-item__icon{background:var(--orange);}
.gen-list-item[data-modality="video"] .gen-item__icon{background:var(--violet);}
.gen-list-item[data-modality="audio"] .gen-item__icon{background:var(--red);}
.gen-item__body{overflow:hidden; min-width:0;}
.gen-item__name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block;}
.gen-item__time{font-size:11px; color:var(--muted); display:block;}
.gen-item__side-actions{position:absolute; right:6px; top:50%; transform:translateY(-50%); display:flex; gap:2px; opacity:0;}
.gen-list-item:hover .gen-item__side-actions, .gen-list-item--active .gen-item__side-actions{opacity:1;}
.gen-item__download, .gen-item__delete{display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; border:none; background:none; color:var(--muted-2); padding:0;}
.gen-item__download:hover, .gen-item__delete:hover{background:var(--surface-3); color:var(--ink);}
.gen-item__download svg, .gen-item__delete svg{width:13px; height:13px;}
.gen-item--removing{opacity:0; transition:opacity .3s ease;}
.gen-list-empty, .gen-list-error{padding:14px 10px; font-size:12.5px; color:var(--muted-2); list-style:none; display:flex; align-items:center; gap:7px;}
.gen-list-skeleton{list-style:none; padding:9px 10px; display:flex; flex-direction:column; gap:7px;}
.gen-skeleton-row{height:11px; border-radius:6px; background:var(--surface-2); animation:aiPulse 1.4s ease-in-out infinite;}
.gen-skeleton-row--short{width:55%;}
.history-capacity-notice{margin:4px 10px 6px; padding:9px 11px; border-radius:10px; background:var(--surface-2); font-size:11.5px; color:var(--muted); line-height:1.45;}
.history-capacity-action{border:none; background:none; color:var(--red); font-size:11.5px; padding:0; margin-top:4px; text-align:left; text-decoration:underline;}
.history-pagination{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:8px 10px 0;}
.history-pagination-btn{border:1px solid var(--border); background:var(--bg); color:var(--muted); font-size:11.5px; padding:5px 9px; border-radius:8px;}
.history-pagination-btn:disabled{opacity:.4;}
.history-pagination-info{font-family:'JetBrains Mono'; font-size:10.5px; color:var(--muted-2);}
.history-footer{padding:8px 10px 0;}
.history-clear-btn{border:none; background:none; color:var(--muted-2); font-size:11.5px; padding:0; text-decoration:underline;}
.history-clear-btn:hover{color:var(--red);}
.history-sidebar-hint{padding:10px 10px 4px; font-size:10.5px; line-height:1.5; color:var(--muted-2);}

/* модалка «выбрать чаты для удаления» (openManageChatsModal из gen-history.js) */
.manage-chats-overlay{position:fixed; inset:0; background:rgba(10,10,14,.55); display:flex; align-items:center; justify-content:center; z-index:210; padding:20px;}
.manage-chats-overlay[hidden]{display:none;}
.manage-chats-modal{background:var(--bg); border:1px solid var(--border); border-radius:18px; padding:24px; width:100%; max-width:420px; box-shadow:var(--shadow); display:flex; flex-direction:column; max-height:80vh;}
.manage-chats-modal h2{font-size:16px; margin-bottom:6px;}
.manage-chats-desc{color:var(--muted); font-size:12.5px; margin-bottom:14px;}
.manage-chats-list{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:4px; margin-bottom:16px;}
.manage-chats-item{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; font-size:13px; cursor:pointer;}
.manage-chats-item:hover{background:var(--surface);}
.manage-chats-item input{accent-color:var(--red);}
.manage-chats-name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.manage-chats-date{font-size:11px; color:var(--muted-2); flex-shrink:0;}
.manage-chats-loading, .manage-chats-empty, .manage-chats-error{font-size:13px; color:var(--muted); padding:10px;}
.manage-chats-actions{display:flex; gap:8px; justify-content:flex-end;}
.manage-chats-delete{border:none; border-radius:9px; padding:9px 14px; font-size:13px; font-weight:600; color:#fff; background-image:linear-gradient(120deg, var(--red), var(--orange));}
.manage-chats-delete:disabled{opacity:.45;}
.manage-chats-close{border:1px solid var(--border-strong); border-radius:9px; padding:9px 14px; font-size:13px; background:var(--bg); color:var(--ink);}

/* Атрибут hidden обязан побеждать наши display:flex у элементов истории. */
.history-pagination[hidden], .history-capacity-notice[hidden], .history-sidebar-hint[hidden]{display:none !important;}

/* ===================== Мобильные зоны нажатия (макет v2, ≤768px) =====================
   Визуальный размер на десктопе не тронут: кнопки панелей/композера — минимум
   38px, отправка 40px. Стрелки числовых полей — осознанное исключение
   (дублируются прямым вводом в поле, WCAG 2.5.8). */
@media (max-width:768px){
  .panel-close{width:38px; height:38px;}
  .ctool-btn{padding:9px 11px; min-height:38px; min-width:38px; justify-content:center;}
  .composer-send{width:40px; height:40px;}
  .field-num .fn-arrows button{width:26px; height:17px;}
}