/* Huddles: the room-info card, the header pill, the DM's pinned card, the
   mini-bar and the recap line. Reads only the semantic --color-* tokens. */

.icon--headphones { --svg: url("/assets/huddle/headphones-73bf7722.svg"); }
.icon--mic { --svg: url("/assets/huddle/mic-0dc47dbb.svg"); }
.icon--mic-off { --svg: url("/assets/huddle/mic-off-53f5e5c3.svg"); }
.icon--speaker { --svg: url("/assets/huddle/speaker-a751ccae.svg"); }
.icon--phone-off { --svg: url("/assets/huddle/phone-off-d281ac7a.svg"); }

.huddle-dot {
  background-color: var(--color-accent-brand);
  block-size: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  inline-size: 8px;
}

.huddle-dot--contrast {
  background-color: var(--color-positive);
}

/* Overlapping avatars, each ringed in the surface colour behind it */
.huddle-stack {
  --huddle-stack-size: 30px;
  --huddle-stack-ring: var(--color-selected);

  display: inline-flex;
  flex-shrink: 0;

  > * + * {
    margin-inline-start: -8px;
  }
}

.huddle-stack--small { --huddle-stack-size: 24px; }

.huddle-stack--mini {
  --huddle-stack-ring: var(--color-sidebar-contrast-bg);
  --huddle-stack-size: 22px;
}

.huddle-stack__avatar {
  --avatar-size: var(--huddle-stack-size);

  box-shadow: 0 0 0 2px var(--huddle-stack-ring);
}

.huddle-stack__more {
  align-items: center;
  background-color: var(--color-accent-brand);
  block-size: var(--huddle-stack-size);
  border-radius: 25%;
  box-shadow: 0 0 0 2px var(--huddle-stack-ring);
  color: var(--color-text-reversed);
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  inline-size: var(--huddle-stack-size);
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   Header pill
   ------------------------------------------------------------------------ */

.huddle-pill-surface,
.huddle-pill-slot {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
}

.huddle-pill__start {
  --btn-padding: 0.45em;
  --icon-size: 18px;

  color: var(--color-text-subtle);
}

.huddle-pill {
  align-items: center;
  background-color: var(--color-selected);
  border: 1px solid var(--color-selected-dark);
  border-radius: 19px;
  display: inline-flex;
  gap: 9px;
  padding: 4px 5px 4px 12px;
}

.huddle-pill--full {
  padding-inline-end: 12px;
}

.huddle-pill__count {
  color: var(--color-accent-brand);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.huddle-pill__join {
  background-color: var(--color-accent-brand);
  border: 0;
  border-radius: 13px;
  color: var(--color-text-reversed);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 13px;
}

.huddle-pill__full-tag {
  border: 1px solid var(--color-selected-dark);
  border-radius: 13px;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 11px;
}

/* On the call yourself: nothing left to start or join from the header. Start
   matters too - until the media server confirms the first connection the
   server still draws the idle pill, to the person who just started it. */
[data-huddle-joined] .huddle-pill__start,
[data-huddle-joined] .huddle-pill__join,
[data-huddle-joined] .huddle-pill__full-tag {
  display: none;
}

.huddle-pill__notice {
  color: var(--color-negative);
  font-size: 12px;
  font-weight: 600;
  max-inline-size: 16rem;
}

.huddle-pill__notice[hidden] {
  display: none;
}

[data-huddle-joined] .huddle-pill {
  padding-inline-end: 12px;
}

@media (max-width: 834px) {
  .huddle-pill .huddle-stack,
  .huddle-pill__count {
    display: none;
  }

  .huddle-pill {
    padding-inline-start: 10px;
  }
}

/* ---------------------------------------------------------------------------
   Card: room-info panel, and pinned to the top of a DM
   ------------------------------------------------------------------------ */

.huddle-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Idle in the roster it reads as one of the panel's cards; live it becomes the
   tinted card. */
.huddle-card:not(.huddle-card--pinned):not(:has([data-huddle-live="true"])):not([data-huddle-joined]) {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  gap: 0;
  padding-inline: 18px;
}

.huddle-card:has([data-huddle-live="true"]),
.huddle-card[data-huddle-joined] {
  background-color: var(--color-selected);
  border: 1px solid var(--color-selected-dark);
  border-radius: 12px;
  padding: 14px;
}

.huddle-card[data-huddle-joined] {
  background-color: var(--color-bg-raised);
}

.huddle-card--pinned {
  margin: var(--block-space-half) var(--inline-space);
  max-inline-size: 26rem;
}

/* A DM with nothing on shows no card at all - starting lives in the header -
   unless it has something to say about a join that just failed */
.huddle-card--pinned:not(:has([data-huddle-live="true"])):not([data-huddle-joined]):not(:has(.huddle-card__notice:not([hidden]))) {
  display: none;
}

.huddle-card--pinned:not(:has([data-huddle-live="true"])):not([data-huddle-joined]) .huddle-card__status {
  display: none;
}

.huddle-card__status {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.huddle-card__join {
  --icon-size: 17px;

  font-size: 14px;
  inline-size: 100%;
}

/* Idle affordance is a static row (its text describes it) with a small icon
   chip as the button on the right - the same shape as the Leave chip. */
.huddle-card__status .setting-row {
  padding-block: 14px;
}

.huddle-card__start {
  --btn-padding: 8px;
  --icon-size: 18px;

  flex-shrink: 0;
}

.huddle-card__join {
  --btn-background: var(--color-accent-brand);
  --btn-border-color: transparent;
  --btn-color: var(--color-text-reversed);
}

.huddle-card__head {
  align-items: center;
  display: flex;
  gap: 8px;
}

.huddle-card__title {
  color: var(--color-accent-brand);
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

.huddle-card__capacity {
  background-color: var(--color-selected);
  border-radius: 20px;
  color: var(--color-accent-brand);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
}

.huddle-card__capacity--full {
  background-color: var(--color-accent-brand);
  color: var(--color-text-reversed);
}

.huddle-card__who {
  align-items: center;
  display: flex;
  gap: 10px;
}

.huddle-card__names {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 500;
}

.huddle-card__full {
  border: 1px solid var(--color-selected-dark);
  border-radius: 8px;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  padding: 10px 12px;
  text-align: center;
}

/* Watching vs. on the call: the same status markup, two readings of it */
.huddle-card__title--joined,
.huddle-card__participants,
.huddle-card__call {
  display: none;
}

.huddle-card[data-huddle-joined] {
  .huddle-card__title { color: var(--color-text); }
  .huddle-card__title--watching,
  .huddle-card__who,
  .huddle-card__join,
  .huddle-card__full,
  .huddle-card__start { display: none; }
  .huddle-card__title--joined { display: inline; }
  .huddle-card__participants { display: flex; }
  .huddle-card__call { display: flex; }
}

.huddle-card__participants {
  flex-direction: column;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.huddle-participant {
  align-items: center;
  display: flex;
  gap: 10px;
}

.huddle-participant__ring {
  --avatar-size: 30px;

  border: 2px solid transparent;
  border-radius: 11px;
  display: inline-flex;
  padding: 0;
  transition: border-color 120ms ease;
}

.huddle-participant[data-speaking] .huddle-participant__ring {
  border-color: var(--color-accent-brand);
}

.huddle-participant__name {
  color: var(--color-text);
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.huddle-participant__mic {
  --icon-size: 16px;

  color: var(--color-text-subtle);
  display: inline-flex;
}

.huddle-participant[data-speaking] .huddle-participant__mic {
  color: var(--color-accent-brand);
}

.huddle-participant[data-muted] .huddle-participant__mic .icon {
  --svg: url("/assets/huddle/mic-off-53f5e5c3.svg");
}

.huddle-card__call {
  flex-direction: column;
  gap: 12px;
}

.huddle-card__notice {
  background-color: var(--color-bg-sunk);
  border-radius: 8px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 500;
  margin: 0;
  padding: 8px 10px;
}

.huddle-card__share,
.huddle-device {
  --icon-size: 16px;

  align-items: center;
  background-color: var(--color-bg-sunk);
  border-radius: 8px;
  color: var(--color-text-muted);
  display: flex;
  font-size: 12px;
  font-weight: 500;
  gap: 8px;
  padding: 8px 10px;
}

.huddle-card__share .icon {
  color: var(--color-accent-brand);
}

.huddle-card__share-label {
  flex: 1;
}

.huddle-card__share-view {
  background: none;
  border: 0;
  color: var(--color-accent-brand);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 0;
}

.huddle-card__devices {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.huddle-device__select {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--color-text);
  flex: 1;
  font: inherit;
  font-size: max(16px, 1em);
  min-inline-size: 0;
  text-overflow: ellipsis;
}

@media (min-width: 835px) {
  .huddle-device__select {
    font-size: 12px;
  }
}

.huddle-card__controls {
  align-items: center;
  container-type: inline-size;
  display: flex;
  gap: 8px;
}

.huddle-control {
  --icon-size: 18px;

  align-items: center;
  background-color: var(--color-bg);
  block-size: 40px;
  border: 1px solid var(--color-border-darker);
  border-radius: 20px;
  color: var(--color-text-lighter);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  inline-size: 40px;
  justify-content: center;
  padding: 0;
}

/* Pressed means "on" for share and camera */
.huddle-control[aria-pressed="true"] {
  background-color: var(--color-accent-brand);
  border-color: transparent;
  color: var(--color-text-reversed);
}

/* ...and "muted" for the mic, which is the state worth a warning colour */
.huddle-control--mic[aria-pressed="true"],
.huddle-minibar__control--mic[aria-pressed="true"] {
  background-color: var(--color-negative-bg);
  border-color: var(--color-negative);
  color: var(--color-negative);

  .icon { --svg: url("/assets/huddle/mic-off-53f5e5c3.svg"); }
}

.huddle-control--leave {
  --icon-size: 16px;

  background-color: var(--color-negative);
  border-color: transparent;
  color: var(--color-text-reversed);
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  gap: 7px;
  inline-size: auto;
}

/* When the panel is too narrow to spell it out, Leave collapses to an icon
   like the other controls, staying pinned to the right where it lives now. */
@container (max-width: 260px) {
  .huddle-control--leave {
    flex: 0 0 auto;
    gap: 0;
    inline-size: 40px;
    margin-inline-start: auto;
  }

  .huddle-control__label { display: none; }
}

.huddle-control:focus-visible,
.huddle-pill__join:focus-visible,
.huddle-card__share-view:focus-visible,
.huddle-minibar__control:focus-visible,
.huddle-minibar__unblock:focus-visible {
  outline: 2px solid var(--color-accent-brand);
  outline-offset: 2px;
}

/* Where shared screens and cameras show. Audio-only huddles never open it. */
.huddle-stage {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));

  video {
    aspect-ratio: 16 / 9;
    background-color: var(--color-bg-sunk);
    border-radius: 8px;
    inline-size: 100%;
    object-fit: cover;
  }

  /* A shared screen takes the whole row; cameras sit under it as a filmstrip */
  video[data-huddle-source="screen_share"] {
    grid-column: 1 / -1;
    object-fit: contain;
  }

  &:fullscreen {
    align-content: center;
    background-color: var(--color-sidebar-contrast-bg);
    padding: 1rem;
  }
}

.huddle-stage[hidden],
.huddle-card__share[hidden],
.huddle-card__notice[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------------
   Mini-bar: the call, wherever you go
   ------------------------------------------------------------------------ */

.huddle-minibar {
  align-items: center;
  background-color: var(--color-sidebar-contrast-bg);
  border-radius: 12px;
  box-shadow: 0 6px 24px oklch(0% 0 0 / 0.25);
  color: var(--color-sidebar-contrast-text);
  display: flex;
  gap: 11px;
  /* Under the header, out of the way of the composer: below 1280px the sidebar
     is a rail or a drawer, so the bottom-left corner belongs to the conversation. */
  inset-block-start: calc(4rem + env(safe-area-inset-top));
  inset-inline-end: 1rem;
  padding: 8px 10px;
  position: fixed;
  z-index: 40;
}

/* With the sidebar docked the bar lives in it, as drawn - above the profile
   footer rather than on top of it. */
@media (min-width: 1280px) {
  .huddle-minibar {
    inset-block: auto calc(4.25rem + env(safe-area-inset-bottom));
    inset-inline: 1rem auto;
  }
}

#huddle_minibar:not([data-huddle-on-call="true"]) .huddle-minibar {
  display: none;
}

.huddle-minibar__meta {
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-inline-size: 0;
  text-decoration: none;
}

.huddle-minibar__room {
  font-size: 13px;
  font-weight: 600;
  max-inline-size: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.huddle-minibar__timer {
  color: var(--color-sidebar-contrast-text-subtle);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.huddle-minibar__control {
  --icon-size: 15px;

  align-items: center;
  background-color: oklch(100% 0 0 / 0.08);
  block-size: 32px;
  border: 1px solid transparent;
  border-radius: 16px;
  color: var(--color-sidebar-contrast-text);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  inline-size: 32px;
  justify-content: center;
  padding: 0;
}

.huddle-minibar__control--leave {
  --icon-size: 14px;

  background-color: var(--color-negative);
}

.huddle-minibar__unblock {
  background-color: var(--color-accent-brand);
  border: 0;
  border-radius: 13px;
  color: var(--color-text-reversed);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
}

.huddle-minibar__unblock[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------------
   Sidebar mark and recap line
   ------------------------------------------------------------------------ */

/* Added to a row's link by the sidebar controller, channel or DM alike */
.huddle-live-mark {
  --icon-size: 0.9em;

  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  margin-inline-start: auto;
  opacity: 0.8;
  padding-inline-start: 0.4em;
}

.huddle-recap {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  text-align: start;
}

.huddle-recap__badge {
  --icon-size: 14px;

  align-items: center;
  color: var(--color-text-subtle);
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
}

/* The icon is itself a span, and the separator turns every span inside it into
   a transparent pill - which is exactly how to make a masked icon vanish. */
.message__event-separator .huddle-recap__badge .icon {
  background-color: currentColor;
  border-radius: 0;
  padding: 0;
}

.huddle-recap__text {
  align-items: baseline;
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.huddle-recap__title {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
}

.huddle-recap__detail {
  color: var(--color-text-subtle);
  font-size: 12px;
}

.huddle-recap__detail::before {
  color: var(--color-text-subtle);
  content: "·";
  margin-inline-end: 5px;
}

@media (prefers-reduced-motion: reduce) {
  .huddle-participant__ring {
    transition: none;
  }
}