/* FilMeeting — izgled.
   Pisano prvo za telefon, pa se širi na komp. Tamna tema jer se sastanci
   gledaju satima, a bela pozadina oko tuđe slike zamara oči. */

:root {
  --bg: #0e1116;
  --panel: #161b22;
  --line: #262d38;
  --ink: #e7edf5;
  --dim: #8b98ab;
  --brand: #2f81f7;
  --ok: #2ea043;
  --bad: #d5484f;
  --radius: 12px;
  --bar: 68px;
}

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

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, textarea { font: inherit; color: inherit; }

.view { height: 100dvh; }
.view[hidden] { display: none; }
.center { display: grid; place-items: center; padding: 20px; }

/* ─────────────────────────  Kartice  ───────────────────────── */

.card {
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
}
.brand { font-size: 26px; letter-spacing: -.02em; margin-bottom: 6px; }
.sub { color: var(--dim); margin-bottom: 22px; }
.hint { color: var(--dim); font-size: 13px; margin-top: 10px; }
.error { color: var(--bad); margin-top: 14px; font-size: 14px; }

.card label { display: block; text-align: left; margin-bottom: 14px; font-size: 13px; color: var(--dim); }
.card input[type=text] {
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px;
  background: #0b0e13; border: 1px solid var(--line); border-radius: 10px;
  /* 16px je granica ispod koje iOS zumira celu stranicu pri fokusu. */
  font-size: 16px;
}
.card input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

button.primary { background: var(--brand); border-radius: 10px; padding: 11px 18px; font-weight: 600; }
button.primary:hover { filter: brightness(1.12); }
button.big { width: 100%; padding: 14px; font-size: 16px; margin-top: 6px; }
button.ghost { color: var(--dim); padding: 10px 16px; border-radius: 10px; }
button.ghost:hover { background: #1e242e; color: var(--ink); }
button:disabled { opacity: .45; cursor: default; }

.spinner {
  width: 34px; height: 34px; margin: 0 auto 16px;
  border: 3px solid var(--line); border-top-color: var(--brand);
  border-radius: 50%; animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

/* ────────────────────────  Sastanak  ───────────────────────── */

.room {
  display: grid;
  grid-template-rows: 1fr auto;
  /* dvh, ne vh: na telefonu se traka browsera skriva pa vh laže i donja
     traka sa dugmadima ispadne ispod ekrana. */
  height: 100dvh;
}

#stage { position: relative; overflow: hidden; padding: 8px; }

#grid {
  display: grid;
  gap: 8px;
  height: 100%;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-content: center;
}
/* Kad neko deli ekran, on zauzima scenu a ostali idu u traku sa strane. */
#grid.sharing { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
#grid.sharing .tile.screen { grid-column: 1; }
#grid.sharing .strip { display: flex; gap: 8px; overflow-x: auto; }
#grid.sharing .strip .tile { flex: 0 0 132px; height: 84px; }

.tile {
  position: relative;
  background: #05070a;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 0;
  aspect-ratio: 16 / 9;
}
.tile.speaking { border-color: var(--ok); box-shadow: 0 0 0 2px rgba(46,160,67,.35); }
.tile video { width: 100%; height: 100%; object-fit: cover; display: block; background: #05070a; }
.tile.screen { aspect-ratio: auto; }
.tile.screen video { object-fit: contain; }
.tile.me video { transform: scaleX(-1); }          /* svoja slika kao u ogledalu */
.tile.me.screen video { transform: none; }

.tile .who {
  position: absolute; left: 6px; bottom: 6px; right: 6px;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 3px 8px; border-radius: 20px;
  background: rgba(5,7,10,.72); backdrop-filter: blur(6px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile .who .muted { color: var(--bad); }
.tile .hand { position: absolute; top: 6px; right: 8px; font-size: 20px; }

/* Kad kamera ne radi — inicijali umesto crnog pravougaonika. */
.tile .avatar {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: clamp(20px, 6vw, 40px); font-weight: 600; color: var(--dim);
  background: #10151d;
}

.empty-hint {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--dim); pointer-events: none; text-align: center; padding: 20px;
}

/* ───────────────────────  Donja traka  ─────────────────────── */

#bar {
  display: flex; justify-content: center; gap: 4px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: var(--panel); border-top: 1px solid var(--line);
  overflow-x: auto;
}
.ctl {
  flex: 0 0 auto; display: grid; justify-items: center; gap: 2px;
  min-width: 62px; padding: 8px 6px; border-radius: 10px; color: var(--dim);
}
.ctl:hover { background: #1e242e; }
.ctl .ico { font-size: 20px; line-height: 1; }
.ctl em { font-style: normal; font-size: 10.5px; }
.ctl.on { color: var(--ink); background: #223049; }
.ctl.danger { color: var(--bad); }
.ctl[hidden] { display: none; }

/* ────────────────────────  Bočni panel  ────────────────────── */

#panel {
  position: fixed; inset: auto 0 0 0; height: 78dvh; z-index: 40;
  display: flex; flex-direction: column;
  background: var(--panel); border-top: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
}
#panel[hidden] { display: none; }

.tabs { display: flex; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--line); }
.tab { padding: 9px 12px; color: var(--dim); border-radius: 8px 8px 0 0; font-size: 13.5px; }
.tab.active { color: var(--ink); background: #1e242e; }
.tab.close { margin-left: auto; }

.tab-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px; gap: 10px; overflow-y: auto; }
.tab-body[hidden] { display: none; }

.notes-switch, .notes-actions { display: flex; gap: 8px; }
.chip { padding: 6px 12px; border-radius: 20px; background: #1e242e; color: var(--dim); font-size: 13px; }
.chip.active { background: var(--brand); color: #fff; }

#notes-shared, #notes-private { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
#notes-shared[hidden], #notes-private[hidden] { display: none; }

textarea {
  flex: 1; min-height: 130px; resize: vertical;
  background: #0b0e13; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px; font-size: 16px; line-height: 1.55;
}
textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

#notes-others { display: grid; gap: 10px; }
.note-block { background: #0b0e13; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.note-block h4 { font-size: 12px; color: var(--brand); margin-bottom: 4px; font-weight: 600; }
.note-block pre { white-space: pre-wrap; word-break: break-word; font: inherit; color: var(--ink); }

#chat-log { flex: 1; overflow-y: auto; display: grid; gap: 8px; align-content: start; }
.msg { background: #0b0e13; border-radius: 10px; padding: 8px 11px; }
.msg b { color: var(--brand); font-size: 12px; display: block; }
.msg span { word-break: break-word; white-space: pre-wrap; }
#chat-form { display: flex; gap: 8px; }
#chat-input { flex: 1; padding: 11px 13px; background: #0b0e13; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; }

#people-list { display: grid; gap: 6px; }
.person { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #0b0e13; border-radius: 10px; }
.person .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person .tag { font-size: 11px; color: var(--brand); border: 1px solid var(--line); border-radius: 20px; padding: 1px 7px; }
.person button { font-size: 12px; color: var(--dim); padding: 4px 8px; border-radius: 6px; }
.person button:hover { background: #1e242e; color: var(--ink); }
.row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }

/* ──────────────────────────  Čekaonica  ────────────────────── */

#lobby-bar {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%);
  z-index: 50; width: min(420px, calc(100% - 16px));
  background: var(--panel); border: 1px solid var(--brand); border-radius: 12px;
  padding: 10px 12px; display: grid; gap: 8px;
}
#lobby-bar[hidden] { display: none; }
.knock { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.knock .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knock button { padding: 6px 12px; border-radius: 8px; font-size: 13px; }
.knock .yes { background: var(--ok); }
.knock .no { color: var(--dim); }

#toast {
  position: fixed; bottom: calc(var(--bar) + 14px); left: 50%; transform: translateX(-50%);
  z-index: 60; background: #1e242e; border: 1px solid var(--line);
  padding: 10px 16px; border-radius: 20px; font-size: 14px;
}
#toast[hidden] { display: none; }

/* ─────────────────────────  Veliki ekran  ──────────────────── */

@media (min-width: 900px) {
  .room { grid-template-columns: 1fr auto; grid-template-areas: "stage panel" "bar bar"; }
  #stage { grid-area: stage; padding: 12px; }
  #bar { grid-area: bar; }
  #panel { position: static; grid-area: panel; width: 360px; height: auto;
           border-radius: 0; border-top: 0; border-left: 1px solid var(--line); }
  #grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .ctl { min-width: 74px; }
  .ctl em { font-size: 11.5px; }
}