/* ECHOLINK attendee portal polish 2B.
   Theme-safe reading plane, compact language sheet, truthful hidden states.
   Media playback remains owned by portal.js. */

/* The organizer theme may be saturated. Keep attendee reading surfaces legible without restoring big cards. */
body[data-portal-view] .stream-hub,
body[data-portal-view] .stream-hub-layout {
  background: #f7f9fc !important;
}
body[data-portal-view] .stream-hub-layout {
  color: var(--portal-text) !important;
}
body[data-portal-view] .portal-page,
body[data-portal-view] #agenda-panel,
body[data-portal-view] #attendee-help-panel,
body[data-portal-view] #portal-replay {
  background: #f7f9fc !important;
}

/* Never let component display rules defeat the semantic hidden attribute. */
body[data-portal-view] [hidden] { display: none !important; }

/* On information pages the compact shell is the event identity. Hide the legacy conference/language block. */
body[data-portal-view="today"] .stream-top-bar,
body[data-portal-view="agenda"] .stream-top-bar,
body[data-portal-view="updates"] .stream-top-bar,
body[data-portal-view="replay"] .stream-top-bar,
body[data-portal-view="more"] .stream-top-bar {
  display: none !important;
}

/* Watch and Listen remain visually/runtime untouched except theme safety. */
body[data-portal-view="watch"] .stream-top-bar,
body[data-portal-view="listen"] .stream-top-bar {
  background: #ffffff !important;
}

/* The header translation state is now an actual compact control. */
.portal-language-trigger {
  width: fit-content;
  max-width: 100%;
  padding: 0.15rem 0.32rem 0.15rem 0 !important;
  border-radius: 7px;
  cursor: pointer;
  outline: none;
}
.portal-language-trigger:hover,
.portal-language-trigger:focus-visible {
  background: rgba(79,127,232,.07);
}
.portal-language-trigger::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-left: 0.05rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: .7;
}

/* Language bottom sheet. Existing language pills remain the source of truth but no longer consume page height. */
.portal-language-sheet {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.portal-language-sheet[hidden] { display: none !important; }
.portal-language-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(10,20,35,.42);
}
.portal-language-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  max-height: min(72dvh, 620px);
  overflow: auto;
  padding: 0.55rem 0.9rem calc(1rem + env(safe-area-inset-bottom,0px));
  border-radius: 18px 18px 0 0;
  background: #fff;
  color: var(--portal-text);
  box-shadow: 0 -14px 38px rgba(20,35,60,.18);
}
.portal-language-handle {
  width: 38px;
  height: 4px;
  margin: 0 auto 0.65rem;
  border-radius: 999px;
  background: rgba(24,34,53,.16);
}
.portal-language-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--portal-border-soft);
}
.portal-language-head span {
  display: block;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--portal-muted);
}
.portal-language-head strong {
  display: block;
  margin-top: .12rem;
  font-size: .92rem;
}
.portal-language-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--portal-border-soft);
  border-radius: 9px;
  background: #f7f9fc;
  color: var(--portal-muted);
}
.portal-language-close svg,
.portal-language-option svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.portal-language-options { display: flex; flex-direction: column; }
.portal-language-option {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: .72rem;
  padding: .65rem .1rem;
  border: 0;
  border-bottom: 1px solid var(--portal-border-soft);
  background: transparent;
  color: var(--portal-text);
  text-align: left;
}
.portal-language-option:disabled { opacity: .46; }
.portal-language-option-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(79,127,232,.08);
  color: var(--portal-blue);
}
.portal-language-option-copy { flex: 1; min-width: 0; }
.portal-language-option-copy strong { display: block; font-size: .76rem; }
.portal-language-option-copy small { display: block; margin-top: .14rem; font-size: .64rem; color: var(--portal-muted); }
.portal-language-option-state { color: #22a06b; display: grid; place-items: center; }
.portal-language-empty { padding: 1rem .1rem; font-size: .72rem; color: var(--portal-muted); }
body.portal-language-open { overflow: hidden; }

/* Today is a compact timeline. Next is subordinate to Now and only exists when real data exists. */
.portal-today-list { position: relative; }
#completion-next-row {
  padding-top: .5rem;
  padding-bottom: .5rem;
  min-height: 50px;
}
#completion-next-row .portal-row-icon { width: 30px; height: 30px; flex-basis: 30px; }
#completion-next-row .portal-row-copy strong { font-size: .72rem; }
#completion-next-row .portal-row-copy small { font-size: .64rem; }

/* Make the compact shell and bottom player distinct from the reading plane. */
.portal-shell-header { box-shadow: 0 1px 0 rgba(24,34,53,.05); }
.stream-bottom-bar { background: #0f223e !important; }

/* Avoid unreadable theme inheritance in dense rows. */
.portal-row,
.portal-update,
.portal-page-heading,
.portal-empty-state,
#agenda-panel,
#agenda-panel * {
  text-shadow: none !important;
}

/* Existing language pills remain mounted for qualified behavior but move off the permanent UI on information pages. */
body[data-portal-view="today"] #language-pills,
body[data-portal-view="agenda"] #language-pills,
body[data-portal-view="updates"] #language-pills,
body[data-portal-view="replay"] #language-pills,
body[data-portal-view="more"] #language-pills {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
}

@media (min-width: 700px) {
  .portal-language-sheet { align-items: center; padding: 1rem; }
  .portal-language-panel { border-radius: 16px; max-width: 390px; padding-bottom: .9rem; }
  .portal-language-handle { display: none; }
}