/* Нейросети на весь экран (/chat). Цвета и шрифты — те же, что в кабинете
   (app.css), но страница своя: без нижнего меню и лендинговой шапки.
   Тёмная тема — по системе, в тех же фирменных цветах. */
:root{
  --lime:#A8FB05;
  --lime-2:#C4FF4A;
  --lime-deep:#7ED100;
  --lime-soft:#F1FFD6;
  --lime-glow:rgba(168,251,5,.45);
  --ink:#0B0B0E;
  --text:#2A2B2E;
  --gray:#5E6166;
  --gray-2:#8B8E93;
  --line:#E7E8E6;
  --line-2:#DADCD8;
  --bg:#FBFBFB;
  --surface:#fff;
  --plate:#F3F5F4;
  --hover:rgba(11,11,14,.05);
  --me:#E6FDB4;
  --red:#E5484D;
  --red-soft:#FDECEC;
  --btn:#0B0B0E;
  --btn-fg:#fff;
  --code:#16181D;
  --tile:#0B0B0E;
  --shadow:0 12px 40px rgba(11,11,14,.12);
  --shadow-sm:0 2px 10px rgba(11,11,14,.06);
  --display:"Russo One","Arial Black",sans-serif;
  --font:"Exo 2","Segoe UI",Arial,sans-serif;
  --pixel:"Handjet","Pixelify Sans","Courier New",monospace;
  --mono:ui-monospace,"Cascadia Code","JetBrains Mono",Consolas,"Liberation Mono",monospace;
  --side:284px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
/* тёмная — по системе, а в Telegram — по теме самого Telegram (класс tg-dark
   ставит platform.js): у человека может быть светлая система и тёмный Telegram */
@media (prefers-color-scheme: dark){
  :root:not(.tg){
    --lime-soft:rgba(168,251,5,.12);
    --ink:#F2F3F4;
    --text:#D9DBDE;
    --gray:#A3A7AD;
    --gray-2:#7C8189;
    --line:#262930;
    --line-2:#33373F;
    --bg:#0E0F12;
    --surface:#15171B;
    --plate:#1C1F24;
    --hover:rgba(255,255,255,.06);
    --me:#243312;
    --red-soft:#3A1F1E;
    --btn:#A8FB05;
    --btn-fg:#0B0B0E;
    --code:#0A0B0D;
    --tile:#23272E;
    --shadow:0 16px 48px rgba(0,0,0,.5);
    --shadow-sm:0 2px 10px rgba(0,0,0,.3);
    color-scheme:dark;
  }
}
html.tg-dark{
  --lime-soft:rgba(168,251,5,.12);
  --ink:#F2F3F4;
  --text:#D9DBDE;
  --gray:#A3A7AD;
  --gray-2:#7C8189;
  --line:#262930;
  --line-2:#33373F;
  --bg:#0E0F12;
  --surface:#15171B;
  --plate:#1C1F24;
  --hover:rgba(255,255,255,.06);
  --me:#243312;
  --red-soft:#3A1F1E;
  --btn:#A8FB05;
  --btn-fg:#0B0B0E;
  --code:#0A0B0D;
  --tile:#23272E;
  --shadow:0 16px 48px rgba(0,0,0,.5);
  --shadow-sm:0 2px 10px rgba(0,0,0,.3);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);color:var(--ink);overflow:hidden;
  font-family:var(--font);font-weight:500;font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}

/* iOS приближает страницу, если поле ввода мельче 16px, и после фокуса масштаб
   уже не возвращает. На сенсорных экранах поля не мельче 16px, а двойной тап
   по кнопкам не зумит. :where — чтобы свой touch-action у классов перебивал это */
html{touch-action:manipulation}
:where(a,button,input,textarea,select,label,summary,[role=button]){touch-action:manipulation}
@media (hover:none),(pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select{font-size:16px !important}
}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.hidden{display:none !important}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.i.sm{width:16px;height:16px}
.mlogo{width:1em;height:1em;flex:none;fill:currentColor}
:focus-visible{outline:2px solid var(--lime-deep);outline-offset:2px}
::selection{background:var(--lime);color:#0B0B0E}
.cp-noscript{padding:40px;text-align:center}

/* ================= каркас ================= */
.cp{display:flex;height:100vh;height:100dvh;overflow:hidden}
.cp-main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.cp-view{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}

.cp-side{
  width:var(--side);flex:none;display:flex;flex-direction:column;
  background:var(--surface);border-right:1px solid var(--line);
  transition:margin-left .28s var(--ease),transform .28s var(--ease);
}
.cp.side-off .cp-side{margin-left:calc(-1 * var(--side))}
.cp-shade{position:fixed;inset:0;z-index:60;background:rgba(11,11,14,.45);animation:fade .2s ease-out}
.cp-shade[hidden]{display:none}

/* ================= верхняя панель ================= */
.cp-top{
  flex:none;height:62px;display:flex;align-items:center;gap:8px;padding:0 14px;
  border-bottom:1px solid var(--line);background:var(--bg);position:relative;z-index:20;
}
.cp-logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);flex:none;margin-right:6px}
.cp-logo img{width:32px;height:32px;border-radius:50%;box-shadow:0 0 0 2px var(--lime)}
.cp-logo span{font-family:var(--display);font-size:17px;letter-spacing:.03em;background:var(--lime);color:#0B0B0E;padding:1px 9px 2px;border-radius:9px;box-shadow:0 0 14px var(--lime-glow)}
.ibtn{
  width:40px;height:40px;flex:none;border:0;border-radius:12px;background:transparent;color:var(--gray);
  display:grid;place-items:center;transition:background .15s,color .15s;
}
.ibtn:hover{background:var(--hover);color:var(--ink)}
.ibtn.on{color:var(--ink)}
.flex1{flex:1;min-width:0}
/* кнопка модели по содержимому и по центру шапки: стрелка сразу за текстом,
   без пустого хвоста справа */
.mslot{flex:1;min-width:0;display:flex;justify-content:center}
.top-r{display:flex;align-items:center;gap:8px;flex:none}

.cp-back{height:40px;padding:0 12px 0 6px;border-radius:12px;font-weight:700;font-size:14px;gap:4px}
.cp-back:hover{background:var(--hover)}
.cp-back span{all:unset}

/* одна кнопка «режим · модель»: знак, название, цена */
.mbtn{
  display:flex;align-items:center;gap:10px;height:46px;flex:0 1 auto;max-width:min(330px,100%);min-width:0;padding:0 10px 0 6px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);text-align:left;
  transition:border-color .15s,box-shadow .15s;
}
.mbtn:hover,.mbtn[aria-expanded="true"]{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.mbtn .t{min-width:0;display:flex;flex-direction:column;line-height:1.15}
.mbtn b{font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbtn small{font-size:12px;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.mbtn > .i{color:var(--gray-2);width:16px;height:16px;transition:transform .2s var(--ease)}
.mbtn[aria-expanded="true"] > .i{transform:rotate(180deg)}
.sw-mode{color:var(--gray)}
.mtile{
  width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--tile);color:var(--lime);font-size:19px;
}
.mtile.soft{background:var(--plate);color:var(--ink)}

.bal{
  display:flex;align-items:center;gap:6px;height:40px;padding:0 12px 0 6px;flex:none;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  font-weight:700;font-size:13.5px;color:var(--ink);text-decoration:none;white-space:nowrap;
}
.bal i{width:26px;height:26px;border-radius:50%;background:var(--lime);display:grid;place-items:center;color:#0B0B0E;font-style:normal}
.bal i .i{width:15px;height:15px}
.bal:hover{box-shadow:var(--shadow-sm)}
.av{
  width:40px;height:40px;flex:none;border-radius:50%;border:0;padding:0;overflow:hidden;
  background:var(--lime);color:#0B0B0E;font-weight:800;font-size:15px;display:grid;place-items:center;
  box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--line-2);
}
.av img{width:100%;height:100%;object-fit:cover}
.login-btn{height:40px;padding:0 18px}

/* ================= кнопки и поля ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 20px;border:0;border-radius:999px;
  font-weight:700;font-size:15px;white-space:nowrap;text-decoration:none;
  background:var(--btn);color:var(--btn-fg);
  box-shadow:0 0 0 1px rgba(168,251,5,.25),0 4px 18px rgba(168,251,5,.35);
  transition:transform .12s,box-shadow .15s,opacity .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn-lime{background:linear-gradient(180deg,#C8FF3C 0%,#A4F700 100%);color:#0B0B0E}
.btn-ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn-ghost:hover{border-color:var(--line-2)}
.btn-sm{height:36px;padding:0 14px;font-size:13.5px}
/* на телефоне основная и вторичная — 48, маленькая — 44 */
@media (pointer:coarse){
  .btn{height:48px}
  .btn-sm{height:44px}
}
.btn-full{width:100%}
.btn-danger{background:var(--red);color:#fff;box-shadow:none}
.btn .i{width:18px;height:18px}
.tg-btn{background:#2AABEE;color:#fff;box-shadow:0 4px 16px rgba(42,171,238,.35)}
.inp{
  width:100%;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:14px;
  background:var(--plate);font-size:15px;outline:none;transition:border-color .15s;
}
.inp:focus{border-color:var(--lime-deep)}
.inp::placeholder,textarea::placeholder{color:var(--gray-2)}
.lbl{display:block;font-size:12.5px;font-weight:600;color:var(--gray);margin:0 0 6px 4px}
.muted{color:var(--gray)}
.note{font-size:12.5px;color:var(--gray-2)}
.center{text-align:center}
.msg-err{color:var(--red);font-size:13px;font-weight:600}
.link-btn{border:0;background:none;padding:0;font:inherit;color:var(--gray);text-decoration:underline;cursor:pointer}
.link-btn.center{display:block;margin:0 auto}
.link-more{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:3px;text-underline-offset:5px}
.or{display:flex;align-items:center;gap:10px;color:var(--gray-2);font-size:12.5px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.wait{display:flex;align-items:center;gap:10px;color:var(--gray);font-size:13.5px}
.spin{width:18px;height:18px;flex:none;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--lime-deep);animation:spin .8s linear infinite}
.tg-widget{display:flex;justify-content:center;min-height:40px}
.auth-box{display:flex;flex-direction:column;gap:10px}
.seg{display:flex;gap:4px;padding:4px;background:var(--plate);border-radius:16px}
.seg-i{flex:1;height:38px;border:0;border-radius:12px;background:transparent;color:var(--gray);font-weight:700;font-size:13.5px}
.seg-i.on,.seg-i[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm),inset 0 -2px 0 var(--lime)}
.tag{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:6px;background:var(--tile);color:var(--lime);font-size:10.5px;font-weight:800;letter-spacing:.02em;vertical-align:2px}

/* ================= окна ================= */
.sheet-wrap{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(11,11,14,.5);animation:fade .18s ease-out;backdrop-filter:blur(3px);
}
.sheet{
  width:100%;max-width:460px;max-height:calc(100dvh - 32px);overflow-y:auto;
  background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:26px;
  padding:22px;box-shadow:var(--shadow);animation:pop .22s var(--ease);
}
.sheet > * + *{margin-top:12px}
.sheet h3{font-size:20px;font-weight:800;line-height:1.2}
.sheet p{color:var(--gray);font-size:14.5px}
.sheet .sheet-cat{width:84px;margin:-6px auto 0}
.sheet-row{display:flex;gap:8px;flex-wrap:wrap}
.sheet-row .btn{flex:1}
.sheet.wide{max-width:560px}
.sheet.media{max-width:min(1100px,100%);padding:14px}
.sheet ol{margin:0;padding-left:20px;color:var(--text)}
@media (max-width:599px){
  .sheet-wrap{align-items:flex-end;padding:0}
  .sheet{max-width:none;border-radius:24px 24px 0 0;border-bottom:0;padding:20px 18px calc(22px + env(safe-area-inset-bottom));animation:up .24s var(--ease)}
}
.toast{
  position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));z-index:200;transform:translateX(-50%);
  max-width:calc(100% - 32px);padding:11px 16px;border-radius:14px;background:#0B0B0E;color:#fff;
  font-size:14px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:toast .2s var(--ease);
}
.toast.bad{background:var(--red)}
.hidden-copy{position:fixed;left:-9999px;top:0;opacity:0}

/* вход прямо на странице */
.login-hero{display:flex;align-items:flex-end;gap:10px}
.login-hero .cat{width:86px;flex:none}
.login-hero h3{margin-bottom:6px}
.login-tabs{margin-top:16px}
.legal{margin-top:16px !important}
.legal a{color:var(--gray);text-decoration:underline}
.sheet .auth-box{margin-top:14px}

/* ================= кот ================= */
.cat{position:relative;display:block}
.cat img{width:100%;image-rendering:pixelated}
.cat.two img{animation:frA var(--cat-t,2.4s) steps(1) infinite}
.cat.two img + img{position:absolute;inset:0;opacity:0;animation-name:frB}
.cat.fast{--cat-t:.8s}
.cat.fast img{animation-name:frA2}
.cat.fast img + img{animation-name:frB2}
.say{
  position:relative;display:inline-block;max-width:190px;padding:6px 10px 7px;
  background:#fff;color:#0B0B0E;border:2px solid #0B0B0E;border-radius:12px;
  font-family:var(--pixel);font-weight:700;font-size:17px;line-height:1.05;box-shadow:3px 3px 0 var(--lime);
}

/* ================= история чатов ================= */
.side-head{display:flex;align-items:center;gap:6px;padding:12px 12px 8px}
.side-new{
  flex:1;height:42px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--line);
  border-radius:13px;background:var(--surface);font-weight:700;font-size:14px;color:var(--ink);text-align:left;
  transition:border-color .15s,box-shadow .15s;
}
.side-new:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.side-new kbd{margin-left:auto}
@media (hover:none){.side-new kbd{display:none}}
kbd{font:600 11px var(--font);color:var(--gray-2);border:1px solid var(--line);border-radius:6px;padding:1px 5px;background:var(--plate)}
.side-search{position:relative;margin:4px 12px 6px}
.side-search .i{position:absolute;left:11px;top:50%;margin-top:-8px;color:var(--gray-2)}
.side-search input{width:100%;height:38px;padding:0 12px 0 34px;border:1px solid transparent;border-radius:11px;background:var(--plate);font-size:14px;outline:none}
.side-search input:focus{border-color:var(--lime-deep)}
.side-list{flex:1;min-height:0;overflow-y:auto;padding:4px 8px 12px;scrollbar-width:thin}
.side-grp{padding:14px 10px 6px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-2)}
.side-li{
  position:relative;display:flex;align-items:center;gap:10px;height:40px;padding:0 6px 0 10px;border-radius:11px;
  color:var(--text);text-decoration:none;font-size:14px;transition:background .12s;
}
.side-li:hover,.side-li:focus-within{background:var(--hover)}
.side-li.on{background:var(--lime-soft);color:var(--ink);font-weight:700}
.side-li .mlogo{font-size:15px;color:var(--gray)}
.side-li.on .mlogo{color:var(--ink)}
.side-li .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-li .more{width:30px;height:30px;border-radius:9px;opacity:0}
.side-li:hover .more,.side-li.on .more,.side-li .more:focus-visible,.side-li .more[aria-expanded="true"]{opacity:1}
.side-li input{flex:1;min-width:0;height:30px;border:1px solid var(--lime-deep);border-radius:8px;background:var(--surface);padding:0 8px;font-size:14px;outline:none}
.side-empty{padding:28px 18px;text-align:center;color:var(--gray);font-size:13.5px}
.side-empty .cat{width:72px;margin:0 auto 10px}
.side-empty .btn{margin-top:12px}
.side-foot{padding:10px 12px 12px;border-top:1px solid var(--line)}
.side-card{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--lime-soft);color:var(--ink);text-decoration:none;font-size:13px;line-height:1.3}
.side-card b{display:block;font-size:13.5px}
.side-card .cat{width:40px;flex:none;margin:-4px 0 -6px}
.side-card span{color:var(--gray)}

.menu{
  position:fixed;z-index:90;min-width:210px;padding:6px;border:1px solid var(--line);border-radius:16px;
  background:var(--surface);box-shadow:var(--shadow);animation:pop .16s var(--ease);
}
.menu button,.menu a{
  width:100%;display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border:0;border-radius:10px;
  background:none;color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;text-align:left;
}
.menu button:hover,.menu a:hover,.menu button:focus-visible,.menu a:focus-visible{background:var(--hover);outline:none}
.menu .danger{color:var(--red)}
.menu .i{color:var(--gray)}
.menu .danger .i{color:var(--red)}
.menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.menu-head{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.menu-head b{display:block;font-size:14.5px}
.menu-head span{font-size:12.5px;color:var(--gray)}

/* ================= выбор модели ================= */
/* Высота панели одна на все режимы: при переключении рамка стоит на месте,
   длинный список прокручивается внутри */
.mp{
  position:fixed;z-index:80;width:660px;max-width:calc(100vw - 24px);height:min(620px,calc(100vh - 90px));
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;
  background:var(--surface);box-shadow:var(--shadow);animation:pop .18s var(--ease);overflow:hidden;
}
.mp-head{flex:none;display:flex;align-items:center;gap:6px;padding:10px 10px 10px 12px;border-bottom:1px solid var(--line)}
.mp-head b{flex:1;font-size:15px;font-weight:800;padding-left:4px}
.mp-head .ibtn{width:36px;height:36px}
.mp-stage{position:relative;flex:1;min-height:0}
.mp-body{position:absolute;inset:0;display:flex;flex-direction:column}
.mp-body.out{animation:fadeout .18s ease-out forwards;pointer-events:none;z-index:1}
.mp-body.in{animation:fade .18s ease-out}
.mp-tools{flex:none;display:flex;flex-direction:column;gap:8px;padding:10px 12px 4px}
.mp-search{position:relative;display:block}
.mp-search .i{position:absolute;left:11px;top:50%;margin-top:-8px;color:var(--gray-2)}
.mp-q{width:100%;height:38px;padding:0 12px 0 34px;border:1px solid transparent;border-radius:12px;background:var(--plate);font-size:14px;outline:none}
.mp-q:focus{border-color:var(--lime-deep)}
.mp-recent{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none}
.mp-recent::-webkit-scrollbar{display:none}
.mp-recent > span{flex:none;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gray-2);margin-right:2px}
.mp-chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}
.mp-chip:hover{border-color:var(--line-2)}
.mp-chip .mlogo{font-size:15px}
.mp-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px;scrollbar-width:thin}
.mp-tools + .mp-list{padding-top:2px}
.mp-grp{padding:9px 4px 5px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-2)}
.mp-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
@media (min-width:700px){.mp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mp-row{
  position:relative;display:block;min-width:0;
  padding:8px 9px;border:1px solid var(--line);border-radius:14px;background:var(--surface);text-align:left;color:var(--ink);
  cursor:pointer;transition:background .12s,border-color .12s;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.mp-row:hover,.mp-row:focus-visible{background:var(--hover);outline:none}
.mp-row:focus-visible{border-color:var(--lime-deep)}
.mp-row.on{background:var(--lime-soft);border-color:var(--lime-deep)}
.mp-row .mtile{width:22px;height:22px;font-size:13px;border-radius:7px}
.mp-t{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.mp-t b{display:flex;align-items:center;gap:6px;min-width:0;font-size:14px;font-weight:800;padding-right:18px}
.mp-t b .nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-t b .tag{flex:none}
.mp-s{font-size:12px;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.mp-p{display:flex;align-items:center;gap:6px;margin-top:2px;white-space:nowrap;font-size:12.5px;font-weight:700;color:var(--ink)}
.mp-p.free{color:var(--lime-deep)}
.mp-p .i{width:13px;height:13px}
.mp-rec{display:inline-flex;align-items:center;height:17px;margin-left:auto;padding:0 5px;border-radius:6px;background:var(--lime);color:#0B0B0E;font-size:10px;font-weight:800}
.mp-i{position:absolute;top:5px;right:5px;width:24px;height:24px;border:0;border-radius:8px;background:none;color:var(--gray-2);display:grid;place-items:center;padding:0}
.mp-i:hover{background:var(--hover);color:var(--ink)}
.mp-none{padding:24px 8px;text-align:center;color:var(--gray);font-size:13.5px}
.mp-foot{padding:12px 4px 2px;font-size:12px;color:var(--gray);line-height:1.4}
@media (hover:hover){.mp-hold{display:none}}
@media (hover:none){.mp-i{display:none}.mp-t b{padding-right:0}}
.mp-det{display:flex;align-items:center;gap:12px}
.mp-det .mtile{width:44px;height:44px;font-size:24px;border-radius:13px}
.mp-det h3{margin:0}
.mp-det .muted{font-size:13px}
.mp-det-pr{font-weight:700;color:var(--ink) !important}

/* режимы: один ряд, активный отмечает скользящая подложка. Шрифт и отступы
   у всех вкладок одинаковые — соседи не сдвигаются, меняется только цвет */
.segx{position:relative;flex:1;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:3px;border-radius:14px;background:var(--plate)}
.segx-thumb{
  position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 4);border-radius:11px;
  background:var(--surface);box-shadow:var(--shadow-sm),inset 0 -2px 0 var(--lime);transition:transform .24s var(--ease);
}
.segx-i{
  position:relative;z-index:1;height:36px;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 4px;
  border:0;border-radius:11px;background:none;color:var(--gray);font-weight:700;font-size:13px;white-space:nowrap;transition:color .2s;
}
.segx-i[aria-selected="true"]{color:var(--ink)}
.segx-i .short{display:none}
.segx-i span{overflow:hidden;text-overflow:ellipsis}
@media (max-width:699px){
  .mp{left:0 !important;right:0;top:auto !important;bottom:0;width:auto;max-width:none;height:min(92dvh,780px);border-radius:24px 24px 0 0;border-bottom:0;animation:up .24s var(--ease);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 0 0 100vmax rgba(11,11,14,.4)}
  html.tg .mp{height:min(92vh,calc(var(--tg-viewport-stable-height,100vh) - 24px))}
}
@media (max-width:459px){
  .segx-i .long,.segx-i .i{display:none}
  .segx-i .short{display:inline}
}
@media (max-width:370px){
  .mp-grid{gap:5px}
  .mp-row{padding:7px 7px}
  .mp-t b{font-size:13.5px}
}
.pass-table p{font-size:13.5px;color:var(--gray)}
.pass-table ul{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.pass-table li{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}
.pass-table li span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pass-table li b{font-family:var(--pixel);font-size:18px;line-height:1}
.pass-table .mlogo{font-size:15px;color:var(--gray)}
@media (max-width:420px){.pass-table ul{grid-template-columns:1fr}}

.packs{display:grid;gap:8px}
.pack{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.pack .t{flex:1;min-width:0}
.pack b{display:block;font-size:15px}
.pack span{font-size:12.5px;color:var(--gray)}
.amts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.amt{height:48px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-family:var(--pixel);font-size:22px;font-weight:700}
.amt.on{border:2px solid var(--ink);background:var(--lime-soft)}
.methods{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface);font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.chip:hover{border-color:var(--line-2)}
.chip.on,.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip .i{width:16px;height:16px}
.bal-big{display:flex;align-items:baseline;gap:10px}
/* пополнение только звёздами, а человек в браузере — как это работает */
.pay-tg{margin:12px 0 0;padding:10px 12px;border-radius:14px;background:var(--plate);font-size:13.5px;line-height:1.4}
.pay-tg p{margin:0}
.pay-tg .note{margin-top:6px}
.bal-big b{font-family:var(--pixel);font-size:40px;line-height:1}
.sheet .amts + .lbl{margin-top:14px}
.sheet .methods + .btn{margin-top:16px}

/* ================= лента ================= */
.feed{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;overscroll-behavior:contain}
.feed-in{max-width:800px;margin:0 auto;padding:28px 20px 16px;display:flex;flex-direction:column;gap:22px}
.m-me{align-self:flex-end;max-width:min(80%,620px);display:flex;flex-direction:column;align-items:flex-end;gap:6px;animation:rise .25s var(--ease)}
.m-me .bub{padding:11px 16px;border-radius:20px 20px 6px 20px;background:var(--me);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.5}
.m-me .ph{width:180px;border-radius:14px;border:1px solid var(--line)}
.m-me .ph-mark{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--gray)}
.m-me.fail .bub{background:var(--red-soft)}
.m-fail{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;font-size:13px;color:var(--red);font-weight:600}
.m-fail.stopped{color:var(--gray)}
.m-me.stopped .bub{opacity:.75}
.m-bot{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;animation:rise .25s var(--ease)}
.m-bot > .mtile{width:32px;height:32px;font-size:18px;border-radius:10px;position:sticky;top:8px}
.m-body{min-width:0}
.m-name{font-size:12.5px;font-weight:700;color:var(--gray);margin:5px 0 4px}
.m-acts{display:flex;align-items:center;gap:2px;margin-top:8px;flex-wrap:wrap;opacity:.0;transition:opacity .15s}
.m-bot:hover .m-acts,.m-bot.last .m-acts,.m-acts:focus-within{opacity:1}
.m-acts button{height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 9px;border:0;border-radius:9px;background:none;color:var(--gray);font-size:13px;font-weight:600}
.m-acts button:hover{background:var(--hover);color:var(--ink)}
.m-acts button .i{width:16px;height:16px}
.m-acts .meta{margin-left:6px;font-size:12px;color:var(--gray-2)}
@media (hover:none){.m-acts{opacity:1}}
.m-sep{display:flex;align-items:center;gap:12px;color:var(--gray);font-size:12.5px;font-weight:700}
.m-sep::before,.m-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.m-sep span{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.m-sep .mlogo{font-size:15px;color:var(--ink)}
.m-note{align-self:center;max-width:520px;padding:12px 16px;border-radius:16px;background:var(--plate);color:var(--gray);font-size:13.5px;text-align:center}
.m-note .btn{margin-top:10px}

.typing{display:inline-flex;gap:5px;padding:10px 0}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--gray-2);animation:dot 1.2s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}

/* разметка ответа */
.md{font-size:15.5px;line-height:1.65;color:var(--text);overflow-wrap:anywhere}
.md > *{margin:0}
.md > * + *{margin-top:12px}
.md h3,.md h4,.md h5,.md h6,.md h7,.md h8{color:var(--ink);font-weight:800;line-height:1.3}
.md h3{font-size:20px;margin-top:22px}
.md h4{font-size:17px;margin-top:18px}
.md h5,.md h6,.md h7,.md h8{font-size:15.5px;margin-top:14px}
.md strong{color:var(--ink);font-weight:800}
.md a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--lime-deep);text-decoration-thickness:2px;text-underline-offset:3px}
.md ul,.md ol{padding-left:24px}
.md li + li{margin-top:5px}
.md li::marker{color:var(--gray-2)}
.md ol > li::marker{font-weight:700}
.md li > ul,.md li > ol{margin-top:5px}
.md blockquote{border-left:3px solid var(--lime);padding:2px 0 2px 14px;color:var(--gray)}
.md hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.md code{font-family:var(--mono);font-size:.88em;padding:.12em .38em;border-radius:6px;background:var(--plate);color:var(--ink)}
.md .code{border-radius:14px;overflow:hidden;background:var(--code);border:1px solid var(--line)}
.code-h{display:flex;align-items:center;justify-content:space-between;height:38px;padding:0 6px 0 14px;background:rgba(255,255,255,.05);color:#9BA0A8;font-size:12.5px;font-weight:600}
.code-copy{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 9px;border:0;border-radius:8px;background:none;color:#C9CCD1;font-size:12.5px;font-weight:600}
.code-copy:hover{background:rgba(255,255,255,.08);color:#fff}
.code-copy .i{width:15px;height:15px}
.code-copy.ok{color:var(--lime)}
.md pre{margin:0;padding:14px 16px 16px;overflow-x:auto;font-family:var(--mono);font-size:13.5px;line-height:1.6;color:#E6E8EB;tab-size:4}
.md pre code{padding:0;background:none;color:inherit;font-size:inherit}
.tk-k{color:#C792EA}
.tk-s{color:#B5E35A}
.tk-n{color:#F2A65A}
.tk-c{color:#6B7280;font-style:italic}
.tk-f{color:#7CC4FA}
/* Таблица шире экрана прокручивается вбок, а тень у края показывает, что
   дальше есть колонки. Слова в ячейках целые: overflow-wrap:anywhere из .md
   сжимал колонки до одной буквы («Perplexit / y») */
.md .tbl{
  overflow-x:auto;border:1px solid var(--line);border-radius:12px;-webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right,var(--surface) 30%,transparent) left center/28px 100% no-repeat local,
    linear-gradient(to left,var(--surface) 30%,transparent) right center/28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(11,11,14,.18),transparent) left center/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(11,11,14,.18),transparent) right center/12px 100% no-repeat scroll;
}
.md table{border-collapse:collapse;width:max-content;min-width:100%;font-size:14px}
.md th,.md td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:normal;word-break:normal;min-width:96px;max-width:280px}
.md th{background:var(--plate);color:var(--ink);font-weight:800;white-space:nowrap}
.md tr:last-child td{border-bottom:0}
.md .a-right{text-align:right}
.md .a-center{text-align:center}
.md.live > :last-child::after{
  content:"";display:inline-block;width:.55em;height:1.05em;margin-left:2px;vertical-align:-2px;
  background:var(--lime-deep);border-radius:2px;animation:blink 1s steps(1) infinite;
}
.md.live > .code:last-child::after,.md.live > .tbl:last-child::after{display:none}

/* пустой чат: приветствие модели */
.hello{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 0 8px;animation:rise .35s var(--ease)}
.hello-mark{position:relative;width:84px;height:84px;border-radius:26px;display:grid;place-items:center;background:var(--tile);color:var(--lime);font-size:44px;box-shadow:0 0 0 6px var(--lime-soft),0 18px 40px rgba(126,209,0,.25)}
.hello-mark .cat{position:absolute;width:62px;right:-46px;bottom:-12px}
.hello h2{margin-top:24px;font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:.02em;line-height:1.15;color:var(--ink)}
.hello h2 mark{white-space:nowrap;background:var(--lime);color:#0B0B0E;padding:0 8px;border-radius:10px;box-shadow:0 0 16px var(--lime-glow);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hello p{max-width:520px;margin-top:10px;color:var(--gray);font-size:15px}
.hello .price{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:5px 12px;border-radius:999px;background:var(--plate);font-size:13px;font-weight:700;color:var(--ink)}
.ideas{width:100%;max-width:800px;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 auto}

/* Пустой чат и пустая студия: поле ввода посередине экрана, над ним
   приветствие, под ним подсказки. margin:auto вместо justify-content —
   если на низком экране всё не влезло, верх не обрезается, а прокручивается */
.cp-view.is-empty{overflow-y:auto;overflow-x:hidden}
.cp-view.is-empty .feed{flex:none;overflow:visible;margin-top:auto}
.cp-view.is-empty .feed-in{padding-bottom:22px}
.cp-view.is-empty .hello{flex:none;padding:0}
.cp-view.is-empty .dock{padding-bottom:0}
.cp-view.is-empty .dock-foot,.cp-view.is-empty .to-end{display:none}
.below{display:none}
.cp-view.is-empty .below{display:block;flex:none;margin-bottom:auto;padding:14px 20px calc(20px + env(safe-area-inset-bottom))}
@media (max-width:899px){.cp-view.is-empty .below{padding-left:10px;padding-right:10px}}
.idea{
  display:flex;flex-direction:column;gap:3px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;
  background:var(--surface);text-align:left;transition:border-color .15s,transform .15s,box-shadow .15s;
}
.idea:hover{border-color:var(--lime-deep);transform:translateY(-2px);box-shadow:0 8px 22px rgba(126,209,0,.14)}
.idea b{font-size:14.5px;font-weight:800;color:var(--ink)}
.idea span{font-size:13px;color:var(--gray);line-height:1.35}

/* поле ввода */
.dock{flex:none;padding:0 20px calc(12px + env(safe-area-inset-bottom))}
.dock-box{
  max-width:800px;margin:0 auto;border:1px solid var(--line);border-radius:26px;background:var(--surface);
  box-shadow:0 6px 28px rgba(11,11,14,.07);transition:border-color .15s,box-shadow .15s;
}
.dock-box:focus-within{border-color:var(--line-2);box-shadow:0 8px 32px rgba(11,11,14,.1),0 0 0 3px var(--lime-soft)}
/* поле студии: текст сверху, параметры и «Создать» строкой ниже */
.dock-box > textarea{
  display:block;width:100%;min-height:56px;max-height:240px;padding:17px 20px 6px;border:0;outline:none;
  background:none;resize:none;font-size:15.5px;line-height:1.5;color:var(--ink);
}
/* чат: одна строка. Высоты подогнаны так, что в пустом поле скрепка и кнопка
   стоят ровно по его середине, а когда текст растёт — остаются внизу */
.dock-line{display:flex;align-items:flex-end;gap:2px;padding:5px 6px 5px 5px}
.dock-line .ibtn{margin-bottom:2px}
.dock-line textarea{
  flex:1;min-width:0;display:block;height:44px;min-height:44px;max-height:240px;padding:10px 6px;border:0;outline:none;
  background:none;resize:none;font-size:16px;line-height:24px;color:var(--ink);
}
.dock-row{display:flex;align-items:center;gap:6px;padding:6px 8px 8px 10px}
.dock-row .hint{flex:1;min-width:0;font-size:12.5px;color:var(--gray-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
.dock-row .hint b{color:var(--gray);font-weight:700}
/* лаймовая, только когда есть что отправить; пустое поле — серый кружок */
.send{
  position:relative;
  width:44px;height:44px;flex:none;margin:0 0 2px 4px;border:0;border-radius:50%;display:grid;place-items:center;
  background:var(--lime);color:#0B0B0E;box-shadow:0 2px 12px var(--lime-glow);
  transition:transform .12s,background .15s,color .15s,box-shadow .15s;
}
.send .i{stroke-width:2.2}
/* пустое поле: чёрный кружок на 40 %, а не серое на сером — кнопку видно */
.send:disabled{background:var(--ink);color:var(--bg);opacity:.4;box-shadow:none;cursor:default}
.send:not(:disabled):not(.stop):hover{transform:scale(1.06)}
/* «Стоп» не двигается и не анимируется — чтобы в него было легко попасть */
.send.stop{background:var(--ink);color:var(--bg);box-shadow:none;transform:none;transition:none}
.send::before{content:"";position:absolute;inset:-2px;border-radius:50%}
.attach{display:flex;gap:8px;padding:12px 14px 0}
.attach-i{position:relative;width:64px;height:64px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.attach-i img{width:100%;height:100%;object-fit:cover}
.attach-i button{position:absolute;top:4px;right:4px;width:22px;height:22px;border:0;border-radius:50%;background:rgba(11,11,14,.75);color:#fff;display:grid;place-items:center;padding:0}
.attach-i button .i{width:13px;height:13px}
.dock-foot{max-width:800px;margin:8px auto 0;text-align:center;font-size:12px;color:var(--gray-2)}
.to-end{
  position:absolute;left:50%;bottom:150px;z-index:5;transform:translateX(-50%);width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;box-shadow:var(--shadow-sm);
  animation:fade .2s;
}

/* ================= студия ================= */
.studio{flex:1;min-height:0;display:flex;flex-direction:column}
.studio.is-empty{overflow-y:auto;overflow-x:hidden}
.studio.is-empty .st-scroll{flex:none;overflow:visible;margin-top:auto}
.studio.is-empty .gal-head{display:none}
.studio.is-empty .gal{display:block}
.studio.is-empty .studio-in{max-width:800px;padding-bottom:16px}
.studio.is-empty .st-dock{margin-bottom:auto;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.st-hint{display:flex;align-items:center;gap:14px;max-width:560px;margin:0 auto;animation:rise .3s var(--ease)}
.st-hint .cat{width:64px;flex:none}
.st-hint b{display:block;font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.02em;line-height:1.2;color:var(--ink)}
.st-hint span{display:block;margin-top:4px;font-size:13.5px;color:var(--gray)}
.st-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
.studio-in{max-width:1080px;margin:0 auto;padding:18px 20px 24px}
.st-dock{padding-top:8px}
.st-par{
  display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;flex:0 1 auto;min-width:0;
  border:1px solid var(--line);border-radius:999px;background:var(--plate);font-size:13px;font-weight:700;color:var(--ink);
}
.st-par .i{color:var(--gray)}
/* длинный «16:9 · 10 с · 1080p» на узком экране обрезается, а не выталкивает «Создать» */
.st-par span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-par[aria-expanded="true"]{border-color:var(--line-2);background:var(--surface)}
.st-go{flex:none}
.st-menu{min-width:0;padding:10px 12px 12px;display:grid;gap:6px}
.st-menu .lbl{margin:0;font-size:12px;color:var(--gray)}
.st-menu .st-grp{flex-wrap:wrap}
.st-menu .st-grp button{width:auto;height:32px;padding:0 10px;font-size:13px}
.st-dock .st-ref{margin:0;border:0;padding:12px 14px 0;align-items:center}
.st-dock .st-drop{margin:12px 12px 0;width:calc(100% - 24px)}
.st-card{
  display:grid;grid-template-columns:minmax(0,1fr) 250px;border:1px solid var(--line);border-radius:26px;
  background:var(--surface);box-shadow:0 6px 28px rgba(11,11,14,.06);overflow:hidden;
}
.st-main{padding:18px 20px 16px;min-width:0}
.st-main textarea{
  display:block;width:100%;min-height:96px;max-height:260px;padding:0;border:0;outline:none;background:none;
  resize:none;font-size:16px;line-height:1.55;color:var(--ink);
}
.st-opts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.st-opts .lbl{margin:0 2px 0 0;font-size:12px}
.st-grp{display:flex;align-items:center;gap:4px;padding:3px;border-radius:12px;background:var(--plate)}
.st-grp button{height:32px;min-width:40px;padding:0 10px;border:0;border-radius:9px;background:none;font-size:13px;font-weight:700;color:var(--gray);display:inline-flex;align-items:center;gap:6px}
.st-grp button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.shape{display:inline-block;border:1.8px solid currentColor;border-radius:2px}
.st-model{display:flex;align-items:center;gap:8px;height:38px;padding:0 10px 0 4px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-weight:700;font-size:13.5px}
.st-model .mtile{width:30px;height:30px;font-size:17px;border-radius:9px}
.st-model .i{width:15px;height:15px;color:var(--gray-2)}
.st-ref{display:flex;align-items:center;gap:10px;margin-top:12px;padding:8px;border:1px dashed var(--line-2);border-radius:16px}
.st-ref img{width:56px;height:56px;border-radius:11px;object-fit:cover}
.st-ref span{flex:1;font-size:13px;color:var(--gray)}
.st-drop{
  display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:14px;border:1.5px dashed var(--line-2);
  border-radius:16px;background:var(--plate);color:var(--gray);font-size:13.5px;text-align:left;transition:border-color .15s,background .15s;
}
.st-drop:hover,.st-drop.over{border-color:var(--lime-deep);background:var(--lime-soft);color:var(--ink)}
.st-drop .mtile{background:var(--surface);color:var(--ink)}
.st-drop b{display:block;color:var(--ink)}
.st-side{padding:20px;border-left:1px solid var(--line);background:var(--plate);display:flex;flex-direction:column;gap:6px}
.st-side .lbl{margin:0}
.st-price{font-family:var(--pixel);font-size:52px;font-weight:700;line-height:.9;color:var(--ink)}
.st-price-sub{font-size:12.5px;color:var(--gray)}
.st-side .btn{margin-top:auto;width:100%}
.st-about{margin-top:12px;font-size:13px;color:var(--gray)}
.gal-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0 4px 12px}
.gal-head h2{font-size:18px;font-weight:800;white-space:nowrap}
.gal-head span{font-size:13px;color:var(--gray)}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.gal.video{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.art{
  position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;background:var(--plate);border:1px solid var(--line);
  display:grid;place-items:center;text-align:center;animation:rise .3s var(--ease);
}
.gal.video .art{aspect-ratio:16/9}
.art.res{cursor:zoom-in;padding:0;border:1px solid var(--line)}
.art.res img,.art.res video{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
.art.res:hover img,.art.res:hover video{transform:scale(1.03)}
.art .badge{position:absolute;left:8px;bottom:8px;padding:3px 8px;border-radius:8px;background:rgba(11,11,14,.72);color:#fff;font-size:11.5px;font-weight:700}
.art .play{position:absolute;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);color:#0B0B0E;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.art .play .i{fill:#0B0B0E;stroke:none;margin-left:3px}
.art.busy{background:linear-gradient(110deg,var(--plate) 30%,var(--lime-soft) 50%,var(--plate) 70%);background-size:220% 100%;animation:shimmer 1.8s linear infinite}
.gen{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px;font-size:12.5px;color:var(--gray)}
.gen .cat{width:76px}
.gen b{font-size:14px;color:var(--ink)}
.gen .bar{width:120px;height:5px;border-radius:5px;background:var(--line);overflow:hidden;margin-top:4px}
.gen .bar i{display:block;height:100%;background:var(--lime-deep);border-radius:5px;transition:width 1s linear}
.art.fail{background:var(--red-soft);border-color:transparent;color:var(--red);font-size:13px;font-weight:600;padding:14px}
.art.fail .btn{margin-top:10px}
.art.empty{border-style:dashed;color:var(--gray);font-size:13.5px;padding:16px}
.art.empty .cat{width:70px;margin:0 auto 8px}
.view{display:flex;flex-direction:column;gap:12px}
.view-media{width:100%;max-height:70dvh;object-fit:contain;border-radius:14px;background:#000}
.view-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.view-bar p{flex:1;min-width:200px;font-size:13.5px;color:var(--gray)}
.view-top{display:flex;align-items:center;gap:10px}
.view-top b{flex:1;font-size:15px}

/* скелетоны при загрузке */
.side-skel,.feed-skel{display:flex;flex-direction:column;gap:10px;padding:16px}
.side-skel i,.feed-skel i{display:block;height:36px;border-radius:11px;background:linear-gradient(110deg,var(--plate) 30%,var(--line) 50%,var(--plate) 70%);background-size:220% 100%;animation:shimmer 1.4s linear infinite}
.feed-skel{max-width:800px;width:100%;margin:40px auto 0}
.feed-skel i{height:18px;width:60%}
.feed-skel i:nth-child(2){width:85%}
.feed-skel i:nth-child(3){width:40%}

/* ================= размеры ================= */
@media (max-width:1099px){
  .bal-txt{display:none}
}
/* история открыта — её кнопка уже есть в самой колонке */
@media (min-width:900px){
  .cp:not(.side-off) .side-tgl{display:none}
}
/* телефон и узкий планшет: история выезжает поверх, вкладки — второй строкой */
@media (max-width:899px){
  .cp-side{position:fixed;left:0;top:0;bottom:0;z-index:70;transform:translateX(-102%);box-shadow:var(--shadow);width:min(86vw,320px)}
  .cp.side-open .cp-side{transform:none}
  .cp.side-off .cp-side{margin-left:0}
  .cp-top{height:58px;padding:0 10px;gap:6px}
  .cp-logo span{display:none}
  .cp-logo{margin-right:0}
  .cp-back{padding:0 8px}
  .bal{display:none}
  .feed-in{padding:20px 14px 12px;gap:18px}
  .dock{padding:0 10px calc(8px + env(safe-area-inset-bottom))}
  .dock-foot{display:none}
  .st-card{grid-template-columns:1fr}
  .st-side{border-left:0;border-top:1px solid var(--line);flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 12px}
  .st-side .lbl{display:none}
  .st-price{font-size:40px}
  .st-side .btn{margin-top:0;flex:1 1 100%}
  .studio-in{padding:12px 12px 16px}
  .to-end{bottom:120px}
}
@media (max-width:599px){
  .st-par{padding:0 10px}
  .ideas{grid-template-columns:1fr}
  .idea:nth-child(n+3){display:none}
  .hello h2{font-size:23px}
  .hello-mark{width:70px;height:70px;font-size:36px;border-radius:22px}
  .hello-mark .cat{width:52px;right:-38px}
  .m-me{max-width:88%}
  .m-bot{grid-template-columns:minmax(0,1fr);gap:4px}
  .m-bot > .mtile{display:none}
  .gal{grid-template-columns:1fr 1fr;gap:8px}
  .gal.video{grid-template-columns:1fr}
  .amts{grid-template-columns:repeat(2,1fr)}
  .dock-row .hint{display:none}
  /* без подсказки «Создать» прижата вправо, а не висит посередине */
  .dock-row .st-go{margin-left:auto}
}
@media (max-width:379px){
  .mbtn small{font-size:11px}
}
@media (max-height:600px){
  .cp-view.is-empty .hello-mark,.cp-view.is-empty .hello p,.cp-view.is-empty .hello-say,.cp-view.is-empty .below{display:none}
  .cp-view.is-empty .hello h2{margin-top:0;font-size:22px}
  .cp-view.is-empty .dock{margin-bottom:auto;padding-bottom:12px}
  .cp-view.is-empty .feed-in{padding-top:12px;padding-bottom:14px}
  .studio.is-empty .st-hint .cat{display:none}
}
/* Телефон и Telegram: как в мобильном ChatGPT — поле ввода всегда внизу, у
   безопасной зоны (и у клавиатуры, когда она открыта), а приветствие с
   подсказками — по центру свободного места над ним. По центру экрана поле
   стоит только на ПК */
@media (max-width:699px){
  .cp-view.is-empty .feed{margin-top:auto}
  .cp-view.is-empty .below{order:1;margin-bottom:auto;padding:12px 10px 10px}
  .cp-view.is-empty .dock{order:2;margin-bottom:0;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .studio.is-empty .st-scroll{margin-bottom:auto}
  .studio.is-empty .st-dock{margin-bottom:0;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
}
html.tg .cp-view.is-empty .feed{margin-top:auto}
html.tg .cp-view.is-empty .below{order:1;margin-bottom:auto;padding:12px 10px 10px}
html.tg .cp-view.is-empty .dock{order:2;margin-bottom:0;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
html.tg .studio.is-empty .st-scroll{margin-bottom:auto}
html.tg .studio.is-empty .st-dock{margin-bottom:0;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
/* Telegram: высота — видимая область мини-приложения без скачков при жестах */
html.tg .cp{height:var(--tg-viewport-stable-height,100dvh)}

/* поддержку открываем из меню аккаунта, кнопка поверх поля ввода тут мешает */
.cp-body .knw-fab{display:none !important}

@keyframes fade{from{opacity:0}}
@keyframes fadeout{to{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}}
@keyframes up{from{transform:translateY(40px);opacity:.4}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
@keyframes toast{from{opacity:0;transform:translate(-50%,10px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{50%{opacity:0}}
@keyframes dot{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}
@keyframes shimmer{to{background-position:-120% 0}}
@keyframes frA{0%,70%{opacity:1}71%,100%{opacity:0}}
@keyframes frB{0%,70%{opacity:0}71%,100%{opacity:1}}
@keyframes frA2{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes frB2{0%,49%{opacity:0}50%,100%{opacity:1}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition:none !important;scroll-behavior:auto !important}
}

/* крестик шторки: закрыть можно не только тапом мимо */
.sheet.has-x{position:relative}
.sheet.has-x > h3:first-of-type{padding-right:40px}
.sheet-x{
  position:absolute;top:10px;right:10px;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:transparent;color:inherit;cursor:pointer;opacity:.7;
}
.sheet-x:hover{opacity:1;background:rgba(127,127,127,.14)}
.sheet-x:focus-visible{outline:3px solid var(--lime-deep,#7ED100);outline-offset:1px;opacity:1}
.sheet-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* документы под историей чатов */
.side-docs{display:flex;flex-wrap:wrap;gap:4px 10px;padding:8px 4px 0;font-size:12px;line-height:1.4}
.side-docs a{color:var(--gray);text-decoration:none}
.side-docs a:hover{text-decoration:underline}