html,body,button,input,textarea,select,.font-mono{font-family:system-ui,sans-serif}
html,body{margin:0;height:100%;overscroll-behavior:none;touch-action:pan-x pan-y}
#app,#login-screen{height:var(--viewport-height,100dvh);width:100%}
#sidebar-panel>header,#active-chat-wrapper>header{padding-top:max(.75rem,env(safe-area-inset-top))}
#active-chat-wrapper>footer{padding-bottom:max(.625rem,env(safe-area-inset-bottom))}
#messages-container{min-height:0;overscroll-behavior-y:contain;scroll-behavior:auto}
.message-bubble{overflow-wrap:anywhere;max-width:100%}
.message-bubble audio{width:min(240px,54vw);display:block}
.message-bubble video,.message-bubble img{max-width:min(320px,54vw);max-height:240px;border-radius:14px}
@media (max-width:767px) {
  html,body { overflow:hidden }
  body { position:fixed; inset:0 }
  #app { position:fixed; inset:0 0 auto; transform:translateY(var(--viewport-top,0px)) }
  #chat-detail-panel { position:absolute; height:100% }
  #active-chat-wrapper { min-height:0 }
  #active-chat-wrapper>header { flex-shrink:0 }
  .keyboard-open #active-chat-wrapper>footer { padding-bottom:.625rem }
  input,textarea,#message-input { font-size:16px }
  .message-actions { opacity:1; width:32px; flex-direction:column }
}
#login-screen{display:grid;place-items:center;padding:20px;overflow:auto}
#login-screen.hidden{display:none}
#login-form{position:relative;width:min(100%,380px);padding:28px;display:grid;gap:12px}
#login-form label{font-size:13px;display:grid;gap:4px}
#login-form input{border-radius:12px;padding:10px 14px;background:#76768020}
.login-mark{width:60px;height:60px;border-radius:20px;background:#007aff1b;color:#007aff;display:grid;place-items:center}
.login-mark svg{width:32px;height:32px}
#login-theme{position:absolute;top:24px;right:24px;color:#8e8e93}
.primary{background:#007aff;color:white;border-radius:12px;padding:9px 18px;font-weight:700}
button:disabled{opacity:.55}
#remote-video{width:min(80vw,600px);max-height:46dvh;background:black;border-radius:20px;object-fit:contain}
#call-overlay{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
#call-overlay #remote-audio{display:none}
#toast-banner{max-width:calc(100vw - 24px);width:max-content}
[hidden]{display:none!important}
#call-mute-btn[aria-pressed=true],#call-cam-btn[aria-pressed=true]{background:#fff;color:#17181b}
.message-bubble,.message-bubble *,#message-overlay { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none }
#message-overlay textarea { -webkit-user-select:text; user-select:text }

.message-time { display:flex; justify-content:flex-end; align-items:center; gap:3px; font-size:10px; line-height:12px; opacity:.78 }
.message-reactions { display:flex; flex-wrap:wrap; gap:4px; margin-top:3px }
.message-reactions button { background:#007aff18; border-radius:16px; padding:2px 6px; font-size:12px }
.message-reactions button[aria-pressed=true] { box-shadow:inset 0 0 0 1px #007aff; background:#007aff2c }
.message-overlay { position:fixed; z-index:55; inset:0; display:flex; justify-content:center; align-items:safe center; padding:16px; overflow:auto; background:#15161b72; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px) }
#message-sheet { pointer-events:none; width:min(100%,380px); margin:auto 0; display:grid; justify-items:start; gap:8px }
.reaction-tray,.message-action-list { pointer-events:auto; background:#fafbfcf5; color:#17181c; box-shadow:0 8px 28px #0003; border:1px solid #fff9 }
.dark .reaction-tray,.dark .message-action-list { background:#27282df5; color:#fff; border-color:#ffffff20 }
.reaction-tray { display:flex; width:100%; border-radius:40px; padding:4px; justify-content:space-around }
.reaction-tray.hidden { display:none }
.reaction-tray button { flex:1; min-width:0; min-height:36px; display:grid; place-items:center; font-size:clamp(19px,6vw,26px); border-radius:50% }
.reaction-tray button[aria-pressed=true],.reaction-tray button:hover { background:#007aff25 }
.reaction-tray svg,.message-action-list svg,.pinned-message svg { width:18px; height:18px; flex:none }
.menu-preview { padding:8px 12px; max-width:100%; white-space:pre-wrap; overflow-wrap:anywhere }

.message-action-list { width:min(100%,275px); max-height:55dvh; overflow:auto; border-radius:22px; padding:6px }
.message-action-list h3 { padding:9px 12px; font-weight:700 }
.message-action-list button { display:flex; align-items:center; gap:12px; width:100%; min-height:40px; border-radius:12px; padding:6px 12px; text-align:start }
.message-action-list button:hover { background:#8882 }
.message-action-list button.danger { color:#e73c35 }
.dark .message-action-list button.danger { color:#ff6e68 }
.message-action-list textarea { display:block; width:100%; background:#8882; border-radius:12px; padding:8px; font-size:16px }
.pinned-message,.selection-toolbar { display:flex; flex:none; align-items:center; gap:10px; background:#007aff15; padding:8px 14px; font-size:13px }
.pinned-message { text-align:start }
.pinned-message span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pinned-message svg,.selection-toolbar button { color:#007aff }
.pinned-message.hidden,.selection-toolbar.hidden,.selecting>footer { display:none }
.selection-toolbar { justify-content:space-between; padding-bottom:max(10px,env(safe-area-inset-bottom)) }
.selecting .message-row { cursor:pointer; position:relative; padding-inline-start:24px }
.selecting .message-row::before { content:''; position:absolute; inset-inline-start:0; top:9px; width:17px; height:17px; border:1px solid #8e8e93; border-radius:50% }
.selecting .selected-message::before { content:'✓'; background:#007aff; border-color:#007aff; color:white; text-align:center; line-height:16px; font-size:12px }

.message-overlay.hidden { display:none }
.chat-header { flex:none; z-index:20; padding:8px 12px 5px }
.chat-header-row { display:grid; grid-template-columns:1fr minmax(0,2.6fr) 1fr; gap:8px; align-items:center }
.chat-heading,.chat-back,.chat-avatar,.pinned-message { background:rgba(255,255,255,.86); border:1px solid #fff; box-shadow:0 2px 7px #17223219 }
.dark :is(.chat-heading,.chat-back,.chat-avatar,.pinned-message) { background:#29292df0; border-color:#ffffff24 }
.chat-heading { grid-column:2; border-radius:24px; padding:5px 10px; min-width:0; text-align:center }
#active-chat-name { font-size:16px; line-height:19px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#active-chat-status { font-size:11px; line-height:16px; color:#646873; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.dark #active-chat-status { color:#b1b4bc }
#active-chat-status.is-online { color:#178543 }
.dark #active-chat-status.is-online { color:#53d580 }
#active-chat-status.is-online::before { content:''; display:inline-block; width:7px; height:7px; margin-inline-end:5px; border-radius:50%; background:#34c759 }
.chat-back { grid-column:1; grid-row:1; justify-self:start; border-radius:24px; padding:0 8px; min-height:41px; font-size:12px; white-space:nowrap; display:flex; align-items:center; gap:3px }
.chat-back svg { width:17px; height:17px; flex:none }
.chat-back-badge { border-radius:20px; background:#147be8; color:#fff; padding:1px 5px }
.chat-avatar { grid-column:3; grid-row:1; justify-self:end; width:44px; height:44px; border-radius:50%; padding:2px; overflow:hidden }
.chat-avatar > * { width:100%; height:100% }
.pinned-message { position:relative; z-index:19; margin:3px 12px 5px; border-radius:23px; padding:6px 12px; line-height:17px; justify-content:space-between }
.pinned-copy { min-width:0; display:grid; gap:1px; padding-inline-start:9px; border-inline-start:2px dashed #838791 }
.pinned-copy strong { font-size:12px }
.pinned-copy span { font-size:13px; opacity:.85 }
@media (min-width:768px) { .chat-back { display:none } }
@media (max-width:360px) { .chat-back:has(.chat-back-badge:not(.hidden)) > span:nth-child(2) { display:none } }
.message-overlay.anchored {
  display:block;
  overflow:hidden;
  background:#15161b4d;
  backdrop-filter:blur(17px) saturate(1.14);
  -webkit-backdrop-filter:blur(17px) saturate(1.14);
  animation:message-backdrop-in 250ms ease-out both;
}
.message-overlay.anchored.hidden { display:none }
.message-overlay.anchored #message-sheet { position:fixed; margin:0; gap:7px; justify-items:start }
.message-overlay.anchored #message-sheet.align-right { justify-items:end }
.message-overlay.anchored .menu-preview {
  position:relative;
  z-index:2;
  min-width:0; max-width:none;
  box-sizing:border-box;
  padding:6px 14px;
  white-space:normal;
  overflow:hidden;
  transform-origin:top left;
  box-shadow:0 9px 26px #0003;
}
.message-overlay.anchored .menu-preview .message-time { white-space:nowrap }
.message-overlay.anchored .reaction-tray {
  position:relative;
  transform-origin:50% 100%;
  animation:reaction-tray-in 240ms cubic-bezier(.22,.7,.2,1) both;
}
.message-overlay.anchored .reaction-tray:first-child::after {
  content:'';
  position:absolute;
  width:11px;
  height:11px;
  bottom:-3px;
  left:21px;
  border-radius:0 0 8px 0;
  background:inherit;
  transform:rotate(45deg);
}
.message-overlay.anchored .align-right .reaction-tray:first-child::after { left:auto; right:21px }
.message-overlay.anchored .reaction-tray button { animation:reaction-pop 230ms cubic-bezier(.22,.7,.2,1) both }
.message-overlay.anchored .reaction-tray button:nth-child(2) { animation-delay:18ms }
.message-overlay.anchored .reaction-tray button:nth-child(3) { animation-delay:32ms }
.message-overlay.anchored .reaction-tray button:nth-child(4) { animation-delay:46ms }
.message-overlay.anchored .reaction-tray button:nth-child(5) { animation-delay:60ms }
.message-overlay.anchored .reaction-tray button:nth-child(6) { animation-delay:74ms }
.message-overlay.anchored .reaction-tray button:nth-child(7) { animation-delay:88ms }
.message-overlay.anchored .reaction-tray button:nth-child(8) { animation-delay:102ms }
.message-overlay.anchored .message-action-list {
  max-height:min(45dvh,330px);
  transform-origin:top left;
  animation:message-actions-in 250ms cubic-bezier(.22,.7,.2,1) both;
}
.message-overlay.anchored .align-right .message-action-list { transform-origin:top right }
.message-overlay.anchored .message-action-list button:last-child { border-top:1px solid #8884; border-radius:0 0 12px 12px }
.message-overlay.closing { pointer-events:none; animation:message-backdrop-in 185ms ease-in reverse both }
.message-overlay.closing :is(.reaction-tray,.message-action-list) { animation:message-actions-in 155ms ease-in reverse both }
@keyframes message-backdrop-in { from { opacity:0 } to { opacity:1 } }
@keyframes reaction-tray-in { from { opacity:0; transform:translateY(5px) scale(.94) } to { opacity:1; transform:none } }
@keyframes reaction-pop { from { opacity:0; transform:translateY(4px) scale(.82) } to { opacity:1; transform:none } }
@keyframes message-actions-in { from { opacity:0; transform:translateY(-6px) scale(.97) } to { opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce) {
  .message-overlay.anchored,.message-overlay.anchored :is(.reaction-tray,.reaction-tray button,.message-action-list) { animation:none }
}
.message-row { position:relative; display:flex; justify-content:flex-start }
.message-row-own { justify-content:flex-end }
.message-row .message-bubble { touch-action:pan-y }
.swipe-reply-content { position:relative; transform:translateX(var(--swipe-distance,0px)); transition:transform 260ms cubic-bezier(.18,.85,.24,1.12) }
.swipe-reply-icon {
  position:absolute; inset-inline-end:0; top:50%; display:grid; place-items:center;
  width:32px; height:32px; border-radius:50%; background:#007aff20; color:#007aff;
  opacity:var(--swipe-progress,0); transform:translateY(-50%) scale(calc(.55 + .45 * var(--swipe-progress,0)));
  pointer-events:none; transition:opacity 160ms ease, transform 200ms ease, background-color 150ms ease;
}
.swipe-reply-icon svg { width:18px; height:18px }
.swipe-dragging :is(.swipe-reply-content,.swipe-reply-icon) { transition:none }
.swipe-ready .swipe-reply-icon { background:#007aff; color:#fff }
@media (prefers-reduced-motion:reduce) { .message-row :is(.swipe-reply-content,.swipe-reply-icon) { transition:none } }
#active-chat-wrapper>footer { position:relative; z-index:2 }
#voice-record-btn { touch-action:none; user-select:none; -webkit-touch-callout:none }
.capture-active { position:absolute; inset:0; pointer-events:none; opacity:0 }
.capture-bar { display:flex; align-items:center; min-height:42px; gap:12px }
.capture-bar.hidden,#capture-camera.hidden { display:none }
.capture-pill { flex:1; min-width:0; display:flex; gap:8px; align-items:center; padding:8px 13px; min-height:39px; border-radius:24px; background:#007aff12 }
.capture-dot { width:8px; height:8px; flex:none; border-radius:50%; background:#ff453a; animation:capture-pulse 1.2s ease-in-out infinite }
.capture-pill button { margin-inline-start:auto; color:#007aff; font-size:12px }
#voice-timer { font-size:13px; font-variant-numeric:tabular-nums }
#capture-controls { position:relative }
#capture-controls button { display:grid; place-items:center; border-radius:50%; }
#capture-controls button.hidden { display:none }
#capture-controls svg,.voice-player svg,.video-note svg { width:19px; height:19px }
#capture-send { background:#007aff; color:white; width:50px; height:50px; box-shadow:0 0 0 6px #007aff24; animation:capture-in 250ms cubic-bezier(.2,.7,.2,1.25) both }
#capture-lock,#capture-pause { position:absolute; bottom:65px; left:7px; width:36px; height:36px; background:#f4f7fc; color:#007aff; box-shadow:0 4px 15px #0003 }
.dark #capture-lock,.dark #capture-pause { background:#2d2f35 }
#capture-lock { transform:translateY(calc(-16px * var(--lock-progress,0))); }
#capture-wave { display:flex; gap:2px; align-items:center; height:24px; overflow:hidden; opacity:calc(1 - .6 * var(--cancel-progress,0)) }
#capture-wave i { width:2px; flex:none; border-radius:4px; height:calc(3px + 20px * var(--level,0)); background:#007aff; transition:height 85ms linear }
#capture-camera { position:absolute; pointer-events:none; width:min(58vw,235px); aspect-ratio:1; border-radius:50%; overflow:hidden; right:65px; bottom:calc(100% + 12px); box-shadow:0 8px 34px #0005; background:#111; animation:capture-in 240ms ease-out both }
#capture-preview { width:100%; height:100%; object-fit:cover; transform:scaleX(-1) }
.voice-player { display:flex; align-items:center; gap:9px; width:min(240px,60vw) }
.voice-player audio { display:none }
.voice-player button { display:grid; place-items:center; border-radius:50%; flex:none; width:36px; height:36px; background:#007aff; color:#fff }
.bubble-me .voice-player button { background:white; color:#007aff }
.voice-track { flex:1; min-width:0; position:relative; padding-top:2px }
.voice-wave { display:flex; align-items:center; gap:2px; height:23px; color:#007aff; position:relative }
.bubble-me .voice-wave { color:white }
.voice-wave i { flex:1; min-width:0; height:calc(3px + 17px * var(--peak)); background:currentColor; border-radius:4px }
.voice-wave { mask-image:linear-gradient(to right,#000 var(--played,0%),#0006 var(--played,0%)); }
.voice-track input { position:absolute; inset:0 0 auto; width:100%; height:25px; opacity:.001; cursor:pointer }
.voice-track:focus-within { outline:1px solid currentColor; border-radius:6px }
.voice-duration { font-size:10px; opacity:.8; display:block; font-variant-numeric:tabular-nums }
.video-note { position:relative; width:min(195px,59vw); aspect-ratio:1; border-radius:50%; overflow:hidden; background:#16171b }
.message-bubble .video-note video { width:100%; height:100%; max-width:none; max-height:none; display:block; border-radius:0; object-fit:cover }
.video-note button { display:grid; place-items:center; position:absolute; inset:0; margin:auto; width:45px; height:45px; border-radius:50%; background:#0008; color:white; transition:opacity 180ms ease }
.video-note.playing button { opacity:0 }
.video-note.playing:hover button,.video-note.playing button:focus-visible { opacity:1 }
.video-note>span { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); padding:2px 6px; border-radius:8px; color:white; background:#0008; font-size:11px; pointer-events:none }
@keyframes capture-pulse { 50% { opacity:.4 } }
@keyframes capture-in { from { opacity:0; transform:scale(.72) } to { opacity:1; transform:scale(1) } }
@media(prefers-reduced-motion:reduce){.capture-dot,#capture-send,#capture-camera{animation:none}}
.capture-active #voice-record-btn.capture-pressed { pointer-events:auto }

.capture-hint { font-size:11px; color:#737882; white-space:nowrap; opacity:calc(1 - var(--cancel-progress,0)); }
.dark .capture-hint { color:#b3b6c0 }
.capture-locked .capture-hint { display:none }
@media(max-width:380px){ #capture-wave { max-width:30px } }
.upload-bubble { display:flex; align-items:center; gap:10px; width:min(260px,72vw); padding:8px 11px }
.upload-control { position:relative; display:grid; place-items:center; flex:none; width:38px; height:38px; color:white; border-radius:50%; background:#ffffff25 }
.upload-control:disabled { opacity:1 }
.upload-control svg { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:#ffffff45; stroke-width:2.5; transform:rotate(-90deg) }
.upload-control .upload-progress { stroke:white; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:calc(100 - var(--upload-progress,0)); transition:stroke-dashoffset 200ms ease-out }
.upload-control span { font-size:10px; font-variant-numeric:tabular-nums }
.upload-copy { min-width:0; flex:1 }
.upload-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; font-weight:600 }
.upload-status { font-size:10px; opacity:.86 }
.upload-wave { height:20px }
@media(prefers-reduced-motion:reduce){.upload-control .upload-progress{transition:none}}
.upload-control:not(:disabled) { cursor:pointer }
.upload-control span { font-size:21px; line-height:1 }
.upload-control:disabled span { opacity:.55 }
.file-download { display:inline-flex; align-items:center; gap:6px; vertical-align:middle }
.download-cancel { width:32px; height:32px; background:#007aff; }
.download-percent { font-size:11px; font-variant-numeric:tabular-nums }
.media-card { position:relative; display:block; overflow:hidden; border-radius:12px; background:#141821; color:white; max-width:100% }
.message-bubble .media-card img { display:block; max-width:min(320px,67vw); max-height:290px; object-fit:contain }
.media-card-video { width:min(278px,64vw); aspect-ratio:4/3 }
.message-bubble .media-card video { width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; display:block }
.media-play { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#0009; color:white; flex:none }
.media-play svg { width:19px; height:19px }
.media-card .media-play { position:absolute; inset:0; margin:auto }
.music-card { display:flex; align-items:center; text-align:start; gap:9px; width:min(242px,60vw) }
.music-card .media-play { background:#007aff; }
.bubble-me .music-card .media-play { color:#007aff; background:#fff }
.media-card-copy { min-width:0; display:grid; gap:3px }
.media-card-copy strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px }
.media-card-copy small { font-size:11px; opacity:.8 }
.upload-with-preview { flex-wrap:wrap }
.message-bubble.upload-with-preview > :is(img,video) { width:100%; max-width:none; height:145px; object-fit:contain; background:#141821 }
.media-viewer { position:fixed; z-index:52; inset:0 0 auto; height:var(--viewport-height,100dvh); transform:translateY(var(--viewport-top,0px)); display:flex; flex-direction:column; overflow:auto; color:#fff; background:#101116f7; padding:env(safe-area-inset-top) 12px max(12px,env(safe-area-inset-bottom)); animation:message-backdrop-in 170ms ease-out }
.media-viewer.hidden { display:none }
.media-viewer-header { display:grid; grid-template-columns:40px minmax(0,1fr) 40px; align-items:center; padding:8px 0; gap:10px }
.media-viewer-header h2 { text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600 }
.media-viewer-header button,#viewer-play { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#ffffff20 }
.media-viewer-header svg,#viewer-play svg { width:19px; height:19px }
#lightbox-content { width:min(100%,720px); flex:1; align-self:center; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:11px }
.media-viewer-stage { min-height:0; display:grid; place-items:center; }
.media-viewer-stage :is(img,video) { max-width:100%; max-height:min(69dvh,calc(var(--viewport-height,100dvh) - 175px)); object-fit:contain; border-radius:10px }
.media-music-art { display:grid; place-items:center; width:min(150px,44vw); aspect-ratio:1; border-radius:24px; background:linear-gradient(140deg,#007aff,#5347ae) }
.media-music-art svg { width:42%; height:42% }
.media-player-controls { display:flex; align-items:center; gap:9px; font-size:11px; font-variant-numeric:tabular-nums; }
.media-player-controls input { flex:1; min-width:0; accent-color:#39a0ff }
.media-viewer-download,#viewer-error { text-align:center; font-size:13px }
.media-card { min-width:44px; min-height:44px }
.media-card img { margin:auto }
.photo-bubble { padding:2px 2px 5px }
.photo-bubble .media-card img { border-radius:0 }
.photo-bubble .message-time { padding:2px 5px 0 }
.photo-bubble > button:not(.media-card),.photo-bubble > p { margin:3px 5px }
.message-overlay.anchored .menu-preview.photo-bubble { padding:2px 2px 5px }
.photo-viewer .media-viewer-stage { position:relative; overflow:hidden; touch-action:none; overscroll-behavior:contain }
.photo-viewer .media-viewer-stage img { grid-area:1/1; touch-action:none; user-select:none; -webkit-touch-callout:none; will-change:transform }
.photo-viewer .photo-sliding img { pointer-events:none }
.photo-viewer .media-viewer-stage img { min-width:44px; min-height:44px }
.message-bubble.photo-upload { display:block; position:relative; width:max-content; max-width:100%; min-width:48px; min-height:48px; padding:2px }
.message-bubble.photo-upload > img,
.message-bubble.photo-bubble .media-card img { display:block; width:auto; height:auto; max-width:min(320px,72vw); max-height:min(390px,57dvh); object-fit:contain }
.message-bubble.photo-upload > img { border-radius:12px }
.photo-upload .upload-control { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#101116b8 }
.photo-upload-status { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
#active-chat-wrapper { position:relative; isolation:isolate }
#floating-chat-top,#floating-chat-bottom { position:absolute; left:0; right:0; pointer-events:none }
#floating-chat-top { top:0; z-index:20; padding-top:env(safe-area-inset-top) }
#floating-chat-bottom { bottom:0; z-index:21 }
#floating-chat-top :is(button,.chat-heading),#floating-chat-bottom :is(button,textarea,.composer-input,#voice-recording-bar,#reply-preview-bar,#message-selection) { pointer-events:auto }
#floating-chat-top .pinned-message { width:calc(100% - 24px) }
#messages-container { padding-top:calc(var(--chat-top,58px) + 8px); padding-bottom:calc(var(--chat-bottom,64px) + 8px) }
#floating-chat-bottom footer { position:relative; padding-bottom:max(12px,env(safe-area-inset-bottom)) }
.keyboard-open #floating-chat-bottom footer { padding-bottom:8px }
.selecting #floating-chat-bottom footer { display:none }
#floating-chat-bottom #reply-preview-bar { margin:0 12px 3px; border-radius:18px }
#standard-composer-row { align-items:center }
#standard-composer-row:not(.capture-active) :is(#toggle-attach-btn,#voice-record-btn,#send-msg-btn) { width:42px; height:42px }
#standard-composer-row .composer-input { min-height:42px; border-radius:24px; align-items:center }
#app {
  --chat-glass:linear-gradient(152deg,#ffffffb8,#edf3f983);
  --chat-glass-edge:#ffffffb8;
  --chat-glass-shadow:0 4px 15px #19243225,inset 0 1px 0 #ffffffa6;
}
.dark #app {
  --chat-glass:linear-gradient(152deg,#454a55b0,#252931a3);
  --chat-glass-edge:#ffffff30;
  --chat-glass-shadow:0 4px 16px #0005,inset 0 1px 0 #ffffff28;
}
#app :is(.chat-heading,.chat-back,.chat-avatar,.pinned-message,.attachment-menu,.capture-pill,.chat-call-action),
#app #standard-composer-row :is(#toggle-attach-btn,#voice-record-btn,.composer-input) {
  background:var(--chat-glass); border:1px solid var(--chat-glass-edge);
  box-shadow:var(--chat-glass-shadow);
  backdrop-filter:blur(22px) saturate(1.3); -webkit-backdrop-filter:blur(22px) saturate(1.3);
}
#app .composer-input:focus-within { border-color:#007aff75 }
#app :is(#toggle-attach-btn,#voice-record-btn) { color:#343b48 }
.dark #app :is(#toggle-attach-btn,#voice-record-btn) { color:#e3e9f2 }
#app #toggle-attach-btn[aria-expanded=true] { color:#007aff }
#app #send-msg-btn { background:linear-gradient(145deg,#4aa7ff,#006ee7db); border:1px solid #a3d4ff99; box-shadow:0 3px 12px #007aff50,inset 0 1px 0 #ffffff60 }
.chat-call-action { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:7px 13px; border-radius:24px; font-size:13px; font-weight:650; color:#0069d9 }
.dark .chat-call-action { color:#8ec5ff }
.chat-call-action svg { width:17px; height:17px }
#app :is(.chat-back,.chat-avatar,.chat-call-action,#toggle-attach-btn,#voice-record-btn,#send-msg-btn) { transition:transform 180ms ease,color 180ms ease }
#app :is(.chat-back,.chat-avatar,.chat-call-action,#toggle-attach-btn,#voice-record-btn,#send-msg-btn):active { transform:scale(.94) }
#call-overlay :is(#call-mute-btn,#call-cam-btn) { border:1px solid #ffffff32; box-shadow:inset 0 1px 0 #ffffff30; backdrop-filter:blur(18px) }
@media(prefers-reduced-motion:reduce){#app :is(.chat-back,.chat-avatar,.chat-call-action,#toggle-attach-btn,#voice-record-btn,#send-msg-btn){transition:none}}

.attachment-menu {
  position:absolute; z-index:3; bottom:calc(100% + 3px); inset-inline-start:12px; width:min(214px,calc(100% - 24px));
  padding:5px; border-radius:20px; opacity:0; visibility:hidden; transform:translateY(12px) scale(.97);
  transform-origin:bottom left; pointer-events:none; transition:opacity 180ms,transform 240ms cubic-bezier(.22,.75,.22,1),visibility 240ms
}
.attachment-menu.is-open { opacity:1; visibility:visible; transform:none; pointer-events:auto }
.attachment-menu[inert] button { pointer-events:none !important }
.attachment-menu button { display:flex; width:100%; align-items:center; gap:11px; min-height:40px; padding:0 11px; border-radius:14px; text-align:start; font-size:14px }
.attachment-menu button:hover,.attachment-menu button:focus-visible { background:#007aff19 }
.attachment-menu svg,.location-message svg { width:19px; height:19px; flex:none }
#toggle-attach-btn[aria-expanded=true] { color:#007aff }
.location-message { display:flex; align-items:center; gap:9px; font-size:12px }
.location-message button { text-decoration:underline; margin-top:3px }
@media(prefers-reduced-motion:reduce){.attachment-menu{transition:none}}
#floating-chat-bottom .capture-active :is(button,textarea,.composer-input) { pointer-events:none }
#floating-chat-bottom .capture-active #voice-record-btn.capture-pressed { pointer-events:auto }
#floating-chat-bottom #capture-controls button { pointer-events:auto }
.selection-handle { display:none }
.selecting .selection-handle { display:block; position:absolute; inset-block:0; inset-inline-start:-8px; width:32px; touch-action:none; z-index:1 }
.outgoing-quote { border-inline-start:2px solid currentColor; padding-inline-start:7px; margin-bottom:7px; font-size:12px; opacity:.85 }
.outgoing-quote span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
.outgoing-text .message-time button { text-decoration:underline }
.outgoing-text { max-width:94%; min-width:0 } @media(min-width:768px){.outgoing-text{max-width:76%}}
#emoji-picker {
  position:absolute; z-index:5; inset-inline:12px; bottom:calc(100% + 5px);
  margin-inline:auto; width:min(calc(100% - 24px),420px); padding:8px;
  background:#f7f8fbee; color:#242632; border:1px solid #fff9; border-radius:22px;
  box-shadow:0 5px 24px #0003; backdrop-filter:blur(14px);
  display:grid; grid-template-rows:auto auto minmax(0,1fr);
  max-height:min(325px,calc(var(--viewport-height,100dvh) - 100px));
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(12px) scale(.98);
  transform-origin:bottom; transition:opacity 180ms,transform 240ms cubic-bezier(.22,.75,.22,1),visibility 240ms;
}
.dark #emoji-picker { background:#272a32f5; color:#fff; border-color:#ffffff26 }
#emoji-picker.is-open { opacity:1; visibility:visible; pointer-events:auto; transform:none }
#emoji-picker[inert] :is(button,input) { pointer-events:none }
.emoji-top { display:flex; align-items:center; gap:8px }
#emoji-search { flex:1; min-width:0; border-radius:12px; background:#8882; padding:6px 9px; font-size:16px }
.emoji-top svg { width:19px; height:19px }
#emoji-categories { display:flex; overflow:auto; gap:2px; padding:4px 0 }
#emoji-categories button { flex:1 0 30px; border-radius:9px; min-height:30px }
#emoji-categories button[aria-pressed=true],#emoji-grid button:hover { background:#007aff24 }
#emoji-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(38px,1fr)); overflow:auto; overscroll-behavior:contain }
#emoji-grid button { height:39px; font-size:24px; border-radius:9px; transition:transform 140ms ease-out }
#emoji-grid button:active { transform:scale(.8) }
@media(prefers-reduced-motion:reduce){#emoji-picker,#emoji-grid button{transition:none}}
.chat-list-row { width:100%; min-height:76px; display:flex; align-items:center; gap:10px; padding-inline:16px; text-align:start; }
.chat-list-row:hover { background:#8881 }
@media(min-width:768px){.chat-list-active{background:#007aff12}}
.chat-list-avatar { flex:none; width:60px; height:60px }
.chat-list-online { position:absolute; bottom:0; right:1px; width:13px; height:13px; background:#34c759; border:2px solid white; border-radius:50% }
.dark .chat-list-online { border-color:#1c1c1e }
.chat-list-copy { flex:1; align-self:stretch; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:22px 22px; align-content:start; gap:1px 8px; padding-block:10px 7px; border-bottom:1px solid #83838a45 }
.chat-list-row:last-child .chat-list-copy { border-bottom-color:transparent }
.chat-list-copy h3,.chat-list-copy p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.chat-list-copy h3 { font-size:16px; line-height:22px; font-weight:650 }
.chat-list-copy p,.chat-list-copy time { color:#76767c; font-size:14px; line-height:22px }
.dark .chat-list-copy :is(p,time) { color:#a6a6ad }
.chat-list-copy time,.chat-list-marker { justify-self:end; white-space:nowrap }
.chat-list-marker { display:grid; place-items:center }
.chat-list-marker svg { width:15px; height:15px; color:#007aff }
.chat-list-unread { min-width:20px; height:20px; padding-inline:5px; background:#007aff; color:white; border-radius:30px; font-size:12px; line-height:20px; text-align:center }
.saved-avatar { display:grid; place-items:center; border-radius:50%; color:white; background:linear-gradient(155deg,#60caf4,#168dee) }
.saved-avatar svg { width:46%; height:46%; fill:currentColor }
.navigation-page { display:flex; flex:1; flex-direction:column; min-height:0 }
.navigation-page.hidden,#main-nav.hidden { display:none }
.navigation-page-header { flex:none; padding:calc(14px + env(safe-area-inset-top)) 20px 12px; border-bottom:1px solid #8883 }
.navigation-page-header h1 { font-size:26px; line-height:1.2; font-weight:700 }
.profile-settings-content { width:min(100%,520px); margin-inline:auto }
#app.standalone-page #sidebar-panel { width:100%; border-right:0 }
#app.standalone-page #chat-detail-panel { display:none }
#main-nav button[aria-current=page] { color:#007aff }
#main-nav button:not([aria-current]) { color:#8e8e93 }
#sidebar-panel { position:relative }
#main-nav {
  --nav-inset:4px; --nav-tab-height:44px; --nav-index:0;
  position:absolute; z-index:24; inset-inline:12px; bottom:max(10px,env(safe-area-inset-bottom));
  width:min(calc(100% - 24px),440px); margin-inline:auto; padding:var(--nav-inset);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-radius:36px;
  background:#f9fbffe0; border:1px solid #fff9; box-shadow:0 7px 25px #19243226;
  backdrop-filter:blur(22px) saturate(1.28); -webkit-backdrop-filter:blur(22px) saturate(1.28);
}
.dark #main-nav { background:#27282de0; border-color:#ffffff24; box-shadow:0 7px 25px #0005 }
#main-nav .nav-indicator {
  position:absolute; top:var(--nav-inset); bottom:var(--nav-inset); left:var(--nav-inset);
  width:calc((100% - 2 * var(--nav-inset)) / 4);
  transform:translateX(calc(var(--nav-index) * 100%)); border-radius:30px;
  background:#007aff17; pointer-events:none;
  transition:transform 280ms cubic-bezier(.22,.75,.22,1);
}
#main-nav button { position:relative; min-width:0; height:var(--nav-tab-height); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:0 2px; border-radius:24px; }
#main-nav button svg { width:21px; height:21px; display:block }
#main-nav button > span { font-size:11px; line-height:13px; white-space:nowrap }
#main-nav button:active { transform:scale(.94) }
#main-nav button:not([aria-current]) { color:#62636b }
.dark #main-nav button:not([aria-current]) { color:#c0c1c8 }
#sidebar-panel:has(#main-nav:not(.hidden)) :is(#chat-list-container,#contacts-page-list,#settings-page>.overflow-y-auto) {
  padding-bottom:calc(66px + env(safe-area-inset-bottom));
}
@media(prefers-reduced-motion:reduce){#main-nav .nav-indicator{transition:none}}

@media(pointer:coarse){input:not([type=checkbox]):not([type=range]),textarea,select{font-size:16px}}


/* Paint through the system bars, while keeping interactive content inside the safe area. */
html { background:#f2f2f7 }
html.dark { background:#000 }
#login-screen { padding:calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left)) }
#chats-page > header { padding-top:calc(.75rem + env(safe-area-inset-top)) }
@media(max-width:767px) {
  #sidebar-panel { padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right) }
  #floating-chat-top,#floating-chat-bottom { padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right) }
  #messages-container { padding-left:calc(.875rem + env(safe-area-inset-left)); padding-right:calc(.875rem + env(safe-area-inset-right)) }
  #main-nav { left:calc(12px + env(safe-area-inset-left)); right:calc(12px + env(safe-area-inset-right)); width:auto }
}
#signup-form { position:relative; width:min(100%,380px); padding:28px; display:grid; gap:12px }
#signup-form label { display:grid; gap:4px; font-size:13px }
#signup-form input { min-width:0; width:100%; border-radius:12px; padding:10px 14px; background:#76768020 }
#signup-form[hidden],#login-form[hidden] { display:none }


#messages-container > [data-message] { display:flex; width:100%; min-width:0; clear:both }
#messages-container > [data-message] .message-bubble { overflow-wrap:anywhere }
#messages-container > [data-message] .outgoing-text { min-width:0 }

.media-viewer.photo-viewer { padding:0; background:#08090b; overflow:hidden }
.photo-viewer .media-viewer-header { position:absolute; z-index:2; top:calc(env(safe-area-inset-top) + 8px); left:calc(env(safe-area-inset-left) + 12px); display:block; padding:0 }
.photo-viewer .media-viewer-header button { background:#101116a8; border:1px solid #ffffff38 }
.photo-viewer #media-viewer-title { display:none }
.photo-viewer #lightbox-content { width:100%; height:100%; gap:0 }
.photo-viewer .media-viewer-stage { flex:1; }
.photo-viewer .media-viewer-stage img { max-height:var(--viewport-height,100dvh); border-radius:0 }
.photo-viewer #viewer-error:not(.hidden) { position:absolute; inset-inline:12px; bottom:calc(12px + env(safe-area-inset-bottom)); pointer-events:none }

/* Handle search results + add-to-contacts capsule */
.search-people{padding-bottom:4px;border-bottom:1px solid #83838a45}
.search-people-title{padding:8px 18px 0;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8e8e93}
.contact-capsule{display:none;align-items:center;gap:10px;margin:0 14px 8px;padding:6px 8px 6px 6px;border-radius:999px;background:#ffffffa8;border:1px solid #ffffffb8;box-shadow:0 10px 26px #19243224,inset 0 1px 0 #fff;backdrop-filter:blur(24px) saturate(1.7);-webkit-backdrop-filter:blur(24px) saturate(1.7)}
.contact-capsule.is-visible{display:flex;animation:capsule-in .34s cubic-bezier(.22,1,.36,1)}
.dark .contact-capsule{background:#1c1c1ec2;border-color:#ffffff1f;box-shadow:0 10px 26px #00000066,inset 0 1px 0 #ffffff14}
.contact-capsule-avatar{flex:none;width:36px;height:36px}
.contact-capsule-copy{flex:1;min-width:0;display:grid;gap:1px;line-height:1.2}
.contact-capsule-copy strong{font-size:13.5px;font-weight:640;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contact-capsule-copy span{font-size:11.5px;color:#8e8e93;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contact-capsule-add{flex:none;display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:650;color:#fff;background:#007aff;box-shadow:0 3px 12px #007aff45;transition:transform .16s ease,background .16s ease}
.contact-capsule-add:hover{background:#0066d6}
.contact-capsule-add:active{transform:scale(.96)}
.contact-capsule-add[disabled]{opacity:.6}
.contact-capsule-add svg{width:14px;height:14px}
@keyframes capsule-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}

/* Frameless media messages (photo / video / video note) with floating timestamp */
.message-bubble.media-bubble{background:none !important;padding:0 !important;border-radius:0 !important;box-shadow:none;position:relative}
.message-bubble.media-bubble .media-card{border-radius:16px}
.message-bubble.media-bubble .media-card img{border-radius:0}
.message-bubble.media-bubble .message-time.media-time{
  position:absolute;right:7px;bottom:7px;left:auto;
  display:flex;align-items:center;gap:3px;
  padding:2px 7px;border-radius:999px;line-height:14px;
  background:rgba(12,14,18,.46);color:#fff;opacity:1;
  font-size:10.5px;font-variant-numeric:tabular-nums;
  -webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2);
  box-shadow:0 1px 6px rgba(0,0,0,.18);
  pointer-events:none;
}
.message-bubble.media-bubble .message-time.media-time svg{color:#fff;opacity:.92}
/* Round video messages: timestamp floats at the bottom-right corner, outside the circle */
.message-bubble.media-bubble.video-note-bubble .message-time.media-time{left:auto;right:2px;bottom:2px;transform:none}
.message-overlay.anchored .menu-preview.media-bubble .message-time.media-time{position:absolute}

/* Boot splash: shown from first paint until the messenger or the sign-in screen is ready */
#boot-screen{position:fixed;inset:0;z-index:90;display:grid;place-content:center;justify-items:center;gap:16px;transition:opacity .34s ease,visibility .34s ease}
#boot-screen.boot-out{opacity:0;visibility:hidden;pointer-events:none}
.boot-mark{position:relative;width:76px;height:76px;border-radius:24px;background:#007aff1f;color:#007aff;display:grid;place-items:center;box-shadow:0 10px 26px #007aff26;animation:boot-breathe 2s ease-in-out infinite}
.boot-mark svg{width:38px;height:38px}
.boot-ring{position:absolute;inset:0;border-radius:inherit;border:2px solid #007aff;animation:boot-ring 2s ease-out infinite;pointer-events:none}
.boot-name{font-weight:700;font-size:15px;color:#8e8e93;animation:boot-fade .5s ease .1s both}
.boot-bar{position:relative;width:118px;height:3px;border-radius:99px;background:#007aff26;overflow:hidden}
.boot-bar i{position:absolute;top:0;bottom:0;left:0;width:42%;border-radius:inherit;background:#007aff;animation:boot-slide 1.15s cubic-bezier(.4,0,.2,1) infinite}
@keyframes boot-breathe{0%,100%{transform:scale(.94);box-shadow:0 8px 20px #007aff1a}50%{transform:scale(1.05);box-shadow:0 16px 38px #007aff3d}}
@keyframes boot-ring{0%{transform:scale(.9);opacity:.5}70%,100%{transform:scale(1.5);opacity:0}}
@keyframes boot-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes boot-slide{0%{transform:translateX(-115%)}100%{transform:translateX(290%)}}
@media (prefers-reduced-motion:reduce){.boot-mark,.boot-ring,.boot-bar i{animation:none}.boot-bar i{width:100%;opacity:.5}}

/* Profile photo cropper: circular frame, drag to position, pinch to zoom */
#avatar-crop{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#101116f7;color:#fff;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));touch-action:none;overscroll-behavior:none}
#avatar-crop.hidden{display:none}
.avatar-crop-stage{position:relative;width:var(--avatar-crop-size,min(78vw,320px));height:var(--avatar-crop-size,min(78vw,320px));border-radius:50%;overflow:hidden;background:#ffffff14;touch-action:none;cursor:grab}
.avatar-crop-stage:active{cursor:grabbing}
.avatar-crop-stage img{position:absolute;left:50%;top:50%;max-width:none;max-height:none;transform-origin:center;pointer-events:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.avatar-crop-ring{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 2px #ffffff73,0 0 0 1px #0000004d;pointer-events:none}
.avatar-crop-hint{margin:0;font-size:12px;color:#ffffffa8}
.avatar-crop-actions{display:flex;gap:10px}
.avatar-crop-actions button{border-radius:999px;padding:9px 20px;font-weight:600;font-size:14px;background:#ffffff1f;color:#fff}
.avatar-crop-actions .primary{background:#007aff;color:#fff}

/* Chat text size */
.chat-text,#message-input.chat-text{font-size:16.5px}