/* ============================================================================
   shell.css — оболочка приложения: боковое меню и верхняя панель.

   Одна рама на все внутренние страницы (главная, студия, архив, тарифы,
   кабинет), чтобы продукт ощущался одним целым, а не набором страниц.
   Рисуется скриптом shell.js в любую страницу с атрибутом data-shell.

   На телефоне боковое меню превращается в выдвижную панель — там за это
   отвечает бургер из mobile.js, здесь только вид.
   ========================================================================= */

:root {
  --sh-side: 264px;
  --sh-top:  68px;
}

html.sh-on body {
  padding-inline-start: var(--sh-side);
  padding-top: var(--sh-top);
}

/* Родная шапка страницы на широком экране не нужна: её работу делает
   верхняя панель оболочки. На телефоне всё наоборот — оболочки нет. */
/* Старая шапка страницы прячется на любой вложенности: на studio, app,
   archive и account она лежит внутри .app, а не прямо в body. */
html.sh-on .header,
html.sh-on .topbar,
html.sh-on .page-header { display: none !important; }

/* --------------------------------------------------------- верхняя панель */

.sh-top {
  position: fixed; top: 0; inset-inline: 0; z-index: 60;
  height: var(--sh-top);
  display: flex; align-items: center; gap: 20px;
  padding: 0 22px;
  background: rgba(255, 255, 255, .74);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--c-border);
}
.sh-top .sh-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c-text); }
.sh-top .sh-logo i { width: 34px; height: 34px; display: grid; place-items: center; filter: drop-shadow(0 3px 6px rgba(20,24,40,.14)); }
.sh-top .sh-logo i img { width: 34px; height: 34px; display: block; }
.sh-top .sh-logo b { font: 600 17px/1 'Inter Tight', sans-serif; letter-spacing: -.02em; }
.sh-top .sh-logo b span { color: var(--c-accent); }

.sh-nav { display: flex; gap: 4px; margin-inline: auto; }
.sh-nav a {
  display: flex; align-items: center; height: 38px; padding: 0 14px;
  border-radius: 999px; text-decoration: none;
  color: var(--c-text-2); font-size: 15px;
  transition: color var(--c-fast), background var(--c-fast);
}
.sh-nav a:hover { color: var(--c-text); background: var(--c-elevated); }
.sh-nav a.on { color: var(--c-text); background: var(--c-elevated); }

.sh-right { display: flex; align-items: center; gap: 10px; }
.sh-help {
  display: flex; align-items: center; gap: 7px;
  color: var(--c-text-2); font-size: 14px; text-decoration: none;
  padding: 8px 10px; border-radius: 10px;
}
.sh-help:hover { color: var(--c-text); background: var(--c-elevated); }
.sh-help svg { width: 16px; height: 16px; fill: currentColor; }

/* Переключатель языка и чип аккаунта приезжают сюда из своих скриптов. */
.sh-slot { display: flex; align-items: center; gap: 8px; }
.sh-slot .lang-switch { margin: 0 !important; }

/* ------------------------------------------------------------ боковое меню */

.sh-side {
  position: fixed; top: var(--sh-top); bottom: 0; inset-inline-start: 0; z-index: 55;
  width: var(--sh-side);
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 14px;
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-inline-end: 1px solid var(--c-border);
  overflow-y: auto;
}

.sh-item {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 14px; border-radius: 14px;
  color: var(--c-text-2); text-decoration: none; font-size: 15px;
  transition: color var(--c-fast), background var(--c-fast);
}
.sh-item svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; opacity: .85; }
.sh-item:hover { color: var(--c-text); background: var(--c-hover); }
.sh-item.on { color: var(--c-text); background: #fff; box-shadow: 0 1px 2px rgba(20,24,40,.06), 0 6px 16px rgba(20,24,40,.06); font-weight: 600; }
/* Активный пункт помечен оранжевой чертой слева — тонко, но однозначно. */
.sh-item.on { position: relative; }
.sh-item.on::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px;
  width: 2px; border-radius: 2px; background: var(--c-accent);
}

.sh-cap {
  margin: 18px 0 6px; padding: 0 14px;
  font: 600 11px/1 'Inter Tight', sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-muted);
}

/* Карточка тарифа внизу меню: сколько осталось и куда нажать, если мало. */
.sh-plan {
  margin-top: auto; padding: 16px;
  border: 1px solid var(--c-border); border-radius: 20px;
  background: linear-gradient(160deg, #fff, #F3F1FB);
  box-shadow: var(--c-shadow);
}
.sh-plan-t { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.sh-plan-t b { color: var(--c-accent); font-weight: 600; }
.sh-plan-k { margin: 12px 0 6px; font-size: 12px; color: var(--c-muted); }
.sh-plan-v { font: 600 15px/1 'Inter Tight', sans-serif; }
.sh-bar { height: 4px; border-radius: 4px; background: var(--c-hover); margin: 10px 0 14px; overflow: hidden; }
.sh-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-accent), var(--c-pink)); border-radius: 4px; }

.sh-user {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding: 10px 12px;
  border-radius: var(--c-r); text-decoration: none; color: var(--c-text);
  border: 1px solid transparent;
}
.sh-user:hover { background: var(--c-elevated); border-color: var(--c-border); }
.sh-user i {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-style: normal; font-weight: 600; font-size: 14px;
  background: var(--c-silver-soft); color: var(--c-silver);
  border: 1px solid rgba(199, 203, 209, .22);
}
.sh-user span { display: block; font-size: 14px; line-height: 1.3; }
.sh-user small { display: block; font-size: 12px; color: var(--c-muted); }

/* ------------------------------------------------------------- телефон */

@media (max-width: 1100px) {
  :root { --sh-side: 232px; }
  .sh-nav { display: none; }
}

@media (max-width: 900px) {
  html.sh-on body { padding-inline-start: 0; padding-top: 0; }
  /* На телефоне рамы нет: там уже есть шапка с бургером и выдвижное меню,
     куда mobile.js уносит все пункты. Две навигации сразу — это каша. */
  .sh-top, .sh-side { display: none !important; }
}

/* ------------------------------------------------------ колокольчик */
/* Уведомления о генерациях: результат приходит через минуты, и человек
   к этому моменту уже на другой вкладке. Красный кружок горит только
   про новое с прошлого открытия. */
.sh-bell{position:relative;display:flex;align-items:center}
.sh-bell-b{position:relative;width:38px;height:38px;border-radius:50%;cursor:pointer;
  border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text-2);
  display:grid;place-items:center;transition:.2s}
.sh-bell-b:hover{border-color:var(--c-accent);color:var(--c-accent)}
.sh-bell-b svg{width:19px;height:19px;fill:currentColor}
.sh-dot{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:100px;
  background:#E7443B;color:#fff;font:700 10px/18px 'Manrope',sans-serif;font-style:normal;text-align:center;
  box-shadow:0 0 0 2px var(--c-surface);animation:shPop .35s cubic-bezier(.2,.9,.3,1.4)}
@keyframes shPop{from{transform:scale(0)}to{transform:scale(1)}}

.sh-drop{position:absolute;top:48px;inset-inline-end:0;width:min(370px,calc(100vw - 32px));z-index:120;
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px rgba(20,24,40,.18);max-height:70vh;overflow-y:auto}
.sh-drop-h{padding:14px 18px 10px;font:700 .82rem/1 'Manrope',sans-serif;letter-spacing:.04em;
  text-transform:uppercase;color:var(--c-muted)}
.sh-drop-e{padding:28px 18px;text-align:center;color:var(--c-muted);font-size:.88rem}
.sh-drop-f{display:block;padding:13px;text-align:center;font-weight:700;font-size:.85rem;
  color:var(--c-accent);text-decoration:none;border-top:1px solid var(--c-border)}
.sh-drop-f:hover{background:var(--c-hover)}

.sh-note{display:flex;gap:12px;align-items:flex-start;padding:12px 18px;text-decoration:none;color:inherit;
  border-top:1px solid var(--c-border);transition:background .18s}
.sh-note:hover{background:var(--c-hover)}
.sh-note.new{background:rgba(122,92,255,.07)}
.sh-note-s{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-weight:800;font-size:.8rem;margin-top:2px}
.sh-note-s.ok{background:rgba(46,204,113,.16);color:#1E8A4C}
.sh-note-s.bad{background:rgba(231,68,59,.14);color:#C0362C}
.sh-note-t{display:block;min-width:0;flex:1}
.sh-note-t b{display:block;font-size:.88rem;font-weight:700}
.sh-note-t em{display:block;font-style:normal;font-size:.82rem;color:var(--c-text-2);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-note-t small{display:block;font-size:.75rem;color:var(--c-muted);margin-top:3px}
@media(max-width:640px){.sh-drop{position:fixed;top:64px;inset-inline:12px;width:auto}}