/* Main Layout & Container */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --mtb-height: 52px;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #333;
  min-height: 100vh;
  padding: calc(var(--mtb-height) + 20px) 20px 20px;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  background: white;
  border-radius: 15px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

header {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  padding: 40px 20px;
  text-align: center;
  position: relative;
}

.ui-lang-switcher {
  position: absolute;
  top: 15px;
  right: 20px;
}

.ui-lang-toggle {
  padding: 6px 12px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border-radius: 6px;
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.ui-lang-toggle:hover {
  background: rgba(255, 255, 255, 0.28);
}

.ui-lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  min-width: 130px;
  z-index: 100;
}

.ui-lang-dropdown.open {
  display: block;
}

.ui-lang-option {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: white;
  color: #333;
  font-size: 0.9em;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.ui-lang-option:hover {
  background: #f0f8f5;
}

.ui-lang-option.active {
  color: #28a745;
  font-weight: 700;
}

header h1 {
  font-size: 2.5em;
  margin-bottom: 10px;
  font-weight: 700;
}

header p {
  font-size: 1.1em;
  opacity: 0.9;
}

.main-content {
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* Section Styling */
.section {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 25px;
  border-left: 5px solid #28a745;
  transition: all 0.3s ease;
}

.section:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.section h2 {
  color: #28a745;
  margin-bottom: 20px;
  font-size: 1.5em;
}

/* Control Groups */
.control-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.control-group label {
  font-weight: 600;
  margin-bottom: 8px;
  color: #555;
}

.control-group select {
  padding: 12px 15px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1em;
  transition: border-color 0.3s;
}

.control-group select:focus {
  outline: none;
  border-color: #28a745;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

/* Buttons */
.btn {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-block;
  margin-right: 10px;
  margin-top: 10px;
}

.btn-primary {
  background: #28a745;
  color: white;
}

.btn-primary:hover {
  background: #218838;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
}

.btn-secondary {
  background: #e0e0e0;
  color: #333;
}

.btn-secondary:hover {
  background: #d0d0d0;
}

.btn-success {
  background: #20c997;
  color: white;
}

.btn-success:hover {
  background: #1aa179;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(32, 201, 151, 0.4);
}

.btn-success:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.btn-warning {
  background: #ffc107;
  color: #333;
}

.btn-warning:hover {
  background: #e0a800;
}

.status-not-joined {
  color: #999;
  font-weight: 600;
}

.status-joined {
  color: #28a745;
  font-weight: 600;
}

.btn-danger {
  background: #dc3545;
  color: white;
}

.btn-danger:hover {
  background: #c82333;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(220, 53, 69, 0.4);
}

/* Connection Status */
.connection-status {
  background: white;
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
  border: 2px solid #e0e0e0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.connection-status .btn {
  margin: 0;
}

.status-disconnected {
  color: #dc3545;
  font-weight: 600;
}

.status-connected {
  color: #28a745;
  font-weight: 600;
}

/* Language Buttons */
.language-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.lang-btn {
  padding: 20px;
  border: 3px solid #e0e0e0;
  background: white;
  border-radius: 8px;
  font-size: 1.1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #333;
}

.lang-btn:hover {
  border-color: #28a745;
  background: #f0f8f5;
  transform: translateY(-2px);
}

.lang-btn.active {
  border-color: #28a745;
  background: #28a745;
  color: white;
}

.lang-btn.disabled,
.lang-btn:disabled {
  border-color: #e0e0e0;
  background: #f0f0f0;
  color: #aaa;
  cursor: not-allowed;
  transform: none;
}

.lang-btn.disabled:hover,
.lang-btn:disabled:hover {
  border-color: #e0e0e0;
  background: #f0f0f0;
  transform: none;
}

/* Audio playback toggle greyed out when the selected target language has no audio
   for this session — see updateAudioToggleAvailability() in audience.js. */
.audio-toggle-label:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
  color: #aaa;
}

#mtbAudioToggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Audio Controls */
.audio-controls {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #e0e0e0;
}

.audio-controls label {
  display: flex;
  align-items: center;
  font-weight: 500;
  margin-bottom: 15px;
  cursor: pointer;
}

.audio-controls input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  cursor: pointer;
}

.volume-slider {
  width: 100%;
  height: 6px;
  margin: 15px 0;
  cursor: pointer;
}

#volumeValue {
  display: block;
  text-align: center;
  color: #28a745;
  font-weight: 600;
  margin-top: 10px;
}

/* Translation Display */
.current-translation {
  background: white;
  border-radius: 8px;
  padding: 25px;
  margin-bottom: 20px;
  border-left: 5px solid #28a745;
  min-height: 150px;
}

/* Live "still recognizing" caption — the growing partial hypothesis Azure sends before the
   final translation lands. Hidden by default; .active is toggled by receiveSourceInterim()
   in audience.js based on whether the manager is currently mid-utterance. */
.source-interim-text {
  display: none;
  font-size: 0.9em;
  line-height: 1.5;
  color: #999;
  font-style: italic;
  margin-bottom: 10px;
}

.source-interim-text.active {
  display: block;
}

.source-interim-text .interim-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #28a745;
  margin-right: 6px;
  animation: interim-pulse 1.1s ease-in-out infinite;
}

@keyframes interim-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.source-interim-text .interim-label {
  font-style: normal;
  font-weight: 600;
  margin-right: 4px;
}

/* History List */
.translation-history {
  margin-top: 25px;
}

.translation-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.translation-history h3 {
  color: #28a745;
  margin-bottom: 0;
  font-size: 1.2em;
}

.history-size-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.history-size-label {
  font-size: 0.85em;
  color: #666;
  margin-right: 2px;
}

.history-size-btn {
  padding: 3px 10px;
  font-size: 0.8em;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  background: white;
  color: #555;
  cursor: pointer;
  font-weight: 600;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.history-size-btn:hover {
  border-color: #28a745;
  color: #28a745;
}

.history-size-btn.active {
  border-color: #28a745;
  background: #28a745;
  color: white;
}

.translation-list {
  background: white;
  border-radius: 8px;
  padding: 15px;
  max-height: 800px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  resize: vertical;
  min-height: 80px;
}

.translation-item {
  border-left: 4px solid #28a745;
  padding: 12px;
  margin-bottom: 10px;
  background: #f8f9fa;
  border-radius: 4px;
  transition: background 0.3s, border-left-width 0.2s, box-shadow 0.3s;
}

.translation-item.playing-highlight {
  background: #d4edda;
  border-left: 6px solid #1a7f37;
  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.3);
}

.translation-item-original {
  color: #888;
  font-style: italic;
  font-size: 0.9em;
  margin-bottom: 4px;
}

.translation-item-text {
  color: #333;
  margin: 5px 0;
}

.translation-item-time {
  font-size: 0.85em;
  color: #999;
}

/* Info Content */
.info-content {
  background: white;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e0e0e0;
}

.info-content p {
  margin: 12px 0;
  font-size: 1em;
}

.info-content strong {
  color: #28a745;
}

/* Audio Queue Progress Bar */
.audio-queue-status {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 14px;
  border: 1px solid #e0e0e0;
  font-size: 0.88em;
}

.queue-delay-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-weight: 600;
  color: #555;
}

.progress-delay { font-weight: 700; }
.delay-green  { color: #28a745; }
.delay-yellow { color: #d4a017; }
.delay-orange { color: #fd7e14; }
.delay-red    { color: #dc3545; }

.queue-progress-track {
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

.queue-progress-fill {
  height: 100%;
  background: #28a745;
  border-radius: 4px;
  transition: width 0.4s ease;
  width: 100%;
}

.queue-progress-detail {
  color: #888;
  font-size: 0.85em;
}

/* Responsive Design */
@media (max-width: 768px) {
  .container {
    border-radius: 0;
  }

  header {
    padding: 30px 20px;
  }

  header h1 {
    font-size: 1.5em;
  }

  .main-content {
    padding: 20px;
  }

  .section {
    padding: 20px;
  }

  .language-buttons {
    grid-template-columns: 1fr;
  }

  .audio-player {
    flex-direction: column;
  }
}

/* Language Picker Overlay */
.lang-picker-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.lang-picker-overlay.hidden {
  display: none;
}

.lang-picker-card {
  background: white;
  border-radius: 20px;
  padding: 48px 40px;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  max-width: 640px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.lang-picker-icon {
  font-size: 3em;
  margin-bottom: 12px;
}

.lang-picker-hint {
  color: #888;
  font-size: 0.95em;
  margin-bottom: 32px;
  letter-spacing: 0.02em;
}

.lang-picker-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 480px) {
  .lang-picker-buttons {
    grid-template-columns: 1fr;
  }
}

/* First-visit Feature Tour — spotlight overlay walking the user through the top bar and the
   Join Session controls. See index.html for the 3-element structure (scrim/spotlight/tooltip). */
.tour-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: transparent;
  touch-action: none;
}

.tour-scrim.active {
  display: block;
}

/* The dark backdrop itself is this element's box-shadow: a 9999px spread darkens the whole
   viewport except this box's own area, which stays transparent — a "hole" over the target. */
.tour-spotlight {
  display: none;
  position: fixed;
  z-index: 2001;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72);
  pointer-events: none;
}

.tour-spotlight.active {
  display: block;
}

.tour-tooltip {
  display: none;
  position: fixed;
  z-index: 2002;
  width: min(300px, 90vw);
  background: white;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.tour-tooltip.active {
  display: block;
}

.tour-arrow {
  position: absolute;
  left: 24px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.tour-arrow.arrow-top {
  top: -9px;
  border-bottom: 10px solid white;
}

.tour-arrow.arrow-bottom {
  bottom: -9px;
  border-top: 10px solid white;
}

.tour-step-count {
  font-size: 0.78em;
  color: #999;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.tour-text {
  color: #333;
  font-size: 0.98em;
  line-height: 1.5;
  margin-bottom: 12px;
}

.tour-skip-btn {
  background: none;
  border: none;
  color: #28a745;
  font-weight: 700;
  font-size: 0.88em;
  cursor: pointer;
  padding: 0;
}

.tour-skip-btn:hover {
  text-decoration: underline;
}

.lang-picker-btn {
  padding: 18px 24px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  background: white;
  font-size: 1.15em;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.1s;
  letter-spacing: 0.01em;
}

.lang-picker-btn:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: transparent;
  color: white;
  transform: translateY(-2px);
}

.lang-picker-btn:active {
  transform: translateY(0);
}

/* Fixed Mobile Top Bar — pinned to the browser viewport, not the page container. Uses the
   app's brand green (matching the header) rather than white so it reads as part of the app
   and doesn't blend into the browser's own toolbar chrome. */
.mobile-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--mtb-height);
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  z-index: 500;
  padding: 0 8px;
}

.mtb-item {
  position: relative;
  display: flex;
  align-items: center;
}

.mtb-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 10px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.95em;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  max-width: 38vw;
}

.mtb-trigger:active {
  background: rgba(255, 255, 255, 0.15);
}

/* Language chooser gets its own white pill so it reads as a distinct, tappable control
   (with a dropdown arrow) rather than blending into the rest of the green bar. */
.mtb-lang-trigger {
  background: white;
  color: #333;
  border-radius: 20px;
  padding: 0 10px;
  margin: 8px 0;
  height: auto;
}

.mtb-lang-trigger:active {
  background: #f0f8f5;
}

.mtb-lang-arrow {
  color: #28a745;
  font-size: 0.8em;
  margin-left: 2px;
}

.mtb-lang-short {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mtb-audio-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

#mtbAudioDelay {
  color: #ffe27a;
  font-weight: 700;
}

.mtb-session-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
  font-size: 0.9em;
}

/* Original signal-bars + face icon (own artwork, not stock imagery) on a white circular
   backdrop for contrast against the bar. All 3 state variants are inline SVGs; only the one
   matching the current mtb-dot-* class is shown — same class-toggle updateMobileConnDot()
   already does, no JS changes needed. */
.mtb-conn-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mtb-conn-dot svg {
  width: 100%;
  height: 100%;
  display: none;
}

.mtb-dot-green .conn-icon-joined,
.mtb-dot-yellow .conn-icon-not-joined,
.mtb-dot-red .conn-icon-disconnected {
  display: block;
}

/* Dropdown panels shared by all 3 bar items */
.mtb-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  background: white;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  padding: 12px;
  z-index: 501;
  min-width: 220px;
}

.mtb-dropdown.open {
  display: block;
}

.mtb-lang {
  flex: 1 1 auto;
  min-width: 0;
}

.mtb-lang-dropdown {
  left: 0;
  max-height: 70vh;
  overflow-y: auto;
  min-width: 240px;
  display: none;
  grid-template-columns: 1fr;
  gap: 6px;
}

.mtb-lang-dropdown.open {
  display: grid;
}

.mtb-lang-dropdown .lang-btn {
  padding: 10px 14px;
  font-size: 0.95em;
}

.mtb-audio-dropdown {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.mtb-conn-dropdown {
  right: 0;
}

.mtb-dropdown-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.mtb-dropdown-row:last-child {
  margin-bottom: 0;
}

.mtb-dropdown-row select {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.9em;
}

.mtb-join-btn {
  padding: 5px 12px;
  font-size: 0.85em;
  margin: 0;
}

.mtb-delay-row {
  flex-direction: column;
  align-items: stretch;
}

.mtb-delay-detail {
  font-size: 0.8em;
  color: #888;
  text-align: center;
  margin-bottom: 4px;
}

.mtb-delay-track {
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
}

.mtb-delay-fill {
  height: 100%;
  background: #28a745;
  border-radius: 3px;
  transition: width 0.4s ease;
  width: 100%;
}

#mtbDelayText {
  font-size: 0.85em;
  text-align: center;
}

@media (max-width: 480px) {
  .mtb-trigger {
    padding: 0 6px;
    font-size: 0.85em;
  }
}