:root {
  color-scheme: light dark;

  /* Surfaces */
  --bg:             light-dark(#f5f5f5, #0f0f0f);
  --surface:        light-dark(#fff, #1a1a1a);
  --surface-raised: light-dark(#e0e0e0, #2a2a2a);
  --border:         light-dark(#ccc, #333);
  --border-strong:  light-dark(#999, #555);

  /* Text */
  --text:        light-dark(#1a1a1a, #e0e0e0);
  --text-muted:  light-dark(#666, #888);
  --text-faint:  light-dark(#999, #555);

  /* Semantic colors */
  --accent:         #1a6b3c;
  --accent-hover:   #1f7d45;
  --danger:         light-dark(#cc0000, #ff4444);
  --danger-bg:      light-dark(#f8d7da, #6b1a1a);
  --danger-border:  light-dark(#f5c6cb, #8b2a2a);
  --warning-bg:     light-dark(#fff3cd, #3a2a00);
  --warning-border: light-dark(#ffc107, #665500);
  --warning-text:   light-dark(#856404, #ffcc00);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#app {
  width: 100%;
  max-width: 480px;
  padding: 2rem;
}

h1 {
  font-size: 2rem;
  margin-bottom: 0.25rem;
}

h1 + p {
  color: var(--text-muted);
  margin-bottom: 2rem;
}

h2 {
  font-size: 1.25rem;
}

button {
  background: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s;

  &:hover {
    background: var(--border);
  }
}

/* Landing View */
#landing-view {
  .actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  #create-room-btn {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    width: 100%;
    padding: 0.8rem;
    font-size: 1rem;

    &:hover {
      background: var(--accent-hover);
    }
  }

  .join-form {
    display: flex;
    gap: 0.5rem;
  }

  #room-input {
    flex: 1;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    font-size: 0.9rem;
    outline: none;

    &:focus {
      border-color: var(--border-strong);
    }
  }
}

/* Room View */
#room-view {
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }

  #room-name {
    cursor: pointer;

    &:hover {
      color: light-dark(#000, #fff);
    }
  }

  #status-banner {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    color: var(--warning-text);
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
  }

  #peer-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    min-height: 100px;
  }

  .peer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface);
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    border: 1px solid var(--border);

    .peer-name {
      font-size: 0.9rem;
      text-transform: capitalize;

      &::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 0.5rem;
        background: transparent;
        transition: background 0.15s;
      }
    }

    &.muted .peer-name::before {
      background: var(--danger);
    }

    &.speaking .peer-name::before {
      background: #22c55e;
    }

    .peer-controls {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .peer-vol-slider {
      width: 60px;
      height: 4px;
      appearance: none;
      background: var(--border);
      border-radius: 2px;
      outline: none;
      opacity: 0.6;
      transition: opacity 0.15s;

      &:hover {
        opacity: 1;
      }

      &::-webkit-slider-thumb {
        appearance: none;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--text-muted);
        cursor: pointer;
      }

      &::-moz-range-thumb {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--text-muted);
        border: none;
        cursor: pointer;
      }
    }

    .peer-mute-btn {
      font-size: 0.75rem;
      padding: 0.2rem 0.5rem;

      &.active {
        background: var(--danger-bg);
        border-color: var(--danger-border);
      }
    }

    &.self {
      border-color: var(--border-strong);
    }
  }

  .header-controls {
    display: flex;
    gap: 0.5rem;
  }

  #mute-btn {
    &.muted {
      background: var(--danger-bg);
      border-color: var(--danger-border);
    }
  }

  #chat {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  #chat-messages {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .chat-msg {
    font-size: 0.85rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border);

    .chat-time {
      color: var(--text-faint);
      font-size: 0.75rem;
      margin-right: 0.4rem;
    }

    .chat-author {
      color: var(--text-muted);
      font-weight: bold;
      margin-right: 0.4rem;
      text-transform: capitalize;
    }

    &.chat-msg-self .chat-author {
      color: var(--accent);
    }

    &.chat-msg-system {
      color: var(--text-faint);
      font-style: italic;
    }
  }

  .chat-input {
    display: flex;
    gap: 0.5rem;
  }

  #chat-input {
    flex: 1;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    outline: none;

    &:focus {
      border-color: var(--border-strong);
    }
  }
}

/* Theme Toggle */
#theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
}

/* Error View */
#error-view {
  text-align: center;

  h2 {
    margin-bottom: 0.5rem;
  }

  p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
  }
}