/* Glampfire meetings */

/* Chat announcement: "Join the meeting" */
.message a.meeting-join {
  background-color: var(--color-positive);
  border-radius: 2em;
  color: white;
  display: inline-block;
  font-weight: 600;
  padding: 0.35em 1em;
  text-decoration: none;

  &:hover { filter: brightness(1.1); }
}

/* Full-screen meeting page */
html.meeting-html { background: #111; }

body.meeting-page {
  --meeting-bg: #111;
  --meeting-surface: #1c1c1c;
  --meeting-surface-2: #2a2a2a;
  --meeting-surface-3: #383838;
  --meeting-text: #f4f4f4;
  --meeting-subtle: #a3a3a3;
  --meeting-accent: oklch(0.65 0.16 250);
  --meeting-danger: oklch(0.58 0.2 27);
  --meeting-positive: oklch(0.72 0.17 150);
  --meeting-gap: 8px;
  --meeting-radius: 24px;
  --meeting-ink: oklch(21.5% 0.018 265);
  --meeting-glass: oklch(100% 0 0 / 0.1);
  --meeting-ease: cubic-bezier(0.2, 0, 0, 1);
  /* Campfire's global button hover ring and filter don't apply here. */
  --hover-size: 0;
  --hover-filter: none;

  background: var(--meeting-bg);
  block-size: 100dvh;
  color: var(--meeting-text);
  display: grid;
  font-size: 15px;
  grid-template-areas: "top" "main" "bottom";
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr auto;
  inline-size: 100vw;
  margin: 0;
  max-block-size: 100dvh;
  overflow: hidden;

  [hidden] { display: none !important; }
}

/* Icons: one outline set, colored by currentColor */
.meeting-page .icon {
  block-size: 20px;
  flex-shrink: 0;
  inline-size: 20px;
}

.icon-swap {
  display: grid;

  > .icon {
    grid-area: 1 / 1;
  }
}

[aria-pressed="false"] > .icon-swap > .icon:nth-child(2),
[aria-pressed="true"] > .icon-swap > .icon:first-child {
  filter: blur(4px);
  opacity: 0;
  scale: 0.25;
}

/* Buttons */
.meeting-button {
  --size: 48px;

  align-items: center;
  background: white;
  block-size: var(--size);
  border: 0;
  border-radius: 999px;
  color: var(--meeting-ink);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  min-inline-size: var(--size);
  padding: 0;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;

  &:hover:not(:disabled) { background: oklch(93% 0.005 265); }
  &:active:not(:disabled) { scale: 0.97; }
  &:focus-visible { outline: 2px solid var(--meeting-accent); outline-offset: 2px; }
  &:disabled { cursor: default; opacity: 0.4; }
}

.meeting-button--small { --size: 32px; }

.meeting-button--ghost { --size: 40px; }

/* Media toggles: off is the state that needs attention */
.meeting-button--toggle[aria-pressed="false"]:not(:disabled) {
  background: var(--meeting-danger);
  color: white;

  &:hover { background: oklch(0.52 0.19 27); }
}

.meeting-button--share[aria-pressed="true"] {
  background: var(--meeting-accent);
  color: white;

  &:hover { background: oklch(0.6 0.16 250); }
}

/* Active option: a dark circle with a light ring */
.meeting-button--option[aria-pressed="true"] {
  background: var(--meeting-ink);
  box-shadow: inset 0 0 0 1.5px oklch(100% 0 0 / 0.35);
  color: white;

  &:hover { background: oklch(28% 0.02 265); }
}

.meeting-button--leave {
  --size: 56px;

  background: var(--meeting-danger);
  color: white;

  &:hover:not(:disabled) { background: oklch(0.52 0.19 27); }
}

.meeting-button--primary,
.meeting-button--secondary {
  padding-inline: 24px;
}

.meeting-button--primary {
  background: white;
  color: var(--meeting-ink);

  &:hover:not(:disabled) { background: oklch(93% 0.005 265); }
}

.meeting-button--secondary {
  background: var(--meeting-glass);
  color: white;

  &:hover:not(:disabled) { background: oklch(100% 0 0 / 0.16); }
}

/* Bars */
.meeting-bar {
  align-items: center;
  display: flex;
  gap: 12px;
  padding: 12px max(16px, env(safe-area-inset-left));
  z-index: 3;
}

.meeting-bar--top {
  grid-area: top;
}

.meeting-heading {
  flex: 1;
  min-inline-size: 0;

  h1, p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  h1 { font-size: 15px; font-weight: 600; }
  p { color: var(--meeting-subtle); font-size: 13px; }
}

/* Who's here: overlapping faces and a count bubble (mockup) */
.meeting-faces {
  display: flex;
  padding-inline-start: 10px;

  .meeting-avatar {
    font-size: 34px;
    inline-size: 1em;
    margin-inline-start: -10px;
    outline: 2px solid var(--meeting-bg);
    outline-offset: 0;
  }

  &:empty { display: none; }
}

.meeting-count {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: var(--meeting-glass);
  border-radius: 999px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  padding: 6px 12px;
  white-space: nowrap;
}

.meeting-bar--bottom {
  flex-wrap: wrap;
  gap: 16px;
  grid-area: bottom;
  justify-content: center;
  padding-block-end: max(16px, env(safe-area-inset-bottom));
}

/* Button groups sit on a frosted pill: radius = button radius + padding */
.meeting-bar__group {
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  background: var(--meeting-glass);
  border-radius: 32px;
  box-shadow: 0 0 0 1px oklch(1 0 0 / 0.08), 0 12px 32px rgb(0 0 0 / 0.35);
  display: flex;
  gap: 8px;
  padding: 8px;
}

/* In a call the stage takes the whole window; bars float and hide when idle. */
body.meeting-page[data-meeting-state="connected"],
body.meeting-page[data-meeting-state="reconnecting"] {
  grid-template-areas: "main";
  grid-template-rows: 1fr;

  .meeting-bar {
    inset-inline: 0;
    position: fixed;
  }

  .meeting-bar--top {
    background: linear-gradient(rgb(0 0 0 / 0.55), transparent);
    inset-block-start: 0;
  }

  .meeting-bar--bottom { inset-block-end: 0; }

  /* Reserve room for the bars so they never cover tiles or tile controls. */
  .meeting-stage { padding-block: 64px 80px; }

  /* Controls appear instantly on movement and fade out when idle. */
  &:not(.meeting--chrome):not(.meeting--resizing) {
    cursor: none;

    .meeting-bar { opacity: 0; pointer-events: none; transition: opacity 200ms var(--gf-ease-out); }
    .meeting-tile__pin { opacity: 0; }
  }
}

.meeting-main {
  grid-area: main;
  min-block-size: 0;
  position: relative;
}

/* Avatars: image over initials, with a light outline */
.meeting-avatar {
  aspect-ratio: 1;
  background: var(--meeting-surface-3);
  border-radius: 50%;
  display: grid;
  outline: 1px solid oklch(1 0 0 / 0.1);
  outline-offset: -1px;
  overflow: hidden;
  place-items: center;

  &::before {
    color: var(--meeting-text);
    content: attr(data-initials);
    font-size: 0.4em;
    font-weight: 600;
    grid-area: 1 / 1;
  }

  img {
    block-size: 100%;
    grid-area: 1 / 1;
    inline-size: 100%;
    object-fit: cover;
    opacity: 0;
  }

  &.meeting-avatar--loaded img { opacity: 1; }
  &.meeting-avatar--loaded::before { visibility: hidden; }
}

img.meeting-avatar { object-fit: cover; }

/* Lobby */
.meeting-lobby {
  align-items: center;
  block-size: 100%;
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr);
  margin-inline: auto;
  max-inline-size: 72rem;
  padding: 16px 32px 32px;

  @media (max-width: 50em), (orientation: portrait) {
    align-content: start;
    grid-template-columns: 100%;
    overflow: auto;
    padding: 8px 16px 16px;
  }
}

.meeting-preview {
  aspect-ratio: 16 / 9;
  background: var(--meeting-surface);
  border-radius: 16px;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  box-shadow: 0 0 0 1px oklch(1 0 0 / 0.06), 0 12px 32px rgb(0 0 0 / 0.4);
  display: grid;
  overflow: hidden;
  place-items: center;
  position: relative;

  > * { grid-area: 1 / 1; }

  video {
    block-size: 100%;
    display: none;
    inline-size: 100%;
    object-fit: contain;
    transform: scaleX(-1);
  }

  .meeting--preview-video & video { display: block; }
  .meeting--preview-video & .meeting-preview__avatar { display: none; }
}

.meeting-preview__avatar {
  block-size: 96px;
  inline-size: 96px;
}

.meeting-preview__note {
  align-self: start;
  color: var(--meeting-subtle);
  margin: 16px;
  text-align: center;

  &:empty { display: none; }
}

.meeting-preview__controls {
  align-self: end;
  display: flex;
  gap: 12px;
  margin-block-end: 16px;

  .meeting-button[aria-pressed="true"] {
    background: rgb(0 0 0 / 0.5);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

.meeting-lobby__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;

  h2 { font-size: 26px; font-weight: 600; margin: 0; }
}

.meeting-lobby__presence { color: var(--meeting-subtle); margin: 0; min-block-size: 1.5em; }

/* Join: a white pill with a dark icon circle, like the Meetings hero */
.meeting-join {
  --size: 56px;

  align-self: center;
  font-size: 16px;
  gap: 12px;
  padding: 0 28px 0 6px;
}

.meeting-join__icon {
  align-items: center;
  background: var(--meeting-ink);
  block-size: 44px;
  border-radius: 50%;
  color: white;
  display: inline-flex;
  inline-size: 44px;
  justify-content: center;
}

.meeting-devices {
  border: 0;
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;

  label {
    align-items: center;
    color: var(--meeting-subtle);
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
  }

  select {
    appearance: none;
    background: var(--meeting-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
    block-size: 40px;
    border: 0;
    border-radius: 10px;
    color: var(--meeting-text);
    font: inherit;
    font-size: 14px;
    inline-size: 100%;
    overflow: hidden;
    padding: 0 36px 0 12px;
    text-overflow: ellipsis;

    &:hover { background-color: var(--meeting-surface-3); }
    &:focus-visible { outline: 2px solid var(--meeting-accent); outline-offset: 2px; }
  }
}

/* Stage */
.meeting-stage {
  block-size: 100%;
  display: flex;
  gap: var(--meeting-gap);
  padding: var(--meeting-gap);

  .meeting--panel-open & { padding-inline-end: calc(20rem + var(--meeting-gap) * 2) !important; }

  @media (max-width: 50em) {
    .meeting--panel-open & { padding-inline-end: var(--meeting-gap) !important; }
  }
}

.meeting-spotlight { display: none; order: 0; }

.meeting-grid {
  align-content: center;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: var(--meeting-gap);
  justify-content: center;
  min-block-size: 0;
  min-inline-size: 0;
  order: 2;

  > .meeting-tile { inline-size: var(--meeting-tile-width, 100%); }
}

/* Spotlight layouts (speaker view, pinned, screen sharing): participants in a
   resizable, centered row on top; the spotlight fills the rest. Spotlight tiles
   take their source's shape and fit inside it both ways, so the card wraps the
   video (no letterboxing inside the card). */
.meeting-stage--spotlight {
  flex-direction: column;

  .meeting-spotlight {
    align-items: center;
    container-type: size;
    display: flex;
    flex: 1;
    gap: var(--meeting-gap);
    justify-content: center;
    min-block-size: 0;
    min-inline-size: 0;
    order: 0;

    > .meeting-tile {
      aspect-ratio: var(--source-aspect, 16 / 9);
      block-size: auto;
      flex: 1 1 0;
      max-block-size: 100%;
      max-inline-size: calc(100cqb * var(--tile-ratio, var(--source-ratio, 1.7778)));
      min-inline-size: 0;
    }
  }

  .meeting-grid {
    align-content: center;
    align-items: stretch;
    flex: 0 0 var(--meeting-strip-height, 120px);
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: safe center;
    order: -2;
    overflow-x: auto;
    overflow-y: hidden;

    &:empty { display: none; }
    /* Strip tiles take each source's own shape (4:3 webcams, upright phones). */
    > .meeting-tile { aspect-ratio: var(--source-aspect, 16 / 9); block-size: 100%; flex-shrink: 0; inline-size: auto; }
  }
}

/* Presenter view: their screen and camera side by side, the screen a little larger. */
.meeting-stage--presenter .meeting-spotlight {
  align-items: center;

  > .meeting-tile--screen { flex: 3 1 0; order: 0; }

  > .meeting-tile--camera {
    aspect-ratio: var(--source-aspect, 16 / 9);
    block-size: auto;
    flex: 2 1 0;
    max-block-size: 100%;
    order: 1;
  }

  @media (orientation: portrait) {
    flex-direction: column;

    > .meeting-tile--screen { flex: 0 1 auto; inline-size: 100%; max-block-size: 60%; max-inline-size: calc(60cqb * var(--tile-ratio, var(--source-ratio, 1.7778))); }
    > .meeting-tile--camera { flex: 0 1 auto; inline-size: min(100%, 24rem); }
  }
}

/* Resize handle between the participant row and the spotlight */
.meeting-resizer {
  align-self: stretch;
  border-radius: 6px;
  cursor: row-resize;
  display: none;
  flex: 0 0 12px;
  margin-block: calc(var(--meeting-gap) / -2);
  order: -1;
  place-items: center;
  touch-action: none;

  span {
    background: var(--meeting-surface-3);
    block-size: 4px;
    border-radius: 2px;
    inline-size: 40px;
  }

  &:hover span, &:focus-visible span, .meeting--resizing & span { background: var(--meeting-text); }
  &:focus-visible { outline: 2px solid var(--meeting-accent); }
  .meeting-stage--spotlight & { display: grid; }
}

.meeting--resizing {
  cursor: row-resize;
  user-select: none;
}

/* Tiles */
.meeting-tile {
  aspect-ratio: 16 / 9;
  background-color: var(--meeting-surface);
  border-radius: var(--meeting-radius);
  container-type: inline-size;
  display: grid;
  /* Fixed tracks so the video sizes to the tile, never to its own intrinsic size. */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  margin: 0;
  outline: 1px solid oklch(1 0 0 / 0.08);
  outline-offset: -1px;
  overflow: hidden;
  place-items: center;
  position: relative;

  > * { grid-area: 1 / 1; }

  /* Never crop a source: letterbox inside the tile instead. */
  video {
    block-size: 100%;
    display: none;
    inline-size: 100%;
    object-fit: contain;
  }

  &.meeting-tile--video video { display: block; }
  &.meeting-tile--video .meeting-tile__avatar { display: none; }
  &.meeting-tile--local video { transform: scaleX(-1); }
  &.meeting-tile--speaking { outline: 2px solid var(--meeting-positive); outline-offset: -2px; }
  &.meeting-tile--pinned { outline: 2px solid var(--meeting-text); outline-offset: -2px; }
}

.meeting-tile__avatar {
  font-size: clamp(40px, 24cqi, 112px);
  inline-size: 1em;
}

/* Caption: radius = tile radius - inset */
/* Frosted name pill (mockup) */
.meeting-tile__caption {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  align-items: center;
  align-self: end;
  background-color: rgb(0 0 0 / 0.35);
  border-radius: 999px;
  color: white;
  display: flex;
  font-size: 13px;
  font-weight: 550;
  gap: 6px;
  justify-self: start;
  margin: 10px;
  max-inline-size: calc(100% - 20px);
  padding: 5px 12px;
  position: relative; /* above the mirrored local video's stacking context */
  z-index: 1;
}

.meeting-tile__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.meeting-tile__muted {
  color: oklch(0.72 0.17 27);
  display: none;

  .icon { block-size: 14px; inline-size: 14px; }
  .meeting-tile--muted & { display: inline-flex; }
}

.meeting-tile__pin {
  align-items: center;
  align-self: start;
  background: rgb(0 0 0 / 0.6);
  block-size: 32px;
  border: 0;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: inline-flex;
  inline-size: 32px;
  justify-content: center;
  justify-self: end;
  margin: 6px;
  opacity: 0;
  position: relative;
  z-index: 1;

  .icon { block-size: 16px; inline-size: 16px; }
  &:active { scale: 0.96; }
  &:focus-visible { opacity: 1; outline: 2px solid var(--meeting-accent); outline-offset: 2px; }
  &[aria-pressed="true"] { background: var(--meeting-text); color: var(--meeting-bg); opacity: 1; }
  .meeting-tile:hover & { opacity: 1; }

  @media (hover: none) { opacity: 1; }
}

/* Grid "near camera": cluster participants centered on the one-third line
   (the offset is computed with the tile size in meeting_controller.js). */
.meeting--near-camera .meeting-stage:not(.meeting-stage--spotlight) .meeting-grid {
  align-content: flex-start;
  padding-block-start: var(--meeting-grid-offset, 0);
}

/* Circle tiles (camera only; shared screens stay rectangular and uncropped).
   A circle can't show a whole 16:9/4:3 picture, so it fills (crops) instead. */
body.meeting--circles .meeting-stage .meeting-tile--camera {
  --tile-ratio: 1; /* the inline --source-ratio would win, so circles use their own */

  aspect-ratio: 1;
  border-radius: 50%;

  video { object-fit: cover; }
  .meeting-tile__avatar { font-size: clamp(40px, 36cqi, 160px); }

  .meeting-tile__caption {
    border-radius: 999px;
    justify-self: center;
    margin-block-end: 9%;
    max-inline-size: 70%;
  }

  .meeting-tile__pin { justify-self: center; margin-block-start: 7%; }
}

body.meeting--circles .meeting-spotlight > .meeting-tile--camera {
  block-size: 100%;
  flex: 0 0 auto;
  inline-size: auto;
}

body.meeting--circles .meeting-stage--presenter .meeting-spotlight > .meeting-tile--camera {
  block-size: auto;
  flex: 0 1 auto;
  inline-size: 36%;
  max-block-size: 100%;
}

/* Settings: segmented choices (radius 10 = 8 inside + 2 padding) */
.meeting-options {
  border: 0;
  display: block;
  margin: 0 0 12px;
  padding: 0;

  /* A floated legend lays out like a normal block (Campfire centers rendered legends). */
  legend {
    color: var(--meeting-subtle);
    display: block;
    float: inline-start;
    font-size: 13px;
    inline-size: 100%;
    margin-block-end: 6px;
    padding: 0 0 0 2px;
    text-align: start;
  }

  .meeting-segmented { clear: both; }
}

.meeting-segmented {
  background: var(--meeting-surface-2);
  border-radius: 10px;
  display: grid;
  gap: 2px;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  padding: 2px;

  label {
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    padding: 8px 10px;
    text-align: center;
    user-select: none;

    &:hover { background: var(--meeting-surface-3); }
    &:has(input:checked) { background: var(--meeting-text); color: var(--meeting-bg); }
    &:has(input:focus-visible) { outline: 2px solid var(--meeting-accent); outline-offset: 1px; }
  }

  input { appearance: none; inline-size: 0; margin: 0; position: absolute; }
}

/* People panel and device settings (radius 16, padding 12) */
.meeting-panel,
.meeting-settings {
  background: var(--meeting-surface);
  border-radius: 16px;
  box-shadow: 0 0 0 1px oklch(1 0 0 / 0.08), 0 16px 48px rgb(0 0 0 / 0.5);
  padding: 12px;
  position: fixed;
  z-index: 4;
}

.meeting-panel {
  inline-size: min(20rem, calc(100vw - 2 * var(--meeting-gap)));
  inset: 64px var(--meeting-gap) 80px auto;
  overflow-y: auto;

  header { align-items: center; display: flex; gap: 8px; padding-inline-start: 4px; }
  h2 { flex: 1; font-size: 15px; font-weight: 600; margin: 0; }
  h2 span { color: var(--meeting-subtle); font-variant-numeric: tabular-nums; font-weight: 400; }
}

.meeting-people {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.meeting-person {
  align-items: center;
  border-radius: 4px;
  display: flex;
  gap: 12px;
  padding: 6px 4px;

  .meeting-person__avatar { font-size: 32px; inline-size: 1em; }
  .meeting-person__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .meeting-person__state { color: oklch(0.72 0.17 27); display: inline-flex; }
  .meeting-person__state .icon { block-size: 16px; inline-size: 16px; }
  &.meeting-person--speaking .meeting-person__avatar { outline: 2px solid var(--meeting-positive); outline-offset: 1px; }
}

.meeting-settings {
  inline-size: min(22rem, calc(100vw - 32px));
  inset: auto 50% 84px auto;
  translate: 50% 0;

  .meeting-devices { margin: 0; }
}

/* Ended */
.meeting-ended {
  align-content: center;
  block-size: 100%;
  display: grid;
  gap: 16px;
  justify-items: center;
  padding: 32px;
  text-align: center;

  h2 { font-size: 26px; font-weight: 600; margin: 0; }
  p { color: var(--meeting-subtle); margin: 0; max-inline-size: 32rem; }
  p:empty { display: none; }
}

.meeting-ended__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Toast: radius 16 = button radius (outer pill) */
.meeting-toast {
  align-items: center;
  background: var(--meeting-surface-2);
  border-radius: 16px;
  box-shadow: 0 0 0 1px oklch(1 0 0 / 0.08), 0 12px 32px rgb(0 0 0 / 0.5);
  display: flex;
  gap: 12px;
  inset: 16px auto auto 50%;
  max-inline-size: calc(100vw - 32px);
  padding: 10px 10px 10px 16px;
  position: fixed;
  translate: -50% 0;
  z-index: 5;

  .meeting-button { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .meeting-page .meeting-bar { transition: none !important; }
}