/* =======================================================
   PSCC Consultation — Jitsi theme
   Matches virtual-consultation.ms-hub.com
   ======================================================= */
:root {
  --pscc-green: #1B8354;
  --pscc-green-dark: #0E6B43;
  --pscc-green-ink: #FFFFFF;
  --pscc-green-soft: rgba(27, 131, 84, 0.15);
  --pscc-bg: #0B0E11;
  --pscc-surface: #111418;
  --pscc-surface-2: #1A1F25;
  --pscc-stroke: rgba(255,255,255,0.08);
  --pscc-text: #F3F4F6;
  --pscc-text-dim: #9CA3AF;
  --pscc-danger: #DC2626;
  --pscc-pill: 999px;
  --pscc-radius: 14px;
  --pscc-radius-sm: 10px;
}

/* ---------- Global font ---------- */
body, html, .atlaskit-portal-container, .participants_pane {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Prejoin screen ---------- */
.premeeting-screen .premeeting-screen__content,
.prejoin-input-area,
.welcome-page__content {
  background: var(--pscc-surface) !important;
  color: var(--pscc-text) !important;
  border-radius: var(--pscc-radius) !important;
}
.premeeting-screen__title,
.prejoin-preview-dialog-btn,
.prejoin-preview-dropdown-btn { color: var(--pscc-text) !important; }

.premeeting-screen input[type="text"],
.premeeting-screen__content input,
.prejoin-input input {
  background: var(--pscc-surface-2) !important;
  color: var(--pscc-text) !important;
  border: 1px solid var(--pscc-stroke) !important;
  border-radius: var(--pscc-radius-sm) !important;
}
.premeeting-screen input:focus,
.prejoin-input input:focus {
  border-color: var(--pscc-green) !important;
  box-shadow: 0 0 0 3px var(--pscc-green-soft) !important;
}

/* ---------- Primary action buttons (Join / submit / invite) ---------- */
.premeeting-screen__join-button,
.welcome button[type="submit"],
.action-btn.primary,
.modal-dialog-footer__button--primary,
button[data-appearance="primary"],
.participants_pane button.invite-button,
.invite-button,
#invite-more-button,
[class*="PrimaryButton"],
.dialog-footer button.primary,
.css-primary-btn,
.send-button,
#chatSendButton {
  background: var(--pscc-green) !important;
  border: 0 !important;
  color: var(--pscc-green-ink) !important;
  border-radius: var(--pscc-pill) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(27, 131, 84, 0.25) !important;
}
.premeeting-screen__join-button:hover,
button.primary:hover,
.modal-dialog-footer__button--primary:hover {
  background: var(--pscc-green-dark) !important;
}

/* ---------- Hangup ---------- */
.toolbox-button[aria-label*="hangup" i],
.toolbox-button[aria-label*="leave" i],
.hangup-button,
button[data-testid="toolbox.hangup"],
.toolbox-icon.hangup-button,
.prejoin-preview-error button,
.css-hangup-btn {
  background: var(--pscc-danger) !important;
  color: #fff !important;
  border-radius: var(--pscc-pill) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.28) !important;
}

/* ---------- Main in-call toolbox ---------- */
.toolbox-content {
  background: transparent !important;
  padding: 8px !important;
}
.new-toolbox .toolbox-content-items {
  background: var(--pscc-surface) !important;
  border: 1px solid var(--pscc-stroke) !important;
  border-radius: var(--pscc-pill) !important;
  padding: 6px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important;
}
.toolbox-button,
.toolbox-content .toolbox-button {
  border-radius: 50% !important;
}
.toolbox-button:hover,
.toolbox-content .toolbox-button:hover {
  background: var(--pscc-green-soft) !important;
}
.toolbox-button.toggled,
.toolbox-button[aria-pressed="true"] {
  background: var(--pscc-green) !important;
  color: white !important;
}

/* ---------- Participant panel ---------- */
.participants_pane,
.chat-panel,
.sideToolbarContainer {
  background: var(--pscc-surface) !important;
  border-left: 1px solid var(--pscc-stroke) !important;
}
.participants_pane-header,
.chat-panel-header {
  background: transparent !important;
  color: var(--pscc-text) !important;
  border-bottom: 1px solid var(--pscc-stroke) !important;
}
.participants_pane-content .item,
.participant-item {
  border-radius: var(--pscc-radius-sm) !important;
  padding: 10px 12px !important;
}
.participants_pane-content .item:hover {
  background: var(--pscc-green-soft) !important;
}
.participant-item .moderator-indicator,
[class*="moderator"] {
  color: var(--pscc-green) !important;
  font-weight: 700 !important;
}

/* ---------- Chat ---------- */
.chat-input-container,
#chat-input {
  background: var(--pscc-surface-2) !important;
  border-radius: var(--pscc-pill) !important;
}
/* Kill Jitsi's default 0 16px 24px chat-input-container padding */
.chat-input-container {
  padding: 0 !important;
}

/* Hide the built-in "Enter fullscreen" toolbar button. We open the
   meeting in a full-screen-sized popup window instead of using the
   Fullscreen API, because the API exits whenever the OS file picker
   opens (for chat attachments) and we can't re-enter silently. */
.toolbox-button[aria-label*="fullscreen" i],
.toolbox-button[aria-label*="full screen" i],
[data-testid="toolbox.fullscreen"],
[data-testid="toolbox.exitFullScreen"],
[aria-describedby*="fullscreen" i] {
  display: none !important;
}

/* ---- Hangup menu: distinct icons for End vs Leave ----------------
   The hangup menu (appears when you click the red toolbar button)
   lists two items that read identically at a glance — "End
   consultation" (red, tears down the room for everyone) and "Leave
   consultation" (secondary, you slip out alone). They're plain
   MUI Buttons with labels only; prepend a glyph so doctors can tell
   them apart without reading.

   The menu items are rendered in a Popover portal, so we can't rely
   on a stable parent class (`hangupMenu` is a hashed tss-react
   class). Instead target by aria-label and exclude the red
   toolbar button itself (`.hangup-button`) so the glyphs appear
   ONLY in the drop-down items. */
button[aria-label*="endConference" i]:not(.hangup-button):not(.hangup-menu-button)::before,
button[aria-label*="end consultation" i]:not(.hangup-button):not(.hangup-menu-button)::before,
button[aria-label*="end meeting" i]:not(.hangup-button):not(.hangup-menu-button)::before,
button[aria-label*="end for all" i]:not(.hangup-button):not(.hangup-menu-button)::before {
  content: "\1F6D1";  /* 🛑 stop sign — terminal action */
  margin-right: 8px;
  font-size: 15px;
  line-height: 1;
  display: inline-block;
  vertical-align: -1px;
}
button[aria-label*="leaveConference" i]:not(.hangup-button):not(.hangup-menu-button)::before,
button[aria-label*="leave consultation" i]:not(.hangup-button):not(.hangup-menu-button)::before,
button[aria-label*="leave meeting" i]:not(.hangup-button):not(.hangup-menu-button)::before {
  content: "\1F6AA";  /* 🚪 door — you personally leaving */
  margin-right: 8px;
  font-size: 15px;
  line-height: 1;
  display: inline-block;
  vertical-align: -1px;
  filter: grayscale(0.4);
}
.chatmessage-wrapper .chatmessage {
  border-radius: var(--pscc-radius-sm) !important;
}
.chatmessage-wrapper.local .chatmessage {
  background: var(--pscc-green) !important;
  color: white !important;
}
.chatmessage-wrapper.remote .chatmessage {
  background: var(--pscc-surface-2) !important;
  color: var(--pscc-text) !important;
}

/* ---------- Tooltips ---------- */
.atlaskit-portal .popper-content,
[class*="Tooltip"] {
  background: var(--pscc-surface-2) !important;
  color: var(--pscc-text) !important;
  border-radius: var(--pscc-radius-sm) !important;
}

/* ---------- Hide items we do not want in 1:1 consults ---------- */
/* Breakout rooms + embed + full-screen-on-raised-hand rarely make sense
   in a patient <-> doctor flow. The interface_config filter covers the
   main toolbar; this covers stragglers in menus. */
[aria-label="Add breakout room" i],
[aria-label*="breakout" i],
[aria-label="Embed meeting" i],
.toolbox-button[aria-label*="embed" i] { display: none !important; }

/* ---------- Scrollbar polish ---------- */
.participants_pane ::-webkit-scrollbar,
.chat-panel ::-webkit-scrollbar { width: 6px; }
.participants_pane ::-webkit-scrollbar-thumb,
.chat-panel ::-webkit-scrollbar-thumb {
  background: var(--pscc-green-soft);
  border-radius: var(--pscc-pill);
}

/* ---------- Links ---------- */
a, .link { color: var(--pscc-green) !important; }
a:hover, .link:hover { color: var(--pscc-green-dark) !important; }

/* ---------- Toggle switches ---------- */
.toggle-switch input:checked + .slider,
[class*="switch"][data-checked="true"] { background-color: var(--pscc-green) !important; }

/* ---------- Lobby knock button ---------- */
[data-testid="lobby.knockButton"],
.lobby-screen-content button.primary {
  background: var(--pscc-green) !important;
  border-radius: var(--pscc-pill) !important;
  color: white !important;
}

/* ---------- Remove Jitsi watermark completely ---------- */
.watermark,
.leftwatermark,
.rightwatermark,
#largeVideoBackgroundContainer ~ .watermark { display: none !important; }

/* ---------- 2026-04-21 additions: lock down prejoin ---------- */

/* The Join button's actual class name in this Jitsi build is
   .join-button, wrapped in an atlaskit primary-button shell. Override
   both on the button itself and its inner elements. */
.premeeting-screen button,
.premeeting-screen .join-button,
.premeeting-screen .join-button > button,
button.join-button,
button[class*="join-button"],
[data-testid="prejoin.joinMeeting"],
[data-testid="prejoin.joinMeeting"] button,
[data-testid="prejoin.joinMeeting"] * {
  background-color: #1B8354 !important;
  background: #1B8354 !important;
  border-color: #1B8354 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
}
.premeeting-screen button:hover,
.premeeting-screen .join-button:hover,
.premeeting-screen .join-button > button:hover,
button.join-button:hover,
button[class*="join-button"]:hover,
[data-testid="prejoin.joinMeeting"]:hover {
  background-color: #0E6B43 !important;
  background: #0E6B43 !important;
}

/* Name input: pill-shaped dark card to match the mobile */
.premeeting-name-input,
.premeeting-name-input input,
input.premeeting-name-input {
  border-radius: 999px !important;
  background: #1A1F25 !important;
  color: #F3F4F6 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  text-align: center !important;
}
.premeeting-name-input:focus,
.premeeting-name-input input:focus {
  border-color: #1B8354 !important;
  box-shadow: 0 0 0 3px rgba(27,131,84,0.22) !important;
}

/* Atlaskit's blue primary (used across dialogs, prejoin split-button
   chevron, lobby knock, etc.) — force green everywhere that matters. */
button[data-appearance="primary"],
[data-appearance="primary"] > span,
[class*="PrimaryButton"],
.css-primary-btn,
/* Hover state in atlaskit uses inline styles — catch with explicit
   rule on the button itself: */
button[style*="background-color: rgb(66, 133, 244)"],
button[style*="background-color: #4285F4"],
button[style*="background-color: #0052cc"],
button[style*="background-color: rgb(0, 82, 204)"] {
  background-color: #1B8354 !important;
  background: #1B8354 !important;
  border-color: #1B8354 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
}

/* Settings cog + camera/mic buttons on the prejoin screen: round them
   to match the mobile look */
.premeeting-screen .toolbox-content .toolbox-button,
.premeeting-screen button[aria-label="Settings" i],
.premeeting-screen button[aria-label*="camera" i],
.premeeting-screen button[aria-label*="microphone" i] {
  border-radius: 50% !important;
}

/* "Join in low bandwidth mode" link */
.prejoin-preview-error a,
.premeeting-screen a {
  color: #1B8354 !important;
}

/* ---------- Prejoin split-button dropdown (Join without audio) ---------- */
/* The dropdown menu is mounted in an atlaskit portal, so we have to target
   it at the document level rather than scoped to .premeeting-screen. */
[role='menu'],
.atlaskit-portal-container [role='menu'],
.atlaskit-portal-container > div[role='menu'],
div[data-testid*='prejoin'] [role='menu'] {
  background: #1A1F25 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important;
  padding: 4px !important;
}
[role='menuitem'],
.atlaskit-portal-container [role='menuitem'],
[role='menu'] button {
  background: transparent !important;
  color: #F3F4F6 !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  margin: 0 !important;
}
[role='menuitem']:hover,
.atlaskit-portal-container [role='menuitem']:hover,
[role='menu'] button:hover {
  background: rgba(27, 131, 84, 0.18) !important;
  color: #ffffff !important;
}
[role='menuitem'] svg,
[role='menu'] button svg {
  color: #1B8354 !important;
  fill: #1B8354 !important;
}

/* Split-button chevron — same shade of green as the primary action */
.premeeting-screen button[aria-haspopup='true'],
.premeeting-screen [class*='split-button'],
.premeeting-screen [data-testid*='chevron'],
.premeeting-screen .join-button + button,
.premeeting-screen .join-button ~ button[aria-haspopup] {
  background-color: #1B8354 !important;
  background: #1B8354 !important;
  border-color: #1B8354 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
}
.premeeting-screen button[aria-haspopup='true']:hover {
  background-color: #0E6B43 !important;
}

/* Dialog confirm buttons also use the Atlaskit primary — ensure they
   stay green regardless of where the dialog appears. */
.atlaskit-portal-container button[data-appearance='primary'],
.atlaskit-portal-container [data-appearance='primary'] {
  background-color: #1B8354 !important;
  background: #1B8354 !important;
  border-color: #1B8354 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
}
.atlaskit-portal-container button[data-appearance='primary']:hover {
  background-color: #0E6B43 !important;
}

/* ---------- Split-button dropdown: keep it compact ---------- */
[role='menu'],
.atlaskit-portal-container [role='menu'],
.atlaskit-portal-container > div[role='menu'] {
  min-width: 0 !important;
  width: auto !important;
  max-width: max-content !important;
  padding: 4px !important;
}
[role='menuitem'],
.atlaskit-portal-container [role='menuitem'],
[role='menu'] button {
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.3 !important;
  width: auto !important;
  white-space: nowrap !important;
}
/* The outer wrapper Jitsi puts around the menu is often stretched;
   make it shrink-to-fit around our compact menu. */
.atlaskit-portal-container [class*='MenuGroup'],
.atlaskit-portal-container [class*='dropdownMenuPopover'],
.atlaskit-portal-container [class*='popper'] {
  width: auto !important;
  min-width: 0 !important;
}

/* ---------- Subject bar: unify pill + timer ---------- */
.conference-timer,
[class*='conference-timer'] {
  background: rgba(0,0,0,0.2) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 12px !important;
}

/* ---------- Unbreak the in-call subject bar ---------- */
/* The earlier rule painted the whole subject-info-container solid
   green, which now stacks awkwardly on top of Jitsi's inner timer
   + subject pills. Make the container transparent and style the
   inner 
/* ---------- Hide Jitsi's empty 'alwaysVisible' subject pill ---------- */
/* Jitsi renders an extra .subject-info-container with no children when
   no subject is set; my earlier theme styles (now removed) made it a
   visible green ellipse. Even without my rules Jitsi shows a faint
   pill there in some builds — collapse it whenever it's empty. */
#alwaysVisible:has(.subject-info-container:empty),
.subject:has(> .subject-info-container:empty),
.subject-info-container:empty {
  display: none !important;
}

/* ---------- Clinical sidebar: responsive on narrow viewports ---------- */
@media (max-width: 720px) {
  .pscc-clin-panel {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  .pscc-clin-toggle {
    padding: 8px 6px !important;
    font-size: 11px !important;
  }
}
@media (max-width: 480px) {
  .pscc-clin-toggle {
    /* On phones the side tab is awkward — reduce to a small pill */
    writing-mode: horizontal-tb !important;
    top: 64px !important;
    transform: none !important;
    border-radius: 999px 0 0 999px !important;
    padding: 6px 10px !important;
  }
}

/* ---------- Re-center toolbox when a side panel is open ----------
   Jitsi's main toolbox is fixed-positioned across the full viewport
   (left:0; right:0; flex-center). When the chat/participants/file-
   sharing panel opens on the right, the video area shrinks but the
   toolbox stays centered to the viewport — so its buttons drift to
   the right relative to the remaining video. This block compensates
   by pulling the toolbox's right edge in by the chat panel's width
   so the buttons re-center in the visible video area.

   Jitsi's default CHAT_SIZE constant is 315px. */
#new-toolbox {
  transition: right 0.16s ease-in-out;
}
body:has(#sideToolbarContainer),
body:has(.participants_pane) {
  --pscc-chat-panel-width: 315px;
}
body:has(#sideToolbarContainer) #new-toolbox,
body:has(.participants_pane) #new-toolbox {
  right: var(--pscc-chat-panel-width, 315px) !important;
}
/* Same idea for the Jitsi floating subject header at the top */
body:has(#sideToolbarContainer) .subject,
body:has(.participants_pane) .subject {
  right: var(--pscc-chat-panel-width, 315px) !important;
}

/* ---------- Modernise non-chat toast notifications ----------
   Chat-message notifications already use the custom dark
   glassmorphism card rendered by Notification.tsx when
   icon === NOTIFICATION_ICON.MESSAGE. Every OTHER notification
   (participant joined/left, recording started, etc.) still falls
   through to Jitsi's stock white card. This block re-skins those
   to match the PSCC look so white pop-ups don't jarr against the
   dark meeting surface. */
#notifications-container > div > div[data-testid]:not([data-testid="notify.chatMessages"]) {
  background: linear-gradient(180deg, rgba(28,32,40,0.92) 0%, rgba(20,23,29,0.94) 100%) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25) !important;
  color: #F3F4F6 !important;
  padding: 10px 12px 10px 14px !important;
}
/* Title + description inside those notifications should be readable */
#notifications-container > div > div[data-testid]:not([data-testid="notify.chatMessages"]) span,
#notifications-container > div > div[data-testid]:not([data-testid="notify.chatMessages"]) p,
#notifications-container > div > div[data-testid]:not([data-testid="notify.chatMessages"]) div {
  color: inherit !important;
}
/* Turn the vertical ribbon into a slim gradient bar */
#notifications-container > div > div[data-testid]:not([data-testid="notify.chatMessages"]) > div:first-child {
  background: linear-gradient(180deg, #1B8354 0%, #2E7BD8 100%) !important;
  width: 3px !important;
  border-radius: 3px !important;
}
/* Pill-shaped action buttons (Open chat, Dismiss, …) */
#notifications-container > div > div[data-testid]:not([data-testid="notify.chatMessages"]) button[aria-label] {
  color: #7EE2B0 !important;
  background: rgba(27,131,84,0.18) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-weight: 600 !important;
  margin-right: 6px !important;
  transition: background-color 0.15s ease;
}
#notifications-container > div > div[data-testid]:not([data-testid="notify.chatMessages"]) button[aria-label]:hover {
  background: rgba(27,131,84,0.30) !important;
}
/* The close-icon stays a subtle circle */
#notifications-container > div > div[data-testid]:not([data-testid="notify.chatMessages"]) #close-notification {
  color: rgba(255,255,255,0.72) !important;
  cursor: pointer;
}