:root {
  --bg: #f4f4f4;
  --text: #111111;
  --muted: #666666;
  --muted-light: #aaaaaa;
  --border: #dddddd;
  --panel: #ffffff;
  --cue: #888888;

  --bubble-default: #e8e8e8;
  --bubble-eva: #dbeafe;
  --bubble-marc: #dcfce7;

  --btn-primary: #2563eb;
  --btn-primary-hover: #1d4ed8;
  --btn-secondary: #e5e7eb;
  --btn-secondary-hover: #d1d5db;
  --btn-secondary-text: #111111;
}

@supports (color: color(display-p3 0 0 0)) {
  :root {
    --bg: color(display-p3 0.957 0.957 0.957);
    --text: color(display-p3 0.067 0.067 0.067);
    --muted: color(display-p3 0.4 0.4 0.4);
    --muted-light: color(display-p3 0.667 0.667 0.667);
    --border: color(display-p3 0.867 0.867 0.867);
    --panel: color(display-p3 1 1 1);
    --cue: color(display-p3 0.533 0.533 0.533);

    --bubble-default: color(display-p3 0.91 0.91 0.91);
    --bubble-eva: color(display-p3 0.859 0.922 0.996);
    --bubble-marc: color(display-p3 0.863 0.988 0.902);

    --btn-primary: color(display-p3 0.145 0.388 0.922);
    --btn-primary-hover: color(display-p3 0.114 0.306 0.847);
    --btn-secondary: color(display-p3 0.898 0.906 0.918);
    --btn-secondary-hover: color(display-p3 0.82 0.835 0.855);
    --btn-secondary-text: color(display-p3 0.067 0.067 0.067);
  }
}

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

body {
  font-family: Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 1.9em;
}

main {
  max-width: 90dvw;
  margin: 0 auto;
}

header {
  margin-bottom: 1.2em;
}

h1 {
  font-size: 1.5rem;
  margin-bottom: 4px;
}

header p {
  color: var(--muted);
  font-size: 0.9rem;
}

#placeholder {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  min-height: 50dvh;
  margin-bottom: 1em;
}

.waiting {
  color: var(--muted-light);
  font-style: italic;
}

.cue {
  text-align: center;
  color: var(--cue);
  font-style: italic;
  margin: .7em 0;
  font-size: 0.9rem;
}

.line {
  margin-bottom: 1em;
}

.speaker-name {
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
  display: block;
}

.bubble {
  display: inline-block;
  padding: 0.6em 0.8em;
  border-radius: 12px;
  background: var(--bubble-default);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 85%;
}

.speaker-eva .bubble {
  background: var(--bubble-eva);
}

.speaker-marc .bubble {
  background: var(--bubble-marc);
}

.emotie-badge {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-light);
  margin-top: 4px;
}

.controls {
  display: flex;
  gap: 10px;
}

button {
  padding: .6em .8em;
  border: none;
  border-radius: 8px;
  background: var(--btn-primary);
  color: white;
  font-size: 1rem;
  cursor: pointer;
}

button:hover {
  background: var(--btn-primary-hover);
}

button.secondary {
  background: var(--btn-secondary);
  color: var(--btn-secondary-text);
}

button.secondary:hover {
  background: var(--btn-secondary-hover);
}