@font-face {
  font-family: ScreenRoom;
  src: url("/vendor/screen-tools/fonts/NotoSansThai-thai.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0E00-0E7F;
}
@font-face {
  font-family: ScreenRoom;
  src: url("/vendor/screen-tools/fonts/NotoSansThai-latin.woff2")
    format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF;
}
.screen-room-workspace {
  font-family: ScreenRoom, system-ui, sans-serif;
  min-width: 0;
}
.screen-room-workspace button,
.screen-room-workspace input,
.screen-room-workspace select {
  font-family: inherit;
}
.screen-room-workspace [hidden] {
  display: none !important;
}
.screen-room-workspace svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.screen-room-layout {
  grid-template-columns: minmax(0, 1fr);
}
.screen-channel-setup {
  margin-top: 18px;
}
.screen-channel-setup > summary {
  cursor: pointer;
  font-size: 13px;
  padding: 12px;
}
.screen-remote-media {display:flex;gap:12px;overflow:auto;max-height:240px;padding:8px;}
.screen-remote-media figure {margin:0;flex:0 0 320px;max-width:100%;font-size:12px;}
.screen-remote-media video {width:320px;max-width:100%;max-height:160px;min-width:0;object-fit:contain;background:#0c1527;}
#screen-network-status {padding:0 12px;font-size:12px;}
#screen-history-results article {overflow-wrap:anywhere;}
#screen-members article {display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
#screen-members article h3,#screen-members article p {width:100%;}
#screen-members label:has(input[type="checkbox"]) {display:flex;align-items:center;gap:8px;margin:12px 0;}
#screen-members input[type="checkbox"] {width:18px;min-height:18px;margin:0;flex:none;}
.screen-lobby {
  max-width: 600px;
  margin: 0 auto;
  padding: 16px;
  background: #f9fcff;
  border: 1px solid #e1e9f0;
  border-radius: 12px;
  color: #172c40;
}
.lobby-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
}
.lobby-header h2 {
  margin: 0 0 4px;
  font-size: 25px;
  line-height: 1.15;
  font-weight: 750;
}
.lobby-header p {
  margin: 0;
  font-size: 12px;
  color: #718292;
}
.lobby-count {
  margin-left: auto;
  font-size: 11px;
  background: #edf3f8;
  color: #768798;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.screen-lobby .room-help {
  width: 24px;
  height: 24px;
  padding: 0;
  display: grid;
  place-items: center;
  background: #fff;
  color: #789;
  border: 1px solid #ccd8e1;
  border-radius: 50%;
}
.room-help svg {
  width: 18px;
  height: 18px;
}
.lobby-identity {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 14px;
}
.lobby-camera {
  height: 166px;
  position: relative;
  display: grid;
  place-items: center;
  color: #bac8d2;
  background: linear-gradient(135deg, #3a464e, #202a32);
  border: 1px solid #64717c;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
}
.lobby-camera video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lobby-camera-idle,
#lobby-camera-idle {
  font-size: 12px;
}
#lobby-camera-idle > svg {
  width: 30px;
  height: 30px;
}
#lobby-camera-idle p {
  margin: 6px 0;
}
#lobby-camera-preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #d4dde5;
  background: #ffffff0c;
  border: 1px solid #ffffff55;
  padding: 6px 10px;
  border-radius: 5px;
}
#lobby-camera-preview svg {
  width: 15px;
  height: 15px;
}
.lobby-name label {
  font-size: 14px;
  font-weight: 700;
}
.lobby-name input[type="text"],
#lobby-display-name {
  display: block;
  width: 100%;
  height: 38px;
  margin: 6px 0 8px;
  padding: 8px;
  border: 1px solid #c3ced9;
  background: white;
  border-radius: 6px;
  font-size: 14px;
}
.lobby-name small {
  font-size: 10px;
  color: #8592a2;
}
.lobby-device-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 34px;
}
.screen-lobby input[type="checkbox"] {
  accent-color: #1481f4;
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
}
.lobby-device-toggles label,
.lobby-settings label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}
.lobby-device-panel {
  margin-top: 14px;
  border: 1px solid #dbe5ee;
  border-radius: 7px;
}
.lobby-device-panel > header {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid #e8edf2;
}
.lobby-device-panel h3 {
  margin: 0;
  font-size: 16px;
}
.lobby-device-panel .room-help {
  margin-left: auto;
}
.lobby-device-row {
  display: grid;
  grid-template-columns: 28px 80px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 8px;
  padding: 10px;
  font-size: 13px;
}
.lobby-device-row + .lobby-device-row {
  border-top: 1px solid #e8edf2;
}
.device-symbol {
  display: grid;
  place-items: center;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  background: #eef3f8;
  color: #566475;
}
.device-symbol svg {
  width: 18px;
  height: 18px;
}
.lobby-device-row > label,
.device-row-name {
  font-weight: 700;
  white-space: nowrap;
}
.lobby-device-row select,
.lobby-footer select {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid #c9d4dd;
  border-radius: 5px;
  background: #fff;
  padding: 3px 7px;
  font-size: 12px;
  color: #42556a;
}
.screen-lobby .lobby-test {
  border: 1px solid #8880c8;
  color: #62569c;
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 12px;
  background: #fff;
  min-height: 32px;
}
.lobby-mic-meter {
  grid-column: 3 / 5;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -5px;
}
.meter-bars {
  display: flex;
  flex: 1;
  gap: 3px;
}
.meter-bars i {
  display: block;
  flex: 1;
  height: 6px;
  background: #e0e6ec;
}
.meter-bars i.is-lit {
  background: #25b66e;
}
.lobby-mic-meter small {
  font-size: 9px;
  color: #8191a1;
  white-space: nowrap;
}
#lobby-speaker-status {
  grid-column: 3 / 5;
  font-size: 10px;
  color: #718292;
}
.connection-chip {
  justify-self: start;
  color: #8494a5;
  background: #eef4f8;
  font-size: 10px;
  border-radius: 999px;
  padding: 5px 9px;
}
.connection-chip.is-ready {
  color: #128353;
  background: #e1f6eb;
}
.lobby-sound {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 9px;
  padding: 12px 10px;
  border: 1px solid #dfe7ef;
  border-radius: 7px;
}
.lobby-sound strong {
  display: block;
  font-size: 13px;
}
.lobby-sound small {
  display: block;
  font-size: 10px;
  color: #8796a5;
  margin-top: 3px;
}
.lobby-settings {
  margin-top: 9px;
  border: 1px solid #dfe7ef;
  border-radius: 7px;
  padding: 0 10px;
}
.lobby-settings summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.lobby-settings summary::-webkit-details-marker {
  display: none;
}
.lobby-settings summary > span {
  margin-left: auto;
}
.lobby-settings label {
  padding: 8px 0;
}
.lobby-footer {
  display: grid;
  grid-template-columns: auto 110px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  font-size: 12px;
}
.screen-lobby #join-screen-room {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  justify-self: end;
  width: 88%;
  min-height: 42px;
  padding: 8px 12px;
  background: linear-gradient(100deg, #7161ff, #5148f4);
  box-shadow: 0 3px 8px #6655fa20;
  color: #fff;
  border-radius: 7px;
  font-weight: 700;
  font-size: 15px;
}
.lobby-privacy {
  text-align: right;
  font-size: 9px;
  color: #99a5b1;
  margin: 7px 0 0;
}
.lobby-feedback {
  color: #a16618;
  font-size: 12px;
  margin: 8px 0 0;
}
.lobby-feedback:empty {
  display: none;
}
.screen-room-active > .heading,
.screen-room-active .camera-counts,
.screen-room-active .camera-list-heading,
.screen-room-active > .filters,
.screen-room-active > #live-table,
.screen-room-active .screen-channel-setup {
  display: none;
}
.screen-local-room {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 135px);
  min-height: 470px;
  background: #030918;
  color: #c8d3e6;
  border-radius: 10px;
  padding: 8px;
}
.screen-local-room button {
  background: #1b2a3c;
  color: #dae4f1;
  font-size: 11px;
}
.room-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-size: 10px;
}
.room-participants,
.room-chip,
.room-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.room-topline svg {
  width: 14px;
  height: 14px;
}
.room-topline button.room-chip,
.room-topline .room-chip {
  border: 1px solid #334157;
  background: #0b1526;
  border-radius: 999px;
  padding: 3px 7px;
  min-height: 25px;
  font-size: 10px;
}
.room-check input {
  width: 13px;
  height: 13px;
  accent-color: #1497fc;
  margin: 0;
}
.room-top-options {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.room-top-options select,
.room-rename {
  min-width: 0;
  max-width: 210px;
  color: #c5d3e7;
  background: #122139;
  border: 1px solid #334157;
  padding: 3px 5px;
  font-size: 10px;
  border-radius: 5px;
  height: 26px;
}
.room-mic-status {
  background: #324153;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
}
.room-mic-status.is-on {
  background: #079c54;
  color: #fff;
}
.room-warning {
  color: #e7bb52;
  margin: 5px 0;
  font-size: 11px;
  line-height: 1.5;
}
.room-stats {
  margin: 0 0 5px;
  font-size: 10px;
  color: #a0b2ca;
}
.screen-room-stage {
  position: relative;
  flex: 1;
  min-height: 200px;
  background: #0e192b;
  border-radius: 9px;
  overflow: hidden;
}
.screen-room-stage video {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: contain;
}
.room-avatar {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.room-avatar > span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #354459;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.room-stage-name {
  position: absolute;
  bottom: 9px;
  left: 11px;
  color: #d0daec;
  font-size: 10px;
}
.room-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 10px 0 2px;
}
.screen-local-room .room-tool {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  min-height: 44px;
  border-radius: 999px;
  padding: 0;
}
.screen-local-room .room-mic,
.screen-local-room .room-record {
  width: auto;
  padding: 0 12px;
}
.screen-local-room .room-small {
  min-height: 36px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 10px;
}
.room-toolbar #open-screen:disabled,
.room-toolbar #stop-screen:disabled,
.room-toolbar #change-screen:disabled {
  display: none;
}
.screen-local-room .room-mic.is-on {
  background: #079c54;
  color: #fff;
}
.screen-local-room #room-pin[aria-pressed="true"] {
  background: #e6eef8;
  color: #263a52;
}
.screen-local-room .room-record.is-recording {
  background: #bd293b;
  color: #fff;
}
.screen-local-room .room-leave {
  background: #ef3c28;
  color: #fff;
}
.room-tools {
  position: absolute;
  z-index: 5;
  right: 12px;
  bottom: 64px;
  width: min(390px, calc(100% - 24px));
  max-height: calc(100% - 100px);
  overflow-y: auto;
  background: #142239;
  border: 1px solid #3a4960;
  box-shadow: 0 8px 28px #0008;
  border-radius: 10px;
  padding: 16px;
  font-size: 12px;
}
.room-tools-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.room-tools-heading h3 {
  margin: 0;
  font-size: 15px;
}
.room-tools-heading button {
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 20px;
}
.room-tools > p {
  font-size: 12px;
}
.room-tools > label {
  display: flex;
  margin: 12px 0 6px;
}
.room-tools select {
  max-width: 100%;
  width: 100%;
  height: 34px;
  background: #0c172a;
  color: #d5dfec;
  border: 1px solid #52627b;
  border-radius: 5px;
}
.room-tools .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.room-tools .actions button,
.room-tools .actions a {
  font-size: 11px;
  padding: 8px 10px;
  max-width: 100%;
}
.room-tools .muted {
  color: #97a9c0;
  font-size: 11px;
}
.room-tools pre {
  color: #253a50;
}
.room-tools .screen-recorder {
  border-color: #384a62;
}
.screen-local-room:fullscreen {
  height: 100dvh;
  border-radius: 0;
}
@media (max-width: 600px) {
  .screen-lobby {
    padding: 12px;
  }
  .lobby-header h2 {
    font-size: 22px;
  }
  .lobby-identity {
    grid-template-columns: minmax(0, 1fr);
  }
  .lobby-camera {
    height: 160px;
  }
  .lobby-device-toggles {
    margin-top: 16px;
  }
  .lobby-device-row {
    grid-template-columns: 24px 55px minmax(0, 1fr) 60px;
    gap: 6px;
    padding: 9px 7px;
  }
  .lobby-device-row > label,
  .device-row-name {
    font-size: 11px;
    white-space: normal;
  }
  .lobby-device-row select {
    font-size: 10px;
    padding: 3px;
  }
  .screen-lobby .lobby-test {
    min-height: 44px;
  }
  .lobby-mic-meter {
    grid-column: 1 / 5;
    margin-top: 0;
  }
  .lobby-footer {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .screen-lobby #join-screen-room {
    width: 100%;
    grid-column: 1 / 3;
  }
  .screen-local-room {
    height: calc(100dvh - 240px);
    min-height: 500px;
  }
  .room-top-options {
    margin-left: 0;
  }
  .room-top-options .room-check {
    display: none;
  }
  .room-top-options select {
    max-width: 150px;
  }
  .room-toolbar {
    gap: 5px;
  }
  .room-tools {
    bottom: 100px;
    max-height: calc(100% - 130px);
  }
}