/* «Психолог онлайн»: система оформления.
   Шрифт и цвета взяты из «Эволюции» (app.lifemanager.pro, 02.10.2026, просьба
   Алексея: «давай оттуда возьмём и шрифты, и цвета», сервис для психологов,
   а психологи в основном женщины). Кабинет и вход в светлой теме «Эволюции»,
   комната сессии и превью камеры в тёмной.
   Размеры шрифта: 13 / 16 / 20 / 26 / 34, других нет.
   Отступы: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64.
   Радиусы два, как в «Эволюции»: 16 у карточек и панелей, 12 у кнопок и полей.
   Кнопки звонка и значки круглые по форме, это не третий радиус.
   Гарнитура одна: Manrope 400–800, лежит у нас (static/shrift), с Google не грузится. */

@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/static/shrift/manrope-kirillica.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/static/shrift/manrope-latinica.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* светлая тема «Эволюции» */
  --fon: #efe7da;
  --karta: #fbf6ee;
  --karta-2: #f6efe2;
  --liniya: #e0d3c0;
  --tekst: #251c14;
  --tiho: #5c4c3b;
  --akcent: #8a5a2b;
  --akcent-tyomnyj: #74491f;
  --na-akcente: #ffffff;
  --akcent-myagkij: rgba(138, 90, 43, .12);
  --ten: 0 1px 2px rgba(30, 20, 10, .07), 0 8px 24px rgba(30, 20, 10, .08);
  /* тёмная тема «Эволюции»: комната сессии */
  --komnata: #12161c;
  --plitka: #191f27;
  --knopka-tyomnaya: #2a323d;
  --zelyonyj: #3fb56b;
  --krasnyj: #e0453a;
  --r: 16px;
  --r-mal: 12px;
  --shrift: Manrope, "Helvetica Neue", Arial, sans-serif;
}

/* Комната сессии и превью камеры: те же имена переменных с тёмными значениями
   «Эволюции», поэтому панели и кнопки внутри перекрашиваются сами. */
.komnata, .karta .pravo {
  --fon: #12161c;
  --karta: #191f27;
  --karta-2: #1f262f;
  --liniya: #2a323d;
  --tekst: #eef2f6;
  --tiho: #9aa7b6;
  --akcent: #e0a33c;
  --akcent-tyomnyj: #c98d2c;
  --na-akcente: #1a1206;
  --akcent-myagkij: rgba(224, 163, 60, .13);
  --ten: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fon);
  color: var(--tekst);
  font: 16px/1.5 var(--shrift);
  -webkit-font-smoothing: antialiased;
}
h1, h2 { text-wrap: balance; margin: 0; font-weight: 500; }
p { text-wrap: pretty; margin: 0; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- шапка кабинета ---------- */
.shapka {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--liniya); background: var(--karta);
}
.logo { display: inline-flex; text-decoration: none; }
.logo img { height: 26px; display: block; }
.shapka-sprava { display: flex; gap: 12px; align-items: center; }
.shapka.prozrachnaya { background: transparent; border-bottom: 0; }
.ios-podskazka { margin: 12px 16px 0; padding: 12px 16px; border-radius: var(--r); background: var(--karta); border: 1px solid var(--liniya); font-size: 13px; color: var(--tekst); }
.ssylka-tiho { background: none; border: 0; color: var(--tiho); font-size: 13px; padding: 8px; }
.ssylka-tiho:hover { color: var(--tekst); }

/* ---------- центральная карточка ---------- */
.scena { min-height: calc(100% - 65px); display: grid; place-items: center; padding: 32px 16px; }
.scena.na-ves { min-height: 100%; }
.karta {
  background: var(--karta); border: 1px solid var(--liniya); border-radius: var(--r);
  width: 100%; max-width: 880px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
  box-shadow: var(--ten);
}
.karta.uzkaya { max-width: 400px; grid-template-columns: 1fr; }
.karta .levo { padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.karta .pravo { background: var(--komnata); position: relative; min-height: 320px; }
@media (max-width: 720px) {
  .karta { grid-template-columns: 1fr; }
  .karta .pravo { min-height: 240px; order: -1; }
  .karta .levo { padding: 24px; }
}

.psiholog { display: flex; align-items: center; gap: 12px; }
.portret {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: var(--akcent-myagkij); color: var(--akcent);
  display: grid; place-items: center; font: 700 16px/1 var(--shrift);
}
.psiholog .imya { font: 700 20px/1.25 var(--shrift); }
.psiholog .podpis { font-size: 13px; color: var(--tiho); }

.zagolovok { font: 700 26px/1.25 var(--shrift); letter-spacing: -.01em; }
.poyasnenie { color: var(--tiho); font-size: 16px; }

label.pole { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--tiho); }
input[type=text], input[type=password] {
  font: 16px/1.5 var(--shrift); color: var(--tekst);
  padding: 12px 16px; border: 1px solid var(--liniya); border-radius: var(--r-mal); background: var(--karta-2);
}
input:focus { outline: 2px solid var(--akcent); outline-offset: -1px; border-color: transparent; }

.galochka { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--tiho); }
.galochka input { width: 20px; height: 20px; margin: 0; accent-color: var(--akcent); flex: none; }

.knopka {
  border: 0; border-radius: var(--r-mal); padding: 12px 24px; min-height: 48px;
  background: var(--akcent); color: var(--na-akcente); font-weight: 700;
}
.knopka:hover { background: var(--akcent-tyomnyj); }
.knopka:disabled { opacity: .5; cursor: default; }
.knopka.vtorichnaya { background: transparent; color: var(--akcent); border: 1px solid var(--liniya); }
.knopka.malaya { min-height: 36px; padding: 8px 16px; font-size: 13px; }

.oshibka { color: var(--krasnyj); font-size: 13px; min-height: 20px; }

/* ссылка на комнату ожидания в кабинете */
.ssylka-komnaty {
  display: flex; gap: 8px; align-items: center;
  border: 1px solid var(--liniya); border-radius: var(--r-mal); padding: 4px 4px 4px 16px;
  font-size: 13px; color: var(--tiho);
}
.ssylka-komnaty code { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 13px/1.5 var(--shrift); color: var(--tekst); }

/* список ожидающих */
.ozhidayut { display: flex; flex-direction: column; border-top: 1px solid var(--liniya); }
.ozhidayut .stroka {
  display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--liniya);
}
.ozhidayut .stroka .kto { flex: 1; }
.ozhidayut .stroka .skolko { font-size: 13px; color: var(--tiho); }
.ozhidayut .pusto { padding: 16px 0; color: var(--tiho); font-size: 13px; }
.nadpis { font-size: 13px; font-weight: 600; color: var(--tiho); text-transform: uppercase; letter-spacing: .1em; }

/* ---------- превью камеры до сессии ---------- */
.prevyu { position: absolute; inset: 0; }
.prevyu video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.prevyu .zaglushka {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  color: var(--tiho); font-size: 13px; padding: 24px;
}
.prevyu .knopki { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 12px; }

/* ---------- комната сессии ---------- */
.komnata {
  position: fixed; inset: 0; background: var(--komnata); color: var(--tekst);
  display: grid; grid-template-rows: 1fr auto;
}
.komnata .plitki {
  position: relative; padding: 16px; display: grid; gap: 12px;
  grid-template-columns: 1fr; grid-auto-rows: 1fr; min-height: 0;
}
.komnata .plitki[data-n="2"] { grid-template-columns: 1fr 1fr; }
.komnata .plitki[data-n="3"], .komnata .plitki[data-n="4"] { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) {
  .komnata .plitki[data-n="2"] { grid-template-columns: 1fr; }
}
.plitka {
  position: relative; background: var(--plitka); border-radius: var(--r); overflow: hidden; min-height: 0;
}
.plitka video { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--plitka); }
/* Кадр собеседника: если форма кадра совпадает с окном, заполняем окно.
   Не совпадает (телефон стоймя на ноутбуке) — кадр целиком на размытой
   подложке из того же видео (02.10.2026: раньше кадр растягивался в 3,7 раза). */
.plitka video.osnovnoe { position: relative; z-index: 1; object-fit: cover; }
.plitka.celikom video.osnovnoe { object-fit: contain; background: transparent; }
.plitka video.podlozhka { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(28px) brightness(.55); transform: scale(1.15); display: none; }
.plitka.celikom video.podlozhka { display: block; }
.plitka .tablichka, .plitka .slaboe { z-index: 2; }
.plitka .bez-video {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.plitka .bez-video .portret { width: 96px; height: 96px; font-size: 26px; background: var(--akcent-myagkij); color: var(--akcent); }
.plitka .tablichka {
  position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px;
  background: rgba(18, 22, 28, .72); padding: 4px 12px 4px 8px; border-radius: var(--r-mal); font-size: 13px;
}
.plitka .slaboe {
  position: absolute; left: 12px; top: 12px; font-size: 13px;
  background: rgba(18, 22, 28, .72); padding: 4px 12px; border-radius: var(--r-mal); color: var(--akcent);
}

/* индикатор голоса: три полоски, растут, когда человек говорит */
.golos { display: inline-flex; gap: 2px; align-items: center; height: 16px; width: 16px; justify-content: center; }
.golos i { display: block; width: 3px; height: 4px; border-radius: 2px; background: var(--zelyonyj); transition: height .12s; }
.govorit .golos i:nth-child(1) { height: 8px; }
.govorit .golos i:nth-child(2) { height: 14px; }
.govorit .golos i:nth-child(3) { height: 8px; }
.golos.vyklyuchen i { background: var(--tiho); }

/* своё окошко в углу */
.svoyo {
  position: absolute; right: 24px; top: 24px; width: 200px; aspect-ratio: 4 / 3;
  border-radius: var(--r); overflow: hidden; background: var(--plitka);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35); z-index: 2;
}
.svoyo video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.svoyo .tablichka { left: 8px; bottom: 8px; }
@media (max-width: 720px) { .svoyo { width: 112px; right: 16px; top: 16px; } }

/* нижняя панель */
.panel {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 12px 24px 24px;
}
.panel .slevo { display: flex; gap: 12px; align-items: center; }
.panel .seredina { display: flex; gap: 12px; }
.panel .sprava { display: flex; justify-content: flex-end; font-size: 13px; color: var(--tiho); font-variant-numeric: tabular-nums; }
.kruglaya {
  position: relative; width: 52px; height: 52px; border-radius: 50%; border: 0;
  background: var(--knopka-tyomnaya); color: var(--tekst); display: grid; place-items: center;
}
.kruglaya:hover { background: #343d4a; }
.kruglaya svg { width: 22px; height: 22px; }
.kruglaya.vykl { background: var(--tekst); color: var(--komnata); }
.kruglaya.krasnaya { background: var(--krasnyj); color: #fff; }
.kruglaya.krasnaya:hover { background: #c7382e; }
.kruglaya .schyotchik {
  position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; border-radius: 10px;
  background: var(--akcent); color: var(--na-akcente); font-size: 13px; font-weight: 700; line-height: 20px; padding: 0 4px;
}
.prevyu .kruglaya { width: 44px; height: 44px; }
@media (max-width: 720px) {
  .panel { grid-template-columns: 1fr; justify-items: center; padding: 12px 16px 24px; }
  .panel .slevo, .panel .sprava { display: none; }
  .panel .slevo.est-ozhidayushchie { display: flex; }
}

/* выезжающая панель «Комната ожидания» во время сессии */
.vyezd {
  position: absolute; left: 16px; bottom: 96px; width: 320px; max-height: 60%;
  background: var(--karta); color: var(--tekst); border: 1px solid var(--liniya); border-radius: var(--r); padding: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4); z-index: 3; overflow: auto;
}
.vyezd h2 { font-size: 16px; margin-bottom: 8px; }

/* сообщение поверх комнаты: связь, конец сессии */
.soobshchenie {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 4;
  background: rgba(18, 22, 28, .84); text-align: center; padding: 24px;
}
.soobshchenie .tekst { font: 700 26px/1.3 var(--shrift); max-width: 480px; }
.soobshchenie .tiho { color: var(--tiho); margin-top: 12px; font-size: 16px; }


/* ---------- окошко с собой: перетаскивается, встаёт в угол ---------- */
.komnata[data-raskladka="okno"] .svoyo { cursor: grab; touch-action: none; user-select: none; }
.komnata[data-raskladka="okno"] .svoyo.tashchu { cursor: grabbing; opacity: .9; box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.komnata[data-raskladka="okno"] .svoyo[data-ugol="pv"] { right: 24px; top: 24px; left: auto; bottom: auto; }
.komnata[data-raskladka="okno"] .svoyo[data-ugol="lv"] { left: 24px; top: 24px; right: auto; bottom: auto; }
.komnata[data-raskladka="okno"] .svoyo[data-ugol="pn"] { right: 24px; bottom: 24px; left: auto; top: auto; }
.komnata[data-raskladka="okno"] .svoyo[data-ugol="ln"] { left: 24px; bottom: 24px; right: auto; top: auto; }
@media (max-width: 720px) {
  .komnata[data-raskladka="okno"] .svoyo[data-ugol="pv"] { right: 16px; top: 16px; }
  .komnata[data-raskladka="okno"] .svoyo[data-ugol="lv"] { left: 16px; top: 16px; }
  .komnata[data-raskladka="okno"] .svoyo[data-ugol="pn"] { right: 16px; bottom: 16px; }
  .komnata[data-raskladka="okno"] .svoyo[data-ugol="ln"] { left: 16px; bottom: 16px; }
}
.svoyo video { position: relative; z-index: 1; }

/* ---------- деление экрана: я и собеседник равными половинами ---------- */
.komnata[data-raskladka="verh-niz"] .plitki { grid-template-columns: 1fr !important; grid-auto-rows: 1fr; }
.komnata[data-raskladka="sleva-sprava"] .plitki { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-rows: 1fr; }
.komnata[data-raskladka="verh-niz"] .svoyo, .komnata[data-raskladka="sleva-sprava"] .svoyo {
  position: relative; inset: auto; width: auto; aspect-ratio: auto !important; box-shadow: none; z-index: auto; order: 99; }
.komnata[data-raskladka="verh-niz"] .svoyo .tablichka, .komnata[data-raskladka="sleva-sprava"] .svoyo .tablichka { left: 12px; bottom: 12px; }

/* ---------- меню раскладки и панель эффектов ---------- */
.vyezd.menyu-raskladki, .vyezd.panel-nastroek { left: 50%; transform: translateX(-50%); bottom: 104px; width: 300px; max-width: calc(100% - 32px); z-index: 5; }
.menyu-raskladki .punkt { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 12px; border-radius: var(--r-mal); font-size: 16px; color: var(--tekst); }
.menyu-raskladki .punkt:hover { background: var(--fon); }
.menyu-raskladki .punkt.tut { background: var(--akcent-myagkij); color: var(--akcent); }
/* ---------- панель настроек: до входа и в сессии ---------- */
.panel-nastroek { display: flex; flex-direction: column; gap: 16px; background: var(--karta); color: var(--tekst);
  border-radius: var(--r); padding: 16px; max-height: calc(100vh - 140px); overflow: auto; }
.panel-nastroek h2 { font-size: 16px; font-weight: 700; margin: 0; }
.panel-nastroek .razdel { display: flex; flex-direction: column; gap: 8px; }
.panel-nastroek .pole-vybora { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--tiho); }
.panel-nastroek select { font: 16px/1.5 var(--shrift); color: var(--tekst); background: var(--karta-2); border: 1px solid var(--liniya);
  border-radius: var(--r-mal); padding: 8px 12px; width: 100%; }
/* шкала уровня микрофона: 20 сегментов, последние три красные (слишком громко) */
.panel-nastroek .shkala { display: flex; gap: 3px; height: 16px; }
.panel-nastroek .shkala i { flex: 1; border-radius: 2px; background: var(--liniya); transition: background .06s; }
.panel-nastroek .shkala i.gorit { background: var(--zelyonyj); }
.panel-nastroek .shkala i.gorit.gromko { background: var(--krasnyj); }
.panel-nastroek .shkala-podpis { font-size: 13px; color: var(--tiho); min-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-nastroek .gotovo { align-self: stretch; }
.panel-nastroek .razdel > .knopka { align-self: flex-start; }
.panel-nastroek .vopros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--tekst);
  background: var(--fon); border-radius: var(--r-mal); padding: 8px 12px; }
.panel-nastroek .vopros span { flex: 1 1 100%; }
.panel-nastroek .polzunok { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 16px; }
.panel-nastroek .polzunok input { width: 100%; accent-color: var(--akcent); }
.panel-nastroek .znach { color: var(--tiho); font-variant-numeric: tabular-nums; }
.panel-nastroek .galochka { font-size: 16px; color: var(--tekst); }
.panel-nastroek .podskazka { font-size: 13px; color: var(--tiho); }
/* До входа панель встаёт на место левой колонки карточки, превью справа
   остаётся целиком: 02.10.2026 панель лежала поверх видео и закрывала лицо.
   На телефоне карточка в одну колонку: превью сверху, панель под ним. */
.karta.nastrojki-otkryty > .levo { display: none; }
.karta.nastrojki-otkryty > .pravo { grid-column: 2; grid-row: 1; }
/* высота панели не больше прежней карточки: иначе превью вытягивается в узкую полосу */
.karta .panel-nastroek.v-karte { grid-column: 1; grid-row: 1; padding: 32px; border-radius: 0;
  max-height: min(600px, calc(100vh - 140px)); overflow: auto; }
@media (max-width: 720px) {
  .karta.nastrojki-otkryty > .pravo, .karta .panel-nastroek.v-karte { grid-column: auto; grid-row: auto; }
  .karta .panel-nastroek.v-karte { padding: 24px; max-height: none; overflow: visible; }
}
/* запасной случай без карточки: панель поверх превью справа */
.panel-nastroek.v-prevyu { position: absolute; top: 12px; right: 12px; bottom: 72px; width: 300px; z-index: 3;
  max-height: none; box-shadow: 0 12px 32px rgba(0,0,0,.35); }
@media (max-width: 720px) {
  .panel-nastroek.v-prevyu { position: fixed; top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; max-height: 75vh; z-index: 20; }
}
.kruglaya.aktivna { background: var(--akcent); color: var(--na-akcente); }

/* окошко с собой выше подписей собеседника, когда стоит в нижнем углу */
.komnata[data-raskladka="okno"] .svoyo { z-index: 3; }

/* В сессии панель настроек у края, а не посередине, и с той стороны, где
   нет своего окошка: лицо видно, пока двигаешь «Улучшение лица». */
.komnata .vyezd.panel-nastroek { left: 16px; transform: none; }
.komnata[data-raskladka="okno"]:has(.svoyo[data-ugol^="l"]) .vyezd.panel-nastroek { left: auto; right: 16px; }
@media (max-width: 720px) {
  .komnata .vyezd.panel-nastroek, .komnata[data-raskladka="okno"]:has(.svoyo[data-ugol^="l"]) .vyezd.panel-nastroek {
    left: 16px; right: 16px; width: auto; max-width: none; max-height: calc(100vh - 236px); }
}