@font-face{
font-family:"Alegreya";
font-style:italic;
font-weight:400 900;
font-display:swap;
src:url("/fonts/alegreya/alegreya-italic-cyrillic-ext.woff2") format("woff2");
unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face{
font-family:"Alegreya";
font-style:italic;
font-weight:400 900;
font-display:swap;
src:url("/fonts/alegreya/alegreya-italic-cyrillic.woff2") format("woff2");
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
font-family:"Alegreya";
font-style:italic;
font-weight:400 900;
font-display:swap;
src:url("/fonts/alegreya/alegreya-italic-greek-ext.woff2") format("woff2");
unicode-range:U+1F00-1FFF;
}
@font-face{
font-family:"Alegreya";
font-style:italic;
font-weight:400 900;
font-display:swap;
src:url("/fonts/alegreya/alegreya-italic-greek.woff2") format("woff2");
unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face{
font-family:"Alegreya";
font-style:italic;
font-weight:400 900;
font-display:swap;
src:url("/fonts/alegreya/alegreya-italic-vietnamese.woff2") format("woff2");
unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face{
font-family:"Alegreya";
font-style:italic;
font-weight:400 900;
font-display:swap;
src:url("/fonts/alegreya/alegreya-italic-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:"Alegreya";
font-style:italic;
font-weight:400 900;
font-display:swap;
src:url("/fonts/alegreya/alegreya-italic-latin.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;
}
@font-face{
font-family:"Alegreya";
font-style:normal;
font-weight:400 900;
font-display:swap;
src:url("/fonts/alegreya/alegreya-normal-cyrillic-ext.woff2") format("woff2");
unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face{
font-family:"Alegreya";
font-style:normal;
font-weight:400 900;
font-display:swap;
src:url("/fonts/alegreya/alegreya-normal-cyrillic.woff2") format("woff2");
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
font-family:"Alegreya";
font-style:normal;
font-weight:400 900;
font-display:swap;
src:url("/fonts/alegreya/alegreya-normal-greek-ext.woff2") format("woff2");
unicode-range:U+1F00-1FFF;
}
@font-face{
font-family:"Alegreya";
font-style:normal;
font-weight:400 900;
font-display:swap;
src:url("/fonts/alegreya/alegreya-normal-greek.woff2") format("woff2");
unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face{
font-family:"Alegreya";
font-style:normal;
font-weight:400 900;
font-display:swap;
src:url("/fonts/alegreya/alegreya-normal-vietnamese.woff2") format("woff2");
unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face{
font-family:"Alegreya";
font-style:normal;
font-weight:400 900;
font-display:swap;
src:url("/fonts/alegreya/alegreya-normal-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:"Alegreya";
font-style:normal;
font-weight:400 900;
font-display:swap;
src:url("/fonts/alegreya/alegreya-normal-latin.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{
--site-font:"Alegreya",serif;
--bg:#0a0e13;--card:#141a22;--line:#1f2937;--text:#f3f4f6;--muted:#9ca3af;--accent:#2563eb;--accent-hover:#1d4ed8;--bubble:#1a1f2e;--success:#10b981;--danger:#ef4444; color-scheme: dark;
--shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.3);
--shadow-lg:0 20px 25px -5px rgb(0 0 0 / 0.6);
--radius-sm:8px;--radius-md:12px;--radius-lg:16px;
--transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

html{ background:var(--bg); }

/* базовое */
*{box-sizing:border-box}

/* вместо 100vh — динамические юниты, чтобы не было «пустоты» на мобилках */
html,body{height:auto; min-height:100dvh;}

@supports (height:100svh){
html,body{min-height:100svh;}
}

body{
margin:0;
font-family:var(--site-font);
font-size:16px;
line-height:1.6;
color:var(--text);
background:linear-gradient(180deg,#0f1419,#0a0e13 60%);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

.hidden{display:none}

.card{max-width:920px;margin:40px auto;padding:24px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow-lg);transition:var(--transition)}

.hint{color:var(--muted);font-size:.9rem}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.hstack{display:flex;gap:8px;align-items:center}

input,textarea{
width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(15,20,31,0.6);color:var(--text);transition:var(--transition);font-size:15px;line-height:1.5
}

input:focus,textarea:focus{
outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,0.1);background:rgba(15,20,31,0.8)
}

textarea{resize:none}

button,
input,
textarea,
select{
font-family:var(--site-font);
}

button{padding:11px 18px;border:none;border-radius:var(--radius-md);background:var(--accent);color:#fff;cursor:pointer;font-weight:600;transition:var(--transition);font-size:15px}

button:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}

button:active{transform:translateY(0)}

button.ghost{background:rgba(31,41,55,0.5);border:1px solid var(--line)}

button.ghost:hover{background:rgba(31,41,55,0.8);border-color:var(--accent)}

/* --- десктоп по умолчанию: мобильные элементы скрыты --- */
.mobile-only{display:none !important}

/* === общие фиксы для мессенджера (не ломают десктоп) === */
main.chat{display:flex;flex-direction:column;min-height:inherit;}

.messages{flex:1 1 auto;min-height:0;overflow:auto;}

/* нижняя панель не уезжает под жестовую/вырез; на десктопе inset=0 */
.composer{position:sticky;bottom:0;padding-bottom:calc(env(safe-area-inset-bottom,0px));}

.chat-actions{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;}

.chat-actions>.btn-icon{flex:0 0 auto}

/* === модалка «Активные сессии» — вынесена глобально, чтобы быть видимой на телефоне === */
#sessions_container{
position:fixed; inset:0; z-index:10000; display:none;
padding:16px; overflow:auto;
}

#sessions_container:not(.hidden){display:block}

#sessions_container::before{
content:""; position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(8px);
}

#sessions_container .sheet{
position:relative; z-index:1;
margin:clamp(12px,8dvh,32px) auto;
width:min(960px,92vw); border-radius:var(--radius-lg); background:rgba(20,26,34,0.98);
max-height:calc(100dvh - 2*clamp(12px,8dvh,32px));
overflow:auto; padding:24px; box-shadow:0 25px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(37,99,235,0.1) inset;
}

@supports (height:100svh){
#sessions_container .sheet{
margin:clamp(12px,8svh,32px) auto;
max-height:calc(100svh - 2*clamp(12px,8svh,32px));
}
}

/* === только телефоны === */
@media (max-width:768px){
.sidebar{display:none}
.mobile-only{display:inline-flex !important}

.chat-header{
display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
}

.chat-header .peer{min-width:0; overflow:hidden}
.peer-name, .peer-phone{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

#mobile_dialog_picker{position:fixed; inset:0; z-index:9999; display:none}
#mobile_dialog_picker.open{display:block}
#mobile_dialog_picker .overlay{position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px)}

#mobile_dialog_picker .sheet{
position:absolute; left:0; right:0; bottom:0;
max-height:80vh; overflow:auto;
background:rgba(20,26,34,0.98);
border-top-left-radius:var(--radius-lg); border-top-right-radius:var(--radius-lg);
box-shadow:0 -12px 40px rgba(0,0,0,.6);
padding:20px;
}

#mobile_dialog_picker header{
display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line);
}

#mobile_dialog_picker .section{margin:16px 0 8px; color:var(--muted); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em}

#mobile_dialog_picker .item{padding:14px 12px; border-bottom:1px solid rgba(31,41,55,0.5); cursor:pointer; transition:var(--transition); border-radius:var(--radius-sm)}

#mobile_dialog_picker .item:hover{background:rgba(37,99,235,.08)}

#mobile_dialog_picker .item .title{font-weight:600; font-size:15px}

#mobile_dialog_picker .item .sub{color:var(--muted); font-size:13px; margin-top:2px}
}

/* === фикс «пустоты снизу» и двойной прокрутки на телефонах === */
#messenger{min-height:100dvh;}

@supports (height:100svh){
#messenger{min-height:100svh;}
}

/* тело страницы не скроллится на мобилках — скролл только в .messages */
@media (max-width:768px){
main.chat{min-height:inherit;}
.messages{flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain;}
}

/* подстраховка от «подпрыгивания» при появлении клавиатуры/адресной строки */
html,body{overflow-x:hidden;}

@supports (-webkit-touch-callout: none) {
html, body, #messenger { min-height: -webkit-fill-available; }
}

@media (max-width: 900px) {
  /* Прячем сайдбар на мобильных устройствах */
  .sidebar {
    display: none !important;
  }

  /* Предотвращаем горизонтальную прокрутку всей страницы */
  html, body {
    overflow-x: hidden;
  }
}


@view-transition{navigation:auto}

::view-transition-old(root){
animation:sn-page-old .22s cubic-bezier(.22,.8,.2,1) both;
}

::view-transition-new(root){
animation:sn-page-new .34s cubic-bezier(.16,1,.3,1) both;
}

body{
opacity:1;
transition:
opacity .28s cubic-bezier(.22,.8,.2,1),
filter .28s cubic-bezier(.22,.8,.2,1),
transform .28s cubic-bezier(.22,.8,.2,1);
}

html.page-loading body{
opacity:0;
filter:blur(8px);
transform:translateY(10px) scale(.996);
}

html.page-ready body{
opacity:1;
filter:blur(0);
transform:none;
}

@media (prefers-reduced-motion:reduce){
@view-transition{navigation:none}
::view-transition-old(root),::view-transition-new(root){animation:none}
body{transition:none}
html.page-loading body,
html.page-ready body{
opacity:1;
filter:none;
transform:none;
}
}

@keyframes sn-page-old{
from{opacity:1;filter:blur(0);transform:scale(1)}
to{opacity:.2;filter:blur(8px);transform:scale(.992)}
}

@keyframes sn-page-new{
from{opacity:0;filter:blur(8px);transform:translateY(10px) scale(.996)}
to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}
}