/* RHKEARTH live streams — display concepts adapted from OSIRIS (MIT).
   OSIRIS copyright (c) 2026 simplifaisoul. */

#rhk-streams-btn[aria-expanded="true"] {
  background: rgba(231,227,214,.13) !important;
  border-color: rgba(231,227,214,.42) !important;
}

#rhk-streams-panel,
#rhk-broadcast-viewer {
  position: fixed;
  z-index: 9600;
  color: rgba(239,239,233,.94);
  background: rgba(10,11,11,.94);
  border: 1px solid rgba(231,227,214,.16);
  border-radius: 8px;
  box-shadow: 0 18px 56px rgba(0,0,0,.46);
  backdrop-filter: blur(18px) saturate(.78);
  -webkit-backdrop-filter: blur(18px) saturate(.78);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

#rhk-streams-panel {
  top: 74px;
  right: 18px;
  width: min(390px, calc(100vw - 36px));
}

#rhk-streams-panel[hidden],
#rhk-broadcast-viewer[hidden] { display: none !important; }

.rhk-stream-header,
#rhk-broadcast-viewer > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 9px 10px 9px 13px;
  border-bottom: 1px solid rgba(231,227,214,.09);
}

.rhk-stream-header > div,
#rhk-broadcast-viewer > header > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.rhk-stream-header small,
#rhk-broadcast-viewer > header small {
  font-size: 8px;
  letter-spacing: .18em;
  color: rgba(231,227,214,.42);
}
.rhk-stream-header strong,
#rhk-broadcast-viewer > header strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .14em;
}
#rhk-broadcast-viewer > header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  color: rgba(231,227,214,.42);
  letter-spacing: .08em;
}
.rhk-stream-header button,
#rhk-broadcast-viewer > header button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: rgba(231,227,214,.60);
  cursor: pointer;
}
.rhk-stream-header button:hover,
#rhk-broadcast-viewer > header button:hover { background: rgba(255,255,255,.05); color: #efefe9; }
.rhk-stream-header .material-symbols-outlined,
#rhk-broadcast-viewer > header .material-symbols-outlined { font-size: 18px; }

.rhk-stream-switches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px;
}
.rhk-stream-switches > button {
  min-height: 86px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 5px;
  border: 1px solid rgba(231,227,214,.10);
  border-radius: 6px;
  background: rgba(255,255,255,.022);
  color: rgba(239,239,233,.72);
  cursor: pointer;
  font-family: inherit;
}
.rhk-stream-switches > button:hover { background: rgba(255,255,255,.05); border-color: rgba(231,227,214,.22); }
.rhk-stream-switches > button.active {
  background: rgba(114,201,216,.08);
  border-color: rgba(114,201,216,.38);
  color: #efefe9;
}
.rhk-stream-switches .material-symbols-outlined { font-size: 20px; }
.rhk-stream-switches b { font-size: 9px; letter-spacing: .11em; font-weight: 650; }
.rhk-stream-switches small { font-size: 7px; color: rgba(231,227,214,.36); letter-spacing: .08em; }
.rhk-stream-switches i { margin-top: 3px; font-size: 8px; font-style: normal; color: rgba(114,201,216,.66); letter-spacing: .08em; }

.rhk-stream-monitor {
  border-top: 1px solid rgba(231,227,214,.07);
  border-bottom: 1px solid rgba(231,227,214,.07);
  padding: 9px 10px 10px;
}
.rhk-monitor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.rhk-monitor-head > span { font-size: 8px; color: rgba(231,227,214,.44); letter-spacing: .13em; }
.rhk-monitor-head button {
  height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(231,227,214,.10);
  border-radius: 4px;
  background: transparent;
  color: rgba(231,227,214,.52);
  font: 600 7px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .10em;
  cursor: pointer;
}
.rhk-monitor-head button:hover { background: rgba(255,255,255,.05); color: #efefe9; }
.rhk-monitor-row {
  min-height: 31px;
  display: grid;
  grid-template-columns: 88px 1fr 62px;
  align-items: center;
  gap: 7px;
  border-top: 1px solid rgba(231,227,214,.045);
}
.rhk-monitor-row > span { font-size: 8px; color: rgba(231,227,214,.42); letter-spacing: .08em; }
.rhk-monitor-row > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; color: rgba(239,239,233,.72); font-weight: 600; letter-spacing: .06em; }
.rhk-monitor-row > time { text-align: right; font-size: 7px; color: rgba(231,227,214,.32); }

.rhk-space-summary {
  display: grid;
  grid-template-columns: 66px 1fr 64px;
  gap: 6px;
  margin-top: 7px;
}
.rhk-space-summary > div {
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 7px 8px;
  border: 1px solid rgba(231,227,214,.075);
  border-radius: 5px;
  background: rgba(255,255,255,.018);
}
.rhk-space-summary span { font-size: 7px; color: rgba(231,227,214,.34); letter-spacing: .09em; }
.rhk-space-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: rgba(239,239,233,.80); font-weight: 600; }

.rhk-broadcast-options {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 10px;
}
.rhk-broadcast-options > div { display: flex; flex-direction: column; gap: 2px; }
.rhk-broadcast-options span { font-size: 8px; color: rgba(239,239,233,.68); letter-spacing: .09em; }
.rhk-broadcast-options small { font-size: 7px; color: rgba(231,227,214,.32); }
.rhk-broadcast-options button {
  height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(231,227,214,.11);
  border-radius: 5px;
  background: rgba(255,255,255,.025);
  color: rgba(231,227,214,.60);
  font: 600 7px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .08em;
  cursor: pointer;
}
.rhk-broadcast-options button[aria-pressed="true"] { border-color: rgba(114,201,216,.34); color: rgba(239,239,233,.82); background: rgba(114,201,216,.06); }

#rhk-streams-panel > footer {
  padding: 8px 10px 9px;
  border-top: 1px solid rgba(231,227,214,.06);
  font-size: 7px;
  line-height: 1.4;
  letter-spacing: .08em;
  color: rgba(231,227,214,.30);
}

#rhk-broadcast-viewer {
  left: 18px;
  bottom: 58px;
  width: min(430px, calc(100vw - 36px));
  overflow: hidden;
}
#rhk-broadcast-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #050505;
}
#rhk-broadcast-media iframe { width: 100%; height: 100%; border: 0; display: block; }
.rhk-broadcast-external {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: rgba(231,227,214,.58);
  text-align: center;
}
.rhk-broadcast-external .material-symbols-outlined { font-size: 26px; }
.rhk-broadcast-external strong { font-size: 9px; letter-spacing: .12em; }
.rhk-broadcast-external small { max-width: 260px; font-size: 8px; line-height: 1.45; color: rgba(231,227,214,.36); }
.rhk-broadcast-footer {
  min-height: 37px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-top: 1px solid rgba(231,227,214,.08);
}
.rhk-broadcast-footer span { font-size: 7px; color: rgba(231,227,214,.34); letter-spacing: .07em; }
.rhk-broadcast-footer a { color: rgba(239,239,233,.72); font-size: 8px; letter-spacing: .10em; text-decoration: none; }
.rhk-broadcast-footer a:hover { color: #fff; }

#rhk-news-previews {
  position: fixed;
  inset: 0;
  z-index: 9200;
  pointer-events: none;
  overflow: hidden;
}
.rhk-news-preview {
  position: absolute;
  left: 0;
  top: 0;
  width: 208px;
  pointer-events: auto;
  will-change: transform;
}
.rhk-news-video {
  position: relative;
  width: 208px;
  height: 117px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(216,138,166,.44);
  box-shadow: 0 0 18px rgba(216,138,166,.14);
}
.rhk-news-video iframe { width: 100%; height: 100%; display: block; border: 0; }
.rhk-news-video button {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  height: 21px;
  padding: 0 6px;
  border: 1px solid rgba(216,138,166,.50);
  border-radius: 3px;
  background: rgba(0,0,0,.76);
  color: rgba(239,239,233,.84);
  font: 600 7px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .09em;
  cursor: pointer;
}
.rhk-news-label {
  height: 21px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 7px;
  border: 1px solid rgba(216,138,166,.34);
  border-top: 0;
  background: rgba(5,5,5,.92);
  color: rgba(239,239,233,.74);
  font: 600 8px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .08em;
}
.rhk-news-label i {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #D88AA6;
  box-shadow: 0 0 7px rgba(216,138,166,.7);
  animation: rhk-news-pulse 1.15s ease-in-out infinite;
}
.rhk-news-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rhk-news-stem {
  position: absolute;
  left: 50%;
  top: 138px;
  width: 1px;
  height: 24px;
  background: linear-gradient(to bottom, rgba(216,138,166,.65), rgba(216,138,166,.04));
}
@keyframes rhk-news-pulse { 0%,100% { opacity:.42; } 50% { opacity:1; } }

.rhk-mobile-ui #rhk-streams-panel {
  top: auto;
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: calc(36px + env(safe-area-inset-bottom));
  width: auto;
  max-height: min(62vh, 520px);
  overflow-y: auto;
}
.rhk-mobile-ui #rhk-broadcast-viewer {
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: calc(36px + env(safe-area-inset-bottom));
  width: auto;
}
.rhk-mobile-ui #rhk-news-previews { display: none !important; }

@media (max-width: 560px) {
  .rhk-stream-switches { grid-template-columns: 1fr; }
  .rhk-stream-switches > button { min-height: 58px; display: grid; grid-template-columns: 28px 1fr auto; grid-template-rows: auto auto; text-align: left; justify-items: start; padding: 8px 10px; }
  .rhk-stream-switches .material-symbols-outlined { grid-row: 1 / 3; align-self: center; }
  .rhk-stream-switches i { grid-row: 1 / 3; grid-column: 3; align-self: center; margin: 0; }
  .rhk-space-summary { grid-template-columns: 58px 1fr 58px; }
}