:root {
  color-scheme: light dark;

  --bg:             light-dark(#f3f0f8, #110e1a);
  --surface:        light-dark(#fff, #1a1627);
  --surface-raised: light-dark(#e6e0f0, #2a2440);
  --border:         light-dark(#c8bfdb, #3a3155);
  --border-strong:  light-dark(#9b8ec4, #5e4f8a);
  --text:        light-dark(#1e1640, #e0dce8);
  --text-muted:  light-dark(#6b5f8a, #9b8ec4);
  --text-faint:  light-dark(#9b8ec4, #5e4f8a);
  --accent:         #7c5cbf;
  --accent-hover:   #9170d6;
  --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;
  padding-top: 15vh;
}

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

#brand {
  text-align: center;
  margin-bottom: 2rem;
}

#logo {
  display: block;
  width: 120px;
  height: 79px;
  margin: 0 auto 1rem;
  opacity: 0;
  transition: opacity 0.2s;
}

#logo.loaded {
  opacity: 1;
}

h1 {
  font-size: 2rem;
  margin-bottom: 0.25rem;
  background: linear-gradient(90deg, #7c5cbf, #e8a030, #7c5cbf);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: gradient-shift 3s linear infinite;
}

@keyframes gradient-shift {
  to { background-position: 200% center; }
}

h1 + p {
  color: var(--text-muted);
}

h2 {
  font-size: 1.25rem;
}

button {
  touch-action: manipulation;
  background: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  svg {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

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

  &:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
  }
}

#landing-view {
  text-align: center;

  .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;
    gap: 0.5rem;
    font-size: 1rem;

    svg {
      width: 24px;
      height: 24px;
    }

    &: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: 1rem;
    outline: none;

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

#starred-rooms,
#recent-rooms {
  margin-top: 2rem;
  text-align: left;

  h3 {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
  }
}

#starred-list,
#recent-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.starred-room {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  padding: 0.5rem 0.8rem;
  border-radius: 6px;
  border: 1px solid var(--border);

  .starred-room-name {
    flex: 1;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;

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

  .starred-room-count {
    font-size: 0.75rem;
    color: var(--text-faint);

    &.has-peers {
      color: #22c55e;
    }
  }

  .starred-room-action {
    background: none;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    padding: 0;

    svg {
      width: 16px;
      height: 16px;
    }

    &:hover {
      color: var(--danger);
    }

    &.starred-room-star {
      color: var(--accent);

      &:hover {
        color: #e0dce8;
      }
    }
  }

  &.dragging {
    opacity: 0.4;
  }

  &.drag-over {
    border-top: 2px solid var(--accent);
  }
}

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

  .room-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow: hidden;
    min-width: 0;
  }

  #room-name {
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

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

  #star-btn {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    padding: 0.1rem;

    svg {
      width: 18px;
      height: 18px;
    }

    &:hover {
      color: #e0dce8;
    }
  }

  #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;
  }

  #screen-share {
    position: relative;
    margin-bottom: 1rem;
    border-radius: 6px;
    overflow: hidden;
    background: #000;

    video {
      display: block;
      width: 100%;
    }

    button {
      position: absolute;
      bottom: 0.4rem;
      right: 0.4rem;
      padding: 0.3rem;

      svg {
        width: 16px;
        height: 16px;
      }
    }

    @media (hover: hover) {
      button {
        opacity: 0;
        transition: opacity 0.15s;
      }

      &:hover button {
        opacity: 1;
      }
    }

    &:fullscreen {
      video {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }

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

  .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: var(--border);
        transition: background 0.15s;
      }
    }

    &.muted {
      border-color: var(--danger);

      .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 {
      touch-action: none;
      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-rename-input {
      font-size: 1rem;
      text-transform: capitalize;
      flex: 1;
      min-width: 0;
      background: var(--bg);
      color: var(--text);
      border: 1px solid var(--border-strong);
      border-radius: 4px;
      padding: 0.15rem 0.4rem;
      margin-right: 0.5rem;
      outline: none;
    }

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

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

  #share-btn.sharing {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }

  .self-mute-btn {
    padding: 0.2rem;

    svg {
      width: 16px;
      height: 16px;
    }

    &.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-link {
      color: var(--text-muted);
      text-decoration: underline;
      word-break: break-all;

      svg {
        width: 0.75em;
        height: 0.75em;
        vertical-align: baseline;
        margin-left: 0.15em;
        stroke-width: 2.5;
      }

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

  .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: 1rem;
    outline: none;

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

#theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  padding: 0.4rem;

  svg {
    width: 18px;
    height: 18px;
  }
}

#error-view {
  text-align: center;

  h2 {
    margin-bottom: 0.5rem;
  }

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

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-faint);

  a {
    color: var(--text-muted);
    text-decoration: none;

    &:hover {
      color: var(--text);
    }
  }
}