*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
}
:focus, :focus-visible {
  outline: none !important;
}
:root{
  --bg:#F2F2F7; --card:#FFFFFF; --ink:#0A0A0C; --s:#6E6E73; --t:#AEAEB2;
  --line:#E7E7EC; --blue:#007AFF; --blue-soft:#E9F2FF; --red:#FF3B30; --red-soft:#FFF0EF;
  --green:#34C759; --out:#E7F9D8; --r:14px;
}
html,body{
  height:100%;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Inter,Arial,sans-serif;
  background:#DFE2E8;color:var(--ink);-webkit-font-smoothing:antialiased;overflow:hidden;
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important;
}
button{
  font:inherit;color:inherit;background:none;border:0;cursor:pointer;
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important;
  outline: none;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
a {
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important;
  outline: none;
  -webkit-touch-callout: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
}
input, textarea, select {
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important;
  outline: none;
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}
img, video, audio {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
}
.cell, .mrow, .drow, .v, .st, .tab, .seg button, .orow, .nbtn, .bigbtn, .ghost, .themebtn, .q, .faq-item {
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
.phone{
  height:100dvh;max-width:430px;margin:0 auto;background:var(--bg);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
}
@media(min-width:520px){
  body{display:flex;align-items:center;justify-content:center;padding:28px}
  .phone{
    height:min(880px,calc(100dvh - 56px));border-radius:44px;
    box-shadow:0 30px 80px rgba(10,15,30,.30),0 0 0 10px #0B0D12,0 0 0 12px rgba(255,255,255,.15);
  }
}

/* splash */
#splash{
  position:absolute;inset:0;z-index:200;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  transition:opacity .4s ease;
}
#splash.gone{opacity:0;pointer-events:none}
#splash b{font-size:26px;font-weight:700;letter-spacing:-.02em}
#splash p{font-size:14px;color:var(--s);font-weight:500;margin-bottom:8px}
.bar{width:120px;height:4px;border-radius:4px;background:#ECECF0;overflow:hidden}
.bar i{display:block;height:100%;width:40%;border-radius:4px;background:var(--blue);animation:slide 1s infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}

/* nav */
.nav{
  background:rgba(255,255,255,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:.5px solid var(--line);padding:12px 16px 10px;z-index:20;
}
.nav .row1{display:flex;align-items:center;gap:10px}
.big{font-size:28px;font-weight:700;letter-spacing:-.02em;flex:1}
.nbtn{
  width:34px;height:34px;border-radius:50%;background:#EFEFF3;
  display:flex;align-items:center;justify-content:center;color:#3A3A3C;
}
.nbtn:active{transform:scale(.92)}
.search{
  margin-top:10px;display:flex;align-items:center;gap:7px;
  background:#E8E8ED;border-radius:11px;padding:8px 11px;color:#8E8E93;font-size:15px;
}
.search input{flex:1;border:0;outline:0;background:transparent;font-size:15px;color:var(--ink)}
.seg{margin-top:10px;display:flex;background:#E8E8ED;border-radius:11px;padding:2px}
.seg button{
  flex:1;padding:7px 4px;font-size:13px;font-weight:600;color:#6E6E73;
  border-radius:9px;white-space:nowrap;transition:background .15s,color .15s;
}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* content */
main{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:12px 12px calc(92px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling:touch;position:relative;
  touch-action: pan-y !important;
}
.view{display:none;width:100%}
.view.on{display:block;animation:slideFromRight .26s cubic-bezier(0.16, 1, 0.3, 1) forwards}
.view.on.slide-left{animation:slideFromLeft .26s cubic-bezier(0.16, 1, 0.3, 1) forwards}
.view.on.slide-right{animation:slideFromRight .26s cubic-bezier(0.16, 1, 0.3, 1) forwards}

@keyframes slideFromRight{0%{opacity:0;transform:translateX(32px)}100%{opacity:1;transform:translateX(0)}}
@keyframes slideFromLeft{0%{opacity:0;transform:translateX(-32px)}100%{opacity:1;transform:translateX(0)}}
@keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.group{background:var(--card);border-radius:var(--r);overflow:hidden}

/* chat cell */
.cell{
  display:flex;gap:12px;align-items:center;padding:11px 14px 11px 12px;
  position:relative;cursor:pointer;width:100%;text-align:left;
}
.cell + .cell::before{content:"";position:absolute;left:66px;right:0;top:0;height:.5px;background:var(--line)}
.cell:active{background:#F5F5F7}
.av{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;position:relative;overflow:hidden;
  background:#D9DCE2;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:18px;color:#fff;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
}
.av img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
}
.av.online::after{
  content:"";position:absolute;right:1px;bottom:1px;width:13px;height:13px;
  border-radius:50%;background:var(--green);border:2.5px solid #fff;
}
.mid{flex:1;min-width:0}
.top{display:flex;align-items:baseline;gap:8px}
.top b{font-size:16px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top time{margin-left:auto;font-size:13px;color:#8E8E93;flex-shrink:0;font-variant-numeric:tabular-nums}
.sub{font-size:14px;color:#8E8E93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.sub.del{color:var(--red)}
.right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.unread{
  min-width:21px;height:21px;border-radius:11px;background:var(--blue);
  color:#fff;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 6px;
}
.pinmark{color:#AEAEB2}
.note{
  display:flex;gap:9px;align-items:flex-start;background:#fff;border-radius:var(--r);
  padding:12px 13px;font-size:13px;line-height:1.5;color:#3A3A3C;margin-bottom:12px;
}
.note .ic{
  width:28px;height:28px;border-radius:50%;background:var(--blue-soft);
  color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.note button{color:var(--blue);font-weight:700;white-space:nowrap}
.sec{font-size:13px;font-weight:600;color:#8E8E93;text-transform:uppercase;letter-spacing:.04em;margin:18px 4px 7px}
.sec:first-child{margin-top:2px}

/* deleted feed */
.drow{display:flex;gap:12px;padding:13px 14px 13px 12px;position:relative}
.drow + .drow::before{content:"";position:absolute;left:0;right:0;top:0;height:.5px;background:var(--line)}
.dic{
  width:38px;height:38px;border-radius:50%;background:var(--red-soft);
  color:var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.dbody{flex:1;min-width:0}
.dbody .who{font-size:14px;font-weight:600}
.dbody .when{font-size:12px;color:#8E8E93;margin-top:1px}
.q{margin-top:8px;background:#F6F6F8;border-radius:10px;padding:9px 11px;font-size:14px;line-height:1.5;word-break:break-word}
.q img{
  width:100%;border-radius:8px;margin-bottom:7px;display:block;max-height:190px;object-fit:cover;cursor:pointer;
  pointer-events:none !important;
  -webkit-touch-callout:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
  user-drag:none !important;
}
.dfoot{display:flex;gap:14px;margin-top:9px}
.link{color:var(--blue);font-size:14px;font-weight:600}

/* stories + grid */
.stories{display:flex;gap:13px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.st{flex-shrink:0;width:68px;text-align:center;cursor:pointer}
.ring{
  width:62px;height:62px;border-radius:50%;padding:2.5px;
  background:conic-gradient(from 200deg,#FF9F43,#FF3B30,#AF52DE,#007AFF,#FF9F43);
}
.ring.seen{background:#D9D9DE}
.ring .in{width:100%;height:100%;border-radius:50%;border:3px solid #fff;overflow:hidden;background:#C9CDD4}
.ring img{
  width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none !important;
  -webkit-touch-callout:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
  user-drag:none !important;
}
.st span{font-size:11.5px;color:#3A3A3C;display:block;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.v{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5;cursor:pointer;background:#D5D9DF}
.v img{
  width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none !important;
  -webkit-touch-callout:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
  user-drag:none !important;
}
.v .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.14),transparent 35%,transparent 55%,rgba(0,0,0,.5))}
.v .who2{position:absolute;left:9px;bottom:8px;right:9px;color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v .tm{
  position:absolute;top:8px;right:8px;background:rgba(0,0,0,.55);
  color:#fff;font-size:11.5px;font-weight:700;border-radius:8px;padding:3px 7px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

/* ai assistant */
.aihead{background:var(--card);border-radius:var(--r);padding:14px;display:flex;gap:12px;align-items:center;margin-bottom:12px}
.aiava{width:44px;height:44px;border-radius:50%;background:#0A0A0C;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.modelpill{display:flex;align-items:center;gap:6px;background:#F1F1F4;border-radius:20px;padding:7px 12px;font-size:13px;font-weight:600}
.msg{margin-bottom:12px;display:flex;gap:8px}
.msg.me{justify-content:flex-end}
.ubub{
  max-width:82%;background:var(--blue);color:#fff;border-radius:19px 19px 5px 19px;
  padding:10px 14px;font-size:15px;line-height:1.5;word-break:break-word;
}
.abub{font-size:15px;line-height:1.6;padding:2px 4px;max-width:100%;word-break:break-word}
.abub p{margin:0 0 8px}
.abub p:last-child{margin-bottom:0}
.abub hr{border:none;height:1px;background:var(--line);margin:10px 0}
.abub a{color:var(--blue);text-decoration:underline;text-underline-offset:2.5px;word-break:break-all}
.abub a:hover{opacity:.85}
.abub table{width:100%;border-collapse:collapse;margin:10px 0;font-size:13.5px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.abub th,.abub td{padding:8px 10px;text-align:left;border-bottom:.5px solid var(--line)}
.abub th{background:rgba(0,0,0,.04);font-weight:600;color:var(--ink)}
.abub tr:last-child td{border-bottom:none}
.abub ul,.abub ol{margin:6px 0 8px 18px;padding:0}
.abub li{margin-bottom:3px}
.abub code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:rgba(0,0,0,.06);padding:2px 5px;border-radius:5px}

/* Code Block & Syntax Highlighting in AI Chat */
.code-box {
  background: #141417 !important;
  border-radius: 10px !important;
  margin: 9px 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  text-align: left !important;
}
.code-box-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 5px 9px !important;
  background: #1A1A1E !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}
.code-box-lang {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #8E8E93 !important;
  text-transform: lowercase !important;
  letter-spacing: 0.3px !important;
}
.code-copy-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #AEAEB2 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.code-copy-btn:active {
  background: rgba(255, 255, 255, 0.15) !important;
  transform: scale(0.96);
}
.code-box pre {
  margin: 0 !important;
  padding: 8px 10px !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow-x: auto !important;
  font-size: 11.5px !important;
  line-height: 1.42 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  color: #E6EDF3 !important;
  white-space: pre !important;
  tab-size: 2 !important;
  scrollbar-width: thin !important;
}
.code-box pre code {
  background: transparent !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: 11.5px !important;
  line-height: 1.42 !important;
  font-family: inherit !important;
  border-radius: 0 !important;
}

/* Syntax Highlighting Colors */
.hl-kw { color: #FF7B72 !important; font-weight: 600 !important; }
.hl-fn { color: #79C0FF !important; }
.hl-str { color: #A5D6FF !important; }
.hl-comm { color: #8B949E !important; font-style: italic !important; }
.hl-num { color: #FFA657 !important; }
.hl-type { color: #FFD369 !important; font-weight: 500 !important; }
.hl-tag { color: #7EE787 !important; }

.abub blockquote{border-left:3px solid var(--blue);margin:8px 0;padding-left:10px;color:var(--s)}
.abub .card-in{background:#fff;border-radius:12px;padding:12px 13px;margin-top:9px;font-size:14px}

/* Modern AI Actions Toolbar (ChatGPT / Claude / Perplexity style: transparent, borderless, sleek) */
.ai-actions-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 2px;
}
.ai-act-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  outline: none;
  color: #8E8E93;
  padding: 5px 9px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.16s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ai-act-btn:hover {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.05);
}
.ai-act-btn:active {
  transform: scale(0.95);
}
.ai-act-btn svg {
  flex-shrink: 0;
}
.ai-act-btn.playing {
  color: var(--blue);
  background: rgba(0, 122, 255, 0.1);
  font-weight: 600;
}
.ai-act-btn.loading {
  opacity: 0.6;
}

html[data-theme="dark"] .ai-act-btn {
  color: #8E8E93;
}
html[data-theme="dark"] .ai-act-btn:hover {
  color: #F5F5F7;
  background: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .ai-act-btn.playing {
  color: #5AA9FF;
  background: rgba(90, 169, 255, 0.15);
}

#segProvider button {
  padding: 8px 4px;
  font-size: 13.5px;
  font-weight: 600;
}

/* Voice Message Card for Fish Audio */
.ai-voice-msg-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 122, 255, 0.09);
  border: 1px solid rgba(0, 122, 255, 0.18);
  border-radius: 13px;
  padding: 8px 12px;
  margin-bottom: 8px;
  transition: background 0.2s;
}
.ai-vm-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.ai-vm-play-btn:active {
  transform: scale(0.92);
}
.ai-vm-track {
  display: flex;
  flex-direction: column;
}
.ai-vm-title {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
}
.ai-vm-sub {
  font-size: 11.5px;
  color: var(--s);
}
.ai-voice-msg-card.playing {
  background: rgba(0, 122, 255, 0.16);
}

html[data-theme="dark"] .ai-voice-msg-card {
  background: rgba(10, 132, 255, 0.14);
  border-color: rgba(10, 132, 255, 0.24);
}
html[data-theme="dark"] .ai-vm-title {
  color: #fff;
}

.b.b-plain{background:transparent!important;box-shadow:none!important;padding:2px!important;border:none!important}
.b.b-plain .m{background:rgba(0,0,0,.45);color:#fff!important;display:inline-block;padding:2px 7px;border-radius:10px;font-size:10.5px;float:right;margin-top:4px}
.sug2{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:4px 0 12px}
.sug2 button{background:#fff;border-radius:14px;padding:13px;text-align:left;font-size:13.5px;line-height:1.4}
.sug2 button:active{transform:scale(.98)}
.sug2 b{display:flex;align-items:center;gap:6px;font-size:13.5px;margin-bottom:3px}
.typing{display:inline-flex;gap:4px;background:#fff;border-radius:14px;padding:12px 14px}
.typing i{
  width:7px;height:7px;border-radius:50%;background:#C7C7CC;
  animation:bl 1.1s infinite;
}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes bl{0%,100%{opacity:.35}50%{opacity:1}}
.composer{
  position:sticky;bottom:0;display:flex;flex-direction:column;gap:6px;
  background:var(--bg);padding:8px 0 2px;
}
.composer-row{display:flex;gap:8px;align-items:flex-end;width:100%}
.field{flex:1;background:#fff;border-radius:22px;display:flex;align-items:center;padding:5px 5px 5px 14px;gap:6px}
.field textarea{flex:1;border:0;outline:0;resize:none;font:inherit;font-size:15px;max-height:110px;background:transparent;padding:8px 0}
.plus{width:32px;height:32px;border-radius:50%;color:#8E8E93;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sendb{width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sendb:active{transform:scale(.9)}

/* ai thought box & file chip */
.ai-thought-box{
  background:#F2F2F7;border-radius:12px;padding:8px 12px;margin-bottom:10px;
  font-size:13px;color:var(--s);border:.5px solid var(--line);
}
.ai-thought-box summary{cursor:pointer;font-weight:600;user-select:none;outline:none}
.ai-thought-text{margin-top:6px;font-size:12.5px;line-height:1.5;white-space:pre-wrap}
.ai-file-chip-wrap{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px}
.ai-file-chip{
  display:inline-flex;align-items:center;gap:6px;background:var(--blue-soft);
  color:var(--blue);border-radius:8px;padding:5px 9px;font-size:12.5px;font-weight:600;
}
.ai-file-chip button{color:var(--blue);font-size:14px;display:flex;align-items:center}

/* more tab */
.me-card{background:#fff;border-radius:18px;padding:18px;display:flex;gap:13px;align-items:center;margin-bottom:6px}
.me-card .av{width:60px;height:60px;font-size:21px}
.me-card b{font-size:17px}
.me-card p{font-size:13px;color:var(--s);margin-top:2px}
.mrow{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:12px 14px 12px 12px;position:relative;font-size:15px;
}
.mrow + .mrow::before{content:"";position:absolute;left:52px;right:0;top:0;height:.5px;background:var(--line)}
.mrow:active{background:#F5F5F7}
.mrow-content,
.sq + span{
  flex:1;min-width:0;display:flex;flex-direction:column;
}
.mrow small{
  display:block;font-size:13px;color:var(--s);margin-top:2px;line-height:1.4;
  font-weight:normal;
}
.cmd-row-top{
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;line-height:1.3;
}
.cmd-code{
  font-weight:700;font-size:15px;color:var(--blue);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
.cmd-title{
  font-weight:600;font-size:13px;color:var(--ink);letter-spacing:0.01em;
}
.sq{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.chev{margin-left:auto;color:#C7C7CC;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}
.faq-item{position:relative}
.faq-item + .faq-item::before{content:"";position:absolute;left:16px;right:0;top:0;height:.5px;background:var(--line)}
.faq-item.open .chev{transform:rotate(90deg);color:var(--blue)!important}
.faq-a{display:none;padding:2px 14px 14px 16px;font-size:13.5px;color:#3A3A3C;line-height:1.55}
.faq-item.open .faq-a{display:block}

/* tabbar */
.tabbar{
  position:absolute;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.88);backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-radius:26px;border:.5px solid rgba(0,0,0,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.04);
  display:flex;padding:6px 4px;z-index:40;
  -webkit-user-select:none;user-select:none;
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:10.5px;font-weight:600;color:#8E8E93;padding:4px 2px;position:relative;
  border-radius:18px;transition:color .18s ease, transform .12s ease;
  -webkit-tap-highlight-color:transparent!important;outline:none;
}
.tab:active{transform:scale(.92)}
.tab.on{color:var(--blue)}
.tab svg{transition:transform .18s ease}
.tab.on svg{transform:scale(1.06)}
.tab .bdg{
  position:absolute;top:1px;right:calc(50% - 20px);min-width:17px;height:17px;
  border-radius:9px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid #fff;
}

/* thread screen */
#thread{
  position:absolute;inset:0;z-index:60;background:#E5E0D8;
  display:flex;flex-direction:column;
  transform:translateX(100%);pointer-events:none;visibility:hidden;
  transition:transform .28s cubic-bezier(0.16, 1, 0.3, 1), visibility .28s;
  will-change:transform;
}
#thread.open{
  transform:translateX(0);pointer-events:auto;visibility:visible;
}
.thead{
  background:rgba(255,255,255,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:.5px solid var(--line);padding:8px 10px;display:flex;align-items:center;gap:6px;
}
.thead .who{flex:1;min-width:0;text-align:center;cursor:pointer}
.thead .who b{font-size:15px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thead .who span{font-size:12px;color:#8E8E93}
#msgs{flex:1;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:5px;-webkit-overflow-scrolling:touch}
.day{
  align-self:center;background:rgba(255,255,255,.75);font-size:12px;font-weight:600;
  color:#6E6E73;border-radius:12px;padding:4px 11px;margin:6px 0;
}
.b{max-width:78%;padding:8px 12px;border-radius:18px;font-size:15px;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.07);word-break:break-word}
.b.in{background:#fff;align-self:flex-start;border-bottom-left-radius:5px}
.b.out{background:var(--out);align-self:flex-end;border-bottom-right-radius:5px}
.b .m{font-size:11px;color:#8E8E93;text-align:right;margin-top:2px}
.b.del{background:#FFF3F2;border:1px dashed #FF9D97;align-self:flex-start;color:#7A1F1A}
.b.del .dh{font-size:12px;font-weight:700;color:var(--red);margin-bottom:4px}
.b.vo{background:#FFF9E6;border:1px solid #FFE082;align-self:flex-start;color:#7A5300;border-bottom-left-radius:5px}
.b.vo .vo-header{font-size:11px;font-weight:700;color:#D97706;margin-bottom:4px;display:flex;align-items:center;gap:4px;text-transform:uppercase;letter-spacing:.3px}
.b.vo .m{color:#B45309}
.b.vo .voice-card{background:rgba(245,158,11,.12)}
.b.vo .voice-title{color:#D97706}
.b.vo .voice-wave i{background:#F59E0B}
.b.vo .voice-btn{background:#F59E0B;box-shadow:0 2px 8px rgba(245,158,11,.35)}
.b.vo .video-note-bubble{border:2.5px solid #F59E0B;box-shadow:0 0 14px rgba(245,158,11,.35)}
.b img.ph{
  width:100%;border-radius:10px;margin-bottom:6px;display:block;max-height:230px;object-fit:cover;cursor:pointer;
  pointer-events:none !important;
  -webkit-touch-callout:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
  user-drag:none !important;
}
.tfoot{background:rgba(255,255,255,.95);border-top:.5px solid var(--line);padding:9px 14px;font-size:12.5px;color:#8E8E93;text-align:center}

/* sheets */
.sheet{
  position:absolute;inset:0;z-index:80;background:rgba(0,0,0,0);
  display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;visibility:hidden;
  transition:background .28s ease, visibility .28s ease;
}
.sheet.open{
  pointer-events:auto;visibility:visible;background:rgba(0,0,0,.45);
}
.scard{
  background:#F2F2F7;border-radius:24px 24px 0 0;width:100%;max-height:88%;
  overflow-y:auto;padding:8px 12px calc(24px + env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform .30s cubic-bezier(0.16, 1, 0.3, 1);
  will-change:transform;
}
.sheet.open .scard{
  transform:translateY(0);
}
.grab{width:38px;height:5px;border-radius:3px;background:#C7C7CC;margin:8px auto 10px}
.scard h3{font-size:17px;text-align:center;margin-bottom:2px}
.scard .ss{font-size:13px;color:var(--s);text-align:center;margin-bottom:12px}
.orow{
  display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;
  padding:12px 13px;margin-bottom:8px;font-size:15px;width:100%;text-align:left;
}
.orow .tick{margin-left:auto;color:var(--blue);font-weight:700;display:none}
.orow.sel .tick{display:block}
.bigbtn{
  background:var(--blue);color:#fff;border-radius:13px;padding:14px;
  font-size:16px;font-weight:700;width:100%;margin-top:6px;text-align:center;
}
.bigbtn:active{opacity:.85}
.ghost{
  background:#fff;border-radius:13px;padding:14px;font-size:16px;
  font-weight:600;width:100%;margin-top:8px;color:var(--blue);text-align:center;
}
.phead{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 0 4px}
.phead .av{width:84px;height:84px;font-size:30px;margin-bottom:9px}
.phead b{font-size:20px}
.phead span{font-size:13px;color:var(--s)}

/* lightbox */
#light{
  position:absolute;inset:0;z-index:90;background:#000;
  display:flex;flex-direction:column;color:#fff;
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .24s ease, visibility .24s ease;
}
#light.open{
  opacity:1;pointer-events:auto;visibility:visible;
}
#light img{
  max-width:100%;max-height:100%;object-fit:contain;
  -webkit-touch-callout:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
  user-drag:none !important;
}

/* toast */
#toast{
  position:absolute;left:50%;bottom:calc(82px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(10px);
  background:rgba(20,20,22,.94);color:#fff;font-size:13.5px;font-weight:600;
  border-radius:14px;padding:11px 18px;opacity:0;pointer-events:none;
  transition:opacity .25s ease, transform .25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index:120;white-space:nowrap;max-width:92%;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.ic16{flex-shrink:0}

/* empty states */
.empty-box{text-align:center;color:#8E8E93;padding:36px 16px;font-size:14px;line-height:1.5}
.empty-icon{font-size:32px;margin-bottom:8px}

/* autoresponder button */
#arsw.on{background:#E6F6EB!important;color:#1E9E62!important}

/* ===== ТЁМНАЯ ТЕМА ===== */
html[data-theme="dark"]{
  --bg:#000;--card:#1C1C1F;--ink:#F5F5F7;--s:#9C9CA3;--t:#636366;
  --line:#2C2C30;--blue:#0A84FF;--blue-soft:#16324F;--red:#FF453A;
  --red-soft:#3A1D1D;--green:#30D158;--out:#2B5278;
}
html[data-theme="dark"] body{background:#000}
html[data-theme="dark"] .phone{background:#000}
html[data-theme="dark"] #splash{background:#0B0B0D;color:#F5F5F7}
html[data-theme="dark"] #splash p{color:#9C9CA3}
html[data-theme="dark"] .bar{background:#26262B}
html[data-theme="dark"] .nav{background:rgba(28,28,30,.94);border-color:#2C2C30}
html[data-theme="dark"] .nbtn{background:#2C2C30;color:#E5E5EA}
html[data-theme="dark"] .search{background:#2C2C30;color:#9C9CA3}
html[data-theme="dark"] .search input{color:#F5F5F7}
html[data-theme="dark"] .seg{background:#2C2C30}
html[data-theme="dark"] .seg button{color:#9C9CA3}
html[data-theme="dark"] .seg button.on{background:#48484E;color:#fff;box-shadow:none}
html[data-theme="dark"] .cell:active,html[data-theme="dark"] .mrow:active{background:#26262B}
html[data-theme="dark"] .cell + .cell::before,html[data-theme="dark"] .mrow + .mrow::before,html[data-theme="dark"] .drow + .drow::before{background:#2C2C30}
html[data-theme="dark"] .top time,html[data-theme="dark"] .sub{color:#9C9CA3}
html[data-theme="dark"] .sub.del{color:#FF6961}
html[data-theme="dark"] .unread{background:#0A84FF}
html[data-theme="dark"] .pinmark{color:#636366}
html[data-theme="dark"] .note{background:#1C1C1F;color:#D7D7DC}
html[data-theme="dark"] .note .ic{background:#16324F;color:#5AA9FF}
html[data-theme="dark"] .sec{color:#9C9CA3}
html[data-theme="dark"] .q{background:#26262B;color:#EDEDF0}
html[data-theme="dark"] .drow .when{color:#9C9CA3}
html[data-theme="dark"] .link{color:#5AA9FF}
html[data-theme="dark"] .modelpill{background:#2C2C30;color:#EDEDF0}
html[data-theme="dark"] .sug2 button{background:#1C1C1F;color:#EDEDF0}
html[data-theme="dark"] .sug2 button span{color:#9C9CA3!important}
html[data-theme="dark"] .abub .card-in{background:#1C1C1F;color:#EDEDF0}
html[data-theme="dark"] .abub a{color:#5AA9FF}
html[data-theme="dark"] .abub table{background:#1C1C1F}
html[data-theme="dark"] .abub th{background:rgba(255,255,255,0.07);color:#F5F5F7}
html[data-theme="dark"] .abub td{border-color:rgba(255,255,255,0.08);color:#EDEDF0}
html[data-theme="dark"] .abub code{background:rgba(255,255,255,0.12);color:#FF9F0A}
html[data-theme="dark"] .abub hr{background:rgba(255,255,255,0.12)}
html[data-theme="dark"] .abub blockquote{border-color:#5AA9FF;color:#9C9CA3}
html[data-theme="dark"] .typing{background:#1C1C1F}
html[data-theme="dark"] .composer{background:#000}
html[data-theme="dark"] .field{background:#1C1C1F}
html[data-theme="dark"] .field textarea{color:#F5F5F7}
html[data-theme="dark"] .plus{color:#9C9CA3}
html[data-theme="dark"] .sendb{background:#0A84FF}
html[data-theme="dark"] .bigbtn{background:#0A84FF}
html[data-theme="dark"] .ghost{background:#1C1C1F;color:#5AA9FF}
html[data-theme="dark"] .orow{background:#1C1C1F;color:#F5F5F7}
html[data-theme="dark"] .orow small{color:#9C9CA3!important}
html[data-theme="dark"] .orow .tick{color:#5AA9FF}
html[data-theme="dark"] .scard{background:#101013}
html[data-theme="dark"] .scard .ss{color:#9C9CA3}
html[data-theme="dark"] .tabbar{
  background:rgba(28,28,32,.88);
  border:.5px solid rgba(255,255,255,.14);
  box-shadow:0 12px 34px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.3);
}
html[data-theme="dark"] .tab{color:#8E8E93}
html[data-theme="dark"] .tab.on{color:#5AA9FF}
html[data-theme="dark"] .tab .bdg{border-color:#1C1C1F}
html[data-theme="dark"] .thead{background:rgba(28,28,30,.95);border-color:#2C2C30}
html[data-theme="dark"] .thead .who span{color:#9C9CA3}
html[data-theme="dark"] #thread{background:#141315}
html[data-theme="dark"] #msgs{background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px)}
html[data-theme="dark"] .day{background:rgba(44,44,48,.9);color:#B9B9C0}
html[data-theme="dark"] .b.in{background:#26262B;color:#F5F5F7}
html[data-theme="dark"] .b.out{background:#2B5278;color:#fff}
html[data-theme="dark"] .b .m{color:#9C9CA3}
html[data-theme="dark"] .b.del{background:#2A1515;border-color:#7A2E2A;color:#FFB4AB}
html[data-theme="dark"] .b.del .dh{color:#FF6961}
html[data-theme="dark"] .b.vo{background:#261E12;border-color:#5E4416;color:#FFE6A7}
html[data-theme="dark"] .b.vo .vo-header{color:#FBBF24}
html[data-theme="dark"] .b.vo .m{color:#D97706}
html[data-theme="dark"] .b.vo .voice-card{background:rgba(251,191,36,.14)}
html[data-theme="dark"] .b.vo .voice-title{color:#FBBF24}
html[data-theme="dark"] .tfoot{background:rgba(28,28,30,.95);border-color:#2C2C30;color:#9C9CA3}
html[data-theme="dark"] .faq-a{color:#C9C9CF}
html[data-theme="dark"] .chev{color:#636366!important}
html[data-theme="dark"] .aiava{background:#2C2C30}
html[data-theme="dark"] .me-card{background:#1C1C1F;color:#F5F5F7}
html[data-theme="dark"] .me-card p{color:#9C9CA3}
html[data-theme="dark"] #arsw{background:#2C2C30!important;color:#EDEDF0!important}
html[data-theme="dark"] #arsw.on{background:#1F4D2E!important;color:#7DFFA8!important}
html[data-theme="dark"] .ai-thought-box{background:#1C1C1F;border-color:#2C2C30;color:#9C9CA3}
html[data-theme="dark"] .ring .in{border-color:#1C1C1F;background:#2C2C30}
html[data-theme="dark"] .cmd-code{color:#5AA9FF}
html[data-theme="dark"] .cmd-title{color:#F5F5F7}
html[data-theme="dark"] .mrow small{color:#9C9CA3!important}

/* ==========================================================================
   RICH MEDIA SUPPORT (Photos, Videos, Round Video Notes, Voice, Stickers, Docs)
   ========================================================================== */
.media-container {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 6px;
  background: rgba(0,0,0,0.05);
}
.media-photo {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  cursor: pointer;
  pointer-events: none !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
}
.media-video {
  width: 100%;
  max-height: 260px;
  border-radius: 12px;
  display: block;
  background: #000;
  outline: none;
}
.video-wrap {
  position: relative;
}

/* Round Video Notes (Кружочки) */
.video-note-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px 0 6px;
  cursor: pointer;
}
.video-note-bubble {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #000;
  border: 2px solid rgba(255,255,255,0.45);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  display: block;
}
.b.del .video-note-bubble {
  border: 2.5px solid var(--red);
  box-shadow: 0 0 14px rgba(255,59,48,0.4);
}

/* Stickers (Static, Video, Lottie) */
.sticker-wrap {
  display: flex;
  margin: 4px 0 6px;
  cursor: pointer;
}
.sticker-bubble {
  width: 135px;
  height: 135px;
  object-fit: contain;
  background: transparent;
  display: block;
  pointer-events: none !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
}
.lottie-sticker-container {
  width: 135px;
  height: 135px;
  background: transparent;
  display: block;
}

/* Voice Message Cards (ГС & Аудио) */
.voice-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border-radius: 14px;
  background: rgba(0, 122, 255, 0.08);
  margin-bottom: 6px;
  min-width: 220px;
  max-width: 100%;
  box-sizing: border-box;
}
.b.del .voice-card {
  background: rgba(255, 59, 48, 0.09);
}
.b.out .voice-card {
  background: rgba(0, 0, 0, 0.05);
}
.voice-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.35);
  transition: transform .12s ease;
}
.voice-btn:active {
  transform: scale(0.92);
}
.b.del .voice-btn {
  background: var(--red);
  box-shadow: 0 2px 8px rgba(255, 59, 48, 0.35);
}
.voice-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.voice-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.b.del .voice-title {
  color: var(--red);
}
.voice-sub {
  font-size: 11px;
  color: var(--s);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.voice-wave {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 14px;
  margin: 1px 0;
}
.voice-wave i {
  display: block;
  width: 2.5px;
  border-radius: 2px;
  background: var(--blue);
  opacity: 0.65;
}
.b.del .voice-wave i {
  background: var(--red);
}
.b.out .voice-wave i {
  background: #34C759;
}

/* Documents & Files */
.document-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.04);
  margin-bottom: 6px;
  min-width: 200px;
  max-width: 100%;
}
.b.del .document-card {
  background: rgba(255, 59, 48, 0.07);
}
.document-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.b.del .document-icon {
  background: var(--red);
}
.document-info {
  flex: 1;
  min-width: 0;
}
.document-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.document-sub {
  font-size: 11px;
  color: var(--s);
}
.document-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  flex-shrink: 0;
  text-decoration: none;
}
.document-btn:active {
  transform: scale(0.92);
}

/* View-Once Video Play Badge Overlay */
.video-play-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 2;
}

/* Dark Mode Overrides for Rich Media */
html[data-theme="dark"] .media-container { background: rgba(255,255,255,0.06); }
html[data-theme="dark"] .voice-card { background: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .b.del .voice-card { background: rgba(255, 59, 48, 0.16); }
html[data-theme="dark"] .voice-title { color: #F5F5F7; }
html[data-theme="dark"] .voice-sub { color: #8E8E93; }
html[data-theme="dark"] .document-card { background: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .document-title { color: #F5F5F7; }
html[data-theme="dark"] .document-btn { background: rgba(255,255,255,0.12); color: #fff; }