:root {
  color-scheme: dark;
  --bg: #080b14;
  --shell: #0c1020;
  --panel: #101528;
  --panel-raised: #141a30;
  --panel-soft: #1a2038;
  --line: rgba(186, 195, 255, .105);
  --line-strong: rgba(186, 195, 255, .17);
  --text: #f2f3ff;
  --muted: #9aa3bf;
  --dim: #68728e;
  --mint: #77e7d9;
  --mint-deep: #24b8a8;
  --lilac: #b79af8;
  --pink: #fa92b1;
  --peach: #ffb996;
  --blue: #85b6fb;
  --danger: #ff6d83;
  --shadow: 0 24px 80px rgba(0, 0, 0, .38);
  --font: 'DM Sans', 'Segoe UI', sans-serif;
  --display: 'Manrope', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { color: inherit; font: inherit; }
button { border: 0; cursor: pointer; }
.icon { width: 18px; height: 18px; display: block; flex: 0 0 auto; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
button, .icon-button, .top-action, .composer-tool { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

.app-shell {
  height: 100dvh;
  width: 100vw;
  min-width: 330px;
  display: grid;
  grid-template-columns: 76px minmax(292px, 344px) minmax(420px, 1fr);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 76% -18%, rgba(107, 88, 205, .13), transparent 36%),
    radial-gradient(ellipse at 7% 96%, rgba(33, 172, 177, .09), transparent 31%),
    var(--bg);
  isolation: isolate;
}
.rail {
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 0 18px;
  border-right: 1px solid var(--line);
  background: rgba(10, 13, 24, .86);
  backdrop-filter: blur(18px);
}
.brand-mark {
  width: 43px; height: 43px; display: grid; place-items: center;
  padding: 0; border-radius: 15px; color: var(--mint);
  background: linear-gradient(140deg, rgba(119, 231, 217, .14), rgba(167, 133, 250, .16));
  box-shadow: inset 0 1px rgba(255,255,255,.19), 0 8px 28px rgba(49, 204, 187, .12);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.brand-mark:hover { transform: rotate(-8deg) translateY(-2px); box-shadow: 0 10px 32px rgba(49,204,187,.22); }
.brand-mark svg { width: 28px; height: 28px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; }
.brand-mark .brand-spark { fill: var(--pink); stroke: none; }
.rail-rule { width: 30px; height: 1px; background: var(--line-strong); margin: 23px 0 16px; }
.rail-nav { display: flex; flex-direction: column; gap: 10px; }
.rail-button, .icon-button, .top-action, .plain-icon, .composer-tool {
  display: inline-grid; place-items: center; position: relative; padding: 0;
  background: transparent; color: var(--muted); transition: color .2s, background .2s, transform .22s;
}
.rail-button { width: 46px; height: 46px; border-radius: 16px; }
.rail-button .icon { width: 21px; height: 21px; }
.rail-button:hover { color: var(--text); background: rgba(255,255,255,.055); transform: translateY(-1px); }
.rail-button.active { color: var(--mint); background: linear-gradient(145deg, rgba(119,231,217,.17), rgba(119,231,217,.055)); box-shadow: inset 0 0 0 1px rgba(119,231,217,.16), 0 8px 22px rgba(42,181,167,.10); }
.unread-dot { position: absolute; top: 9px; right: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.rail-bottom { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: auto; }
.me-orb { width: 39px; height: 39px; border-radius: 50%; display: grid; place-items: center; position: relative; color: #fff; font: 700 13px var(--display); background: linear-gradient(145deg, #4a9f9a, #7052ad 70%, #28284d); box-shadow: 0 0 0 2px rgba(119,231,217,.27), 0 8px 22px rgba(0,0,0,.3); }
.me-orb i { position: absolute; width: 9px; height: 9px; right: 0; bottom: 1px; border: 2px solid var(--shell); background: var(--mint); border-radius: 50%; }

.inbox {
  min-width: 0; height: 100dvh; display: flex; flex-direction: column;
  padding: 27px 18px 16px; border-right: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(18,23,43,.96), rgba(13,17,32,.97));
  position: relative; z-index: 4;
}
.inbox-head { padding: 0 3px; }
.inbox-kicker { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: 1.45px; }
.live-pip { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 9px var(--mint); }
.demo-pill { padding: 3px 6px; border: 1px solid rgba(183,154,248,.2); border-radius: 99px; color: var(--lilac); font-size: 8px; letter-spacing: .8px; }
.inbox-title-row { display: flex; align-items: center; justify-content: space-between; margin: 17px 0 18px; }
h1,h2,h3,p { margin: 0; }
.inbox-title-row h1 { font: 800 27px/1.1 var(--display); letter-spacing: -1.1px; }
.inbox-title-row p { margin-top: 6px; color: var(--muted); font-size: 11px; }
.icon-button { width: 38px; height: 38px; border-radius: 13px; }
.icon-button .icon { width: 18px; height: 18px; }
.compose-button { color: var(--mint); background: rgba(119,231,217,.10); box-shadow: inset 0 0 0 1px rgba(119,231,217,.15); }
.compose-button:hover { transform: translateY(-2px) rotate(-3deg); background: rgba(119,231,217,.17); }
.search-wrap { height: 42px; flex: 0 0 42px; display: flex; align-items: center; gap: 10px; padding: 0 11px; border-radius: 13px; background: rgba(255,255,255,.045); border: 1px solid var(--line); transition: border .2s, background .2s; }
.search-wrap:focus-within { border-color: rgba(119,231,217,.4); background: rgba(119,231,217,.04); }
.search-wrap .icon { width: 16px; height: 16px; color: var(--dim); flex: 0 0 auto; }
.search-wrap input { flex: 1; min-width: 0; padding: 0; color: var(--text); background: transparent; border: 0; outline: 0; font-size: 11px; }
.search-wrap input::placeholder { color: #707b99; }
kbd { color: #73809c; font: 9px var(--font); padding: 3px 5px; border-radius: 5px; background: rgba(255,255,255,.045); white-space: nowrap; }
.filter-strip { display: flex; gap: 7px; margin: 16px 0 17px; }
.filter-chip { display: flex; align-items: center; gap: 6px; padding: 7px 10px; color: var(--muted); border-radius: 9px; background: transparent; font-size: 10px; transition: .2s; }
.filter-chip:hover { background: rgba(255,255,255,.045); color: var(--text); }
.filter-chip.active { background: rgba(119,231,217,.12); color: var(--mint); }
.filter-chip span { min-width: 16px; height: 16px; display: grid; place-items: center; border-radius: 99px; background: rgba(119,231,217,.15); font-size: 9px; }
.section-label { display: flex; align-items: center; justify-content: space-between; color: #73809c; font-size: 9px; letter-spacing: 1.3px; font-weight: 700; padding: 0 4px; margin-bottom: 6px; }
.plain-icon { width: 30px; height: 30px; border-radius: 9px; }
.plain-icon .icon { width: 16px; height: 16px; }
.plain-icon:hover { color: var(--text); background: rgba(255,255,255,.06); }
.conversation-list { flex: 1; overflow-y: auto; margin: 0 -7px; padding: 0 4px 8px; scrollbar-width: thin; scrollbar-color: rgba(160,170,210,.15) transparent; }
.conversation { width: 100%; min-height: 76px; display: flex; align-items: center; gap: 12px; position: relative; padding: 11px 10px; border-radius: 15px; text-align: left; background: transparent; transition: background .22s, transform .22s, box-shadow .22s; }
.conversation:hover { background: rgba(255,255,255,.045); transform: translateX(2px); }
.conversation.active { background: linear-gradient(110deg, rgba(116,94,192,.18), rgba(48,81,116,.10)); box-shadow: inset 0 0 0 1px rgba(167,144,249,.13); }
.conversation.active::before { content: ''; width: 2px; height: 30px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); border-radius: 4px; background: var(--mint); box-shadow: 0 0 12px rgba(119,231,217,.7); }
.avatar { --orb-a: #eeaf96; --orb-b: #965e99; display: inline-grid; place-items: center; flex: 0 0 auto; width: 47px; height: 47px; border-radius: 50%; position: relative; color: white; font: 700 13px var(--display); background: radial-gradient(circle at 31% 24%, rgba(255,255,255,.78), transparent 17%), radial-gradient(circle at 36% 30%, var(--orb-a), var(--orb-b) 65%, #171a39); box-shadow: inset -5px -8px 14px rgba(0,0,0,.23), inset 2px 2px 7px rgba(255,255,255,.25), 0 5px 16px rgba(0,0,0,.24); }
.avatar-maya { --orb-a: #ffb69d; --orb-b: #b25c8c; }
.avatar-ari { --orb-a: #a9a2ff; --orb-b: #6450b3; }
.avatar-dad { --orb-a: #85e6cf; --orb-b: #268f85; }
.avatar-group { --orb-a: #f4d97e; --orb-b: #c58743; }
.avatar-lena { --orb-a: #9dc3f6; --orb-b: #4d6caa; }
.avatar .online-ring { width: 11px; height: 11px; position: absolute; right: -1px; bottom: 1px; border: 2px solid var(--panel); background: var(--mint); border-radius: 50%; }
.conversation-copy { min-width: 0; flex: 1; }
.conversation-name-row { display: flex; gap: 7px; align-items: center; }
.conversation-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; color: var(--text); font-size: 11.5px; font-weight: 700; }
.conversation-time { color: #7d87a2; font-size: 9px; white-space: nowrap; }
.conversation-preview-row { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
.conversation-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8993af; font-size: 10px; }
.conversation-preview .preview-type { color: var(--lilac); }
.unread-count { min-width: 17px; height: 17px; padding: 0 5px; display: grid; place-items: center; border-radius: 99px; color: #071615; background: var(--mint); font-size: 9px; font-weight: 800; box-shadow: 0 0 12px rgba(119,231,217,.24); }
.conversation-empty { padding: 32px 14px; text-align: center; color: var(--muted); font-size: 11px; line-height: 1.6; }
.inbox-footer { display: flex; align-items: center; gap: 10px; padding: 12px 11px; margin-top: 8px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(120deg, rgba(57,177,164,.08), rgba(146,116,218,.06)); }
.lock-badge { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--mint); background: rgba(119,231,217,.10); }
.lock-badge .icon { width: 14px; height: 14px; }
.inbox-footer strong, .inbox-footer small { display: block; }
.inbox-footer strong { font-size: 10px; font-weight: 700; }
.inbox-footer small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.footer-spark { margin-left: auto; color: var(--lilac); font-size: 17px; }

.main-stage { display: grid; grid-template-columns: minmax(0, 1fr) 286px; min-width: 0; height: 100dvh; position: relative; }
.chat-view { min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.chat-topbar { z-index: 3; height: 76px; flex: 0 0 76px; display: flex; align-items: center; gap: 10px; padding: 0 21px; border-bottom: 1px solid var(--line); background: rgba(11,15,28,.78); backdrop-filter: blur(18px); }
.chat-person { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 0; text-align: left; background: transparent; border-radius: 12px; }
.chat-person:hover .top-person-copy strong { color: var(--mint); }
.top-person-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.top-person-copy strong { max-width: min(28vw, 250px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font: 700 13px var(--display); transition: color .2s; }
.top-person-copy small { color: var(--mint); font-size: 9.5px; font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.secure-label { display: flex; align-items: center; gap: 6px; margin-right: 10px; color: #8e9ab3; font-size: 8px; letter-spacing: .8px; white-space: nowrap; }
.secure-label .icon { width: 13px; height: 13px; color: var(--mint); }
.top-action { width: 35px; height: 35px; border-radius: 11px; }
.top-action .icon { width: 17px; height: 17px; }
.top-action:hover { color: var(--mint); background: rgba(119,231,217,.1); transform: translateY(-1px); }
.top-action.video-action { color: var(--lilac); }
.top-action.video-action:hover { color: #d2c1ff; background: rgba(183,154,248,.12); }
.mobile-back { display: none; }
.message-search { z-index: 2; position: absolute; top: 65px; right: 24px; display: flex; align-items: center; gap: 9px; width: min(340px, calc(100% - 32px)); padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 13px; background: #151a2c; box-shadow: var(--shadow); }
.message-search input { width: 100%; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 11px; }
.message-search .icon { width: 15px; height: 15px; color: var(--mint); }

.chat-canvas { position: relative; flex: 1; min-height: 0; overflow: hidden; background: linear-gradient(140deg, rgba(17,21,39,.84), rgba(10,14,27,.9)); }
.star-field { position: absolute; inset: 0; opacity: .42; pointer-events: none; background-image: radial-gradient(rgba(221,225,255,.28) .7px, transparent .8px), radial-gradient(rgba(128,229,219,.18) .7px, transparent .8px); background-size: 78px 78px, 137px 137px; background-position: 0 0, 28px 47px; mask-image: linear-gradient(to bottom, black, transparent 115%); }
.space-glow { pointer-events: none; position: absolute; width: 480px; height: 480px; border-radius: 50%; filter: blur(2px); opacity: .42; }
.glow-one { top: -245px; left: -150px; background: radial-gradient(circle, rgba(133,96,200,.17), transparent 70%); }
.glow-two { right: -270px; bottom: -330px; background: radial-gradient(circle, rgba(57,182,172,.13), transparent 68%); }
.encryption-note { position: relative; z-index: 1; width: fit-content; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 7px; margin: 16px auto 12px; padding: 7px 11px; border: 1px solid rgba(119,231,217,.15); border-radius: 99px; background: rgba(15,21,35,.73); color: #aab4cb; font-size: 8px; font-weight: 700; letter-spacing: .55px; backdrop-filter: blur(14px); }
.encryption-note .icon { width: 12px; height: 12px; color: var(--mint); }
.note-separator { color: var(--lilac); }
.message-scroll { position: absolute; inset: 0; overflow-y: auto; z-index: 1; padding: 45px clamp(20px, 6vw, 76px) 26px; scrollbar-width: thin; scrollbar-color: rgba(160,170,210,.13) transparent; }
.message-list { width: min(820px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 13px; }
.date-divider { align-self: center; display: flex; align-items: center; gap: 12px; margin: 5px 0 11px; color: #8995ae; font-size: 9px; letter-spacing: .8px; font-weight: 600; }
.date-divider::before, .date-divider::after { content: ''; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, rgba(160,170,210,.19)); }
.date-divider::after { transform: rotate(180deg); }
.message-row { display: flex; align-items: flex-end; gap: 9px; max-width: min(76%, 580px); animation: messageIn .35s cubic-bezier(.2,.8,.2,1) both; }
.message-row.outgoing { align-self: flex-end; flex-direction: row-reverse; }
.message-row.incoming { align-self: flex-start; }
.message-mini-avatar { width: 25px; height: 25px; font-size: 9px; margin-bottom: 3px; }
.message-mini-avatar.self { --orb-a: #74d9d4; --orb-b: #407c9e; }
.message-cluster { min-width: 80px; display: flex; flex-direction: column; align-items: flex-start; }
.outgoing .message-cluster { align-items: flex-end; }
.sender-label { padding: 0 10px 5px; color: var(--lilac); font-size: 8px; letter-spacing: .9px; text-transform: uppercase; font-weight: 700; }
.outgoing .sender-label { color: var(--mint); }
.bubble { position: relative; padding: 11px 14px 9px; border: 1px solid rgba(193,196,235,.12); border-radius: 17px 17px 17px 5px; background: linear-gradient(145deg, rgba(58,61,91,.78), rgba(33,36,59,.84)); box-shadow: 0 10px 30px rgba(0,0,0,.13), inset 0 1px rgba(255,255,255,.04); color: #f0effb; font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.outgoing .bubble { border-color: rgba(183,154,248,.27); border-radius: 17px 17px 5px 17px; background: linear-gradient(145deg, #655298, #493d78); }
.message-meta { display: flex; align-items: center; gap: 5px; padding: 4px 5px 0; color: #8590ac; font-size: 8px; }
.outgoing .message-meta { justify-content: flex-end; }
.read-ticks { color: var(--mint); font-size: 10px; letter-spacing: -3px; padding-right: 3px; }
.message-actions { display: flex; gap: 4px; position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .18s; }
.incoming .message-actions { right: -66px; }
.outgoing .message-actions { left: -66px; }
.message-row:hover .message-actions { opacity: 1; }
.tiny-action { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); background: rgba(19,24,39,.96); box-shadow: 0 5px 15px rgba(0,0,0,.22); }
.tiny-action:hover { color: var(--mint); border-color: rgba(119,231,217,.35); }
.tiny-action .icon { width: 13px; height: 13px; }
.reaction-line { display: flex; gap: 4px; margin: 4px 7px 0; }
.reaction-pill { padding: 3px 7px; border-radius: 99px; background: rgba(16,20,34,.85); border: 1px solid var(--line); font-size: 11px; }
.media-bubble { width: min(270px, 100%); padding: 5px; }
.media-art { height: 178px; position: relative; overflow: hidden; border-radius: 13px; background: linear-gradient(180deg,#ffd9a5 0%,#f3c37f 42%,#bf9c72 43%,#33283a 100%); }
.media-art::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55px; background: linear-gradient(0deg, rgba(9,13,21,.7), transparent); }
.art-sun { position: absolute; top: 17px; left: 50%; width: 45px; height: 45px; transform: translateX(-50%); border-radius: 50%; background: #fff0bc; box-shadow: 0 0 45px rgba(255,225,159,.7); }
.art-house { position: absolute; width: 114px; height: 80px; bottom: 0; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg,#4a3d42,#91735a); border-radius: 5px 5px 0 0; box-shadow: 0 -2px 15px rgba(59,40,43,.3); }
.art-house::before { content: ''; position: absolute; left: -10px; top: -20px; width: 135px; height: 25px; transform: skewY(-12deg); background: #413344; }
.art-house::after { content: ''; position: absolute; left: 15px; right: 15px; top: 18px; height: 17px; background: #d6ae7b; box-shadow: 0 26px 0 -4px #242635; }
.art-leaf { position: absolute; z-index: 2; bottom: 6px; width: 43px; height: 33px; border-radius: 80% 0; background: #5a7964; }
.art-leaf.left { left: 17px; transform: rotate(-20deg); }.art-leaf.right { right: 12px; transform: scaleX(-1) rotate(-20deg); }
.media-badge { position: absolute; z-index: 2; left: 9px; bottom: 8px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.24); border-radius: 99px; background: rgba(11,13,23,.58); color: #fff; font-size: 7px; letter-spacing: .6px; text-transform: uppercase; backdrop-filter: blur(8px); }
.media-open { position: absolute; z-index: 2; right: 9px; bottom: 8px; width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: white; background: rgba(11,13,23,.52); }
.media-open .icon { width: 13px; height: 13px; }
.media-caption { padding: 8px 9px 6px; color: #eeeaf7; font-size: 10.5px; }
.view-once { width: 218px; display: flex; align-items: center; gap: 11px; padding: 12px; }
.once-mark { width: 33px; height: 33px; display: grid; place-items: center; flex: 0 0 auto; color: var(--lilac); border: 1px solid rgba(202,190,255,.36); border-radius: 50%; font: 500 14px var(--display); }
.once-copy b, .once-copy small { display: block; }.once-copy b { font-size: 10.5px; }.once-copy small { margin-top: 4px; color: #b4aec9; font-size: 9px; }
.voice-bubble { width: 245px; display: flex; align-items: center; gap: 11px; padding: 11px; }
.play-audio { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; color: #111527; background: linear-gradient(145deg, var(--mint), #8cc7ed); box-shadow: 0 0 17px rgba(119,231,217,.2); }
.play-audio .icon { width: 15px; height: 15px; }
.waveform { height: 31px; flex: 1; display: flex; align-items: center; justify-content: center; gap: 3px; }
.waveform i { width: 3px; border-radius: 4px; background: linear-gradient(180deg,var(--lilac),var(--mint)); opacity: .9; }
.voice-time { color: #aeb7ce; font-size: 8px; white-space: nowrap; }
.call-event { min-width: 194px; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 14px; border: 1px solid rgba(119,231,217,.18); background: rgba(18,36,43,.6); }
.call-event-icon { width: 29px; height: 29px; display: grid; place-items: center; color: var(--mint); border-radius: 10px; background: rgba(119,231,217,.10); }
.call-event-icon .icon { width: 14px; height: 14px; }
.call-event-copy b, .call-event-copy small { display: block; }.call-event-copy b { color: #e0f5f0; font-size: 10px; }.call-event-copy small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.call-back { margin-left: auto; color: var(--mint); background: transparent; font-size: 9px; }
.gif-bubble { width: 210px; height: 142px; position: relative; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 32% 60%, rgba(250,146,177,.65), transparent 32%), radial-gradient(circle at 72% 38%, rgba(183,154,248,.58), transparent 30%), linear-gradient(130deg,#273557,#34204b); }
.gif-bubble::before,.gif-bubble::after { content: ''; width: 118px; height: 118px; position: absolute; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; animation: orbitSpin 8s linear infinite; }
.gif-bubble::after { width: 80px; height: 80px; border-color: rgba(119,231,217,.38); animation-direction: reverse; }
.gif-stamp { position: relative; z-index: 1; padding: 6px 10px; border-radius: 99px; background: rgba(10,12,24,.4); border: 1px solid rgba(255,255,255,.16); color: white; font-size: 9px; letter-spacing: 2px; }
.typing-indicator { position: absolute; z-index: 2; bottom: 13px; left: clamp(20px, 6vw, 76px); display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 9px; }
.mini-avatar { width: 22px; height: 22px; font-size: 8px; }.typing-indicator > span:nth-child(2) { display: flex; gap: 3px; align-items: center; }.typing-indicator i { width: 3px; height: 3px; border-radius: 50%; background: var(--mint); animation: typing 1s infinite; }.typing-indicator i:nth-child(2) { animation-delay: .14s; }.typing-indicator i:nth-child(3) { animation-delay: .28s; }
@keyframes messageIn { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes typing { 0%,100% { transform: translateY(0); opacity:.4; } 50% { transform: translateY(-4px); opacity:1; } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }

.composer-zone { position: relative; z-index: 3; padding: 8px clamp(16px, 4vw, 54px) 13px; border-top: 1px solid rgba(186,195,255,.08); background: linear-gradient(0deg, rgba(11,15,28,.98), rgba(11,15,28,.92)); }
.composer { width: min(860px, 100%); min-height: 54px; display: flex; align-items: center; gap: 7px; margin: 0 auto; padding: 5px 6px 5px 8px; border: 1px solid rgba(177,183,233,.18); border-radius: 17px; background: linear-gradient(140deg, rgba(29,34,56,.98), rgba(20,25,43,.98)); box-shadow: 0 7px 24px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.04); transition: border .2s, box-shadow .2s; }
.composer:focus-within { border-color: rgba(119,231,217,.38); box-shadow: 0 0 0 3px rgba(119,231,217,.055), 0 8px 30px rgba(0,0,0,.2); }
.composer-tool { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; color: #9ba7c1; }
.composer-tool .icon { width: 17px; height: 17px; }
.composer-tool:hover { color: var(--mint); background: rgba(119,231,217,.09); }
.attach-tool { color: var(--mint); background: rgba(119,231,217,.12); }
.attach-tool:hover { transform: rotate(90deg); }
.composer textarea { display: block; flex: 1; min-width: 0; max-height: 116px; resize: none; padding: 9px 7px; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 11.5px; line-height: 1.4; scrollbar-width: thin; }
.composer textarea::placeholder { color: #8690aa; }
.composer-tools { display: flex; gap: 1px; }
.send-button { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: #101725; background: linear-gradient(145deg, #96f0e1, #54d3c2); box-shadow: 0 5px 16px rgba(68,209,191,.20), inset 0 1px rgba(255,255,255,.48); transition: transform .2s, box-shadow .2s, opacity .2s; }
.send-button .icon { width: 17px; height: 17px; }
.send-button:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 9px 22px rgba(68,209,191,.28); }
.send-button:disabled { color: #8590a4; background: #293047; box-shadow: none; cursor: default; opacity: .72; }
.composer-hint { width: min(850px, 100%); display: flex; gap: 12px; align-items: center; margin: 7px auto 0; padding-left: 5px; color: #69738d; font-size: 8px; }
.composer-hint .hint-lock { display: flex; align-items: center; gap: 4px; margin-left: auto; color: #8395a9; }
.hint-lock .icon { width: 10px; height: 10px; color: var(--mint); }
.reply-preview { width: min(850px, 100%); display: flex; align-items: center; gap: 9px; margin: 0 auto 7px; padding: 8px 11px; border-radius: 11px; background: rgba(183,154,248,.08); }
.reply-bar { width: 2px; align-self: stretch; border-radius: 3px; background: var(--lilac); }
.reply-preview div { min-width: 0; flex: 1; }.reply-preview small { color: var(--lilac); font-size: 8px; }.reply-preview p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 9px; margin-top: 2px; }

.details-panel { min-width: 0; display: flex; flex-direction: column; align-items: stretch; overflow-y: auto; border-left: 1px solid var(--line); background: linear-gradient(180deg, rgba(19,24,44,.95), rgba(12,17,32,.98)); padding: 22px 17px 17px; }
.details-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); }
.eyebrow { font-size: 8px; letter-spacing: 1.3px; font-weight: 700; }
.profile-orbit { height: 180px; position: relative; display: grid; place-items: center; margin: 7px 0 0; perspective: 600px; }
.orbit-track { width: 178px; height: 68px; position: absolute; border: 1px solid rgba(119,231,217,.34); border-radius: 50%; transform: rotate(-23deg) rotateX(67deg); box-shadow: 0 0 12px rgba(119,231,217,.04); transition: transform .4s; }
.orbit-track-b { width: 151px; height: 55px; border-color: rgba(183,154,248,.45); transform: rotate(28deg) rotateX(64deg); }
.profile-orbit:hover .orbit-track-a { transform: rotate(-5deg) rotateX(67deg) scale(1.12); }.profile-orbit:hover .orbit-track-b { transform: rotate(15deg) rotateX(64deg) scale(1.12); }
.detail-avatar { width: 96px; height: 96px; z-index: 1; display: grid; place-items: center; border-radius: 50%; color: white; font: 800 31px var(--display); position: relative; background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.85), transparent 12%), radial-gradient(circle at 30% 27%, var(--orb-a), var(--orb-b) 66%, #141a35); box-shadow: 0 0 0 8px rgba(183,154,248,.055), inset -10px -12px 24px rgba(0,0,0,.28), inset 3px 3px 12px rgba(255,255,255,.2), 0 16px 45px rgba(0,0,0,.35); animation: floatOrb 6s ease-in-out infinite; }
.orbit-satellite { position: absolute; z-index: 2; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 15px var(--mint); top: 35px; right: 45px; animation: floatOrb 4s ease-in-out infinite reverse; }
.satellite-b { width: 5px; height: 5px; top: auto; bottom: 37px; left: 50px; background: var(--lilac); box-shadow: 0 0 12px var(--lilac); animation-delay: -2s; }
.orbit-label { position: absolute; bottom: 5px; color: var(--mint); font-size: 7px; font-weight: 700; letter-spacing: 1.5px; }
@keyframes floatOrb { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.details-name { text-align: center; }.details-name h2 { font: 800 19px var(--display); letter-spacing: -.5px; }.details-name p { margin-top: 4px; color: var(--muted); font-size: 10px; }
.status-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 9px; border: 1px solid rgba(119,231,217,.12); border-radius: 99px; background: rgba(119,231,217,.045); color: var(--mint); font-size: 8px; }
.status-tag i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.detail-actions button { height: 37px; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--text); border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.035); font-size: 10px; font-weight: 600; transition: .2s; }
.detail-actions button:hover { color: var(--mint); border-color: rgba(119,231,217,.24); background: rgba(119,231,217,.08); transform: translateY(-1px); }
.detail-actions .icon { width: 14px; height: 14px; }
.detail-divider { height: 1px; margin: 20px 0 16px; background: var(--line); }
.detail-section { margin-bottom: 17px; }.detail-section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: #c4c9db; font-size: 10px; font-weight: 700; }
.text-action { background: transparent; color: var(--mint); font-size: 9px; }.text-action:hover { color: white; }
.media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.memory { height: 72px; position: relative; overflow: hidden; border-radius: 11px; text-align: left; border: 1px solid rgba(255,255,255,.11); transition: transform .22s, filter .22s; }.memory:hover { transform: translateY(-2px); filter: brightness(1.1); }.memory:first-child { grid-row: span 2; height: 151px; }
.memory small { position: absolute; z-index: 2; left: 7px; right: 6px; bottom: 7px; color: white; font-size: 7px; text-shadow: 0 1px 7px #000; }
.memory-bookshop { background: linear-gradient(180deg,#f7cf96 0 43%,#a78469 44% 100%); }.memory-bookshop::before { content: ''; position: absolute; bottom: 0; left: 28%; width: 50%; height: 58%; background: linear-gradient(90deg,#4f4144,#9a765d); }.memory-bookshop::after { content: ''; position: absolute; bottom: 56%; left: 24%; width: 54%; height: 13px; transform: skewY(-8deg); background: #4b3943; }.memory-sun { position: absolute; top: 18px; left: 50%; width: 23px; height: 23px; border-radius: 50%; background: #fff0bc; box-shadow: 0 0 26px #ffe5ae; }.memory-window { position: absolute; z-index: 1; bottom: 27%; left: 42%; width: 23%; height: 15px; background: #d8b485; }
.memory-coast { background: linear-gradient(160deg,#fdc9a3 0%,#dd9b95 38%,#576a89 39%,#21344f 100%); }.memory-wave { position: absolute; width: 140%; height: 40px; bottom: -7px; left: -10%; border-radius: 50%; background: #426a80; transform: rotate(-7deg); }.memory-night { background: radial-gradient(circle at 72% 25%,#fbdfa8 0 7%,transparent 8%), linear-gradient(145deg,#2c305d,#172943 70%,#34535a); }.memory-moon { width: 22px; height: 22px; position: absolute; top: 10px; right: 18px; border-radius: 50%; background: #ffe6b2; box-shadow: 0 0 18px rgba(255,221,160,.7); }
.shared-links { margin-top: 4px; }.count-label { color: var(--dim); font-size: 9px; }.shared-row { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 2px; text-align: left; background: transparent; border-radius: 10px; }.shared-row:hover { background: rgba(255,255,255,.04); }.shared-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; }.shared-icon.pink { background: rgba(250,146,177,.11); color: var(--pink); }.shared-icon.mint { background: rgba(119,231,217,.10); color: var(--mint); }.shared-icon .icon { width: 15px; height: 15px; }.shared-row b,.shared-row small { display: block; }.shared-row b { color: var(--text); font-size: 9px; font-weight: 600; }.shared-row small { margin-top: 3px; color: var(--muted); font-size: 8px; }.shared-row .chevron { width: 13px; height: 13px; margin-left: auto; color: var(--dim); }
.details-foot { margin-top: auto; display: flex; align-items: flex-start; gap: 8px; padding: 11px 9px; border-radius: 11px; background: rgba(119,231,217,.045); color: #8795a9; font-size: 8px; line-height: 1.5; }.details-foot .icon { width: 13px; height: 13px; flex: 0 0 auto; color: var(--mint); }.details-foot b { color: #c5d5d3; }

.popover { position: fixed; z-index: 30; width: 236px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 15px; background: rgba(20,25,43,.97); box-shadow: 0 24px 70px rgba(0,0,0,.48); backdrop-filter: blur(22px); animation: popIn .15s ease-out; }
@keyframes popIn { from { opacity: 0; transform: translateY(5px) scale(.98); } to { opacity:1; transform: translateY(0) scale(1); } }
.popover > button:not(.plain-icon) { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 7px; text-align: left; color: var(--text); border-radius: 10px; background: transparent; font-size: 10px; transition: background .15s; }.popover > button:hover { background: rgba(255,255,255,.055); }.popover > button b,.popover > button small { display: block; }.popover > button b { font-size: 10px; }.popover > button small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.pop-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; }.pop-icon .icon { width: 15px; height: 15px; }.pop-icon.mint { color: var(--mint); background: rgba(119,231,217,.12); }.pop-icon.lilac { color: var(--lilac); background: rgba(183,154,248,.12); }.pop-icon.peach { color: var(--peach); background: rgba(255,185,150,.12); }.pop-icon.blue { color: var(--blue); background: rgba(133,182,251,.12); }
.emoji-popover { width: 274px; }.popover-heading { display: flex; align-items: center; justify-content: space-between; padding: 4px 5px 7px 8px; color: var(--text); font-size: 10px; }.emoji-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; padding: 4px; }.emoji-grid button,.sticker-shelf button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: transparent; font-size: 18px; transition: transform .15s, background .15s; }.emoji-grid button:hover,.sticker-shelf button:hover { transform: scale(1.14); background: rgba(255,255,255,.06); }.sticker-shelf { display: flex; align-items: center; gap: 2px; border-top: 1px solid var(--line); padding: 7px 3px 2px; }.sticker-shelf span { margin: 0 auto 0 4px; color: var(--dim); font-size: 7px; letter-spacing: 1px; }.context-menu,.more-menu { width: 180px; }.context-menu > button:not(.plain-icon),.more-menu > button:not(.plain-icon) { min-height: 34px; gap: 9px; padding: 6px 8px; font-size: 9px; }.context-menu .icon,.more-menu .icon { width: 14px; height: 14px; color: var(--muted); }.context-menu .danger-action { color: var(--danger); }.context-menu .danger-action .icon { color: var(--danger); }

.page-view { min-width: 0; overflow-y: auto; padding: clamp(22px,4vw,48px); background: radial-gradient(ellipse at 74% 0%,rgba(116,91,188,.10),transparent 36%), radial-gradient(ellipse at 8% 100%,rgba(39,164,163,.08),transparent 36%); }
.page-view-inner { width: min(100%,1040px); margin: 0 auto; }.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 25px; }.page-heading h1 { font: 800 clamp(25px,3vw,37px)/1.1 var(--display); letter-spacing: -1.5px; }.page-heading p { margin-top: 8px; color: var(--muted); font-size: 11px; }.eyebrow-mint { color: var(--mint); font-size: 8px; letter-spacing: 1.5px; font-weight: 700; }.primary-action { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; color: #102023; border-radius: 12px; background: linear-gradient(145deg,#9af1e1,#5dd6c5); box-shadow: 0 6px 18px rgba(87,210,192,.16); font-size: 10px; font-weight: 700; transition: .2s; }.primary-action:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(87,210,192,.25); }.primary-action .icon { width: 15px; height: 15px; }
.people-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }.person-card { min-height: 194px; overflow: hidden; position: relative; padding: 15px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(145deg,rgba(29,35,60,.8),rgba(17,22,39,.86)); transition: transform .25s,border .25s,box-shadow .25s; }.person-card:hover { transform: translateY(-3px); border-color: rgba(119,231,217,.28); box-shadow: 0 16px 40px rgba(0,0,0,.19); }.person-card::after { content: ''; position: absolute; width: 135px;height:135px;right:-55px;top:-60px;border-radius:50%;background:radial-gradient(circle,rgba(119,231,217,.12),transparent 68%); }.person-card-top { display:flex; align-items:center; justify-content:space-between; }.person-card .avatar { width:48px;height:48px; }.person-card-online { display:flex;align-items:center;gap:5px;color:var(--mint);font-size:8px; }.person-card-online i { width:5px;height:5px;border-radius:50%;background:var(--mint); }.person-card h3 { margin-top:20px; font:700 14px var(--display); }.person-card p { margin-top:5px;color:var(--muted);font-size:9px; }.person-card-actions { display:flex;gap:7px;margin-top:13px; }.small-action { display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:9px;color:#c8d2de;background:rgba(255,255,255,.05);font-size:9px; }.small-action .icon { width:13px;height:13px; }.small-action:hover {color:var(--mint);background:rgba(119,231,217,.09);}
.request-card { display:flex;align-items:center;gap:11px;padding:13px 14px;margin-top:20px;border-radius:15px;border:1px solid rgba(250,146,177,.14);background:rgba(250,146,177,.045); }.request-card .avatar {width:36px;height:36px;font-size:10px;}.request-copy {min-width:0;flex:1;}.request-copy b,.request-copy small {display:block;}.request-copy b {font-size:10px;}.request-copy small {margin-top:4px;color:var(--muted);font-size:8px;}.request-actions {display:flex;gap:6px;}.request-actions button {width:29px;height:29px;border-radius:9px;color:var(--mint);background:rgba(119,231,217,.1);}.request-actions .decline {color:var(--muted);background:rgba(255,255,255,.05);}
.calls-layout { display:grid;grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr);gap:13px; }.call-ready { min-height:198px;display:flex;align-items:center;gap:19px;padding:22px;border-radius:20px;border:1px solid rgba(119,231,217,.22);background:radial-gradient(ellipse at 83% 18%,rgba(93,213,196,.12),transparent 33%),linear-gradient(135deg,rgba(24,37,52,.95),rgba(16,22,39,.95)); }.call-ready .avatar {width:68px;height:68px;font-size:18px;}.call-ready-copy {flex:1;}.call-ready-copy small {color:var(--mint);font-size:8px;letter-spacing:1px;font-weight:700;}.call-ready-copy h2 {margin-top:9px;font:800 19px var(--display);}.call-ready-copy p {margin-top:6px;color:var(--muted);font-size:10px;}.call-ready .icon-button {color:var(--mint);background:rgba(119,231,217,.1);}.recent-calls { padding:18px;border:1px solid var(--line);border-radius:18px;background:rgba(18,23,41,.68); }.recent-calls h3 { margin-bottom:8px;font:700 11px var(--display); }.call-row {display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);}.call-row:last-child {border-bottom:0;}.call-row .avatar {width:34px;height:34px;font-size:10px;}.call-row-copy {flex:1;min-width:0;}.call-row-copy b,.call-row-copy small {display:block;}.call-row-copy b {font-size:9px;}.call-row-copy small {margin-top:3px;color:var(--muted);font-size:8px;}.call-dir {color:var(--mint);font-size:13px;}.call-dir.missed {color:var(--pink);}
.settings-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.setting-card {padding:17px;border:1px solid var(--line);border-radius:17px;background:rgba(19,24,43,.78);}.setting-card-head {display:flex;align-items:center;gap:10px;margin-bottom:15px;}.setting-icon {width:34px;height:34px;display:grid;place-items:center;border-radius:11px;color:var(--mint);background:rgba(119,231,217,.1);}.setting-icon .icon {width:16px;height:16px;}.setting-card h3 {font:700 11px var(--display);}.setting-card p {margin-top:4px;color:var(--muted);font-size:8px;}.setting-row {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line);}.setting-row b,.setting-row small {display:block;}.setting-row b {font-size:9px;font-weight:600;}.setting-row small {margin-top:3px;color:var(--muted);font-size:8px;}.theme-switch {display:flex;gap:6px;}.theme-option {width:28px;height:28px;border-radius:9px;border:2px solid transparent;}.theme-option[data-theme-choice="midnight"] {background:linear-gradient(135deg,#151a31,#090c17);}.theme-option[data-theme-choice="dusk"] {background:linear-gradient(135deg,#482f58,#17132a);}.theme-option[data-theme-choice="daylight"] {background:linear-gradient(135deg,#fff,#dae7ee);}.theme-option.selected {border-color:var(--mint);box-shadow:0 0 0 2px rgba(119,231,217,.12);}.toggle {width:34px;height:19px;padding:2px;border-radius:99px;background:#343b52;transition:background .2s;}.toggle i {width:15px;height:15px;display:block;border-radius:50%;background:#d8dced;transition:transform .2s;}.toggle.on {background:#39bbae;}.toggle.on i {transform:translateX(15px);background:white;}
.saved-empty {max-width:530px;margin:55px auto;padding:28px;text-align:center;border:1px solid var(--line);border-radius:22px;background:rgba(19,24,43,.7);}.saved-illustration {width:100px;height:100px;margin:0 auto 20px;position:relative;display:grid;place-items:center;border:1px solid rgba(183,154,248,.24);border-radius:50%;background:radial-gradient(circle,rgba(183,154,248,.15),transparent 70%);color:var(--lilac);}.saved-illustration .icon {width:30px;height:30px;}.saved-empty h2 {font:700 17px var(--display);}.saved-empty p {margin:8px auto 0;max-width:320px;color:var(--muted);font-size:10px;line-height:1.6;}

.toast { position: fixed; z-index: 80; left: 50%; bottom: 26px; transform: translate(-50%,12px); opacity: 0; pointer-events: none; max-width: calc(100vw - 30px); padding: 11px 15px; border: 1px solid rgba(119,231,217,.23); border-radius: 12px; color: var(--text); background: rgba(23,30,46,.96); box-shadow: 0 14px 42px rgba(0,0,0,.4); font-size: 10px; transition: opacity .2s, transform .2s; }.toast.show {opacity:1;transform:translate(-50%,0);}
.modal-backdrop {position:fixed;z-index:60;inset:0;display:grid;place-items:center;padding:20px;background:rgba(3,5,12,.68);backdrop-filter:blur(14px);animation:fadeIn .2s;}.modal-card {width:min(440px,100%);max-height:min(82vh,720px);overflow:auto;padding:24px;border-radius:22px;border:1px solid var(--line-strong);background:linear-gradient(145deg,#1a2036,#101526);box-shadow:0 28px 90px rgba(0,0,0,.58);animation:modalIn .3s cubic-bezier(.2,.8,.2,1);}.modal-card.wide {width:min(650px,100%);}.modal-card h2 {font:800 20px var(--display);letter-spacing:-.5px;}.modal-card > p {margin-top:8px;color:var(--muted);font-size:10px;line-height:1.6;}.modal-head {display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:17px;}.modal-close {width:30px;height:30px;display:grid;place-items:center;border-radius:9px;color:var(--muted);background:rgba(255,255,255,.05);}.modal-close .icon {width:15px;height:15px;}.modal-actions {display:flex;justify-content:flex-end;gap:8px;margin-top:20px;}.secondary-action {min-height:37px;padding:0 13px;border-radius:10px;background:rgba(255,255,255,.07);color:var(--text);font-size:10px;}.modal-form {display:flex;gap:8px;margin-top:16px;}.modal-form input {flex:1;min-width:0;padding:0 12px;border:1px solid var(--line-strong);border-radius:11px;background:rgba(4,8,18,.4);outline:0;font-size:10px;}.contact-choice {width:100%;display:flex;align-items:center;gap:11px;padding:10px 6px;text-align:left;background:transparent;border-radius:11px;}.contact-choice:hover {background:rgba(255,255,255,.05);}.contact-choice .avatar {width:38px;height:38px;font-size:10px;}.contact-choice span:nth-child(2) {flex:1;}.contact-choice b,.contact-choice small {display:block;}.contact-choice b {font-size:10px;}.contact-choice small {margin-top:4px;color:var(--muted);font-size:8px;}.contact-choice .icon {width:15px;height:15px;color:var(--mint);}.call-modal {width:min(570px,100%);padding:0;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,rgba(119,231,217,.11),transparent 42%),radial-gradient(ellipse at 20% 15%,rgba(183,154,248,.13),transparent 40%),linear-gradient(180deg,#141a32,#0a0f1d);}.call-screen {min-height:590px;position:relative;display:flex;flex-direction:column;align-items:center;padding:25px 25px 21px;overflow:hidden;}.call-top {width:100%;display:flex;align-items:center;justify-content:space-between;color:#aeb7cf;font-size:8px;letter-spacing:1.4px;}.call-lock {display:flex;align-items:center;gap:6px;}.call-lock .icon {width:14px;height:14px;color:var(--mint);}.call-type-label {padding:7px 10px;border:1px solid var(--line-strong);border-radius:99px;color:var(--lilac);}.call-orbit {width:242px;height:230px;position:relative;display:grid;place-items:center;margin:34px auto 16px;perspective:600px;}.call-orbit .detail-avatar {width:160px;height:160px;font-size:54px;}.call-orbit .orbit-track {width:230px;height:85px;}.call-orbit .orbit-track-b {width:200px;height:75px;}.call-name {font:800 26px var(--display);letter-spacing:-1px;}.call-state {margin-top:6px;color:var(--mint);font-size:11px;}.call-caption {margin-top:8px;color:var(--muted);font-size:9px;}.call-timer {margin-top:10px;color:#d1d8eb;font:500 12px var(--display);}.call-wave {height:30px;display:flex;align-items:center;gap:4px;margin:20px 0 4px;}.call-wave i {width:3px;border-radius:5px;background:linear-gradient(180deg,var(--lilac),var(--mint));animation:wave 1.1s ease-in-out infinite alternate;}.call-wave i:nth-child(3n) {animation-delay:-.6s;}.call-wave i:nth-child(2n) {animation-delay:-.3s;}@keyframes wave {to{transform:scaleY(.4);opacity:.6;}}
.call-controls {display:flex;align-items:flex-start;gap:17px;margin-top:auto;padding-top:26px;}.call-control-wrap {display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--muted);font-size:8px;}.call-control {width:53px;height:53px;display:grid;place-items:center;border:1px solid rgba(191,197,230,.17);border-radius:18px;color:var(--text);background:linear-gradient(145deg,rgba(60,68,93,.65),rgba(27,34,55,.88));box-shadow:inset 0 1px rgba(255,255,255,.08);transition:transform .2s,background .2s;}.call-control:hover {transform:translateY(-3px);background:rgba(119,231,217,.14);}.call-control .icon {width:19px;height:19px;}.call-control.end {width:61px;height:61px;margin-top:-4px;border:1px solid rgba(255,136,154,.5);border-radius:20px;color:white;background:linear-gradient(145deg,#ff748d,#d93b67);box-shadow:0 9px 26px rgba(225,54,96,.27);}.call-control.end .icon {width:21px;height:21px;}.call-note {margin-top:24px;color:#77839f;font-size:8px;}
.call-control.toggled { color: var(--mint); background: rgba(119,231,217,.16); border-color: rgba(119,231,217,.3); }
.video-surface { width: min(100%, 400px); height: 258px; position: relative; overflow: hidden; display: grid; place-items: center; margin: 30px auto 15px; border: 1px solid rgba(191,197,230,.19); border-radius: 25px; background: radial-gradient(ellipse at 50% 36%, rgba(183,154,248,.32), transparent 42%), linear-gradient(160deg,#262949,#121a2c 58%,#102c32); box-shadow: inset 0 1px rgba(255,255,255,.08),0 18px 45px rgba(0,0,0,.25); }
.video-surface::before { content:''; position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.22) .7px,transparent .8px);background-size:37px 37px;opacity:.17; }
.video-person-glow { position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,186,167,.27),rgba(183,154,248,.13) 45%,transparent 70%);filter:blur(7px); }
.video-person { z-index:1;width:125px;height:170px;position:relative;display:flex;align-items:flex-start;justify-content:center;padding-top:12px;border-radius:64px 64px 38px 38px;background:linear-gradient(160deg,rgba(255,221,205,.84) 0 27%,rgba(96,107,153,.9) 28% 100%);box-shadow:0 0 55px rgba(183,154,248,.24);color:white;font:700 24px var(--display); }
.video-person::before { content:'';position:absolute;top:-43px;width:60px;height:72px;border-radius:50%;background:linear-gradient(145deg,#f7d6c9,#cb9dba);box-shadow:0 0 28px rgba(255,192,177,.22); }
.video-person span { position:relative;z-index:1;text-shadow:0 2px 8px rgba(0,0,0,.5); }
.video-tag { position:absolute;z-index:2;top:13px;left:14px;padding:8px 10px;border:1px solid rgba(255,255,255,.13);border-radius:99px;background:rgba(13,17,31,.65);color:#e9e8f4;font-size:8px;letter-spacing:.5px; }
.video-tag::before { content:'';display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--mint); }
.self-video { position:absolute;z-index:2;right:13px;bottom:13px;width:54px;height:68px;display:grid;place-items:end center;padding-bottom:8px;border:1px solid rgba(255,255,255,.32);border-radius:14px;background:linear-gradient(145deg,#3e486a,#1c2640);color:#fff;font-size:8px;box-shadow:0 8px 20px rgba(0,0,0,.25); }
@keyframes fadeIn {from{opacity:0}to{opacity:1}} @keyframes modalIn {from{opacity:0;transform:translateY(11px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

html[data-theme="dusk"] { --bg:#100b19;--shell:#170f24;--panel:#1c1530;--panel-raised:#261b3b;--panel-soft:#2a1e42;--line:rgba(230,197,255,.11);--line-strong:rgba(230,197,255,.19);--text:#fff2fa;--muted:#b9a5c2;--dim:#806c8c;--mint:#86ead9;--mint-deep:#3bc7ad; }
html[data-theme="daylight"] {color-scheme:light;--bg:#e9edf5;--shell:#f2f4fa;--panel:#f7f8fc;--panel-raised:#fff;--panel-soft:#e9edf7;--line:rgba(53,67,104,.12);--line-strong:rgba(53,67,104,.20);--text:#192238;--muted:#64718c;--dim:#8290aa;--mint:#167f77;--mint-deep:#087b72;--lilac:#7555bd;--pink:#c95378;--peach:#bd704c;--blue:#477ebf;--shadow:0 24px 80px rgba(42,52,83,.18);}
html[data-theme="daylight"] .rail{background:rgba(246,248,253,.9)}html[data-theme="daylight"] .inbox{background:linear-gradient(160deg,rgba(246,248,253,.98),rgba(237,241,249,.98))}html[data-theme="daylight"] .chat-topbar{background:rgba(247,248,252,.86)}html[data-theme="daylight"] .chat-canvas{background:linear-gradient(140deg,rgba(230,235,246,.85),rgba(241,243,249,.95))}html[data-theme="daylight"] .composer-zone{background:linear-gradient(0deg,rgba(246,248,253,.99),rgba(246,248,253,.93))}html[data-theme="daylight"] .composer{background:linear-gradient(140deg,#fff,#f3f5fa)}html[data-theme="daylight"] .bubble{color:#202945;background:linear-gradient(145deg,#fff,#e9edf7);border-color:rgba(53,67,104,.11)}html[data-theme="daylight"] .outgoing .bubble{color:#fff;background:linear-gradient(145deg,#7a61ad,#594a89)}html[data-theme="daylight"] .details-panel{background:linear-gradient(180deg,#f5f7fc,#edf1f8)}html[data-theme="daylight"] .popover{background:rgba(250,251,255,.98)}html[data-theme="daylight"] .modal-card{background:linear-gradient(145deg,#fff,#eef1f8)}html[data-theme="daylight"] .call-modal{background:radial-gradient(ellipse at 50% 30%,rgba(119,231,217,.16),transparent 42%),linear-gradient(180deg,#f5f6fc,#e6ebf5)}html[data-theme="daylight"] .call-name{color:#192238}html[data-theme="daylight"] .call-note{color:#64718c}html[data-theme="daylight"] .call-timer{color:#26354d}html[data-theme="daylight"] .call-control{color:#192238;background:linear-gradient(145deg,#fff,#e1e6f1)}html[data-theme="daylight"] .page-view{background:radial-gradient(ellipse at 74% 0%,rgba(116,91,188,.08),transparent 36%),#eef1f7}html[data-theme="daylight"] .person-card,html[data-theme="daylight"] .recent-calls,html[data-theme="daylight"] .setting-card{background:rgba(255,255,255,.77)}html[data-theme="daylight"] .conversation.active{background:linear-gradient(110deg,rgba(116,94,192,.12),rgba(48,81,116,.06))}html[data-theme="daylight"] .encryption-note{background:rgba(255,255,255,.78);color:#53617c}html[data-theme="daylight"] .message-search{background:#fff}html[data-theme="daylight"] .modal-backdrop{background:rgba(28,34,50,.42)}

@media (max-width: 1320px) { .main-stage { grid-template-columns: minmax(0,1fr) 250px; }.details-panel {padding-left:13px;padding-right:13px}.chat-topbar {padding-left:16px;padding-right:14px}.secure-label {display:none}.people-grid {grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 1080px) { .app-shell {grid-template-columns:66px minmax(270px,315px) minmax(390px,1fr)}.main-stage {grid-template-columns:minmax(0,1fr)}.details-panel {display:none}.chat-topbar {gap:7px;padding:0 15px}.topbar-right {gap:2px}.top-action {width:32px;height:34px}.message-scroll {padding-left:32px;padding-right:32px}.page-view {padding:30px} }
@media (max-width: 790px) { .app-shell {grid-template-columns:58px minmax(0,1fr)}.rail {padding-top:14px}.rail-button {width:42px;height:42px}.inbox {grid-column:2;grid-row:1;padding:19px 14px 12px;border-right:0}.main-stage {display:none;grid-column:2;grid-row:1}.app-shell.chat-open .inbox,.app-shell.page-open .inbox {display:none}.app-shell.chat-open .main-stage,.app-shell.page-open .main-stage {display:grid}.mobile-back {display:inline-grid;width:30px;height:34px;flex:0 0 auto}.chat-topbar {height:66px;flex-basis:66px;padding:0 11px;gap:6px}.chat-person {gap:8px}.chat-person .avatar {width:39px;height:39px}.top-person-copy strong {max-width:31vw;font-size:11px}.top-person-copy small {font-size:8px}.topbar-right {gap:0}.top-action {width:30px;height:32px}.top-action .icon {width:16px;height:16px}.top-action:nth-last-child(2) {display:none}.message-scroll {padding:45px 18px 25px}.message-row {max-width:88%}.composer-zone {padding:8px 12px 11px}.composer-hint {font-size:7px}.hint-lock {display:none!important}.inbox-title-row h1 {font-size:25px} }
@media (max-width: 520px) { .app-shell {grid-template-columns:minmax(0,1fr)}.rail {position:fixed;left:0;right:0;bottom:0;height:62px;padding:6px 13px calc(6px + env(safe-area-inset-bottom));flex-direction:row;justify-content:space-around;border-right:0;border-top:1px solid var(--line);background:rgba(10,13,24,.95)}.brand-mark,.rail-rule,.rail-bottom {display:none}.rail-nav {width:100%;flex-direction:row;justify-content:space-around;gap:0}.rail-button {width:44px;height:43px;border-radius:14px}.rail-button .icon {width:20px;height:20px}.unread-dot {top:6px;right:6px}.inbox {grid-column:1;padding:18px 14px 72px}.main-stage {grid-column:1}.chat-topbar {height:62px;flex-basis:62px;padding:0 9px;gap:4px}.mobile-back {width:26px}.chat-person .avatar {width:36px;height:36px}.top-person-copy strong {max-width:33vw;font-size:10.5px}.top-person-copy small {font-size:7.5px}.top-action {width:28px;height:31px}.top-action .icon {width:15px;height:15px}.top-action:last-child {display:none}.message-scroll {padding:43px 12px 18px}.message-row {max-width:93%;gap:6px}.message-mini-avatar {width:21px;height:21px}.bubble {padding:9px 11px 8px;font-size:11px}.media-art {height:150px}.message-actions {display:none}.encryption-note {font-size:7px;margin-top:12px}.composer-zone {padding:7px 9px calc(8px + env(safe-area-inset-bottom))}.composer {min-height:49px;gap:3px;border-radius:15px}.composer-tool {width:30px;height:31px}.composer textarea {padding:7px 4px;font-size:10.5px}.send-button {width:36px;height:36px;border-radius:12px}.composer-hint {display:none}.page-view {padding:24px 15px 83px}.page-heading {align-items:flex-start;flex-direction:column;margin-bottom:17px}.people-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.person-card {min-height:173px;padding:11px}.person-card h3 {font-size:11px}.person-card p {font-size:8px}.person-card-actions {gap:4px}.small-action {padding:6px 7px;font-size:8px}.calls-layout,.settings-grid {grid-template-columns:1fr}.call-ready {padding:15px;gap:12px}.call-ready .avatar {width:54px;height:54px}.call-ready-copy h2 {font-size:16px}.call-ready-copy p {font-size:8px}.call-ready .icon-button {width:33px;height:33px}.modal-card {padding:19px}.call-screen {min-height:min(610px,78dvh);padding:19px}.call-orbit {height:190px;margin:14px auto 8px}.call-orbit .detail-avatar {width:135px;height:135px}.call-name {font-size:22px}.call-controls {gap:10px}.call-control {width:46px;height:46px;border-radius:15px}.call-control.end {width:54px;height:54px}.call-control-wrap {font-size:7px}.popover.emoji-popover {width:min(274px,calc(100vw - 20px))}.context-menu,.more-menu {width:175px} }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after {scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }