/* Link components — reference implementation of every design-system component and app pattern
   (navigation, headers, panels, settings). Uses only tokens from tokens.css. Rules and anatomy: ux-ui/*.md.
   When the stack is chosen (shadcn/ui), port these values into the components; don't invent new ones.
   Classes marked "doc" force a state for the visual reference only; real UI uses the pseudo-classes. */

/* ================= Scrollbar =================
   Thin, rounded thumb on a transparent track: it floats over the surface instead of cutting a gray strip.
   Thumb = border-strong, hover = border-hover. Rules: ux-ui/scrollbar.md. */
::-webkit-scrollbar { width: var(--space-3); height: var(--space-3); background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border: var(--space-1) solid transparent; background-clip: padding-box; border-radius: var(--radius-round); min-height: var(--space-10); }
::-webkit-scrollbar-thumb:hover { background-color: var(--color-border-hover); }
::-webkit-scrollbar-button { display: none; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; } }

/* ================= Focus (keyboard) =================
   shadcn style, our gray: the edge turns focus-ring and a soft 3px focus-ring-halo glows around it. No gap.
   Keyboard only (:focus-visible); text fields also on click (:focus-within). Gray, so focus never looks like selection (teal).
   Three ways to draw it, one look:
   - elements with a border (buttons, fields, composer): recolor the border + --focus-halo
   - elements without one: --focus-outer (1px edge + halo, outside)
   - rows in lists, menus and tabs, which sit tight or inside scroll areas: --focus-inset (drawn inside, never clipped)
   Rules: ux-ui/buttons.md → States. */
:root {
  --focus-halo: 0 0 0 3px var(--color-focus-ring-halo);
  --focus-outer: 0 0 0 1px var(--color-focus-ring), 0 0 0 4px var(--color-focus-ring-halo);
  --focus-inset: inset 0 0 0 1px var(--color-focus-ring), inset 0 0 0 4px var(--color-focus-ring-halo);
}

/* ================= Button ================= */
.btn {
  --h: var(--size-control-default);
  --px: var(--space-button-padding-md);
  --ic: var(--size-icon-md);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-control-gap);
  height: var(--h); min-width: var(--h); padding: 0 var(--px);
  border: 1px solid transparent; border-radius: var(--radius-control);
  cursor: pointer; white-space: nowrap; user-select: none; text-decoration: none;
  font-family: var(--type-label-lg-family); font-size: var(--type-label-lg-size); line-height: var(--type-label-lg-line);
  font-weight: var(--type-label-lg-weight); letter-spacing: var(--type-label-lg-tracking);
}
.btn svg, .btn .icon { width: var(--ic); height: var(--ic); flex: none; }

/* Sizes: sm 32 · md 36 (mouse default) · lg 48 (touch default) */
.btn--sm {
  --h: var(--size-control-dense); --px: var(--space-button-padding-sm);
  font-family: var(--type-label-md-family); font-size: var(--type-label-md-size); line-height: var(--type-label-md-line);
  font-weight: var(--type-label-md-weight); letter-spacing: var(--type-label-md-tracking);
}
.btn--lg { --h: var(--size-control-touch); --px: var(--space-button-padding-lg); --ic: var(--size-icon-lg); }
.btn--icon { padding: 0; width: var(--h); }   /* icon-only: always give it aria-label + tooltip */

.btn:focus-visible, .btn.is-focus /* doc */ { outline: none; border-color: var(--color-focus-ring); box-shadow: var(--focus-halo); }

/* Variants */
.btn--primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn--primary:hover, .btn--primary.is-hover /* doc */ { background: var(--color-accent-hover); }
.btn--primary:active, .btn--primary.is-pressed /* doc */ { background: var(--color-accent-pressed); }

.btn--secondary { background: var(--color-bg-elevated); color: var(--color-text-primary); border-color: var(--color-border-strong); }
.btn--secondary:hover, .btn--secondary.is-hover /* doc */ { background: var(--color-bg-hover); }
.btn--secondary:active, .btn--secondary.is-pressed /* doc */ { background: var(--color-bg-pressed); }

.btn--ghost { background: transparent; color: var(--color-text-primary); }
.btn--ghost:hover, .btn--ghost.is-hover /* doc */ { background: var(--color-bg-hover); }
.btn--ghost:active, .btn--ghost.is-pressed /* doc */ { background: var(--color-bg-pressed); }

.btn--danger { background: var(--color-danger-solid); color: var(--color-on-danger); }
.btn--danger:hover, .btn--danger.is-hover /* doc */ { background: var(--color-danger-hover); }
.btn--danger:active, .btn--danger.is-pressed /* doc */ { background: var(--color-danger-pressed); }

/* Link: teal text, no fill in any state; hover and press shift the teal one step. Text actions inside toasts (Prikaži, Poništi). Ghost's size and padding, so the click area stays 32 */
.btn--link { background: transparent; color: var(--color-accent); }
.btn--link:hover, .btn--link.is-hover /* doc */ { color: var(--color-accent-hover); }
.btn--link:active, .btn--link.is-pressed /* doc */ { color: var(--color-accent-pressed); }

/* Disabled (all variants) */
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--color-bg-disabled); color: var(--color-text-disabled); border-color: transparent; cursor: not-allowed;
}
.btn--ghost:disabled, .btn--ghost[aria-disabled="true"], .btn--link:disabled, .btn--link[aria-disabled="true"] { background: transparent; }

/* Loading: spinner replaces the leading icon, label stays, button keeps its width. Set aria-busy="true". */
.btn[aria-busy="true"] { cursor: progress; }
.spinner {
  width: var(--ic); height: var(--ic); flex: none; border-radius: var(--radius-round);
  border: 2px solid currentColor; border-right-color: transparent; animation: link-spin .8s linear infinite;
}
@keyframes link-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

/* Touch: sm buttons keep their look but get a 48px tappable area */
@media (pointer: coarse) {
  .btn { --h: var(--size-control-touch); --px: var(--space-button-padding-lg); --ic: var(--size-icon-lg); }
  .btn--sm { --h: var(--size-control-dense); --px: var(--space-button-padding-sm); --ic: var(--size-icon-md); }
  .btn--sm::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, var(--size-touch-target-min)); height: var(--size-touch-target-min); transform: translate(-50%, -50%);
  }
}

/* ================= Input field ================= */
/* Anatomy: .field > label.field-label + .control (icon? input end-button?) + .field-foot (message, count) */
.field {
  --h: var(--size-control-default);
  --px: var(--space-field-padding-md);
  --ic: var(--size-icon-md);
  display: flex; flex-direction: column; gap: var(--space-stack-gap-condensed); min-width: 0;
}
.field--sm { --h: var(--size-control-dense); --px: var(--space-field-padding-sm); gap: var(--space-1-5); }
.field--lg { --h: var(--size-control-touch); --px: var(--space-field-padding-lg); --ic: var(--size-icon-lg); }

.field-label {
  display: flex; gap: var(--space-1); align-items: baseline; color: var(--color-text-primary);
  font-family: var(--type-label-lg-family); font-size: var(--type-label-lg-size); line-height: var(--type-label-lg-line);
  font-weight: var(--type-label-lg-weight); letter-spacing: var(--type-label-lg-tracking);
}
.field--sm .field-label {
  font-family: var(--type-label-md-family); font-size: var(--type-label-md-size); line-height: var(--type-label-md-line);
  font-weight: var(--type-label-md-weight); letter-spacing: var(--type-label-md-tracking);
}
.field-label .optional { color: var(--color-text-secondary); }   /* "(opciono)" */

.control {
  position: relative; display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--h); padding: 0 var(--px);
  background: var(--color-bg-app); color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); cursor: text;
  font-family: var(--type-body-sm-family); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line);
  font-weight: var(--type-body-sm-weight); letter-spacing: var(--type-body-sm-tracking);
}
/* lg fields, and every field on touch: 16px so iOS doesn't zoom on focus */
.field--lg .control {
  font-family: var(--type-body-md-family); font-size: var(--type-body-md-size); line-height: var(--type-body-md-line);
  font-weight: var(--type-body-md-weight); letter-spacing: var(--type-body-md-tracking);
}
@media (pointer: coarse) {
  .field { --h: var(--size-control-touch); --px: var(--space-field-padding-lg); }
  .field .control {
    font-family: var(--type-body-md-family); font-size: var(--type-body-md-size); line-height: var(--type-body-md-line);
    font-weight: var(--type-body-md-weight); letter-spacing: var(--type-body-md-tracking);
  }
}
.control > svg, .control > .icon { width: var(--ic); height: var(--ic); flex: none; color: var(--color-text-secondary); }
.control input, .control textarea {
  flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; resize: none;
}
.control textarea { padding: var(--space-2) 0; }
.control:has(textarea) { align-items: flex-start; }
.control input::placeholder, .control textarea::placeholder { color: var(--color-text-secondary); }

/* States */
.control:hover, .control.is-hover /* doc */ { border-color: var(--color-border-hover); }
.control:focus-within, .control.is-focus /* doc */ { border-color: var(--color-focus-ring); box-shadow: var(--focus-halo); }
.control:has([aria-invalid="true"]), .control.is-error /* doc */ { border-color: var(--color-danger); }
.control:has([aria-invalid="true"]):focus-within, .control.is-error.is-focus /* doc */ { border-color: var(--color-danger); }   /* the red edge stays; the halo shows focus */
.control:has(:disabled) {
  background: var(--color-bg-disabled); border-color: var(--color-border-subtle); color: var(--color-text-disabled); cursor: not-allowed;
}
.control:has(:disabled) > svg, .control:has(:disabled) input::placeholder { color: var(--color-text-disabled); }
.control:has([readonly]) { background: var(--color-bg-surface); border-color: var(--color-border-subtle); }

/* Small button at the end of a field: clear, show password */
.control .field-action {
  display: inline-grid; place-items: center; flex: none; margin-right: calc(var(--space-1) * -1); padding: 0;
  width: var(--size-control-dense); height: var(--size-control-dense);
  border: 0; border-radius: var(--radius-control-inner); background: transparent; color: var(--color-text-secondary); cursor: pointer;
}
.field--sm .control .field-action { width: var(--space-6); height: var(--space-6); }
.control .field-action svg { width: var(--size-icon-md); height: var(--size-icon-md); }
.control .field-action:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.control .field-action:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--color-focus-ring); }   /* inside the field: the edge only */

/* Helper / error / count: body-xs at every size; error icon 16px = line height */
.field-foot {
  display: flex; gap: var(--space-3); justify-content: space-between; color: var(--color-text-secondary);
  font-family: var(--type-body-xs-family); font-size: var(--type-body-xs-size); line-height: var(--type-body-xs-line);
  font-weight: var(--type-body-xs-weight); letter-spacing: var(--type-body-xs-tracking);
}
.field-foot .field-message { display: flex; gap: var(--space-1); align-items: flex-start; }
.field-foot .field-message svg { width: var(--size-icon-sm); height: var(--size-icon-sm); flex: none; }
.field-foot.is-error .field-message { color: var(--color-danger); }
.field-foot .field-count { font-variant-numeric: tabular-nums; }
.field-foot .field-count.is-over { color: var(--color-danger); }
.field:has(:disabled) .field-label, .field:has(:disabled) .field-foot { color: var(--color-text-disabled); }

/* ================= List rows ================= */
/* Rules: ux-ui/lists.md. Rows sit 2px apart (space-list-gap); focus is drawn inside the row for that reason. */
.list { display: flex; flex-direction: column; gap: var(--space-list-gap); }

/* Section header: "JAVNI KANALI" + collapse chevron + optional ghost sm "+" button */
.list-section {
  display: flex; align-items: center; gap: var(--space-1);
  min-height: var(--size-control-dense); padding: var(--space-3) var(--space-1) var(--space-1) var(--space-2);
  color: var(--color-text-secondary);
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;   /* = .caps modifier */
}
.list-section .list-section-toggle {
  display: flex; align-items: center; gap: var(--space-1); flex: 1; padding: 0;
  border: 0; border-radius: var(--radius-control-inner); background: transparent;
  color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; text-align: left; cursor: pointer;
}
.list-section .list-section-toggle svg { width: var(--size-icon-md); height: var(--size-icon-md); transition: transform .15s; }
.list-section .list-section-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.list-section .list-section-toggle:focus-visible { outline: none; box-shadow: var(--focus-outer); }
.list-section .btn { color: var(--color-text-secondary); }

/* Row (shared by channel, conversation and member rows) */
.row {
  position: relative; display: flex; align-items: center; gap: var(--space-2); width: 100%;
  min-height: var(--size-control-default); padding: 0 var(--space-2);
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text-secondary);
  text-align: left; cursor: pointer;
  font-family: var(--type-label-lg-family); font-size: var(--type-label-lg-size); line-height: var(--type-label-lg-line);
  font-weight: var(--type-label-lg-weight); letter-spacing: var(--type-label-lg-tracking);
}
@media (pointer: coarse) { .row { min-height: var(--size-touch-target-min); } }
.row > svg { width: var(--size-icon-md); height: var(--size-icon-md); flex: none; }
.row-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-trail { display: flex; align-items: center; gap: var(--space-1-5); flex: none; }
.row-trail svg { width: var(--size-icon-md); height: var(--size-icon-md); }

.row:hover, .row.is-hover /* doc */ { background: var(--color-bg-hover); }
.row:active, .row.is-pressed /* doc */ { background: var(--color-bg-pressed); }
.row:focus-visible, .row.is-focus /* doc */ { outline: none; box-shadow: var(--focus-inset); }

/* Unread: text-primary + strong. Muted rows never become unread. */
.row.is-unread { color: var(--color-text-primary); }
.row.is-unread .row-name { font-weight: 600; }   /* = .strong modifier */
/* Selected (open): accent-soft + 3px accent bar */
.row[aria-current="page"], .row.is-selected { background: var(--color-accent-soft); color: var(--color-accent-soft-text); }
.row[aria-current="page"]::before, .row.is-selected::before {
  content: ""; position: absolute; left: 0; top: var(--space-2); bottom: var(--space-2);
  width: 3px; border-radius: var(--radius-round); background: var(--color-accent);
}

/* Badge: only for mentions and direct messages ("someone needs you") */
.badge {
  display: inline-grid; place-items: center; min-width: var(--space-5); height: var(--space-5); padding: 0 var(--space-1-5);
  border-radius: var(--radius-round); background: var(--color-accent); color: var(--color-on-accent);
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line);
  font-weight: var(--type-label-sm-weight); font-variant-numeric: tabular-nums;
}
/* Live room: people in the channel's audio/video room right now */
/* Live room: red like the recording pill = "live now"; the icon pulses slowly (still with reduced motion) */
.row-live {
  display: inline-flex; align-items: center; gap: var(--space-0-5); color: var(--color-danger);
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line);
  font-weight: var(--type-label-sm-weight); font-variant-numeric: tabular-nums;
}

/* ================= Avatar ================= */
/* Rules: ux-ui/avatar.md. Sizes sm 24 · md 32 (default) · lg 40 · xl 64 · 2xl 96.
   --on = the background the avatar sits on (used for the ring around presence dots and stacked faces). */
.avatar {
  --av: var(--size-avatar-md); --dot: var(--space-3); --ring: 2px;
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--av); height: var(--av); border-radius: var(--radius-round);
  background: var(--color-avatar-1); color: var(--color-on-avatar);
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line);
  font-weight: var(--type-label-sm-weight); letter-spacing: var(--type-label-sm-tracking);
}
.avatar--sm { --av: var(--size-avatar-sm); }   /* one initial; no presence dot */
.avatar--lg {
  --av: var(--size-avatar-lg);
  font-family: var(--type-title-sm-family); font-size: var(--type-title-sm-size); line-height: var(--type-title-sm-line);
  font-weight: var(--type-title-sm-weight); letter-spacing: var(--type-title-sm-tracking);
}
.avatar--xl {
  --av: var(--size-avatar-xl); --dot: var(--space-4); --ring: 3px;
  font-family: var(--type-headline-sm-family); font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line);
  font-weight: var(--type-headline-sm-weight); letter-spacing: var(--type-headline-sm-tracking);
}
.avatar--2xl {
  --av: var(--size-avatar-2xl); --dot: var(--space-5); --ring: 4px;
  font-family: var(--type-headline-lg-family); font-size: var(--type-headline-lg-size); line-height: var(--type-headline-lg-line);
  font-weight: var(--type-headline-lg-weight); letter-spacing: var(--type-headline-lg-tracking);
}

/* Photo: thin inner outline so light/dark photos don't dissolve into the page */
.avatar img { width: 100%; height: 100%; border-radius: var(--radius-round); object-fit: cover; display: block; }
.avatar:has(> img)::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-round);
  box-shadow: inset 0 0 0 1px var(--color-border-subtle); pointer-events: none;
}

/* Presence: centred on the circle's edge at the bottom-right (45°) */
.presence {
  position: absolute; right: calc(var(--av) * 0.146 - var(--dot) / 2); bottom: calc(var(--av) * 0.146 - var(--dot) / 2);
  width: var(--dot); height: var(--dot); border-radius: var(--radius-round);
  background: var(--color-status-online); box-shadow: 0 0 0 var(--ring) var(--on, var(--color-bg-surface));
}
.presence--away    { background: var(--color-status-away); }
.presence--offline { background: var(--color-status-offline); }
.presence--dnd     { background: var(--color-status-dnd); display: grid; place-items: center; }
.presence--dnd::after { content: ""; width: 55%; height: calc(var(--dot) * 0.2); border-radius: var(--radius-round); background: var(--color-on-danger); }
.avatar--sm .presence { display: none; }
.row.is-selected .presence, .row[aria-current="page"] .presence { --on: var(--color-accent-soft); }

/* Group: first two members side by side, overlapping, inside the square (each 58%) */
.avatar--group { background: transparent; }
.avatar--group > .avatar-member {
  position: absolute; top: 50%; transform: translateY(-50%); overflow: hidden;
  display: grid; place-items: center; width: calc(var(--av) * 0.58); height: calc(var(--av) * 0.58);
  border-radius: var(--radius-round); color: var(--color-on-avatar);
  box-shadow: 0 0 0 var(--ring) var(--on, var(--color-bg-surface));
}
.avatar--group > .avatar-member:first-child { left: 0; padding-right: calc(var(--av) * 0.16); }   /* letters in the visible part */
.avatar--group > .avatar-member:first-child img { margin-right: calc(var(--av) * -0.16); width: calc(100% + var(--av) * 0.16); }
.avatar--group > .avatar-member:last-child { right: 0; }
.avatar--group > .avatar-member img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm.avatar--group > .avatar-member { font-size: 0; }   /* 24px: colors only */
.avatar--md.avatar--group > .avatar-member, .avatar--lg.avatar--group > .avatar-member {
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight);
}
.avatar--xl.avatar--group > .avatar-member {
  font-family: var(--type-title-sm-family); font-size: var(--type-title-sm-size); line-height: var(--type-title-sm-line); font-weight: var(--type-title-sm-weight);
}
.avatar--2xl.avatar--group > .avatar-member {
  font-family: var(--type-headline-sm-family); font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); font-weight: var(--type-headline-sm-weight);
}

/* Stack: participants, overlapping sideways; max 4 circles (3 faces + "+N") */
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack > .avatar { box-shadow: 0 0 0 var(--ring) var(--on, var(--color-bg-surface)); }
.avatar-stack > .avatar + .avatar { margin-left: calc(var(--av) * -0.28); }
.avatar-stack > .avatar:not(:last-child):not(:has(img)) { padding-right: calc(var(--av) * 0.28); }   /* letters in the visible part */
/* Live room in a channel row: who is in it, as faces. The ring takes the row's own background when it's selected */
/* Only the arcs pulse, inner then outer, like a signal going out; the dot stays still. The icon is sensors split into dot + arcs (LIVE_ICON in the prototype) */
.row-live .live-wave { animation: link-live 1.6s ease-in-out infinite; }
.row-live .live-wave--outer { animation-delay: .3s; }
@keyframes link-live { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
/* Selected row: the number takes the row's text color (red on accent-soft is 4.2:1 in light, too low for text); the icon stays red (3:1 is enough for icons) */
.row[aria-current="page"] .row-live-count, .row.is-selected .row-live-count { color: var(--color-accent-soft-text); }
@media (prefers-reduced-motion: reduce) { .row-live .live-wave { animation: none; } }
.row-live .avatar-stack { margin-left: var(--space-1); }
.row[aria-current="page"] .row-live .avatar-stack, .row.is-selected .row-live .avatar-stack { --on: var(--color-accent-soft); }
.avatar-stack > .avatar-more {   /* state layer composited over the surface, so it stays opaque over the face behind it */
  background: linear-gradient(var(--color-bg-pressed), var(--color-bg-pressed)), var(--on, var(--color-bg-surface)); color: var(--color-text-primary);
}

/* Conversation row: two lines (direct messages, groups) — 56px, touch 64px */
.row--two { gap: var(--space-3); padding: var(--space-2); }
@media (pointer: coarse) { .row--two { padding: var(--space-3) var(--space-2); } }
.row--two .row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row--two .row-line { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.row--two .row-name { color: var(--color-text-primary); }
.row--two .row-time {
  flex: none; color: var(--color-text-secondary);
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line);
  font-weight: var(--type-label-sm-weight); font-variant-numeric: tabular-nums;
}
.row--two .row-preview {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-text-secondary);
  font-family: var(--type-body-sm-family); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line);
  font-weight: var(--type-body-sm-weight); letter-spacing: var(--type-body-sm-tracking);
}
.row--two .row-line .badge { align-self: center; }
.row--two.is-unread .row-preview { color: var(--color-text-primary); }
.row--two.is-unread .row-time { color: var(--color-accent); }
.row--two .row-preview.is-typing { color: var(--color-accent); }
.row--two.is-selected .row-name, .row--two.is-selected .row-preview, .row--two.is-selected .row-time,
.row--two[aria-current="page"] .row-name, .row--two[aria-current="page"] .row-preview, .row--two[aria-current="page"] .row-time { color: var(--color-accent-soft-text); }

/* Member row: avatar 32 + name + role */
.row--member { gap: var(--space-3); }
.row--member .row-name { color: var(--color-text-primary); }
.row--member.is-offline .row-name { color: var(--color-text-secondary); }
.row-role {
  flex: none; color: var(--color-text-secondary);
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight);
}

/* Static row: a person in a list that holds its own buttons (webinar participants). Not clickable itself, so no hover. */
.row--static { cursor: default; }
.row--static:hover, .row--static:active { background: transparent; }
.row-num { flex: none; min-width: var(--space-4); text-align: center; color: var(--color-text-secondary);
  font-family: var(--type-label-md-family); font-size: var(--type-label-md-size); line-height: var(--type-label-md-line); font-weight: var(--type-label-md-weight); }
.row-trail.is-muted { color: var(--color-danger); }
.row--member .row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }   /* name + optional role line underneath */
.row-sub { color: var(--color-text-secondary);
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); letter-spacing: var(--type-label-sm-tracking); }

/* ================= Call components ================= */
/* Rules: ux-ui/calls.md. Sizes follow input: 44 with a mouse (size-control-call), 48 on touch. */

/* Call button (round): mic, camera, share, raise hand, more */
.call-btn {
  position: relative; display: inline-grid; place-items: center; padding: 0; cursor: pointer;
  width: var(--size-control-call); height: var(--size-control-call); border-radius: var(--radius-round);
  border: 1px solid transparent; background: var(--color-bg-hover); color: var(--color-text-primary);
}
.call-btn svg { width: var(--size-icon-lg); height: var(--size-icon-lg); }
.call-btn:hover, .call-btn.is-hover /* doc */ { background: var(--color-bg-pressed); }
.call-btn:focus-visible, .call-btn.is-focus /* doc */ { outline: none; box-shadow: var(--focus-outer); }
/* Off (mic / camera): red + crossed-out icon. The only red in the bar. */
.call-btn.is-off { background: var(--color-danger-solid); color: var(--color-on-danger); }
.call-btn.is-off:hover { background: var(--color-danger-hover); }
/* Active (hand raised, sharing): teal */
.call-btn[aria-pressed="true"]:not(.is-off), .call-btn.is-active { background: var(--color-accent); color: var(--color-on-accent); }
.call-btn[aria-pressed="true"]:not(.is-off):hover, .call-btn.is-active:hover { background: var(--color-accent-hover); }
/* Locked (webinar attendee): can't unmute; tooltip explains why */
.call-btn[aria-disabled="true"] { background: var(--color-bg-disabled); color: var(--color-text-disabled); cursor: not-allowed; }
.call-btn .call-btn-lock {
  position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center;
  width: var(--size-icon-md); height: var(--size-icon-md); border-radius: var(--radius-round);
  background: var(--color-bg-elevated); color: var(--color-text-secondary); box-shadow: 0 0 0 2px var(--on, var(--color-bg-elevated));
}
.call-btn .call-btn-lock svg { width: var(--size-icon-sm); height: var(--size-icon-sm); }

/* Leave: neutral, only the hang-up icon is red */
.call-leave {
  display: inline-flex; align-items: center; gap: var(--space-control-gap); cursor: pointer;
  height: var(--size-control-call); padding: 0 var(--space-button-padding-lg); border: 0; border-radius: var(--radius-round);
  background: var(--color-bg-hover); color: var(--color-text-primary);
  font-family: var(--type-label-lg-family); font-size: var(--type-label-lg-size); line-height: var(--type-label-lg-line);
  font-weight: var(--type-label-lg-weight); letter-spacing: var(--type-label-lg-tracking);
}
.call-leave svg { width: var(--size-icon-lg); height: var(--size-icon-lg); color: var(--color-danger); }
.call-leave:hover, .call-leave:active { background: var(--color-bg-pressed); }
.call-leave:focus-visible { outline: none; box-shadow: var(--focus-outer); }

/* Control bar: floating pill, centred 16px above the bottom of the stage */
.call-bar {
  --on: var(--color-bg-elevated);
  display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2);
  border-radius: var(--radius-round); background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-elevated);
}
.call-bar-divider { width: 1px; align-self: stretch; margin: var(--space-1); background: var(--color-border-subtle); }
.call-bar--floating { position: absolute; left: 50%; bottom: var(--space-4); transform: translateX(-50%); z-index: 4; transition: opacity .2s; }
.call-bar--floating.is-hidden { opacity: 0; pointer-events: none; }   /* fullscreen, 3 s without mouse movement */
/* Čet button in the call bar: dot for new messages while the chat is closed */
.call-chat-btn { position: relative; display: inline-flex; }
.call-btn-dot { position: absolute; top: 0; right: 0; width: var(--space-3); height: var(--space-3); border-radius: var(--radius-round); background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-bg-elevated); pointer-events: none; }

@media (pointer: coarse) {
  .call-btn { width: var(--size-control-touch); height: var(--size-control-touch); }
  .call-btn svg, .call-leave svg { width: var(--size-icon-lg); height: var(--size-icon-lg); }
  .call-leave { height: var(--size-control-touch); padding: 0 var(--space-button-padding-lg); }
  .call-bar { gap: var(--space-3); }
}

/* Screen share overlays: who shares (.share-label, top-left) and the Ceo ekran icon button (top-right, always visible);
   in full screen one small tile of whoever is speaking, under the button. In calls toasts sit over the camera column,
   and in full screen at the bottom-right, so they never cover the button. Rules: ux-ui/calls.md → Screen share */
.video-tile-label.share-label { top: var(--space-3); left: var(--space-3); bottom: auto; z-index: 3; transition: opacity .2s; }
.share-full-btn { position: absolute; right: var(--space-3); top: var(--space-3); z-index: 3; background: var(--color-bg-elevated); transition: opacity .2s; }   /* no shadow: the solid chip alone reads on any content */
.video-tile.share-cam { position: absolute; right: var(--space-3); top: calc(var(--space-3) + var(--size-control-default) + var(--space-3)); z-index: 3;
  width: min(28%, var(--size-list-medium)); aspect-ratio: 16 / 10; box-shadow: var(--shadow-elevated); }
.video-tile.share-cam .share-cam-hide { position: absolute; right: var(--space-2); top: var(--space-2); background: var(--color-bg-elevated); opacity: 0; }
.share-cam:hover .share-cam-hide, .share-cam-hide:focus-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .share-label, .share-full-btn { transition: none; } }

/* Recording indicator: visible to every participant while recording */
.rec-indicator {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: var(--size-control-dense); padding: 0 var(--space-3); border-radius: var(--radius-round);
  background: var(--color-danger-solid); color: var(--color-on-danger);
  font-family: var(--type-label-md-family); font-size: var(--type-label-md-size); line-height: var(--type-label-md-line);
  font-weight: var(--type-label-md-weight); font-variant-numeric: tabular-nums;
}
.rec-indicator:has(.rec-stop) { padding-right: var(--space-1); }
.rec-indicator .rec-dot { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-round); background: var(--color-on-danger); animation: link-rec 1.6s ease-in-out infinite; }
@keyframes link-rec { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .rec-indicator .rec-dot { animation: none; } }
.rec-indicator .rec-stop {
  height: var(--space-6); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-round); cursor: pointer;
  background: var(--color-on-danger); color: var(--color-danger-solid);
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight);
}

/* Video tile */
.video-tile {
  --on: var(--color-bg-surface);
  position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 16 / 10;
  border-radius: var(--radius-control); background: var(--color-bg-surface);
}
.video-tile > video, .video-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-tile.is-speaking::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-control); pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--color-status-speaking);
}
.video-tile-label, .video-tile-hand {
  position: absolute; display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight);
}
.video-tile-label {
  left: var(--space-2); bottom: var(--space-2); max-width: calc(100% - var(--space-4));
  padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-control-inner);
  background: var(--color-bg-elevated); color: var(--color-text-primary);
}
.video-tile-label > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-tile-label svg { width: var(--size-icon-sm); height: var(--size-icon-sm); flex: none; }
.video-tile-label .is-muted { color: var(--color-danger); }
.video-tile-hand {
  left: var(--space-2); top: var(--space-2); padding: var(--space-0-5) var(--space-2) var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-round); background: var(--color-accent); color: var(--color-on-accent);
}
.video-tile-hand svg { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.video-tile-menu { position: absolute; right: var(--space-2); top: var(--space-2); opacity: 0; background: var(--color-bg-elevated); }
.video-tile:hover .video-tile-menu, .video-tile-menu:focus-visible, .video-tile:focus-within .video-tile-menu { opacity: 1; }

/* ================= Menu ================= */
/* Rules: ux-ui/menus.md. Opens from ⋯ / ⋮ buttons and select fields. */
.menu {
  --on: var(--color-bg-elevated);
  display: flex; flex-direction: column; gap: var(--space-0-5); padding: var(--space-1);
  width: max-content; min-width: var(--size-menu-min); max-width: calc(100vw - var(--space-8));
  background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-container); box-shadow: var(--shadow-elevated);
}
.menu-item {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  min-height: var(--size-control-dense); padding: 0 var(--space-2);
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text-primary);
  text-align: left; cursor: pointer;
  font-family: var(--type-label-lg-family); font-size: var(--type-label-lg-size); line-height: var(--type-label-lg-line);
  font-weight: var(--type-label-lg-weight); letter-spacing: var(--type-label-lg-tracking);
}
@media (pointer: coarse) { .menu-item { min-height: var(--size-touch-target-min); } }
.menu-item > svg { width: var(--size-icon-md); height: var(--size-icon-md); flex: none; color: var(--color-text-secondary); }
.menu-item-label { flex: 1; min-width: 0; white-space: nowrap; }   /* never wrap; the menu grows */
.menu-item-kbd {
  color: var(--color-text-secondary); font-variant-numeric: tabular-nums;
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight);
}
.menu-item .menu-item-check { color: var(--color-accent); }
.menu-item[aria-checked="false"] .menu-item-check { visibility: hidden; }
.menu-item:hover, .menu-item:focus-visible, .menu-item[aria-expanded="true"] { background: var(--color-bg-hover); outline: none; }
.menu-item.is-active { background: var(--color-bg-hover); }
/* an icon standing in for an avatar (an outside guest in a people list): the avatar's 24 column, so names and addresses line up */
.menu-item > .menu-item-ic { width: var(--size-avatar-sm); height: var(--size-avatar-sm); display: grid; place-items: center; flex: none; color: var(--color-text-secondary); }
.menu-item > .menu-item-ic svg { width: var(--size-icon-md); height: var(--size-icon-md); }   /* the option Enter picks in a typed list (Pozovi); arrow keys move it */
.menu-item.is-danger, .menu-item.is-danger > svg { color: var(--color-danger); }   /* destructive: always last, after a separator */
.menu-item[aria-disabled="true"], .menu-item[aria-disabled="true"] > svg { color: var(--color-text-disabled); background: transparent; cursor: not-allowed; }
.menu-separator { height: 1px; margin: var(--space-1) calc(var(--space-1) * -1); background: var(--color-border-subtle); }
.menu-title {
  padding: var(--space-2) var(--space-2) var(--space-1); color: var(--color-text-secondary);
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight);
}

/* ================= Tooltip ================= */
.tooltip {
  display: inline-flex; align-items: center; gap: var(--space-1-5); white-space: nowrap;
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-control-inner);
  background: var(--color-bg-inverse); color: var(--color-text-inverse);
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight);
}
.tooltip-kbd { color: var(--color-text-inverse-secondary); }
/* Rich tooltip: explains something (ⓘ), not a button name. Same surface as menus and toasts; title + text; arrow points at the ⓘ.
   --arrow-x is set where it's placed (centre of the ⓘ); .is-below when it flips under the element. Rules: ux-ui/menus.md */
.tooltip-rich {
  position: relative; display: flex; flex-direction: column; gap: var(--space-1); width: max-content; max-width: var(--size-panel); padding: var(--space-3);
  border-radius: var(--radius-container); background: var(--color-bg-elevated); color: var(--color-text-primary);
  border: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-elevated);   /* the same surface as .menu */
}
.tooltip-rich-title { font-family: var(--type-title-sm-family); font-size: var(--type-title-sm-size); line-height: var(--type-title-sm-line); font-weight: var(--type-title-sm-weight); letter-spacing: var(--type-title-sm-tracking); }
.tooltip-rich-text { color: var(--color-text-secondary);
  font-family: var(--type-body-sm-family); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-weight); letter-spacing: var(--type-body-sm-tracking); }
.tooltip-rich::after {
  content: ""; position: absolute; left: var(--arrow-x, 50%); bottom: calc(var(--space-1) * -1 - 1px); width: var(--space-2); height: var(--space-2);
  transform: translateX(-50%) rotate(45deg); background: var(--color-bg-elevated);
  border-right: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle);
}
/* People tooltip (who's in a room): no title, just the regular member rows (.list > .row--member.row--static: avatar 32,
   label-lg name), up to 5, then "+N još". Edges like a menu: 4px padding, rows bring their own 8px. */
.tooltip-rich--list { padding: var(--space-1); }
.tooltip-more { padding: var(--space-1) var(--space-2) var(--space-1) calc(var(--space-2) + var(--size-avatar-md) + var(--space-3)); color: var(--color-text-secondary);
  font-family: var(--type-body-sm-family); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-weight); letter-spacing: var(--type-body-sm-tracking); }
.tooltip-rich.is-below::after { bottom: auto; top: calc(var(--space-1) * -1 - 1px); border: 0; border-left: 1px solid var(--color-border-subtle); border-top: 1px solid var(--color-border-subtle); }

/* ================= Message (flat) ================= */
/* Rules: ux-ui/messages.md. Avatar 40 left; name + time on the first message of a group. */
.msg-day { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; color: var(--color-text-secondary);
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); }
.msg-day::before, .msg-day::after { content: ""; flex: 1; height: 1px; background: var(--color-border-subtle); }
.msg-system { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-1) var(--space-2);   /* centered, like date dividers */
  color: var(--color-text-secondary);
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); }
.msg-system svg { width: var(--size-icon-sm); height: var(--size-icon-sm); }

.msg-group { margin-top: var(--space-3); }
.msg {
  position: relative; display: grid; grid-template-columns: var(--size-avatar-lg) minmax(0, 1fr); column-gap: var(--space-3);
  padding: var(--space-0-5) var(--space-2); margin: 0 calc(var(--space-2) * -1); border-radius: var(--radius-control-inner);
}
.msg:first-child { padding-top: var(--space-1); }
.msg:hover, .msg:focus-within, .msg.is-active { background: var(--color-bg-hover); }
.msg-gutter { grid-column: 1; display: flex; justify-content: center; }
.msg-gutter-time { visibility: hidden; padding-top: var(--space-0-5); color: var(--color-text-secondary);
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); font-variant-numeric: tabular-nums; }
.msg:hover .msg-gutter-time { visibility: visible; }
.msg-body { grid-column: 2; min-width: 0; max-width: var(--size-content-max); overflow-wrap: anywhere; }
.msg-meta { display: flex; gap: var(--space-2); align-items: baseline; }
.msg-author { font-family: var(--type-title-sm-family); font-size: var(--type-title-sm-size); line-height: var(--type-title-sm-line); font-weight: var(--type-title-sm-weight); letter-spacing: var(--type-title-sm-tracking); }
.msg-time, .msg-edited { color: var(--color-text-secondary);
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); font-variant-numeric: tabular-nums; }
.msg-text { font-family: var(--type-body-md-family); font-size: var(--type-body-md-size); line-height: var(--type-body-md-line); font-weight: var(--type-body-md-weight); letter-spacing: var(--type-body-md-tracking); }
.msg-text a { color: var(--color-accent); text-underline-offset: 2px; }
.mention { padding: 0 var(--space-1); border-radius: var(--radius-sm); color: var(--color-accent); }   /* "@" + color; no bold (strong is for unread only) */
.mention.is-me { background: var(--color-accent-soft); color: var(--color-accent-soft-text); }
.msg-text code { padding: 0 var(--space-1); border-radius: var(--radius-sm); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle);
  font-family: var(--type-code-sm-family); font-size: var(--type-code-sm-size); line-height: var(--type-code-sm-line); }
.msg-text pre { margin: var(--space-1) 0; padding: var(--space-2) var(--space-3); overflow-x: auto; border-radius: var(--radius-control-inner);
  background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); color: var(--color-text-primary);
  font-family: var(--type-code-md-family); font-size: var(--type-code-md-size); line-height: var(--type-code-md-line); font-weight: var(--type-code-md-weight); }

/* Reply: one small line above the message; click jumps to the original */
.msg-reply { display: flex; align-items: center; gap: var(--space-1-5); max-width: 100%; margin: 0 0 var(--space-1); padding: 0;
  border: 0; background: transparent; color: var(--color-text-secondary); cursor: pointer; text-align: left;
  font-family: var(--type-body-sm-family); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-weight); }
.msg-reply svg { width: var(--size-icon-sm); height: var(--size-icon-sm); flex: none; }
.msg-reply-author { flex: none; color: var(--color-text-primary);
  font-family: var(--type-label-md-family); font-size: var(--type-label-md-size); line-height: var(--type-label-md-line); font-weight: var(--type-label-md-weight); }
.msg-reply-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-reply:hover .msg-reply-text { color: var(--color-text-primary); }

/* Attachments */
.msg-image { display: block; width: 320px; max-width: 100%; aspect-ratio: 4 / 3; margin: var(--space-1) 0; object-fit: cover;
  border-radius: var(--radius-control); border: 1px solid var(--color-border-subtle); }
.msg-file { display: flex; align-items: center; gap: var(--space-3); max-width: 360px; margin: var(--space-1) 0; padding: var(--space-2);
  border-radius: var(--radius-control); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); }
.msg-file-icon { display: grid; place-items: center; flex: none; width: var(--size-control-default); height: var(--size-control-default);
  border-radius: var(--radius-control-inner); background: var(--color-accent-soft); color: var(--color-accent-soft-text); }
.msg-file-icon svg { width: var(--size-icon-md); height: var(--size-icon-md); }
.msg-file-name { flex: 1; min-width: 0; }

/* Reactions */
.msg-reactions { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
.reaction { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--space-6); padding: 0 var(--space-2); cursor: pointer;
  border-radius: var(--radius-round); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); color: var(--color-text-primary);
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); font-variant-numeric: tabular-nums; }
.reaction:hover { border-color: var(--color-border-strong); }
.reaction[aria-pressed="true"] { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent-soft-text); }
.reaction:focus-visible { outline: none; box-shadow: var(--focus-outer); }

/* Hover toolbar: react · reply · more, top-right of the row */
.msg-actions { position: absolute; top: calc(var(--space-4) * -1); right: var(--space-3); z-index: 3; display: none; gap: var(--space-0-5); padding: var(--space-0-5);
  border-radius: var(--radius-control); background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-elevated); }
.msg:hover .msg-actions, .msg:focus-within .msg-actions, .msg.is-active .msg-actions { display: flex; }
@media (pointer: coarse) { .msg-actions { display: none !important; } }   /* touch: long-press opens the menu instead */

/* Typing */
.typing-indicator { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0 calc(var(--size-avatar-lg) + var(--space-3)); color: var(--color-text-secondary);
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); }
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots i { width: 6px; height: 6px; border-radius: var(--radius-round); background: var(--color-text-secondary); animation: link-typing 1.2s infinite; }
.typing-dots i:nth-child(2) { animation-delay: .2s; } .typing-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes link-typing { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .typing-dots i { animation: none; opacity: .6; } }

/* ================= Message input (composer) ================= */
/* Rules: ux-ui/message-input.md. Text on top, tools underneath, send on the right. */
.composer {
  --on: var(--color-bg-app);
  display: flex; flex-direction: column;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-container); background: var(--color-bg-app);
}
.composer:hover { border-color: var(--color-border-hover); }
.composer:focus-within { border-color: var(--color-focus-ring); box-shadow: var(--focus-halo); }
.composer[aria-disabled="true"] { background: var(--color-bg-disabled); border-color: var(--color-border-subtle); }

/* Reply / edit bar */
.composer-context {
  display: flex; align-items: center; gap: var(--space-2); margin: var(--space-1) var(--space-1) 0;
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2); border-radius: var(--radius-control);
  background: var(--color-bg-hover); color: var(--color-text-secondary);
  font-family: var(--type-body-sm-family); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-weight);
}
.composer-context > svg { width: var(--size-icon-sm); height: var(--size-icon-sm); flex: none; }
.composer-context-title { flex: none; color: var(--color-text-primary);
  font-family: var(--type-label-md-family); font-size: var(--type-label-md-size); line-height: var(--type-label-md-line); font-weight: var(--type-label-md-weight); }
.composer-context-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Formatting row (opened with the Aa button) */
.composer-format { display: flex; gap: var(--space-0-5); margin: 0 var(--space-1); padding: var(--space-1) 0; border-bottom: 1px solid var(--color-border-subtle); }
.composer-format-sep { width: 1px; margin: var(--space-1); background: var(--color-border-subtle); }

/* Attachments before sending */
.composer-files { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-3) 0; }
.composer-file {
  position: relative; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border-radius: var(--radius-control); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle);
}
.composer-file-remove {
  position: absolute; top: calc(var(--space-2) * -1); right: calc(var(--space-2) * -1); display: grid; place-items: center; cursor: pointer;
  width: var(--space-5); height: var(--space-5); border: 0; border-radius: var(--radius-round); background: var(--color-bg-inverse); color: var(--color-text-inverse);
}
.composer-file-remove svg { width: var(--size-icon-sm); height: var(--size-icon-sm); }

/* Text: grows up to 8 lines, then scrolls. Always 16px (iOS). */
.composer-text {
  min-height: var(--size-control-default); max-height: calc(var(--type-body-md-line) * 8 + var(--space-4)); overflow: auto;
  padding: var(--space-2) var(--space-3); outline: none; color: var(--color-text-primary);
  font-family: var(--type-body-md-family); font-size: var(--type-body-md-size); line-height: var(--type-body-md-line);
  font-weight: var(--type-body-md-weight); letter-spacing: var(--type-body-md-tracking);
}
.composer-text:empty::before { content: attr(data-placeholder); color: var(--color-text-secondary); }

/* Tool bar: attach · emoji · Aa · @ … send */
.composer-bar { display: flex; align-items: center; gap: var(--space-0-5); padding: 0 var(--space-2) var(--space-2) var(--space-1-5); }   /* left icons line up with the text; send sits 8px from the edges */
.composer-bar-spacer { flex: 1; }
.composer-bar .btn[aria-pressed="true"] { background: var(--color-bg-pressed); }
.composer-locked { display: flex; align-items: center; gap: var(--space-2); min-height: var(--size-control-touch); padding: 0 var(--space-3); color: var(--color-text-secondary);
  font-family: var(--type-body-sm-family); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-weight); }
.composer-locked svg { width: var(--size-icon-md); height: var(--size-icon-md); }

/* Phone: + · pill field · mic/send, round 48 */
.composer-mobile { display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-3); }
.composer-mobile .composer-text {
  flex: 1; min-height: var(--size-control-touch); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-container);   /* same corners as the desktop input */
}
.composer-round { display: grid; place-items: center; flex: none; width: var(--size-control-touch); height: var(--size-control-touch);
  border: 0; border-radius: var(--radius-round); background: var(--color-bg-hover); color: var(--color-text-primary); cursor: pointer; }
.composer-round svg { width: var(--size-icon-lg); height: var(--size-icon-lg); }
.composer-round.is-send { background: var(--color-accent); color: var(--color-on-accent); }

/* ================= Modal ================= */
/* Rules: ux-ui/modal.md. Desktop: centered dialog on the scrim. Phone: bottom sheet (short) or full screen (forms). */
.modal-scrim { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--space-4); background: var(--color-scrim); }
/* Form dialogs (md) have a fixed top edge: when the form grows (a field appears, a chip is added) it grows downward instead of jumping.
   Confirmations (sm) stay centered. */
.modal-scrim:has(> .modal:not(.modal--sm)) { place-items: start center; padding-top: var(--space-16); }
.modal-scrim:has(> .modal:not(.modal--sm)) > .modal { max-height: calc(100vh - var(--space-16) - var(--space-4)); }
.modal {
  --on: var(--color-bg-elevated);
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: var(--size-modal-md); max-height: calc(100vh - var(--space-8));
  background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-container); box-shadow: var(--shadow-elevated);
}
.modal--sm { max-width: var(--size-modal-sm); }
.modal-head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-overlay-padding) var(--space-overlay-padding) 0; }
.modal-title { flex: 1; margin: 0;
  font-family: var(--type-headline-sm-family); font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line);
  font-weight: var(--type-headline-sm-weight); letter-spacing: var(--type-headline-sm-tracking); }
.modal-head .btn { margin: calc(var(--space-1) * -1) calc(var(--space-2) * -1) 0 0; }   /* × sits in the corner */
.modal-body { display: flex; flex-direction: column; gap: var(--space-stack-gap); padding: var(--space-3) var(--space-overlay-padding) var(--space-1); overflow: auto; }   /* 4px at the bottom: room for the last field's focus ring, which the scroll area would clip */
.modal-description { margin: 0; color: var(--color-text-secondary);
  font-family: var(--type-body-md-family); font-size: var(--type-body-md-size); line-height: var(--type-body-md-line); font-weight: var(--type-body-md-weight); }
.modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-control-gap); padding: var(--space-5) var(--space-overlay-padding) var(--space-overlay-padding); }   /* 20 + the body's 4 = 24 above the buttons, as before */

.modal-foot--split { justify-content: space-between; }   /* a side action on the left (Pregledaj kao gost), the main one on the right */
.modal--nofoot .modal-body { padding-bottom: var(--space-overlay-padding); }   /* changes apply instantly: only × closes it */

/* Phone: bottom sheet */
.sheet {
  --on: var(--color-bg-elevated);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
  padding: var(--space-3) var(--space-page-margin) calc(var(--space-8) + env(safe-area-inset-bottom));
  background: var(--color-bg-elevated); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; box-shadow: var(--shadow-elevated);
}
.sheet-grabber { width: var(--space-10); height: var(--space-1); margin: 0 auto var(--space-4); border-radius: var(--radius-round); background: var(--color-border-strong); }
.sheet-actions { display: flex; flex-direction: column; gap: var(--space-control-gap); margin-top: var(--space-6); }   /* main action on top */
.sheet-actions .btn { width: 100%; }

/* Phone: full screen */
.screen-dialog { position: fixed; inset: 0; z-index: 51; display: flex; flex-direction: column; background: var(--color-bg-elevated); }
.screen-dialog-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-1); border-bottom: 1px solid var(--color-border-subtle); }
.screen-dialog-title { flex: 1; margin: 0;
  font-family: var(--type-title-lg-family); font-size: var(--type-title-lg-size); line-height: var(--type-title-lg-line); font-weight: var(--type-title-lg-weight); }
.screen-dialog-body { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: var(--space-stack-gap); padding: var(--space-4) var(--space-page-margin); }
.screen-dialog-foot { display: flex; flex-direction: column; gap: var(--space-control-gap); padding: var(--space-3) var(--space-page-margin) calc(var(--space-6) + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border-subtle); }
.screen-dialog-foot .btn { width: 100%; }   /* main action on top, like the sheet */

/* ================= Toast ================= */
/* Rules: ux-ui/toast.md. Top-right on desktop, starting inside the 64px header (8 from the top); top on phones. */
.toast-region { position: fixed; top: var(--space-2); right: var(--space-4); z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
@media (max-width: 767px) { .toast-region { top: var(--space-3); left: var(--space-3); right: var(--space-3); } .toast-region .toast { width: 100%; } }
.toast {
  --on: var(--color-bg-elevated);
  display: flex; align-items: center; gap: var(--space-2); width: var(--size-toast); max-width: calc(100vw - var(--space-8));
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  background: var(--color-bg-elevated); color: var(--color-text-primary);
  border: 1px solid var(--color-border-toast); border-radius: var(--radius-container); box-shadow: var(--shadow-elevated);
}
.toast--error { border-color: var(--color-danger); }   /* an error never wears the brand teal */
/* Everything is vertically centered: icon, avatar, text, action, × */
.toast > svg { width: var(--size-icon-sm); height: var(--size-icon-sm); flex: none; color: var(--color-text-secondary); }   /* compact: 16px icons, 24px avatar, 12px text */
.toast .btn--icon svg { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.toast--success > svg { color: var(--color-status-online); }
.toast--error > svg { color: var(--color-danger); }
.toast-text { flex: 1; min-width: 0; padding: var(--space-1-5) 0;
  font-family: var(--type-body-xs-family); font-size: var(--type-body-xs-size); line-height: var(--type-body-xs-line); font-weight: var(--type-body-xs-weight); letter-spacing: var(--type-body-xs-tracking); }
.toast-action { --px: var(--space-2); color: var(--color-accent);   /* compact like the toast: 12px label, 8px sides; height stays 32 (same as ×, still easy to hit) */
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); letter-spacing: var(--type-label-sm-tracking); }
/* Action underneath (person toasts: "Ana Nikolić je podigla ruku" · Prikaži): the text gets the full width, so a name never breaks.
   Gap text → action = gap avatar → text (8): the first row is 32 tall (the ×) and the 32 button has 8 above its label, so it moves up 8.
   Its label lines up with the text: avatar 24 + gap 8 − the button's own 8 side padding. */
.toast--below { flex-wrap: wrap; row-gap: 0; }
.toast--below .toast-text { flex: 1 1 0; }
.toast-below { flex-basis: 100%; display: flex; padding-left: var(--size-avatar-sm); margin-top: calc(var(--space-2) * -1); }

/* ================= Meetings (Sastanci) ================= */
/* Rules: ux-ui/calls.md → Webinar. A scheduled meeting as a card row: day · name + tag · time and people · actions;
   .meet-card: the "Sastanak / Vebinar je zakazan" step shows the meeting as the same card, without actions, with one fact per line
   (.meet-facts > .meet-fact: icon + text), then the link field with Kopiraj link beside it (.link-row). */
.meet-list { display: flex; flex-direction: column; gap: var(--space-2); }
.meet-row { --on: var(--color-bg-surface); display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-container); background: var(--color-bg-surface); }
.meet-row-when { display: flex; flex-direction: column; align-items: center; flex: none; width: var(--space-10); color: var(--color-text-secondary); }
.meet-row-when .type-title-lg { color: var(--color-text-primary); }
.meet-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); }
.meet-row-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.meet-row-text p { color: var(--color-text-secondary); }
.meet-row-actions { display: flex; align-items: center; gap: var(--space-1); flex: none; }
@media (max-width: 767px) { .meet-row { flex-wrap: wrap; } .meet-row-actions { width: 100%; justify-content: flex-end; } }
.meet-card { align-items: flex-start; }
.meet-card .meet-row-when { padding-top: var(--space-1); }   /* (24 − 16) / 2: PET (label-sm, 16 line) shares the centre line of the name (title-md, 24 line) */
.meet-facts { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-1); }
.meet-fact { display: flex; align-items: flex-start; gap: var(--space-2); }
.meet-fact svg { width: var(--size-icon-sm); height: var(--size-icon-sm); flex: none; margin-top: var(--space-0-5); }   /* centered on the first 20px line */
/* Cancelled meeting: stays a day, struck through and gray, with an Otkazan tag and no actions */
.meet-row.is-cancelled .meet-row-title h3, .meet-row.is-cancelled .meet-row-title h4 { text-decoration: line-through; color: var(--color-text-secondary); }
.meet-row.is-cancelled .meet-row-when .type-title-lg { color: var(--color-text-secondary); }
.meet-fact .nowrap { white-space: nowrap; }   /* 10:00–11:30 never breaks at the dash */
/* A read-only value with its action beside it (meeting link + Kopiraj link); the button wraps under on narrow screens */
.link-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.link-row .control { flex: 1 1 var(--size-list-medium); }
.link-row .btn { flex: none; }

/* Chips in a wrapping row (people picked for a webinar, a group) */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ================= Guest page (webinar link in a browser, no account) ================= */
/* Rules: ux-ui/calls.md → Webinar → Guests. One centered card: logo, tag, name, time, Tvoje ime, Pridruži se; no rail or tab bar. */
.guest-page { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-6) var(--space-page-margin); }
.guest-card { --on: var(--color-bg-surface); width: 100%; max-width: var(--size-modal-sm); display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6);
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-container); background: var(--color-bg-surface); }
.guest-logo { width: var(--space-10); height: var(--space-10); }
.guest-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.guest-head p { color: var(--color-text-secondary); }
.guest-note { display: flex; gap: var(--space-2); color: var(--color-text-secondary); font-family: var(--type-body-sm-family); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); }
.guest-note svg { width: var(--size-icon-md); height: var(--size-icon-md); flex: none; }
@media (max-width: 767px) { .guest-page { justify-content: flex-start; } .guest-card { padding: 0; border: 0; background: transparent; --on: var(--color-bg-app); } }

/* ================= Select ================= */
/* Rules: ux-ui/select.md. Closed: a .control with the value and ⌄. Open: a .menu listbox. Phone: bottom sheet. */
.select { position: relative; }
.select-trigger { width: 100%; justify-content: flex-start; cursor: pointer; text-align: left; }   /* add class "control" too */
.select-value { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-text-primary); }
.select-value.is-placeholder { color: var(--color-text-secondary); }
.select-chevron { margin-right: calc(var(--space-1) * -1); transition: transform .15s; }
.select-trigger[aria-expanded="true"] { border-color: var(--color-focus-ring); box-shadow: var(--focus-halo); }   /* open = looks focused */
.select-trigger[aria-expanded="true"] .select-chevron { transform: rotate(180deg); }
.select-trigger:disabled { background: var(--color-bg-disabled); border-color: var(--color-border-subtle); cursor: not-allowed; }
.select-trigger:disabled .select-value, .select-trigger:disabled svg { color: var(--color-text-disabled); }
.select-menu { position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: 20; min-width: 100%; max-height: 320px; overflow: auto; }
.select-option-desc { margin-left: auto; padding-left: var(--space-4); color: var(--color-text-secondary);
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); }
.select-option-check { width: var(--size-icon-md); height: var(--size-icon-md); flex: none; color: var(--color-accent); }
.menu-item[aria-selected="false"] .select-option-check { visibility: hidden; }
/* Search (from 8 options up) */
.select-search { position: sticky; top: calc(var(--space-1) * -1); margin: calc(var(--space-1) * -1) calc(var(--space-1) * -1) var(--space-1); padding: var(--space-1);
  background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border-subtle); }
.select-search .control { min-height: var(--size-control-dense); border-color: transparent; }
.select-search .control:focus-within { border-color: transparent; box-shadow: none; }   /* the open list already shows where you are */
.select-empty { padding: var(--space-3) var(--space-2); color: var(--color-text-secondary);
  font-family: var(--type-body-sm-family); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); }
/* Microphone level under a device select */
.mic-level { display: flex; gap: 2px; margin-top: var(--space-2); }
.mic-level i { width: 6px; height: var(--space-3); border-radius: var(--radius-round); background: var(--color-border-subtle); }
.mic-level i.is-on { background: var(--color-status-online); }

/* ================= Empty state ================= */
/* Rules: ux-ui/empty-state.md. Always centered, horizontally and vertically, in the area it fills. */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3);
  max-width: var(--size-modal-md); margin: auto; padding: var(--space-8) var(--space-4); text-align: center;
}
.empty-state-icon { display: grid; place-items: center; width: var(--space-16); height: var(--space-16); margin-bottom: var(--space-1);
  border-radius: var(--radius-container); background: var(--color-accent-soft); color: var(--color-accent-soft-text); }
.empty-state-icon svg { width: var(--size-icon-lg); height: var(--size-icon-lg); }
.empty-state-title { margin: 0;   /* display role: empty states and onboarding (typography.md) */
  font-family: var(--type-display-sm-family); font-size: var(--type-display-sm-size); line-height: var(--type-display-sm-line);
  font-weight: var(--type-display-sm-weight); letter-spacing: var(--type-display-sm-tracking); }
.empty-state-text { margin: 0; color: var(--color-text-secondary);
  font-family: var(--type-body-md-family); font-size: var(--type-body-md-size); line-height: var(--type-body-md-line); font-weight: var(--type-body-md-weight); }
.empty-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-control-gap); margin-top: var(--space-2); }

/* ================= Switch ================= */
/* Rules: ux-ui/settings.md. On/off that takes effect immediately. The whole row is the control. */
.switch-row {
  display: flex; align-items: center; gap: var(--space-4); width: 100%; min-height: var(--size-touch-target-min); padding: var(--space-3) 0;
  border: 0; background: transparent; color: var(--color-text-primary); text-align: left; cursor: pointer;
}
.switch-row + .switch-row { border-top: 1px solid var(--color-border-subtle); }
.switch-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); }
.switch-row-label { font-family: var(--type-label-lg-family); font-size: var(--type-label-lg-size); line-height: var(--type-label-lg-line); font-weight: var(--type-label-lg-weight); }
.switch-row-desc { color: var(--color-text-secondary);
  font-family: var(--type-body-sm-family); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-weight); }
.switch {
  position: relative; flex: none; width: var(--space-10); height: var(--space-6); border-radius: var(--radius-round);
  background: var(--color-bg-app); border: 2px solid var(--color-border-strong); transition: background .15s, border-color .15s;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: var(--space-4); height: var(--space-4); border-radius: var(--radius-round);
  background: var(--color-border-strong); transition: transform .15s, background .15s;
}
[aria-checked="true"] > .switch { background: var(--color-accent); border-color: var(--color-accent); }
[aria-checked="true"] > .switch::after { transform: translateX(var(--space-4)); background: var(--color-on-accent); }
.switch-row:hover .switch { border-color: var(--color-border-hover); }
[aria-checked="true"].switch-row:hover .switch { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.switch-row:focus-visible, .switch-row.is-focus /* doc */ { outline: none; box-shadow: var(--focus-outer); border-radius: var(--radius-control-inner); }
.switch-row[aria-disabled="true"] { cursor: not-allowed; color: var(--color-text-disabled); }
@media (prefers-reduced-motion: reduce) { .switch, .switch::after { transition: none; } }

/* ================= Radio cards ================= */
/* One choice from a few, shown visually (theme, language). */
.radio-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.radio-cards--2 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }   /* exactly two choices: side by side, stacked when narrow */
.radio-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); cursor: pointer; text-align: left;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-container); background: var(--color-bg-app); color: var(--color-text-primary);
  font-family: var(--type-label-lg-family); font-size: var(--type-label-lg-size); line-height: var(--type-label-lg-line); font-weight: var(--type-label-lg-weight);
}
.radio-card:hover { border-color: var(--color-border-hover); }
.radio-card[aria-checked="true"] { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.radio-card:focus-visible, .radio-card.is-focus /* doc */ { outline: none; box-shadow: var(--focus-outer); }
.radio-card[aria-checked="true"]:focus-visible, .radio-card[aria-checked="true"].is-focus /* doc */ { box-shadow: inset 0 0 0 1px var(--color-accent), var(--focus-outer); }   /* keeps the 2px teal selected edge */
.radio-card-label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-1) var(--space-0-5); }
.radio-card-check { width: var(--size-icon-md); height: var(--size-icon-md); color: var(--color-accent); }
.radio-card[aria-checked="false"] .radio-card-check { visibility: hidden; }
.radio-card-preview { aspect-ratio: 16 / 10; border-radius: var(--radius-control); overflow: hidden; border: 1px solid var(--color-border-subtle); }
/* Text card: title with icon + ⓘ whose tooltip explains the choice (meeting type) */
.radio-card--text { padding: var(--space-3); gap: var(--space-1); }
.radio-card--text .radio-card-label { padding: 0; }
.radio-card-title { display: inline-flex; align-items: center; gap: var(--space-2); }
.radio-card-title svg { width: var(--size-icon-md); height: var(--size-icon-md); color: var(--color-text-secondary); }
.radio-card[aria-checked="true"] .radio-card-title svg { color: var(--color-accent); }
.radio-card-info-wrap { display: inline-flex; }
.radio-card-title svg.radio-card-info, .radio-card[aria-checked="true"] .radio-card-title svg.radio-card-info { width: var(--size-icon-sm); height: var(--size-icon-sm); color: var(--color-text-secondary); margin-left: calc(var(--space-1) * -1); }   /* same 16px icon as field messages */

/* ================= Checkbox ================= */
/* Rules: ux-ui/checkbox.md. For choices confirmed with a button and for selecting several items (instant on/off = switch). */
.checkbox-row {
  display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; min-height: var(--size-control-default); padding: var(--space-2);
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text-primary); text-align: left; cursor: pointer;
}
@media (pointer: coarse) { .checkbox-row { min-height: var(--size-touch-target-min); } }
.checkbox-row:hover, .checkbox-row.is-hover /* doc */ { background: var(--color-bg-hover); }
.checkbox-row:focus-visible, .checkbox-row.is-focus /* doc */ { outline: none; box-shadow: var(--focus-inset); }
.checkbox-row--center { align-items: center; }   /* rows with an avatar */
.checkbox-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); }
.checkbox-row-label { font-family: var(--type-label-lg-family); font-size: var(--type-label-lg-size); line-height: var(--type-label-lg-line); font-weight: var(--type-label-lg-weight); }
.checkbox-row-desc { color: var(--color-text-secondary); font-family: var(--type-body-sm-family); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); }
.checkbox {
  position: relative; flex: none; display: grid; place-items: center; width: var(--space-5); height: var(--space-5);
  border: 2px solid var(--color-border-strong); border-radius: var(--radius-checkbox); background: var(--color-bg-app); color: var(--color-on-accent);
}
.checkbox-row--center .checkbox { margin-top: 0; }
.checkbox svg { position: absolute; width: var(--size-icon-sm); height: var(--size-icon-sm); visibility: hidden; }
.checkbox-row:hover .checkbox, .checkbox-row.is-hover /* doc */ .checkbox { border-color: var(--color-border-hover); }
[aria-checked="true"] > .checkbox, [aria-checked="mixed"] > .checkbox { background: var(--color-accent); border-color: var(--color-accent); }
[aria-checked="true"] > .checkbox .checkbox-check, [aria-checked="mixed"] > .checkbox .checkbox-mixed { visibility: visible; }
[aria-checked="true"]:hover > .checkbox, [aria-checked="mixed"]:hover > .checkbox { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.checkbox-row.is-error .checkbox { border-color: var(--color-danger); }
.checkbox-row[aria-disabled="true"] { cursor: not-allowed; color: var(--color-text-disabled); background: transparent; }
.checkbox-row[aria-disabled="true"] .checkbox { border-color: var(--color-border-subtle); background: var(--color-bg-disabled); color: var(--color-text-disabled); }

/* Chip: a chosen item that can be removed (e.g. people picked for a group) */
.chip { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--space-8); padding: 0 var(--space-1); border-radius: var(--radius-round);
  background: var(--color-accent-soft); color: var(--color-accent-soft-text);
  font-family: var(--type-label-md-family); font-size: var(--type-label-md-size); line-height: var(--type-label-md-line); font-weight: var(--type-label-md-weight); }
.chip .avatar { --av: var(--size-avatar-sm); }
.chip-remove { display: grid; place-items: center; width: var(--space-6); height: var(--space-6); border: 0; border-radius: var(--radius-round); background: transparent; color: inherit; cursor: pointer; }
.chip-remove:hover { background: var(--color-bg-hover); }
.chip-remove:focus-visible { outline: none; box-shadow: var(--focus-outer); }
.chip-remove svg { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.chip:not(:has(.chip-remove)) { padding-right: var(--space-2); }   /* no × (the host): the text needs room at the end */

/* Chip field: chosen people inside the field, followed by the search (Učesnici, Predavači). Rules: ux-ui/inputs.md → Chip field
   Chips are 24 with a mouse, 32 on touch. The inset is derived so the field keeps its height (36 / 48): chips sit 6px from the
   outer edge with a mouse (1 border + 5), 8px on touch (1 + 7). Left keeps the normal field padding before the icon. */
.control--chips { --chip-h: var(--space-6); --pad-y: calc((var(--h) - var(--chip-h) - 2px) / 2);
  align-items: flex-start; padding: var(--pad-y) var(--pad-y) var(--pad-y) var(--px); }
@media (pointer: coarse) { .control--chips { --chip-h: var(--space-8); } }
.control--chips > svg { margin-top: calc((var(--chip-h) - var(--ic)) / 2); }
.control-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-height: var(--chip-h); }
.control-chips input { flex: 1; min-width: var(--space-24); height: var(--chip-h); }
.control-chips .chip { height: var(--chip-h); padding-left: 0; }   /* avatar fills the chip's height on the left */
.control-chips .chip:has(.chip-remove) { padding-right: 0; }      /* × fills it on the right */
.control-chips .chip-remove { width: var(--chip-h); height: var(--chip-h); }
.control--chips .field-action { margin-right: 0; width: var(--chip-h); height: var(--chip-h); }   /* Ukloni sve, from 2 removable people */
.control-chips .chip--text { padding-left: var(--space-2); max-width: 100%; }   /* e-mail chips (Gosti): no avatar, so the text needs room on the left */
.chip--text .chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.is-picked { box-shadow: var(--focus-outer); }   /* Backspace in the empty field marks the last chip; a second Backspace removes it */

/* Tag: a short, non-interactive label for a kind or role ("Vebinar", "Gost"). Not clickable, so never a button. */
.tag { display: inline-flex; align-items: center; flex: none; height: var(--space-6); padding: 0 var(--space-2); border-radius: var(--radius-round);
  background: var(--color-accent-soft); color: var(--color-accent-soft-text); white-space: nowrap;
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); letter-spacing: var(--type-label-sm-tracking); }
.tag--state { background: transparent; color: var(--color-text-secondary); box-shadow: inset 0 0 0 1px var(--color-border-strong); }   /* a state (Otkazan), not a kind: outlined gray, never teal like Vebinar */

/* ================= Tabs ================= */
/* Rules: ux-ui/tabs.md. Tabs switch between parts of one screen (Sastanci: Predstojeći · Prošli). Underline style, no fill. */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border-subtle); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs--fill > .tab { flex: 1; justify-content: center; }   /* compact layout, 2–3 short tabs */
.tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-1-5); flex: none; min-height: var(--size-control-default); padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-control-inner) var(--radius-control-inner) 0 0; background: transparent; color: var(--color-text-secondary); cursor: pointer; white-space: nowrap;
  font-family: var(--type-label-lg-family); font-size: var(--type-label-lg-size); line-height: var(--type-label-lg-line); font-weight: var(--type-label-lg-weight); letter-spacing: var(--type-label-lg-tracking); }
@media (pointer: coarse) { .tab { min-height: var(--size-control-touch); } }
.tab:hover { color: var(--color-text-primary); background: var(--color-bg-hover); }
.tab:active { background: var(--color-bg-pressed); }
.tab[aria-selected="true"] { color: var(--color-text-primary); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--space-2); right: var(--space-2); bottom: -1px; height: 2px; border-radius: var(--radius-round) var(--radius-round) 0 0; background: var(--color-accent); }
.tab:focus-visible, .tab.is-focus /* doc */ { outline: none; box-shadow: var(--focus-inset); }
.tab svg { width: var(--size-icon-md); height: var(--size-icon-md); flex: none; }
.tab-count { display: inline-grid; place-items: center; min-width: var(--space-5); height: var(--space-5); padding: 0 var(--space-1-5); border-radius: var(--radius-round);
  background: var(--color-bg-hover); color: var(--color-text-secondary); font-variant-numeric: tabular-nums;
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); letter-spacing: var(--type-label-sm-tracking); }
.tab[aria-selected="true"] .tab-count { background: var(--color-accent-soft); color: var(--color-accent-soft-text); }
.tab[aria-disabled="true"] { color: var(--color-text-disabled); background: transparent; cursor: not-allowed; }

/* ================= Date & time picker ================= */
/* Rules: ux-ui/date-time-picker.md. Datum (calendar) · Početak (select, 15 min) · Trajanje (select), end time underneath. */
.datetime { display: flex; flex-direction: column; gap: var(--space-2); }
.datetime-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
@media (max-width: 767px) { .datetime-row { grid-template-columns: 1fr 1fr; } .datetime-row > :first-child { grid-column: 1 / -1; } }
.datetime-row .field-label { white-space: nowrap; }
/* Calendar: in a popover under the Datum field (desktop) or in a sheet (phone, .calendar--fill) */
.calendar-pop { position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: 20; padding: var(--space-3);
  background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-container); box-shadow: var(--shadow-elevated); }
.calendar { --cell: var(--size-control-default); width: max-content; }
.calendar-head { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2); }
.calendar-title { flex: 1; padding-left: var(--space-1);
  font-family: var(--type-title-sm-family); font-size: var(--type-title-sm-size); line-height: var(--type-title-sm-line); font-weight: var(--type-title-sm-weight); letter-spacing: var(--type-title-sm-tracking); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, var(--cell)); gap: var(--space-0-5); }
.calendar-weekday { display: grid; place-items: center; height: var(--space-8); color: var(--color-text-secondary);
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); }
.calendar-day { display: grid; place-items: center; height: var(--cell); padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text-primary); cursor: pointer;
  font-variant-numeric: tabular-nums; font-family: var(--type-label-md-family); font-size: var(--type-label-md-size); line-height: var(--type-label-md-line); font-weight: var(--type-label-md-weight); letter-spacing: var(--type-label-md-tracking); }
.calendar-day:hover { background: var(--color-bg-hover); }
.calendar-day:focus-visible { outline: none; box-shadow: var(--focus-inset); }
.calendar-day.is-outside { color: var(--color-text-secondary); }            /* next/previous month: muted, still pickable */
.calendar-day.is-today { box-shadow: inset 0 0 0 1px var(--color-accent); }   /* aria-current="date" */
.calendar-day[aria-selected="true"] { background: var(--color-accent); color: var(--color-on-accent); box-shadow: none; }
.calendar-day[aria-selected="true"]:hover { background: var(--color-accent-hover); }
.calendar-day:disabled { color: var(--color-text-disabled); background: transparent; cursor: not-allowed; }   /* past days */
.calendar--fill { --cell: auto; width: 100%; }
.calendar--fill .calendar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar--fill .calendar-day { height: auto; aspect-ratio: 1; max-height: var(--size-control-touch); }

/* ================= Theme preview ================= */
/* Mini screen inside a theme radio card; each paints itself with its own theme's tokens (data-theme on the wrapper). Rules: ux-ui/settings.md */
.tp, .tp-split > span { display: grid; grid-template-columns: 28% 1fr; height: 100%; background: var(--color-bg-app); }
.tp i, .tp-split i { background: var(--color-bg-surface); border-right: 1px solid var(--color-border-subtle); }
.tp b, .tp-split b { margin: 18% 12% auto; height: 18%; border-radius: var(--radius-sm); background: var(--color-accent); }
.tp-split { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }

/* ================= Settings groups ================= */
/* Rules: ux-ui/settings.md. A section is groups with a small caps title; title markup: class="set-group-title type-label-sm caps". */
.set-group { display: flex; flex-direction: column; }
.set-group-title { margin: 0 0 var(--space-2); color: var(--color-text-secondary); }
.set-fields { display: flex; flex-direction: column; gap: var(--space-stack-gap); }
.set-note { margin: var(--space-3) 0 0; color: var(--color-text-secondary); font-family: var(--type-body-sm-family); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); }
/* Zvuk i kamera (Settings section and in-call dialog) */
.av-form { display: flex; flex-direction: column; gap: var(--space-6); }
.av-hint { margin-top: var(--space-1); }
.av-noise .field-label { display: block; margin-bottom: var(--space-2); }
.av-adv > .btn { margin-left: calc(var(--space-button-padding-sm) * -1); }   /* ghost button: line the text up with the fields */
.av-noise .radio-cards { grid-template-columns: repeat(3, 1fr); }
.av-cam { width: 100%; }
@media (max-width: 767px) { .av-noise .radio-cards { grid-template-columns: 1fr; } }   /* phones: a vertical list, not 2 + 1 */
@media (min-width: 768px) { .av-cam { width: 50%; } }   /* a check, not a stage */

/* ================= App navigation ================= */
/* Rules: ux-ui/responsive.md. Icon rail from 768 (--size-rail), bottom tab bar below. Selected = accent-soft + filled icon. */
/* Icon rail (medium and expanded) */
.rail { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-3) var(--space-1); background: var(--color-bg-surface); border-right: 1px solid var(--color-border-subtle); }
.rail-logo { width: var(--space-8); height: var(--space-8); margin-bottom: var(--space-3); }
.rail-item {
  width: 100%; min-height: var(--size-touch-target-min); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  padding: var(--space-2) 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text-secondary); cursor: pointer; position: relative;
  font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight);
}
.rail-item svg { width: var(--size-icon-lg); height: var(--size-icon-lg); }
.rail-item:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.rail-item[aria-current="page"] { background: var(--color-accent-soft); color: var(--color-accent-soft-text); }
.rail-item[aria-current="page"] svg { color: var(--color-accent); }
.rail-item:focus-visible, .tabbar-item:focus-visible, .rail-me:focus-visible { outline: none; box-shadow: var(--focus-outer); }
/* Unread dot on a rail or tab bar item */
.rail-dot { position: absolute; top: var(--space-1-5); right: var(--space-4); width: var(--space-2); height: var(--space-2); border-radius: var(--radius-round); background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-bg-surface); }
.rail-spacer { flex: 1; }
.rail-me { border: 0; background: transparent; padding: 0; cursor: pointer; border-radius: var(--radius-round); --on: var(--color-bg-surface); }

/* Tab bar (compact). Labels use label-xs: the only place it's allowed */
.tabbar { display: grid; grid-template-columns: repeat(5, 1fr); padding: var(--space-1) var(--space-1) calc(var(--space-2) + env(safe-area-inset-bottom)); background: var(--color-bg-surface); border-top: 1px solid var(--color-border-subtle); --on: var(--color-bg-surface); }
.tabbar-item {
  position: relative; min-height: var(--size-touch-target-min); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-0-5);
  border: 0; background: transparent; color: var(--color-text-secondary); cursor: pointer;
  font-family: var(--type-label-xs-family); font-size: var(--type-label-xs-size); line-height: var(--type-label-xs-line); font-weight: var(--type-label-xs-weight);
}
.tabbar-item svg { width: var(--size-icon-lg); height: var(--size-icon-lg); }
.tabbar-item[aria-current="page"] { color: var(--color-accent-soft-text); }
.tabbar-item[aria-current="page"] svg { color: var(--color-accent); }
.tabbar-item .rail-dot { top: var(--space-1); right: calc(50% - var(--space-4)); }

/* ================= Headers ================= */
/* Chat, page, panel and call headers: 64 high, title on the left, actions on the right. Rules: ux-ui/responsive.md */
.chat-head { display: flex; align-items: center; gap: var(--space-2); min-height: var(--space-16); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-container-padding); border-bottom: 1px solid var(--color-border-subtle); }
.chat-title { flex: 1; min-width: 0; }
/* 1:1 and groups: avatar on the left, name and status stacked beside it (text aligned with the name) */
.chat-title--avatar { display: flex; align-items: center; gap: var(--space-2); }
.chat-title-text { flex: 1; min-width: 0; }
.chat-name { display: flex; align-items: center; gap: var(--space-1-5); min-width: 0; }
.chat-name svg { width: var(--size-icon-md); height: var(--size-icon-md); color: var(--color-text-secondary); flex: none; }
.chat-name h1 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--type-title-md-family); font-size: var(--type-title-md-size); line-height: var(--type-title-md-line); font-weight: var(--type-title-md-weight); }
.chat-desc { margin: 0; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--type-body-sm-family); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); }
.page-head { display: flex; align-items: center; gap: var(--space-2); min-height: var(--space-16); padding: var(--space-2) var(--space-container-padding); border-bottom: 1px solid var(--color-border-subtle); }
.page-head h1 { flex: 1; margin: 0; font-family: var(--type-headline-sm-family); font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); font-weight: var(--type-headline-sm-weight); }
/* Side panels (members, call chat, participants) mirror the list column on the left: same header (no divider), same edges */
.panel-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2) var(--space-container-padding); }
.panel-head h2 { flex: 1; margin: 0; font-family: var(--type-headline-sm-family); font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); font-weight: var(--type-headline-sm-weight); }
.call-timer { display: inline-flex; align-items: center; gap: var(--space-1-5); color: var(--color-text-secondary);
  font-family: var(--type-label-md-family); font-size: var(--type-label-md-size); line-height: var(--type-label-md-line); font-weight: var(--type-label-md-weight); font-variant-numeric: tabular-nums; }
.call-timer i { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-round); background: var(--color-status-online); }

/* ================= Side panel ================= */
/* Members, details. Slides over the content with a scrim below 1536; docks beside it from 1536 (layout: the app). */
.panel-scrim { position: absolute; inset: 0; z-index: 20; background: var(--color-scrim); }
.panel { --on: var(--color-bg-elevated); position: absolute; top: 0; right: 0; bottom: 0; z-index: 21; width: min(100%, var(--size-panel)); display: flex; flex-direction: column;
  background: var(--color-bg-elevated); border-left: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-elevated); }
.panel-body { flex: 1; overflow: auto; padding: 0 var(--space-2) var(--space-4); }

/* ================= Banner ================= */
/* Soft teal strip with text and one small primary action: "Ana i Petar su u sobi · Uđi" (phone) */
.room-strip { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-radius: var(--radius-control); background: var(--color-accent-soft); color: var(--color-accent-soft-text); --on: var(--color-accent-soft);
  font-family: var(--type-label-md-family); font-size: var(--type-label-md-size); line-height: var(--type-label-md-line); font-weight: var(--type-label-md-weight); }
.room-strip > svg { width: var(--size-icon-md); height: var(--size-icon-md); flex: none; }
.room-strip span.t { flex: 1; }

/* ================= Resize handle ================= */
/* Drag edge of the list column (240–400) and of the call chat (280–560). Double-click resets, ← → when focused. Rules: ux-ui/responsive.md */
.resize-handle { position: absolute; top: 0; bottom: 0; right: calc(var(--space-1) * -1); z-index: 6; width: var(--space-2); cursor: col-resize; border: 0; padding: 0; background: transparent; }
.resize-handle::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; background: transparent; transition: background .12s; }
.resize-handle:hover::after, .resize-handle.is-hover::after /* doc */ { background: var(--color-accent); }   /* hover: teal, "you can drag this" */
.resize-handle:focus-visible::after { background: var(--color-focus-ring); }   /* keyboard: the gray focus, like every other control */
.resize-handle:focus-visible { outline: none; }

/* ================= Search highlight ================= */
/* The matched word in search results */
.search-hit { border-radius: var(--radius-sm); background: var(--color-accent-soft); color: var(--color-accent-soft-text); }

/* ================= Floating tooltip ================= */
/* One shared .tooltip, positioned above the hovered or focused element. Rules: ux-ui/menus.md */
.tip-float { position: fixed; z-index: 90; pointer-events: none; }
.tip-float[hidden] { display: none; }

/* ================= Small app patterns ================= */
/* Moved here from the prototype so the developer finds them with the other components. Shown on index.html → App patterns. */
/* "No results" line in a list (search, empty section): one body-sm line, not a full empty state. Rules: ux-ui/empty-state.md rule 4 */
.list-empty { margin: 0; padding: var(--space-4) var(--space-2); color: var(--color-text-secondary);
  font-family: var(--type-body-sm-family); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-weight); letter-spacing: var(--type-body-sm-tracking); }
/* The message you jumped to (from a reply line or a search hit) lights up, then fades. Rules: ux-ui/messages.md */
.msg.is-flash { background: var(--color-accent-soft); transition: background 1s; }
/* Profile card: avatar + name + status (settings list, Nalog) */
.profile-card { display: flex; align-items: center; gap: var(--space-4); --on: var(--color-bg-app); }
.profile-card h2 { margin: 0; font-family: var(--type-title-lg-family); font-size: var(--type-title-lg-size); line-height: var(--type-title-lg-line); font-weight: var(--type-title-lg-weight); letter-spacing: var(--type-title-lg-tracking); }
.profile-card p { margin: 0; color: var(--color-text-secondary); font-family: var(--type-body-sm-family); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-weight); letter-spacing: var(--type-body-sm-tracking); }
/* Pre-join (Uđi u sobu): camera preview, mic and camera toggles overlapping its bottom edge, then the devices. Rules: ux-ui/calls.md */
.prejoin-preview { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-control); background: var(--color-bg-surface); display: grid; place-items: center; overflow: hidden; --on: var(--color-bg-surface); }
.prejoin-preview .note { position: absolute; left: var(--space-2); bottom: var(--space-2); }
.prejoin-toggles { display: flex; justify-content: center; gap: var(--space-2); margin-top: calc(var(--space-6) * -1); position: relative; z-index: 2; }
.prejoin-toggles .call-btn { box-shadow: var(--shadow-elevated); }
.prejoin-devices { display: flex; flex-direction: column; gap: var(--space-stack-gap); }
/* Isključi sve above the webinar Učesnici list */
.people-actions { display: flex; padding: var(--space-1) var(--space-2) var(--space-2); }
/* Two fields side by side (Ne uznemiravaj: Od · Do) */
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-2); }
/* Room button in a channel header: who is in the room + Uđi u sobu (or Pokreni sobu), set off from the other actions by a divider. Hidden on phones (the room strip takes over). */
.chat-room { display: flex; align-items: center; gap: var(--space-2); padding-right: var(--space-2); margin-right: var(--space-1); border-right: 1px solid var(--color-border-subtle); }
/* Formatting inside the message box mirrors the sent message: inline code, lists, links (moved from the prototype) */
.composer .composer-text code { padding: 0 var(--space-1); border-radius: var(--radius-sm); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle);
  font-family: var(--type-code-sm-family); font-size: var(--type-code-sm-size); line-height: var(--type-code-sm-line); font-weight: var(--type-code-sm-weight); }
.composer-text ul, .composer-text ol, .msg-text ul, .msg-text ol { margin: var(--space-1) 0; padding-left: var(--space-6); }
.composer-text a { color: var(--color-accent); }
/* List column (Kanali, Poruke, Grupe, Podešavanja): title + add button, search, scrolling list. Width and placement: the app layout (prototype app.css) */
.list-pane { --on: var(--color-bg-surface); position: relative; display: flex; flex-direction: column; background: var(--color-bg-surface); border-right: 1px solid var(--color-border-subtle); }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2) var(--space-container-padding); }
.list-search { padding: 0 var(--space-3) var(--space-2); }
.list-body { flex: 1; overflow: auto; padding: 0 var(--space-2) var(--space-4); }
.list-pane .profile-card p { margin: 0; }
.list-pane .row > svg:last-child { margin-left: auto; color: var(--color-text-secondary); }

/* ================= Call layout pieces (moved from the prototype) ================= */
/* Call header: name, timer, recording pill; the right side stays free for toasts. Rules: ux-ui/calls.md */
.call-head { display: flex; align-items: center; gap: var(--space-2); min-height: var(--space-16); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-container-padding); border-bottom: 1px solid var(--color-border-subtle); }
.call-head .chat-title { display: flex; align-items: center; gap: var(--space-3); flex: 0 1 auto; min-width: 0; }   /* not flex: 1, so the recording pill follows the timer and the header's right side stays free for toasts */
.call-head .chat-title .chat-name { min-width: 0; }
.call-head .chat-title h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-head .rec-indicator, .call-head .call-timer { flex: none; }
/* The shared screen's stage */
.share-area { position: relative; border-radius: var(--radius-control); background: var(--color-bg-surface); display: grid; place-items: center; overflow: hidden; }
/* Chat or Učesnici beside a call: bg-surface, divider on the left, smaller avatars, no hover actions. Resizable 280–560 (handle on its left edge) */
.call-chat { --on: var(--color-bg-surface); position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; background: var(--color-bg-surface); border-left: 1px solid var(--color-border-subtle); }
.call-chat .feed { padding: var(--space-3); }
.call-chat .msg { grid-template-columns: var(--size-avatar-md) minmax(0, 1fr); column-gap: var(--space-2); }
.call-chat .msg .avatar--lg { --av: var(--size-avatar-md); font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); letter-spacing: var(--type-label-sm-tracking); }
.call-chat .msg-actions { display: none !important; }
.call-chat .typing-indicator { margin-left: calc(var(--size-avatar-md) + var(--space-2)); }
.call-chat .composer-wrap { padding: var(--space-2); }
.call-chat .panel-body .row .btn { flex: none; }
.call-chat > .resize-handle { right: auto; left: calc(var(--space-1) * -1); }

/* Phone: messages get a 32 avatar; the call bar drops its divider and Napusti becomes a 48 icon button */
@media (max-width: 767px) {
  .msg { grid-template-columns: var(--size-avatar-md) minmax(0, 1fr); column-gap: var(--space-2); }
  .msg .avatar--lg { --av: var(--size-avatar-md); font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); letter-spacing: var(--type-label-sm-tracking); }
  .typing-indicator { margin-left: calc(var(--size-avatar-md) + var(--space-2)); }
  .call-bar-divider { display: none; }
  .call-leave .btn-label { display: none; }
  .call-leave { padding: 0; width: var(--size-control-touch); justify-content: center; }
}
/* Side panel docked beside the chat from 1536: no scrim or shadow, bg-surface. The app does this at that width; the class is for the reference page */
.panel--docked { position: static; width: auto; box-shadow: none; background: var(--color-bg-surface); --on: var(--color-bg-surface); }

/* Forms: a value that can't change here (Vrsta in Izmeni sastanak), shown as a line with its icon instead of controls */
.form-locked { margin: 0; display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary);
  font-family: var(--type-body-sm-family); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-weight); letter-spacing: var(--type-body-sm-tracking); }
.form-locked svg { width: var(--size-icon-md); height: var(--size-icon-md); flex: none; color: var(--color-text-primary); }
.form-locked b { color: var(--color-text-primary); }
/* What happens when you confirm, right above the buttons ("… dobijaju obaveštenje o izmenama. Link ostaje isti.") */
.modal-note { margin: 0; display: flex; gap: var(--space-2); color: var(--color-text-secondary);
  font-family: var(--type-body-sm-family); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-weight); letter-spacing: var(--type-body-sm-tracking); }
.modal-note svg { width: var(--size-icon-sm); height: var(--size-icon-sm); flex: none; margin-top: var(--space-0-5); }   /* 16 icon centered on the first 20 line */