/* WHOOM components (design/DESIGN.md). Only design/tokens.css variables.
   Literals allowed: 0, 1px lines, 2px rings, percentages. Dimensions DESIGN.md specifies that are not
   (yet) tokens are named here once; candidates for design/tokens.css. */
:root {
  --switch-w: var(--h-btn);                    /* 44 */
  --switch-h: calc(var(--sp-6) + 2px);         /* 26 */
  --menu-w: calc(var(--sp-12) * 5 + var(--sp-5)); /* 260, W11 */
  --menu-row: var(--sp-10);                    /* 40, menu rows */
  --sidepanel-w: calc(var(--sp-12) * 10);      /* 480, profile side panel */
  --dialog-w: calc(var(--sp-12) * 11 + var(--sp-4)); /* 544 */
  --toast-action-h: var(--sp-7);               /* 28 */
}

/* agent colours: set data-agent-color on any element to get --agent, --agent-tint, --agent-text */
[data-agent-color="sage"]     { --agent: var(--agent-sage);     --agent-tint: var(--agent-sage-tint);     --agent-text: var(--agent-sage-text); }
[data-agent-color="ochre"]    { --agent: var(--agent-ochre);    --agent-tint: var(--agent-ochre-tint);    --agent-text: var(--agent-ochre-text); }
[data-agent-color="plum"]     { --agent: var(--agent-plum);     --agent-tint: var(--agent-plum-tint);     --agent-text: var(--agent-plum-text); }
[data-agent-color="blue"]     { --agent: var(--agent-blue);     --agent-tint: var(--agent-blue-tint);     --agent-text: var(--agent-blue-text); }
[data-agent-color="brick"]    { --agent: var(--agent-brick);    --agent-tint: var(--agent-brick-tint);    --agent-text: var(--agent-brick-text); }
[data-agent-color="graphite"] { --agent: var(--agent-graphite); --agent-tint: var(--agent-graphite-tint); --agent-text: var(--agent-graphite-text); }

/* ---------- Button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--h-btn); padding: 0 var(--sp-5);
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-pill); }
.btn--primary { background: var(--primary-bg); color: var(--primary-fg); }
.btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--primary-bg) 86%, var(--text-muted)); color: var(--primary-fg); }
.btn--secondary { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn--secondary:hover:not(:disabled) { background: var(--surface-sunken); color: var(--text); }
.btn--accent { background: var(--accent); color: var(--primary-fg); }   /* rare confirming action, e.g. "Starta runda" */
.btn--accent:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, var(--text)); color: var(--primary-fg); }
.btn--text {
  height: auto; padding: 0 var(--sp-1); border: 0; background: none;
  color: var(--text-2); font-weight: var(--fw-regular); text-decoration: underline; text-underline-offset: .2em;
}
.btn--text:hover:not(:disabled) { color: var(--text); }
.btn--icon {
  width: var(--h-btn); padding: 0; border-color: var(--line); background: var(--surface); color: var(--text);
}
.btn--icon:hover:not(:disabled) { background: var(--surface-sunken); }
.btn--icon[aria-pressed="true"], .btn--icon.is-active { background: var(--primary-bg); border-color: var(--primary-bg); color: var(--primary-fg); }
.btn--lg { height: var(--h-btn-lg); padding: 0 var(--sp-6); font-size: var(--fs-body-lg); }
.btn--lg.btn--icon { width: var(--h-btn-lg); padding: 0; }
.btn--sm { height: var(--h-btn-sm); padding: 0 var(--sp-3); font-size: var(--fs-small); }
.btn--sm.btn--icon { width: var(--h-btn-sm); padding: 0; }
.btn svg { width: var(--sp-4); height: var(--sp-4); flex-shrink: 0; }
.btn--lg svg { width: var(--sp-5); height: var(--sp-5); }

/* ---------- SegmentedControl (role="radiogroup" or "tablist") ---------- */
.segmented {
  display: inline-flex; gap: 2px; padding: var(--sp-1);
  background: var(--surface-sunken); border-radius: var(--r-pill);
}
.segmented__option {
  height: var(--h-btn-sm); padding: 0 var(--sp-4); border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--text-2); font-size: var(--fs-small); font-weight: var(--fw-medium); white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--sp-1);
}
.segmented__option svg { width: var(--sp-3); height: var(--sp-3); flex-shrink: 0; }
.segmented__option:hover:not([aria-checked="true"]):not([aria-selected="true"]) { color: var(--text); }
.segmented__option[aria-checked="true"], .segmented__option[aria-selected="true"] { background: var(--surface-raised); color: var(--text); }
.segmented__option:focus-visible { border-radius: var(--r-pill); }

/* ---------- TextField / TextArea ---------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--text-2); }
.input {
  width: 100%; height: var(--h-input); padding: 0 var(--sp-3);
  background: var(--surface-raised); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--r-input);
  font-size: var(--fs-body-lg); font-weight: var(--fw-regular);
}
textarea.input { height: auto; min-height: calc(var(--h-input) * 2); padding: var(--sp-3); line-height: var(--lh-body); resize: vertical; }
select.input { padding-right: var(--sp-8); }
.input::placeholder { color: var(--text-muted); }
.input:focus, .input:focus-visible { border-color: var(--accent); box-shadow: var(--focus-ring); border-radius: var(--r-input); }
.input[aria-invalid="true"] { border-color: var(--danger-line); }
.field__error { font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--danger-text); }
.field__hint { font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--text-muted); }

/* ---------- Checkbox ---------- */
.checkbox { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body); color: var(--text); cursor: pointer; }
input[type="checkbox"]:not(.switch) { accent-color: var(--accent); width: var(--sp-4); height: var(--sp-4); margin: 0; }

/* ---------- Switch: <input type="checkbox" class="switch" role="switch"> ---------- */
.switch {
  appearance: none; position: relative; flex-shrink: 0; margin: 0; cursor: pointer;
  width: var(--switch-w); height: var(--switch-h); border-radius: var(--r-pill);
  background: var(--line-strong); transition: background-color .15s;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: calc(var(--switch-h) - var(--sp-1)); height: calc(var(--switch-h) - var(--sp-1));
  border-radius: 50%; background: var(--surface-raised); transition: transform .15s;
}
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(calc(var(--switch-w) - var(--switch-h))); }
.switch:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-pill); }

/* ---------- StatusChip ---------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  background: var(--surface-sunken); color: var(--text-2);
  font-size: var(--fs-caption); font-weight: var(--fw-medium); line-height: 1.2; white-space: nowrap;
}
.chip--approved { background: var(--accent-soft); color: var(--accent-strong); }
.chip--warn { background: var(--warn-soft); color: var(--warn-text); }
.chip--danger { background: var(--danger-soft); color: var(--danger-text); }
.chip--staff { background: var(--accent-tint); color: var(--accent-strong); }
.btn--danger { background: var(--danger-line); color: var(--primary-fg); border-color: var(--danger-line); }
.btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger-line) 88%, var(--text)); }
.btn--danger-text { color: var(--danger-text); }
.chip--dark { background: var(--primary-bg); color: var(--primary-fg); }
.chip svg { width: var(--sp-3); height: var(--sp-3); }

/* ---------- Panel ---------- */
.panel { background: var(--surface); border-radius: var(--r-panel); padding: var(--sp-6); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
/* staff-only surface: lock + BARA WEBBHUSET, always the same pattern */
.panel--staff, .staff-surface { background: var(--accent-tint); }

/* ---------- Dialog (native <dialog class="dialog">) ---------- */
.dialog {
  width: min(var(--dialog-w), calc(100% - var(--sp-8))); max-height: calc(100% - var(--sp-12));
  padding: var(--sp-8); border: 0; border-radius: var(--r-dialog);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-dialog);
}
.dialog::backdrop { background: var(--overlay); }
.dialog__title { font-size: var(--fs-h2); font-weight: var(--fw-medium); margin: 0 0 var(--sp-5); }
.dialog__body { display: flex; flex-direction: column; gap: var(--sp-4); }
.dialog__actions { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-6); }
.dialog--side {
  margin: 0 0 0 auto; width: min(var(--sidepanel-w), 100%); height: 100%; max-height: none;
  border-radius: var(--r-dialog) 0 0 var(--r-dialog);
}

/* ---------- Menu (role="menu") ---------- */
.menu {
  position: fixed; z-index: 40; width: var(--menu-w); max-height: calc(100vh - var(--sp-8)); overflow-y: auto;
  display: flex; flex-direction: column; padding: var(--sp-2);
  background: var(--surface-raised); border-radius: var(--r-tile); box-shadow: var(--shadow-menu);
}
.menu__item {
  height: var(--menu-row); padding: 0 var(--sp-3); border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text); font-size: var(--fs-body); text-align: left; flex-shrink: 0;
}
.menu__item:hover, .menu__item:focus-visible { background: var(--surface-sunken); box-shadow: none; }
.menu__item--muted { color: var(--text-muted); }
.menu__item--agent { color: var(--agent-text); font-weight: var(--fw-medium); }
.menu__label { padding: var(--sp-1) var(--sp-3); }
.menu__sep { height: 1px; background: var(--line); margin: var(--sp-1); flex-shrink: 0; }

/* ---------- Toast (role="status"), bottom centre, 3 s ---------- */
.toast-region {
  position: fixed; z-index: 50; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--h-btn-lg) + var(--sp-10)); /* clears the call footer */
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--sp-3); pointer-events: auto;
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill);
  background: var(--primary-bg); color: var(--primary-fg); box-shadow: var(--shadow-float);
  font-size: var(--fs-body); animation: toast-in .2s ease-out;
}
.toast__icon { width: var(--sp-4); height: var(--sp-4); flex-shrink: 0; color: color-mix(in srgb, var(--accent) 55%, var(--primary-fg)); }
.toast__action {
  height: var(--toast-action-h); padding: 0 var(--sp-3); margin-left: var(--sp-1); border: 0; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--primary-fg) 14%, var(--primary-bg)); color: var(--primary-fg); font-size: var(--fs-small);
}
.toast .spinner { border-color: color-mix(in srgb, var(--primary-fg) 30%, var(--primary-bg)); border-top-color: var(--primary-fg); }
@keyframes toast-in { from { opacity: 0; transform: translateY(var(--sp-2)); } }

/* ---------- Alert (role="alert"), stays until handled ---------- */
.alert-region {
  position: fixed; z-index: 50; top: var(--sp-4); left: 50%; transform: translateX(-50%);
  width: min(var(--dialog-w), calc(100% - var(--sp-8))); display: flex; flex-direction: column; gap: var(--sp-2);
}
.alert {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-row);
  background: var(--danger-soft); color: var(--danger-text); font-size: var(--fs-body);
}
.alert--warn { background: var(--warn-soft); color: var(--warn-text); }
.alert__icon { width: var(--sp-5); height: var(--sp-5); flex-shrink: 0; }
.alert__text { flex: 1; }
.alert__action {
  height: var(--h-btn-sm); padding: 0 var(--sp-4); border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent); background: transparent;
  color: inherit; font-size: var(--fs-small); font-weight: var(--fw-medium); white-space: nowrap;
}
.alert__close {
  width: var(--h-btn-sm); height: var(--h-btn-sm); padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; display: grid; place-items: center;
}
.alert__close svg { width: var(--sp-4); height: var(--sp-4); }
.alert__action:hover, .alert__close:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

/* ---------- Spinner ---------- */
.spinner {
  width: var(--sp-4); height: var(--sp-4); flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--line-strong); border-top-color: var(--accent); animation: spin .8s linear infinite;
}
.spinner--lg { width: var(--sp-10); height: var(--sp-10); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Avatar / AvatarGroup ---------- */
.avatar {
  width: var(--sp-8); height: var(--sp-8); flex-shrink: 0; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-strong);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: 1; text-transform: uppercase;
}
.avatar--customer { background: var(--surface-sunken); color: var(--text-2); }
.avatar--sm { width: var(--sp-6); height: var(--sp-6); font-size: var(--fs-label); }
.avatar--lg { width: calc(var(--sp-12) + var(--sp-8)); height: calc(var(--sp-12) + var(--sp-8)); font-size: var(--fs-h2); font-weight: var(--fw-medium); }
.avatar.is-speaking { box-shadow: 0 0 0 2px var(--accent); }
.avatar-group { display: inline-flex; align-items: center; }
.avatar-group > .avatar { box-shadow: 0 0 0 2px var(--surface); }
.avatar-group > .avatar + .avatar { margin-left: calc(var(--sp-1) * -1); }
.avatar-group > .avatar.is-speaking { box-shadow: 0 0 0 2px var(--surface), 0 0 0 var(--sp-1) var(--accent); position: relative; }
.consent-dots { display: inline-flex; }
.consent-dots > span { width: var(--sp-7); height: var(--sp-7); border-radius: 50%; background: var(--surface-sunken); border: 2px solid var(--bg); }
.consent-dots > span + span { margin-left: calc(var(--sp-2) * -1); }
.consent-dots > .is-done { background: var(--accent-soft); }
.avatar-group__more { margin-left: var(--sp-1); font-size: var(--fs-caption); color: var(--text-muted); }

/* ---------- VideoTile ---------- */
.video-tile {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9;
  border-radius: var(--r-tile); background: var(--tile-1);
  transition: box-shadow .15s;
}
.video-tile:nth-child(3n+2) { background: var(--tile-2); }
.video-tile:nth-child(3n) { background: var(--tile-3); }
.video-tile--large { border-radius: var(--r-panel); }
.video-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-tile.is-speaking { box-shadow: 0 0 0 2px var(--bg), 0 0 0 var(--sp-1) var(--accent); }
.video-tile__avatar { position: absolute; inset: 0; margin: auto; display: none; }
.video-tile.is-cam-off video { visibility: hidden; }
.video-tile.is-cam-off .video-tile__avatar { display: grid; }
.video-tile__name {
  position: absolute; left: var(--sp-3); bottom: var(--sp-3); max-width: calc(100% - var(--sp-6));
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent); color: var(--text);
  font-size: var(--fs-small); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.video-tile.is-mic-off .video-tile__name::after { content: "· mikrofon av"; font-weight: var(--fw-regular); color: var(--text-muted); }

/* ---------- AgentCard (a <button>, data-agent-color sets the colours) ---------- */
.agent-card {
  display: flex; flex-direction: column; gap: var(--sp-2); width: 100%;
  padding: var(--sp-3) var(--sp-4); border: 0; border-radius: var(--r-tile);
  background: var(--agent-tint, var(--surface)); color: var(--text);
  font-size: var(--fs-small); line-height: var(--lh-body); text-align: left; cursor: pointer;
  transition: box-shadow .15s;
}
.agent-card:hover { box-shadow: 0 0 0 1px var(--agent, var(--line-strong)); }
.agent-card[aria-expanded="true"], .agent-card.is-selected { box-shadow: 0 0 0 2px var(--agent, var(--accent)); }
.agent-card:focus-visible { box-shadow: 0 0 0 2px var(--agent, var(--accent)), var(--focus-ring); border-radius: var(--r-tile); }
.agent-card__head { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.agent-card__badge {
  width: var(--sp-6); height: var(--sp-6); flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--agent, var(--accent)); color: var(--surface-raised);
  font-size: var(--fs-label); font-weight: var(--fw-semibold); line-height: 1;
}
.agent-card__name { font-weight: var(--fw-semibold); color: var(--agent-text, var(--text)); white-space: nowrap; }
.agent-card__time { margin-left: auto; font-size: var(--fs-label); color: var(--agent-text, var(--text-muted)); white-space: nowrap; }
.agent-card__status { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; font-size: var(--fs-caption); color: var(--agent-text, var(--text-muted)); }
.agent-card__status span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-card__body { color: inherit; }
.agent-card__body:empty { display: none; }

/* design/tokens.css has no dark variants of the agent colours yet, so agent tints stay light in the dark
   theme: keep text on them dark (the agent's text colour) until the tokens are completed. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .agent-card,
  :root:not([data-theme="light"]) [data-agent-color].on-tint { color: var(--agent-text); }
}
:root[data-theme="dark"] .agent-card,
:root[data-theme="dark"] [data-agent-color].on-tint { color: var(--agent-text); }

/* ---------- Button and field variants used across views ---------- */
.btn--ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-sunken); color: var(--text); }
.btn--dashed { background: transparent; border: 1px dashed var(--text-muted); color: var(--text); }
.btn--dashed:hover:not(:disabled) { background: var(--surface-sunken); }
.btn[data-icon] { gap: var(--sp-2); }
.btn--icon { position: relative; }
.btn__dot {  /* unread dot on an icon button */
  position: absolute; top: var(--sp-2); right: var(--sp-2); width: var(--sp-3); height: var(--sp-3); border-radius: 50%;
  background: var(--danger-dot, var(--danger-line)); box-shadow: 0 0 0 2px var(--surface);
}
.btn--icon.is-off { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-text); }
.input--pill { border-radius: var(--r-pill); padding: 0 var(--sp-4); }
.input--dashed { border-style: dashed; background: transparent; }
.input--lead { font-size: var(--fs-lead); }
.input--inline { width: calc(var(--sp-12) + var(--sp-6)); height: var(--h-btn-sm); padding: 0 var(--sp-2); display: inline-block; }
.field--label { font-size: var(--fs-caption); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
.field--label .input { text-transform: none; letter-spacing: 0; }