/* FOX V16 — real component layout. Upstream Tinode styles and licenses retained. */
:root { --fox-orange: #ff793b; --fox-surface: #171d28; }
#mountPoint { background: #090d14 !important; padding: 20px !important; }
#app-container { border: 1px solid #2b303d; background: #111620; box-shadow: 0 24px 90px #0005 !important; }
.fox-rail { display: flex; flex: 0 0 88px; flex-direction: column; align-items: center; gap: 14px; padding: 24px 8px 16px; background: #10141e; border-right: 1px solid #272d39; box-sizing: border-box; }
.fox-rail-logo { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 26px; }
.fox-rail-logo img { width: 52px; height: 52px; }
.fox-rail button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 70px; min-height: 64px; border: 0; border-radius: 15px; background: transparent; color: #9da7ba; cursor: pointer; font: inherit; font-size: 10px; }
.fox-rail button.active { color: #ff945f; background: #ff793b16; }
.fox-rail button:hover { background: #ffffff0b; color: #fff; }
.fox-rail button.fox-rail-profile { margin-top: auto; width: 42px; min-height: 42px; border-radius: 50%; background: #684332; color: #ffdec6; font-size: 18px; }
.fox-rail small { font-size: 10px; color: #758093; letter-spacing: 2px; }
#sidepanel { background: #171c27 !important; width: 332px !important; min-width: 270px; border-right: 1px solid #2a303d !important; }
.fox-authenticated #side-caption-panel { padding: 24px 22px 12px !important; background: transparent !important; border: 0 !important; min-height: 80px !important; }
.fox-authenticated .fox-v3-brand, .fox-authenticated .fox-v3-profile-strip { display: none !important; }
.fox-authenticated #side-caption-panel:not(:has(.fox-v4-sidebar-heading)) .fox-v3-profile-strip { display: flex !important; }
.fox-authenticated .fox-v4-sidebar-heading { margin: 0 !important; font-size: 25px !important; letter-spacing: -.6px; }
.fox-authenticated .fox-v3-sidebar-actions { position: absolute; right: 16px; top: 20px; }
.fox-authenticated .fox-v4-new-chat { margin-right: 40px; background: #ff793b !important; color: #fff !important; border-radius: 12px !important; }
.fox-filters { display: flex; gap: 6px; padding: 4px 18px 14px; }
.fox-filters button { border: 1px solid transparent; border-radius: 20px; padding: 8px 10px; color: #a2adbd; background: #222938; font-size: 11px; cursor: pointer; }
.fox-filters button[aria-pressed=true] { color: #ffae85; border-color: #ff793b40; background: #ff793b19; }
.fox-v4-dialog-tools { padding: 0 16px 14px !important; }
.fox-v4-search { background: #222937 !important; border: 1px solid #303847 !important; border-radius: 13px !important; }
.contact-box { padding: 0 10px !important; }
.contact-box > li { margin: 3px 0 !important; padding: 15px 12px !important; border-radius: 14px !important; border: 1px solid transparent !important; background: transparent !important; min-height: 76px; box-sizing: border-box; }
.contact-box > li:hover { background: #222b39 !important; }
.contact-box > li.selected { background: #ff793b15 !important; border-color: #ff793b32 !important; box-shadow: inset 3px 0 #ff793b; }
.contact-title { color: #edf1f7 !important; font-weight: 600; font-size: 14px; }
.contact-comment { color: #9da8ba !important; margin-top: 7px; font-size: 12px; }
.fox-contact-time { float: right; color: #8e9bad; font-size: 10px; margin-left: 5px; }
.fox-call-note { color: #acb7c8; padding: 0 22px; line-height: 1.6; font-size: 13px; }
#topic-caption-panel { min-height: 84px !important; padding: 16px 26px !important; background: #191e29 !important; border-bottom: 1px solid #2b3341 !important; }
#topic-title { font-size: 17px !important; font-weight: 600 !important; }
#topic-last-seen { color: #98a7ba !important; font-size: 12px !important; margin-top: 5px; }
.fox-v3-chat-actions { display: flex; gap: 5px; align-items: center; }
.fox-v3-chat-actions button, .fox-v3-chat-actions a { display: grid !important; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 11px; color: #aeb9ca !important; background: transparent !important; cursor: pointer; }
.fox-v3-chat-actions button:hover, .fox-v3-chat-actions a:hover { background: #ffffff0b !important; }
.fox-v3-chat-actions button:disabled { opacity: .3; cursor: not-allowed; }
#messages-container { background-color: #0d121e !important; background-image: radial-gradient(ellipse at 85% 20%, #33395755, transparent 58%), radial-gradient(ellipse at 15% 90%, #69402d28, transparent 50%), radial-gradient(circle at 21px 35px, #cad5f044 1px, transparent 1.6px), radial-gradient(circle at 61px 83px, #cad5f022 .7px, transparent 1.2px) !important; background-size: auto, auto, 173px 193px, 113px 137px !important; }
.fox-v4-chat-ambient { display: none !important; }
#messages-panel { background: transparent !important; padding: 20px 28px !important; }
#scroller .bubble { padding: 12px 16px !important; border-radius: 18px !important; max-width: min(520px, 72vw) !important; box-shadow: 0 4px 15px #0002 !important; line-height: 1.55; }
#scroller .left .bubble { background: #282f3e !important; border: 1px solid #394252 !important; color: #f1f3f8 !important; border-bottom-left-radius: 5px !important; }
#scroller .right .bubble { background: linear-gradient(125deg, #ee6b2d, #ce501e) !important; border: 1px solid #ff945b !important; color: #fff !important; border-bottom-right-radius: 5px !important; }
#scroller .bubble::before, #scroller .bubble::after { display: none !important; }
#scroller .bubble a { color: inherit; }
.audio-player { display: flex !important; align-items: center !important; gap: 12px !important; min-width: 0 !important; padding: 5px 0 !important; background: transparent !important; border: 0 !important; }
.audio-player button.fox-audio-toggle { display: grid !important; place-items: center !important; width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; flex: 0 0 46px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; color: #fff !important; background: #ff793b !important; cursor: pointer; box-shadow: 0 3px 12px #0002; }
.right .audio-player button.fox-audio-toggle { background: #fff !important; color: #db5b25 !important; }
.audio-player .playback { width: clamp(100px, 16vw, 220px) !important; height: 32px !important; }
.audio-player .timer { color: #e8edf6 !important; margin-top: 4px; font-size: 11px; }
#send-message-wrapper.fox-v5-composer { background: #141a25 !important; border-top: 1px solid #2b3341 !important; padding: 16px 22px !important; }
#send-message-panel.fox-v5-composer-panel { align-items: center !important; border: 1px solid #3a4252 !important; border-radius: 20px !important; padding: 6px 8px !important; background: #232b39 !important; gap: 4px !important; }
#send-message-input.fox-v5-message-input { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 12px 6px !important; color: #f1f4fa !important; }
#send-message-panel a.fox-composer-primary { min-width: 46px !important; height: 46px !important; min-height: 46px !important; border-radius: 15px !important; background: #ff793b !important; color: #fff !important; opacity: 1; }
.fox-message-search { display: flex; gap: 8px; padding: 12px; align-items: center; background: #232b39; color: #bac5d5; font-size: 12px; }
.fox-message-search input { flex: 1; min-width: 0; background: #151b27; color: #fff; border: 1px solid #40495c; border-radius: 8px; padding: 10px; }
.fox-message-search button { border: 0; border-radius: 8px; background: #343f51; color: #fff; min-height: 36px; cursor: pointer; }
.bubble .attachment { background: #ffffff0c; border: 1px solid #ffffff24; border-radius: 12px; padding: 10px; }
@media (min-width: 641px) and (max-width: 1000px) { #mountPoint { padding: 0 !important; } .fox-rail { flex-basis: 72px; padding-inline: 2px; } #sidepanel { width: 280px !important; } #topic-caption-panel { padding-inline: 14px !important; } #messages-panel { padding: 16px !important; } }
@media (max-width: 640px) {
 #mountPoint { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important; }
 #app-container { border: 0; }
 .fox-rail { position: absolute; bottom: 0; left: 0; right: 0; height: 68px; z-index: 5; flex-direction: row; justify-content: space-around; padding: 4px 8px; border-top: 1px solid #303747; }
 .fox-rail-logo, .fox-rail small, .fox-rail .fox-rail-profile { display: none !important; }
 .fox-rail button { min-height: 54px; gap: 4px; }
 #sidepanel { width: 100% !important; min-width: 0; }
 #sidepanel.fox-authenticated { padding-bottom: 68px; box-sizing: border-box; }
 #topic-caption-panel { padding: 10px 12px !important; gap: 7px; min-height: 70px !important; }
 #topic-title { font-size: 15px !important; }
 #topic-title-group { min-width: 0; }
 .fox-v3-chat-actions { gap: 0; }
 .fox-v3-chat-actions button, .fox-v3-chat-actions a { width: 32px; }
 #messages-panel { padding: 14px 10px !important; }
 #scroller .bubble { max-width: 82vw !important; padding: 10px 12px !important; }
 .audio-player .playback { width: min(42vw, 200px) !important; }
 #send-message-wrapper.fox-v5-composer { padding: 8px !important; }
 #send-message-panel.fox-v5-composer-panel { gap: 0 !important; }
 #send-message-panel > a { min-width: 28px; }
 .fox-emoji-toggle { min-width: 30px; }
}
/* Override legacy V3–V14 selectors with their actual component specificity. */
#app-container #sidepanel .contact-box > li.selected { background: #302622 !important; color: #edf1f7 !important; }
#app-container .contact-box > li.selected::before, #app-container .contact-box > li.selected::after { display: none !important; }
#app-container .contact-box .contact-title { color: #edf1f7 !important; }
#app-container #topic-caption-panel.fox-v3-chat-header { min-height: 84px !important; height: 84px !important; background: #191e29 !important; }
#app-container #messages-container.fox-v4-messages-container { background: #0d121e !important; }
#app-container #messages-container.fox-v4-messages-container::before { background: linear-gradient(#0d121e99,#0d121ebb), url('../img/fox/chat-wallpaper.jpg') center/cover !important; opacity: .6 !important; }
#app-container #messages-panel::before { display: none !important; }
#app-container #send-message-wrapper.fox-v5-composer { width: 100% !important; max-width: none !important; margin: 0 !important; border-radius: 0 !important; box-sizing: border-box; }
#app-container .fox-authenticated #side-caption-panel { position: relative; }
#app-container .fox-authenticated #side-caption-panel:has(.fox-v4-sidebar-heading) .fox-v3-sidebar-actions { display: none !important; }
#app-container .fox-authenticated .fox-v4-new-chat { margin: 0 !important; width: 38px !important; min-width: 38px !important; height: 38px !important; padding: 0 !important; display: grid; place-items: center; }
#app-container .fox-authenticated .fox-v4-new-chat i { font-size: 21px !important; }
.fox-rail-logo svg { width: 52px; height: 52px; }
@media (max-width: 640px) { #app-container #topic-caption-panel.fox-v3-chat-header { height: 70px !important; min-height: 70px !important; } }
#app-container #topic-caption-panel .fox-v3-chat-actions { flex: 0 0 auto !important; width: auto !important; gap: 4px !important; }
#app-container #topic-caption-panel .fox-v3-chat-actions > * { box-sizing: border-box !important; flex: 0 0 36px !important; width: 36px !important; min-width: 0 !important; max-width: 36px !important; padding: 0 !important; margin: 0 !important; }
#app-container #topic-title-group { flex: 1 1 auto; overflow: hidden; }
#app-container .fox-message-search { background: #232b39 !important; border: 0 !important; box-shadow: none !important; flex-shrink: 0; }
#app-container .fox-message-search button { padding: 0 10px !important; min-width: 32px !important; }
#app-container #messages-container.fox-v4-messages-container::before { display: block !important; content: '' !important; pointer-events: none; }
#app-container .fox-audio-toggle { transform: none !important; }
@media (max-width:640px) {
 #app-container #topic-caption-panel.fox-v3-chat-header { padding: 10px 8px !important; gap: 5px !important; }
 #app-container #topic-caption-panel .fox-v3-chat-actions { gap: 0 !important; }
 #app-container #topic-caption-panel .fox-v3-chat-actions > * { flex-basis: 30px !important; width: 30px !important; max-width: 30px !important; }
 #app-container #topic-caption-panel .avatar-box { width: 36px !important; min-width: 36px !important; height: 36px !important; margin-right: 2px !important; }
 #app-container #topic-caption-panel .avatar-box .lettertile, #app-container #topic-caption-panel .avatar-box img { width: 36px !important; height: 36px !important; border-radius: 12px !important; }
 #app-container #topic-caption-panel #hide-message-view { flex: 0 0 28px; min-width: 28px; width: 28px; margin: 0; }
 #app-container #topic-title { font-size: 13px !important; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
}
#app-container #messages-container.fox-v4-messages-container { background: linear-gradient(#0d121eb8,#0d121ed9), url('../img/fox/chat-wallpaper.jpg') center/cover !important; }
#app-container #messages-container.fox-v4-messages-container::before, #app-container #messages-container.fox-v4-messages-container::after { display: none !important; }

/* =========================================================
   FOX MESSENGER V16.1
   Modern desktop chat visual pass
   ========================================================= */

:root {
  --fox16-rail: 92px;
  --fox16-list: 348px;
  --fox16-header: 76px;
  --fox16-orange: #ff6828;
  --fox16-orange-2: #ff7b36;
  --fox16-bg: #090f17;
  --fox16-panel: #0d141e;
  --fox16-panel-2: #111a26;
  --fox16-card: #16202d;
  --fox16-border: rgba(147, 174, 207, .14);
  --fox16-muted: #8794a7;
  --fox16-text: #f4f7fb;
}

/* ---------- APP ---------- */

html,
body,
#app-container {
  background: var(--fox16-bg) !important;
}

#app-container {
  color: var(--fox16-text);
}

/* ---------- LEFT CHAT LIST ---------- */

#app-container #sidepanel {
  background:
    linear-gradient(180deg, rgba(17,24,34,.99), rgba(10,16,24,.99))
    !important;
  border-right: 1px solid var(--fox16-border) !important;
  box-shadow: 16px 0 40px rgba(0,0,0,.16);
}

#app-container #side-caption-panel {
  min-height: 86px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.055) !important;
  background: rgba(13,20,30,.96) !important;
}

#app-container #side-caption-panel h2,
#app-container .fox-v4-sidebar-heading {
  font-size: 23px !important;
  line-height: 1.15 !important;
  font-weight: 750 !important;
  letter-spacing: -.45px;
}

#app-container .fox-v4-new-chat {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: rgba(255,104,40,.16) !important;
  border: 1px solid rgba(255,104,40,.35) !important;
  color: var(--fox16-orange) !important;
}

#app-container .fox-v4-new-chat:hover {
  background: var(--fox16-orange) !important;
  color: white !important;
  transform: translateY(-1px);
}

#app-container #sidepanel .search-box,
#app-container #sidepanel .fox-search,
#app-container #sidepanel form.search {
  margin: 12px 12px 10px !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  overflow: hidden;
}

#app-container #sidepanel input[type="text"],
#app-container #sidepanel input[type="search"] {
  color: #eef3fa !important;
}

#app-container #sidepanel .contact-box {
  padding: 4px 8px 18px !important;
}

#app-container #sidepanel .contact-box > li {
  position: relative;
  min-height: 74px !important;
  margin: 4px 0 !important;
  padding: 10px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 17px !important;
  background: transparent !important;
  transition:
    background .16s ease,
    border-color .16s ease,
    transform .16s ease !important;
}

#app-container #sidepanel .contact-box > li:hover {
  background: rgba(255,255,255,.045) !important;
}

#app-container #sidepanel .contact-box > li.selected {
  background:
    linear-gradient(
      110deg,
      rgba(255,104,40,.18),
      rgba(255,104,40,.075)
    ) !important;
  border-color: rgba(255,104,40,.26) !important;
}

#app-container #sidepanel .contact-box > li.selected::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: -1px;
  top: 15px;
  bottom: 15px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--fox16-orange);
}

#app-container #sidepanel .contact-title {
  color: #f2f5fa !important;
  font-weight: 650 !important;
}

#app-container #sidepanel .contact-box .avatar-box,
#app-container #sidepanel .contact-box .avatar-box img,
#app-container #sidepanel .contact-box .lettertile {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  border-radius: 16px !important;
}

/* ---------- CHAT HEADER ---------- */

#app-container #topic-caption-panel.fox-v3-chat-header {
  min-height: var(--fox16-header) !important;
  height: var(--fox16-header) !important;
  padding: 10px 18px !important;
  background:
    linear-gradient(
      180deg,
      rgba(13,20,30,.98),
      rgba(12,18,27,.94)
    ) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#app-container #topic-caption-panel .avatar-box {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
}

#app-container #topic-caption-panel .avatar-box img,
#app-container #topic-caption-panel .avatar-box .lettertile {
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
}

#app-container #topic-title {
  font-size: 15px !important;
  font-weight: 720 !important;
  color: #f5f7fb !important;
}

#app-container #topic-caption-panel .fox-v3-chat-actions > * {
  width: 40px !important;
  max-width: 40px !important;
  flex-basis: 40px !important;
  height: 40px !important;
  border-radius: 13px !important;
  color: #b7c2d1 !important;
}

#app-container #topic-caption-panel .fox-v3-chat-actions > *:hover {
  background: rgba(255,255,255,.07) !important;
  color: white !important;
}

/* ---------- CHAT BACKGROUND ---------- */

#app-container #messages-container.fox-v4-messages-container {
  background:
    linear-gradient(
      rgba(5,12,20,.28),
      rgba(5,12,20,.42)
    ),
    url('../img/fox/chat-wallpaper.jpg') center/cover fixed
    !important;
}

#app-container #messages-panel {
  padding-left: clamp(22px, 4.2vw, 72px) !important;
  padding-right: clamp(22px, 4.2vw, 72px) !important;
  padding-top: 20px !important;
  padding-bottom: 26px !important;
}

/* ---------- MESSAGES ---------- */

#app-container #messages-panel .message {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

#app-container #messages-panel .message-content,
#app-container #messages-panel .message .content {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

#app-container #messages-panel .message.received,
#app-container #messages-panel .message.incoming {
  border-radius: 18px 18px 18px 6px !important;
}

#app-container #messages-panel .message.sent,
#app-container #messages-panel .message.outgoing {
  border-radius: 18px 18px 6px 18px !important;
}

/* ---------- AUDIO PLAYER ---------- */

#app-container .audio-player {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 240px;
  min-height: 54px !important;
}

#app-container .audio-player > button,
#app-container .audio-player button.play,
#app-container .audio-player .fox-v16-audio-play {
  appearance: none !important;
  -webkit-appearance: none !important;

  display: inline-grid !important;
  place-items: center !important;

  flex: 0 0 46px !important;

  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;

  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  border-radius: 50% !important;

  background: rgba(255,255,255,.96) !important;
  color: var(--fox16-orange) !important;

  box-shadow:
    0 5px 18px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.25)
    !important;

  cursor: pointer !important;
  opacity: 1 !important;
  transform: none !important;
}

#app-container .audio-player > button:hover,
#app-container .audio-player button.play:hover,
#app-container .audio-player .fox-v16-audio-play:hover {
  transform: scale(1.055) !important;
}

#app-container .audio-player > button svg,
#app-container .audio-player button.play svg,
#app-container .audio-player .fox-v16-audio-play svg {
  display: block !important;
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;
  min-height: 21px !important;
  fill: currentColor !important;
  color: currentColor !important;
  opacity: 1 !important;
}

#app-container .audio-player .playback {
  width: clamp(145px, 14vw, 220px) !important;
  height: 38px !important;
  min-height: 38px !important;
  cursor: pointer;
}

#app-container .audio-player .timer {
  margin-top: 2px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  opacity: .78 !important;
}

/* incoming voice */

#app-container .received .audio-player > button,
#app-container .incoming .audio-player > button {
  background: rgba(255,255,255,.11) !important;
  color: #f4f7fb !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

/* ---------- COMPOSER ---------- */

#app-container #send-message-wrapper.fox-v5-composer {
  width: min(calc(100% - 56px), 980px) !important;
  max-width: 980px !important;

  margin:
    10px auto
    max(12px, env(safe-area-inset-bottom))
    !important;

  padding: 7px 9px !important;

  border-radius: 22px !important;
  border: 1px solid rgba(142,170,202,.20) !important;

  background: rgba(9,16,25,.92) !important;

  box-shadow:
    0 14px 45px rgba(0,0,0,.32),
    inset 0 1px rgba(255,255,255,.035)
    !important;

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

#app-container #send-message-panel.fox-v5-composer-panel {
  min-height: 50px !important;
  gap: 5px !important;
  align-items: center !important;
}

#app-container #send-message-panel > a,
#app-container #send-message-panel > button,
#app-container .fox-emoji-toggle {
  min-width: 38px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  display: inline-grid !important;
  place-items: center !important;
}

#app-container #send-message-panel textarea,
#app-container #send-message-panel input {
  min-height: 42px !important;
  font-size: 14px !important;
  color: #eef3fa !important;
}

#app-container #send-message-panel textarea::placeholder,
#app-container #send-message-panel input::placeholder {
  color: #657286 !important;
}

#app-container #send-message-panel .material-icons {
  font-size: 22px !important;
}

/* ---------- SCROLLBARS ---------- */

#app-container * {
  scrollbar-width: thin;
  scrollbar-color: rgba(145,163,184,.34) transparent;
}

#app-container *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#app-container *::-webkit-scrollbar-thumb {
  background: rgba(145,163,184,.28);
  border-radius: 99px;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px) {
  #app-container #messages-panel {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #app-container #send-message-wrapper.fox-v5-composer {
    width: calc(100% - 24px) !important;
  }

  #app-container .audio-player .playback {
    width: min(35vw, 190px) !important;
  }
}

@media (max-width: 640px) {
  :root {
    --fox16-header: 66px;
  }

  #app-container #topic-caption-panel.fox-v3-chat-header {
    height: var(--fox16-header) !important;
    min-height: var(--fox16-header) !important;
    padding: 8px 7px !important;
  }

  #app-container #messages-panel {
    padding:
      12px 10px
      18px !important;
  }

  #app-container #send-message-wrapper.fox-v5-composer {
    width: calc(100% - 12px) !important;
    margin:
      5px 6px
      max(7px, env(safe-area-inset-bottom))
      !important;
    padding: 5px !important;
    border-radius: 18px !important;
  }

  #app-container .audio-player {
    min-width: 205px !important;
    gap: 9px !important;
  }

  #app-container .audio-player > button,
  #app-container .audio-player button.play,
  #app-container .audio-player .fox-v16-audio-play {
    flex-basis: 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }

  #app-container .audio-player .playback {
    width: min(42vw, 175px) !important;
  }
}

/* FOX V16.1 END */

/* V16.2: component-targeted finishing pass. */
.fox-rail { flex-basis: 80px; padding: 18px 5px 14px; gap: 10px; }
.fox-rail button { width: 66px; min-height: 60px; }
.fox-rail-logo { margin-bottom: 18px; }
#app-container #sidepanel { width: 360px !important; }
#app-container .contact-title { font-size: 15px; }
#app-container .contact-comment { font-size: 13px; }
#app-container #messages-container.fox-v4-messages-container { background: linear-gradient(#050c1480,#050c14a6), url('../img/fox/chat-wallpaper.jpg') center/cover !important; }
#app-container #messages-panel { padding-inline: clamp(20px,3vw,48px) !important; }
#app-container #scroller .bubble { font-size: 16px !important; max-width: min(640px,78%) !important; overflow-wrap: anywhere; }
#app-container #send-message-panel.fox-v5-composer-panel { background: transparent !important; border: 0 !important; }
#app-container .audio-player button.fox-audio-toggle { width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; max-width: 46px !important; max-height: 46px !important; flex: 0 0 46px !important; }
#app-container .left .audio-player button.fox-audio-toggle { background: #ff793b !important; color: white !important; }
#app-container .audio-player button:disabled { opacity: .45 !important; cursor: wait !important; }
.fox-moments-entry { display: flex; align-items: center; gap: 12px; margin: 6px 16px 14px; padding: 10px; border: 1px solid #334052; border-radius: 16px; background: #17202e; color: #f4f7fb; cursor: pointer; text-align: left; }
.fox-moments-entry > span:nth-child(2) { flex: 1; }
.fox-moments-entry small { display: block; margin-top: 4px; color: #94a4b9; font-size: 11px; }
.fox-moment-ring { display: inline-grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border: 2px solid #64758c; border-radius: 50%; color: #ff925b; }
.fox-moment-ring.unseen { border-color: #ff793b; box-shadow: 0 0 0 3px #ff793b18; }
.fox-moments-overlay { position: fixed; inset: 0; z-index: 10000; background: #050a12ed; color: #f4f7fb; display: flex; justify-content: center; overflow: auto; padding: max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom)); box-sizing: border-box; backdrop-filter: blur(20px); }
.fox-moments-shell { width: min(640px,100%); min-width: 0; }
.fox-moments-shell header { display: flex; align-items: center; justify-content: space-between; }
.fox-moments-shell h2 { font-size: 26px; }
.fox-moments-shell button { min-height: 44px; min-width: 44px; background: #233044; border: 1px solid #3d4b5f; border-radius: 12px; color: #fff; padding: 8px 14px; cursor: pointer; }
.fox-moments-shell button:disabled { opacity: .4; }
.fox-moments-note { color: #9fadc0; font-size: 14px; line-height: 1.6; }
.fox-moments-shell form { display: grid; gap: 12px; padding: 20px; background: #121c2a; border-radius: 20px; }
.fox-moment-upload { display: grid; gap: 12px; }
.fox-moment-upload input { max-width: 100%; }
.fox-moments-shell textarea { box-sizing: border-box; width: 100%; min-height: 88px; padding: 12px; border: 1px solid #3d4b5f; border-radius: 12px; background: #0d1520; color: #fff; font: inherit; resize: vertical; }
.fox-moments-shell .fox-moment-publish { background: #e96328; border-color: #ff925b; }
.fox-moment-preview { width: 100%; height: 200px; object-fit: contain; border-radius: 12px; background: #0005; }
.fox-moments-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-block: 24px; }
.fox-moments-grid article { min-width: 0; }
.fox-moments-grid article > button:first-child { width: 100%; padding: 5px; display: grid; gap: 6px; text-align: left; }
.fox-moments-grid .unseen { border: 2px solid #ff793b; }
.fox-moments-grid img, .fox-moments-grid video { width: 100%; height: 150px; object-fit: cover; border-radius: 9px; }
.fox-moments-grid strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fox-moments-grid small { color: #acbbcf; }
.fox-moments-grid article > button:last-child { background: transparent; border: 0; color: #aebbd0; }
.fox-moment-viewer { position: relative; display: flex; flex-direction: column; height: calc(100dvh - 140px); min-height: 300px; gap: 12px; }
.fox-moment-viewer > img, .fox-moment-viewer > video { width: 100%; flex: 1; min-height: 0; object-fit: contain; border-radius: 16px; background: #0005; }
.fox-moment-progress { display: flex; gap: 5px; }
.fox-moment-progress span { flex: 1; height: 3px; background: #ffffff30; border-radius: 4px; overflow: hidden; }
.fox-moment-progress b { display: block; height: 100%; background: #ff793b; }
.fox-moment-author { display: flex; align-items: center; gap: 10px; }
.fox-moment-author strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fox-moment-author time { margin-left: auto; color: #aebbd0; font-size: 12px; }
.fox-moment-caption { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 100px; overflow: auto; }
.fox-moment-viewer footer { display: flex; justify-content: space-between; gap: 5px; padding-bottom: env(safe-area-inset-bottom); }
@media (min-width:641px) and (max-width:1100px) { #app-container #sidepanel { width: 300px !important; } }
@media (max-width:640px) {
 #app-container #sidepanel { width: 100% !important; }
 .fox-rail { gap: 0; padding: 4px 8px; }
 #app-container #scroller .bubble { max-width: 86% !important; }
 #app-container #topic-caption-panel .fox-v3-chat-actions > * { width: 44px !important; max-width: 44px !important; flex-basis: 44px !important; height: 44px !important; }
 #app-container #topic-caption-panel #hide-message-view { flex-basis: 36px; min-width: 36px; }
 #app-container #topic-caption-panel .avatar-box { display: none; }
 #app-container #topic-title { font-size: 14px !important; }
 #app-container #send-message-panel > a, #app-container .fox-emoji-toggle { min-width: 36px !important; width: 36px !important; height: 44px !important; }
 #app-container .audio-player { min-width: 0 !important; }
 #app-container .audio-player .playback { width: min(40vw,175px) !important; }
 .fox-moments-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
#app-container .fox-moments-entry { height: auto !important; min-height: 66px !important; flex-shrink: 0; text-transform: none; line-height: 1.35; }
#app-container #scroller .bubble:has(.audio-player) { width: max-content !important; min-width: min(320px,70vw); }
#app-container .audio-player { width: max-content !important; }
#app-container #messages-container.fox-v4-messages-container { background: linear-gradient(#050c14b0,#050c14c9), url('../img/fox/chat-wallpaper.jpg') center/cover !important; }
@media (max-width:640px) { #app-container #scroller .bubble:has(.audio-player) { min-width: 0; } }
.fox-moments-shell button { text-transform: none; height: auto; line-height: 1.35; }
#app-container #scroller .bubble:has(.audio-player) { max-width: calc(100vw - 60px) !important; }
#app-container .message-content:has(> .audio-player) { width: max-content !important; max-width: none !important; }
#app-container .right .attachment, #app-container .right .attachment * { color: #fff !important; }
#app-container .fox-filters button { height: auto !important; min-height: 38px; line-height: 1.2; }