/* Flamingo Chat — foaie de stil */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&display=swap');

/* Atributul hidden trebuie sa invinga orice display din regulile de mai jos.
   Fara asta, .reply-strip / .staged / .chip raman vizibile desi sunt hidden. */
[hidden] { display: none !important; }

:root {
  color-scheme: dark;
  --ink-900: #140D19;
  --ink-850: #1A1121;
  --ink-800: #221730;
  --ink-750: #2A1D3A;
  --ink-700: #362647;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #F3EAF4;
  --text-dim: #C3B2CD;
  --muted: #93819F;
  --accent: #FF5D8F;
  --accent-2: #FF9BB8;
  --accent-deep: #C93168;
  --accent-soft: rgba(255, 93, 143, 0.14);
  --seen: #63CFFF;
  --ok: #38D39F;
  --warn: #FFB648;
  --danger: #FF5C5C;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;

  --font-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shadow-pop: 0 18px 48px rgba(0, 0, 0, 0.55);

  /* suprafete derivate — redefinite de tema deschisa */
  --bubble-mine: linear-gradient(150deg, #45213A 0%, #3A1E38 100%);
  --bubble-mine-border: rgba(255, 93, 143, 0.28);
  --head-bg: rgba(20, 13, 25, 0.82);
  --backdrop: rgba(6, 3, 10, 0.72);
  --lightbox-bg: rgba(0, 0, 0, 0.9);
  --scroll-thumb: rgba(255, 255, 255, 0.12);
  --scroll-thumb-hover: rgba(255, 255, 255, 0.22);
  --quote-bg: rgba(255, 255, 255, 0.05);
  --file-bg: rgba(0, 0, 0, 0.25);
  --reaction-bg: rgba(255, 255, 255, 0.07);
  --row-hover: rgba(255, 255, 255, 0.025);
  --placeholder: #6E5C7A;
  --glow-1: rgba(255, 93, 143, 0.22);
  --glow-2: rgba(124, 92, 255, 0.18);
  --room-active-text: #fff;

  /* marimea textului din conversatie, reglabila din butoanele +/- */
  --msg-scale: 1;

  /* Inaltimea utila a ferestrei. Pe telefon, JS o pune la inaltimea zonei
     ramase deasupra tastaturii; --app-top compenseaza decalajul de pe iOS. */
  --app-h: 100dvh;
  --app-top: 0px;

  --sidebar-w: 292px;
  --header-h: 60px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--ink-900);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

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

/* fara intarzierea de 300ms si fara zoom la dublu-tap */
button, .room-item, .group-tab, .msg-tools button, .reaction, a {
  touch-action: manipulation;
}
a { color: var(--accent-2); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: content-box; }

/* ------------------------------------------------------------ autentificare */

.auth-screen {
  min-height: var(--app-h, 100dvh);
  display: grid;
  place-items: center;
  padding: 24px;
  /* pe telefoane scunde, cu tastatura urcata, cardul trebuie sa poata derula */
  overflow-y: auto;
  background:
    radial-gradient(900px 500px at 15% -10%, var(--glow-1), transparent 60%),
    radial-gradient(700px 500px at 95% 110%, var(--glow-2), transparent 60%),
    var(--ink-900);
}

.auth-card {
  width: min(420px, 100%);
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 34px 30px 30px;
  box-shadow: var(--shadow-pop);
}

.auth-logo { display: block; height: 54px; margin: 0 auto 20px; object-fit: contain; }

.auth-card h1 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  text-align: center;
}

.auth-card .sub { color: var(--muted); text-align: center; margin: 0 0 26px; font-size: 14px; }

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

.input, .select, .textarea {
  width: 100%;
  /* Sub 16px, Safari pe iPhone mareste pagina cand intri in camp, iar dupa
     aceea headerul ramane in afara ecranului. 16px opreste comportamentul. */
  font-size: 16px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 11px 14px;
  color: var(--text);
  transition: border-color .15s, background .15s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--ink-750);
}
.input::placeholder { color: var(--placeholder); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--radius-m);
  font-weight: 600;
  background: var(--ink-750);
  border: 1px solid var(--line);
  transition: background .15s, border-color .15s, transform .06s;
}
.btn:hover { background: var(--ink-700); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  border-color: transparent;
  color: #fff;
}
.btn-primary:hover { filter: brightness(1.08); background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%); }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-danger { background: rgba(255, 92, 92, .14); border-color: rgba(255, 92, 92, .35); color: #FF9A9A; }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 10px; }

.alert {
  padding: 10px 13px;
  border-radius: var(--radius-m);
  font-size: 14px;
  margin-bottom: 14px;
}
.alert-error { background: rgba(255, 92, 92, .12); border: 1px solid rgba(255, 92, 92, .3); color: #FFB3B3; }
.alert-ok { background: rgba(56, 211, 159, .12); border: 1px solid rgba(56, 211, 159, .3); color: #8FEDCB; }
.alert-info { background: rgba(99, 207, 255, .1); border: 1px solid rgba(99, 207, 255, .28); color: #A9E3FF; }
.alert:empty { display: none; }

/* ------------------------------------------------------------------ shell */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  height: var(--app-h, 100dvh);
  overflow: hidden;
  /* fixata de ecran: nimic nu mai deruleaza in afara de lista de mesaje */
  position: fixed;
  top: var(--app-top, 0px);
  left: 0;
  right: 0;
}

/* ---------------------------------------------------------------- sidebar */

.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--ink-850);
  border-right: 1px solid var(--line);
  position: relative;
}

/* elementul-semnatura: o dunga de pana in degrade pe marginea barei laterale */
.sidebar::after {
  content: '';
  position: absolute;
  inset: 0 -1px 0 auto;
  width: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, rgba(124, 92, 255, .7) 45%, transparent 100%);
  opacity: .55;
  pointer-events: none;
}

.sidebar-head {
  flex: 0 0 auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}
.sidebar-head img { height: 30px; max-width: 130px; object-fit: contain; }
.sidebar-head .spacer { flex: 1; }

.icon-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--text-dim);
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--ink-750); color: var(--text); }
.icon-btn.active { background: var(--accent-soft); color: var(--accent-2); }

.sidebar-search { padding: 12px 12px 8px; flex: 0 0 auto; }
.sidebar-search .input { padding: 9px 12px; border-radius: 11px; font-size: 14px; }

.room-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 8px 12px;
}

.list-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 10px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list-label button { color: var(--accent-2); font-size: 11px; font-weight: 700; letter-spacing: .06em; }

.room-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 9px 10px;
  border-radius: 12px;
  text-align: left;
  transition: background .12s;
  cursor: pointer;
}
.room-item:hover { background: var(--ink-800); }
.room-item.is-active { background: var(--accent-soft); }
.room-item.is-active .room-name { color: var(--room-active-text); }

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  position: relative;
  flex: 0 0 auto;
  letter-spacing: -.02em;
}
.avatar.sm { width: 28px; height: 28px; border-radius: 9px; font-size: 11px; }
.avatar.round { border-radius: 50%; }
.avatar .dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--muted);
  border: 2px solid var(--ink-850);
}
.avatar .dot.on { background: var(--ok); }

.room-meta { min-width: 0; }
.room-name {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.room-preview {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }

/* butonul de detalii sta unde era ora ultimului mesaj */
.room-info {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--muted);
  opacity: .55;
  transition: opacity .12s, background .12s, color .12s;
}
.room-item:hover .room-info { opacity: 1; }
.room-info:hover { background: var(--ink-700); color: var(--text); opacity: 1; }
.room-item.is-active .room-info { opacity: 1; }
.badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.sidebar-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-foot .who { min-width: 0; flex: 1; }
.sidebar-foot .who b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-foot .who span { font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------- chat */

.chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  background:
    radial-gradient(1200px 600px at 80% -20%, rgba(124, 92, 255, .08), transparent 65%),
    var(--ink-900);
}


.messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 18px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.day-sep {
  align-self: center;
  margin: 18px 0 12px;
  padding: 4px 12px;
  border-radius: 99px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .04em;
}

.msg-row { display: flex; gap: 6px; align-items: flex-end; max-width: 100%; margin-top: 2px; }
.msg-row.mine { flex-direction: row-reverse; }
.msg-row.grouped { margin-top: 1px; }

.bubble-wrap { max-width: min(640px, 78%); min-width: 0; display: flex; flex-direction: column; }
.msg-row.mine .bubble-wrap { align-items: flex-end; }

.msg-author {
  font-size: calc(12px * var(--msg-scale));
  font-weight: 700;
  margin: 6px 0 3px 3px;
  /* --author vine din JS: culoarea persoanei */
  color: var(--author, var(--accent-2));
}

.bubble {
  position: relative;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: 16px 16px 16px 5px;
  padding: 8px 12px 6px;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.msg-row.mine .bubble {
  background: var(--bubble-mine);
  border-color: var(--bubble-mine-border);
  border-radius: 16px 16px 5px 16px;
}
.msg-row.grouped:not(.mine) .bubble { border-radius: 5px 16px 16px 5px; }
.msg-row.grouped.mine .bubble { border-radius: 16px 5px 5px 16px; }

.bubble .text {
  white-space: pre-wrap;
  font-size: calc(14.8px * var(--msg-scale));
  line-height: 1.45;
}
.bubble .text a { text-decoration: underline; }
.bubble.deleted .text { color: var(--muted); font-style: italic; }

.quote {
  display: block;
  width: 100%;
  text-align: left;
  border-left: 3px solid var(--accent);
  background: var(--quote-bg);
  border-radius: 6px;
  padding: 5px 9px;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--text-dim);
}
.quote b { display: block; color: var(--accent-2); font-size: 12px; }
.quote { font-size: calc(13px * var(--msg-scale)); }
.quote .q-body {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.attachments { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.att-img {
  display: block;
  max-width: 100%;
  max-height: 340px;
  border-radius: 10px;
  cursor: zoom-in;
  background: var(--ink-750);
}
.att-file {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  background: var(--file-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  max-width: 100%;
}
.att-file .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-file .s { color: var(--muted); font-size: 11.5px; flex: 0 0 auto; }

.meta {
  font-size: calc(10.5px * var(--msg-scale));
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-end;
  color: var(--muted);
  margin-top: 1px;
  user-select: none;
}
.meta .edited { font-style: italic; }
.ticks { display: inline-flex; align-items: center; height: 12px; }
.ticks svg { display: block; }
.ticks.seen { color: var(--seen); }

.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--reaction-bg);
  border: 1px solid var(--line);
  font-size: 12px;
}
.reaction.by-me { background: var(--accent-soft); border-color: rgba(255, 93, 143, .4); }

.msg-tools {
  display: flex;
  gap: 2px;
  align-self: center;
  opacity: 0;
  transition: opacity .12s;
  flex: 0 0 auto;
}
.msg-row:hover .msg-tools, .msg-row:focus-within .msg-tools { opacity: 1; }
.msg-tools button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--muted);
}
.msg-tools button:hover { background: var(--ink-750); color: var(--text); }

.typing-line {
  flex: 0 0 auto;
  height: 20px;
  padding: 0 18px;
  font-size: 12.5px;
  color: var(--accent-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.typing-line:empty { height: 6px; }

/* --------------------------------------------------------------- composer */

.composer {
  flex: 0 0 auto;
  /* reper pentru panoul de emoji, care se aseaza deasupra */
  position: relative;
  border-top: 1px solid var(--line);
  background: var(--ink-850);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}

/* cu tastatura deschisa nu mai exista bara de jos a telefonului, deci nici
   nu mai lasam loc pentru ea: altfel ramane o fasie goala sub caseta */
.kb-open .composer { padding-bottom: 10px; }

.reply-strip, .staged {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 7px 10px;
  margin-bottom: 8px;
  font-size: 13px;
}
.reply-strip .body { min-width: 0; flex: 1; }
.reply-strip b { display: block; color: var(--accent-2); font-size: 12px; }
.reply-strip .q { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.staged { flex-wrap: wrap; border-left-color: var(--accent-2); }
.staged-item {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 9px;
  overflow: hidden;
  background: var(--ink-750);
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  padding: 4px;
}
.staged-item img { width: 100%; height: 100%; object-fit: cover; }
.staged-item button {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
}

.composer-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.composer textarea {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  /* limita reala o pune JS, dupa inaltimea ferestrei; asta e doar plasa de siguranta */
  max-height: 168px;
  min-height: 44px;
  overflow-y: hidden;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px 14px;
  line-height: 1.45;
  font-size: 16px;
}
.composer textarea:focus { outline: none; border-color: var(--accent); background: var(--ink-750); }

.send-btn {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--accent), var(--accent-deep));
  color: #fff;
  display: grid;
  place-items: center;
  transition: filter .15s, transform .06s;
}
.send-btn:hover { filter: brightness(1.1); }
.send-btn:active { transform: translateY(1px); }
.send-btn[disabled] { background: var(--ink-750); color: var(--muted); filter: none; }

/*
 * Cele trei unelte (emoji, GIF, atasament) stau intr-un singur grup si ocupa
 * impreuna mai putin decat ocupau doua butoane separate inainte:
 * 3x28 + gap-uri + margini = 94px, fata de 2x44 + 8 = 96px.
 */
.composer-tools {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 44px;
  padding: 0 2px;
  border-radius: 14px;
  background: var(--ink-800);
  border: 1px solid var(--line);
}

.ctool {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 9px;
  color: var(--text-dim);
  display: grid;
  place-items: center;
  transition: background .12s, color .12s;
}
.ctool svg { width: 18px; height: 18px; }
.ctool:hover { background: var(--ink-700); color: var(--text); }
.ctool.is-open { background: var(--accent-soft); color: var(--accent-2); }

.ctool-gif {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
}


/* ------------------------------------------------------------ gol / stari */

.empty {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  text-align: center;
}
.empty-inner { max-width: 360px; }
.empty h2 {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0 0 8px;
  font-weight: 700;
}
.empty p { color: var(--muted); margin: 0 0 18px; }

.loader {
  align-self: center;
  margin: 12px 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ modal */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 60;
}
.modal {
  width: min(520px, 100%);
  max-height: min(84dvh, 760px);
  display: flex;
  flex-direction: column;
  background: var(--ink-850);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.modal-head {
  flex: 0 0 auto;
  padding: 18px 20px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}
.modal-head h3 { font-family: var(--font-display); font-size: 18px; margin: 0; flex: 1; font-weight: 700; }
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 20px; }
.modal-foot {
  flex: 0 0 auto;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
}
.picker-row:hover { background: var(--ink-800); }
.picker-row input { accent-color: var(--accent); width: 17px; height: 17px; }
.picker-row .n { flex: 1; min-width: 0; }
.picker-row .n b { display: block; font-size: 14px; font-weight: 600; }
.picker-row .n span { font-size: 12px; color: var(--muted); }

/*
 * Vizualizatorul de imagini.
 *
 * Varianta veche folosea grid cu "max-height: 100%" pe imagine. Randul de grid
 * se dimensiona dupa continut, deci procentul nu avea la ce sa se raporteze si
 * era ignorat: o poza inalta iesea din ecran. Aici legam marimea direct de
 * fereastra, nu de parinte.
 */
.lightbox {
  position: fixed;
  inset: 0;
  background: var(--lightbox-bg);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 20px 20px;
  overflow: auto;
  overscroll-behavior: contain;
}

.lightbox img {
  display: block;
  max-width: calc(100vw - 40px);
  max-height: calc(var(--app-h, 100dvh) - 76px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  cursor: zoom-in;
  margin: auto;
}

/* la marime reala: nu mai limitam nimic, se deruleaza in schimb */
.lightbox.is-zoomed { align-items: flex-start; justify-content: flex-start; }
.lightbox.is-zoomed img {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
  margin: 0;
}

.lightbox-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent);
  z-index: 81;
}
.lightbox-bar .lb-name {
  flex: 1;
  min-width: 0;
  color: #fff;
  font-size: 13px;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lightbox-bar button,
.lightbox-bar a {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  text-decoration: none;
}
.lightbox-bar button:hover,
.lightbox-bar a:hover { background: rgba(255, 255, 255, .26); }

@media (max-width: 620px) {
  .lightbox { padding: 52px 10px 10px; }
  .lightbox img {
    max-width: calc(100vw - 20px);
    max-height: calc(var(--app-h, 100dvh) - 66px);
  }
}

.toast-stack {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 90;
  pointer-events: none;
  width: min(420px, calc(100vw - 32px));
}
.toast {
  background: var(--ink-750);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  box-shadow: var(--shadow-pop);
  animation: rise .2s ease-out;
}
.toast.err { border-color: rgba(255, 92, 92, .45); color: #FFB3B3; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--ink-750);
  border: 1px solid var(--line);
  color: var(--text-dim);
}
.chip.pink { background: var(--accent-soft); border-color: rgba(255, 93, 143, .35); color: var(--accent-2); }
.chip.green { background: rgba(56, 211, 159, .12); border-color: rgba(56, 211, 159, .3); color: #8FEDCB; }
.chip.blue { background: rgba(99, 207, 255, .12); border-color: rgba(99, 207, 255, .3); color: #A9E3FF; }

/* -------------------------------------------------------------- responsiv */

.mobile-only { display: none; }
.backdrop-mobile { display: none; }

@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: min(300px, 86vw);
    z-index: 50;
    transform: translateX(-102%);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    box-shadow: var(--shadow-pop);
  }
  .app.nav-open .sidebar { transform: none; }
  .app.nav-open .backdrop-mobile {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 45;
  }
  .mobile-only { display: grid; }
  .bubble-wrap { max-width: 86%; }
  /* Nu le mai facem permanent vizibile aici: pe un PC cu fereastra ingusta
     tot mouse-ul e la lucru, deci raman la hover. Pe ecranele fara mouse sunt
     ascunse de tot si le inlocuieste apasarea lunga. */
}

/* fereastra foarte ingusta: strangem tot, dar composer-ul ramane lipit jos */
@media (max-width: 420px) {
  :root { --header-h: 52px; }
  .messages { padding: 12px 10px 6px; }
  .composer { padding: 8px 9px calc(8px + env(safe-area-inset-bottom)); }
  .bubble-wrap { max-width: 92%; }
  .bubble { padding: 7px 10px 5px; }
  .bubble .text { font-size: calc(14.2px * var(--msg-scale)); }
  .composer textarea { min-height: 40px; border-radius: 12px; font-size: 16px; }
  .send-btn { width: 40px; height: 40px; border-radius: 12px; }
  .composer-tools { height: 40px; border-radius: 12px; }
  .ctool { width: 24px; height: 24px; }
  .att-img { max-height: 220px; }
}

/* fereastra foarte scurta pe verticala */
@media (max-height: 420px) {
  .messages { padding-top: 8px; }
  .composer textarea { max-height: 84px; }
  .day-sep { margin: 10px 0 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------------ admin */

.admin-shell { display: grid; grid-template-rows: auto minmax(0, 1fr); height: var(--app-h, 100dvh); }

.admin-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-850);
}
.admin-top img { height: 28px; }
.admin-top h1 { font-family: var(--font-display); font-size: 18px; margin: 0; font-weight: 700; }
.admin-top .spacer { flex: 1; }

.admin-body { display: grid; grid-template-columns: 214px minmax(0, 1fr); min-height: 0; }

.admin-nav {
  border-right: 1px solid var(--line);
  padding: 12px 10px;
  background: var(--ink-850);
  overflow-y: auto;
}
.admin-nav button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--text-dim);
  font-weight: 500;
  font-size: 14px;
}
.admin-nav button:hover { background: var(--ink-800); }
.admin-nav button.active { background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }

.admin-main { overflow-y: auto; padding: 22px; min-width: 0; }
.admin-main h2 {
  font-family: var(--font-display);
  font-size: 21px;
  margin: 0 0 4px;
  font-weight: 700;
}
.admin-main .lead { color: var(--muted); margin: 0 0 20px; font-size: 14px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; margin-bottom: 24px; }
.card {
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 15px 16px;
}
.card .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.card .v { font-family: var(--font-display); font-size: 27px; font-weight: 700; margin-top: 3px; }

.panel {
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  margin-bottom: 18px;
}
.panel-head {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.panel-head h3 { margin: 0; font-size: 15px; font-weight: 700; flex: 1; }
.panel-body { padding: 16px; }

table.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.grid th {
  text-align: left;
  padding: 9px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.grid td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.grid tr:hover td { background: var(--row-hover); }
.table-scroll { overflow-x: auto; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

.history-log {
  max-height: 62dvh;
  overflow-y: auto;
  padding: 14px 16px;
  background: var(--ink-900);
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  font-size: 14px;
}
.history-item { display: flex; gap: 10px; padding: 6px 0; }
.history-item .when { flex: 0 0 128px; color: var(--muted); font-size: 11.5px; padding-top: 3px; font-variant-numeric: tabular-nums; }
.history-item .who { font-weight: 700; font-size: 13px; }
.history-item .what { white-space: pre-wrap; overflow-wrap: anywhere; }
.history-item.deleted .what { color: var(--muted); font-style: italic; }

.dropzone {
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-m);
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
  transition: border-color .15s, background .15s;
  cursor: pointer;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }

pre.log {
  background: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  font-size: 12px;
  max-height: 300px;
  overflow: auto;
  white-space: pre-wrap;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  color: var(--text-dim);
}

.copybox {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  overflow: hidden;
}
.copybox span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 780px) {
  .admin-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .admin-nav { display: flex; gap: 6px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .admin-nav button { width: auto; white-space: nowrap; }
  .admin-main { padding: 14px; }
  .history-item { flex-direction: column; gap: 2px; }
  .history-item .when { flex: none; }
}

/* ==========================================================================
   BARA DE GRUPURI (comutare rapida intre camere)
   ========================================================================== */

.chat-bar {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-850);
  min-height: 48px;
}
.chat-bar .bar-spacer { flex: 1 1 auto; }

/* tab-urile isi iau spatiul si deruleaza orizontal; restul barei ramane pe loc */
.group-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  padding-bottom: 1px;
}
.group-tabs::-webkit-scrollbar { height: 5px; }
.group-tabs:not([hidden]) ~ .bar-spacer { flex: 0 0 auto; }

.group-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--ink-800);
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  max-width: 220px;
  transition: background .12s, border-color .12s, color .12s;
}
.group-tab:hover { background: var(--ink-750); color: var(--text); }
.group-tab .label { overflow: hidden; text-overflow: ellipsis; }
.group-tab.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-2);
}
.group-tab .badge {
  min-width: 18px;
  height: 18px;
  font-size: 10.5px;
  padding: 0 5px;
}

/* ==========================================================================
   NOTIFICARE DE MESAJ DIN ALT GRUP
   ========================================================================== */

.notif-stack {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 85;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(400px, calc(100vw - 28px));
}

.notif {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--ink-800);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-pop);
  animation: notif-in .22s cubic-bezier(.2, .8, .3, 1);
  cursor: pointer;
}
.notif:hover { background: var(--ink-750); }

.notif .n-body { min-width: 0; }
.notif .n-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
}
.notif .n-room { font-weight: 700; color: var(--accent-2); }
.notif .n-who { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif .n-text {
  font-size: 13.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}
.notif .n-close {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  place-items: center;
}
.notif .n-close:hover { background: var(--ink-700); color: var(--text); }

@keyframes notif-in {
  from { opacity: 0; transform: translateY(-10px); }
}

@media (max-width: 480px) {
  .group-bar { padding: 6px 8px; }
  .group-tab { padding: 5px 10px; font-size: 12.5px; max-width: 150px; }
  .notif-stack { top: 8px; }
}

/* ==========================================================================
   BUTOANELE DE MARIME A TEXTULUI
   ========================================================================== */

.font-ctl {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  border-radius: 10px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  flex: 0 0 auto;
}
.font-ctl button {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--text-dim);
  font-weight: 700;
  line-height: 1;
}
.font-ctl button:hover:not([disabled]) { background: var(--ink-700); color: var(--text); }
.font-ctl button[disabled] { opacity: .35; cursor: default; }
.font-ctl .fc-val {
  min-width: 34px;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  user-select: none;
}

/* ==========================================================================
   CEREREA DE NOTIFICARI PE DESKTOP
   ========================================================================== */

.notif-ask {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.notif-ask .na-text { flex: 1; min-width: 0; }
.notif-ask .na-text b { display: block; font-size: 13.5px; }
.notif-ask .na-text span { color: var(--muted); font-size: 12.5px; }
.notif-ask .btn { flex: 0 0 auto; }

@media (max-width: 560px) {
  .notif-ask { flex-wrap: wrap; gap: 8px; padding: 9px 10px; }
  .notif-ask .na-text span { display: none; }
}

/* Bara de administrare a unui grup, in panoul de admin */
.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--ink-900);
}

/* Butoanele mici din bara de sus */
.bar-btn { width: 30px; height: 30px; flex: 0 0 auto; }

/* Randul de conversatie din setarile barei */
.bar-setting {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.bar-setting:hover { background: var(--ink-800); }
.bar-setting input { accent-color: var(--accent); width: 17px; height: 17px; flex: 0 0 auto; }
.bar-setting .bs-name { flex: 1; min-width: 0; }
.bar-setting .bs-name b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-setting .bs-name span { font-size: 12px; color: var(--muted); }
.bar-setting.is-off .bs-name b { color: var(--muted); }

/* Casuta de denumire din setarile barei */
.bar-setting .bs-label {
  flex: 0 0 132px;
  width: 132px;
  padding: 6px 9px;
  border-radius: 9px;
  font-size: 13px;
}
.bar-setting .bs-label:disabled { opacity: .4; cursor: not-allowed; }

@media (max-width: 520px) {
  .bar-setting { flex-wrap: wrap; }
  .bar-setting .bs-label { flex: 1 1 100%; width: auto; }
}

/* ==========================================================================
   FEREASTRA INGUSTA DE APLICATIE (~500-620px)
   Chrome nu lasa fereastra de aplicatie sub ~500px latime, deci acolo e
   podeaua reala. Pana la 620px strangem tot ce se poate fara sa ascundem
   nimic: la latimea asta omul e la calculator, nu pe telefon.
   ========================================================================== */

@media (max-width: 620px) {
  .chat-bar { padding: 6px 9px; gap: 6px; min-height: 44px; }

  /* procentul ocupa 34px degeaba; butoanele +/- spun destul */
  .font-ctl .fc-val { display: none; }
  .font-ctl button { width: 28px; height: 28px; }

  .group-tab { max-width: 168px; padding: 5px 11px; font-size: 13px; }

  .messages { padding: 14px 11px 6px; }
  .bubble-wrap { max-width: 90%; }
  .bubble { padding: 7px 11px 5px; }

  .composer { padding: 9px 10px calc(9px + env(safe-area-inset-bottom)); }
  .composer-row { gap: 7px; }
  .composer-tools { height: 40px; border-radius: 12px; }
  .ctool { width: 25px; height: 25px; border-radius: 8px; }
  .ctool svg { width: 16px; height: 16px; }
  .send-btn { width: 40px; height: 40px; border-radius: 12px; }
  .composer textarea { min-height: 40px; }

  /* Uneltele raman in flux, imediat dupa bula, exact ca pe ecran mare: asa
     incep mereu de unde se termina mesajul, in loc sa sara in capatul opus al
     randului. Castigam spatiu facandu-le mai mici, nu mutandu-le. */
  .msg-tools { gap: 0; }
  .msg-tools button { width: 24px; height: 24px; border-radius: 7px; }
  .msg-tools button svg { width: 14px; height: 14px; }

  .reply-strip, .staged { padding: 6px 9px; margin-bottom: 7px; }
  .day-sep { margin: 14px 0 10px; }

  /* bara laterala glisanta poate ocupa aproape tot: e temporara oricum */
  .sidebar { width: min(320px, 92vw); }

  .notif-stack { width: calc(100vw - 20px); }
  .modal-backdrop { padding: 12px; }
  .modal-head { padding: 15px 16px 11px; }
  .modal-body { padding: 15px 16px; }
  .modal-foot { padding: 12px 16px; }
}

/* ==========================================================================
   ALEGATORUL DE EMOJI
   ========================================================================== */

.emoji-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: min(340px, calc(100vw - 24px));
  max-height: 300px;
  display: flex;
  flex-direction: column;
  background: var(--ink-850);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-pop);
  z-index: 40;
  overflow: hidden;
}

.emoji-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  padding: 6px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.emoji-tabs button {
  flex: 0 0 auto;
  width: 34px;
  height: 30px;
  border-radius: 8px;
  font-size: 17px;
  line-height: 1;
  opacity: .55;
}
.emoji-tabs button:hover { background: var(--ink-800); opacity: 1; }
.emoji-tabs button.is-active { background: var(--accent-soft); opacity: 1; }

.emoji-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 2px;
}
.emoji-grid button {
  height: 36px;
  border-radius: 8px;
  font-size: 21px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.emoji-grid button:hover { background: var(--ink-750); }

.emoji-group-label {
  grid-column: 1 / -1;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 4px 3px;
}

@media (max-width: 620px) {
  .emoji-panel { width: calc(100vw - 20px); max-height: 250px; }
  .emoji-grid button { height: 34px; font-size: 20px; }
}

/* ==========================================================================
   PANOUL DE GIF-URI
   ========================================================================== */

.gif-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: min(420px, calc(100vw - 24px));
  height: 340px;
  max-height: calc(var(--app-h, 100dvh) - 160px);
  display: flex;
  flex-direction: column;
  background: var(--ink-850);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-pop);
  z-index: 40;
  overflow: hidden;
}

.gif-search {
  flex: 0 0 auto;
  padding: 8px;
  border-bottom: 1px solid var(--line);
}
.gif-search .input { padding: 8px 11px; border-radius: 10px; }

/*
 * Doua coloane construite din JS, nu prin "columns: 2".
 *
 * Coloanele CSS, intr-un container cu inaltime fixa, curg lateral: dupa ce se
 * umple prima coloana pe verticala, continutul o ia spre dreapta si trebuie sa
 * derulezi stanga-dreapta. Cu doua coloane separate, derularea e in jos, cum e
 * firesc pentru o lista de rezultate.
 */
.gif-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 8px;
}

.gif-cols {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.gif-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gif-results img {
  width: 100%;
  display: block;
  border-radius: 8px;
  background: var(--ink-800);
  cursor: pointer;
}
.gif-results img:hover { outline: 2px solid var(--accent); outline-offset: -2px; }

.gif-state {
  padding: 20px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}

.gif-foot {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 620px) {
  .gif-panel { width: calc(100vw - 20px); height: 300px; }
}

/* ==========================================================================
   GESTURI PE MESAJ
   ========================================================================== */

/* nu lasam browserul sa selecteze text cand tii apasat pe mesaj */
.msg-row { touch-action: pan-y; }
.msg-row .bubble { -webkit-user-select: text; user-select: text; }

/*
 * Pe ecrane fara mouse, apasarea lunga selecta textul si scotea si lupa
 * sistemului peste meniul nostru. Oprim selectia acolo si oferim in schimb
 * "Copiaza textul" chiar in meniu.
 */
@media (hover: none) {
  .msg-row .bubble,
  .msg-row .bubble .text {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}

/* sageata care apare cand tragi de mesaj */
.swipe-hint {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 4px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink-750);
  color: var(--muted);
  pointer-events: none;
  transition: background .12s, color .12s;
}
.msg-row.mine .swipe-hint { left: auto; right: 4px; }
.swipe-hint.is-ready { background: var(--accent); color: #fff; }
.msg-row { position: relative; }

/* ==========================================================================
   MENIUL DE APASARE LUNGA
   Mic si lipit de mesaj, nu o foaie lata pe toata latimea ecranului.
   ========================================================================== */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .28);
  z-index: 78;
  animation: sheet-fade .12s ease-out;
}

.sheet {
  position: fixed;
  width: 216px;
  /* pana o asezam din JS o tinem ascunsa, ca sa nu clipeasca in coltul paginii */
  visibility: hidden;
  background: var(--ink-850);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  padding: 4px;
}
.sheet.is-placed {
  visibility: visible;
  animation: sheet-pop .14s cubic-bezier(.2, .8, .3, 1);
}

.sheet-emoji {
  display: flex;
  justify-content: space-between;
  gap: 1px;
  padding: 2px 2px 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.sheet-emoji button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.sheet-emoji button:active { background: var(--ink-750); transform: scale(.9); }

.sheet-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 14px;
  text-align: left;
  color: var(--text);
}
.sheet-item:active, .sheet-item:hover { background: var(--ink-800); }
.sheet-item.is-danger { color: var(--danger); }
.sheet-item svg { flex: 0 0 auto; opacity: .8; }

@keyframes sheet-fade { from { opacity: 0; } }
@keyframes sheet-pop { from { transform: scale(.94); opacity: 0; } }

/* pe ecrane fara mouse, butoanele mici dispar: le inlocuieste apasarea lunga */
@media (hover: none) {
  .msg-tools { display: none; }
}

/* ==========================================================================
   MODELUL DE FUNDAL AL CONVERSATIEI
   Se aseaza PESTE fundalul existent, nu in locul lui: degradeul si culorile
   temei raman, modelul vine deasupra, cu transparenta reglabila.
   ========================================================================== */

.chat { position: relative; }

.chat-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: repeat;
  background-position: center;
  pointer-events: none;
}

/* continutul trebuie sa ramana deasupra modelului */
.chat > .chat-bar,
.chat > .notif-ask,
.chat > .messages,
.chat > .typing-line,
.chat > .composer { position: relative; z-index: 1; }

/* ==========================================================================
   MESAJE IN CURS DE TRIMITERE
   Bula apare pe loc, palida, cu un ceas in loc de bife. Cand serverul confirma,
   se inlocuieste cu mesajul adevarat.
   ========================================================================== */

.msg-row.is-pending .bubble { opacity: .62; }
.msg-row.is-failed .bubble {
  opacity: 1;
  border-color: rgba(255, 92, 92, .5);
}
.ticks.is-failed { color: var(--danger); }

/* ==========================================================================
   ECRANUL DE PORNIRE
   Cand nu e nicio conversatie deschisa, in mijlocul ecranului sta chiar lista
   conversatiilor. Conteaza pe telefon, unde bara laterala e ascunsa.
   ========================================================================== */

.home {
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 4px 24px;
}

.home-inner {
  max-width: 520px;
  margin: 0 auto;
}

.home-inner > h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 8px 10px 2px;
}

/* randurile sunt aceleasi ca in bara laterala, doar mai aerisite */
.home-inner .room-item { padding: 11px 12px; }
.home-inner .room-item + .room-item { margin-top: 2px; }
.home-inner .list-label { padding-top: 16px; }

.home .empty-inner {
  max-width: 340px;
  margin: 48px auto 0;
  text-align: center;
}
.home .empty-inner h2 {
  font-family: var(--font-display);
  font-size: 21px;
  margin: 0 0 8px;
  font-weight: 700;
}
.home .empty-inner p { color: var(--muted); margin: 0 0 18px; }

/* ==========================================================================
   BUTONUL DIN COLTUL DIN STANGA, PE TELEFON
   In lista de conversatii e hamburger; intr-o conversatie devine sageata de
   intoarcere. Doar unul dintre semne se vede odata.
   ========================================================================== */

.nav-btn svg { display: block; }
.app.in-room .nav-btn .icon-menu { display: none; }
.app:not(.in-room) .nav-btn .icon-back { display: none; }

/* Mutarea taburilor prin tragere */
.group-tab { user-select: none; }
.group-tab.is-dragging {
  z-index: 3;
  cursor: grabbing;
  box-shadow: var(--shadow-pop);
  border-color: var(--accent);
  opacity: .95;
}
.group-tabs.is-reordering .group-tab:not(.is-dragging) {
  transition: transform .14s ease-out;
}

/* ==========================================================================
   CINE A DAT O REACTIE
   ========================================================================== */

.react-info {
  position: fixed;
  z-index: 79;
  min-width: 180px;
  max-width: 260px;
  padding: 8px;
  visibility: hidden;
  background: var(--ink-850);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
}
.react-info.is-placed {
  visibility: visible;
  animation: sheet-pop .12s cubic-bezier(.2, .8, .3, 1);
}

.react-info .ri-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 6px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.react-info .ri-emoji { font-size: 18px; }

.react-info .ri-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  font-size: 13.5px;
}

.react-info .ri-undo {
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--danger);
  text-align: center;
  border-top: 1px solid var(--line);
}
.react-info .ri-undo:hover { background: var(--ink-800); }

/* ==========================================================================
   TRIMIS MAI DEPARTE
   ========================================================================== */

.fwd-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 4px;
  font-style: italic;
}
.fwd-tag svg { flex: 0 0 auto; opacity: .8; }

.fwd-preview {
  padding: 9px 11px;
  border-radius: 10px;
  border-left: 3px solid var(--accent);
  background: var(--ink-800);
  font-size: 13.5px;
  color: var(--text-dim);
  max-height: 70px;
  overflow: hidden;
}

/* ==========================================================================
   CINE A VAZUT MESAJUL
   ========================================================================== */

.ticks.is-clickable { cursor: pointer; }
.ticks.is-clickable:hover { color: var(--text-dim); }
.ticks.seen.is-clickable:hover { color: var(--accent-2); }

.rcpt-info {
  position: fixed;
  z-index: 79;
  width: 244px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px;
  visibility: hidden;
  background: var(--ink-850);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
}
.rcpt-info.is-placed {
  visibility: visible;
  animation: sheet-pop .12s cubic-bezier(.2, .8, .3, 1);
}

.rcpt-info .ri-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 6px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.rcpt-info .ri-title:not(:first-child) {
  margin-top: 6px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.rcpt-info .ri-count {
  background: var(--ink-800);
  border-radius: 99px;
  padding: 1px 7px;
  letter-spacing: 0;
}

.rcpt-info .ri-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
}
.rcpt-info .ri-name { min-width: 0; }
.rcpt-info .ri-name b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rcpt-info .ri-name span { font-size: 11px; color: var(--muted); }

.rcpt-info .ri-empty {
  padding: 6px 8px 8px;
  font-size: 12.5px;
  color: var(--muted);
}

.rcpt-info .ri-foot {
  margin-top: 8px;
  padding: 8px 6px 2px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--muted);
}

/* Starea notificarilor, in setarile barei */
.push-state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}
.push-state.is-on { border-color: rgba(60, 200, 140, .35); }
.push-state b { color: var(--text); font-weight: 600; }

/* ==========================================================================
   REGLAJELE BAREI
   Trei comutatoare pe conversatie: in bara, pe telefon, in pagina.
   ========================================================================== */

.bs-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px 58px 58px;
  align-items: end;
  gap: 4px;
  margin: 14px 0 4px;
  padding: 0 6px 6px;
  border-bottom: 1px solid var(--line);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.bs-head .bs-h-name { text-align: left; }

.bs-list { max-height: 46vh; overflow-y: auto; }

.bs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px 58px 58px;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
}
.bs-row.is-off { opacity: .55; }

.bs-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.bs-name { min-width: 0; flex: 1 1 auto; }
.bs-name b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-label {
  margin-top: 4px;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 8px;
  width: 100%;
}

/* comutator */
.bs-toggle { display: grid; place-items: center; cursor: pointer; }
.bs-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.bs-track {
  width: 38px;
  height: 22px;
  border-radius: 99px;
  background: var(--ink-750);
  border: 1px solid var(--line-strong);
  position: relative;
  transition: background .14s, border-color .14s;
}
.bs-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .14s, background .14s;
}
.bs-toggle input:checked + .bs-track {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.bs-toggle input:checked + .bs-track::after {
  transform: translateX(16px);
  background: var(--accent);
}
.bs-toggle input:focus-visible + .bs-track { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 620px) {
  .bs-head, .bs-row { grid-template-columns: minmax(0, 1fr) 48px 48px 48px; }
  .bs-track { width: 34px; height: 20px; }
  .bs-track::after { width: 14px; height: 14px; }
  .bs-toggle input:checked + .bs-track::after { transform: translateX(14px); }
}

/* tragerea de la marginea stanga, ca sa te intorci la lista */
.chat { will-change: auto; }

/* ==========================================================================
   MESAJELE BOTULUI SI EFECTELE
   ========================================================================== */

.msg-row.is-bot .bubble {
  background: linear-gradient(180deg, rgba(92, 225, 198, .10), rgba(92, 225, 198, .04));
  border-color: rgba(92, 225, 198, .32);
}
.msg-row.is-bot .msg-author { color: #5CE1C6; }
.msg-row.is-bot .text { white-space: pre-wrap; }

.bot-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 99px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5CE1C6;
  background: rgba(92, 225, 198, .14);
  border: 1px solid rgba(92, 225, 198, .3);
}

.fx-canvas {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
}

/* ==========================================================================
   FEREASTRA DE STATISTICI
   ========================================================================== */

.stats-card { text-align: center; }

/* Ce tura e pe program acum: cifrele de dedesubt sunt ale modelului ei. */
.stats-shift {
  display: inline-block;
  margin: 0 auto 10px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--accent-2);
  background: rgba(255, 93, 143, .12);
  border: 1px solid rgba(255, 93, 143, .3);
}

.stats-photo {
  width: 108px;
  height: 108px;
  margin: 0 auto 12px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 44px;
  background: var(--ink-800);
  border: 3px solid rgba(255, 93, 143, .5);
  box-shadow: 0 0 0 6px rgba(255, 93, 143, .08);
}
.stats-photo img { width: 100%; height: 100%; object-fit: cover; }

.stats-name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.stats-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
}
.chip.gold { color: #FFD166; border-color: rgba(255, 209, 102, .4); }

.stats-figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.stats-figure {
  padding: 16px 10px;
  border-radius: 14px;
  background: var(--ink-900);
  border: 1px solid var(--line);
}
.sf-label {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.sf-value {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.stats-figure.earn .sf-value { color: var(--accent); }
.stats-figure.hours .sf-value { color: #5CE1C6; }

.sf-extra {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}
.sf-hours {
  font-size: 16px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 8px;
  border: 1px solid;
  font-variant-numeric: tabular-nums;
}
.lvl-low  { color: #ff8080; background: rgba(255, 64, 64, .15); border-color: rgba(255, 128, 128, .45); }
.lvl-mid  { color: #ffd24d; background: rgba(255, 193, 7, .15); border-color: rgba(255, 210, 77, .45); }
.lvl-high { color: #5ef08a; background: rgba(46, 204, 113, .15); border-color: rgba(94, 240, 138, .45); }
.lvl-none { color: var(--muted); background: var(--ink-800); border-color: var(--line); }

.stats-sub {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.stats-sub b { font-size: 19px; color: var(--text); font-variant-numeric: tabular-nums; }

.stats-board { max-height: 34vh; overflow-y: auto; }
.sb-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 9px;
  font-size: 13px;
}
.sb-row.is-me { background: var(--accent-soft); border: 1px solid var(--accent); }
.sb-pos { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.sb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.sb-tier { font-size: 11px; color: #5CE1C6; }

/* Diagnosticul conexiunii cu platforma */
.diag { margin-bottom: 10px; }
.diag-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 12.5px;
}
.diag-row.is-bad { background: rgba(255, 92, 92, .1); }
.diag-mark { color: #5ef08a; font-weight: 800; width: 14px; }
.diag-row.is-bad .diag-mark { color: var(--danger); }
.diag-detail { color: var(--muted); }
.diag-html {
  margin-top: 8px;
  padding: 10px;
  border-radius: 8px;
  background: var(--ink-900);
  border: 1px solid var(--line);
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted);
  white-space: pre-wrap;
  max-height: 140px;
  overflow: auto;
}

/* ==========================================================================
   SUMELE DIN MESAJELE BOTULUI
   Sub 100 $ raman text simplu; peste, se aprind din ce in ce mai tare.
   ========================================================================== */

.money { font-weight: 700; font-variant-numeric: tabular-nums; }

.money.m1 {
  color: #5ef08a;
  text-shadow: 0 0 10px rgba(46, 204, 113, .45);
}
.money.m2 {
  color: #ffd24d;
  text-shadow: 0 0 12px rgba(255, 193, 7, .55);
}
.money.m3 {
  color: #ff9ec4;
  background: linear-gradient(96deg, #FFD166, #FF5D8F, #C77DFF, #FFD166);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: money-shine 4s linear infinite;
  filter: drop-shadow(0 0 8px rgba(255, 93, 143, .5));
}

@keyframes money-shine {
  to { background-position: 300% 0; }
}

/* la mesajele de prag, suma pulseaza scurt cand apare */
.msg-row.is-bot .money.m1,
.msg-row.is-bot .money.m2 { animation: money-pop .5s ease-out; }

@keyframes money-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .money.m3 { animation: none; }
  .msg-row.is-bot .money.m1,
  .msg-row.is-bot .money.m2 { animation: none; }
}

/* ------------------------------------------- selectorul de conturi --- */
/* Apare pe ecranul de conectare si pe cel de "cine intra?", deci foloseste
   aceleasi culori ca restul cardului de autentificare. */

.acct-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.acct-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.acct-pick {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--ink-800, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.acct-pick:hover:not(:disabled),
.acct-pick:focus-visible {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.07);
}

.acct-pick:disabled { opacity: 0.55; cursor: default; }

.acct-av {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  /* numele pe fundal colorat: umbra il tine lizibil si pe culorile deschise */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.acct-who { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.acct-who b {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acct-who span {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acct-forget {
  flex: 0 0 auto;
  width: 38px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.acct-forget:hover:not(:disabled),
.acct-forget:focus-visible {
  color: var(--text);
  border-color: var(--line-strong);
}

.acct-forget:disabled { opacity: 0.5; cursor: default; }

/* "sau cu alt cont", intre scurtaturi si formular */
.acct-or {
  margin: 0 0 14px !important;
  font-size: 12px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}