:root {
  /* ========= SCALING ========= */
  --scale: 1;                 /* 0.50–1.00 in 0.05 steps (JS updates) */
  --base-font-size: 16px;     /* scale Bootstrap controls via rem */

  /* ========= BASE (DESIGN) SIZES — edit these only ========= */
  --base-gap: 6px;

  /* Heights */
  --base-video-unit-height: 338px;
  --base-toolbar-height: 40px;          /* media toolbar beneath videos */
  --base-ad1-height: 789px;
  --base-controls-height: 48px;
  --base-composer-height: 48px;
  --base-ad-height: 80px;

  /* Widths */
  --base-left-col-width: 450px;         /* width for each video */
  --base-message-panel-width: 800px;    /* scrollable #messages panel */
  --base-ad1-width: 320px;

  /* Cosmetics */
  --base-radius: 12px;

  /* ========= SEARCH CONTROL SIZING — PHASES 1–5 =========
     Desktop/default + stacked view only. Responsive/PiP/fullscreen keep their
     existing view-specific sizing until their later implementation phases. */
  --base-search-control-height: 40px;
  --base-search-control-pad-x: 10px;
  --base-search-control-pad-y: 5px;

  --base-search-width-skip: 95px;
  --base-search-width-stop: 120px;
  --base-search-width-find: 155px;
  --base-search-width-auto: 150px;
  --base-search-width-auto-min: 145px;
  --base-search-width-auto-max: 175px;
  --base-search-width-start: 20px;

  /* ========= SCALED (computed) SIZES ========= */
  --gap: calc(var(--base-gap) * var(--scale));
  --radius: calc(var(--base-radius) * var(--scale));

  /* ====== Video bias > 100% zoom ====== */
  --over: clamp(calc(var(--scale) - 1), 0, 1);
  --video-scale: calc(var(--scale) + 0.5 * var(--over));

  /* Heights */
  --video-unit-height: calc(var(--base-video-unit-height) * var(--video-scale));
  --toolbar-fixed-height: calc(var(--base-toolbar-height) * var(--scale));
  --ad1-fixed-height: calc(var(--base-ad1-height) * var(--scale));
  --controls-fixed-height: calc(var(--base-controls-height) * var(--scale));
  --composer-fixed-height: calc(var(--base-composer-height) * var(--scale));
  --ad-fixed-height: calc(var(--base-ad-height) * var(--scale));

  /* Compensate messages height so the page still fits vertically */
  --video-unit-height-normal: calc(var(--base-video-unit-height) * var(--scale));
  --video-extra-h: calc(var(--video-unit-height) - var(--video-unit-height-normal));
  --video-extra-pos: max(var(--video-extra-h), 0px);

  /* One row of videos + toolbar (1 gap between them) */
  --top-fixed-height: calc(var(--video-unit-height) + var(--toolbar-fixed-height) + var(--gap));
  --messages-fixed-height: calc(var(--top-fixed-height) - var(--video-extra-pos));

  /* Widths */
  --left-col-fixed-width: calc(var(--base-left-col-width) * var(--video-scale));
  --total-app-width: calc(
    (var(--base-left-col-width) + var(--base-message-panel-width)) * var(--scale)
  );
  --message-panel-fixed-width: calc(var(--total-app-width) - var(--left-col-fixed-width));
  --ad1-fixed-width: calc(var(--base-ad1-width) * var(--scale));
  --right-col-fixed-width: var(--message-panel-fixed-width);

  /* Totals */
  --controls-fixed-width: var(--left-col-fixed-width);
  --composer-fixed-width: var(--right-col-fixed-width);
  --ad-fixed-width: calc(var(--left-col-fixed-width) + var(--gap) + var(--right-col-fixed-width));
  --app-fixed-width: var(--total-app-width);

  /* Scaled toolbar internals */
  --toolbar-gap: calc(12px * var(--scale));
  --toolbar-pad-x: calc(8px * var(--scale));

  /* Scaled search-control geometry. These deliberately follow --scale so the
     button system tracks the existing manual zoom without font shrinking. */
  --search-control-height: calc(var(--base-search-control-height) * var(--scale));
  --search-control-pad-x: calc(var(--base-search-control-pad-x) * var(--scale));
  --search-control-pad-y: calc(var(--base-search-control-pad-y) * var(--scale));

  --search-width-skip: calc(var(--base-search-width-skip) * var(--scale));
  --search-width-stop: calc(var(--base-search-width-stop) * var(--scale));
  --search-width-find: calc(var(--base-search-width-find) * var(--scale));
  --search-width-auto: calc(var(--base-search-width-auto) * var(--scale));
  --search-width-auto-min: calc(var(--base-search-width-auto-min) * var(--scale));
  --search-width-auto-max: calc(var(--base-search-width-auto-max) * var(--scale));
  --search-width-start: calc(var(--base-search-width-start) * var(--scale));

  /* NEW: canonical content width for videos row & messages container */
  --row-content-width: calc(var(--left-col-fixed-width) * 2 + var(--gap));

  /* ========= SYSTEM MESSAGE PRESENTATION ========= */
  --system-msg-fade-amount: 0.32;        /* 0 = nearly instant, 1 = fullest fade */
  --system-msg-fade-distance: calc(14px * var(--system-msg-fade-amount));
  --system-msg-fade-duration: calc(120ms + (260ms * var(--system-msg-fade-amount)));
  --system-msg-fade-blur: calc(10px * var(--system-msg-fade-amount));
  --system-msg-fade-start-opacity: calc(1 - (0.78 * var(--system-msg-fade-amount)));
  --system-msg-surface: rgba(20, 25, 34, 0.82);
  --system-msg-border: rgba(255, 255, 255, 0.10);
  --system-msg-text: #b7c0cb;
  --system-msg-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  --system-msg-bubble-bg: rgba(19, 24, 31, 0.92);
  --system-msg-bubble-border: rgba(255, 255, 255, 0.10);
  --system-msg-bubble-text: #e8edf5;
}

/* Scale rem-based UI (Bootstrap) so buttons/inputs shrink/grow consistently */
html { font-size: calc(var(--base-font-size) * var(--scale)); }

* { box-sizing: border-box; }


body {
  margin: 0;
  color: #eaeef5;
  background: #0f1115;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* ===== GRID LAYOUT =====
   Vertical stack centered:
   1) videos
   2) messages (messages-container)
   3) composer
   4) controls
   5) ad
*/
#app {
  height: calc(100dvh - var(--nav-h, 56px) - var(--footer-h, 56px));
  width: var(--app-fixed-width);
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: var(--left-col-fixed-width) var(--right-col-fixed-width);
  grid-template-rows:
    var(--top-fixed-height)
    var(--messages-fixed-height)
    var(--composer-fixed-height)
    var(--controls-fixed-height)
    var(--ad-fixed-height);
  grid-template-areas:
    "videos videos"
    "messages messages"
    "composer composer"
    "controls controls"
    "ad ad";
  align-items: start;
  justify-items: center; /* ⟵ center all grid items horizontally */
  row-gap: var(--gap);
  column-gap: 0 !important;
  padding:
    calc(env(safe-area-inset-top, 0px) + var(--gap))
    calc(env(safe-area-inset-right, 0px) + var(--gap))
    calc(env(safe-area-inset-bottom, 0px) + var(--gap))
    calc(env(safe-area-inset-left, 0px) + var(--gap));
  position: relative; /* for resizer handle positioning */
  margin-top: -35px;
}

/* ===== VIDEOS (side-by-side with toolbar beneath) ===== */
#videos {
  grid-area: videos;
  display: inline-grid !important;
  grid-template-columns: var(--left-col-fixed-width) var(--left-col-fixed-width) !important; /* local | remote fixed */
  grid-template-rows: var(--video-unit-height) auto !important; /* videos row + toolbar row */
  grid-template-areas:
    "local remote"
    "toolbar toolbar";
  justify-items: stretch !important;
  align-items: start !important;
  gap: var(--gap);
  /* exact content width = 2 videos + the gap between them */
  width: var(--row-content-width);
  margin: 0;
  margin-top: 23px;
  height: var(--top-fixed-height);
  justify-self: center; /* redundant with justify-items, explicit here */
}

/* Make videos fill their grid cells */
#videos > video {
  grid-row: 1 / 2;
  width: 100% !important;
  max-width: 100% !important;
  height: var(--video-unit-height);
  background: #000;
  border: 1px solid #232a33;
  border-radius: var(--radius);
  display: block;
}
#local  { grid-area: local; }
#remote { grid-area: remote; }

/* ===== Media toolbar spans same width as the two videos ===== */
#media-toolbar {
    grid-area: toolbar;
    position: static !important;
    display: flex
;
    align-items: center;
    gap: var(--toolbar-gap);
    width: var(--row-content-width) !important;
    max-width: 100%;
    margin: 0 auto;
    height: var(--toolbar-fixed-height);
    padding: 0 var(--toolbar-pad-x);
    background: #141922;
    border: 1px solid #232a33;
    border-radius: var(--radius);
    min-height: var(--toolbar-fixed-height);
    flex-direction: column-reverse;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: center;
    margin-top: calc(-35px * var(--scale));
}

/* keep a little breathing room above/below the big blocks */
#messages,
#videos { margin-top: 30px !important; }

/* ===== messages container (centered; only messages now) ===== */
#messages-container {
  grid-area: messages;
  display: flex;
  justify-content: flex-start;
  gap: var(--gap);
  height: var(--messages-fixed-height);
  width: var(--row-content-width);   /* ⟵ SAME width as #top-videos/#videos */
  overflow: visible;
  align-self: start;
  align-items: center;
  overscroll-behavior: contain;
  margin: 0 auto;
  flex-direction: column;
  flex-wrap: nowrap;
}

/* Wrapper around videos row so it aligns with messages width */
#top-videos {
  grid-area: videos;
  display: flex;
  justify-content: center;
  width: var(--row-content-width);  /* ⟵ SAME width */
  margin: 0 auto;
  flex-direction: row-reverse;
  flex-wrap: wrap;
}

/* Only the #messages panel scrolls */
#messages {
  min-width: 0;
  width: 100%;                 /* fill #messages-container width */
  height: 85%;
  overflow: auto;
  background: #161a20;
  border: 1px solid #232a33;
  border-radius: var(--radius);
  padding: 10px;
  line-height: 1.35;
  -webkit-overflow-scrolling: touch;
  margin-left: 0 !important;
  flex: 0 0 auto;
}

/* colors for message types */
#messages .msg-system { color: #96999e85 !important; }
#messages .msg-you { color: #22c55e !important; }
#messages .msg-partner { color: #ffd700 !important; }
#messages .msg-system.msg-connected { color: #75cfce !important; }
#messages .msg-system.msg-matched { color: #ef55fd !important; }
#messages .msg-system.msg-interests { color: #b9d3ff !important; }
#messages .msg-disconnected { color: #f34646 !important; }

/* Composer (centered) */
#composer {
  grid-area: composer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  height: var(--composer-fixed-height);
  width: 100%;                 /* align with #messages width inside the container */
  margin-top: 25px;
}
#composer input[type="text"] {
  width: 100%;
  height: 45px;
  border-radius: 10px;
  border: 1px solid #232a33;
  background: #1b212b;
  color: #eaeef5;
  padding: 0 36px;
  font-size: 1rem; /* scales via html font-size */
  outline: none;
  margin-bottom: calc(22px * var(--scale));
}

#controls button {
  border-radius: 10px;
  border: 1px solid #232a33;
  background: #1f2630;
  color: #eaeef5;
  font-weight: 600;
  touch-action: manipulation;
  margin-top: calc(-20px * var(--scale));
  width: 160px;
  height: 40px;
}
#controls button:active { transform: translateY(1px); }

/* Footer ad
#site-footer  {
  grid-area: ad;
  height: var(--ad-fixed-height);
  width: var(--ad-fixed-width);
  margin: 0 auto;
  border: 1px dashed #232a33;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a93a2;
  background: #12161c;
  margin-top: 25px;
} */

/* UI bits */
.msg-count {
  position: static !important;   /* was: fixed */
  display: block;
  margin: 8px auto 0;            /* keeps a little top spacing */
  transform: none;               /* undo translate centering */
  left: auto; right: auto;       /* reset fixed-position props */
  z-index: auto;
  width: max-content;            /* shrink to content */
  color: #eaeef5;
  margin-top:1px;
}

.region-badge {
  margin-left: 5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid #232a33;
  border-radius: 5px;
  background: #141922;
  font-size: 0.95rem;
  color: #eaeef5;
}

/* Flag image scales with text/zoom */
.region-flag-img {
  height: 1.05em;
  width: auto;
  vertical-align: -0.12em;
  line-height: 1;
  border-radius: 2px;
}

/* SYSTEM MESSAGES: polished, centered, and softly animated */
#messages .msg-system:not(.msg-bubble) {
  --system-msg-accent-rgb: 148, 163, 184;
  align-self: flex-start !important;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: .65rem;
  width: fit-content;
  max-width: min(88%, 720px);
  padding: 10px 14px;
  margin: 2px 0 !important;
  border-radius: 14px;
  text-align: left !important;
  line-height: 1.4;
  letter-spacing: .01em;
  font-size: .92rem;
  color: var(--system-msg-text) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.03)),
    linear-gradient(90deg, rgba(var(--system-msg-accent-rgb), 0.16), rgba(var(--system-msg-accent-rgb), 0.05) 40%, rgba(255,255,255,0.02)),
    var(--system-msg-surface);
  border: 1px solid rgba(var(--system-msg-accent-rgb), 0.20);
  box-shadow: var(--system-msg-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  gap: .5rem;
padding: 8px 12px;
border-radius: 10px;
font-size: .88rem;
}

#messages .msg-system:not(.msg-bubble)::before {
  content: 'SYSTEM';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(var(--system-msg-accent-rgb), 0.16);
  border: 1px solid rgba(var(--system-msg-accent-rgb), 0.20);
  color: rgba(255,255,255,0.82);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  white-space: nowrap;
}

#messages .msg-system:not(.msg-bubble).msg-enter,
#messages .msg-bubble.msg-system.msg-enter {
  animation: system-message-intro var(--system-msg-fade-duration) cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes system-message-intro {
  from {
    opacity: var(--system-msg-fade-start-opacity);
    transform: translateY(var(--system-msg-fade-distance)) scale(calc(1 - (0.02 * var(--system-msg-fade-amount))));
    filter: blur(var(--system-msg-fade-blur));
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

#messages .msg-system:not(.msg-bubble) a,
#messages .msg-bubble.msg-system a {
  color: inherit;
  font-weight: 600;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

#messages .msg-system.msg-connected {
  --system-msg-accent-rgb: 117, 207, 206;
  color: #d7f7f6 !important;
}

#messages .msg-system.msg-matched {
  --system-msg-accent-rgb: 239, 85, 253;
  color: #f9dbff !important;
}

#messages .msg-system.msg-interests {
  --system-msg-accent-rgb: 185, 211, 255;
  color: #e4efff !important;
}

#messages .msg-system.msg-disconnected {
  --system-msg-accent-rgb: 243, 70, 70;
  color: #ffd9d9 !important;
}

#messages .msg-bubble.msg-system {
  align-self: center !important;
  width: min(88%, 520px);
  max-width: 520px;
  background-color: var(--system-msg-bubble-bg) !important;
  border: 1px solid var(--system-msg-bubble-border) !important;
  color: var(--system-msg-bubble-text) !important;
  box-shadow: var(--system-msg-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Compact bubble look using your existing .msg-* classes */
#messages {
  display: flex;
  flex-direction: column;
  gap: 2px;                           /* much tighter spacing between bubbles */
}

 #messages > div {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
} 


/* [ANCHOR: MESSAGE_BUBBLE_SPACING] */
#messages > div { margin: 0; }
#messages > div + div { margin-top: 6px; }

#messages .msg-you {
  align-self: flex-end;
  background: #223047;                /* subtle, dense */
  color: #eaeef5 !important;
  border: 1px solid #2b3a4e;
}

#messages .msg-partner {
  align-self: flex-start;
  background: #1c222b;
  color: #ffd700 !important;
  border: 1px solid #2a333f;
}

/* === Place CONTROLS to the LEFT of the COMPOSER (no HTML changes) === */
#messages-container {
  display: grid !important;
  grid-template-columns: max-content 1fr; /* controls take natural width; composer fills the rest */
  grid-template-rows: 1fr auto;          /* messages tall on top; controls/composer on bottom */
  grid-template-areas:
    "messages messages"
    "controls composer";
  column-gap: var(--gap);
  row-gap: var(--gap);
  align-items: center;
  justify-items: stretch;
}

/* Top row spans both columns */
#messages {
  grid-area: messages;
  width: 100%;
}

/* Left column: controls */
#controls {
  grid-area: controls;
  display: flex !important;          /* lay out buttons horizontally */
  gap: var(--gap);
  margin-top: 0 !important;          /* neutralize previous negative margin */
  justify-content: flex-start !important;
  align-items: center;
  flex-wrap: wrap;                    /* wrap if space is tight */
}

/* Right column: composer grows to fill remaining space */
#composer {
  grid-area: composer;
  width: 100% !important;            /* fill the right column */
  margin-top: 0 !important;
  justify-content: stretch !important;
}

/* Make room for the send button inside the input (overrides earlier 2.5rem) */
#composer #input { padding-right: 3.5rem; 

  font-size: calc( 14px * var( --scale));

}

/* Paper-airplane send button positioned over the right end of the input */
#send-btn{
  position: absolute;
  right: 10px;
  top: 31%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
  z-index: 3; /* above the input */
}
#send-btn:hover{ background:#263041; color:#ffffff; }
#send-btn:active{ transform: translateY(-50%) scale(0.98); }
#send-btn[disabled]{ opacity:.5; cursor: default; }

#send-btn svg{ pointer-events:none; }

@media (max-width: 360px) {
  :root { --base-gap: 6px; }
}

.iframe-full {
  width: 100%;        /* take full width of the parent */
  border: 0;          /* no border */
  display: block;     /* remove inline-gap */
  /* optional: a minimum height while loading */
  min-height: 50vh;
  margin-top:  calc(3em * var(--scale));
}

/* If you need true full-bleed across the viewport (ignoring .container width), add: */
.iframe-full.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ensure media-toolbar stays clickable above the videos */
#videos { position: relative; }

#media-toolbar {
  position: relative !important;
  /* z-index: 10 !important;       sit above the <video> elements */
  pointer-events: auto !important;
  isolation: isolate;           /* create a new stacking context (Safari-safe) */
}

#media-toolbar * { pointer-events: auto !important; }

/* If some browsers still swallow clicks due to overlap, uncomment this:
#videos > video { pointer-events: none; }
*/

/* === emoji icon overlay in composer (minimal additions) === */
#composer { position: relative; }                /* keeps your layout intact */
#input { padding-right: 2.5rem; }                /* space so text doesn't sit under the icon */

#emoji-btn {
  position: absolute;
  left: -3px;
  top: 16px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  color: #cbd5e1;
  cursor: pointer;
}

#emoji-btn-divider {
  position: absolute;
  left: 29px;
  top: 12px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  line-height: 1;
  color: #575e63;
  cursor: default;
  font-size: 22px;
}

#emoji-btn:hover { color: #ffffff; }

.emoji-picker {
  z-index: 999999 !important;
}

#volume-slider { cursor: pointer; }

#volume-slider::-webkit-slider-thumb,
#volume-slider::-webkit-slider-runnable-track { cursor: pointer; }
#volume-slider::-moz-range-thumb,
#volume-slider::-moz-range-track { cursor: pointer; }
#volume-slider::-ms-thumb,
#volume-slider::-ms-track { cursor: pointer; }

#translate-enable,
#translate-controls label { cursor: pointer; }

.emoji-picker__preview { height: 3.5em !important; }

.emoji-picker {
  margin-bottom: calc(34px * var(--scale)) !important;
  margin-left:  calc(-34px * var(--scale)) !important; /* fixed px typo */
  z-index: 999
} 

/* Typing bubble mimics .msg-partner */
#messages .typing-bubble{
  align-self:flex-start;
  background:#1c222b;
  color:#ffd700;
  border:1px solid #2a333f;
  border-radius:12px;
  padding:8px 12px;
  max-width:85%;
  display:inline-flex;
  align-items:center;
  gap:8px;
  order: 9999; /* always render after all other messages in flex column */
}

.typing-dots{
  display:inline-flex;
  gap:3px;
  margin-left:6px;
}
.typing-dots .dot{
  width:6px;height:6px;border-radius:50%;
  background:currentColor;opacity:.5;
  animation:typing-bounce 1.2s infinite ease-in-out;
}
.typing-dots .dot:nth-child(2){ animation-delay:.15s; }
.typing-dots .dot:nth-child(3){ animation-delay:.30s; }
@keyframes typing-bounce{
  0%,80%,100%{ transform:translateY(0); opacity:.4; }
  40%       { transform:translateY(-4px); opacity:1; }
}

/* ======== Start search "div-as-button" with (Auto) checkbox ======== */
#controls #start-search.start-btn{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;      /* label left, (Auto) group right */
  gap: .6rem;
  padding: 0 .9rem;
  height: 40px;                         /* match other #controls button height */
  min-width: 100px;                     /* room for text + checkbox */
  border: 1px solid #232a33;
  border-radius: 10px;
  background: #1f2630;
  color: #eaeef5;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  line-height: 1;
  margin-top: calc(-20px * var(--scale)); /* align vertically with sibling buttons */
}

#controls #start-search.start-btn:hover, 
#find-interests:hover,
#skip-search:hover,
#stop-search:hover,
#cancel-auto-search:hover

{
  background:#243041;
  border-color:#2b3a4e;
}

#translate-enable:hover, #auto-checkbox:hover
{
  border-color: #6f0909;
}


#cancel-auto-search{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  white-space: nowrap;
  font-size: calc(14px * var(--scale));
}

#cancel-auto-search .cancel-auto-label{
  min-width: 0;
}

#cancel-auto-search .auto-state-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.35em;
  height: 1.35em;
  border: 1.5px solid currentColor;
  border-radius: .32em;
  color: currentColor;
  font-size: .92em;
  font-weight: 800;
  line-height: 1;
  box-sizing: border-box;
}


#controls #start-search.start-btn:active{
  transform: translateY(1px);
}

/* #controls #start-search.start-btn:focus,
#controls #start-search.start-btn:focus-visible{
  outline: 2px solid #66a3ff;
  outline-offset: 2px;
} */

/* visual "pressed" state while searching (toggled via aria-pressed by JS) */
#controls #start-search[aria-pressed="true"]{
  background:#2a3a50;
  border-color:#33475f;
}

/* internal pieces */
#controls #start-search .label-text{
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Translation-safe keyboard hints: Start/Stop language text stays in its own
   DOM node, while layout code may hide only the non-language ESC suffix. */
#start-search .esc-hint,
#stop-search .esc-hint {
  white-space: nowrap;
}

#start-search .esc-hint[hidden],
#stop-search .esc-hint[hidden] {
  display: none !important;
}

#controls #start-search .auto{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .95rem;
  /* color: #494953; */
  cursor: pointer; /* keep pointer over label */
}

#controls #start-search .auto input{
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: #66a3ff;               /* modern browsers */
  cursor: pointer;                      /* pointer over checkbox */
  vertical-align: middle;
}

/* tighten a bit on narrow screens */
@media (max-width: 480px){
  #controls #start-search.start-btn{
    min-width: 180px;
    padding: 0 .75rem;
    gap: .5rem;
  }
}


/* ===================== Auto-mode Alert (added) ===================== */
#auto-alert, #auto-alert-dis{
  top: 12px;
  right: 12px;
  z-index: 5000;
  display: none;
  align-items: center;
  justify-content: center;
  gap: .45em;
  white-space: nowrap;
  background: #1f2630;
  color: #eaeef5;
  border: 1px solid #33475f;
  border-left: 4px solid #66a3ff;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  font-weight: 600;
  /* line-height: 1.2; */
}

#auto-alert .auto-alert-label,
#auto-alert-dis .auto-alert-label{
  min-width: 0;
}

#auto-alert .auto-state-icon,
#auto-alert-dis .auto-state-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.35em;
  height: 1.35em;
  /* border: 1.5px solid currentColor; */
  border-radius: .32em;
  color: currentColor;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  box-sizing: border-box;
}

#auto-alert .auto-alert-extra{
  flex: 0 0 auto;
  margin-left: -.12em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

#auto-alert .dot{
  display:inline-block;
  flex: 0 0 auto;
  width:8px; height:8px;
  border-radius:50%;
  background:#22c55e !important;
  margin-right:0;
  transform-origin:center;
  box-shadow: 0 0 7px rgba(34,197,94,.58);
  animation:autoPulse 1.25s ease-in-out infinite;
}
@keyframes autoPulse{
  0%,100%{
    transform:scale(.95);
    opacity:.72;
    box-shadow: 0 0 6px rgba(34,197,94,.48), 0 0 0 0 rgba(34,197,94,.30);
  }
  50%{
    transform:scale(1.35);
    opacity:1;
    box-shadow: 0 0 11px rgba(34,197,94,.88), 0 0 0 5px rgba(34,197,94,0);
  }
}

@media (prefers-reduced-motion: reduce){
  #auto-alert .dot{
    animation:none;
    transform:none;
    opacity:1;
    box-shadow: 0 0 8px rgba(34,197,94,.70);
  }
}

/* ============================================================================
   SEARCH CONTROL SIZING — PHASES 2–5
   Applies only to the default desktop layout and stacked/vertical layout.
   Responsive, PiP, and fullscreen retain their existing sizing until later.
   ========================================================================== */

/* Common geometry: remove the legacy blanket 160px × 40px behavior for the
   search controls in the two layouts covered by this phase. */
body:not(.view-responsive):not(.view-pip):not(.view-fullscreen) #controls #skip-search,
body:not(.view-responsive):not(.view-pip):not(.view-fullscreen) #controls #stop-search,
body:not(.view-responsive):not(.view-pip):not(.view-fullscreen) #controls #find-interests,
body:not(.view-responsive):not(.view-pip):not(.view-fullscreen) #controls #cancel-auto-search {
  box-sizing: border-box;
  height: auto;
  min-height: var(--search-control-height);
  padding: var(--search-control-pad-y) var(--search-control-pad-x);
  margin-top: calc(-20px * var(--scale));
}

/* PHASE 5A — flexible localization widths.
   Skip and Stop now treat the Phase 1 widths as visual minimums, not hard
   widths. Short English labels stay compact, while longer translations can
   expand naturally without being clipped. Keep them single-line and let the
   surrounding flex layout absorb only the extra width actually required. */
body:not(.view-responsive):not(.view-pip):not(.view-fullscreen) #controls #skip-search {
  width: auto;
  min-width: var(--search-width-skip);
  max-width: 100%;
  flex: 0 0 auto;
  white-space: nowrap;
}

body:not(.view-responsive):not(.view-pip):not(.view-fullscreen) #controls #stop-search {
  width: auto;
  min-width: var(--search-width-stop);
  max-width: 100%;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Find Interests is now the principal localization stress-test control.
   It keeps the current font size, but may use a second line when translation
   length requires it. Individual long words get an emergency wrap fallback. */
body:not(.view-responsive):not(.view-pip):not(.view-fullscreen) #controls #find-interests {
  width: var(--search-width-find);
  min-width: var(--search-width-find);
  max-width: var(--search-width-find);
  min-height: var(--search-control-height);
  white-space: normal;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* The shortened Auto-start [✕] action now belongs to the Auto-start family
   instead of inheriting the old generic 160px button width. */
body:not(.view-responsive):not(.view-pip):not(.view-fullscreen) #controls #cancel-auto-search {
  width: var(--search-width-auto);
  min-width: var(--search-width-auto);
  max-width: var(--search-width-auto);
  white-space: normal;
  line-height: 1.1;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* PHASE 6A/7A — Responsive handles its own inline rules in index.php. PiP
   now uses the same localization-safe natural-width principle for Auto-start
   [✕] instead of falling back to the legacy fixed 160px control width. */
body.view-pip #controls #cancel-auto-search {
  box-sizing: border-box;
  width: auto;
  min-width: var(--search-width-auto);
  max-width: 100%;
  flex: 0 0 auto;
  height: auto;
  min-height: var(--search-control-height);
  padding: var(--search-control-pad-y) var(--search-control-pad-x);
  white-space: normal;
  line-height: 1.1;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* PHASE 7B — PiP localization. Find Interests keeps its normal compact
   minimum but may expand to the translated label's natural single-line
   width. This prevents two-line text from escaping the legacy one-line PiP
   control height. */
body.view-pip #controls #find-interests {
  box-sizing: border-box;
  width: auto;
  min-width: var(--search-width-find);
  max-width: 100%;
  flex: 0 0 auto;
  height: auto;
  min-height: var(--search-control-height);
  padding: var(--search-control-pad-y) var(--search-control-pad-x);
  white-space: nowrap;
  line-height: 1.15;
  text-align: center;
}

/* PHASE 5A: Start also uses its Phase 1 width as a minimum rather than a
   hard width. It can grow with a translated Start label while its existing
   internal single-line/ellipsis safeguards remain available if the parent
   layout itself becomes the limiting factor. */
body:not(.view-responsive):not(.view-pip):not(.view-fullscreen) #controls #start-search.start-btn {
  box-sizing: border-box;
  width: auto;
  min-width: var(--search-width-start);
  max-width: 100%;
  flex: 0 0 auto;
  height: var(--search-control-height);
  min-height: var(--search-control-height);
}

/* Auto-start [✓] / [⊘] use content sizing inside a controlled range. This
   keeps English compact while capping long translations so they wrap instead
   of stretching the stacked toolbar. */
body:not(.view-responsive):not(.view-pip):not(.view-fullscreen) #auto-alert,
body:not(.view-responsive):not(.view-pip):not(.view-fullscreen) #auto-alert-dis {
  box-sizing: border-box;
  width: max-content;
  min-width: var(--search-width-auto-min);
  max-width: var(--search-width-auto-max);
  min-height: var(--search-control-height);
  height: auto;
  padding: var(--search-control-pad-y) var(--search-control-pad-x);
  white-space: normal;
  line-height: 1.1;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

body:not(.view-responsive):not(.view-pip):not(.view-fullscreen) #auto-alert .auto-alert-label,
body:not(.view-responsive):not(.view-pip):not(.view-fullscreen) #auto-alert-dis .auto-alert-label {
  min-width: 0;
  white-space: normal;
}

body:not(.view-responsive):not(.view-pip):not(.view-fullscreen) #auto-alert .auto-state-icon,
body:not(.view-responsive):not(.view-pip):not(.view-fullscreen) #auto-alert-dis .auto-state-icon,
body:not(.view-responsive):not(.view-pip):not(.view-fullscreen) #cancel-auto-search .auto-state-icon {
  flex: 0 0 auto;
}

/* ================================================================ */

/* === Theme system (added) ======================================= */
/* Variables consumed by the override block below when a theme-* class is present */
body.theme-light,
body.theme-forest,
body.theme-ocean,
body.theme-sunset {
  --t-bg:        #0f1115;
  --t-text:      #eaeef5;
  --t-muted:     #a6aab3;
  --t-panel:     #161a20;
  --t-border:    #232a33;
  --t-toolbar:   #141922;
  --t-btn:       #1f2630;
  --t-btn-hover: #243041;
  --t-input-bg:  #1b212b;
  --t-input-bd:  #232a33;
  --t-you-bg:    #223047;
  --t-you-bd:    #2b3a4e;
  --t-you-text:  #eaeef5;
  --t-partner-bg:#1c222b;
  --t-partner-bd:#2a333f;
  --t-partner-tx:#ffd700;
}

/* Light (Brand: Chattooi logo palette) */
body.theme-light{
  /* Brand palette */
  --brand-navy: #052B43;
  --brand-cream: #2195ad69;
  --brand-teal: #26ad35;
  --brand-teal-dark: #176A78;
  --brand-yellow: #F9B211;
  --brand-orange: #E27411;
  --brand-red: #D64644;
  --brand-charcoal: #443B38;

  /* Theme tokens used throughout the UI */
  --t-bg: var(--brand-cream);
  --t-text: var(--brand-navy);
  --t-muted: var(--brand-charcoal);

  --t-panel: #ffffff;
  --t-border: rgba(5,43,67,.18);
  --t-toolbar: rgba(38,150,173,.12);

  --t-btn: rgb(255 87 34 / 58%);
  --t-btn-hover: rgba(38,150,173,.18);

  --t-input-bg: #e6ffc0;
  --t-input-bd: rgba(5,43,67,.25);

  --t-you-bg: rgba(38,150,173,.14);
  --t-you-bd: rgba(38,150,173,.40);
  --t-you-text: var(--brand-navy);

  --t-partner-bg: rgba(249,178,17,.18);
  --t-partner-bd: rgba(226,116,17,.45);
  --t-partner-tx: var(--brand-charcoal);

  --t-close-invert: 0;
}

/* Light theme: align a few hardcoded accents with the brand palette */
body.theme-light #controls #start-search .auto input{
  accent-color: var(--brand-teal);
}
body.theme-light #auto-alert,
body.theme-light #auto-alert-dis{
  border-left-color: var(--brand-teal) !important;
}
body.theme-light #auto-alert .dot,
body.theme-light #auto-alert-dis .dot{
  /* Enabled Auto-start uses the same success green in every theme. */
  background: #22c55e !important;
}


/* Forest */
body.theme-forest{
  --t-bg:#0f1e14; --t-text:#e6f3e8; --t-muted:#b7d2c0;
  --t-panel:#12291b; --t-border:#244d33; --t-toolbar:#14301f;
  --t-btn:#205736; --t-btn-hover:#1b432b; --t-input-bg:#13261b; --t-input-bd:#244d33;
  --t-you-bg:#1b4530; --t-you-bd:#285e41; --t-you-text:#dafbe7;
  --t-partner-bg:#1a2d21; --t-partner-bd:#2c4a36; --t-partner-tx:#a3e635;
}

/* Ocean */
body.theme-ocean{
  --t-bg:#0b1220; --t-text:#e6f1ff; --t-muted:#9fb6d9;
  --t-panel:#0f1b2d; --t-border:#1f2d44; --t-toolbar:#11223a;
  --t-btn:#1a4690; --t-btn-hover:#193356; --t-input-bg:#10233f; --t-input-bd:#223453;
  --t-you-bg:#163b6b; --t-you-bd:#214d88; --t-you-text:#e6f1ff;
  --t-partner-bg:#10253f; --t-partner-bd:#1e3a5f; --t-partner-tx:#67e8f9;
}

/* Sunset */
body.theme-sunset{
  --t-bg:#1a1210; --t-text:#ffe9d6; --t-muted:#f5c8a3;
  --t-panel:#241815; --t-border:#4a2b22; --t-toolbar:#2b1c18;
  --t-btn:#573328; --t-btn-hover:#462a21; --t-input-bg:#2a1b17; --t-input-bd:#4a2b22;
  --t-you-bg:#5c2c1f; --t-you-bd:#7a3a28; --t-you-text:#ffe9d6;
  --t-partner-bg:#3a231c; --t-partner-bd:#5a3327; --t-partner-tx:#fcd34d;
}


/* Halloween (Black + Orange + bright red text) */
body.theme-halloween{
  --t-bg:#0b0b0f; --t-text:#9e1414; --t-muted:#ffb36b;
  --t-panel:#121218; --t-border:#3b2414; --t-toolbar:#14131a;
  --t-btn:#ff7a00; --t-btn-hover:#ff8e2a;
  --t-input-bg:#111018; --t-input-bd:#ff7a00;
  --t-you-bg:#1a0f14; --t-you-bd:#ff7a00; --t-you-text:#ff2b2b;
  --t-partner-bg:#121018; --t-partner-bd:#ff7a00; --t-partner-tx:#ffd166;
  --t-close-invert: 1;
}

/* Holidays (Red + Green + white text) */
body.theme-holidays{
  --t-bg:#0b2416; --t-text:#ffffff; --t-muted:#cfe8d6;
  --t-panel:#102b1b; --t-border:#1d5a3a; --t-toolbar:#122f1d;
  --t-btn:#9b1c1c; --t-btn-hover:#b91c1c;
  --t-input-bg:#0f2417; --t-input-bd:#256d4a;
  --t-you-bg:#9b1c1c; --t-you-bd:#dc2626; --t-you-text:#ffffff;
  --t-partner-bg:#1a5b3a; --t-partner-bd:#2e8b57; --t-partner-tx:#ffffff;
  --t-close-invert: 1;
}

/* Mardi Gras (Rainbow vibes + bright white text) */
body.theme-mardi-gras{
  --t-bg:#1b0b2e; --t-text:#ffffff; --t-muted:#e7d8ff;
  --t-panel:#24103c; --t-border:#3a1f5f; --t-toolbar:#2b1147;
  --t-btn:#1f7a4a; --t-btn-hover:#25a85f;
  --t-input-bg:#1e0f33; --t-input-bd:#d4af37;
  --t-you-bg:#3b1360; --t-you-bd:#d4af37; --t-you-text:#ffffff;
  --t-partner-bg:#145c3a; --t-partner-bd:#d4af37; --t-partner-tx:#ffffff;
  --t-close-invert: 1;
}

/* St. Patrick's Day (lighter greens than forest + white text) */
body.theme-st-patricks{
  --t-bg:#154d34; --t-text:#ffffff; --t-muted:#d1f5e5;
  --t-panel:#1b5f41; --t-border:#2a7a55; --t-toolbar:#1a6847;
  --t-btn:#2f8f63; --t-btn-hover:#39a673;
  --t-input-bg:#1b5f41; --t-input-bd:#2a7a55;
  --t-you-bg:#2a7a55; --t-you-bd:#3bbb7d; --t-you-text:#ffffff;
  --t-partner-bg:#1f6345; --t-partner-bd:#2f8f63; --t-partner-tx:#ffffff;
  --t-close-invert: 1;
}

/* Easter (pinks + pastels + white text) */
body.theme-easter{
  --t-bg:#3b2240; --t-text:#ffffff; --t-muted:#f3d7e6;
  --t-panel:#4a2a50; --t-border:#6b3d73; --t-toolbar:#512a57;
  --t-btn:#b85a8a; --t-btn-hover:#cf6ea2;
  --t-input-bg:#412546; --t-input-bd:#b85a8a;
  --t-you-bg:#b85a8a; --t-you-bd:#e59ac2; --t-you-text:#ffffff;
  --t-partner-bg:#5fb0a2; --t-partner-bd:#92d7cc; --t-partner-tx:#ffffff;
  --t-close-invert: 1;
}

/* 4th of July (Red + White + Blue + white text) */
body.theme-july4{
  --t-bg:#071a33; --t-text:#ffffff; --t-muted:#c7d6ff;
  --t-panel:#0b2345; --t-border:#14365f; --t-toolbar:#0a2a52;
  --t-btn:#b91c1c; --t-btn-hover:#dc2626;
  --t-input-bg:#0b2345; --t-input-bd:#1d4ed8;
  --t-you-bg:#1d4ed8; --t-you-bd:#3b82f6; --t-you-text:#ffffff;
  --t-partner-bg:#b91c1c; --t-partner-bd:#ef4444; --t-partner-tx:#ffffff;
  --t-close-invert: 1;
}


/* Unified overrides (only apply when a theme-* class is present) */
body.theme-light, body.theme-forest, body.theme-ocean, body.theme-sunset {
  background: var(--t-bg);
  color: var(--t-text);
}
body.theme-light #app,
body.theme-forest #app,
body.theme-ocean #app,
body.theme-sunset #app { color: var(--t-text); }

body.theme-light #media-toolbar,
body.theme-forest #media-toolbar,
body.theme-ocean #media-toolbar,
body.theme-sunset #media-toolbar {
  background: var(--t-toolbar);
  border-color: var(--t-border);
}

body.theme-light #messages,
body.theme-forest #messages,
body.theme-ocean #messages,
body.theme-sunset #messages {
  background: var(--t-panel);
  border-color: var(--t-border);
}

body.theme-light #messages .msg-system,
body.theme-forest #messages .msg-system,
body.theme-ocean #messages .msg-system,
body.theme-sunset #messages .msg-system {
  --system-msg-surface: var(--t-toolbar);
  --system-msg-border: var(--t-border);
  --system-msg-text: var(--t-muted);
  --system-msg-bubble-bg: var(--t-panel);
  --system-msg-bubble-border: var(--t-border);
  --system-msg-bubble-text: var(--t-text);
  color: var(--system-msg-text) !important;
}

body.theme-light #messages .msg-you,
body.theme-forest #messages .msg-you,
body.theme-ocean #messages .msg-you,
body.theme-sunset #messages .msg-you {
  background: var(--t-you-bg);
  border-color: var(--t-you-bd);
  color: var(--t-you-text) !important;
}

body.theme-light #messages .msg-partner,
body.theme-forest #messages .msg-partner,
body.theme-ocean #messages .msg-partner,
body.theme-sunset #messages .msg-partner {
  background: var(--t-partner-bg);
  border-color: var(--t-partner-bd);
  color: var(--t-partner-tx) !important;
}

body.theme-light #composer input[type="text"],
body.theme-forest #composer input[type="text"],
body.theme-ocean #composer input[type="text"],
body.theme-sunset #composer input[type="text"] {
  background: var(--t-input-bg);
  border-color: var(--t-input-bd);
  color: var(--t-text);
}

body.theme-light #controls button,
body.theme-forest #controls button,
body.theme-ocean #controls button,
body.theme-sunset #controls button,
body.theme-light #controls #start-search.start-btn,
body.theme-forest #controls #start-search.start-btn,
body.theme-ocean #controls #start-search.start-btn,
body.theme-sunset #controls #start-search.start-btn {
  background: var(--t-btn);
  border-color: var(--t-border);
  color: var(--t-text);
}
body.theme-light #controls button:hover,
body.theme-forest #controls button:hover,
body.theme-ocean #controls button:hover,
body.theme-sunset #controls button:hover,
body.theme-light #controls #start-search.start-btn:hover,
body.theme-forest #controls #start-search.start-btn:hover,
body.theme-ocean #controls #start-search.start-btn:hover,
body.theme-sunset #controls #start-search.start-btn:hover {
  background: var(--t-btn-hover);
  border-color: var(--t-border);
}

body.theme-light .region-badge,
body.theme-forest .region-badge,
body.theme-ocean .region-badge,
body.theme-sunset .region-badge {
  background: var(--t-toolbar);
  border-color: var(--t-border);
  color: var(--t-text);
}

body.theme-light #site-footer,
body.theme-forest #site-footer,
body.theme-ocean #site-footer,
body.theme-sunset #site-footer {
  background: var(--t-panel);
  border-color: var(--t-border);
  color: var(--t-muted);
}

body.theme-light #auto-alert,
body.theme-forest #auto-alert,
body.theme-ocean #auto-alert,
body.theme-sunset #auto-alert,
body.theme-light #auto-alert-dis,
body.theme-forest #auto-alert-dis,
body.theme-ocean #auto-alert-dis,
body.theme-sunset #auto-alert-dis {
  background: var(--t-btn);
  border-color: var(--t-border);
  color: var(--t-text);
}



/* Unified overrides (all theme-* variants) */
body[class*="theme-"]{
  background: var(--t-bg);
  color: var(--t-text);
}
body[class*="theme-"] #app{ color: var(--t-text); }

body[class*="theme-"] #media-toolbar{
  background: var(--t-toolbar);
  border-color: var(--t-border);
}

body[class*="theme-"] #messages{
  background: var(--t-panel);
  border-color: var(--t-border);
}
/* #f0f2ff */


body[class*="theme-"] #messages .msg-system{
  --system-msg-surface: var(--t-toolbar);
  --system-msg-border: var(--t-border);
  --system-msg-text: var(--t-muted);
  --system-msg-bubble-bg: var(--t-panel);
  --system-msg-bubble-border: var(--t-border);
  --system-msg-bubble-text: var(--t-text);
  color: var(--system-msg-text) !important;
}

body[class*="theme-"] #messages .msg-you{
  background: var(--t-you-bg);
  border-color: var(--t-you-bd);
  color: var(--t-you-text) !important;
}

body[class*="theme-"] #messages .msg-partner{
  background: var(--t-partner-bg);
  border-color: var(--t-partner-bd);
  color: var(--t-partner-tx) !important;
}

body[class*="theme-"] #composer input[type="text"]{
  background: var(--t-input-bg);
  border-color: var(--t-input-bd);
  color: var(--t-text);
}

body[class*="theme-"] #controls button,
body[class*="theme-"] #controls #start-search.start-btn{
  background: var(--t-btn);
  border-color: var(--t-border);
  color: var(--t-text);
}
body[class*="theme-"] #controls button:hover,
body[class*="theme-"] #controls #start-search.start-btn:hover{
  background: var(--t-btn-hover);
  border-color: var(--t-border);
}

body[class*="theme-"] .region-badge{
  background: var(--t-toolbar);
  border-color: var(--t-border);
  color: var(--t-text);
}

body[class*="theme-"] #site-footer{
  background: var(--t-panel);
  border-color: var(--t-border);
  color: var(--t-muted);
}

body[class*="theme-"] #auto-alert,
body[class*="theme-"] #auto-alert-dis{
  background: var(--t-btn);
  border-color: var(--t-border);
  color: var(--t-text);
}

/* ================= Theme fixes: Typing indicator ================= */
body.theme-light #typing-indicator,
body.theme-forest #typing-indicator,
body.theme-ocean #typing-indicator,
body.theme-sunset #typing-indicator,
body.theme-light #messages .typing-bubble,
body.theme-forest #messages .typing-bubble,
body.theme-ocean #messages .typing-bubble,
body.theme-sunset #messages .typing-bubble{
  background: var(--t-partner-bg) !important;
  border: 1px solid var(--t-partner-bd) !important;
  color: var(--t-partner-tx) !important;
}


/* Theme fixes: Typing indicator (all theme-* variants) */
body[class*="theme-"] #typing-indicator,
body[class*="theme-"] #messages .typing-bubble{
  background: var(--t-partner-bg) !important;
  border: 1px solid var(--t-partner-bd) !important;
  color: var(--t-partner-tx) !important;
}

/* ================= Theme fixes: Interests modal ================= */
body.theme-light #interest-modal .modal-content,
body.theme-forest #interest-modal .modal-content,
body.theme-ocean  #interest-modal .modal-content,
body.theme-sunset #interest-modal .modal-content{
  background: var(--t-panel) !important;
  color: var(--t-text) !important;
  border: 1px solid var(--t-border) !important;
}

body.theme-light #interest-modal .modal-header,
body.theme-forest #interest-modal .modal-header,
body.theme-ocean  #interest-modal .modal-header,
body.theme-sunset #interest-modal .modal-header,
body.theme-light #interest-modal .modal-footer,
body.theme-forest #interest-modal .modal-footer,
body.theme-ocean  #interest-modal .modal-footer,
body.theme-sunset #interest-modal .modal-footer{
  background: var(--t-toolbar) !important;
  border-color: var(--t-border) !important;
  color: var(--t-text) !important;
}

body.theme-light #interest-modal .modal-title,
body.theme-forest #interest-modal .modal-title,
body.theme-ocean  #interest-modal .modal-title,
body.theme-sunset #interest-modal .modal-title,
body.theme-light #interest-modal .form-label,
body.theme-forest #interest-modal .form-label,
body.theme-ocean  #interest-modal .form-label,
body.theme-sunset #interest-modal .form-label,
body.theme-light #interest-modal .form-check-label,
body.theme-forest #interest-modal .form-check-label,
body.theme-ocean  #interest-modal .form-check-label,
body.theme-sunset #interest-modal .form-check-label{
  color: var(--t-text) !important;
}

body.theme-light #interest-modal .text-secondary,
body.theme-forest #interest-modal .text-secondary,
body.theme-ocean  #interest-modal .text-secondary,
body.theme-sunset #interest-modal .text-secondary{
  color: var(--t-muted) !important;
}

body.theme-light #interest-modal .form-select,
body.theme-forest #interest-modal .form-select,
body.theme-ocean  #interest-modal .form-select,
body.theme-sunset #interest-modal .form-select,
body.theme-light #interest-modal input[type="text"],
body.theme-forest #interest-modal input[type="text"],
body.theme-ocean  #interest-modal input[type="text"],
body.theme-sunset #interest-modal input[type="text"]{
  background: var(--t-input-bg) !important;
  border: 1px solid var(--t-input-bd) !important;
  color: var(--t-text) !important;
}

body.theme-light #interest-modal .badge,
body.theme-forest #interest-modal .badge,
body.theme-ocean  #interest-modal .badge,
body.theme-sunset #interest-modal .badge{
  background: var(--t-toolbar) !important;
  border: 1px solid var(--t-border) !important;
  color: var(--t-text) !important;
}

body.theme-light #interest-modal .btn-close,
body.theme-forest #interest-modal .btn-close,
body.theme-ocean  #interest-modal .btn-close,
body.theme-sunset #interest-modal .btn-close{
  filter: invert( var(--t-close-invert, 1) ) !important; /* see offcanvas block for var */
  opacity: .85;
}


/* Theme fixes: Interests modal (all theme-* variants) */
body[class*="theme-"] #interest-modal .modal-content{
  background: var(--t-panel) !important;
  color: var(--t-text) !important;
  border: 1px solid var(--t-border) !important;
}

body[class*="theme-"] #interest-modal .modal-header,
body[class*="theme-"] #interest-modal .modal-footer{
  background: var(--t-toolbar) !important;
  border-color: var(--t-border) !important;
  color: var(--t-text) !important;
}

body[class*="theme-"] #interest-modal .modal-title,
body[class*="theme-"] #interest-modal .form-label,
body[class*="theme-"] #interest-modal .form-check-label{
  color: var(--t-text) !important;
}

body[class*="theme-"] #interest-modal .text-secondary{
  color: var(--t-muted) !important;
}

body[class*="theme-"] #interest-modal .form-select,
body[class*="theme-"] #interest-modal input[type="text"]{
  background: var(--t-input-bg) !important;
  border: 1px solid var(--t-input-bd) !important;
  color: var(--t-text) !important;
}

body[class*="theme-"] #interest-modal .badge{
  background: var(--t-toolbar) !important;
  border: 1px solid var(--t-border) !important;
  color: var(--t-text) !important;
}

body[class*="theme-"] #interest-modal .btn-close{
  filter: invert( var(--t-close-invert, 1) ) !important;
  opacity: .85;
}

/* ================= Theme fixes: Settings offcanvas ================= */
body.theme-light #devicesOffcanvas,
body.theme-forest #devicesOffcanvas,
body.theme-ocean  #devicesOffcanvas,
body.theme-sunset #devicesOffcanvas{
  background: var(--t-panel) !important;
  color: var(--t-text) !important;
  border-left: 1px solid var(--t-border) !important;
}

body.theme-light #devicesOffcanvas .offcanvas-header,
body.theme-forest #devicesOffcanvas .offcanvas-header,
body.theme-ocean  #devicesOffcanvas .offcanvas-header,
body.theme-sunset #devicesOffcanvas .offcanvas-header{
  background: var(--t-toolbar) !important;
  border-bottom: 1px solid var(--t-border) !important;
  color: var(--t-text) !important;
}

body.theme-light #devicesOffcanvas .offcanvas-title,
body.theme-forest #devicesOffcanvas .offcanvas-title,
body.theme-ocean  #devicesOffcanvas .offcanvas-title,
body.theme-sunset #devicesOffcanvas .offcanvas-title,
body.theme-light #devicesOffcanvas .form-label,
body.theme-forest #devicesOffcanvas .form-label,
body.theme-ocean  #devicesOffcanvas .form-label,
body.theme-sunset #devicesOffcanvas .form-label{
  color: var(--t-text) !important;
}

body.theme-light #devicesOffcanvas .text-secondary,
body.theme-forest #devicesOffcanvas .text-secondary,
body.theme-ocean  #devicesOffcanvas .text-secondary,
body.theme-sunset #devicesOffcanvas .text-secondary{
  color: var(--t-muted) !important;
}

body.theme-light #devicesOffcanvas .form-select,
body.theme-forest #devicesOffcanvas .form-select,
body.theme-ocean  #devicesOffcanvas .form-select,
body.theme-sunset #devicesOffcanvas .form-select{
  background: var(--t-input-bg) !important;
  border: 1px solid var(--t-input-bd) !important;
  color: var(--t-text) !important;
}

body.theme-light #devicesOffcanvas video#local-mirror,
body.theme-forest #devicesOffcanvas video#local-mirror,
body.theme-ocean  #devicesOffcanvas video#local-mirror,
body.theme-sunset #devicesOffcanvas video#local-mirror{
  border: 1px solid var(--t-border) !important;
  background: #000; /* keep video plane black */
}

/* Close button color per theme (using a small CSS var to choose invert) */
body.theme-light{ --t-close-invert: 0; }   /* dark icon on light bg */
body.theme-forest,
body.theme-ocean,
body.theme-sunset{ --t-close-invert: 1; }  /* light icon on dark bg */

body.theme-light #devicesOffcanvas .btn-close,
body.theme-forest #devicesOffcanvas .btn-close,
body.theme-ocean  #devicesOffcanvas .btn-close,
body.theme-sunset #devicesOffcanvas .btn-close{
  filter: invert(var(--t-close-invert)) !important;
  opacity: .85;
}





/* Theme fixes: Settings offcanvas (all theme-* variants) */
body[class*="theme-"] #devicesOffcanvas{
  background: var(--t-panel) !important;
  color: var(--t-text) !important;
  border-left: 1px solid var(--t-border) !important;
}

body[class*="theme-"] #devicesOffcanvas .offcanvas-header{
  background: var(--t-toolbar) !important;
  border-bottom: 1px solid var(--t-border) !important;
  color: var(--t-text) !important;
}

body[class*="theme-"] #devicesOffcanvas .offcanvas-title,
body[class*="theme-"] #devicesOffcanvas .form-label{
  color: var(--t-text) !important;
}

body[class*="theme-"] #devicesOffcanvas .text-secondary{
  color: var(--t-muted) !important;
}

body[class*="theme-"] #devicesOffcanvas .form-select{
  background: var(--t-input-bg) !important;
  border: 1px solid var(--t-input-bd) !important;
  color: var(--t-text) !important;
}

body[class*="theme-"] #devicesOffcanvas video#local-mirror{
  border: 1px solid var(--t-border) !important;
  background: #000;
}

body[class*="theme-"] #devicesOffcanvas .btn-close{
  filter: invert(var(--t-close-invert, 1)) !important;
  opacity: .85;
}

/* ================= Theme fixes: Login + Signup modals ================= */
/* [ANCHOR: THEME_FIX_LOGIN_SIGNUP_MODALS] */

/* Target common modal IDs. Add your real IDs here if different. */
body.theme-light :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .modal-content,
body.theme-forest :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .modal-content,
body.theme-ocean :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .modal-content,
body.theme-sunset :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .modal-content{
  background: var(--t-panel) !important;
  color: var(--t-text) !important;
  border: 1px solid var(--t-border) !important;
}

/* Header + footer bars */
body.theme-light :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .modal-header,
body.theme-forest :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .modal-header,
body.theme-ocean :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .modal-header,
body.theme-sunset :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .modal-header,
body.theme-light :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .modal-footer,
body.theme-forest :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .modal-footer,
body.theme-ocean :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .modal-footer,
body.theme-sunset :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .modal-footer{
  background: var(--t-toolbar) !important;
  border-color: var(--t-border) !important;
  color: var(--t-text) !important;
}

/* Title + labels + helper text */
body.theme-light :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .modal-title,
body.theme-forest :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .modal-title,
body.theme-ocean :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .modal-title,
body.theme-sunset :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .modal-title,
body.theme-light :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-label,
body.theme-forest :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-label,
body.theme-ocean :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-label,
body.theme-sunset :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-label,
body.theme-light :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-check-label,
body.theme-forest :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-check-label,
body.theme-ocean :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-check-label,
body.theme-sunset :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-check-label{
  color: var(--t-text) !important;
}

body.theme-light :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .text-secondary,
body.theme-forest :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .text-secondary,
body.theme-ocean :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .text-secondary,
body.theme-sunset :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .text-secondary,
body.theme-light :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-text,
body.theme-forest :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-text,
body.theme-ocean :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-text,
body.theme-sunset :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-text{
  color: var(--t-muted) !important;
}

/* Inputs/selects */
body.theme-light :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-control,
body.theme-forest :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-control,
body.theme-ocean :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-control,
body.theme-sunset :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-control,
body.theme-light :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-select,
body.theme-forest :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-select,
body.theme-ocean :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-select,
body.theme-sunset :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-select{
  background: var(--t-input-bg) !important;
  border: 1px solid var(--t-input-bd) !important;
  color: var(--t-text) !important;
}

body.theme-light :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-control::placeholder,
body.theme-forest :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-control::placeholder,
body.theme-ocean :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-control::placeholder,
body.theme-sunset :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-control::placeholder{
  color: var(--t-muted) !important;
  opacity: 1 !important;
}

/* Buttons inside the modals (keep Bootstrap semantics but theme palette) */
body.theme-light :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .btn,
body.theme-forest :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .btn,
body.theme-ocean :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .btn,
body.theme-sunset :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .btn{
  border-color: var(--t-border) !important;
}

body.theme-light :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .btn.btn-secondary,
body.theme-forest :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .btn.btn-secondary,
body.theme-ocean :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .btn.btn-secondary,
body.theme-sunset :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .btn.btn-secondary{
  background: var(--t-btn) !important;
  color: var(--t-text) !important;
}
body.theme-light :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .btn.btn-secondary:hover,
body.theme-forest :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .btn.btn-secondary:hover,
body.theme-ocean :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .btn.btn-secondary:hover,
body.theme-sunset :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .btn.btn-secondary:hover{
  background: var(--t-btn-hover) !important;
}

/* Close button (same approach you used elsewhere) */
body.theme-light :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .btn-close,
body.theme-forest :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .btn-close,
body.theme-ocean :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .btn-close,
body.theme-sunset :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .btn-close{
  filter: invert(var(--t-close-invert, 1)) !important;
  opacity: .85;
}



/* Theme fixes: Login + Signup modals (all theme-* variants) */
body[class*="theme-"] :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .modal-content{
  background: var(--t-panel) !important;
  color: var(--t-text) !important;
  border: 1px solid var(--t-border) !important;
}

body[class*="theme-"] :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .modal-header,
body[class*="theme-"] :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .modal-footer{
  background: var(--t-toolbar) !important;
  border-color: var(--t-border) !important;
  color: var(--t-text) !important;
}

body[class*="theme-"] :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .modal-title,
body[class*="theme-"] :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-label,
body[class*="theme-"] :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-check-label{
  color: var(--t-text) !important;
}

body[class*="theme-"] :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .text-secondary,
body[class*="theme-"] :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-text{
  color: var(--t-muted) !important;
}

body[class*="theme-"] :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-control,
body[class*="theme-"] :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-select{
  background: var(--t-input-bg) !important;
  border: 1px solid var(--t-input-bd) !important;
  color: var(--t-text) !important;
}

body[class*="theme-"] :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .form-control::placeholder{
  color: var(--t-muted) !important;
  opacity: 1 !important;
}

body[class*="theme-"] :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .btn{
  border-color: var(--t-border) !important;
}

body[class*="theme-"] :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .btn.btn-secondary{
  background: var(--t-btn) !important;
  color: var(--t-text) !important;
}
body[class*="theme-"] :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .btn.btn-secondary:hover{
  background: var(--t-btn-hover) !important;
}

body[class*="theme-"] :is(#login-modal,#signup-modal,#loginModal,#signupModal,#auth-modal,#authModal) .btn-close{
  filter: invert(var(--t-close-invert, 1)) !important;
  opacity: .85;
}

/* ================= Theme fixes: Favorites Profile modal ================= */
/* [ANCHOR: THEME_FIX_FAVORITES_PROFILE_MODAL] */

/* Base (no theme-* class): match your default dark palette */
#favProfileModal .modal-content{
  background: #161a20;
  color: #eaeef5;
  border: 1px solid #232a33;
  border-radius: var(--radius);
}

#favProfileModal .modal-header,
#favProfileModal .modal-footer{
  background: #141922;
  border-color: #232a33;
  color: #eaeef5;
}

#favProfileModal .modal-title{ color: #eaeef5; }

#favProfileModal .text-secondary,
#favProfileModal .form-text{ color: #a6aab3 !important; }

#favProfileModal hr{ border-color: #232a33; opacity: 1; }

#favProfileModal dl dt{ color: #a6aab3; }

#favProfileModal .btn-close{
  filter: invert(1);
  opacity: .85;
}

/* Keep the Close button consistent with your controls */
#favProfileModal .btn.btn-secondary{
  background: #1f2630;
  border: 1px solid #232a33;
  color: #eaeef5;
}
#favProfileModal .btn.btn-secondary:hover{
  background: #243041;
  border-color: #2b3a4e;
}

/* Theme-aware (when body has a theme-* class) */
body.theme-light #favProfileModal .modal-content,
body.theme-forest #favProfileModal .modal-content,
body.theme-ocean  #favProfileModal .modal-content,
body.theme-sunset #favProfileModal .modal-content{
  background: var(--t-panel) !important;
  color: var(--t-text) !important;
  border: 1px solid var(--t-border) !important;
}

body.theme-light #favProfileModal .modal-header,
body.theme-forest #favProfileModal .modal-header,
body.theme-ocean  #favProfileModal .modal-header,
body.theme-sunset #favProfileModal .modal-header,
body.theme-light #favProfileModal .modal-footer,
body.theme-forest #favProfileModal .modal-footer,
body.theme-ocean  #favProfileModal .modal-footer,
body.theme-sunset #favProfileModal .modal-footer{
  background: var(--t-toolbar) !important;
  border-color: var(--t-border) !important;
  color: var(--t-text) !important;
}

body.theme-light #favProfileModal .modal-title,
body.theme-forest #favProfileModal .modal-title,
body.theme-ocean  #favProfileModal .modal-title,
body.theme-sunset #favProfileModal .modal-title{
  color: var(--t-text) !important;
}

body.theme-light #favProfileModal .text-secondary,
body.theme-forest #favProfileModal .text-secondary,
body.theme-ocean  #favProfileModal .text-secondary,
body.theme-sunset #favProfileModal .text-secondary{
  color: var(--t-muted) !important;
}

body.theme-light #favProfileModal hr,
body.theme-forest #favProfileModal hr,
body.theme-ocean  #favProfileModal hr,
body.theme-sunset #favProfileModal hr{
  border-color: var(--t-border) !important;
  opacity: 1;
}

body.theme-light #favProfileModal dl dt,
body.theme-forest #favProfileModal dl dt,
body.theme-ocean  #favProfileModal dl dt,
body.theme-sunset #favProfileModal dl dt{
  color: var(--t-muted) !important;
}

body.theme-light #favProfileModal .btn.btn-secondary,
body.theme-forest #favProfileModal .btn.btn-secondary,
body.theme-ocean  #favProfileModal .btn.btn-secondary,
body.theme-sunset #favProfileModal .btn.btn-secondary{
  background: var(--t-btn) !important;
  border-color: var(--t-border) !important;
  color: var(--t-text) !important;
}
body.theme-light #favProfileModal .btn.btn-secondary:hover,
body.theme-forest #favProfileModal .btn.btn-secondary:hover,
body.theme-ocean  #favProfileModal .btn.btn-secondary:hover,
body.theme-sunset #favProfileModal .btn.btn-secondary:hover{
  background: var(--t-btn-hover) !important;
  border-color: var(--t-border) !important;
}

body.theme-light #favProfileModal .btn-close,
body.theme-forest #favProfileModal .btn-close,
body.theme-ocean  #favProfileModal .btn-close,
body.theme-sunset #favProfileModal .btn-close{
  filter: invert(var(--t-close-invert, 1)) !important;
  opacity: .85;
}






/* Theme fixes: Favorites Profile modal (all theme-* variants) */
body[class*="theme-"] #favProfileModal .modal-content{
  background: var(--t-panel) !important;
  color: var(--t-text) !important;
  border: 1px solid var(--t-border) !important;
}

body[class*="theme-"] #favProfileModal .modal-header,
body[class*="theme-"] #favProfileModal .modal-footer{
  background: var(--t-toolbar) !important;
  border-color: var(--t-border) !important;
  color: var(--t-text) !important;
}

body[class*="theme-"] #favProfileModal .modal-title{
  color: var(--t-text) !important;
}

body[class*="theme-"] #favProfileModal .text-secondary{
  color: var(--t-muted) !important;
}

body[class*="theme-"] #favProfileModal hr{
  border-color: var(--t-border) !important;
  opacity: 1;
}

body[class*="theme-"] #favProfileModal dl dt{
  color: var(--t-muted) !important;
}

body[class*="theme-"] #favProfileModal .btn.btn-secondary{
  background: var(--t-btn) !important;
  border-color: var(--t-border) !important;
  color: var(--t-text) !important;
}
body[class*="theme-"] #favProfileModal .btn.btn-secondary:hover{
  background: var(--t-btn-hover) !important;
  border-color: var(--t-border) !important;
}

body[class*="theme-"] #favProfileModal .btn-close{
  filter: invert(var(--t-close-invert, 1)) !important;
  opacity: .85;
}


/* [ANCHOR: FAVORITES_PROFILE_MODAL_GALLERY_EXPANSION] */
#favProfileModal .fav-profile-modal-dialog{
  max-width: min(1200px, calc(100vw - 2rem));
}

#favProfileModal .fav-profile-summary,
#favProfileModal .fav-profile-gallery{
  background: rgba(255,255,255,0.02);
  border: 1px solid #232a33 !important;
  border-radius: calc(var(--radius) * 0.9);
}

#favProfileModal .fav-profile-main-media,
#favProfileModal .fav-profile-no-media{
  width: 100%;
  min-height: 360px;
  border-radius: calc(var(--radius) * 0.9);
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}

#favProfileModal .fav-profile-no-media{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  text-align: center;
}

#favProfileModal .fav-profile-main-img{
  display: block;
  width: 100%;
  min-height: 360px;
  max-height: 560px;
  object-fit: cover;
  background: rgba(255,255,255,0.08);
}

#favProfileModal .fav-profile-facts dt,
#favProfileModal .fav-profile-facts dd{
  margin-bottom: .75rem;
}

#favProfileModal .fav-profile-gallery-empty{
  min-height: 240px;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: calc(var(--radius) * 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  text-align: center;
  background: rgba(255,255,255,0.03);
}

#favProfileModal .fav-profile-thumb{
  border-radius: calc(var(--radius) * 0.75);
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  box-shadow: none;
}

#favProfileModal .fav-profile-thumb.is-active{
  outline: 2px solid rgba(13,110,253,0.95);
  outline-offset: 2px;
}

#favProfileModal .fav-profile-thumb-img{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: rgba(255,255,255,0.08);
}

@media (max-width: 991.98px){
  #favProfileModal .fav-profile-main-media,
  #favProfileModal .fav-profile-no-media,
  #favProfileModal .fav-profile-main-img{
    min-height: 280px;
  }

  #favProfileModal .fav-profile-modal-dialog{
    max-width: calc(100vw - 1rem);
  }
}

body[class*="theme-"] #favProfileModal .fav-profile-summary,
body[class*="theme-"] #favProfileModal .fav-profile-gallery{
  background: color-mix(in srgb, var(--t-panel) 92%, transparent) !important;
  border-color: var(--t-border) !important;
}

body[class*="theme-"] #favProfileModal .fav-profile-main-media,
body[class*="theme-"] #favProfileModal .fav-profile-no-media,
body[class*="theme-"] #favProfileModal .fav-profile-gallery-empty,
body[class*="theme-"] #favProfileModal .fav-profile-thumb{
  border-color: var(--t-border) !important;
}

/* Light theme: make the Topics input readable */
body.theme-light #topic-input{
  color: var(--t-text) !important;        /* text */
  caret-color: var(--t-text) !important;  /* cursor */
}
body.theme-light #topic-input::placeholder{
  color: var(--t-muted) !important;       /* subtle placeholder */
  opacity: 1;                             /* Firefox */
}
/* Skip: grey text when disabled (works with both disabled attr + aria-disabled) */
#controls #skip-search:disabled,
#controls #skip-search[aria-disabled="true"]{
  color: var(--t-muted, #8a93a2);   /* theme-aware, falls back on dark */
  opacity: .9;                      /* keep it readable but clearly inactive */
  cursor: default;
}

/* Prevent the normal hover style from “lighting up” a disabled Skip */
#controls #skip-search:disabled:hover,
#controls #skip-search[aria-disabled="true"]:hover{
  background: #1f2630;              /* same as your base button bg */
  border-color: #232a33;            /* same as your base button border */
}

/* Make the Settings button match the other control buttons */
#media-toolbar #devices-btn{
  border-radius: 18px;
  border: 1px solid #232a33;
  background: #1f2630;
  color: #eaeef5;
  font-weight: 600;
  height: 40px;                 /* match #controls button height */
  padding: 0 .9rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none; 
  width:40px;            /* override Bootstrap focus shadow */
}

/* Hover/active to match your controls */
#media-toolbar #devices-btn:hover{
  background: #243041;
  border-color: #2b3a4e;
}
#media-toolbar #devices-btn:active{
  transform: translateY(1px);
}

/* Optional: consistent focus style (like your start-search focus) */
/* #media-toolbar #devices-btn:focus,
#media-toolbar #devices-btn:focus-visible{
  outline: 2px solid #66a3ff;
  outline-offset: 2px;
  box-shadow: none;
} */

/* THEME OVERRIDES (use your theme variables when a theme-* class is on <body>) */
body.theme-light #media-toolbar #devices-btn,
body.theme-forest #media-toolbar #devices-btn,
body.theme-ocean #media-toolbar #devices-btn,
body.theme-sunset #media-toolbar #devices-btn{
  background: var(--t-btn);
  border-color: var(--t-border);
  color: var(--t-text);
}
body.theme-light #media-toolbar #devices-btn:hover,
body.theme-forest #media-toolbar #devices-btn:hover,
body.theme-ocean #media-toolbar #devices-btn:hover,
body.theme-sunset #media-toolbar #devices-btn:hover{
  background: var(--t-btn-hover);
  border-color: var(--t-border);

/* THEME OVERRIDES (all theme-* variants) */
body[class*="theme-"] #media-toolbar #devices-btn{
  background: var(--t-btn);
  border-color: var(--t-border);
  color: var(--t-text);
}
body[class*="theme-"] #media-toolbar #devices-btn:hover{
  background: var(--t-btn-hover);
  border-color: var(--t-border);
}

}

/* --- Chrome stretch fix (safe override) --- */

/* 1) Keep the toolbar as a single row and stop line stretching */
#media-toolbar{
  flex-direction: row !important;     /* was: column-reverse */
  flex-wrap: nowrap !important;       /* avoid multi-line flex = no align-content surprises */
  align-content: center !important;   /* neutralize 'stretch' */
  align-items: center !important;
}
#media-toolbar > * { 
  flex: 0 0 auto !important;          /* never stretch children */
}

/* 2) Let flex/grid items actually shrink instead of forcing content width */
#top-videos,
#videos,
#media-toolbar,
#messages-container,
#controls,
#composer {
  min-width: 0 !important;
}

/* Let grid/flex children shrink; avoid Chromium post-load min-content expansion */
#app, #top-videos, #videos, #messages-container, #controls, #composer {
  min-width: 0 !important;
  min-height: 0 !important;
}

/* 3) Prevent <video> from looking distorted if its cell changes size */
#videos > video{
  object-fit: contain;                   /* or 'contain' if you prefer letterboxing */
  object-position: center;
}


/* ===== View: Stacked (vertical) — flush-left + equal heights + toolbar row ===== */
/* 1) Put #top-videos back inside the grid column (no more full-bleed) */
body.view-vertical #top-videos{
  width: 100% !important;        
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-direction: row !important; 
  align-items: flex-start !important;
  justify-content: end !important;
}

/* 2) Two-column layout in stacked view: [ videos | messages ] with a small gap */
body.view-vertical #app{
  grid-template-columns: var(--left-col-fixed-width) var(--right-col-fixed-width) !important;
  grid-template-areas:
    "videos messages"
    "composer composer"
    "controls controls"
    "ad ad" !important;
  column-gap: var(--gap) !important;   /* <-- your slight gap */
  justify-items: start !important;     /* stop centering children */
  
}

/* 3) Place messages in the right column, flush against videos */

/* body.view-vertical #messages-container{
  grid-area: messages !important;
  width: 100% !important;              
  margin: 0 !important;
  align-self: start !important;
  justify-self: start !important;
  margin-top: -110px !important; 
      height: 600px;
} */


/* 1) Put #top-videos back inside the grid column (no full-bleed) */
/* body.view-vertical #top-videos{
  width: 100% !important;
  margin: 0 !important;             
  flex-direction: row !important;     
  align-items: flex-start !important;
  justify-content: flex-start !important;
} */

/* 2) Two-column grid in stacked view: [ videos | messages ] with a slight gap */
body.view-vertical #app{
  grid-template-columns: var(--left-col-fixed-width) var(--right-col-fixed-width) !important;
  column-gap: var(--gap) !important;      /* your slight gap */
  justify-items: start !important;        /* stop centering grid children */
}

/* 3) Place messages to the RIGHT of videos and start at the very top
      (span the first two grid rows so it starts at the top band) */
body.view-vertical #messages-container{
  grid-column: 2 / 3 !important;          /* right column */
  grid-row: 1 / 3 !important;             /* start at top, span down */
  width: var(--right-col-fixed-width) !important;
  align-self: start !important;
  justify-self: start !important;
  margin-top: -80px;
  height: 848px;
}
 

 
/* 4) Ensure videos remain stacked (left column) */
body.view-vertical #videos{
  display: flex !important;
  flex-direction: column !important;      /* local on top, remote below */
  width: var(--left-col-fixed-width) !important;
  gap: 40px !important;
  margin-left: calc(-80px * var(--scale)) !important;
  margin-top: calc(-80px * var(--scale)) !important;

}
/* body.view-vertical #videos > video{
  /* width: 100% !important;
  height: var(--video-unit-height) !important;
  flex: 0 0 var(--video-unit-height) !important;  
  object-fit: contain; 
} */

#videos{
  --video-unit-height: calc(var(--left-col-fixed-width) * 3 / 4) !important;
}

/* Make each <video> use that height and never squish */
#videos > video{
  width: 100% !important;
  height: var(--video-unit-height) !important;   /* 4:3 lock */
  object-fit: contain;                              /* crop to fill; use 'contain' for letterbox */
}

/* If you still have this in stacked view, neutralize its squish: */
body.view-vertical #videos > video{
  flex: 0 0 auto !important;                      /* don’t force a fixed flex-basis */
}

/* hard-pin the videos row to the page's left edge in stacked view */
body.view-vertical #app{
  /* width: 100vw !important;        */
  margin: 0 !important;          /* no centering */
  padding-left: 0 !important;    /* no left inset */
  justify-items: start !important;
}

/* body.view-vertical #top-videos{
  /* justify-self: start !important; /* anchor to left edge of the grid */
  /* margin-left: 0 !important;
  margin-top: -46px !important;  
} */



body.view-vertical #volume-control{

position: absolute;
margin-top:  calc(9px * var(--scale)) !important;

}

body.view-vertical #controls{
 margin-top: calc(9px * var(--scale)) !important;
}

body.view-vertical #composer{
 margin-top: calc(9px * var(--scale)) !important;
}


/* ===== Vert/Stacked: make fixed px respond to --scale (no layout changes) ===== */
body.view-vertical #messages-container{
  margin-top: calc(-105px * var(--scale)) !important;
  height:     calc(848px * var(--scale)) !important;
}
body.view-vertical #messages{
  margin-top: calc( 103px * var(--scale)) !important;
  height:     calc(715px * var(--scale)) !important;
}
body.view-vertical #videos{
  gap:         calc(40px * var(--scale)) !important;
  margin-left: calc( 5px * var(--scale)) !important;
  margin-top:  calc(68px * var(--scale)) !important;
}
body.view-vertical #top-videos{
  margin-top: calc(-46px * var(--scale)) !important;
}
body.view-vertical #media-toolbar{
  margin-right: calc( 2px * var(--scale)) !important;
  margin-top:  calc(765px * var(--scale)) !important;
  width:       calc(var(--toolbar-width, 447px) * var(--scale)) !important;
  position: absolute !important;  
}
body.view-vertical #volume-control{
  margin-top: calc(-766px * var(--scale)) !important;
}
  /* justify-self: start !important;   
  align-self: start !important;
  position: absolute !important;  */

  /* cancel centering/offsets that hide the change */
  /* margin: 0 !important;
  margin-left: 30px !important;  */

  /* now you can freely control the width */
  /* width: 10px;  
  max-width: 90% !important;    
  margin-bottom: 115px !important;  */

/* ===================== Picture-in-Picture view ===================== */
/* Body gets .view-pip (exclusive with .view-vertical) */
body.view-pip #top-videos{
  /* keep centered wrapper like default */
  width: var(--row-content-width) !important;
  margin: 0 auto !important;
  justify-content: center !important;
  flex-direction: row-reverse !important; /* keep your default ordering */
  flex-wrap: wrap !important;
}

/* Collapse the videos grid to a single column: remote on row 1, toolbar on row 2 */
body.view-pip #videos{
  position: relative !important;          /* anchor for the overlay */
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: var(--video-unit-height) auto !important;
  grid-template-areas:
    "remote"
    "toolbar" !important;
  gap: var(--gap) !important;
  width: var(--row-content-width) !important;
  justify-items: stretch !important;
  align-items: start !important;
  isolation: isolate;                     /* clean stacking context */
}

/* Remote fills the whole first row */
body.view-pip #remote{
  grid-area: remote !important;
  width: 100% !important;
  height: var(--video-unit-height) !important;
  object-fit: contain !important;
  border-radius: var(--radius) !important;
}

/* Local: overlay PiP in the lower-right at 1/3 the remote width */
:root{
  --pip-pad: calc(7px * var(--scale));  /* inset from edges */
}
body.view-pip #local{
  position: absolute !important;
  right: var(--pip-pad) !important;
  bottom: 7px !important;

  /* 1/3 the remote's width */
  width: calc(var(--row-content-width) / 5) !important;

  /* keep aspect; prefer 4:3, with a calc fallback if needed */
  aspect-ratio: 4 / 3;
  height: auto !important;
  /* fallback height for older browsers (optional): */
  height: calc((var(--row-content-width) / 5) * 3 / 4) !important;

  object-fit: contain !important;
  z-index: 3 !important;
  border-radius: calc(var(--radius) * 0.85) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  border: 1px solid var(--t-border, #232a33);
}

/* Keep toolbar full width under the remote (same as default) */
body.view-pip #media-toolbar{
  grid-area: toolbar !important;
  width: var(--row-content-width) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  position: static !important;           /* avoid absolute carryover */
  flex-wrap: nowrap !important;
  align-items: center !important;
}

body.view-pip{
  --pip-remote-height: calc(var(--row-content-width) * 3 / 4);
}


/* PiP: remote height is controlled by this var (defaults to your current) */
body.view-pip { --pip-remote-height: var(--video-unit-height); }

/* Make the first grid row follow that height so the layout pushes downward */
body.view-pip #videos{
  grid-template-rows: var(--pip-remote-height) auto !important;
}

/* Remote video uses the same var so it grows/shrinks with the row */
body.view-pip #remote{
  height: var(--pip-remote-height) !important;
}

/* Thin drag bar that sits on the bottom edge of the remote video */
body.view-pip #pip-resize{
  grid-area: remote !important;       /* share the cell with #remote */
  align-self: end !important;          /* stick to the bottom edge */
  justify-self: stretch !important;
  height: 12px !important;
  margin-top: -12px !important;        /* visually just beneath */
   transform: translateY(22px) !important; /* moves it below the video edge */
  cursor: row-resize !important;
  z-index: 5 !important;
  /* border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius); */
  background:
    linear-gradient(to bottom,
      transparent 0 45%,
      rgba(255,255,255,.12) 45% 55%,
      transparent 55% 100%);
  pointer-events: auto !important;
}

/* Nice UX while dragging */
body.resizing { cursor: row-resize !important; user-select: none !important; }

/* === PiP fixup (append at end) — let the remote own the height and push layout === */

/* 1) Let the grid track grow with the remote video */
body.view-pip #videos{
  height: auto !important;                     /* container grows */
  grid-template-rows: auto auto !important;    /* row 1 follows remote’s size */
}

/* 2) Neutralize any global fixed heights on videos while in PiP */
body.view-pip #videos > video{
  height: auto !important;                     /* cancel #videos > video !important */
}

/* 3) Give the remote the actual resizable height (wins on specificity) */
body.view-pip #videos > #remote,
body.view-pip #remote{
  height: var(--pip-remote-height) !important; /* slider drives this */
  width: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  display: block !important;                   /* avoid stray flex/grid sizing */
  object-fit: contain !important;
}

/* 4) Ensure things below actually move down */
body.view-pip #media-toolbar{
  grid-area: toolbar !important;               /* stay in row 2 */
  position: static !important;
  margin-top: var(--gap) !important;           /* normal spacing under remote */
}

/* --- View selector: PiP layout uses a single-column videos grid --- */
body.view-pip #top-videos{
  width: var(--row-content-width) !important;
  margin: 0 auto !important;
  justify-content: center !important;
  flex-direction: row-reverse !important;
  flex-wrap: wrap !important;
}

/* Default the PiP height to your normal video height unless overridden */
body.view-pip{ --pip-remote-height: var(--video-unit-height); }

/* Grid: [ remote (row 1) | slider (row 2) | toolbar (row 3) ] */
body.view-pip #videos{
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: var(--pip-remote-height) auto auto !important;
  grid-template-areas:
    "remote"
    "pip-slider"
    "toolbar" !important;
  gap: var(--gap) !important;
  width: var(--row-content-width) !important;
  justify-items: stretch !important;
  align-items: start !important;
  isolation: isolate;
  height: auto !important;                 /* container grows with content */
}

/* Make sure global video height rules don't fight PiP */
body.view-pip #videos > video{ height: auto !important; }

/* Remote: lives in row 1, its height controls the entire first track */
body.view-pip #remote{
  grid-area: remote !important;
  position: static !important;             /* in-flow grid item (pushes layout) */
  width: 100% !important;
  height: var(--pip-remote-height) !important;
  max-height: none !important;
  min-height: 120px !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: var(--radius) !important;
}

/* If #remote is a wrapper around an actual <video>, make the child fill it */
body.view-pip #remote video{
  width: 100% !important;
  height: 100% !important;
  object-fit: inherit !important;          /* follow the parent’s contain/contain */
}

/* Local: overlay at lower-right (unchanged from your intent) */



/* Toolbar stays full-width under the slider row */
body.view-pip #media-toolbar {
  grid-area: toolbar !important;
  width: var(--row-content-width) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  position: static !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  margin-top: 0 !important;                /* row gap handles spacing */
}

/* Slider row (inserted by JS) */
body.view-pip #pip-slider{
  grid-area: pip-slider !important;
  display: none;
  align-items: center;
  gap: var(--gap);
  padding: calc(var(--gap) * 0.75) var(--gap);
  background: var(--t-toolbar, #141922);
  border: 1px solid var(--t-border, #232a33);
  border-radius: var(--radius);
}

/* Slider itself */
body.view-pip #pip-range{
  flex: 1 1 auto;
  width: 100%;
  height: calc(8px * var(--scale));
}

/* Optional inline readout */
body.view-pip #pip-readout{
  font-size: .9rem;
  opacity: .8;
  min-width: 54px;
  text-align: right;
}

/* Drag handle overlay that hugs the bottom edge of the remote video */
body.view-pip #pip-resize{
  grid-area: remote !important;       /* shares the same grid cell as #remote */
  align-self: end !important;         /* stick to the bottom edge */
  justify-self: stretch !important;
  height: 12px !important;
  margin-top: -32px !important;       /* visually “just beneath” the video */
  cursor: row-resize !important;
  z-index: 5 !important;
  /* border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius); */
  background:
    linear-gradient(to bottom,
      transparent 0 45%,
      rgba(255,255,255,.12) 45% 55%,
      transparent 55% 100%);
  pointer-events: auto !important;
}

/* Nice UX while dragging */
body.resizing { cursor: row-resize !important; user-select: none !important; }


/* === PiP: make layout expand when remote grows === */

/* 1) Allow the grid container to grow; row 1 auto-sizes to videos */
body.view-pip #app{
  height: auto !important;                    /* no 100dvh clamp */
  min-height: 100dvh;                         /* still fill viewport */
  grid-template-rows:
    auto                                       /* videos row grows with content */
    auto                                       /* messages row sizes naturally */
    var(--composer-fixed-height)
    var(--controls-fixed-height)
    var(--ad-fixed-height) !important;
  align-content: start !important;            /* don't redistribute space */
}

/* 2) The grid item for row 1 must be free to grow */
body.view-pip #top-videos{
  height: auto !important;
}

/* 3) The videos wrapper must not clamp its height */
body.view-pip #videos{
  height: auto !important;                    /* cancels default fixed track */
  grid-template-rows: var(--pip-remote-height) auto !important; /* remote + toolbar */
}

/* 4) The remote video owns the height; everyone else follows */
body.view-pip #remote{
  height: var(--pip-remote-height) !important;
  max-height: none !important;
}

/* 5) Keep toolbar in the normal flow below remote (no negative margins) */
body.view-pip #media-toolbar{
  position: static !important;
  /* margin-top: var(--gap) !important;           */
  flex-wrap: nowrap !important;
}

/* 6) Neutralize any generic video height clamps while in PiP */
body.view-pip #videos > video{
  height: auto !important;
}

/* 7) Let messages/composer/controls shift downward with the growing row 1 */
body.view-pip #messages-container{
  grid-area: messages !important;
  align-self: start !important;
  height: auto !important;                    /* allow natural growth */
  min-height: var(--messages-fixed-height);   /* keep a minimum if desired */
  margin-top: -30px;
}
body.view-pip #messages{
  height: 185px !important;
  max-height: none !important;
  margin: 8px;
}



/* ===================== Fullscreen (overlay UI on remote video) ===================== */
body.view-fullscreen { overflow: hidden; }

/* Collapse the app grid while in FS */
body.view-fullscreen #app{
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  grid-template-areas: "videos" !important;
  justify-items: stretch !important;
  align-items: stretch !important;
}

/* Make the videos wrapper fill the viewport */
body.view-fullscreen #top-videos,
body.view-fullscreen #videos{
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}

/* Remote contains the screen; pointer-events off so overlays are clickable */
body.view-fullscreen #remote{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Local as PiP — fixed 4:3, ~¼ of screen width */
body.view-fullscreen #local {
  position: fixed !important;
  right: 2vw !important;
  bottom: 2vh !important;
  width: min(15vw, 520px) !important;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  object-fit: contain !important;
  z-index: 3 !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.50);
  left: 20px;
}

/* Shared overlay chrome */
body.view-fullscreen #media-toolbar,
body.view-fullscreen #messages-container,
body.view-fullscreen #controls{
  position: fixed !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

/* Toolbar pinned at top-center */
body.view-fullscreen #media-toolbar {
    /* top: 2vh !important; */
    right: -44% !important;
    /* transform: translateX(90%); */
    width: min(600px) !important;
    background: rgba(20, 25, 34, .75) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: var(--radius) !important;
    backdrop-filter: blur(6px);
    margin: 51em !important;
    /* margin-top: 15px !important; */
    /* margin-bottom: 100px; */
    /* margin-bottom: 10px !important; */
    margin-right: 34px;
}

/* Right-side panel that contains messages + composer + controls (stacked) */
body.view-fullscreen #messages-container {
    top: 55vh !important;
    right: 1vw !important;
    width: min(36vw, 760px) !important;
    height: calc(45vh - 12vh) !important;
    background: rgba(20, 25, 34, .75) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: var(--radius) !important;
    /* backdrop-filter: blur(6px); */
    padding: var(--gap) !important;
    display: grid !important
;
    grid-template-rows: 1fr auto auto !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
        "messages"
        "composer"
        "controls" !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: var(--gap) !important;
    overflow: hidden !important;
}

/* Ensure internal bits behave inside the panel */
body.view-fullscreen #messages{
  grid-area: messages !important;
  height: 158px !important;
  overflow: auto !important;
  margin: 0 !important;
}
body.view-fullscreen #composer{
  grid-area: composer !important;
  width: 100% !important;
  margin: 0 !important;
  justify-content: stretch !important;
}
body.view-fullscreen #controls{
  grid-area: controls !important;
  width: 100% !important;
  margin: 0 !important;
  justify-content: flex-start !important;
  background: transparent !important;
  border: 0 !important;
  margin-top: -20px !important;
}

/* Hide non-essentials in FS */
/* body.view-fullscreen #site-footer,
body.view-fullscreen .msg-count,
body.view-fullscreen .iframe-full{
  display: none !important;
} */

/* Keep emoji picker above everything, regardless of view mode */
.emoji-picker  { z-index: 2147483000 !important; position: relative; }

body.view-fullscreen #msg-count{

z-index: 9;

}

:root{
  --full-view-adjust: 25px;
}

body.view-fullscreen #input {
  margin-top: calc(12px - var(--full-view-adjust, 0px));
}
body.view-fullscreen :is(#emoji-btn, #emoji-btn-divider, #send-btn) {
  margin-top: calc(18px - var(--full-view-adjust, 0px));
}


/* === Keep msg-count visible in fullscreen =========================== */
body.view-fullscreen .msg-count {
    position: fixed !important;
    /* top: 2vh !important; */
    right: 2vw !important;
    left: 32vw !important;
    z-index: 2147483001 !important;
    /* transform: none !important; */
    margin: 0 !important;
    pointer-events: none !important;
}
/* (FYI you had #msg-count earlier; the element uses a CLASS, not an ID) */


/* === Keep iframe visible/clickable in fullscreen ==================== */
/* body.view-fullscreen .iframe-full{
  position: fixed !important;          
  bottom: 2vh !important;
  left: 2vw !important;
  width: min(36vw, 720px) !important;
  height: min(40vh, 420px) !important;
  z-index: 4 !important;               
  pointer-events: auto !important;     
  
  background: rgba(20,25,34,.75);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius);
} */


/* === Emoji picker fix in fullscreen =================================
   The picker gets clipped because #messages-container had overflow:hidden.
   Allow overflow and ensure the picker sits above everything.
*/
body.view-fullscreen #messages-container{
  overflow: visible !important;
}

body.view-fullscreen #composer{
  overflow: visible !important;        /* belt & suspenders */
}

/* Make sure the picker can float outside its parent and be clickable */
body.view-fullscreen .emoji-picker{
  position: absolute !important;       /* stay anchored to the composer/input */
  z-index: 2147483000 !important;      /* already very high, keep it maximal */
  pointer-events: auto !important;
}

/* If your picker library portals to <body> (some do), this variant keeps it visible: */
body.view-fullscreen body > .emoji-picker{
  position: fixed !important;          /* anchor to the viewport instead */
}


body.theme-light .msg-count,
body.theme-light .msg-count * {
  color: #0f172a !important;
}


/* Fullscreen only: make just the dynamic values white */
body.view-fullscreen #active-count,
body.view-fullscreen #zoom-pct,
body.view-fullscreen #ac,
body.view-fullscreen #zoom
 {
  color: #fff !important;
}

/* === Fullscreen: make the emoji picker show and anchor to the composer === */
body.view-fullscreen #messages-container,
body.view-fullscreen #composer{
  overflow: visible !important;                 /* let the picker escape */
}

body.view-fullscreen .emoji-picker,
body.view-fullscreen emoji-picker{
  position: absolute !important;                /* anchor to #composer (relative) */
  bottom: calc(100% + 8px) !important;          /* pop *above* the input */
  left: 0 !important;                           /* align with input’s left; use right:0 if you prefer */
  margin: 0 !important;                         /* kill the -34px / 34px offsets */
  transform: none !important;
  z-index: 2147483000 !important;               /* over everything */
  pointer-events: auto !important;
}

/* If your picker renders at <body> (some libs portal), pin that too */
body.view-fullscreen body > .emoji-picker,
body.view-fullscreen body > emoji-picker{
  position: fixed !important;
  right: 1vw !important;                        /* align with the FS panel */
  bottom: calc(2vh + 48px) !important;          /* hover just above the panel */
  margin: 0 !important;
  transform: none !important;
  z-index: 2147483000 !important;
}
/* Hide the PiP resize handle unless we're actually in PiP view */
#pip-resize{ 
  display: none !important;           /* default & fullscreen & stacked: hidden */
}

body.view-pip #pip-resize{
  display: block !important;          /* only visible in PiP mode */
}



body.view-fullscreen .wrapper{
  z-index: 214748300011 !important;          /* above #messages-container (z:2) & remote (z:1) */
  isolation: isolate;             /* keep its stacking context clean */
}





/* Global button shadow */

button,
.btn,
#send-btn,
#media-toolbar #devices-btn,
#controls #start-search.start-btn {
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35) !important;
}

/* No drop shadow on the emoji button */
#emoji-btn,
#emoji-btn:hover,
#emoji-btn:active,
#emoji-btn:focus {
  box-shadow: none !important;
}


/* Global: make all checkboxes use a black border (native + Bootstrap) */
input[type="checkbox"],
.form-check-input{
  border: 1.5px solid #3b3a3a !important; /* ensures color shows even if width was thin */
}

#send-btn{
  background-image: url("images/mail.PNG") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 28px 28px !important; /* tweak if you want larger/smaller */
}





/* === Fullscreen: keep controls INSIDE the panel grid (Firefox-safe) === */

/* controls should NOT be fixed — let the grid place it on row 3 */
body.view-fullscreen #controls {
  position: static !important;         /* back in the grid flow */
  grid-area: controls !important;
  margin-top: 0 !important;
  width: 100% !important;
  z-index: auto !important;            /* it inherits the panel’s stacking */
}

/* extra belt for Firefox */
@supports (-moz-appearance: none) {
  body.view-fullscreen #controls { position: static !important; }
}

:root { --pip-resize-nudge: 5px; }  /* tweak as needed */

body.view-pip #pip-resize{
  /* keep the proportional sizing from before */
  font-size: var(--pip-resize-font, 12px) !important;
  line-height: 1em !important;
  height: auto !important;
  padding: var(--pip-resize-pad, 4px) 0 !important;

  /* move it DOWN by ~5px (less negative overlap) */
  margin-top: calc(-1em - 2 * var(--pip-resize-pad, 4px) + var(--pip-resize-nudge)) !important;
}


body.view-vertical #videos > #remote { order: -1 !important; margin-top: calc(-24px * var(--scale));} /* top */
body.view-vertical #videos > #local  { order:  0 !important; } /* bottom */


/* === Stacked view: center the whole two-column block without changing internals === */

/* Center the grid itself in the viewport */
body.view-vertical #app{
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;   /* center tracks if there's extra room */
  justify-items: center !important;     /* keep items centered in their cells */
}

/* Ensure the two main columns center inside their grid areas */
body.view-vertical #top-videos,
body.view-vertical #messages-container{
  justify-self: center !important;
}

/* Neutralize previous left pinning nudges */
body.view-vertical #top-videos{ 
  margin-left: 0 !important; 
  margin-right: 0 !important;
}
body.view-vertical #videos{
  margin-left: 0 !important;            /* remove leftover horizontal shove */
}

/* Keep widths as defined by your vars so relative layout stays intact */
body.view-vertical #videos{
  width: var(--left-col-fixed-width) !important;
}
body.view-vertical #messages-container{
  width: var(--right-col-fixed-width) !important;
}


/* === Fullscreen: toolbar same width as messages panel, 5px beneath === */
body.view-fullscreen{
  /* Keep these in one place so toolbar & panel stay in lockstep */
  --fs-panel-right: 1vw;
  --fs-panel-top: 33em;                 /* messages-container top */
  --fs-panel-width: min(36vw, 760px);   /* messages-container width */
  --fs-panel-height: calc(45vh - 12vh); /* messages-container height */
  --fs-gap: 5px;                        /* space between panel and toolbar */
}

/* (Optional) restate panel using the variables so both stay synced */
body.view-fullscreen #messages-container{
  top: var(--fs-panel-top) !important;
  right: var(--fs-panel-right) !important;
  width: var(--fs-panel-width) !important;
  height: var(--fs-panel-height) !important;
}

/* Place toolbar directly under the panel with same width */
body.view-fullscreen #media-toolbar{
  position: fixed !important;
  top: calc(var(--fs-panel-top) + var(--fs-panel-height) + var(--fs-gap)) !important;
  right: var(--fs-panel-right) !important;
  width: var(--fs-panel-width) !important;

  left: auto !important;
  margin: 0 !important;
  transform: none !important;

  /* keep your fullscreen chrome */
  background: rgba(20,25,34,.75) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: var(--radius) !important;
  backdrop-filter: blur(6px);
  z-index: 2 !important;
}

/* Fullscreen: make all toolbar text white (labels, buttons, icons, etc.) */
body.view-fullscreen #media-toolbar,
body.view-fullscreen #media-toolbar * {
  color: #fff !important;
}

/* Friendlier placeholder color for any inputs inside the toolbar */
body.view-fullscreen #media-toolbar ::placeholder {
  color: rgba(255,255,255,.75) !important;
}

/* Ensure SVG icons inherit the white */
body.view-fullscreen #media-toolbar svg {
  color: #fff !important;
  stroke: currentColor !important;
  fill: currentColor !important;
}

/* === Fullscreen unified panel ========================================== */
body.view-fullscreen #fs-panel{
  position: fixed;
  right: 1vw;
  top: 55vh;                               /* where your messages panel lived */
  width: 650px;                 /* same width as messages-container */
  z-index: 2147483002;
  background: rgba(20,25,34,.75);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
  padding: var(--gap);
  display: grid;
  grid-template-rows: auto 1fr auto;       /* header | messages | toolbar */
  grid-template-areas:
    "hdr"
    "content"
    "toolbar";
  row-gap: 5px;                             /* ⟵ 5px gap between messages & toolbar */
  color: #fff;                              /* default white text */
}

/* Header with toggle button */
body.view-fullscreen #fs-panel .fs-hdr{
  grid-area: hdr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: 6px 10px;
  background: rgba(255,255,255,.06);
  border-radius: calc(var(--radius) - 4px);
  user-select: none;
  color: #fff;
}
body.view-fullscreen #fs-panel .fs-title{
  font-weight: 700;
  letter-spacing: .2px;
}
body.view-fullscreen #fs-panel .fs-toggle{
  appearance: none;
  border: 1px solid rgba(255,255,255,.22);
  background: transparent;
  color: #fff;
  border-radius: 8px;
  padding: 4px 8px;
  line-height: 1;
  cursor: pointer;
}
body.view-fullscreen #fs-panel .fs-toggle:hover{
  background: rgba(255,255,255,.08);
}

/* Put the existing pieces inside the grid and make them fill nicely */
body.view-fullscreen #fs-panel > #messages-container{
  grid-area: content;
  position: static !important;
  width: 100% !important;
  height: auto !important;                 /* panel dictates height */
  margin: 0 !important;
}
body.view-fullscreen #fs-panel > #media-toolbar{
  grid-area: toolbar;
  position: static !important;
  width: 100% !important;                  /* same width as messages */
  margin: 0 !important;
}

/* Paint all toolbar text/icons white in fullscreen */
body.view-fullscreen #media-toolbar,
body.view-fullscreen #media-toolbar *{
  color: #fff !important;
}
body.view-fullscreen #media-toolbar ::placeholder{
  color: rgba(255,255,255,.75) !important;
}
body.view-fullscreen #media-toolbar svg{
  color: #fff !important;
  stroke: currentColor !important;
  fill: currentColor !important;
}



/* When embedded in the panel, neutralize their old fullscreen “fixed” styles */
body.view-fullscreen .fs-embedded{
  position: static !important;
  inset: auto !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Collapsed state: hide content + toolbar, keep just the header bar visible */
body.view-fullscreen #fs-panel.collapsed{
  grid-template-rows: auto 0 0;
  overflow: hidden;
  padding-bottom: 8px;                     /* a little breathing room */
}
body.view-fullscreen #fs-panel.collapsed > #messages-container,
body.view-fullscreen #fs-panel.collapsed > #media-toolbar{
  display: none !important;
}

/* Optional: a tiny visual hint on toggle icon */
body.view-fullscreen #fs-panel .fs-toggle[data-icon="min"]::before{ content: "–"; }
body.view-fullscreen #fs-panel .fs-toggle[data-icon="max"]::before{ content: "▢"; }


/* Move the unified fullscreen panel to the bottom when minimized */
body.view-fullscreen #fs-panel{
  transition: top .2s ease, bottom .2s ease, width .2s ease, padding .2s ease;
}

/* Collapsed: bar-only, sits at the bottom-right */
body.view-fullscreen #fs-panel.collapsed{
  /* hide content/toolbar (already done) */
  grid-template-rows: auto 0 0;
  overflow: hidden;

  /* shrink chrome */
  padding: 6px 10px;

  /* park at the bottom */
  top: auto !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
  right: 1vw !important;
  left: auto !important;

  /* compact width (header only) */
  width: max-content !important;
  min-width: 240px;              /* keep it easy to click */

  /* tidy the look */
  border-radius: calc(var(--radius) - 2px);
}

/* Make the header look like a tidy chip when collapsed */
body.view-fullscreen #fs-panel.collapsed .fs-hdr{
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  padding: 6px 12px;
}

/* Hide the inner sections while collapsed (belt & suspenders) */
body.view-fullscreen #fs-panel.collapsed > #messages-container,
body.view-fullscreen #fs-panel.collapsed > #media-toolbar{
  display: none !important;
}


/* Keep everything in the FS toolbar white… */
body.view-fullscreen #media-toolbar,
body.view-fullscreen #media-toolbar * {
  color: #fff !important;
}


/* …except these: make them black */
body.view-fullscreen #media-toolbar #devices-btn,
body.view-fullscreen #media-toolbar #devices-btn *,
body.view-fullscreen #auto-alert-dis,
body.view-fullscreen #auto-alert-dis * {
  color: #000 !important;
}


/* Make fullscreen toolbar text white… */
body.view-fullscreen #media-toolbar { color: #fff !important; }
body.view-fullscreen #media-toolbar * { color: #fff !important; }

/* …but NOT these buttons (or anything inside them). 
   They use the theme text color, same as #find-interests. */
body.view-fullscreen #media-toolbar #devices-btn,
body.view-fullscreen #media-toolbar #devices-btn *,
body.view-fullscreen #auto-alert-dis,
body.view-fullscreen #auto-alert-dis * {
  color: var(--t-text) !important;
}


/* Always keep a 3px vertical gap between messages and composer */
#messages-container {
  row-gap: 3px !important;          /* only the row gap; keep column gap as-is */
}

/* Fullscreen had a shorthand `gap:` that was stomping row-gap.
   Reassert 3px in FS while preserving your column gap. */
body.view-fullscreen #messages-container {
  row-gap: 19px !important;
  column-gap: var(--gap) !important; /* keep your horizontal spacing */
}


/* Fullscreen: keep toolbar text white EXCEPT these two */
body.view-fullscreen #media-toolbar *:not(#devices-btn):not(#auto-alert-dis){
  color: #fff !important;
}

/* Make #devices-btn and #auto-alert-dis use the same text color as other buttons (e.g., #find-interests) */
:is(#devices-btn, #auto-alert-dis){
  color: var(--t-text, #eaeef5) !important;  /* dark in light theme, light in dark themes */
}

/* --- Fix offcanvas lock in fullscreen ----------------------------------- */

/* 1) Keep all FS overlays below Bootstrap overlays */
body.view-fullscreen #fs-panel,
body.view-fullscreen #media-toolbar,
body.view-fullscreen #messages-container,
body.view-fullscreen #controls {
  z-index: 103 !important; /* below Bootstrap's 1040+/1050 scale */
}

/* That very large z-index was winning over everything */
body.view-fullscreen .wrapper {
  z-index: 1029 !important; /* or simply 'auto', but keep it below 1030 */
}

/* 2) Ensure Bootstrap layers win the stack war */
.offcanvas-backdrop,
.modal-backdrop {
  z-index: 1100 !important;
}
.offcanvas,
.modal {
  z-index: 1110 !important;
}

/* 3) While offcanvas is open, let the backdrop capture clicks
      and hide super-high-z UI like the emoji picker. 
      (Works in modern browsers with :has) */
body:has(.offcanvas-backdrop.show) .emoji-picker,
body:has(.offcanvas.show) .emoji-picker {
  display: none !important;
}
body:has(.offcanvas-backdrop.show) #fs-panel,
body:has(.offcanvas-backdrop.show) #media-toolbar,
body:has(.offcanvas-backdrop.show) #messages-container,
body:has(.offcanvas-backdrop.show) #controls {
  pointer-events: none !important;  /* let backdrop eat the clicks */
}

/* Optional (defensive): if any icon/utility still floats above, cap it */
body:has(.offcanvas-backdrop.show) [style*="z-index"],
body:has(.offcanvas-backdrop.show) .emoji-picker {
  z-index: 1 !important;  /* backdrop still wins with 1100 */
}

/* Fullscreen + light theme: keep .text-secondary at Bootstrap gray */
body.theme-light.view-fullscreen .text-secondary {
  color: #6c757d !important;
}


  /* ---- Flags grid ---- */
    .geo-flag-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
      gap: .5rem;
    }
    .geo-flag-btn {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: .6rem .5rem .5rem;
      min-height: 88px;
      border-radius: .75rem;

      /* Keep buttons WHITE always */
      background-color: #fff;
      color: var(--bs-body-color);
      border: 1px solid rgba(0,0,0,.15);

      user-select: none;
      cursor: pointer;
      transition: transform .05s ease, box-shadow .15s ease, border-color .15s ease;
    }
    .geo-flag-btn:hover { transform: translateY(-1px); }
    .geo-flag-btn.active,
    .geo-flag-btn[aria-pressed="true"] {
      background-color: #fff;                 /* white stays */
      border-color: var(--bs-primary);
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-primary) 35%, transparent);
      border: #0558fd  solid;
    }
    .geo-flag-img {
      width: 32px;
      height: 24px;
      border-radius: 3px;
      box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset;
      display: inline-block;
    }
    .geo-flag-name {
      margin-top: .4rem;
      font-size: .8rem;           /* small but readable */
      line-height: 1.15;
      color: var(--bs-body-color);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      max-width: 100%;
    }
    .geo-flag-btn.active .geo-flag-name { color: var(--bs-primary); }
    .btn.btn-xs{--bs-btn-padding-y:.12rem;--bs-btn-padding-x:.45rem;--bs-btn-font-size:.75rem}


/* ---- view-vertical: make videos scale correctly above 100% ---- */

/* 1) No "extra bias" for videos in vertical view; match the rest of the UI */
body.view-vertical{
  --video-scale: var(--scale); /* cancel 0.5*over bump */
}

/* 2) Let row 1 follow its content (videos/messages) instead of the root calc */
body.view-vertical #app{
  grid-template-rows:
    auto                                  /* videos | messages row */
    var(--composer-fixed-height)
    var(--controls-fixed-height)
    var(--ad-fixed-height) !important;
}

/* 3) Release the videos wrapper from any fixed height */
body.view-vertical #videos{
  height: auto !important;
}

/* 4) Let each video size from width with a stable 4:3 ratio */
body.view-vertical #videos > video{
  width: 100% !important;
  height: auto !important;                /* overrides var(--video-unit-height) */
  aspect-ratio: 4 / 3 !important;
  max-height: none !important;
  min-height: 0 !important;
  object-fit: contain !important;         /* keep full frame visible */
}

/* (belt & suspenders) don't allow flex to squash videos */
body.view-vertical #videos > video{
  flex: 0 0 auto !important;
}


/* === view-vertical: make video sizing track --scale exactly (no extra bump) === */

/* 1) Kill the >100% bump and point video-scale straight at scale */
body.view-vertical{
  --over: 0 !important;
  --video-scale: var(--scale) !important;
}

/* 2) Force the left column width to base * scale (not video-scale) */
body.view-vertical #videos{
  /* Direct width — bypasses any earlier var that used --video-scale */
  width: calc(var(--base-left-col-width) * var(--scale)) !important;

  /* Keep the internal var consistent for anything else that reads it */
  --left-col-fixed-width: calc(var(--base-left-col-width) * var(--scale)) !important;
}

/* 3) Height from width via aspect ratio; ignore old var-based height */
body.view-vertical #videos > video{
  width: 100% !important;
  height: auto !important;            /* beats previous var(--video-unit-height) */
  aspect-ratio: 4 / 3 !important;     /* pick 16/9 if you prefer */
  object-fit: contain !important;
  flex: 0 0 auto !important;          /* avoid flex shrink/squash */
}

/* 4) Let the top grid row grow with the videos */
body.view-vertical #app{
  grid-template-rows:
    auto
    var(--composer-fixed-height)
    var(--controls-fixed-height)
    var(--ad-fixed-height) !important;
}

body.view-fullscreen #file-btn {

margin-top: -6px !important;

}


/* element that has BOTH classes */
.msg-bubble.msg-system {
  background-color: var(--system-msg-bubble-bg) !important;
  border: 1px solid var(--system-msg-bubble-border) !important;
  color: var(--system-msg-bubble-text) !important;
  box-shadow: var(--system-msg-shadow);
}

#remote-mini-btn{
  position:absolute;
  bottom: calc(60px * var(--scale)) ;
  right: calc( 10px * var(--scale)) ;
  z-index: 10;
}


/* [ANCHOR: FAVORITE_PARTNER_STAR_OVERLAY] */
body.view-pip #favorite-partner-btn{
  position: absolute;
  bottom: calc(60px * var(--scale));
  left:   calc(10px * var(--scale));
  z-index: 10;

  width:  calc(30px * var(--scale));
  height: calc(30px * var(--scale));
  padding: 0 !important;
  border: none;
  background: transparent;
  margin-left: 300px;
  margin-top: 6px;
  display: none; /* JS toggles this */
}


.tipwrap{
  display:inline-flex;
  align-items:center;
  cursor:not-allowed;
  margin-bottom: calc(var(--gap) * .2); /* or whatever you want */
  vertical-align: middle;             /* helps in mixed inline contexts */
}


/* [ANCHOR: FAVORITE_PARTNER_STAR_OVERLAY] */
body.view-vertical #favorite-partner-btn{
  position: absolute;
  bottom: calc(60px * var(--scale));
  left:   calc(10px * var(--scale));
  z-index: 10;

  width:  calc(30px * var(--scale));
  height: calc(30px * var(--scale));
  padding: 0 !important;
  border: none;
  background: transparent;
  margin-left: 10px;
  display: none; /* JS toggles this */
}






#favorite-partner-btn #favorite-partner-icon{
  display: inline-block;
  font-size: calc(26px * var(--scale));
  line-height: 1;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 2px rgba(0,0,0,0.75);
}

#favorite-partner-btn.is-favorited #favorite-partner-icon{
  color: #0d6efd;
  text-shadow: none;
}

#favorite-partner-btn:hover{ filter: brightness(1.05); }
#favorite-partner-btn:focus-visible{
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}


body.view-vertical #remote-mini-btn-vert{
  position:absolute;
  margin-top: calc(278px * var(--scale)) !important;
  right: calc(9px * var(--scale)) !important;
  z-index: 10;
}

body.view-pip #remote-mini-btn{
  position: absolute;
  bottom: calc(14px * var(--scale)) ;
  right: calc( 300px * var(--scale)) ;
  z-index: 10;
}


/* body.view-fullscreen #remote-mini-btn{
  z-index: 150;
  right: calc(649px * var(--scale)) ;
  margin-bottom: calc(-30px * var(--scale)) ;
} */


/* Fullscreen: show the mini button inside the toolbar, left of Settings */
body.view-fullscreen #media-toolbar #remote-mini-btn{
  position: static !important;      /* cancel absolute rules */
  inset: auto !important;
  margin: 0 !important;

  /* match your toolbar button sizing */
  /* width: 40px; 
  height: 40px;
   */
}

/* hover/active to match other controls */

body.view-fullscreen #media-toolbar #remote-mini-btn:active{
  transform: translateY(1px);
}

/* keep it hidden by default elsewhere (your rule already had this) */
#remote-mini-btn, #remote-mini-btn-vert { display: none; }



#remote-mini-btn,
#remote-mini-btn-vert{
  /* show the image */
  background-image: url('images/report1.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  /* size the button as an icon (uses your --scale var) */
  width:  calc(29px * var(--scale));
  height: calc(29px * var(--scale));
  padding: 0 !important;
  border: none;                 /* remove Bootstrap border, optional */
  background-color: transparent;/* remove dark bg, optional */
  border-radius: 50%;           /* keep it round; optional */

  /* hide the text visually but keep it accessible */
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  line-height: 0;
}

/* Optional: subtle hover/focus */
#remote-mini-btn:hover,
#remote-mini-btn-vert:hover { filter: brightness(1.1); }
#remote-mini-btn:focus-visible,
#remote-mini-btn-vert:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}


/* =========================
   NAVBAR: ignore body.theme-*
   ========================= */
nav.navbar.theme-lock{
background: linear-gradient(90deg, rgba(255, 0, 0, 0.25), rgba(255, 165, 0, 0.25), rgba(255, 255, 0, 0.25), rgba(0, 128, 0, 0.25), rgba(0, 255, 255, 0.25), rgba(0, 0, 255, 0.25), rgba(238, 130, 238, 0.25), rgba(255, 0, 0, 0.25)), white;
    background-size: 70% 100%, auto;
    border-bottom: 1px solid #232a33 !important;
    color: #0d0d0e !important;
    --bs-navbar-color: rgba(234, 238, 245, .92);
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-brand-color: #eaeef5;
    --bs-navbar-brand-hover-color: #ffffff;
    --bs-navbar-active-color: #ffffff;
    --bs-navbar-disabled-color: rgba(234, 238, 245, .5);
    --bs-navbar-toggler-border-color: rgba(234, 238, 245, .25);
   animation: rainbow-move 20s linear infinite alternate;
}
@keyframes rainbow-move {
  0%   { background-position: 0% 50%, 0 0; }
  100% { background-position: 100% 50%, 0 0; }
}
  


/* Ensure common navbar text follows the locked color */
nav.navbar.theme-lock .navbar-brand,
nav.navbar.theme-lock .nav-link,
nav.navbar.theme-lock .navbar-text{
  color: inherit !important;
}

/* Keep secondary text stable inside the nav */
nav.navbar.theme-lock .text-secondary{
  color: #a6aab3 !important;
}

/* Lock the moved counter + its children (your theme-light was changing this) */
nav.navbar.theme-lock .msg-count,
nav.navbar.theme-lock .msg-count *{
  color: #1a1a1b !important;
  
}

/* Lock the badge (your theme overrides were changing it) */
nav.navbar.theme-lock .region-badge{
  background: #c5d2fa !important;
  border-color: #455d7c !important;
  color: #eaeef5 !important;
}


 #remote-mini-btn, #remote-mini-btn-vert { display: none; }

 /* [ANCHOR: OFFCANVAS_ACCORDION_THEME] */
/* Theme-aware accordion styling inside Settings offcanvas */
#devicesOffcanvas .accordion{
  /* Bootstrap accordion vars (v5) */
  --bs-accordion-bg: transparent;
  --bs-accordion-color: var(--t-text, #eaeef5);
  --bs-accordion-border-color: var(--t-border, #232a33);

  --bs-accordion-btn-bg: var(--t-toolbar, #141922);
  --bs-accordion-btn-color: var(--t-text, #eaeef5);

  --bs-accordion-active-bg: var(--t-toolbar, #141922);
  --bs-accordion-active-color: var(--t-text, #eaeef5);

  --bs-accordion-btn-focus-border-color: var(--t-border, #232a33);
  --bs-accordion-btn-focus-box-shadow: none;

  --bs-accordion-body-padding-y: .9rem;
  --bs-accordion-body-padding-x: .9rem;
}

/* Card-like items (even with accordion-flush) */
#devicesOffcanvas .accordion-item{
  background: transparent;
  border: 1px solid var(--t-border, #232a33);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: calc(var(--gap) * 0.75);
}
#devicesOffcanvas .accordion-item:last-child{ margin-bottom: 0; }

/* Header button */
#devicesOffcanvas .accordion-button{
  background: var(--t-toolbar, #141922);
  color: var(--t-text, #eaeef5);
  font-weight: 700;
  letter-spacing: .2px;
}
#devicesOffcanvas .accordion-button:hover{
  background: var(--t-btn-hover, #243041);
}
#devicesOffcanvas .accordion-button:not(.collapsed){
  background: var(--t-toolbar, #141922);
  color: var(--t-text, #eaeef5);
  box-shadow: none;
}

/* Chevron icon should follow light/dark */
#devicesOffcanvas .accordion-button::after{
  filter: invert(var(--t-close-invert, 1)) !important;
  opacity: .85;
}

/* Body panel */
#devicesOffcanvas .accordion-body{
  background: var(--t-panel, #161a20);
  color: var(--t-text, #eaeef5);
  border-top: 1px solid var(--t-border, #232a33);
}

/* Tidy up inner labels + helper text */
#devicesOffcanvas .accordion-body .text-secondary{
  color: var(--t-muted, #a6aab3) !important;
}

/* Buttons inside the offcanvas (Upload/Clear/etc) */
#devicesOffcanvas .btn.btn-outline-secondary{
  color: var(--t-text, #eaeef5);
  border-color: var(--t-border, #232a33);
}
#devicesOffcanvas .btn.btn-outline-secondary:hover{
  background: var(--t-btn-hover, #243041);
  border-color: var(--t-border, #232a33);
}
#devicesOffcanvas .btn.btn-outline-secondary:focus,
#devicesOffcanvas .btn.btn-outline-secondary:focus-visible{
  box-shadow: none !important;
  outline: 0 !important;
}

/* [ANCHOR: THEME_LIGHT_FOOTER_INNER_TEXT] */
body.theme-light .footer-inner,
body.theme-light .footer-inner *{
  color: #6c757d !important; /* Bootstrap-ish grey */
}


/* [ANCHOR: ACCOUNT_DROPDOWN_THEME] */
/* Theme-aware styling for the account dropdown (Profile/Logout) */
.dropdown-menu[aria-labelledby="accountMenuBtn"]{
  background: var(--t-panel, #161a20) !important;
  border: 1px solid var(--t-border, #232a33) !important;
  border-radius: var(--radius, 12px) !important;
  padding: 6px !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.35) !important;
  min-width: 200px;
}

/* Items (both <button> and <a>) */
.dropdown-menu[aria-labelledby="accountMenuBtn"] .dropdown-item{
  color: var(--t-text, #eaeef5) !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  background: transparent !important;

  /* IMPORTANT: your global "button { box-shadow: ... !important }" would hit the Profile button */
  box-shadow: none !important;
}

/* Hover + focus */
.dropdown-menu[aria-labelledby="accountMenuBtn"] .dropdown-item:hover,
.dropdown-menu[aria-labelledby="accountMenuBtn"] .dropdown-item:focus{
  background: var(--t-btn-hover, #243041) !important;
  color: var(--t-text, #eaeef5) !important;
}

/* Active state */
.dropdown-menu[aria-labelledby="accountMenuBtn"] .dropdown-item:active,
.dropdown-menu[aria-labelledby="accountMenuBtn"] .dropdown-item.active{
  background: var(--t-btn, #1f2630) !important;
  color: var(--t-text, #eaeef5) !important;
}

/* Divider */
.dropdown-menu[aria-labelledby="accountMenuBtn"] .dropdown-divider{
  border-top: 1px solid var(--t-border, #232a33) !important;
  opacity: 1 !important;
  margin: 6px 0 !important;
}

/* Logout: keep Bootstrap danger, but still theme-hover background */
.dropdown-menu[aria-labelledby="accountMenuBtn"] .dropdown-item.text-danger{
  color: #dc3545 !important;
}
.dropdown-menu[aria-labelledby="accountMenuBtn"] .dropdown-item.text-danger:hover,
.dropdown-menu[aria-labelledby="accountMenuBtn"] .dropdown-item.text-danger:focus{
  background: color-mix(in srgb, #dc3545 12%, transparent) !important;
}
/* [ANCHOR: FAVORITES_OFFCANVAS_STYLES] */
.favorites-btn{
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  line-height: 1;
  font-size: 18px;
}

.favorites-offcanvas{
  background: var(--t-panel, #161a20);
  color: var(--t-text, #eaeef5);
  border-left: 1px solid var(--t-border, #232a33);
}

.favorites-offcanvas .offcanvas-header{
  border-bottom: 1px solid var(--t-border, #232a33);
}

.favorites-offcanvas .favorites-userlist{
  /* max-height: min(42vh, 360px); */
  overflow-y: auto;
  padding-right: 4px; /* keep scrollbar from hugging content */
  height: 350px;
}

.favorites-offcanvas .favorites-userlist-group .list-group-item{
  background: var(--t-input-bg, #1b212b);
  border-color: var(--t-border, #232a33);
  color: var(--t-text, #eaeef5);
}

.favorites-offcanvas .favorites-userlist-group .list-group-item:hover,
.favorites-offcanvas .favorites-userlist-group .list-group-item:focus{
  background: var(--t-btn-hover, #243041);
}

.favorites-offcanvas .favorites-user-row{
  border-radius: 10px;
  margin-bottom: 6px;
}

.favorites-offcanvas .favorites-online-badge{
  font-size: 12px;
  color: #4ee38a;
  white-space: nowrap;
}

.favorites-offcanvas .favorites-chat{
  flex: 1 1 auto;
  min-height: 240px;
  border: 1px solid var(--t-border, #232a33);
  border-radius: var(--radius, 12px);
  padding: 10px;
  background: rgba(0,0,0,.10);
  height: 57%;
}

.favorites-offcanvas .favorites-chat-messages{
  overflow-y: auto;
  padding-right: 4px;
 /* height: 630px; */
}

.favorites-offcanvas .dropdown-menu{
  background: var(--t-panel, #161a20);
  border: 1px solid var(--t-border, #232a33);
  border-radius: var(--radius, 12px);
  padding: 6px;
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
}

.favorites-offcanvas .dropdown-item{
  color: var(--t-text, #eaeef5);
  border-radius: 10px;
}

.favorites-offcanvas .dropdown-item:hover,
.favorites-offcanvas .dropdown-item:focus{
  background: var(--t-btn-hover, #243041);
  color: var(--t-text, #eaeef5);
}


/* [ANCHOR: FAVORITES_PRIVATE_CHAT_THREADS] */
.favorites-offcanvas .private-chat-thread .msg-bubble{
  max-width: 100%;
}

/* [ANCHOR: FAVORITES_PM_THREAD_HEADER_AND_FIXED_HEIGHT] */

/* Header line above the PM messages box */
.favorites-offcanvas .private-chat-thread-header{
  padding: .35rem .5rem;
  font-weight: 700;
  letter-spacing: .2px;

  background: var(--t-toolbar, #141922);
  color: var(--t-text, #eaeef5);
  border: 1px solid var(--t-border, #232a33);
  border-radius: var(--radius, 12px);
}

/* Fixed-height PM messages box (~400px, scales with your --scale) */
.favorites-offcanvas .private-chat-thread-messages{
  margin-top: .35rem;
  padding: 10px;

  height: calc(600px * var(--scale));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  background: var(--t-panel, #161a20);
  color: var(--t-text, #eaeef5);
  border: 1px solid var(--t-border, #232a33);
  border-radius: var(--radius, 12px);
}


/* [ANCHOR: FAVORITE_PARTNER_STAR_POSITION_FIX]
   Star is positioned by JS next to the report/abuse button (#remote-mini-btn),
   so it stays correct across views. */
#videos{
  position: relative;
}
#favorite-partner-btn{
  /* JS drives top/left; prevent legacy bottom/left from anchoring to the local video */
  top: 0;
  left: 0;
  bottom: auto !important;
  right: auto !important;
}


.msg-bubble.msg-you {
  margin-left: auto;            /* push to the right */
  margin-right: 0;
  max-width: 70%;
  width: fit-content;

  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px 16px 6px 16px;  /* tail-ish corner */
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);

  background: #2563eb;
  color: #fff;

  text-align: right;
  line-height: 1.35;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.msg-bubble.msg-partner {
  margin-right: auto;           /* push to the left */
  margin-left: 0;
  max-width: 70%;
  width: fit-content;

  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px 16px 16px 6px;  /* tail-ish corner */
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);

  background: #f3f4f6;
  color: #111827;

  text-align: left;
  line-height: 1.35;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* [ANCHOR: PMS_UNREAD_DOT_BADGES] */
.favorites-offcanvas .favorites-pm-dot{
  width: 10px;
  height: 10px;
  min-width: 10px;
  padding: 0;
  display: inline-block;
  margin-left: 8px;
  margin-right: 8px;
}

.pms-dot-badge{
  width: 10px;
  height: 10px;
  min-width: 10px;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
}

.pms-dot-badge:empty{ display: inline-block !important; }
.favorites-pm-dot:empty{ display: inline-block !important; }

.favorites-offcanvas .pms-dot-badge{
  margin-left: 6px;
}

.navbar .pms-dot-badge{
  margin: 0;
}

.navbar {
 --bs-navbar-padding-y: 0.1rem !important;
}


/* [ANCHOR: FAVORITE_STAR_SIMPLE_POSITIONING_CSS] */

/* Per-view padding (tweak these if you want) */
:root{
  --fav-pad-x: 10px;
  --fav-pad-y: 12px;
}
body[data-view="vertical"]{
  --fav-pad-x: 10px;
  --fav-pad-y: 12px;
}
body[data-view="pip"]{
  --fav-pad-x: 8px;
  --fav-pad-y: 10px;
}

/* Make the star immune to layout jitter */
#favorite-partner-btn.favorite-partner-btn{
  position: fixed !important;   /* key: coords are viewport-based */
  z-index: 1040;                /* above video layers */
  width: 34px;
  height: 34px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  user-select: none;

  /* Key: anchor from the remote's bottom edge without measuring height */
  transform: translateY(-100%);

  /* Kill any hover “size” transitions that can cause flicker loops */
  transition: none !important;
}

/* [ANCHOR: PIP_TOOLBAR_GAP_EXTRA]
   Extra vertical clearance between the PIP resize handle and the toolbar below. */
:root{
  --pip-toolbar-gap-extra: 10px; /* tweak: 6px..18px */
}

/* Ensure the toolbar sits lower in PIP view (prevents overlap with #pip-resize) */
body.view-pip #media-toolbar{
  margin: calc(var(--gap) + var(--pip-toolbar-gap-extra)) auto 0 auto !important;
}

.emoji-picker {
  z-index: 9999 !important;
}


/* ================= Account Profile modal + gallery ================= */
/* [ANCHOR: ACCOUNT_PROFILE_MODAL_GALLERY] */
#accountProfileModal .modal-content{
  background: #161a20;
  color: #eaeef5;
  border: 1px solid #232a33;
  border-radius: var(--radius);
}

#accountProfileModal .modal-header,
#accountProfileModal .modal-footer{
  background: #141922;
  border-color: #232a33;
  color: #eaeef5;
}

#accountProfileModal .modal-title{ color: #eaeef5; }

#accountProfileModal .text-secondary,
#accountProfileModal .form-text{ color: #a6aab3 !important; }

#accountProfileModal .btn-close{
  filter: invert(1);
  opacity: .85;
}

#accountProfileModal .btn.btn-secondary{
  background: #1f2630;
  border: 1px solid #232a33;
  color: #eaeef5;
}
#accountProfileModal .btn.btn-secondary:hover{
  background: #243041;
  border-color: #2b3a4e;
}

#accountProfileModal .account-profile-panel{
  background: rgba(255,255,255,0.02);
  border: 1px solid #232a33;
  border-radius: var(--radius);
  padding: 1rem;
}

#accountProfileModal .profile-readonly-field{
  background: #1b212b;
  color: #eaeef5;
  border-color: #232a33;
}

#accountProfileModal .profile-editor-video,
#accountProfileModal .profile-editor-photo{
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #000;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15);
}

#accountProfileModal .profile-gallery-card{
  position: relative;
  background: #1b212b;
  border: 1px solid #232a33;
  color: #eaeef5;
  overflow: hidden;
}

#accountProfileModal .profile-gallery-empty{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 1rem;
  text-align: center;
  background: rgba(255,255,255,0.02);
  border: 1px dashed #2b3a4e;
  border-radius: 12px;
}

#accountProfileModal .profile-gallery-thumb{
  display: block;
  background: transparent;
  transition: transform .15s ease, box-shadow .15s ease;
}

#accountProfileModal .profile-gallery-thumb:hover{
  transform: translateY(-1px);
}

#accountProfileModal .profile-gallery-thumb.is-active{
  box-shadow: inset 0 0 0 2px #66a3ff;
}

#accountProfileModal .profile-gallery-thumb-img{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #000;
}

#accountProfileModal .profile-gallery-caption{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#accountProfileModal .profile-gallery-tile{
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

#accountProfileModal .profile-gallery-placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #a6aab3;
  font-size: .95rem;
  text-align: center;
  padding: 1rem;
}

body[class*="theme-"] #accountProfileModal .modal-content{
  background: var(--t-panel) !important;
  color: var(--t-text) !important;
  border: 1px solid var(--t-border) !important;
}

body[class*="theme-"] #accountProfileModal .modal-header,
body[class*="theme-"] #accountProfileModal .modal-footer{
  background: var(--t-toolbar) !important;
  border-color: var(--t-border) !important;
  color: var(--t-text) !important;
}

body[class*="theme-"] #accountProfileModal .modal-title{
  color: var(--t-text) !important;
}

body[class*="theme-"] #accountProfileModal .text-secondary,
body[class*="theme-"] #accountProfileModal .form-text{
  color: var(--t-muted) !important;
}

body[class*="theme-"] #accountProfileModal .btn.btn-secondary{
  background: var(--t-btn) !important;
  border-color: var(--t-border) !important;
  color: var(--t-text) !important;
}
body[class*="theme-"] #accountProfileModal .btn.btn-secondary:hover{
  background: var(--t-btn-hover) !important;
  border-color: var(--t-border) !important;
}

body[class*="theme-"] #accountProfileModal .btn-close{
  filter: invert(var(--t-close-invert, 1)) !important;
}

body[class*="theme-"] #accountProfileModal .account-profile-panel,
body[class*="theme-"] #accountProfileModal .profile-gallery-card,
body[class*="theme-"] #accountProfileModal .profile-readonly-field,
body[class*="theme-"] #accountProfileModal .profile-gallery-empty{
  background: var(--t-panel) !important;
  color: var(--t-text) !important;
  border-color: var(--t-border) !important;
}

body[class*="theme-"] #accountProfileModal .profile-gallery-placeholder,
body[class*="theme-"] #accountProfileModal .profile-gallery-caption{
  color: var(--t-muted) !important;
}

body[class*="theme-"] #accountProfileModal .profile-gallery-thumb.is-active{
  box-shadow: inset 0 0 0 2px rgba(102, 163, 255, 0.95);
}


#accountProfileModal .profile-gallery-thumb{
  cursor: zoom-in;
}

#accountProfileModal .profile-gallery-delete-btn{
  position: absolute;
  right: 8px;
  bottom: 42px;
  z-index: 3;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  background: rgba(17, 20, 27, 0.92);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
}

#accountProfileModal .profile-gallery-card:hover .profile-gallery-delete-btn,
#accountProfileModal .profile-gallery-card:focus-within .profile-gallery-delete-btn{
  opacity: 1;
  transform: translateY(0);
}

#accountProfileModal .profile-gallery-delete-btn:hover,
#accountProfileModal .profile-gallery-delete-btn:focus{
  color: #fff;
  background: rgba(151, 34, 47, 0.96);
  border-color: rgba(255,255,255,0.22);
}

#profileGalleryViewerModal .modal-content{
  background: #141922;
  color: #eaeef5;
  border: 1px solid #232a33;
}

#profileGalleryViewerModal .modal-header{
  border-color: #232a33;
}

#profileGalleryViewerModal .btn-close{
  filter: invert(1);
}

#profileGalleryViewerModal .profile-gallery-viewer-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(70vh, 720px);
}

#profileGalleryViewerModal .profile-gallery-viewer-img{
  display: block;
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  background: #000;
  border: 1px solid rgba(255,255,255,0.15);
}

body[class*="theme-"] #profileGalleryViewerModal .modal-content{
  background: var(--t-panel) !important;
  color: var(--t-text) !important;
  border-color: var(--t-border) !important;
}

body[class*="theme-"] #profileGalleryViewerModal .modal-header{
  background: var(--t-toolbar) !important;
  border-color: var(--t-border) !important;
}

body[class*="theme-"] #profileGalleryViewerModal .text-secondary{
  color: var(--t-muted) !important;
}

body[class*="theme-"] #profileGalleryViewerModal .btn-close{
  filter: invert(var(--t-close-invert, 1)) !important;
}


#profileGalleryViewerModal .profile-gallery-viewer-shell{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

#profileGalleryViewerModal .profile-gallery-viewer-nav{
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 34px;
  line-height: 1;
  background: rgba(15, 17, 21, 0.84);
  border-color: rgba(255,255,255,0.22);
}

#profileGalleryViewerModal .profile-gallery-viewer-nav:hover{
  background: rgba(28, 34, 43, 0.95);
}

#profileGalleryViewerModal .profile-gallery-viewer-nav:disabled{
  opacity: 0.45;
  cursor: default;
}

#profileGalleryViewerModal .profile-gallery-viewer-nav span{
  display: block;
  margin-top: -2px;
}

@media (max-width: 767.98px){
  #profileGalleryViewerModal .profile-gallery-viewer-shell{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #profileGalleryViewerModal .profile-gallery-viewer-wrap{
    order: 1;
    min-height: min(56vh, 520px);
  }

  #profileGalleryViewerModal .profile-gallery-viewer-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
  }

  #profileGalleryViewerModal .profile-gallery-viewer-nav.prev{
    left: 12px;
  }

  #profileGalleryViewerModal .profile-gallery-viewer-nav.next{
    right: 12px;
  }

  #profileGalleryViewerModal .modal-body{
    position: relative;
  }
}

/* =============================================================================
 * [PHASE 6D.4 CSS-ONLY: MOBILE_PORTRAIT_TRANSLATION_COMPACT]
 * -----------------------------------------------------------------------------
 * The previous grid rule assumed the browser translator would preserve the two
 * original spans as the only text-bearing grid items. That assumption is not
 * reliable. This replacement applies the compact typography to the label and
 * every translated descendant, while keeping the existing JS/HTML untouched.
 * ============================================================================= */
@media (max-width: 900px) and (orientation: portrait), (orientation: portrait) and (any-pointer: coarse) and (max-width: 1600px) {
  html body.view-responsive #local-hover-tools #translate-controls,
  html body.view-responsive #videos #local-hover-tools #translate-controls,
  html body.view-responsive #local-tools-translate-slot #translate-controls {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  html body.view-responsive #local-hover-tools #translate-controls label,
  html body.view-responsive #videos #local-hover-tools #translate-controls label,
  html body.view-responsive #local-tools-translate-slot #translate-controls label {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 3px 5px !important;

    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-overflow: clip !important;

    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  /* Chrome/Edge page translation can inject nested <font> or <span> nodes.
     Force all text-bearing descendants to use the compact control typography. */
  html body.view-responsive #local-hover-tools #translate-controls label *:not(input),
  html body.view-responsive #videos #local-hover-tools #translate-controls label *:not(input),
  html body.view-responsive #local-tools-translate-slot #translate-controls label *:not(input) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-overflow: clip !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  html body.view-responsive #local-hover-tools #translate-controls label > span,
  html body.view-responsive #videos #local-hover-tools #translate-controls label > span,
  html body.view-responsive #local-tools-translate-slot #translate-controls label > span {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
  }

  html body.view-responsive #local-hover-tools #translate-enable,
  html body.view-responsive #videos #local-hover-tools #translate-enable,
  html body.view-responsive #local-tools-translate-slot #translate-enable {
    box-sizing: border-box !important;
    flex: 0 0 13px !important;
    display: block !important;
    width: 13px !important;
    min-width: 13px !important;
    max-width: 13px !important;
    height: 13px !important;
    min-height: 13px !important;
    max-height: 13px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ========================================================================== 
 * [ANCHOR: ACTIVE_USERS_TOP_RIGHT_PILL]
 * Compact live presence count. #active-count is intentionally preserved so
 * the existing realtime counter updater continues to work without JS changes.
 * ========================================================================== */
.navbar .container {
  position: relative;
}

#active-users-pill.active-users-pill {
  position: absolute;
  inset-block-start: -1px;
  inset-inline-end: max(7px, env(safe-area-inset-right, 0px));
  z-index: 12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(5, 43, 67, .94);
  color: #f8fafc !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.20);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  pointer-events: none;
}

#active-users-pill .active-users-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #39d353;
  box-shadow: 0 0 6px rgba(57, 211, 83, .65);
}

#active-users-pill .active-users-count {
  color: inherit !important;
  font: inherit;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

#active-users-pill .active-users-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
  fill: currentColor;
}

/* On one-row desktop/landscape headers, reserve the pill's corner so the
   right-side navbar actions cannot sit underneath it. Phone portrait already
   moves nav-actions to its own second row and overrides padding to zero. */
.navbar .nav-actions {
  padding-inline-end: 76px;
}

/* The Active label/count no longer occupies the centered status group.
   Re-center the guest region badge instead of retaining the old left-offset
   compensation that was used when Active: <n> lived in this group. */
@media (max-width: 700px), (max-width: 900px) and (orientation: portrait), (orientation: portrait) and (any-pointer: coarse) and (max-width: 1600px) {
  #active-users-pill.active-users-pill {
    inset-block-start: 4px;
    inset-inline-end: max(6px, env(safe-area-inset-right, 0px));
    min-height: 21px;
    padding: 3px 6px;
    gap: 4px;
    font-size: 11px;
  }

  #active-users-pill .active-users-dot {
    width: 7px;
    height: 7px;
    flex-basis: 7px;
  }

  #active-users-pill .active-users-icon {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }

  html body.view-responsive nav.navbar.guest-navbar .container > .nav-msg-count {
    justify-content: center !important;
    margin-left: 0 !important;
  }
}


/* [ANCHOR: MOBILE_TABLET_GLOBAL_UI_SIMPLIFICATION]
   Device classification is supplied by index.php as html.mobile-tablet-device.
   These UI decisions are intentionally independent of viewport width, orientation,
   pointer/hover capabilities, and selected app view. */
html.mobile-tablet-device #emoji-btn,
html.mobile-tablet-device #emoji-btn-divider,
html.mobile-tablet-device #view-row,
html.mobile-tablet-device #accThemeViewHdr .settings-view-label {
  display: none !important;
}

html.mobile-tablet-device #accThemeViewHdr .settings-view-label {
  margin-inline-start: 0 !important;
}


/* [ANCHOR: MOBILE_THEME_LABEL_WITHOUT_VIEW]
   Keep a reliable visual gap between the separately translatable Theme and
   View label spans on wider layouts. The prior selector targeted #accThemeView,
   which does not exist in the markup; the actual accordion header is
   #accThemeViewHdr. */
#accThemeViewHdr .settings-view-label {
  margin-inline-start: 0.28em;
}

/* ========================================================================== 
 * [ANCHOR: NAV_CALL_TIMER_UNDER_ACTIVE_USERS]
 * Keep the existing call timer logic/markup unchanged, but remove the timer
 * from the navbar action flow and anchor it directly beneath the top-right
 * active-user pill. The existing nav-actions right padding continues to reserve
 * this corner on desktop/landscape, while responsive portrait keeps its own
 * compact timer sizing.
 * ========================================================================== */
.navbar .container #nav-call-timer:not(.d-none) {
  position: absolute !important;
  inset-block-start: 30px !important;
  inset-inline-end: max(7px, env(safe-area-inset-right, 0px)) !important;
  z-index: 11 !important;
  margin: 0 !important;
}

@media (max-width: 700px), (max-width: 900px) and (orientation: portrait), (orientation: portrait) and (any-pointer: coarse) and (max-width: 1600px) {
  body.view-responsive .navbar .container #nav-call-timer:not(.d-none) {
    inset-block-start: 29px !important;
    inset-inline-end: max(6px, env(safe-area-inset-right, 0px)) !important;
  }
}

/* ========================================================================== 
 * [ANCHOR: NAV_CALL_TIMER_ACTIVE_BADGE_ALIGNMENT_FIX]
 * #nav-call-timer is a child of .nav-actions. The existing .nav-actions
 * position:relative made the timer's absolute offsets resolve against the
 * action group instead of the navbar container, so it landed near the Google
 * button rather than directly beneath #active-users-pill.
 *
 * Keep .nav-actions as a normal flex/grid item, but make the navbar container
 * the timer's positioned containing block. Preserve the action controls above
 * the centered nav status by raising the actual action children instead.
 * ========================================================================== */
.navbar .container > .nav-actions {
  position: static !important;
  z-index: auto !important;
}

.navbar .container > .nav-actions > :not(#nav-call-timer):not(#active-users-pill) {
  position: relative;
  z-index: 5;
}

/* Both elements now resolve from the same positioned .navbar .container and
   therefore share the same right edge. */
.navbar .container > .nav-actions > #nav-call-timer:not(.d-none) {
  inset-inline-end: max(7px, env(safe-area-inset-right, 0px)) !important;
}

@media (max-width: 700px), (max-width: 900px) and (orientation: portrait), (orientation: portrait) and (any-pointer: coarse) and (max-width: 1600px) {
  body.view-responsive .navbar .container > .nav-actions > #nav-call-timer:not(.d-none) {
    inset-inline-end: max(6px, env(safe-area-inset-right, 0px)) !important;
  }
}


/* ========================================================================== 
 * [ANCHOR: ACCOUNT_STATUS_LABEL_NON_LIGHT_THEME_COLOR]
 * In every non-Light theme, keep the account-menu Status label the same
 * foreground color as the Profile and History items. Light intentionally keeps
 * its existing muted-label treatment.
 * ========================================================================== */
body:not(.theme-light) .dropdown-menu[aria-labelledby="accountMenuBtn"]
  label[for="accountStatusSelect"].dropdown-item-text {
  color: var(--t-text, #eaeef5) !important;
}

/* ========================================================================== 
 * [ANCHOR: ACCOUNT_STATUS_CUSTOM_DROPDOWN_BADGES]
 * Native <option> menus do not reliably support independently styled inline
 * badges. Keep the canonical select for existing state/logic, but render the
 * visible selector as a custom listbox so every item has its own status dot.
 * ========================================================================== */
.dropdown-menu[aria-labelledby="accountMenuBtn"] .account-status-select-wrap {
  position: relative;
  width: 100%;
}

.dropdown-menu[aria-labelledby="accountMenuBtn"] #accountStatusSelect {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

.dropdown-menu[aria-labelledby="accountMenuBtn"] .account-status-select-button {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-align: start;
  cursor: pointer;
  padding-inline-start: 0.75rem;
  padding-inline-end: 2rem;
}

.dropdown-menu[aria-labelledby="accountMenuBtn"] .account-status-select-dot,
.dropdown-menu[aria-labelledby="accountMenuBtn"] .account-status-option-dot {
  display: inline-block;
  flex: 0 0 0.55rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
}

.dropdown-menu[aria-labelledby="accountMenuBtn"]
  .account-status-select-wrap[data-status="available"] .account-status-select-dot,
.dropdown-menu[aria-labelledby="accountMenuBtn"] .account-status-option-dot.is-available {
  background: #2fbf71;
  box-shadow: 0 0 0 2px rgba(47, 191, 113, 0.15);
}

.dropdown-menu[aria-labelledby="accountMenuBtn"]
  .account-status-select-wrap[data-status="away"] .account-status-select-dot,
.dropdown-menu[aria-labelledby="accountMenuBtn"] .account-status-option-dot.is-away {
  background: #f0a43a;
  box-shadow: 0 0 0 2px rgba(240, 164, 58, 0.15);
}

.dropdown-menu[aria-labelledby="accountMenuBtn"]
  .account-status-select-wrap[data-status="do_not_disturb"] .account-status-select-dot,
.dropdown-menu[aria-labelledby="accountMenuBtn"] .account-status-option-dot.is-do-not-disturb {
  background: #e05252;
  box-shadow: 0 0 0 2px rgba(224, 82, 82, 0.15);
}

.dropdown-menu[aria-labelledby="accountMenuBtn"] .account-status-options {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 2px);
  z-index: 1090;
  overflow: hidden;
  border: 1px solid #ced4da;
  border-radius: 0.35rem;
  background: #fff;
  color: #212529;
  box-shadow: 0 0.35rem 0.85rem rgba(0, 0, 0, 0.18);
}

.dropdown-menu[aria-labelledby="accountMenuBtn"] .account-status-options[hidden] {
  display: none !important;
}

.dropdown-menu[aria-labelledby="accountMenuBtn"] .account-status-option {
  width: 100%;
  min-height: 32px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #212529;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.3rem 0.75rem;
  text-align: start;
  font: inherit;
  cursor: pointer;
}

.dropdown-menu[aria-labelledby="accountMenuBtn"] .account-status-option:hover,
.dropdown-menu[aria-labelledby="accountMenuBtn"] .account-status-option:focus {
  background: #e9ecef;
  color: #212529;
  outline: none;
}

.dropdown-menu[aria-labelledby="accountMenuBtn"] .account-status-option.is-selected {
  background: #0d6efd;
  color: #fff;
}

.dropdown-menu[aria-labelledby="accountMenuBtn"] .account-status-option.is-selected:hover,
.dropdown-menu[aria-labelledby="accountMenuBtn"] .account-status-option.is-selected:focus {
  background: #0b5ed7;
  color: #fff;
}


/* ========================================================================== 
 * [ANCHOR: COMPOSER_SEND_THEN_FILE_ORDER]
 * Keep the composer action order consistent in every layout:
 * message field -> Send -> File.  The legacy absolute positioning placed
 * #file-btn at right:40px while #send-btn sat at right:10px, which visually
 * reversed the intended order. Responsive Grid gets explicit columns so the
 * order cannot drift when other composer rules are changed.
 * ========================================================================== */

/* Legacy/default, vertical, PiP and fullscreen composer positioning. */
body:not(.view-responsive) #composer #send-btn {
  right: 46px !important;
}

body:not(.view-responsive) #composer #file-btn {
  right: 6px !important;
}

/* Reserve room for both trailing actions when they overlay the text field. */
body:not(.view-responsive) #composer #input {
  padding-right: 6rem !important;
}

/* Adaptive Responsive view: make the grid order explicit rather than relying
   on automatic placement. */
body.view-responsive #composer #input {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.view-responsive #composer #send-btn {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

body.view-responsive #composer #file-btn {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

/* ========================================================================== 
 * [ANCHOR: SOCIAL_OFFCANVAS_LIGHT_HEADER_COLORS]
 * The Social offcanvas carries data-bs-theme="dark", which makes Bootstrap's
 * close icon white even when Chattooi's Light theme is active. Match the
 * Settings offcanvas header treatment in Light theme without changing the
 * Social offcanvas behavior in any other theme.
 * ========================================================================== */
body.theme-light #favoritesOffcanvas .offcanvas-header {
  background: var(--t-toolbar) !important;
  border-bottom: 1px solid var(--t-border) !important;
  color: var(--t-text) !important;
}

body.theme-light #favoritesOffcanvas .offcanvas-title {
  color: var(--t-text) !important;
}

body.theme-light #favoritesOffcanvas .btn-close {
  filter: invert(var(--t-close-invert, 0)) !important;
  opacity: .85;
}

/* ==========================================================================
 * [ANCHOR: RESPONSIVE_MOBILE_LANDSCAPE_HIDE_APP_ZOOM_V2]
 * Actual phones/tablets only: Responsive view in landscape does not need the
 * app-level manual Zoom readout. Bootstrap's d-md-inline/d-lg-inline utilities
 * use !important, so these overrides must also use !important.
 * Browser pinch/accessibility zoom is intentionally unaffected.
 * ========================================================================== */
@media (orientation: landscape) {
  html.mobile-tablet-device body.view-responsive .nav-msg-count > #zoom,
  html.mobile-tablet-device body.view-responsive .nav-msg-count > #zoom-pct,
  html.mobile-tablet-device body.view-responsive .nav-msg-count > #zoom-pct + .text-secondary {
    display: none !important;
  }
}


/* [ANCHOR: ADAPTIVE_MOBILE_TABLET_SYSTEM_ULTRA_COMPACT_V3]
   Variation 3 mapped to the existing main-chat system-message UI.
   Actual phone/tablet devices only, Responsive view, both portrait and landscape.
   Keep the current responsive text sizes; remove each system message's outer
   bubble surface and tighten only its box/row geometry. No divider lines. */
html.mobile-tablet-device body.view-responsive #messages {
  gap: 1px !important;
}

html.mobile-tablet-device body.view-responsive #messages .msg-system:not(.msg-bubble) {
  width: fit-content !important;
  max-width: min(94%, 620px) !important;
  padding: 2px 4px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  gap: 0.38rem !important;
  line-height: 1.18 !important;
  align-items: flex-start !important;
}

html.mobile-tablet-device body.view-responsive #messages .msg-system:not(.msg-bubble)::before {
  padding: 1px 5px !important;
  margin-top: 1px !important;
  line-height: 1.1 !important;
  flex: 0 0 auto !important;
}

/* ==========================================================================
 * [ANCHOR: PARTNER_ONLY_COUNTRY_BADGE]
 * Keep the existing region-badge updater intact, but present only the matched
 * partner country. The updater renders #region-badge children in this order:
 * local badge, arrow, partner badge. Hide the first two children and keep the
 * outer badge hidden until the partner child exists.
 * ========================================================================== */
#region-badge {
  display: none !important;
}

#region-badge > span:nth-child(1),
#region-badge > span:nth-child(2) {
  display: none !important;
}

#region-badge:has(> span:nth-child(3)) {
  display: inline-flex !important;
}

/* ========================================================================== 
 * [ANCHOR: MOBILE_TABLET_LANDSCAPE_NAV_TIMER_CLEARANCE]
 * Actual phone/tablet devices only, Responsive landscape: reserve enough
 * navbar height for the call timer beneath the active-user pill and lift the
 * timer slightly so it sits fully inside the navbar instead of overlapping
 * the media area below. Portrait and true desktop layouts are unchanged.
 * ========================================================================== */
@media (orientation: landscape) and (min-width: 701px) {
  html.mobile-tablet-device body.view-responsive > nav.navbar {
    min-height: 52px !important;
  }

  html.mobile-tablet-device body.view-responsive > nav.navbar > .container {
    min-height: 52px !important;
  }

  html.mobile-tablet-device body.view-responsive .navbar .container #nav-call-timer:not(.d-none) {
    inset-block-start: 24px !important;
  }

}


/* Responsive desktop navbar manual height */
html:not(.mobile-tablet-device) body.view-responsive > nav.navbar {
  min-height: 60px !important;
}

html:not(.mobile-tablet-device) body.view-responsive > nav.navbar > .container {
  min-height: 60px !important;
}

/* ========================================================================== 
 * [ANCHOR: RESPONSIVE_DESKTOP_NARROW_NAV_TIMER_CLEARANCE]
 * On true desktop browsers using Responsive/adaptive view, widths from
 * 500px through 899px place the account actions beneath the top-right timer.
 * Give that narrow desktop header a little extra vertical room so the timer
 * has a clean gap above the account controls without changing phone/tablet
 * device layouts or wider desktop layouts.
 * ========================================================================== */
@media (min-width: 500px) and (max-width: 899px) {
  html:not(.mobile-tablet-device) body.view-responsive > nav.navbar {
    min-height: 90px !important;
  }

  html:not(.mobile-tablet-device) body.view-responsive > nav.navbar > .container {
    min-height: 90px !important;
  }
}

/* ========================================================================== 
 * [ANCHOR: CLASSIC_VIEW_NAV_TIMER_CLEARANCE]
 * Side-by-Side, Stacked, and Picture-in-Picture use the same top-right call
 * timer geometry as Responsive desktop. Reserve enough navbar/container height
 * for the timer so it remains fully inside the navbar when a connection starts.
 * The existing ResizeObserver updates --nav-h from the resulting navbar height,
 * so each affected view keeps the app area correctly sized below the navbar.
 * ========================================================================== */
body[data-view="side-by-side"] > nav.navbar,
body.view-vertical > nav.navbar,
body.view-pip > nav.navbar {
  min-height: 60px !important;
}

body[data-view="side-by-side"] > nav.navbar > .container,
body.view-vertical > nav.navbar > .container,
body.view-pip > nav.navbar > .container {
  min-height: 60px !important;
}




/* ========================================================================== 
 * [ANCHOR: SETTINGS_MISC_THEME_TEXT]
 * The Misc accordion uses Bootstrap .form-check-label/.form-text classes.
 * Bootstrap's default form-text color can remain too dark in darker Chattooi
 * themes, so bind the new Misc labels and helper text to the established theme
 * tokens. Keep Dark/default readable through the same token fallbacks.
 * ========================================================================== */
#devicesOffcanvas #accMiscBody .form-check-label,
#devicesOffcanvas #accMiscBody .form-label {
  color: var(--t-text, #eaeef5) !important;
}

#devicesOffcanvas #accMiscBody .form-text {
  color: var(--t-muted, #a6aab3) !important;
  opacity: 1 !important;
}



@media (orientation: portrait) {
  html.mobile-tablet-device body.view-responsive > nav.navbar {
    min-height: 76px !important;
  }

  html.mobile-tablet-device body.view-responsive > nav.navbar > .container {
    min-height: 76px !important;
  }

  html.mobile-tablet-device
  body.view-responsive
  .navbar .container #nav-call-timer:not(.d-none) {
    inset-block-start: 26px !important;
  }
}

/* ========================================================================== 
 * [ANCHOR: NON_ADAPTIVE_DESKTOP_SYSTEM_BUBBLE_MATCH_ADAPTIVE]
 * Desktop Side-by-Side, Stacked, and Picture-in-Picture: use the same compact
 * system-message bubble geometry as the Adaptive/Responsive view. Responsive
 * itself is intentionally excluded so its existing rules remain authoritative.
 * ========================================================================== */
html:not(.mobile-tablet-device) body:not(.view-responsive) #messages .msg-system:not(.msg-bubble) {
  max-width: min(84%, 620px) !important;
  padding: 6px 9px !important;
  border-radius: 9px !important;
  gap: 0.38rem !important;
  font-size: 0.80rem !important;
  line-height: 1.25 !important;
}

html:not(.mobile-tablet-device) body:not(.view-responsive) #messages .msg-system:not(.msg-bubble)::before {
  padding: 2px 6px !important;
  font-size: 0.60rem !important;
  letter-spacing: 0.08em !important;
}

/* ==========================================================================
 * [ANCHOR: ACTIVE_USERS_INLINE_UNTIL_TIMER_VISIBLE]
 * Authenticated navbar behavior:
 *   - timer hidden: keep the active-user pill in the normal right-side action
 *     row, immediately after the account dropdown;
 *   - timer visible: the pill falls back to its existing absolute top-right
 *     position, with the call timer directly beneath it.
 *
 * This is driven entirely by the timer's existing .d-none state, so the
 * connection/timer JavaScript remains unchanged. Guest navbar behavior is
 * intentionally unchanged because it has no user/account dropdown.
 * ========================================================================== */
.navbar.member-navbar .nav-actions:not(:has(#nav-call-timer:not(.d-none))) {
  padding-inline-end: 0 !important;
}

.navbar.member-navbar
  .nav-actions:not(:has(#nav-call-timer:not(.d-none)))
  > #active-users-pill.active-users-pill {
  position: static !important;
  inset: auto !important;
  z-index: 5 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* [ANCHOR: ACTIVE_USERS_STRAIGHT_VERTICAL_AXIS]
 * The idle pill ends at the Bootstrap container content edge (12px / .75rem
 * from the container border). Match that same right edge while the timer is
 * visible so the pill's raised endpoint is directly above its idle endpoint.
 * Keep the timer on the same edge so it remains aligned beneath the pill.
 */
.navbar.member-navbar
  .nav-actions:has(#nav-call-timer:not(.d-none))
  > #active-users-pill.active-users-pill {
  inset-inline-end: 0.75rem !important;
}

.navbar.member-navbar
  .container > .nav-actions > #nav-call-timer:not(.d-none) {
  inset-inline-end: 0.75rem !important;
}