/* Link prototype — layout only. Every color, text style and size comes from the design system
   (../design-system/tokens.css, components.css). Breakpoints: 768 medium · 1024 expanded · 1536 wide. */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--color-bg-app); color: var(--color-text-primary); font-family: var(--font-sans); overflow: hidden; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }   /* read by screen readers, not shown */

/* ---------- Shell: compact (phone) first ---------- */
.app { position: fixed; inset: 0; display: grid;   /* pinned to the window edges: works even where 100dvh is unsupported or late */
   grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "main" "tab"; }
.rail { display: none; }
.list-pane, .chat, .page { grid-area: main; min-width: 0; min-height: 0; }
.tabbar { grid-area: tab; }
/* compact: one screen at a time */
.app[data-view="list"] .chat, .app[data-view="list"] .page { display: none; }
.app[data-view="chat"] .list-pane, .app[data-view="chat"] .tabbar { display: none; }

@media (min-width: 768px) {
  .app { grid-template-columns: var(--size-rail) var(--list-w, var(--size-list-medium)) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "rail list chat"; }
  .app.no-list { grid-template-columns: var(--size-rail) minmax(0, 1fr); grid-template-areas: "rail chat"; }
  .rail { display: flex; grid-area: rail; }
  .tabbar { display: none !important; }
  .list-pane { grid-area: list; display: flex !important; }
  .chat, .page { grid-area: chat; display: grid !important; }
  .back { display: none; }
}
@media (min-width: 1024px) {
  .app { grid-template-columns: var(--size-rail) var(--list-w, var(--size-list-expanded)) minmax(0, 1fr); }
}
@media (min-width: 1536px) {
}

/* ---------- List pane ---------- */

/* ---------- Chat ---------- */
.chat { --on: var(--color-bg-app); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; background: var(--color-bg-app); }   /* minmax(0, 1fr): a long channel description cuts off with … instead of widening the chat past the screen */
/* fixed rows so the phone-only room strip can be hidden without shifting the others */
.chat > .chat-head { grid-row: 1; } .chat > .room-strip, .chat > .strip-slot { grid-row: 2; } .chat > .feed { grid-row: 3; } .chat > .composer-wrap, .chat > .composer-mobile, .chat > .composer-ctx { grid-row: 4; }
.chat-room .btn-label { display: none; }
@media (min-width: 768px) { .chat-room .btn-label { display: inline; } }
@media (max-width: 767px) { .chat-room .avatar-stack, .chat-room { display: none; } .back { display: inline-flex; } }
.room-strip { display: none; margin: var(--space-2) var(--space-page-margin) 0; }
@media (max-width: 767px) { .room-strip.has-room { display: flex; } }
.feed { overflow: auto; padding: var(--space-4) var(--space-container-padding) var(--space-2); display: flex; flex-direction: column; }
.feed > .feed-inner { margin-top: auto; }
.feed > .feed-inner.is-empty { margin: auto 0; }   /* empty conversation: centered, not bottom-anchored */
.composer-wrap { padding: var(--space-2) var(--space-container-padding) var(--space-4); }
@media (max-width: 767px) {
  .composer-wrap { padding: 0; }
  .feed { padding: var(--space-3) var(--space-page-margin) var(--space-2); }
}
.chat-menu-anchor { position: relative; }
.chat-menu-anchor > .menu, .msg-menu { position: absolute; z-index: 30; }
.chat-menu-anchor > .menu { top: calc(100% + var(--space-1)); right: 0; }
.msg-menu { top: var(--space-5); right: var(--space-3); }

/* ---------- Side panel (members) ---------- */
@media (max-width: 767px) { .panel { width: 100%; border-left: 0; } .panel-scrim { display: none; } }
@media (min-width: 1536px) {
  .app.panel-open .panel-scrim { display: none; }
  /* docked: the panel lives inside the chat, so the chat gets the second column (it can't reach a column of the app grid) */
  .app.panel-open .chat { grid-template-columns: minmax(0, 1fr) var(--list-w, var(--size-list-expanded)); }   /* as wide as the list column on the left */
  .app.panel-open .chat > :not(.panel):not(.panel-scrim) { grid-column: 1; }
  .app.panel-open .panel { position: static; grid-column: 2; grid-row: 1 / -1; width: auto; box-shadow: none; background: var(--color-bg-surface); --on: var(--color-bg-surface); }
}

/* ---------- Pages (Sastanci, Profil) ---------- */
.page { --on: var(--color-bg-app); display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--color-bg-app); overflow: auto; }
.page-body { padding: var(--space-6) var(--space-container-padding); max-width: var(--size-modal-md); width: 100%; display: flex; flex-direction: column; gap: var(--space-6); }
.page-body--center { max-width: none; flex: 1; justify-content: center; }
.page { grid-template-rows: auto minmax(0, 1fr); }
.page > .page-body--center { display: flex; }

/* ---------- Overlays ---------- */
.modal-scrim .modal { animation: pop .15s ease-out; }
@keyframes pop { from { transform: scale(.97); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .modal-scrim .modal { animation: none; } }
@media (max-width: 767px) { .toast-region .toast { width: 100%; max-width: none; } }
@media (min-width: 768px) { .app.in-call ~ .toast-region { right: var(--space-2); } }   /* in a call: lined up with the camera column… */
@media (min-width: 768px) and (max-width: 1023px) { .app.in-call ~ .toast-region { top: calc(var(--space-16) + var(--space-2)); } }   /* …and on medium screens under the call header, which has no room (name, timer, recording) */
@media (min-width: 768px) and (max-width: 1023px) { .app.in-call ~ .toast-region .toast { width: var(--size-list-medium); } }   /* …which is 240 on medium screens */
.app.is-full ~ .toast-region { top: auto; bottom: var(--space-4); right: var(--space-4); }   /* full screen: no camera column, so bottom-right, clear of the Ceo ekran button */

/* ================= Call ================= */
.call { --on: var(--color-bg-app); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); background: var(--color-bg-app); min-width: 0; min-height: 0; }
@media (min-width: 1024px) { .call-head { padding-right: calc(var(--list-w, var(--size-list-expanded)) + var(--space-4)); } }   /* the toast's place: a long name shortens with … instead of sliding under a toast */
.call-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.call.chat-open .call-body { grid-template-columns: minmax(0, 1fr) var(--call-chat-w, var(--size-panel)); }
.call-stage { position: relative; min-height: 0; padding: var(--space-2) var(--space-2) calc(var(--size-control-call) + var(--space-10)); display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-auto-rows: minmax(0, 1fr); align-content: stretch; overflow: auto; }
.call-stage.is-sharing { grid-template-columns: minmax(0, 1fr) var(--list-w, var(--size-list-medium)); grid-template-rows: minmax(0, 1fr); }   /* camera column = the list column's width */
@media (min-width: 1024px) { .call-stage.is-sharing { grid-template-columns: minmax(0, 1fr) var(--list-w, var(--size-list-expanded)); } }
.call-stage.is-sharing.is-popped { grid-template-columns: minmax(0, 1fr); }   /* Učesnici u novom prozoru: the cameras are in that window, the share takes the width */
/* where the camera column was: a placeholder while the participants window is dragged over it (snap) */
.snap-zone { position: absolute; top: var(--space-2); right: var(--space-2); bottom: calc(var(--size-control-call) + var(--space-10)); width: var(--list-w, var(--size-list-medium));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); border-radius: var(--radius-control);
  border: 2px dashed var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent-soft-text); font-size: var(--type-label-md-size);
  visibility: hidden; opacity: 0; transition: opacity .15s; pointer-events: none; z-index: 4; }   /* over the share's full-screen button */
.snap-zone svg { width: var(--size-icon-lg); height: var(--size-icon-lg); fill: currentColor; }
@media (min-width: 1024px) { .snap-zone { width: var(--list-w, var(--size-list-expanded)); } }
.snap-zone.is-hot { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .snap-zone { transition: none; } }
@media (max-width: 767px) { .snap-zone { display: none; } }   /* no camera column on phones */
.call-stage .video-tile { aspect-ratio: auto; min-height: 160px; }
.call-stage.is-sharing .share-area { grid-row: 1; }
.call-stage .tiles-col { display: flex; flex-direction: column; gap: var(--space-2); overflow: auto; }
.call-stage .tiles-col .video-tile { min-height: 120px; aspect-ratio: 16 / 10; flex: none; }
.call-stage .tiles-col .avatar--2xl { --av: var(--size-avatar-xl); font-family: var(--type-headline-sm-family); font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); }
.share-fake { width: 86%; height: 78%; border-radius: var(--radius-control-inner); background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); display: grid; grid-template-rows: var(--space-6) 1fr; overflow: hidden; }
.share-fake > div:first-child { border-bottom: 1px solid var(--color-border-subtle); }
.share-fake > div:last-child { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-3); padding: var(--space-3); }
.share-fake > div:last-child > div { border-radius: var(--radius-control-inner); background: var(--color-bg-hover); }
.call .call-bar--floating { position: absolute; bottom: var(--space-4); left: 50%; transform: translateX(-50%); }
.call-menu-anchor { position: relative; }
.call-menu-anchor > .menu { position: absolute; bottom: calc(100% + var(--space-2)); right: 0; z-index: 30; }
.tile-menu-anchor { position: absolute; right: var(--space-2); top: var(--space-2); z-index: 5; }
.tile-menu-anchor .video-tile-menu { position: static; opacity: 1; }
.tile-menu-anchor > .menu { position: absolute; top: calc(100% + var(--space-1)); right: 0; z-index: 30; }
.video-tile:not(:hover):not(:focus-within) .tile-menu-anchor:not(.is-open) { opacity: 0; }
/* in-call banner when you look at something else */
/* phone: call is full screen */
@media (max-width: 767px) {
  .app.in-call { grid-template-rows: minmax(0, 1fr); grid-template-areas: "main"; }
  .app.in-call .list-pane, .app.in-call .tabbar { display: none !important; }
  .app.in-call .call { display: grid !important; }
  .call-stage { grid-template-columns: 1fr 1fr; padding-bottom: calc(var(--size-control-touch) + var(--space-12)); }
  .call-stage .video-tile { min-height: 140px; }
  .call-stage .avatar--2xl { --av: var(--size-avatar-xl); font-family: var(--type-headline-sm-family); font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); }
  .call-stage.is-sharing { grid-template-columns: 1fr; grid-template-rows: minmax(200px, 1fr) auto; }
  .call-stage .tiles-col { flex-direction: row; overflow-x: auto; }
  .call-stage .tiles-col .video-tile { width: 140px; min-height: 90px; }
  .call.chat-open .call-body { grid-template-columns: minmax(0, 1fr); }   /* minmax: a long line in the chat must not widen it past the screen */
  .call.chat-open .call-stage { display: none; }
  .call .call-bar--floating { bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
}
/* Watching a share in full screen: the whole page is full screen (so re-rendering never drops it); only the call shows */
.app.is-full { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; grid-template-areas: "main" !important; }
.app.is-full > :not(.call) { display: none !important; }
.app.is-full > .call { grid-area: main; display: grid !important; grid-template-rows: minmax(0, 1fr); }
.app.is-full .call-head { display: none; }
.app.is-full .call-stage.is-sharing { grid-template-columns: minmax(0, 1fr); padding: 0; }
.app.is-full .call-stage.is-sharing .tiles-col { display: none; }
.app.is-full .share-area { border-radius: 0; }
.app.is-full .share-fake { width: min(92%, 160vh); height: 86%; }
.app.is-full .video-tile-label.share-label { left: var(--space-4); top: var(--space-4); }
.app.is-full .share-full-btn { right: var(--space-4); top: var(--space-4); }
.app.is-full .video-tile.share-cam { right: var(--space-4); top: calc(var(--space-4) + var(--size-control-default) + var(--space-3)); }
.share-rec { position: absolute; left: 50%; top: var(--space-4); transform: translateX(-50%); z-index: 3; }   /* recording stays visible to everyone, also in full screen */
.call-bar--floating { transition: opacity .2s; }
/* idle 3 s: controls fade, the speaker tile and recording stay */
.app.is-full.is-idle .call-bar, .app.is-full.is-idle .share-label, .app.is-full.is-idle .share-full-btn { opacity: 0; pointer-events: none; }
.app.is-full.is-idle { cursor: none; }
@media (prefers-reduced-motion: reduce) { .call-bar--floating { transition: none; } }
@media (max-width: 767px) { .app.is-full .video-tile.share-cam { width: 40%; } }

.mselect { position: relative; }
.mselect > .menu { position: absolute; top: calc(100% + var(--space-1)); left: 0; right: 0; z-index: 70; }



/* ================= Sastanci & webinar ================= */
.page-body--list { max-width: var(--size-content-max); }
[data-mt-extra]:empty { display: none; }   /* holds Predavači only for a webinar; empty, it must not add a gap */
/* guest: the webinar link in a browser, no rail or tab bar */
.app.is-guest { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; grid-template-areas: "main" !important; }
.app.is-guest > * { grid-area: main !important; }
.app .guest-page { display: flex !important; }   /* .page is a grid from 768 (above); the guest card is centered with flex */

/* ================= Settings ================= */
.set-body { gap: var(--space-8); max-width: var(--size-content-max); }

/* ================= Resizable list column ================= */
.resize-handle { display: none; }
.app.is-resizing .resize-handle::after { background: var(--color-accent); }
.app.is-resizing, .app.is-resizing * { cursor: col-resize !important; user-select: none; }
@media (min-width: 768px) { .resize-handle { display: block; } }