:root{
  --bg:#000; --surface:#121212; --surface-2:#1c1c1e; --bubble:#1b1b1d;
  --text:#f2f2f2; --dim:#8e8e93; --dim-2:#5a5a5e;
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  background:var(--bg);color:var(--text);
  font-family:"Google Sans","Google Sans Text","Product Sans",Inter,-apple-system,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.45;letter-spacing:-.012em;
  overscroll-behavior-y:none;-webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.frame{position:relative;height:100%;width:100%;overflow:hidden;background:#000}
@media (min-width:900px){
  body{display:grid;place-items:center;background:#07070a}
  .frame{width:420px;height:min(900px,96vh);border-radius:38px;border:1px solid #1e1e22;
    box-shadow:0 40px 120px rgba(0,0,0,.8)}
}

.fade{position:absolute;left:0;right:0;z-index:20;pointer-events:none}
.fade::before{
  content:"";position:absolute;inset:0;
  backdrop-filter:blur(16px) saturate(135%);
  -webkit-backdrop-filter:blur(16px) saturate(135%);
  -webkit-mask-image:linear-gradient(var(--dir),
    #000 0%, rgba(0,0,0,.96) 22%, rgba(0,0,0,.78) 42%, rgba(0,0,0,.5) 60%,
    rgba(0,0,0,.24) 76%, rgba(0,0,0,.07) 90%, transparent 100%);
  mask-image:linear-gradient(var(--dir),
    #000 0%, rgba(0,0,0,.96) 22%, rgba(0,0,0,.78) 42%, rgba(0,0,0,.5) 60%,
    rgba(0,0,0,.24) 76%, rgba(0,0,0,.07) 90%, transparent 100%);
}
.fade::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(var(--dir),
    rgba(0,0,0,1) 0%,    rgba(0,0,0,.99) 12%,  rgba(0,0,0,.96) 24%,
    rgba(0,0,0,.90) 35%, rgba(0,0,0,.80) 45%,  rgba(0,0,0,.66) 55%,
    rgba(0,0,0,.49) 65%, rgba(0,0,0,.31) 76%,  rgba(0,0,0,.16) 86%,
    rgba(0,0,0,.05) 94%, rgba(0,0,0,0) 100%);
}
.fade.top{--dir:180deg;top:0;height:calc(var(--safe-top) + 124px)}
.fade.bottom{--dir:0deg;bottom:0;height:calc(var(--safe-bottom) + 168px)}

.header{
  position:absolute;top:0;left:0;right:0;z-index:30;
  padding:calc(var(--safe-top) + 12px) 12px 10px;
  display:flex;align-items:center;gap:10px;
}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-2);transition:transform .12s ease,background .16s ease;flex:none}
.icon-btn:active{transform:scale(.9);background:#262628}
.header-center{flex:1;display:flex;justify-content:center;min-width:0}
.model-pill{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:14px;
  font-size:19px;font-weight:600;letter-spacing:-.025em;max-width:100%}
.model-pill .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.model-pill .plan{color:var(--dim);font-weight:600}
.model-pill .chev{opacity:.5;transition:transform .22s ease;flex:none}
.model-pill.open .chev{transform:rotate(180deg)}
.model-pill:active{opacity:.6}
.header-right{display:flex;align-items:center;gap:6px;background:var(--surface-2);
  border-radius:999px;padding:4px 4px 4px 6px;flex:none}
.header-right .icon-btn{background:none;width:36px;height:36px}
.header-right .icon-btn:active{background:rgba(255,255,255,.07)}
.avatar{width:38px;height:38px;border-radius:50%;padding:2.5px;flex:none;
  background:conic-gradient(from 210deg,#2f7bff,#6a5cff,#b14bff,#2f7bff);display:grid;place-items:center}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#140a22}

.scroll{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(var(--safe-top) + 84px) 16px calc(var(--safe-bottom) + 124px)}
.msg{margin:20px 0;animation:rise .3s cubic-bezier(.22,1,.36,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.msg.user{display:flex;justify-content:flex-end}
.msg.user .col{max-width:88%;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.bubble{background:var(--bubble);border-radius:22px;padding:14px 18px;white-space:pre-wrap;word-break:break-word}
.body>:first-child{margin-top:0}
.body>:last-child{margin-bottom:0}
.body p{margin:0 0 14px}
.body strong{font-weight:700}
.body em{font-style:italic}
.body ul,.body ol{margin:0 0 14px;padding-left:24px}
.body li{margin:7px 0}
.body h3{font-size:19px;font-weight:700;margin:20px 0 10px;letter-spacing:-.025em}
.body a{color:#4f9dff;text-decoration:none}
.body hr{border:0;border-top:1px solid #1f1f22;margin:18px 0}
.body blockquote{margin:0 0 14px;padding:2px 0 2px 14px;border-left:2px solid #2c2c2e;color:#b9b9bd}
.body table{width:100%;border-collapse:separate;border-spacing:0;margin:0 0 14px;font-size:15px;
  border:1px solid #1f1f22;border-radius:14px;overflow:hidden}
.body th,.body td{padding:10px 12px;text-align:left;border-bottom:1px solid #1a1a1d}
.body th{background:#121214;font-weight:600;font-size:14px;color:#cfcfd2}
.body tr:last-child td{border-bottom:0}
code.inline{background:#1c1c1e;border-radius:6px;padding:2px 6px;font-size:14.5px;
  font-family:ui-monospace,"SF Mono",Menlo,monospace}
.body pre{background:#0d0d0f;border:1px solid #1f1f22;border-radius:16px;margin:0 0 14px;overflow:hidden}
.code-head{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;
  border-bottom:1px solid #1a1a1d;font-size:12.5px;color:var(--dim);letter-spacing:.02em}
.code-head button{font-size:12.5px;color:var(--dim)}
.code-head button:active{color:#fff}
.body pre code{display:block;padding:13px;overflow-x:auto;font-size:13.5px;line-height:1.6;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;color:#e6e6e8;white-space:pre}
.caret{display:inline-block;width:8px;height:17px;background:#f2f2f2;border-radius:2px;
  vertical-align:-2px;margin-left:3px;animation:bl .9s steps(2,start) infinite}
@keyframes bl{50%{opacity:0}}
.atts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.atts .ph{width:124px;height:124px;border-radius:18px;object-fit:cover;background:#1c1c1e}
.chip{display:flex;align-items:center;gap:9px;background:var(--surface-2);border-radius:14px;
  padding:11px 14px;font-size:14.5px;max-width:230px}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 30px}
.empty h1{font-size:32px;font-weight:700;letter-spacing:-.035em;margin:0 0 8px}
.empty p{color:var(--dim);margin:0;font-size:16px}
.sugg{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px}
.sugg button{background:var(--surface-2);border-radius:16px;padding:10px 15px;font-size:14.5px;color:#d4d4d6}
.sugg button:active{transform:scale(.96)}

.composer{position:absolute;left:0;right:0;bottom:0;z-index:30;
  padding:10px 14px calc(var(--safe-bottom) + 14px)}
.pending{display:flex;gap:8px;padding:0 6px 9px;overflow-x:auto}
.pending .th{position:relative;flex:none}
.pending .th img{width:58px;height:58px;border-radius:13px;object-fit:cover;display:block;background:#1c1c1e}
.pending .rm{position:absolute;top:-6px;right:-6px;width:21px;height:21px;border-radius:50%;
  background:#303034;display:grid;place-items:center;font-size:11px;border:2px solid #000}
.pending .th.up img,.pending .th.up .chip{opacity:.45}
.c-inner{display:flex;align-items:flex-end;gap:6px;border-radius:27px;padding:5px;
  background:rgba(34,34,36,.8);border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px)}
.c-inner textarea{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);
  resize:none;font:inherit;display:block;min-height:44px;max-height:132px;
  padding:11px 6px;line-height:22px;overflow-y:auto}
.c-inner textarea::placeholder{color:var(--dim)}
.round{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.09);transition:transform .12s,background .16s,opacity .16s}
.round:active{transform:scale(.88)}
.round svg{display:block}
.round.send{background:#f2f2f2;color:#000}
.round.send[disabled]{background:rgba(255,255,255,.09);color:var(--dim);opacity:.6;cursor:default}

.scrim{position:absolute;inset:0;z-index:40;background:rgba(0,0,0,.5);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;pointer-events:none;transition:opacity .3s ease}
.scrim.show{opacity:1;pointer-events:auto}
.sidebar{position:absolute;inset:0;z-index:50;background:#0a0a0a;display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .34s cubic-bezier(.3,.9,.3,1)}
.sidebar.open{transform:none}
.sb-top{display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--safe-top) + 18px) 18px 4px}
.sb-top h2{font-size:28px;font-weight:700;letter-spacing:-.035em;margin:0}
.sb-act{display:flex;align-items:center;gap:16px;padding:16px 20px;font-size:19px;font-weight:500;width:100%;text-align:left}
.sb-act:active{opacity:.55}
.sb-label{padding:14px 20px 6px;color:var(--dim);font-size:17px;font-weight:500}
.chats{flex:1;overflow-y:auto;padding:0 8px 170px;
  -webkit-mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.82) 70%,rgba(0,0,0,.45) 82%,rgba(0,0,0,.14) 92%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.82) 70%,rgba(0,0,0,.45) 82%,rgba(0,0,0,.14) 92%,transparent 100%)}
.chat-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:13px 12px;border-radius:14px;font-size:18px;letter-spacing:-.015em;transition:background .15s}
.chat-item .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-item.active{background:#141416}
.chat-item:active{background:#18181a}
.chat-item .del{opacity:0;color:var(--dim);padding:6px;border-radius:8px;transition:opacity .15s;display:grid;place-items:center}
.chat-item.active .del{opacity:.75}
@media(hover:hover){.chat-item:hover .del{opacity:.75}}
.sb-foot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;
  padding:14px 18px calc(var(--safe-bottom) + 18px);text-align:left}
.sb-foot::before{
  content:"";position:absolute;inset:-60px 0 0;z-index:-1;pointer-events:none;
  background:linear-gradient(0deg,
    rgba(10,10,10,1) 0%,    rgba(10,10,10,.99) 20%, rgba(10,10,10,.95) 33%,
    rgba(10,10,10,.86) 45%, rgba(10,10,10,.70) 57%, rgba(10,10,10,.50) 68%,
    rgba(10,10,10,.29) 79%, rgba(10,10,10,.12) 90%, rgba(10,10,10,0) 100%);
  -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 30%,rgba(0,0,0,.5) 62%,transparent 100%);
  mask-image:linear-gradient(0deg,#000 0%,#000 30%,rgba(0,0,0,.5) 62%,transparent 100%);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.sb-foot .avatar{width:46px;height:46px}
.sb-foot .name{font-size:19px;font-weight:600;letter-spacing:-.025em;line-height:1.15}
.sb-foot .plan{font-size:15px;color:var(--dim)}
.sb-foot:active{opacity:.6}

.sheet-wrap{position:absolute;inset:0;z-index:60;display:flex;align-items:flex-end}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.52);
  backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);animation:fade .25s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{position:relative;width:100%;background:rgba(18,18,20,.97);border-radius:26px 26px 0 0;
  border-top:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  padding:8px 10px calc(var(--safe-bottom) + 14px);max-height:84%;overflow-y:auto;
  animation:up .34s cubic-bezier(.22,1,.36,1)}
@keyframes up{from{transform:translateY(102%)}to{transform:none}}
.handle{width:36px;height:4px;border-radius:2px;background:#303034;margin:6px auto 14px}
.sheet h3{margin:0 10px 8px;font-size:12.5px;color:var(--dim);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em}
.m-row{display:flex;align-items:center;gap:12px;width:100%;padding:14px 12px;border-radius:16px;text-align:left}
.m-row:active{background:#1b1b1e}
.m-row.sel{background:#1b1b1e}
.m-row .meta{flex:1;min-width:0}
.m-row .nm{font-size:17px;font-weight:600;letter-spacing:-.015em}
.m-row .sub{font-size:14px;color:var(--dim);margin-top:1px}
.m-row.locked{opacity:.52}
.tag{font-size:11.5px;font-weight:700;color:#000;background:#f2f2f2;border-radius:8px;padding:3px 7px;letter-spacing:.02em}
.energy{font-size:13.5px;color:var(--dim-2);text-align:center;padding:10px 0 2px}
.paywall{padding:18px 16px 6px}
.paywall h2{font-size:27px;font-weight:700;letter-spacing:-.035em;margin:0}
.paywall .price{font-size:42px;font-weight:700;letter-spacing:-.04em;margin:16px 0 0}
.paywall .per{color:var(--dim);font-size:15px}
.paywall ul{list-style:none;padding:0;margin:18px 0 22px}
.paywall li{display:flex;gap:11px;padding:7px 0;color:#d6d6d8;font-size:16px}
.paywall li svg{flex:none;margin-top:4px;color:#f2f2f2}
.cta{width:100%;background:#f2f2f2;color:#000;border-radius:18px;padding:16px;
  font-size:17px;font-weight:600;transition:transform .12s}
.cta:active{transform:scale(.98)}
.cta[disabled]{opacity:.5}
.cta.ghost{background:rgba(255,255,255,.09);color:var(--text)}
.promo{display:flex;gap:8px;margin-top:10px}
.promo input{flex:1;min-width:0;background:#1c1c1e;border:0;outline:none;color:var(--text);
  border-radius:16px;padding:15px;font:inherit;letter-spacing:.04em}
.promo input::placeholder{letter-spacing:0;color:var(--dim)}
.promo .cta{width:auto;padding:15px 18px}
.hint{color:var(--dim-2);font-size:13.5px;text-align:center;margin-top:12px}
.toast{position:absolute;left:50%;bottom:calc(var(--safe-bottom) + 100px);transform:translateX(-50%);
  background:rgba(38,38,40,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-radius:14px;padding:12px 16px;font-size:15px;z-index:80;max-width:86%;text-align:center;
  animation:rise .26s ease;box-shadow:0 10px 40px rgba(0,0,0,.5)}

/* ============ новое: фаза генерации ============ */
.phase{display:inline-flex;align-items:center;gap:9px;color:var(--dim);font-size:15.5px;
  padding:2px 0 6px}
.phase .dots{display:inline-flex;gap:5px;align-items:center;height:22px}
.phase .dots i{width:7px;height:7px;border-radius:50%;background:var(--dim);animation:bk 1.3s infinite ease-in-out}
.phase .dots i:nth-child(2){animation-delay:.18s}
.phase .dots i:nth-child(3){animation-delay:.36s}
@keyframes bk{0%,80%,100%{opacity:.25;transform:scale(.85)}40%{opacity:1;transform:scale(1)}}
.phase .lbl{background:linear-gradient(90deg,#6e6e73 10%,#f2f2f2 50%,#6e6e73 90%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 1.8s linear infinite}
@keyframes shimmer{from{background-position:140% 0}to{background-position:-40% 0}}

/* ============ новое: размышления ============ */
.think{margin:0 0 14px;border:1px solid #1a1a1d;border-radius:14px;background:#0c0c0e;overflow:hidden}
.think summary{list-style:none;cursor:pointer;padding:11px 14px;font-size:14.5px;color:var(--dim);
  display:flex;align-items:center;gap:8px}
.think summary::-webkit-details-marker{display:none}
.think summary:active{background:#141417}
.think .txt{padding:0 14px 13px;font-size:14.5px;line-height:1.55;color:#9a9aa0;white-space:pre-wrap}

/* ============ новое: источники ============ */
.cites{margin:4px 0 14px;display:flex;flex-direction:column;gap:6px}
.cites a{display:flex;gap:9px;align-items:baseline;font-size:14.5px;color:#9db9e6;text-decoration:none}
.cites a .n{color:var(--dim-2);font-variant-numeric:tabular-nums;flex:none}
.cites a .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============ новое: ошибка в сообщении ============ */
.msg-error{display:flex;gap:10px;align-items:flex-start;background:#1a1012;border:1px solid #39181c;
  border-radius:16px;padding:13px 15px;color:#ffb4b4;font-size:15.5px}
.msg-error button{color:#ff9d9d;font-weight:600;font-size:14.5px;margin-top:8px;display:block}

/* ============ новое: загрузка и заглушки ============ */
.boot{position:absolute;inset:0;z-index:90;background:#000;display:grid;place-items:center;
  text-align:center;padding:0 32px;transition:opacity .3s ease}
.boot.hide{opacity:0;pointer-events:none}
.boot-inner p{color:var(--dim);font-size:16px;margin:18px 0 0;white-space:pre-line}
.boot h1{font-size:28px;font-weight:700;letter-spacing:-.035em;margin:0 0 10px}
.boot .cta{max-width:260px;margin:22px auto 0}
.spinner{width:34px;height:34px;border-radius:50%;margin:0 auto;
  border:2.5px solid #26262a;border-top-color:#f2f2f2;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ новое: профиль ============ */
.prof{display:flex;align-items:center;gap:14px;padding:4px 12px 18px}
.prof .avatar{width:58px;height:58px}
.prof .nm{font-size:21px;font-weight:700;letter-spacing:-.03em}
.prof .sub{color:var(--dim);font-size:15px;margin-top:2px}
.bar{height:6px;border-radius:3px;background:#1c1c1e;overflow:hidden;margin:4px 12px 6px}
.bar i{display:block;height:100%;border-radius:3px;background:#f2f2f2;transition:width .4s ease}
.rows{margin:6px 0 10px}
.row{display:flex;justify-content:space-between;gap:12px;padding:11px 12px;font-size:16px}
.row span:last-child{color:var(--dim)}