/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --bg-void:#080a10;
  --bg-deep:#0b0e17;
  --bg-aurora-1:#12294a;
  --bg-aurora-2:#1b1240;
  --surface:#121722;
  --surface-2:#161d2b;
  --surface-glass:rgba(255,255,255,0.045);
  --surface-glass-strong:rgba(255,255,255,0.075);
  --border-soft:rgba(255,255,255,0.07);
  --border-softer:rgba(255,255,255,0.045);

  --accent-1:#33a9e0;
  --accent-2:#5b7cf5;
  --accent-grad:linear-gradient(135deg,#3aa8e8 0%,#5c7bf5 100%);
  --accent-grad-soft:linear-gradient(135deg,rgba(58,168,232,.16),rgba(92,123,245,.16));

  --gold:#e8b559;
  --green:#38d39f;
  --green-soft:rgba(56,211,159,.14);
  --red:#f4576b;
  --red-soft:rgba(244,87,107,.14);
  --amber:#f5b24d;
  --amber-soft:rgba(245,178,77,.14);
  --violet:#9b7ef0;
  --violet-soft:rgba(155,126,240,.14);

  --text-1:#eef1f7;
  --text-2:#a7afc2;
  --text-3:#6d7590;
  --text-on-accent:#ffffff;

  --radius-xl:26px;
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;

  --shadow-soft:0 10px 30px -12px rgba(0,0,0,.55);
  --shadow-strong:0 20px 60px -20px rgba(0,0,0,.7);

  --ease:cubic-bezier(.22,1,.36,1);
  --dur-fast:.16s;
  --dur-med:.32s;
  --dur-slow:.56s;

  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --dock-from:rgba(11,14,23,0);
  --dock-mid:rgba(11,14,23,.92);

  --shell-max:640px;
  --fs:16px;
  --fs-sm:13.5px;
  --fs-md:15.5px;
  --fs-lg:17px;
  --fs-xl:20px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Vazirmatn',system-ui,sans-serif;
  font-size:var(--fs);
  line-height:1.65;
  background:var(--bg-void);
  color:var(--text-1);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ambient aurora background */
.aurora{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 45% at 18% 12%, var(--bg-aurora-1) 0%, transparent 60%),
    radial-gradient(55% 40% at 85% 88%, var(--bg-aurora-2) 0%, transparent 60%),
    radial-gradient(120% 90% at 50% 50%, var(--bg-deep) 0%, var(--bg-void) 75%);
  opacity:.9;
}
.aurora::after{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* splash screen */
body.splash-on .app-shell,
body.splash-on #authGate{
  filter:blur(16px) saturate(120%);
  transform:scale(1.03);
  pointer-events:none;
}
.splash-screen{
  position:fixed; inset:0; z-index:180;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,10,16,.28);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  transition:opacity .28s var(--ease), visibility .28s;
}
.splash-screen.is-out{
  opacity:0; visibility:hidden; pointer-events:none;
}
.splash-glass{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding:36px 40px;
  border-radius:28px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(18px);
}
.splash-logo-wrap{
  position:relative; width:128px; height:128px;
}
.splash-glow{
  position:absolute; inset:-22px; border-radius:50%;
  background:radial-gradient(circle, rgba(58,168,232,.55) 0%, rgba(91,124,245,.18) 42%, transparent 70%);
  filter:blur(10px);
  animation:splash-glow 1.8s ease-in-out infinite;
}
.splash-logo{
  position:relative; z-index:1;
  width:128px; height:128px; border-radius:50%;
  overflow:hidden;
  background:var(--accent-grad);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 28px rgba(58,168,232,.55), 0 0 64px rgba(91,124,245,.28);
}
.splash-logo i{ font-size:56px; color:#fff; }
.splash-logo.has-logo{ background:transparent; }
.splash-logo.has-logo i{ display:none; }
.splash-logo .bot-logo{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.splash-text{
  margin:0; max-width:260px; text-align:center;
  color:var(--text-1); font-size:16px; font-weight:700; line-height:1.7;
  text-shadow:0 2px 16px rgba(0,0,0,.35);
}
@keyframes splash-glow{
  0%,100%{ opacity:.7; transform:scale(.96); }
  50%{ opacity:1; transform:scale(1.08); }
}
body.theme-light .splash-screen{ background:rgba(244,247,251,.35); }
body.theme-light .splash-glass{
  background:rgba(255,255,255,.55);
  border-color:rgba(255,255,255,.7);
}
body.theme-light .splash-text{ color:#1c2433; text-shadow:none; }

/* ============================================================
   APP SHELL
   ============================================================ */
.app-shell{
  position:relative; z-index:1;
  max-width:var(--shell-max);
  margin:0 auto;
  height:100dvh;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(18,23,34,.55), rgba(11,14,23,.85));
  backdrop-filter:blur(20px);
  --hdr-avatar:64px;
  --hdr-pad-y:16px;
  --hdr-name:19px;
  --hdr-icon:28px;
}
.app-shell.hdr-sm{ --hdr-avatar:40px; --hdr-pad-y:10px; --hdr-name:16px; --hdr-icon:18px; }
.app-shell.hdr-md{ --hdr-avatar:52px; --hdr-pad-y:12px; --hdr-name:17px; --hdr-icon:22px; }
.app-shell.hdr-lg{ --hdr-avatar:64px; --hdr-pad-y:16px; --hdr-name:19px; --hdr-icon:28px; }
.app-shell.hdr-xl{ --hdr-avatar:78px; --hdr-pad-y:18px; --hdr-name:21px; --hdr-icon:34px; }
@media (min-width:768px){
  body{ padding:28px 16px; }
  .app-shell{
    height:calc(100dvh - 56px);
    border-radius:28px;
    border:1px solid var(--border-soft);
    box-shadow:var(--shadow-strong);
    overflow:hidden;
  }
}
@media (min-width:1280px){
  body{ padding:40px 16px; }
  .app-shell{ height:calc(100dvh - 80px); }
}

/* ============================================================
   HEADER
   ============================================================ */
.bot-header{
  position:sticky; top:0; z-index:20;
  padding-top:calc(var(--hdr-pad-y, 16px) + var(--safe-top));
  padding-bottom:var(--hdr-pad-y, 16px);
  padding-inline:16px;
  display:flex; align-items:center; gap:12px;
  background:rgba(11,14,23,.78);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--border-softer);
}
.bot-head-btn{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:12px;
  margin:0; padding:0; border:none;
  background:transparent; color:inherit;
  font-family:inherit; text-align:right; cursor:pointer;
  border-radius:12px;
}
.bot-head-btn:hover{ background:var(--surface-glass); }
.bot-head-btn:focus-visible{ outline:2px solid var(--accent-1); outline-offset:2px; }
.bot-avatar{
  position:relative; flex-shrink:0;
  width:var(--hdr-avatar, 64px); height:var(--hdr-avatar, 64px); border-radius:50%;
  background:var(--accent-grad);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:16px; color:#fff;
}
.bot-avatar.has-logo{ box-shadow:none; background:transparent; }
.bot-avatar svg{ width:22px; height:22px; }
.bot-avatar i{ font-size:var(--hdr-icon, 28px); line-height:1; color:#fff; }
.bot-avatar.has-logo svg,
.bot-avatar.has-logo i{ display:none; }
.bot-avatar .bot-logo,
.bot-profile-avatar .bot-logo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; border-radius:50%;
  display:block;
}
.status-dot{
  position:absolute; left:-1px; bottom:-1px; z-index:2;
  width:12px; height:12px; border-radius:50%;
  background:var(--green);
  border:2.5px solid var(--bg-deep);
}
.status-dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  background:var(--green); opacity:.35;
  animation:pulse-ring 2.2s var(--ease) infinite;
}
@keyframes pulse-ring{
  0%{ transform:scale(.6); opacity:.5; }
  70%{ transform:scale(1.6); opacity:0; }
  100%{ opacity:0; }
}
.bot-id{ flex:1; min-width:0; }
.bot-id .name-row{ display:flex; align-items:center; gap:6px; }
.bot-name{ font-size:var(--hdr-name, 19px); font-weight:800; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.01em; }
.bot-badge{
  font-size:12px; font-weight:700; color:var(--accent-1);
  background:var(--accent-grad-soft);
  border:1px solid rgba(91,124,245,.3);
  padding:1.5px 7px; border-radius:20px; flex-shrink:0;
}
.bot-status{ font-size:var(--fs-sm); color:var(--text-3); margin-top:1px; display:flex; align-items:center; gap:5px; }
.bot-status[hidden]{ display:none !important; }

.header-actions{ display:flex; align-items:center; gap:2px; }
.icon-btn.is-sfx-on{ color:var(--accent-1); }
.icon-btn.is-sfx-off{ color:var(--text-3); }
.icon-btn.is-sfx-off i{ opacity:.72; }
.icon-btn{
  position:relative;
  width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:var(--text-2);
  cursor:pointer; transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.icon-btn svg{ width:19px; height:19px; }
.icon-btn i{ font-size:19px; line-height:1; }
.icon-btn:hover{ background:var(--surface-glass); color:var(--text-1); }
.icon-btn:active{ transform:scale(.9); }
.icon-btn:focus-visible{ outline:2px solid var(--accent-1); outline-offset:2px; }

/* pinned bar */
.pinned-bar{
  margin:8px 16px 0; padding:9px 12px;
  display:flex; align-items:center; gap:10px;
  background:var(--surface-glass);
  border:1px solid var(--border-softer);
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease);
}
.pinned-bar[hidden]{ display:none !important; }
.pinned-bar:hover{ background:var(--surface-glass-strong); }
.pinned-bar .pin-icon{ color:var(--accent-1); flex-shrink:0; }
.pinned-bar .pin-icon svg{ width:16px; height:16px; }
.pinned-bar .pin-icon i{ font-size:18px; line-height:1; }
.pinned-bar .pin-text{ flex:1; min-width:0; }
.pinned-bar .pin-title{ font-size:var(--fs-sm); font-weight:700; color:var(--accent-1); }
.pinned-bar .pin-sub{ font-size:14px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ============================================================
   CHAT AREA
   ============================================================ */
.chat-scroll{
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:16px 14px 10px;
  display:flex; flex-direction:column; gap:2px;
  scroll-behavior:smooth;
}
.chat-scroll::-webkit-scrollbar{ width:5px; }
.chat-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.09); border-radius:10px; }

.date-divider{
  align-self:center; margin:14px 0 12px;
  font-size:var(--fs-sm); color:var(--text-3); font-weight:600;
  background:var(--surface-glass); padding:4px 12px; border-radius:20px;
  border:1px solid var(--border-softer);
}

.msg-row{ display:flex; margin:5px 0; opacity:0; animation:msg-in var(--dur-slow) var(--ease) forwards; }
.msg-row.in{ justify-content:flex-start; }
.msg-row.out{ justify-content:flex-end; }
@keyframes msg-in{
  from{ opacity:0; transform:translateY(10px) scale(.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.bubble{
  max-width:82%;
  padding:10px 13px 8px;
  border-radius:var(--radius-lg);
  font-size:var(--fs-md); line-height:1.9;
  letter-spacing:.01em;
  position:relative;
  box-shadow:0 2px 10px -4px rgba(0,0,0,.4);
}
.bubble.in{
  background:var(--surface-2);
  border:1px solid var(--border-softer);
  border-top-right-radius:5px;
  color:var(--text-1);
}
.bubble.out{
  background:var(--accent-grad);
  color:#fff;
  border-top-left-radius:5px;
}
.bubble .msg-text{ white-space:pre-line; overflow-wrap:anywhere; }
.bubble .msg-text strong{ font-weight:800; }
.bubble .msg-text .toman-unit,
.kbtn .toman-unit{
  color:#e11d48;
  font-weight:800;
  font-size:calc(1em + 2px);
  letter-spacing:0;
}
.bubble .msg-text a{ color:var(--accent-1); text-decoration:underline; word-break:break-all; }
.bubble .msg-meta{
  display:flex; align-items:center; gap:4px; justify-content:flex-end;
  margin-top:4px; font-size:12px; opacity:.7;
}
.bubble.out .msg-meta{ color:rgba(255,255,255,.85); }
.bubble.in .msg-meta{ color:var(--text-3); }
.msg-inline{ display:flex; flex-direction:column; gap:6px; padding:0 10px 10px; }
.msg-inline-row{ display:flex; gap:6px; flex-wrap:wrap; }
.msg-action-btn{
  flex:1;
  min-width: 42%;
  border:0;
  border-radius:10px;
  padding:.45rem .7rem;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  background:rgba(91,124,245,.16);
  color:var(--text-1);
}
.bubble.out .msg-action-btn{ background:rgba(255,255,255,.18); color:#fff; }
.msg-action-btn.is-spent,
.msg-action-btn:disabled{
  opacity:.42;
  cursor:default;
  pointer-events:none;
}
.bubble .msg-meta svg{ width:13px; height:13px; }
.bubble .msg-meta i{ font-size:11px; line-height:1; }

/* structured ticket-card bubble */
.card-bubble{ max-width:88%; padding:0; overflow:hidden; }
.card-head{
  display:flex; align-items:center; gap:8px;
  padding:11px 13px 9px;
  border-bottom:1px solid var(--border-softer);
}
.card-head .card-icon{
  width:26px; height:26px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.card-head .card-icon svg{ width:14px; height:14px; }
.card-head .card-icon i{ font-size:14px; }
.card-icon.amber{ background:var(--amber-soft); color:var(--amber); }
.card-icon.violet{ background:var(--violet-soft); color:var(--violet); }
.card-icon.green{ background:var(--green-soft); color:var(--green); }
.card-title{ font-size:var(--fs-md); font-weight:700; }
.card-code{ font-size:12px; color:var(--text-3); margin-inline-start:auto; direction:ltr; }
.card-body{ padding:10px 13px; display:flex; flex-direction:column; gap:6px; }
.card-row{ display:flex; align-items:baseline; gap:6px; font-size:var(--fs-sm); }
.card-row .k{ color:var(--text-3); flex-shrink:0; }
.card-row .v{ color:var(--text-1); font-weight:600; overflow-wrap:anywhere; }
.card-row .v.link{ color:var(--accent-1); direction:ltr; unicode-bidi:embed; }
.card-msg{
  margin-top:2px; padding:8px 10px; border-radius:10px;
  background:rgba(255,255,255,.03); font-size:var(--fs-sm); color:var(--text-2); line-height:1.8;
}
.card-cta{
  margin:2px 13px 12px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px; border-radius:var(--radius-sm);
  background:var(--accent-grad-soft); border:1px solid rgba(91,124,245,.28);
  color:var(--accent-1); font-size:var(--fs-sm); font-weight:700;
  cursor:pointer; transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.card-cta:hover{ background:rgba(91,124,245,.22); }
.card-cta:active{ transform:scale(.97); }
.card-cta svg{ width:14px; height:14px; }
.bubble .msg-meta.card-time{ padding:0 13px 10px; margin-top:-4px; }

.ad-post{
  max-width:min(92%, 340px);
  padding:0;
  overflow:hidden;
  border:1px solid rgba(91,124,245,.22);
  background:linear-gradient(180deg, rgba(91,124,245,.12), var(--surface-2));
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}
.ad-post-media{
  aspect-ratio:16/9;
  overflow:hidden;
  background:rgba(0,0,0,.2);
}
.ad-post-media img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.ad-post-pad{ padding:12px 14px 10px; }
.ad-post-kicker{
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.02em;
  color:var(--accent-1); margin-bottom:6px;
}
.ad-post-title{
  margin:0 0 6px; font-size:var(--fs-md); font-weight:800; line-height:1.45; color:var(--text-1);
}
.ad-post-body{
  margin:0 0 10px; font-size:var(--fs-sm); color:var(--text-2); line-height:1.75;
}
.ad-post-cta{
  display:flex; align-items:center; justify-content:center;
  margin:0 0 8px; padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--accent-grad-soft); border:1px solid rgba(91,124,245,.35);
  color:var(--accent-1); font-weight:800; font-size:var(--fs-sm); text-decoration:none;
}
.ad-post-cta:hover{ filter:brightness(1.08); }
.ad-post .msg-meta{ padding:0; margin:0; justify-content:flex-start; }

.typing-row{ display:flex; margin:6px 0; }
.typing-bubble{
  background:var(--surface-2); border:1px solid var(--border-softer);
  border-top-right-radius:5px; border-radius:var(--radius-lg);
  padding:12px 15px; display:flex; align-items:center; gap:4px;
}
.typing-bubble span{
  width:6px; height:6px; border-radius:50%; background:var(--text-3);
  animation:typing-bounce 1.2s ease-in-out infinite;
}
.typing-bubble span:nth-child(2){ animation-delay:.15s; }
.typing-bubble span:nth-child(3){ animation-delay:.3s; }
@keyframes typing-bounce{
  0%,60%,100%{ transform:translateY(0); opacity:.5; }
  30%{ transform:translateY(-4px); opacity:1; }
}

/* skeleton */
.skel-row{ display:flex; margin:6px 0; }
.skel{
  width:70%; height:58px; border-radius:var(--radius-lg);
  background:linear-gradient(100deg, var(--surface-2) 30%, rgba(255,255,255,.06) 50%, var(--surface-2) 70%);
  background-size:200% 100%;
  animation:skel-shine 1.4s ease-in-out infinite;
}
@keyframes skel-shine{ to{ background-position:-200% 0; } }

/* ============================================================
   REPLY KEYBOARD + COMPOSER
   ============================================================ */
.bottom-dock{
  position:sticky; bottom:0; z-index:15;
  background:linear-gradient(180deg, var(--dock-from) 0%, var(--dock-mid) 22%, var(--bg-deep) 100%);
  padding-bottom:calc(10px + var(--safe-bottom));
}

.composer{
  display:flex; align-items:center; gap:6px;
  margin:6px 14px 8px;
  padding:8px 6px 8px 5px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(140,160,255,.16);
  box-shadow:0 10px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  border-radius:26px;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.composer:focus-within{
  border-color:rgba(91,124,245,.55);
  background:var(--surface-glass-strong);
  box-shadow:0 10px 28px rgba(58,90,220,.18), 0 0 0 3px rgba(91,124,245,.12);
}
.composer input{
  flex:1; min-width:0; background:transparent; border:none; outline:none;
  color:var(--text-1); font-family:inherit; font-size:var(--fs); padding:10px 2px;
}
.composer input::placeholder{ color:var(--text-3); }
.composer .icon-btn{ width:40px; height:40px; }
.send-btn{
  background:var(--accent-grad); color:#fff; border-radius:50%;
  box-shadow:0 6px 16px rgba(58,90,220,.35);
}
.send-btn:hover{ background:var(--accent-grad); filter:brightness(1.08); }
.send-btn svg{ transform:scaleX(-1); }
.send-btn i{ font-size:17px; transform:scaleX(-1); }

.composer-tools{
  position:relative;
  display:flex; align-items:center; gap:1px;
  padding:2px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.kb-hint{
  position:absolute;
  bottom:calc(100% + 10px);
  right:0;
  z-index:28;
  background:#fff;
  color:#1a2332;
  font-size:12px;
  font-weight:800;
  letter-spacing:.01em;
  padding:7px 12px;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.28);
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transform:translateY(8px) scale(.96);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.kb-hint.show{
  opacity:1;
  transform:translateY(0) scale(1);
}
.kb-hint::after{
  content:"";
  position:absolute;
  top:100%;
  right:14px;
  border:6px solid transparent;
  border-top-color:#fff;
}
.tool-btn{
  width:32px; height:32px; border:none; background:transparent; color:var(--text-2);
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.tool-btn svg{ width:18px; height:18px; }
.tool-btn i{ font-size:18px; line-height:1; }
.tool-btn:hover{ background:rgba(255,255,255,.08); color:var(--text-1); }
.tool-btn.is-on{ color:#fff; background:rgba(91,124,245,.28); }
.tool-btn.mic-ready{ color:var(--green); }
.tool-btn.mic-off{ color:var(--text-3); }
.tool-btn.is-rec{
  color:#fff; background:var(--red);
  animation:mic-pulse 1s ease-in-out infinite;
}
@keyframes mic-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(232,90,90,.45); }
  50%{ box-shadow:0 0 0 7px rgba(232,90,90,0); }
}

.composer.is-recording #msgInput,
.composer.is-recording #btnAttach,
.composer.is-recording #composerTools{ display:none !important; }
.composer.is-recording .rec-bar{ display:flex; }
.rec-bar{
  display:none; flex:1; min-width:0; align-items:center; gap:8px; padding:0 6px;
}
.rec-dot{
  width:10px; height:10px; border-radius:50%; background:#e85a5a; flex-shrink:0;
  box-shadow:0 0 0 0 rgba(232,90,90,.55);
  animation:rec-blink 1s ease-in-out infinite;
}
.rec-bar.is-paused .rec-dot{ animation:none; background:#c9a227; box-shadow:none; }
@keyframes rec-blink{
  0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(232,90,90,.5); }
  50%{ opacity:.45; box-shadow:0 0 0 6px rgba(232,90,90,0); }
}
.rec-time{
  font-variant-numeric:tabular-nums; font-weight:800; font-size:14px; color:#fff;
  direction:ltr; unicode-bidi:embed;
}
.rec-max{ color:var(--text-3); font-size:13px; font-weight:700; direction:ltr; }
.rec-pause{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.rec-pause:hover{ background:rgba(255,255,255,.14); }
.rec-pause i{ font-size:13px; }
.rec-cancel{
  margin-inline-start:auto; border:none; background:none; cursor:pointer;
  color:var(--accent-1); font-family:inherit; font-size:14px; font-weight:700; padding:6px 8px;
}
.rec-cancel:hover{ text-decoration:underline; }

.voice-caption{
  margin-top:6px;
  white-space:pre-wrap;
  word-break:break-word;
  font-size:14.5px;
  line-height:1.55;
  direction:rtl;
  text-align:right;
}
.voice-player{
  display:flex; align-items:center; gap:10px; direction:ltr;
}
.voice-play{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  border:none; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
}
.bubble.in .voice-play{ background:rgba(91,124,245,.28); color:var(--accent-1); }
.voice-play i{ font-size:14px; margin-inline-start:1px; }
.voice-wave{
  flex:1; height:28px; display:flex; align-items:center; gap:2.5px;
}
.voice-wave span{
  flex:1; display:block; height:30%; min-height:6px; max-height:100%;
  border-radius:99px; background:currentColor; opacity:.45;
  transform-origin:center;
}
.bubble.out .voice-wave span{ color:#fff; }
.bubble.in .voice-wave span{ color:var(--accent-1); }
.voice-player.is-playing .voice-wave span{
  animation:voice-bar .9s ease-in-out infinite;
}
.voice-wave span:nth-child(2n){ height:55%; animation-delay:.08s; }
.voice-wave span:nth-child(3n){ height:80%; animation-delay:.16s; }
.voice-wave span:nth-child(4n){ height:40%; animation-delay:.22s; }
.voice-wave span:nth-child(5n){ height:70%; animation-delay:.05s; }
@keyframes voice-bar{
  0%,100%{ transform:scaleY(.45); }
  50%{ transform:scaleY(1); }
}
.voice-dur{
  font-size:12px; font-weight:700; min-width:36px; text-align:end;
  direction:ltr; opacity:.9;
}

.composer-stack{ position:relative; }

.emoji-sheet{
  position:absolute; left:12px; right:12px; bottom:calc(100% + 8px);
  z-index:24;
  margin:0; padding:10px 8px;
  display:grid; grid-template-columns:repeat(8,1fr); gap:2px;
  background:rgba(18,24,38,.96);
  border:1px solid var(--border-soft);
  border-radius:18px;
  box-shadow:0 12px 32px rgba(0,0,0,.4);
  overflow:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.emoji-sheet::-webkit-scrollbar{ display:none; width:0; height:0; }
.emoji-sheet[hidden]{ display:none !important; }
.emoji-sheet button{
  height:36px; border:none; background:transparent; border-radius:10px;
  font-size:22px; cursor:pointer; line-height:1;
}
.emoji-sheet button:hover{ background:rgba(255,255,255,.08); }

.keyboard-wrap{
  padding:4px 10px 6px;
  overflow:hidden;
  flex-shrink:0;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.keyboard-wrap::-webkit-scrollbar{ display:none; width:0; height:0; }
.keyboard-wrap.is-collapsed{ display:none; }
.keyboard-grid{
  display:flex; flex-direction:column; gap:5px;
}
.kb-row{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px;
}
.kb-row.kb-row-full,
.kb-row:has(> :only-child){ grid-template-columns:1fr; }
.kb-row.kb-row-full .kbtn,
.kbtn.kbtn-full{ grid-column:1 / -1; }

.kbtn{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  gap:7px;
  padding:4px 8px;
  min-height:var(--kb-btn-h, 36px);
  height:var(--kb-btn-h, 36px);
  max-height:var(--kb-btn-h, 36px);
  border-radius:9px;
  background:var(--surface);
  border:1px solid var(--border-soft);
  color:var(--text-1);
  font-family:inherit; font-size:var(--kb-fs, 12.5px); font-weight:650;
  letter-spacing:.01em;
  cursor:pointer; text-align:center;
  line-height:1.25;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.kbtn:hover{ transform:none; }
.kbtn:active{ transform:scale(.98); }
.kbtn:focus-visible{ outline:2px solid var(--accent-1); outline-offset:2px; }
.kbtn .kb-icon{
  flex-shrink:0; width:var(--kb-icon, 22px); height:var(--kb-icon, 22px); border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08);
  color:inherit;
  font-size:12px;
}
.kbtn .kb-icon i{
  font-size:12px;
  line-height:1;
}
.kbtn .kb-icon.kb-emoji{
  font-size:14px;
  line-height:1;
}
.kbtn .kb-icon svg{ width:12px; height:12px; }
.kbtn span.label{
  white-space:normal;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  text-align:center;
  max-width:100%;
}
@media (min-width:768px){
  .keyboard-wrap{ padding:6px 12px 8px; }
  .kbtn{ font-size:13px; }
}
@media (min-width:1280px){
  .kbtn{
    min-height:var(--kb-btn-h, 50px);
    height:var(--kb-btn-h, 50px);
    max-height:var(--kb-btn-h, 50px);
    font-size:var(--kb-fs, 13.5px);
  }
  .kbtn .kb-icon{ width:var(--kb-icon, 24px); height:var(--kb-icon, 24px); }
  .composer{
    margin:8px 16px 10px;
    padding:9px 8px 9px 7px;
  }
  .composer input{ padding:11px 2px; }
  .composer .icon-btn{ width:42px; height:42px; }
}

.kb-icon.blue{ background:var(--accent-grad-soft); color:var(--accent-1); }
.kb-icon.amber{ background:var(--amber-soft); color:var(--amber); }
.kb-icon.violet{ background:var(--violet-soft); color:var(--violet); }
.kb-icon.green{ background:var(--green-soft); color:var(--green); }
.kb-icon.red{ background:var(--red-soft); color:var(--red); }
.kb-icon.gold{ background:rgba(232,181,89,.14); color:var(--gold); }
.kb-icon.muted{ background:rgba(255,255,255,.06); color:var(--text-2); }

.kbtn.style-primary{
  background:linear-gradient(180deg, rgba(58,168,232,.22), rgba(58,168,232,.08));
  border-color:rgba(58,168,232,.42);
  color:#d9f1ff;
}
.kbtn.style-success{
  background:linear-gradient(180deg, rgba(56,211,159,.22), rgba(56,211,159,.08));
  border-color:rgba(56,211,159,.42);
  color:#d4f8ea;
}
.kbtn.style-danger{
  background:linear-gradient(180deg, rgba(244,87,107,.22), rgba(244,87,107,.08));
  border-color:rgba(244,87,107,.42);
  color:#ffd6dc;
}
.kbtn.style-amber{
  background:linear-gradient(180deg, rgba(245,178,77,.22), rgba(245,178,77,.08));
  border-color:rgba(245,178,77,.42);
  color:#ffe9c4;
}
.kbtn.style-default{
  background:var(--surface);
  border-color:var(--border-soft);
  color:var(--text-1);
}
.kbtn.style-primary .kb-icon{ background:rgba(58,168,232,.28); color:#8fd4ff; }
.kbtn.style-success .kb-icon{ background:rgba(56,211,159,.28); color:#9cf3d4; }
.kbtn.style-danger .kb-icon{ background:rgba(244,87,107,.28); color:#ffb3bd; }
.kbtn.style-amber .kb-icon{ background:rgba(245,178,77,.28); color:#ffd9a0; }
.kbtn.style-default .kb-icon{ background:rgba(255,255,255,.08); color:var(--text-1); }
.kbtn.style-default:hover{
  background:var(--surface-2);
  border-color:rgba(255,255,255,.14);
}
.kbtn.kbtn-custom{
  background: var(--kbtn-bg);
  border-color: color-mix(in srgb, var(--kbtn-bg) 72%, #000);
  color: var(--kbtn-fg);
}
.kbtn.kbtn-custom .kb-icon{
  background: color-mix(in srgb, var(--kbtn-fg) 18%, transparent);
  color: var(--kbtn-fg);
}
.kbtn.kbtn-custom:hover{
  filter: brightness(1.08);
}
.kbtn.style-primary:hover{
  background:linear-gradient(180deg, rgba(58,168,232,.32), rgba(58,168,232,.14));
  border-color:rgba(58,168,232,.58);
}
.kbtn.style-success:hover{
  background:linear-gradient(180deg, rgba(56,211,159,.32), rgba(56,211,159,.14));
  border-color:rgba(56,211,159,.58);
}
.kbtn.style-danger:hover{
  background:linear-gradient(180deg, rgba(244,87,107,.32), rgba(244,87,107,.14));
  border-color:rgba(244,87,107,.58);
}
.kbtn.style-amber:hover{
  background:linear-gradient(180deg, rgba(245,178,77,.32), rgba(245,178,77,.14));
  border-color:rgba(245,178,77,.58);
}

.ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,.35);
  transform:scale(0); animation:ripple-anim .55s var(--ease) forwards;
}
@keyframes ripple-anim{ to{ transform:scale(2.6); opacity:0; } }

/* ============================================================
   TOAST
   ============================================================ */
.toast-stack{
  position:fixed; top:calc(14px + var(--safe-top)); left:50%; transform:translateX(-50%);
  z-index:100; display:flex; flex-direction:column; gap:8px; align-items:center;
  width:min(360px,90vw); pointer-events:none;
}
.toast{
  pointer-events:auto;
  display:flex; align-items:center; gap:9px;
  background:rgba(22,29,43,.92); backdrop-filter:blur(14px);
  border:1px solid var(--border-soft); box-shadow:var(--shadow-soft);
  color:var(--text-1); font-size:var(--fs-sm); font-weight:600;
  padding:11px 14px; border-radius:14px;
  animation:toast-in .35s var(--ease) forwards, toast-out .35s var(--ease) forwards 2.4s;
}
.toast svg{ width:16px; height:16px; color:var(--green); flex-shrink:0; }
.toast i{ font-size:16px; color:var(--green); flex-shrink:0; }
.toast.err i{ color:var(--red); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(-14px) scale(.95); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes toast-out{ to{ opacity:0; transform:translateY(-10px) scale(.96); } }

/* ============================================================
   MODAL / DROPDOWN
   ============================================================ */
.overlay{
  position:fixed; inset:0; z-index:60;
  background:rgba(5,7,12,.6); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity var(--dur-med) var(--ease);
}
.overlay.show{ opacity:1; pointer-events:auto; }

.search-modal{
  position:fixed; inset:0; z-index:85;
  display:none; flex-direction:column;
  max-width:var(--shell-max); margin:0 auto;
  padding:calc(14px + var(--safe-top)) 16px 20px;
  background:var(--bg-deep);
  pointer-events:auto;
}
.search-modal.show{ display:flex; transform:none; }
.search-field{
  display:flex; align-items:center; gap:8px;
  background:var(--surface-glass-strong); border:1px solid var(--border-soft);
  border-radius:14px; padding:10px 12px; flex-shrink:0;
}
.search-field input{ flex:1; background:transparent; border:none; outline:none; color:var(--text-1); font-family:inherit; font-size:var(--fs-md); }
.search-field input::placeholder{ color:var(--text-3); }
.search-field svg{ width:17px; height:17px; color:var(--text-3); flex-shrink:0; }
.search-field > i{ font-size:17px; color:var(--text-3); flex-shrink:0; }
.search-results{ margin-top:12px; display:flex; flex-direction:column; gap:4px; overflow:auto; flex:1; }
.search-item{
  display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:10px;
  color:var(--text-2); font-size:var(--fs-sm); cursor:pointer; transition:background var(--dur-fast);
  border:none; width:100%; text-align:right; background:transparent; font-family:inherit;
}
.search-item:hover{ background:var(--surface-glass); color:var(--text-1); }
.search-item svg{ width:15px; height:15px; color:var(--text-3); flex-shrink:0; }
.search-item i{ font-size:15px; color:var(--text-3); flex-shrink:0; }
.msg-row.is-hit .bubble{
  outline:2px solid var(--accent-1);
  box-shadow:0 0 0 4px rgba(91,124,245,.18);
}

.more-menu{
  position:absolute; left:14px; top:calc(52px + var(--safe-top));
  z-index:61; min-width:190px;
  background:rgba(18,23,34,.96); backdrop-filter:blur(16px);
  border:1px solid var(--border-soft); border-radius:16px;
  box-shadow:var(--shadow-strong); padding:6px;
  transform:scale(.92) translateY(-6px); opacity:0; pointer-events:none;
  transform-origin:top left;
  transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.more-menu.show{ transform:scale(1) translateY(0); opacity:1; pointer-events:auto; }
.menu-item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px;
  color:var(--text-1); font-size:var(--fs-sm); font-weight:600; cursor:pointer;
  transition:background var(--dur-fast);
}
.menu-item:hover{ background:var(--surface-glass); }
.menu-item svg{ width:16px; height:16px; color:var(--text-2); flex-shrink:0; }
.menu-item i{ font-size:16px; width:18px; text-align:center; color:var(--text-2); flex-shrink:0; }
.menu-item.danger svg, .menu-item.danger, .menu-item.danger i{ color:var(--red); }
.menu-sep{ height:1px; background:var(--border-softer); margin:5px 4px; }

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ============================================================
   LOGIN (same tokens as shell)
   ============================================================ */
.login-sheet{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:flex-end; justify-content:center;
  padding:18px 16px calc(18px + var(--safe-bottom));
  pointer-events:none; opacity:0;
  transition:opacity var(--dur-med) var(--ease);
}
@media (min-width:768px){
  .login-sheet{ align-items:center; }
}
.login-sheet.show{ pointer-events:auto; opacity:1; }
.login-card{
  width:min(400px,100%);
  background:rgba(18,23,34,.96);
  backdrop-filter:blur(16px);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-strong);
  padding:22px 18px 16px;
  transform:translateY(18px) scale(.98);
  transition:transform var(--dur-med) var(--ease);
}
.login-sheet.show .login-card{ transform:translateY(0) scale(1); }
.login-kicker{
  font-size:11.5px; font-weight:700; color:var(--accent-1);
  background:var(--accent-grad-soft);
  border:1px solid rgba(91,124,245,.3);
  display:inline-block; padding:2px 8px; border-radius:20px; margin-bottom:10px;
}
.login-card h2{ margin:0 0 6px; font-size:17px; font-weight:800; }
.login-card p.login-lead{ margin:0 0 16px; font-size:var(--fs-sm); color:var(--text-2); line-height:1.8; }
.login-field{
  display:flex; align-items:center; gap:8px;
  background:var(--surface-glass-strong); border:1px solid var(--border-soft);
  border-radius:14px; padding:10px 12px; margin-bottom:12px;
}
.login-field input{
  flex:1; min-width:0; background:transparent; border:none; outline:none;
  color:var(--text-1); font-family:inherit; font-size:15px; letter-spacing:.04em;
}
.login-field input::placeholder{ color:var(--text-3); letter-spacing:0; }
.login-field svg{ width:17px; height:17px; color:var(--text-3); flex-shrink:0; }
.login-submit{
  width:100%; border:none; cursor:pointer;
  background:var(--accent-grad); color:#fff;
  font-family:inherit; font-size:13.5px; font-weight:700;
  padding:12px 14px; border-radius:14px;
  transition:filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.login-submit:hover{ filter:brightness(1.08); }
.login-submit:active{ transform:scale(.98); }
.login-submit:disabled{ opacity:.55; cursor:wait; }
.login-alt{
  display:block; width:100%; margin-top:8px; background:transparent; border:none;
  color:var(--text-3); font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
}
.login-alt:hover{ color:var(--text-1); }
.otp-row{
  display:flex; gap:8px; justify-content:center; direction:ltr; margin:4px 0 14px;
}
.otp-cell{
  width:46px; height:52px; border-radius:12px; text-align:center;
  background:var(--surface-glass-strong); border:1px solid var(--border-soft);
  color:var(--text-1); font-family:inherit; font-size:20px; font-weight:700;
  outline:none;
}
.otp-cell:focus{ border-color:rgba(91,124,245,.55); }
.login-err{ min-height:18px; font-size:12.2px; color:var(--red); font-weight:600; margin:0 0 8px; }
.overlay.login-dim{ z-index:79; }

.bubble .msg-text a{ color:var(--accent-1); }
.bubble.out .msg-text a{ color:#fff; text-decoration:underline; }
.bubble img.chat-photo{
  display:block; max-width:100%; border-radius:12px; margin-bottom:6px;
}
.bubble a.chat-file{
  display:flex; align-items:center; gap:8px;
  margin-bottom:8px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  color:inherit;
  text-decoration:none;
  font-weight:700;
  font-size:13px;
}
.bubble.out a.chat-file{ background:rgba(0,0,0,.18); color:#fff; }

/* login overlay — same tokens as shell */
.login-sheet{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  padding:20px 16px;
  pointer-events:none; opacity:0;
  transition:opacity var(--dur-med) var(--ease);
}
.login-sheet.show{ pointer-events:auto; opacity:1; }
.login-card{
  width:min(420px,100%);
  background:rgba(18,23,34,.96);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-strong);
  padding:22px 20px 18px;
  transform:translateY(12px) scale(.98);
  transition:transform var(--dur-med) var(--ease);
}
.login-sheet.show .login-card{ transform:none; }
.login-kicker{ font-size:11.5px; font-weight:700; color:var(--accent-1); margin-bottom:6px; }
.login-card h2{ margin:0 0 6px; font-size:18px; font-weight:800; }
.login-card p.lead{ margin:0 0 16px; font-size:13px; color:var(--text-2); line-height:1.8; }
.login-field{
  display:flex; align-items:center; gap:8px;
  background:var(--surface-glass);
  border:1px solid var(--border-soft);
  border-radius:22px; padding:6px 8px 6px 12px;
  margin-bottom:10px;
}
.login-field:focus-within{ border-color:rgba(91,124,245,.5); background:var(--surface-glass-strong); }
.login-field input{
  flex:1; min-width:0; background:transparent; border:none; outline:none;
  color:var(--text-1); font-family:inherit; font-size:15px; padding:8px 4px;
  direction:ltr; text-align:left;
}
.login-field input::placeholder{ color:var(--text-3); }
.otp-row{ display:flex; gap:8px; justify-content:center; margin:8px 0 14px; direction:ltr; }
.otp-row input{
  width:46px; height:52px; text-align:center;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-soft);
  background:var(--surface-2); color:var(--text-1);
  font-family:inherit; font-size:20px; font-weight:700;
}
.otp-row input:focus{ outline:2px solid var(--accent-1); border-color:transparent; }
.login-submit{
  width:100%; border:none; cursor:pointer;
  padding:12px 14px; border-radius:14px;
  background:var(--accent-grad); color:#fff;
  font-family:inherit; font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.login-submit:disabled{ opacity:.55; cursor:wait; }
.login-alt{
  display:block; width:100%; margin-top:10px;
  background:transparent; border:none; color:var(--text-3);
  font-family:inherit; font-size:12.5px; cursor:pointer;
}
.login-err{ color:var(--red); font-size:12.5px; font-weight:600; min-height:1.4em; margin:0 0 8px; }
.inline-kb{ padding:0 14px 8px; }
.inline-kb .keyboard-grid{ margin-top:4px; }
.bubble img.chat-img{ display:block; max-width:100%; border-radius:12px; margin-bottom:6px; }

.back-chat-btn{
  display:none;
  align-items:center; gap:6px;
  border:none; cursor:pointer;
  background:var(--surface-glass-strong);
  color:var(--text-1);
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:7px 10px;
  font-family:inherit; font-size:13px; font-weight:700;
  white-space:nowrap;
}
.back-chat-btn i{ font-size:13px; }
.app-shell.is-panel .back-chat-btn,
.app-shell.is-channel .back-chat-btn,
.app-shell.is-support .back-chat-btn{ display:inline-flex; }
.app-shell.is-support .bot-header .bot-badge{
  background:rgba(46,184,138,.18);
  color:var(--green);
}
.app-shell.is-support-chat .chat-scroll{ display:none !important; }
.app-shell.is-support-chat .ticket-chat-scroll{
  display:flex;
  flex:1;
  min-height:0;
  flex-direction:column;
  overflow:hidden;
}
.ticket-chat-scroll{ display:none; }
.ticket-chat-inner{
  flex:1;
  overflow-y:auto;
  padding:10px 12px 16px;
}
.ticket-chat-inner .msg-row{ margin-bottom:8px; }
.app-shell.is-support-profile #panelSupport{ display:flex !important; }
.app-shell.is-support-profile .ticket-chat-scroll,
.app-shell.is-support-profile .chat-scroll,
.app-shell.is-support-profile .bottom-dock{ display:none !important; }
.app-shell.is-support-chat .bot-avatar i.fa-robot{ display:none; }
.app-shell.is-support-chat .bot-avatar i.fa-headset{ display:inline-flex; }
.bot-avatar i.fa-headset{ display:none; font-size:28px; }
.ticket-profile-code{
  margin:8px 0 0;
  font-size:12px;
  color:var(--text-3);
  direction:ltr;
  unicode-bidi:embed;
}
.msg-reply-quote{
  border-inline-start:3px solid var(--accent-1);
  padding:4px 8px;
  margin-bottom:6px;
  border-radius:8px;
  background:rgba(91,124,245,.1);
  font-size:12px;
  color:var(--text-2);
  line-height:1.5;
}
.msg-reply-quote strong{ display:block; font-size:11px; color:var(--accent-1); margin-bottom:2px; }
.msg-reply-btn{
  border:none;
  background:transparent;
  color:var(--accent-1);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  padding:2px 4px;
  margin-top:4px;
  font-family:inherit;
}
.reply-preview{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-top:1px solid var(--border-soft);
  background:var(--surface-2);
}
.reply-preview[hidden]{ display:none !important; }
.reply-preview-close{
  width:32px; height:32px; border-radius:10px; border:none;
  background:rgba(255,255,255,.06); color:var(--text-2); cursor:pointer;
}
.reply-preview-label{ display:block; font-size:11px; color:var(--accent-1); font-weight:700; }
.reply-preview-text{
  display:block;
  font-size:12px;
  color:var(--text-2);
  max-width:min(72vw, 420px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.bubble video.chat-video{
  display:block;
  max-width:100%;
  border-radius:12px;
  margin-bottom:6px;
}
.app-shell.is-panel #btnSfx,
.app-shell.is-panel #btnSearch,
.app-shell.is-panel #btnMore{ display:none; }
.app-shell.is-panel .pinned-bar,
.app-shell.is-panel .chat-scroll,
.app-shell.is-panel .bottom-dock{ display:none; }
.app-shell.is-channel:not(.is-panel) .pinned-bar,
.app-shell.is-channel:not(.is-panel) .chat-scroll{ display:none; }
.app-panel{
  display:none;
  flex:1;
  min-height:0;
  flex-direction:column;
  background:var(--bg-deep);
}
.app-shell.is-panel.is-user-settings #panelSettings,
.app-shell.is-panel.is-bot-profile #panelBot{ display:flex; }
.app-panel[hidden]{ display:none !important; }
.app-shell.is-panel.is-user-settings #panelSettings,
.app-shell.is-panel.is-bot-profile #panelBot,
.app-shell.is-panel.is-support-profile #panelSupport{ display:flex !important; }
.app-shell.is-channel #panelChannel{ display:flex !important; }
.panel-scroll{
  flex:1; overflow-y:auto;
  padding:16px 16px 24px;
}
.bot-profile-hero{
  text-align:center;
  padding:12px 8px 20px;
}
.bot-profile-avatar{
  position:relative;
  width:188px; height:188px; border-radius:50%;
  margin:8px auto 18px;
  background:var(--accent-grad); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 36px rgba(58,168,232,.28);
}
.bot-profile-avatar i{ font-size:78px; color:#fff; }
.bot-profile-avatar.has-logo{ background:transparent; }
.bot-profile-avatar.has-logo i{ display:none; }
.bot-profile-avatar .status-dot{
  width:22px; height:22px; left:8px; bottom:8px; border-width:3px;
}
.bot-profile-name{ margin:0 0 8px; font-size:26px; font-weight:800; }
.bot-profile-hero .bot-badge{ display:inline-flex; }
.bot-profile-user{
  margin:8px 0 0; color:var(--accent-1); font-weight:700; font-size:14px;
  direction:ltr; unicode-bidi:embed;
}
.bot-profile-user[hidden],
.bot-profile-bio[hidden],
.bot-profile-block[hidden]{ display:none !important; }
.bot-profile-bio{
  margin:10px 0 0; color:var(--text-2); font-size:14.5px; line-height:1.8;
}
.bot-profile-block{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:18px;
  padding:14px 16px;
}
.bot-profile-label{
  font-size:12px; font-weight:700; color:var(--accent-1); margin-bottom:6px;
}
.bot-profile-about{
  margin:0; color:var(--text-1); font-size:14.5px; line-height:1.9;
  white-space:pre-line;
}
.panel-sub{ margin:0 0 16px; color:var(--text-2); font-size:14px; }
.panel-hint{ display:block; margin:.35rem 0 0; color:var(--text-3); font-size:12.5px; font-weight:500; }
.profile-card{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:18px;
  padding:16px;
}
.profile-card .field-label{ display:block; margin:12px 0 6px; font-size:13px; color:var(--text-2); font-weight:600; }
.profile-card input[type="text"]{
  width:100%; padding:11px 12px;
  border-radius:12px; border:1px solid var(--border-soft);
  background:var(--surface-2); color:var(--text-1);
  font-family:inherit; font-size:15px;
}
.profile-avatar-btn{
  position:relative;
  width:84px; height:84px; border-radius:50%;
  border:none; cursor:pointer;
  background:var(--accent-grad); color:#fff;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; margin:0 auto;
}
.profile-avatar-btn.has-photo{ background:transparent; }
.profile-avatar-btn i{ font-size:32px; }
.profile-avatar-btn i[hidden],
.profile-avatar-btn img[hidden]{ display:none !important; }
.profile-avatar-btn img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.profile-card .primary-btn{ margin-top:16px; }
.theme-row{
  width:100%; display:flex; align-items:center; gap:12px; text-align:right;
  border:1px solid var(--border-soft); background:var(--surface);
  border-radius:16px; padding:12px; cursor:pointer; color:var(--text-1);
  font-family:inherit;
}
.theme-row strong{ display:block; font-size:15px; }
.theme-row-icon{
  width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-grad-soft); color:var(--accent-1); font-size:18px;
}

.pay-lock-banner{
  margin: 0 12px 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(232, 140, 48, .16);
  border: 1px solid rgba(232, 140, 48, .45);
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}
body.pay-lock #msgInput,
body.pay-lock #btnSend,
body.pay-lock #btnEmoji,
body.pay-lock #btnMic{
  pointer-events: none;
  opacity: .38;
}
body.pay-lock #btnAttach{
  box-shadow: 0 0 0 2px rgba(232, 140, 48, .85);
  border-radius: 12px;
}
body.pay-lock .drawer-item:not(#miTheme):not(#miLogout){
  pointer-events: none;
  opacity: .4;
}
body.pay-lock #drawerPages{ pointer-events: none; opacity: .4; }
  width:min(320px, 88vw);
  background:rgba(14,18,28,.98);
  border-right:1px solid var(--border-soft);
  box-shadow:var(--shadow-strong);
  transform:translateX(-105%);
  transition:transform var(--dur-med) var(--ease);
  display:flex; flex-direction:column;
  padding-top:var(--safe-top);
}
.side-drawer.show{ transform:translateX(0); }
.drawer-head{
  display:flex; align-items:center; gap:12px;
  padding:18px 16px 14px;
  background:linear-gradient(180deg, rgba(58,168,232,.16), transparent);
}
.drawer-avatar{
  position:relative;
  width:52px; height:52px; border-radius:50%;
  background:var(--accent-grad); color:#fff;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0;
}
.drawer-avatar.has-photo{ background:transparent; }
.drawer-avatar i{ font-size:22px; }
.drawer-avatar i[hidden],
.drawer-avatar img[hidden]{ display:none !important; }
.drawer-avatar img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.drawer-id{ min-width:0; }
.drawer-id strong{ display:block; font-size:16px; }
.drawer-id span{ display:block; font-size:12.5px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drawer-nav{ padding:8px; overflow-y:auto; flex:1; }
.drawer-item{
  width:100%; display:flex; align-items:center; gap:12px;
  background:transparent; border:none; color:var(--text-1);
  font-family:inherit; font-size:14.5px; font-weight:600;
  padding:11px 12px; border-radius:12px; cursor:pointer; text-align:right;
}
.drawer-item i{ width:22px; text-align:center; color:var(--text-2); }
.drawer-item:hover{ background:var(--surface-glass); }
.drawer-item.danger, .drawer-item.danger i{ color:var(--red); }
.drawer-sep{ height:1px; background:var(--border-softer); margin:6px 8px; }
body.is-authed #miLogin{ display:none; }
body:not(.is-authed) #miLogout,
body:not(.is-authed) #miSettings{ display:none; }

body.theme-light{
  --bg-void:#e8eef6;
  --bg-deep:#f4f7fb;
  --bg-aurora-1:#c9ddf5;
  --bg-aurora-2:#d9d4f0;
  --surface:#ffffff;
  --surface-2:#eef2f8;
  --surface-glass:rgba(20,30,50,0.05);
  --surface-glass-strong:rgba(20,30,50,0.08);
  --border-soft:rgba(20,30,50,0.12);
  --border-softer:rgba(20,30,50,0.08);
  --text-1:#1c2433;
  --text-2:#3d4758;
  --text-3:#5c6778;
  --dock-from:rgba(244,247,251,.92);
  --dock-mid:rgba(244,247,251,.98);
  --green:#0f8a62;
  --red:#c4334a;
  --amber:#b06a12;
  --gold:#9a6b1a;
  --accent-1:#1a7ab0;
  --accent-2:#3d5bd4;
}
body.theme-light .aurora{ opacity:.55; }
body.theme-light .app-shell{
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(244,247,251,.97));
}
body.theme-light .bot-header,
body.theme-light .top-bar{
  background:rgba(255,255,255,.94);
}
body.theme-light .side-drawer{
  background:#fff;
}
body.theme-light .kbtn.style-default{
  background:#fff;
  color:#1c2433;
  border-color:rgba(20,30,50,.14);
}
body.theme-light .kbtn.style-default .kb-icon{
  background:rgba(20,30,50,.08);
  color:#1c2433;
}
body.theme-light .kbtn.style-default:hover{
  background:#f3f6fb;
  border-color:rgba(20,30,50,.2);
}
body.theme-light .kbtn.style-primary{
  background:linear-gradient(180deg, #d8eefc, #c5e4f6);
  border-color:#6db6de;
  color:#0a4568;
}
body.theme-light .kbtn.style-primary .kb-icon{
  background:rgba(10,69,104,.14);
  color:#0a4568;
}
body.theme-light .kbtn.style-success{
  background:linear-gradient(180deg, #d4f3e8, #c0eadc);
  border-color:#62c49f;
  color:#0b5a40;
}
body.theme-light .kbtn.style-success .kb-icon{
  background:rgba(11,90,64,.14);
  color:#0b5a40;
}
body.theme-light .kbtn.style-danger{
  background:linear-gradient(180deg, #f8d7dc, #f0c4cb);
  border-color:#e08a96;
  color:#8a1c2e;
}
body.theme-light .kbtn.style-danger .kb-icon{
  background:rgba(138,28,46,.14);
  color:#8a1c2e;
}
body.theme-light .kbtn.style-amber{
  background:linear-gradient(180deg, #f8e6c4, #f0d6a4);
  border-color:#e0b56a;
  color:#7a4e0c;
}
body.theme-light .kbtn.style-amber .kb-icon{
  background:rgba(122,78,12,.14);
  color:#7a4e0c;
}
body.theme-light .composer{
  background:#fff;
  border-color:rgba(20,30,50,.12);
  box-shadow:0 8px 20px rgba(20,30,50,.08), inset 0 1px 0 rgba(255,255,255,.8);
}
body.theme-light .composer input{ color:#1c2433; }
body.theme-light .toast{
  background:#fff;
  color:#1c2433;
  border-color:rgba(20,30,50,.12);
  box-shadow:0 12px 28px rgba(20,30,50,.14);
}
body.theme-light .more-menu,
body.theme-light .emoji-sheet,
body.theme-light .login-card{
  background:#fff;
  color:#1c2433;
  border-color:rgba(20,30,50,.12);
  box-shadow:0 12px 32px rgba(20,30,50,.14);
}
body.theme-light .menu-item{ color:#1c2433; }
body.theme-light .emoji-sheet button:hover{ background:rgba(20,30,50,.06); }
body.theme-light .rec-time,
body.theme-light .rec-pause{ color:#1c2433; }
body.theme-light .rec-pause{
  border-color:rgba(20,30,50,.14);
  background:rgba(20,30,50,.06);
}
body.theme-light .tool-btn.is-on{
  color:#1a7ab0;
  background:rgba(26,122,176,.14);
}
body.theme-light .chat-scroll::-webkit-scrollbar-thumb{
  background:rgba(20,30,50,.18);
}
body.theme-light .bubble.in{
  background:#fff;
  color:#1c2433;
  border-color:rgba(20,30,50,.08);
  box-shadow:0 2px 10px -4px rgba(20,30,50,.16);
}
body.theme-light .card-msg{ background:rgba(20,30,50,.04); }

.ch-feed{
  flex:1; min-height:0; overflow-y:auto;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='%23ffffff' fill-opacity='.035'%3E%3Cpath d='M20 20h8v2h-8zm40 30h6v2h-6zm80 10h10v2h-10zM50 90h7v2h-7zm90 40h9v2h-9zM10 140h12v2H10z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #0e1621 0%, #0b121c 40%, #17212b 100%);
}
.ch-info{
  text-align:center;
  padding:28px 18px 20px;
  background:rgba(0,0,0,.18);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ch-info-avatar{
  width:92px; height:92px; border-radius:50%;
  margin:0 auto 12px;
  background:var(--accent-grad); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px rgba(58,168,232,.28);
}
.ch-info-avatar i{ font-size:34px; }
.ch-title{ margin:0; font-size:20px; font-weight:800; }
.ch-user{
  margin:4px 0 0; color:#6ab3f3; font-weight:700; font-size:13.5px;
  direction:ltr; unicode-bidi:embed;
}
.ch-user:empty{ display:none; }
.ch-about{
  margin:10px auto 0; max-width:420px;
  color:rgba(255,255,255,.72); font-size:13.5px; line-height:1.75;
}
.ch-about:empty{ display:none; }
.ch-subs{ margin:8px 0 0; color:rgba(255,255,255,.45); font-size:12.5px; }
.ch-posts{
  padding:10px 8px 28px;
  display:flex; flex-direction:column; gap:8px;
  max-width:560px; margin:0 auto; width:100%;
}
.ch-day{
  align-self:center;
  margin:10px 0 6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(24,37,51,.78);
  color:#fff;
  font-size:12px; font-weight:700;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.ch-msg{
  width:fit-content;
  max-width:min(100%, 420px);
  margin-inline-end:auto;
  background:#182533;
  border-radius:14px 14px 4px 14px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.28);
}
.ch-msg.is-wide{ width:min(100%, 420px); }
.ch-msg.is-media{ padding:0; }
.ch-media{
  position:relative;
  background:#000;
  line-height:0;
}
.ch-media img,
.ch-media video,
.ch-media audio{
  display:block; width:100%; height:auto;
  object-fit:contain; background:#000;
}
.ch-media.is-portrait{
  width:min(268px, 100%);
}
.ch-media.is-portrait img,
.ch-media.is-portrait video{
  max-height:min(72vh, 520px);
}
.ch-media.is-landscape{
  width:min(100%, 420px);
}
.ch-media.is-landscape img,
.ch-media.is-landscape video{
  max-height:min(52vh, 360px);
}
.ch-media.is-square{
  width:min(320px, 100%);
}
.ch-media.is-square img,
.ch-media.is-square video{
  max-height:min(56vh, 380px);
}
.ch-caption{
  padding:7px 10px 5px;
  white-space:pre-wrap;
  font-size:15px; line-height:1.55;
  color:#fff;
}
.ch-caption:empty{ display:none; }
.ch-foot{
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
  padding:0 8px 6px;
  font-size:11px; color:#8ea4b8; font-variant-numeric:tabular-nums;
}
.ch-msg.is-media.has-caption .ch-foot{ padding-top:2px; }
.ch-media .ch-foot{
  position:absolute; left:8px; bottom:6px; right:auto;
  padding:2px 6px;
  border-radius:8px;
  background:rgba(0,0,0,.45);
  color:#fff;
}
.ch-msg.has-caption .ch-media .ch-foot{ display:none; }
.ch-views{ display:inline-flex; align-items:center; gap:4px; }
.ch-views i{ font-size:11px; opacity:.9; }
.ch-empty{
  text-align:center; color:rgba(255,255,255,.5); padding:36px 12px; font-size:14px;
}
body.theme-light .ch-feed{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='%23000000' fill-opacity='.04'%3E%3Cpath d='M20 20h8v2h-8zm40 30h6v2h-6zm80 10h10v2h-10zM50 90h7v2h-7zm90 40h9v2h-9zM10 140h12v2H10z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #c8d9e8 0%, #dbe6ef 100%);
}
body.theme-light .ch-info{
  background:rgba(255,255,255,.55);
  border-bottom-color:rgba(20,30,50,.08);
}
body.theme-light .ch-title{ color:#1c2433; }
body.theme-light .ch-about{ color:#3a4658; }
body.theme-light .ch-subs{ color:#66758a; }
body.theme-light .ch-day{
  background:rgba(255,255,255,.86);
  color:#3a4658;
}
body.theme-light .ch-msg{
  background:#fff;
  box-shadow:0 1px 2px rgba(20,30,50,.12);
}
body.theme-light .ch-caption{ color:#1c2433; }
body.theme-light .ch-foot{ color:#7a8b9c; }
body.theme-light .ch-empty{ color:#66758a; }

.inline-kb{ padding:0 14px 8px; }
.inline-kb .keyboard-grid{ margin-top:4px; }
.bubble img.chat-img{ display:block; max-width:100%; border-radius:12px; margin-bottom:6px; }