/* The session view (lib/observer/session/: session_view.dart, top_bar.dart, notices.dart, panel_sheet.dart,
   failed_view.dart, invite_sheet.dart), drawn as the app's session screen. Loaded after observer.css, map.css
   and members.css, whose components it places; colours from theme.css. */

/* ── Layout: the map fills the page. Over it, the top bar and the notices, then the members panel: a sheet
   dragged up from the bottom under 900 px, as on the phone; from 900 px (SessionView._wideFrom), a 400 px
   column on the left holding all three. ── */

.sv {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--md-surface-container);
}
.sv-map {
  position: absolute;
  inset: 0;
  /* Leaflet's panes and the map's own overlays stay below the bar, the notices and the panel. */
  z-index: 0;
}

/* The app's SafeArea + padding (12, 8, 12, 0): only what is drawn takes the pointer, the gaps go to the map. */
.sv-column {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 0
    calc(12px + env(safe-area-inset-left));
  pointer-events: none;
}
.sv-topbar,
.sv-column .banner,
.sv-column .banner-sos,
.sv-column .chip,
.sv-panel-card {
  pointer-events: auto;
}
.sv-panel-card {
  display: none;
}

/* Wide: 12 px from the window's edges, the panel under the notices, 12 px apart, to the bottom. */
.sv-wide .sv-column {
  top: calc(12px + env(safe-area-inset-top));
  right: auto;
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: calc(12px + env(safe-area-inset-left));
  width: 400px;
  padding: 0;
}
.sv-wide .sv-panel-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin-top: 12px;
}
.sv-panel-card > .members-panel {
  flex: 1 1 auto;
  min-height: 0;
}
.sv-wide .sv-sheet {
  display: none;
}

/* The safe area at the bottom, measured for the folded sheet (the app's viewPadding.bottom). */
.sv-safe-probe {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: env(safe-area-inset-bottom, 0px);
  visibility: hidden;
  pointer-events: none;
}

/* ── Top bar (_TopBar): a pill 56 px high, radius 28, surfaceContainerLow, elevation 4 ── */

.sv-topbar {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  height: 56px;
  border-radius: 28px;
  background: var(--md-surface-container-low);
  color: var(--md-on-surface);
  box-shadow: var(--ui-elev-3);
}
/* The dot, the padlock and the code: the whole middle, a button when the role may invite. */
.sv-code {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  align-self: stretch;
  min-width: 0;
  margin: 6px 0;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}
button.sv-code {
  cursor: pointer;
}
.sv-dot {
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--md-outline);
}
.sv-dot.is-live {
  background: var(--fanal-live);
}
.sv-lock {
  display: grid;
  flex: none;
  place-items: center;
  margin-right: 6px;
  color: var(--md-on-surface-variant);
}
/* titleMedium, monospace, weight 600, letter spacing 1.2, cut with an ellipsis. */
.sv-code-text {
  min-width: 0;
  overflow: hidden;
  font: 600 16px/24px var(--font-mono);
  letter-spacing: 1.2px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* A narrow phone: a step smaller, so that the whole code still fits between the buttons (padlock
   included at 320 px); narrower still, the ellipsis. */
@media (max-width: 359.98px) {
  .sv-code-text {
    font-size: 14px;
    letter-spacing: 0.4px;
  }
}
@media (max-width: 339.98px) {
  .sv-dot {
    margin-right: 8px;
  }
  .sv-code-text {
    font-size: 13px;
    letter-spacing: 0.2px;
  }
}

/* State layers, as the kit's buttons (observer.css): the code area and the invite sheet's code. */
button.sv-code::before,
.sv-invite-code::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity 15ms linear;
}
@media (hover: hover) {
  button.sv-code:hover::before,
  .sv-invite-code:hover::before {
    opacity: 0.08;
  }
}
button.sv-code:focus-visible::before,
button.sv-code:active::before,
.sv-invite-code:focus-visible::before,
.sv-invite-code:active::before {
  opacity: 0.1;
}
button.sv-code:focus-visible,
.sv-invite-code:focus-visible {
  outline-offset: -2px;
}

/* ── Notices under the top bar, 8 px apart: calls for help, the status line, the chips ── */

.sv-notices {
  display: flex;
  flex: none;
  flex-direction: column;
}
.sv-notices > * {
  margin-top: 8px;
}
.sv-sos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sv-sos:empty {
  display: none;
}
.sv-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* ── Narrow: the members panel as a sheet (PanelSheet), its height set from the code ── */

.sv-sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 188px;
}
.sv-sheet-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
.sv-sheet-content > .members-panel {
  flex: 1 1 auto;
  min-height: 0;
}
/* Over the panel's own handle: what drags the sheet with a mouse or a pen, and the keyboard's way to it. */
.sv-sheet-grip {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 28px 28px 0 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
}
.sv-sheet-grip:focus-visible {
  outline-offset: -2px;
}
.sv-sheet-dragging,
.sv-sheet-dragging * {
  -webkit-user-select: none;
  user-select: none;
}
.sv-sheet-dragging .sv-sheet-grip {
  cursor: grabbing;
}

/* ── In place of the session once it is over (_Failed): centred, at most 440 px wide ── */

.sv-failed {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: calc(32px + env(safe-area-inset-top)) calc(32px + env(safe-area-inset-right))
    calc(32px + env(safe-area-inset-bottom)) calc(32px + env(safe-area-inset-left));
  background: var(--md-surface);
  color: var(--md-on-surface);
}
.sv-failed-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 440px;
  margin: auto;
  text-align: center;
}
.sv-failed-icon {
  color: var(--md-error);
}
.sv-failed-text {
  margin: 20px 0 28px;
}
.sv-failed-in .btn-text {
  margin-top: 8px;
}

/* ── Invite sheet (_InviteSheet): a centred column, the QR code on its white card ── */

.sheet-body.sv-invite {
  align-items: center;
  padding-bottom: 24px;
}
.sv-invite-title {
  text-align: center;
}
/* As wide as its text, left-aligned in it: a short line is centred, a long one fills the width. */
.sv-invite-body {
  max-width: 100%;
}
.sv-invite-qr {
  flex: none;
  max-width: 100%;
  height: auto;
  margin-top: 20px;
}
.sv-invite-code {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  margin-top: 20px;
  padding: 8px 16px;
  border: 0;
  border-radius: 16px;
  background: none;
  color: var(--md-on-surface);
  cursor: pointer;
}
/* headlineSmall, monospace, bold, letter spacing 2: on one line, smaller on a narrow screen. */
.sv-invite-code-text {
  min-width: 0;
  font: 700 clamp(16px, 6vw, 24px) / 32px var(--font-mono);
  letter-spacing: 2px;
  white-space: nowrap;
}
.sv-invite-code-icon {
  color: var(--md-primary);
}
.sv-invite-action {
  align-self: stretch;
  margin: 8px 0 0;
}
.sv-invite-warning {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--md-on-surface-variant);
  font: 400 12px/16px var(--font);
  letter-spacing: 0.4px;
}