/* =====================================================================
   app.css — SVS Social application chrome (shell, rail, topbar, auth).
   Component styles for individual screens are added alongside their pages.
   Load after theme.css.
   ===================================================================== */

html { --ss-rail-w:66px; --ss-topbar-h:61px; --ss-imp-h:0px; height:100%; }
body { min-height:100%; }
body.is-imp { --ss-imp-h:36px; }

[x-cloak] { display:none !important; }

/* ---- "view as" banner ---- */
.ss-imp-bar {
  position:sticky; top:0; z-index:60; height:var(--ss-imp-h);
  display:flex; align-items:center; gap:8px; padding:0 16px;
  background:var(--amber); color:#1b1206; font-size:12.5px; font-weight:600;
}
.ss-imp-bar a { margin-left:auto; color:#1b1206; text-decoration:underline; font-weight:700; }
:root[data-theme="dark"] .ss-imp-bar { color:#1b1206; }

/* ---------------------------------------------------------------- shell */
.ss-shell { display:flex; align-items:flex-start; min-height:100vh; }

.ss-rail {
  width:var(--ss-rail-w); flex-shrink:0; align-self:stretch;
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 0;
  position:sticky; top:var(--ss-imp-h); height:calc(100vh - var(--ss-imp-h)); z-index:40;
}
.ss-rail .ss-logo {
  width:34px; height:34px; border-radius:9px; background:var(--brand);
  display:grid; place-items:center; color:var(--brand-on); margin-bottom:10px;
}
.ss-rail-item {
  width:42px; height:42px; border-radius:10px; border:0; background:transparent;
  color:var(--text-soft); display:grid; place-items:center; cursor:pointer;
  position:relative; transition:background .15s, color .15s; text-decoration:none;
}
.ss-rail-item:hover { background:var(--sunk); color:var(--ink); }
.ss-rail-item.is-active { background:var(--brand-tint); color:var(--brand-deep); }
.ss-rail-item.is-active::before {
  content:""; position:absolute; left:-14px; top:11px; bottom:11px; width:3px;
  border-radius:3px; background:var(--brand);
}
.ss-rail-sp { flex:1; }
.ss-rail-av {
  width:32px; height:32px; border-radius:50%; color:#fff; font-weight:700; font-size:12px;
  display:grid; place-items:center; background:linear-gradient(135deg,var(--amber),var(--brand));
  text-decoration:none;
}

/* ---------------------------------------------------------------- main */
.ss-main { flex:1; min-width:0; display:flex; flex-direction:column; }

.ss-topbar {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 24px; min-height:var(--ss-topbar-h);
  background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:var(--ss-imp-h); z-index:30;
}
.ss-topbar-l { display:flex; align-items:center; gap:14px; min-width:0; }
.ss-topbar-title { font-family:var(--f-display); font-weight:600; font-size:17px; color:var(--ink); }
.ss-topbar-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }

.ss-content { padding:22px 24px 48px; }
.ss-content.is-wide { padding:0; }

/* --------------------------------------------------- brand switcher */
.ss-brandswitch {
  display:flex; align-items:center; gap:10px; border:1px solid var(--line);
  border-radius:var(--r); padding:6px 10px 6px 8px; background:var(--surface);
  cursor:pointer; font-weight:600; color:var(--ink); font-size:14px; font-family:var(--f-ui);
}
.ss-brandswitch:hover { border-color:var(--line-strong); }
.ss-brandswitch .ss-ba {
  width:26px; height:26px; border-radius:7px; color:#fff; font-weight:700; font-size:11px;
  display:grid; place-items:center; background:linear-gradient(135deg,#c98b3f,#6b3d1e); flex-shrink:0;
}
.ss-brandswitch-menu { min-width:220px; }
.ss-brandswitch-menu .dropdown-item.is-current { color:var(--brand-deep); font-weight:600; }

/* ------------------------------------------------------------- icon button */
.ss-iconbtn {
  width:34px; height:34px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface); color:var(--text-soft); display:grid; place-items:center;
  cursor:pointer; transition:color .15s, border-color .15s;
}
.ss-iconbtn:hover { color:var(--ink); border-color:var(--line-strong); }

/* ---------------------------------------------------------------- flashes */
.ss-flashes { display:flex; flex-direction:column; gap:8px; padding:14px 24px 0; }

/* ---------------------------------------------------------------- auth pages */
.ss-auth {
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(1200px 500px at 15% -10%, var(--brand-tint), transparent 60%),
    var(--paper);
}
.ss-auth-card {
  width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-2); padding:30px 28px;
}
.ss-auth-brand { display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.ss-auth-brand .ss-logo { width:32px; height:32px; margin:0; border-radius:8px; }
.ss-auth-brand span { font-family:var(--f-display); font-weight:600; font-size:16px; color:var(--ink); }
.ss-auth-card h1 { font-size:20px; margin-bottom:4px; }
.ss-auth-card .sub { color:var(--text-soft); font-size:13px; margin-bottom:20px; }
.ss-auth-card .form-control { padding:10px 12px; }
.ss-auth-foot { margin-top:16px; font-size:12.5px; color:var(--text-soft); text-align:center; }

/* ---------------------------------------------------------------- empty state */
.ss-empty {
  text-align:center; padding:56px 24px; color:var(--text-soft);
  border:1px dashed var(--line-strong); border-radius:var(--r-lg); background:var(--surface);
}
.ss-empty h3 { color:var(--ink); font-size:16px; margin-bottom:6px; }
.ss-empty p { font-size:13.5px; margin-bottom:16px; }

@media (max-width:640px){
  .ss-topbar { flex-wrap:wrap; }
  .ss-content { padding:16px; }
}