/* The open-mic voice room (SHIRE-715). Plain CSS on purpose: these classes are
   created from JS (voice_controller.js roster chips), which the Tailwind build
   doesn't scan, so utility classes would silently vanish from the prod bundle
   (see the Tailwind-prod-build gotcha). */

.voice-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 9999px;
  border: 1px solid #d6d3d1;      /* stone-300 */
  background: #fff;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #57534e;                  /* stone-600 */
  max-width: 10rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-chip.voice-self { border-style: dashed; }

.voice-chip.voice-speaking {
  border-color: #059669;           /* emerald-600 */
  color: #065f46;                  /* emerald-800 */
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.25);
}

.voice-chip-mic { font-size: 0.7rem; line-height: 1; }

.voice-btn.voice-mic-on {
  border-color: #059669;
  color: #065f46;
  background: #ecfdf5;             /* emerald-50 */
}

/* ---- The call widget (lower left; Bilbo's launcher owns lower right).
   Plain CSS for the same reason as the chips above: some of this is toggled
   from JS, and Tailwind's build doesn't scan the controller. ---- */
.call-widget { position: fixed; left: 1.5rem; bottom: 1.5rem; z-index: 40; }

.call-widget__fab {
  position: relative; display: inline-flex; align-items: center; gap: 0.5rem;
  height: 2.9rem; padding: 0 1rem; border: 1px solid #d6d3d1; border-radius: 2rem;
  background: #fff; color: #44403c; font: inherit; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; box-shadow: 0 12px 26px -12px rgba(36, 74, 62, 0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.call-widget__fab:hover { transform: translateY(-1px); }
.call-widget__glyph { font-size: 1rem; line-height: 1; }
.call-widget__fab-label { white-space: nowrap; }

/* On a live call the button reads as "on air" rather than as a menu. */
.call-widget--live .call-widget__fab {
  border-color: #059669; background: #ecfdf5; color: #065f46;
}
.call-widget__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; border-radius: 9999px;
  background: #059669; color: #fff; font-size: 0.7rem; font-weight: 700;
}
.call-widget__badge[hidden] { display: none; }

.call-widget__panel {
  position: absolute; left: 0; bottom: 3.4rem; width: 17rem;
  max-width: calc(100vw - 3rem); max-height: 60vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 0.8rem; border: 1px solid #d6d3d1; border-radius: 0.85rem; background: #fff;
  box-shadow: 0 18px 38px -14px rgba(36, 74, 62, 0.5);
}
.call-widget__panel[hidden] { display: none; }

.call-widget__head { display: flex; align-items: center; gap: 0.4rem; }
.call-widget__title { font-size: 0.85rem; font-weight: 700; color: #1c1917; flex: 1; min-width: 0;
                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-widget__status { font-size: 0.68rem; color: #78716c; white-space: nowrap; }
.call-widget__close { border: 0; background: none; font-size: 1.1rem; line-height: 1;
                      color: #a8a29e; cursor: pointer; padding: 0 0.2rem; }
.call-widget__close:hover { color: #44403c; }

.call-widget__roster { display: flex; flex-wrap: wrap; gap: 0.25rem; }
/* Wraps since screen share made it a four-button row in a 17rem panel. */
.call-widget__actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.call-widget__btn {
  font: inherit; font-size: 0.75rem; padding: 0.3rem 0.65rem; cursor: pointer;
  border: 1px solid #d6d3d1; border-radius: 9999px; background: #fff; color: #44403c;
}
.call-widget__btn:hover { background: #f5f5f4; }
.call-widget__btn--leave { margin-left: auto; }
/* Someone else has the screen. Dimmed rather than disabled, so it can still be
   clicked to find out who. */
.call-widget__btn--taken { opacity: 0.45; }
.call-widget__btn--leave:hover { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }

.call-widget__start {
  width: 100%; text-align: left; font: inherit; font-size: 0.8rem; font-weight: 600;
  padding: 0.5rem 0.65rem; cursor: pointer; color: #065f46;
  border: 1px solid #a7f3d0; border-radius: 0.6rem; background: #ecfdf5;
}
.call-widget__start:hover { background: #d1fae5; }
.call-widget__start[hidden] { display: none; }

.call-widget__section { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em;
                        color: #a8a29e; font-weight: 700; margin-top: 0.15rem; }
.call-widget__rooms { display: flex; flex-direction: column; gap: 0.3rem; }
.call-widget__room {
  display: flex; align-items: center; gap: 0.45rem; width: 100%; text-align: left;
  font: inherit; font-size: 0.78rem; padding: 0.4rem 0.55rem; cursor: pointer;
  border: 1px solid #e7e5e4; border-radius: 0.55rem; background: #fff; color: #1c1917;
}
.call-widget__room:hover { border-color: #a7f3d0; background: #f0fdf4; }
.call-widget__room-who { color: #78716c; font-size: 0.7rem; }
.call-widget__empty, .call-widget__hint { font-size: 0.72rem; color: #a8a29e; }

@media (max-width: 640px) {
  .call-widget { left: 0.75rem; bottom: 0.75rem; }
  .call-widget__panel { width: calc(100vw - 1.5rem); }
}

/* ---- Ringing: the incoming card, and the people picker ---- */
.call-widget__ring {
  padding: 0.55rem 0.65rem; border-radius: 0.6rem;
  border: 1px solid #a7f3d0; background: #ecfdf5;
  /* A ring is the one thing here that expires, so it asks for attention. */
  animation: call-ring-pulse 1.6s ease-in-out infinite;
}
.call-widget__ring[hidden] { display: none; }
.call-widget__ring-who { font-size: 0.82rem; font-weight: 700; color: #065f46; margin-bottom: 0.4rem; }
@keyframes call-ring-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.25); }
  50%      { box-shadow: 0 0 0 5px rgba(5, 150, 105, 0.06); }
}
/* Respect a stated preference for less motion — a pulsing box is exactly the
   kind of thing that setting exists for. */
@media (prefers-reduced-motion: reduce) {
  .call-widget__ring { animation: none; }
}
.call-widget__btn--answer { border-color: #059669; background: #059669; color: #fff; font-weight: 600; }
.call-widget__btn--answer:hover { background: #047857; }

.call-widget__invite { position: relative; }
.call-widget__field {
  width: 100%; font: inherit; font-size: 0.8rem; padding: 0.4rem 0.6rem;
  border: 1px solid #d6d3d1; border-radius: 0.55rem; background: #fff; color: #1c1917;
}
.call-widget__field:focus { outline: none; border-color: #059669; box-shadow: 0 0 0 2px rgba(5,150,105,0.15); }

.call-widget__people { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.3rem; }
.call-widget__people[hidden] { display: none; }
.call-widget__person {
  display: flex; align-items: center; gap: 0.45rem; width: 100%; text-align: left;
  font: inherit; font-size: 0.78rem; padding: 0.35rem 0.5rem; cursor: pointer;
  border: 1px solid transparent; border-radius: 0.5rem; background: #fff; color: #1c1917;
}
.call-widget__person:hover { border-color: #a7f3d0; background: #f0fdf4; }

/* Presence, stated before you commit to 45 seconds of ringing. */
.call-widget__presence { width: 0.5rem; height: 0.5rem; border-radius: 9999px; flex: 0 0 auto; }
.call-widget__presence--online  { background: #059669; }
.call-widget__presence--away    { background: #f59e0b; }
.call-widget__presence--offline { background: #d6d3d1; }
.call-widget__presence--dnd     { background: #e11d48; }

/* ---- A microphone that reads as muted -------------------------------------
   There is no muted-microphone emoji, and the old code used HEADPHONES for
   "mic off" — which everyone read as "available / listening", the opposite of
   what it meant. Same glyph, struck through and dimmed: two unmistakable states. */
.voice-chip-mic--muted { position: relative; opacity: 0.55; }
.voice-chip-mic--muted::after {
  content: ""; position: absolute; left: -1px; right: -1px; top: 50%;
  border-top: 1.5px solid #b91c1c;   /* rose-700 */
  transform: rotate(-20deg);
}

/* Someone who belongs to the call but hasn't connected yet — the caller has to
   see that a phone is ringing somewhere, or waiting just reads as broken. */
.voice-chip--ringing { border-color: #a7f3d0; background: #f0fdf4; color: #065f46; }
.voice-chip--ringing .voice-chip-mic { animation: call-ring-pulse 1.2s ease-in-out infinite; }
.voice-chip--declined { opacity: 0.6; }
.voice-chip-note { font-size: 0.65rem; color: #78716c; margin-left: 0.15rem; }
@media (prefers-reduced-motion: reduce) {
  .voice-chip--ringing .voice-chip-mic { animation: none; }
}

/* ---- Video tiles -----------------------------------------------------------
   Small on purpose. These sit in a 17rem panel, and the point is to see that
   somebody is there and roughly what they're doing — not to watch them. Two
   columns keeps four people legible without the widget becoming a window. */
/* The shared screen. object-fit: contain, not cover — the tiles crop faces
   because a cropped face is still a face, but a cropped slide has lost the
   half you needed. Letterboxing is the correct answer here. */
.call-stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 0.5rem; background: #0c0a09; cursor: zoom-in;
  outline: 1.5px solid #93c5fd; outline-offset: -1.5px;
}
.call-stage[hidden] { display: none; }
.call-stage video {
  width: 100%; height: 100%; object-fit: contain; display: block; background: #0c0a09;
}
.call-stage__name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.15rem 0.35rem; font-size: 0.62rem; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Fullscreen is where a shared screen is actually readable, so let it fill the
   display instead of keeping the 16:9 box it sat in. */
.call-stage video:fullscreen { object-fit: contain; background: #000; }

.call-tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem;
}
.call-tiles[hidden] { display: none; }

.call-tile {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 0.5rem; background: #1c1917;
}
.call-tile[hidden] { display: none; }
.call-tile video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Your own view is mirrored, the way every camera app does it — an unmirrored
   self-view feels wrong to look at, though everyone ELSE must see you unflipped. */
.call-tile--self video { transform: scaleX(-1); }
.call-tile--self { outline: 1.5px solid #a7f3d0; outline-offset: -1.5px; }

.call-tile__name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.15rem 0.35rem; font-size: 0.62rem; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}