/* v4: a permanent navigation rail, compact room list, and side-aligned settings. */
:root { --rail: 86px; }
.admin-layout,.admin-layout.has-room { grid-template-columns:var(--rail) var(--sidebar) minmax(0,1fr); }
.admin-layout.has-room.profile-open { grid-template-columns:var(--rail) var(--sidebar) minmax(0,1fr) var(--profile); }
.admin-layout>.sidebar { grid-column:2; grid-row:1; }
.admin-layout>.conversation,.admin-layout>.dashboard { grid-column:3; grid-row:1; min-width:0; }
.admin-layout>.profile-panel { grid-column:4; grid-row:1; }
.admin-layout:not(.profile-open)>.profile-panel { display:none; }
.admin-layout .sidebar-search { margin-top:16px; }
.navigation-rail { display:flex; flex-direction:column; align-items:center; grid-column:1; grid-row:1; width:var(--rail); min-height:0; background:var(--surface-soft); border-right:1px solid var(--line); z-index:13; position:relative; }
.rail-identity { display:flex; flex-direction:column; align-items:center; width:100%; gap:10px; padding:23px 6px 18px; }
.rail-avatar { display:flex; border-radius:50%; padding:0; }
.rail-avatar .avatar { width:44px; height:44px; font-size:19px; }
.rail-name { width:100%; max-height:38px; overflow:hidden; text-align:center; font-size:11px; line-height:1.6; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.rail-main,.rail-bottom { display:flex; flex-direction:column; align-items:center; gap:9px; width:100%; }
.rail-bottom { margin-top:auto; padding-bottom:max(20px,env(safe-area-inset-bottom)); padding-top:15px; }
.rail-button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:58px; min-height:56px; border-radius:14px; color:var(--muted); transition:background .15s,color .15s; }
.rail-button>.icon { width:23px; height:23px; }
.rail-button>span { font-size:10px; }
.rail-button:hover,.rail-button.active,.rail-button[aria-expanded=true] { background:var(--primary-soft); color:var(--primary); }
.rail-button.rail-create { min-height:46px; width:46px; margin-bottom:9px; background:var(--primary); color:white; border-radius:15px; box-shadow:0 5px 15px #3390ec20; }
.rail-latency { display:flex; flex-direction:column; align-items:center; gap:7px; color:var(--muted); font-size:10px; padding:8px 0; }
.rail-latency .latency-wifi { width:19px; height:19px; }
.rail-settings-panel { position:absolute; left:calc(100% + 1px); bottom:18px; width:248px; max-height:calc(100dvh - 36px); overflow-y:auto; padding:16px 10px 10px; border:1px solid var(--line); border-radius:0 18px 18px 0; background:var(--surface); box-shadow:8px 8px 36px #102a431f; }
.rail-settings-panel>header { display:flex; align-items:center; justify-content:space-between; padding:0 8px 10px; }
.rail-settings-panel>header strong { font-size:16px; }
.rail-settings-item { display:flex; align-items:center; gap:12px; width:100%; padding:14px 12px; border-radius:9px; text-align:left; font-size:13px; }
.rail-settings-item:hover { background:var(--surface-soft); }
.rail-settings-item.danger-item { color:var(--danger); margin-top:4px; border-top:1px solid var(--line); border-radius:0 0 9px 9px; }
.rail-settings-item.danger-item>.icon { color:inherit; }
.rail-settings-item>.icon { width:19px; height:19px; color:var(--muted); }
.rail-settings-item>.icon:last-child { width:14px; height:14px; margin-left:auto; }
.admin-layout>.sidebar-splitter { left:calc(var(--rail) + var(--sidebar) - 4px); }
.modal.side-modal { position:fixed; inset:0 auto 0 var(--rail); margin:0; width:min(560px,calc(100vw - var(--rail))); max-width:none; height:100dvh; max-height:none; border-radius:0 18px 18px 0; }
.modal.side-modal::backdrop { background:#182c3b18; backdrop-filter:none; }
.modal.side-modal .modal-content { flex:1; padding:22px; }
.guest-loading { min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:30px; background:#fff; color:#556675; }
.guest-error { text-align:center; line-height:1.8; }
.dashboard-open>.conversation,.dashboard-open>.profile-panel { display:none!important; }
.dashboard { background:var(--surface-soft); min-height:0; overflow:auto; }
.dashboard-header { display:flex; align-items:center; padding:34px 36px 25px; gap:15px; }
.dashboard-header>div:first-child { flex:1; }
.dashboard-header h1 { font-size:27px; margin-top:6px; font-weight:650; }
.dashboard-eyebrow { color:var(--muted); font-size:12px; }
.dashboard-content { padding:0 36px 32px; }
.metric-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.metric-day { background:var(--surface); border:1px solid var(--line); border-radius:17px; padding:24px; }
.metric-day>header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:30px; }
.metric-day h2 { font-size:17px; }
.metric-day time { color:var(--muted); font-size:11px; }
.metric-values { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.metric-values>div { display:flex; flex-direction:column; gap:10px; }
.metric-values span { font-size:12px; color:var(--muted); }
.metric-number { font-size:35px; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-1px; }
.metric-values small { color:var(--muted); font-size:10px; line-height:1.6; }
.hourly-card { background:var(--surface); border:1px solid var(--line); border-radius:17px; margin:24px 0; padding:25px; }
.hourly-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; }
.hourly-header h2 { font-size:15px; }
.chart-legend { display:flex; gap:15px; font-size:10px; color:var(--muted); }
.chart-legend span::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; background:var(--primary); }
.chart-legend .yesterday::before { background:#bcd4e8; }
.hourly-bars { display:flex; gap:6px; height:190px; border-bottom:1px solid var(--line); margin-bottom:25px; }
.hour-column { flex:1; min-width:0; display:flex; align-items:flex-end; justify-content:center; gap:2px; position:relative; }
.hour-bar { width:40%; background:var(--primary); border-radius:3px 3px 0 0; min-height:0; }
.hour-bar.yesterday { background:#bcd4e8; }
.hour-label { position:absolute; top:calc(100% + 10px); font-size:9px; color:var(--muted); }
.invite-editor { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.invite-preview { min-width:0; display:flex; flex-direction:column; align-items:center; gap:16px; align-self:start; }
.qr-card-canvas { display:block; width:100%; max-width:340px; height:auto; border:1px solid #e9edf2; border-radius:12px; background:white; }
.invite-preview .button-row { flex-wrap:wrap; justify-content:center; }
.invite-preview .button { font-size:12px; padding:10px 14px; white-space:nowrap; flex:0 0 auto; }
.invite-version { font-size:11px; color:var(--muted); }
.invite-options { gap:16px; }
.invite-options h3 { font-size:15px; margin-bottom:2px; }
.invite-options .invite-url { font-size:10px; }
@media (max-width:1199px) {
  .admin-layout.has-room.profile-open { grid-template-columns:var(--rail) var(--sidebar) minmax(0,1fr); }
  .admin-layout>.profile-panel { grid-column:auto; }
  .metric-grid { grid-template-columns:1fr; }
  .dashboard-header { padding:24px; }
  .dashboard-content { padding:0 24px 24px; }
}
@media (max-width:767px) {
  :root { --rail:68px; }
  .admin-layout,.admin-layout.has-room,.admin-layout.has-room.profile-open { display:grid; grid-template-columns:var(--rail) minmax(0,1fr); }
  .admin-layout>.sidebar { width:auto; grid-column:2; }
  .admin-layout>.conversation { grid-column:2; width:auto; }
  .admin-layout:not(.mobile-chat)>.conversation { display:none; }
  .admin-layout.mobile-chat>.sidebar { display:none; }
  .admin-layout.dashboard-open>.sidebar { display:none; }
  .admin-layout>.dashboard { grid-column:2; }
  .rail-identity { padding:18px 4px 15px; }
  .rail-avatar .avatar { width:37px; height:37px; }
  .rail-button { width:49px; min-height:51px; border-radius:12px; }
  .rail-name { font-size:10px; }
  .rail-settings-panel { bottom:12px; width:min(248px,calc(100vw - var(--rail) - 10px)); }
  .modal.side-modal { border-radius:0; }
  .admin-layout .sidebar-search { padding-left:12px; padding-right:12px; }
  .dashboard-header { padding:22px 16px; flex-wrap:wrap; }
  .dashboard-header h1 { font-size:22px; }
  .dashboard-header .button { font-size:10px; padding:9px; }
  .dashboard-content { padding:0 16px 22px; }
  .metric-day { padding:18px; }
  .metric-number { font-size:29px; }
  .hourly-card { padding:18px 12px; }
  .hourly-bars { gap:3px; height:140px; }
  .invite-editor { grid-template-columns:1fr; }
  .qr-card-canvas { max-width:285px; }
  .guest-layout { display:flex; }
}
@media (max-height:650px) {
  .rail-identity { padding-top:12px; padding-bottom:10px; gap:4px; }
  .rail-main,.rail-bottom { gap:4px; }
  .rail-button { min-height:43px; }
  .rail-bottom { padding-bottom:8px; padding-top:8px; }
}