/* ═══════════════════════════════════════════════════════════
   LAYOUT — Auth + App Shell + Sidebar
   ═══════════════════════════════════════════════════════════ */

/* ── AUTH ───────────────────────────────────────────────── */
.auth-page {
  min-height:100vh; display:grid;
  grid-template-columns:1fr 1fr; overflow:auto;
  background:var(--bg-base);
}
.auth-left {
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:var(--s7) var(--s6);
  background:
    radial-gradient(ellipse at 65% 40%, rgba(124,58,237,.22) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(236,72,153,.12) 0%, transparent 50%),
    var(--bg-1);
  border-right:1px solid var(--b2);
}
.auth-left::after {
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%237c3aed' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
.auth-brand { z-index:1; display:flex; flex-direction:column; align-items:center; gap:var(--s4); }
.auth-logo {
  position:relative;
  width:88px; height:88px; border-radius:26px;
  background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center;
  font-size:46px; font-weight:900; color:#fff;
  box-shadow:var(--glow-lg), var(--shadow-xl);
  animation:splashPop .6s var(--t-bounce);
}
.auth-logo::after {
  content:''; position:absolute; inset:-12px;
  border-radius:36px;
  background:var(--grad-brand); opacity:.16;
  filter:blur(22px);
}
.auth-appname {
  font-size:44px; font-weight:900; letter-spacing:-2px;
  background:var(--grad-brand);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.auth-tagline { font-size:16px; color:var(--t2); text-align:center; line-height:1.7; max-width:280px; }
.auth-features { display:flex; flex-direction:column; gap:var(--s3); margin-top:var(--s4); }
.auth-feature {
  display:flex; align-items:center; gap:var(--s3);
  padding:12px 16px;
  background:var(--bg-glass);
  border:1px solid var(--b2); border-radius:var(--r-lg);
  backdrop-filter:blur(10px);
  animation:fadeInUp .4s ease both;
}
.auth-feature:nth-child(2) { animation-delay:.1s; }
.auth-feature:nth-child(3) { animation-delay:.2s; }
.auth-feature-icon {
  width:38px; height:38px; border-radius:var(--r-md);
  background:var(--accent-soft); border:1px solid var(--b-accent);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.auth-feature-title { font-size:14px; font-weight:600; color:var(--t1); }
.auth-feature-desc  { font-size:12px; color:var(--t3); margin-top:1px; }

.auth-right {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:var(--s6) var(--s5);
  overflow-y:auto;
}
.auth-box   { width:100%; max-width:400px; animation:fadeInUp .35s ease; }
.auth-title { font-size:32px; font-weight:900; letter-spacing:-.7px; margin-bottom:6px; color:var(--t1); }
.auth-sub   { font-size:15px; color:var(--t2); margin-bottom:var(--s5); line-height:1.6; }
.auth-form  { display:flex; flex-direction:column; gap:var(--s3); }
.auth-foot  {
  display:flex; align-items:center; justify-content:center;
  gap:6px; margin-top:var(--s4);
  font-size:14px; color:var(--t2);
}
.auth-foot a { font-weight:600; color:var(--t-accent); }
.auth-foot a:hover { color:var(--accent-light); }
.auth-error {
  display:flex; align-items:center; gap:var(--s2);
  padding:12px 16px;
  background:var(--red-soft);
  border:1px solid rgba(248,113,113,.3);
  border-radius:var(--r-lg);
  font-size:14px; color:var(--red); font-weight:500;
  animation:fadeInDown .2s ease;
}

/* ── APP SHELL ──────────────────────────────────────────── */
.app-shell {
  display:flex;
  height:100%;        /* 100% din #app, nu 100vh */
  min-height:0;
  overflow:hidden;
  background:var(--bg-base);
}

/* ── SIDEBAR ────────────────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w); min-width:var(--sidebar-w);
  height:100%;        /* ia toata inaltimea app-shell */
  min-height:0;
  display:flex; flex-direction:column;
  background:var(--bg-1);
  border-right:1px solid var(--b2);
  overflow:hidden; z-index:var(--z1);
  transition:transform var(--t-spring);
  position:relative;
}
.sidebar::after {
  content:''; position:absolute; top:0; right:0; bottom:0; width:1px;
  background:linear-gradient(180deg, transparent, rgba(124,58,237,.3), transparent);
  opacity:.5; pointer-events:none;
}

.sidebar-header {
  height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--s4);
  border-bottom:1px solid var(--b2);     /* b2 */
  flex-shrink:0;
  background:var(--bg-1);
}
.sidebar-brand { display:flex; align-items:center; gap:var(--s2); text-decoration:none; }
.sidebar-logo {
  width:32px; height:32px; border-radius:10px;
  background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:900; color:#fff;
  box-shadow:var(--glow-sm);
}
.sidebar-name {
  font-size:19px; font-weight:800; letter-spacing:-.5px;
  background:var(--grad-h);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.sidebar-search {
  padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--b2);     /* b2 */
  flex-shrink:0;
}

.sidebar-tabs {
  display:flex; padding:0 var(--s3);
  gap:2px; flex-shrink:0;
  border-bottom:1px solid var(--b2);     /* b2 */
  background:var(--bg-1);
}
.sidebar-tab {
  padding:11px var(--s2); font-size:13px; font-weight:600;
  color:var(--t3); cursor:pointer;
  border-bottom:2px solid transparent;
  transition:all var(--t-fast); white-space:nowrap;
  background:none; border-left:none; border-right:none; border-top:none;
}
.sidebar-tab:hover { color:var(--t2); }
.sidebar-tab.active {
  color:var(--accent-glow);
  border-bottom-color:var(--accent);
}

.sidebar-list { flex:1; overflow-y:auto; }

/* Conv item */
.conv-item {
  display:flex; align-items:center; gap:var(--s3);
  padding:11px var(--s4); cursor:pointer;
  transition:background var(--t-fast);
  position:relative;
  border-bottom:1px solid var(--b1);
}
.conv-item:last-child { border-bottom:none; }
.conv-item:hover    { background:var(--bg-hover); }
.conv-item.active   { background:var(--bg-active); }
.conv-item.active::before {
  content:''; position:absolute; left:0; top:10px; bottom:10px;
  width:3px; background:var(--grad-h); border-radius:0 3px 3px 0;
  box-shadow:var(--glow-sm);
}
.conv-item-avatar { position:relative; flex-shrink:0; }
.conv-item-body   { flex:1; overflow:hidden; }
.conv-item-row1   { display:flex; align-items:center; justify-content:space-between; margin-bottom:3px; }
.conv-item-name   {
  font-size:14px; font-weight:600; color:var(--t1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:155px;
}
.conv-item.unread .conv-item-name { font-weight:700; }
.conv-item-time   { font-size:11px; color:var(--t3); flex-shrink:0; }
.conv-item.unread .conv-item-time { color:var(--accent-glow); }
.conv-item-row2   { display:flex; align-items:center; justify-content:space-between; gap:4px; }
.conv-item-prev   {
  font-size:13px; color:var(--t3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;
}
.conv-item.unread .conv-item-prev { color:var(--t2); font-weight:500; }

/* Sidebar user */
.sidebar-user {
  display:flex; align-items:center; gap:var(--s2);
  padding:var(--s2) var(--s3);
  border-top:1px solid var(--b2);        /* b2 — vizibil */
  flex-shrink:0; cursor:pointer;
  transition:background var(--t-fast);
  background:var(--bg-2);               /* usor mai inchis decat sidebar */
}
.sidebar-user:hover { background:var(--bg-3); }
.sidebar-user-info  { flex:1; overflow:hidden; }
.sidebar-user-name  { font-size:13px; font-weight:600; color:var(--t1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-user-status{ font-size:12px; color:var(--green); font-weight:600; }

/* ── MAIN PANEL ─────────────────────────────────────────── */
.main-panel {
  flex:1;
  min-width:0;
  min-height:0;       /* CRITIC: fara asta flex nu comprima copiii */
  height:100%;
  display:flex; flex-direction:column;
  overflow:hidden; background:var(--bg-base);
  position:relative;
}
.main-panel::before {
  content:''; position:absolute; top:0; left:0; right:0; bottom:60%;
  background:radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.05) 0%, transparent 70%);
  pointer-events:none;
}

/* Welcome */
.welcome {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:var(--s4); animation:fadeIn .4s ease; position:relative; z-index:1;
}
.welcome-logo {
  position:relative;
  width:88px; height:88px; border-radius:26px;
  background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center;
  font-size:46px; font-weight:900; color:#fff;
  box-shadow:var(--glow-lg);
  animation:pulseGlow 4s ease infinite;
}
.welcome-logo::after {
  content:''; position:absolute; inset:-16px;
  border-radius:36px;
  background:var(--grad-brand); opacity:.1; filter:blur(24px);
}
.welcome-title { font-size:24px; font-weight:800; letter-spacing:-.4px; color:var(--t1); }
.welcome-sub   { font-size:15px; color:var(--t2); text-align:center; max-width:260px; line-height:1.7; }

/* ── SETTINGS ───────────────────────────────────────────── */
.settings-card {
  background:var(--bg-2);
  border:1px solid var(--b2);
  border-radius:var(--r-xl);
  overflow:hidden; margin-bottom:var(--s4);
  position:relative;
}
.settings-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--b3),transparent);
}
.settings-card-header {
  padding:var(--s2) var(--s4);
  font-size:11px; font-weight:700; color:var(--t3);
  text-transform:uppercase; letter-spacing:.8px;
  border-bottom:1px solid var(--b2);
  background:var(--bg-3);
}
.settings-row {
  display:flex; align-items:center; gap:var(--s3);
  padding:14px var(--s4); border-bottom:1px solid var(--b1);
  transition:background var(--t-fast);
}
.settings-row:last-child { border-bottom:none; }
.settings-row.clickable  { cursor:pointer; }
.settings-row.clickable:hover { background:var(--bg-hover); }
.settings-row-icon {
  width:36px; height:36px; border-radius:var(--r-md);
  background:var(--accent-soft); border:1px solid var(--b-accent);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.settings-row-info  { flex:1; overflow:hidden; }
.settings-row-label { font-size:14px; font-weight:600; color:var(--t1); }
.settings-row-desc  { font-size:12px; color:var(--t3); margin-top:2px; }
.settings-row-value { font-size:13px; color:var(--t2); }
.settings-row-arrow { color:var(--t2); font-size:14px; }

/* ── PROFILE (override din layout) ─────────────────────── */
.profile-avatar {
  width:88px; height:88px; border-radius:50%;
  border:4px solid var(--bg-base);
  overflow:hidden; background:var(--bg-3);
  display:flex; align-items:center; justify-content:center;
  font-size:32px; font-weight:700; color:var(--t-accent);
  box-shadow:var(--shadow-lg), var(--glow-xs);
}
.profile-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-name     { font-size:22px; font-weight:800; letter-spacing:-.4px; color:var(--t1); }
.profile-username { font-size:14px; color:var(--t3); margin-top:2px; }
.profile-bio      { font-size:15px; color:var(--t2); margin-top:var(--s2); line-height:1.7; }

@media(max-width:900px) {
  .auth-page { grid-template-columns:1fr; }
  .auth-left  { display:none; }
}

/* ═══════════════════════════════════════════════════════════
   USER MENU POPUP
   ═══════════════════════════════════════════════════════════ */
.user-menu-popup {
  position:fixed;
  background:var(--bg-2);
  border:1px solid var(--b2);
  border-radius:var(--r-xl);
  padding:var(--s2);
  min-width:290px; max-width:320px;
  max-height:calc(100vh - 80px);   /* nu depășește ecranul */
  overflow-y:auto;                 /* scroll intern dacă e nevoie */
  box-shadow:var(--shadow-xl), var(--glow-xs);
  z-index:var(--z5);
  /* Animatie */
  opacity:0; transform:translateY(8px) scale(.97);
  transition:opacity var(--t-mid), transform var(--t-spring);
  backdrop-filter:blur(20px);
}
.user-menu-popup.open {
  opacity:1; transform:translateY(0) scale(1);
}
.user-menu-popup::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-glow),transparent);
  opacity:.3;
}

/* User card în meniu */
.um-user-card {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s2) var(--s3) var(--s3);
  border-radius:var(--r-lg);
  background:var(--bg-3); border:1px solid var(--b2);
  margin-bottom:var(--s2);
  position:relative;
}
.um-avatar {
  width:44px; height:44px; border-radius:50%;
  background:var(--grad-subtle); border:2px solid var(--b2);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700; color:var(--t-accent);
  overflow:hidden; flex-shrink:0; box-shadow:var(--glow-xs);
}
.um-avatar img { width:100%; height:100%; object-fit:cover; }
.um-user-info  { flex:1; overflow:hidden; }
.um-name       { font-size:14px; font-weight:700; color:var(--t1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.um-username   { font-size:12px; color:var(--t3); margin-top:2px; }
.um-online {
  position:absolute; top:var(--s2); right:var(--s3);
  font-size:11px; font-weight:600; color:var(--green);
  display:flex; align-items:center; gap:4px;
}
.um-online i { font-size:7px; }

/* Secțiuni */
.um-section { margin-bottom:2px; }
.um-section-label {
  font-size:10px; font-weight:700; color:var(--t3);
  text-transform:uppercase; letter-spacing:.8px;
  padding:6px 12px 4px;
}

/* Item meniu */
.um-item {
  display:flex; align-items:center; gap:var(--s2);
  padding:9px 10px;
  border-radius:var(--r-lg);
  font-size:14px; font-weight:500; color:var(--t2);
  cursor:pointer; border:none; background:none;
  width:100%; text-align:left;
  transition:all var(--t-fast);
}
.um-item:hover { background:var(--bg-hover); color:var(--t1); }
.um-item--danger       { color:var(--red); }
.um-item--danger:hover { background:var(--red-soft); color:var(--red); }

.um-icon {
  width:32px; height:32px; border-radius:var(--r-md); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--t-accent);
  transition:all var(--t-fast);
}
.um-item:hover .um-icon { transform:scale(1.08); }
.um-label  { flex:1; }
.um-arrow  { color:var(--t3); font-size:11px; opacity:.6; }

/* Separator */
.um-sep { height:1px; background:var(--b2); margin:var(--s2) 0; }

/* Badges apps */
.um-version-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px 4px 12px;
  font-size:12px; font-weight:600; color:var(--accent-glow);
  background:var(--accent-soft); border:1px solid var(--b-accent);
  border-radius:var(--r-full);
  margin:4px 10px 8px;
}
.um-app-row {
  display:flex; gap:6px; padding:0 10px 6px;
  flex-wrap:wrap;
}
.um-app-btn {
  display:flex; align-items:center; gap:6px;
  padding:7px 12px;
  background:var(--bg-3); border:1px solid var(--b2);
  border-radius:var(--r-full);
  font-size:12px; font-weight:600; color:var(--t2);
  cursor:pointer; transition:all var(--t-fast);
}
.um-app-btn:hover { background:var(--bg-4); color:var(--t1); border-color:var(--b3); }
.um-app-btn i { font-size:13px; }

/* Footer copyright */
.um-footer {
  text-align:center; font-size:11px; color:var(--t3);
  line-height:1.8; padding:var(--s2) var(--s3);
  margin-top:4px;
}
.um-footer a { color:var(--t3); text-decoration:underline; transition:color var(--t-fast); }
.um-footer a:hover { color:var(--t-accent); }