.meeting-compose {
  border: 0;
  border-radius: 18px;
  max-width: 480px;
  width: calc(100% - 32px);
  padding: 24px;
}
.meeting-compose::backdrop,
.meeting-room::backdrop {
  background: #10213b99;
}
.meeting-compose input {
  display: block;
  width: 100%;
  border: 1px solid #b3bfd0;
  border-radius: 8px;
  padding: 12px;
  margin: 10px 0;
}
.meeting-room {
  width: 96vw;
  max-width: 1440px;
  height: 94dvh;
  max-height: none;
  padding: 20px;
  border: 0;
  border-radius: 16px;
  background: #10251f;
  color: #f3f8f5;
}
.meeting-room header,
.meeting-room footer {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.meeting-room h2 {
  margin: 4px 0;
  font-size: 22px;
}
.meeting-room [data-status] {
  font-size: 13px;
  color: #b7cfbf;
}
.meeting-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
  height: calc(100% - 160px);
  overflow: auto;
}
.meeting-layout > section {
  min-width: 0;
}
.meeting-stage {
  height: 62%;
  min-height: 220px;
  background: #213e31;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
}
.meeting-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.meeting-people {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.meeting-tile {
  width: 130px;
  height: 110px;
  background: #2a493d;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.meeting-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.meeting-tile span {
  position: absolute;
  bottom: 4px;
  left: 6px;
  font-size: 12px;
  background: #10251f88;
  padding: 4px;
}
.meeting-layout aside {
  padding: 14px;
  background: #20392e;
  border-radius: 12px;
  overflow: auto;
}
.meeting-room input {
  color: #172c47;
  padding: 10px;
  width: 100%;
  border-radius: 8px;
}
.meeting-room .btn {
  min-height: 44px;
}
.meeting-room footer {
  justify-content: center;
  margin-top: 12px;
}
.meeting-room audio {
  display: none;
}
.meeting-dock {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 200;
}
.meeting-room [data-error] {
  color: #ffbaba;
}
.meeting-room [data-messages] p {
  overflow-wrap: anywhere;
}
.meeting-room [data-messages] {
  max-height: 45vh;
  overflow: auto;
}
@media (max-width: 720px) {
  .meeting-layout {
    grid-template-columns: 1fr;
  }
  .meeting-layout aside {
    max-height: 230px;
  }
  .meeting-stage {
    min-height: 240px;
  }
  .meeting-room {
    width: 100%;
    height: 100dvh;
    margin: 0;
    max-width: none;
    border-radius: 0;
    padding: 16px;
  }
  .meeting-tile {
    width: 100px;
    height: 90px;
  }
  .meeting-room footer .btn {
    font-size: 12px;
    padding: 9px;
  }
  .meeting-layout {
    height: calc(100% - 200px);
  }
}
/* Isolate the stage from the application shell's white header and buttons. */
.meeting-room > header {
  position: static;
  background: #10251f;
  color: #f3f8f5;
  border: 0;
  box-shadow: none;
  padding: 0 0 14px;
  width: auto;
  max-width: none;
  height: auto;
}
.meeting-room .btn {
  background: #29473f;
  color: #f3f8f5;
  border: 1px solid #527365;
}
.meeting-room .btn.primary {
  background: #175cc6;
  border-color: #175cc6;
}
.meeting-room .meeting-media-control {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 68px;
  min-height: 64px;
  padding: 8px 12px;
}
.meeting-room .meeting-media-control svg {
  width: 24px;
  height: 24px;
  flex: none;
}
.meeting-room .meeting-media-control span {
  font-size: 11px;
  line-height: 1.2;
}
.meeting-room .meeting-media-control[data-active="false"]:not([data-share]) {
  background: #583c3c;
  border-color: #846060;
}
.meeting-room .meeting-media-control[data-active="true"] {
  background: #2a5743;
  border-color: #78bd97;
}
.meeting-room .meeting-media-control:focus-visible {
  outline: 3px solid #b5e9d0;
  outline-offset: 3px;
}
.meeting-share-chooser{box-sizing:border-box;width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;border:1px solid #426253;border-radius:18px;padding:24px;background:#142e24;color:#edf6ef}
.meeting-share-chooser::backdrop{background:#0009}.meeting-share-chooser h2{margin:0 0 12px}.meeting-share-chooser p{line-height:1.6}.meeting-share-options{display:flex;gap:10px;flex-wrap:wrap}.meeting-share-options .btn{display:flex;flex:1 1 140px;flex-direction:column;gap:8px;align-items:flex-start;min-height:96px;white-space:normal;text-align:left;border:1px solid #85a492;background:#254b39;color:#fff}.meeting-share-options span{font-size:13px;color:#d0e3d5}.meeting-share-options button:disabled{opacity:.5;cursor:default}.meeting-share-chooser [data-current]{padding:14px;background:#244835;border-radius:10px;overflow-wrap:anywhere}.meeting-share-actions{display:flex;justify-content:flex-end;gap:10px}.meeting-share-chooser .btn{min-height:44px}.meeting-share-chooser .note{color:#bfd3c5}.meeting-share-chooser [data-error]{color:#ffbcbc}.meeting-share-chooser .danger{background:#713d3d;color:#fff}.meeting-share-chooser button:focus-visible{outline:3px solid #b9e8c8;outline-offset:3px}
.meeting-share-chooser{font-family:system-ui,sans-serif}.meeting-share-chooser .btn{font:inherit;padding:10px 14px;border:1px solid #85a492;border-radius:10px;background:#29473f;color:#fff;cursor:pointer}.meeting-share-chooser .meeting-share-options .btn{min-height:96px;padding:16px;background:#254b39}.meeting-share-chooser .danger{background:#713d3d}