/*
  Font baseline
  - Prefer modern system UI fonts for speed, Unicode coverage, and CSP safety.
  - (Avoid @import Google Fonts here; some installs run with CSP that blocks it.)
*/

/* Prevent Alpine flash-of-unstyled-content on hard refresh */
[x-cloak] { display: none !important; }

html,
body {
  height: 100%;
}

/* User-tunable media and font sizing (defaults) */
:root{
  --nbv5-emot-size: 20px;
  --nbv5-sticker-size: 44px;
  --nbv5-inline-media-max-width: 145px;
  --nbv5-inline-media-max-height: 190px;
  --nbv5-pane-font-size: 17px;
  --nbv5-nick-font-size: 17px;
}


/* Theme dialog Easy/Advanced mode hard-hide. Default hidden until Alpine adds advanced mode. */
#nbv5ThemeModal .nbv5-theme-advanced-only {
  display: none !important;
}
.nbv5-theme-mode-advanced #nbv5ThemeModal .nbv5-theme-advanced-flex {
  display: flex !important;
}
.nbv5-theme-mode-advanced #nbv5ThemeModal .nbv5-theme-advanced-block {
  display: block !important;
}

/* ===============================
   Pane Light/Dark (V5)
   - Affects pane bodies: chat/status/nicklist
   - Does NOT affect pane headers (they follow tabs/header styling)
   - Default: light
   =============================== */
:root[data-chat-theme="light"] {
  --nbv5-pane-bg: #fbfbfc;
  --nbv5-pane-text: #0a0a0a;
  --nbv5-pane-border: #dfdfdf;
  --nbv5-pane-sep-text: rgba(20,25,30,.78);
  --nbv5-pane-item-hover: rgba(0,0,0,.06);
  --nbv5-pane-alt-row-bg: #f7f7f8;

  --nbv5-input-bg: #ffffff;
  --nbv5-input-border: rgba(0,0,0,.20);
  --nbv5-input-text: #000000;
  --nbv5-input-ph: rgba(0,0,0,.55);

  /* Semantic (pane content) */
  --nbv5-muted: rgba(10,10,10,.62);
  --nbv5-link: #1a7ab5;
  --nbv5-link-hover: #135e8a;
  --nbv5-timestamp: rgba(10,10,10,.55);
  --nbv5-nick-other: #337abf;
  --nbv5-nick-self: #000000;

}

:root[data-chat-theme="dark"] {
  --nbv5-pane-bg: #1C1F24;
  --nbv5-pane-text: #f3f4f6;
  --nbv5-pane-border: #2b2f36;
  --nbv5-pane-sep-text: rgba(230,237,243,.78);
  --nbv5-pane-item-hover: rgba(255,255,255,.10);
  --nbv5-pane-alt-row-bg: #22262c;

  --nbv5-input-bg: #15181d;
  --nbv5-input-border: rgba(255,255,255,.22);
  --nbv5-input-text: #ffffff;
  --nbv5-input-ph: rgba(255,255,255,.70);

  /* Semantic (pane content) */
  --nbv5-muted: rgba(243,244,246,.70);
  --nbv5-link: #7cc7ff;
  --nbv5-link-hover: #b0dfff;
  --nbv5-timestamp: rgba(243,244,246,.58);
  --nbv5-nick-other: #7cc7ff;
  --nbv5-nick-self: #f3f4f6;

}

:root[data-chat-tone="dark"] {
  /* Subtle contrast assist for dark panes.
     Always-on but lightweight so dark colors and dark gradients remain readable,
     without looking like a heavy glow. */
  --nbv5-msg-outline-shadow: 0 0 0.55px rgba(255,255,255,.42), 0 0 1.1px rgba(255,255,255,.18);
  --nbv5-msg-outline-stroke: 0.22px rgba(255,255,255,.22);

  /* Dark tone readability:
     Do NOT self-reference the same CSS variable (it becomes invalid/circular).
     Instead, compute "bright" variants and use them via targeted rules below. */
  --nbv5-pane-text-bright: color-mix(in srgb, var(--nbv5-pane-text) 86%, #ffffff);
  --nbv5-muted-bright: color-mix(in srgb, var(--nbv5-muted) 82%, #ffffff);
  --nbv5-timestamp-bright: color-mix(in srgb, var(--nbv5-timestamp) 82%, #ffffff);
  --nbv5-pane-sep-text-bright: color-mix(in srgb, var(--nbv5-pane-sep-text) 82%, #ffffff);
}

:root[data-chat-tone="light"] {
  --nbv5-msg-outline-shadow: none;
  --nbv5-msg-outline-stroke: 0px transparent;
}


/* Theme applies to pane bodies only (header keeps its own background) */
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-pane {
  background: var(--nbv5-pane-bg) !important;
  align-self: stretch;
}


:root[data-chat-theme] .nbv5-skin-v4 .nbv5-chat,
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-pane-body,
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-input,
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-composer,
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-nick,
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-person {
  border-color: var(--nbv5-pane-border) !important;
}

/* Pane theme: ensure core pane surfaces actually inherit theme variables */
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-chat,
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-pane-body {
  background: var(--nbv5-pane-bg) !important;
  color: var(--nbv5-pane-text) !important;
}

/* Dark tone: use the computed bright variants (non-circular) */
:root[data-chat-tone="dark"][data-chat-theme] .nbv5-skin-v4 .nbv5-chat,
:root[data-chat-tone="dark"][data-chat-theme] .nbv5-skin-v4 .nbv5-pane-body {
  color: var(--nbv5-pane-text-bright, var(--nbv5-pane-text)) !important;
}

/* Dark tone: ensure nicklist names inherit the brighter pane text (some rows can override color elsewhere). */
:root[data-chat-tone="dark"][data-chat-theme] .nbv5-skin-v4 .nbv5-pane-body .nbv5-person,
:root[data-chat-tone="dark"][data-chat-theme] .nbv5-skin-v4 .nbv5-pane-body .nbv5-person .nbv5-nick-name {
  color: var(--nbv5-pane-text-bright, var(--nbv5-pane-text)) !important;
}

:root[data-chat-theme] .nbv5-skin-v4 .nbv5-input {
  background: var(--nbv5-pane-bg) !important;
  align-self: stretch;
}


:root[data-chat-theme] .nbv5-skin-v4 .nbv5-input .form-control {
  background: var(--nbv5-input-bg) !important;
  border-color: var(--nbv5-input-border) !important;
  color: var(--nbv5-input-text) !important;
}

:root[data-chat-theme] .nbv5-skin-v4 .nbv5-input .form-control::placeholder {
  color: var(--nbv5-input-ph) !important;
  opacity: 1;
}

/* Bootstrap utility colors inside pane bodies */
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-pane-body .text-muted,
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-chat .text-muted {
  color: var(--nbv5-muted) !important;
}

:root[data-chat-tone="dark"][data-chat-theme] .nbv5-skin-v4 .nbv5-pane-body .text-muted,
:root[data-chat-tone="dark"][data-chat-theme] .nbv5-skin-v4 .nbv5-chat .text-muted {
  color: var(--nbv5-muted-bright, var(--nbv5-muted)) !important;
}

/* Links inside panes */
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-pane-body a,
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-chat a {
  color: var(--nbv5-link) !important;
  text-decoration-color: rgba(255,255,255,.35);
}

:root[data-chat-theme] .nbv5-skin-v4 .nbv5-pane-body a:hover,
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-chat a:hover {
  color: var(--nbv5-link-hover) !important;
}


/* Link affordance (applies to auto-linkified URLs as well) */
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-pane-body a.nbv5-link,
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-chat a.nbv5-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}

/* Pane headers: keep V4 styling, match tabs background */
.nbv5-skin-v4 
@keyframes nbv5CaretBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.nbv5-pane-header {
  background: var(--v5-paneheader-bg) !important;
}

body {
  margin: 0;
}

/* Modern, Unicode-friendly font stack (fixed, does not theme-shift) */
.nbv5 {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  font-kerning: normal;
  font-feature-settings: "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure V5 shell stretches to viewport height (Bootstrap containers are not full-height by default) */
.nbv5,
.nbv5 > .container-fluid,
.nbv5 > .container-fluid > .d-flex {
  height: 100%;
  min-height: 100%;
}

.nbv5 {
  height: 100%;
  width: 100%;
}

.nbv5-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0; /* allow children to scroll */
  background: var(--bs-body-bg);
}

.nbv5.nbv5-is-mobile .nbv5-right {
 flex: 0 0 260px;
  width: 260px;
  min-width: 260px;
  margin-left: 4px;
}

/* Mobile: drawers (left + people) overlay the chat */
@media (max-width: 767.98px) {
  .nbv5-skin-v4 .nbv5-topbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  /* Scrim sits below drawers, above chat */
  .nbv5.nbv5-is-mobile .nbv5-mobile-scrim {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: 0; /* matches .nbv5-topbar-inner height */
    bottom: 0;
    background: rgba(0,0,0,.38);
    z-index: 5990;
  }

  /* Left panel becomes an overlay drawer */
  .nbv5.nbv5-is-mobile .nbv5-leftpanel {
    position: fixed;
    top: 52px;
    bottom: 0;
    left: 0;
    z-index: 6000;
    transform: translateX(-105%);
    transition: transform .18s ease;
    box-shadow: 18px 0 48px rgba(0,0,0,.35);
  }

  .nbv5.nbv5-is-mobile .nbv5-leftpanel.nbv5-left-open {
    transform: translateX(0);
  }

  /* Right pane becomes an overlay drawer */
  .nbv5.nbv5-is-mobile .nbv5-right {
    position: fixed;
    top: 52px;
    bottom: 0;
    right: 0;
    z-index: 6000;
    margin-left: 0;
    transform: translateX(105%);
    transition: transform .18s ease;
    box-shadow: -18px 0 48px rgba(0,0,0,.35);
  }

  .nbv5.nbv5-is-mobile .nbv5-right.nbv5-right-open {
    transform: translateX(0);
  }
}

.nbv5-center {
  flex: 1 1 auto;
  min-width: 0;
	position: relative;
}

/* Legacy Whisper Windows (floating) */
.nbv5-whwin-layer {
	/* Match the floating media viewer behavior: true viewport overlay, not clipped by panes */
	position: fixed;
	inset: 0;
	pointer-events: none;
	/* Keep below the absolute max UI, but above all panes */
	z-index: 2147482400;
}

.nbv5-whwin {
	position: absolute;
	display: flex;
	flex-direction: column;
	pointer-events: auto;
	min-width: 260px;
	min-height: 240px;
	border: 1px solid var(--nbv5-pane-border) !important;
	/* Outer frame follows overall theme. Transcript + input areas follow pane theme. */
	background: var(--v5-main-bg) !important;
	border-radius: 10px;
	box-shadow: 0 14px 34px rgba(0,0,0,.25);
	overflow: hidden;
}

.nbv5-whwin.is-dragging {
	will-change: transform;
	transform: translateZ(0);
}

/* Prevent text selection and make the "move" state obvious during whisper window dragging */
body.nbv5-whwin-dragging {
	user-select: none;
	cursor: move;
}

/* Desktop: allow resize handle. Size persistence is handled in JS (Phase 5B). */
@media (min-width: 577px) {
	.nbv5-whwin { resize: both; }
}

.nbv5-whwin-head {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 6px 8px;
	border-bottom: 1px solid var(--nbv5-pane-border) !important;
	background: var(--v5-paneheader-bg, var(--v5-main-bg)) !important;
	/* Match the V5 shell/left-panel light vs dark text behavior.
	   Default is light text; light skins override in their theme file. */
	color: #ffffff !important;
	cursor: move;
}

.nbv5-whwin-head .nbv5-whwin-title,
.nbv5-whwin-head .nbv5-whwin-btn {
	color: inherit !important;
}

/* Legacy whisper windows: flash the entire box on inbound whispers until clicked.
   Use visible glow + overlay (not filter) so it flashes reliably across browsers. */
.nbv5-whwin.is-flash{
	/* Keep base shadow, and add a pulsing glow. */
	animation: nbv5WhWinFlashGlow 780ms ease-in-out infinite !important;
	outline: 2px solid transparent;
	outline-offset: -2px;
	position: absolute; /* ensure ::after positions correctly */
}

.nbv5-whwin.is-flash::after{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	border-radius:10px;
	background: rgba(255,138,0,.14);
	opacity:0;
	animation: nbv5WhWinFlashOverlay 780ms ease-in-out infinite !important;
}

@keyframes nbv5WhWinFlashGlow{
	0%, 100%{
		box-shadow: 0 14px 34px rgba(0,0,0,.25), 0 0 0 0 rgba(255,138,0,0);
		outline-color: rgba(255,138,0,0);
	}
	50%{
		box-shadow: 0 14px 34px rgba(0,0,0,.25), 0 0 0 3px rgba(255,138,0,.55), 0 0 18px rgba(255,138,0,.35);
		outline-color: rgba(255,138,0,.70);
	}
}

@keyframes nbv5WhWinFlashOverlay{
	0%, 100%{ opacity: 0; }
	50%{ opacity: 1; }
}
	50% { filter: brightness(1.10); }
}

.nbv5-whwin-title {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 240px;
}

.nbv5-whwin-actions {
	display: flex;
	margin-left: auto;
	gap: 6px;
}

.nbv5-whwin-btn {
	padding: 2px 8px;
	line-height: 1;
	border: 1px solid var(--nbv5-pane-border) !important;
	background: transparent !important;
}

.nbv5-whwin-body {
	flex: 1 1 auto;
	overflow: auto;
	padding: 0.5rem;
	position: relative;
	font-family: inherit;
	font-size: var(--nbv5-pane-font-size);
	line-height: 1.35;
	background: var(--nbv5-pane-bg) !important;
	color: var(--nbv5-pane-text) !important;
}

.nbv5-whwin-bottom-wrap {
	position: sticky;
	bottom: 10px;
	display: flex;
	justify-content: center;
	margin-top: 10px;
	pointer-events: none;
}

.nbv5-whwin-bottom {
	pointer-events: auto;
}

/* Mobile: legacy whisper windows snap and do not drag/overlap (JS minimizes others). */
@media (max-width: 576px) {
	.nbv5-whwin-layer { position: fixed; }
	.nbv5-whwin {
		left: 8px !important;
		right: 8px !important;
		width: auto !important;
		top: 86px !important;
		height: calc(100vh - 190px) !important;
	}
}

.nbv5-whwin-foot {
	display: flex;
	gap: 6px;
	padding: 8px;
	border-top: 1px solid var(--nbv5-pane-border) !important;
	/* Surrounding area follows overall/main theme (not pane) */
	background: var(--v5-main-bg) !important;
}

.nbv5-whwin-input {
	flex: 1 1 auto;
	/* Input should match pane input theme (dark text on light, light text on dark) */
	background: var(--nbv5-input-bg) !important;
	color: var(--nbv5-input-text) !important;
	border-color: var(--nbv5-input-border) !important;
}

.nbv5-whwin-input::placeholder {
	color: var(--nbv5-input-ph) !important;
}

.nbv5-whwin-send {
	flex: 0 0 auto;
}

.nbv5-composer-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.nbv5-composer-input-wrap-sm {
  min-width: 0;
}

.nbv5-composer-mirror {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  overflow: hidden;
  white-space: pre;
  text-overflow: clip;
  padding: .375rem .75rem;
  line-height: 1.5;
  border: 1px solid transparent;
  box-sizing: border-box;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  z-index: 4;
}

.nbv5-composer-mirror-sm {
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
}

.nbv5-composer-mirror-before,
.nbv5-composer-mirror-after {
  display: inline;
  white-space: pre;
}

.nbv5-composer-fake-caret {
  display: none;
  width: 0;
  height: 1.15em;
  margin: 0;
  border-left: 1px solid var(--nbv5-composer-caret-color, var(--nbv5-input-text));
  vertical-align: -.15em;
  pointer-events: none;
  z-index: 5;
  animation: nbv5CaretBlink 1s steps(1,end) infinite;
}

.nbv5-composer-input-wrap.is-mylook-gradient .nbv5-composer-input,
.nbv5-composer-input-wrap.is-mylook-gradient .nbv5-whwin-input {
  position: relative;
  z-index: 3;
  caret-color: var(--nbv5-input-text) !important;
}

.nbv5-composer-input-wrap.is-mylook-gradient .nbv5-composer-input::placeholder,
.nbv5-composer-input-wrap.is-mylook-gradient .nbv5-whwin-input::placeholder {
  color: var(--nbv5-input-ph) !important;
  -webkit-text-fill-color: var(--nbv5-input-ph) !important;
  opacity: 1;
}

.nbv5-composer-input-wrap.is-mylook-gradient .nbv5-composer-input::selection,
.nbv5-composer-input-wrap.is-mylook-gradient .nbv5-whwin-input::selection {
  background: rgba(125, 160, 255, .28);
}

.nbv5-composer-input-wrap.has-mylook-swatch .nbv5-composer-input,
.nbv5-composer-input-wrap.has-mylook-swatch .nbv5-whwin-input {
  padding-right: 2.4rem;
}

.nbv5-composer-grad-swatch {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 0 0 1px rgba(0,0,0,.18);
  pointer-events: none;
  z-index: 4;
  background-color: transparent;
  background-repeat: no-repeat;
}

.nbv5-pane-header {
  background: var(--bs-tertiary-bg);
}

.nbv5-pane-body {
  overflow: auto;
  min-height: 0;
}

.nbv5-chat {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.5rem;
  font-family: inherit;
  font-size: var(--nbv5-pane-font-size);
  line-height: 1.35;
}

/* Scroll-to-bottom affordance (Phase 2) */
.nbv5-scroll-bottom-wrap {
  position: sticky;
  bottom: 10px;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 50;
}

.nbv5-scroll-bottom-btn {
  pointer-events: auto;
  border: 1px solid var(--nbv5-pane-border) !important;
  background: var(--nbv5-pane-bg) !important;
  color: var(--nbv5-text) !important;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.9em;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

.nbv5-scroll-bottom-btn:hover {
  filter: brightness(0.98);
}


.nbv5-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  white-space: normal;
  word-break: normal;
}

.nbv5-line + .nbv5-line {
  margin-top: 4px; /* separation so messages don't touch pills */
}

.nbv5-input {
  background: var(--bs-body-bg);
}

/* NOTE: right pane visibility on mobile is controlled via showPeople + the 768px rule above. */

/* People list */
.nbv5-nicklist {
  margin: 0;
  padding: 0;
}

.nbv5-nick {
  padding: 0.25rem 0.35rem;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.nbv5-nick:last-child {
  border-bottom: 0;
}

.nbv5-nick-name {
  font-size: var(--nbv5-nick-font-size);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* ===============================
   V4 SKIN (cosmetic match)
   Fixed colors (do not depend on bs theme)
   =============================== */

.nbv5-skin-v4 {
  /* ===============================
     V5 THEME TOKENS (semantic)
     - The theme files set the accent colors and wallpaper tokens.
     - This stylesheet only *consumes* those tokens.
     - Legacy aliases exist so older rules still work while we migrate.
     =============================== */

  /* Accent palette (theme-defined) */
  /*
    Preferred V5 names: --v5-theme-accent-1/2/3 (defined by theme files).
    Back-compat: if a theme still only defines --v4-blue-1/2/3, we fall back.
  */
  --v5-accent-1: var(--v5-theme-accent-1);
  --v5-accent-2: var(--v5-theme-accent-2);
  --v5-accent-3: var(--v5-theme-accent-3);

  /* Top bar gradient (2 colors only) */
  --v5-topbar-grad-start: var(--v5-accent-1);
  --v5-topbar-grad-end: var(--v5-accent-2);
  --v5-topbar-bg: linear-gradient(var(--v5-topbar-grad-start), var(--v5-topbar-grad-end));

  /* Pane header background (solid, matches tabs/header styling) */
  --v5-paneheader-bg: var(--v5-accent-3);

  /* Main surface behind panes (used for wallpaper fallback) */
  --v5-main-bg: var(--v5-accent-2);

  /* Shell/header text color (themes may override for light skins) */
  --v5-shell-text: #fff;
}

.nbv5-skin-v4 .nbv5-page {
  height: 100vh;
  min-height: 0;
  display: flex;
  flex-direction: column;

  /* Theme background */
  position: relative;
  background: var(--v5-wallpaper-fallback, var(--v5-accent-3));
}

/* Optional theme wallpaper (SVG/JPG/PNG) */
.nbv5-skin-v4 .nbv5-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--v5-wallpaper-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: var(--v5-wallpaper-opacity, 1);
  filter: var(--v5-wallpaper-filter, none);
  pointer-events: none;
  z-index: 0;
}

/* Optional overlay tint over wallpaper */
.nbv5-skin-v4 .nbv5-page::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--v5-wallpaper-overlay, transparent);
  pointer-events: none;
  z-index: 0;
}

/* Keep all UI above the wallpaper layer */
.nbv5-skin-v4 .nbv5-page > * {
  position: relative;
  z-index: 1;
}


.nbv5-adwrap {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow-anchor: none;
}

.nbv5-adwrap .nbv5-adinner,
.nbv5-adwrap #nbv5AdsenseHost {
  width: 100%;
  min-height: 0;
  margin: 0 auto;
}

.nbv5-adwrap #nbv5AdsenseUnit {
  display: block;
  min-height: 0;
}

.nbv5-adwrap #nbv5AdsenseUnit[data-ad-status="unfilled"] {
  display: none !important;
}

.nbv5-adwrap.is-filled {
  padding: 18px 12px;
  border-top: 1px solid var(--nbv5-pane-border);
  background: var(--v5-wallpaper-fallback, var(--v5-accent-3));
}

/* V5:TEMP_DEV_BANNER (TEMPORARY: remove when V5 exits development/testing phase) */
.nbv5-devbanner{
  font-size: 12px;
  line-height: 1.25;
}

/* Top bar */
.nbv5-skin-v4 .nbv5-topbar {
  background: var(--v5-topbar-bg);
  background-attachment: scroll;
  background-position: 0 0;
  border-bottom: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  color: #fff;
}

.nbv5-skin-v4 .nbv5-topbar-inner {
  height: 52px;          /* was 40px */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 16px;       /* was 12px */
  gap: 14px;             /* slight breathing room */
}

.nbv5-skin-v4 .nbv5-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.nbv5-skin-v4 .nbv5-logo {
  font-weight: 800;
  letter-spacing: .5px;
  white-space: nowrap;
  font-family: "Luckiest Guy", "Anton", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 30px;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}

.nbv5-skin-v4 .nbv5-now {
  opacity: .95;
  white-space: nowrap;
}

.nbv5-skin-v4 .nbv5-room {
  font-weight: 700;
  font-size: 1.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52vw;
}


.nbv5-roomwrap{
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.nbv5-roomtype,
.nbv5-lp-roomtype {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0px;
}

.nbv5-roomtype-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.nbv5-lp-roomtype .nbv5-roomtype-icon {
  width: 14px;
  height: 14px;
}

.nbv5-skin-v4 .nbv5-room-modes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 3px 7px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.13) !important;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  white-space: nowrap;
}

.nbv5-skin-v4 .nbv5-room-modes-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  opacity: .70;
}

.nbv5-skin-v4 .nbv5-room-modes-value {
  font-family: Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

:root[data-theme="black"] .nbv5-skin-v4 .nbv5-room-modes {
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: rgba(255, 255, 255, 0.18);
}

.nbv5-skin-v4 .nbv5-topbar-right {
  font-weight: 700;
  opacity: .95;
  white-space: nowrap;
}

/* Phase 2C: whisper attention indicator in the header */
.nbv5-skin-v4 .nbv5-topbar-attn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(0,0,0,.12);
  color: #fff;
  border-radius: 6px;
  padding: 4px 8px;
  line-height: 1;
  cursor: pointer;
  margin-right: 8px;
}
.nbv5-skin-v4 .nbv5-topbar-attn:hover {
  background: rgba(0,0,0,.20);
}
.nbv5-skin-v4 .nbv5-topbar-attn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: 12px;
  line-height: 1;
}

/* Topbar drawer toggles */
.nbv5-skin-v4 .nbv5-topbar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(0,0,0,.12);
  color: #fff;
  border-radius: 6px;
  padding: 4px 8px;
  line-height: 1;
  cursor: pointer;
}

.nbv5-skin-v4 .nbv5-topbar-toggle:hover {
  background: rgba(0,0,0,.20);
}

.nbv5-skin-v4 .nbv5-topbar-toggle-left {
  position: relative;
}

.nbv5-skin-v4 .nbv5-topbar-toggle-left.has-attention {
  border-color: rgba(255,120,120,.92);
  box-shadow: 0 0 0 1px rgba(255,120,120,.22), 0 0 10px rgba(255,90,90,.18);
}

.nbv5-skin-v4 .nbv5-topbar-toggle-left.is-pulsing {
  animation: nbv5TopbarLeftAttentionPulse 1.15s ease-out 2;
}

.nbv5-skin-v4 .nbv5-roomlog-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(19,138,78,.22) !important;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.nbv5-skin-v4 .nbv5-roomlog-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 8px;
  background: #9CF2B8;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 0 8px rgba(156,242,184,.45);
}

.nbv5-skin-v4 .nbv5-roomlog-indicator-label {
  display: inline-block;
}

.nbv5-skin-v4 .nbv5-topbar-toggle-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d93025 !important;
  color: #fff;
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 1px 6px rgba(0,0,0,.25);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  z-index: 2;
}

@keyframes nbv5TopbarLeftAttentionPulse {
  0% { transform: scale(1); }
  25% { transform: scale(1.08); }
  55% { transform: scale(1); }
  100% { transform: scale(1); }
}

/* Mobile overlay scrim */
.nbv5.nbv5-is-mobile .nbv5-mobile-scrim {
  display: none;
}

/* Nav row */
.nbv5-skin-v4 .nbv5-nav {
  background: var(--v5-menu-bg, var(--v5-accent-2));
  border-bottom: 1px solid rgba(0,0,0,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  color: #fff;
}
.nbv5-brand .nbv5-topbar-logo { height:30px !important; }
.nbv5-skin-v4 .nbv5-topbar-logo {
  height: 18px;
  width: auto;
  display: block;
}

.nbv5-skin-v4 .nbv5-nav-inner {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
}

.nbv5-skin-v4 .nbv5-navlink {
  color: rgba(255,255,255,.95);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.nbv5-skin-v4 .nbv5-navlink:hover {
  color: #fff;
  text-decoration: underline;
}

.nbv5-skin-v4 .nbv5-navbtn {
  font: inherit;
}

.nbv5-skin-v4 .nbv5-navsep {
  flex: 1 1 auto;
}

.nbv5-skin-v4 .nbv5-navuser {
  opacity: .95;
}

/* Tabs removed */
/* Main frame */
.nbv5-skin-v4 .nbv5-main {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 10px 10px;
  background: var(--v5-main-bg);
}

.nbv5.nbv5-is-mobile .nbv5-leftpanel {
  --nbv5-leftpanel-w: 260px;
  width: var(--nbv5-leftpanel-w);
  flex: 0 0 var(--nbv5-leftpanel-w);
  min-height: 0;
  background: var(--v5-main-bg);
  
  /* border-right: 1px solid rgba(0,0,0,.15); */

  /* Left panel UI chrome should follow the selected skin (light/dark),
     not the chat pane text theme toggle. */
  color: var(--nbv5-pane-text);
}

html[data-v5thememode="light"] .nbv5-leftpanel{ color: rgba(43,38,32,.92) !important; }
html[data-v5thememode="dark"]  .nbv5-leftpanel{ color: rgba(255,255,255,.92) !important; }

html[data-v5thememode="light"] .nbv5-composer-rightpane-toggle{ color: rgba(43,38,32,.92) !important; }
html[data-v5thememode="dark"]  .nbv5-composer-rightpane-toggle{ color: rgba(255,255,255,.92) !important; }

html[data-v5thememode="light"] .nbv5-composer-rightpane-toggle{ color: rgba(43,38,32,.92) !important; }
html[data-v5thememode="dark"]  .nbv5-composer-rightpane-toggle{ color: rgba(255,255,255,.92) !important; }

/* Desktop: allow collapsing left/right panes via topbar buttons */
.nbv5.nbv5-is-mobile .nbv5-leftpanel.nbv5-left-closed {
  width: 56px !important;
  flex: 0 0 56px !important;
  min-width: 56px !important;
  overflow: visible !important;
  pointer-events: auto;
  background:
    var(--v5-topbar-bg) top / 100% 52px no-repeat,
    var(--v5-main-bg);
}

.nbv5-leftpanel-rail {
  display: none;
}

.nbv5-leftpanel.nbv5-left-closed .nbv5-leftpanel-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 8px 8px 10px;
}

.nbv5-leftpanel.nbv5-left-closed .nbv5-lp-top,
.nbv5-leftpanel.nbv5-left-closed .nbv5-lp-body,
.nbv5-leftpanel.nbv5-left-closed .nbv5-lp-footer {
  display: none !important;
}

.nbv5-leftpanel.nbv5-left-closed .nbv5-lp-railbtn {
  width: 40px;
  height: 40px;
}

.nbv5-lp-railbtn {
  position: relative;
}

/* Collapsed rail whisper states:
   - highlight means one or more whisper sessions are open
   - the existing numbered badge remains unread-only */
.nbv5-leftpanel.nbv5-left-closed .nbv5-lp-railbtn-whispers.has-open-whispers {
  --nbv5-whisper-open-accent: var(--nbv5-ctx-accent, #56c8ff);
  background: var(--nbv5-left-tool-hover-bg, rgba(255,255,255,.16));
  border-color: var(--nbv5-whisper-open-accent);
  box-shadow:
    inset 3px 0 0 var(--nbv5-whisper-open-accent),
    0 0 0 1px rgba(255,255,255,.10),
    0 0 12px rgba(86,200,255,.28);
}

.nbv5-leftpanel.nbv5-left-closed .nbv5-lp-railbtn-whispers.has-open-whispers:hover:not(:disabled),
.nbv5-leftpanel.nbv5-left-closed .nbv5-lp-railbtn-whispers.has-open-whispers:focus-visible,
.nbv5-leftpanel.nbv5-left-closed .nbv5-lp-railbtn-whispers.has-open-whispers[aria-pressed="true"] {
  background: var(--nbv5-left-tool-hover-bg, rgba(255,255,255,.24));
  border-color: var(--nbv5-whisper-open-accent);
  box-shadow:
    inset 4px 0 0 var(--nbv5-whisper-open-accent),
    0 0 0 1px rgba(255,255,255,.18),
    0 0 15px rgba(86,200,255,.36);
}

.nbv5-leftpanel.nbv5-left-closed .nbv5-lp-railbtn-whispers.has-open-whispers .ico-whispers {
  color: var(--nbv5-whisper-open-accent);
}

.nbv5-lp-railwhispers {
  position: relative;
}

.nbv5-lp-rail-pop {
  position: absolute;
  left: calc(100% + 10px);
  top: 0;
  z-index: 45;
  width: 252px;
  min-width: 252px;
  max-width: calc(100vw - 84px);
  border: 1px solid var(--nbv5-pane-border);
  background: var(--nbv5-pane-bg);
  color: var(--nbv5-pane-text);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  padding: 8px;
}

.nbv5-lp-whispers-pop {
  --nbv5-whisper-row-accent: var(--nbv5-ctx-accent, #0d6efd);
}

.nbv5-lp-rail-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px 8px;
  font-size: 12px;
  font-weight: 700;
}

.nbv5-lp-rail-pop-headbadge {
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #6c63ff;
  color: #fff;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
}

.nbv5-lp-rail-pop-empty {
  padding: 10px 8px;
  border-radius: 10px;
  background: rgba(127,127,127,.08);
  font-size: 12px;
  opacity: .88;
}

.nbv5-lp-rail-whlist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nbv5-lp-rail-whrow {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  min-height: 48px;
  border: 1px solid color-mix(in srgb, var(--nbv5-pane-border) 76%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--nbv5-pane-bg) 95%, var(--nbv5-pane-text) 5%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nbv5-pane-text) 5%, transparent);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.nbv5-lp-rail-whrow::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -1px;
  top: 5px;
  bottom: 5px;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: transparent;
}

.nbv5-lp-rail-whrow:hover,
.nbv5-lp-rail-whrow:focus-within {
  background: color-mix(in srgb, var(--nbv5-pane-bg) 90%, var(--nbv5-pane-text) 10%);
  border-color: color-mix(in srgb, var(--nbv5-pane-border) 66%, var(--nbv5-pane-text) 34%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nbv5-pane-text) 8%, transparent), 0 4px 12px rgba(0,0,0,.09);
}

.nbv5-lp-rail-whitem {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 39px 8px 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
}

.nbv5-lp-rail-whitem:hover,
.nbv5-lp-rail-whitem:focus-visible {
  background: transparent;
  outline: 0;
}

.nbv5-lp-rail-whrow.is-active {
  background: color-mix(in srgb, var(--nbv5-pane-bg) 84%, var(--nbv5-whisper-row-accent) 16%);
  border-color: color-mix(in srgb, var(--nbv5-whisper-row-accent) 52%, var(--nbv5-pane-border));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nbv5-pane-text) 7%, transparent), 0 4px 14px color-mix(in srgb, var(--nbv5-whisper-row-accent) 14%, transparent);
}

.nbv5-lp-rail-whrow.is-active::before {
  background: var(--nbv5-whisper-row-accent);
}

.nbv5-lp-rail-whx {
  position: absolute;
  z-index: 2;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font-size: 17px;
  line-height: 1;
  opacity: .48;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}

.nbv5-lp-rail-whx:hover,
.nbv5-lp-rail-whx:focus-visible {
  background: color-mix(in srgb, #dc3545 14%, transparent);
  color: #dc3545;
  opacity: 1;
  outline: 0;
}

.nbv5-lp-rail-whmeta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nbv5-lp-rail-whname {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}

.nbv5-lp-rail-whrow.is-active .nbv5-lp-rail-whname {
  font-weight: 700;
}

.nbv5-lp-rail-whstatus {
  font-size: 11px;
  font-weight: 600;
  color: var(--nbv5-whisper-row-accent);
  opacity: .82;
}

.nbv5-lp-rail-whbadge {
  position: static;
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  font-size: 10px;
}

.nbv5-lp-railspacer {
  flex: 1 1 auto;
}

.nbv5-lp-rail-roomtype {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.nbv5-lp-rail-roomtype .nbv5-roomtype-icon {
  width: 18px;
  height: 18px;
}

.nbv5-rail-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  line-height: 17px;
  padding: 0 5px;
  font-size: 10px;
}

.nbv5-leftpanel.nbv5-left-closed .nbv5-lp-btn::after {
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
}

.nbv5-right.nbv5-right-closed {
  width: 0 !important;
  flex: 0 0 0 !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  overflow: hidden !important;
  pointer-events: none;
  border-left: 0 !important;
}

/* Mobile / small window: panes become overlay drawers */
@media (max-width: 767.98px) {
  /* When a mobile drawer is open, prevent the page behind it from scrolling. */
  html.nbv5-noscroll,
  body.nbv5-noscroll {
    overflow: visible !important;
    height: 100% !important;
  }

  /* Use dynamic viewport height on mobile to avoid footer cut-off when browser chrome resizes. */
  .nbv5-skin-v4 .nbv5-page {
    height: 100dvh;
  }

  .nbv5-shell > .nbv5-leftpanel {
    height: auto;
  }

  .nbv5-skin-v4 .nbv5-topbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Mobile: conserve header space by hiding the room modes pill next to "Now chatting in" */
  .nbv5-skin-v4 .nbv5-room-modes {
    display: none !important;
  }

  /* Mobile: slightly reduce the room name size in the header */
  .nbv5-skin-v4 .nbv5-room {
    font-size: 1.05rem !important;
    max-width: 46vw;
  }

  .nbv5-skin-v4 .nbv5-roomlog-indicator {
    margin-left: 6px;
    padding: 3px 7px;
    font-size: 11px;
  }

  .nbv5-skin-v4 .nbv5-roomlog-indicator-label {
    max-width: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nbv5.nbv5-is-mobile .nbv5-mobile-scrim {
    position: fixed;
    inset: 0;
    top: var(--nbv5-shell-top-offset, 52px); /* below topbar + optional dev banner */
    background: rgba(0,0,0,.38);
    z-index: 5990;
    display: block;
  }

  .nbv5.nbv5-is-mobile .nbv5-leftpanel {
    position: fixed;
    top: var(--nbv5-shell-top-offset, 52px);
    bottom: auto;
    left: 0;
    z-index: 6000;
    height: calc(100dvh - var(--nbv5-shell-top-offset, 52px));
    width: var(--nbv5-leftpanel-w);
    max-width: min(var(--nbv5-leftpanel-w), 92vw);
    transform: translateX(-105%);
    transition: transform .18s ease;
    box-shadow: 12px 0 34px rgba(0,0,0,.35);
  }

  .nbv5.nbv5-is-mobile .nbv5-leftpanel.nbv5-left-open {
    transform: translateX(0);
  }

  .nbv5.nbv5-is-mobile .nbv5-leftpanel.nbv5-left-closed {
    width: var(--nbv5-leftpanel-w) !important;
    flex: 0 0 var(--nbv5-leftpanel-w) !important;
    min-width: 0 !important;
    pointer-events: none;
  }

  .nbv5.nbv5-is-mobile .nbv5-right {
    position: fixed;
    top: var(--nbv5-shell-top-offset, 52px);
    bottom: auto;
    right: 0;
    z-index: 6000;
    margin-left: 0;
    height: calc(100dvh - var(--nbv5-shell-top-offset, 52px));
    width: 260px;
    max-width: 92vw;
    transform: translateX(105%);
    transition: transform .18s ease;
    box-shadow: -12px 0 34px rgba(0,0,0,.35);
  }

  .nbv5.nbv5-is-mobile .nbv5-right.nbv5-right-open {
    transform: translateX(0);
    display: flex;
  }

  .nbv5.nbv5-is-mobile .nbv5-right.nbv5-right-closed {
    transform: translateX(105%);
    display: flex;
  }

  /* Mobile: remove the left panel header block entirely to maximize usable space. */
  .nbv5-leftpanel .nbv5-lp-top {
    display: none !important;
  }

  /* Mobile: ensure shell/leftpane height uses dynamic viewport (prevents footer cut-off). */
  .nbv5-shell {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .nbv5-shell > .nbv5-leftpanel {
    height: calc(100dvh - var(--nbv5-shell-top-offset, 52px)) !important;
  }

  /* Mobile safe-area: ensure the left panel footer is never cut off by system UI. */
  .nbv5-leftpanel .nbv5-lp-footer {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) 12px;
  }

  /* Mobile touch targets: make common controls easier to tap without changing desktop sizing. */
  .nbv5-lp-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .nbv5-lp-roombtn {
    padding: 12px 12px;
  }

  .nbv5-lp-roomlabel {
    font-size: 14px;
  }

  .nbv5-whlist-item {
    padding: 10px 10px;
  }

  .nbv5-whlist-peer {
    font-size: 13.5px;
  }

  .nbv5-whlist-x {
    width: 40px;
    min-width: 40px;
    min-height: 44px;
  }

  .nbv5-skin-v4 .nbv5-person {
    padding: 10px 10px;
    font-size: 14px;
  }

  /* Prevent iOS text-input zooming and improve composer tap comfort. */
  .nbv5-center .nbv5-composer-input {
    height: 44px;
    font-size: 16px;
  }

  .nbv5-sendbtn {
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 44px;
    min-width: 44px;
    padding-left: 0;
    padding-right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nbv5-actionbtn,
  .nbv5-emotbtn,
  .nbv5-awaymsgbtn,
  .nbv5-giphybtn,
  .nbv5-stickerbtn,
  .nbv5-mediabtn {
    height: 44px;
    padding: 0 12px;
    border-radius: 12px;
  }

  .nbv5-chat {
    padding: 0.75rem;
    line-height: 1.4;
  }

  .nbv5-line {
    gap: 10px;
  }

  .nbv5-line + .nbv5-line {
    margin-top: 6px;
  }
}

html[data-v5thememode="dark"] .nbv5.nbv5-is-mobile .nbv5-leftpanel {
  border-right: 0px;
}

.nbv5-lp-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 52px;
  height: auto;
  padding: 8px 12px;
  background: transparent !important;
  background-attachment: scroll;
  background-position: 0 0;
  box-shadow: none;
}

.nbv5-lp-brandrow{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:100%;
  text-align:left;
}

.nbv5-lp-brandicon{
  width:auto;
  height:36px;
  max-width:60px;
  flex:0 0 auto;
  object-fit:contain;
}

.nbv5-lp-brandlogo{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:96px;
  flex:0 0 auto;
  object-fit:contain;
}

.nbv5-lp-brandtext{
  font-weight: 800;
  letter-spacing: .5px;
  white-space: nowrap;
  font-family: "Luckiest Guy", "Anton", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 30px;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  line-height:1;
  user-select:none;
}

/* Left-panel self identity row is intentionally hidden (nickname/account/icon). */
.nbv5-lp-selfrow{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 10px 12px;
  margin: 8px 12px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 14px;
  background: rgba(0,0,0,.03);
}


html[data-v5thememode="dark"] .nbv5-lp-selfrow{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
}


.nbv5-lp-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  /* Center the status glyph reliably across themes */
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.15);
  flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.12);
}

html[data-v5thememode="dark"] .nbv5-lp-avatar {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}


.nbv5-lp-avatar{
  position: relative;
  overflow: hidden;
  /* Center the self status icon reliably (no perceived offset due to container alignment) */
  display: flex;
  align-items: center;
  justify-content: center;
}

.nbv5-lp-avatar::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  /* Use theme-aware foreground color (not a baked-in white icon) */
  background-color: currentColor;
  opacity: .92;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.761 0 5-2.239 5-5S14.761 2 12 2 7 4.239 7 7s2.239 5 5 5zm0 2c-4.418 0-8 2.239-8 5v3h16v-3c0-2.761-3.582-5-8-5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.761 0 5-2.239 5-5S14.761 2 12 2 7 4.239 7 7s2.239 5 5 5zm0 2c-4.418 0-8 2.239-8 5v3h16v-3c0-2.761-3.582-5-8-5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.nbv5-lp-meico {
  /* Keep your role/status icons (host/superowner/owner/etc) and keep them crisp. */
  display: block;
  width: 12px;
  height: 12px;
  object-fit: contain;
  /* Helps some Chromium builds keep small PNGs crisp when scaled */
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
}

/* Hide fallback glyph when we have a real status icon */
.nbv5-lp-avatar.has-meico::before {
  display: none;
}

/* Subtle contrast assist so the colored bitmap reads on all themes/wallpapers */
html[data-v5thememode="light"] .nbv5-lp-meico{
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.55));
}
html[data-v5thememode="dark"] .nbv5-lp-meico{
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.35));
}

/* Avatar tile foreground/background tuned for theme mode (looks good on all themes) */
html[data-v5thememode="light"] .nbv5-lp-avatar{
  background: rgba(255,255,255,.55);
  border-color: rgba(0,0,0,.14);
  color: rgba(31,35,40,.82);
}
html[data-v5thememode="dark"] .nbv5-lp-avatar{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
}

.nbv5-lp-avatar.is-member {
  box-shadow: inset 0 0 0 2px rgba(44, 196, 96, .45);
}

.nbv5-lp-avatar.is-guest {
  box-shadow: inset 0 0 0 2px rgba(250, 155, 23, .45);
}

.nbv5-lp-meta {
  min-width: 0;
}

.nbv5-lp-line {
  display: flex;
  gap: 6px;
  line-height: 1.2;
  font-size: 13px;
}

.nbv5-lp-k {
  opacity: .75;
  flex: 0 0 auto;
}

.nbv5-lp-v {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nbv5-lp-nav {
  padding: 6px 12px 10px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
}

.nbv5-lp-btn {
  position: relative;
  width: 40px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.06);
  text-align: center;
  user-select: none;
}

html[data-v5thememode="dark"] .nbv5-lp-btn {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}


/* Left panel: single-room button (client is single-room) */
.nbv5-lp-roomwrap{
  padding: 0 12px 10px;
}
.nbv5-lp-roombtn{
  width: 100%;
  display: flex;
  align-items: center;
  /* LEFT align icon + room label; unread badge pushes to the far right */
  justify-content: flex-start;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.06);
  user-select: none;
}
html[data-v5thememode="dark"] .nbv5-lp-roombtn{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.nbv5-lp-roombtn:hover{
  background: rgba(0,0,0,.10);
}
html[data-v5thememode="dark"] .nbv5-lp-roombtn:hover{
  background: rgba(255,255,255,.10);
}
.nbv5-lp-roomlabel{
  color: inherit;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .2px;
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nbv5-room-unread{
  flex: 0 0 auto;
}

/* Left panel: Whispers (empty state) */
.nbv5-lp-section{
  padding: 0 12px 12px;
}

.nbv5-lp-section-h{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .70;
  margin: 10px 2px 8px;
}

/* Unread badges (fixed colors, consistent across light/dark) */
.nbv5-unread-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  color: #FFFFFF !important;
  background: #7C5AC9 !important; /* muted purple */
}

.nbv5-unread-badge-total{
  margin-left: 8px;
}

.nbv5-unread-badge-item{
  margin-right: 6px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 10px;
  padding: 0 5px;
}

.nbv5-lp-emptycard{
  border: 1px dashed rgba(0,0,0,.18);
  border-radius: 14px;
  padding: 16px 14px;
  text-align: center;
  background: rgba(0,0,0,.03);
}

html[data-v5thememode="dark"] .nbv5-lp-emptycard{
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
}

.nbv5-lp-emptyicon{
  width: 42px;
  height: 42px;
  margin: 0 auto 10px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.70);
}

html[data-v5thememode="dark"] .nbv5-lp-emptyicon{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.80);
}

.nbv5-lp-emptyicon svg{
  display: block;
}

.nbv5-lp-emptyicon svg path{
  fill: currentColor;
}

.nbv5-lp-emptytitle{
  font-size: 15px;
  font-weight: 800;
  margin: 0;
}

.nbv5-lp-emptysub{
  margin-top: 4px;
  font-size: 12px;
  opacity: .75;
}


.nbv5-lp-btn:hover:not(:disabled) {
  background: rgba(0,0,0,.10);
}

html[data-v5thememode="dark"] .nbv5-lp-btn:hover:not(:disabled) {
  background: rgba(255,255,255,.10);
}

.nbv5-lp-btn[aria-pressed="true"] {
  background: rgba(0,0,0,.14);
}

html[data-v5thememode="dark"] .nbv5-lp-btn[aria-pressed="true"] {
  background: rgba(255,255,255,.14);
}

.nbv5-lp-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Left panel button tooltip (hover label) */
.nbv5-lp-btn::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  background: rgba(0,0,0,.85);
  color: #fff;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 50;
}

.nbv5-lp-btn:hover::after {
  opacity: 1;
}


.nbv5-lp-ico {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.nbv5-lp-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Icon masks (inline SVG) */
.nbv5-lp-ico.ico-activity {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2.5 2.5 0 0 0 2.45-2H9.55A2.5 2.5 0 0 0 12 22Zm7-6V11a7 7 0 1 0-14 0v5l-2 2v1h18v-1l-2-2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2.5 2.5 0 0 0 2.45-2H9.55A2.5 2.5 0 0 0 12 22Zm7-6V11a7 7 0 1 0-14 0v5l-2 2v1h18v-1l-2-2Z'/%3E%3C/svg%3E");
}

.nbv5-lp-ico.ico-control {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21v-7h2v7H4Zm14 0v-9h2v9h-2ZM11 21V3h2v18h-2ZM4 13V3h2v10H4Zm14-11h2v8h-2V2ZM11 3h2v6h-2V3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21v-7h2v7H4Zm14 0v-9h2v9h-2ZM11 21V3h2v18h-2ZM4 13V3h2v10H4Zm14-11h2v8h-2V2ZM11 3h2v6h-2V3Z'/%3E%3C/svg%3E");
}

.nbv5-lp-ico.ico-help {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 17a1.25 1.25 0 1 1 0-2.5A1.25 1.25 0 0 1 12 19Zm1.4-6.7-.6.4V15h-2v-3.2l1.6-1.1a2 2 0 1 0-3.1-1.7H7.3a4 4 0 1 1 6.1 3.3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 17a1.25 1.25 0 1 1 0-2.5A1.25 1.25 0 0 1 12 19Zm1.4-6.7-.6.4V15h-2v-3.2l1.6-1.1a2 2 0 1 0-3.1-1.7H7.3a4 4 0 1 1 6.1 3.3Z'/%3E%3C/svg%3E");
}

.nbv5-lp-ico.ico-theme {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0 0 20h3a3 3 0 0 0 0-6h-1a1 1 0 0 1 0-2h1a3 3 0 0 0 0-6h-3Zm-4 6a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm-2 5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6 1a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0 0 20h3a3 3 0 0 0 0-6h-1a1 1 0 0 1 0-2h1a3 3 0 0 0 0-6h-3Zm-4 6a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm-2 5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6 1a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z'/%3E%3C/svg%3E");
}

.nbv5-lp-ico.ico-radio {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3h2v12.25A3.75 3.75 0 1 1 17 12V7.25l-8 1.6v8.4A3.75 3.75 0 1 1 7 14V5l10-2Zm-1.25 11.5A1.75 1.75 0 1 0 17.5 16.25a1.75 1.75 0 0 0-1.75-1.75ZM4.75 16.5A1.75 1.75 0 1 0 6.5 18.25 1.75 1.75 0 0 0 4.75 16.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3h2v12.25A3.75 3.75 0 1 1 17 12V7.25l-8 1.6v8.4A3.75 3.75 0 1 1 7 14V5l10-2Zm-1.25 11.5A1.75 1.75 0 1 0 17.5 16.25a1.75 1.75 0 0 0-1.75-1.75ZM4.75 16.5A1.75 1.75 0 1 0 6.5 18.25 1.75 1.75 0 0 0 4.75 16.5Z'/%3E%3C/svg%3E");
}

.nbv5-lp-ico.ico-news {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h11a2 2 0 0 1 2 2v9a3 3 0 0 0 1 2.236A3 3 0 0 1 16 20H7a4 4 0 0 1-4-4V6a2 2 0 0 1 2-2Zm2 4v2h7V8H7Zm0 4v2h7v-2H7Zm9 4a1 1 0 0 0 1-1V6h-1v9a3 3 0 0 0 .268 1H16Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h11a2 2 0 0 1 2 2v9a3 3 0 0 0 1 2.236A3 3 0 0 1 16 20H7a4 4 0 0 1-4-4V6a2 2 0 0 1 2-2Zm2 4v2h7V8H7Zm0 4v2h7v-2H7Zm9 4a1 1 0 0 0 1-1V6h-1v9a3 3 0 0 0 .268 1H16Z'/%3E%3C/svg%3E");
}


.nbv5-lp-ico.ico-room {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.25 12 3l9 7.25V21h-6v-6H9v6H3v-10.75Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.25 12 3l9 7.25V21h-6v-6H9v6H3v-10.75Z'/%3E%3C/svg%3E");
}

.nbv5-lp-ico.ico-whispers {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v7a2.5 2.5 0 0 1-2.5 2.5H10l-4.5 4v-4H6.5A2.5 2.5 0 0 1 4 12.5v-7Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v7a2.5 2.5 0 0 1-2.5 2.5H10l-4.5 4v-4H6.5A2.5 2.5 0 0 1 4 12.5v-7Z'/%3E%3C/svg%3E");
}

.nbv5-lp-ico.ico-expand {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}





.nbv5-skin-v4 .nbv5-pane {
  background: var(--v4-pane-bg);
  border: 2px solid var(--v4-chat-border);
  border-radius: 6px;
  overflow: hidden;
}

.nbv5-skin-v4 .nbv5-pane-header {
  background: var(--v5-paneheader-bg);
  color: #fff;
}

.nbv5-skin-v4 .nbv5-pane-header .text-muted {
  color: rgba(255,255,255,.75) !important;
}

.nbv5-skin-v4 .nbv5-chat {
  background: var(--v4-chat-bg);
  color: var(--v4-text);
  padding: 10px 12px;
}

.nbv5-skin-v4 .nbv5-input {
  background: var(--v4-chat-bg);
}

.nbv5-skin-v4 .nbv5-input .form-control {
  background: #fff;
}

.nbv5-skin-v4 .nbv5.nbv5-is-mobile .nbv5-right {
  border-left: 0 !important;
}

/* Right pane: square top corners (no rounding at the top) */
.nbv5-skin-v4 .nbv5-pane.nbv5.nbv5-is-mobile .nbv5-right {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}


.nbv5-skin-v4 .nbv5-pane-body {
  background: var(--v4-pane-bg);
}

/* People rows */
.nbv5-skin-v4 .nbv5-person {
  padding: 5px 8px;
  border-bottom: 0;
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.25;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Nicklist text polish (2026)
   - keep fixed colors across pane themes
   - role label must sit directly after the nick (no right-alignment gap)
*/
.nbv5-person .nbv5-nick-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nbv5-person .nbv5-nick-name {
  letter-spacing: 0.01em;
  /* Override legacy global .nbv5-nick-name { display:block; } so role stays on the same line */
  display: inline;
}

.nbv5-person .nbv5-nick-role {
  font-size: calc(1em - 1px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  user-select: none;
  white-space: nowrap;
  /* Tight, attached spacing: err0rstotle (superowner) */
  margin-left: 3px;
  /* Pane-theme aware so it stays readable on dark pane */
  opacity: 1;
  color: var(--nbv5-muted) !important;
  display: inline;
}

/* Right pane header layout: keep the away/return button pinned to the pane edge
   and force long self nicks to ellipsis instead of pushing the button out. */
.nbv5-right-headrow{
  gap: .5rem;
}

.nbv5-right-headmain{
  flex: 1 1 auto;
  min-width: 0;
}

/* Self nick display under "users chatting" should also show role suffix inline */
.nbv5-right-selfnick{
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
   font-size: 1.3em;
  font-weight: 600;
}

.nbv5-right-selflabel{
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* Self nick under "users chatting" should behave like a nick row for context menu */
.nbv5-right-selfctx{
  min-width: 0;
  border-radius: 6px;
  padding: 2px 4px;
  cursor: context-menu;
}

.nbv5-right-awaybtn{
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: -10px;
}
.nbv5-right-selfctx:hover{
  background: rgba(51, 122, 191, 0.10) !important;
}
.nbv5-right-selfctx.is-ctx{
  background: rgba(51, 122, 191, 0.18) !important;
  box-shadow: inset 3px 0 0 #337ABF;
}

.nbv5-right-selfnick .nbv5-nick-role-self{
  font-size: calc(1em - 1px);
  line-height: 1;
  font-weight: 500;
  margin-left: 3px;
  opacity: .92;
  color: inherit !important;
  display: inline;
}

.nbv5-person-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-block;
  transform: translateY(0.5px);
  transition: filter 140ms ease, transform 140ms ease;
}


/* Icon fade-swap for mode changes (voice/op/etc) */
@keyframes nbv5IconSwap {
  0% { opacity: 1; transform: translateY(0.5px) scale(1); }
  40% { opacity: 0.25; transform: translateY(0.5px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0.5px) scale(1); }
}

.nbv5-person.is-icon-swap .nbv5-person-ico {
  animation: nbv5IconSwap 180ms ease;
}

.nbv5-skin-v4 .nbv5-person:hover {
  background: rgba(255,255,255,.45);
}

/* Nicklist modern hover + context-active (fixed colors for consistent look) */
.nbv5-person{
  border-radius: 6px;
}
.nbv5-pane-body .nbv5-person:hover{
  background: rgba(51, 122, 191, 0.12) !important;
}
.nbv5-pane-body .nbv5-person:hover .nbv5-person-ico{
  transform: translateY(0.5px) scale(1.03);
  filter: brightness(1.06);
}
.nbv5-pane-body .nbv5-person.is-ctx{
  background: rgba(51, 122, 191, 0.22) !important;
  box-shadow: inset 3px 0 0 #337ABF;
}

/* Nicklist selected row (from chat nick click) */
.nbv5-pane-body .nbv5-person.is-selected{
  background: rgba(51, 122, 191, 0.16) !important;
  box-shadow: inset 3px 0 0 #337ABF;
}

/* Ignored users (display hint only) */
.nbv5-pane-body .nbv5-person.is-ignored{
  position: relative;
}

.nbv5-pane-body .nbv5-person.is-ignored .nbv5-person-ico,
.nbv5-pane-body .nbv5-person.is-ignored .nbv5-nick-text{
  opacity: 0.55;
}

/* Ignored badge overlay (keeps role icon visible) */
.nbv5-pane-body .nbv5-person.is-ignored::after{
  content: "";
  position: absolute;
  left: 18px;
  top: 13px;
  width: 10px;
  height: 10px;
  background: url('images/listicons/ignore.png') no-repeat center center;
  background-size: contain;
  pointer-events: none;
}

/* Tagged badge overlay (keeps role icon visible) */
.nbv5-pane-body .nbv5-person.is-tagged{
  position: relative;
}
.nbv5-pane-body .nbv5-person.is-tagged::before{
  content: "";
  position: absolute;
  left: 18px;
  top: 13px;
  width: 10px;
  height: 10px;
  background: url('images/listicons/tagged.png') no-repeat center center;
  background-size: contain;
  pointer-events: none;
}

/* Self nick row (header) tag overlay */
.nbv5-right-selfctx.is-tagged{
  position: relative;
}
.nbv5-right-selfctx.is-tagged::after{
  content: "";
  position: absolute;
  left: 14px;
  top: 13px;
  width: 10px;
  height: 10px;
  background: url('images/listicons/tagged.png') no-repeat center center;
  background-size: contain;
  pointer-events: none;
}

.nbv5-skin-v4 .nbv5-nick-prefix {
  opacity: .85;
}

.nbv5-skin-v4 .nbv5-iconbtn {
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(0,0,0,.12);
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 1;
  cursor: pointer;
}

.nbv5-skin-v4 .nbv5-iconbtn:hover {
  background: rgba(0,0,0,.20);
}

/* Make Bootstrap buttons feel closer to V4 */
.nbv5-skin-v4 .btn {
  border-radius: 4px;
}

.nbv5-skin-v4 .btn-outline-secondary {
  --bs-btn-color: rgba(255,255,255,.92);
  --bs-btn-border-color: rgba(127,127,127,.55);
  --bs-btn-hover-bg: rgba(0,0,0,.16);
  --bs-btn-hover-border-color: rgba(255,255,255,.55);
  --bs-btn-hover-color: #fff;
}

/* Tighten spacing a bit */
.nbv5-skin-v4 .nbv5-pane-header {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Composer bar (below panes) */
.nbv5-skin-v4 .nbv5-composer {
  /* Uses the theme main surface color (matches the V4-style blue/black frame). */
  background: var(--v5-main-bg);
  padding: 0 10px 10px;
}

.nbv5-composer-spacer{
  width: var(--nbv5-leftpanel-w, 260px);
  flex: 0 0 var(--nbv5-leftpanel-w, 260px);
}
.nbv5-composer-inner {
  /* Transparent frame (let the blue show through like v4) */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.nbv5-skin-v4 .nbv5-composer-spacer {
  flex: 0 0 260px;
  width: 260px;
  min-width: 260px;
}

@media (max-width: 767.98px) {
  /* When the People pane can be hidden, let the composer use full width */
  .nbv5-skin-v4 .nbv5-composer-spacer {
    display: none;
  }
}

.nbv5-skin-v4 .nbv5-composer-input {
  background: #fff;
}

.nbv5-skin-v4 .nbv5-sendbtn {
  height: 38px;
  min-height: 38px;
  width: 38px;
  min-width: 38px;
  padding-left: 0;
  padding-right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nbv5-skin-v4 .nbv5-actionbtn {
  height: 38px;
  min-height: 38px;
}

/* Desktop V4 people pane polish
   - restore a visible gutter between chat and people pane
   - keep the top edge square while preserving the bottom rounding
*/
@media (min-width: 768px) {
  .nbv5-skin-v4 .nbv5-right {
    margin-left: 10px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
}

@media (max-width: 767.98px) {
  .nbv5-skin-v4 .nbv5-right {
    margin-left: 0 !important;
  }
}
/* ===============================
   Bootstrap modal layering
   Ensure V5 dialogs stay above the dimmed layer and remain clickable.
   =============================== */

/* Backdrop should be below the modal */
.modal-backdrop {
  z-index: 5000 !important;
}

/* Some V5 dialogs use Alpine x-show with an inline style="display:none".
   Force visibility based on .show like Bootstrap does. */
.modal-backdrop.show {
  display: block !important;
}

.modal-backdrop:not(.show) {
  display: none !important;
}

/* Modal must be above backdrop and any fixed headers/panes */
.modal {
  z-index: 5010 !important;
}

/* Extra safety: make sure the dialog accepts pointer events */
.modal-dialog,
.modal-content {
  pointer-events: auto;
}

/* ===============================
   V5 THEMES MODAL (overlay, top, compact)
   - Must NOT push layout
   - Must sit above all layers
   =============================== */

/* Treat just the Themes modal as a fixed overlay layer */
#nbv5ThemeModal.modal {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none; /* clicks only on the dialog */
}

#nbv5ThemeModal.modal .modal-dialog {
  pointer-events: auto;
}

/* Pin the themes dialog to the top of the viewport */
#nbv5ThemeModal.modal .nbv5-theme-dialog {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
  left: 50% !important;
  transform: translate(calc(-50% + var(--nbv5-theme-drag-x, 0px)), var(--nbv5-theme-drag-y, 0px)) !important;
  margin: 0 !important;
  width: min(520px, calc(100vw - 20px)) !important;
  max-height: calc(100vh - (env(safe-area-inset-top, 0px) + 20px)) !important;
}

/* Compact, modern chrome */
#nbv5ThemeModal.modal .nbv5-modal {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  border-radius: 16px;
  overflow: hidden;
  background: var(--v5-menu-bg, #1E4864) !important;
  color: #ffffff;
  border: 2px solid var(--v5-paneheader-bg, #285E82) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}

/* Theme modal header should match the active theme chrome (like the emots picker) */
#nbv5ThemeModal .modal-header {
  background: var(--v5-paneheader-bg, #285E82) !important;
  border-bottom: 1px solid rgba(0,0,0,.12);
  cursor: move;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

#nbv5ThemeModal .modal-header.nbv5-theme-dragging {
  cursor: grabbing;
}

#nbv5ThemeModal .modal-title {
  color: inherit;
}

/* Body inherits theme surface color */
#nbv5ThemeModal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: transparent !important;
  color: inherit;
}

/* Inputs inside the Themes modal should match the modal surface (avoid bright white selects). */
#nbv5ThemeModal .form-select,
#nbv5ThemeModal .form-control {
  background-color: rgba(255,255,255,.10) !important;
  color: inherit !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

/* Firefox/Windows: make the opened dropdown list readable (options can inherit white text on a white OS menu). */
html[data-v5thememode='dark'] #nbv5ThemeModal select.form-select option {
  background: #111827;
  color: #ffffff;
}

html[data-v5thememode='light'] #nbv5ThemeModal select.form-select option {
  background: #ffffff;
  color: #111827;
}

#nbv5ThemeModal .form-select:focus,
#nbv5ThemeModal .form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(255,255,255,.12);
}

html[data-v5thememode='light'] #nbv5ThemeModal .form-select,
html[data-v5thememode='light'] #nbv5ThemeModal .form-control {
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(17,24,39,.18) !important;
}

html[data-v5thememode='light'] #nbv5ThemeModal .form-select:focus,
html[data-v5thememode='light'] #nbv5ThemeModal .form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(17,24,39,.10);
}

/* Items should read well on both light and dark theme surfaces */
#nbv5ThemeModal .list-group-item {
  background: rgba(255,255,255,.08);
  color: inherit !important; /* override Bootstrap list-group defaults */
  border: 1px solid rgba(255,255,255,.10);
}

/* Ensure secondary text ("text-muted") remains readable on both modes */
#nbv5ThemeModal .text-muted {
  color: rgba(255,255,255,.72) !important;
}

#nbv5ThemeModal .list-group-item:hover {
  background: rgba(255,255,255,.12);
}

#nbv5ThemeModal .list-group-item.active {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.18);
}

/* Close button contrast on dark-ish headers */
#nbv5ThemeModal .modal-header .btn-close {
  filter: invert(1);
  opacity: .9;
}

/* Divider in modal should be theme-aware */
#nbv5ThemeModal hr {
  border-color: rgba(255,255,255,.16);
  opacity: 1;
}

/* Light theme mode: swap to dark text, adjust item fills/borders, and remove close invert */
html[data-v5thememode='light'] #nbv5ThemeModal.modal .nbv5-modal {
  color: #111827;
  box-shadow: 0 18px 48px rgba(60,45,30,.22);
}

html[data-v5thememode='light'] #nbv5ThemeModal .modal-header {
  border-bottom-color: rgba(0,0,0,.10);
}

html[data-v5thememode='light'] #nbv5ThemeModal .text-muted {
  color: rgba(17,24,39,.70) !important;
}

html[data-v5thememode='light'] #nbv5ThemeModal .list-group-item {
  background: rgba(255,255,255,.35);
  border-color: rgba(0,0,0,.10);
}

html[data-v5thememode='light'] #nbv5ThemeModal .list-group-item:hover {
  background: rgba(255,255,255,.48);
}

html[data-v5thememode='light'] #nbv5ThemeModal .list-group-item.active {
  background: rgba(255,255,255,.62);
  border-color: rgba(0,0,0,.14);
}

html[data-v5thememode='light'] #nbv5ThemeModal .modal-header .btn-close {
  filter: none;
  opacity: .75;
}

html[data-v5thememode='light'] #nbv5ThemeModal hr {
  border-color: rgba(0,0,0,.12);
}

/* Tighten header/body spacing */
#nbv5ThemeModal .modal-header {
  padding: 10px 12px;
}

#nbv5ThemeModal .modal-title {
  font-size: 1rem;
  line-height: 1.1;
}

#nbv5ThemeModal .modal-body {
  padding: 10px 12px 12px;
}

/* Make the Themes list compact and scalable when there are many themes */
#nbv5ThemeModal .list-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  max-height: min(56vh, 520px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px; /* space for scrollbar without clipping */
}

@media (min-width: 520px) {
  #nbv5ThemeModal .list-group {
    grid-template-columns: 1fr 1fr;
  }
}

/* Make list entries more compact */
#nbv5ThemeModal .list-group-item {
  padding: 7px 10px;
  border-radius: 12px;
  margin-bottom: 0;
}

/* Prevent list-group from adding hard edges when we round items */
#nbv5ThemeModal .list-group {
  border: 0;
}

#nbv5ThemeModal .list-group-item + .list-group-item {
  border-top: 0;
}

/* Font size section inside the Themes modal */
#nbv5ThemeModal .nbv5-theme-fonts .btn-outline-secondary {
  border-color: rgba(255,255,255,.28);
  color: inherit;
}

html[data-v5thememode='light'] #nbv5ThemeModal .nbv5-theme-fonts .btn-outline-secondary {
  border-color: rgba(17,24,39,.22);
}

#nbv5ThemeModal .nbv5-theme-range {
  padding: 10px 10px 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

html[data-v5thememode='light'] #nbv5ThemeModal .nbv5-theme-range {
  background: rgba(255,255,255,.35);
  border-color: rgba(0,0,0,.10);
}

#nbv5ThemeModal .nbv5-theme-rangehead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

#nbv5ThemeModal .nbv5-theme-rangelabel {
  font-weight: 600;
}

#nbv5ThemeModal .nbv5-theme-rangeval {
  font-variant-numeric: tabular-nums;
  opacity: .9;
}

/* Theme row live preview swatches:
   - a tiny header gradient strip (theme chrome)
   - a pane surface chip (current pane theme)
*/
#nbv5ThemeModal .nbv5-theme-preview {
  width: 26px;
  height: 18px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,0,0,.18);
}

html[data-v5thememode='dark'] #nbv5ThemeModal .nbv5-theme-preview {
  border-color: rgba(255,255,255,.18);
}

#nbv5ThemeModal .nbv5-theme-preview-header {
  height: 7px;
}

#nbv5ThemeModal .nbv5-theme-preview-pane {
  flex: 1;
}

/* Keyboard focus ring (for Up/Down navigation) */
#nbv5ThemeModal .nbv5-theme-item.is-kbfocus {
  outline: 2px solid var(--v5-paneheader-bg, #285E82);
  outline-offset: 1px;
}

/* Light/Dark badge inside Themes picker (fixed colors for clarity) */
#nbv5ThemeModal .nbv5-theme-badge {
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  user-select: none;
}

#nbv5ThemeModal .nbv5-theme-badge.is-light {
  background: #f3f4f6;
  color: #111827;
}

#nbv5ThemeModal .nbv5-theme-badge.is-dark {
  background: #111827;
  color: #ffffff;
  border-color: rgba(255,255,255,.16);
}

/* Ensure the modal sits above any fixed V5 layers (belt + suspenders) */
#nbv5ThemeModal.modal {
  z-index: 5010 !important;
}

/* Themes modal: keep Bootstrap backdrop for focus trapping, but remove the visual dimming */
body.nbv5-theme-modal-open .modal-backdrop.show {
  opacity: 0 !important;
}

/* Pane light/dark should not force the composer container to white/black.
   Keep composer-inner transparent so it matches nbv5-main background. */
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-composer-inner {
  background: transparent !important;
}


/* Composer bar: match main frame (no white gutter around input/send) */
.nbv5-skin-v4 .nbv5-composer,
.nbv5-skin-v4 .nbv5-composer-inner {
  background: var(--v5-main-bg) !important;
}

.nbv5-skin-v4 .nbv5-composer form {
  background: transparent !important;
}

/* Single composer layout (avoid Bootstrap d-flex !important so x-show can work elsewhere) */
.nbv5-skin-v4 .nbv5-composer-form {
  display: flex;
  gap: 2px;
  width: 100%;
}

.nbv5-skin-v4 .nbv5-composer-input-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.nbv5-skin-v4 .nbv5-composer-input,
.nbv5-skin-v4 .nbv5-whwin-input {
  position: relative;
  z-index: 3;
}

/* Input should blend with bar while remaining readable */
.nbv5-skin-v4 .nbv5-composer-input {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: #ffffff !important;
}

.nbv5-skin-v4 .nbv5-composer-input::placeholder {
  color: rgba(255,255,255,.70) !important;
}


/* Pane theme should affect the full pane surface (chat + nicklist + status),
   but NOT the pane header (header stays in the V4 blue scheme). */
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-pane {
  background: var(--nbv5-pane-bg) !important;
  color: var(--nbv5-pane-text) !important;
}

:root[data-chat-theme] .nbv5-skin-v4 .nbv5-chat,
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-pane-body {
  background: var(--nbv5-pane-bg) !important;
  color: var(--nbv5-pane-text) !important;
}

/* Keep pane headers matching tabs background */
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-pane-header {
  background: var(--v5-paneheader-bg) !important;
  color: #ffffff !important;
}
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-pane-header .text-muted {
  color: rgba(255,255,255,.75) !important;
}


/* Composer input follows pane theme (bar stays V4 blue) */
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-composer-input {
  background: var(--nbv5-input-bg) !important;
  border-color: var(--nbv5-input-border) !important;
  color: var(--nbv5-input-text) !important;
}
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-composer-input::placeholder {
  color: var(--nbv5-input-ph) !important;
}


/* Nicklist: tighten vertical spacing */
.nbv5-skin-v4 .nbv5-nick,
.nbv5-skin-v4 .nbv5-person {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  line-height: 1.2 !important;
}


/* ===============================
   Chat line structure (V5)
   =============================== */
.nbv5-line {
  display: flex;
  padding: 1px 0;
  gap: 8px;
  align-items: flex-start;
  white-space: normal;
  word-break: break-word;
}

.nbv5-timestamp {
  flex: 0 0 44px;
  font-variant-numeric: tabular-nums;
  font-size: 0.93em;
  letter-spacing: .01em;
  opacity: .65;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: var(--nbv5-timestamp-bright, var(--nbv5-timestamp)) !important;
  
}

.nbv5-line-text {
  flex: 1 1 auto;
}

.nbv5-msg,
.nbv5-raw {
  flex: 1 1 auto;
}

.nbv5-msg-text,
.nbv5-raw-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.nbv5-msg-text,
.nbv5-raw-text {
  white-space: pre-wrap;
}

/* Contrast assist on dark panes: keep user-chosen dark colors/gradients readable */
/* Dark pane readability assist (subtle, always-on). */
[data-chat-tone="dark"] .nbv5-msg-text,
[data-chat-tone="dark"] .nbv5-msg-text * {
  text-shadow: var(--nbv5-msg-outline-shadow);
  -webkit-text-stroke: var(--nbv5-msg-outline-stroke);
}

/* Do NOT outline code blocks, copy buttons, or UI chrome if they live inside the message HTML. */
[data-chat-tone="dark"] .nbv5-msg-text pre,
[data-chat-tone="dark"] .nbv5-msg-text code,
[data-chat-tone="dark"] .nbv5-msg-text pre *,
[data-chat-tone="dark"] .nbv5-msg-text code * {
  text-shadow: none !important;
  -webkit-text-stroke: 0px transparent !important;
}



/* If we auto-adjust a user-selected dark color/gradient on dark panes, remove most of the outline.
   The derived color is already readable, so we avoid a halo/glow look. */
[data-chat-tone="dark"] .nbv5-tonefix,
[data-chat-tone="dark"] .nbv5-tonefix * {
  text-shadow: 0 0 0.25px rgba(255,255,255,.18) !important;
  -webkit-text-stroke: 0px transparent !important;
}


/* Chat message: nicklist-style icon beside nickname */
.nbv5-msg-head {
  display: inline-block;
  white-space: nowrap;
  line-height: 1.45;
  vertical-align: baseline;
  margin-right: 6px; /* spacing between "nick :" and message */
}

/* Tagged overlay on chat-pane icon */
.nbv5-line.is-tagged .nbv5-msg-head{
  position: relative;
}
.nbv5-line.is-tagged .nbv5-msg-head::after{
  content: "";
  position: absolute;
  left: 10px;
  top: 9px;
  width: 10px;
  height: 10px;
  background: url('images/listicons/tagged.png') no-repeat center center;
  background-size: contain;
  pointer-events: none;
}

.nbv5-msg-ico {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: -3px; /* align icon with nick baseline */
  margin-right: 6px;
}

.nbv5-msg {
  display: block;
  min-width: 0;
  flex: 1 1 auto; /* keep existing flex layout of parent line */
}

.nbv5-msg-text {
  display: inline;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
  line-height: 1.45;
}


/* Chat nick colors (message lines) */
.nbv5-chat-nick {
  color: var(--nbv5-nick-other) !important;
  font-weight: bold;
  line-height: 1.45;
  cursor: pointer;
}

.nbv5-chat-nick-own {
  color: var(--nbv5-nick-self) !important;
  font-weight: bold;
  line-height: 1.45;
  cursor: pointer;
}

/* Tagged message emphasis (fixed colors for consistent look) */
.nbv5-line.is-tagged .nbv5-chat-nick,
.nbv5-line.is-tagged .nbv5-chat-nick-own{
  color: #A05A00 !important;
}
.nbv5-line.is-tagged .nbv5-msg-text{
  background: rgba(255, 214, 0, 0.10) !important;
  border-radius: 4px;
  padding: 0 2px;
}

.nbv5-chat-nick:hover,
.nbv5-chat-nick-own:hover {
  text-decoration: underline;
}

/* Emoticons (legacy mapping) */
.nbv5-emot {
  width: var(--nbv5-emot-size);
  height: var(--nbv5-emot-size);
  vertical-align: -4px;
  margin: 0 1px;
}

/* Inline media previews (GIF/image URLs) */
.nbv5-inline-media {
  display: block;
  margin-top: 6px;
  max-width: var(--nbv5-inline-media-max-width);
}

.nbv5-inline-media-link {
  display: inline-block;
  text-decoration: none;
}

.nbv5-inline-media-img {
  display: block;
  max-width: 100%;
  max-height: var(--nbv5-inline-media-max-height);
  height: auto;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.12);
}

.nbv5-inline-media-img:hover {
  opacity: 0.92;
}

/* Inline media removed placeholder (click-to-remove feedback) */
.nbv5-inline-media-removed {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(154,160,166,.28);
  background: rgba(154,160,166,.14);
  color: #9aa0a6;
  font-size: 13px;
  line-height: 1.2;
  user-select: none;
}

.nbv5-inline-media-removed-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(154,160,166,.9);
  flex: 0 0 auto;
}

.nbv5-inline-media-removed-text {
  white-space: nowrap;
}

/* Inline "Image removed" pill (shown on the nick line after click-to-remove) */
.nbv5-inline-media-removed-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(154,160,166,.28);
  background: rgba(154,160,166,.14) !important;
  color: #9aa0a6;
  font-size: 12.5px;
  line-height: 1.25;
  user-select: none;
  margin-left: 6px;
  vertical-align: baseline;
}

html[data-bs-theme="dark"] .nbv5-inline-media-img {
  border-color: rgba(255,255,255,.14);
}


.nbv5-chat-nick-role {
  margin-left: 3px;
  font-size: calc(1em - 1px);
  line-height: 1.45;
  font-weight: 600;
  color: currentColor;
  opacity: .88;
  white-space: nowrap;
}

/* Pills (system lines) */
.nbv5-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.06) !important;
  line-height: 1.15;
  width: 100%;
  box-sizing: border-box;
}

html[data-bs-theme="dark"] .nbv5-pill {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.10) !important;
}

.nbv5-pill-ico {
  width: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  opacity: .85;
}

.nbv5-pill-text {
  display: block;
  flex: 1 1 auto;
  white-space: normal;
}

/*
  System lines (replaces pills)
  - Icon + text inline, no pill background.
  - Fixed colors (do not theme-shift).
*/
.nbv5-sysline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-weight: 400;
  /* Must scale with the Chat/Activity/Whisper font size slider */
  font-size: 1em;
  line-height: 1.35;
  letter-spacing: .01em;
}

.nbv5-sysline-ico {
  width: 18px;
  text-align: center;
  opacity: .95;
}

.nbv5-sysline-text {
  white-space: normal;
  font-weight: 400;
}

/* Kind colors (fixed) */
.nbv5-sysline-connected,
.nbv5-sysline-join { color: #2F855A !important; }

/* Date separator (room transcript)
   Theme files provide the accent tokens; custom themes fall back to shell accents. */
.nbv5-date-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  margin: 16px 0 14px;
}

.nbv5-date-sep::before,
.nbv5-date-sep::after {
  content: "";
  display: block;
  flex: 1 1 80px;
  max-width: 420px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--nbv5-date-accent-1, var(--v5-theme-accent-1, #4D95C7)) 42%, transparent)
  );
}

.nbv5-date-sep::after {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--nbv5-date-accent-1, var(--v5-theme-accent-1, #4D95C7)) 42%, transparent),
    transparent
  );
}

.nbv5-date-sep-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 7px 15px 7px 8px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--nbv5-date-accent-1, var(--v5-theme-accent-1, #4D95C7)) 30%, var(--nbv5-pane-border) 70%);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--nbv5-pane-bg) 96%, #ffffff 4%) 0%,
    color-mix(in srgb, var(--nbv5-pane-bg) 88%, var(--nbv5-date-accent-1, var(--v5-theme-accent-1, #4D95C7)) 12%) 100%
  ) !important;
  color: color-mix(in srgb, var(--nbv5-date-text, var(--nbv5-date-accent-2, var(--v5-theme-accent-2, #285E82))) 82%, var(--nbv5-pane-text) 18%) !important;
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--nbv5-date-accent-2, var(--v5-theme-accent-2, #285E82)) 14%, transparent),
    inset 0 1px 0 rgba(255,255,255,.72);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .015em;
  line-height: 1.1;
  user-select: none;
}

.nbv5-date-sep-pill i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  color: var(--nbv5-date-icon-text, #ffffff) !important;
  background: linear-gradient(135deg, var(--nbv5-date-accent-1, var(--v5-theme-accent-1, #4D95C7)) 0%, var(--nbv5-date-accent-2, var(--v5-theme-accent-2, #285E82)) 100%);
  border-radius: 8px;
  box-shadow: 0 5px 12px color-mix(in srgb, var(--nbv5-date-accent-2, var(--v5-theme-accent-2, #285E82)) 24%, transparent);
  font-size: 12px;
  opacity: 1;
}

.nbv5-sysline-part,
.nbv5-sysline-quit { color: #6B7280 !important; }
.nbv5-sysline-nick { color: #2C6AA3 !important; }
.nbv5-sysline-mode { color: #7C5AC9 !important; }
.nbv5-sysline-topic { color: #2B8C85 !important; }
.nbv5-sysline-kick,
.nbv5-sysline-error { color: #C44545 !important; font-weight: 400 !important; }
.nbv5-sysline-notice,
.nbv5-sysline-onjoin { color: #B7791F !important; }
.nbv5-sysline-away { color: #B7791F !important; }
.nbv5-sysline-unaway { color: #2F855A !important; }
.nbv5-sysline-info { color: #4C78A8 !important; }
.nbv5-sysline-nickinuse { color: #C44545 !important; font-weight: 400 !important; }
.nbv5-sysline-action { color: #8A6A3F !important; }
.nbv5-sysline-whisper { color: #2B8C85 !important; }
.nbv5-sysline-cmwhisp { color: #7C5AC9 !important; }

/* Kind hooks for per-pill styling (subtle tints) */
.nbv5-pill-connected {
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.08) !important;
}
.nbv5-pill-join {
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.12) !important;
}
.nbv5-pill-part,
.nbv5-pill-quit {
  border-color: rgba(107,114,128,.32);
  background: rgba(107,114,128,.12) !important;
}
.nbv5-pill-nick {
  border-color: rgba(59,130,246,.35);
  background: rgba(59,130,246,.12) !important;
}
.nbv5-pill-mode {
  border-color: rgba(168,85,247,.35);
  background: rgba(168,85,247,.12) !important;
}
.nbv5-pill-topic {
  border-color: rgba(20,184,166,.35);
  background: rgba(20,184,166,.12) !important;
}
.nbv5-pill-kick {
  border-color: rgba(239,68,68,.38);
  background: rgba(239,68,68,.13) !important;
}
.nbv5-pill-notice {
  border-color: rgba(245,158,11,.38);
  background: rgba(245,158,11,.13) !important;
}

.nbv5-pill-nickinuse {
  /* Nickname in use (433/436): fixed warning tint */
  border-color: rgba(239,68,68,.45) !important;
  background: rgba(255,197,197,.35) !important;
  color: #3a0b0b;
}
.nbv5-pill-action {
  /* ACTION (/me): fixed light brown tint (does not vary between light/dark) */
  border-color: rgba(160,120,80,.45) !important;
  background: rgba(217,179,140,.28) !important; /* light brownish */
  color: #1b1208;
}


.nbv5-pill-onjoin {
  border-color: rgba(14,165,233,.38);
  background: rgba(14,165,233,.13) !important;
}
.nbv5-pill-info {
  border-color: rgba(0,0,0,.14);
  background: rgba(0,0,0,.06) !important;
}

/* Dark theme: slightly higher opacity (same hues) */
html[data-bs-theme="dark"] .nbv5-pill-connected {
  background: rgba(34,197,94,.16) !important;
  border-color: rgba(34,197,94,.38);
}
html[data-bs-theme="dark"] .nbv5-pill-join {
  background: rgba(34,197,94,.22) !important;
  border-color: rgba(34,197,94,.45);
}
html[data-bs-theme="dark"] .nbv5-pill-part,
html[data-bs-theme="dark"] .nbv5-pill-quit {
  background: rgba(107,114,128,.20) !important;
  border-color: rgba(107,114,128,.40);
}
html[data-bs-theme="dark"] .nbv5-pill-nick {
  background: rgba(59,130,246,.22) !important;
  border-color: rgba(59,130,246,.45);
}
html[data-bs-theme="dark"] .nbv5-pill-mode {
  background: rgba(168,85,247,.22) !important;
  border-color: rgba(168,85,247,.45);
}
html[data-bs-theme="dark"] .nbv5-pill-topic {
  background: rgba(20,184,166,.22) !important;
  border-color: rgba(20,184,166,.45);
}
html[data-bs-theme="dark"] .nbv5-pill-kick {
  background: rgba(239,68,68,.22) !important;
  border-color: rgba(239,68,68,.48);
}
html[data-bs-theme="dark"] .nbv5-pill-notice {
  background: rgba(245,158,11,.22) !important;
  border-color: rgba(245,158,11,.48);
}
html[data-bs-theme="dark"] .nbv5-pill-onjoin {
  background: rgba(14,165,233,.22) !important;
  border-color: rgba(14,165,233,.48);
}
html[data-bs-theme="dark"] .nbv5-pill-info {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.14);
}

/* Line kind hooks (friendly system messages) */
.nbv5-line-msg {}
.nbv5-line-notice {}
.nbv5-line-join {}
.nbv5-line-part {}
.nbv5-line-quit {}
.nbv5-line-nick {}
.nbv5-line-mode {}
.nbv5-line-topic {}
.nbv5-line-raw {
  opacity: .8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Nicklist role suffix */
.nbv5-nick-role {
  margin-left: 0;
}


/* ===== Left panel single Room button ===== */

.nbv5-lp-roomwrap {
  margin-top: 10px;
  padding: 0 8px;
}

/* Room button */
.nbv5-lp-roombtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* LEFT align text */
  gap: 6px;

  padding: 8px 10px;
  border-radius: 10px;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.28); /* visible border */

  color: #ffffff;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.nbv5-lp-roombtn:hover {
  background: rgba(255,255,255,.14);
}

.nbv5-lp-roomhash {
  opacity: .7;
  flex-shrink: 0;
}

.nbv5-lp-roomname {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-v5thememode="dark"] .nbv5-lp-roombtn {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.nbv5-lp-roombtn:hover {
  background: rgba(0,0,0,.10);
}

html[data-v5thememode="dark"] .nbv5-lp-roombtn:hover {
  background: rgba(255,255,255,.10);
}

.nbv5-lp-roombtn[aria-pressed="true"] {
  background: rgba(0,0,0,.14);
}

html[data-v5thememode="dark"] .nbv5-lp-roombtn[aria-pressed="true"] {
  background: rgba(255,255,255,.14);
}

.nbv5-lp-room-ico {
  font-weight: 900;
  opacity: .8;
  flex: 0 0 auto;
}

.nbv5-lp-room-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

/* --- Left panel footer + scroll body (V5) --- */
.nbv5-leftpanel{
  display: flex;
  flex-direction: column;
  height: 100%;
  background:
    var(--v5-topbar-bg) top / 100% 52px no-repeat,
    var(--v5-main-bg);
}

.nbv5-leftpanel.nbv5-left-open{
  width: var(--nbv5-leftpanel-w, 260px);
  flex: 0 0 var(--nbv5-leftpanel-w, 260px);
  min-width: var(--nbv5-leftpanel-w, 260px);
}

.nbv5-leftpanel .nbv5-lp-body{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.nbv5-leftpanel .nbv5-lp-footer{
  padding: 10px 12px;
  border-top: 1px solid var(--v4-footer-border);
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  margin-right:10px;
}


.nbv5-leftpanel .nbv5-lp-footlogo{
  display: block;
  margin: 0 auto 6px auto;
  height: 18px;
  width: auto;
  opacity: .95;
  transform: translateX(24px);
}

/* Footer logo (inline SVG) must stay readable across all themes */
[data-v5thememode="light"] .nbv5-leftpanel .nbv5-lp-footlogo{ color: #2B2620; }
[data-v5thememode="dark"]  .nbv5-leftpanel .nbv5-lp-footlogo{ color: #ffffff; }

/* Below-the-fold ad placeholder should follow theme text tone (light/dark). */
html[data-v5thememode="light"] .nbv5-ad-banner{ color: #2B2620 !important; }
html[data-v5thememode="dark"]  .nbv5-ad-banner{ color: #ffffff !important; }

.nbv5-leftpanel .nbv5-lp-footlogo text{
  paint-order: stroke fill;
  stroke-linejoin: round;
  stroke-width: 3;
}

/* On light themes: dark fill with a subtle light stroke helps on textured backgrounds */
[data-v5thememode="light"] .nbv5-leftpanel .nbv5-lp-footlogo text{ stroke: rgba(255,255,255,.55); }
/* On dark themes: light fill with a subtle dark stroke */
[data-v5thememode="dark"]  .nbv5-leftpanel .nbv5-lp-footlogo text{ stroke: rgba(0,0,0,.55); }

html[data-v5thememode="dark"] .nbv5-leftpanel .nbv5-lp-footer{
  border-top: 1px solid rgba(127,127,127,.28);
}

.nbv5-leftpanel .nbv5-lp-footlinks{
  margin-top: 4px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.nbv5-leftpanel .nbv5-lp-footlink{
  text-decoration: none;
}

.nbv5-leftpanel .nbv5-lp-footlink:hover{
  text-decoration: underline;
}
.nbv5-leftpanel .nbv5-lp-footbtn{
  /* Reuse the left-nav button styling (nbv5-lp-btn), but slightly smaller */
  width: 36px;
  height: 30px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}

.nbv5-leftpanel .nbv5-lp-footbtn i{
  font-size: 14px;
  line-height: 1;
}

.nbv5-leftpanel .nbv5-lp-footcopy{
  margin-top: 0;
  font-size: 12px;
  opacity: .80;
  text-align: center;
}
[data-v5thememode="light"] .nbv5-leftpanel .nbv5-lp-footbtn{
  background: rgba(255,255,255,.70) !important;
  color: #2B2620;
  border: 1px solid rgba(0,0,0,.12);
}

[data-v5thememode="dark"] .nbv5-leftpanel .nbv5-lp-footbtn{
  background: rgba(0,0,0,.22) !important;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.18);
}

.nbv5-leftpanel .nbv5-lp-footbtn:hover{
  text-decoration: none;
  filter: brightness(1.05);
}

.nbv5-leftpanel .nbv5-lp-footbtn:active{
  transform: translateY(1px);
}


/* --- 
/* --- Shell layout: left pane full-height column (V5) --- */
.nbv5-shell{
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}

.nbv5-stage{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.nbv5-stage > .nbv5-topbar{ flex: 0 0 auto; }
.nbv5-stage > .nbv5-main{ flex: 1 1 auto; min-height: 0; }
.nbv5-shell > .nbv5-leftpanel{ height: 100%; }
Ensure left panel/footer reach bottom (V5) --- */
.nbv5-main{
  display: flex;
  flex-direction: column;
}

.nbv5-main > .container-fluid{
  flex: 1 1 auto;
  min-height: 0;
}

.nbv5-main > .container-fluid > .d-flex{
  flex: 1 1 auto;
  min-height: 0;
}

/* --- Composer belongs to center pane (V5) --- */
.nbv5-center .nbv5-composer.nbv5-composer-center{
  background: transparent;
  padding: 10px 5px 0px 0;
  border-top: 1px solid rgba(0,0,0,.14);
}

.nbv5-chat-theme-dark .nbv5-center .nbv5-composer.nbv5-composer-center{
  border-top: 1px solid rgba(127,127,127,.28);
}

.nbv5-center .nbv5-composer-input{
  background: var(--nbv5-input-bg) !important;
  border-color: var(--nbv5-input-border) !important;
  color: var(--nbv5-input-text) !important;
}
.nbv5-center .nbv5-composer-input::placeholder{
  color: var(--nbv5-input-ph) !important;
  opacity: 1;
}
/* Emoticon picker (composer) */
.nbv5-center .nbv5-composer-form{
  position: relative;
}

.nbv5-actionbtn,
.nbv5-emotbtn{
  padding: 0 10px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  /* spacing is controlled by the composer flex gap */
  margin-left: 0 !important;
  background: #1f2328 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #e6edf3 !important;
}
.nbv5-actionbtn{
  min-width: 38px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.nbv5-actionbtn:hover,
.nbv5-emotbtn:hover{ background: rgba(255,255,255,.06) !important; }

/* Small icon buttons used in pane headers (e.g., Away/Back in People pane)
   Keep fixed colors so they don't shift across pane themes. */
.nbv5-iconbtn{
  height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #1f2328 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #e6edf3 !important;
}
.nbv5-iconbtn:hover{ background: rgba(255,255,255,.06) !important; }

/* Stored away message button (composer) */
.nbv5-awaymsgbtn{
  padding: 0 10px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  /* spacing is controlled by the composer flex gap */
  margin-left: 0 !important;
  background: #1f2328 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #e6edf3 !important;
}
.nbv5-awaymsgbtn:hover{ background: rgba(255,255,255,.06) !important; }

/* Giphy button (composer) */
.nbv5-giphybtn{
  padding: 0 10px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  /* spacing is controlled by the composer flex gap */
  margin-left: 0 !important;
  background: #1f2328 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #e6edf3 !important;
}
.nbv5-giphybtn:hover{ background: rgba(255,255,255,.06) !important; }

.nbv5-stickerbtn{
  padding: 0 10px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  /* spacing is controlled by the composer flex gap */
  margin-left: 0 !important;
  background: #1f2328 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #e6edf3 !important;
}
.nbv5-stickerbtn:hover{ background: rgba(255,255,255,.06) !important; }

/* Mobile media button (composer) */
.nbv5-mediabtn{
  padding: 0 10px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin-left: 0 !important;
  background: #1f2328 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #e6edf3 !important;
}
.nbv5-mediabtn:hover{ background: rgba(255,255,255,.06) !important; }

/* Composer action dock polish (build 537): modernizes the buttons to the right of the input without changing behavior. */
.nbv5-composer-tooldock{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 4px 6px;
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.nbv5-sendbtn{
  flex: 0 0 auto;
  min-width: 52px;
  height: 44px;
  padding: 0 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  border-radius: 15px !important;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease, background-color .14s ease;
}
.nbv5-sendbtn i{ font-size: 17px; }
.nbv5-sendbtn:hover:not(:disabled),
.nbv5-sendbtn:focus-visible:not(:disabled){
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18);
}
.nbv5-sendbtn:active:not(:disabled){ transform: translateY(0); }
.nbv5-sendbtn:disabled{
  transform: none;
  box-shadow: none;
}
.nbv5-actionbtn,
.nbv5-emotbtn,
.nbv5-awaymsgbtn,
.nbv5-giphybtn,
.nbv5-stickerbtn,
.nbv5-mediabtn{
  width: 38px;
  min-width: 38px;
  height: 36px;
  min-height: 36px;
  padding: 0 !important;
  border-radius: 13px !important;
  background: rgba(13, 19, 28, .84) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.88) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .14s ease, background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.nbv5-actionbtn:hover:not(:disabled),
.nbv5-actionbtn:focus-visible:not(:disabled),
.nbv5-emotbtn:hover:not(:disabled),
.nbv5-emotbtn:focus-visible:not(:disabled),
.nbv5-awaymsgbtn:hover:not(:disabled),
.nbv5-awaymsgbtn:focus-visible:not(:disabled),
.nbv5-giphybtn:hover:not(:disabled),
.nbv5-giphybtn:focus-visible:not(:disabled),
.nbv5-stickerbtn:hover:not(:disabled),
.nbv5-stickerbtn:focus-visible:not(:disabled),
.nbv5-mediabtn:hover:not(:disabled),
.nbv5-mediabtn:focus-visible:not(:disabled){
  transform: translateY(-1px);
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: #fff !important;
  box-shadow: 0 7px 15px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10);
}
.nbv5-actionbtn:active:not(:disabled),
.nbv5-emotbtn:active:not(:disabled),
.nbv5-awaymsgbtn:active:not(:disabled),
.nbv5-giphybtn:active:not(:disabled),
.nbv5-stickerbtn:active:not(:disabled),
.nbv5-mediabtn:active:not(:disabled){ transform: translateY(0); }
.nbv5-actionbtn:disabled,
.nbv5-emotbtn:disabled,
.nbv5-awaymsgbtn:disabled,
.nbv5-giphybtn:disabled,
.nbv5-stickerbtn:disabled,
.nbv5-mediabtn:disabled{
  opacity: .48;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.nbv5-actionbtn{ font-size: 18px; font-weight: 900; }
.nbv5-emotbtn:hover:not(:disabled), .nbv5-emotbtn:focus-visible:not(:disabled){ color: #ffd86b !important; }
.nbv5-stickerbtn:hover:not(:disabled), .nbv5-stickerbtn:focus-visible:not(:disabled){ color: #d9b8ff !important; }
.nbv5-giphybtn:hover:not(:disabled), .nbv5-giphybtn:focus-visible:not(:disabled){ color: #8fd4ff !important; }
.nbv5-awaymsgbtn:hover:not(:disabled), .nbv5-awaymsgbtn:focus-visible:not(:disabled){ color: #9fe7ff !important; }

@media (max-width: 767.98px){
  .nbv5-composer-tooldock{
    gap: 4px;
    padding: 4px;
    border-radius: 13px;
  }
  .nbv5-sendbtn{
    width: 44px !important;
    min-width: 44px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .nbv5-send-label{ display: none; }
  .nbv5-actionbtn,
  .nbv5-emotbtn,
  .nbv5-awaymsgbtn,
  .nbv5-giphybtn,
  .nbv5-stickerbtn,
  .nbv5-mediabtn{
    width: 36px;
    min-width: 36px;
  }
}


.nbv5-composer-rightpane-toggle{
  flex: 0 0 auto;
  align-self: stretch;
  width: 40px;
  height: 40px;
  margin-left: 4px;
  border-radius: 10px;
  color: var(--nbv5-input-text) !important;
}

.nbv5-composer-rightpane-toggle .nbv5-lp-ico{
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.nbv5-lp-ico.ico-collapse {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
}

@media (max-width: 767.98px){
  .nbv5-composer-rightpane-toggle{
    display: none !important;
  }
}

/* Mobile: compact media tray anchored above the composer */
.nbv5-mobile-media-tray{
  position: fixed;
  right: 12px;
  bottom: 74px;
  width: min(260px, calc(100vw - 24px));
  z-index: 6100;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(16,18,22,.98) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nbv5-mobile-media-btn{
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #e6edf3 !important;
}
.nbv5-mobile-media-btn:hover{ background: rgba(255,255,255,.10) !important; }
.nbv5-mobile-media-btn i{ width: 18px; text-align: center; }
.nbv5-mobile-media-btn span{ font-weight: 600; font-size: 13px; }

.nbv5-stickers-pop.nbv5-ctx-menu{
  min-width: 0;
  max-width: none;
}

.nbv5-stickers-pop{
  position: fixed;
  right: 16px;
  bottom: 74px;
  width: 420px;
  height: 360px;
  min-width: 320px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  z-index: 6000;
  overflow: hidden;
  border-radius: 14px;
  background: var(--v5-main-bg);
  border: 2px solid var(--v5-paneheader-bg, #285E82) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
}

.nbv5-stickers-head{
  background: var(--v5-paneheader-bg);
  display:flex;
  flex-direction: column;
  gap:4px;
  padding:6px 8px;
  border-bottom: 1px solid var(--v5-paneheader-bg);
}

.nbv5-stickers-headrow{
  display:flex;
  gap:6px;
  align-items:center;
}

.nbv5-stickers-headspacer{
  flex: 1 1 auto;
  min-width: 20px;
  align-self: stretch;
}

.nbv5-stickers-q{
  flex: 0 0 220px;
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  height: 30px;
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--nbv5-input-bg) !important;
  border: 1px solid var(--nbv5-input-border) !important;
  color: var(--nbv5-input-text) !important;
}
.nbv5-stickers-q::placeholder{ color: var(--nbv5-input-ph) !important; opacity: 1; }

.nbv5-stickers-reset,
.nbv5-stickers-x{
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #e6edf3 !important;
  flex-shrink: 0;
}

html[data-v5thememode="light"] .nbv5-stickers-head{
  color: #ffffff;
}

html[data-v5thememode="light"] .nbv5-stickers-reset,
html[data-v5thememode="light"] .nbv5-stickers-x{
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #ffffff !important;
}

.nbv5-stickers-grid{
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding:10px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap:10px;
  overflow:auto;
  align-content: start;
  background: var(--v5-main-bg);
}

.nbv5-stickers-sep{
  grid-column: 1 / -1;
  font-size: 12px;
  opacity: .88;
  padding: 6px 2px 2px 2px;
  border-top: 1px solid color-mix(in srgb, var(--v5-main-fg, #ffffff) 12%, transparent);
  color: color-mix(in srgb, var(--v5-main-fg, #ffffff) 84%, transparent);
}

.nbv5-stickers-item{
  appearance:none;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.04) !important;
  border-radius: 12px;
  padding:6px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nbv5-stickers-item:hover{ background: rgba(255,255,255,.08) !important; }

.nbv5-stickers-item img{
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.nbv5-stickers-resize{
  flex: 0 0 10px;
  height: 10px;
  cursor: nwse-resize;
  align-self: stretch;
  background: linear-gradient(135deg, transparent 0 45%, rgba(255,255,255,.16) 45% 55%, transparent 55% 100%);
}

.nbv5-sticker{
  width: var(--nbv5-sticker-size);
  height: var(--nbv5-sticker-size);
  object-fit: contain;
  vertical-align: text-bottom;
}



.nbv5-emots-pop.nbv5-ctx-menu{
  min-width: 0;
  max-width: none;
}

.nbv5-emots-pop{
  position: fixed;
  /* JS (NBV5.EmotsUI) sets top/left so we can anchor to the emot button and stay on-screen. */
  right: 16px;
  bottom: 74px;
  width: 380px;
  height: 360px;
  min-width: 320px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  z-index: 6000;
  overflow: hidden;
  border-radius: 14px;

  /* Theme surface: pop frame matches theme; header uses paneheader token; grid stays white for icon clarity */
  background: var(--v5-main-bg);
  /* Border matches the active theme accent (same token used by pane headers).
     NOTE: the picker is position:fixed, so include a fallback and force with !important
     to avoid any grey overrides on some browsers/themes. */
  border: 2px solid var(--v5-paneheader-bg, #285E82) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
}

.nbv5-emots-head{
  background: var(--v5-paneheader-bg);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  /* Keep internal dividers in-theme (same token as pane header / frame border). */
  border-bottom: 1px solid var(--v5-paneheader-bg);
}

.nbv5-emots-headrow{
  display: flex;
  gap: 6px;
  align-items: center;
}

.nbv5-emots-headrow-sections{
  gap: 0;
}

.nbv5-emots-modes{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  width: 100%;
}

.nbv5-emots-mode{
  min-width: 0;
  height: 28px;
  padding: 3px 8px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: rgba(230,237,243,.82);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.nbv5-emots-mode:hover{
  background: rgba(255,255,255,.13);
  color: #fff;
}

.nbv5-emots-mode.is-active{
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.34);
  color: #fff;
  box-shadow: inset 0 -2px 0 currentColor;
}

.nbv5-emots-headspacer{
  flex: 1 1 auto;
  min-width: 20px;
  align-self: stretch;
}

#nbv5EmotsPop .nbv5-emots-sections{
  display: grid;
  grid-template-columns: repeat(8, 29px);
  gap: 3px;
  align-items: center;
  justify-content: start;
  overflow: hidden;
  padding-bottom: 0;
  flex: 0 0 auto;
}

#nbv5EmotsPop .nbv5-emots-secbtn{
  flex: 0 0 29px;
  width: 29px;
  min-width: 29px;
  height: 29px;
  padding: 0;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.08) !important;
  color: #e6edf3 !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 27px;
  text-align: center;
}
#nbv5EmotsPop .nbv5-emots-secbtn:hover{ background: rgba(255,255,255,.14) !important; }

#nbv5EmotsPop[data-emots-searching="1"] .nbv5-emots-sections{
  opacity: .55;
}

#nbv5EmotsPop[data-emots-searching="1"] .nbv5-emots-secbtn{
  pointer-events: none;
}

.nbv5-emots-q{
  flex: 0 0 220px;
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  height: 30px;
  padding: 4px 10px;
  background: rgba(0,0,0,.15) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #e6edf3 !important;
}
.nbv5-emots-q::placeholder{ color: rgba(230,237,243,.65) !important; }

.nbv5-emots-reset,
.nbv5-emots-x{
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #e6edf3 !important;
  border-radius: 7px;
}
.nbv5-emots-x:hover{ background: rgba(255,255,255,.10) !important; }

/* Emoticon picker header: adapt to light/dark theme mode (theme picker sets data-v5thememode on <html>). */
html[data-v5thememode="light"] .nbv5-emots-head{
  color: #1f2328 !important;
}
html[data-v5thememode="light"] .nbv5-emots-q{
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  color: #1f2328 !important;
}
html[data-v5thememode="light"] .nbv5-emots-q::placeholder{
  color: rgba(31,35,40,.65) !important;
}
html[data-v5thememode="light"] .nbv5-emots-reset,
html[data-v5thememode="light"] .nbv5-emots-x{
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  color: #1f2328 !important;
}
html[data-v5thememode="light"] .nbv5-emots-reset:hover,
html[data-v5thememode="light"] .nbv5-emots-x:hover{
  background: rgba(255,255,255,.72) !important;
}
html[data-v5thememode="light"] #nbv5EmotsPop .nbv5-emots-secbtn{
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  color: #1f2328 !important;
}
html[data-v5thememode="light"] #nbv5EmotsPop .nbv5-emots-secbtn:hover{
  background: rgba(255,255,255,.72) !important;
}

html[data-v5thememode="light"] #nbv5EmotsPop .nbv5-emots-mode{
  background: rgba(255,255,255,.5);
  border-color: rgba(0,0,0,.16);
  color: rgba(31,35,40,.78);
}

html[data-v5thememode="light"] #nbv5EmotsPop .nbv5-emots-mode:hover{
  background: rgba(255,255,255,.72);
  color: #1f2328;
}

html[data-v5thememode="light"] #nbv5EmotsPop .nbv5-emots-mode.is-active{
  background: rgba(255,255,255,.88);
  border-color: rgba(0,0,0,.28);
  color: #1f2328;
}

.nbv5-emots-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 6px;
  padding: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--nbv5-pane-bg) !important;
  align-self: stretch;
}


.nbv5-emots-head{
  cursor: move;
}

.nbv5-emots-head .nbv5-emots-q,
.nbv5-emots-head .nbv5-emots-reset,
.nbv5-emots-head .nbv5-emots-x,
.nbv5-emots-head .nbv5-emots-modes,
.nbv5-emots-head .nbv5-emots-modes *,
.nbv5-emots-head .nbv5-emots-sections,
.nbv5-emots-head .nbv5-emots-sections *{
  cursor: auto;
}

.nbv5-emots-resize{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  cursor: se-resize;
  background: linear-gradient(135deg, transparent 0 52%, rgba(255,255,255,.3) 52% 58%, transparent 58%);
  opacity: .85;
}


/* GIPHY picker shell */
.nbv5-giphy-pop{
  position: fixed;
  right: 16px;
  bottom: 74px;
  width: 420px;
  height: 320px;
  min-width: 340px;
  min-height: 260px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 6000;
  border-radius: 14px;
  background: var(--v5-main-bg);
  border: 2px solid var(--v5-paneheader-bg, #285E82) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
  max-width: none !important;
}

.nbv5-giphy-head{
  background: var(--v5-paneheader-bg);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--v5-main-fg, #ffffff) 10%, transparent);
}

.nbv5-giphy-headrow{
  display: flex;
  gap: 6px;
  align-items: center;
}

.nbv5-giphy-headspacer{
  flex: 1 1 auto;
  min-width: 20px;
  align-self: stretch;
}

.nbv5-giphy-hint{
  color: rgba(230,237,243,.75) !important;
  padding-left: 2px;
}
html[data-v5thememode="light"] .nbv5-giphy-hint{ color: rgba(255,255,255,.82) !important; }

.nbv5-giphy-more,
.nbv5-giphy-reset,
.nbv5-giphy-x{
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #e6edf3 !important;
  border-radius: 10px;
  flex-shrink: 0;
}
.nbv5-giphy-more:hover,
.nbv5-giphy-reset:hover,
.nbv5-giphy-x:hover{ background: rgba(255,255,255,.10) !important; }
.nbv5-giphy-more:disabled{ opacity: .55; cursor: default; }
html[data-v5thememode="light"] .nbv5-giphy-more,
html[data-v5thememode="light"] .nbv5-giphy-reset,
html[data-v5thememode="light"] .nbv5-giphy-x{
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #ffffff !important;
}
.nbv5-giphy-q{
  flex: 0 0 220px;
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  background: var(--nbv5-input-bg) !important;
  border: 1px solid var(--nbv5-input-border) !important;
  color: var(--nbv5-input-text) !important;
}
.nbv5-giphy-q::placeholder{ color: var(--nbv5-input-ph) !important; opacity: 1; }

.nbv5-giphy-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 10px;
  background: var(--v5-main-bg) !important;
}

.nbv5-giphy-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  align-content: start;
}

.nbv5-giphy-foot{
  flex: 0 0 18px;
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 8px 4px 8px;
  background: var(--v5-main-bg) !important;
}

.nbv5-giphy-poweredwrap{
  display: flex;
  align-items: center;
  min-width: 0;
}

.nbv5-giphy-powered{
  max-width: 112px;
  width: auto;
  height: auto;
}

.nbv5-giphy-resize{
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  cursor: nwse-resize;
  align-self: flex-end;
  background: linear-gradient(135deg, transparent 0 45%, rgba(255,255,255,.16) 45% 55%, transparent 55% 100%);
}

html[data-v5thememode="light"] .nbv5-giphy-head{ color: #ffffff !important; }
.nbv5-giphy-item{
  appearance: none;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.04) !important;
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
}
html[data-v5thememode="light"] .nbv5-giphy-item{
  border: 1px solid rgba(0,0,0,.14) !important;
  background: rgba(255,255,255,.65) !important;
}
.nbv5-giphy-item:hover{ background: rgba(255,255,255,.08) !important; }
html[data-v5thememode="light"] .nbv5-giphy-item:hover{ background: rgba(255,255,255,.85) !important; }

.nbv5-giphy-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nbv5-giphy-msg{
  grid-column: 1 / -1;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.14) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #e6edf3 !important;
  white-space: normal;
}
html[data-v5thememode="light"] .nbv5-giphy-msg{
  background: rgba(255,255,255,.75) !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  color: #1f2328 !important;
}

.nbv5-giphy-foot{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 10px;
  padding-right: 10px;
  /* Match popup surface (overall theme background). */
  background: var(--v5-main-bg) !important;
  border-top: 1px solid rgba(255,255,255,.08);
}
html[data-v5thememode="light"] .nbv5-giphy-foot{ border-top: 1px solid rgba(0,0,0,.12); }

/* Footer logo: default to dark-mode logo so it shows even if theme attribute is missing.
   Then swap based on data-v5thememode (matches how other themed UI is selected). */
.nbv5-giphy-powered{ height: 16px; width: auto; opacity: .95; display:none; }
.nbv5-giphy-powered-dark{ display:inline-block; }
html[data-v5thememode="light"] .nbv5-giphy-powered-dark{ display:none !important; }
html[data-v5thememode="light"] .nbv5-giphy-powered-light{ display:inline-block !important; }
html[data-v5thememode="dark"] .nbv5-giphy-powered-light{ display:none !important; }
html[data-v5thememode="dark"] .nbv5-giphy-powered-dark{ display:inline-block !important; }

/* Emot picker: wrapper so Alpine x-for renders a single root node, without affecting grid layout */
.nbv5-emots-entry{ display: contents; }

#nbv5EmotsPop .nbv5-emots-sep{
  grid-column: 1 / -1;
  margin: 4px 0 2px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--nbv5-pane-sep-text-bright, var(--nbv5-pane-sep-text)) !important;
  /* Keep section dividers subtle and pane-aware instead of using the full header color. */
  border-top: 1px solid var(--nbv5-pane-border);
}
@supports (color: color-mix(in srgb, black 50%, white)) {
  #nbv5EmotsPop .nbv5-emots-sep{
    border-top-color: color-mix(in srgb, var(--nbv5-pane-border) 44%, var(--nbv5-pane-bg));
  }
}

.nbv5-emots-item{
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent !important;
  border-radius: 6px;
}
.nbv5-emots-item:hover{ background: var(--nbv5-pane-item-hover) !important; }
.nbv5-emots-item img{
  width: 25px;
  height: 25px;
  display: block;
  margin: 0 auto;
}

.nbv5-emots-item.nbv5-emoji-item{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nbv5-emoji-glyph{
  display: block;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}


/* ===============================
   Relay-Radio drawer (center pane)
   =============================== */
.chat-radio-drawer {
  margin-top: 8px;
 background: var(--v5-main-bg) !important;
}

.chat-radio-frame {
  width: 100%;
  height: 60px;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  background: var(--v5-main-bg) !important;
}

.chat-radio-iframe {
  width: 100%;
  height: 70px;
  border: 0;
  display: block;
}

/* ===============================
   Control Panel (center pane)
   =============================== */

.nbv5-control {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.nbv5-control-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--nbv5-pane-border);
}

.nbv5-control-title {
  font-weight: 700;
  letter-spacing: .2px;
}

.nbv5-control-close {
  border-color: rgba(127,127,127,.35) !important;
  color: inherit !important;
}

.nbv5-control-close:hover {
  background: rgba(127,127,127,.10) !important;
}

.nbv5-control-body {
  padding: 8px;
overflow: auto;
  min-height: 0;
}

.nbv5-control-intro {
  font-size: 12px;
  opacity: .78;
  margin: 0 2px 8px 2px;
}

.nbv5-control-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nbv5-control-section {
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
}

.nbv5-control-h {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .8;
  margin-bottom: 10px;
}

.nbv5-control-row {
  margin-bottom: 10px;
}

.nbv5-control-help {
  font-size: 12px;
  opacity: .75;
  margin-top: 6px;
}

/* Control Panel: Performance snapshot block (avoid inheriting .nbv5-control-help opacity) */
.nbv5-perfsnap {
  font-size: 12px;
}

.nbv5-perfsnap-sub {
  font-size: 12px;
  opacity: .8;
}

/* Ensure button labels remain readable even inside subtle CP sections */
.nbv5-perfsnap .btn {
  opacity: 1 !important;
}


/* My default look (message format) */
.nbv5-mylook-sub {
  font-size: 12px;
  opacity: .75;
  margin-top: 2px;
}

.nbv5-mylook-head {
  align-items: flex-start;
  gap: 12px;
}

.nbv5-mylook-headactions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.nbv5-mylook-resethead {
  min-width: 64px;
}

.nbv5-mylook-state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 12px;
  background: rgba(0,0,0,0.02);
}

.nbv5-mylook-state.is-off {
  background: rgba(255, 193, 7, 0.08);
}

.nbv5-mylook-state.is-on {
  background: rgba(25, 135, 84, 0.08);
}

.nbv5-mylook-statebadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.nbv5-mylook-statetext {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
}

/* My Message Format: single column (preview lives under Gradient) */
.nbv5-mylook-grid {
  display: block;
}

.nbv5-mylook-controls {
  min-width: 0;
}

.nbv5-mylook-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.nbv5-mylook-controls.is-disabled .nbv5-mylook-fieldset {
  opacity: .56;
}

.nbv5-mylook-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 8px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 12px;
  background: rgba(0,0,0,0.02);
  margin-bottom: 6px;
}

.nbv5-mylook-rowlabel {
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  margin: 0;
  opacity: .92;
}

.nbv5-mylook-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* Keep B / I / U on the same line as the font selector */
.nbv5-mylook-fontstyle {
  flex-wrap: nowrap;
  gap: 6px;
}

.nbv5-mylook-fontstyle .nbv5-mylook-font {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.nbv5-mylook-fontstyle .nbv5-mylook-font {
  flex: 1 1 240px;
}

.nbv5-mylook-font {
  min-width: 190px;
  max-width: 360px;
}


.nbv5-mylook-fontpicker {
  position: relative;
  min-width: 220px;
}

.nbv5-mylook-fonttrigger {
  width: 100%;
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: inherit;
  text-align: left;
}

.nbv5-mylook-fonttrigger:hover {
  background: rgba(255,255,255,.09);
}

.nbv5-mylook-fonttrigger:focus,
.nbv5-mylook-fonttrigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,.10);
}

.nbv5-mylook-fonttrigger-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nbv5-mylook-fonttrigger-caret {
  flex: 0 0 auto;
  font-size: 11px;
  opacity: .8;
}

.nbv5-mylook-fontmenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1200;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(20,20,24,.98);
  box-shadow: 0 18px 34px rgba(0,0,0,.34);
}

.nbv5-mylook-fontitem {
  width: 100%;
  display: block;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
}

.nbv5-mylook-fontitem:hover,
.nbv5-mylook-fontitem:focus,
.nbv5-mylook-fontitem:focus-visible {
  outline: none;
  background: rgba(255,255,255,.08);
}

.nbv5-mylook-fontitem.is-active {
  background: rgba(255,255,255,.14);
}

.nbv5-mylook-fontitem-label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nbv5-mylook-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 10px !important;
  line-height: 1.1 !important;
  min-width: 34px;
  border: 1px solid #9aa0a6 !important;
  color: #111827 !important;
  background: #f3f4f6 !important;
  box-shadow: none !important;
}

.nbv5-mylook-btn:hover {
  background: #e5e7eb !important;
  border-color: #6b7280 !important;
}

.nbv5-mylook-btn:focus,
.nbv5-mylook-btn:focus-visible {
  outline: 2px solid #2563eb !important;
  outline-offset: 2px;
}

.nbv5-mylook-btn.active {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #ffffff !important;
}

.nbv5-mylook-color {
  width: 42px;
  padding: 0;
  height: 30px;
}

.nbv5-mylook-hex {
  width: 92px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Keep Bootstrap form-switch from sliding left inside tiles */
.nbv5-mylook-row .form-switch {
  padding-left: 0 !important;
}

.nbv5-mylook-row .form-switch .form-check-input {
  margin-left: 0 !important;
}

.nbv5-mylook-graddeg {
  width: 140px;
}

.nbv5-mylook-gradtoggle {
  margin: 0;
}

.nbv5-mylook-gradfields {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nbv5-mylook-gradfields.is-off {
  opacity: .55;
  pointer-events: none;
}

.nbv5-mylook-gradanim {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nbv5-mylook-gradanim .form-check-label {
  font-size: 12px;
  opacity: .85;
}

.nbv5-mylook-preview {
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 12px;
  padding: 8px;
  background: rgba(0,0,0,0.02);
  margin-top: 4px;
}

.nbv5-mylook-preview.is-off {
  opacity: .55;
}

.nbv5-mylook-preview-label {
  font-size: 12px;
  opacity: .75;
  margin-bottom: 6px;
}

.nbv5-mylook-preview-box {
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 10px;
  padding: 10px;
  background-color: rgba(0,0,0,0.03);
  min-height: 110px;
  font-size: 16px;
  line-height: 1.35;
}

@media (max-width: 767.98px) {
  .nbv5-mylook-head {
    align-items: stretch;
  }

  .nbv5-mylook-headactions {
    width: 100%;
    justify-content: space-between;
  }

  .nbv5-mylook-state {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* Activity pane friendly output (no pills/icons) */ (no pills/icons) */
.nbv5-activity-text {
  white-space: pre-wrap;
}


/* ===============================
   Room Settings Modal (IRCwx PROPs)
   =============================== */

#nbv5RoomSettingsModal.nbv5-roomprops-modal {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none;
  z-index: 5015 !important;
}

/* Bootstrap defaults .modal { display:none; } so force fixed overlay show/hide like other V5 modals */
#nbv5RoomSettingsModal.modal.show {
  display: block !important;
}

#nbv5RoomSettingsModal.modal:not(.show) {
  display: none !important;
}

#nbv5RoomSettingsModal .nbv5-roomprops-dialog {
  pointer-events: auto;
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  width: min(620px, calc(100vw - 20px)) !important;
  max-height: calc(100vh - (env(safe-area-inset-top, 0px) + 24px)) !important;
}

#nbv5RoomSettingsModal .nbv5-modal {
  border-radius: 16px;
  overflow: hidden;
  background: var(--v5-menu-bg, #1E4864) !important;
  color: #ffffff;
  border: 2px solid var(--v5-paneheader-bg, #285E82) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}

#nbv5RoomSettingsModal .modal-header {
  background: var(--v5-paneheader-bg, #285E82) !important;
  border-bottom: 1px solid rgba(0,0,0,.12);
  padding: 8px 14px 7px;
}

#nbv5RoomSettingsModal .modal-title {
  margin-bottom: 0;
}

#nbv5RoomSettingsModal .modal-body,
#nbv5RoomSettingsModal .modal-footer {
  background: transparent !important;
  color: inherit;
}

#nbv5RoomSettingsModal .form-control {
  background: rgba(0,0,0,.15) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}

#nbv5RoomSettingsModal .form-select {
  background: rgba(0,0,0,.15) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}

#nbv5RoomSettingsModal .form-select option {
  color: #111827;
}

#nbv5RoomSettingsModal .form-control::placeholder {
  color: rgba(255,255,255,.65) !important;
}

#nbv5RoomSettingsModal .form-text {
  color: rgba(255,255,255,.72) !important;
}

#nbv5RoomSettingsModal .nbv5-prop-setbtn {
  border-radius: 0 !important;
  margin-left: 1px !important;
  padding: .30rem .60rem !important;
  font-weight: 700;
  letter-spacing: .2px;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.92) !important;
}

#nbv5RoomSettingsModal .nbv5-prop-setbtn:hover,
#nbv5RoomSettingsModal .nbv5-prop-setbtn:focus {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.30) !important;
  color: #ffffff !important;
}

#nbv5RoomSettingsModal .nbv5-prop-setbtn:disabled {
  opacity: .45;
}

#nbv5RoomSettingsModal .nbv5-prop-lockedtag {
  opacity: .85;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.18);
}

#nbv5RoomSettingsModal .nbv5-prop-lock {
  margin: 0;
}

#nbv5RoomSettingsModal .nbv5-prop-lock .form-check-label {
  opacity: .85;
}

#nbv5RoomSettingsModal .modal-header .btn-close {
  filter: invert(1);
  opacity: .9;
}

/* Outline buttons inside the modal need theme-aware text */
#nbv5RoomSettingsModal .btn-outline-secondary {
  color: rgba(255,255,255,.88) !important;
  border-color: rgba(255,255,255,.22) !important;
}

#nbv5RoomSettingsModal .btn-outline-secondary:hover,
#nbv5RoomSettingsModal .btn-outline-secondary:focus {
  color: #ffffff !important;
  border-color: rgba(255,255,255,.32) !important;
  background: rgba(255,255,255,.08) !important;
}

#nbv5RoomSettingsModal .modal-body {
  max-height: calc(100vh - 220px);
  overflow: auto;
}

#nbv5RoomSettingsModal .nbv5-roomprops-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  pointer-events: auto;
}

.nbv5-roomprops-sub {
  margin-bottom: 10px;
  opacity: .9;
}

.nbv5-roomprops-room {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}

.nbv5-roomprops-label {
  opacity: .75;
}

html[data-v5thememode='light'] #nbv5RoomSettingsModal .nbv5-modal {
  color: #111827;
  box-shadow: 0 18px 48px rgba(60,45,30,.22);
}

html[data-v5thememode='light'] #nbv5RoomSettingsModal .form-control {
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #111827 !important;
}

html[data-v5thememode='light'] #nbv5RoomSettingsModal .form-select {
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #111827 !important;
}

html[data-v5thememode='light'] #nbv5RoomSettingsModal .form-control::placeholder {
  color: rgba(17,24,39,.55) !important;
}

html[data-v5thememode='light'] #nbv5RoomSettingsModal .form-text {
  color: rgba(17,24,39,.70) !important;
}

html[data-v5thememode='light'] #nbv5RoomSettingsModal .nbv5-prop-setbtn {
  background: rgba(0,0,0,.06) !important;
  border-color: rgba(0,0,0,.16) !important;
  color: rgba(0,0,0,.88) !important;
}

html[data-v5thememode='light'] #nbv5RoomSettingsModal .nbv5-prop-setbtn:hover,
html[data-v5thememode='light'] #nbv5RoomSettingsModal .nbv5-prop-setbtn:focus {
  background: rgba(0,0,0,.09) !important;
  border-color: rgba(0,0,0,.22) !important;
  color: rgba(0,0,0,.92) !important;
}

html[data-v5thememode='light'] #nbv5RoomSettingsModal .nbv5-prop-lockedtag {
  border-color: rgba(0,0,0,.18);
  background: rgba(255,255,255,.65);
}

html[data-v5thememode='light'] #nbv5RoomSettingsModal .modal-header .btn-close {
  filter: none;
  opacity: .75;
}

html[data-v5thememode='light'] #nbv5RoomSettingsModal .btn-outline-secondary {
  color: rgba(0,0,0,.85) !important;
  border-color: rgba(0,0,0,.22) !important;
  background: rgba(255,255,255,.55) !important;
}

html[data-v5thememode='light'] #nbv5RoomSettingsModal .btn-outline-secondary:hover,
html[data-v5thememode='light'] #nbv5RoomSettingsModal .btn-outline-secondary:focus {
  color: rgba(0,0,0,.92) !important;
  border-color: rgba(0,0,0,.32) !important;
}


/* ===============================
   Room Modes Modal
   - Uses the same fixed overlay pattern as Room Settings (PROPs)
   =============================== */

#nbv5RoomModesModal.nbv5-roomprops-modal {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none;
  z-index: 5015 !important;
}

/* Bootstrap defaults .modal { display:none; } so force fixed overlay show/hide */
#nbv5RoomModesModal.modal.show {
  display: block !important;
}

#nbv5RoomModesModal.modal:not(.show) {
  display: none !important;
}

#nbv5RoomModesModal .nbv5-roomprops-dialog {
  pointer-events: auto;
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  width: min(620px, calc(100vw - 20px)) !important;
  max-height: calc(100vh - (env(safe-area-inset-top, 0px) + 24px)) !important;
}

#nbv5RoomModesModal .nbv5-modal {
  border-radius: 16px;
  overflow: hidden;
  background: var(--v5-menu-bg, #1E4864) !important;
  color: #ffffff;
  border: 2px solid var(--v5-paneheader-bg, #285E82) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}

#nbv5RoomModesModal .modal-header {
  background: var(--v5-paneheader-bg, #285E82) !important;
  border-bottom: 1px solid rgba(0,0,0,.12);
  padding: 8px 14px 7px;
}

#nbv5RoomModesModal .modal-title {
  margin-bottom: 0;
}

#nbv5RoomModesModal .modal-body,
#nbv5RoomModesModal .modal-footer {
  background: transparent !important;
  color: inherit;
}

#nbv5RoomModesModal .form-control {
  background: rgba(0,0,0,.15) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}

#nbv5RoomModesModal .form-control::placeholder {
  color: rgba(255,255,255,.65) !important;
}

#nbv5RoomModesModal .nbv5-prop-setbtn {
  border-radius: 0 !important;
  margin-left: 1px !important;
  padding: .30rem .60rem !important;
  font-weight: 700;
  letter-spacing: .2px;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.92) !important;
}

#nbv5RoomModesModal .nbv5-prop-setbtn:hover,
#nbv5RoomModesModal .nbv5-prop-setbtn:focus {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.30) !important;
  color: #ffffff !important;
}

#nbv5RoomModesModal .nbv5-prop-setbtn:disabled {
  opacity: .45;
}

#nbv5RoomModesModal .modal-header .btn-close {
  filter: invert(1);
  opacity: .9;
}

/* Outline buttons inside the modal need theme-aware text */
#nbv5RoomModesModal .btn-outline-secondary {
  color: rgba(255,255,255,.88) !important;
  border-color: rgba(255,255,255,.22) !important;
}

#nbv5RoomModesModal .btn-outline-secondary:hover,
#nbv5RoomModesModal .btn-outline-secondary:focus {
  color: #ffffff !important;
  border-color: rgba(255,255,255,.32) !important;
  background: rgba(255,255,255,.08) !important;
}

#nbv5RoomModesModal .modal-body {
  max-height: calc(100vh - 220px);
  overflow: auto;
}

html[data-v5thememode='light'] #nbv5RoomModesModal .nbv5-modal {
  color: #111827;
  box-shadow: 0 18px 48px rgba(60,45,30,.22);
}

html[data-v5thememode='light'] #nbv5RoomModesModal .form-control {
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #111827 !important;
}

html[data-v5thememode='light'] #nbv5RoomModesModal .form-control::placeholder {
  color: rgba(17,24,39,.55) !important;
}

html[data-v5thememode='light'] #nbv5RoomModesModal .nbv5-prop-setbtn {
  background: rgba(0,0,0,.06) !important;
  border-color: rgba(0,0,0,.16) !important;
  color: rgba(0,0,0,.88) !important;
}

html[data-v5thememode='light'] #nbv5RoomModesModal .nbv5-prop-setbtn:hover,
html[data-v5thememode='light'] #nbv5RoomModesModal .nbv5-prop-setbtn:focus {
  background: rgba(0,0,0,.09) !important;
  border-color: rgba(0,0,0,.22) !important;
  color: rgba(0,0,0,.92) !important;
}

html[data-v5thememode='light'] #nbv5RoomModesModal .modal-header .btn-close {
  filter: none;
  opacity: .75;
}

html[data-v5thememode='light'] #nbv5RoomModesModal .btn-outline-secondary {
  color: rgba(0,0,0,.85) !important;
  border-color: rgba(0,0,0,.22) !important;
  background: rgba(255,255,255,.55) !important;
}

html[data-v5thememode='light'] #nbv5RoomModesModal .btn-outline-secondary:hover,
html[data-v5thememode='light'] #nbv5RoomModesModal .btn-outline-secondary:focus {
  color: rgba(0,0,0,.92) !important;
  border-color: rgba(0,0,0,.32) !important;
}


/* ===============================
   Room Access Modal
   - Must match overall theme mode (light/dark)
   - Must float as fixed overlay (must NOT push layout)
   =============================== */

#nbv5RoomAccessModal.nbv5-roomprops-modal {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none;
  z-index: 5015 !important;
}

#nbv5RoomAccessModal {
  --bs-modal-width: 1100px;
}

/* Bootstrap defaults .modal { display:none; } so force fixed overlay show/hide */
#nbv5RoomAccessModal.modal.show {
  display: block !important;
}

#nbv5RoomAccessModal.modal:not(.show) {
  display: none !important;
}

#nbv5RoomAccessModal .modal-dialog {
  pointer-events: auto;
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  width: min(1100px, calc(100vw - 20px)) !important;
  max-width: 1100px !important;
  max-height: calc(100vh - (env(safe-area-inset-top, 0px) + 24px)) !important;
}

#nbv5RoomAccessModal .nbv5-modal {
  border-radius: 16px;
  overflow: hidden;
  background: var(--v5-menu-bg, #1E4864) !important;
  color: #ffffff;
  border: 2px solid var(--v5-paneheader-bg, #285E82) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}

#nbv5RoomAccessModal .modal-header {
  background: var(--v5-paneheader-bg, #285E82) !important;
  border-bottom: 1px solid rgba(0,0,0,.12);
  padding: 8px 14px 7px;
}

#nbv5RoomAccessModal .nbv5-roomaccess-header {
  align-items: center;
}

#nbv5RoomAccessModal .modal-body,
#nbv5RoomAccessModal .modal-footer {
  background: transparent !important;
  color: inherit;
  padding: 10px 14px 12px;
}

#nbv5RoomAccessModal .modal-header .btn-close {
  filter: invert(1);
  opacity: .9;
}

#nbv5RoomAccessModal .form-control,
#nbv5RoomAccessModal .form-select {
  background: rgba(0,0,0,.15) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}

#nbv5RoomAccessModal .form-control::placeholder {
  color: rgba(255,255,255,.65) !important;
}

#nbv5RoomAccessModal .btn-outline-secondary {
  color: rgba(255,255,255,.88) !important;
  border-color: rgba(255,255,255,.22) !important;
}

#nbv5RoomAccessModal .btn-outline-secondary:hover,
#nbv5RoomAccessModal .btn-outline-secondary:focus {
  color: #ffffff !important;
  border-color: rgba(255,255,255,.32) !important;
  background: rgba(255,255,255,.08) !important;
}

#nbv5RoomAccessModal .nbv5-prop-setbtn {
  border-radius: 12px !important;
  padding: .34rem .70rem !important;
  font-weight: 800;
  letter-spacing: .2px;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.92) !important;
}

#nbv5RoomAccessModal .nbv5-prop-setbtn:hover,
#nbv5RoomAccessModal .nbv5-prop-setbtn:focus {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.30) !important;
  color: #ffffff !important;
}

#nbv5RoomAccessModal .modal-body {
  max-height: calc(100vh - 190px);
  min-height: 170px;
  overflow: auto;
}

#nbv5RoomAccessModal .nbv5-roomaccess-topbar {
  margin-bottom: 8px !important;
}

.nbv5-roomaccess-tabs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.nbv5-roomaccess-tab {
  appearance: none;
  border: 1px solid rgba(255,255,255,.20) !important;
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 999px !important;
  padding: .18rem .58rem !important;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}

.nbv5-roomaccess-tab:disabled {
  opacity: .72;
  cursor: default;
}

.nbv5-roomaccess-tab.is-active {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.34) !important;
  color: #ffffff !important;
}

#nbv5RoomAccessModal .nbv5-roomaccess-tablewrap {
  border: 1px solid var(--nbv5-pane-border) !important;
  border-radius: 10px;
  overflow: auto;
  min-height: 180px;
  max-height: 300px;
  background: var(--nbv5-pane-bg) !important;
  color: var(--nbv5-pane-text) !important;
}

#nbv5RoomAccessModal .nbv5-roomaccess-table {
  color: inherit !important;
  margin: 0;
  min-width: 760px !important;
  background: var(--nbv5-pane-bg) !important;
  align-self: stretch;
}


:root[data-chat-tone="dark"][data-chat-theme] #nbv5RoomAccessModal .nbv5-roomaccess-tablewrap {
  color: var(--nbv5-pane-text-bright, var(--nbv5-pane-text)) !important;
}

:root[data-chat-tone="dark"][data-chat-theme] #nbv5RoomAccessModal .nbv5-roomaccess-table {
  color: inherit !important;
}

#nbv5RoomAccessModal .nbv5-roomaccess-table tbody,
#nbv5RoomAccessModal .nbv5-roomaccess-table tbody tr,
#nbv5RoomAccessModal .nbv5-roomaccess-table tbody td {
  background: var(--nbv5-pane-bg) !important;
  color: inherit !important;
}

/* Prevent cramped headers/columns (allow horizontal scroll in .table-responsive) */
#nbv5RoomAccessModal .nbv5-roomaccess-table thead th:nth-child(2),
#nbv5RoomAccessModal .nbv5-roomaccess-table tbody td:nth-child(2) {
  width: 96px !important; /* Type */
  white-space: nowrap;
}

#nbv5RoomAccessModal .nbv5-roomaccess-table thead th:nth-child(4),
#nbv5RoomAccessModal .nbv5-roomaccess-table tbody td:nth-child(4) {
  width: 90px !important; /* Time */
  white-space: nowrap;
}

#nbv5RoomAccessModal .nbv5-roomaccess-table thead th:nth-child(5),
#nbv5RoomAccessModal .nbv5-roomaccess-table tbody td:nth-child(5) {
  width: 140px !important; /* Set by */
  white-space: nowrap;
}

#nbv5RoomAccessModal .nbv5-roomaccess-table thead th {
  background: color-mix(in srgb, var(--nbv5-pane-bg) 88%, var(--nbv5-pane-border)) !important;
  color: var(--nbv5-pane-text) !important;
  border-bottom-color: var(--nbv5-pane-border) !important;
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}

:root[data-chat-tone="dark"][data-chat-theme] #nbv5RoomAccessModal .nbv5-roomaccess-table thead th {
  color: var(--nbv5-pane-text-bright, var(--nbv5-pane-text)) !important;
}

#nbv5RoomAccessModal .nbv5-roomaccess-table td,
#nbv5RoomAccessModal .nbv5-roomaccess-table th {
  border-color: var(--nbv5-pane-border) !important;
  vertical-align: middle;
  padding-top: .34rem;
  padding-bottom: .34rem;
}

#nbv5RoomAccessModal .nbv5-roomaccess-clearbar .btn,
#nbv5RoomAccessModal .nbv5-roomaccess-table .btn {
  padding-top: .18rem;
  padding-bottom: .18rem;
}

#nbv5RoomAccessModal .nbv5-roomaccess-table .btn-outline-secondary {
  color: inherit !important;
  border-color: var(--nbv5-pane-border) !important;
  background: transparent !important;
}

#nbv5RoomAccessModal .nbv5-roomaccess-table .btn-outline-secondary:hover,
#nbv5RoomAccessModal .nbv5-roomaccess-table .btn-outline-secondary:focus {
  color: inherit !important;
  border-color: var(--nbv5-pane-border) !important;
  background: var(--nbv5-pane-item-hover) !important;
}

#nbv5RoomAccessModal .nbv5-roomaccess-table .btn-outline-secondary i {
  color: inherit !important;
}

#nbv5RoomAccessModal .nbv5-roomaccess-empty {
  height: 134px;
  vertical-align: middle;
  background: var(--nbv5-pane-bg) !important;
  color: var(--nbv5-pane-sep-text) !important;
}

:root[data-chat-tone="dark"][data-chat-theme] #nbv5RoomAccessModal .nbv5-roomaccess-empty {
  color: var(--nbv5-pane-sep-text-bright, var(--nbv5-pane-sep-text)) !important;
}

.nbv5-roomaccess-ico {
  opacity: .92;
}

.nbv5-roomaccess-ico.is-owner { color: #D7B700; }
.nbv5-roomaccess-ico.is-host { color: brown; }
.nbv5-roomaccess-ico.is-deny { color: red; }
.nbv5-roomaccess-ico.is-grant { color: orange; }
.nbv5-roomaccess-ico.is-voice { color: purple; }

html[data-v5thememode='light'] #nbv5RoomAccessModal .nbv5-modal {
  color: #111827;
  box-shadow: 0 18px 48px rgba(60,45,30,.22);
}

html[data-v5thememode='light'] #nbv5RoomAccessModal .form-control,
html[data-v5thememode='light'] #nbv5RoomAccessModal .form-select {
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #111827 !important;
}

html[data-v5thememode='light'] #nbv5RoomAccessModal .form-control::placeholder {
  color: rgba(17,24,39,.55) !important;
}

html[data-v5thememode='light'] #nbv5RoomAccessModal .modal-header .btn-close {
  filter: none;
  opacity: .75;
}

html[data-v5thememode='light'] #nbv5RoomAccessModal .btn-outline-secondary {
  color: rgba(0,0,0,.85) !important;
  border-color: rgba(0,0,0,.22) !important;
  background: rgba(255,255,255,.55) !important;
}

html[data-v5thememode='light'] #nbv5RoomAccessModal .btn-outline-secondary:hover,
html[data-v5thememode='light'] #nbv5RoomAccessModal .btn-outline-secondary:focus {
  color: rgba(0,0,0,.92) !important;
  border-color: rgba(0,0,0,.32) !important;
}

html[data-v5thememode='light'] .nbv5-roomaccess-tab {
  border-color: rgba(0,0,0,.18) !important;
  background: rgba(0,0,0,.05) !important;
  color: rgba(0,0,0,.88) !important;
}

html[data-v5thememode='light'] .nbv5-roomaccess-tab.is-active {
  background: rgba(0,0,0,.09) !important;
  border-color: rgba(0,0,0,.26) !important;
  color: rgba(0,0,0,.92) !important;
}

html[data-v5thememode='light'] #nbv5RoomAccessModal .nbv5-roomaccess-tablewrap {
  border-color: rgba(0,0,0,.12) !important;
}

html[data-v5thememode='light'] #nbv5RoomAccessModal .nbv5-roomaccess-table thead th {
  background: rgba(0,0,0,.06) !important;
  color: rgba(0,0,0,.88) !important;
  border-bottom-color: rgba(0,0,0,.10) !important;
}

html[data-v5thememode='light'] #nbv5RoomAccessModal .nbv5-roomaccess-table td,
html[data-v5thememode='light'] #nbv5RoomAccessModal .nbv5-roomaccess-table th {
  border-color: rgba(0,0,0,.08) !important;
}


/* ===============================
   Room Key Modal (+k)
   - Must match overall theme mode (light/dark)
   - Must float as fixed overlay (must NOT push layout)
   =============================== */

#nbv5RoomKeyModal.modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5016 !important;
  pointer-events: none; /* clicks only on the dialog */
}

#nbv5RoomKeyModal.modal.show {
  display: block !important;
}

#nbv5RoomKeyModal.modal:not(.show) {
  display: none !important;
}

#nbv5RoomKeyModal .nbv5-roomkey-dialog {
  pointer-events: auto;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: min(520px, calc(100vw - 20px)) !important;
  max-height: calc(100vh - (env(safe-area-inset-top, 0px) + 24px)) !important;
}

#nbv5RoomKeyModal .nbv5-modal {
  border-radius: 16px;
  overflow: hidden;
  background: var(--v5-menu-bg, #1E4864) !important;
  color: #ffffff;
  border: 2px solid var(--v5-paneheader-bg, #285E82) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}

#nbv5RoomKeyModal .modal-header {
  background: var(--v5-paneheader-bg, #285E82) !important;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

#nbv5RoomKeyModal .modal-body,
#nbv5RoomKeyModal .modal-footer {
  background: transparent !important;
  color: inherit;
}

#nbv5RoomKeyModal .form-control {
  background: rgba(0,0,0,.15) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}

#nbv5RoomKeyModal .form-control::placeholder {
  color: rgba(255,255,255,.65) !important;
}

#nbv5RoomKeyModal .modal-header .btn-close {
  filter: invert(1);
  opacity: .9;
}

html[data-v5thememode='light'] #nbv5RoomKeyModal .nbv5-modal {
  color: #111827;
  box-shadow: 0 18px 48px rgba(60,45,30,.22);
}

html[data-v5thememode='light'] #nbv5RoomKeyModal .form-control {
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #111827 !important;
}

html[data-v5thememode='light'] #nbv5RoomKeyModal .form-control::placeholder {
  color: rgba(17,24,39,.55) !important;
}

html[data-v5thememode='light'] #nbv5RoomKeyModal .modal-header .btn-close {
  filter: none;
  opacity: .75;
}

/* ===============================
   Away Message Modal (stored message)
   - Must match theme + pane brightness
   =============================== */

/* Force fixed overlay behavior (prevents pushing layout even if modal CSS is incomplete) */
#nbv5AwayMsgModal.modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5016 !important;
  pointer-events: none; /* clicks only on the dialog */
}

#nbv5AwayMsgModal.modal.show {
  display: block !important;
}

#nbv5AwayMsgModal.modal:not(.show) {
  display: none !important;
}

/* Ensure backdrop covers viewport */
.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
}

#nbv5AwayMsgModal .nbv5-awaymsg-dialog {
  pointer-events: auto;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: min(560px, calc(100vw - 20px)) !important;
  max-height: calc(100vh - (env(safe-area-inset-top, 0px) + 24px)) !important;
}

#nbv5AwayMsgModal .nbv5-modal {
  border-radius: 16px;
  overflow: hidden;
  background: var(--v5-menu-bg, #1E4864) !important;
  color: #ffffff;
  border: 2px solid var(--v5-paneheader-bg, #285E82) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}

#nbv5AwayMsgModal .modal-header {
  background: var(--v5-paneheader-bg, #285E82) !important;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

#nbv5AwayMsgModal .modal-body,
#nbv5AwayMsgModal .modal-footer {
  background: transparent !important;
  color: inherit;
}

#nbv5AwayMsgModal .form-control {
  background: rgba(0,0,0,.15) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}

#nbv5AwayMsgModal .form-control::placeholder {
  color: rgba(255,255,255,.65) !important;
}

#nbv5AwayMsgModal .form-text {
  color: rgba(255,255,255,.72) !important;
}

#nbv5AwayMsgModal .modal-header .btn-close {
  filter: invert(1);
  opacity: .9;
}

/* Outline buttons inside the modal need theme-aware text */
#nbv5AwayMsgModal .btn-outline-secondary {
  color: rgba(255,255,255,.88) !important;
  border-color: rgba(255,255,255,.22) !important;
}

#nbv5AwayMsgModal .btn-outline-secondary:hover,
#nbv5AwayMsgModal .btn-outline-secondary:focus {
  color: #ffffff !important;
  border-color: rgba(255,255,255,.32) !important;
  background: rgba(255,255,255,.08) !important;
}

html[data-v5thememode='light'] #nbv5AwayMsgModal .nbv5-modal {
  color: #111827;
  box-shadow: 0 18px 48px rgba(60,45,30,.22);
}

html[data-v5thememode='light'] #nbv5AwayMsgModal .form-control {
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #111827 !important;
}

html[data-v5thememode='light'] #nbv5AwayMsgModal .form-control::placeholder {
  color: rgba(17,24,39,.55) !important;
}

html[data-v5thememode='light'] #nbv5AwayMsgModal .form-text {
  color: rgba(17,24,39,.70) !important;
}

html[data-v5thememode='light'] #nbv5AwayMsgModal .modal-header .btn-close {
  filter: none;
  opacity: .75;
}

html[data-v5thememode='light'] #nbv5AwayMsgModal .btn-outline-secondary {
  color: rgba(0,0,0,.85) !important;
  border-color: rgba(0,0,0,.22) !important;
  background: rgba(255,255,255,.55) !important;
}

html[data-v5thememode='light'] #nbv5AwayMsgModal .btn-outline-secondary:hover,
html[data-v5thememode='light'] #nbv5AwayMsgModal .btn-outline-secondary:focus {
  color: rgba(0,0,0,.92) !important;
  border-color: rgba(0,0,0,.32) !important;
  background: rgba(255,255,255,.78) !important;
}

/* Toast */
.nbv5-toast {
  position: fixed;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 6000;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.95rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.nbv5-toast.is-ok {
  background: rgba(20, 140, 90, .95);
  color: #ffffff;
}

.nbv5-toast.is-error {
  background: rgba(170, 40, 40, .95);
  color: #ffffff;
}

/* Animated gradient text: slowly moves left to right and back. */
@keyframes nbv5GradMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  [style*="nbv5GradMove"] {
    animation: none !important;
    background-position: 50% 50% !important;
  }
}


/* V5 Context Menu (compact) */
.nbv5-ctx-menu{
  min-width: 150px;
  max-width: 220px;
  border-radius: 10px;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  overflow: hidden;
  background: rgba(31,35,40,.92) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.06);
  animation: nbv5CtxPop .14s ease-out;
  transition: box-shadow .14s ease, background-color .14s ease, border-color .14s ease;
}
.nbv5-ctx-item{
  width: 100%;
  text-align: left;
  padding: 7px 11px;
  background: transparent !important;
  border: 0;
  color: #e6edf3;
  font-size: 13px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: background-color .14s ease;
}
.nbv5-ctx-label{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbv5-ctx-sub{ flex: 0 0 auto; opacity: .72; font-size: 12px; white-space: nowrap; }
.nbv5-ctx-item:hover{ background: rgba(255,255,255,.05) !important; }
.nbv5-ctx-item.is-disabled{ opacity: .45; cursor: not-allowed; }
.nbv5-ctx-item:disabled{ pointer-events: none; }

/* Modern header rows */
.nbv5-ctx-item.is-title{
  font-weight: 700;
  font-size: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: rgba(255,255,255,.04) !important;
}
.nbv5-ctx-item.is-sub{
  border-bottom: 1px solid rgba(255,255,255,.08);
}
@keyframes nbv5CtxPop{ from{ transform: scale(.98); opacity:.4; } to{ transform: scale(1); opacity:1; } }
/* ==========================================================
   Pill flattening (system lines) - Feb 14, 2026
   Goal: keep the existing layout/CSS, but remove the "capsule"
   look (no rounded background bar) and instead use colored
   icon + text per event type.
   ========================================================== */

/* Base: stop looking like pills */
.nbv5-pill {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Some lines may contain only the pill; keep it aligned */
.nbv5-pill-ico {
  opacity: 1 !important;
}

/* Remove the subtle tint hooks (we'll color text instead) */
.nbv5-pill-connected,
.nbv5-pill-join,
.nbv5-pill-part,
.nbv5-pill-quit,
.nbv5-pill-nick,
.nbv5-pill-mode,
.nbv5-pill-topic,
.nbv5-pill-kick,
.nbv5-pill-notice,
.nbv5-pill-onjoin,
.nbv5-pill-info,
.nbv5-pill-nickinuse,
.nbv5-pill-action {
  border-color: transparent !important;
  background: transparent !important;
}

/* Colored text (fixed, consistent in light/dark) */
.nbv5-pill-connected,
.nbv5-pill-join { color: #2F855A !important; }     /* muted green */
.nbv5-pill-part,
.nbv5-pill-quit { color: #6B7280 !important; }     /* gray */
.nbv5-pill-nick { color: #2C6AA3 !important; }     /* muted blue */
.nbv5-pill-mode { color: #7C5AC9 !important; }     /* muted purple */
.nbv5-pill-topic { color: #2B8C85 !important; }    /* muted teal */
.nbv5-pill-kick { color: #C44545 !important; }     /* muted red */
.nbv5-pill-notice,
.nbv5-pill-onjoin { color: #B7791F !important; }   /* muted amber */
.nbv5-pill-info { color: #4C78A8 !important; }     /* muted blue */
.nbv5-pill-nickinuse { color: #C44545 !important; font-weight: 400 !important; } /* warning */
.nbv5-pill-action { color: #8A6A3F !important; }   /* muted brown */

/* Optional: keep system lines from stretching weirdly */
.nbv5-pill-text {
  display: inline !important;
}


/* ===============================
   Control Panel (Phase 1: 2026 cards + toggles)
   UI-only: scoped to .nbv5-control to avoid layout regressions elsewhere.
   =============================== */

/* Pane-aware Control Panel theming
   - Keeps CP readable when "Dark Pane" is enabled
   - Scoped to .nbv5-control so the rest of Bootstrap stays untouched */
.nbv5-control{
  --nbv5-cp-card-bg: #ffffff;
  --nbv5-cp-card-border: #d8dde3;
  --nbv5-cp-card-shadow: 0 1px 0 rgba(16, 24, 40, .04);

  --nbv5-cp-ico-bg: #f1f5f9;
  --nbv5-cp-ico-fg: #0f172a;

  --nbv5-cp-title: #0f172a;
  --nbv5-cp-sub: #475569;

  --nbv5-cp-label: #0f172a;
  --nbv5-cp-help: #64748b;
  --nbv5-cp-intro: #475569;

  --nbv5-cp-tile-bg: #f8fafc;
  --nbv5-cp-tile-border: #e5e7eb;

  --nbv5-cp-soft-bg: rgba(0,0,0,0.02);
  --nbv5-cp-soft-bg-2: rgba(0,0,0,0.03);

  --nbv5-cp-btn-bg: #f3f4f6;
  --nbv5-cp-btn-border: #9aa0a6;
  --nbv5-cp-btn-fg: #111827;
  --nbv5-cp-btn-hover-bg: #e5e7eb;
  --nbv5-cp-btn-hover-border: #6b7280;
  --nbv5-cp-btn-active-bg: #111827;
  --nbv5-cp-btn-active-border: #111827;
  --nbv5-cp-btn-active-fg: #ffffff;

  --nbv5-cp-fontpicker-bg: #f8fafc;
  --nbv5-cp-fontpicker-border: #cbd5e1;
  --nbv5-cp-fontpicker-fg: #0f172a;
  --nbv5-cp-fontpicker-hover-bg: #e2e8f0;
  --nbv5-cp-fontpicker-active-bg: #dbeafe;
  --nbv5-cp-fontpicker-shadow: 0 18px 34px rgba(15, 23, 42, .16);

  --nbv5-cp-focus: #2563eb;
}

[data-chat-tone="dark"] .nbv5-control{
  --nbv5-cp-card-bg: rgba(255,255,255,0.04);
  --nbv5-cp-card-border: rgba(255,255,255,0.10);
  --nbv5-cp-card-shadow: 0 1px 0 rgba(0,0,0,.25);

  --nbv5-cp-ico-bg: rgba(255,255,255,0.07);
  --nbv5-cp-ico-fg: var(--nbv5-pane-text);

  --nbv5-cp-title: var(--nbv5-pane-text);
  --nbv5-cp-sub: var(--nbv5-muted);

  --nbv5-cp-label: var(--nbv5-pane-text);
  --nbv5-cp-help: var(--nbv5-muted);
  --nbv5-cp-intro: var(--nbv5-muted);

  --nbv5-cp-tile-bg: rgba(255,255,255,0.03);
  --nbv5-cp-tile-border: rgba(255,255,255,0.09);

  --nbv5-cp-soft-bg: rgba(255,255,255,0.04);
  --nbv5-cp-soft-bg-2: rgba(255,255,255,0.06);

  --nbv5-cp-btn-bg: rgba(255,255,255,0.06);
  --nbv5-cp-btn-border: rgba(255,255,255,0.18);
  --nbv5-cp-btn-fg: var(--nbv5-pane-text);
  --nbv5-cp-btn-hover-bg: rgba(255,255,255,0.10);
  --nbv5-cp-btn-hover-border: rgba(255,255,255,0.26);
  --nbv5-cp-btn-active-bg: rgba(255,255,255,0.14);
  --nbv5-cp-btn-active-border: rgba(255,255,255,0.30);
  --nbv5-cp-btn-active-fg: var(--nbv5-pane-text);

  --nbv5-cp-fontpicker-bg: rgba(20,20,24,.98);
  --nbv5-cp-fontpicker-border: rgba(255,255,255,.14);
  --nbv5-cp-fontpicker-fg: var(--nbv5-pane-text);
  --nbv5-cp-fontpicker-hover-bg: rgba(255,255,255,.08);
  --nbv5-cp-fontpicker-active-bg: rgba(255,255,255,.14);
  --nbv5-cp-fontpicker-shadow: 0 18px 34px rgba(0,0,0,.34);

  --nbv5-cp-focus: #60a5fa;

  /* Bootstrap variable overrides (scoped to Control Panel only) */
  --bs-body-bg: transparent;
  --bs-body-color: var(--nbv5-pane-text);
  --bs-emphasis-color: var(--nbv5-pane-text);
  --bs-secondary-color: var(--nbv5-muted);
  --bs-tertiary-color: var(--nbv5-muted);
  --bs-border-color: rgba(255,255,255,0.16);
  --bs-secondary-bg: rgba(255,255,255,0.06);
  --bs-tertiary-bg: rgba(255,255,255,0.04);
  --bs-link-color: var(--nbv5-link);
  --bs-link-hover-color: var(--nbv5-link-hover);
}


.nbv5-control .nbv5-cp-card{
  background: var(--nbv5-cp-card-bg);
  border: 1px solid var(--nbv5-cp-card-border);
  border-radius: 14px;
  padding: 8px;
  margin-bottom: 6px;
  box-shadow: var(--nbv5-cp-card-shadow);
}

/* Control Panel: compact, modern layout below "My Message Format" */
.nbv5-control .nbv5-cp-search{
  margin: 8px 0 10px;
}

.nbv5-control .nbv5-cp-searchbox{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border: 1px solid var(--nbv5-cp-card-border);
  border-radius: 12px;
  background: var(--nbv5-cp-card-bg);
  box-shadow: var(--nbv5-cp-card-shadow);
}

.nbv5-control .nbv5-cp-searchico{
  color: var(--nbv5-cp-sub);
  flex: 0 0 auto;
}

.nbv5-control .nbv5-cp-searchinput{
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  min-height: 0;
  color: var(--nbv5-cp-title);
}

.nbv5-control .nbv5-cp-searchinput:focus{
  box-shadow: none;
}

.nbv5-control .nbv5-cp-searchinput::placeholder{
  color: var(--nbv5-cp-sub);
  opacity: 1;
}

.nbv5-control .nbv5-cp-searchclear{
  color: var(--nbv5-cp-sub);
  text-decoration: none;
  padding: 0 2px;
}

.nbv5-control .nbv5-cp-searchclear:hover{
  color: var(--nbv5-cp-title);
}

.nbv5-control .nbv5-cp-grid{
  display: block;
  column-gap: 10px;
  margin-top: 6px;
}

.nbv5-control .nbv5-cp-grid > .nbv5-cp-card{
  display: inline-block;
  width: 100%;
  margin: 0 0 6px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  vertical-align: top;
}

.nbv5-control .nbv5-cp-grid > .nbv5-cp-card.nbv5-cp-card-unotice{
  column-span: all;
}

@media (min-width: 992px){
  .nbv5-control .nbv5-cp-grid{
    column-count: 2;
  }
}

.nbv5-control .nbv5-cp-cardhead{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}

.nbv5-control .nbv5-cp-headleft{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.nbv5-control .nbv5-cp-ico{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nbv5-cp-ico-bg);
  color: var(--nbv5-cp-ico-fg);
  flex: 0 0 auto;
}

.nbv5-control .nbv5-cp-title{
  font-weight: 800;
  font-size: 14px;
  color: var(--nbv5-cp-title);
  line-height: 1.2;
}

.nbv5-control .nbv5-cp-sub{
  font-size: 12px;
  color: var(--nbv5-cp-sub);
  margin-top: 2px;
}

.nbv5-control .nbv5-cp-cardbody{
  padding-top: 0;
}

.nbv5-control .nbv5-cp-card:not(.nbv5-cp-card-format){
  border-radius: 12px;
  padding: 7px;
  margin-bottom: 5px;
}

.nbv5-control .nbv5-cp-card:not(.nbv5-cp-card-format) .nbv5-cp-cardhead{
  margin-bottom: 4px;
}

.nbv5-control .nbv5-cp-card:not(.nbv5-cp-card-format) .nbv5-cp-ico{
  width: 28px;
  height: 28px;
  border-radius: 9px;
}

.nbv5-control .nbv5-cp-card:not(.nbv5-cp-card-format) .nbv5-cp-title{
  font-size: 13px;
}

.nbv5-control .nbv5-cp-card:not(.nbv5-cp-card-format) .nbv5-cp-sub{
  font-size: 11px;
  line-height: 1.3;
  margin-top: 1px;
}

.nbv5-control .nbv5-cp-cardbody > .nbv5-control-row:last-child,
.nbv5-control .nbv5-cp-cardbody > .nbv5-theme-range:last-child,
.nbv5-control .nbv5-cp-cardbody > .d-flex:last-child{
  margin-bottom: 0;
}


.nbv5-control .nbv5-cp-card-settings{
  padding: 7px;
}

.nbv5-control .nbv5-cp-card-settings .nbv5-cp-cardhead{
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--nbv5-cp-tile-border);
}

.nbv5-control .nbv5-cp-card-settings .nbv5-cp-ico{
  width: 28px;
  height: 28px;
  border-radius: 9px;
}

.nbv5-control .nbv5-cp-card-settings .nbv5-cp-title{
  font-size: 13px;
}

.nbv5-control .nbv5-cp-card-settings .nbv5-cp-sub{
  font-size: 11px;
  line-height: 1.25;
  margin-top: 1px;
}

.nbv5-control .nbv5-cp-card-settings .nbv5-cp-cardbody{
  padding: 8px 0 10px;
}

.nbv5-control .nbv5-cp-card-settings .nbv5-control-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label toggle"
    "help toggle";
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  margin: 0 8px 8px;
  padding: 9px 12px 9px 14px;
  border: 1px solid var(--nbv5-cp-tile-border);
  border-radius: 12px;
  background: var(--nbv5-cp-tile-bg);
}

.nbv5-control .nbv5-cp-card-settings .nbv5-control-row:last-child{
  margin-bottom: 0;
}

.nbv5-control .nbv5-cp-card-settings .nbv5-control-row .form-check-input{
  grid-area: toggle;
  justify-self: end;
  margin: 0 10px 0 0;
}

.nbv5-control .nbv5-cp-card-settings .nbv5-control-row .form-check-label{
  grid-area: label;
  display: block;
  margin: 0;
  color: var(--nbv5-cp-label);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  padding-right: 8px;
}

.nbv5-control .nbv5-cp-card-settings .nbv5-control-row .nbv5-control-help{
  grid-area: help;
  margin: 0;
  color: var(--nbv5-cp-help);
  font-size: 11px;
  line-height: 1.3;
}

.nbv5-control .nbv5-cp-card-settings .nbv5-control-row:hover{
  background: var(--nbv5-cp-soft-bg);
  border-radius: 10px;
}

@media (max-width: 575.98px){
  .nbv5-control .nbv5-cp-card-settings .nbv5-control-row{
    column-gap: 10px;
    margin: 0 6px;
    padding: 7px 8px 7px 10px;
  }

  .nbv5-control .nbv5-cp-card-settings .nbv5-control-row .form-check-label{
    font-size: 12.5px;
  }

  .nbv5-control .nbv5-cp-card-settings .nbv5-control-row .nbv5-control-help{
    font-size: 10.5px;
  }
}


.nbv5-control .nbv5-cp-card-language .nbv5-control-row,
.nbv5-control .nbv5-cp-card-flood .nbv5-control-row,
.nbv5-control .nbv5-cp-card-debug .nbv5-control-row{
  margin: 0;
  padding: 8px 2px;
  border-bottom: 1px solid var(--nbv5-cp-tile-border);
}

.nbv5-control .nbv5-cp-card-language .nbv5-control-row:last-child,
.nbv5-control .nbv5-cp-card-flood .nbv5-control-row:last-child,
.nbv5-control .nbv5-cp-card-debug .nbv5-control-row:last-child{
  border-bottom: 0;
  padding-bottom: 2px;
}

.nbv5-control .nbv5-cp-card-language .nbv5-control-help,
.nbv5-control .nbv5-cp-card-flood .nbv5-control-help,
.nbv5-control .nbv5-cp-card-debug .nbv5-control-help,
.nbv5-control .nbv5-cp-card-ignore .nbv5-control-help,
.nbv5-control .nbv5-cp-card-tag .nbv5-control-help,
.nbv5-control .nbv5-cp-card-reset .nbv5-control-help{
  font-size: 11px;
  line-height: 1.35;
}

.nbv5-control .nbv5-cp-card-mediasize .nbv5-theme-range{
  margin-bottom: 10px;
}

.nbv5-control .nbv5-cp-card-mediasize .nbv5-theme-range:last-child{
  margin-bottom: 0;
}

.nbv5-control .nbv5-cp-card-mediasize .small.text-muted{
  font-size: 11px;
}

/* Control Panel: compact ignore/tag lists (scroll + equal height on desktop) */
.nbv5-control .nbv5-cp-mini-list{
  border: 1px solid var(--nbv5-cp-tile-border);
  border-radius: 12px;
  padding: 6px 8px;
  background: var(--nbv5-cp-tile-bg);
  max-height: 120px;
  overflow: auto;
}

.nbv5-control .nbv5-cp-mini-item{
  font-size: 12px;
  color: var(--nbv5-cp-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nbv5-control .nbv5-cp-mini-item + .nbv5-cp-mini-item{
  border-top: 1px solid var(--nbv5-cp-tile-border);
  margin-top: 4px;
  padding-top: 4px;
}

@media (min-width: 992px){
  .nbv5-control .nbv5-cp-card-ignore,
  .nbv5-control .nbv5-cp-card-tag{
    display: flex;
    flex-direction: column;
  }
  .nbv5-control .nbv5-cp-card-ignore .nbv5-cp-cardbody,
  .nbv5-control .nbv5-cp-card-tag .nbv5-cp-cardbody{
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .nbv5-control .nbv5-cp-card-ignore .nbv5-cp-mini-list,
  .nbv5-control .nbv5-cp-card-tag .nbv5-cp-mini-list{
    flex: 1;
  }
}

/* Make toggle switches feel more app-like (Bootstrap switch, styled) */
.nbv5-control .nbv5-switch.form-check{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.nbv5-control .nbv5-switch .form-check-input{
  width: 44px;
  height: 22px;
  margin-top: 0;
  cursor: pointer;
}

.nbv5-control .nbv5-switch .form-check-label{
  font-size: 12px;
  color: var(--nbv5-cp-sub);
  user-select: none;
}

/* Control rows as “tiles” for scanability (compact + layout-safe) */
.nbv5-control .nbv5-control-row{
  border: 1px solid var(--nbv5-cp-tile-border);
  border-radius: 12px;
  padding: 5px 10px;
  background: var(--nbv5-cp-tile-bg);
  margin-bottom: 4px;
}

/* Bootstrap form-switch uses negative left margin for the input; cancel it in our tiles */
.nbv5-control .nbv5-control-row.form-switch{
  padding-left: 9px !important;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label switch"
    "help  switch";
  column-gap: 10px;
  align-items: center;
}

.nbv5-control .nbv5-control-row.form-switch .form-check-input{
  margin-left: 0 !important;
  margin-top: 0 !important;
  grid-area: switch;
  justify-self: end;
}

.nbv5-control .nbv5-control-row.form-switch .form-check-label{
  grid-area: label;
  font-weight: 800;
  color: var(--nbv5-cp-label);
  margin: 0;
}

.nbv5-control .nbv5-control-row.form-switch .nbv5-control-help{
  grid-area: help;
  margin-top: 2px;
  color: var(--nbv5-cp-help);
  font-size: 11px;
  line-height: 1.25;
}

.nbv5-control .nbv5-control-row .form-check-label{
  font-weight: 800;
  color: var(--nbv5-cp-label);
}

.nbv5-control .nbv5-control-row .nbv5-control-help{
  margin-top: 2px;
  color: var(--nbv5-cp-help);
  font-size: 11px;
  line-height: 1.25;
}

/* Keep the intro readable */

.nbv5-control .nbv5-control-intro{
  color: var(--nbv5-cp-intro);
}


/* Pane-aware overrides for Control Panel widgets that previously assumed light surfaces */
.nbv5-control .nbv5-mylook-row{
  background: var(--nbv5-cp-soft-bg);
}

.nbv5-control .nbv5-mylook-row-actions{
  margin-top: 8px;
}

.nbv5-control .nbv5-mylook-preview{
  background: var(--nbv5-cp-soft-bg);
}

.nbv5-control .nbv5-mylook-preview-box{
  background-color: var(--nbv5-cp-soft-bg-2);
}

.nbv5-control .nbv5-mylook-btn,
.nbv5-control .nbv5-cp-btn{
  border-color: var(--nbv5-cp-btn-border) !important;
  color: var(--nbv5-cp-btn-fg) !important;
  background: var(--nbv5-cp-btn-bg) !important;
}

.nbv5-control .nbv5-mylook-btn:hover,
.nbv5-control .nbv5-cp-btn:hover{
  background: var(--nbv5-cp-btn-hover-bg) !important;
  border-color: var(--nbv5-cp-btn-hover-border) !important;
}

.nbv5-control .nbv5-mylook-btn:focus,
.nbv5-control .nbv5-mylook-btn:focus-visible,
.nbv5-control .nbv5-cp-btn:focus,
.nbv5-control .nbv5-cp-btn:focus-visible{
  outline-color: var(--nbv5-cp-focus) !important;
}

.nbv5-control .nbv5-mylook-btn.active,
.nbv5-control .nbv5-cp-btn.active{
  background: var(--nbv5-cp-btn-active-bg) !important;
  border-color: var(--nbv5-cp-btn-active-border) !important;
  color: var(--nbv5-cp-btn-active-fg) !important;
}

.nbv5-control .nbv5-mylook-fonttrigger{
  border-color: var(--nbv5-cp-fontpicker-border);
  background: var(--nbv5-cp-fontpicker-bg);
  color: var(--nbv5-cp-fontpicker-fg);
}

.nbv5-control .nbv5-mylook-fonttrigger:hover{
  background: var(--nbv5-cp-fontpicker-hover-bg);
}

.nbv5-control .nbv5-mylook-fonttrigger:focus,
.nbv5-control .nbv5-mylook-fonttrigger:focus-visible{
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--nbv5-cp-focus) 26%, transparent);
}

.nbv5-control .nbv5-mylook-fontmenu{
  border-color: var(--nbv5-cp-fontpicker-border);
  background: var(--nbv5-cp-fontpicker-bg);
  color: var(--nbv5-cp-fontpicker-fg);
  box-shadow: var(--nbv5-cp-fontpicker-shadow);
}

.nbv5-control .nbv5-mylook-fontitem{
  color: var(--nbv5-cp-fontpicker-fg);
}

.nbv5-control .nbv5-mylook-fontitem:hover,
.nbv5-control .nbv5-mylook-fontitem:focus,
.nbv5-control .nbv5-mylook-fontitem:focus-visible{
  background: var(--nbv5-cp-fontpicker-hover-bg);
}

.nbv5-control .nbv5-mylook-fontitem.is-active{
  background: var(--nbv5-cp-fontpicker-active-bg);
}

/* V5: Whispers list (left pane) and center whisper view (scaffold, non-nested) */
.nbv5-whlist{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:8px;
}
.nbv5-whlist-item{
  width:100%;
  text-align:left;
  /* Match the Room button (left panel) border weight/feel */
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius:6px;
  padding:6px 8px;
  color:#fff;
}
.nbv5-whlist-item.is-active{
  outline:2px solid rgba(255,255,255,.35);
}
.nbv5-whlist-top{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
}
.nbv5-whlist-actions{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.nbv5-whlist-miniind{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  line-height:1;
  opacity:.85;
}
.nbv5-whlist-peer{
  font-weight:700;
  font-size:12.5px;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nbv5-whlist-state{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.18);
  text-transform:lowercase;
}
.nbv5-whlist-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.22);
  color:#fff;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  user-select:none;
}
.nbv5-whlist-close:hover{
  background: rgba(0,0,0,.34);
  border-color: rgba(255,255,255,.30);
}
.nbv5-whlist-sub{
  margin-top:4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  opacity:.95;
}
.nbv5-whlist-chan{
  opacity:.95;
}
.nbv5-whlist-meta{
  opacity:.85;
}
/* Whisper tabs (left pane) - streamlined row + external close */
.nbv5-whrow{
  display:flex;
  align-items:stretch;
  gap:6px;
}
.nbv5-whrow.is-active .nbv5-whlist-item{
  outline:2px solid rgba(255,255,255,.35);
}
.nbv5-whrow .nbv5-whlist-item{
  flex:1 1 auto;
}
.nbv5-whlist-item:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.12);
}
.nbv5-whlist-x{
  width:28px;
  min-width:28px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06) !important;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  user-select:none;
}
.nbv5-whlist-x:hover{
  background: rgba(255,255,255,.10) !important;
}

.nbv5-whlist-x:focus-visible,
.nbv5-whlist-item:focus-visible{
  outline:2px solid rgba(255,255,255,.35);
  outline-offset:2px;
}

/* Whisper tab flash (every inbound whisper until viewed/typed) */
@keyframes nbv5WhisperTabFlash{
  0%, 100%{
	border-color: rgba(255,255,255,.12);
	box-shadow: none;
	background: rgba(255,255,255,.06);
  }
  50%{
	border-color: #ff8a00;
	box-shadow: 0 0 0 2px rgba(255,138,0,.25);
	background: rgba(255,138,0,.18);
  }
}

.nbv5-whrow.is-flash .nbv5-whlist-item,
.nbv5-whlist-item.is-flash{
  animation: nbv5WhisperTabFlash 780ms ease-in-out infinite !important;
}

.nbv5-whrow.is-flash .nbv5-whlist-x,
.nbv5-whlist-x.is-flash{
  animation: nbv5WhisperTabFlash 780ms ease-in-out infinite !important;
}
/* Center whisper pane (uses the main center area, no nested pane) */
.nbv5-whpane{
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Pane Theme aware (Control Panel: Pane Theme) */
  /* No outer border (only keep the separator under the header) */
  border:0;
  border-radius:12px;
  overflow:hidden;
  background: var(--nbv5-pane-bg);
  color: var(--nbv5-pane-text);
}
.nbv5-whpane-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--nbv5-pane-border);
  background: var(--nbv5-pane-bg);
}
.nbv5-whpane-title{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.nbv5-whpane-peer{
  font-weight:800;
  font-size:14px;
}
.nbv5-whpane-room{
  font-size:12px;
  opacity:.7;
}
.nbv5-whpane-state{
  font-size:12px;
  opacity:.75;
  text-transform:lowercase;
}
.nbv5-whpane-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.nbv5-whpane-close{
  padding:2px 10px;
  border-radius:999px;
  font-weight:700;
  background:#dc3545 !important;
  border:1px solid #dc3545 !important;
  color:#fff !important;
}
.nbv5-whpane-close:hover{
  background:#bb2d3b !important;
  border-color:#bb2d3b !important;
}
.nbv5-whpane-popout{
  padding:2px 10px;
  border-radius:999px;
  font-weight:700;
  border:1px solid var(--nbv5-pane-border) !important;
  background:rgba(108,117,125,.14) !important;
  color:var(--nbv5-pane-text) !important;
}
.nbv5-whpane-popout:hover{
  background:rgba(108,117,125,.24) !important;
  color:var(--nbv5-pane-text) !important;
}
.nbv5-whpane-log{
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding:10px 12px;
  font-size: var(--nbv5-pane-font-size);
  line-height: 1.35;
  background: var(--nbv5-pane-bg);
}
.nbv5-whmsg{
  display:flex;
  gap:8px;
  align-items:flex-start;
  padding:2px 0;
}
.nbv5-whmsg-nick{
  font-weight:700;
  white-space:nowrap;
}
.nbv5-whmsg-text{
  flex:1;
  white-space:pre-wrap;
  word-break:break-word;
}

/* Incoming whisper request line (Accept/Decline shown in room pane) */
.nbv5-whreq{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  background: #2d6a89 !important;
  color:#ffffff;
}
.nbv5-whreq-ico{ opacity:.95; }
.nbv5-whreq-text{ flex:1; font-size:13px; }
.nbv5-whreq-room{ margin-left:6px; opacity:.9; }
.nbv5-whreq-msg{ margin-left:6px; opacity:.9; }
.nbv5-whreq-actions{ display:flex; gap:8px; }
.nbv5-whreq-btn{ padding:3px 10px; border-radius:8px; }


/* Control Panel: small field grid */
.nbv5-control-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
  margin-left: 44px; /* aligns under switch label */
}
@media (max-width: 900px){
  .nbv5-control-grid{ grid-template-columns: 1fr; margin-left: 0; }
}
.nbv5-control-field .nbv5-control-label{
  display:block;
  font-size: 12px;
  opacity: .9;
  margin-bottom: 4px;
}
.nbv5-cp-divider{
  border: 0;
  border-top: 1px solid rgba(127,127,127,.28);
  margin: 14px 0;
}

/* Flood collapsed group line */
.nbv5-floodgrp{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}
.nbv5-floodgrp-text{
  opacity: .85;
  font-size: 0.93em;
}
.nbv5-floodgrp-btn{
  border: 1px solid rgba(127,127,127,.35);
  background: transparent;
  color: inherit;
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 0.86em;
  line-height: 1.2;
}
.nbv5-floodgrp-btn:hover{
  border-color: rgba(127,127,127,.55);
}


/* Activity pane: traffic/perf indicator */
.nbv5-activity-perfbar{
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 6px 10px;
  background: var(--nbv5-pane-bg);
  border-bottom: 1px solid var(--nbv5-pane-border);
}

.nbv5-activity-perfbtn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--nbv5-pane-border);
  background: transparent;
  color: var(--nbv5-pane-text);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.86em;
  line-height: 1;
}

.nbv5-activity-perfbtn:hover{
  background: var(--nbv5-pane-item-hover);
}

.nbv5-perf-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  background: #7a7a7a;
}

.nbv5-perf-dot.is-warn{ background: #d9a441; }
.nbv5-perf-dot.is-hot{ background: #ff4d4d; }
.nbv5-perf-dot.is-ok{ background: #7a7a7a; }

.nbv5-perf-mini{
  opacity: .75;
  font-size: 0.79em;
}

.nbv5-activity-perfpop{
  margin-top: 6px;
  max-width: 260px;
  border: 1px solid var(--nbv5-pane-border);
  background: var(--nbv5-pane-bg);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

.nbv5-activity-perfrow{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-size: 0.86em;
}
.nbv5-activity-perfrow .k{ opacity:.8; }
.nbv5-activity-perfrow .v{ font-variant-numeric: tabular-nums; }


/* ===============================
   Control Panel: Font size card
   =============================== */

.nbv5-control .nbv5-cp-card-font .nbv5-cp-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:6px;
}

.nbv5-control .nbv5-cp-range{
  background: var(--nbv5-cp-soft-bg);
  border: 1px solid var(--nbv5-cp-tile-border);
  border-radius: 12px;
  padding: 10px 12px;
}

.nbv5-control .nbv5-cp-rangehead{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.nbv5-control .nbv5-cp-rangelabel{
  font-weight: 700;
  color: var(--nbv5-cp-label);
  min-width: 0;
}

.nbv5-control .nbv5-cp-rangeval{
  font-weight: 800;
  color: var(--nbv5-cp-title);
  background: var(--nbv5-cp-soft-bg-2);
  border: 1px solid var(--nbv5-cp-tile-border);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

/* ===============================
   Sticky Broadcasts (V5)
   - Server + Room broadcasts appear above the scroll log until dismissed.
   - Uses fixed colors (not theme-dependent).
   =============================== */

.nbv5-broadcast-stack{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin: 8px 8px 6px;
}

.nbv5-broadcast{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:10px;
  border-radius:16px;
  padding:10px 10px 10px 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.12);
}

.nbv5-broadcast-main{
  display:flex;
  gap:10px;
  align-items:flex-start;
  min-width:0;
}

.nbv5-broadcast-ico{
  margin-top:2px;
  font-size: 16px;
  opacity: .95;
}

.nbv5-broadcast-text{
  min-width:0;
}

.nbv5-broadcast-title{
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.15;
}

.nbv5-broadcast-msg{
  margin-top:2px;
  line-height: 1.25;
  word-break: break-word;
}

/* Broadcast content supports the same formatter pipeline (emots + links + [style]). */
.nbv5-broadcast-msg .nbv5-link{
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nbv5-broadcast-msg img{
  max-height: 22px;
  vertical-align: text-bottom;
}

.nbv5-broadcast-from{
  font-weight: 800;
}

.nbv5-broadcast-close{
  flex: 0 0 auto;
  background: rgba(255,255,255,.16) !important;
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 6px 10px;
  line-height: 1;
}

.nbv5-broadcast-close:hover{
  background: rgba(255,255,255,.22) !important;
}

.nbv5-broadcast-server{
  background: #1e3a8a !important;
  color:#fff;
}

.nbv5-broadcast-room{
  background: #065f46 !important;
  color:#fff;
}



.nbv5-bcline{
  display:inline-flex;
  align-items:flex-start;
  gap:10px;
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
}

.nbv5-bcline-ico{
  flex:0 0 auto;
  margin-top:2px;
  opacity:.95;
}

.nbv5-bcline-body{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.nbv5-bcline-title{
  font-weight:800;
}

.nbv5-bcline-msg{
  line-height:1.45;
  word-break:break-word;
}

.nbv5-bcline-msg img{
  max-height:22px;
  vertical-align:text-bottom;
}

.nbv5-bcline-from{
  font-weight:800;
}

.nbv5-bcline-server{
  background: rgba(30,58,138,.14) !important;
  border-color: rgba(30,58,138,.28);
}

.nbv5-bcline-room{
  background: rgba(6,95,70,.14) !important;
  border-color: rgba(6,95,70,.28);
}

.nbv5-bcline-legacy-inline .nbv5-bcline-body-inline{
  display:block;
}

.nbv5-bcline-legacy-inline .nbv5-bcline-msg-inline{
  display:block;
}

.nbv5-bcline-legacy-inline .nbv5-bcline-title,
.nbv5-bcline-legacy-inline .nbv5-bcline-from{
  font-weight:800;
  margin-right:4px;
}

.nbv5-bcline-legacy{
  display:inline;
  width:auto;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent !important;
}

.nbv5-bcline-legacy-title,
.nbv5-bcline-legacy-from{
  font-weight:800;
}

.nbv5-bcline-legacy-msg{
  line-height:1.45;
  word-break:break-word;
}

.nbv5-bcline-legacy-msg img{
  max-height:22px;
  vertical-align:text-bottom;
}

/* Log-line style for broadcast entries (still appear in history) */
.nbv5-sysline-broadcast{
  background: rgba(30,58,138,.12) !important;
  border: 1px solid rgba(30,58,138,.25);
}

.nbv5-line-broadcast .nbv5-sysline-ico{
  opacity: .95;
}


/* V5 Fix: Ensure link colors are not overridden by style color spans */
.nbv5-room-pane a,
.nbv5-whisper-pane a,
.nbv5-activity-pane a,
.nbv5-room-pane span a,
.nbv5-whisper-pane span a,
.nbv5-activity-pane span a {
  color: var(--nbv5-link-color) !important;
  text-decoration: underline !important;
}
/*
  Font baseline
  - Prefer modern system UI fonts for speed, Unicode coverage, and CSP safety.
  - (Avoid @import Google Fonts here; some installs run with CSP that blocks it.)
*/

html,
body {
  height: 100%;
}

/* ===============================
   Pane Light/Dark (V5)
   - Affects pane bodies: chat/status/nicklist
   - Does NOT affect pane headers (they follow tabs/header styling)
   - Default: light
   =============================== */
:root[data-chat-theme="light"] {
  --nbv5-pane-bg: #fbfbfc;
  --nbv5-pane-text: #0a0a0a;
  --nbv5-pane-border: #dfdfdf;
  --nbv5-pane-sep-text: rgba(20,25,30,.78);
  --nbv5-pane-item-hover: rgba(0,0,0,.06);
  --nbv5-pane-alt-row-bg: #f7f7f8;

  --nbv5-input-bg: #ffffff;
  --nbv5-input-border: rgba(0,0,0,.20);
  --nbv5-input-text: #000000;
  --nbv5-input-ph: rgba(0,0,0,.55);

  /* Semantic (pane content) */
  --nbv5-muted: rgba(10,10,10,.62);
  --nbv5-link: #1a7ab5;
  --nbv5-link-hover: #135e8a;
  --nbv5-timestamp: rgba(10,10,10,.55);
  --nbv5-nick-other: #337abf;
  --nbv5-nick-self: #000000;

}

:root[data-chat-theme="dark"] {
  --nbv5-pane-bg: #1C1F24;
  --nbv5-pane-text: #f3f4f6;
  --nbv5-pane-border: #2b2f36;
  --nbv5-pane-sep-text: rgba(230,237,243,.78);
  --nbv5-pane-item-hover: rgba(255,255,255,.10);
  --nbv5-pane-alt-row-bg: #22262c;

  --nbv5-input-bg: #15181d;
  --nbv5-input-border: rgba(255,255,255,.22);
  --nbv5-input-text: #ffffff;
  --nbv5-input-ph: rgba(255,255,255,.70);

  /* Semantic (pane content) */
  --nbv5-muted: rgba(243,244,246,.70);
  --nbv5-link: #7cc7ff;
  --nbv5-link-hover: #b0dfff;
  --nbv5-timestamp: rgba(243,244,246,.58);
  --nbv5-nick-other: #7cc7ff;
  --nbv5-nick-self: #f3f4f6;

}

:root[data-chat-tone="dark"] {
  /* Subtle contrast assist for dark panes.
     Always-on but lightweight so dark colors and dark gradients remain readable,
     without looking like a heavy glow. */
  --nbv5-msg-outline-shadow: 0 0 0.55px rgba(255,255,255,.42), 0 0 1.1px rgba(255,255,255,.18);
  --nbv5-msg-outline-stroke: 0.22px rgba(255,255,255,.22);

  /* Dark tone readability:
     Do NOT self-reference the same CSS variable (it becomes invalid/circular).
     Instead, compute "bright" variants and use them via targeted rules below. */
  --nbv5-pane-text-bright: color-mix(in srgb, var(--nbv5-pane-text) 86%, #ffffff);
  --nbv5-muted-bright: color-mix(in srgb, var(--nbv5-muted) 82%, #ffffff);
  --nbv5-timestamp-bright: color-mix(in srgb, var(--nbv5-timestamp) 82%, #ffffff);
  --nbv5-pane-sep-text-bright: color-mix(in srgb, var(--nbv5-pane-sep-text) 82%, #ffffff);
}

:root[data-chat-tone="light"] {
  --nbv5-msg-outline-shadow: none;
  --nbv5-msg-outline-stroke: 0px transparent;
}


/* Theme applies to pane bodies only (header keeps its own background) */
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-pane {
  background: var(--nbv5-pane-bg) !important;
  align-self: stretch;
}


:root[data-chat-theme] .nbv5-skin-v4 .nbv5-chat,
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-pane-body,
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-input,
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-composer,
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-nick,
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-person {
  border-color: var(--nbv5-pane-border) !important;
}

/* Pane theme: ensure core pane surfaces actually inherit theme variables */
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-chat,
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-pane-body {
  background: var(--nbv5-pane-bg) !important;
  color: var(--nbv5-pane-text) !important;
}

/* Dark tone: use the computed bright variants (non-circular) */
:root[data-chat-tone="dark"][data-chat-theme] .nbv5-skin-v4 .nbv5-chat,
:root[data-chat-tone="dark"][data-chat-theme] .nbv5-skin-v4 .nbv5-pane-body {
  color: var(--nbv5-pane-text-bright, var(--nbv5-pane-text)) !important;
}

/* Dark tone: ensure nicklist names inherit the brighter pane text (some rows can override color elsewhere). */
:root[data-chat-tone="dark"][data-chat-theme] .nbv5-skin-v4 .nbv5-pane-body .nbv5-person,
:root[data-chat-tone="dark"][data-chat-theme] .nbv5-skin-v4 .nbv5-pane-body .nbv5-person .nbv5-nick-name {
  color: var(--nbv5-pane-text-bright, var(--nbv5-pane-text)) !important;
}

:root[data-chat-theme] .nbv5-skin-v4 .nbv5-input {
  background: var(--nbv5-pane-bg) !important;
  align-self: stretch;
}


:root[data-chat-theme] .nbv5-skin-v4 .nbv5-input .form-control {
  background: var(--nbv5-input-bg) !important;
  border-color: var(--nbv5-input-border) !important;
  color: var(--nbv5-input-text) !important;
}

:root[data-chat-theme] .nbv5-skin-v4 .nbv5-input .form-control::placeholder {
  color: var(--nbv5-input-ph) !important;
  opacity: 1;
}

/* Bootstrap utility colors inside pane bodies */
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-pane-body .text-muted,
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-chat .text-muted {
  color: var(--nbv5-muted) !important;
}

:root[data-chat-tone="dark"][data-chat-theme] .nbv5-skin-v4 .nbv5-pane-body .text-muted,
:root[data-chat-tone="dark"][data-chat-theme] .nbv5-skin-v4 .nbv5-chat .text-muted {
  color: var(--nbv5-muted-bright, var(--nbv5-muted)) !important;
}

/* Links inside panes */
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-pane-body a,
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-chat a {
  color: var(--nbv5-link) !important;
  text-decoration-color: rgba(255,255,255,.35);
}

:root[data-chat-theme] .nbv5-skin-v4 .nbv5-pane-body a:hover,
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-chat a:hover {
  color: var(--nbv5-link-hover) !important;
}


/* Link affordance (applies to auto-linkified URLs as well) */
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-pane-body a.nbv5-link,
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-chat a.nbv5-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}

/* Pane headers: keep V4 styling, match tabs background */
.nbv5-skin-v4 .nbv5-pane-header {
  background: var(--v5-paneheader-bg) !important;
}

body {
  margin: 0;
}

/* Modern, Unicode-friendly font stack (fixed, does not theme-shift) */
.nbv5 {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  font-kerning: normal;
  font-feature-settings: "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure V5 shell stretches to viewport height (Bootstrap containers are not full-height by default) */
.nbv5,
.nbv5 > .container-fluid,
.nbv5 > .container-fluid > .d-flex {
  height: 100%;
  min-height: 100%;
}

.nbv5 {
  height: 100%;
  width: 100%;
}

.nbv5-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0; /* allow children to scroll */
  background: var(--bs-body-bg);
}

.nbv5.nbv5-is-mobile .nbv5-right {
 flex: 0 0 260px;
  width: 260px;
  min-width: 260px;
  margin-left: 4px;
}

/* Mobile: drawers (left + people) overlay the chat */
@media (max-width: 767.98px) {
  .nbv5-skin-v4 .nbv5-topbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  /* Scrim sits below drawers, above chat */
  .nbv5.nbv5-is-mobile .nbv5-mobile-scrim {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: 0; /* matches .nbv5-topbar-inner height */
    bottom: 0;
    background: rgba(0,0,0,.38);
    z-index: 5990;
  }

  /* Left panel becomes an overlay drawer */
  .nbv5.nbv5-is-mobile .nbv5-leftpanel {
    position: fixed;
    top: 52px;
    bottom: 0;
    left: 0;
    z-index: 6000;
    transform: translateX(-105%);
    transition: transform .18s ease;
    box-shadow: 18px 0 48px rgba(0,0,0,.35);
  }

  .nbv5.nbv5-is-mobile .nbv5-leftpanel.nbv5-left-open {
    transform: translateX(0);
  }

  /* Right pane becomes an overlay drawer */
  .nbv5.nbv5-is-mobile .nbv5-right {
    position: fixed;
    top: 52px;
    bottom: 0;
    right: 0;
    z-index: 6000;
    margin-left: 0;
    transform: translateX(105%);
    transition: transform .18s ease;
    box-shadow: -18px 0 48px rgba(0,0,0,.35);
  }

  .nbv5.nbv5-is-mobile .nbv5-right.nbv5-right-open {
    transform: translateX(0);
  }
}

.nbv5-center {
  flex: 1 1 auto;
  min-width: 0;
}

.nbv5-pane-header {
  background: var(--bs-tertiary-bg);
}

.nbv5-pane-body {
  overflow: auto;
  min-height: 0;
}

.nbv5-chat {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.5rem;
  font-family: inherit;
  font-size: var(--nbv5-pane-font-size);
  line-height: 1.35;
}

/* Scroll-to-bottom affordance (Phase 2) */
.nbv5-scroll-bottom-wrap {
  position: sticky;
  bottom: 10px;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 50;
}

.nbv5-scroll-bottom-btn {
  pointer-events: auto;
  border: 1px solid var(--nbv5-pane-border) !important;
  background: var(--nbv5-pane-bg) !important;
  color: var(--nbv5-text) !important;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.9em;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

.nbv5-scroll-bottom-btn:hover {
  filter: brightness(0.98);
}


.nbv5-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  white-space: normal;
  word-break: normal;
}

.nbv5-line + .nbv5-line {
  margin-top: 4px; /* separation so messages don't touch pills */
}

.nbv5-input {
  background: var(--bs-body-bg);
}

/* NOTE: right pane visibility on mobile is controlled via showPeople + the 768px rule above. */

/* People list */
.nbv5-nicklist {
  margin: 0;
  padding: 0;
}

.nbv5-nick {
  padding: 0.25rem 0.35rem;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.nbv5-nick:last-child {
  border-bottom: 0;
}

.nbv5-nick-name {
  font-size: var(--nbv5-nick-font-size);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* ===============================
   V4 SKIN (cosmetic match)
   Fixed colors (do not depend on bs theme)
   =============================== */

.nbv5-skin-v4 {
  /* ===============================
     V5 THEME TOKENS (semantic)
     - The theme files set the accent colors and wallpaper tokens.
     - This stylesheet only *consumes* those tokens.
     - Legacy aliases exist so older rules still work while we migrate.
     =============================== */

  /* Accent palette (theme-defined) */
  /*
    Preferred V5 names: --v5-theme-accent-1/2/3 (defined by theme files).
    Back-compat: if a theme still only defines --v4-blue-1/2/3, we fall back.
  */
  --v5-accent-1: var(--v5-theme-accent-1);
  --v5-accent-2: var(--v5-theme-accent-2);
  --v5-accent-3: var(--v5-theme-accent-3);

  /* Top bar gradient (2 colors only) */
  --v5-topbar-grad-start: var(--v5-accent-1);
  --v5-topbar-grad-end: var(--v5-accent-2);
  --v5-topbar-bg: linear-gradient(var(--v5-topbar-grad-start), var(--v5-topbar-grad-end));

  /* Pane header background (solid, matches tabs/header styling) */
  --v5-paneheader-bg: var(--v5-accent-3);

  /* Main surface behind panes (used for wallpaper fallback) */
  --v5-main-bg: var(--v5-accent-2);
}

.nbv5-skin-v4 .nbv5-page {
  /* Keep the chat itself at a full viewport; the manual AdSense unit follows below it. */
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;

  /* Theme background */
  position: relative;
  background: var(--v5-wallpaper-fallback, var(--v5-accent-3));
}

/* Optional theme wallpaper (SVG/JPG/PNG) */
.nbv5-skin-v4 .nbv5-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--v5-wallpaper-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: var(--v5-wallpaper-opacity, 1);
  filter: var(--v5-wallpaper-filter, none);
  pointer-events: none;
  z-index: 0;
}

/* Optional overlay tint over wallpaper */
.nbv5-skin-v4 .nbv5-page::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--v5-wallpaper-overlay, transparent);
  pointer-events: none;
  z-index: 0;
}

/* Keep all UI above the wallpaper layer */
.nbv5-skin-v4 .nbv5-page > * {
  position: relative;
  z-index: 1;
}

/* Top bar */
.nbv5-skin-v4 .nbv5-topbar {
  background: var(--v5-topbar-bg);
  background-attachment: scroll;
  background-position: 0 0;
  border-bottom: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  color: #fff;
}

.nbv5-skin-v4 .nbv5-topbar-inner {
  height: 52px;          /* was 40px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;       /* was 12px */
  gap: 14px;             /* slight breathing room */
}

.nbv5-skin-v4 .nbv5-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.nbv5-skin-v4 .nbv5-logo {
  font-weight: 800;
  letter-spacing: .5px;
  white-space: nowrap;
  font-family: "Luckiest Guy", "Anton", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 30px;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}

.nbv5-skin-v4 .nbv5-now {
  opacity: .95;
  white-space: nowrap;
}

.nbv5-skin-v4 .nbv5-room {
  font-weight: 700;
  font-size: 1.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52vw;
}


.nbv5-roomwrap{
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.nbv5-roomtype,
.nbv5-lp-roomtype {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0px;
}

.nbv5-roomtype-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.nbv5-lp-roomtype .nbv5-roomtype-icon {
  width: 14px;
  height: 14px;
}

.nbv5-skin-v4 .nbv5-room-modes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 3px 7px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.13) !important;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  white-space: nowrap;
}

.nbv5-skin-v4 .nbv5-room-modes-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  opacity: .70;
}

.nbv5-skin-v4 .nbv5-room-modes-value {
  font-family: Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

:root[data-theme="black"] .nbv5-skin-v4 .nbv5-room-modes {
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: rgba(255, 255, 255, 0.18);
}

.nbv5-skin-v4 .nbv5-topbar-right {
  font-weight: 700;
  opacity: .95;
  white-space: nowrap;
}

/* Phase 2C: whisper attention indicator in the header */
.nbv5-skin-v4 .nbv5-topbar-attn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(0,0,0,.12);
  color: #fff;
  border-radius: 6px;
  padding: 4px 8px;
  line-height: 1;
  cursor: pointer;
  margin-right: 8px;
}
.nbv5-skin-v4 .nbv5-topbar-attn:hover {
  background: rgba(0,0,0,.20);
}
.nbv5-skin-v4 .nbv5-topbar-attn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: 12px;
  line-height: 1;
}

/* Topbar drawer toggles */
.nbv5-skin-v4 .nbv5-topbar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(0,0,0,.12);
  color: #fff;
  border-radius: 6px;
  padding: 4px 8px;
  line-height: 1;
  cursor: pointer;
}

.nbv5-skin-v4 .nbv5-topbar-toggle:hover {
  background: rgba(0,0,0,.20);
}

.nbv5-skin-v4 .nbv5-topbar-toggle-left {
  position: relative;
}

.nbv5-skin-v4 .nbv5-topbar-toggle-left.has-attention {
  border-color: rgba(255,120,120,.92);
  box-shadow: 0 0 0 1px rgba(255,120,120,.22), 0 0 10px rgba(255,90,90,.18);
}

.nbv5-skin-v4 .nbv5-topbar-toggle-left.is-pulsing {
  animation: nbv5TopbarLeftAttentionPulse 1.15s ease-out 2;
}

.nbv5-skin-v4 .nbv5-topbar-toggle-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d93025 !important;
  color: #fff;
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 1px 6px rgba(0,0,0,.25);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  z-index: 2;
}

@keyframes nbv5TopbarLeftAttentionPulse {
  0% { transform: scale(1); }
  25% { transform: scale(1.08); }
  55% { transform: scale(1); }
  100% { transform: scale(1); }
}

/* Mobile overlay scrim */
.nbv5.nbv5-is-mobile .nbv5-mobile-scrim {
  display: none;
}

/* Nav row */
.nbv5-skin-v4 .nbv5-nav {
  background: var(--v5-menu-bg, var(--v5-accent-2));
  border-bottom: 1px solid rgba(0,0,0,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  color: #fff;
}
.nbv5-brand .nbv5-topbar-logo { height:30px !important; }
.nbv5-skin-v4 .nbv5-topbar-logo {
  height: 18px;
  width: auto;
  display: block;
}

.nbv5-skin-v4 .nbv5-nav-inner {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
}

.nbv5-skin-v4 .nbv5-navlink {
  color: rgba(255,255,255,.95);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.nbv5-skin-v4 .nbv5-navlink:hover {
  color: #fff;
  text-decoration: underline;
}

.nbv5-skin-v4 .nbv5-navbtn {
  font: inherit;
}

.nbv5-skin-v4 .nbv5-navsep {
  flex: 1 1 auto;
}

.nbv5-skin-v4 .nbv5-navuser {
  opacity: .95;
}

/* Tabs removed */
/* Main frame */
.nbv5-skin-v4 .nbv5-main {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 10px 10px;
  background: var(--v5-main-bg);
}

.nbv5.nbv5-is-mobile .nbv5-leftpanel {
  --nbv5-leftpanel-w: 260px;
  width: var(--nbv5-leftpanel-w);
  flex: 0 0 var(--nbv5-leftpanel-w);
  min-height: 0;
  background: var(--v5-main-bg);
  
  /* border-right: 1px solid rgba(0,0,0,.15); */

  /* Left panel UI chrome should follow the selected skin (light/dark),
     not the chat pane text theme toggle. */
  color: var(--nbv5-pane-text);
}

html[data-v5thememode="light"] .nbv5-leftpanel{ color: rgba(43,38,32,.92) !important; }
html[data-v5thememode="dark"]  .nbv5-leftpanel{ color: rgba(255,255,255,.92) !important; }

/* Desktop: allow collapsing left/right panes via topbar buttons */
.nbv5.nbv5-is-mobile .nbv5-leftpanel.nbv5-left-closed {
  width: 56px !important;
  flex: 0 0 56px !important;
  min-width: 56px !important;
  overflow: visible !important;
  pointer-events: auto;
}

.nbv5-right.nbv5-right-closed {
  width: 0 !important;
  flex: 0 0 0 !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  overflow: hidden !important;
  pointer-events: none;
  border-left: 0 !important;
}

/* Mobile / small window: panes become overlay drawers */
@media (max-width: 767.98px) {
  /* When a mobile drawer is open, prevent the page behind it from scrolling. */
  html.nbv5-noscroll,
  body.nbv5-noscroll {
    overflow: visible !important;
    height: 100% !important;
  }

  /* Use dynamic viewport height on mobile to avoid footer cut-off when browser chrome resizes. */
  .nbv5-shell {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .nbv5-shell > .nbv5-leftpanel {
    height: auto;
  }

  .nbv5-skin-v4 .nbv5-topbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Mobile: conserve header space by hiding the room modes pill next to "Now chatting in" */
  .nbv5-skin-v4 .nbv5-room-modes {
    display: none !important;
  }

  .nbv5.nbv5-is-mobile .nbv5-mobile-scrim {
    position: fixed;
    inset: 0;
    top: var(--nbv5-shell-top-offset, 52px); /* below topbar + optional dev banner */
    background: rgba(0,0,0,.38);
    z-index: 5990;
    display: block;
  }

  .nbv5.nbv5-is-mobile .nbv5-leftpanel {
    position: fixed;
    top: var(--nbv5-shell-top-offset, 52px);
    bottom: auto;
    left: 0;
    z-index: 6000;
    height: calc(100dvh - var(--nbv5-shell-top-offset, 52px));
    width: var(--nbv5-leftpanel-w);
    max-width: min(var(--nbv5-leftpanel-w), 92vw);
    transform: translateX(-105%);
    transition: transform .18s ease;
    box-shadow: 12px 0 34px rgba(0,0,0,.35);
  }

  .nbv5.nbv5-is-mobile .nbv5-leftpanel.nbv5-left-open {
    transform: translateX(0);
  }

  .nbv5.nbv5-is-mobile .nbv5-right {
    position: fixed;
    top: var(--nbv5-shell-top-offset, 52px);
    bottom: auto;
    right: 0;
    z-index: 6000;
    margin-left: 0;
    height: calc(100dvh - var(--nbv5-shell-top-offset, 52px));
    width: 260px;
    max-width: 92vw;
    transform: translateX(105%);
    transition: transform .18s ease;
    box-shadow: -12px 0 34px rgba(0,0,0,.35);
  }

  .nbv5.nbv5-is-mobile .nbv5-right.nbv5-right-open {
    transform: translateX(0);
    display: flex;
  }

  .nbv5.nbv5-is-mobile .nbv5-right.nbv5-right-closed {
    transform: translateX(105%);
    display: flex;
  }

  /* Mobile: remove the left panel header block entirely to maximize usable space. */
  .nbv5-leftpanel .nbv5-lp-top {
    display: none !important;
  }

  /* Mobile: ensure shell/leftpane height uses dynamic viewport (prevents footer cut-off). */
  .nbv5-shell {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .nbv5-shell > .nbv5-leftpanel {
    height: calc(100dvh - var(--nbv5-shell-top-offset, 52px)) !important;
  }

  /* Mobile safe-area: ensure the left panel footer is never cut off by system UI. */
  .nbv5-leftpanel .nbv5-lp-footer {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) 12px;
  }

  /* Mobile touch targets: make common controls easier to tap without changing desktop sizing. */
  .nbv5-lp-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .nbv5-lp-roombtn {
    padding: 12px 12px;
  }

  .nbv5-lp-roomlabel {
    font-size: 14px;
  }

  .nbv5-whlist-item {
    padding: 10px 10px;
  }

  .nbv5-whlist-peer {
    font-size: 13.5px;
  }

  .nbv5-whlist-x {
    width: 40px;
    min-width: 40px;
    min-height: 44px;
  }

  .nbv5-skin-v4 .nbv5-person {
    padding: 10px 10px;
    font-size: 14px;
  }

  /* Prevent iOS text-input zooming and improve composer tap comfort. */
  .nbv5-center .nbv5-composer-input {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 16px;
  }

  .nbv5-sendbtn {
    height: 44px !important;
    min-height: 44px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    width: 44px !important;
    min-width: 44px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .nbv5-actionbtn,
  .nbv5-emotbtn,
  .nbv5-awaymsgbtn,
  .nbv5-giphybtn,
  .nbv5-stickerbtn,
  .nbv5-mediabtn {
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 12px;
  }

  .nbv5-actionbtn {
    width: 44px !important;
    min-width: 44px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .nbv5-emotbtn,
  .nbv5-awaymsgbtn,
  .nbv5-giphybtn,
  .nbv5-stickerbtn,
  .nbv5-mediabtn {
    padding: 0 12px !important;
  }

  .nbv5-chat {
    padding: 0.75rem;
    line-height: 1.4;
  }

  .nbv5-line {
    gap: 10px;
  }

  .nbv5-line + .nbv5-line {
    margin-top: 6px;
  }
}

html[data-v5thememode="dark"] .nbv5.nbv5-is-mobile .nbv5-leftpanel {
  border-right: 0px;
}

.nbv5-lp-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 52px;
  height: auto;
  padding: 8px 12px;
  background: transparent !important;
  background-attachment: scroll;
  background-position: 0 0;
  box-shadow: none;
}

.nbv5-lp-brandrow{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:100%;
  text-align:left;
}

.nbv5-lp-brandicon{
  width:auto;
  height:36px;
  max-width:60px;
  flex:0 0 auto;
  object-fit:contain;
}

.nbv5-lp-brandlogo{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:96px;
  flex:0 0 auto;
  object-fit:contain;
}

.nbv5-lp-brandtext{
  font-weight: 800;
  letter-spacing: .5px;
  white-space: nowrap;
  font-family: "Luckiest Guy", "Anton", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 30px;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  line-height:1;
  user-select:none;
}

/* Left-panel self identity row is intentionally hidden (nickname/account/icon). */
.nbv5-lp-selfrow{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 10px 12px;
  margin: 8px 12px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 14px;
  background: rgba(0,0,0,.03);
}


html[data-v5thememode="dark"] .nbv5-lp-selfrow{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
}


.nbv5-lp-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  /* Center the status glyph reliably across themes */
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.15);
  flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.12);
}

html[data-v5thememode="dark"] .nbv5-lp-avatar {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}


.nbv5-lp-avatar{
  position: relative;
  overflow: hidden;
  /* Center the self status icon reliably (no perceived offset due to container alignment) */
  display: flex;
  align-items: center;
  justify-content: center;
}

.nbv5-lp-avatar::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  /* Use theme-aware foreground color (not a baked-in white icon) */
  background-color: currentColor;
  opacity: .92;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.761 0 5-2.239 5-5S14.761 2 12 2 7 4.239 7 7s2.239 5 5 5zm0 2c-4.418 0-8 2.239-8 5v3h16v-3c0-2.761-3.582-5-8-5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.761 0 5-2.239 5-5S14.761 2 12 2 7 4.239 7 7s2.239 5 5 5zm0 2c-4.418 0-8 2.239-8 5v3h16v-3c0-2.761-3.582-5-8-5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.nbv5-lp-meico {
  /* Keep your role/status icons (host/superowner/owner/etc) and keep them crisp. */
  display: block;
  width: 12px;
  height: 12px;
  object-fit: contain;
  /* Helps some Chromium builds keep small PNGs crisp when scaled */
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
}

/* Hide fallback glyph when we have a real status icon */
.nbv5-lp-avatar.has-meico::before {
  display: none;
}

/* Subtle contrast assist so the colored bitmap reads on all themes/wallpapers */
html[data-v5thememode="light"] .nbv5-lp-meico{
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.55));
}
html[data-v5thememode="dark"] .nbv5-lp-meico{
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.35));
}

/* Avatar tile foreground/background tuned for theme mode (looks good on all themes) */
html[data-v5thememode="light"] .nbv5-lp-avatar{
  background: rgba(255,255,255,.55);
  border-color: rgba(0,0,0,.14);
  color: rgba(31,35,40,.82);
}
html[data-v5thememode="dark"] .nbv5-lp-avatar{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
}

.nbv5-lp-avatar.is-member {
  box-shadow: inset 0 0 0 2px rgba(44, 196, 96, .45);
}

.nbv5-lp-avatar.is-guest {
  box-shadow: inset 0 0 0 2px rgba(250, 155, 23, .45);
}

.nbv5-lp-meta {
  min-width: 0;
}

.nbv5-lp-line {
  display: flex;
  gap: 6px;
  line-height: 1.2;
  font-size: 13px;
}

.nbv5-lp-k {
  opacity: .75;
  flex: 0 0 auto;
}

.nbv5-lp-v {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nbv5-lp-nav {
  padding: 6px 12px 10px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
}

.nbv5-lp-btn {
  position: relative;
  width: 40px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.06);
  text-align: center;
  user-select: none;
}

html[data-v5thememode="dark"] .nbv5-lp-btn {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}


/* Left panel: single-room button (client is single-room) */
.nbv5-lp-roomwrap{
  padding: 0 12px 10px;
}
.nbv5-lp-roombtn{
  width: 100%;
  display: flex;
  align-items: center;
  /* LEFT align icon + room label; unread badge pushes to the far right */
  justify-content: flex-start;
  gap: 4px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.06);
  user-select: none;
}
html[data-v5thememode="dark"] .nbv5-lp-roombtn{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.nbv5-lp-roombtn:hover{
  background: rgba(0,0,0,.10);
}
html[data-v5thememode="dark"] .nbv5-lp-roombtn:hover{
  background: rgba(255,255,255,.10);
}
.nbv5-lp-roomlabel{
  color: inherit;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .2px;
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nbv5-room-unread{
  flex: 0 0 auto;
}

/* Left panel: Whispers (empty state) */
.nbv5-lp-section{
  padding: 0 12px 12px;
}

.nbv5-lp-section-h{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .70;
  margin: 10px 2px 8px;
}

/* Unread badges (fixed colors, consistent across light/dark) */
.nbv5-unread-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  color: #FFFFFF !important;
  background: #7C5AC9 !important; /* muted purple */
}

.nbv5-unread-badge-total{
  margin-left: 8px;
}

.nbv5-unread-badge-item{
  margin-right: 6px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 10px;
  padding: 0 5px;
}

.nbv5-lp-emptycard{
  border: 1px dashed rgba(0,0,0,.18);
  border-radius: 14px;
  padding: 16px 14px;
  text-align: center;
  background: rgba(0,0,0,.03);
}

html[data-v5thememode="dark"] .nbv5-lp-emptycard{
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
}

.nbv5-lp-emptyicon{
  width: 42px;
  height: 42px;
  margin: 0 auto 10px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.70);
}

html[data-v5thememode="dark"] .nbv5-lp-emptyicon{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.80);
}

.nbv5-lp-emptyicon svg{
  display: block;
}

.nbv5-lp-emptyicon svg path{
  fill: currentColor;
}

.nbv5-lp-emptytitle{
  font-size: 15px;
  font-weight: 800;
  margin: 0;
}

.nbv5-lp-emptysub{
  margin-top: 4px;
  font-size: 12px;
  opacity: .75;
}


.nbv5-lp-btn:hover:not(:disabled) {
  background: rgba(0,0,0,.10);
}

html[data-v5thememode="dark"] .nbv5-lp-btn:hover:not(:disabled) {
  background: rgba(255,255,255,.10);
}

.nbv5-lp-btn[aria-pressed="true"] {
  background: rgba(0,0,0,.14);
}

html[data-v5thememode="dark"] .nbv5-lp-btn[aria-pressed="true"] {
  background: rgba(255,255,255,.14);
}

.nbv5-lp-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Left panel button tooltip (hover label) */
.nbv5-lp-btn::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  background: rgba(0,0,0,.85);
  color: #fff;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 50;
}

.nbv5-lp-btn:hover::after {
  opacity: 1;
}


.nbv5-lp-ico {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.nbv5-lp-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Icon masks (inline SVG) */
.nbv5-lp-ico.ico-activity {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2.5 2.5 0 0 0 2.45-2H9.55A2.5 2.5 0 0 0 12 22Zm7-6V11a7 7 0 1 0-14 0v5l-2 2v1h18v-1l-2-2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2.5 2.5 0 0 0 2.45-2H9.55A2.5 2.5 0 0 0 12 22Zm7-6V11a7 7 0 1 0-14 0v5l-2 2v1h18v-1l-2-2Z'/%3E%3C/svg%3E");
}

.nbv5-lp-ico.ico-control {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21v-7h2v7H4Zm14 0v-9h2v9h-2ZM11 21V3h2v18h-2ZM4 13V3h2v10H4Zm14-11h2v8h-2V2ZM11 3h2v6h-2V3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21v-7h2v7H4Zm14 0v-9h2v9h-2ZM11 21V3h2v18h-2ZM4 13V3h2v10H4Zm14-11h2v8h-2V2ZM11 3h2v6h-2V3Z'/%3E%3C/svg%3E");
}

.nbv5-lp-ico.ico-help {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 17a1.25 1.25 0 1 1 0-2.5A1.25 1.25 0 0 1 12 19Zm1.4-6.7-.6.4V15h-2v-3.2l1.6-1.1a2 2 0 1 0-3.1-1.7H7.3a4 4 0 1 1 6.1 3.3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 17a1.25 1.25 0 1 1 0-2.5A1.25 1.25 0 0 1 12 19Zm1.4-6.7-.6.4V15h-2v-3.2l1.6-1.1a2 2 0 1 0-3.1-1.7H7.3a4 4 0 1 1 6.1 3.3Z'/%3E%3C/svg%3E");
}

.nbv5-lp-ico.ico-theme {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0 0 20h3a3 3 0 0 0 0-6h-1a1 1 0 0 1 0-2h1a3 3 0 0 0 0-6h-3Zm-4 6a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm-2 5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6 1a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0 0 20h3a3 3 0 0 0 0-6h-1a1 1 0 0 1 0-2h1a3 3 0 0 0 0-6h-3Zm-4 6a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm-2 5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6 1a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z'/%3E%3C/svg%3E");
}

.nbv5-lp-ico.ico-radio {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3h2v12.25A3.75 3.75 0 1 1 17 12V7.25l-8 1.6v8.4A3.75 3.75 0 1 1 7 14V5l10-2Zm-1.25 11.5A1.75 1.75 0 1 0 17.5 16.25a1.75 1.75 0 0 0-1.75-1.75ZM4.75 16.5A1.75 1.75 0 1 0 6.5 18.25 1.75 1.75 0 0 0 4.75 16.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3h2v12.25A3.75 3.75 0 1 1 17 12V7.25l-8 1.6v8.4A3.75 3.75 0 1 1 7 14V5l10-2Zm-1.25 11.5A1.75 1.75 0 1 0 17.5 16.25a1.75 1.75 0 0 0-1.75-1.75ZM4.75 16.5A1.75 1.75 0 1 0 6.5 18.25 1.75 1.75 0 0 0 4.75 16.5Z'/%3E%3C/svg%3E");
}

.nbv5-lp-ico.ico-news {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h11a2 2 0 0 1 2 2v9a3 3 0 0 0 1 2.236A3 3 0 0 1 16 20H7a4 4 0 0 1-4-4V6a2 2 0 0 1 2-2Zm2 4v2h7V8H7Zm0 4v2h7v-2H7Zm9 4a1 1 0 0 0 1-1V6h-1v9a3 3 0 0 0 .268 1H16Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h11a2 2 0 0 1 2 2v9a3 3 0 0 0 1 2.236A3 3 0 0 1 16 20H7a4 4 0 0 1-4-4V6a2 2 0 0 1 2-2Zm2 4v2h7V8H7Zm0 4v2h7v-2H7Zm9 4a1 1 0 0 0 1-1V6h-1v9a3 3 0 0 0 .268 1H16Z'/%3E%3C/svg%3E");
}





.nbv5-skin-v4 .nbv5-pane {
  background: var(--v4-pane-bg);
  border: 2px solid var(--v4-chat-border);
  border-radius: 6px;
  overflow: hidden;
}

.nbv5-skin-v4 .nbv5-pane-header {
  background: var(--v5-paneheader-bg);
  color: #fff;
}

.nbv5-skin-v4 .nbv5-pane-header .text-muted {
  color: rgba(255,255,255,.75) !important;
}

.nbv5-skin-v4 .nbv5-chat {
  background: var(--v4-chat-bg);
  color: var(--v4-text);
  padding: 10px 12px;
}

.nbv5-skin-v4 .nbv5-input {
  background: var(--v4-chat-bg);
}

.nbv5-skin-v4 .nbv5-input .form-control {
  background: #fff;
}

.nbv5-skin-v4 .nbv5.nbv5-is-mobile .nbv5-right {
  border-left: 0 !important;
}

/* Right pane: square top corners (no rounding at the top) */
.nbv5-skin-v4 .nbv5-pane.nbv5.nbv5-is-mobile .nbv5-right {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}


.nbv5-skin-v4 .nbv5-pane-body {
  background: var(--v4-pane-bg);
}

/* People rows */
.nbv5-skin-v4 .nbv5-person {
  padding: 5px 8px;
  border-bottom: 0;
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.25;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Nicklist text polish (2026)
   - keep fixed colors across pane themes
   - role label must sit directly after the nick (no right-alignment gap)
*/
.nbv5-person .nbv5-nick-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nbv5-person .nbv5-nick-name {
  letter-spacing: 0.01em;
  /* Override legacy global .nbv5-nick-name { display:block; } so role stays on the same line */
  display: inline;
}

.nbv5-person .nbv5-nick-role {
  font-size: calc(1em - 1px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  user-select: none;
  white-space: nowrap;
  /* Tight, attached spacing: err0rstotle (superowner) */
  margin-left: 3px;
  /* Pane-theme aware so it stays readable on dark pane */
  opacity: 1;
  color: var(--nbv5-muted) !important;
  display: inline;
}

/* Right pane header layout: keep the away/return button pinned to the pane edge
   and force long self nicks to ellipsis instead of pushing the button out. */
.nbv5-right-headrow{
  gap: .5rem;
}

.nbv5-right-headmain{
  flex: 1 1 auto;
  min-width: 0;
}

/* Self nick display under "users chatting" should also show role suffix inline */
.nbv5-right-selfnick{
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
}

.nbv5-right-selflabel{
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* Self nick under "users chatting" should behave like a nick row for context menu */
.nbv5-right-selfctx{
  min-width: 0;
  border-radius: 6px;
  padding: 2px 4px;
  cursor: context-menu;
}

.nbv5-right-awaybtn{
  flex: 0 0 auto;
  margin-left: auto;
}
.nbv5-right-selfctx:hover{
  background: rgba(51, 122, 191, 0.10) !important;
}
.nbv5-right-selfctx.is-ctx{
  background: rgba(51, 122, 191, 0.18) !important;
  box-shadow: inset 3px 0 0 #337ABF;
}

.nbv5-right-selfnick .nbv5-nick-role-self{
  font-size: calc(1em - 1px);
  line-height: 1;
  font-weight: 500;
  margin-left: 3px;
  opacity: .92;
  color: inherit !important;
  display: inline;
}

.nbv5-person-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-block;
  transform: translateY(0.5px);
  transition: filter 140ms ease, transform 140ms ease;
}


/* Icon fade-swap for mode changes (voice/op/etc) */
@keyframes nbv5IconSwap {
  0% { opacity: 1; transform: translateY(0.5px) scale(1); }
  40% { opacity: 0.25; transform: translateY(0.5px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0.5px) scale(1); }
}

.nbv5-person.is-icon-swap .nbv5-person-ico {
  animation: nbv5IconSwap 180ms ease;
}

.nbv5-skin-v4 .nbv5-person:hover {
  background: rgba(255,255,255,.45);
}

/* Nicklist modern hover + context-active (fixed colors for consistent look) */
.nbv5-person{
  border-radius: 6px;
}
.nbv5-pane-body .nbv5-person:hover{
  background: rgba(51, 122, 191, 0.12) !important;
}
.nbv5-pane-body .nbv5-person:hover .nbv5-person-ico{
  transform: translateY(0.5px) scale(1.03);
  filter: brightness(1.06);
}
.nbv5-pane-body .nbv5-person.is-ctx{
  background: rgba(51, 122, 191, 0.22) !important;
  box-shadow: inset 3px 0 0 #337ABF;
}

/* Nicklist selected row (from chat nick click) */
.nbv5-pane-body .nbv5-person.is-selected{
  background: rgba(51, 122, 191, 0.16) !important;
  box-shadow: inset 3px 0 0 #337ABF;
}

/* Ignored users (display hint only) */
.nbv5-pane-body .nbv5-person.is-ignored{
  position: relative;
}

.nbv5-pane-body .nbv5-person.is-ignored .nbv5-person-ico,
.nbv5-pane-body .nbv5-person.is-ignored .nbv5-nick-text{
  opacity: 0.55;
}

/* Ignored badge overlay (keeps role icon visible) */
.nbv5-pane-body .nbv5-person.is-ignored::after{
  content: "";
  position: absolute;
  left: 18px;
  top: 13px;
  width: 10px;
  height: 10px;
  background: url('images/listicons/ignore.png') no-repeat center center;
  background-size: contain;
  pointer-events: none;
}

/* Tagged badge overlay (keeps role icon visible) */
.nbv5-pane-body .nbv5-person.is-tagged{
  position: relative;
}
.nbv5-pane-body .nbv5-person.is-tagged::before{
  content: "";
  position: absolute;
  left: 18px;
  top: 13px;
  width: 10px;
  height: 10px;
  background: url('images/listicons/tagged.png') no-repeat center center;
  background-size: contain;
  pointer-events: none;
}

/* Self nick row (header) tag overlay */
.nbv5-right-selfctx.is-tagged{
  position: relative;
}
.nbv5-right-selfctx.is-tagged::after{
  content: "";
  position: absolute;
  left: 14px;
  top: 13px;
  width: 10px;
  height: 10px;
  background: url('images/listicons/tagged.png') no-repeat center center;
  background-size: contain;
  pointer-events: none;
}

.nbv5-skin-v4 .nbv5-nick-prefix {
  opacity: .85;
}

.nbv5-skin-v4 .nbv5-iconbtn {
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(0,0,0,.12);
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 1;
  cursor: pointer;
}

.nbv5-skin-v4 .nbv5-iconbtn:hover {
  background: rgba(0,0,0,.20);
}

/* Make Bootstrap buttons feel closer to V4 */
.nbv5-skin-v4 .btn {
  border-radius: 4px;
}

.nbv5-skin-v4 .btn-outline-secondary {
  --bs-btn-color: rgba(255,255,255,.92);
  --bs-btn-border-color: rgba(127,127,127,.55);
  --bs-btn-hover-bg: rgba(0,0,0,.16);
  --bs-btn-hover-border-color: rgba(255,255,255,.55);
  --bs-btn-hover-color: #fff;
}

/* Tighten spacing a bit */
.nbv5-skin-v4 .nbv5-pane-header {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Composer bar (below panes) */
.nbv5-skin-v4 .nbv5-composer {
  /* Uses the theme main surface color (matches the V4-style blue/black frame). */
  background: var(--v5-main-bg);
  padding: 0 10px 10px;
}

.nbv5-composer-spacer{
  width: var(--nbv5-leftpanel-w, 260px);
  flex: 0 0 var(--nbv5-leftpanel-w, 260px);
}
.nbv5-composer-inner {
  /* Transparent frame (let the blue show through like v4) */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.nbv5-skin-v4 .nbv5-composer-spacer {
  flex: 0 0 260px;
  width: 260px;
  min-width: 260px;
}

@media (max-width: 767.98px) {
  /* When the People pane can be hidden, let the composer use full width */
  .nbv5-skin-v4 .nbv5-composer-spacer {
    display: none;
  }
}

.nbv5-skin-v4 .nbv5-composer-input {
  background: #fff;
}

.nbv5-skin-v4 .nbv5-sendbtn {
  width: 44px;
  min-width: 44px;
  padding-left: 0;
  padding-right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===============================
   Bootstrap modal layering
   Ensure V5 dialogs stay above the dimmed layer and remain clickable.
   =============================== */

/* Backdrop should be below the modal */
.modal-backdrop {
  z-index: 5000 !important;
}

/* Some V5 dialogs use Alpine x-show with an inline style="display:none".
   Force visibility based on .show like Bootstrap does. */
.modal-backdrop.show {
  display: block !important;
}

.modal-backdrop:not(.show) {
  display: none !important;
}

/* Modal must be above backdrop and any fixed headers/panes */
.modal {
  z-index: 5010 !important;
}

/* Extra safety: make sure the dialog accepts pointer events */
.modal-dialog,
.modal-content {
  pointer-events: auto;
}

/* ===============================
   V5 THEMES MODAL (overlay, top, compact)
   - Must NOT push layout
   - Must sit above all layers
   =============================== */

/* Treat just the Themes modal as a fixed overlay layer */
#nbv5ThemeModal.modal {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none; /* clicks only on the dialog */
}

#nbv5ThemeModal.modal .modal-dialog {
  pointer-events: auto;
}

/* Pin the themes dialog to the top of the viewport */
#nbv5ThemeModal.modal .nbv5-theme-dialog {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
  left: 50% !important;
  transform: translate(calc(-50% + var(--nbv5-theme-drag-x, 0px)), var(--nbv5-theme-drag-y, 0px)) !important;
  margin: 0 !important;
  width: min(520px, calc(100vw - 20px)) !important;
  max-height: calc(100vh - (env(safe-area-inset-top, 0px) + 20px)) !important;
}

/* Compact, modern chrome */
#nbv5ThemeModal.modal .nbv5-modal {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  border-radius: 16px;
  overflow: hidden;
  background: var(--v5-menu-bg, #1E4864) !important;
  color: #ffffff;
  border: 2px solid var(--v5-paneheader-bg, #285E82) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}

/* Theme modal header should match the active theme chrome (like the emots picker) */
#nbv5ThemeModal .modal-header {
  background: var(--v5-paneheader-bg, #285E82) !important;
  border-bottom: 1px solid rgba(0,0,0,.12);
  cursor: move;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

#nbv5ThemeModal .modal-header.nbv5-theme-dragging {
  cursor: grabbing;
}

#nbv5ThemeModal .modal-title {
  color: inherit;
}

/* Body inherits theme surface color */
#nbv5ThemeModal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: transparent !important;
  color: inherit;
}

/* Inputs inside the Themes modal should match the modal surface (avoid bright white selects). */
#nbv5ThemeModal .form-select,
#nbv5ThemeModal .form-control {
  background-color: rgba(255,255,255,.10) !important;
  color: inherit !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

/* Firefox/Windows: make the opened dropdown list readable (options can inherit white text on a white OS menu). */
html[data-v5thememode='dark'] #nbv5ThemeModal select.form-select option {
  background: #111827;
  color: #ffffff;
}

html[data-v5thememode='light'] #nbv5ThemeModal select.form-select option {
  background: #ffffff;
  color: #111827;
}

#nbv5ThemeModal .form-select:focus,
#nbv5ThemeModal .form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(255,255,255,.12);
}

html[data-v5thememode='light'] #nbv5ThemeModal .form-select,
html[data-v5thememode='light'] #nbv5ThemeModal .form-control {
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(17,24,39,.18) !important;
}

html[data-v5thememode='light'] #nbv5ThemeModal .form-select:focus,
html[data-v5thememode='light'] #nbv5ThemeModal .form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(17,24,39,.10);
}

/* Items should read well on both light and dark theme surfaces */
#nbv5ThemeModal .list-group-item {
  background: rgba(255,255,255,.08);
  color: inherit !important; /* override Bootstrap list-group defaults */
  border: 1px solid rgba(255,255,255,.10);
}

/* Ensure secondary text ("text-muted") remains readable on both modes */
#nbv5ThemeModal .text-muted {
  color: rgba(255,255,255,.72) !important;
}

#nbv5ThemeModal .list-group-item:hover {
  background: rgba(255,255,255,.12);
}

#nbv5ThemeModal .list-group-item.active {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.18);
}

/* Close button contrast on dark-ish headers */
#nbv5ThemeModal .modal-header .btn-close {
  filter: invert(1);
  opacity: .9;
}

/* Divider in modal should be theme-aware */
#nbv5ThemeModal hr {
  border-color: rgba(255,255,255,.16);
  opacity: 1;
}

/* Light theme mode: swap to dark text, adjust item fills/borders, and remove close invert */
html[data-v5thememode='light'] #nbv5ThemeModal.modal .nbv5-modal {
  color: #111827;
  box-shadow: 0 18px 48px rgba(60,45,30,.22);
}

html[data-v5thememode='light'] #nbv5ThemeModal .modal-header {
  border-bottom-color: rgba(0,0,0,.10);
}

html[data-v5thememode='light'] #nbv5ThemeModal .text-muted {
  color: rgba(17,24,39,.70) !important;
}

html[data-v5thememode='light'] #nbv5ThemeModal .list-group-item {
  background: rgba(255,255,255,.35);
  border-color: rgba(0,0,0,.10);
}

html[data-v5thememode='light'] #nbv5ThemeModal .list-group-item:hover {
  background: rgba(255,255,255,.48);
}

html[data-v5thememode='light'] #nbv5ThemeModal .list-group-item.active {
  background: rgba(255,255,255,.62);
  border-color: rgba(0,0,0,.14);
}

html[data-v5thememode='light'] #nbv5ThemeModal .modal-header .btn-close {
  filter: none;
  opacity: .75;
}

html[data-v5thememode='light'] #nbv5ThemeModal hr {
  border-color: rgba(0,0,0,.12);
}

/* Tighten header/body spacing */
#nbv5ThemeModal .modal-header {
  padding: 10px 12px;
}

#nbv5ThemeModal .modal-title {
  font-size: 1rem;
  line-height: 1.1;
}

#nbv5ThemeModal .modal-body {
  padding: 10px 12px 12px;
}

/* Make the Themes list compact and scalable when there are many themes */
#nbv5ThemeModal .list-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  max-height: min(56vh, 520px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px; /* space for scrollbar without clipping */
}

@media (min-width: 520px) {
  #nbv5ThemeModal .list-group {
    grid-template-columns: 1fr 1fr;
  }
}

/* Make list entries more compact */
#nbv5ThemeModal .list-group-item {
  padding: 7px 10px;
  border-radius: 12px;
  margin-bottom: 0;
}

/* Prevent list-group from adding hard edges when we round items */
#nbv5ThemeModal .list-group {
  border: 0;
}

#nbv5ThemeModal .list-group-item + .list-group-item {
  border-top: 0;
}

/* Font size section inside the Themes modal */
#nbv5ThemeModal .nbv5-theme-fonts .btn-outline-secondary {
  border-color: rgba(255,255,255,.28);
  color: inherit;
}

html[data-v5thememode='light'] #nbv5ThemeModal .nbv5-theme-fonts .btn-outline-secondary {
  border-color: rgba(17,24,39,.22);
}

#nbv5ThemeModal .nbv5-theme-range {
  padding: 10px 10px 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

html[data-v5thememode='light'] #nbv5ThemeModal .nbv5-theme-range {
  background: rgba(255,255,255,.35);
  border-color: rgba(0,0,0,.10);
}

#nbv5ThemeModal .nbv5-theme-rangehead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

#nbv5ThemeModal .nbv5-theme-rangelabel {
  font-weight: 600;
}

#nbv5ThemeModal .nbv5-theme-rangeval {
  font-variant-numeric: tabular-nums;
  opacity: .9;
}

/* Theme row live preview swatches:
   - a tiny header gradient strip (theme chrome)
   - a pane surface chip (current pane theme)
*/
#nbv5ThemeModal .nbv5-theme-preview {
  width: 26px;
  height: 18px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,0,0,.18);
}

html[data-v5thememode='dark'] #nbv5ThemeModal .nbv5-theme-preview {
  border-color: rgba(255,255,255,.18);
}

#nbv5ThemeModal .nbv5-theme-preview-header {
  height: 7px;
}

#nbv5ThemeModal .nbv5-theme-preview-pane {
  flex: 1;
}

/* Keyboard focus ring (for Up/Down navigation) */
#nbv5ThemeModal .nbv5-theme-item.is-kbfocus {
  outline: 2px solid var(--v5-paneheader-bg, #285E82);
  outline-offset: 1px;
}

/* Light/Dark badge inside Themes picker (fixed colors for clarity) */
#nbv5ThemeModal .nbv5-theme-badge {
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  user-select: none;
}

#nbv5ThemeModal .nbv5-theme-badge.is-light {
  background: #f3f4f6;
  color: #111827;
}

#nbv5ThemeModal .nbv5-theme-badge.is-dark {
  background: #111827;
  color: #ffffff;
  border-color: rgba(255,255,255,.16);
}

/* Ensure the modal sits above any fixed V5 layers (belt + suspenders) */
#nbv5ThemeModal.modal {
  z-index: 5010 !important;
}

/* Themes modal: keep Bootstrap backdrop for focus trapping, but remove the visual dimming */
body.nbv5-theme-modal-open .modal-backdrop.show {
  opacity: 0 !important;
}

/* Pane light/dark should not force the composer container to white/black.
   Keep composer-inner transparent so it matches nbv5-main background. */
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-composer-inner {
  background: transparent !important;
}


/* Composer bar: match main frame (no white gutter around input/send) */
.nbv5-skin-v4 .nbv5-composer,
.nbv5-skin-v4 .nbv5-composer-inner {
  background: var(--v5-main-bg) !important;
}

.nbv5-skin-v4 .nbv5-composer form {
  background: transparent !important;
}

/* Single composer layout (avoid Bootstrap d-flex !important so x-show can work elsewhere) */
.nbv5-skin-v4 .nbv5-composer-form {
  display: flex;
  gap: 2px;
  width: 100%;
}

/* Input should blend with bar while remaining readable */
.nbv5-skin-v4 .nbv5-composer-input {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: #ffffff !important;
}

.nbv5-skin-v4 .nbv5-composer-input::placeholder {
  color: rgba(255,255,255,.70) !important;
}


/* Pane theme should affect the full pane surface (chat + nicklist + status),
   but NOT the pane header (header stays in the V4 blue scheme). */
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-pane {
  background: var(--nbv5-pane-bg) !important;
  color: var(--nbv5-pane-text) !important;
}

:root[data-chat-theme] .nbv5-skin-v4 .nbv5-chat,
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-pane-body {
  background: var(--nbv5-pane-bg) !important;
  color: var(--nbv5-pane-text) !important;
}

/* Keep pane headers matching tabs background */
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-pane-header {
  background: var(--v5-paneheader-bg) !important;
  color: #ffffff !important;
}
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-pane-header .text-muted {
  color: rgba(255,255,255,.75) !important;
}


/* Composer input follows pane theme (bar stays V4 blue) */
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-composer-input {
  background: var(--nbv5-input-bg) !important;
  border-color: var(--nbv5-input-border) !important;
  color: var(--nbv5-input-text) !important;
}
:root[data-chat-theme] .nbv5-skin-v4 .nbv5-composer-input::placeholder {
  color: var(--nbv5-input-ph) !important;
}


/* Nicklist: tighten vertical spacing */
.nbv5-skin-v4 .nbv5-nick,
.nbv5-skin-v4 .nbv5-person {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  line-height: 1.2 !important;
}


/* ===============================
   Chat line structure (V5)
   =============================== */
.nbv5-line {
  display: flex;
  padding: 1px 0;
  gap: 8px;
  align-items: flex-start;
  white-space: normal;
  word-break: break-word;
}

.nbv5-timestamp {
  flex: 0 0 44px;
  font-variant-numeric: tabular-nums;
  font-size: 0.93em;
  letter-spacing: .01em;
  opacity: .65;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: var(--nbv5-timestamp-bright, var(--nbv5-timestamp)) !important;
  
}

.nbv5-line-text {
  flex: 1 1 auto;
}

.nbv5-msg,
.nbv5-raw {
  flex: 1 1 auto;
}

.nbv5-msg-text,
.nbv5-raw-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.nbv5-msg-text,
.nbv5-raw-text {
  white-space: pre-wrap;
}

/* Contrast assist on dark panes: keep user-chosen dark colors/gradients readable */
/* Dark pane readability assist (subtle, always-on). */
[data-chat-tone="dark"] .nbv5-msg-text,
[data-chat-tone="dark"] .nbv5-msg-text * {
  text-shadow: var(--nbv5-msg-outline-shadow);
  -webkit-text-stroke: var(--nbv5-msg-outline-stroke);
}

/* Do NOT outline code blocks, copy buttons, or UI chrome if they live inside the message HTML. */
[data-chat-tone="dark"] .nbv5-msg-text pre,
[data-chat-tone="dark"] .nbv5-msg-text code,
[data-chat-tone="dark"] .nbv5-msg-text pre *,
[data-chat-tone="dark"] .nbv5-msg-text code * {
  text-shadow: none !important;
  -webkit-text-stroke: 0px transparent !important;
}



/* If we auto-adjust a user-selected dark color/gradient on dark panes, remove most of the outline.
   The derived color is already readable, so we avoid a halo/glow look. */
[data-chat-tone="dark"] .nbv5-tonefix,
[data-chat-tone="dark"] .nbv5-tonefix * {
  text-shadow: 0 0 0.25px rgba(255,255,255,.18) !important;
  -webkit-text-stroke: 0px transparent !important;
}


/* Chat message: nicklist-style icon beside nickname */
.nbv5-msg-head {
  display: inline-block;
  white-space: nowrap;
  line-height: 1.45;
  vertical-align: baseline;
  margin-right: 6px; /* spacing between "nick :" and message */
}

/* Tagged overlay on chat-pane icon */
.nbv5-line.is-tagged .nbv5-msg-head{
  position: relative;
}
.nbv5-line.is-tagged .nbv5-msg-head::after{
  content: "";
  position: absolute;
  left: 10px;
  top: 9px;
  width: 10px;
  height: 10px;
  background: url('images/listicons/tagged.png') no-repeat center center;
  background-size: contain;
  pointer-events: none;
}

.nbv5-msg-ico {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: -3px; /* align icon with nick baseline */
  margin-right: 6px;
}

.nbv5-msg {
  display: block;
  min-width: 0;
  flex: 1 1 auto; /* keep existing flex layout of parent line */
}

.nbv5-msg-text {
  display: inline;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
  line-height: 1.45;
}


/* Chat nick colors (message lines) */
.nbv5-chat-nick {
  color: var(--nbv5-nick-other) !important;
  font-weight: bold;
  line-height: 1.45;
  cursor: pointer;
}

.nbv5-chat-nick-own {
  color: var(--nbv5-nick-self) !important;
  font-weight: bold;
  line-height: 1.45;
  cursor: pointer;
}

/* Tagged message emphasis (fixed colors for consistent look) */
.nbv5-line.is-tagged .nbv5-chat-nick,
.nbv5-line.is-tagged .nbv5-chat-nick-own{
  color: #A05A00 !important;
}
.nbv5-line.is-tagged .nbv5-msg-text{
  background: rgba(255, 214, 0, 0.10) !important;
  border-radius: 4px;
  padding: 0 2px;
}

.nbv5-chat-nick:hover,
.nbv5-chat-nick-own:hover {
  text-decoration: underline;
}

/* Emoticons (legacy mapping) */
.nbv5-emot {
  width: var(--nbv5-emot-size);
  height: var(--nbv5-emot-size);
  vertical-align: -4px;
  margin: 0 1px;
}

/* Inline media previews (GIF/image URLs) */
.nbv5-inline-media {
  display: block;
  margin-top: 6px;
  max-width: var(--nbv5-inline-media-max-width);
}

.nbv5-inline-media-link {
  display: inline-block;
  text-decoration: none;
}

.nbv5-inline-media-img {
  display: block;
  max-width: 100%;
  max-height: var(--nbv5-inline-media-max-height);
  height: auto;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.12);
}

.nbv5-inline-media-img:hover {
  opacity: 0.92;
}

/* Inline media removed placeholder (click-to-remove feedback) */
.nbv5-inline-media-removed {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(154,160,166,.28);
  background: rgba(154,160,166,.14);
  color: #9aa0a6;
  font-size: 13px;
  line-height: 1.2;
  user-select: none;
}

.nbv5-inline-media-removed-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(154,160,166,.9);
  flex: 0 0 auto;
}

.nbv5-inline-media-removed-text {
  white-space: nowrap;
}

/* Inline "Image removed" pill (shown on the nick line after click-to-remove) */
.nbv5-inline-media-removed-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(154,160,166,.28);
  background: rgba(154,160,166,.14) !important;
  color: #9aa0a6;
  font-size: 12.5px;
  line-height: 1.25;
  user-select: none;
  margin-left: 6px;
  vertical-align: baseline;
}

html[data-bs-theme="dark"] .nbv5-inline-media-img {
  border-color: rgba(255,255,255,.14);
}


.nbv5-chat-nick-role {
  margin-left: 3px;
  font-size: calc(1em - 1px);
  line-height: 1.45;
  font-weight: 600;
  color: currentColor;
  opacity: .88;
  white-space: nowrap;
}

/* Pills (system lines) */
.nbv5-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.06) !important;
  line-height: 1.15;
  width: 100%;
  box-sizing: border-box;
}

html[data-bs-theme="dark"] .nbv5-pill {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.10) !important;
}

.nbv5-pill-ico {
  width: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  opacity: .85;
}

.nbv5-pill-text {
  display: block;
  flex: 1 1 auto;
  white-space: normal;
}

/*
  System lines (replaces pills)
  - Icon + text inline, no pill background.
  - Fixed colors (do not theme-shift).
*/
.nbv5-sysline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-weight: 400;
  /* Must scale with the Chat/Activity/Whisper font size slider */
  font-size: 1em;
  line-height: 1.35;
  letter-spacing: .01em;
}

.nbv5-sysline-ico {
  width: 18px;
  text-align: center;
  opacity: .95;
}

.nbv5-sysline-text {
  white-space: normal;
  font-weight: 400;
}

/* Kind colors (fixed) */
.nbv5-sysline-connected,
.nbv5-sysline-join { color: #2F855A !important; }
.nbv5-sysline-part,
.nbv5-sysline-quit { color: #6B7280 !important; }
.nbv5-sysline-nick { color: #2C6AA3 !important; }
.nbv5-sysline-mode { color: #7C5AC9 !important; }
.nbv5-sysline-topic { color: #2B8C85 !important; }
.nbv5-sysline-kick,
.nbv5-sysline-error { color: #C44545 !important; font-weight: 400 !important; }
.nbv5-sysline-notice,
.nbv5-sysline-onjoin { color: #B7791F !important; }
.nbv5-sysline-away { color: #B7791F !important; }
.nbv5-sysline-unaway { color: #2F855A !important; }
.nbv5-sysline-info { color: #4C78A8 !important; }
.nbv5-sysline-nickinuse { color: #C44545 !important; font-weight: 400 !important; }
.nbv5-sysline-action { color: #8A6A3F !important; }
.nbv5-sysline-whisper { color: #2B8C85 !important; }
.nbv5-sysline-cmwhisp { color: #7C5AC9 !important; }

/* Kind hooks for per-pill styling (subtle tints) */
.nbv5-pill-connected {
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.08) !important;
}
.nbv5-pill-join {
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.12) !important;
}
.nbv5-pill-part,
.nbv5-pill-quit {
  border-color: rgba(107,114,128,.32);
  background: rgba(107,114,128,.12) !important;
}
.nbv5-pill-nick {
  border-color: rgba(59,130,246,.35);
  background: rgba(59,130,246,.12) !important;
}
.nbv5-pill-mode {
  border-color: rgba(168,85,247,.35);
  background: rgba(168,85,247,.12) !important;
}
.nbv5-pill-topic {
  border-color: rgba(20,184,166,.35);
  background: rgba(20,184,166,.12) !important;
}
.nbv5-pill-kick {
  border-color: rgba(239,68,68,.38);
  background: rgba(239,68,68,.13) !important;
}
.nbv5-pill-notice {
  border-color: rgba(245,158,11,.38);
  background: rgba(245,158,11,.13) !important;
}

.nbv5-pill-nickinuse {
  /* Nickname in use (433/436): fixed warning tint */
  border-color: rgba(239,68,68,.45) !important;
  background: rgba(255,197,197,.35) !important;
  color: #3a0b0b;
}
.nbv5-pill-action {
  /* ACTION (/me): fixed light brown tint (does not vary between light/dark) */
  border-color: rgba(160,120,80,.45) !important;
  background: rgba(217,179,140,.28) !important; /* light brownish */
  color: #1b1208;
}


.nbv5-pill-onjoin {
  border-color: rgba(14,165,233,.38);
  background: rgba(14,165,233,.13) !important;
}
.nbv5-pill-info {
  border-color: rgba(0,0,0,.14);
  background: rgba(0,0,0,.06) !important;
}

/* Dark theme: slightly higher opacity (same hues) */
html[data-bs-theme="dark"] .nbv5-pill-connected {
  background: rgba(34,197,94,.16) !important;
  border-color: rgba(34,197,94,.38);
}
html[data-bs-theme="dark"] .nbv5-pill-join {
  background: rgba(34,197,94,.22) !important;
  border-color: rgba(34,197,94,.45);
}
html[data-bs-theme="dark"] .nbv5-pill-part,
html[data-bs-theme="dark"] .nbv5-pill-quit {
  background: rgba(107,114,128,.20) !important;
  border-color: rgba(107,114,128,.40);
}
html[data-bs-theme="dark"] .nbv5-pill-nick {
  background: rgba(59,130,246,.22) !important;
  border-color: rgba(59,130,246,.45);
}
html[data-bs-theme="dark"] .nbv5-pill-mode {
  background: rgba(168,85,247,.22) !important;
  border-color: rgba(168,85,247,.45);
}
html[data-bs-theme="dark"] .nbv5-pill-topic {
  background: rgba(20,184,166,.22) !important;
  border-color: rgba(20,184,166,.45);
}
html[data-bs-theme="dark"] .nbv5-pill-kick {
  background: rgba(239,68,68,.22) !important;
  border-color: rgba(239,68,68,.48);
}
html[data-bs-theme="dark"] .nbv5-pill-notice {
  background: rgba(245,158,11,.22) !important;
  border-color: rgba(245,158,11,.48);
}
html[data-bs-theme="dark"] .nbv5-pill-onjoin {
  background: rgba(14,165,233,.22) !important;
  border-color: rgba(14,165,233,.48);
}
html[data-bs-theme="dark"] .nbv5-pill-info {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.14);
}

/* Line kind hooks (friendly system messages) */
.nbv5-line-msg {}
.nbv5-line-notice {}
.nbv5-line-join {}
.nbv5-line-part {}
.nbv5-line-quit {}
.nbv5-line-nick {}
.nbv5-line-mode {}
.nbv5-line-topic {}
.nbv5-line-raw {
  opacity: .8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Nicklist role suffix */
.nbv5-nick-role {
  margin-left: 0;
}


/* ===== Left panel single Room button ===== */

.nbv5-lp-roomwrap {
  margin-top: 10px;
  padding: 0 8px;
}

/* Room button */
.nbv5-lp-roombtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* LEFT align text */
  gap: 6px;

  padding: 8px 10px;
  border-radius: 10px;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.28); /* visible border */

  color: #ffffff;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.nbv5-lp-roombtn:hover {
  background: rgba(255,255,255,.14);
}

.nbv5-lp-roomhash {
  opacity: .7;
  flex-shrink: 0;
}

.nbv5-lp-roomname {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-v5thememode="dark"] .nbv5-lp-roombtn {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.nbv5-lp-roombtn:hover {
  background: rgba(0,0,0,.10);
}

html[data-v5thememode="dark"] .nbv5-lp-roombtn:hover {
  background: rgba(255,255,255,.10);
}

.nbv5-lp-roombtn[aria-pressed="true"] {
  background: rgba(0,0,0,.14);
}

html[data-v5thememode="dark"] .nbv5-lp-roombtn[aria-pressed="true"] {
  background: rgba(255,255,255,.14);
}

.nbv5-lp-room-ico {
  font-weight: 900;
  opacity: .8;
  flex: 0 0 auto;
}

.nbv5-lp-room-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

/* --- Left panel footer + scroll body (V5) --- */
.nbv5-leftpanel{
  display: flex;
  flex-direction: column;
  height: 100%;
  background:
    var(--v5-topbar-bg) top / 100% 52px no-repeat,
    var(--v5-main-bg);
}

.nbv5-leftpanel .nbv5-lp-body{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.nbv5-leftpanel .nbv5-lp-footer{
  padding: 10px 12px;
  border-top: 1px solid var(--v4-footer-border);
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  margin-right:10px;
}


.nbv5-leftpanel .nbv5-lp-footlogo{
  display: block;
  margin: 0 auto 6px auto;
  height: 18px;
  width: auto;
  opacity: .95;
  transform: translateX(24px);
}

/* Footer logo (inline SVG) must stay readable across all themes */
[data-v5thememode="light"] .nbv5-leftpanel .nbv5-lp-footlogo{ color: #2B2620; }
[data-v5thememode="dark"]  .nbv5-leftpanel .nbv5-lp-footlogo{ color: #ffffff; }

/* Below-the-fold ad placeholder should follow theme text tone (light/dark). */
html[data-v5thememode="light"] .nbv5-ad-banner{ color: #2B2620 !important; }
html[data-v5thememode="dark"]  .nbv5-ad-banner{ color: #ffffff !important; }

.nbv5-leftpanel .nbv5-lp-footlogo text{
  paint-order: stroke fill;
  stroke-linejoin: round;
  stroke-width: 3;
}

/* On light themes: dark fill with a subtle light stroke helps on textured backgrounds */
[data-v5thememode="light"] .nbv5-leftpanel .nbv5-lp-footlogo text{ stroke: rgba(255,255,255,.55); }
/* On dark themes: light fill with a subtle dark stroke */
[data-v5thememode="dark"]  .nbv5-leftpanel .nbv5-lp-footlogo text{ stroke: rgba(0,0,0,.55); }

html[data-v5thememode="dark"] .nbv5-leftpanel .nbv5-lp-footer{
  border-top: 1px solid rgba(127,127,127,.28);
}

.nbv5-leftpanel .nbv5-lp-footlinks{
  margin-top: 4px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.nbv5-leftpanel .nbv5-lp-footlink{
  text-decoration: none;
}

.nbv5-leftpanel .nbv5-lp-footlink:hover{
  text-decoration: underline;
}
.nbv5-leftpanel .nbv5-lp-footbtn{
  /* Reuse the left-nav button styling (nbv5-lp-btn), but slightly smaller */
  width: 36px;
  height: 30px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}

.nbv5-leftpanel .nbv5-lp-footbtn i{
  font-size: 14px;
  line-height: 1;
}

.nbv5-leftpanel .nbv5-lp-footcopy{
  margin-top: 8px;
  font-size: 12px;
  opacity: .80;
  text-align: center;
}
[data-v5thememode="light"] .nbv5-leftpanel .nbv5-lp-footbtn{
  background: rgba(255,255,255,.70) !important;
  color: #2B2620;
  border: 1px solid rgba(0,0,0,.12);
}

[data-v5thememode="dark"] .nbv5-leftpanel .nbv5-lp-footbtn{
  background: rgba(0,0,0,.22) !important;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.18);
}

.nbv5-leftpanel .nbv5-lp-footbtn:hover{
  text-decoration: none;
  filter: brightness(1.05);
}

.nbv5-leftpanel .nbv5-lp-footbtn:active{
  transform: translateY(1px);
}


/* --- 
/* --- Shell layout: left pane full-height column (V5) --- */
.nbv5-shell{
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}

.nbv5-stage{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.nbv5-stage > .nbv5-topbar{ flex: 0 0 auto; }
.nbv5-stage > .nbv5-main{ flex: 1 1 auto; min-height: 0; }
.nbv5-shell > .nbv5-leftpanel{ height: 100%; }
Ensure left panel/footer reach bottom (V5) --- */
.nbv5-main{
  display: flex;
  flex-direction: column;
}

.nbv5-main > .container-fluid{
  flex: 1 1 auto;
  min-height: 0;
}

.nbv5-main > .container-fluid > .d-flex{
  flex: 1 1 auto;
  min-height: 0;
}

/* --- Composer belongs to center pane (V5) --- */
.nbv5-center .nbv5-composer.nbv5-composer-center{
  background: transparent;
  padding: 10px 5px 0px 0;
  border-top: 1px solid rgba(0,0,0,.14);
}

.nbv5-chat-theme-dark .nbv5-center .nbv5-composer.nbv5-composer-center{
  border-top: 1px solid rgba(127,127,127,.28);
}

.nbv5-center .nbv5-composer-input{
  background: var(--nbv5-input-bg) !important;
  border-color: var(--nbv5-input-border) !important;
  color: var(--nbv5-input-text) !important;
}
.nbv5-center .nbv5-composer-input::placeholder{
  color: var(--nbv5-input-ph) !important;
  opacity: 1;
}
/* Emoticon picker (composer) */
.nbv5-center .nbv5-composer-form{
  position: relative;
}

.nbv5-emotbtn{
  padding: 0 10px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  /* spacing is controlled by the composer flex gap */
  margin-left: 0 !important;
  background: #1f2328 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #e6edf3 !important;
}
.nbv5-emotbtn:hover{ background: rgba(255,255,255,.06) !important; }

/* Small icon buttons used in pane headers (e.g., Away/Back in People pane)
   Keep fixed colors so they don't shift across pane themes. */
.nbv5-iconbtn{
  height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #1f2328 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #e6edf3 !important;
}
.nbv5-iconbtn:hover{ background: rgba(255,255,255,.06) !important; }

/* Stored away message button (composer) */
.nbv5-awaymsgbtn{
  padding: 0 10px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  /* spacing is controlled by the composer flex gap */
  margin-left: 0 !important;
  background: #1f2328 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #e6edf3 !important;
}
.nbv5-awaymsgbtn:hover{ background: rgba(255,255,255,.06) !important; }

/* Giphy button (composer) */
.nbv5-giphybtn{
  padding: 0 10px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  /* spacing is controlled by the composer flex gap */
  margin-left: 0 !important;
  background: #1f2328 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #e6edf3 !important;
}
.nbv5-giphybtn:hover{ background: rgba(255,255,255,.06) !important; }

.nbv5-emots-pop{
  position: fixed;
  /* JS (NBV5.EmotsUI) sets top/left so we can anchor to the emot button and stay on-screen. */
  right: 16px;
  bottom: 74px;
  width: min(560px, calc(100vw - 24px));
  z-index: 6000;
  overflow: hidden;
  border-radius: 14px;

  /* Theme surface: pop frame matches theme; header uses paneheader token; grid stays white for icon clarity */
  background: var(--v5-main-bg);
  /* Border matches the active theme accent (same token used by pane headers).
     NOTE: the picker is position:fixed, so include a fallback and force with !important
     to avoid any grey overrides on some browsers/themes. */
  border: 2px solid var(--v5-paneheader-bg, #285E82) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
}

html[data-v5thememode="light"] .nbv5-emots-x{
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  color: #1f2328 !important;
}
html[data-v5thememode="light"] .nbv5-emots-x:hover{
  background: rgba(255,255,255,.72) !important;
}
html[data-v5thememode="light"] #nbv5EmotsPop .nbv5-emots-secbtn{
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  color: #1f2328 !important;
}
html[data-v5thememode="light"] #nbv5EmotsPop .nbv5-emots-secbtn:hover{
  background: rgba(255,255,255,.72) !important;
}

.nbv5-emots-q{
  background: rgba(0,0,0,.15) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #e6edf3 !important;
}
.nbv5-emots-q::placeholder{ color: rgba(230,237,243,.65) !important; }

.nbv5-emots-x{
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #e6edf3 !important;
  border-radius: 8px;
}
.nbv5-emots-x:hover{ background: rgba(255,255,255,.10) !important; }

/* Emoticon picker header: adapt to light/dark theme mode (theme picker sets data-v5thememode on <html>). */
html[data-v5thememode="light"] .nbv5-emots-head{
  color: #1f2328 !important;
}
html[data-v5thememode="light"] .nbv5-emots-q{
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  color: #1f2328 !important;
}
html[data-v5thememode="light"] .nbv5-emots-q::placeholder{
  color: rgba(31,35,40,.65) !important;
}
html[data-v5thememode="light"] .nbv5-emots-x{
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  color: #1f2328 !important;
}
html[data-v5thememode="light"] .nbv5-emots-x:hover{
  background: rgba(255,255,255,.72) !important;
}

.nbv5-emots-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 6px;
  padding: 8px;
  /* Static-feeling height so first open doesn't appear "tiny" while the grid is filling. */
  height: clamp(280px, 40vh, 400px);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--nbv5-pane-bg) !important;
  align-self: stretch;
}


/* GIPHY picker shell */
.nbv5-giphy-pop{
  position: fixed;
  right: 16px;
  bottom: 74px;
  width: 420px;
  height: 320px;
  min-width: 340px;
  min-height: 260px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 6000;
  border-radius: 14px;
  background: var(--v5-main-bg);
  border: 2px solid var(--v5-paneheader-bg, #285E82) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
  max-width: none !important;
}

.nbv5-giphy-head{
  background: var(--v5-paneheader-bg);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--v5-main-fg, #ffffff) 10%, transparent);
}

.nbv5-giphy-headrow{
  display: flex;
  gap: 6px;
  align-items: center;
}

.nbv5-giphy-headspacer{
  flex: 1 1 auto;
  min-width: 20px;
  align-self: stretch;
}

.nbv5-giphy-hint{
  color: rgba(230,237,243,.75) !important;
  padding-left: 2px;
}
html[data-v5thememode="light"] .nbv5-giphy-hint{ color: rgba(255,255,255,.82) !important; }

.nbv5-giphy-more,
.nbv5-giphy-reset,
.nbv5-giphy-x{
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #e6edf3 !important;
  border-radius: 10px;
  flex-shrink: 0;
}
.nbv5-giphy-more:hover,
.nbv5-giphy-reset:hover,
.nbv5-giphy-x:hover{ background: rgba(255,255,255,.10) !important; }
.nbv5-giphy-more:disabled{ opacity: .55; cursor: default; }
html[data-v5thememode="light"] .nbv5-giphy-more,
html[data-v5thememode="light"] .nbv5-giphy-reset,
html[data-v5thememode="light"] .nbv5-giphy-x{
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #ffffff !important;
}
.nbv5-giphy-q{
  flex: 0 0 220px;
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  background: var(--nbv5-input-bg) !important;
  border: 1px solid var(--nbv5-input-border) !important;
  color: var(--nbv5-input-text) !important;
}
.nbv5-giphy-q::placeholder{ color: var(--nbv5-input-ph) !important; opacity: 1; }

.nbv5-giphy-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 10px;
  background: var(--v5-main-bg) !important;
}

.nbv5-giphy-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  align-content: start;
}

.nbv5-giphy-foot{
  flex: 0 0 18px;
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 8px 4px 8px;
  background: var(--v5-main-bg) !important;
}

.nbv5-giphy-poweredwrap{
  display: flex;
  align-items: center;
  min-width: 0;
}

.nbv5-giphy-powered{
  max-width: 112px;
  width: auto;
  height: auto;
}

.nbv5-giphy-resize{
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  cursor: nwse-resize;
  align-self: flex-end;
  background: linear-gradient(135deg, transparent 0 45%, rgba(255,255,255,.16) 45% 55%, transparent 55% 100%);
}

html[data-v5thememode="light"] .nbv5-giphy-head{ color: #ffffff !important; }
.nbv5-giphy-item{
  appearance: none;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.04) !important;
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
}
html[data-v5thememode="light"] .nbv5-giphy-item{
  border: 1px solid rgba(0,0,0,.14) !important;
  background: rgba(255,255,255,.65) !important;
}
.nbv5-giphy-item:hover{ background: rgba(255,255,255,.08) !important; }
html[data-v5thememode="light"] .nbv5-giphy-item:hover{ background: rgba(255,255,255,.85) !important; }

.nbv5-giphy-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nbv5-giphy-msg{
  grid-column: 1 / -1;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.14) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #e6edf3 !important;
  white-space: normal;
}
html[data-v5thememode="light"] .nbv5-giphy-msg{
  background: rgba(255,255,255,.75) !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  color: #1f2328 !important;
}

.nbv5-giphy-foot{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 10px;
  padding-right: 10px;
  /* Match popup surface (overall theme background). */
  background: var(--v5-main-bg) !important;
  border-top: 1px solid rgba(255,255,255,.08);
}
html[data-v5thememode="light"] .nbv5-giphy-foot{ border-top: 1px solid rgba(0,0,0,.12); }

/* Footer logo: default to dark-mode logo so it shows even if theme attribute is missing.
   Then swap based on data-v5thememode (matches how other themed UI is selected). */
.nbv5-giphy-powered{ height: 16px; width: auto; opacity: .95; display:none; }
.nbv5-giphy-powered-dark{ display:inline-block; }
html[data-v5thememode="light"] .nbv5-giphy-powered-dark{ display:none !important; }
html[data-v5thememode="light"] .nbv5-giphy-powered-light{ display:inline-block !important; }
html[data-v5thememode="dark"] .nbv5-giphy-powered-light{ display:none !important; }
html[data-v5thememode="dark"] .nbv5-giphy-powered-dark{ display:inline-block !important; }

/* Emot picker: wrapper so Alpine x-for renders a single root node, without affecting grid layout */
.nbv5-emots-entry{ display: contents; }

#nbv5EmotsPop .nbv5-emots-sep{
  grid-column: 1 / -1;
  margin: 4px 0 2px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--nbv5-pane-sep-text-bright, var(--nbv5-pane-sep-text)) !important;
  /* Keep section dividers subtle and pane-aware instead of using the full header color. */
  border-top: 1px solid var(--nbv5-pane-border);
}
@supports (color: color-mix(in srgb, black 50%, white)) {
  #nbv5EmotsPop .nbv5-emots-sep{
    border-top-color: color-mix(in srgb, var(--nbv5-pane-border) 44%, var(--nbv5-pane-bg));
  }
}


/* ===============================
   Relay-Radio drawer (center pane)
   =============================== */
.chat-radio-drawer {
  margin-top: 8px;
 background: var(--v5-main-bg) !important;
}

.chat-radio-frame {
  width: 100%;
  height: 60px;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  background: var(--v5-main-bg) !important;
}

.chat-radio-iframe {
  width: 100%;
  height: 70px;
  border: 0;
  display: block;
}

/* ===============================
   Control Panel (center pane)
   =============================== */

.nbv5-control {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.nbv5-control-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--nbv5-pane-border);
}

.nbv5-control-title {
  font-weight: 700;
  letter-spacing: .2px;
}

.nbv5-control-body {
  padding: 8px;
overflow: auto;
  min-height: 0;
}

.nbv5-control-intro {
  font-size: 12px;
  opacity: .78;
  margin: 0 2px 8px 2px;
}

.nbv5-control-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nbv5-control-section {
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
}

.nbv5-control-h {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .8;
  margin-bottom: 10px;
}

.nbv5-control-row {
  margin-bottom: 10px;
}

.nbv5-control-help {
  font-size: 12px;
  opacity: .75;
  margin-top: 6px;
}

/* Control Panel: Performance snapshot block (avoid inheriting .nbv5-control-help opacity) */
.nbv5-perfsnap {
  font-size: 12px;
}

.nbv5-perfsnap-sub {
  font-size: 12px;
  opacity: .8;
}

/* Ensure button labels remain readable even inside subtle CP sections */
.nbv5-perfsnap .btn {
  opacity: 1 !important;
}


/* My default look (message format) */
.nbv5-mylook-sub {
  font-size: 12px;
  opacity: .75;
  margin-top: 2px;
}

/* My Message Format: single column (preview lives under Gradient) */
.nbv5-mylook-grid {
  display: block;
}

.nbv5-mylook-controls {
  min-width: 0;
}

.nbv5-mylook-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 12px;
  background: rgba(0,0,0,0.02);
  margin-bottom: 6px;
}

.nbv5-mylook-rowlabel {
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  margin: 0;
  opacity: .92;
}

.nbv5-mylook-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* Keep B / I / U on the same line as the font selector */
.nbv5-mylook-fontstyle {
  flex-wrap: nowrap;
  gap: 6px;
}

.nbv5-mylook-fontstyle .nbv5-mylook-font {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.nbv5-mylook-fontstyle .nbv5-mylook-font {
  flex: 1 1 240px;
}

.nbv5-mylook-font {
  min-width: 190px;
  max-width: 360px;
}

.nbv5-mylook-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 10px !important;
  line-height: 1.1 !important;
  min-width: 34px;
  border: 1px solid #9aa0a6 !important;
  color: #111827 !important;
  background: #f3f4f6 !important;
  box-shadow: none !important;
}

.nbv5-mylook-btn:hover {
  background: #e5e7eb !important;
  border-color: #6b7280 !important;
}

.nbv5-mylook-btn:focus,
.nbv5-mylook-btn:focus-visible {
  outline: 2px solid #2563eb !important;
  outline-offset: 2px;
}

.nbv5-mylook-btn.active {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #ffffff !important;
}

.nbv5-mylook-color {
  width: 42px;
  padding: 0;
  height: 30px;
}

.nbv5-mylook-hex {
  width: 92px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Keep Bootstrap form-switch from sliding left inside tiles */
.nbv5-mylook-row .form-switch {
  padding-left: 0 !important;
}

.nbv5-mylook-row .form-switch .form-check-input {
  margin-left: 0 !important;
}

.nbv5-mylook-graddeg {
  width: 140px;
}

.nbv5-mylook-gradtoggle {
  margin: 0;
}

.nbv5-mylook-gradfields {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nbv5-mylook-gradfields.is-off {
  opacity: .55;
  pointer-events: none;
}

.nbv5-mylook-gradanim {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nbv5-mylook-gradanim .form-check-label {
  font-size: 12px;
  opacity: .85;
}

.nbv5-mylook-preview {
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 12px;
  padding: 8px;
  background: rgba(0,0,0,0.02);
}

.nbv5-mylook-preview.is-off {
  opacity: .55;
}

.nbv5-mylook-preview-label {
  font-size: 12px;
  opacity: .75;
  margin-bottom: 6px;
}

.nbv5-mylook-preview-box {
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 10px;
  padding: 10px;
  background-color: rgba(0,0,0,0.03);
  min-height: 110px;
  font-size: 16px;
  line-height: 1.35;
}


/* Activity pane friendly output (no pills/icons) */ (no pills/icons) */
.nbv5-activity-text {
  white-space: pre-wrap;
}


/* ===============================
   Room Settings Modal (IRCwx PROPs)
   =============================== */

#nbv5RoomSettingsModal.nbv5-roomprops-modal {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none;
  z-index: 5015 !important;
}

/* Bootstrap defaults .modal { display:none; } so force fixed overlay show/hide like other V5 modals */
#nbv5RoomSettingsModal.modal.show {
  display: block !important;
}

#nbv5RoomSettingsModal.modal:not(.show) {
  display: none !important;
}

#nbv5RoomSettingsModal .nbv5-roomprops-dialog {
  pointer-events: auto;
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  width: min(620px, calc(100vw - 20px)) !important;
  max-height: calc(100vh - (env(safe-area-inset-top, 0px) + 24px)) !important;
}

#nbv5RoomSettingsModal .nbv5-modal {
  border-radius: 16px;
  overflow: hidden;
  background: var(--v5-menu-bg, #1E4864) !important;
  color: #ffffff;
  border: 2px solid var(--v5-paneheader-bg, #285E82) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}

#nbv5RoomSettingsModal .modal-header {
  background: var(--v5-paneheader-bg, #285E82) !important;
  border-bottom: 1px solid rgba(0,0,0,.12);
  padding: 8px 14px 7px;
}

#nbv5RoomSettingsModal .modal-title {
  margin-bottom: 0;
}

#nbv5RoomSettingsModal .modal-body,
#nbv5RoomSettingsModal .modal-footer {
  background: transparent !important;
  color: inherit;
}

#nbv5RoomSettingsModal .form-control {
  background: rgba(0,0,0,.15) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}

#nbv5RoomSettingsModal .form-select {
  background: rgba(0,0,0,.15) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}

#nbv5RoomSettingsModal .form-select option {
  color: #111827;
}

#nbv5RoomSettingsModal .form-control::placeholder {
  color: rgba(255,255,255,.65) !important;
}

#nbv5RoomSettingsModal .form-text {
  color: rgba(255,255,255,.72) !important;
}

#nbv5RoomSettingsModal .nbv5-prop-setbtn {
  border-radius: 0 !important;
  margin-left: 1px !important;
  padding: .30rem .60rem !important;
  font-weight: 700;
  letter-spacing: .2px;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.92) !important;
}

#nbv5RoomSettingsModal .nbv5-prop-setbtn:hover,
#nbv5RoomSettingsModal .nbv5-prop-setbtn:focus {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.30) !important;
  color: #ffffff !important;
}

#nbv5RoomSettingsModal .nbv5-prop-setbtn:disabled {
  opacity: .45;
}

#nbv5RoomSettingsModal .nbv5-prop-lockedtag {
  opacity: .85;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.18);
}

#nbv5RoomSettingsModal .nbv5-prop-lock {
  margin: 0;
}

#nbv5RoomSettingsModal .nbv5-prop-lock .form-check-label {
  opacity: .85;
}

#nbv5RoomSettingsModal .modal-header .btn-close {
  filter: invert(1);
  opacity: .9;
}

/* Outline buttons inside the modal need theme-aware text */
#nbv5RoomSettingsModal .btn-outline-secondary {
  color: rgba(255,255,255,.88) !important;
  border-color: rgba(255,255,255,.22) !important;
}

#nbv5RoomSettingsModal .btn-outline-secondary:hover,
#nbv5RoomSettingsModal .btn-outline-secondary:focus {
  color: #ffffff !important;
  border-color: rgba(255,255,255,.32) !important;
  background: rgba(255,255,255,.08) !important;
}

#nbv5RoomSettingsModal .modal-body {
  max-height: calc(100vh - 220px);
  overflow: auto;
}

#nbv5RoomSettingsModal .nbv5-roomprops-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  pointer-events: auto;
}

.nbv5-roomprops-sub {
  margin-bottom: 10px;
  opacity: .9;
}

.nbv5-roomprops-room {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}

.nbv5-roomprops-label {
  opacity: .75;
}

html[data-v5thememode='light'] #nbv5RoomSettingsModal .nbv5-modal {
  color: #111827;
  box-shadow: 0 18px 48px rgba(60,45,30,.22);
}

html[data-v5thememode='light'] #nbv5RoomSettingsModal .form-control {
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #111827 !important;
}

html[data-v5thememode='light'] #nbv5RoomSettingsModal .form-select {
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #111827 !important;
}

html[data-v5thememode='light'] #nbv5RoomSettingsModal .form-control::placeholder {
  color: rgba(17,24,39,.55) !important;
}

html[data-v5thememode='light'] #nbv5RoomSettingsModal .form-text {
  color: rgba(17,24,39,.70) !important;
}

html[data-v5thememode='light'] #nbv5RoomSettingsModal .nbv5-prop-setbtn {
  background: rgba(0,0,0,.06) !important;
  border-color: rgba(0,0,0,.16) !important;
  color: rgba(0,0,0,.88) !important;
}

html[data-v5thememode='light'] #nbv5RoomSettingsModal .nbv5-prop-setbtn:hover,
html[data-v5thememode='light'] #nbv5RoomSettingsModal .nbv5-prop-setbtn:focus {
  background: rgba(0,0,0,.09) !important;
  border-color: rgba(0,0,0,.22) !important;
  color: rgba(0,0,0,.92) !important;
}

html[data-v5thememode='light'] #nbv5RoomSettingsModal .nbv5-prop-lockedtag {
  border-color: rgba(0,0,0,.18);
  background: rgba(255,255,255,.65);
}

html[data-v5thememode='light'] #nbv5RoomSettingsModal .modal-header .btn-close {
  filter: none;
  opacity: .75;
}

html[data-v5thememode='light'] #nbv5RoomSettingsModal .btn-outline-secondary {
  color: rgba(0,0,0,.85) !important;
  border-color: rgba(0,0,0,.22) !important;
  background: rgba(255,255,255,.55) !important;
}

html[data-v5thememode='light'] #nbv5RoomSettingsModal .btn-outline-secondary:hover,
html[data-v5thememode='light'] #nbv5RoomSettingsModal .btn-outline-secondary:focus {
  color: rgba(0,0,0,.92) !important;
  border-color: rgba(0,0,0,.32) !important;
}


/* ===============================
   Room Modes Modal
   - Uses the same fixed overlay pattern as Room Settings (PROPs)
   =============================== */

#nbv5RoomModesModal.nbv5-roomprops-modal {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none;
  z-index: 5015 !important;
}

/* Bootstrap defaults .modal { display:none; } so force fixed overlay show/hide */
#nbv5RoomModesModal.modal.show {
  display: block !important;
}

#nbv5RoomModesModal.modal:not(.show) {
  display: none !important;
}

#nbv5RoomModesModal .nbv5-roomprops-dialog {
  pointer-events: auto;
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  width: min(620px, calc(100vw - 20px)) !important;
  max-height: calc(100vh - (env(safe-area-inset-top, 0px) + 24px)) !important;
}

#nbv5RoomModesModal .nbv5-modal {
  border-radius: 16px;
  overflow: hidden;
  background: var(--v5-menu-bg, #1E4864) !important;
  color: #ffffff;
  border: 2px solid var(--v5-paneheader-bg, #285E82) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}

#nbv5RoomModesModal .modal-header {
  background: var(--v5-paneheader-bg, #285E82) !important;
  border-bottom: 1px solid rgba(0,0,0,.12);
  padding: 8px 14px 7px;
}

#nbv5RoomModesModal .modal-title {
  margin-bottom: 0;
}

#nbv5RoomModesModal .modal-body,
#nbv5RoomModesModal .modal-footer {
  background: transparent !important;
  color: inherit;
}

#nbv5RoomModesModal .form-control {
  background: rgba(0,0,0,.15) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}

#nbv5RoomModesModal .form-control::placeholder {
  color: rgba(255,255,255,.65) !important;
}

#nbv5RoomModesModal .nbv5-prop-setbtn {
  border-radius: 0 !important;
  margin-left: 1px !important;
  padding: .30rem .60rem !important;
  font-weight: 700;
  letter-spacing: .2px;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.92) !important;
}

#nbv5RoomModesModal .nbv5-prop-setbtn:hover,
#nbv5RoomModesModal .nbv5-prop-setbtn:focus {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.30) !important;
  color: #ffffff !important;
}

#nbv5RoomModesModal .nbv5-prop-setbtn:disabled {
  opacity: .45;
}

#nbv5RoomModesModal .modal-header .btn-close {
  filter: invert(1);
  opacity: .9;
}

/* Outline buttons inside the modal need theme-aware text */
#nbv5RoomModesModal .btn-outline-secondary {
  color: rgba(255,255,255,.88) !important;
  border-color: rgba(255,255,255,.22) !important;
}

#nbv5RoomModesModal .btn-outline-secondary:hover,
#nbv5RoomModesModal .btn-outline-secondary:focus {
  color: #ffffff !important;
  border-color: rgba(255,255,255,.32) !important;
  background: rgba(255,255,255,.08) !important;
}

#nbv5RoomModesModal .modal-body {
  max-height: calc(100vh - 220px);
  overflow: auto;
}

html[data-v5thememode='light'] #nbv5RoomModesModal .nbv5-modal {
  color: #111827;
  box-shadow: 0 18px 48px rgba(60,45,30,.22);
}

html[data-v5thememode='light'] #nbv5RoomModesModal .form-control {
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #111827 !important;
}

html[data-v5thememode='light'] #nbv5RoomModesModal .form-control::placeholder {
  color: rgba(17,24,39,.55) !important;
}

html[data-v5thememode='light'] #nbv5RoomModesModal .nbv5-prop-setbtn {
  background: rgba(0,0,0,.06) !important;
  border-color: rgba(0,0,0,.16) !important;
  color: rgba(0,0,0,.88) !important;
}

html[data-v5thememode='light'] #nbv5RoomModesModal .nbv5-prop-setbtn:hover,
html[data-v5thememode='light'] #nbv5RoomModesModal .nbv5-prop-setbtn:focus {
  background: rgba(0,0,0,.09) !important;
  border-color: rgba(0,0,0,.22) !important;
  color: rgba(0,0,0,.92) !important;
}

html[data-v5thememode='light'] #nbv5RoomModesModal .modal-header .btn-close {
  filter: none;
  opacity: .75;
}

html[data-v5thememode='light'] #nbv5RoomModesModal .btn-outline-secondary {
  color: rgba(0,0,0,.85) !important;
  border-color: rgba(0,0,0,.22) !important;
  background: rgba(255,255,255,.55) !important;
}

html[data-v5thememode='light'] #nbv5RoomModesModal .btn-outline-secondary:hover,
html[data-v5thememode='light'] #nbv5RoomModesModal .btn-outline-secondary:focus {
  color: rgba(0,0,0,.92) !important;
  border-color: rgba(0,0,0,.32) !important;
}


/* ===============================
   Room Access Modal
   - Must match overall theme mode (light/dark)
   - Must float as fixed overlay (must NOT push layout)
   =============================== */

#nbv5RoomAccessModal.nbv5-roomprops-modal {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none;
  z-index: 5015 !important;
}

#nbv5RoomAccessModal {
  --bs-modal-width: 1100px;
}

/* Bootstrap defaults .modal { display:none; } so force fixed overlay show/hide */
#nbv5RoomAccessModal.modal.show {
  display: block !important;
}

#nbv5RoomAccessModal.modal:not(.show) {
  display: none !important;
}

#nbv5RoomAccessModal .modal-dialog {
  pointer-events: auto;
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  width: min(1100px, calc(100vw - 20px)) !important;
  max-width: 1100px !important;
  max-height: calc(100vh - (env(safe-area-inset-top, 0px) + 24px)) !important;
}

#nbv5RoomAccessModal .nbv5-modal {
  border-radius: 16px;
  overflow: hidden;
  background: var(--v5-menu-bg, #1E4864) !important;
  color: #ffffff;
  border: 2px solid var(--v5-paneheader-bg, #285E82) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}

#nbv5RoomAccessModal .modal-header {
  background: var(--v5-paneheader-bg, #285E82) !important;
  border-bottom: 1px solid rgba(0,0,0,.12);
  padding: 8px 14px 7px;
}

#nbv5RoomAccessModal .nbv5-roomaccess-header {
  align-items: center;
}

#nbv5RoomAccessModal .modal-body,
#nbv5RoomAccessModal .modal-footer {
  background: transparent !important;
  color: inherit;
  padding: 10px 14px 12px;
}

#nbv5RoomAccessModal .modal-header .btn-close {
  filter: invert(1);
  opacity: .9;
}

#nbv5RoomAccessModal .form-control,
#nbv5RoomAccessModal .form-select {
  background: rgba(0,0,0,.15) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}

#nbv5RoomAccessModal .form-control::placeholder {
  color: rgba(255,255,255,.65) !important;
}

#nbv5RoomAccessModal .btn-outline-secondary {
  color: rgba(255,255,255,.88) !important;
  border-color: rgba(255,255,255,.22) !important;
}

#nbv5RoomAccessModal .btn-outline-secondary:hover,
#nbv5RoomAccessModal .btn-outline-secondary:focus {
  color: #ffffff !important;
  border-color: rgba(255,255,255,.32) !important;
  background: rgba(255,255,255,.08) !important;
}

#nbv5RoomAccessModal .nbv5-prop-setbtn {
  border-radius: 12px !important;
  padding: .34rem .70rem !important;
  font-weight: 800;
  letter-spacing: .2px;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.92) !important;
}

#nbv5RoomAccessModal .nbv5-prop-setbtn:hover,
#nbv5RoomAccessModal .nbv5-prop-setbtn:focus {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.30) !important;
  color: #ffffff !important;
}

#nbv5RoomAccessModal .modal-body {
  max-height: calc(100vh - 190px);
  min-height: 170px;
  overflow: auto;
}

#nbv5RoomAccessModal .nbv5-roomaccess-topbar {
  margin-bottom: 8px !important;
}

.nbv5-roomaccess-tabs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.nbv5-roomaccess-tab {
  appearance: none;
  border: 1px solid rgba(255,255,255,.20) !important;
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 999px !important;
  padding: .18rem .58rem !important;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}

.nbv5-roomaccess-tab:disabled {
  opacity: .72;
  cursor: default;
}

.nbv5-roomaccess-tab.is-active {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.34) !important;
  color: #ffffff !important;
}

#nbv5RoomAccessModal .nbv5-roomaccess-tablewrap {
  border: 1px solid var(--nbv5-pane-border) !important;
  border-radius: 10px;
  overflow: auto;
  min-height: 180px;
  max-height: 300px;
  background: var(--nbv5-pane-bg) !important;
  color: var(--nbv5-pane-text) !important;
}

#nbv5RoomAccessModal .nbv5-roomaccess-table {
  color: inherit !important;
  margin: 0;
  min-width: 760px !important;
  background: var(--nbv5-pane-bg) !important;
  align-self: stretch;
}


:root[data-chat-tone="dark"][data-chat-theme] #nbv5RoomAccessModal .nbv5-roomaccess-tablewrap {
  color: var(--nbv5-pane-text-bright, var(--nbv5-pane-text)) !important;
}

:root[data-chat-tone="dark"][data-chat-theme] #nbv5RoomAccessModal .nbv5-roomaccess-table {
  color: inherit !important;
}

#nbv5RoomAccessModal .nbv5-roomaccess-table tbody,
#nbv5RoomAccessModal .nbv5-roomaccess-table tbody tr,
#nbv5RoomAccessModal .nbv5-roomaccess-table tbody td {
  background: var(--nbv5-pane-bg) !important;
  color: inherit !important;
}

/* Prevent cramped headers/columns (allow horizontal scroll in .table-responsive) */
#nbv5RoomAccessModal .nbv5-roomaccess-table thead th:nth-child(2),
#nbv5RoomAccessModal .nbv5-roomaccess-table tbody td:nth-child(2) {
  width: 96px !important; /* Type */
  white-space: nowrap;
}

#nbv5RoomAccessModal .nbv5-roomaccess-table thead th:nth-child(4),
#nbv5RoomAccessModal .nbv5-roomaccess-table tbody td:nth-child(4) {
  width: 90px !important; /* Time */
  white-space: nowrap;
}

#nbv5RoomAccessModal .nbv5-roomaccess-table thead th:nth-child(5),
#nbv5RoomAccessModal .nbv5-roomaccess-table tbody td:nth-child(5) {
  width: 140px !important; /* Set by */
  white-space: nowrap;
}

#nbv5RoomAccessModal .nbv5-roomaccess-table thead th {
  background: color-mix(in srgb, var(--nbv5-pane-bg) 88%, var(--nbv5-pane-border)) !important;
  color: var(--nbv5-pane-text) !important;
  border-bottom-color: var(--nbv5-pane-border) !important;
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}

:root[data-chat-tone="dark"][data-chat-theme] #nbv5RoomAccessModal .nbv5-roomaccess-table thead th {
  color: var(--nbv5-pane-text-bright, var(--nbv5-pane-text)) !important;
}

#nbv5RoomAccessModal .nbv5-roomaccess-table td,
#nbv5RoomAccessModal .nbv5-roomaccess-table th {
  border-color: var(--nbv5-pane-border) !important;
  vertical-align: middle;
  padding-top: .34rem;
  padding-bottom: .34rem;
}

#nbv5RoomAccessModal .nbv5-roomaccess-clearbar .btn,
#nbv5RoomAccessModal .nbv5-roomaccess-table .btn {
  padding-top: .18rem;
  padding-bottom: .18rem;
}

#nbv5RoomAccessModal .nbv5-roomaccess-table .btn-outline-secondary {
  color: inherit !important;
  border-color: var(--nbv5-pane-border) !important;
  background: transparent !important;
}

#nbv5RoomAccessModal .nbv5-roomaccess-table .btn-outline-secondary:hover,
#nbv5RoomAccessModal .nbv5-roomaccess-table .btn-outline-secondary:focus {
  color: inherit !important;
  border-color: var(--nbv5-pane-border) !important;
  background: var(--nbv5-pane-item-hover) !important;
}

#nbv5RoomAccessModal .nbv5-roomaccess-table .btn-outline-secondary i {
  color: inherit !important;
}

#nbv5RoomAccessModal .nbv5-roomaccess-empty {
  height: 134px;
  vertical-align: middle;
  background: var(--nbv5-pane-bg) !important;
  color: var(--nbv5-pane-sep-text) !important;
}

:root[data-chat-tone="dark"][data-chat-theme] #nbv5RoomAccessModal .nbv5-roomaccess-empty {
  color: var(--nbv5-pane-sep-text-bright, var(--nbv5-pane-sep-text)) !important;
}

.nbv5-roomaccess-ico {
  opacity: .92;
}

.nbv5-roomaccess-ico.is-owner { color: #D7B700; }
.nbv5-roomaccess-ico.is-host { color: brown; }
.nbv5-roomaccess-ico.is-deny { color: red; }
.nbv5-roomaccess-ico.is-grant { color: orange; }
.nbv5-roomaccess-ico.is-voice { color: purple; }

html[data-v5thememode='light'] #nbv5RoomAccessModal .nbv5-modal {
  color: #111827;
  box-shadow: 0 18px 48px rgba(60,45,30,.22);
}

html[data-v5thememode='light'] #nbv5RoomAccessModal .form-control,
html[data-v5thememode='light'] #nbv5RoomAccessModal .form-select {
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #111827 !important;
}

html[data-v5thememode='light'] #nbv5RoomAccessModal .form-control::placeholder {
  color: rgba(17,24,39,.55) !important;
}

html[data-v5thememode='light'] #nbv5RoomAccessModal .modal-header .btn-close {
  filter: none;
  opacity: .75;
}

html[data-v5thememode='light'] #nbv5RoomAccessModal .btn-outline-secondary {
  color: rgba(0,0,0,.85) !important;
  border-color: rgba(0,0,0,.22) !important;
  background: rgba(255,255,255,.55) !important;
}

html[data-v5thememode='light'] #nbv5RoomAccessModal .btn-outline-secondary:hover,
html[data-v5thememode='light'] #nbv5RoomAccessModal .btn-outline-secondary:focus {
  color: rgba(0,0,0,.92) !important;
  border-color: rgba(0,0,0,.32) !important;
}

html[data-v5thememode='light'] .nbv5-roomaccess-tab {
  border-color: rgba(0,0,0,.18) !important;
  background: rgba(0,0,0,.05) !important;
  color: rgba(0,0,0,.88) !important;
}

html[data-v5thememode='light'] .nbv5-roomaccess-tab.is-active {
  background: rgba(0,0,0,.09) !important;
  border-color: rgba(0,0,0,.26) !important;
  color: rgba(0,0,0,.92) !important;
}

html[data-v5thememode='light'] #nbv5RoomAccessModal .nbv5-roomaccess-tablewrap {
  border-color: rgba(0,0,0,.12) !important;
}

html[data-v5thememode='light'] #nbv5RoomAccessModal .nbv5-roomaccess-table thead th {
  background: rgba(0,0,0,.06) !important;
  color: rgba(0,0,0,.88) !important;
  border-bottom-color: rgba(0,0,0,.10) !important;
}

html[data-v5thememode='light'] #nbv5RoomAccessModal .nbv5-roomaccess-table td,
html[data-v5thememode='light'] #nbv5RoomAccessModal .nbv5-roomaccess-table th {
  border-color: rgba(0,0,0,.08) !important;
}


/* ===============================
   Room Key Modal (+k)
   - Must match overall theme mode (light/dark)
   - Must float as fixed overlay (must NOT push layout)
   =============================== */

#nbv5RoomKeyModal.modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5016 !important;
  pointer-events: none; /* clicks only on the dialog */
}

#nbv5RoomKeyModal.modal.show {
  display: block !important;
}

#nbv5RoomKeyModal.modal:not(.show) {
  display: none !important;
}

#nbv5RoomKeyModal .nbv5-roomkey-dialog {
  pointer-events: auto;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: min(520px, calc(100vw - 20px)) !important;
  max-height: calc(100vh - (env(safe-area-inset-top, 0px) + 24px)) !important;
}

#nbv5RoomKeyModal .nbv5-modal {
  border-radius: 16px;
  overflow: hidden;
  background: var(--v5-menu-bg, #1E4864) !important;
  color: #ffffff;
  border: 2px solid var(--v5-paneheader-bg, #285E82) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}

#nbv5RoomKeyModal .modal-header {
  background: var(--v5-paneheader-bg, #285E82) !important;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

#nbv5RoomKeyModal .modal-body,
#nbv5RoomKeyModal .modal-footer {
  background: transparent !important;
  color: inherit;
}

#nbv5RoomKeyModal .form-control {
  background: rgba(0,0,0,.15) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}

#nbv5RoomKeyModal .form-control::placeholder {
  color: rgba(255,255,255,.65) !important;
}

#nbv5RoomKeyModal .modal-header .btn-close {
  filter: invert(1);
  opacity: .9;
}

html[data-v5thememode='light'] #nbv5RoomKeyModal .nbv5-modal {
  color: #111827;
  box-shadow: 0 18px 48px rgba(60,45,30,.22);
}

html[data-v5thememode='light'] #nbv5RoomKeyModal .form-control {
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #111827 !important;
}

html[data-v5thememode='light'] #nbv5RoomKeyModal .form-control::placeholder {
  color: rgba(17,24,39,.55) !important;
}

html[data-v5thememode='light'] #nbv5RoomKeyModal .modal-header .btn-close {
  filter: none;
  opacity: .75;
}

/* ===============================
   Away Message Modal (stored message)
   - Must match theme + pane brightness
   =============================== */

/* Force fixed overlay behavior (prevents pushing layout even if modal CSS is incomplete) */
#nbv5AwayMsgModal.modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5016 !important;
  pointer-events: none; /* clicks only on the dialog */
}

#nbv5AwayMsgModal.modal.show {
  display: block !important;
}

#nbv5AwayMsgModal.modal:not(.show) {
  display: none !important;
}

/* Ensure backdrop covers viewport */
.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
}

#nbv5AwayMsgModal .nbv5-awaymsg-dialog {
  pointer-events: auto;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: min(560px, calc(100vw - 20px)) !important;
  max-height: calc(100vh - (env(safe-area-inset-top, 0px) + 24px)) !important;
}

#nbv5AwayMsgModal .nbv5-modal {
  border-radius: 16px;
  overflow: hidden;
  background: var(--v5-menu-bg, #1E4864) !important;
  color: #ffffff;
  border: 2px solid var(--v5-paneheader-bg, #285E82) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}

#nbv5AwayMsgModal .modal-header {
  background: var(--v5-paneheader-bg, #285E82) !important;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

#nbv5AwayMsgModal .modal-body,
#nbv5AwayMsgModal .modal-footer {
  background: transparent !important;
  color: inherit;
}

#nbv5AwayMsgModal .form-control {
  background: rgba(0,0,0,.15) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}

#nbv5AwayMsgModal .form-control::placeholder {
  color: rgba(255,255,255,.65) !important;
}

#nbv5AwayMsgModal .form-text {
  color: rgba(255,255,255,.72) !important;
}

#nbv5AwayMsgModal .modal-header .btn-close {
  filter: invert(1);
  opacity: .9;
}

/* Outline buttons inside the modal need theme-aware text */
#nbv5AwayMsgModal .btn-outline-secondary {
  color: rgba(255,255,255,.88) !important;
  border-color: rgba(255,255,255,.22) !important;
}

#nbv5AwayMsgModal .btn-outline-secondary:hover,
#nbv5AwayMsgModal .btn-outline-secondary:focus {
  color: #ffffff !important;
  border-color: rgba(255,255,255,.32) !important;
  background: rgba(255,255,255,.08) !important;
}

html[data-v5thememode='light'] #nbv5AwayMsgModal .nbv5-modal {
  color: #111827;
  box-shadow: 0 18px 48px rgba(60,45,30,.22);
}

html[data-v5thememode='light'] #nbv5AwayMsgModal .form-control {
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #111827 !important;
}

html[data-v5thememode='light'] #nbv5AwayMsgModal .form-control::placeholder {
  color: rgba(17,24,39,.55) !important;
}

html[data-v5thememode='light'] #nbv5AwayMsgModal .form-text {
  color: rgba(17,24,39,.70) !important;
}

html[data-v5thememode='light'] #nbv5AwayMsgModal .modal-header .btn-close {
  filter: none;
  opacity: .75;
}

html[data-v5thememode='light'] #nbv5AwayMsgModal .btn-outline-secondary {
  color: rgba(0,0,0,.85) !important;
  border-color: rgba(0,0,0,.22) !important;
  background: rgba(255,255,255,.55) !important;
}

html[data-v5thememode='light'] #nbv5AwayMsgModal .btn-outline-secondary:hover,
html[data-v5thememode='light'] #nbv5AwayMsgModal .btn-outline-secondary:focus {
  color: rgba(0,0,0,.92) !important;
  border-color: rgba(0,0,0,.32) !important;
  background: rgba(255,255,255,.78) !important;
}

/* Toast */
.nbv5-toast {
  position: fixed;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 6000;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.95rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.nbv5-toast.is-ok {
  background: rgba(20, 140, 90, .95);
  color: #ffffff;
}

.nbv5-toast.is-error {
  background: rgba(170, 40, 40, .95);
  color: #ffffff;
}

/* Animated gradient text: slowly moves left to right and back. */
@keyframes nbv5GradMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  [style*="nbv5GradMove"] {
    animation: none !important;
    background-position: 50% 50% !important;
  }
}


/* V5 Context Menu (compact) */
.nbv5-ctx-menu{
  min-width: 150px;
  max-width: 220px;
  border-radius: 10px;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  overflow: hidden;
  background: rgba(31,35,40,.92) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.06);
  animation: nbv5CtxPop .14s ease-out;
  transition: box-shadow .14s ease, background-color .14s ease, border-color .14s ease;
}
.nbv5-ctx-item{
  width: 100%;
  text-align: left;
  padding: 7px 11px;
  background: transparent !important;
  border: 0;
  color: #e6edf3;
  font-size: 13px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: background-color .14s ease;
}
.nbv5-ctx-label{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbv5-ctx-sub{ flex: 0 0 auto; opacity: .72; font-size: 12px; white-space: nowrap; }
.nbv5-ctx-item:hover{ background: rgba(255,255,255,.05) !important; }
.nbv5-ctx-item.is-disabled{ opacity: .45; cursor: not-allowed; }
.nbv5-ctx-item:disabled{ pointer-events: none; }

/* Modern header rows */
.nbv5-ctx-item.is-title{
  font-weight: 700;
  font-size: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: rgba(255,255,255,.04) !important;
}
.nbv5-ctx-item.is-sub{
  border-bottom: 1px solid rgba(255,255,255,.08);
}
@keyframes nbv5CtxPop{ from{ transform: scale(.98); opacity:.4; } to{ transform: scale(1); opacity:1; } }
/* ==========================================================
   Pill flattening (system lines) - Feb 14, 2026
   Goal: keep the existing layout/CSS, but remove the "capsule"
   look (no rounded background bar) and instead use colored
   icon + text per event type.
   ========================================================== */

/* Base: stop looking like pills */
.nbv5-pill {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Some lines may contain only the pill; keep it aligned */
.nbv5-pill-ico {
  opacity: 1 !important;
}

/* Remove the subtle tint hooks (we'll color text instead) */
.nbv5-pill-connected,
.nbv5-pill-join,
.nbv5-pill-part,
.nbv5-pill-quit,
.nbv5-pill-nick,
.nbv5-pill-mode,
.nbv5-pill-topic,
.nbv5-pill-kick,
.nbv5-pill-notice,
.nbv5-pill-onjoin,
.nbv5-pill-info,
.nbv5-pill-nickinuse,
.nbv5-pill-action {
  border-color: transparent !important;
  background: transparent !important;
}

/* Colored text (fixed, consistent in light/dark) */
.nbv5-pill-connected,
.nbv5-pill-join { color: #2F855A !important; }     /* muted green */
.nbv5-pill-part,
.nbv5-pill-quit { color: #6B7280 !important; }     /* gray */
.nbv5-pill-nick { color: #2C6AA3 !important; }     /* muted blue */
.nbv5-pill-mode { color: #7C5AC9 !important; }     /* muted purple */
.nbv5-pill-topic { color: #2B8C85 !important; }    /* muted teal */
.nbv5-pill-kick { color: #C44545 !important; }     /* muted red */
.nbv5-pill-notice,
.nbv5-pill-onjoin { color: #B7791F !important; }   /* muted amber */
.nbv5-pill-info { color: #4C78A8 !important; }     /* muted blue */
.nbv5-pill-nickinuse { color: #C44545 !important; font-weight: 400 !important; } /* warning */
.nbv5-pill-action { color: #8A6A3F !important; }   /* muted brown */

/* Optional: keep system lines from stretching weirdly */
.nbv5-pill-text {
  display: inline !important;
}


/* ===============================
   Control Panel (Phase 1: 2026 cards + toggles)
   UI-only: scoped to .nbv5-control to avoid layout regressions elsewhere.
   =============================== */

/* Pane-aware Control Panel theming
   - Keeps CP readable when "Dark Pane" is enabled
   - Scoped to .nbv5-control so the rest of Bootstrap stays untouched */
.nbv5-control{
  --nbv5-cp-card-bg: #ffffff;
  --nbv5-cp-card-border: #d8dde3;
  --nbv5-cp-card-shadow: 0 1px 0 rgba(16, 24, 40, .04);

  --nbv5-cp-ico-bg: #f1f5f9;
  --nbv5-cp-ico-fg: #0f172a;

  --nbv5-cp-title: #0f172a;
  --nbv5-cp-sub: #475569;

  --nbv5-cp-label: #0f172a;
  --nbv5-cp-help: #64748b;
  --nbv5-cp-intro: #475569;

  --nbv5-cp-tile-bg: #f8fafc;
  --nbv5-cp-tile-border: #e5e7eb;

  --nbv5-cp-soft-bg: rgba(0,0,0,0.02);
  --nbv5-cp-soft-bg-2: rgba(0,0,0,0.03);

  --nbv5-cp-btn-bg: #f3f4f6;
  --nbv5-cp-btn-border: #9aa0a6;
  --nbv5-cp-btn-fg: #111827;
  --nbv5-cp-btn-hover-bg: #e5e7eb;
  --nbv5-cp-btn-hover-border: #6b7280;
  --nbv5-cp-btn-active-bg: #111827;
  --nbv5-cp-btn-active-border: #111827;
  --nbv5-cp-btn-active-fg: #ffffff;

  --nbv5-cp-fontpicker-bg: #f8fafc;
  --nbv5-cp-fontpicker-border: #cbd5e1;
  --nbv5-cp-fontpicker-fg: #0f172a;
  --nbv5-cp-fontpicker-hover-bg: #e2e8f0;
  --nbv5-cp-fontpicker-active-bg: #dbeafe;
  --nbv5-cp-fontpicker-shadow: 0 18px 34px rgba(15, 23, 42, .16);

  --nbv5-cp-focus: #2563eb;
}

[data-chat-tone="dark"] .nbv5-control{
  --nbv5-cp-card-bg: rgba(255,255,255,0.04);
  --nbv5-cp-card-border: rgba(255,255,255,0.10);
  --nbv5-cp-card-shadow: 0 1px 0 rgba(0,0,0,.25);

  --nbv5-cp-ico-bg: rgba(255,255,255,0.07);
  --nbv5-cp-ico-fg: var(--nbv5-pane-text);

  --nbv5-cp-title: var(--nbv5-pane-text);
  --nbv5-cp-sub: var(--nbv5-muted);

  --nbv5-cp-label: var(--nbv5-pane-text);
  --nbv5-cp-help: var(--nbv5-muted);
  --nbv5-cp-intro: var(--nbv5-muted);

  --nbv5-cp-tile-bg: rgba(255,255,255,0.03);
  --nbv5-cp-tile-border: rgba(255,255,255,0.09);

  --nbv5-cp-soft-bg: rgba(255,255,255,0.04);
  --nbv5-cp-soft-bg-2: rgba(255,255,255,0.06);

  --nbv5-cp-btn-bg: rgba(255,255,255,0.06);
  --nbv5-cp-btn-border: rgba(255,255,255,0.18);
  --nbv5-cp-btn-fg: var(--nbv5-pane-text);
  --nbv5-cp-btn-hover-bg: rgba(255,255,255,0.10);
  --nbv5-cp-btn-hover-border: rgba(255,255,255,0.26);
  --nbv5-cp-btn-active-bg: rgba(255,255,255,0.14);
  --nbv5-cp-btn-active-border: rgba(255,255,255,0.30);
  --nbv5-cp-btn-active-fg: var(--nbv5-pane-text);

  --nbv5-cp-fontpicker-bg: rgba(20,20,24,.98);
  --nbv5-cp-fontpicker-border: rgba(255,255,255,.14);
  --nbv5-cp-fontpicker-fg: var(--nbv5-pane-text);
  --nbv5-cp-fontpicker-hover-bg: rgba(255,255,255,.08);
  --nbv5-cp-fontpicker-active-bg: rgba(255,255,255,.14);
  --nbv5-cp-fontpicker-shadow: 0 18px 34px rgba(0,0,0,.34);

  --nbv5-cp-focus: #60a5fa;

  /* Bootstrap variable overrides (scoped to Control Panel only) */
  --bs-body-bg: transparent;
  --bs-body-color: var(--nbv5-pane-text);
  --bs-emphasis-color: var(--nbv5-pane-text);
  --bs-secondary-color: var(--nbv5-muted);
  --bs-tertiary-color: var(--nbv5-muted);
  --bs-border-color: rgba(255,255,255,0.16);
  --bs-secondary-bg: rgba(255,255,255,0.06);
  --bs-tertiary-bg: rgba(255,255,255,0.04);
  --bs-link-color: var(--nbv5-link);
  --bs-link-hover-color: var(--nbv5-link-hover);
}


.nbv5-control .nbv5-cp-card{
  background: var(--nbv5-cp-card-bg);
  border: 1px solid var(--nbv5-cp-card-border);
  border-radius: 14px;
  padding: 8px;
  margin-bottom: 6px;
  box-shadow: var(--nbv5-cp-card-shadow);
}

.nbv5-control .nbv5-cp-cardhead{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.nbv5-control .nbv5-cp-headleft{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.nbv5-control .nbv5-cp-ico{
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nbv5-cp-ico-bg);
  color: var(--nbv5-cp-ico-fg);
  flex: 0 0 auto;
}

.nbv5-control .nbv5-cp-title{
  font-weight: 800;
  font-size: 14px;
  color: var(--nbv5-cp-title);
  line-height: 1.2;
}

.nbv5-control .nbv5-cp-sub{
  font-size: 12px;
  color: var(--nbv5-cp-sub);
  margin-top: 2px;
}

.nbv5-control .nbv5-cp-cardbody{
  padding-top: 0;
}

/* Make toggle switches feel more app-like (Bootstrap switch, styled) */
.nbv5-control .nbv5-switch.form-check{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.nbv5-control .nbv5-switch .form-check-input{
  width: 44px;
  height: 22px;
  margin-top: 0;
  cursor: pointer;
}

.nbv5-control .nbv5-switch .form-check-label{
  font-size: 12px;
  color: var(--nbv5-cp-sub);
  user-select: none;
}

/* Control rows as “tiles” for scanability (compact + layout-safe) */
.nbv5-control .nbv5-control-row{
  border: 1px solid var(--nbv5-cp-tile-border);
  border-radius: 10px;
  padding: 7px 9px;
  background: var(--nbv5-cp-tile-bg);
  margin-bottom: 6px;
}

/* Bootstrap form-switch uses negative left margin for the input; cancel it in our tiles */
.nbv5-control .nbv5-control-row.form-switch{
  padding-left: 10px !important;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label switch"
    "help  switch";
  column-gap: 12px;
  align-items: center;
}

.nbv5-control .nbv5-control-row.form-switch .form-check-input{
  margin-left: 0 !important;
  margin-top: 0 !important;
  grid-area: switch;
  justify-self: end;
}

.nbv5-control .nbv5-control-row.form-switch .form-check-label{
  grid-area: label;
  font-weight: 800;
  color: var(--nbv5-cp-label);
  margin: 0;
}

.nbv5-control .nbv5-control-row.form-switch .nbv5-control-help{
  grid-area: help;
  margin-top: 2px;
  color: var(--nbv5-cp-help);
}

.nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row{
  grid-template-areas:
    "label switch"
    "help help"
    "status status"
    "actions actions";
  align-items: start;
}

.nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .form-check-input{
  align-self: center;
}

.nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-control-help{
  max-width: none;
}

.nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-roomlog-status{
  grid-area: status;
  margin-top: 6px;
}

.nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-roomlog-actions{
  grid-area: actions;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

.nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-roomlog-actions .nbv5-roomlog-btn,
.nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-roomlog-actions .nbv5-roomlog-btn-danger{
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  font-weight: 600;
  padding: .375rem .45rem;
  font-size: .8125rem;
  line-height: 1.2;
}

.nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-roomlog-actions .nbv5-roomlog-btn{
  --bs-btn-color: #495057;
  --bs-btn-border-color: rgba(73,80,87,.35);
  --bs-btn-bg: rgba(255,255,255,.96);
  --bs-btn-hover-color: #212529;
  --bs-btn-hover-bg: rgba(73,80,87,.08);
  --bs-btn-hover-border-color: rgba(73,80,87,.55);
  --bs-btn-active-color: #212529;
  --bs-btn-active-bg: rgba(73,80,87,.12);
  --bs-btn-active-border-color: rgba(73,80,87,.55);
  --bs-btn-disabled-color: #495057;
  --bs-btn-disabled-border-color: rgba(108,117,125,.32);
  --bs-btn-disabled-bg: rgba(255,255,255,.92);
  color: #495057 !important;
  -webkit-text-fill-color: #495057 !important;
  border-color: rgba(73,80,87,.35) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

.nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-roomlog-actions .nbv5-roomlog-btn:hover,
.nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-roomlog-actions .nbv5-roomlog-btn:focus{
  color: #212529 !important;
  -webkit-text-fill-color: #212529 !important;
  border-color: rgba(73,80,87,.55) !important;
  background: rgba(73,80,87,.08) !important;
}

.nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-roomlog-actions .nbv5-roomlog-btn:disabled,
.nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-roomlog-actions .nbv5-roomlog-btn.disabled{
  color: #495057 !important;
  -webkit-text-fill-color: #495057 !important;
  border-color: rgba(108,117,125,.32) !important;
  background: rgba(255,255,255,.92) !important;
  opacity: .8 !important;
}

html[data-v5thememode='dark'] .nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-roomlog-actions .nbv5-roomlog-btn{
  --bs-btn-color: rgba(255,255,255,.92);
  --bs-btn-border-color: rgba(127,127,127,.55);
  --bs-btn-bg: rgba(255,255,255,.06);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(0,0,0,.16);
  --bs-btn-hover-border-color: rgba(255,255,255,.55);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(0,0,0,.2);
  --bs-btn-active-border-color: rgba(255,255,255,.55);
  --bs-btn-disabled-color: rgba(255,255,255,.72);
  --bs-btn-disabled-border-color: rgba(255,255,255,.16);
  --bs-btn-disabled-bg: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92) !important;
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  border-color: rgba(127,127,127,.55) !important;
  background: rgba(255,255,255,.06) !important;
}

html[data-v5thememode='dark'] .nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-roomlog-actions .nbv5-roomlog-btn:hover,
html[data-v5thememode='dark'] .nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-roomlog-actions .nbv5-roomlog-btn:focus{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: rgba(255,255,255,.55) !important;
  background: rgba(0,0,0,.16) !important;
}

html[data-v5thememode='dark'] .nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-roomlog-actions .nbv5-roomlog-btn:disabled,
html[data-v5thememode='dark'] .nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-roomlog-actions .nbv5-roomlog-btn.disabled{
  color: rgba(255,255,255,.72) !important;
  -webkit-text-fill-color: rgba(255,255,255,.72) !important;
  border-color: rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.06) !important;
  opacity: .8 !important;
}

:root[data-chat-tone='light'] .nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-roomlog-actions .nbv5-roomlog-btn{
  --bs-btn-color: #212529;
  --bs-btn-border-color: rgba(73,80,87,.38);
  --bs-btn-bg: rgba(255,255,255,.98);
  --bs-btn-hover-color: #111827;
  --bs-btn-hover-bg: rgba(73,80,87,.10);
  --bs-btn-hover-border-color: rgba(73,80,87,.58);
  --bs-btn-active-color: #111827;
  --bs-btn-active-bg: rgba(73,80,87,.14);
  --bs-btn-active-border-color: rgba(73,80,87,.58);
  --bs-btn-disabled-color: #4b5563;
  --bs-btn-disabled-border-color: rgba(107,114,128,.34);
  --bs-btn-disabled-bg: rgba(255,255,255,.94);
  color: #212529 !important;
  -webkit-text-fill-color: #212529 !important;
  border-color: rgba(73,80,87,.38) !important;
  background: rgba(255,255,255,.98) !important;
  opacity: 1 !important;
}

:root[data-chat-tone='light'] .nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-roomlog-actions .nbv5-roomlog-btn:hover,
:root[data-chat-tone='light'] .nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-roomlog-actions .nbv5-roomlog-btn:focus{
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border-color: rgba(73,80,87,.58) !important;
  background: rgba(73,80,87,.10) !important;
}

:root[data-chat-tone='light'] .nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-roomlog-actions .nbv5-roomlog-btn:disabled,
:root[data-chat-tone='light'] .nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-roomlog-actions .nbv5-roomlog-btn.disabled{
  color: #4b5563 !important;
  -webkit-text-fill-color: #4b5563 !important;
  border-color: rgba(107,114,128,.34) !important;
  background: rgba(255,255,255,.94) !important;
  opacity: 1 !important;
}

@media (max-width: 575.98px){
  .nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-roomlog-actions{
    gap: 5px;
  }

  .nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-roomlog-actions .nbv5-roomlog-btn,
  .nbv5-control .nbv5-control-row.form-switch.nbv5-roomlog-row .nbv5-roomlog-actions .nbv5-roomlog-btn-danger{
    padding: .3rem .3rem;
    font-size: .75rem;
    line-height: 1.15;
  }
}

.nbv5-control .nbv5-control-row .form-check-label{
  font-weight: 800;
  color: var(--nbv5-cp-label);
}

.nbv5-control .nbv5-control-row .nbv5-control-help{
  margin-top: 2px;
  color: var(--nbv5-cp-help);
}

/* Keep the intro readable */

.nbv5-control .nbv5-control-intro{
  color: var(--nbv5-cp-intro);
}


/* Pane-aware overrides for Control Panel widgets that previously assumed light surfaces */
.nbv5-control .nbv5-mylook-row{
  background: var(--nbv5-cp-soft-bg);
}

.nbv5-control .nbv5-mylook-row-actions{
  margin-top: 8px;
}

.nbv5-control .nbv5-mylook-preview{
  background: var(--nbv5-cp-soft-bg);
}

.nbv5-control .nbv5-mylook-preview-box{
  background-color: var(--nbv5-cp-soft-bg-2);
}

.nbv5-control .nbv5-mylook-btn,
.nbv5-control .nbv5-cp-btn{
  border-color: var(--nbv5-cp-btn-border) !important;
  color: var(--nbv5-cp-btn-fg) !important;
  background: var(--nbv5-cp-btn-bg) !important;
}

.nbv5-control .nbv5-mylook-btn:hover,
.nbv5-control .nbv5-cp-btn:hover{
  background: var(--nbv5-cp-btn-hover-bg) !important;
  border-color: var(--nbv5-cp-btn-hover-border) !important;
}

.nbv5-control .nbv5-mylook-btn:focus,
.nbv5-control .nbv5-mylook-btn:focus-visible,
.nbv5-control .nbv5-cp-btn:focus,
.nbv5-control .nbv5-cp-btn:focus-visible{
  outline-color: var(--nbv5-cp-focus) !important;
}

.nbv5-control .nbv5-mylook-btn.active,
.nbv5-control .nbv5-cp-btn.active{
  background: var(--nbv5-cp-btn-active-bg) !important;
  border-color: var(--nbv5-cp-btn-active-border) !important;
  color: var(--nbv5-cp-btn-active-fg) !important;
}

.nbv5-control .nbv5-mylook-fonttrigger{
  border-color: var(--nbv5-cp-fontpicker-border);
  background: var(--nbv5-cp-fontpicker-bg);
  color: var(--nbv5-cp-fontpicker-fg);
}

.nbv5-control .nbv5-mylook-fonttrigger:hover{
  background: var(--nbv5-cp-fontpicker-hover-bg);
}

.nbv5-control .nbv5-mylook-fonttrigger:focus,
.nbv5-control .nbv5-mylook-fonttrigger:focus-visible{
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--nbv5-cp-focus) 26%, transparent);
}

.nbv5-control .nbv5-mylook-fontmenu{
  border-color: var(--nbv5-cp-fontpicker-border);
  background: var(--nbv5-cp-fontpicker-bg);
  color: var(--nbv5-cp-fontpicker-fg);
  box-shadow: var(--nbv5-cp-fontpicker-shadow);
}

.nbv5-control .nbv5-mylook-fontitem{
  color: var(--nbv5-cp-fontpicker-fg);
}

.nbv5-control .nbv5-mylook-fontitem:hover,
.nbv5-control .nbv5-mylook-fontitem:focus,
.nbv5-control .nbv5-mylook-fontitem:focus-visible{
  background: var(--nbv5-cp-fontpicker-hover-bg);
}

.nbv5-control .nbv5-mylook-fontitem.is-active{
  background: var(--nbv5-cp-fontpicker-active-bg);
}

/* V5: Whispers list (left pane) and center whisper view (scaffold, non-nested) */
.nbv5-whlist{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:8px;
}
.nbv5-whlist-item{
  width:100%;
  text-align:left;
  /* Match the Room button (left panel) border weight/feel */
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius:6px;
  padding:6px 8px;
  color:#fff;
}
.nbv5-whlist-item.is-active{
  outline:2px solid rgba(255,255,255,.35);
}
.nbv5-whlist-top{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
}
.nbv5-whlist-actions{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.nbv5-whlist-peer{
  font-weight:700;
  font-size:12.5px;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nbv5-whlist-state{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.18);
  text-transform:lowercase;
}
.nbv5-whlist-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.22);
  color:#fff;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  user-select:none;
}
.nbv5-whlist-close:hover{
  background: rgba(0,0,0,.34);
  border-color: rgba(255,255,255,.30);
}
.nbv5-whlist-sub{
  margin-top:4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  opacity:.95;
}
.nbv5-whlist-chan{
  opacity:.95;
}
.nbv5-whlist-meta{
  opacity:.85;
}
/* Whisper tabs (left pane) - streamlined row + external close */
.nbv5-whrow{
  display:flex;
  align-items:stretch;
  gap:6px;
}
.nbv5-whrow.is-active .nbv5-whlist-item{
  outline:2px solid rgba(255,255,255,.35);
}
.nbv5-whrow .nbv5-whlist-item{
  flex:1 1 auto;
}
.nbv5-whlist-item:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.12);
}
.nbv5-whlist-x{
  width:28px;
  min-width:28px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06) !important;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  user-select:none;
}
.nbv5-whlist-x:hover{
  background: rgba(255,255,255,.10) !important;
}

.nbv5-whlist-x:focus-visible,
.nbv5-whlist-item:focus-visible{
  outline:2px solid rgba(255,255,255,.35);
  outline-offset:2px;
}

/* Whisper tab flash (every inbound whisper until viewed/typed) */
@keyframes nbv5WhisperTabFlash{
  0%, 100%{
	border-color: rgba(255,255,255,.12);
	box-shadow: none;
	background: rgba(255,255,255,.06);
  }
  50%{
	border-color: #ff8a00;
	box-shadow: 0 0 0 2px rgba(255,138,0,.25);
	background: rgba(255,138,0,.18);
  }
}

.nbv5-whrow.is-flash .nbv5-whlist-item,
.nbv5-whlist-item.is-flash{
  animation: nbv5WhisperTabFlash 780ms ease-in-out infinite !important;
}

.nbv5-whrow.is-flash .nbv5-whlist-x,
.nbv5-whlist-x.is-flash{
  animation: nbv5WhisperTabFlash 780ms ease-in-out infinite !important;
}
/* Center whisper pane (uses the main center area, no nested pane) */
.nbv5-whpane{
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Pane Theme aware (Control Panel: Pane Theme) */
  /* No outer border (only keep the separator under the header) */
  border:0;
  border-radius:12px;
  overflow:hidden;
  background: var(--nbv5-pane-bg);
  color: var(--nbv5-pane-text);
}
.nbv5-whpane-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--nbv5-pane-border);
  background: var(--nbv5-pane-bg);
}
.nbv5-whpane-title{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.nbv5-whpane-peer{
  font-weight:800;
  font-size:14px;
}
.nbv5-whpane-room{
  font-size:12px;
  opacity:.7;
}
.nbv5-whpane-state{
  font-size:12px;
  opacity:.75;
  text-transform:lowercase;
}
.nbv5-whpane-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.nbv5-whpane-close{
  padding:2px 10px;
  border-radius:999px;
  font-weight:700;
  background:#dc3545 !important;
  border:1px solid #dc3545 !important;
  color:#fff !important;
}
.nbv5-whpane-close:hover{
  background:#bb2d3b !important;
  border-color:#bb2d3b !important;
}
.nbv5-whpane-popout{
  padding:2px 10px;
  border-radius:999px;
  font-weight:700;
  border:1px solid var(--nbv5-pane-border) !important;
  background:rgba(108,117,125,.14) !important;
  color:var(--nbv5-pane-text) !important;
}
.nbv5-whpane-popout:hover{
  background:rgba(108,117,125,.24) !important;
  color:var(--nbv5-pane-text) !important;
}
.nbv5-whpane-log{
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding:10px 12px;
  font-size: var(--nbv5-pane-font-size);
  line-height: 1.35;
  background: var(--nbv5-pane-bg);
}
.nbv5-whmsg{
  display:flex;
  gap:8px;
  align-items:flex-start;
  padding:2px 0;
}
.nbv5-whmsg-nick{
  font-weight:700;
  white-space:nowrap;
}
.nbv5-whmsg-text{
  flex:1;
  white-space:pre-wrap;
  word-break:break-word;
}

/* Incoming whisper request line (Accept/Decline shown in room pane) */
.nbv5-whreq{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  background: #2d6a89 !important;
  color:#ffffff;
}
.nbv5-whreq-ico{ opacity:.95; }
.nbv5-whreq-text{ flex:1; font-size:13px; }
.nbv5-whreq-room{ margin-left:6px; opacity:.9; }
.nbv5-whreq-msg{ margin-left:6px; opacity:.9; }
.nbv5-whreq-actions{ display:flex; gap:8px; }
.nbv5-whreq-btn{ padding:3px 10px; border-radius:8px; }


/* Control Panel: small field grid */
.nbv5-control-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
  margin-left: 44px; /* aligns under switch label */
}
@media (max-width: 900px){
  .nbv5-control-grid{ grid-template-columns: 1fr; margin-left: 0; }
}
.nbv5-control-field .nbv5-control-label{
  display:block;
  font-size: 12px;
  opacity: .9;
  margin-bottom: 4px;
}
.nbv5-cp-divider{
  border: 0;
  border-top: 1px solid rgba(127,127,127,.28);
  margin: 14px 0;
}

/* Flood collapsed group line */
.nbv5-floodgrp{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}
.nbv5-floodgrp-text{
  opacity: .85;
  font-size: 0.93em;
}
.nbv5-floodgrp-btn{
  border: 1px solid rgba(127,127,127,.35);
  background: transparent;
  color: inherit;
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 0.86em;
  line-height: 1.2;
}
.nbv5-floodgrp-btn:hover{
  border-color: rgba(127,127,127,.55);
}


/* Activity pane: traffic/perf indicator */
.nbv5-activity-perfbar{
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 6px 10px;
  background: var(--nbv5-pane-bg);
  border-bottom: 1px solid var(--nbv5-pane-border);
}

.nbv5-activity-perfbtn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--nbv5-pane-border);
  background: transparent;
  color: var(--nbv5-pane-text);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.86em;
  line-height: 1;
}

.nbv5-activity-perfbtn:hover{
  background: var(--nbv5-pane-item-hover);
}

.nbv5-perf-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  background: #7a7a7a;
}

.nbv5-perf-dot.is-warn{ background: #d9a441; }
.nbv5-perf-dot.is-hot{ background: #ff4d4d; }
.nbv5-perf-dot.is-ok{ background: #7a7a7a; }

.nbv5-perf-mini{
  opacity: .75;
  font-size: 0.79em;
}

.nbv5-activity-perfpop{
  margin-top: 6px;
  max-width: 260px;
  border: 1px solid var(--nbv5-pane-border);
  background: var(--nbv5-pane-bg);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

.nbv5-activity-perfrow{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-size: 0.86em;
}
.nbv5-activity-perfrow .k{ opacity:.8; }
.nbv5-activity-perfrow .v{ font-variant-numeric: tabular-nums; }


/* ===============================
   Control Panel: Font size card
   =============================== */

.nbv5-control .nbv5-cp-card-font .nbv5-cp-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:6px;
}

.nbv5-control .nbv5-cp-range{
  background: var(--nbv5-cp-soft-bg);
  border: 1px solid var(--nbv5-cp-tile-border);
  border-radius: 12px;
  padding: 10px 12px;
}

.nbv5-control .nbv5-cp-rangehead{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.nbv5-control .nbv5-cp-rangelabel{
  font-weight: 700;
  color: var(--nbv5-cp-label);
  min-width: 0;
}

.nbv5-control .nbv5-cp-rangeval{
  font-weight: 800;
  color: var(--nbv5-cp-title);
  background: var(--nbv5-cp-soft-bg-2);
  border: 1px solid var(--nbv5-cp-tile-border);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

/* ===============================
   Sticky Broadcasts (V5)
   - Server + Room broadcasts appear above the scroll log until dismissed.
   - Uses fixed colors (not theme-dependent).
   =============================== */

.nbv5-broadcast-stack{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin: 8px 8px 6px;
}

.nbv5-broadcast{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:10px;
  border-radius:16px;
  padding:10px 10px 10px 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.12);
}

.nbv5-broadcast-main{
  display:flex;
  gap:10px;
  align-items:flex-start;
  min-width:0;
}

.nbv5-broadcast-ico{
  margin-top:2px;
  font-size: 16px;
  opacity: .95;
}

.nbv5-broadcast-text{
  min-width:0;
}

.nbv5-broadcast-title{
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.15;
}

.nbv5-broadcast-msg{
  margin-top:2px;
  line-height: 1.25;
  word-break: break-word;
}

/* Broadcast content supports the same formatter pipeline (emots + links + [style]). */
.nbv5-broadcast-msg .nbv5-link{
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nbv5-broadcast-msg img{
  max-height: 22px;
  vertical-align: text-bottom;
}

.nbv5-broadcast-from{
  font-weight: 800;
}

.nbv5-broadcast-close{
  flex: 0 0 auto;
  background: rgba(255,255,255,.16) !important;
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 6px 10px;
  line-height: 1;
}

.nbv5-broadcast-close:hover{
  background: rgba(255,255,255,.22) !important;
}

.nbv5-broadcast-server{
  background: #1e3a8a !important;
  color:#fff;
}

.nbv5-broadcast-room{
  background: #065f46 !important;
  color:#fff;
}



.nbv5-bcline{
  display:inline-flex;
  align-items:flex-start;
  gap:10px;
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
}

.nbv5-bcline-ico{
  flex:0 0 auto;
  margin-top:2px;
  opacity:.95;
}

.nbv5-bcline-body{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.nbv5-bcline-title{
  font-weight:800;
}

.nbv5-bcline-msg{
  line-height:1.45;
  word-break:break-word;
}

.nbv5-bcline-msg img{
  max-height:22px;
  vertical-align:text-bottom;
}

.nbv5-bcline-from{
  font-weight:800;
}

.nbv5-bcline-server{
  background: rgba(30,58,138,.14) !important;
  border-color: rgba(30,58,138,.28);
}

.nbv5-bcline-room{
  background: rgba(6,95,70,.14) !important;
  border-color: rgba(6,95,70,.28);
}

/* Log-line style for broadcast entries (still appear in history) */
.nbv5-sysline-broadcast{
  background: rgba(30,58,138,.12) !important;
  border: 1px solid rgba(30,58,138,.25);
}

.nbv5-line-broadcast .nbv5-sysline-ico{
  opacity: .95;
}


/* V5 Fix: Ensure link colors are not overridden by style color spans */
.nbv5-room-pane a,
.nbv5-whisper-pane a,
.nbv5-activity-pane a {
  color: var(--nbv5-link-color) !important;
  text-decoration: underline;
}


/* V5 Fix: Prevent gradient text from coloring links */
.nbv5-link,
.nbv5-link span {
  color: var(--nbv5-link-color) !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: var(--nbv5-link-color) !important;
  text-decoration: underline !important;
}


/* V5 Fix v3: Absolute override against gradient text inheritance */
.nbv5-room-pane a.nbv5-link,
.nbv5-room-pane .nbv5-gradient-text a.nbv5-link,
.nbv5-room-pane span a.nbv5-link {
  color: var(--nbv5-link-color) !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: var(--nbv5-link-color) !important;
  text-decoration: underline !important;
}

/* V5: inline media play control (YouTube/Giphy click-to-load) */
.nbv5-media-play{
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 12px;
  line-height: 1.2;
  vertical-align: middle;
}

/* V5: compact, theme-aware media attachments (YouTube + Vocaroo) */
.nbv5-yt-preview,
.nbv5-vocaroo-card{
  --nbv5-media-accent: var(--nbv5-link-color, var(--nbv5-link, #2b8bd1));
  --nbv5-media-surface: color-mix(in srgb, var(--nbv5-pane-bg) 94%, var(--nbv5-media-accent) 6%);
  --nbv5-media-surface-hover: color-mix(in srgb, var(--nbv5-pane-bg) 90%, var(--nbv5-media-accent) 10%);
  --nbv5-media-border: color-mix(in srgb, var(--nbv5-pane-border) 74%, var(--nbv5-media-accent) 26%);
  --nbv5-media-muted: color-mix(in srgb, var(--nbv5-pane-text) 66%, transparent);
  --nbv5-media-soft: color-mix(in srgb, var(--nbv5-media-accent) 13%, transparent);
  color: var(--nbv5-pane-text) !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
  font-style: normal !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
  box-sizing: border-box;
}

.nbv5-yt-preview *,
.nbv5-vocaroo-card *{
  box-sizing: border-box;
  font-style: normal !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

/* YouTube stays visually useful, but no longer dominates the transcript. */
.nbv5-yt-preview{
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  width: min(100%, 410px);
  min-height: 72px;
  margin-top: 5px;
  overflow: hidden;
  border: 1px solid var(--nbv5-media-border);
  border-radius: 11px;
  background: var(--nbv5-media-surface);
  box-shadow: 0 3px 11px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.10);
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.nbv5-yt-preview::after{
  content: '';
  position: absolute;
  left: 112px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--nbv5-media-accent) 88%, #ffffff 12%),
    color-mix(in srgb, var(--nbv5-media-accent) 72%, #000000 28%));
  opacity: .9;
  pointer-events: none;
}

.nbv5-yt-preview:hover,
.nbv5-yt-preview:focus-visible{
  background: var(--nbv5-media-surface-hover);
  border-color: color-mix(in srgb, var(--nbv5-media-accent) 56%, var(--nbv5-pane-border));
  box-shadow: 0 5px 15px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.12);
}

.nbv5-yt-preview:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--nbv5-media-accent) 74%, transparent);
  outline-offset: 2px;
}

.nbv5-yt-thumbwrap{
  position: relative;
  width: 112px;
  min-width: 112px;
  height: 70px;
  overflow: hidden;
  background: color-mix(in srgb, var(--nbv5-pane-bg) 72%, #000000 28%);
}

.nbv5-yt-thumbwrap::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.25));
  pointer-events: none;
}

.nbv5-yt-thumb{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1);
  transition: transform .18s ease, filter .18s ease;
}

.nbv5-yt-preview:hover .nbv5-yt-thumb,
.nbv5-yt-preview:focus-visible .nbv5-yt-thumb{
  transform: scale(1.025);
  filter: saturate(1.04);
}

.nbv5-yt-playoverlay{
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
  background: color-mix(in srgb, var(--nbv5-media-accent) 76%, rgba(0,0,0,.72) 24%);
  box-shadow: 0 3px 10px rgba(0,0,0,.28);
  transition: transform .15s ease, filter .15s ease;
}

.nbv5-yt-preview:hover .nbv5-yt-playoverlay,
.nbv5-yt-preview:focus-visible .nbv5-yt-playoverlay{
  transform: translate(-50%, -50%) scale(1.06);
  filter: brightness(1.06);
}

.nbv5-yt-playoverlay::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-35%, -50%);
  width: 0;
  height: 0;
  border-left: 9px solid #ffffff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.nbv5-yt-duration{
  position: absolute;
  z-index: 3;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(0,0,0,.78);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 9px;
  line-height: 1.05;
  font-weight: 750;
  letter-spacing: .15px;
  pointer-events: none;
}

.nbv5-yt-duration:empty{ display: none; }

.nbv5-yt-meta{
  min-width: 0;
  display: flex;
  align-items: stretch;
  padding: 7px 38px 7px 12px;
}

.nbv5-yt-text{
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
}

.nbv5-yt-title,
.nbv5-yt-preview .nbv5-yt-title{
  color: var(--nbv5-pane-text) !important;
  -webkit-text-fill-color: var(--nbv5-pane-text) !important;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 750 !important;
  text-decoration: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nbv5-yt-channel{
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--nbv5-media-muted) !important;
  -webkit-text-fill-color: var(--nbv5-media-muted) !important;
  font-size: 10px;
  line-height: 1.1;
}

.nbv5-yt-channelname{
  min-width: 0;
  flex: 1 1 auto;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nbv5-yt-brand{
  position: relative;
  flex: 0 0 auto;
  padding-left: 9px;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15px;
}

.nbv5-yt-brand::before{
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: #ff3b30;
  box-shadow: 0 0 0 2px rgba(255,59,48,.12);
}

.nbv5-yt-open,
.nbv5-yt-preview a.nbv5-yt-open{
  position: absolute;
  z-index: 4;
  right: 7px;
  top: 50%;
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 1px solid color-mix(in srgb, var(--nbv5-media-border) 84%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--nbv5-pane-bg) 82%, transparent);
  color: var(--nbv5-media-accent) !important;
  -webkit-text-fill-color: var(--nbv5-media-accent) !important;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none !important;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}

.nbv5-yt-open:hover,
.nbv5-yt-open:focus-visible{
  transform: translateY(-50%) scale(1.05);
  border-color: color-mix(in srgb, var(--nbv5-media-accent) 54%, var(--nbv5-pane-border));
  background: var(--nbv5-media-soft);
  text-decoration: none !important;
}

.nbv5-yt-open:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--nbv5-media-accent) 60%, transparent);
  outline-offset: 1px;
}

/* Vocaroo is a small native attachment row; the third-party player opens in the floating audio viewer. */
.nbv5-vocaroo-card{
  position: relative;
  display: flex;
  align-items: stretch;
  width: min(100%, 300px);
  min-height: 48px;
  margin-top: 5px;
  overflow: hidden;
  border: 1px solid var(--nbv5-media-border);
  border-radius: 11px;
  background: var(--nbv5-media-surface);
  box-shadow: 0 3px 10px rgba(0,0,0,.09), inset 0 1px 0 rgba(255,255,255,.09);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.nbv5-vocaroo-card::before{
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--nbv5-media-accent) 90%, #ffffff 10%),
    color-mix(in srgb, var(--nbv5-media-accent) 72%, #000000 28%));
}

.nbv5-vocaroo-card:hover,
.nbv5-vocaroo-card:focus-within{
  background: var(--nbv5-media-surface-hover);
  border-color: color-mix(in srgb, var(--nbv5-media-accent) 56%, var(--nbv5-pane-border));
  box-shadow: 0 5px 14px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.11);
}

.nbv5-vocaroo-load{
  min-width: 0;
  flex: 1 1 auto;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px 5px 10px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.nbv5-vocaroo-load:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--nbv5-media-accent) 68%, transparent);
  outline-offset: -3px;
  border-radius: 9px;
}

.nbv5-vocaroo-play{
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--nbv5-media-accent) 86%, #ffffff 14%),
    color-mix(in srgb, var(--nbv5-media-accent) 82%, #000000 18%)) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 9px;
  box-shadow: 0 2px 7px color-mix(in srgb, var(--nbv5-media-accent) 30%, transparent);
  transition: transform .14s ease, filter .14s ease;
}

.nbv5-vocaroo-load:hover .nbv5-vocaroo-play,
.nbv5-vocaroo-load:focus-visible .nbv5-vocaroo-play{
  transform: scale(1.05);
  filter: brightness(1.06);
}

.nbv5-vocaroo-copy{
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nbv5-vocaroo-title{
  color: var(--nbv5-pane-text) !important;
  -webkit-text-fill-color: var(--nbv5-pane-text) !important;
  font-size: 11.5px;
  line-height: 1.15;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nbv5-vocaroo-hint{
  color: var(--nbv5-media-muted) !important;
  -webkit-text-fill-color: var(--nbv5-media-muted) !important;
  font-size: 9.5px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nbv5-vocaroo-wave{
  height: 24px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  opacity: .68;
}

.nbv5-vocaroo-wave > span{
  width: 2px;
  border-radius: 999px;
  background: var(--nbv5-media-accent);
}

.nbv5-vocaroo-wave > span:nth-child(1),
.nbv5-vocaroo-wave > span:nth-child(7){ height: 6px; }
.nbv5-vocaroo-wave > span:nth-child(2),
.nbv5-vocaroo-wave > span:nth-child(6){ height: 12px; }
.nbv5-vocaroo-wave > span:nth-child(3),
.nbv5-vocaroo-wave > span:nth-child(5){ height: 18px; }
.nbv5-vocaroo-wave > span:nth-child(4){ height: 10px; }

.nbv5-vocaroo-actions{
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 4px;
}

.nbv5-vocaroo-actions a,
.nbv5-vocaroo-card .nbv5-vocaroo-actions a{
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--nbv5-media-border) 84%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--nbv5-pane-bg) 82%, transparent);
  color: var(--nbv5-media-accent) !important;
  -webkit-text-fill-color: var(--nbv5-media-accent) !important;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none !important;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}

.nbv5-vocaroo-actions a:hover,
.nbv5-vocaroo-actions a:focus-visible{
  transform: scale(1.05);
  border-color: color-mix(in srgb, var(--nbv5-media-accent) 54%, var(--nbv5-pane-border));
  background: var(--nbv5-media-soft);
  text-decoration: none !important;
}

.nbv5-vocaroo-actions a:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--nbv5-media-accent) 60%, transparent);
  outline-offset: 1px;
}

@media (max-width: 420px){
  .nbv5-yt-preview{
    grid-template-columns: 96px minmax(0, 1fr);
    width: 100%;
  }
  .nbv5-yt-preview::after{ left: 96px; }
  .nbv5-yt-thumbwrap{
    width: 96px;
    min-width: 96px;
  }
  .nbv5-vocaroo-wave{ display: none; }
}


/* V5: Floating media viewer (YouTube/Giphy/Vocaroo click-to-load) */
.nbv5-media-viewer{
  position: fixed;
  left: 24px;
  top: 92px;
  width: 520px;
  height: 280px;
  z-index: 2147482500;
  background: var(--nbv5-pane-bg);
  color: var(--nbv5-pane-text);
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  overflow: hidden;
}

.nbv5-media-viewer.is-hidden{
  display: none;
}

.nbv5-media-hdr{
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: var(--nbv5-pane-item-hover);
  border-bottom: 1px solid var(--nbv5-pane-border);
  user-select: none;
  cursor: move;
}

.nbv5-media-title{
  font-weight: 700;
  font-size: 13px;
  flex: 1 1 auto;
  min-width: 0;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 10px;
}

.nbv5-media-actions{
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.nbv5-media-btn{
  appearance: none;
  border: 1px solid var(--nbv5-pane-border);
  background: var(--nbv5-pane-bg);
  color: var(--nbv5-pane-text);
  border-radius: 10px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1;
}

.nbv5-media-btn:hover{
  background: var(--nbv5-pane-item-hover);
}

.nbv5-media-body{
  position: relative;
  width: 100%;
  height: calc(100% - 34px);
  background: #000;
}

.nbv5-media-body iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

/* Compact mode used by third-party audio players such as Vocaroo. */
.nbv5-media-viewer.is-audio{
  border-color: color-mix(in srgb, var(--nbv5-pane-border) 72%, var(--nbv5-link-color, var(--nbv5-link, #2b8bd1)) 28%);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}

.nbv5-media-viewer.is-audio .nbv5-media-hdr{
  background: color-mix(in srgb, var(--nbv5-pane-bg) 90%, var(--nbv5-link-color, var(--nbv5-link, #2b8bd1)) 10%);
}

.nbv5-media-viewer.is-audio .nbv5-media-body{
  box-sizing: border-box;
  height: calc(100% - 34px);
  padding: 8px;
  background: color-mix(in srgb, var(--nbv5-pane-bg) 94%, var(--nbv5-link-color, var(--nbv5-link, #2b8bd1)) 6%);
}

.nbv5-media-viewer.is-audio .nbv5-media-body iframe{
  position: relative;
  inset: auto;
  display: block;
  height: 60px;
  border-radius: 8px;
  background: transparent;
}

.nbv5-media-viewer.is-audio #nbv5MediaResetBtn,
.nbv5-media-viewer.is-audio .nbv5-media-resize{
  display: none;
}

.nbv5-media-viewer.is-audio .nbv5-media-btn{
  padding: 4px 7px;
  font-size: 11px;
}

.nbv5-media-resize{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  cursor: se-resize;
  background: linear-gradient(135deg, transparent 0 52%, rgba(255,255,255,.3) 52% 58%, transparent 58%);
  opacity: .85;
}

/* ===============================
   V5 HELP PANE
   - Modern, theme-aware help center using the active pane colors.
   =============================== */

.nbv5-helppane {
  --nbv5-help-accent: color-mix(in srgb, var(--nbv5-link, #2f80b7) 82%, var(--nbv5-pane-text) 18%);
  --nbv5-help-accent-hover: color-mix(in srgb, var(--nbv5-link-hover, #2563eb) 82%, var(--nbv5-pane-text) 18%);
  padding: 12px 12px 24px;
  background: var(--nbv5-pane-bg);
  color: var(--nbv5-pane-text) !important;
  --bs-body-bg: transparent;
  --bs-body-color: var(--nbv5-pane-text);
  --bs-emphasis-color: var(--nbv5-pane-text-bright, var(--nbv5-pane-text));
  --bs-secondary-color: var(--nbv5-pane-sep-text-bright, var(--nbv5-pane-sep-text));
  --bs-border-color: var(--nbv5-pane-border);
  --bs-link-color: var(--nbv5-help-accent);
  --bs-link-hover-color: var(--nbv5-help-accent-hover);
}

.nbv5-helppane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--nbv5-pane-bg) 92%, var(--nbv5-help-accent) 8%),
    color-mix(in srgb, var(--nbv5-pane-bg) 97%, var(--nbv5-help-accent-hover) 3%)
  );
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.nbv5-helppane-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.nbv5-helppane-headicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--nbv5-help-accent);
  background: color-mix(in srgb, var(--nbv5-help-accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--nbv5-help-accent) 28%, var(--nbv5-pane-border));
  font-size: 1rem;
}

.nbv5-helppane-title {
  color: var(--nbv5-pane-text-bright, var(--nbv5-pane-text));
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .1px;
  line-height: 1.15;
}

.nbv5-helppane-subtitle {
  margin-top: 3px;
  color: var(--nbv5-pane-sep-text-bright, var(--nbv5-pane-sep-text));
  font-size: .8rem;
  line-height: 1.2;
}

.nbv5-helppane-close {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 12px !important;
  border-color: color-mix(in srgb, var(--nbv5-pane-border) 80%, var(--nbv5-help-accent) 20%) !important;
  border-radius: 11px !important;
  background: color-mix(in srgb, var(--nbv5-pane-bg) 94%, var(--nbv5-pane-item-hover) 6%) !important;
  color: var(--nbv5-pane-text) !important;
  font-weight: 700;
}

.nbv5-helppane-close:hover,
.nbv5-helppane-close:focus-visible {
  border-color: color-mix(in srgb, var(--nbv5-help-accent) 52%, var(--nbv5-pane-border)) !important;
  background: color-mix(in srgb, var(--nbv5-pane-bg) 82%, var(--nbv5-help-accent) 18%) !important;
}

.nbv5-helppane-body {
  width: 100%;
}

.nbv5-help-state {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 16px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 14px;
  background: var(--nbv5-pane-item-hover);
  color: var(--nbv5-pane-sep-text-bright, var(--nbv5-pane-sep-text));
  font-weight: 700;
}

.nbv5-help-state i {
  color: var(--nbv5-help-accent);
}

.nbv5-help-state.is-error i {
  color: #d9485f;
}

.nbv5-helppane .text-muted,
.nbv5-helppane .nbv5-helpcontent,
.nbv5-helppane .nbv5-help-document {
  color: var(--nbv5-pane-text) !important;
}

.nbv5-help-document {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 0 12px;
}

.nbv5-helppane a {
  color: var(--nbv5-help-accent) !important;
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.nbv5-helppane a:hover {
  color: var(--nbv5-help-accent-hover) !important;
}

.nbv5-help-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--nbv5-help-accent) 30%, var(--nbv5-pane-border));
  border-radius: 19px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--nbv5-pane-bg) 82%, var(--nbv5-help-accent) 18%),
    color-mix(in srgb, var(--nbv5-pane-bg) 94%, var(--nbv5-help-accent-hover) 6%)
  );
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

.nbv5-help-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, var(--nbv5-help-accent), var(--nbv5-help-accent-hover));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--nbv5-help-accent) 28%, transparent);
  font-size: 1.35rem;
}

.nbv5-help-hero-copy {
  min-width: 0;
}

.nbv5-help-kicker {
  margin-bottom: 3px;
  color: color-mix(in srgb, var(--nbv5-help-accent) 78%, var(--nbv5-pane-text) 22%);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.nbv5-helppane .nbv5-help-document h2 {
  margin: 0;
  color: var(--nbv5-pane-text-bright, var(--nbv5-pane-text));
  font-size: clamp(1.28rem, 2.4vw, 1.72rem);
  font-weight: 850;
  line-height: 1.15;
}

.nbv5-help-hero p {
  margin: 6px 0 0;
  color: var(--nbv5-pane-sep-text-bright, var(--nbv5-pane-sep-text));
  font-size: .94rem;
  line-height: 1.45;
}

.nbv5-help-section {
  margin-top: 18px;
  padding: 17px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--nbv5-pane-bg) 97%, var(--nbv5-pane-item-hover) 3%);
  box-shadow: 0 6px 18px rgba(0,0,0,.045);
}

.nbv5-help-section-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--nbv5-pane-border) 82%, transparent);
}

.nbv5-help-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: var(--nbv5-help-accent);
  background: color-mix(in srgb, var(--nbv5-help-accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--nbv5-help-accent) 25%, var(--nbv5-pane-border));
}

.nbv5-helppane .nbv5-help-document h3 {
  margin: 0;
  color: var(--nbv5-pane-text-bright, var(--nbv5-pane-text));
  font-size: 1.06rem;
  font-weight: 850;
  line-height: 1.2;
}

.nbv5-help-section-head p {
  margin: 3px 0 0;
  color: var(--nbv5-pane-sep-text-bright, var(--nbv5-pane-sep-text));
  font-size: .82rem;
  line-height: 1.35;
}

.nbv5-help-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.nbv5-help-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 14px;
  background: var(--nbv5-pane-bg);
}

.nbv5-help-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--nbv5-help-accent);
  font-size: .78rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0,0,0,.28);
}

.nbv5-help-step strong {
  display: block;
  color: var(--nbv5-pane-text-bright, var(--nbv5-pane-text));
  font-size: .9rem;
}

.nbv5-help-step p {
  margin: 4px 0 0;
  color: var(--nbv5-pane-sep-text-bright, var(--nbv5-pane-sep-text));
  font-size: .8rem;
  line-height: 1.4;
}

.nbv5-help-grid,
.nbv5-help-category-grid,
.nbv5-help-mode-grid,
.nbv5-help-command-grid,
.nbv5-help-faq {
  display: grid;
  gap: 10px;
}

.nbv5-help-grid-2,
.nbv5-help-command-grid,
.nbv5-help-faq,
.nbv5-help-mode-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nbv5-help-grid-3,
.nbv5-help-category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nbv5-help-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 14px;
  background: var(--nbv5-pane-bg);
}

.nbv5-help-card-compact {
  padding: 13px;
}

.nbv5-help-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--nbv5-pane-text-bright, var(--nbv5-pane-text));
  font-size: .92rem;
  line-height: 1.25;
}

.nbv5-help-card-title > i,
.nbv5-help-card-title > .nbv5-help-text-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  border-radius: 9px;
  color: var(--nbv5-help-accent);
  background: color-mix(in srgb, var(--nbv5-help-accent) 12%, transparent);
  font-size: .78rem;
}

.nbv5-help-card-title > .nbv5-help-text-icon {
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: -.02em;
}

.nbv5-help-card p,
.nbv5-help-card li,
.nbv5-help-category span,
.nbv5-help-mode-grid span,
.nbv5-help-command-grid span,
.nbv5-help-faq p,
.nbv5-help-checklist span,
.nbv5-help-note,
.nbv5-help-credits {
  font-size: .84rem;
  line-height: 1.48;
}

.nbv5-help-card p {
  margin: 0;
  color: var(--nbv5-pane-sep-text-bright, var(--nbv5-pane-sep-text));
}

.nbv5-help-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nbv5-help-card li {
  position: relative;
  margin: 0 0 6px;
  padding-left: 14px;
  color: var(--nbv5-pane-sep-text-bright, var(--nbv5-pane-sep-text));
}

.nbv5-help-card li:last-child {
  margin-bottom: 0;
}

.nbv5-help-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--nbv5-help-accent);
}

.nbv5-help-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 13px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 13px;
  background: var(--nbv5-pane-item-hover);
  color: var(--nbv5-pane-sep-text-bright, var(--nbv5-pane-sep-text));
}

.nbv5-help-note > i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--nbv5-help-accent);
}

.nbv5-help-note-accent {
  border-color: color-mix(in srgb, var(--nbv5-help-accent) 32%, var(--nbv5-pane-border));
  background: color-mix(in srgb, var(--nbv5-pane-bg) 87%, var(--nbv5-help-accent) 13%);
}

.nbv5-help-document > .nbv5-help-note {
  margin-top: 12px;
}

.nbv5-help-category {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 13px;
  background: var(--nbv5-pane-item-hover);
}

.nbv5-help-category > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  border-radius: 9px;
  color: var(--nbv5-help-accent);
  background: color-mix(in srgb, var(--nbv5-help-accent) 13%, transparent);
}

.nbv5-help-category strong,
.nbv5-help-mode-grid strong {
  display: block;
  margin-bottom: 2px;
  color: var(--nbv5-pane-text-bright, var(--nbv5-pane-text));
  font-size: .84rem;
}

.nbv5-help-category span,
.nbv5-help-mode-grid span {
  display: block;
  color: var(--nbv5-pane-sep-text-bright, var(--nbv5-pane-sep-text));
}

.nbv5-help-mode-grid {
  margin-top: 10px;
}

.nbv5-help-mode-grid > div,
.nbv5-help-command-grid > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 12px;
  background: var(--nbv5-pane-bg);
}

.nbv5-help-mode-grid code,
.nbv5-help-command-grid code {
  flex: 0 0 auto;
  min-width: 42px;
  text-align: center;
}

.nbv5-help-command-grid span {
  color: var(--nbv5-pane-sep-text-bright, var(--nbv5-pane-sep-text));
}

.nbv5-helppane .nbv5-help-document h4.nbv5-help-subheading {
  margin: 15px 0 9px;
  color: var(--nbv5-pane-text-bright, var(--nbv5-pane-text));
  font-size: .92rem;
  font-weight: 850;
}

.nbv5-help-faq > div {
  padding: 13px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 13px;
  background: var(--nbv5-pane-bg);
}

.nbv5-help-faq strong {
  display: block;
  margin-bottom: 5px;
  color: var(--nbv5-pane-text-bright, var(--nbv5-pane-text));
  font-size: .88rem;
}

.nbv5-help-faq p {
  margin: 0;
  color: var(--nbv5-pane-sep-text-bright, var(--nbv5-pane-sep-text));
}

.nbv5-help-checklist {
  display: grid;
  gap: 9px;
}

.nbv5-help-checklist > div {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 12px;
  background: var(--nbv5-pane-bg);
}

.nbv5-help-check-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--nbv5-help-accent);
  font-size: .74rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0,0,0,.28);
}

.nbv5-help-checklist span {
  padding-top: 3px;
  color: var(--nbv5-pane-sep-text-bright, var(--nbv5-pane-sep-text));
}

.nbv5-help-about {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--nbv5-pane-bg) 94%, var(--nbv5-help-accent) 6%),
    var(--nbv5-pane-bg)
  );
}

.nbv5-help-credits {
  margin: 12px 0 0;
  color: var(--nbv5-pane-sep-text-bright, var(--nbv5-pane-sep-text));
  text-align: center;
}

.nbv5-helppane .nbv5-help-document code {
  display: inline-block;
  max-width: 100%;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--nbv5-pane-border) 78%, var(--nbv5-help-accent) 22%);
  border-radius: 7px;
  background: color-mix(in srgb, var(--nbv5-pane-bg) 86%, var(--nbv5-help-accent) 14%);
  color: var(--nbv5-pane-text-bright, var(--nbv5-pane-text));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .88em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .nbv5-help-steps,
  .nbv5-help-grid-3,
  .nbv5-help-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .nbv5-helppane {
    padding: 9px 9px 18px;
  }

  .nbv5-helppane-head {
    align-items: flex-start;
    padding: 11px;
    border-radius: 14px;
  }

  .nbv5-helppane-headicon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }

  .nbv5-helppane-subtitle {
    display: none;
  }

  .nbv5-helppane-close {
    min-height: 34px;
    padding: 6px 9px !important;
    font-size: .78rem !important;
  }

  .nbv5-help-hero {
    align-items: flex-start;
    padding: 16px;
    border-radius: 16px;
  }

  .nbv5-help-hero-icon {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 1.1rem;
  }

  .nbv5-help-section {
    margin-top: 12px;
    padding: 13px;
    border-radius: 15px;
  }

  .nbv5-help-steps,
  .nbv5-help-grid-2,
  .nbv5-help-grid-3,
  .nbv5-help-category-grid,
  .nbv5-help-mode-grid,
  .nbv5-help-command-grid,
  .nbv5-help-faq {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 430px) {
  .nbv5-helppane-heading {
    gap: 8px;
  }

  .nbv5-helppane-close {
    width: 34px;
    padding: 0 !important;
    justify-content: center;
    font-size: 0 !important;
  }

  .nbv5-helppane-close i {
    font-size: .82rem;
  }

  .nbv5-help-hero {
    gap: 11px;
    padding: 14px;
  }

  .nbv5-help-hero-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }
}


/* Optional subtle alternating log rows (chat/activity/whisper only). */
.nbv5-line.nbv5-line-alt {
  background: var(--nbv5-pane-alt-row-bg) !important;
  border-radius: 6px;
}


/* Left-panel account/manage actions */
.nbv5-lp-selfrow{
  gap: 9px;
  align-items: center;
  padding: 9px 11px;
}

.nbv5-lp-avatar{
  width: 31px;
  height: 31px;
  border-radius: 9px;
}

.nbv5-lp-meta{
  min-width: 0;
  flex: 1 1 auto;
}

.nbv5-lp-line-hello{
  gap: 0;
  margin-bottom: 0;
}

.nbv5-lp-managelink,
.nbv5-lp-hellotext{
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  color: inherit !important;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.15;
}

.nbv5-lp-hello-prefix{
  opacity: .76;
  font-size: 13px;
  font-weight: 600;
}

.nbv5-lp-hello-name{
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nbv5-lp-hello-bang{
  font-size: 13px;
  font-weight: 500;
  opacity: .78;
}

.nbv5-lp-managelink{
  display: inline-block;
  border-radius: 8px;
  padding: 0 1px;
  margin-left: -1px;
  color: inherit;
  text-decoration: none;
  transition: color .15s ease, opacity .15s ease, transform .15s ease;
}

.nbv5-lp-managelink:hover,
.nbv5-lp-managelink:focus-visible{
  text-decoration: none;
  opacity: 1;
  transform: translateX(1px);
  outline: none;
}

.nbv5-lp-actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  padding-top: 5px;
  padding-left: 0;
  border-top: 1px solid rgba(255,255,255,.10);
}
html[data-v5thememode="light"] .nbv5-lp-actions{
  border-top-color: rgba(0,0,0,.08);
}
html[data-v5thememode="dark"] .nbv5-lp-actions{
  border-top-color: rgba(255,255,255,.10);
}

.nbv5-lp-subaction{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  opacity: .84;
  transition: opacity .15s ease, transform .15s ease;
}

.nbv5-lp-subaction + .nbv5-lp-subaction{
  margin-left: 4px;
}

.nbv5-lp-subaction i{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  background: rgba(0,0,0,.09);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
html[data-v5thememode="dark"] .nbv5-lp-subaction i{
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.nbv5-lp-subaction:hover,
.nbv5-lp-subaction:focus-visible{
  opacity: 1;
  transform: translateX(1px);
  outline: none;
  text-decoration: none;
}

.nbv5-lp-logoffbtn{
  color: inherit !important;
}


/* Mentions */
.nbv5-composer-input-wrap { position: relative; }
.nbv5-mention-pop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  border-radius: 14px;
  border: 1px solid var(--nbv5-pane-border);
  background: var(--nbv5-pane-bg);
  color: var(--nbv5-pane-text);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  max-height: min(360px, 52vh);
  overflow: auto;
}
.nbv5-mention-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  line-height: 1.15;
}
.nbv5-mention-item:hover,
.nbv5-mention-item.is-active {
  background: var(--nbv5-pane-item-hover);
}
.nbv5-mention-itemtext { display:flex; align-items:center; gap:5px; min-width:0; }
.nbv5-mention-itemnick { font-weight: 600; color: inherit; -webkit-text-fill-color: currentColor; }
.nbv5-mention-itemrole { opacity: .72; font-size: .82em; }
.nbv5-line.is-mention {
  background: linear-gradient(90deg, rgba(220, 53, 69, .18) 0%, rgba(220, 53, 69, .08) 100%) !important;
  border-left: 3px solid rgba(220, 53, 69, .85);
  padding-left: 8px;
  border-radius: 8px;
}
.nbv5-msg-mention-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  background: #b3263b;
  color: #fff;
  vertical-align: middle;
}
.nbv5-mention-token {
  display: inline-block;
  padding: 0 .25em;
  border-radius: .45em;
  background: rgba(220, 53, 69, .16);
  color: inherit;
  font-weight: 700;
}
.nbv5-room-mention-badge {
  background: #b3263b !important;
  color: #fff !important;
}


/* Fullscreen (V5 shell-level) */
.nbv5-skin-v4 .nbv5-topbar-toggle-fullscreen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nbv5:fullscreen,
.nbv5.nbv5-is-fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
}

.nbv5:fullscreen .nbv5-page,
.nbv5.nbv5-is-fullscreen .nbv5-page {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
}

.nbv5:fullscreen .nbv5-shell,
.nbv5.nbv5-is-fullscreen .nbv5-shell,
.nbv5:fullscreen .nbv5-stage,
.nbv5.nbv5-is-fullscreen .nbv5-stage,
.nbv5:fullscreen .nbv5-main,
.nbv5.nbv5-is-fullscreen .nbv5-main {
  min-height: 0;
}


/* Build 322: keep the desktop people pane fixed at 260px even in narrow desktop windows. */
.nbv5-skin-v4:not(.nbv5-is-mobile) .nbv5-right:not(.nbv5-right-closed) {
  flex: 0 0 260px !important;
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  margin-left: 5px !important;
  border-left: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}


/* Safari / Apple mobile hardening */
.nbv5.nbv5-safari-harden .nbv5-ctx-menu {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.nbv5.nbv5-safari-harden .nbv5-composer-input,
.nbv5.nbv5-safari-harden .nbv5-whwin-input {
  -webkit-text-fill-color: currentColor !important;
  caret-color: currentColor !important;
}

.nbv5.nbv5-safari-harden .nbv5-composer-input::placeholder,
.nbv5.nbv5-safari-harden .nbv5-whwin-input::placeholder {
  -webkit-text-fill-color: var(--nbv5-input-ph) !important;
}

.nbv5.nbv5-safari-harden .nbv5-composer-input-wrap.is-mylook-gradient .nbv5-composer-input,
.nbv5.nbv5-safari-harden .nbv5-composer-input-wrap.is-mylook-gradient .nbv5-whwin-input {
  color: var(--nbv5-input-text) !important;
  -webkit-text-fill-color: currentColor !important;
  caret-color: currentColor !important;
}

.nbv5.nbv5-safari-harden .nbv5-composer-mirror,
.nbv5.nbv5-safari-harden .nbv5-composer-fake-caret {
  display: none !important;
}

.nbv5.nbv5-apple-mobile .nbv5-page {
  min-height: -webkit-fill-available;
}


/* Build 401: My Message Format pass 2 compact modernization */
.nbv5-mylook-row-colors {
  align-items: flex-start;
}

.nbv5-mylook-colorstack {
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: 10px;
}

.nbv5-mylook-colorpanel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 10px;
  background: rgba(0,0,0,0.025);
}

.nbv5-mylook-minilabel {
  font-size: 11px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: .72;
}

.nbv5-mylook-inline-tight {
  gap: 6px;
}

.nbv5-mylook-gradpanel {
  min-width: 0;
}

.nbv5-mylook-gradhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.nbv5-mylook-gradhead .nbv5-mylook-gradtoggle {
  margin: 0;
}

.nbv5-mylook-preview {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 12px;
  background: rgba(0,0,0,0.02);
}

.nbv5-mylook-preview-label {
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: .72;
}

.nbv5-mylook-preview-box {
  min-height: 56px;
  padding: 10px 12px;
}

.nbv5-mylook-preview-text {
  font-size: 20px;
  line-height: 1.25;
}

@media (max-width: 900px) {
  .nbv5-mylook-row,
  .nbv5-mylook-row-colors {
    align-items: stretch;
    flex-direction: column;
  }

  .nbv5-mylook-colorstack,
  .nbv5-mylook-inline {
    justify-content: flex-start;
  }

  .nbv5-mylook-colorpanel,
  .nbv5-mylook-gradpanel,
  .nbv5-mylook-fontpicker {
    width: 100%;
  }
}

/* V5 context-menu palette (shared structure, theme-owned colors). */
.nbv5-skin-v4 .nbv5-ctx-menu{
  background: var(--nbv5-ctx-bg, rgba(31,35,40,.96)) !important;
  color: var(--nbv5-ctx-text, #e6edf3) !important;
  border-color: var(--nbv5-ctx-border, rgba(255,255,255,.10)) !important;
  box-shadow:
    0 18px 45px var(--nbv5-ctx-shadow, rgba(0,0,0,.34)),
    inset 0 3px 0 var(--nbv5-ctx-accent, var(--v5-accent-1, #4D95C7)) !important;
}

.nbv5-skin-v4 .nbv5-ctx-item{
  color: var(--nbv5-ctx-text, #e6edf3) !important;
}

.nbv5-skin-v4 .nbv5-ctx-item:not(:disabled):hover,
.nbv5-skin-v4 .nbv5-ctx-item:not(:disabled):focus-visible{
  color: var(--nbv5-ctx-text, #e6edf3) !important;
  background: var(--nbv5-ctx-hover, rgba(255,255,255,.07)) !important;
  outline: none;
}

.nbv5-skin-v4 .nbv5-ctx-item.is-title{
  color: var(--nbv5-ctx-title-text, #ffffff) !important;
  background: var(--nbv5-ctx-title-bg, rgba(255,255,255,.05)) !important;
}

.nbv5-skin-v4 .nbv5-ctx-item.is-title .nbv5-ctx-label{
  color: inherit !important;
}

.nbv5-skin-v4 .nbv5-ctx-item.is-sub{
  border-bottom-color: var(--nbv5-ctx-divider, rgba(255,255,255,.10)) !important;
}

.nbv5-skin-v4 .nbv5-ctx-sub{
  color: var(--nbv5-ctx-muted, #aeb8c2) !important;
  opacity: 1;
}

.nbv5-skin-v4 .nbv5-ctx-divider{
  height: 1px;
  margin: 4px 0;
  background: var(--nbv5-ctx-divider, rgba(255,255,255,.10)) !important;
}

.nbv5-ctx-item.has-icon{ gap: 9px; }
.nbv5-skin-v4 .nbv5-ctx-icon{
  flex: 0 0 16px;
  width: 16px;
  color: var(--nbv5-ctx-icon, var(--v5-accent-1, #4D95C7)) !important;
  text-align: center;
  opacity: .90;
  font-size: 12px;
  line-height: 1;
}
.nbv5-skin-v4 .nbv5-ctx-item.is-title .nbv5-ctx-icon,
.nbv5-skin-v4 .nbv5-ctx-item.is-sub .nbv5-ctx-icon{
  opacity: .82;
}

/* Theme dialog mode buttons follow the active light/dark theme for inactive text. */
#nbv5ThemeModal .nbv5-theme-modebar .btn-outline-secondary {
  color: inherit;
  border-color: rgba(255,255,255,.28);
}

html[data-v5thememode='light'] #nbv5ThemeModal .nbv5-theme-modebar .btn-outline-secondary {
  color: #1f2937;
  border-color: rgba(17,24,39,.22);
}

html[data-v5thememode='light'] #nbv5ThemeModal .nbv5-theme-modebar .btn-outline-secondary:hover,
html[data-v5thememode='light'] #nbv5ThemeModal .nbv5-theme-modebar .btn-outline-secondary:focus {
  color: #111827;
}

/* Easy/Advanced inactive mode buttons follow their dialog theme colors. */
.nbv5-control .nbv5-cp-mode .btn-outline-secondary {
  --bs-btn-color: var(--nbv5-pane-text);
  --bs-btn-border-color: var(--nbv5-pane-border);
  --bs-btn-hover-color: var(--nbv5-pane-text);
  --bs-btn-hover-border-color: var(--nbv5-pane-text);
  --bs-btn-hover-bg: var(--nbv5-pane-item-hover);
  color: var(--nbv5-pane-text) !important;
  border-color: var(--nbv5-pane-border) !important;
}

#nbv5ThemeModal .nbv5-theme-modebar .btn-outline-secondary {
  border-color: rgba(255,255,255,.28) !important;
  color: inherit !important;
}

html[data-v5thememode='light'] #nbv5ThemeModal .nbv5-theme-modebar .btn-outline-secondary {
  border-color: rgba(17,24,39,.22) !important;
}

/* Build 505: Phase 1 Easy Mode My Message Format cleanup */
.nbv5-mylook-disabled-note{
  margin-top: .65rem;
  padding: .7rem .85rem;
  border: 1px solid var(--nbv5-border-soft, rgba(148,163,184,.24));
  border-radius: .85rem;
  background: var(--nbv5-panel-soft, rgba(148,163,184,.10));
  color: var(--nbv5-muted, #94a3b8);
  font-size: .88rem;
  line-height: 1.35;
}

.nbv5-mylook-state + .nbv5-mylook-grid{
  margin-top: .8rem;
}

/* Control Panel Phase 3: search navigation results */
.nbv5-control .nbv5-cp-searchresults{
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.nbv5-control .nbv5-cp-searchresult{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: 1px solid var(--nbv5-cp-card-border);
  border-radius: 10px;
  padding: 7px 9px;
  background: var(--nbv5-cp-card-bg);
  color: var(--nbv5-cp-title);
  text-align: left;
}

.nbv5-control .nbv5-cp-searchresult:hover,
.nbv5-control .nbv5-cp-searchresult:focus{
  border-color: rgba(79, 140, 255, 0.55);
  outline: none;
}

.nbv5-control .nbv5-cp-searchresult-main{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nbv5-control .nbv5-cp-searchresult-title{
  font-weight: 700;
  line-height: 1.15;
}

.nbv5-control .nbv5-cp-searchresult-section{
  color: var(--nbv5-cp-sub);
  font-size: .78rem;
  line-height: 1.2;
}

.nbv5-control .nbv5-cp-searchbadge{
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  background: rgba(79, 140, 255, 0.9);
}

.nbv5-control .nbv5-cp-searchnone{
  color: var(--nbv5-cp-sub);
  font-size: .86rem;
  padding: 2px 4px;
}

.nbv5-control .nbv5-cp-search-hit{
  animation: nbv5CpSearchHit 1.8s ease-out;
}

@keyframes nbv5CpSearchHit{
  0%, 45%{
    box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.38), var(--nbv5-cp-card-shadow);
    border-color: rgba(79, 140, 255, 0.8);
  }
  100%{
    box-shadow: var(--nbv5-cp-card-shadow);
  }
}


/* Control Panel Phase 6: Advanced Mode density polish
   Keeps all controls visible, but reduces Advanced Mode scrolling fatigue. */
.nbv5-control.is-advanced-mode .nbv5-cp-grid{
  column-gap: 8px;
  margin-top: 4px;
}

.nbv5-control.is-advanced-mode .nbv5-cp-card{
  margin-bottom: 5px;
}

.nbv5-control.is-advanced-mode .nbv5-cp-grid > .nbv5-cp-card{
  margin-bottom: 5px;
}

.nbv5-control.is-advanced-mode .nbv5-cp-cardhead{
  gap: 8px;
  margin-bottom: 3px;
}

.nbv5-control.is-advanced-mode .nbv5-cp-card-settings .nbv5-cp-cardhead{
  margin-bottom: 4px;
  padding-bottom: 4px;
}

.nbv5-control.is-advanced-mode .nbv5-cp-card-settings .nbv5-cp-cardbody{
  padding: 6px 0 8px;
}

/* Keep the free-form Highlight Words editor aligned with the inset setting rows. */
.nbv5-control.is-advanced-mode .nbv5-cp-card-highlights .nbv5-cp-cardbody{
  padding-left: 6px;
  padding-right: 6px;
}

.nbv5-control.is-advanced-mode .nbv5-cp-card-highlights.nbv5-cp-card-settings .nbv5-control-row{
  margin-left: 0;
  margin-right: 0;
}

.nbv5-control.is-advanced-mode .nbv5-cp-card-settings .nbv5-control-row{
  margin: 0 6px 6px;
  padding: 7px 10px 7px 12px;
  border-radius: 10px;
  column-gap: 10px;
}

.nbv5-control.is-advanced-mode .nbv5-cp-card-settings .nbv5-control-row .form-check-label{
  font-size: 12.5px;
  line-height: 1.2;
}

.nbv5-control.is-advanced-mode .nbv5-cp-card-settings .nbv5-control-row .nbv5-control-help{
  font-size: 10.5px;
  line-height: 1.25;
}

.nbv5-control.is-advanced-mode .nbv5-cp-card-settings .nbv5-control-row .form-check-input{
  margin-right: 6px;
}

.nbv5-control.is-advanced-mode .nbv5-cp-card-mediasize .nbv5-theme-range{
  margin-bottom: 8px;
}

.nbv5-control.is-advanced-mode .nbv5-cp-card-mediasize .small.text-muted{
  font-size: 10.5px;
  line-height: 1.25;
}

.nbv5-control.is-advanced-mode .nbv5-cp-card-format .nbv5-control-help,
.nbv5-control.is-advanced-mode .nbv5-cp-card-ignore .nbv5-control-help,
.nbv5-control.is-advanced-mode .nbv5-cp-card-tag .nbv5-control-help,
.nbv5-control.is-advanced-mode .nbv5-cp-card-reset .nbv5-control-help{
  line-height: 1.3;
}

@media (max-width: 575.98px){
  .nbv5-control.is-advanced-mode .nbv5-cp-card-settings .nbv5-control-row{
    margin: 0 4px 6px;
    padding: 7px 8px;
  }
}


/* Build 512: Theme dialog Phase 7 Easy/Advanced alignment */
#nbv5ThemeModal .nbv5-theme-section{
  padding: 12px 14px;
  border: 1px solid var(--nbv5-pane-border, rgba(148,163,184,.22));
  border-radius: 14px;
  background: rgba(148,163,184,.08);
}

#nbv5ThemeModal .nbv5-theme-section + .nbv5-theme-section{
  margin-top: 12px;
}

#nbv5ThemeModal .nbv5-theme-section-title{
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nbv5-muted, #94a3b8);
}

#nbv5ThemeModal .nbv5-theme-divider{
  height: 1px;
  margin: 12px 0;
  background: var(--nbv5-pane-border, rgba(148,163,184,.22));
}

#nbv5ThemeModal .nbv5-theme-row{
  padding: 8px 0;
}

#nbv5ThemeModal .nbv5-theme-row + .nbv5-theme-row{
  border-top: 1px solid var(--nbv5-pane-border, rgba(148,163,184,.18));
}

#nbv5ThemeModal .nbv5-theme-fonts .nbv5-theme-range{
  padding-top: 4px;
}

@media (max-width: 640px){
  #nbv5ThemeModal .nbv5-theme-pick > .d-flex,
  #nbv5ThemeModal .nbv5-theme-pane-pick,
  #nbv5ThemeModal .nbv5-theme-row,
  #nbv5ThemeModal .nbv5-theme-fonts > .d-flex{
    align-items: stretch !important;
    flex-direction: column;
  }

  #nbv5ThemeModal .nbv5-theme-pick select,
  #nbv5ThemeModal .nbv5-theme-pane-pick select,
  #nbv5ThemeModal .nbv5-theme-pick [style*="min-width"],
  #nbv5ThemeModal .nbv5-theme-pane-pick [style*="min-width"]{
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Build 514: mobile and responsive polish for Control Panel and Themes dialogs */
@media (max-width: 767.98px){
  .nbv5-control{
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }

  .nbv5-control .nbv5-control-head,
  .nbv5-control .nbv5-cp-mode,
  #nbv5ThemeModal .nbv5-theme-modebar{
    align-items: stretch !important;
    flex-direction: column;
    gap: 8px !important;
  }

  .nbv5-control .nbv5-cp-mode .btn-group,
  #nbv5ThemeModal .nbv5-theme-modebar .btn-group{
    width: 100%;
  }

  .nbv5-control .nbv5-cp-mode .btn,
  #nbv5ThemeModal .nbv5-theme-modebar .btn{
    flex: 1 1 0;
    min-height: 36px;
  }

  .nbv5-control .nbv5-cp-search{
    position: sticky;
    top: 0;
    z-index: 4;
    padding-top: 4px;
    padding-bottom: 4px;
    background: var(--nbv5-pane-bg, transparent);
  }

  .nbv5-control .nbv5-cp-searchbox{
    padding: 9px 10px;
  }

  .nbv5-control .nbv5-cp-card{
    padding: 8px;
    border-radius: 13px;
  }

  .nbv5-control .nbv5-cp-cardhead,
  .nbv5-control .nbv5-mylook-head{
    align-items: stretch;
    flex-direction: column;
  }

  .nbv5-control .nbv5-mylook-headactions{
    justify-content: space-between;
    width: 100%;
  }

  .nbv5-control .nbv5-control-row,
  .nbv5-control .nbv5-cp-card-language .nbv5-control-row,
  .nbv5-control .nbv5-cp-card-flood .nbv5-control-row,
  .nbv5-control .nbv5-cp-card-debug .nbv5-control-row{
    align-items: flex-start;
    gap: 8px;
  }

  .nbv5-control .nbv5-cp-searchresult{
    align-items: flex-start;
    padding: 9px 10px;
  }

  #nbv5ThemeModal.modal .nbv5-theme-dialog{
    top: calc(env(safe-area-inset-top, 0px) + 6px) !important;
    width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - (env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 12px)) !important;
  }

  #nbv5ThemeModal .modal-header{
    padding: 9px 10px;
  }

  #nbv5ThemeModal .modal-body{
    padding: 9px 10px max(12px, env(safe-area-inset-bottom, 0px));
  }

  #nbv5ThemeModal .nbv5-theme-section{
    padding: 10px;
    border-radius: 13px;
  }

  #nbv5ThemeModal .nbv5-theme-section + .nbv5-theme-section{
    margin-top: 10px;
  }

  #nbv5ThemeModal .nbv5-theme-range{
    padding: 9px 10px 8px;
  }

  #nbv5ThemeModal .form-select,
  #nbv5ThemeModal .form-control{
    min-height: 36px;
  }
}

@media (max-width: 420px){
  .nbv5-control .nbv5-control-title{
    font-size: 1rem;
  }

  .nbv5-control .nbv5-cp-card-settings .nbv5-control-row{
    grid-template-columns: auto minmax(0, 1fr);
  }

  .nbv5-control .nbv5-cp-card-settings .nbv5-control-row .nbv5-control-help{
    grid-column: 2;
  }

  #nbv5ThemeModal .nbv5-theme-section-title{
    margin-bottom: 8px;
  }
}


/* ===============================
   Control Panel cosmetic polish (build 535)
   Visual-only: does not change Easy/Advanced visibility or setting behavior.
   =============================== */
.nbv5-control{
  --nbv5-cp-page-bg: #f3f7fc;
  --nbv5-cp-page-glow: rgba(37, 99, 235, .085);
  --nbv5-cp-card-bg: rgba(255,255,255,.94);
  --nbv5-cp-card-border: #dbe4ef;
  --nbv5-cp-card-shadow: 0 10px 28px rgba(15, 23, 42, .075), 0 1px 0 rgba(255,255,255,.70) inset;
  --nbv5-cp-tile-bg: #f7faff;
  --nbv5-cp-tile-border: #e1e9f3;
  --nbv5-cp-soft-bg: #f2f7fd;
  --nbv5-cp-soft-bg-2: #edf4fb;
  --nbv5-cp-ico-bg: linear-gradient(135deg, rgba(37,99,235,.12), rgba(14,165,233,.10));
  --nbv5-cp-ico-fg: #1d4ed8;
  --nbv5-cp-title: #0f172a;
  --nbv5-cp-sub: #516070;
  --nbv5-cp-label: #111827;
  --nbv5-cp-help: #64748b;
  --nbv5-cp-focus: #2563eb;
  background:
    radial-gradient(circle at 1.5rem 0, var(--nbv5-cp-page-glow), transparent 22rem),
    linear-gradient(180deg, #f7fbff 0%, var(--nbv5-cp-page-bg) 42%, #eef4fb 100%);
}

[data-chat-tone="dark"] .nbv5-control{
  --nbv5-cp-page-bg: rgba(0,0,0,.16);
  --nbv5-cp-page-glow: rgba(96,165,250,.12);
  --nbv5-cp-card-bg: rgba(255,255,255,.055);
  --nbv5-cp-card-border: rgba(255,255,255,.115);
  --nbv5-cp-card-shadow: 0 14px 32px rgba(0,0,0,.24), 0 1px 0 rgba(255,255,255,.04) inset;
  --nbv5-cp-tile-bg: rgba(255,255,255,.045);
  --nbv5-cp-tile-border: rgba(255,255,255,.095);
  --nbv5-cp-soft-bg: rgba(255,255,255,.07);
  --nbv5-cp-soft-bg-2: rgba(255,255,255,.09);
  --nbv5-cp-ico-bg: linear-gradient(135deg, rgba(96,165,250,.20), rgba(45,212,191,.10));
  --nbv5-cp-ico-fg: #bfdbfe;
  background:
    radial-gradient(circle at 1.5rem 0, var(--nbv5-cp-page-glow), transparent 22rem),
    linear-gradient(180deg, rgba(255,255,255,.04), var(--nbv5-cp-page-bg));
}

.nbv5-control-head{
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 58px;
  padding: 12px 16px;
  background: rgba(255,255,255,.88);
  border-bottom: 1px solid rgba(203, 213, 225, .9);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
  backdrop-filter: blur(10px);
}

[data-chat-tone="dark"] .nbv5-control-head{
  background: rgba(15, 23, 42, .82);
  border-bottom-color: rgba(255,255,255,.12);
  box-shadow: 0 12px 24px rgba(0,0,0,.24);
}

.nbv5-control-titlewrap{
  position: relative;
  min-width: 0;
  padding-left: 44px;
}

.nbv5-control-titlewrap::before{
  content: "⚙";
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--nbv5-cp-ico-bg);
  color: var(--nbv5-cp-ico-fg);
  font-size: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,.65) inset;
}

[data-chat-tone="dark"] .nbv5-control-titlewrap::before{
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
}

.nbv5-control-title{
  font-size: 15px;
  line-height: 1.15;
  color: var(--nbv5-cp-title);
}

.nbv5-control-subtitle{
  margin-top: 3px;
  color: var(--nbv5-cp-sub);
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nbv5-control-close{
  border-radius: 10px !important;
  padding: 6px 12px !important;
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(148,163,184,.55) !important;
  color: var(--nbv5-cp-title) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.70) inset;
}

.nbv5-control-close:hover{
  background: #ffffff !important;
  border-color: rgba(59,130,246,.45) !important;
}

[data-chat-tone="dark"] .nbv5-control-close{
  background: rgba(255,255,255,.07) !important;
  box-shadow: none;
}

[data-chat-tone="dark"] .nbv5-control-close:hover{
  background: rgba(255,255,255,.12) !important;
}

.nbv5-control-body{
  padding: 14px;
  scrollbar-gutter: stable;
}

.nbv5-control .nbv5-control-intro{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid rgba(96,165,250,.22);
  border-radius: 999px;
  background: rgba(239,246,255,.78);
  color: #475569;
  opacity: 1;
  font-weight: 600;
}

.nbv5-control .nbv5-control-intro::before{
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(37,99,235,.12);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
}

[data-chat-tone="dark"] .nbv5-control .nbv5-control-intro{
  background: rgba(96,165,250,.10);
  border-color: rgba(96,165,250,.22);
  color: var(--nbv5-cp-sub);
}

.nbv5-control .nbv5-cp-mode{
  padding: 12px;
  border: 1px solid var(--nbv5-cp-card-border);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.88));
  box-shadow: var(--nbv5-cp-card-shadow);
}

[data-chat-tone="dark"] .nbv5-control .nbv5-cp-mode{
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
}

.nbv5-control .nbv5-cp-mode .fw-semibold{
  color: var(--nbv5-cp-title);
  font-size: 14px;
}

.nbv5-control .nbv5-cp-mode .btn-group{
  padding: 3px;
  border: 1px solid var(--nbv5-cp-tile-border);
  border-radius: 999px;
  background: var(--nbv5-cp-tile-bg);
  box-shadow: 0 1px 0 rgba(255,255,255,.70) inset;
}

[data-chat-tone="dark"] .nbv5-control .nbv5-cp-mode .btn-group{
  box-shadow: none;
}

.nbv5-control .nbv5-cp-mode .btn{
  border-radius: 999px !important;
  border: 0 !important;
  padding: 6px 13px !important;
  font-weight: 700;
  color: var(--nbv5-cp-sub);
}

.nbv5-control .nbv5-cp-mode .btn-primary{
  color: #ffffff !important;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  box-shadow: 0 8px 16px rgba(37,99,235,.24);
}

.nbv5-control .nbv5-cp-search{
  position: sticky;
  top: 0;
  z-index: 8;
  margin: 12px -2px 14px;
  padding: 4px 2px 8px;
  background: linear-gradient(180deg, var(--nbv5-cp-page-bg), rgba(243,247,252,.86));
  backdrop-filter: blur(8px);
}

[data-chat-tone="dark"] .nbv5-control .nbv5-cp-search{
  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.72));
}

.nbv5-control .nbv5-cp-searchbox{
  min-height: 42px;
  padding: 10px 13px;
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  border-color: var(--nbv5-cp-card-border);
  box-shadow: 0 8px 22px rgba(15,23,42,.065), 0 1px 0 rgba(255,255,255,.80) inset;
}

[data-chat-tone="dark"] .nbv5-control .nbv5-cp-searchbox{
  background: rgba(255,255,255,.07);
  box-shadow: 0 12px 24px rgba(0,0,0,.20);
}

.nbv5-control .nbv5-cp-searchbox:focus-within{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 3px rgba(37,99,235,.13), 0 8px 22px rgba(15,23,42,.075);
}

.nbv5-control .nbv5-cp-card,
.nbv5-control .nbv5-cp-card:not(.nbv5-cp-card-format){
  border-radius: 18px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: var(--nbv5-cp-card-shadow);
}

.nbv5-control .nbv5-cp-grid > .nbv5-cp-card{
  margin-bottom: 12px;
}

.nbv5-control .nbv5-cp-cardhead{
  align-items: center;
  margin: 0 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--nbv5-cp-tile-border);
}

.nbv5-control .nbv5-cp-card:not(.nbv5-cp-card-format) .nbv5-cp-cardhead,
.nbv5-control .nbv5-cp-card-settings .nbv5-cp-cardhead{
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.nbv5-control .nbv5-cp-headleft{
  gap: 11px;
  align-items: center;
}

.nbv5-control .nbv5-cp-ico,
.nbv5-control .nbv5-cp-card:not(.nbv5-cp-card-format) .nbv5-cp-ico,
.nbv5-control .nbv5-cp-card-settings .nbv5-cp-ico{
  width: 34px;
  height: 34px;
  border-radius: 13px;
  background: var(--nbv5-cp-ico-bg);
  color: var(--nbv5-cp-ico-fg);
  box-shadow: 0 1px 0 rgba(255,255,255,.72) inset;
}

[data-chat-tone="dark"] .nbv5-control .nbv5-cp-ico{
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
}

.nbv5-control .nbv5-cp-title,
.nbv5-control .nbv5-cp-card:not(.nbv5-cp-card-format) .nbv5-cp-title,
.nbv5-control .nbv5-cp-card-settings .nbv5-cp-title{
  font-size: 14px;
  font-weight: 850;
  letter-spacing: -.01em;
}

.nbv5-control .nbv5-cp-sub,
.nbv5-control .nbv5-cp-card:not(.nbv5-cp-card-format) .nbv5-cp-sub,
.nbv5-control .nbv5-cp-card-settings .nbv5-cp-sub{
  font-size: 12px;
  line-height: 1.35;
  color: var(--nbv5-cp-sub);
}

.nbv5-control .nbv5-cp-cardbody{
  padding-top: 0;
}

.nbv5-control .nbv5-control-row,
.nbv5-control .nbv5-cp-card-settings .nbv5-control-row{
  border-radius: 15px;
  border-color: var(--nbv5-cp-tile-border);
  background: var(--nbv5-cp-tile-bg);
  padding: 10px 13px;
  margin: 0 0 9px;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.nbv5-control .nbv5-control-row:hover,
.nbv5-control .nbv5-cp-card-settings .nbv5-control-row:hover{
  background: var(--nbv5-cp-soft-bg);
  border-color: rgba(59,130,246,.24);
  box-shadow: 0 6px 16px rgba(15,23,42,.045);
}

[data-chat-tone="dark"] .nbv5-control .nbv5-control-row:hover,
[data-chat-tone="dark"] .nbv5-control .nbv5-cp-card-settings .nbv5-control-row:hover{
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
}

.nbv5-control .nbv5-control-row .form-check-label,
.nbv5-control .nbv5-control-row.form-switch .form-check-label,
.nbv5-control .nbv5-cp-card-settings .nbv5-control-row .form-check-label{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.005em;
}

.nbv5-control .nbv5-control-row .nbv5-control-help,
.nbv5-control .nbv5-control-row.form-switch .nbv5-control-help,
.nbv5-control .nbv5-cp-card-settings .nbv5-control-row .nbv5-control-help{
  font-size: 11.5px;
  line-height: 1.35;
}

.nbv5-control .form-switch .form-check-input{
  width: 44px;
  height: 24px;
  cursor: pointer;
  border-color: rgba(148,163,184,.70);
  background-color: #e5eaf0;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.10);
}

.nbv5-control .form-switch .form-check-input:checked{
  border-color: #2563eb;
  background-color: #2563eb;
  box-shadow: 0 6px 12px rgba(37,99,235,.18);
}

.nbv5-control .form-switch .form-check-input:focus{
  border-color: rgba(37,99,235,.70);
  box-shadow: 0 0 0 3px rgba(37,99,235,.16);
}

.nbv5-control .form-range{
  height: 1.4rem;
}

.nbv5-control .form-range::-webkit-slider-runnable-track{
  height: 8px;
  border-radius: 999px;
  background-color: #e6edf5;
}

.nbv5-control .form-range::-webkit-slider-thumb{
  width: 20px;
  height: 20px;
  margin-top: -6px;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 10px rgba(37,99,235,.22);
}

.nbv5-control .form-range::-moz-range-track{
  height: 8px;
  border-radius: 999px;
  background-color: #e6edf5;
}

.nbv5-control .form-range::-moz-range-thumb{
  width: 20px;
  height: 20px;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 10px rgba(37,99,235,.22);
}

[data-chat-tone="dark"] .nbv5-control .form-range::-webkit-slider-runnable-track{
  background-color: rgba(255,255,255,.11);
}

[data-chat-tone="dark"] .nbv5-control .form-range::-moz-range-track{
  background-color: rgba(255,255,255,.11);
}

.nbv5-control .nbv5-theme-range{
  padding: 12px;
  border: 1px solid var(--nbv5-cp-tile-border);
  border-radius: 15px;
  background: var(--nbv5-cp-tile-bg);
}

.nbv5-control .nbv5-theme-rangehead{
  margin-bottom: 7px;
}

.nbv5-control .nbv5-theme-rangelabel{
  color: var(--nbv5-cp-label);
  font-weight: 800;
}

.nbv5-control .nbv5-theme-rangeval{
  color: var(--nbv5-cp-sub);
  font-weight: 800;
}

.nbv5-control .nbv5-mylook-state{
  border-radius: 15px;
  padding: 10px 12px;
  border-color: var(--nbv5-cp-tile-border);
  background: var(--nbv5-cp-tile-bg);
}

.nbv5-control .nbv5-mylook-state.is-off{
  border-color: rgba(217,119,6,.24);
  background: #fff8e8;
}

.nbv5-control .nbv5-mylook-state.is-on{
  border-color: rgba(22,163,74,.24);
  background: #ecfdf3;
}

[data-chat-tone="dark"] .nbv5-control .nbv5-mylook-state.is-off{
  background: rgba(217,119,6,.12);
}

[data-chat-tone="dark"] .nbv5-control .nbv5-mylook-state.is-on{
  background: rgba(22,163,74,.12);
}

.nbv5-control .nbv5-mylook-disabled-note{
  padding: 12px 14px;
  border: 1px dashed rgba(148,163,184,.55);
  border-radius: 15px;
  background: rgba(248,250,252,.92);
  color: var(--nbv5-cp-help);
  font-weight: 600;
}

[data-chat-tone="dark"] .nbv5-control .nbv5-mylook-disabled-note{
  background: rgba(255,255,255,.045);
}

.nbv5-control .nbv5-mylook-row,
.nbv5-control .nbv5-mylook-preview,
.nbv5-control .nbv5-mylook-preview-box,
.nbv5-control .nbv5-cp-mini-list{
  border-radius: 15px;
  border-color: var(--nbv5-cp-tile-border);
  background: var(--nbv5-cp-tile-bg);
}

.nbv5-control .nbv5-mylook-fonttrigger,
.nbv5-control .form-control,
.nbv5-control .form-select{
  border-radius: 12px;
}

.nbv5-control .nbv5-mylook-btn,
.nbv5-control .nbv5-cp-btn{
  border-radius: 11px !important;
}

.nbv5-control .btn-danger,
.nbv5-control .btn-outline-danger{
  border-radius: 11px !important;
}

.nbv5-control .nbv5-cp-searchresults{
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 32px rgba(15,23,42,.10);
}

.nbv5-control .nbv5-cp-searchresult{
  padding: 10px 12px;
}

@media (max-width: 767.98px){
  .nbv5-control-head{
    padding: 10px 12px;
  }

  .nbv5-control-titlewrap{
    padding-left: 38px;
  }

  .nbv5-control-titlewrap::before{
    width: 30px;
    height: 30px;
  }

  .nbv5-control-subtitle{
    max-width: 62vw;
  }

  .nbv5-control-body{
    padding: 10px;
  }

  .nbv5-control .nbv5-cp-mode{
    align-items: stretch !important;
    flex-direction: column;
  }

  .nbv5-control .nbv5-cp-mode .btn-group{
    width: 100%;
  }

  .nbv5-control .nbv5-cp-mode .btn{
    flex: 1 1 0;
  }

  .nbv5-control .nbv5-cp-card,
  .nbv5-control .nbv5-cp-card:not(.nbv5-cp-card-format){
    border-radius: 16px;
    padding: 10px;
  }
}


/* Final composer dock sizing guards (build 537). Placed last because older responsive composer rules appear later in this legacy stylesheet. */
.nbv5-composer-tooldock .nbv5-actionbtn,
.nbv5-composer-tooldock .nbv5-emotbtn,
.nbv5-composer-tooldock .nbv5-awaymsgbtn,
.nbv5-composer-tooldock .nbv5-giphybtn,
.nbv5-composer-tooldock .nbv5-stickerbtn,
.nbv5-composer-tooldock .nbv5-mediabtn{
  width: 38px !important;
  min-width: 38px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
}
@media (max-width: 767.98px){
  .nbv5-sendbtn .nbv5-send-label{ display: none !important; }
  .nbv5-composer-tooldock .nbv5-actionbtn,
  .nbv5-composer-tooldock .nbv5-emotbtn,
  .nbv5-composer-tooldock .nbv5-awaymsgbtn,
  .nbv5-composer-tooldock .nbv5-giphybtn,
  .nbv5-composer-tooldock .nbv5-stickerbtn,
  .nbv5-composer-tooldock .nbv5-mediabtn{
    width: 36px !important;
    min-width: 36px !important;
  }
}


/* Final composer color dock tuning (build 538). Cosmetic-only; keeps composer actions and order unchanged. */
.nbv5-skin-v4 .nbv5-composer-form{
  gap: 7px;
}

.nbv5-sendbtn{
  width: 46px !important;
  min-width: 46px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border-radius: 15px !important;
}
.nbv5-sendbtn .nbv5-send-label{
  display: none !important;
}
.nbv5-sendbtn i{
  font-size: 18px !important;
}

.nbv5-composer-tooldock{
  height: 42px;
  padding: 4px 6px;
  gap: 6px;
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(16,24,36,.72), rgba(8,13,22,.78));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.12);
}

.nbv5-composer-tooldock .nbv5-actionbtn,
.nbv5-composer-tooldock .nbv5-emotbtn,
.nbv5-composer-tooldock .nbv5-awaymsgbtn,
.nbv5-composer-tooldock .nbv5-giphybtn,
.nbv5-composer-tooldock .nbv5-stickerbtn,
.nbv5-composer-tooldock .nbv5-mediabtn{
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,.95) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

/* Warm tool/action button */
.nbv5-composer-tooldock .nbv5-actionbtn{
  background: linear-gradient(180deg, rgba(255,170,61,.22), rgba(122,69,15,.24)) !important;
  border-color: rgba(255,184,77,.38) !important;
  color: #ffd089 !important;
}
/* Friendly emoticons */
.nbv5-composer-tooldock .nbv5-emotbtn{
  background: linear-gradient(180deg, rgba(255,216,86,.22), rgba(126,92,10,.22)) !important;
  border-color: rgba(255,220,91,.38) !important;
  color: #ffe58c !important;
}
/* Playful stickers */
.nbv5-composer-tooldock .nbv5-stickerbtn{
  background: linear-gradient(180deg, rgba(188,132,255,.22), rgba(79,43,130,.26)) !important;
  border-color: rgba(206,164,255,.38) !important;
  color: #ddc2ff !important;
}
/* Image/GIF media */
.nbv5-composer-tooldock .nbv5-giphybtn,
.nbv5-composer-tooldock .nbv5-mediabtn{
  background: linear-gradient(180deg, rgba(82,180,255,.22), rgba(24,86,138,.27)) !important;
  border-color: rgba(116,199,255,.38) !important;
  color: #aee1ff !important;
}
/* Away/message bubble */
.nbv5-composer-tooldock .nbv5-awaymsgbtn{
  background: linear-gradient(180deg, rgba(74,219,224,.20), rgba(21,96,114,.27)) !important;
  border-color: rgba(113,226,232,.36) !important;
  color: #a5f3f6 !important;
}

.nbv5-composer-tooldock .nbv5-actionbtn:hover:not(:disabled),
.nbv5-composer-tooldock .nbv5-actionbtn:focus-visible:not(:disabled),
.nbv5-composer-tooldock .nbv5-emotbtn:hover:not(:disabled),
.nbv5-composer-tooldock .nbv5-emotbtn:focus-visible:not(:disabled),
.nbv5-composer-tooldock .nbv5-awaymsgbtn:hover:not(:disabled),
.nbv5-composer-tooldock .nbv5-awaymsgbtn:focus-visible:not(:disabled),
.nbv5-composer-tooldock .nbv5-giphybtn:hover:not(:disabled),
.nbv5-composer-tooldock .nbv5-giphybtn:focus-visible:not(:disabled),
.nbv5-composer-tooldock .nbv5-stickerbtn:hover:not(:disabled),
.nbv5-composer-tooldock .nbv5-stickerbtn:focus-visible:not(:disabled),
.nbv5-composer-tooldock .nbv5-mediabtn:hover:not(:disabled),
.nbv5-composer-tooldock .nbv5-mediabtn:focus-visible:not(:disabled){
  transform: translateY(-1px);
  filter: brightness(1.12) saturate(1.08);
  border-color: rgba(255,255,255,.46) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18);
}

@media (max-width: 767.98px){
  .nbv5-skin-v4 .nbv5-composer-form{
    gap: 5px;
  }
  .nbv5-sendbtn{
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }
  .nbv5-composer-tooldock{
    gap: 4px;
    padding: 4px;
  }
  .nbv5-composer-tooldock .nbv5-actionbtn,
  .nbv5-composer-tooldock .nbv5-emotbtn,
  .nbv5-composer-tooldock .nbv5-awaymsgbtn,
  .nbv5-composer-tooldock .nbv5-giphybtn,
  .nbv5-composer-tooldock .nbv5-stickerbtn,
  .nbv5-composer-tooldock .nbv5-mediabtn{
    width: 32px !important;
    min-width: 32px !important;
    height: 34px !important;
    min-height: 34px !important;
  }
}

/* Composer input + button comfort polish (build 539).
   Cosmetic-only and theme-aware: keeps actions/order/behavior unchanged. */
.nbv5-skin-v4 .nbv5-center .nbv5-composer.nbv5-composer-center{
  padding-top: 9px;
}
.nbv5-skin-v4 .nbv5-composer-form{
  align-items: center;
  gap: 8px;
}
.nbv5-skin-v4 .nbv5-center .nbv5-composer-input-wrap{
  border-radius: 15px;
}
.nbv5-skin-v4 .nbv5-center .nbv5-composer-input{
  height: 44px;
  min-height: 44px;
  padding: 0 15px;
  border-radius: 15px !important;
  border-width: 1px !important;
  background: color-mix(in srgb, var(--nbv5-input-bg) 94%, var(--nbv5-pane-bg) 6%) !important;
  border-color: color-mix(in srgb, var(--nbv5-input-border) 78%, var(--nbv5-pane-text) 10%) !important;
  color: var(--nbv5-input-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 6px 16px rgba(0,0,0,.07);
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease, filter .14s ease;
}
.nbv5-skin-v4 .nbv5-center .nbv5-composer-input:hover{
  border-color: color-mix(in srgb, var(--nbv5-input-border) 62%, var(--nbv5-link, #4aa3ff) 38%) !important;
}
.nbv5-skin-v4 .nbv5-center .nbv5-composer-input:focus{
  background: var(--nbv5-input-bg) !important;
  border-color: color-mix(in srgb, var(--nbv5-link, #4aa3ff) 68%, var(--nbv5-input-border) 32%) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nbv5-link, #4aa3ff) 22%, transparent), 0 8px 20px rgba(0,0,0,.11), inset 0 1px 0 rgba(255,255,255,.13);
}
.nbv5-skin-v4 .nbv5-center .nbv5-composer-input::placeholder{
  color: var(--nbv5-input-ph) !important;
  opacity: .92;
}
.nbv5-skin-v4 .nbv5-composer-mirror{
  padding: 0 15px;
  line-height: 44px;
  border-radius: 15px;
}
.nbv5-skin-v4 .nbv5-composer-input-wrap.has-mylook-swatch .nbv5-composer-input{
  padding-right: 2.6rem;
}
.nbv5-sendbtn{
  width: 46px !important;
  min-width: 46px !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.17), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.nbv5-composer-tooldock{
  height: 44px;
  padding: 4px 6px;
  gap: 6px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
  border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 7px 16px rgba(0,0,0,.10);
}
.nbv5-composer-tooldock .nbv5-actionbtn,
.nbv5-composer-tooldock .nbv5-emotbtn,
.nbv5-composer-tooldock .nbv5-awaymsgbtn,
.nbv5-composer-tooldock .nbv5-giphybtn,
.nbv5-composer-tooldock .nbv5-stickerbtn,
.nbv5-composer-tooldock .nbv5-mediabtn{
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 13px !important;
}
.nbv5-composer-tooldock .nbv5-actionbtn:hover:not(:disabled),
.nbv5-composer-tooldock .nbv5-actionbtn:focus-visible:not(:disabled),
.nbv5-composer-tooldock .nbv5-emotbtn:hover:not(:disabled),
.nbv5-composer-tooldock .nbv5-emotbtn:focus-visible:not(:disabled),
.nbv5-composer-tooldock .nbv5-awaymsgbtn:hover:not(:disabled),
.nbv5-composer-tooldock .nbv5-awaymsgbtn:focus-visible:not(:disabled),
.nbv5-composer-tooldock .nbv5-giphybtn:hover:not(:disabled),
.nbv5-composer-tooldock .nbv5-giphybtn:focus-visible:not(:disabled),
.nbv5-composer-tooldock .nbv5-stickerbtn:hover:not(:disabled),
.nbv5-composer-tooldock .nbv5-stickerbtn:focus-visible:not(:disabled),
.nbv5-composer-tooldock .nbv5-mediabtn:hover:not(:disabled),
.nbv5-composer-tooldock .nbv5-mediabtn:focus-visible:not(:disabled){
  transform: translateY(-1px);
  filter: brightness(1.14) saturate(1.08);
}
@media (max-width: 767.98px){
  .nbv5-skin-v4 .nbv5-composer-form{
    gap: 5px;
  }
  .nbv5-skin-v4 .nbv5-center .nbv5-composer-input{
    height: 42px;
    min-height: 42px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 13px !important;
  }
  .nbv5-skin-v4 .nbv5-composer-mirror{
    padding-left: 12px;
    padding-right: 12px;
    line-height: 42px;
    border-radius: 13px;
  }
  .nbv5-sendbtn{
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 13px !important;
  }
  .nbv5-composer-tooldock{
    height: 42px;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
  }
  .nbv5-composer-tooldock .nbv5-actionbtn,
  .nbv5-composer-tooldock .nbv5-emotbtn,
  .nbv5-composer-tooldock .nbv5-awaymsgbtn,
  .nbv5-composer-tooldock .nbv5-giphybtn,
  .nbv5-composer-tooldock .nbv5-stickerbtn,
  .nbv5-composer-tooldock .nbv5-mediabtn{
    width: 32px !important;
    min-width: 32px !important;
    height: 34px !important;
    min-height: 34px !important;
  }
}



/* Shared pane shell + nicklist softness (build 540).
   Cosmetic-only: keeps pane/theme behavior and drawer behavior intact. */
.nbv5-skin-v4 .nbv5-pane.nbv5-center,
.nbv5-skin-v4 .nbv5-right {
  border-radius: 10px !important;
  border-color: color-mix(in srgb, var(--nbv5-pane-border, var(--v4-chat-border)) 86%, rgba(255,255,255,.18)) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.08);
  overflow: hidden;
}

.nbv5-skin-v4 .nbv5-pane.nbv5-center {
  background: var(--nbv5-pane-bg, var(--v4-chat-bg)) !important;
}

.nbv5-skin-v4 .nbv5-chat,
.nbv5-skin-v4 .nbv5-pane-body {
  background: var(--nbv5-pane-bg, var(--v4-chat-bg)) !important;
}

.nbv5-skin-v4 .nbv5-chat {
  padding: 12px 14px;
}

.nbv5-skin-v4 .nbv5-line {
  border-radius: 8px;
}

.nbv5-skin-v4 .nbv5-date-sep {
  margin-top: 18px;
  margin-bottom: 14px;
}

.nbv5-skin-v4 .nbv5-date-sep-pill {
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.20);
}

.nbv5-skin-v4 .nbv5-right {
  background: var(--nbv5-pane-bg, var(--v4-pane-bg)) !important;
}

.nbv5-skin-v4 .nbv5-right .nbv5-pane-header {
  padding-top: 9px;
  padding-bottom: 9px;
}

.nbv5-skin-v4 .nbv5-right-selfctx,
.nbv5-skin-v4 .nbv5-person {
  border-radius: 9px;
  transition: background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.nbv5-skin-v4 .nbv5-pane-body .nbv5-person:hover {
  transform: translateX(1px);
}

.nbv5-skin-v4 .nbv5-nick-role,
.nbv5-skin-v4 .nbv5-nick-role-self {
  border-radius: 999px;
}

@media (min-width: 768px) {
  .nbv5-skin-v4 .nbv5-right {
    margin-left: 10px !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
  }
}

@media (max-width: 767.98px) {
  .nbv5-skin-v4 .nbv5-pane.nbv5-center,
  .nbv5-skin-v4 .nbv5-right {
    border-radius: 0 !important;
    box-shadow: none;
  }
}

/* Shared pane outline cleanup (build 541).
   Keeps the rounded pane shape from build 540, but removes the hard outlines
   around the composer/input area and the nicklist top/right edge. */
.nbv5-skin-v4 .nbv5-pane.nbv5-center,
.nbv5-skin-v4 .nbv5-right {
  border-color: transparent !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.05);
}

.nbv5-skin-v4 .nbv5-pane.nbv5-center {
  border-width: 0 !important;
}

.nbv5-skin-v4 .nbv5-right {
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: rgba(255,255,255,.08) !important;
}

.nbv5-skin-v4 .nbv5-center .nbv5-composer.nbv5-composer-center {
  border-top: 0 !important;
  box-shadow: none !important;
}

.nbv5-skin-v4 .nbv5-composer-inner,
.nbv5-skin-v4 .nbv5-composer-form {
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 767.98px) {
  .nbv5-skin-v4 .nbv5-right {
    border-left-color: transparent !important;
  }
}


/* Nicklist edge cleanup (build 542).
   Cosmetic-only: removes the remaining top/right hairline around the people pane
   while keeping the rounded pane shape and desktop/mobile layout behavior. */
.nbv5-skin-v4 .nbv5-right {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.nbv5-skin-v4 .nbv5-right .nbv5-pane-header {
  border-top: 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

@media (min-width: 768px) {
  .nbv5-skin-v4:not(.nbv5-is-mobile) .nbv5-right:not(.nbv5-right-closed) {
    border: 0 !important;
    box-shadow: none !important;
  }
}


/* Desktop content row balance (build 543).
   Cosmetic-only layout tuning: when the center composer is visible, the docked
   People pane stops at the bottom of the message/content area instead of
   extending beside the composer. Mobile drawer behavior stays unchanged. */
@media (min-width: 768px) {
  .nbv5-skin-v4:not(.nbv5-is-mobile) .nbv5-content-grid {
    --nbv5-composer-reserved-height: 56px;
  }

  .nbv5-skin-v4:not(.nbv5-is-mobile) .nbv5-content-grid.nbv5-content-grid-has-composer > .nbv5-right:not(.nbv5-right-closed) {
    height: calc(100% - var(--nbv5-composer-reserved-height));
    align-self: flex-start;
  }

  .nbv5-skin-v4:not(.nbv5-is-mobile) .nbv5-content-grid.nbv5-content-grid-no-composer > .nbv5-right:not(.nbv5-right-closed) {
    height: 100%;
  }
}

/* Desktop composer span layout (build 544).
   Cosmetic/layout-only: on desktop the composer becomes a full-width bottom
   row below both the chat pane and docked People pane. Mobile drawer behavior
   stays unchanged, and Control/Help still hide the composer. */
@media (min-width: 768px) {
  .nbv5-skin-v4:not(.nbv5-is-mobile) .nbv5-content-grid.nbv5-content-grid-has-composer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
  }

  .nbv5-skin-v4:not(.nbv5-is-mobile) .nbv5-content-grid.nbv5-content-grid-has-composer > .nbv5-center {
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    min-height: 0;
  }

  .nbv5-skin-v4:not(.nbv5-is-mobile) .nbv5-content-grid.nbv5-content-grid-has-composer > .nbv5-right:not(.nbv5-right-closed) {
    grid-column: 2;
    grid-row: 1;
    height: 100% !important;
    align-self: stretch;
  }

  .nbv5-skin-v4:not(.nbv5-is-mobile) .nbv5-content-grid.nbv5-content-grid-has-composer > .nbv5-composer.nbv5-composer-center {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    padding: 9px 0 0 0;
    background: transparent;
    border-top: 0 !important;
    box-shadow: none !important;
  }
}

/* The composer now lives as a sibling of the center pane, so keep the same
   theme-aware input comfort polish without requiring a .nbv5-center ancestor. */
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer.nbv5-composer-center {
  background: transparent;
  border-top: 0 !important;
  box-shadow: none !important;
}
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-input-wrap {
  border-radius: 15px;
}
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-input {
  height: 44px;
  min-height: 44px;
  padding: 0 15px;
  border-radius: 15px !important;
  border-width: 1px !important;
  background: color-mix(in srgb, var(--nbv5-input-bg) 94%, var(--nbv5-pane-bg) 6%) !important;
  border-color: color-mix(in srgb, var(--nbv5-input-border) 78%, var(--nbv5-pane-text) 10%) !important;
  color: var(--nbv5-input-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 6px 16px rgba(0,0,0,.07);
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease, filter .14s ease;
}
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-input:hover {
  border-color: color-mix(in srgb, var(--nbv5-input-border) 62%, var(--nbv5-link, #4aa3ff) 38%) !important;
}
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-input:focus {
  background: var(--nbv5-input-bg) !important;
  border-color: color-mix(in srgb, var(--nbv5-link, #4aa3ff) 68%, var(--nbv5-input-border) 32%) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nbv5-link, #4aa3ff) 22%, transparent), 0 8px 20px rgba(0,0,0,.11), inset 0 1px 0 rgba(255,255,255,.13);
}
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-input::placeholder {
  color: var(--nbv5-input-ph) !important;
  opacity: .92;
}
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-mirror {
  padding: 0 15px;
  line-height: 44px;
  border-radius: 15px;
}
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-input-wrap.has-mylook-swatch .nbv5-composer-input {
  padding-right: 2.6rem;
}

@media (max-width: 767.98px) {
  .nbv5-skin-v4 .nbv5-content-grid.nbv5-content-grid-has-composer {
    flex-direction: column;
  }

  .nbv5-skin-v4 .nbv5-content-grid.nbv5-content-grid-has-composer > .nbv5-center {
    flex: 1 1 auto;
    min-height: 0;
  }

  .nbv5-skin-v4 .nbv5-content-grid.nbv5-content-grid-has-composer > .nbv5-composer.nbv5-composer-center {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    padding: 9px 0 0 0;
  }
}


/* Unified full-width composer bar (build 545).
   Cosmetic/layout-only: keeps the desktop full-width composer from build 544,
   but makes the input, send button, and color action dock read as one connected
   bottom bar instead of separate controls under different columns. */
@media (min-width: 768px) {
  .nbv5-skin-v4:not(.nbv5-is-mobile) .nbv5-content-grid.nbv5-content-grid-has-composer > .nbv5-composer.nbv5-composer-center {
    padding: 9px 0 0 0;
  }

  .nbv5-skin-v4:not(.nbv5-is-mobile) .nbv5-content-grid.nbv5-content-grid-has-composer > .nbv5-composer .nbv5-composer-form {
    width: 100%;
    max-width: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .nbv5-skin-v4:not(.nbv5-is-mobile) .nbv5-content-grid.nbv5-content-grid-has-composer > .nbv5-composer .nbv5-composer-input-wrap {
    flex: 1 1 auto;
    min-width: 0;
  }

  .nbv5-skin-v4:not(.nbv5-is-mobile) .nbv5-content-grid.nbv5-content-grid-has-composer > .nbv5-composer .nbv5-sendbtn,
  .nbv5-skin-v4:not(.nbv5-is-mobile) .nbv5-content-grid.nbv5-content-grid-has-composer > .nbv5-composer .nbv5-composer-tooldock {
    flex: 0 0 auto;
  }

  .nbv5-skin-v4:not(.nbv5-is-mobile) .nbv5-content-grid.nbv5-content-grid-has-composer > .nbv5-composer .nbv5-composer-tooldock {
    margin-left: 0;
  }
}

/* Soft one-piece tray behind the composer controls.
   The tray uses transparent/theme-safe surfaces so pane themes keep their own look. */
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-form::before {
  content: "";
  position: absolute;
  inset: -5px -6px;
  border-radius: 19px;
  background: linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 8px 18px rgba(0,0,0,.075);
  pointer-events: none;
  z-index: 0;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-form > * {
  position: relative;
  z-index: 1;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-input {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 5px 13px rgba(0,0,0,.055);
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-sendbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 5px 13px rgba(0,0,0,.105) !important;
}

@media (max-width: 767.98px) {
  .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-form::before {
    inset: -4px -4px;
    border-radius: 17px;
  }
}


/* Unified composer tray cleanup (build 546).
   Cosmetic-only: keeps the desktop full-width composer and shortened People pane,
   removes the visible mini-dock around media/chat tools, and makes the whole
   composer row read as one softer theme-aware tray. */
@media (min-width: 768px) {
  .nbv5-skin-v4:not(.nbv5-is-mobile) .nbv5-content-grid.nbv5-content-grid-has-composer > .nbv5-composer.nbv5-composer-center {
    padding-top: 8px;
  }

  .nbv5-skin-v4:not(.nbv5-is-mobile) .nbv5-content-grid.nbv5-content-grid-has-composer > .nbv5-composer .nbv5-composer-form {
    gap: 6px;
    padding: 6px 7px;
    border-radius: 19px;
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--nbv5-pane-bg) 76%, rgba(255,255,255,.24) 24%),
        color-mix(in srgb, var(--nbv5-pane-bg) 86%, rgba(0,0,0,.10) 14%)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.075), 0 9px 20px rgba(0,0,0,.085) !important;
  }

  .nbv5-skin-v4:not(.nbv5-is-mobile) .nbv5-content-grid.nbv5-content-grid-has-composer > .nbv5-composer .nbv5-composer-input-wrap {
    flex: 1 1 auto;
    min-width: 0;
  }

  .nbv5-skin-v4:not(.nbv5-is-mobile) .nbv5-content-grid.nbv5-content-grid-has-composer > .nbv5-composer .nbv5-sendbtn {
    margin-left: 1px;
  }
}

/* The tray is now the grouping surface; do not draw a second capsule around the tools. */
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-form::before {
  display: none !important;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock {
  height: 44px;
  padding: 0 !important;
  gap: 6px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-sendbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 4px 10px rgba(0,0,0,.115) !important;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-input {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 3px 9px rgba(0,0,0,.050);
}

@media (max-width: 767.98px) {
  .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-form {
    padding: 4px;
    border-radius: 17px;
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--nbv5-pane-bg) 78%, rgba(255,255,255,.18) 22%),
        color-mix(in srgb, var(--nbv5-pane-bg) 88%, rgba(0,0,0,.08) 12%)) !important;
  }

  .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock {
    height: 42px;
    gap: 4px;
  }
}


/* Composer tray rollback cleanup (build 547).
   Cosmetic-only: removes the visible full-row container/tray added in build 546
   while keeping the full-width composer layout, shortened People pane, rounded
   input, colored tool buttons, and all composer behavior unchanged. */
@media (min-width: 768px) {
  .nbv5-skin-v4:not(.nbv5-is-mobile) .nbv5-content-grid.nbv5-content-grid-has-composer > .nbv5-composer.nbv5-composer-center {
    padding-top: 8px;
  }

  .nbv5-skin-v4:not(.nbv5-is-mobile) .nbv5-content-grid.nbv5-content-grid-has-composer > .nbv5-composer .nbv5-composer-form {
    gap: 7px;
    padding: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
  }

  .nbv5-skin-v4:not(.nbv5-is-mobile) .nbv5-content-grid.nbv5-content-grid-has-composer > .nbv5-composer .nbv5-sendbtn {
    margin-left: 1px;
  }
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-form {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-form::before {
  display: none !important;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock {
  height: 44px;
  padding: 0 !important;
  gap: 6px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* With the extra tray removed, let each button carry its own color and click target. */
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 13px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 5px 12px rgba(0,0,0,.14) !important;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn {
  background: linear-gradient(180deg, rgba(255,170,61,.28), rgba(122,69,15,.30)) !important;
  border-color: rgba(255,184,77,.48) !important;
  color: #ffd089 !important;
}
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn {
  background: linear-gradient(180deg, rgba(255,216,86,.30), rgba(126,92,10,.28)) !important;
  border-color: rgba(255,220,91,.50) !important;
  color: #ffe58c !important;
}
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn {
  background: linear-gradient(180deg, rgba(188,132,255,.30), rgba(79,43,130,.32)) !important;
  border-color: rgba(206,164,255,.50) !important;
  color: #ddc2ff !important;
}
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn {
  background: linear-gradient(180deg, rgba(82,180,255,.30), rgba(24,86,138,.33)) !important;
  border-color: rgba(116,199,255,.50) !important;
  color: #aee1ff !important;
}
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn {
  background: linear-gradient(180deg, rgba(74,219,224,.28), rgba(21,96,114,.33)) !important;
  border-color: rgba(113,226,232,.48) !important;
  color: #a5f3f6 !important;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-sendbtn {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 7px 16px rgba(0,0,0,.16) !important;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-input {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 5px 13px rgba(0,0,0,.065);
}

@media (max-width: 767.98px) {
  .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-form {
    padding: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
  }

  .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock {
    height: 42px;
    gap: 4px;
  }
}

/* Friendlier composer icon language (build 549).
   Cosmetic-only: keeps readable labels/icons while avoiding garbled or confusing glyphs
   while keeping button actions, order, colors, and theme-aware surfaces intact. */
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn {
  font-weight: 800;
  line-height: 1;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-btnmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15em;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: none;
  transform: translateY(-.5px);
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-btnmark-action,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-btnmark-text {
  font-size: .72rem;
  letter-spacing: -.035em;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn i,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn i {
  font-size: .94rem;
  line-height: 1;
  transform: translateY(-.5px);
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-btnmark-gif {
  font-size: .64rem;
  letter-spacing: .035em;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-btnmark-media {
  font-size: .86rem;
  letter-spacing: -.08em;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn i {
  font-size: .94rem;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn:hover,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn:hover,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn:hover,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn:hover,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn:hover,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn:hover {
  transform: translateY(-1px);
  filter: saturate(1.08) brightness(1.06);
}



/* People pane polish (build 550).
   Cosmetic-only: makes the docked nicklist feel more like a friendly people card
   while preserving pane themes, nick roles, context menus, and mobile drawer behavior. */
.nbv5-skin-v4 .nbv5-right {
  background: var(--nbv5-pane-bg, var(--v4-pane-bg)) !important;
  border-radius: 10px !important;
  overflow: hidden;
}

.nbv5-skin-v4 .nbv5-right .nbv5-pane-header {
  padding: 10px 10px 9px 11px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.015)),
    color-mix(in srgb, var(--v4-panel-bg, #143452) 94%, #000 6%) !important;
  border: 0 !important;
}

.nbv5-people-titleline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  margin-bottom: 6px;
}

.nbv5-people-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: .86rem;
  line-height: 1.1;
  color: rgba(255,255,255,.94);
  letter-spacing: .01em;
}

.nbv5-people-title i {
  font-size: .82rem;
  color: #ffd266;
  filter: drop-shadow(0 1px 4px rgba(255,197,67,.28));
}

.nbv5-people-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.nbv5-skin-v4 .nbv5-right-selfctx {
  min-height: 30px;
  padding: 5px 7px !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,.86) !important;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.085);
}

.nbv5-skin-v4 .nbv5-right-selfctx .text-muted,
.nbv5-skin-v4 .nbv5-right-selfctx .nbv5-right-selfnick {
  color: inherit !important;
}

.nbv5-skin-v4 .nbv5-right-awaybtn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 10px !important;
  background: rgba(255,255,255,.11) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

.nbv5-skin-v4 .nbv5-right .nbv5-pane-body {
  padding: 9px 8px !important;
}

.nbv5-skin-v4 .nbv5-right .nbv5-pane-body > .text-muted.small {
  margin: 4px;
  padding: 12px 10px;
  border-radius: 10px;
  text-align: center;
  background: color-mix(in srgb, var(--nbv5-pane-bg) 88%, var(--nbv5-pane-text) 12%);
  color: var(--nbv5-muted) !important;
}

.nbv5-skin-v4 .nbv5-right .nbv5-person {
  min-height: 32px;
  padding: 6px 8px !important;
  gap: 8px;
  border-radius: 10px !important;
  margin-bottom: 2px;
  color: var(--nbv5-pane-text) !important;
  background: transparent;
}

.nbv5-skin-v4 .nbv5-right .nbv5-person:hover {
  background: color-mix(in srgb, var(--nbv5-link, #4aa3ff) 13%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nbv5-link, #4aa3ff) 20%, transparent);
  transform: translateX(1px);
}

.nbv5-skin-v4 .nbv5-right .nbv5-person.is-selected,
.nbv5-skin-v4 .nbv5-right .nbv5-person.is-ctx {
  background: color-mix(in srgb, var(--nbv5-link, #4aa3ff) 18%, transparent) !important;
  box-shadow: inset 3px 0 0 var(--nbv5-link, #4aa3ff), inset 0 0 0 1px color-mix(in srgb, var(--nbv5-link, #4aa3ff) 24%, transparent) !important;
}

.nbv5-skin-v4 .nbv5-right .nbv5-person-ico,
.nbv5-skin-v4 .nbv5-right-selfctx .nbv5-person-ico {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.nbv5-skin-v4 .nbv5-right .nbv5-nick-name {
  font-weight: 600;
}

.nbv5-skin-v4 .nbv5-right .nbv5-nick-role,
.nbv5-skin-v4 .nbv5-right .nbv5-nick-role-self {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-left: 5px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 750;
  line-height: 1.05;
  vertical-align: middle;
  color: color-mix(in srgb, var(--nbv5-pane-text) 76%, var(--nbv5-muted) 24%) !important;
  background: color-mix(in srgb, var(--nbv5-pane-bg) 72%, var(--nbv5-pane-text) 10%);
  border: 1px solid color-mix(in srgb, var(--nbv5-pane-text) 14%, transparent);
}

.nbv5-skin-v4 .nbv5-right .nbv5-nick-role-self {
  color: rgba(255,255,255,.82) !important;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.13);
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-btnmark-action,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-btnmark-text {
  font-size: .96rem;
  letter-spacing: 0;
}

@media (max-width: 767.98px) {
  .nbv5-skin-v4 .nbv5-right {
    border-radius: 0 !important;
  }

  .nbv5-skin-v4 .nbv5-right .nbv5-pane-header {
    padding-top: 12px !important;
  }
}

/* People pane refinement + away composer icon (build 551).
   Cosmetic-only: tones down the build 550 People pane polish so it reads friendlier
   without feeling badge-heavy, and keeps the docked/mobile People behavior intact. */
.nbv5-skin-v4 .nbv5-right .nbv5-pane-header {
  padding: 9px 9px 8px 10px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.040), rgba(255,255,255,.010)),
    color-mix(in srgb, var(--v4-panel-bg, #143452) 97%, #000 3%) !important;
}

.nbv5-people-titleline {
  margin-bottom: 5px;
}

.nbv5-people-title {
  gap: 6px;
  font-size: .84rem;
  font-weight: 750;
  color: rgba(255,255,255,.90);
}

.nbv5-people-title i {
  font-size: .80rem;
  color: rgba(255,210,102,.92);
  filter: none;
}

.nbv5-people-count {
  padding: 2px 6px;
  font-size: .64rem;
  font-weight: 750;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.085);
  box-shadow: none;
}

.nbv5-skin-v4 .nbv5-right-selfctx {
  min-height: 28px;
  padding: 4px 6px !important;
  border-radius: 9px !important;
  color: rgba(255,255,255,.82) !important;
  background: rgba(255,255,255,.040);
  border-color: rgba(255,255,255,.060);
}

.nbv5-skin-v4 .nbv5-right-selfctx:hover,
.nbv5-skin-v4 .nbv5-right-selfctx.is-ctx {
  background: rgba(255,255,255,.070);
  border-color: rgba(255,255,255,.095);
}

.nbv5-skin-v4 .nbv5-right-awaybtn {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 9px !important;
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.105) !important;
  box-shadow: none;
}

.nbv5-skin-v4 .nbv5-right-awaybtn:hover:not(:disabled) {
  background: rgba(255,255,255,.115) !important;
  border-color: rgba(255,255,255,.145) !important;
}

.nbv5-skin-v4 .nbv5-right .nbv5-pane-body {
  padding: 10px 8px !important;
}

.nbv5-skin-v4 .nbv5-right .nbv5-person {
  min-height: 34px;
  padding: 7px 8px !important;
  gap: 8px;
  border-radius: 9px !important;
  margin-bottom: 1px;
}

.nbv5-skin-v4 .nbv5-right .nbv5-person:hover {
  background: color-mix(in srgb, var(--nbv5-link, #4aa3ff) 10%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nbv5-link, #4aa3ff) 14%, transparent);
  transform: none;
}

.nbv5-skin-v4 .nbv5-right .nbv5-person.is-selected,
.nbv5-skin-v4 .nbv5-right .nbv5-person.is-ctx {
  background: color-mix(in srgb, var(--nbv5-link, #4aa3ff) 14%, transparent) !important;
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--nbv5-link, #4aa3ff) 82%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--nbv5-link, #4aa3ff) 18%, transparent) !important;
}

.nbv5-skin-v4 .nbv5-right .nbv5-nick-name {
  font-weight: 650;
}

.nbv5-skin-v4 .nbv5-right .nbv5-nick-role,
.nbv5-skin-v4 .nbv5-right .nbv5-nick-role-self {
  margin-left: 5px;
  padding: 1px 5px;
  font-size: .62rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--nbv5-pane-text) 70%, var(--nbv5-muted) 30%) !important;
  background: color-mix(in srgb, var(--nbv5-pane-bg) 84%, var(--nbv5-pane-text) 8%);
  border-color: color-mix(in srgb, var(--nbv5-pane-text) 9%, transparent);
  box-shadow: none;
}

.nbv5-skin-v4 .nbv5-right .nbv5-nick-role-self {
  color: rgba(255,255,255,.74) !important;
  background: rgba(255,255,255,.070);
  border-color: rgba(255,255,255,.090);
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-awaymsgbtn i {
  font-size: .9rem;
}

/* People pane compact header/list refinement (build 552).
   Cosmetic-only: combines People count into the title, lets the self row fill the
   header underneath, and makes nick rows calmer/denser without changing behavior. */
.nbv5-skin-v4 .nbv5-right .nbv5-pane-header {
  padding: 8px 9px 7px 10px !important;
}

.nbv5-skin-v4 .nbv5-right-headrow {
  align-items: center !important;
  margin-bottom: 6px;
}

.nbv5-people-titleline {
  margin-bottom: 0;
}

.nbv5-people-title {
  gap: 6px;
  font-size: .86rem;
  font-weight: 700;
  white-space: nowrap;
}

.nbv5-people-count {
  display: none !important;
}

.nbv5-skin-v4 .nbv5-right-selfctx {
  width: 100%;
  min-height: 26px;
  padding: 4px 7px !important;
}

.nbv5-right-selfnick {
  min-width: 0;
  flex: 1 1 auto;
}

.nbv5-right-selflabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nbv5-skin-v4 .nbv5-right .nbv5-pane-body {
  padding: 7px 8px !important;
}

.nbv5-skin-v4 .nbv5-right .nbv5-person {
  min-height: 25px;
  padding: 3px 7px !important;
  gap: 7px;
  border-radius: 7px !important;
  margin-bottom: 0;
}

.nbv5-skin-v4 .nbv5-right .nbv5-nick-name {
  font-weight: 400;
}

.nbv5-skin-v4 .nbv5-right .nbv5-nick-role,
.nbv5-skin-v4 .nbv5-right .nbv5-nick-role-self {
  font-weight: 600;
}


/* People pane self-row theme text fix (build 555).
   Uses the existing pane tone variables instead of fixed light/dark colors. */
.nbv5-skin-v4 .nbv5-right-selfctx {
  color: var(--nbv5-pane-text-bright, var(--nbv5-pane-text)) !important;
  background: color-mix(in srgb, var(--nbv5-pane-bg) 88%, var(--nbv5-pane-text-bright, var(--nbv5-pane-text)) 6%) !important;
  border-color: color-mix(in srgb, var(--nbv5-pane-text-bright, var(--nbv5-pane-text)) 11%, transparent) !important;
}

.nbv5-skin-v4 .nbv5-right-selfctx:hover,
.nbv5-skin-v4 .nbv5-right-selfctx.is-ctx {
  background: color-mix(in srgb, var(--nbv5-pane-bg) 82%, var(--nbv5-link, #4aa3ff) 10%) !important;
  border-color: color-mix(in srgb, var(--nbv5-link, #4aa3ff) 18%, var(--nbv5-pane-text-bright, var(--nbv5-pane-text)) 8%) !important;
}

.nbv5-skin-v4 .nbv5-right-selfctx .nbv5-right-selfnick,
.nbv5-skin-v4 .nbv5-right-selfctx .nbv5-right-selflabel {
  color: inherit !important;
}

.nbv5-skin-v4 .nbv5-right .nbv5-nick-role-self {
  color: color-mix(in srgb, var(--nbv5-pane-text-bright, var(--nbv5-pane-text)) 70%, var(--nbv5-muted-bright, var(--nbv5-muted)) 30%) !important;
  background: color-mix(in srgb, var(--nbv5-pane-bg) 84%, var(--nbv5-pane-text-bright, var(--nbv5-pane-text)) 8%) !important;
  border-color: color-mix(in srgb, var(--nbv5-pane-text-bright, var(--nbv5-pane-text)) 9%, transparent) !important;
}



/* People pane self-row + composer button surface tune (build 556).
   Cosmetic-only: removes the self-row pill/container so the nickname/status inherit
   the same pane tone as the People header, and makes composer tool buttons use a
   neutral dark surface with color carried by the icons/marks for better light-theme contrast. */
.nbv5-skin-v4 .nbv5-right .nbv5-pane-header {
  color: var(--nbv5-pane-text-bright, var(--nbv5-pane-text)) !important;
}

.nbv5-skin-v4 .nbv5-right-selfctx {
  width: 100%;
  min-height: 0;
  padding: 1px 2px 4px 2px !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.nbv5-skin-v4 .nbv5-right-selfctx:hover,
.nbv5-skin-v4 .nbv5-right-selfctx.is-ctx {
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.nbv5-skin-v4 .nbv5-right-selfctx .nbv5-right-selfnick,
.nbv5-skin-v4 .nbv5-right-selfctx .nbv5-right-selflabel {
  color: inherit !important;
}

.nbv5-skin-v4 .nbv5-right .nbv5-nick-role-self {
  color: inherit !important;
  opacity: .76;
  background: transparent !important;
  border-color: color-mix(in srgb, currentColor 18%, transparent) !important;
  box-shadow: none !important;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn {
  background: linear-gradient(180deg, rgba(31,43,57,.96), rgba(17,25,36,.98)) !important;
  border-color: rgba(8,14,22,.74) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 4px 10px rgba(0,0,0,.18) !important;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn { color: #ffbd66 !important; }
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn { color: #ffe16b !important; }
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn { color: #caa5ff !important; }
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn { color: #8fd4ff !important; }
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn { color: #7ef3f0 !important; }

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn:focus-visible:not(:disabled) {
  background: linear-gradient(180deg, rgba(43,57,74,.98), rgba(22,32,45,1)) !important;
  border-color: rgba(255,255,255,.22) !important;
}


/* Chat/nicklist font + role/button tone tune (build 557).
   Cosmetic-only: uses a Unicode-friendly Noto/system fallback stack for default
   chat and nicklist text while letting user message custom fonts win via inline
   message styles. Role suffixes are plain muted text, not pills. */
:root {
  --nbv5-chat-default-font: "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Noto Sans Symbols 2", "Segoe UI Symbol", "Segoe UI", Arial, sans-serif;
}

.nbv5-skin-v4 .nbv5-chat,
.nbv5-skin-v4 .nbv5-chat .nbv5-line,
.nbv5-skin-v4 .nbv5-chat .nbv5-chat-nick,
.nbv5-skin-v4 .nbv5-chat .nbv5-chat-nick-own,
.nbv5-skin-v4 .nbv5-chat .nbv5-msg-text,
.nbv5-skin-v4 .nbv5-chat .nbv5-sysline-text,
.nbv5-skin-v4 .nbv5-right,
.nbv5-skin-v4 .nbv5-right .nbv5-pane-header,
.nbv5-skin-v4 .nbv5-right .nbv5-person,
.nbv5-skin-v4 .nbv5-right .nbv5-nick-text,
.nbv5-skin-v4 .nbv5-composer-input {
  font-family: var(--nbv5-chat-default-font);
}

.nbv5-skin-v4 .nbv5-chat .nbv5-line-raw,
.nbv5-skin-v4 .nbv5-chat .nbv5-line-raw .nbv5-sysline-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.nbv5-skin-v4 .nbv5-right-selfctx,
.nbv5-skin-v4 .nbv5-right-selfctx:hover,
.nbv5-skin-v4 .nbv5-right-selfctx.is-ctx {
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.nbv5-skin-v4 .nbv5-right .nbv5-nick-role,
.nbv5-skin-v4 .nbv5-right .nbv5-nick-role-self {
  display: inline !important;
  margin-left: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--nbv5-muted-bright, var(--nbv5-muted)) !important;
  opacity: .86;
  font-size: .70em;
  font-weight: 500 !important;
  line-height: 1;
  vertical-align: baseline;
}

.nbv5-skin-v4 .nbv5-right-selfnick .nbv5-nick-role-self {
  color: currentColor !important;
  opacity: .72;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn {
  background: linear-gradient(180deg, rgba(36,48,64,.98), rgba(19,29,42,1)) !important;
  border-color: rgba(5,10,18,.78) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 8px rgba(0,0,0,.20) !important;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn:focus-visible:not(:disabled) {
  background: linear-gradient(180deg, rgba(51,65,84,1), rgba(26,39,55,1)) !important;
  border-color: rgba(255,255,255,.24) !important;
}


/* People role tone + flat composer tools (build 558).
   Cosmetic-only: keeps role/status suffixes on the existing pane text tone with
   lower emphasis, and makes composer tool buttons flatter with darker neutral
   surfaces while keeping color on the icons/marks. */
.nbv5-skin-v4 .nbv5-right .nbv5-nick-role,
.nbv5-skin-v4 .nbv5-right .nbv5-nick-role-self {
  color: currentColor !important;
  opacity: .58 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 500 !important;
}

.nbv5-skin-v4 .nbv5-right-selfnick .nbv5-nick-role-self {
  opacity: .64 !important;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-sendbtn {
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-sendbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-sendbtn:focus-visible:not(:disabled) {
  box-shadow: none !important;
  transform: none !important;
  filter: brightness(1.04) !important;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn {
  background: #172231 !important;
  border-color: #0b1420 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn:focus-visible:not(:disabled) {
  background: #203044 !important;
  border-color: #0d1a2a !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}


/* Composer secondary button surface tone (build 559).
   Cosmetic-only: makes the secondary composer tool buttons flatter and quieter by
   using pane-aware neutral gray surfaces while keeping color on the icons/marks. */
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn {
  background: color-mix(in srgb, var(--nbv5-pane-bg, #f5f7fa) 88%, var(--nbv5-pane-text, #111827) 12%) !important;
  border-color: color-mix(in srgb, var(--nbv5-pane-text, #111827) 16%, transparent) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn { color: #d97706 !important; }
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn { color: #ca8a04 !important; }
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn { color: #8b5cf6 !important; }
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn { color: #0284c7 !important; }
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn { color: #0f766e !important; }

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--nbv5-pane-bg, #f5f7fa) 80%, var(--nbv5-pane-text, #111827) 20%) !important;
  border-color: color-mix(in srgb, var(--nbv5-pane-text, #111827) 24%, transparent) !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}


/* Composer tool button surface alignment (build 560).
   Cosmetic-only: make secondary composer buttons use the same theme-aware surface
   family as the Home / More Rooms shortcut buttons; keep color on the icons/marks. */
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

[data-v5thememode="light"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn,
[data-v5thememode="light"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn,
[data-v5thememode="light"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn,
[data-v5thememode="light"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn,
[data-v5thememode="light"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn,
[data-v5thememode="light"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn {
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(0,0,0,.12) !important;
}

[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn,
[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn,
[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn,
[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn,
[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn,
[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn {
  background: rgba(0,0,0,.22) !important;
  border-color: rgba(255,255,255,.18) !important;
}

[data-v5thememode="light"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn:hover:not(:disabled),
[data-v5thememode="light"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn:hover:not(:disabled),
[data-v5thememode="light"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn:hover:not(:disabled),
[data-v5thememode="light"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn:hover:not(:disabled),
[data-v5thememode="light"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn:hover:not(:disabled),
[data-v5thememode="light"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn:hover:not(:disabled),
[data-v5thememode="light"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn:focus-visible:not(:disabled),
[data-v5thememode="light"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn:focus-visible:not(:disabled),
[data-v5thememode="light"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn:focus-visible:not(:disabled),
[data-v5thememode="light"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn:focus-visible:not(:disabled),
[data-v5thememode="light"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn:focus-visible:not(:disabled),
[data-v5thememode="light"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn:focus-visible:not(:disabled) {
  background: rgba(255,255,255,.84) !important;
  border-color: rgba(0,0,0,.18) !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn:hover:not(:disabled),
[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn:hover:not(:disabled),
[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn:hover:not(:disabled),
[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn:hover:not(:disabled),
[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn:hover:not(:disabled),
[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn:hover:not(:disabled),
[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn:focus-visible:not(:disabled),
[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn:focus-visible:not(:disabled),
[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn:focus-visible:not(:disabled),
[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn:focus-visible:not(:disabled),
[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn:focus-visible:not(:disabled),
[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn:focus-visible:not(:disabled) {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.24) !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}


/* Topbar + People status utility button tone correction (build 562).
   Uses the same established light/dark shortcut-button surface language as
   Home / More Rooms instead of custom dark overlays. */
.nbv5-skin-v4 .nbv5-topbar-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nbv5-skin-v4 .nbv5-topbar-right .nbv5-topbar-toggle,
.nbv5-skin-v4 .nbv5-right-awaybtn {
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(0,0,0,.06) !important;
  color: inherit !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-topbar-right .nbv5-topbar-toggle,
html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-right-awaybtn {
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  color: inherit !important;
}

.nbv5-skin-v4 .nbv5-topbar-right .nbv5-topbar-toggle i,
.nbv5-skin-v4 .nbv5-right-awaybtn i {
  font-size: .86rem;
  line-height: 1;
}

.nbv5-skin-v4 .nbv5-topbar-right .nbv5-topbar-toggle:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-topbar-right .nbv5-topbar-toggle:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-right-awaybtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-right-awaybtn:focus-visible:not(:disabled) {
  background: rgba(0,0,0,.10) !important;
  border-color: rgba(0,0,0,.18) !important;
  color: inherit !important;
  outline: none;
}

html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-topbar-right .nbv5-topbar-toggle:hover:not(:disabled),
html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-topbar-right .nbv5-topbar-toggle:focus-visible:not(:disabled),
html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-right-awaybtn:hover:not(:disabled),
html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-right-awaybtn:focus-visible:not(:disabled) {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.20) !important;
  color: inherit !important;
}

.nbv5-skin-v4 .nbv5-topbar-right .nbv5-topbar-toggle.is-active,
.nbv5-skin-v4 .nbv5-right-awaybtn.is-active {
  background: rgba(0,0,0,.14) !important;
  border-color: rgba(0,0,0,.22) !important;
  color: inherit !important;
}

html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-topbar-right .nbv5-topbar-toggle.is-active,
html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-right-awaybtn.is-active {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.24) !important;
  color: inherit !important;
}

.nbv5-skin-v4 .nbv5-right-awaybtn {
  flex: 0 0 auto;
  margin-left: auto;
}



/* Composer tool buttons match left-panel shortcuts (build 563).
   Cosmetic-only: use the same theme-aware surface, border, hover, and icon tone
   as the top-left Network / Control Panel / Help / Theme buttons. */
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-v5thememode="light"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock {
  color: rgba(43,38,32,.92) !important;
}

html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock {
  color: rgba(255,255,255,.92) !important;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn {
  border-radius: 10px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(0,0,0,.06) !important;
  color: inherit !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn,
html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn,
html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn,
html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn,
html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn,
html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn {
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  color: inherit !important;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn:focus-visible:not(:disabled) {
  background: rgba(0,0,0,.10) !important;
  border-color: rgba(0,0,0,.18) !important;
  color: inherit !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  outline: none;
}

html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn:hover:not(:disabled),
html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn:hover:not(:disabled),
html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn:hover:not(:disabled),
html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn:hover:not(:disabled),
html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn:hover:not(:disabled),
html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn:hover:not(:disabled),
html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn:focus-visible:not(:disabled),
html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn:focus-visible:not(:disabled),
html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn:focus-visible:not(:disabled),
html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn:focus-visible:not(:disabled),
html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn:focus-visible:not(:disabled),
html[data-v5thememode="dark"] .nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn:focus-visible:not(:disabled) {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.20) !important;
  color: inherit !important;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn:disabled,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn:disabled,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn:disabled,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn:disabled,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn:disabled,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn:disabled {
  opacity: .55 !important;
  cursor: not-allowed;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn i,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn i,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn i,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn i,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn i,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn i,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-btnmark {
  color: currentColor !important;
}

/* Composer tool buttons match left-panel shortcut theme tokens (build 564).
   Cosmetic-only: composer secondary tools now use the same per-theme shortcut
   surface and icon tokens as the left-panel Status / Control Panel / Help buttons.
   This keeps Buzzen gold, Warm Parchment dark icons, and the other theme tones aligned. */
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn {
  background: var(--nbv5-left-tool-bg, rgba(255,255,255,.04)) !important;
  border-color: var(--nbv5-left-tool-border, rgba(255,255,255,.24)) !important;
  color: var(--nbv5-left-tool-icon, currentColor) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn:hover:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn:focus-visible:not(:disabled),
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn:focus-visible:not(:disabled) {
  background: var(--nbv5-left-tool-hover-bg, rgba(255,255,255,.10)) !important;
  border-color: var(--nbv5-left-tool-border, rgba(255,255,255,.24)) !important;
  color: var(--nbv5-left-tool-icon, currentColor) !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  outline: none;
}

.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-actionbtn:disabled,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-emotbtn:disabled,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-awaymsgbtn:disabled,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-giphybtn:disabled,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-stickerbtn:disabled,
.nbv5-skin-v4 .nbv5-content-grid > .nbv5-composer .nbv5-composer-tooldock .nbv5-mediabtn:disabled {
  opacity: .55 !important;
  cursor: not-allowed;
}



/* People self row tone placement (build 565).
   The self nickname/status row now sits in the People pane body, so it inherits
   the existing pane light/dark text system instead of carrying header colors. */
.nbv5-skin-v4 .nbv5-right .nbv5-pane-body > .nbv5-right-selfctx {
  width: 100%;
  min-height: 0;
  margin: 0 0 4px 0;
  padding: 0 7px 5px 7px !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.nbv5-skin-v4 .nbv5-right .nbv5-pane-body > .nbv5-right-selfctx:hover,
.nbv5-skin-v4 .nbv5-right .nbv5-pane-body > .nbv5-right-selfctx.is-ctx {
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.nbv5-skin-v4 .nbv5-right .nbv5-pane-body > .nbv5-right-selfctx .nbv5-right-selfnick,
.nbv5-skin-v4 .nbv5-right .nbv5-pane-body > .nbv5-right-selfctx .nbv5-right-selflabel {
  color: inherit !important;
}

.nbv5-skin-v4 .nbv5-right .nbv5-pane-body > .nbv5-right-selfctx .nbv5-nick-role-self {
  color: currentColor !important;
  opacity: .58 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Left panel modernization foundation (build 567).
   Adds optional quick-action labels while preserving compact/icon-only behavior
   on shorter screens and the existing collapsed rail. */
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-nav{
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
  padding: 6px 10px 9px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-nav::before{
  content: none;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-nav .nbv5-lp-btn,
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-subaction,
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-roombtn,
.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-item,
.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-x,
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-footbtn{
  background: var(--nbv5-left-tool-bg, rgba(255,255,255,.04)) !important;
  border-color: var(--nbv5-left-tool-border, rgba(255,255,255,.24)) !important;
  color: var(--nbv5-left-tool-icon, currentColor) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-nav .nbv5-lp-btn:hover:not(:disabled),
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-nav .nbv5-lp-btn:focus-visible:not(:disabled),
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-subaction:hover,
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-subaction:focus-visible,
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-roombtn:hover,
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-roombtn:focus-visible,
.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-item:hover,
.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-item:focus-visible,
.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-x:hover,
.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-x:focus-visible,
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-footbtn:hover,
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-footbtn:focus-visible{
  background: var(--nbv5-left-tool-hover-bg, rgba(255,255,255,.10)) !important;
  border-color: var(--nbv5-left-tool-border, rgba(255,255,255,.24)) !important;
  color: var(--nbv5-left-tool-icon, currentColor) !important;
  outline: none;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-nav .nbv5-lp-btn[aria-pressed="true"],
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-roombtn[aria-pressed="true"],
.nbv5-leftpanel.nbv5-left-open .nbv5-whrow.is-active .nbv5-whlist-item{
  background: var(--nbv5-left-tool-hover-bg, rgba(255,255,255,.10)) !important;
  border-color: var(--nbv5-left-tool-border, rgba(255,255,255,.24)) !important;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-nav .nbv5-lp-btn{
  width: 100%;
  min-width: 0;
  height: 34px;
  border-radius: 11px;
  overflow: hidden;
}

.nbv5-lp-btn-label{
  display: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  opacity: .95;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-section-h{
  margin-top: 8px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-emptycard{
  padding: 12px 10px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-emptyicon{
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-emptytitle{
  font-size: 14px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-whlist{
  max-height: min(260px, 34vh);
  overflow: auto;
  padding-right: 2px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-roomlabel,
.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-peer{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 900px) and (min-height: 820px){
  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-nav{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 8px 12px 10px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-nav::before{
    content: "Quick Actions";
    grid-column: 1 / -1;
    display: block;
    margin: 0 0 2px 2px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.1;
    text-transform: uppercase;
    opacity: .78;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-nav .nbv5-lp-btn{
    height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 4px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-nav .nbv5-lp-btn::after{
    display: none;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-nav .nbv5-lp-btn-label{
    display: block;
  }
}

@media (max-height: 720px){
  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-selfrow{
    margin-top: 4px;
    margin-bottom: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-emptycard{
    padding: 10px 8px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-emptyicon{
    display: none;
  }
}


/* Left panel identity and room polish (build 568).
   Keeps the production sidebar compact while moving closer to the card layout
   from the modernization mockup. */
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-selfrow{
  position: relative;
  align-items: center;
  gap: 10px;
  margin: 8px 10px 8px;
  padding: 10px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.10), transparent 34%),
    var(--nbv5-left-tool-bg, rgba(255,255,255,.04)) !important;
  border: 1px solid var(--nbv5-left-tool-border, rgba(255,255,255,.22));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-selfrow::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 42%);
  opacity: .7;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-avatar,
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-meta{
  position: relative;
  z-index: 1;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-avatar{
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-meta{
  min-width: 0;
  flex: 1 1 auto;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-line-hello{
  min-width: 0;
  line-height: 1.15;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-hellotext{
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  font-weight: 700;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-hello-name,
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-line-hello [x-text]{
  min-width: 0;
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-selfstatus{
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  opacity: .92;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-selfrole{
  min-width: 0;
  max-width: 86px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-selfdot{
  opacity: .62;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-selfonline{
  color: #2fe078;
  white-space: nowrap;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-subaction{
  justify-content: center;
  min-width: 0;
  height: 31px;
  border-radius: 10px;
  font-weight: 700;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-roomwrap{
  margin: 6px 10px 8px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-roomhead{
  margin: 0 0 5px 2px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.1;
  text-transform: uppercase;
  opacity: .76;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-roomcard{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 10px 11px 9px;
  border-radius: 13px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-roommain{
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-roomtype{
  flex: 0 0 auto;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-roomlabel{
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  font-size: 14px;
  font-weight: 800;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-roommodes{
  flex: 0 0 auto;
  max-width: 78px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--nbv5-left-tool-border, rgba(255,255,255,.20));
  background: rgba(0,0,0,.14);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .92;
}

html[data-v5thememode="light"] .nbv5-leftpanel.nbv5-left-open .nbv5-lp-roommodes{
  background: rgba(255,255,255,.45);
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-roomsub{
  display: block;
  min-width: 0;
  padding-left: 27px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  opacity: .72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

@media (max-height: 760px){
  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-selfrow{
    margin-top: 6px;
    margin-bottom: 7px;
    padding: 9px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-roomhead,
  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-roomsub{
    display: none;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-roomcard{
    min-height: 36px;
    padding: 8px 10px;
  }
}


/* Left panel identity/room readability tune (build 569).
   Fixes bullet rendering by pairing the markup entity with a slightly roomier,
   theme-aware card layout. */
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-selfrow{
  align-items: flex-start;
  gap: 11px;
  margin-top: 8px;
  margin-bottom: 9px;
  padding: 11px 10px 10px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-avatar{
  flex-basis: 40px;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  margin-top: 2px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-line-hello{
  margin-top: 0;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-hellotext{
  gap: 5px;
  font-size: 13.5px;
  line-height: 1.18;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-hello-prefix,
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-hello-name,
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-hello-bang{
  font-size: inherit;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-hello-name,
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-line-hello [x-text]{
  max-width: 124px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-selfstatus{
  gap: 5px;
  margin-top: 5px;
  font-size: 11.25px;
  line-height: 1.2;
  opacity: .96;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-selfrole{
  max-width: 92px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-selfdot{
  opacity: .72;
  font-size: 11px;
  line-height: 1;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-actions{
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-subaction{
  height: 32px;
  font-size: 11.5px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-roomhead{
  opacity: .84;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-roomcard{
  min-height: 58px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-roomsub{
  font-size: 11.25px;
  font-weight: 700;
  opacity: .84;
}

@media (max-height: 760px){
  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-selfrow{
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    margin-bottom: 7px;
    padding: 9px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-avatar{
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    margin-top: 0;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-selfstatus{
    margin-top: 3px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-actions{
    margin-top: 7px;
    padding-top: 6px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-subaction{
    height: 29px;
    font-size: 11px;
  }
}

/* Left panel duplicate identity cleanup (build 570).
   Keeps Profile/Logoff visible, shows session connection state instead of duplicating
   the self nickname/role already shown above the People list, and gives whispers priority. */
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionrow{
  align-items: center;
  gap: 10px;
  margin: 8px 10px 8px;
  padding: 10px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionicon{
  position: relative;
  z-index: 1;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--nbv5-left-tool-border, rgba(255,255,255,.22));
  background: rgba(0,0,0,.15);
  color: var(--nbv5-left-tool-icon, currentColor);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionicon.is-ok{
  color: #2fe078;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionicon.is-warn{
  color: #ffd15c;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionicon.is-off{
  color: rgba(255,255,255,.62);
}

html[data-v5thememode="light"] .nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionicon.is-off{
  color: rgba(43,38,32,.62);
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionlabel{
  position: relative;
  z-index: 1;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.1;
  text-transform: uppercase;
  opacity: .76;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionstatus{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionstatus.is-ok{
  color: #2fe078;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionstatus.is-warn{
  color: #ffd15c;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionstatus.is-off{
  opacity: .78;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessiondot{
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionrow .nbv5-lp-actions{
  margin-top: 8px;
  padding-top: 7px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-roomcard{
  min-height: 42px;
  padding: 9px 11px;
  gap: 0;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-roommain{
  width: 100%;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-roomlabel{
  max-width: 100%;
  font-size: 14px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-roommodes,
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-roomsub{
  display: none !important;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-whispers{
  flex: 1 1 auto;
  min-height: 112px;
  display: flex;
  flex-direction: column;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-whispers .nbv5-whlist{
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

@media (max-height: 760px){
  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionrow{
    gap: 9px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding: 8px 9px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionicon{
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionlabel{
    display: none;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionstatus{
    margin-top: 0;
    font-size: 12.5px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionrow .nbv5-lp-actions{
    margin-top: 6px;
    padding-top: 6px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-roomwrap{
    margin-top: 5px;
    margin-bottom: 7px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-roomcard{
    min-height: 34px;
    padding: 7px 10px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-whispers{
    min-height: 128px;
  }
}

/* Left panel current session compaction (build 571).
   Merges room, connection state, and Profile/Logoff into one compact card so
   the whisper list keeps priority on laptop-height screens. */
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard{
  display: block;
  margin: 8px 10px 8px;
  padding: 10px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionmeta{
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard .nbv5-lp-sessionlabel{
  margin: 0 0 7px 2px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-session-room{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 12px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-session-room .nbv5-lp-roommain{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-session-room .nbv5-lp-roomtype{
  flex: 0 0 auto;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-session-room .nbv5-lp-roomlabel{
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard .nbv5-lp-sessionstatus{
  margin-top: 7px;
  font-size: 11.75px;
  line-height: 1.1;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard .nbv5-lp-sessiondot{
  width: 6px;
  height: 6px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard .nbv5-lp-actions{
  margin-top: 7px;
  padding-top: 7px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-roomwrap{
  display: none !important;
}

@media (max-height: 760px){
  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard{
    margin-top: 6px;
    margin-bottom: 7px;
    padding: 8px 9px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard .nbv5-lp-sessionlabel{
    display: none;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-session-room{
    min-height: 32px;
    padding: 7px 9px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-session-room .nbv5-lp-roomlabel{
    font-size: 13px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard .nbv5-lp-sessionstatus{
    margin-top: 5px;
    font-size: 11px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard .nbv5-lp-actions{
    margin-top: 6px;
    padding-top: 6px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard .nbv5-lp-subaction{
    height: 28px;
  }
}


/* Left panel current session header compacting (build 572).
   Moves connection state beside the Current Session label to save vertical space. */
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionhead{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  margin: 0 2px 6px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard .nbv5-lp-sessionlabel{
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard .nbv5-lp-sessionstatus{
  flex: 0 1 auto;
  max-width: 92px;
  margin-top: 0;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.12);
  border: 1px solid var(--nbv5-left-tool-border, rgba(255,255,255,.16));
  font-size: 10.25px;
  letter-spacing: .01em;
  line-height: 1;
}

html[data-v5thememode="light"] .nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard .nbv5-lp-sessionstatus{
  background: rgba(255,255,255,.42);
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard .nbv5-lp-sessiondot{
  width: 5px;
  height: 5px;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 16%, transparent);
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-session-room{
  min-height: 34px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard .nbv5-lp-actions{
  margin-top: 6px;
  padding-top: 6px;
}

@media (max-height: 760px){
  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionhead{
    margin-bottom: 5px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard .nbv5-lp-sessionlabel{
    display: block;
    font-size: 9.75px;
    letter-spacing: .09em;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard .nbv5-lp-sessionstatus{
    max-width: 80px;
    padding: 2px 5px;
    font-size: 9.75px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-session-room{
    min-height: 31px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard .nbv5-lp-actions{
    margin-top: 5px;
    padding-top: 5px;
  }
}

/* Left panel whisper empty-state compaction (build 573).
   Makes the no-whispers state match the newer card language while preserving
   vertical space for incoming whisper tabs on laptop-height screens. */
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-emptycard-whispers{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 58px;
  padding: 9px 10px !important;
  text-align: left;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-emptycard-whispers .nbv5-lp-emptyicon{
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin: 0;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-emptybody{
  min-width: 0;
  flex: 1 1 auto;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-emptycard-whispers .nbv5-lp-emptytitle{
  font-size: 13px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-emptycard-whispers .nbv5-lp-emptysub{
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.2;
}

@media (max-height: 720px){
  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-emptycard-whispers{
    min-height: 46px;
    padding: 8px 9px !important;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-emptycard-whispers .nbv5-lp-emptyicon{
    display: none;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-emptycard-whispers .nbv5-lp-emptysub{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Left panel active whisper rows (build 574).
   Compact rows show peer, timestamp, unread badge, and last-message preview while
   keeping the whisper list as the flexible/scrolling sidebar region. */
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-whispers .nbv5-whlist{
  gap: 6px;
  margin-top: 8px;
  padding-right: 2px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-whrow{
  align-items: stretch;
  gap: 5px;
  min-width: 0;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-whrow .nbv5-whlist-item{
  min-width: 0;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-item{
  border-radius: 12px;
  padding: 7px 8px;
  color: inherit;
  background: var(--nbv5-left-tool-bg, rgba(255,255,255,.06));
  border-color: var(--nbv5-left-tool-border, rgba(255,255,255,.14));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-top{
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-peer{
  font-size: 12.75px;
  line-height: 1.15;
  font-weight: 800;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-actions{
  gap: 5px;
  margin-left: auto;
  min-width: 0;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-time{
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  opacity: .74;
  white-space: nowrap;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-preview{
  margin-top: 4px;
  min-width: 0;
  max-width: 100%;
  font-size: 11.25px;
  font-weight: 600;
  line-height: 1.2;
  opacity: .76;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-x{
  width: 24px;
  min-width: 24px;
  border-radius: 10px;
  color: inherit;
  background: var(--nbv5-left-tool-bg, rgba(255,255,255,.06)) !important;
  border-color: var(--nbv5-left-tool-border, rgba(255,255,255,.14));
  opacity: .82;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-x:hover,
.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-x:focus-visible,
.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-item:hover,
.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-item:focus-visible{
  background: var(--nbv5-left-tool-hover-bg, rgba(255,255,255,.10)) !important;
  border-color: var(--nbv5-left-tool-border, rgba(255,255,255,.22));
}

.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-item.is-active,
.nbv5-leftpanel.nbv5-left-open .nbv5-whrow.is-active .nbv5-whlist-item{
  outline: 1px solid color-mix(in srgb, var(--nbv5-left-tool-icon, currentColor) 42%, transparent);
  outline-offset: 0;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-actions .nbv5-unread-badge-item{
  margin-right: 0;
}

@media (max-height: 720px){
  .nbv5-leftpanel.nbv5-left-open .nbv5-lp-whispers .nbv5-whlist{
    gap: 5px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-whlist-item{
    padding: 6px 7px;
    border-radius: 10px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-whlist-peer{
    font-size: 12px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-whlist-preview{
    margin-top: 3px;
    font-size: 10.5px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-whlist-time{
    font-size: 10px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-whlist-x{
    width: 22px;
    min-width: 22px;
    border-radius: 9px;
  }
}


/* Left panel whisper row cleanup (build 575).
   Fixes the empty-state x-show override and moves close actions visually inside
   each active whisper row so whisper tabs use the full sidebar width cleanly. */
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-emptycard-whispers[x-cloak],
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-emptycard-whispers[style*="display: none"]{
  display: none !important;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-whrow{
  position: relative;
  display: block;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-whrow .nbv5-whlist-item{
  width: 100%;
  padding-right: 30px;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-x{
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 18px;
  min-width: 18px;
  height: 26px;
  padding: 0;
  border-radius: 9px;
  font-size: 15px;
  line-height: 1;
  background: transparent !important;
  border-color: transparent;
  opacity: .68;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-x:hover,
.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-x:focus-visible{
  opacity: 1;
  background: var(--nbv5-left-tool-hover-bg, rgba(255,255,255,.10)) !important;
  border-color: var(--nbv5-left-tool-border, rgba(255,255,255,.22));
}

.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-item.is-active,
.nbv5-leftpanel.nbv5-left-open .nbv5-whrow.is-active .nbv5-whlist-item{
  outline: 1px solid color-mix(in srgb, var(--nbv5-left-tool-icon, currentColor) 28%, transparent);
}

@media (max-height: 720px){
  .nbv5-leftpanel.nbv5-left-open .nbv5-whrow .nbv5-whlist-item{
    padding-right: 28px;
  }

  .nbv5-leftpanel.nbv5-left-open .nbv5-whlist-x{
    right: 5px;
    width: 17px;
    min-width: 17px;
    height: 24px;
    border-radius: 8px;
  }
}

/* Left panel whisper unread polish (build 576).
   Removes the old minimized dash from markup and keeps unread badges compact when present. */
.nbv5-leftpanel.nbv5-left-open .nbv5-whlist-actions .nbv5-unread-badge-item{
  flex: 0 0 auto;
  margin: 0;
  min-width: 16px;
}

/* Left panel NBWCHAT++ footer dock polish (build 579).
   Uses a compact 3-column dock so labels stay readable instead of being squeezed. */
.nbv5-leftpanel .nbv5-lp-footer{
  flex: 0 0 auto;
  padding: 9px 10px 8px;
  margin-right: 0;
}

.nbv5-leftpanel .nbv5-lp-footlinks{
  width: 100%;
  max-width: 210px;
  margin: 4px auto 0;
  padding: 7px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--nbv5-left-tool-border, rgba(255,255,255,.20)) 72%, transparent);
  border-radius: 16px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--nbv5-left-tool-bg, rgba(255,255,255,.08)) 86%, transparent),
      color-mix(in srgb, var(--nbv5-left-tool-hover-bg, rgba(255,255,255,.05)) 58%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.nbv5-leftpanel .nbv5-lp-footbtn{
  width: 100%;
  min-width: 0;
  height: 43px;
  padding: 4px 3px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 12px;
  overflow: hidden;
}

.nbv5-leftpanel .nbv5-lp-footbtn i{
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
}

.nbv5-leftpanel .nbv5-lp-footlabel{
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--nbv5-left-tool-text, currentColor);
  opacity: .96;
}

.nbv5-leftpanel .nbv5-lp-footcopy{
  margin-top: 6px;
  font-size: 11px;
}

.nbv5-leftpanel .nbv5-lp-footbtn:hover .nbv5-lp-footlabel,
.nbv5-leftpanel .nbv5-lp-footbtn:focus-visible .nbv5-lp-footlabel{
  color: var(--nbv5-left-tool-icon, currentColor);
}

@media (max-height: 820px){
  .nbv5-leftpanel .nbv5-lp-footer{
    padding-top: 8px;
  }

  .nbv5-leftpanel .nbv5-lp-footlinks{
    max-width: 226px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .nbv5-leftpanel .nbv5-lp-footbtn{
    width: 36px;
    min-width: 36px;
    height: 30px;
    padding: 0;
    flex-direction: row;
  }

  .nbv5-leftpanel .nbv5-lp-footlabel{
    display: none;
  }
}

@media (max-height: 700px){
  .nbv5-leftpanel .nbv5-lp-footcopy{
    display: none;
  }
}

/* Left panel theme cleanup (build 581).
   Softens session status chips and lets whisper empty-state emphasis follow theme tokens. */
.nbv5-skin-v4{
  --nbv5-session-ok: #75c796;
  --nbv5-session-ok-bg: rgba(117,199,150,.12);
  --nbv5-session-ok-border: rgba(117,199,150,.28);
  --nbv5-session-warn: #d7a94f;
  --nbv5-session-warn-bg: rgba(215,169,79,.13);
  --nbv5-session-warn-border: rgba(215,169,79,.30);
  --nbv5-session-off: rgba(255,255,255,.66);
  --nbv5-session-off-bg: rgba(255,255,255,.06);
  --nbv5-session-off-border: rgba(255,255,255,.16);
}

html[data-v5thememode="light"] .nbv5-skin-v4{
  --nbv5-session-ok: #347a50;
  --nbv5-session-ok-bg: rgba(52,122,80,.10);
  --nbv5-session-ok-border: rgba(52,122,80,.24);
  --nbv5-session-warn: #8a6a24;
  --nbv5-session-warn-bg: rgba(138,106,36,.10);
  --nbv5-session-warn-border: rgba(138,106,36,.24);
  --nbv5-session-off: rgba(43,38,32,.68);
  --nbv5-session-off-bg: rgba(43,38,32,.06);
  --nbv5-session-off-border: rgba(43,38,32,.14);
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard .nbv5-lp-sessionstatus{
  box-shadow: none;
  text-shadow: none;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionstatus.is-ok,
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard .nbv5-lp-sessionstatus.is-ok{
  color: var(--nbv5-session-ok) !important;
  background: var(--nbv5-session-ok-bg) !important;
  border-color: var(--nbv5-session-ok-border) !important;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionstatus.is-warn,
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard .nbv5-lp-sessionstatus.is-warn{
  color: var(--nbv5-session-warn) !important;
  background: var(--nbv5-session-warn-bg) !important;
  border-color: var(--nbv5-session-warn-border) !important;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessionstatus.is-off,
.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard .nbv5-lp-sessionstatus.is-off{
  color: var(--nbv5-session-off) !important;
  background: var(--nbv5-session-off-bg) !important;
  border-color: var(--nbv5-session-off-border) !important;
  opacity: 1;
}

.nbv5-leftpanel.nbv5-left-open .nbv5-lp-sessioncard .nbv5-lp-sessiondot{
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 10%, transparent);
}

/* Left panel website links footer credit (build 586).
   Keep Website Links off the themed section-heading accent override so it follows the shared light/dark left-panel text system. */
.nbv5-leftpanel .nbv5-lp-footer{
  color: inherit !important;
}

.nbv5-leftpanel .nbv5-lp-foothead{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 2px 7px;
  padding: 0;
  text-align: left;
  color: inherit !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.1;
  text-transform: uppercase;
  opacity: .78;
}

.nbv5-leftpanel .nbv5-lp-footlogo{
  display: none !important;
}

.nbv5-leftpanel .nbv5-lp-footcopy{
  margin-top: 7px;
  font-size: 10.5px;
  line-height: 1.25;
  opacity: .78;
  text-align: center;
}

.nbv5-leftpanel .nbv5-lp-footcredit{
  color: var(--nbv5-left-tool-icon, currentColor);
  font-weight: 700;
  text-decoration: none;
}

.nbv5-leftpanel .nbv5-lp-footcredit:hover,
.nbv5-leftpanel .nbv5-lp-footcredit:focus-visible{
  text-decoration: underline;
}

@media (max-height: 700px){
  .nbv5-leftpanel .nbv5-lp-foothead{
    display: none;
  }
}


/* Left panel Website Links open grid (build 587).
   Removes the old dock/container frame and lets the footer shortcuts fill the sidebar like Quick Actions, while staying slightly smaller. */
.nbv5-leftpanel .nbv5-lp-footlinks{
  width: 100%;
  max-width: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.nbv5-leftpanel .nbv5-lp-footbtn{
  height: 42px;
  padding: 4px 3px;
  border-radius: 11px;
}

.nbv5-leftpanel .nbv5-lp-footbtn i{
  font-size: 13.5px;
}

.nbv5-leftpanel .nbv5-lp-footlabel{
  font-size: 9.5px;
}

@media (max-height: 820px){
  .nbv5-leftpanel .nbv5-lp-footlinks{
    max-width: none;
    margin-top: 4px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .nbv5-leftpanel .nbv5-lp-footbtn{
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0;
  }
}

/* Status pane: friendly chat summary above the existing update log. */
.nbv5-statuspane{
  padding: 14px 14px 8px;
  color: var(--nbv5-pane-text);
}
.nbv5-statuspane-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.nbv5-statuspane-kicker{
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .74;
}
.nbv5-statuspane-title{
  margin-top: 2px;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
}
.nbv5-statuspane-roombtn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--nbv5-pane-border);
  background: var(--nbv5-pane-item-bg);
  color: var(--nbv5-pane-text);
  border-radius: 999px;
  padding: 6px 11px;
  font-size: .86rem;
  font-weight: 700;
  white-space: nowrap;
}
.nbv5-statuspane-roombtn:hover{
  background: var(--nbv5-pane-item-hover);
}
.nbv5-statuscards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}
.nbv5-statuscard,
.nbv5-statusinfo-card{
  display:flex;
  gap:10px;
  min-width:0;
  border:1px solid var(--nbv5-pane-border);
  background: var(--nbv5-pane-item-bg);
  border-radius:14px;
  padding:11px 12px;
}
.nbv5-statuscard-ico{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid rgba(127,127,127,.24);
  background: rgba(127,127,127,.10);
  opacity:.96;
}
.nbv5-statuscard-ico.is-good{
  background: rgba(35, 160, 100, .14);
  border-color: rgba(35, 160, 100, .30);
}
.nbv5-statuscard-ico.is-waiting{
  background: rgba(217, 164, 65, .14);
  border-color: rgba(217, 164, 65, .34);
}
.nbv5-statuscard-ico.is-offline{
  background: rgba(220, 53, 69, .12);
  border-color: rgba(220, 53, 69, .30);
}
.nbv5-statuscard-main{
  min-width:0;
}
.nbv5-statuscard-label,
.nbv5-statusinfo-label{
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.68;
}
.nbv5-statuscard-value{
  margin-top:2px;
  font-size: .98rem;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nbv5-statuscard-help,
.nbv5-statusinfo-text{
  margin-top:2px;
  font-size:.84rem;
  line-height:1.3;
  opacity:.76;
}
.nbv5-statusinfo-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap:10px;
  margin-top:10px;
}
.nbv5-statusinfo-card{
  display:block;
}
.nbv5-statusinfo-label{
  display:flex;
  align-items:center;
  gap:7px;
}
.nbv5-statusinfo-text{
  overflow-wrap:anywhere;
}
.nbv5-statusinfo-modes{
  font-family: Consolas, "Liberation Mono", Menlo, monospace;
  font-weight: 800;
  letter-spacing: .02em;
  opacity: .90;
}
.nbv5-statusupdates-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:13px 0 4px;
  padding-top:10px;
  border-top:1px solid var(--nbv5-pane-border);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  opacity:.72;
}
.nbv5-statusupdates-head small{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
}
@media (max-width: 900px){
  .nbv5-statuscards,
  .nbv5-statusinfo-grid{
    grid-template-columns: 1fr;
  }
  .nbv5-statuspane-head{
    align-items:stretch;
    flex-direction:column;
  }
  .nbv5-statuspane-roombtn{
    justify-content:center;
  }
}

/* Typing box text size (build 593).
   Input-only readability: main composer, modern whisper composer, and legacy floating whispers share one local setting. */
:root{
  --nbv5-input-font-size: var(--nbv5-pane-font-size, 17px);
  --nbv5-input-line-height: 1.45;
  --nbv5-input-box-height: 46px;
  --nbv5-whisper-input-box-height: 40px;
}

.nbv5-skin-v4 input.nbv5-composer-input,
.nbv5-skin-v4 input.nbv5-whwin-input{
  font-size: var(--nbv5-input-font-size, var(--nbv5-pane-font-size, 17px)) !important;
  line-height: var(--nbv5-input-line-height, 1.45) !important;
}

.nbv5-skin-v4 .nbv5-center .nbv5-composer-input{
  height: var(--nbv5-input-box-height) !important;
  min-height: var(--nbv5-input-box-height) !important;
  padding-top: 0.45em !important;
  padding-bottom: 0.45em !important;
}

.nbv5-skin-v4 .nbv5-composer-mirror{
  height: var(--nbv5-input-box-height) !important;
  font-size: var(--nbv5-input-font-size, var(--nbv5-pane-font-size, 17px)) !important;
  line-height: var(--nbv5-input-line-height, 1.45) !important;
}

.nbv5-skin-v4 .nbv5-whwin-foot{
  align-items: center;
}

.nbv5-skin-v4 .nbv5-whwin-input{
  height: var(--nbv5-whisper-input-box-height) !important;
  min-height: var(--nbv5-whisper-input-box-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.nbv5-skin-v4 .nbv5-composer-mirror-sm{
  height: var(--nbv5-whisper-input-box-height) !important;
  font-size: var(--nbv5-input-font-size, var(--nbv5-pane-font-size, 17px)) !important;
  line-height: var(--nbv5-input-line-height, 1.45) !important;
}

.nbv5-composer-tooldock .nbv5-typebtn{
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, rgba(160, 210, 255, .22), rgba(45, 89, 145, .28)) !important;
  border: 1px solid rgba(157, 205, 255, .40) !important;
  color: #cfeaff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .14s ease, filter .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.nbv5-composer-tooldock .nbv5-typebtn:hover:not(:disabled),
.nbv5-composer-tooldock .nbv5-typebtn:focus-visible:not(:disabled){
  transform: translateY(-1px);
  filter: brightness(1.14) saturate(1.08);
  border-color: rgba(255,255,255,.46) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18);
}

.nbv5-btnmark-type{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
}

.nbv5-whwin-typebtn{
  flex: 0 0 auto;
  height: var(--nbv5-whisper-input-box-height) !important;
  min-height: var(--nbv5-whisper-input-box-height) !important;
  width: 40px;
  min-width: 40px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 11px !important;
  font-weight: 900;
  letter-spacing: -.04em;
  background: color-mix(in srgb, var(--nbv5-input-bg) 82%, var(--nbv5-link, #4aa3ff) 18%) !important;
  border: 1px solid color-mix(in srgb, var(--nbv5-input-border) 75%, var(--nbv5-link, #4aa3ff) 25%) !important;
  color: var(--nbv5-input-text) !important;
}

.nbv5-whwin-typebtn:hover,
.nbv5-whwin-typebtn:focus-visible{
  filter: brightness(1.08);
}

.nbv5-whwin-send{
  height: var(--nbv5-whisper-input-box-height) !important;
  min-height: var(--nbv5-whisper-input-box-height) !important;
}

.nbv5-input-size-choices{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.nbv5-input-size-choices .btn{
  border-radius: 999px !important;
  font-weight: 700;
}

/* Control Panel: keep typing-size choice buttons pane-aware.
   The global V4 Bootstrap outline button skin is intentionally white for dark chrome,
   but these buttons sit inside light/dark Control Panel cards and must use CP text tokens. */
.nbv5-control .nbv5-input-size-choices .btn{
  color: var(--nbv5-cp-btn-fg) !important;
  background: var(--nbv5-cp-btn-bg) !important;
  border-color: var(--nbv5-cp-btn-border) !important;
  box-shadow: none !important;
}

.nbv5-control .nbv5-input-size-choices .btn:hover,
.nbv5-control .nbv5-input-size-choices .btn:focus-visible{
  color: var(--nbv5-cp-btn-fg) !important;
  background: var(--nbv5-cp-btn-hover-bg) !important;
  border-color: var(--nbv5-cp-btn-hover-border) !important;
}

.nbv5-control .nbv5-input-size-choices .btn.active,
.nbv5-control .nbv5-input-size-choices .btn:active{
  color: var(--nbv5-cp-btn-active-fg) !important;
  background: var(--nbv5-cp-btn-active-bg) !important;
  border-color: var(--nbv5-cp-btn-active-border) !important;
}

@media (max-width: 767.98px){
  .nbv5-composer-tooldock .nbv5-typebtn{
    width: 32px !important;
    min-width: 32px !important;
    height: 34px !important;
    min-height: 34px !important;
  }
  .nbv5-btnmark-type{
    font-size: 12px;
  }
}

/* Typing size button placement (build 597).
   The Aa control is a real right-side end-cap inside the typing box, so long typed text
   cannot scroll underneath it. */
.nbv5-skin-v4 .nbv5-composer-input-wrap{
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: var(--nbv5-input-box-height, 46px);
  border-radius: 16px;
  background: var(--nbv5-input-bg) !important;
  border: 1px solid var(--nbv5-input-border) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 1px 2px rgba(0,0,0,.10);
  overflow: visible;
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}

.nbv5-skin-v4 .nbv5-composer-input-wrap-sm{
  min-height: var(--nbv5-whisper-input-box-height, 40px);
  border-radius: 12px;
}

.nbv5-skin-v4 .nbv5-composer-input-wrap:focus-within{
  border-color: color-mix(in srgb, var(--nbv5-input-border) 50%, var(--nbv5-link, #4aa3ff) 50%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 3px color-mix(in srgb, var(--nbv5-link, #4aa3ff) 20%, transparent), 0 2px 7px rgba(0,0,0,.14);
}

.nbv5-skin-v4 .nbv5-composer-input-wrap .nbv5-composer-input,
.nbv5-skin-v4 .nbv5-composer-input-wrap .nbv5-whwin-input{
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nbv5-skin-v4 .nbv5-composer-input-wrap .nbv5-composer-input:focus,
.nbv5-skin-v4 .nbv5-composer-input-wrap .nbv5-whwin-input:focus{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.nbv5-skin-v4 .nbv5-composer-input-wrap.is-mylook-gradient .nbv5-composer-input,
.nbv5-skin-v4 .nbv5-composer-input-wrap.is-mylook-gradient .nbv5-whwin-input{
  background: transparent !important;
}

.nbv5-skin-v4 .nbv5-composer-input-wrap .nbv5-input-inline-typebtn{
  position: relative !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 8 !important;
  flex: 0 0 56px !important;
  width: 56px !important;
  min-width: 56px !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  align-self: stretch !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-left: 1px solid color-mix(in srgb, var(--nbv5-input-border) 72%, var(--nbv5-link, #4aa3ff) 28%) !important;
  border-radius: 0 15px 15px 0 !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
  color: var(--nbv5-input-text) !important;
  background: color-mix(in srgb, var(--nbv5-input-bg) 88%, var(--nbv5-link, #4aa3ff) 12%) !important;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.12) !important;
  transition: background-color .14s ease, filter .14s ease, color .14s ease, box-shadow .14s ease;
}

.nbv5-skin-v4 .nbv5-composer-input-wrap .nbv5-input-inline-typebtn:hover,
.nbv5-skin-v4 .nbv5-composer-input-wrap .nbv5-input-inline-typebtn:focus-visible{
  filter: brightness(1.06) saturate(1.04);
  outline: none;
  background: color-mix(in srgb, var(--nbv5-input-bg) 80%, var(--nbv5-link, #4aa3ff) 20%) !important;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.nbv5-skin-v4 .nbv5-composer-input-wrap .nbv5-input-inline-typebtn:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--nbv5-link, #4aa3ff) 70%, #ffffff 30%) !important;
  outline-offset: -4px;
}

.nbv5-skin-v4 .nbv5-center .nbv5-composer-input{
  padding-right: 1rem !important;
}

.nbv5-skin-v4 .nbv5-composer-mirror{
  right: 56px !important;
  padding-right: 1rem !important;
}

.nbv5-skin-v4 .nbv5-whwin-input{
  padding-right: .85rem !important;
}

.nbv5-skin-v4 .nbv5-composer-mirror-sm{
  right: 48px !important;
  padding-right: .85rem !important;
}

.nbv5-skin-v4 .nbv5-composer-input-wrap .nbv5-whwin-typebtn.nbv5-input-inline-typebtn{
  flex-basis: 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  border-radius: 0 11px 11px 0 !important;
  font-size: 13px !important;
}

.nbv5-skin-v4 .nbv5-composer-input-wrap.has-mylook-swatch .nbv5-composer-input{
  padding-right: 2.4rem !important;
}

.nbv5-skin-v4 .nbv5-composer-input-wrap.has-mylook-swatch .nbv5-whwin-input{
  padding-right: 2.2rem !important;
}

.nbv5-skin-v4 .nbv5-composer-input-wrap.has-mylook-swatch .nbv5-composer-mirror{
  padding-right: 2.4rem !important;
}

.nbv5-skin-v4 .nbv5-composer-input-wrap.has-mylook-swatch .nbv5-composer-mirror-sm{
  padding-right: 2.2rem !important;
}

.nbv5-skin-v4 .nbv5-composer-input-wrap .nbv5-composer-grad-swatch{
  right: 66px !important;
  z-index: 7 !important;
}

.nbv5-skin-v4 .nbv5-composer-input-wrap-sm .nbv5-composer-grad-swatch{
  right: 58px !important;
}

@media (max-width: 767.98px){
  .nbv5-skin-v4 .nbv5-composer-input-wrap .nbv5-input-inline-typebtn{
    flex-basis: 50px !important;
    width: 50px !important;
    min-width: 50px !important;
    border-radius: 0 15px 15px 0 !important;
  }
  .nbv5-skin-v4 .nbv5-center .nbv5-composer-input,
  .nbv5-skin-v4 .nbv5-composer-mirror{
    padding-right: .85rem !important;
  }
  .nbv5-skin-v4 .nbv5-composer-mirror,
  .nbv5-skin-v4 .nbv5-composer-mirror-sm{
    right: 50px !important;
  }
  .nbv5-skin-v4 .nbv5-composer-input-wrap.has-mylook-swatch .nbv5-composer-input,
  .nbv5-skin-v4 .nbv5-composer-input-wrap.has-mylook-swatch .nbv5-composer-mirror{
    padding-right: 2.2rem !important;
  }
  .nbv5-skin-v4 .nbv5-composer-input-wrap .nbv5-composer-grad-swatch{
    right: 58px !important;
  }
}

/* V5 Build 616: installed + online sticker picker */
.nbv5-stickers-head{
  gap: 6px;
  padding: 8px;
  cursor: move;
}

.nbv5-stickers-head .nbv5-stickers-q,
.nbv5-stickers-head .nbv5-stickers-more,
.nbv5-stickers-head .nbv5-stickers-reset,
.nbv5-stickers-head .nbv5-stickers-x,
.nbv5-stickers-head .nbv5-stickers-modes,
.nbv5-stickers-head .nbv5-stickers-modes *{
  cursor: auto;
}

.nbv5-stickers-modes{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  width: 100%;
}

.nbv5-stickers-mode{
  min-width: 0;
  height: 28px;
  padding: 3px 8px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: rgba(230,237,243,.82);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.nbv5-stickers-mode:hover{
  background: rgba(255,255,255,.13);
  color: #fff;
}

.nbv5-stickers-mode.is-active{
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.34);
  color: #fff;
  box-shadow: inset 0 -2px 0 currentColor;
}

.nbv5-stickers-more,
.nbv5-stickers-reset,
.nbv5-stickers-x{
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #e6edf3 !important;
  flex-shrink: 0;
}

.nbv5-stickers-more:hover,
.nbv5-stickers-reset:hover,
.nbv5-stickers-x:hover{
  background: rgba(255,255,255,.10) !important;
}

.nbv5-stickers-more:disabled{
  opacity: .55;
  cursor: default;
}

html[data-v5thememode="light"] .nbv5-stickers-more,
html[data-v5thememode="light"] .nbv5-stickers-reset,
html[data-v5thememode="light"] .nbv5-stickers-x{
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #fff !important;
}

.nbv5-stickers-body{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--v5-main-bg) !important;
}

.nbv5-stickers-status,
.nbv5-stickers-empty{
  flex: 0 0 auto;
  padding: 8px 10px 0;
  color: color-mix(in srgb, var(--v5-main-fg, #ffffff) 82%, transparent);
}

.nbv5-stickers-empty{
  padding: 12px;
  text-align: center;
}

.nbv5-stickers-grid{
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
}

.nbv5-stickers-pop.is-online .nbv5-stickers-grid{
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}

.nbv5-stickers-online-item{
  width: 100%;
  min-height: 88px;
  aspect-ratio: 1 / 1;
  padding: 6px;
  overflow: hidden;
}

.nbv5-stickers-online-item img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

html[data-v5thememode="light"] .nbv5-stickers-item{
  border-color: rgba(0,0,0,.14) !important;
  background: rgba(255,255,255,.65) !important;
}

html[data-v5thememode="light"] .nbv5-stickers-item:hover{
  background: rgba(255,255,255,.85) !important;
}

.nbv5-stickers-foot{
  flex: 0 0 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px 5px 10px;
  background: var(--v5-main-bg) !important;
  border-top: 1px solid rgba(255,255,255,.08);
}

html[data-v5thememode="light"] .nbv5-stickers-foot{
  border-top-color: rgba(0,0,0,.12);
}

.nbv5-stickers-poweredwrap{
  min-height: 16px;
}

.nbv5-stickers-resize{
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  align-self: flex-end;
}

/* V5 Build 617: light-theme GIF/sticker picker controls match emoticon picker contrast */
html[data-v5thememode="light"] .nbv5-giphy-head,
html[data-v5thememode="light"] .nbv5-stickers-head{
  color: #1f2328 !important;
}

html[data-v5thememode="light"] .nbv5-giphy-q,
html[data-v5thememode="light"] .nbv5-stickers-q{
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  color: #1f2328 !important;
}

html[data-v5thememode="light"] .nbv5-giphy-q::placeholder,
html[data-v5thememode="light"] .nbv5-stickers-q::placeholder{
  color: rgba(31,35,40,.65) !important;
}

html[data-v5thememode="light"] .nbv5-giphy-more,
html[data-v5thememode="light"] .nbv5-giphy-reset,
html[data-v5thememode="light"] .nbv5-giphy-x,
html[data-v5thememode="light"] .nbv5-stickers-more,
html[data-v5thememode="light"] .nbv5-stickers-reset,
html[data-v5thememode="light"] .nbv5-stickers-x{
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  color: #1f2328 !important;
}

html[data-v5thememode="light"] .nbv5-giphy-more:hover,
html[data-v5thememode="light"] .nbv5-giphy-reset:hover,
html[data-v5thememode="light"] .nbv5-giphy-x:hover,
html[data-v5thememode="light"] .nbv5-stickers-more:hover,
html[data-v5thememode="light"] .nbv5-stickers-reset:hover,
html[data-v5thememode="light"] .nbv5-stickers-x:hover{
  background: rgba(255,255,255,.72) !important;
}

html[data-v5thememode="light"] .nbv5-stickers-mode{
  background: rgba(255,255,255,.50) !important;
  border-color: rgba(0,0,0,.16) !important;
  color: rgba(31,35,40,.78) !important;
}

html[data-v5thememode="light"] .nbv5-stickers-mode:hover{
  background: rgba(255,255,255,.72) !important;
  color: #1f2328 !important;
}

html[data-v5thememode="light"] .nbv5-stickers-mode.is-active{
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(0,0,0,.28) !important;
  color: #1f2328 !important;
}

html[data-v5thememode="light"] .nbv5-giphy-hint{
  color: rgba(31,35,40,.72) !important;
}

/* V5 Build 618: sticker section headings use the same pane-aware contrast as emoticon sections */
#nbv5StickersPop .nbv5-stickers-sep{
  color: var(--nbv5-pane-sep-text-bright, var(--nbv5-pane-sep-text)) !important;
  border-top-color: var(--nbv5-pane-border) !important;
}
@supports (color: color-mix(in srgb, black 50%, white)) {
  #nbv5StickersPop .nbv5-stickers-sep{
    border-top-color: color-mix(in srgb, var(--nbv5-pane-border) 44%, var(--nbv5-pane-bg)) !important;
  }
}

/* V5 Build 626: unread divider + count-aware bottom jump */
.nbv5-line-new_messages{
  width: 100%;
  margin: .7rem 0 .45rem !important;
  gap: 0 !important;
}

.nbv5-line-new_messages + .nbv5-line{
  margin-top: 0;
}

.nbv5-newmsg-divider{
  --nbv5-newmsg-accent: var(--nbv5-left-tool-icon, var(--v5-theme-accent-2, #2f80b7));
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: .6rem;
  color: var(--nbv5-newmsg-accent);
}

.nbv5-newmsg-rule{
  flex: 1 1 auto;
  height: 1px;
  min-width: 16px;
  background: color-mix(in srgb, var(--nbv5-newmsg-accent) 34%, transparent);
}

.nbv5-newmsg-pill{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  min-height: 27px;
  padding: .22rem .55rem .22rem .42rem;
  border: 1px solid var(--nbv5-left-tool-border, var(--nbv5-pane-border));
  border-radius: 999px;
  background: var(--nbv5-left-tool-bg, var(--nbv5-pane-bg));
  color: var(--nbv5-newmsg-accent);
  font-size: .76em;
  font-weight: 750;
  letter-spacing: .01em;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,.09);
}

.nbv5-newmsg-pill > i{
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--nbv5-newmsg-accent);
  color: var(--nbv5-pane-bg);
  font-size: .62rem;
}

.nbv5-newmsg-count,
.nbv5-newmsg-mentions{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 19px;
  padding: 0 .34rem;
  border-radius: 999px;
  font-size: .88em;
  font-weight: 800;
}

.nbv5-newmsg-count{
  background: var(--nbv5-newmsg-accent);
  color: var(--nbv5-pane-bg);
}

.nbv5-newmsg-mentions{
  border: 1px solid color-mix(in srgb, var(--nbv5-newmsg-accent) 28%, transparent);
  background: color-mix(in srgb, var(--nbv5-newmsg-accent) 10%, transparent);
  color: var(--nbv5-newmsg-accent);
}

.nbv5-scroll-bottom-btn{
  --nbv5-scroll-accent: var(--nbv5-theme-nicklist-text, var(--nbv5-link, var(--v5-theme-accent-2, #2f80b7)));
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 34px;
  padding: .35rem .58rem .35rem .42rem !important;
  border: 1px solid color-mix(in srgb, var(--nbv5-scroll-accent) 24%, var(--nbv5-pane-border)) !important;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nbv5-pane-bg) 94%, var(--nbv5-pane-text) 6%) !important;
  color: var(--nbv5-scroll-accent) !important;
  font-size: .82em;
  font-weight: 750;
  letter-spacing: .01em;
  box-shadow: 0 7px 18px rgba(0,0,0,.16);
  backdrop-filter: blur(8px);
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}

.nbv5-scroll-bottom-btn > i{
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--nbv5-scroll-accent);
  color: var(--nbv5-pane-bg);
  font-size: .68rem;
}

.nbv5-scroll-bottom-label{
  white-space: nowrap;
}

.nbv5-scroll-bottom-mentions{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 21px;
  padding: 0 .38rem;
  border: 1px solid color-mix(in srgb, var(--nbv5-scroll-accent) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--nbv5-scroll-accent) 11%, transparent);
  color: var(--nbv5-scroll-accent);
  font-size: .88em;
  font-weight: 800;
}

.nbv5-scroll-bottom-btn:hover{
  background: color-mix(in srgb, var(--nbv5-pane-bg) 84%, var(--nbv5-scroll-accent) 16%) !important;
  border-color: color-mix(in srgb, var(--nbv5-scroll-accent) 48%, var(--nbv5-pane-border)) !important;
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(0,0,0,.19);
  filter: none;
}

.nbv5-scroll-bottom-btn:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--nbv5-scroll-accent) 58%, transparent);
  outline-offset: 2px;
}

@media (max-width: 575.98px){
  .nbv5-newmsg-divider{
    gap: .42rem;
  }

  .nbv5-newmsg-pill{
    font-size: .72em;
  }

  .nbv5-scroll-bottom-btn{
    min-height: 32px;
    padding: .3rem .5rem .3rem .36rem !important;
  }
}

/* V5 Build 629: compact transcript search + local custom word highlights */
.nbv5-transcript-search{
  --nbv5-search-accent: var(--nbv5-theme-nicklist-text, var(--nbv5-link, var(--v5-theme-accent-2, #2f80b7)));
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 46px;
  padding: .42rem .7rem;
  border-bottom: 1px solid var(--nbv5-pane-border);
  background: color-mix(in srgb, var(--nbv5-pane-bg) 92%, var(--nbv5-search-accent) 8%);
  color: var(--nbv5-pane-text);
  box-shadow: 0 5px 16px rgba(0,0,0,.08);
  z-index: 24;
}

.nbv5-transcript-search-scope{
  flex: 0 0 auto;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: .25rem .48rem;
  border: 1px solid color-mix(in srgb, var(--nbv5-search-accent) 25%, var(--nbv5-pane-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--nbv5-search-accent) 10%, transparent);
  color: var(--nbv5-search-accent);
  font-size: .74rem;
  font-weight: 750;
}

.nbv5-transcript-search-box{
  position: relative;
  flex: 1 1 260px;
  min-width: 120px;
}

.nbv5-transcript-search-box > i{
  position: absolute;
  left: .62rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nbv5-search-accent);
  font-size: .78rem;
  pointer-events: none;
  z-index: 2;
}

.nbv5-transcript-search-box .form-control{
  min-height: 32px;
  padding-left: 1.85rem;
  border-color: color-mix(in srgb, var(--nbv5-search-accent) 22%, var(--nbv5-pane-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--nbv5-pane-bg) 96%, var(--nbv5-pane-text) 4%);
  color: var(--nbv5-pane-text);
  box-shadow: none;
}

.nbv5-transcript-search-box .form-control:focus{
  border-color: var(--nbv5-search-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nbv5-search-accent) 17%, transparent);
}

.nbv5-transcript-search-count{
  flex: 0 0 auto;
  min-width: 74px;
  color: color-mix(in srgb, var(--nbv5-pane-text) 70%, transparent);
  font-size: .76rem;
  font-weight: 650;
  text-align: right;
  white-space: nowrap;
}

.nbv5-transcript-search-actions{
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  flex: 0 0 auto;
}

.nbv5-transcript-search-btn{
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--nbv5-search-accent) 24%, var(--nbv5-pane-border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--nbv5-pane-bg) 94%, var(--nbv5-pane-text) 6%);
  color: var(--nbv5-search-accent);
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}

.nbv5-transcript-search-btn:hover:not(:disabled){
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--nbv5-pane-bg) 84%, var(--nbv5-search-accent) 16%);
  border-color: color-mix(in srgb, var(--nbv5-search-accent) 48%, var(--nbv5-pane-border));
}

.nbv5-transcript-search-btn:disabled{
  opacity: .38;
  cursor: default;
}

.nbv5-line.is-custom-highlight:not(.is-mention){
  --nbv5-highlight-accent: var(--nbv5-left-tool-icon, var(--v5-theme-accent-2, #2f80b7));
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--nbv5-highlight-accent) 19%, transparent) 0%,
    color-mix(in srgb, var(--nbv5-highlight-accent) 7%, transparent) 100%) !important;
  border-left: 3px solid color-mix(in srgb, var(--nbv5-highlight-accent) 82%, transparent);
  padding-left: 8px;
  border-radius: 8px;
}

.nbv5-line.is-search-match{
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nbv5-left-tool-icon, #2f80b7) 40%, transparent);
  border-radius: 8px;
}

.nbv5-line.is-search-current{
  position: relative;
  box-shadow:
    inset 0 0 0 2px var(--nbv5-left-tool-icon, var(--v5-theme-accent-2, #2f80b7)),
    0 5px 16px rgba(0,0,0,.12);
  background: color-mix(in srgb, var(--nbv5-left-tool-icon, #2f80b7) 15%, var(--nbv5-pane-bg)) !important;
}

.nbv5-line.is-search-current::after{
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  width: 4px;
  height: 58%;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--nbv5-left-tool-icon, var(--v5-theme-accent-2, #2f80b7));
}

.nbv5-highlight-words-label{
  margin-bottom: .35rem;
  padding-inline: .5rem;
  font-weight: 700;
}

.nbv5-highlight-words-input{
  min-height: 78px;
  resize: vertical;
  background: color-mix(in srgb, var(--nbv5-pane-bg) 97%, var(--nbv5-pane-text) 3%);
  color: var(--nbv5-pane-text);
  border-color: var(--nbv5-pane-border);
}

.nbv5-highlight-words-input:focus{
  border-color: var(--nbv5-left-tool-icon, var(--v5-theme-accent-2, #2f80b7));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nbv5-left-tool-icon, #2f80b7) 15%, transparent);
}

.nbv5-highlight-words-help{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .38rem;
  margin-bottom: .65rem;
  padding-inline: .5rem;
}

.nbv5-notification-permission{
  padding-inline: .5rem;
}

.nbv5-highlight-words-count{
  flex: 0 0 auto;
  padding: .12rem .42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nbv5-left-tool-icon, #2f80b7) 10%, transparent);
  color: var(--nbv5-left-tool-icon, var(--v5-theme-accent-2, #2f80b7));
  font-size: .72rem;
  font-weight: 750;
  white-space: nowrap;
}

@media (max-width: 767.98px){
  .nbv5-transcript-search{
    flex-wrap: wrap;
    gap: .35rem;
    padding: .38rem .5rem;
  }

  .nbv5-transcript-search-scope{
    order: 1;
    max-width: 110px;
  }

  .nbv5-transcript-search-box{
    order: 2;
    flex-basis: calc(100% - 126px);
  }

  .nbv5-transcript-search-count{
    order: 3;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    padding-left: .2rem;
  }

  .nbv5-transcript-search-actions{
    order: 4;
  }
}

@media (max-width: 420px){
  .nbv5-transcript-search-scope{
    display: none;
  }

  .nbv5-transcript-search-box{
    flex-basis: 100%;
  }

  .nbv5-highlight-words-help{
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ===============================
   Control Panel category navigation (build 630)
   Replaces newspaper columns with predictable category-scoped grid order.
   =============================== */
.nbv5-control .nbv5-cp-search{
  position: static;
  top: auto;
  z-index: auto;
  margin: 12px 0 10px;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}

.nbv5-control .nbv5-cp-categories{
  margin: 0 0 12px;
}

.nbv5-control .nbv5-cp-category-buttons{
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  padding: 3px;
  border: 1px solid var(--nbv5-cp-card-border);
  border-radius: 15px;
  background: var(--nbv5-cp-card-bg);
  box-shadow: var(--nbv5-cp-card-shadow);
  scrollbar-width: thin;
}

.nbv5-control .nbv5-cp-category-btn{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--nbv5-cp-sub);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.15;
  white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.nbv5-control .nbv5-cp-category-btn:hover{
  border-color: var(--nbv5-cp-tile-border);
  background: var(--nbv5-cp-soft-bg);
  color: var(--nbv5-cp-title);
}

.nbv5-control .nbv5-cp-category-btn:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nbv5-cp-focus) 18%, transparent);
}

.nbv5-control .nbv5-cp-category-btn.is-active{
  border-color: rgba(37,99,235,.35);
  background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(14,165,233,.09));
  color: #1d4ed8;
  box-shadow: 0 5px 12px rgba(37,99,235,.10);
}

[data-chat-tone="dark"] .nbv5-control .nbv5-cp-category-btn.is-active{
  border-color: rgba(96,165,250,.34);
  background: linear-gradient(135deg, rgba(96,165,250,.20), rgba(45,212,191,.08));
  color: #dbeafe;
}

.nbv5-control .nbv5-cp-category-selectwrap{
  display: none;
}

.nbv5-control .nbv5-cp-category-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 2px 12px;
  padding: 1px 2px;
}

.nbv5-control .nbv5-cp-category-ico{
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: var(--nbv5-cp-ico-bg);
  color: var(--nbv5-cp-ico-fg);
}

.nbv5-control .nbv5-cp-category-title{
  color: var(--nbv5-cp-title);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.15;
}

.nbv5-control .nbv5-cp-category-sub{
  margin-top: 2px;
  color: var(--nbv5-cp-sub);
  font-size: 11.5px;
  line-height: 1.3;
}

.nbv5-control .nbv5-cp-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 0;
  column-count: initial;
  column-gap: 12px;
}

.nbv5-control .nbv5-cp-grid > .nbv5-cp-card,
.nbv5-control .nbv5-cp-grid > .nbv5-cp-card.nbv5-cp-card-unotice{
  display: block;
  width: auto;
  margin: 0;
  break-inside: auto;
  -webkit-column-break-inside: auto;
  page-break-inside: auto;
  vertical-align: initial;
  column-span: none;
  scroll-margin-top: 16px;
}

.nbv5-control .nbv5-cp-grid > .nbv5-cp-span2{
  grid-column: 1 / -1;
}

.nbv5-control .nbv5-cp-searchresults{
  margin-top: 10px;
}

.nbv5-control .nbv5-cp-searchresult-section::before{
  content: "Category: ";
  font-weight: 650;
}

@media (min-width: 992px){
  .nbv5-control .nbv5-cp-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-count: initial;
  }
}

@media (max-width: 767.98px){
  .nbv5-control .nbv5-cp-category-buttons{
    display: none;
  }

  .nbv5-control .nbv5-cp-category-selectwrap{
    display: block;
  }

  .nbv5-control .nbv5-cp-category-select{
    min-height: 42px;
    border-color: var(--nbv5-cp-card-border);
    background-color: var(--nbv5-cp-card-bg);
    color: var(--nbv5-cp-title);
    box-shadow: var(--nbv5-cp-card-shadow);
  }

  .nbv5-control .nbv5-cp-category-head{
    margin-top: 4px;
  }
}

/* V5: curated self-nickname colors.
   Every user-facing choice has a darker light-pane shade and a brighter
   dark-pane shade. Theme default is neutral teal and may be overridden by a
   theme through --nbv5-nick-self-theme-light / -dark. */
:root {
  --nbv5-nick-self-theme-light: #0F766E;
  --nbv5-nick-self-theme-dark: #5EEAD4;
}

:root[data-chat-tone="light"] {
  --nbv5-nick-self: var(--nbv5-nick-self-theme-light);
}

:root[data-chat-tone="dark"] {
  --nbv5-nick-self: var(--nbv5-nick-self-theme-dark);
}

:root[data-chat-tone="light"][data-self-nick-color="blue"] { --nbv5-nick-self: #1D4ED8; }
:root[data-chat-tone="dark"][data-self-nick-color="blue"] { --nbv5-nick-self: #93C5FD; }
:root[data-chat-tone="light"][data-self-nick-color="teal"] { --nbv5-nick-self: #0F766E; }
:root[data-chat-tone="dark"][data-self-nick-color="teal"] { --nbv5-nick-self: #5EEAD4; }
:root[data-chat-tone="light"][data-self-nick-color="green"] { --nbv5-nick-self: #15803D; }
:root[data-chat-tone="dark"][data-self-nick-color="green"] { --nbv5-nick-self: #86EFAC; }
:root[data-chat-tone="light"][data-self-nick-color="gold"] { --nbv5-nick-self: #8A5A00; }
:root[data-chat-tone="dark"][data-self-nick-color="gold"] { --nbv5-nick-self: #FDE047; }
:root[data-chat-tone="light"][data-self-nick-color="orange"] { --nbv5-nick-self: #C2410C; }
:root[data-chat-tone="dark"][data-self-nick-color="orange"] { --nbv5-nick-self: #FDBA74; }
:root[data-chat-tone="light"][data-self-nick-color="red"] { --nbv5-nick-self: #B91C1C; }
:root[data-chat-tone="dark"][data-self-nick-color="red"] { --nbv5-nick-self: #FCA5A5; }
:root[data-chat-tone="light"][data-self-nick-color="pink"] { --nbv5-nick-self: #BE185D; }
:root[data-chat-tone="dark"][data-self-nick-color="pink"] { --nbv5-nick-self: #F9A8D4; }
:root[data-chat-tone="light"][data-self-nick-color="purple"] { --nbv5-nick-self: #7E22CE; }
:root[data-chat-tone="dark"][data-self-nick-color="purple"] { --nbv5-nick-self: #C4B5FD; }

/* V5: curated local colors for /me action messages.
   Default preserves the established muted brown on light panes and uses a
   brighter matching brown on dark panes. The preference changes only local
   rendering; it is never transmitted with the IRC ACTION payload. */
:root {
  --nbv5-action-message-default-light: #8A6A3F;
  --nbv5-action-message-default-dark: #D6B98A;
  --nbv5-action-message-color: var(--nbv5-action-message-default-light);
}

:root[data-chat-tone="light"] {
  --nbv5-action-message-color: var(--nbv5-action-message-default-light);
}

:root[data-chat-tone="dark"] {
  --nbv5-action-message-color: var(--nbv5-action-message-default-dark);
}

:root[data-chat-tone="light"][data-action-message-color="blue"] { --nbv5-action-message-color: #1D4ED8; }
:root[data-chat-tone="dark"][data-action-message-color="blue"] { --nbv5-action-message-color: #93C5FD; }
:root[data-chat-tone="light"][data-action-message-color="teal"] { --nbv5-action-message-color: #0F766E; }
:root[data-chat-tone="dark"][data-action-message-color="teal"] { --nbv5-action-message-color: #5EEAD4; }
:root[data-chat-tone="light"][data-action-message-color="green"] { --nbv5-action-message-color: #15803D; }
:root[data-chat-tone="dark"][data-action-message-color="green"] { --nbv5-action-message-color: #86EFAC; }
:root[data-chat-tone="light"][data-action-message-color="gold"] { --nbv5-action-message-color: #8A5A00; }
:root[data-chat-tone="dark"][data-action-message-color="gold"] { --nbv5-action-message-color: #FDE047; }
:root[data-chat-tone="light"][data-action-message-color="orange"] { --nbv5-action-message-color: #C2410C; }
:root[data-chat-tone="dark"][data-action-message-color="orange"] { --nbv5-action-message-color: #FDBA74; }
:root[data-chat-tone="light"][data-action-message-color="red"] { --nbv5-action-message-color: #B91C1C; }
:root[data-chat-tone="dark"][data-action-message-color="red"] { --nbv5-action-message-color: #FCA5A5; }
:root[data-chat-tone="light"][data-action-message-color="pink"] { --nbv5-action-message-color: #BE185D; }
:root[data-chat-tone="dark"][data-action-message-color="pink"] { --nbv5-action-message-color: #F9A8D4; }
:root[data-chat-tone="light"][data-action-message-color="purple"] { --nbv5-action-message-color: #7E22CE; }
:root[data-chat-tone="dark"][data-action-message-color="purple"] { --nbv5-action-message-color: #C4B5FD; }

.nbv5-sysline-action,
.nbv5-pill-action {
  color: var(--nbv5-action-message-color, #8A6A3F) !important;
}


/* V5 Build 649: compact media launchers for floating legacy whisper windows. */
.nbv5-whwin{
  min-width: 260px;
  min-height: 240px;
  container-type: inline-size;
}

.nbv5-whwin-foot{
  align-items: center;
}

.nbv5-whwin-media{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nbv5-whwin-mediabtn{
  width: 38px;
  min-width: 38px;
  height: var(--nbv5-whisper-input-box-height, 40px) !important;
  min-height: var(--nbv5-whisper-input-box-height, 40px) !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 11px !important;
  background: color-mix(in srgb, var(--v5-paneheader-bg, #285e82) 72%, var(--v5-main-bg) 28%) !important;
  border: 1px solid color-mix(in srgb, var(--v5-paneheader-bg, #285e82) 76%, #ffffff 24%) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.nbv5-whwin-mediabtn:hover,
.nbv5-whwin-mediabtn:focus-visible{
  filter: brightness(1.12) saturate(1.05);
  color: #ffffff !important;
}

.nbv5-whwin-gifbtn span{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
}

@container (max-width: 470px){
  .nbv5-whwin-foot{
    flex-wrap: wrap;
    gap: 4px;
    padding-inline: 6px;
  }
  .nbv5-whwin-foot .nbv5-composer-input-wrap{
    order: 1;
    flex: 1 1 calc(100% - 58px);
  }
  .nbv5-whwin-send{
    order: 1;
    padding-inline: 8px !important;
  }
  .nbv5-whwin-media{
    order: 2;
    flex: 1 1 100%;
    gap: 3px;
  }
  .nbv5-whwin-mediabtn{
    width: 34px;
    min-width: 34px;
  }
}

@media (max-width: 576px){
  .nbv5-whwin{
    min-width: 0;
  }
}

/* Shared picker destination banner. Shown only while a picker is locked to a whisper. */
.nbv5-picker-target{
  width: 100%;
  min-height: 26px;
  display: none;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.18);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  cursor: default;
}

.nbv5-picker-target i{
  flex: 0 0 auto;
  font-size: 11px;
}

.nbv5-picker-target span{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-v5thememode="light"] .nbv5-picker-target{
  background: rgba(255,255,255,.58);
  border-color: rgba(0,0,0,.18);
  color: #1f2328;
}

/* ========================================================================== 
   V5 Build 653: modern Control Panel / Essentials dashboard
   Keeps the existing preference engine and automatic saving while replacing
   the dense V4-style form layout with a task-oriented settings workspace.
   Build 674 aligns Settings with the Help Center's pane-aware color system.
   ========================================================================== */
.nbv5-control{
  --nbv5-cp-accent: color-mix(in srgb, var(--nbv5-link, #2f80b7) 82%, var(--nbv5-pane-text) 18%);
  --nbv5-cp-accent-hover: color-mix(in srgb, var(--nbv5-link-hover, #2563eb) 82%, var(--nbv5-pane-text) 18%);
  --nbv5-cp-accent-soft: color-mix(in srgb, var(--nbv5-cp-accent) 11%, transparent);
  --nbv5-cp-accent-border: color-mix(in srgb, var(--nbv5-cp-accent) 32%, var(--nbv5-pane-border));
  --nbv5-cp-page-bg: var(--nbv5-pane-bg);
  --nbv5-cp-surface: var(--nbv5-pane-bg);
  --nbv5-cp-surface-raised: var(--nbv5-pane-item-hover);
  --nbv5-cp-row-bg: var(--nbv5-pane-item-hover);
  --nbv5-cp-row-hover: color-mix(in srgb, var(--nbv5-cp-accent) 9%, var(--nbv5-pane-bg));
  --nbv5-cp-muted: color-mix(in srgb, var(--nbv5-pane-text) 67%, transparent);
  --nbv5-cp-shadow-lg: 0 12px 30px rgba(15, 23, 42, .09);
  --nbv5-cp-shadow-md: 0 6px 18px rgba(15, 23, 42, .06);
  background: var(--nbv5-cp-page-bg);
  color: var(--nbv5-pane-text);
}

[data-chat-tone="dark"] .nbv5-control{
  --nbv5-cp-page-bg: var(--nbv5-pane-bg);
  --nbv5-cp-surface: var(--nbv5-pane-bg);
  --nbv5-cp-surface-raised: var(--nbv5-pane-item-hover);
  --nbv5-cp-row-bg: var(--nbv5-pane-item-hover);
  --nbv5-cp-row-hover: color-mix(in srgb, var(--nbv5-cp-accent) 14%, var(--nbv5-pane-bg));
  --nbv5-cp-shadow-lg: 0 14px 34px rgba(0, 0, 0, .26);
  --nbv5-cp-shadow-md: 0 7px 20px rgba(0, 0, 0, .22);
}

/* Header */
.nbv5-control .nbv5-control-head{
  flex: 0 0 auto;
  min-height: 72px;
  gap: 18px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--nbv5-pane-border);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--nbv5-pane-bg) 92%, var(--nbv5-cp-accent) 8%),
    color-mix(in srgb, var(--nbv5-pane-bg) 97%, var(--nbv5-cp-accent-hover) 3%)
  );
  box-shadow: 0 3px 14px rgba(15, 23, 42, .055);
  backdrop-filter: blur(14px);
  z-index: 5;
}

.nbv5-control .nbv5-control-titlewrap,
.nbv5-control .nbv5-control-headtools,
.nbv5-control .nbv5-cp-headleft{
  display: flex;
  align-items: center;
}

.nbv5-control .nbv5-control-titlewrap{
  gap: 12px;
  min-width: 230px;
}

.nbv5-control .nbv5-control-titleicon{
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid var(--nbv5-cp-accent-border);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--nbv5-cp-accent-soft), color-mix(in srgb, var(--nbv5-cp-accent) 4%, transparent));
  color: var(--nbv5-cp-accent);
  font-size: 17px;
}

.nbv5-control .nbv5-control-title{
  color: var(--nbv5-pane-text);
  font-size: 17px;
  font-weight: 850;
  line-height: 1.12;
  letter-spacing: -.015em;
}

.nbv5-control .nbv5-control-subtitle{
  margin-top: 3px;
  color: var(--nbv5-cp-muted);
  font-size: 13px;
  line-height: 1.3;
}

.nbv5-control .nbv5-control-headtools{
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
  flex-wrap: wrap;
}

.nbv5-control .nbv5-cp-save-status{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, #16a34a 25%, var(--nbv5-pane-border));
  border-radius: 999px;
  background: color-mix(in srgb, #16a34a 8%, var(--nbv5-pane-bg));
  color: color-mix(in srgb, #15803d 78%, var(--nbv5-pane-text));
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}

[data-chat-tone="dark"] .nbv5-control .nbv5-cp-save-status{
  color: #86efac;
}

.nbv5-control .nbv5-cp-save-status.is-saved{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, #22c55e 54%, var(--nbv5-pane-border));
  background: color-mix(in srgb, #22c55e 16%, var(--nbv5-pane-bg));
}

.nbv5-control .nbv5-cp-mode{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 40px;
  padding: 3px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 12px;
  background: var(--nbv5-cp-row-bg);
}

.nbv5-control .nbv5-cp-mode .btn{
  min-height: 32px;
  padding: 5px 12px;
  border: 0;
  border-radius: 9px;
  color: var(--nbv5-cp-muted);
  font-size: 12.5px;
  font-weight: 800;
  box-shadow: none !important;
}

.nbv5-control .nbv5-cp-mode .btn:hover{
  color: var(--nbv5-pane-text);
  background: color-mix(in srgb, var(--nbv5-pane-text) 6%, transparent);
}

/* Build 654: keep the selected Essentials/Advanced mode readable on every pane tone. */
.nbv5-control .nbv5-cp-mode .btn.is-active{
  background: color-mix(in srgb, var(--nbv5-cp-accent) 14%, var(--nbv5-pane-bg));
  color: var(--nbv5-cp-accent);
  box-shadow:
    inset 0 0 0 1px var(--nbv5-cp-accent-border),
    0 2px 8px rgba(15, 23, 42, .10) !important;
}

.nbv5-control .nbv5-control-close{
  min-height: 40px;
  padding-inline: 13px;
  border-color: color-mix(in srgb, var(--nbv5-pane-border) 80%, var(--nbv5-cp-accent) 20%) !important;
  border-radius: 12px;
  background: color-mix(in srgb, var(--nbv5-pane-bg) 94%, var(--nbv5-pane-item-hover) 6%) !important;
  color: var(--nbv5-pane-text) !important;
  font-size: 12.5px;
  font-weight: 750;
}

.nbv5-control .nbv5-control-close:hover,
.nbv5-control .nbv5-control-close:focus-visible{
  border-color: color-mix(in srgb, var(--nbv5-cp-accent) 52%, var(--nbv5-pane-border)) !important;
  background: color-mix(in srgb, var(--nbv5-pane-bg) 82%, var(--nbv5-cp-accent) 18%) !important;
  color: var(--nbv5-pane-text) !important;
}

/* Scrollable body and natural-language search */
.nbv5-control .nbv5-control-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px 18px 26px;
  scrollbar-gutter: stable;
}

.nbv5-control .nbv5-cp-search{
  width: min(100%, 1480px);
  margin: 0 auto 14px;
}

.nbv5-control .nbv5-cp-searchlabel{
  display: block;
  margin: 0 0 7px 3px;
  color: var(--nbv5-pane-text);
  font-size: 13px;
  font-weight: 800;
}

.nbv5-control .nbv5-cp-searchbox{
  position: relative;
}

.nbv5-control .nbv5-cp-searchico{
  position: absolute;
  left: 15px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  color: var(--nbv5-cp-accent);
  pointer-events: none;
}

.nbv5-control .nbv5-cp-searchinput{
  min-height: 48px;
  padding: 10px 48px 10px 43px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 15px;
  background: var(--nbv5-cp-surface);
  color: var(--nbv5-pane-text);
  font-size: 14px;
  box-shadow: var(--nbv5-cp-shadow-md);
}

.nbv5-control .nbv5-cp-searchinput::placeholder{
  color: var(--nbv5-cp-muted);
  opacity: .82;
}

.nbv5-control .nbv5-cp-searchinput:focus{
  border-color: var(--nbv5-cp-accent);
  background: var(--nbv5-cp-surface);
  color: var(--nbv5-pane-text);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nbv5-cp-accent) 14%, transparent), var(--nbv5-cp-shadow-md);
}

.nbv5-control .nbv5-cp-searchclear{
  position: absolute;
  top: 50%;
  right: 8px;
  width: 34px;
  height: 34px;
  padding: 0;
  transform: translateY(-50%);
  border-radius: 10px;
  color: var(--nbv5-cp-muted);
}

.nbv5-control .nbv5-cp-searchresults{
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 16px;
  background: var(--nbv5-cp-surface);
  box-shadow: var(--nbv5-cp-shadow-lg);
}

.nbv5-control .nbv5-cp-searchresult{
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--nbv5-pane-text);
  text-align: left;
  transition: background-color .14s ease, border-color .14s ease, transform .14s ease;
}

.nbv5-control .nbv5-cp-searchresult:hover,
.nbv5-control .nbv5-cp-searchresult:focus-visible{
  border-color: var(--nbv5-cp-accent-border);
  background: var(--nbv5-cp-row-hover);
  transform: translateX(2px);
  outline: 0;
}

.nbv5-control .nbv5-cp-searchresult-icon{
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--nbv5-cp-accent-soft);
  color: var(--nbv5-cp-accent);
}

.nbv5-control .nbv5-cp-searchresult-main{
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.nbv5-control .nbv5-cp-searchresult-title{
  overflow: hidden;
  color: var(--nbv5-pane-text);
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nbv5-control .nbv5-cp-searchresult-section{
  color: var(--nbv5-cp-muted);
  font-size: 12.5px;
}

.nbv5-control .nbv5-cp-searchresult-section::before{
  content: none;
}

.nbv5-control .nbv5-cp-searchbadge{
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #7c3aed 11%, transparent);
  color: color-mix(in srgb, #7c3aed 76%, var(--nbv5-pane-text));
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.nbv5-control .nbv5-cp-searchnone{
  padding: 18px;
  color: var(--nbv5-cp-muted);
  font-size: 13px;
  text-align: center;
}

/* Desktop settings workspace */
.nbv5-control .nbv5-cp-workspace{
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  width: min(100%, 1480px);
  margin: 0 auto;
}

.nbv5-control .nbv5-cp-sidebar{
  position: sticky;
  top: 0;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 17px;
  background: var(--nbv5-cp-surface);
  box-shadow: var(--nbv5-cp-shadow-md);
}

.nbv5-control .nbv5-cp-sidebar-label{
  padding: 3px 7px 9px;
  color: var(--nbv5-cp-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.nbv5-control .nbv5-cp-category-buttons{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.nbv5-control .nbv5-cp-category-btn{
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 54px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--nbv5-pane-text);
  font-size: 13px;
  text-align: left;
  white-space: normal;
}

.nbv5-control .nbv5-cp-category-btn:hover{
  border-color: color-mix(in srgb, var(--nbv5-pane-border) 80%, transparent);
  background: var(--nbv5-cp-row-bg);
}

.nbv5-control .nbv5-cp-category-btn.is-active{
  border-color: var(--nbv5-cp-accent-border);
  background: linear-gradient(135deg, var(--nbv5-cp-accent-soft), color-mix(in srgb, var(--nbv5-cp-accent) 4%, transparent));
  color: var(--nbv5-pane-text);
  box-shadow: none;
}

.nbv5-control .nbv5-cp-category-btn.is-active::before{
  content: "";
  position: absolute;
  left: -1px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: var(--nbv5-cp-accent);
}

.nbv5-control .nbv5-cp-navicon{
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--nbv5-cp-row-bg);
  color: var(--nbv5-cp-accent);
}

.nbv5-control .nbv5-cp-category-btn.is-active .nbv5-cp-navicon{
  background: color-mix(in srgb, var(--nbv5-cp-accent) 16%, var(--nbv5-pane-bg));
}

.nbv5-control .nbv5-cp-navtext{
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.nbv5-control .nbv5-cp-navlabel{
  color: inherit;
  font-size: 13px;
  font-weight: 820;
  line-height: 1.15;
}

.nbv5-control .nbv5-cp-navsub{
  display: -webkit-box;
  overflow: hidden;
  color: var(--nbv5-cp-muted);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.22;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.nbv5-control .nbv5-cp-navarrow{
  color: var(--nbv5-cp-muted);
  font-size: 10px;
}

.nbv5-control .nbv5-cp-category-btn.is-active .nbv5-cp-navarrow{
  color: var(--nbv5-cp-accent);
}

.nbv5-control .nbv5-cp-category-selectwrap{
  display: none;
}

.nbv5-control .nbv5-cp-main{
  min-width: 0;
}

/* Essentials home */
.nbv5-control .nbv5-cp-home,
.nbv5-control .nbv5-cp-settingsview{
  width: min(100%, 1080px);
}

.nbv5-control .nbv5-cp-welcome{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 130px;
  padding: 22px 24px;
  border: 1px solid var(--nbv5-cp-accent-border);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 15%, color-mix(in srgb, var(--nbv5-cp-accent) 18%, transparent), transparent 34%),
    linear-gradient(135deg, var(--nbv5-cp-surface), color-mix(in srgb, var(--nbv5-cp-accent) 6%, var(--nbv5-pane-bg)));
  box-shadow: var(--nbv5-cp-shadow-lg);
}

.nbv5-control .nbv5-cp-eyebrow{
  margin-bottom: 4px;
  color: var(--nbv5-cp-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .085em;
  text-transform: uppercase;
}

.nbv5-control .nbv5-cp-welcome h2{
  margin: 0;
  color: var(--nbv5-pane-text);
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 880;
  line-height: 1.14;
  letter-spacing: -.025em;
}

.nbv5-control .nbv5-cp-welcome p{
  max-width: 680px;
  margin: 7px 0 0;
  color: var(--nbv5-cp-muted);
  font-size: 14px;
  line-height: 1.45;
}

.nbv5-control .nbv5-cp-welcome-icon{
  display: inline-grid;
  place-items: center;
  width: 74px;
  height: 74px;
  flex: 0 0 auto;
  border: 1px solid var(--nbv5-cp-accent-border);
  border-radius: 24px;
  background: color-mix(in srgb, var(--nbv5-cp-accent) 12%, var(--nbv5-pane-bg));
  color: var(--nbv5-cp-accent);
  font-size: 28px;
  transform: rotate(2deg);
}

.nbv5-control .nbv5-cp-quickchanges{
  margin-top: 18px;
}

.nbv5-control .nbv5-cp-section-title{
  margin: 0 3px 9px;
  color: var(--nbv5-pane-text);
  font-size: 14px;
  font-weight: 850;
}

.nbv5-control .nbv5-cp-preset-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.nbv5-control .nbv5-cp-preset{
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 76px;
  padding: 12px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 15px;
  background: var(--nbv5-cp-surface);
  color: var(--nbv5-pane-text);
  text-align: left;
  box-shadow: 0 4px 13px rgba(15, 23, 42, .045);
  transition: transform .14s ease, border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}

.nbv5-control .nbv5-cp-preset > i{
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--nbv5-cp-accent-soft);
  color: var(--nbv5-cp-accent);
}

.nbv5-control .nbv5-cp-preset span{
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.nbv5-control .nbv5-cp-preset strong{
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
}

.nbv5-control .nbv5-cp-preset small{
  color: var(--nbv5-cp-muted);
  font-size: 11.5px;
  line-height: 1.3;
}

.nbv5-control .nbv5-cp-preset:hover,
.nbv5-control .nbv5-cp-preset:focus-visible{
  border-color: var(--nbv5-cp-accent-border);
  background: var(--nbv5-cp-row-hover);
  box-shadow: var(--nbv5-cp-shadow-md);
  transform: translateY(-2px);
  outline: 0;
}

.nbv5-control .nbv5-cp-destination-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin-top: 0;
}

.nbv5-control .nbv5-cp-quickchanges + .nbv5-cp-section-title{
  margin-top: 20px;
}

.nbv5-control .nbv5-cp-destination{
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 13px;
  min-height: 108px;
  padding: 15px 16px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 17px;
  background: var(--nbv5-cp-surface);
  color: var(--nbv5-pane-text);
  text-align: left;
  box-shadow: 0 5px 16px rgba(15, 23, 42, .05);
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.nbv5-control .nbv5-cp-destination:hover,
.nbv5-control .nbv5-cp-destination:focus-visible{
  border-color: var(--nbv5-cp-accent-border);
  background: var(--nbv5-cp-row-hover);
  box-shadow: var(--nbv5-cp-shadow-md);
  transform: translateY(-2px);
  outline: 0;
}

.nbv5-control .nbv5-cp-destination-icon{
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--nbv5-cp-accent-soft);
  color: var(--nbv5-cp-accent);
  font-size: 17px;
}

.nbv5-control .nbv5-cp-destination-copy{
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.nbv5-control .nbv5-cp-destination-copy strong{
  color: var(--nbv5-pane-text);
  font-size: 15px;
  font-weight: 860;
  line-height: 1.15;
}

.nbv5-control .nbv5-cp-destination-copy small{
  color: var(--nbv5-cp-muted);
  font-size: 12.5px;
  line-height: 1.35;
}

.nbv5-control .nbv5-cp-destination-copy em{
  margin-top: 3px;
  overflow: hidden;
  color: var(--nbv5-cp-accent);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nbv5-control .nbv5-cp-destination > .fa-arrow-right{
  color: var(--nbv5-cp-muted);
  transition: transform .14s ease, color .14s ease;
}

.nbv5-control .nbv5-cp-destination:hover > .fa-arrow-right{
  color: var(--nbv5-cp-accent);
  transform: translateX(3px);
}

/* Selected category */
.nbv5-control .nbv5-cp-category-head{
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 13px;
  padding: 15px 17px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 17px;
  background: var(--nbv5-cp-surface);
  box-shadow: var(--nbv5-cp-shadow-md);
}

.nbv5-control .nbv5-cp-category-ico{
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--nbv5-cp-accent-border);
  border-radius: 14px;
  background: var(--nbv5-cp-accent-soft);
  color: var(--nbv5-cp-accent);
  font-size: 17px;
}

.nbv5-control .nbv5-cp-category-title{
  color: var(--nbv5-pane-text);
  font-size: 20px;
  font-weight: 880;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.nbv5-control .nbv5-cp-category-sub{
  margin-top: 4px;
  color: var(--nbv5-cp-muted);
  font-size: 13px;
  line-height: 1.35;
}

.nbv5-control .nbv5-cp-home-button{
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 11px;
  background: var(--nbv5-cp-row-bg);
  color: var(--nbv5-pane-text);
  font-size: 12px;
  font-weight: 780;
}

.nbv5-control .nbv5-cp-home-button:hover{
  border-color: var(--nbv5-cp-accent-border);
  background: var(--nbv5-cp-row-hover);
  color: var(--nbv5-cp-accent);
}

/* Cards: one clear surface, not boxes inside boxes */
.nbv5-control .nbv5-cp-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin: 0;
}

.nbv5-control .nbv5-cp-grid > .nbv5-cp-card,
.nbv5-control .nbv5-cp-card,
.nbv5-control .nbv5-cp-card:not(.nbv5-cp-card-format),
.nbv5-control .nbv5-cp-card-settings{
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 18px;
  background: var(--nbv5-cp-surface);
  color: var(--nbv5-pane-text);
  box-shadow: var(--nbv5-cp-shadow-md);
}

.nbv5-control .nbv5-cp-grid > .nbv5-cp-span2{
  grid-column: 1 / -1;
}

.nbv5-control .nbv5-cp-cardhead,
.nbv5-control .nbv5-cp-card-settings .nbv5-cp-cardhead,
.nbv5-control .nbv5-cp-card:not(.nbv5-cp-card-format) .nbv5-cp-cardhead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 68px;
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--nbv5-pane-border) 78%, transparent);
}

.nbv5-control .nbv5-cp-headleft{
  min-width: 0;
  gap: 11px;
}

.nbv5-control .nbv5-cp-card .nbv5-cp-ico,
.nbv5-control .nbv5-cp-card:not(.nbv5-cp-card-format) .nbv5-cp-ico,
.nbv5-control .nbv5-cp-card-settings .nbv5-cp-ico{
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 12px;
  background: var(--nbv5-cp-accent-soft);
  color: var(--nbv5-cp-accent);
  font-size: 15px;
}

.nbv5-control .nbv5-cp-card .nbv5-cp-title,
.nbv5-control .nbv5-cp-card:not(.nbv5-cp-card-format) .nbv5-cp-title,
.nbv5-control .nbv5-cp-card-settings .nbv5-cp-title{
  color: var(--nbv5-pane-text);
  font-size: 15px;
  font-weight: 860;
  line-height: 1.18;
}

.nbv5-control .nbv5-cp-card .nbv5-cp-sub,
.nbv5-control .nbv5-cp-card:not(.nbv5-cp-card-format) .nbv5-cp-sub,
.nbv5-control .nbv5-cp-card-settings .nbv5-cp-sub{
  margin-top: 3px;
  color: var(--nbv5-cp-muted);
  font-size: 12.5px;
  line-height: 1.35;
}

.nbv5-control .nbv5-cp-cardbody,
.nbv5-control .nbv5-cp-card-settings .nbv5-cp-cardbody{
  padding: 14px 16px 16px;
}

.nbv5-control .nbv5-cp-cardbody > :last-child{
  margin-bottom: 0;
}

/* Setting rows are large, plain-language targets. */
.nbv5-control .nbv5-control-row,
.nbv5-control .nbv5-cp-card-settings .nbv5-control-row,
.nbv5-control .nbv5-cp-card-language .nbv5-control-row,
.nbv5-control .nbv5-cp-card-flood .nbv5-control-row,
.nbv5-control .nbv5-cp-card-debug .nbv5-control-row{
  position: relative;
  min-height: 58px;
  margin: 0 0 8px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--nbv5-pane-border) 82%, transparent);
  border-radius: 13px;
  background: var(--nbv5-cp-row-bg);
  transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.nbv5-control .nbv5-control-row:last-child,
.nbv5-control .nbv5-cp-card-settings .nbv5-control-row:last-child{
  margin-bottom: 0;
}

.nbv5-control .nbv5-control-row.form-switch,
.nbv5-control .nbv5-cp-card-settings .nbv5-control-row.form-switch{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label switch" "help switch";
  align-items: center;
  column-gap: 12px;
  row-gap: 3px;
  padding: 11px 12px 11px 13px !important;
  cursor: pointer;
}

.nbv5-control .nbv5-control-row.form-switch:hover,
.nbv5-control .nbv5-cp-card-settings .nbv5-control-row.form-switch:hover{
  border-color: var(--nbv5-cp-accent-border);
  background: var(--nbv5-cp-row-hover);
}

.nbv5-control .nbv5-control-row.form-switch:focus-within{
  border-color: var(--nbv5-cp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nbv5-cp-accent) 12%, transparent);
}

.nbv5-control .nbv5-control-row.form-switch .form-check-input,
.nbv5-control .nbv5-cp-card-settings .nbv5-control-row.form-switch .form-check-input{
  grid-area: switch;
  width: 46px;
  height: 24px;
  margin: 0 !important;
  justify-self: end;
  cursor: pointer;
}

.nbv5-control .nbv5-control-row.form-switch .form-check-input:checked{
  border-color: var(--nbv5-cp-accent);
  background-color: var(--nbv5-cp-accent);
}

.nbv5-control .nbv5-control-row.form-switch .form-check-label,
.nbv5-control .nbv5-cp-card-settings .nbv5-control-row.form-switch .form-check-label{
  grid-area: label;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  color: var(--nbv5-pane-text);
  font-size: 14px;
  font-weight: 820;
  line-height: 1.28;
  cursor: pointer;
}

.nbv5-control .nbv5-control-row.form-switch .form-check-label::after{
  content: "Off";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nbv5-pane-text) 8%, transparent);
  color: var(--nbv5-cp-muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.nbv5-control .nbv5-control-row.form-switch .form-check-input:checked + .form-check-label::after{
  content: "On";
  background: var(--nbv5-cp-accent-soft);
  color: var(--nbv5-cp-accent);
}

.nbv5-control .nbv5-control-row.form-switch .nbv5-control-help,
.nbv5-control .nbv5-cp-card-settings .nbv5-control-row.form-switch .nbv5-control-help,
.nbv5-control .nbv5-control-row .nbv5-control-help,
.nbv5-control .nbv5-control-help,
.nbv5-control .nbv5-help{
  grid-area: help;
  margin: 0;
  color: var(--nbv5-cp-muted);
  font-size: 13px;
  line-height: 1.38;
}

.nbv5-control .form-label{
  color: var(--nbv5-pane-text);
  font-size: 13px;
  font-weight: 800;
}

.nbv5-control .form-control,
.nbv5-control .form-select{
  min-height: 42px;
  border-color: var(--nbv5-pane-border);
  border-radius: 11px;
  background-color: var(--nbv5-cp-surface-raised);
  color: var(--nbv5-pane-text);
  font-size: 13.5px;
}

.nbv5-control .form-control:focus,
.nbv5-control .form-select:focus{
  border-color: var(--nbv5-cp-accent);
  background-color: var(--nbv5-cp-surface-raised);
  color: var(--nbv5-pane-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nbv5-cp-accent) 13%, transparent);
}

/* Overall readability choice */
.nbv5-control .nbv5-cp-choicegroup{
  margin-bottom: 11px;
  padding: 15px;
  border: 1px solid var(--nbv5-cp-accent-border);
  border-radius: 15px;
  background: linear-gradient(135deg, var(--nbv5-cp-accent-soft), transparent 75%);
}

.nbv5-control .nbv5-cp-choice-title{
  color: var(--nbv5-pane-text);
  font-size: 14px;
  font-weight: 850;
}

.nbv5-control .nbv5-cp-choice-help{
  margin-top: 3px;
  color: var(--nbv5-cp-muted);
  font-size: 12.5px;
  line-height: 1.35;
}

.nbv5-control .nbv5-cp-segmented{
  display: inline-flex;
  gap: 4px;
  margin-top: 11px;
  padding: 4px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 12px;
  background: var(--nbv5-cp-row-bg);
}

.nbv5-control .nbv5-cp-segmented .btn{
  min-height: 36px;
  padding: 6px 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--nbv5-cp-muted);
  font-size: 12px;
  font-weight: 820;
  box-shadow: none;
}

.nbv5-control .nbv5-cp-segmented .btn.is-active,
.nbv5-control .nbv5-cp-segmented .btn.active{
  background: var(--nbv5-cp-surface);
  color: var(--nbv5-cp-accent);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .11);
}

.nbv5-control .nbv5-cp-reading-preview{
  margin-top: 12px;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 12px;
  background: var(--nbv5-pane-bg);
  color: var(--nbv5-pane-text);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nbv5-control .nbv5-cp-advanced-options{
  display: grid;
  gap: 8px;
}

/* My Chat Style: use the wide canvas as a visual editor. */
.nbv5-control .nbv5-cp-card-format .nbv5-cp-cardbody{
  padding: 16px 18px 18px;
}

.nbv5-control .nbv5-mylook-headactions{
  gap: 10px;
}

.nbv5-control .nbv5-mylook-state{
  min-height: 38px;
  margin: 0 0 13px;
  padding: 8px 11px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 11px;
  background: var(--nbv5-cp-row-bg);
  font-size: 12.5px;
}

.nbv5-control .nbv5-mylook-state.is-on{
  border-color: color-mix(in srgb, #16a34a 28%, var(--nbv5-pane-border));
  background: color-mix(in srgb, #16a34a 7%, var(--nbv5-pane-bg));
}

.nbv5-control .nbv5-mylook-statebadge{
  border-radius: 999px;
}

.nbv5-control .nbv5-mylook-disabled-note{
  padding: 18px;
  border: 1px dashed var(--nbv5-pane-border);
  border-radius: 13px;
  background: var(--nbv5-cp-row-bg);
  color: var(--nbv5-cp-muted);
  font-size: 13px;
  text-align: center;
}

.nbv5-control .nbv5-mylook-grid,
.nbv5-control .nbv5-mylook-controls{
  display: block;
}

.nbv5-control .nbv5-mylook-controls{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  align-items: start;
  gap: 16px;
}

.nbv5-control .nbv5-mylook-fieldset{
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.nbv5-control .nbv5-mylook-row{
  display: block;
  margin: 0;
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--nbv5-pane-border) 78%, transparent);
  border-radius: 0;
  background: transparent;
}

.nbv5-control .nbv5-mylook-row:first-child{
  padding-top: 1px;
}

.nbv5-control .nbv5-mylook-row:last-child{
  padding-bottom: 1px;
  border-bottom: 0;
}

.nbv5-control .nbv5-mylook-rowlabel,
.nbv5-control .nbv5-mylook-minilabel{
  display: block;
  margin: 0 0 8px;
  color: var(--nbv5-pane-text);
  font-size: 12px;
  font-weight: 880;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.nbv5-control .nbv5-mylook-inline{
  gap: 8px;
}

.nbv5-control .nbv5-mylook-fontstyle{
  display: grid;
  grid-template-columns: minmax(190px, 1fr) repeat(3, 42px);
  align-items: center;
  width: 100%;
}

.nbv5-control .nbv5-mylook-fontpicker{
  min-width: 0;
}

.nbv5-control .nbv5-mylook-fonttrigger{
  width: 100%;
  min-height: 42px;
  border-radius: 11px;
  font-size: 13.5px;
}

.nbv5-control .nbv5-mylook-btn{
  min-width: 40px;
  min-height: 40px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
}

.nbv5-control .nbv5-mylook-colorstack{
  display: grid;
  grid-template-columns: minmax(180px, .75fr) minmax(300px, 1.25fr);
  align-items: stretch;
  gap: 12px;
  width: 100%;
}

.nbv5-control .nbv5-mylook-colorpanel{
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 13px;
  background: var(--nbv5-cp-row-bg);
}

.nbv5-control .nbv5-mylook-color{
  width: 46px;
  min-width: 46px;
  height: 40px;
  padding: 4px;
  border-radius: 10px;
}

.nbv5-control .nbv5-mylook-hex{
  min-width: 104px;
}

.nbv5-control .nbv5-mylook-gradhead{
  min-height: 30px;
}

.nbv5-control .nbv5-mylook-gradtoggle{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

.nbv5-control .nbv5-mylook-gradient-presets{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 7px 0 12px;
}

.nbv5-control .nbv5-gradient-preset{
  width: 42px;
  height: 30px;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--nbv5-pane-bg) 65%, var(--nbv5-pane-text));
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
  transition: transform .12s ease, box-shadow .12s ease;
}

.nbv5-control .nbv5-gradient-preset:hover,
.nbv5-control .nbv5-gradient-preset:focus-visible{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 5px 12px rgba(15, 23, 42, .18);
  outline: 2px solid var(--nbv5-cp-accent);
  outline-offset: 2px;
}

.nbv5-control .nbv5-gradient-preset.is-purpleblue{ background: linear-gradient(90deg, #7c3aed, #2563eb); }
.nbv5-control .nbv5-gradient-preset.is-pinkpurple{ background: linear-gradient(90deg, #ec4899, #7c3aed); }
.nbv5-control .nbv5-gradient-preset.is-greenblue{ background: linear-gradient(90deg, #16a34a, #0ea5e9); }
.nbv5-control .nbv5-gradient-preset.is-fire{ background: linear-gradient(90deg, #dc2626, #f59e0b); }

.nbv5-control .nbv5-gradient-preset-label{
  color: var(--nbv5-cp-muted);
  font-size: 11.5px;
  font-weight: 700;
}

.nbv5-control .nbv5-mylook-gradfields{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.nbv5-control .nbv5-mylook-gradfields.is-off{
  opacity: .48;
  pointer-events: none;
}

.nbv5-control .nbv5-mylook-graddeg{
  width: min(150px, 100%);
}

.nbv5-control .nbv5-mylook-preview{
  position: sticky;
  top: 0;
  min-height: 190px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--nbv5-cp-accent-border);
  border-radius: 16px;
  background:
    radial-gradient(circle at 90% 15%, color-mix(in srgb, var(--nbv5-cp-accent) 12%, transparent), transparent 38%),
    var(--nbv5-cp-row-bg);
}

.nbv5-control .nbv5-mylook-preview-label{
  margin-bottom: 13px;
  color: var(--nbv5-cp-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nbv5-control .nbv5-mylook-preview-box{
  display: block;
  min-height: 104px;
  padding: 18px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 13px;
  background: var(--nbv5-pane-bg);
  color: var(--nbv5-pane-text);
  font-size: 17px;
  line-height: 1.55;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.nbv5-control .nbv5-mylook-preview-nick{
  color: var(--nbv5-nick-self, var(--nbv5-cp-accent));
  font-weight: 800;
}

.nbv5-control .nbv5-mylook-controls > .nbv5-control-help{
  grid-column: 1 / -1;
  padding-top: 2px;
}

/* Advanced mode remains readable; it simply reveals more controls. */
.nbv5-control.is-advanced-mode .nbv5-cp-card .nbv5-cp-sub,
.nbv5-control.is-advanced-mode .nbv5-control-help,
.nbv5-control.is-advanced-mode .nbv5-help{
  font-size: 12.5px;
}

.nbv5-control .nbv5-theme-range{
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 13px;
  background: var(--nbv5-cp-row-bg);
}

.nbv5-control .nbv5-theme-rangehead{
  margin-bottom: 8px;
}

.nbv5-control .nbv5-theme-rangelabel{
  color: var(--nbv5-pane-text);
  font-size: 13px;
  font-weight: 800;
}

.nbv5-control .nbv5-theme-rangeval{
  color: var(--nbv5-cp-accent);
  font-size: 12px;
  font-weight: 850;
}

.nbv5-control .nbv5-cp-card-ignore .btn,
.nbv5-control .nbv5-cp-card-tag .btn,
.nbv5-control .nbv5-cp-card-reset .btn{
  min-height: 40px;
  border-radius: 10px;
  font-weight: 750;
}

.nbv5-control .nbv5-cp-search-hit{
  animation: nbv5CpSearchHit653 1.65s ease;
}

@keyframes nbv5CpSearchHit653{
  0%, 100%{ box-shadow: var(--nbv5-cp-shadow-md); }
  25%, 70%{ box-shadow: 0 0 0 4px color-mix(in srgb, var(--nbv5-cp-accent) 22%, transparent), var(--nbv5-cp-shadow-lg); }
}

/* Responsive layout */
@media (max-width: 1199.98px){
  .nbv5-control .nbv5-cp-workspace{
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 14px;
  }

  .nbv5-control .nbv5-cp-preset-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nbv5-control .nbv5-mylook-controls{
    grid-template-columns: minmax(0, 1fr);
  }

  .nbv5-control .nbv5-mylook-preview{
    position: static;
    min-height: 0;
  }
}

@media (max-width: 899.98px){
  .nbv5-control .nbv5-control-head{
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .nbv5-control .nbv5-control-titlewrap{
    flex: 1 1 260px;
  }

  .nbv5-control .nbv5-control-headtools{
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .nbv5-control .nbv5-cp-save-status{
    margin-right: auto;
  }

  .nbv5-control .nbv5-cp-workspace{
    display: block;
  }

  .nbv5-control .nbv5-cp-sidebar{
    position: static;
    margin-bottom: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .nbv5-control .nbv5-cp-sidebar-label,
  .nbv5-control .nbv5-cp-category-buttons{
    display: none;
  }

  .nbv5-control .nbv5-cp-category-selectwrap{
    display: block;
    padding: 11px;
    border: 1px solid var(--nbv5-pane-border);
    border-radius: 14px;
    background: var(--nbv5-cp-surface);
    box-shadow: var(--nbv5-cp-shadow-md);
  }

  .nbv5-control .nbv5-cp-category-selectwrap .form-label{
    margin-bottom: 5px;
  }

  .nbv5-control .nbv5-cp-category-select{
    min-height: 44px;
    background-color: var(--nbv5-cp-surface-raised);
    color: var(--nbv5-pane-text);
  }

  .nbv5-control .nbv5-cp-home,
  .nbv5-control .nbv5-cp-settingsview{
    width: 100%;
  }
}

@media (max-width: 767.98px){
  .nbv5-control .nbv5-control-body{
    padding: 12px 10px 22px;
  }

  .nbv5-control .nbv5-control-head{
    padding: 10px 11px;
  }

  .nbv5-control .nbv5-control-titleicon{
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .nbv5-control .nbv5-cp-save-status{
    order: 3;
    width: 100%;
    justify-content: center;
  }

  .nbv5-control .nbv5-cp-mode{
    flex: 1 1 auto;
  }

  .nbv5-control .nbv5-cp-mode .btn{
    flex: 1 1 50%;
  }

  .nbv5-control .nbv5-cp-searchlabel{
    margin-left: 1px;
  }

  .nbv5-control .nbv5-cp-searchinput{
    font-size: 13px;
  }

  .nbv5-control .nbv5-cp-welcome{
    min-height: 0;
    padding: 18px;
  }

  .nbv5-control .nbv5-cp-welcome-icon{
    width: 58px;
    height: 58px;
    border-radius: 18px;
    font-size: 22px;
  }

  .nbv5-control .nbv5-cp-destination-grid,
  .nbv5-control .nbv5-cp-grid{
    grid-template-columns: minmax(0, 1fr);
  }

  .nbv5-control .nbv5-cp-grid > .nbv5-cp-span2{
    grid-column: auto;
  }

  .nbv5-control .nbv5-cp-category-head{
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 13px;
  }

  .nbv5-control .nbv5-cp-category-ico{
    width: 42px;
    height: 42px;
  }

  .nbv5-control .nbv5-cp-home-button{
    grid-column: 1 / -1;
    width: 100%;
  }

  .nbv5-control .nbv5-mylook-colorstack{
    grid-template-columns: minmax(0, 1fr);
  }

  .nbv5-control .nbv5-mylook-fontstyle{
    grid-template-columns: minmax(150px, 1fr) repeat(3, 40px);
  }

  .nbv5-control .nbv5-cp-searchresult{
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .nbv5-control .nbv5-cp-searchbadge{
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 499.98px){
  .nbv5-control .nbv5-control-headtools{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
  }

  .nbv5-control .nbv5-cp-save-status{
    grid-column: 1 / -1;
  }

  .nbv5-control .nbv5-control-close{
    padding-inline: 10px;
  }

  .nbv5-control .nbv5-cp-welcome-icon{
    display: none;
  }

  .nbv5-control .nbv5-cp-preset-grid{
    grid-template-columns: minmax(0, 1fr);
  }

  .nbv5-control .nbv5-cp-destination{
    min-height: 94px;
    padding: 13px;
  }

  .nbv5-control .nbv5-cp-cardhead,
  .nbv5-control .nbv5-cp-card-settings .nbv5-cp-cardhead,
  .nbv5-control .nbv5-cp-card:not(.nbv5-cp-card-format) .nbv5-cp-cardhead{
    align-items: flex-start;
    padding: 13px;
  }

  .nbv5-control .nbv5-cp-cardbody,
  .nbv5-control .nbv5-cp-card-settings .nbv5-cp-cardbody,
  .nbv5-control .nbv5-cp-card-format .nbv5-cp-cardbody{
    padding: 12px 13px 14px;
  }

  .nbv5-control .nbv5-mylook-head{
    flex-direction: column;
  }

  .nbv5-control .nbv5-mylook-headactions{
    width: 100%;
    justify-content: space-between;
  }

  .nbv5-control .nbv5-mylook-fontstyle{
    grid-template-columns: repeat(3, 40px);
  }

  .nbv5-control .nbv5-mylook-fontpicker{
    grid-column: 1 / -1;
  }

  .nbv5-control .nbv5-cp-segmented{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .nbv5-control .nbv5-cp-segmented .btn{
    padding-inline: 7px;
  }
}

/* Build 658: navigation-panel discovery coachmark and clearer Menu control. */
.nbv5-skin-v4 .nbv5-nav-toggle-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  z-index: 2200;
}

.nbv5-skin-v4 .nbv5-topbar-toggle-left {
  min-height: 30px;
  font-weight: 800;
}

.nbv5-skin-v4 .nbv5-topbar-toggle-left:focus-visible {
  outline: 2px solid rgba(255,255,255,.92);
  outline-offset: 2px;
}

.nbv5-skin-v4 .nbv5-topbar-toggle-left .nbv5-topbar-toggle-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}

.nbv5-skin-v4 .nbv5-nav-coachmark {
  position: absolute;
  top: calc(100% + 13px);
  left: 0;
  width: min(320px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 14px 12px;
  border: 1px solid var(--nbv5-pane-border, rgba(0,0,0,.18));
  border-radius: 12px;
  background: var(--nbv5-pane-bg, #ffffff) !important;
  color: var(--nbv5-pane-text, #252525) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  line-height: 1.3;
  text-align: left;
  z-index: 2300;
}

.nbv5-skin-v4 .nbv5-nav-coachmark::before,
.nbv5-skin-v4 .nbv5-nav-coachmark::after {
  content: "";
  position: absolute;
  left: 16px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
}

.nbv5-skin-v4 .nbv5-nav-coachmark::before {
  top: -10px;
  border-bottom: 10px solid var(--nbv5-pane-border, rgba(0,0,0,.18));
}

.nbv5-skin-v4 .nbv5-nav-coachmark::after {
  top: -8px;
  border-bottom: 9px solid var(--nbv5-pane-bg, #ffffff);
}

.nbv5-skin-v4 .nbv5-nav-coachmark-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--nbv5-link-color, #1f6feb) 14%, transparent) !important;
  color: var(--nbv5-link-color, #1f6feb) !important;
  font-size: 17px;
}

.nbv5-skin-v4 .nbv5-nav-coachmark-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nbv5-skin-v4 .nbv5-nav-coachmark-copy strong {
  color: var(--nbv5-pane-text-bright, var(--nbv5-pane-text, #1f1f1f));
  font-size: 14px;
}

.nbv5-skin-v4 .nbv5-nav-coachmark-copy span {
  color: var(--nbv5-pane-text, #3b3b3b);
  font-size: 12px;
}

.nbv5-skin-v4 .nbv5-nav-coachmark-gotit {
  align-self: end;
  border: 1px solid color-mix(in srgb, var(--nbv5-link-color, #1f6feb) 55%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--nbv5-link-color, #1f6feb) 14%, transparent) !important;
  color: var(--nbv5-link-color, #1f6feb) !important;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.nbv5-skin-v4 .nbv5-nav-coachmark-gotit:hover,
.nbv5-skin-v4 .nbv5-nav-coachmark-gotit:focus-visible {
  background: color-mix(in srgb, var(--nbv5-link-color, #1f6feb) 22%, transparent) !important;
}

.nbv5-skin-v4 .nbv5-nav-coachmark-close {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent !important;
  color: var(--nbv5-pane-text, #3b3b3b) !important;
  opacity: .68;
  cursor: pointer;
}

.nbv5-skin-v4 .nbv5-nav-coachmark-close:hover,
.nbv5-skin-v4 .nbv5-nav-coachmark-close:focus-visible {
  opacity: 1;
  background: var(--nbv5-pane-item-hover, rgba(0,0,0,.08)) !important;
}

@media (max-width: 767.98px) {
  .nbv5-skin-v4 .nbv5-topbar-toggle-left .nbv5-topbar-toggle-label {
    display: none;
  }

  .nbv5-skin-v4 .nbv5-nav-coachmark {
    width: min(300px, calc(100vw - 24px));
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 13px 34px 13px 11px;
  }

  .nbv5-skin-v4 .nbv5-nav-coachmark-icon {
    width: 34px;
    height: 34px;
  }

  .nbv5-skin-v4 .nbv5-nav-coachmark-gotit {
    grid-column: 2;
    justify-self: start;
    align-self: auto;
    margin-top: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nbv5-skin-v4 .nbv5-nav-coachmark {
    transition: none !important;
  }
}

/* Build 659: keep My Chat Style inside the Control Panel content column.
   The editor now responds to its own card width, which accounts for the
   navigation and People panes instead of relying only on viewport width. */
.nbv5-control .nbv5-cp-card-format {
  container-name: nbv5-mylook-card;
  container-type: inline-size;
}

.nbv5-control .nbv5-mylook-controls,
.nbv5-control .nbv5-mylook-fieldset,
.nbv5-control .nbv5-mylook-fontstyle,
.nbv5-control .nbv5-mylook-colorstack {
  min-width: 0;
  max-width: 100%;
}

.nbv5-control .nbv5-mylook-fontstyle,
.nbv5-control .nbv5-mylook-colorstack {
  justify-content: stretch;
}

.nbv5-control .nbv5-mylook-fontstyle {
  grid-template-columns: minmax(0, 1fr) repeat(3, 42px);
}

.nbv5-control .nbv5-mylook-colorstack {
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
}

@container nbv5-mylook-card (max-width: 860px) {
  .nbv5-control .nbv5-mylook-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .nbv5-control .nbv5-mylook-preview {
    position: static;
    min-height: 0;
  }
}

@container nbv5-mylook-card (max-width: 580px) {
  .nbv5-control .nbv5-mylook-colorstack {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Preserve the established phone layout after the Build 659 overrides. */
@media (max-width: 767.98px) {
  .nbv5-control .nbv5-mylook-colorstack {
    grid-template-columns: minmax(0, 1fr);
  }

  .nbv5-control .nbv5-mylook-fontstyle {
    grid-template-columns: minmax(150px, 1fr) repeat(3, 40px);
  }
}

@media (max-width: 499.98px) {
  .nbv5-control .nbv5-mylook-fontstyle {
    grid-template-columns: repeat(3, 40px);
  }

  .nbv5-control .nbv5-mylook-fontpicker {
    grid-column: 1 / -1;
  }
}



/* Build 663: collapsed-first navigation and naturally sized topbar branding. */
.nbv5-skin-v4 .nbv5-nav-coachmark {
  box-sizing: border-box;
}

.nbv5-skin-v4 .nbv5-topbar {
  container-name: nbv5-topbar;
  container-type: inline-size;
}

.nbv5-skin-v4 .nbv5-topbar-inner {
  min-width: 0;
}

.nbv5-skin-v4 .nbv5-brand {
  flex: 1 1 auto;
  min-width: 0;
}

.nbv5-skin-v4 .nbv5-topbar-right {
  flex: 0 0 auto;
  margin-left: auto;
}

.nbv5-skin-v4 .nbv5-roomwrap {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.nbv5-skin-v4 .nbv5-room {
  min-width: 0;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nbv5-skin-v4 .nbv5-topbar-branding {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 170px;
  height: 32px;
  overflow: hidden;
}

.nbv5-skin-v4 .nbv5-topbar-brandfallback {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
}

.nbv5-skin-v4 .nbv5-topbar-brandlogo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 30px;
  object-fit: contain;
  object-position: left center;
}

.nbv5-skin-v4 .nbv5-topbar-brandicon {
  display: block;
  width: auto;
  height: 28px;
  max-width: 38px;
  flex: 0 0 auto;
  object-fit: contain;
}

.nbv5-skin-v4 .nbv5-topbar-brandtext {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  font-family: "Luckiest Guy", "Anton", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .4px;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  user-select: none;
}

@container nbv5-topbar (max-width: 1080px) {
  .nbv5-skin-v4 .nbv5-topbar-branding {
    display: none !important;
  }
}

@container nbv5-topbar (max-width: 820px) {
  .nbv5-skin-v4 .nbv5-now {
    display: none !important;
  }
}

@container nbv5-topbar (max-width: 680px) {
  .nbv5-skin-v4 .nbv5-room-modes,
  .nbv5-skin-v4 .nbv5-roomlog-indicator {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .nbv5-skin-v4 .nbv5-topbar-branding {
    display: none !important;
  }
}

/* Build 669: keep Firefox Android off-canvas drawers out of the page scroll width. */
@media (max-width: 767.98px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }

  html.nbv5-noscroll,
  body.nbv5-noscroll {
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }
}

/* Build 670: prioritize typing width in the narrow mobile composer.
   Aa and Send action remain available in More tools while Send and Emoticons stay on the main row. */
.nbv5-mobile-secondary-menu-item{
  display: none;
}

@media (max-width: 575.98px){
  .nbv5-skin-v4 .nbv5-composer-input-wrap .nbv5-mobile-secondary-tool,
  .nbv5-composer-tooldock .nbv5-mobile-secondary-tool{
    display: none !important;
  }

  .nbv5-mobile-secondary-menu-item{
    display: flex;
  }

  .nbv5-skin-v4 .nbv5-center .nbv5-composer-mirror{
    right: 0 !important;
  }

  .nbv5-skin-v4 .nbv5-center .nbv5-composer-input-wrap .nbv5-composer-grad-swatch{
    right: 12px !important;
  }
}



/* ======================================================================
   Build 671: Settings naming, room-management dialogs, and header cleanup
   ====================================================================== */

/* The raw room modes remain available in Status and Room Modes; only the
   compact top-right header badge is hidden. */
.nbv5-skin-v4 .nbv5-room-modes{
  display: none !important;
}

/* Use a familiar gear for the user-facing Settings destination while
   retaining the existing internal ico-control hook. */
.nbv5-lp-ico.ico-control{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.43 12.98c.04-.32.07-.65.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98L14.5 3.42A.5.5 0 0 0 14 3h-4a.5.5 0 0 0-.5.42l-.38 2.65c-.61.25-1.17.58-1.69.98l-2.49-1a.5.5 0 0 0-.6.22l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65a.5.5 0 0 0-.12.64l2 3.46c.12.22.37.31.6.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.38-2.65c.61-.25 1.17-.58 1.69-.98l2.49 1c.23.08.48 0 .6-.22l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.43 12.98c.04-.32.07-.65.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98L14.5 3.42A.5.5 0 0 0 14 3h-4a.5.5 0 0 0-.5.42l-.38 2.65c-.61.25-1.17.58-1.69.98l-2.49-1a.5.5 0 0 0-.6.22l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65a.5.5 0 0 0-.12.64l2 3.46c.12.22.37.31.6.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.38-2.65c.61-.25 1.17-.58 1.69-.98l2.49 1c.23.08.48 0 .6-.22l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E");
}

/* Give only the chat-pane menu enough room for the Room Management heading. */
.nbv5-skin-v4 .nbv5-ctx-menu.is-chat{
  width: max-content;
  min-width: 224px;
  max-width: min(260px, calc(100vw - 16px));
}
.nbv5-skin-v4 .nbv5-ctx-menu.is-chat .nbv5-ctx-item.is-title .nbv5-ctx-label{
  overflow: visible;
  text-overflow: clip;
}

/* Shared room-management dialog language. Existing theme tokens continue to
   own the modal shell; these rules add structure without replacing them. */
.nbv5-roommanage-modal .nbv5-roommanage-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 66px;
  padding: 10px 14px !important;
}
.nbv5-roommanage-heading,
.nbv5-roommanage-headtools{
  display: flex;
  align-items: center;
  min-width: 0;
}
.nbv5-roommanage-heading{ gap: 11px; }
.nbv5-roommanage-headtools{ gap: 10px; flex: 0 0 auto; }
.nbv5-roommanage-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 11px;
  background: rgba(255,255,255,.10);
  color: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.nbv5-roommanage-headingcopy{ min-width: 0; }
.nbv5-roommanage-headingcopy .modal-title{
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
}
.nbv5-roommanage-subtitle{
  margin-top: 3px;
  max-width: 680px;
  font-size: 12px;
  line-height: 1.3;
  opacity: .78;
}
.nbv5-roommanage-busy{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(0,0,0,.12);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.nbv5-roommanage-body{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px 14px !important;
}
.nbv5-roommanage-section{
  margin: 0;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 13px;
  background: rgba(0,0,0,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.nbv5-roommanage-sectionhead{
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 11px;
}
.nbv5-roommanage-sectionicon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  border-radius: 8px;
  background: rgba(255,255,255,.10);
  color: var(--v5-accent-2, #f6c344);
}
.nbv5-roommanage-sectionhead h6,
.nbv5-roomaccess-actionhead h6{
  margin: 0;
  color: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}
.nbv5-roommanage-sectionhead p,
.nbv5-roomaccess-actionhead p{
  margin: 3px 0 0;
  font-size: 11px;
  line-height: 1.35;
  opacity: .68;
}
.nbv5-roommanage-field{ margin-bottom: 11px; }
.nbv5-roommanage-field .form-label{
  font-size: 12px;
  font-weight: 700;
}
.nbv5-roommanage-modal .form-control,
.nbv5-roommanage-modal .form-select,
.nbv5-roommanage-modal .input-group > .btn{
  min-height: 36px;
}
.nbv5-roommanage-modal .input-group > .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nbv5-roommanage-footnote{
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -1px 2px 0;
}

/* Room Modes grouping. */
#nbv5RoomSettingsModal .nbv5-roomprops-dialog,
#nbv5RoomModesModal .nbv5-roomprops-dialog{
  width: min(760px, calc(100vw - 20px)) !important;
}
.nbv5-roommode-status{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  background: rgba(0,0,0,.12);
}
.nbv5-roommode-status > div{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.nbv5-roommode-statuslabel{
  font-size: 11px;
  font-weight: 700;
  opacity: .72;
}
.nbv5-roommode-raw{
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 9px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  font-size: 12px;
  font-weight: 800;
}
.nbv5-roommode-immediate{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  opacity: .78;
  white-space: nowrap;
}
.nbv5-roommode-grid{
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 12px;
}
.nbv5-roommode-list{
  display: grid;
  gap: 7px;
}
.nbv5-roommode-list-two{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#nbv5RoomModesModal .nbv5-roommode-row{
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 37px;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 10px;
  background: rgba(255,255,255,.045);
}
#nbv5RoomModesModal .nbv5-roommode-row .form-check-input{
  float: none;
  flex: 0 0 auto;
  margin: 0;
}
#nbv5RoomModesModal .nbv5-roommode-row .form-check-label{
  min-width: 0;
  font-size: 12px;
  line-height: 1.25;
}
#nbv5RoomModesModal .nbv5-roommode-row:has(.form-check-input:checked){
  border-color: color-mix(in srgb, var(--v5-accent-2, #f6c344) 52%, transparent);
  background: color-mix(in srgb, var(--v5-accent-2, #f6c344) 12%, transparent);
}

/* Room Access controls. The table keeps the user's chat-pane background and
   text variables exactly as before. */
#nbv5RoomAccessModal .nbv5-roomaccess-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 !important;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  background: rgba(0,0,0,.10);
}
#nbv5RoomAccessModal .nbv5-roomaccess-tabs{
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(84px, 1fr));
  gap: 4px;
  padding: 0;
  border-radius: 9px;
}
#nbv5RoomAccessModal .nbv5-roomaccess-tab{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  border-radius: 8px !important;
  padding: .35rem .75rem !important;
}
#nbv5RoomAccessModal .nbv5-roomaccess-reload,
#nbv5RoomAccessModal .nbv5-roomaccess-addbtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.nbv5-roomaccess-actions{
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  gap: 12px;
  margin-bottom: 12px;
}
.nbv5-roomaccess-actiongroup{
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  background: rgba(0,0,0,.10);
}
.nbv5-roomaccess-actionhead{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 9px;
}
.nbv5-roomaccess-actionhead > span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: 7px;
  background: rgba(255,255,255,.09);
  color: var(--v5-accent-2, #f6c344);
}
.nbv5-roomaccess-actionbuttons{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
#nbv5RoomAccessModal .nbv5-roomaccess-danger,
#nbv5RoomAccessModal .nbv5-roomaccess-delete{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255,109,109,.48) !important;
  background: rgba(160,31,31,.18) !important;
  color: #ffd7d7 !important;
}
#nbv5RoomAccessModal .nbv5-roomaccess-danger:hover,
#nbv5RoomAccessModal .nbv5-roomaccess-danger:focus,
#nbv5RoomAccessModal .nbv5-roomaccess-delete:hover,
#nbv5RoomAccessModal .nbv5-roomaccess-delete:focus{
  border-color: rgba(255,126,126,.72) !important;
  background: rgba(185,37,37,.30) !important;
  color: #fff !important;
}
#nbv5RoomAccessModal .nbv5-roomaccess-delete{
  width: 31px;
  height: 29px;
  padding: 0;
  border-radius: 8px;
}
.nbv5-roomaccess-loading{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin: -4px 2px 7px;
}
#nbv5RoomAccessModal .nbv5-roomaccess-tablewrap{
  max-height: min(390px, calc(100vh - 325px));
  border-radius: 12px;
}
#nbv5RoomAccessModal .nbv5-roomaccess-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  padding-top: 9px;
  padding-bottom: 9px;
  background: var(--nbv5-paneheader-bg, var(--v5-paneheader-bg, #285E82)) !important;
  color: var(--nbv5-paneheader-text, #fff) !important;
  border-bottom: 1px solid var(--nbv5-pane-border) !important;
  white-space: nowrap;
}
#nbv5RoomAccessModal .nbv5-roomaccess-table tbody td{
  padding-top: 8px;
  padding-bottom: 8px;
  border-color: color-mix(in srgb, var(--nbv5-pane-text) 16%, transparent) !important;
  background: var(--nbv5-pane-bg) !important;
  color: var(--nbv5-pane-text) !important;
  vertical-align: middle;
}
#nbv5RoomAccessModal .nbv5-roomaccess-table tbody tr:hover td{
  background: color-mix(in srgb, var(--nbv5-pane-text) 7%, var(--nbv5-pane-bg)) !important;
}
.nbv5-roomaccess-type{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .35px;
  line-height: 1.2;
}
.nbv5-roomaccess-type.is-owner{ color: #d89b00; }
.nbv5-roomaccess-type.is-host{ color: #4f9ee8; }
.nbv5-roomaccess-type.is-voice{ color: #28a66a; }
.nbv5-roomaccess-type.is-grant{ color: #9d71df; }
.nbv5-roomaccess-type.is-deny{ color: #d85d5d; }
.nbv5-roomaccess-rowicon{ color: var(--v5-accent-2, #f6c344) !important; }

/* Light-mode surfaces remain theme-aware and readable. */
html[data-v5thememode='light'] .nbv5-roommanage-icon,
html[data-v5thememode='light'] .nbv5-roommanage-sectionicon,
html[data-v5thememode='light'] .nbv5-roomaccess-actionhead > span{
  border-color: rgba(0,0,0,.10);
  background: rgba(255,255,255,.58);
}
html[data-v5thememode='light'] .nbv5-roommanage-busy,
html[data-v5thememode='light'] .nbv5-roommanage-section,
html[data-v5thememode='light'] .nbv5-roommode-status,
html[data-v5thememode='light'] #nbv5RoomModesModal .nbv5-roommode-row,
html[data-v5thememode='light'] #nbv5RoomAccessModal .nbv5-roomaccess-topbar,
html[data-v5thememode='light'] .nbv5-roomaccess-actiongroup{
  border-color: rgba(0,0,0,.11);
  background: rgba(255,255,255,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
html[data-v5thememode='light'] .nbv5-roommode-raw{
  border-color: rgba(0,0,0,.13);
  background: rgba(255,255,255,.58);
}
html[data-v5thememode='light'] #nbv5RoomAccessModal .nbv5-roomaccess-danger,
html[data-v5thememode='light'] #nbv5RoomAccessModal .nbv5-roomaccess-delete{
  border-color: rgba(174,38,38,.35) !important;
  background: rgba(199,51,51,.09) !important;
  color: #9c2626 !important;
}

@media (max-width: 767.98px){
  .nbv5-roommanage-modal .nbv5-roommanage-header{
    align-items: flex-start;
    min-height: 0;
  }
  .nbv5-roommanage-icon{
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
  .nbv5-roommanage-subtitle{ display: none; }
  .nbv5-roommanage-busy{ display: none !important; }
  .nbv5-roommanage-body{ padding: 10px !important; }
  .nbv5-roommode-grid,
  .nbv5-roomaccess-actions{
    grid-template-columns: minmax(0, 1fr);
  }
  .nbv5-roommode-list-two{
    grid-template-columns: minmax(0, 1fr);
  }
  .nbv5-roommode-status{
    align-items: flex-start;
    flex-direction: column;
  }
  #nbv5RoomAccessModal .nbv5-roomaccess-tablewrap{
    max-height: max(180px, calc(100vh - 360px));
  }
}

@media (max-width: 499.98px){
  #nbv5RoomAccessModal .nbv5-roomaccess-topbar{
    align-items: stretch;
  }
  #nbv5RoomAccessModal .nbv5-roomaccess-tabs{
    flex: 1 1 auto;
  }
  #nbv5RoomAccessModal .nbv5-roomaccess-reload{
    width: 38px;
    padding-left: 0;
    padding-right: 0;
  }
  #nbv5RoomAccessModal .nbv5-roomaccess-reload span{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

/* ======================================================================
   Build 672: On-demand Room Properties previews
   ====================================================================== */

/* Keep the collapsed form compact: Preview shares the input row with Set,
   then reveals only one bounded pane at a time. */
#nbv5RoomSettingsModal .nbv5-roomprop-previewbtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 92px;
  border-color: color-mix(in srgb, var(--nbv5-pane-border) 72%, transparent) !important;
  background: color-mix(in srgb, var(--nbv5-input-bg) 88%, var(--nbv5-pane-bg) 12%) !important;
  color: var(--nbv5-input-text, var(--nbv5-pane-text)) !important;
}
#nbv5RoomSettingsModal .nbv5-roomprop-previewbtn:hover,
#nbv5RoomSettingsModal .nbv5-roomprop-previewbtn:focus,
#nbv5RoomSettingsModal .nbv5-roomprop-previewbtn.is-open{
  border-color: color-mix(in srgb, var(--v5-accent-2, #f6c344) 58%, var(--nbv5-pane-border)) !important;
  background: color-mix(in srgb, var(--v5-accent-2, #f6c344) 13%, var(--nbv5-input-bg)) !important;
  color: var(--nbv5-input-text, var(--nbv5-pane-text)) !important;
}
#nbv5RoomSettingsModal .nbv5-roomprop-preview{
  margin-top: 7px;
  overflow: hidden;
  border: 1px solid var(--nbv5-pane-border);
  border-radius: 10px;
  background: var(--nbv5-pane-bg) !important;
  color: var(--nbv5-pane-text) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nbv5-pane-text) 7%, transparent);
}
#nbv5RoomSettingsModal .nbv5-roomprop-previewbody{
  min-height: 44px;
  max-height: 145px;
  overflow: auto;
  padding: 10px 12px;
  background: var(--nbv5-pane-bg) !important;
  color: var(--nbv5-pane-text) !important;
  font-size: var(--nbv5-pane-font-size, 17px);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
#nbv5RoomSettingsModal .nbv5-roomprop-previewbody a{
  pointer-events: none;
}
#nbv5RoomSettingsModal .nbv5-roomprop-previewempty{
  opacity: .68;
  font-style: italic;
}

@media (max-width: 575.98px){
  #nbv5RoomSettingsModal .nbv5-roomprop-previewbtn{
    min-width: 38px;
    width: 38px;
    padding-left: 0;
    padding-right: 0;
  }
  #nbv5RoomSettingsModal .nbv5-roomprop-previewbtn span{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  #nbv5RoomSettingsModal .nbv5-roomprop-previewbody{
    max-height: 125px;
    padding: 9px 10px;
  }
}

/* ======================================================================
   Build 673: Room Access select option contrast
   ====================================================================== */

/* Match the Room Properties Category dropdown so native option menus keep
   readable dark text on their browser-provided light option background. */
#nbv5RoomAccessModal .form-select option{
  color: #111827;
}

/* ======================================================================
   Build 688: keep scrolling inside the chat GUI
   When a pane reaches its top or bottom, do not pass the remaining wheel
   or touch gesture to the document and accidentally reveal the ad below.
   ====================================================================== */
.nbv5-skin-v4 .nbv5-chat,
.nbv5-skin-v4 .nbv5-pane-body,
.nbv5-skin-v4 .nbv5-leftpanel .nbv5-lp-body,
.nbv5-skin-v4 .nbv5-leftpanel .nbv5-whlist,
.nbv5-skin-v4 .nbv5-control .nbv5-control-body,
.nbv5-skin-v4 .nbv5-control .nbv5-cp-category-buttons,
.nbv5-skin-v4 .nbv5-whpane-log,
.nbv5-skin-v4 .nbv5-whwin-body,
.nbv5-skin-v4 .nbv5-emots-grid,
.nbv5-skin-v4 .nbv5-stickers-grid,
.nbv5-skin-v4 .nbv5-giphy-body,
.nbv5-skin-v4 .nbv5-mention-pop,
.nbv5-skin-v4 .modal-body,
.nbv5-skin-v4 .nbv5-roomaccess-tablewrap,
.nbv5-skin-v4 .nbv5-roomprop-previewbody {
  overscroll-behavior-y: contain;
}

/* ======================================================================
   Build 697: compact, scrollable Settings header on narrow screens
   Older responsive rules changed the Settings header to a column while
   newer flex-basis values still assumed a row. That made the title/tools
   consume most of the mobile pane height and pushed settings below view.
   ====================================================================== */

/* The current header already has an explicit icon; retire the older
   generated gear so the title does not show two icons. */
.nbv5-control .nbv5-control-titlewrap{
  padding-left: 0;
}
.nbv5-control .nbv5-control-titlewrap::before{
  content: none;
  display: none;
}

@media (max-width: 767.98px){
  .nbv5-control .nbv5-control-head{
    flex-direction: row !important;
    align-items: flex-start !important;
    flex-wrap: wrap;
  }

  .nbv5-control .nbv5-control-titlewrap{
    flex: 1 1 100%;
    min-width: 0;
  }

  .nbv5-control .nbv5-control-headtools{
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  .nbv5-control .nbv5-cp-mode{
    flex-direction: row !important;
    align-items: center !important;
    min-width: 0;
  }
}