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

:root {
  --bg:#151412; --bg2:#1c1a18; --surface:#22201e; --border:#2e2b26;
  --text:#eae5dd; --text2:#7a7670; --accent:#d97757; --human:#7a9e8e;
  --shadow:0 4px 24px rgba(0,0,0,.45); --radius:16px;
  --font-display:'Fraunces',serif; --font-mono:'DM Mono',monospace; --tr:0.18s ease;
}

.light {
  --bg:#f4f2ee; --bg2:#ece9e4; --surface:#faf8f5;
  --border:#dedad4; --text:#1a1915; --text2:#8a8578;
  --shadow:0 2px 12px rgba(0,0,0,.08);
}

html, body { height:100%; overflow:hidden; touch-action:pan-x pan-y; }
body { font-family:var(--font-mono); background:var(--bg); color:var(--text); transition:background var(--tr),color var(--tr); }
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

/* ── LOADING ── */
#loading-overlay {
  position:fixed; inset:0; background:var(--bg);
  display:flex; align-items:center; justify-content:center; z-index:100;
}
#loading-overlay.hidden { display:none; }
.loading-logo {
  font-family:var(--font-display); font-size:2.8rem;
  font-weight:300; font-style:italic; color:var(--text2);
  animation:pulse 1.8s ease infinite;
  letter-spacing:-.03em;
}

/* ── AUTH ── */
#auth-screen {
  height:100dvh; display:flex; align-items:center;
  justify-content:center; padding:20px; overflow-y:auto;
  background:var(--bg);
}
#auth-screen.hidden { display:none; }

.auth-card {
  width:100%; max-width:360px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:20px; padding:40px 32px;
  box-shadow:0 8px 48px rgba(0,0,0,.35);
  animation:fadeIn .35s ease;
}

.auth-logo {
  font-family:var(--font-display);
  font-size:2rem; font-weight:300; font-style:italic;
  letter-spacing:-.04em; color:var(--text);
  text-align:center; display:block; margin-bottom:4px;
  line-height:1;
}
.auth-logo-dot { color:var(--accent); }

.auth-tagline {
  font-size:.68rem; color:var(--text2);
  text-align:center; margin-bottom:32px;
  letter-spacing:.08em; text-transform:uppercase;
  opacity:.7;
}

.auth-tabs {
  display:flex; background:var(--bg);
  border-radius:10px; padding:3px; margin-bottom:28px;
  border:1px solid var(--border);
}
.auth-tab {
  flex:1; padding:8px; background:none; border:none;
  border-radius:8px; color:var(--text2);
  font-family:var(--font-mono); font-size:.72rem;
  cursor:pointer; transition:background var(--tr),color var(--tr);
  letter-spacing:.02em;
}
.auth-tab.active {
  background:var(--surface); color:var(--text);
  box-shadow:0 1px 6px rgba(0,0,0,.2);
}

.auth-form { display:flex; flex-direction:column; gap:14px; }
.auth-form.hidden { display:none; }
.auth-field { display:flex; flex-direction:column; gap:6px; }
.auth-label {
  font-size:.63rem; color:var(--text2);
  letter-spacing:.07em; text-transform:uppercase;
}
.auth-input {
  background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:11px 14px;
  color:var(--text); font-family:var(--font-mono); font-size:14px;
  outline:none; transition:border-color var(--tr),box-shadow var(--tr);
}
.auth-input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(217,119,87,.1);
}
.auth-input::placeholder { color:var(--text2); opacity:.4; }

.auth-btn {
  margin-top:2px; padding:12px;
  background:var(--accent); border:none; border-radius:10px;
  color:#1a1915; font-family:var(--font-mono); font-size:.78rem;
  cursor:pointer; letter-spacing:.02em;
  transition:opacity var(--tr),transform var(--tr);
}
.auth-btn:hover { opacity:.88; }
.auth-btn:active { transform:scale(.98); }
.auth-btn:disabled { opacity:.45; cursor:not-allowed; }

.auth-error {
  background:rgba(127,29,29,.25); border:1px solid rgba(127,29,29,.5);
  color:#fca5a5; border-radius:10px; padding:10px 13px;
  font-size:.72rem; display:flex; align-items:center; gap:8px;
}
.auth-error.hidden { display:none; }

.auth-theme-btn {
  position:absolute; top:16px; right:16px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:8px; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text2); font-size:.9rem;
  transition:background var(--tr),color var(--tr);
}
.auth-theme-btn:hover { background:var(--border); color:var(--text); }

/* ── GENDER ── */
.gender-group { display:flex; gap:6px; }
.gender-opt { flex:1; position:relative; }
.gender-opt input[type="radio"] { position:absolute; opacity:0; width:0; height:0; }
.gender-opt label {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 6px; background:var(--bg); border:1px solid var(--border);
  border-radius:10px; cursor:pointer;
  transition:border-color var(--tr),background var(--tr);
  font-size:.67rem; color:var(--text2);
}
.gender-opt label .g-icon { font-size:1.1rem; }
.gender-opt input:checked + label {
  border-color:var(--accent);
  background:rgba(217,119,87,.08); color:var(--text);
}

/* ── STEP INDICATOR ── */
.reg-steps {
  display:flex; align-items:center; justify-content:center;
  gap:0; margin-bottom:6px;
}
.reg-step {
  width:7px; height:7px; border-radius:50%;
  background:var(--border);
  transition:background var(--tr),transform var(--tr);
}
.reg-step.active { background:var(--accent); transform:scale(1.4); }
.reg-step-line { width:36px; height:1px; background:var(--border); margin:0 6px; }
.reg-step-label {
  text-align:center; font-size:.63rem; color:var(--text2);
  margin-bottom:18px; letter-spacing:.07em; text-transform:uppercase;
}

/* ── AVATAR UPLOAD ── */
.avatar-upload-wrap { display:flex; align-items:center; gap:14px; }
.avatar-preview {
  width:52px; height:52px; border-radius:50%;
  background:var(--bg); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; color:var(--text2); overflow:hidden; flex-shrink:0;
}
.avatar-preview img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.avatar-upload-btn {
  flex:1; padding:9px 12px; background:var(--bg);
  border:1px solid var(--border); border-radius:10px;
  color:var(--text2); font-family:var(--font-mono); font-size:.71rem;
  cursor:pointer; text-align:center;
  transition:background var(--tr),color var(--tr);
}
.avatar-upload-btn:hover { background:var(--border); color:var(--text); }
#avatar-file-input { display:none; }

/* ── APP ── */
#app-screen { display:flex; height:100dvh; overflow:hidden; }
#app-screen.hidden { display:none; }

/* ── SIDEBAR ── */
#sidebar {
  width:232px; min-width:232px;
  background:var(--bg2); border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  transition:width .22s cubic-bezier(.4,0,.2,1), min-width .22s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
#sidebar.collapsed { width:50px; min-width:50px; }
#sidebar.collapsed .hide-collapsed { display:none; }

.sidebar-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 12px 14px; border-bottom:1px solid var(--border);
  min-height:55px;
}

.logo {
  font-family:var(--font-display);
  font-size:1.05rem; font-weight:300; font-style:italic;
  color:var(--text); letter-spacing:-.03em;
  line-height:1;
}
.logo-tld { color:var(--text2); font-size:.85em; }

.icon-btn {
  background:none; border:none; color:var(--text2); cursor:pointer;
  font-size:1rem; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:6px; transition:background var(--tr),color var(--tr);
  flex-shrink:0;
}
.icon-btn:hover { background:var(--border); color:var(--text); }

.mode-switcher {
  margin:10px 10px 4px;
  display:flex; background:var(--bg);
  border:1px solid var(--border); border-radius:10px; padding:3px;
}
.msw-btn {
  flex:1; padding:9px 4px; background:none; border:none;
  border-radius:7px; color:var(--text2); font-family:var(--font-mono);
  font-size:.67rem; cursor:pointer;
  transition:background var(--tr),color var(--tr);
  min-height:36px; letter-spacing:.01em;
}
.msw-btn.active.human { background:rgba(122,158,142,.15); color:var(--human); }
.msw-btn.active.ai   { background:rgba(217,119,87,.15); color:var(--accent); }
.msw-btn#sw-video { color:#9b87cc; }
.msw-btn#sw-video:hover { background:rgba(155,135,204,.12); color:#b3a2d8; }
.msw-btn#sw-feed { color:#b89de0; }
.msw-btn#sw-feed:hover { background:rgba(184,157,224,.12); color:#c9b3e8; }

#new-btn {
  margin:6px 10px; padding:9px 12px;
  background:none; border:1px solid var(--border); border-radius:9px;
  color:var(--text2); font-family:var(--font-mono); font-size:.72rem;
  cursor:pointer; display:flex; align-items:center; gap:7px;
  transition:background var(--tr),color var(--tr),border-color var(--tr);
}
#new-btn:hover { background:var(--surface); color:var(--text); border-color:var(--text2); }

#conv-list {
  flex:1; overflow-y:auto; padding:4px 6px;
  display:flex; flex-direction:column; gap:1px;
}
.conv-item {
  width:100%; padding:8px 10px; background:none; border:none;
  border-radius:7px; color:var(--text2); font-family:var(--font-mono);
  font-size:.7rem; text-align:left; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  transition:background var(--tr),color var(--tr);
  white-space:nowrap; overflow:hidden;
}
.conv-item:hover { background:var(--surface); color:var(--text); }
.conv-item.active { background:var(--surface); color:var(--text); }
.conv-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.conv-label { overflow:hidden; text-overflow:ellipsis; flex:1; }
.conv-badge {
  font-size:.57rem; padding:1px 5px;
  border-radius:4px; flex-shrink:0; opacity:.75;
}
.conv-badge.human { background:rgba(122,158,142,.12); color:var(--human); }
.conv-close {
  opacity:0; background:none; border:none; color:var(--text2);
  cursor:pointer; font-size:.75rem; width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  border-radius:4px; flex-shrink:0; transition:opacity var(--tr);
}
.conv-item:hover .conv-close { opacity:.7; }
.conv-close:hover { opacity:1 !important; color:var(--text); }

/* ── SIDEBAR FOOTER ── */
.sidebar-footer {
  padding:10px 12px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.user-info { display:flex; align-items:center; gap:9px; overflow:hidden; }
.user-avatar {
  width:30px; height:30px; border-radius:50%;
  background:var(--accent); color:#1a1915;
  font-size:.7rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; overflow:hidden;
  border:1.5px solid var(--border);
  cursor:pointer; transition:border-color var(--tr);
}
.user-avatar:hover { border-color:var(--text2); }
.user-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.user-name {
  font-size:.7rem; color:var(--text2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sidebar-footer-btns { display:flex; gap:2px; flex-shrink:0; }
.collapsed-actions {
  display:none; flex-direction:column;
  align-items:center; gap:8px; padding:12px 0;
}
#sidebar.collapsed .collapsed-actions { display:flex; }

/* ── MAIN ── */
#main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; background:var(--bg); }

#chat-window { flex:1; overflow-y:auto; padding:28px 0; position:relative; }
#messages {
  max-width:700px; margin:0 auto;
  padding:0 20px; display:flex; flex-direction:column; gap:14px;
}

/* ── EMPTY STATE ── */
#empty-state {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:14px; padding:40px; pointer-events:none;
  animation:fadeIn .5s ease;
}
#empty-state.hidden { display:none; }
.es-icon { font-size:2.2rem; opacity:.2; }
.es-title {
  font-family:var(--font-display); font-size:1.35rem;
  font-weight:300; font-style:italic; color:var(--text2);
  text-align:center; opacity:.8;
}
.es-sub { font-size:.72rem; color:var(--text2); opacity:.45; text-align:center; }

/* ── WAITING ── */
#waiting-screen {
  position:absolute; inset:0; display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:40px; animation:fadeIn .3s ease;
}
#waiting-screen.active { display:flex; }
.wait-ring {
  width:68px; height:68px; border-radius:50%;
  border:1.5px solid var(--human);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:var(--human);
  animation:waitPulse 2.2s ease infinite;
}
.wait-title {
  font-family:var(--font-display); font-size:1.25rem;
  font-weight:300; font-style:italic; color:var(--text2);
}
.wait-sub { font-size:.7rem; color:var(--text2); opacity:.5; }
.wait-dots { display:flex; gap:5px; }
.wait-dots span {
  width:6px; height:6px; border-radius:50%;
  background:var(--human); opacity:.35;
  animation:bounce 1.3s infinite;
}
.wait-dots span:nth-child(2) { animation-delay:.2s; }
.wait-dots span:nth-child(3) { animation-delay:.4s; }
.wait-cancel {
  pointer-events:all; padding:7px 18px;
  background:none; border:1px solid var(--border);
  border-radius:8px; color:var(--text2);
  font-family:var(--font-mono); font-size:.7rem;
  cursor:pointer; transition:background var(--tr),color var(--tr);
}
.wait-cancel:hover { background:var(--surface); color:var(--text); }

/* ── BANNERS ── */
#conn-banner {
  display:none; align-items:center; justify-content:space-between;
  padding:8px 20px; background:rgba(122,158,142,.06);
  border-bottom:1px solid rgba(122,158,142,.15);
  font-size:.7rem; color:var(--human); flex-shrink:0;
}
#conn-banner.show { display:flex; }
.conn-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--human); flex-shrink:0;
  animation:blink 2.2s infinite;
}
#next-btn {
  padding:4px 12px; background:none;
  border:1px solid rgba(122,158,142,.3); border-radius:6px;
  color:var(--human); font-family:var(--font-mono); font-size:.66rem;
  cursor:pointer; transition:background var(--tr);
}
#next-btn:hover { background:rgba(122,158,142,.12); }

#disc-banner {
  display:none; align-items:center; justify-content:space-between;
  padding:8px 20px; background:rgba(127,29,29,.1);
  border-bottom:1px solid rgba(127,29,29,.22);
  font-size:.7rem; color:#fca5a5; flex-shrink:0;
}
#disc-banner.show { display:flex; }
#reconnect-btn {
  padding:4px 12px; background:none;
  border:1px solid rgba(252,165,165,.3); border-radius:6px;
  color:#fca5a5; font-family:var(--font-mono); font-size:.66rem;
  cursor:pointer; transition:background var(--tr);
}
#reconnect-btn:hover { background:rgba(252,165,165,.07); }

/* ── BUBBLES ── */
.bubble-row {
  display:flex; align-items:flex-end; gap:9px;
  animation:slideUp .22s ease;
}
.bubble-row.user { flex-direction:row-reverse; }

.bav {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; flex-shrink:0; overflow:hidden;
}
.bav img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

.bubble {
  max-width:66%; padding:11px 15px;
  border-radius:var(--radius);
  font-size:.8rem; line-height:1.7;
  word-break:break-word;
}
.bubble.ai-b {
  background:var(--surface); border:1px solid var(--border);
  border-bottom-left-radius:3px; box-shadow:0 2px 12px rgba(0,0,0,.2);
}
.bubble.human-b {
  background:var(--surface); border:1px solid rgba(122,158,142,.2);
  border-bottom-left-radius:3px; box-shadow:0 2px 12px rgba(0,0,0,.2);
}
.bubble.user-b { color:#1a1915; border-bottom-right-radius:3px; }

.bubble-time {
  display:block; font-size:.59rem; color:var(--text2);
  margin-top:5px; opacity:.5;
}
.user .bubble-time { text-align:right; }

.sys-msg {
  text-align:center; font-size:.66rem; color:var(--text2);
  opacity:.45; padding:2px 0; font-style:italic;
}

/* ── TYPING ── */
#typing-row {
  display:flex; align-items:flex-end; gap:9px;
  animation:slideUp .22s ease;
}
#typing-row.hidden { display:none; }

.typing-bubble {
  padding:12px 16px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius);
  border-bottom-left-radius:3px;
  box-shadow:0 2px 12px rgba(0,0,0,.2);
}
.thinking-label {
  font-size:.65rem; color:var(--text2);
  margin-bottom:5px; font-style:italic; opacity:.7;
}
.typing-dots { display:flex; gap:4px; align-items:center; }
.typing-dots span {
  width:5px; height:5px; border-radius:50%;
  background:var(--text2); animation:bounce 1.3s infinite;
}
.typing-dots span:nth-child(2) { animation-delay:.2s; }
.typing-dots span:nth-child(3) { animation-delay:.4s; }

#error-toast {
  background:rgba(45,21,21,.9); border:1px solid rgba(127,29,29,.6);
  color:#fca5a5; border-radius:10px; padding:10px 14px;
  font-size:.73rem; display:flex; align-items:center; gap:8px;
  max-width:700px; margin:0 auto; width:calc(100% - 40px);
}
#error-toast.hidden { display:none; }

/* ── INPUT BAR ── */
#input-bar {
  padding:12px 20px 22px;
  display:flex; align-items:flex-end; gap:8px;
  max-width:740px; width:100%; margin:0 auto;
}

.input-wrap {
  flex:1; display:flex; align-items:flex-end; gap:8px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:10px 12px;
  transition:border-color var(--tr),box-shadow var(--tr);
}
.input-wrap.focus-ai:focus-within {
  border-color:rgba(217,119,87,.5);
  box-shadow:0 0 0 3px rgba(217,119,87,.08);
}
.input-wrap.focus-human:focus-within {
  border-color:rgba(122,158,142,.5);
  box-shadow:0 0 0 3px rgba(122,158,142,.08);
}

.input-user-avatar {
  width:24px; height:24px; border-radius:50%; overflow:hidden;
  flex-shrink:0; border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:.62rem; font-weight:600; color:#1a1915;
  align-self:flex-end; margin-bottom:2px;
}
.input-user-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

#chat-input {
  flex:1; background:none; border:none; outline:none;
  color:var(--text); font-family:var(--font-mono); font-size:15px;
  line-height:1.6; resize:none; max-height:140px; overflow-y:auto;
}
#chat-input::placeholder { color:var(--text2); opacity:.45; }
#chat-input:disabled { opacity:.4; cursor:not-allowed; }

#send-btn {
  width:32px; height:32px; border-radius:9px; border:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:opacity var(--tr),transform var(--tr);
}
#send-btn.ai-send    { background:var(--accent); color:#1a1915; }
#send-btn.human-send { background:var(--human); color:#1a1915; }
#send-btn:disabled { opacity:.3; cursor:not-allowed; }
#send-btn:not(:disabled):hover { transform:scale(1.07); opacity:.9; }

/* ── MODE ── */
#mode-wrap { position:relative; flex-shrink:0; }
#mode-btn {
  display:flex; align-items:center; gap:6px; padding:0 11px; height:40px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  color:var(--text); font-family:var(--font-mono); font-size:.72rem;
  cursor:pointer; transition:background var(--tr);
}
#mode-btn:hover:not(:disabled) { background:var(--bg2); }
#mode-btn:disabled { opacity:.45; cursor:not-allowed; }

#mode-dropdown {
  position:absolute; bottom:calc(100% + 8px); left:0;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,.3);
  z-index:50; min-width:185px;
  animation:dropUp .14s ease;
}
#mode-dropdown.hidden { display:none; }
.mode-option {
  width:100%; padding:10px 13px; background:none; border:none;
  display:flex; align-items:center; gap:10px;
  cursor:pointer; font-family:var(--font-mono); color:var(--text);
  transition:background var(--tr);
}
.mode-option:hover { background:var(--surface); }
.mode-option.selected { background:var(--surface); }
.mo-icon { font-size:.95rem; width:18px; text-align:center; flex-shrink:0; }
.mo-label { font-size:.75rem; }
.mo-desc { font-size:.63rem; color:var(--text2); margin-top:1px; }

/* ── FIND BTN ── */
#find-btn {
  display:none; align-items:center; gap:6px; padding:0 14px; height:42px;
  background:rgba(122,158,142,.08); border:1px solid rgba(122,158,142,.28);
  border-radius:10px; color:var(--human); font-family:var(--font-mono);
  font-size:.73rem; cursor:pointer; transition:background var(--tr),border-color var(--tr);
  flex-shrink:0; touch-action:manipulation;
}
#find-btn.show { display:flex; }
#find-btn:hover { background:rgba(122,158,142,.16); border-color:rgba(122,158,142,.45); }

/* ── STREAMING CURSOR ── */
.streaming-cursor {
  display:inline-block; width:2px; height:.9em;
  background:var(--text2); margin-left:2px;
  vertical-align:text-bottom;
  animation:cursorBlink .75s steps(1) infinite;
}

/* ── MOBILE TOPBAR ── */
#mobile-topbar {
  display:none;
  align-items:center; justify-content:space-between;
  padding:0 14px; border-bottom:1px solid var(--border);
  background:var(--bg2); min-height:50px; flex-shrink:0;
}
.mtb-logo {
  font-family:var(--font-display);
  font-size:1.1rem; font-weight:300; font-style:italic;
  color:var(--text); letter-spacing:-.03em;
}
.mtb-right { display:flex; align-items:center; gap:6px; }

/* ── MOBILE ── */
@media (max-width:600px) {
  #app-screen { position:relative; }

  #sidebar {
    position:fixed; top:0; left:0; bottom:0; z-index:60;
    width:275px !important; min-width:275px !important;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s ease;
    box-shadow:none;
  }
  #sidebar.mobile-open {
    transform:translateX(0);
    box-shadow:8px 0 48px rgba(0,0,0,.6);
  }
  #sidebar .hide-collapsed { display:flex !important; }
  #sidebar.collapsed .hide-collapsed { display:flex !important; }
  #sidebar .collapsed-actions { display:none !important; }

  #sidebar-backdrop {
    display:block; position:fixed; inset:0;
    background:rgba(0,0,0,.6); z-index:55;
    opacity:0; pointer-events:none;
    transition:opacity .28s ease;
    backdrop-filter:blur(2px);
  }
  #sidebar-backdrop.visible { opacity:1; pointer-events:all; }

  #main { width:100%; }

  #mobile-topbar { display:flex; }

  #drawer-pull {
    display:flex; position:fixed; left:0; top:50%;
    transform:translateY(-50%); z-index:54;
    align-items:center; justify-content:center;
    width:13px; height:44px;
    background:var(--bg2); border:1px solid var(--border);
    border-left:none; border-radius:0 7px 7px 0;
    cursor:pointer; box-shadow:2px 0 10px rgba(0,0,0,.3);
    transition:left .28s cubic-bezier(.4,0,.2,1);
  }
  #drawer-pull.hidden-pull { left:-20px; pointer-events:none; }
  #drawer-pull::after {
    content:''; display:block; width:2px; height:18px;
    background:var(--text2); border-radius:1px; opacity:.45;
  }

  .bubble { max-width:82%; font-size:.78rem; }

  #input-bar { padding:8px 10px 16px; gap:6px; }
  .input-wrap { padding:9px 10px; border-radius:12px; }
  #chat-input { font-size:16px; }

  .auth-card { padding:30px 22px; border-radius:16px; }
  .auth-logo { font-size:1.75rem; }

  #messages { padding:0 12px; gap:10px; }
  #chat-window { padding:16px 0; }
}

@media (min-width:601px) {
  #mobile-topbar { display:none; }
  #sidebar-backdrop { display:none; }
  #drawer-pull { display:none; }
}

/* ── ANIMATIONS ── */
@keyframes slideUp {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes dropUp {
  from { opacity:0; transform:translateY(5px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes bounce {
  0%,60%,100% { transform:translateY(0); }
  30%          { transform:translateY(-4px); }
}
@keyframes cursorBlink {
  0%,100% { opacity:1; }
  50%     { opacity:0; }
}
@keyframes pulse {
  0%,100% { opacity:.35; }
  50%     { opacity:.75; }
}
@keyframes waitPulse {
  0%,100% { transform:scale(1); opacity:.65; }
  50%     { transform:scale(1.06); opacity:1; }
}
@keyframes blink {
  0%,100% { opacity:1; }
  50%     { opacity:.25; }
}

/* ── VIDEO PANEL ── */
#video-panel {
  position:fixed; inset:0; z-index:200;
  background:var(--bg); display:none; flex-direction:column;
}
#video-panel.active { display:flex; }

.vp-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 20px; border-bottom:1px solid var(--border);
  background:var(--bg2); flex-shrink:0;
}
.vp-title {
  font-family:var(--font-display); font-size:1rem;
  font-weight:300; font-style:italic;
  color:var(--text); display:flex; align-items:center; gap:8px;
  letter-spacing:-.02em;
}
.vp-back {
  background:none; border:1px solid var(--border); border-radius:8px;
  color:var(--text2); font-family:var(--font-mono); font-size:.7rem;
  padding:6px 12px; cursor:pointer;
  transition:background var(--tr),color var(--tr);
}
.vp-back:hover { background:var(--surface); color:var(--text); }

.vp-stage {
  flex:1; display:grid; grid-template-columns:1fr 1fr;
  gap:2px; overflow:hidden; position:relative;
}
@media(max-width:600px) {
  .vp-stage { grid-template-columns:1fr; }
}
.vp-wrap {
  position:relative; overflow:hidden;
  background:var(--bg2);
  display:flex; align-items:center; justify-content:center;
}
.vp-wrap video { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
.vp-wrap.offline video { display:none; }
.vp-waiting {
  position:absolute; font-size:.73rem;
  color:var(--text2); font-style:italic;
  display:none; font-family:var(--font-display);
}
.vp-wrap.offline .vp-waiting { display:block; }

@media(max-width:600px) {
  #vp-remote-wrap { position:absolute; inset:0; }
  #vp-local-wrap {
    position:absolute; top:10px; right:10px;
    width:110px; height:148px;
    border-radius:10px; overflow:hidden;
    border:1px solid var(--border); z-index:10;
    box-shadow:0 4px 16px rgba(0,0,0,.4);
  }
}

.vp-controls {
  padding:12px 20px 18px;
  display:flex; flex-direction:column; gap:8px; align-items:center;
  background:var(--bg2); border-top:1px solid var(--border); flex-shrink:0;
}
.vp-ctrl-row { display:flex; gap:7px; align-items:center; }

.vp-btn {
  padding:8px 18px; border-radius:9px; border:none;
  font-family:var(--font-mono); font-size:.72rem;
  cursor:pointer; transition:all var(--tr);
}
.vp-btn-start { background:var(--human); color:#1a1915; }
.vp-btn-start:hover { opacity:.88; }
.vp-btn-next {
  background:var(--surface); border:1px solid var(--border);
  color:var(--text);
}
.vp-btn-next:hover { background:var(--border); }
.vp-btn-next:disabled { opacity:.35; cursor:not-allowed; }
.vp-btn-stop { background:rgba(127,29,29,.8); color:#fca5a5; border:1px solid rgba(153,27,27,.6); }
.vp-btn-stop:hover { background:rgba(153,27,27,.9); }
.vp-btn-stop:disabled { opacity:.35; cursor:not-allowed; }

.vp-icon-btn {
  width:34px; height:34px; border-radius:8px;
  border:1px solid var(--border); background:var(--surface);
  color:var(--text2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; transition:background var(--tr),color var(--tr);
}
.vp-icon-btn:hover { background:var(--border); color:var(--text); }
.vp-icon-btn.active {
  background:rgba(217,119,87,.15);
  border-color:rgba(217,119,87,.5); color:var(--accent);
}
.vp-icon-btn:disabled { opacity:.3; cursor:not-allowed; }

.vp-status {
  font-size:.66rem; color:var(--text2);
  font-style:italic; font-family:var(--font-display);
}

.vp-chat-wrap { display:none; flex-direction:column; width:100%; max-width:480px; }
.vp-chat-wrap.show { display:flex; }
.vp-chat-msgs {
  max-height:80px; overflow-y:auto;
  display:flex; flex-direction:column; gap:4px; padding:4px 0;
}
.vp-msg {
  font-size:.7rem; padding:5px 10px;
  border-radius:8px; max-width:80%;
}
.vp-msg.me { background:var(--accent); color:#1a1915; align-self:flex-end; }
.vp-msg.them { background:var(--surface); border:1px solid var(--border); color:var(--text); }

.vp-chat-input-row { display:flex; gap:6px; margin-top:4px; }
.vp-chat-input {
  flex:1; background:var(--bg); border:1px solid var(--border);
  border-radius:8px; padding:7px 11px;
  color:var(--text); font-family:var(--font-mono); font-size:.72rem; outline:none;
  transition:border-color var(--tr);
}
.vp-chat-input:focus { border-color:rgba(217,119,87,.4); }
.vp-chat-send {
  padding:7px 13px; background:var(--accent); border:none;
  border-radius:8px; color:#1a1915;
  font-family:var(--font-mono); font-size:.7rem; cursor:pointer;
  transition:opacity var(--tr);
}
.vp-chat-send:hover { opacity:.88; }
.vp-chat-send:disabled { opacity:.35; cursor:not-allowed; }

/* ── PROFILE PANEL ── */
:root { --font-ui: 'Outfit', sans-serif; }

#profile-panel {
  position:fixed; inset:0; z-index:300;
  background:var(--bg); display:none; flex-direction:column;
  overflow-y:auto; font-family:var(--font-ui);
}
#profile-panel.active { display:flex; }

.pp-header {
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  border-bottom:1px solid var(--border);
  background:rgba(21,20,18,.88);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  flex-shrink:0;
}
.pp-back {
  background:none; border:1px solid var(--border); border-radius:8px;
  color:var(--text2); font-family:var(--font-ui); font-size:.78rem;
  font-weight:400; letter-spacing:.01em;
  padding:7px 14px; cursor:pointer;
  transition:background var(--tr), color var(--tr), border-color var(--tr);
}
.pp-back:hover { background:var(--surface); color:var(--text); border-color:var(--text2); }
.pp-header-title {
  font-family:var(--font-ui); font-size:.9rem;
  font-weight:500; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text2);
}

#pp-hero {
  padding:40px 48px 28px;
  width:100%; max-width:1100px; margin:0 auto;
}
.pp-hero-inner {
  display:flex; flex-direction:row; gap:48px; align-items:center;
  max-width:860px; margin:0 auto;
}

.pp-hero-avatar-wrap { position:relative; flex-shrink:0; }
.pp-hero-avatar {
  width:180px; height:180px; border-radius:50%;
  background:var(--surface); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:4rem; font-weight:600; overflow:hidden; color:var(--text);
}
.pp-hero-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.pp-av-change-btn {
  position:absolute; bottom:2px; right:2px;
  width:24px; height:24px; border-radius:50%;
  background:var(--surface); border:2px solid var(--bg);
  color:var(--text); font-size:.65rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--tr);
}
.pp-av-change-btn:hover { background:var(--border); }

.pp-hero-meta { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.pp-hero-name {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:1.45rem; font-weight:600;
  color:var(--text); letter-spacing:-.01em;
  margin-bottom:12px; line-height:1.2;
}
.pp-hero-stats { display:flex; gap:32px; margin-bottom:12px; flex-wrap:wrap; }
.pp-hstat {
  background:none; border:none; cursor:pointer;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:.85rem; font-weight:400;
  padding:0; transition:opacity var(--tr);
}
.pp-hstat:hover { opacity:.65; }
.pp-hstat strong { font-weight:600; }

.pp-hero-bio {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:.82rem; color:var(--text); line-height:1.55;
  white-space:pre-wrap; margin-bottom:14px; max-width:380px;
}
.pp-hero-actions { display:flex; gap:8px; flex-wrap:wrap; }

.pp-hero-btn {
  padding:7px 18px; border-radius:8px; border:none;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:.82rem; font-weight:500; cursor:pointer;
  transition:opacity var(--tr), background var(--tr);
}
.pp-follow-btn-main { background:#0095f6; color:#fff; }
.pp-follow-btn-main:hover { background:#1aa3ff; }
.pp-unfollow-btn { background:var(--surface); border:1px solid var(--border); color:var(--text); }
.pp-unfollow-btn:hover { background:var(--border); }
.pp-edit-btn { background:var(--surface); border:1px solid var(--border); color:var(--text); }
.pp-edit-btn:hover { background:var(--border); }
.pp-new-post-btn { background:var(--surface); border:1px solid var(--border); color:var(--text); }
.pp-new-post-btn:hover { background:var(--border); }

#pp-tabs {
  display:flex; border-bottom:1px solid var(--border);
  width:100%; max-width:1100px; margin:0 auto; padding:0 48px;
}
#pp-tabs.hidden { display:none; }
.pp-tab {
  flex:1; padding:14px; background:none; border:none;
  border-top:1.5px solid transparent;
  color:var(--text2); font-family:var(--font-ui);
  font-size:.7rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; transition:color var(--tr), border-color var(--tr);
}
.pp-tab:hover { color:var(--text); }
.pp-tab.active { color:var(--text); border-top-color:var(--accent); }

#pp-grid-section {
  width:100%; max-width:1100px;
  margin:0 auto; padding:2px 0 60px;
}
#pp-grid-section.hidden { display:none; }
#pp-posts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }

.pp-grid-cell {
  aspect-ratio:1; overflow:hidden; position:relative;
  background:var(--surface); cursor:pointer;
}
.pp-grid-cell img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease, opacity .2s;
}
.pp-grid-cell:hover img { transform:scale(1.05); opacity:.8; }
.pp-grid-text-cell {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:16px; font-size:.75rem; color:var(--text2);
  line-height:1.6; text-align:center; overflow:hidden;
  font-family:var(--font-ui); font-weight:400;
}
.pp-grid-overlay {
  position:absolute; inset:0;
  background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; gap:16px;
  opacity:0; transition:opacity .2s;
  color:#fff; font-family:var(--font-ui); font-size:.85rem; font-weight:500;
}
.pp-grid-cell:hover .pp-grid-overlay { opacity:1; }

.pp-grid-loading {
  grid-column:1/-1;
  display:flex; align-items:center; justify-content:center; padding:80px;
}
.pp-grid-empty {
  grid-column:1/-1;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:80px 20px; gap:16px;
  color:var(--text2); font-family:var(--font-ui);
  font-size:.85rem; font-weight:400; opacity:.6;
}
.pp-grid-empty-icon { font-size:2.5rem; opacity:.25; }

.pp-load-more {
  grid-column:1/-1; padding:14px;
  background:none; border:none; border-top:1px solid var(--border);
  color:var(--text2); font-family:var(--font-ui);
  font-size:.75rem; font-weight:400; cursor:pointer;
  transition:background var(--tr), color var(--tr);
}
.pp-load-more:hover { background:var(--surface); color:var(--text); }

#pp-list-section {
  max-width:860px; width:100%; margin:0 auto; padding:0 0 60px;
}
#pp-list-section.hidden { display:none; }
#pp-tab-content { display:flex; flex-direction:column; }

.pp-tab-loading { display:flex; align-items:center; justify-content:center; padding:60px; }
.pp-list-empty {
  text-align:center; padding:60px 20px;
  font-size:.82rem; color:var(--text2);
  font-family:var(--font-ui); font-weight:400; opacity:.5;
}
.pp-user-row {
  display:flex; align-items:center; gap:16px;
  padding:14px 40px; cursor:pointer;
  border-bottom:1px solid var(--border);
  transition:background var(--tr);
}
.pp-user-row:hover { background:var(--surface); }
.pp-user-av {
  width:44px; height:44px; border-radius:50%;
  background:var(--accent); color:#1a1915;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; font-weight:500; flex-shrink:0;
  overflow:hidden; border:1.5px solid var(--border);
  font-family:var(--font-ui);
}
.pp-user-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.pp-user-name { font-size:.85rem; color:var(--text); font-family:var(--font-ui); font-weight:400; }
.pp-user-bio {
  font-size:.72rem; color:var(--text2); margin-top:2px;
  font-family:var(--font-ui); font-weight:400; opacity:.65;
}
.pp-user-arrow {
  margin-left:auto; color:var(--text2); font-size:.75rem;
  opacity:.35; flex-shrink:0;
}
.pp-user-row:hover .pp-user-arrow { opacity:.75; }

.pp-modal-backdrop {
  position:fixed; inset:0; z-index:400;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:24px; animation:fadeIn .15s ease;
}
.pp-modal-inner {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:16px; overflow:hidden;
  display:flex; max-width:900px; width:100%; max-height:88vh;
  box-shadow:0 32px 80px rgba(0,0,0,.6);
}
.pp-modal-img {
  flex:1; min-width:0; background:#0d0d0b;
  display:flex; align-items:center; justify-content:center;
}
.pp-modal-img img { width:100%; height:100%; object-fit:contain; display:block; }
.pp-modal-side {
  width:300px; flex-shrink:0;
  display:flex; flex-direction:column;
  border-left:1px solid var(--border);
}
.pp-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--border);
}
.pp-modal-author { font-family:var(--font-ui); font-size:.88rem; font-weight:500; color:var(--text); }
.pp-modal-close {
  background:none; border:none; color:var(--text2);
  cursor:pointer; font-size:.85rem; padding:4px 8px;
  border-radius:6px; transition:background var(--tr);
}
.pp-modal-close:hover { background:var(--border); color:var(--text); }
.pp-modal-content {
  flex:1; padding:18px; font-size:.82rem; font-family:var(--font-ui);
  color:var(--text); line-height:1.75; overflow-y:auto;
  white-space:pre-wrap; font-weight:400;
}
.pp-modal-footer {
  padding:14px 18px; border-top:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.pp-modal-time {
  font-size:.65rem; color:var(--text2); opacity:.4;
  margin-left:auto; font-family:var(--font-ui);
}
.pp-modal-delete {
  background:none; border:none; color:var(--text2);
  cursor:pointer; font-size:.7rem; opacity:.35;
  transition:opacity var(--tr), color var(--tr);
  font-family:var(--font-ui); font-weight:400;
}
.pp-modal-delete:hover { opacity:1; color:#fca5a5; }

.pp-composer-box {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:16px; padding:24px; width:100%; max-width:500px;
  box-shadow:0 24px 64px rgba(0,0,0,.5);
}
.pp-composer-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px;
  font-family:var(--font-ui); font-size:1rem; font-weight:500; color:var(--text);
}
.pp-composer-text {
  width:100%; background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:12px 14px; color:var(--text);
  font-family:var(--font-ui); font-size:.85rem; font-weight:400;
  resize:none; outline:none; line-height:1.7;
  margin-bottom:12px; transition:border-color var(--tr);
}
.pp-composer-text:focus { border-color:rgba(217,119,87,.4); }
.pp-composer-preview { position:relative; margin-bottom:12px; border-radius:10px; overflow:hidden; }
.pp-composer-preview.hidden { display:none; }
.pp-composer-preview img { width:100%; max-height:220px; object-fit:cover; border-radius:10px; display:block; }
.pp-composer-remove-img {
  position:absolute; top:8px; right:8px;
  background:rgba(0,0,0,.65); border:none; border-radius:50%;
  color:#fff; width:26px; height:26px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.72rem;
}
.pp-composer-bar {
  display:flex; align-items:center; gap:8px;
  padding-top:12px; border-top:1px solid var(--border);
}
.pp-composer-img-btn {
  font-size:.75rem; color:var(--text2); cursor:pointer;
  padding:7px 12px; border:1px solid var(--border);
  border-radius:7px; font-family:var(--font-ui); font-weight:400;
  transition:background var(--tr), color var(--tr);
}
.pp-composer-img-btn:hover { background:var(--border); color:var(--text); }
.pp-composer-chars { font-size:.68rem; color:var(--text2); opacity:.45; margin-left:auto; font-family:var(--font-ui); }
.pp-field-label {
  display:block; font-size:.68rem; color:var(--text2);
  letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:8px; font-family:var(--font-ui); font-weight:500;
}

.pp-like-btn {
  display:flex; align-items:center; gap:6px;
  background:none; border:none; cursor:pointer;
  color:var(--text2); font-family:var(--font-ui);
  font-size:.82rem; font-weight:400;
  padding:4px 0; transition:color var(--tr);
}
.pp-like-btn:hover { color:var(--text); }
.pp-like-btn.liked { color:#e07070; }
.pp-like-icon { font-size:1rem; transition:transform .15s; }
.pp-like-btn:active .pp-like-icon { transform:scale(1.4); }

.pp-loading-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--text2); opacity:.3;
  animation:ppPulse 1.1s ease infinite;
}
.pp-error {
  padding:60px 20px; text-align:center;
  font-size:.82rem; color:var(--text2); opacity:.55;
  font-family:var(--font-ui); font-weight:400;
}

.pp-skeleton-hero { display:flex; gap:52px; align-items:center; }
.pp-skel { background:var(--surface); border-radius:8px; animation:ppSkel 1.5s ease infinite; }
.pp-skel-avatar { width:128px; height:128px; border-radius:50%; flex-shrink:0; }
.pp-skel-meta { display:flex; flex-direction:column; gap:14px; flex:1; }
.pp-skel-name { height:22px; width:160px; border-radius:6px; }
.pp-skel-stats { height:14px; width:240px; border-radius:4px; }
.pp-skel-btn { height:34px; width:110px; border-radius:8px; }

@keyframes ppPulse {
  0%,100% { opacity:.15; transform:scale(1); }
  50%      { opacity:.6; transform:scale(1.3); }
}
@keyframes ppSkel {
  0%,100% { opacity:.35; }
  50%      { opacity:.6; }
}

@media (max-width:600px) {
  #pp-hero { padding:24px 20px 20px; }
  .pp-hero-avatar { width:80px; height:80px; font-size:1.8rem; }
  .pp-hero-name { font-size:1.15rem; margin-bottom:12px; }
  .pp-hero-stats { gap:18px; }
  .pp-hstat { font-size:.75rem; }
  #pp-posts-grid { gap:1.5px; }
  .pp-modal-inner { flex-direction:column; max-height:94vh; }
  .pp-modal-img { max-height:52vw; }
  .pp-modal-side { width:100%; border-left:none; border-top:1px solid var(--border); }
  .pp-user-row { padding:12px 20px; }
  #pp-tabs { margin-top:12px; }
  .pp-skeleton-hero { gap:20px; }
  .pp-skel-avatar { width:80px; height:80px; }
}

/* ── Stories ── */
#pp-story-wrap { position:relative; display:inline-block; }

.pp-story-ring {
  width:124px; height:124px; border-radius:50%;
  padding:3px; cursor:default;
  background:var(--surface); transition:opacity .2s;
}
.pp-story-ring.active {
  background:conic-gradient(var(--accent) 0%, #e87a7a 50%, var(--accent) 100%);
  cursor:pointer;
}
.pp-story-ring.viewed {
  background:conic-gradient(var(--border) 0%, var(--text2) 100%);
  cursor:pointer;
}
.pp-story-ring.add-story {
  background:var(--surface); border:2px dashed var(--border); cursor:pointer;
  transition:border-color var(--tr), background var(--tr);
}
.pp-story-ring.add-story:hover { border-color:var(--accent); background:rgba(217,119,87,.06); }
.pp-story-ring.empty-story { background:var(--surface); border:2px solid var(--border); }

.pp-story-av {
  width:100%; height:100%; border-radius:50%;
  overflow:hidden; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--bg2);
}
.pp-story-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.pp-story-av span { font-size:2.4rem; font-weight:600; color:var(--accent); }

.pp-story-add-icon {
  position:absolute; bottom:4px; right:4px;
  width:26px; height:26px; border-radius:50%;
  background:var(--accent); color:#1a1915;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:700; line-height:1;
  border:2px solid var(--bg); pointer-events:none;
}

.pp-story-viewer-backdrop {
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.92);
  display:flex; align-items:center; justify-content:center;
  animation:fadeIn .15s ease;
}
.pp-story-viewer-inner {
  position:relative; width:100%; max-width:400px;
  height:100%; max-height:720px;
  display:flex; flex-direction:column;
  background:#000; border-radius:16px; overflow:hidden;
}
.pp-story-progress {
  position:absolute; top:10px; left:12px; right:12px;
  height:3px; background:rgba(255,255,255,.25); border-radius:2px; z-index:2;
}
.pp-story-progress-bar { height:100%; width:0; background:#fff; border-radius:2px; }
.pp-story-viewer-header {
  position:absolute; top:20px; left:12px; right:12px;
  display:flex; align-items:center; justify-content:space-between; z-index:2;
}
.pp-story-viewer-meta { display:flex; align-items:center; gap:10px; }
.pp-story-viewer-av {
  width:36px; height:36px; border-radius:50%;
  overflow:hidden; border:2px solid rgba(255,255,255,.5); flex-shrink:0;
}
.pp-story-viewer-av img { width:100%; height:100%; object-fit:cover; }
.pp-story-viewer-name { font-size:.8rem; color:#fff; font-family:var(--font-display); font-style:italic; }
.pp-story-viewer-time { font-size:.65rem; color:rgba(255,255,255,.6); }
.pp-story-close {
  background:rgba(0,0,0,.4); border:none; color:#fff;
  width:30px; height:30px; border-radius:50%;
  cursor:pointer; font-size:.85rem;
  display:flex; align-items:center; justify-content:center;
}
.pp-story-img { width:100%; height:100%; object-fit:cover; display:block; }
.pp-story-footer {
  position:absolute; bottom:0; left:0; right:0;
  padding:16px; display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(transparent, rgba(0,0,0,.6));
}
.pp-story-views { font-size:.72rem; color:rgba(255,255,255,.7); }
.pp-story-delete-btn {
  background:none; border:1px solid rgba(255,255,255,.3);
  border-radius:6px; color:rgba(255,255,255,.7);
  font-family:var(--font-mono); font-size:.65rem;
  padding:5px 10px; cursor:pointer; transition:background .15s;
}
.pp-story-delete-btn:hover { background:rgba(255,80,80,.3); color:#fff; }

.user-avatar.has-story {
  background:conic-gradient(var(--accent) 0%, #e8a887 100%) !important;
  padding:2px;
}

@media (max-width:600px) {
  .pp-story-ring { width:86px; height:86px; }
  .pp-story-viewer-inner { max-width:100%; border-radius:0; max-height:100%; }
}

/* ── Edit profile fields ── */
.pp-edit-input {
  width:100%; background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:10px 14px; color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:.85rem; outline:none; margin-bottom:4px;
  transition:border-color var(--tr);
}
.pp-edit-input:focus { border-color:rgba(217,119,87,.5); }

.pp-gender-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.pp-gender-opt {
  display:flex; align-items:center; gap:6px;
  padding:7px 14px; border:1px solid var(--border);
  border-radius:8px; cursor:pointer;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:.78rem; color:var(--text2);
  transition:background var(--tr), border-color var(--tr), color var(--tr);
}
.pp-gender-opt:has(input:checked) {
  border-color:var(--accent); background:rgba(217,119,87,.1); color:var(--text);
}
.pp-gender-opt input { display:none; }

.pp-edit-box { max-width:420px; }
.pp-edit-av-row {
  display:flex; align-items:center; gap:16px;
  margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--border);
}
.pp-edit-av-wrap { position:relative; flex-shrink:0; }
.pp-edit-av {
  width:72px; height:72px; border-radius:50%;
  background:var(--surface); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:4rem; font-weight:600; overflow:hidden; color:var(--text);
}
.pp-edit-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.pp-edit-av-btn {
  position:absolute; inset:0; border-radius:50%;
  background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  opacity:0; cursor:pointer; transition:opacity .18s; color:#fff;
}
.pp-edit-av-wrap:hover .pp-edit-av-btn { opacity:1; }
.pp-edit-av-hint {
  font-size:.72rem; color:var(--text2); opacity:.6;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; cursor:pointer;
}

#pp-grid-section, #pp-list-section { animation:ppSlideIn .22s ease; }
@keyframes ppSlideIn {
  from { opacity:0; transform:translateX(18px); }
  to   { opacity:1; transform:translateX(0); }
}

@media (min-width:900px) {
  #pp-posts-grid { grid-template-columns:repeat(4,1fr); }
  .pp-hero-avatar { width:200px; height:200px; font-size:5rem; }
  #pp-hero { padding:48px 0 32px; }
  #pp-tabs { padding:0; max-width:700px; margin:0 auto; width:700px; }
  #pp-grid-section { padding:2px 0 80px; max-width:900px; margin:0 auto; }
}

.pp-username-wrap {
  display:flex; align-items:center;
  background:var(--bg); border:1px solid var(--border);
  border-radius:10px; overflow:hidden; transition:border-color var(--tr);
}
.pp-username-wrap:focus-within { border-color:rgba(217,119,87,.5); }
.pp-username-prefix {
  padding:10px 0 10px 14px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:.78rem; color:var(--text2); white-space:nowrap; flex-shrink:0;
}
.pp-username-input { border:none !important; border-radius:0 !important; padding-left:4px !important; background:transparent !important; flex:1; }
.pp-username-hint { font-size:.62rem; color:var(--text2); opacity:.5; margin-top:3px; margin-bottom:4px; font-family:var(--font-mono); }

.pp-hero-username-link { margin-top:-6px; margin-bottom:14px; }
.pp-public-link {
  font-family:var(--font-mono); font-size:.63rem;
  color:var(--text2); text-decoration:none; opacity:.5;
  transition:opacity var(--tr), color var(--tr);
  display:inline-flex; align-items:center; gap:5px; padding:3px 0;
}
.pp-public-link:hover { opacity:1; color:var(--accent); }

/* ── NEW LAYOUT — top nav + bottom nav + views ── */
#top-nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:52px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px;
  background:rgba(21,20,18,.92);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  flex-shrink:0;
}
.light #top-nav { background:rgba(244,242,238,.92); }

.tn-logo {
  font-family:var(--font-display);
  font-size:1.15rem; font-weight:300; font-style:italic;
  color:var(--text); letter-spacing:-.03em; line-height:1;
}
.tn-logo span { color:var(--text2); font-size:.85em; }
.tn-actions { display:flex; align-items:center; gap:8px; }

.tn-btn {
  width:34px; height:34px; border-radius:9px;
  background:none; border:1px solid var(--border);
  color:var(--text2); font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--tr), color var(--tr);
}
.tn-btn:hover { background:var(--surface); color:var(--text); }

.tn-avatar {
  width:32px; height:32px; border-radius:50%;
  background:var(--accent); color:#1a1915;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; cursor:pointer;
  overflow:hidden; border:1.5px solid var(--border);
  transition:border-color var(--tr);
}
.tn-avatar:hover { border-color:var(--text2); }

#bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  height:60px; display:flex; align-items:stretch;
  background:rgba(21,20,18,.95);
  border-top:1px solid var(--border);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.light #bottom-nav { background:rgba(244,242,238,.96); }

.bnav-btn {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  background:none; border:none; color:var(--text2);
  font-family:var(--font-mono); font-size:.58rem;
  letter-spacing:.04em; cursor:pointer; transition:color var(--tr);
}
.bnav-btn svg { transition:transform .15s; }
.bnav-btn:hover { color:var(--text); }
.bnav-btn:hover svg { transform:translateY(-1px); }
.bnav-btn.active { color:var(--accent); }
.bnav-btn.active svg { stroke:var(--accent); }

#main-area {
  position:fixed;
  top:52px; bottom:60px; left:0; right:0;
  overflow:hidden;
}

.view {
  position:absolute; inset:0;
  display:none; flex-direction:column; overflow:hidden;
}
.view.active { display:flex; }

#chat-view { display:none; flex-direction:row; overflow:hidden; }
#chat-view.active { display:flex; }
#chat-view #main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
#chat-view #chat-window { flex:1; overflow-y:auto; padding:20px 0; }

#video-panel {
  position:absolute !important; inset:0 !important; z-index:auto !important;
}
#video-panel.active { display:flex !important; }
#video-panel .vp-header { display:none; }
#vp-back { display:none !important; }

@media (max-width:600px) {
  #feed-list { max-width:100%; }
}

/* ── MOBILE BOTTOM NAV ── */
#mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: rgba(21,20,18,.96);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 400;
  align-items: stretch;
}
.light #mobile-bottom-nav { background: rgba(244,242,238,.96); }

.mbn-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--text2);
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color var(--tr);
}
.mbn-btn svg { transition: transform .15s; }
.mbn-btn:hover { color: var(--text); }
.mbn-btn:hover svg { transform: translateY(-1px); }
.mbn-btn.active { color: var(--accent); }

@media (max-width: 600px) {
  #mobile-bottom-nav { display: flex; }
  #main { padding-bottom: 60px; }
  #feed-panel { padding-bottom: 60px; }
}

/* ── MOBILE BOTTOM NAV ── */
#mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: rgba(21,20,18,.96);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 400;
  align-items: stretch;
}
.light #mobile-bottom-nav { background: rgba(244,242,238,.96); }

.mbn-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--text2);
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color var(--tr);
}
.mbn-btn svg { transition: transform .15s; }
.mbn-btn:hover { color: var(--text); }
.mbn-btn:hover svg { transform: translateY(-1px); }
.mbn-btn.active { color: var(--accent); }

@media (max-width: 600px) {
  #mobile-bottom-nav { display: flex; }
  #main { padding-bottom: 60px; }
  #feed-panel { padding-bottom: 60px; }
}