/* ════════════════════════════════════════════════════════════════════════════
   Twitter/X Clone – Main Stylesheet
   Design System: CSS variables, dark/light theme, mobile-first responsive
   ════════════════════════════════════════════════════════════════════════════ */

/* ── CSS Reset & Box Sizing ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.4; overflow-x: hidden; }
a    { text-decoration: none; color: inherit; }
button, input, textarea, select { font: inherit; border: none; background: none; outline: none; }
img  { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* ── Design Tokens ──────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --color-primary:        #1d9bf0;
  --color-primary-dark:   #1a8cd8;
  --color-primary-light:  #e8f5fd;
  --color-danger:         #f4212e;
  --color-success:        #00ba7c;
  --color-warning:        #ffad1f;

  /* Typography */
  --font-xs:   0.75rem;
  --font-sm:   0.8125rem;
  --font-md:   0.9375rem;
  --font-lg:   1.0625rem;
  --font-xl:   1.25rem;
  --font-2xl:  1.5rem;
  --font-3xl:  2rem;

  /* Spacing */
  --gap-1:  4px;   --gap-2:  8px;   --gap-3:  12px;  --gap-4:  16px;
  --gap-5:  20px;  --gap-6:  24px;  --gap-8:  32px;  --gap-10: 40px;

  /* Radius */
  --r-sm:   4px;  --r-md:   8px;  --r-lg:  12px;
  --r-xl:  16px;  --r-full: 9999px;

  /* Layout */
  --sidebar-left-width:  275px;
  --sidebar-right-width: 348px;
  --feed-max-width:      600px;

  /* Transitions */
  --transition-fast:   0.12s ease;
  --transition-normal: 0.2s ease;
  --transition-slow:   0.35s ease;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.12);
  --shadow-md:   0 4px 6px rgba(0,0,0,.15);
  --shadow-lg:   0 10px 25px rgba(0,0,0,.2);
  --shadow-popup: 0 0 0 1px rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.4);
}

/* ── Dark Theme (default) ───────────────────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;
  --bg-primary:    #000000;
  --bg-secondary:  #16181c;
  --bg-elevated:   #1e2128;
  --bg-overlay:    rgba(91,112,131,.4);
  --bg-hover:      rgba(231,233,234,.1);
  --bg-active:     rgba(231,233,234,.15);
  --bg-badge:      #1d9bf0;

  --text-primary:    #e7e9ea;
  --text-secondary:  #71767b;
  --text-tertiary:   #536471;
  --text-link:       #1d9bf0;
  --text-danger:     #f4212e;
  --text-on-primary: #ffffff;

  --border-color:     rgba(47,51,54,.98);
  --border-focus:     #1d9bf0;

  --input-bg: #202327;

  /* Component-specific */
  --tweet-hover:    rgba(255,255,255,.03);
  --modal-bg:       #16181c;
  --dropdown-bg:    #16181c;
  --tooltip-bg:     rgba(195,213,224,.95);
  --tooltip-text:   #000;
}

/* ── Light Theme ────────────────────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;
  --bg-primary:    #ffffff;
  --bg-secondary:  #f7f9f9;
  --bg-elevated:   #ffffff;
  --bg-overlay:    rgba(0,0,0,.4);
  --bg-hover:      rgba(0,0,0,.03);
  --bg-active:     rgba(0,0,0,.06);
  --bg-badge:      #1d9bf0;

  --text-primary:    #0f1419;
  --text-secondary:  #536471;
  --text-tertiary:   #8899a6;
  --text-link:       #1d9bf0;
  --text-danger:     #f4212e;
  --text-on-primary: #ffffff;

  --border-color:    #eff3f4;
  --border-focus:    #1d9bf0;

  --input-bg: #eff3f4;

  --tweet-hover:    rgba(0,0,0,.03);
  --modal-bg:       #ffffff;
  --dropdown-bg:    #ffffff;
  --tooltip-bg:     rgba(15,20,25,.95);
  --tooltip-text:   #fff;
}

/* ── Dim Theme ──────────────────────────────────────────────────────────── */
[data-theme="dim"] {
  color-scheme: dark;
  --bg-primary:    #15202b;
  --bg-secondary:  #192734;
  --bg-elevated:   #1e2e3d;
  --bg-overlay:    rgba(91,112,131,.4);
  --bg-hover:      rgba(247,249,249,.1);
  --bg-active:     rgba(247,249,249,.15);
  --bg-badge:      #1d9bf0;

  --text-primary:    #f7f9f9;
  --text-secondary:  #8899a6;
  --text-tertiary:   #666f7b;
  --text-link:       #1d9bf0;
  --text-danger:     #f4212e;
  --text-on-primary: #ffffff;

  --border-color:    rgba(56,68,77,.98);
  --border-focus:    #1d9bf0;
  --input-bg:        #253341;

  --tweet-hover:    rgba(247,249,249,.03);
  --modal-bg:       #192734;
  --dropdown-bg:    #192734;
  --tooltip-bg:     rgba(195,213,224,.95);
  --tooltip-text:   #000;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
}

.hidden { display: none !important; }

/* ── Scrollbar (WebKit) ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-tertiary); border-radius: var(--r-full); }

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════════════════════ */

#auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  background: var(--bg-primary);
}

/* ── Auth Screen ─────────────────────────────────────────────────────────── */
.auth-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
}
.auth-brand {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  min-height: 100vh;
}
.auth-brand-logo {
  width: min(380px, 50vw);
  height: min(380px, 50vw);
}
.auth-brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.auth-content {
  flex: 0 0 min(600px, 50vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 8vw, 100px) clamp(32px, 6vw, 80px);
}
.auth-heading { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; line-height: 1.05; margin-bottom: var(--gap-6); }
.auth-subheading { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; margin-bottom: var(--gap-8); }

#auth-buttons { display: flex; flex-direction: column; gap: var(--gap-3); max-width: 380px; }
#auth-buttons .btn { font-size: var(--font-base); padding: 14px 20px; border-radius: var(--r-full); }

.auth-signin-section { margin-top: var(--gap-8); max-width: 380px; }
.auth-signin-section p { color: var(--text-secondary); font-size: var(--font-sm); font-weight: 700; margin-bottom: var(--gap-3); }
.auth-signin-section .btn { font-size: var(--font-base); padding: 14px 20px; border-radius: var(--r-full); }

/* ── Main Layout ─────────────────────────────────────────────────────────── */
#main-layout {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  max-width: 1280px;
  margin: 0 auto;
}

.sidebar-left {
  position: sticky;
  top: 0;
  height: 100vh;
  width: var(--sidebar-left-width);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--gap-2) var(--gap-3);
}
.sidebar-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-full);
  margin-bottom: var(--gap-2);
  transition: background var(--transition-fast);
}
.sidebar-logo:hover { background: var(--bg-hover); }
.logo-icon { width: 30px; height: 30px; fill: var(--text-primary); }

.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--gap-4);
  padding: var(--gap-3) var(--gap-4);
  border-radius: var(--r-full);
  font-size: var(--font-xl);
  font-weight: 400;
  color: var(--text-primary);
  position: relative;
  transition: background var(--transition-fast);
  user-select: none;
}
.nav-link:hover { background: var(--bg-hover); }
.nav-link.active { font-weight: 700; }
.nav-link.active .icon-outline { display: none; }
.nav-link:not(.active) .icon-filled { display: none; }

.nav-icon {
  position: relative;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-icon .icon { width: 26px; height: 26px; fill: currentColor; }

.nav-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  background: var(--color-primary);
  color: white;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.nav-label { white-space: nowrap; }

/* ── Compose Button ──────────────────────────────────────────────────────── */
.btn-compose {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-3);
  width: 100%;
  padding: var(--gap-4);
  background: var(--color-primary);
  color: white;
  border-radius: var(--r-full);
  font-size: var(--font-lg);
  font-weight: 700;
  cursor: pointer;
  margin: var(--gap-4) 0;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.btn-compose:hover { background: var(--color-primary-dark); }
.btn-compose:active { transform: scale(.97); }
.compose-icon { width: 22px; height: 22px; fill: white; }

/* ── User Menu ───────────────────────────────────────────────────────────── */
.sidebar-user-menu { margin-top: auto; padding-bottom: var(--gap-4); position: relative; }
.user-menu-btn {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  width: 100%;
  padding: var(--gap-3);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.user-menu-btn:hover { background: var(--bg-hover); }
.user-menu-avatar { width: 40px; height: 40px; border-radius: var(--r-full); object-fit: cover; flex-shrink: 0; }
.user-menu-info { flex: 1; overflow: hidden; text-align: left; min-width: 0; }
.user-menu-name   { display: block; font-weight: 700; font-size: var(--font-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu-handle { display: block; font-size: var(--font-sm); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu-dots { width: 18px; height: 18px; fill: var(--text-primary); flex-shrink: 0; }

.user-menu-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--dropdown-bg);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-popup);
  overflow: hidden;
  z-index: 100;
}
.dropdown-item {
  display: block;
  width: 100%;
  padding: var(--gap-4) var(--gap-5);
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast);
}
.dropdown-item:hover { background: var(--bg-hover); }
.dropdown-divider { height: 1px; background: var(--border-color); }
.text-danger { color: var(--text-danger) !important; }

/* ── Main Content ────────────────────────────────────────────────────────── */
#main-content {
  flex: 0 1 var(--feed-max-width);
  min-height: 100vh;
  border-left:  1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
}

/* ── Right Sidebar ───────────────────────────────────────────────────────── */
.sidebar-right {
  width: var(--sidebar-right-width);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: var(--gap-3) var(--gap-4);
}
.sidebar-right-inner { display: flex; flex-direction: column; gap: var(--gap-4); }

/* Search box */
.search-box-container { position: relative; }
.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  background: var(--input-bg);
  border-radius: var(--r-full);
  padding: var(--gap-2) var(--gap-4);
  border: 2px solid transparent;
  transition: border-color var(--transition-fast);
}
.search-input-wrapper:focus-within { background: var(--bg-primary); border-color: var(--color-primary); }
.search-icon { width: 18px; height: 18px; fill: var(--text-secondary); flex-shrink: 0; }
.search-input { flex: 1; background: none; font-size: var(--font-sm); color: var(--text-primary); }
.search-input::placeholder { color: var(--text-secondary); }

.search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--dropdown-bg);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-popup);
  z-index: 100;
  overflow: hidden;
  max-height: 400px;
  overflow-y: auto;
}

/* ── Widgets ─────────────────────────────────────────────────────────────── */
.widget {
  background: var(--bg-secondary);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.widget-title {
  font-size: var(--font-xl);
  font-weight: 800;
  padding: var(--gap-4) var(--gap-5);
  border-bottom: 1px solid var(--border-color);
}
.widget-content { padding: var(--gap-2) 0; }
.widget-footer {
  display: block;
  padding: var(--gap-4) var(--gap-5);
  color: var(--color-primary);
  font-size: var(--font-sm);
  border-top: 1px solid var(--border-color);
  transition: background var(--transition-fast);
}
.widget-footer:hover { background: var(--bg-hover); }

/* Trending item */
.trend-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--gap-3) var(--gap-5);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.trend-item:hover { background: var(--bg-hover); }
.trend-meta { font-size: var(--font-xs); color: var(--text-secondary); }
.trend-tag  { font-weight: 700; font-size: var(--font-sm); margin: 2px 0; }
.trend-count { font-size: var(--font-xs); color: var(--text-secondary); }

/* Suggestion item */
.suggestion-item {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  padding: var(--gap-3) var(--gap-5);
  transition: background var(--transition-fast);
}
.suggestion-item:hover { background: var(--bg-hover); }
.suggestion-avatar { width: 44px; height: 44px; border-radius: var(--r-full); object-fit: cover; flex-shrink: 0; }
.suggestion-info { flex: 1; min-width: 0; }
.suggestion-name   { font-weight: 700; font-size: var(--font-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggestion-handle { font-size: var(--font-xs); color: var(--text-secondary); }
.suggestion-bio    { font-size: var(--font-xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-2);
  padding: 0.625rem 1.5rem;
  border-radius: var(--r-full);
  font-size: var(--font-md);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
  user-select: none;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-full { width: 100%; }

.btn-primary { background: var(--text-primary); color: var(--bg-primary); }
.btn-primary:hover:not(:disabled) { opacity: .88; }

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}
.btn-outline:hover:not(:disabled) { background: var(--bg-hover); }

/* Following button hover → turns red and says "Unfollow" */
.btn-following {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  min-width: 88px;
}
.btn-following:hover:not(:disabled) {
  border-color: var(--color-danger);
  color: var(--color-danger);
  background: rgba(244,33,46,.08);
}
.btn-following:hover:not(:disabled) .btn-following-text::before {
  content: 'Unfollow';
}
.btn-following:hover:not(:disabled) .btn-following-text {
  font-size: 0;
}
.btn-following:hover:not(:disabled) .btn-following-text::before {
  font-size: var(--font-xs);
}

.btn-brand   { background: var(--color-primary); color: white; }
.btn-brand:hover:not(:disabled) { background: var(--color-primary-dark); }

.btn-danger  { background: var(--color-danger); color: white; }
.btn-danger:hover:not(:disabled) { opacity: .88; }

.btn-ghost { background: transparent; color: var(--text-primary); padding: 0.5rem; }
.btn-ghost:hover { background: var(--bg-hover); }

.btn-oauth {
  display: flex; align-items: center; justify-content: center; gap: var(--gap-3);
  border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary);
  margin-bottom: var(--gap-3); width: 100%;
}
.btn-oauth:hover { background: var(--bg-hover); }
.oauth-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   TWEETS / POSTS
   ══════════════════════════════════════════════════════════════════════════ */

.post-item {
  display: flex;
  gap: var(--gap-3);
  padding: var(--gap-3) var(--gap-4);
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
}
.post-item:hover { background: var(--tweet-hover); }

.post-avatar-col { flex-shrink: 0; }
.post-avatar {
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  object-fit: cover;
  display: block;
}
.post-thread-line {
  width: 2px;
  background: var(--border-color);
  margin: var(--gap-2) auto 0;
  flex: 1;
  min-height: 20px;
}
.post-body { flex: 1; min-width: 0; }

.post-header {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  flex-wrap: wrap;
  margin-bottom: var(--gap-1);
}
.post-username    { font-weight: 700; font-size: var(--font-sm); }
.post-handle      { color: var(--text-secondary); font-size: var(--font-sm); }
.post-timestamp   { color: var(--text-secondary); font-size: var(--font-sm); margin-left: auto; white-space: nowrap; }
.post-verified    { color: var(--color-primary); width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }

.post-text {
  font-size: var(--font-md);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.post-text .hashtag, .post-text .mention { color: var(--color-primary); }
.post-text .hashtag:hover, .post-text .mention:hover { text-decoration: underline; }

/* Media grid */
.post-media { margin-top: var(--gap-3); border-radius: var(--r-xl); overflow: hidden; }
.media-grid { display: grid; gap: 2px; }
.media-grid.count-1 { grid-template-columns: 1fr; }
.media-grid.count-2 { grid-template-columns: 1fr 1fr; }
.media-grid.count-3 { grid-template-columns: 1fr 1fr; }
.media-grid.count-3 .media-item:first-child { grid-row: 1/3; }
.media-grid.count-4 { grid-template-columns: 1fr 1fr; }
.media-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--bg-secondary);
  cursor: pointer;
}
.media-item.landscape { aspect-ratio: 16/9; }
.media-item img, .media-item video {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity var(--transition-fast);
}
.media-item:hover img { opacity: .9; }

/* Quote tweet */
.post-quote {
  margin-top: var(--gap-3);
  border: 1px solid var(--border-color);
  border-radius: var(--r-xl);
  padding: var(--gap-3);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.post-quote:hover { background: var(--bg-hover); }

/* Actions */
.post-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--gap-3);
  max-width: 425px;
}
.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: var(--r-full);
  color: var(--text-secondary);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.action-btn svg { width: 18px; height: 18px; fill: currentColor; pointer-events: none; }
.action-btn:hover                   { color: var(--color-primary);  background: rgba(29,155,240,.1);  }
.action-btn.reply-btn:hover         { color: var(--color-primary);  background: rgba(29,155,240,.1);  }
.action-btn.repost-btn:hover,
.action-btn.repost-btn.active       { color: var(--color-success);  background: rgba(0,186,124,.1);   }
.action-btn.like-btn:hover,
.action-btn.like-btn.active         { color: var(--color-danger);   background: rgba(244,33,46,.1);   }
.action-btn.bookmark-btn.active     { color: var(--color-primary);  }
.action-btn.share-btn:hover         { color: var(--color-primary);  background: rgba(29,155,240,.1);  }

/* ── Compose / Tweet Box ─────────────────────────────────────────────────── */
.composer {
  display: flex;
  gap: var(--gap-3);
  padding: var(--gap-4);
  border-bottom: 1px solid var(--border-color);
}
.composer-avatar { width: 40px; height: 40px; border-radius: var(--r-full); object-fit: cover; flex-shrink: 0; }
.composer-body { flex: 1; min-width: 0; }
.composer-audience {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: var(--r-full);
  font-size: var(--font-xs);
  font-weight: 700;
  margin-bottom: var(--gap-2);
  cursor: pointer;
}
.composer-input {
  width: 100%;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--font-xl);
  resize: none;
  min-height: 52px;
  max-height: 300px;
  overflow-y: auto;
  line-height: 1.5;
}
.composer-input::placeholder { color: var(--text-secondary); }
.composer-media-preview {
  display: flex;
  gap: var(--gap-2);
  flex-wrap: wrap;
  margin-top: var(--gap-2);
}
.composer-media-preview .preview-item {
  position: relative;
  width: 80px; height: 80px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-secondary);
}
.composer-media-preview .preview-item img { width: 100%; height: 100%; object-fit: cover; }
.composer-media-preview .remove-media {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  background: rgba(0,0,0,.7);
  border-radius: var(--r-full);
  color: white;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.composer-divider { height: 1px; background: var(--border-color); margin: var(--gap-3) 0; }
.composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--gap-2);
}
.composer-tools { display: flex; align-items: center; gap: 2px; }
.composer-tool-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  color: var(--color-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.composer-tool-btn svg { width: 20px; height: 20px; fill: currentColor; }
.composer-tool-btn:hover { background: rgba(29,155,240,.1); }
.composer-tool-btn:disabled { opacity: .4; cursor: not-allowed; }
.composer-actions { display: flex; align-items: center; gap: var(--gap-4); }
.composer-actions::before {
  content: '';
  display: block;
  width: 1px;
  height: 22px;
  background: var(--border-color);
  flex-shrink: 0;
}
.char-counter {
  width: 30px; height: 30px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.char-counter svg { position: absolute; top: 0; left: 0; width: 30px; height: 30px; transform: rotate(-90deg); }
.char-counter .circle-bg   { fill: none; stroke: var(--border-color); stroke-width: 2; }
.char-counter .circle-fill { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset var(--transition-fast), stroke var(--transition-fast); }
.char-counter.warning .circle-fill { stroke: var(--color-warning); }
.char-counter.danger .circle-fill  { stroke: var(--color-danger);  }
.char-counter .char-remaining { font-size: 10px; color: var(--text-secondary); position: relative; z-index: 1; }
.char-counter.danger .char-remaining { color: var(--color-danger); }

/* ── Page Header ─────────────────────────────────────────────────────────── */
.post-detail-reply-composer {
  display: flex;
  gap: var(--gap-3);
  padding: var(--gap-5) var(--gap-4);
  border-bottom: 1px solid var(--border-color);
  align-items: flex-start;
}
.composer-textarea {
  width: 100%;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--font-lg);
  resize: none;
  min-height: 52px;
  max-height: 300px;
  overflow-y: auto;
  line-height: 1.5;
  border: none;
  outline: none;
  padding: 0;
}
.composer-textarea::placeholder { color: var(--text-secondary); }
.composer-reply-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--gap-3);
  margin-top: var(--gap-3);
  padding-top: var(--gap-3);
  border-top: 1px solid var(--border-color);
}
.composer-char-count {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  min-width: 28px;
  text-align: right;
}

/* ── Page Header ─────────────────────────────────────────────────────────── */
.page-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-primary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  padding: 0 var(--gap-4);
  min-height: 53px;
  display: flex;
  align-items: center;
  gap: var(--gap-4);
}
.page-header h1, .page-header h2 {
  font-size: var(--font-xl);
  font-weight: 800;
  line-height: 1.2;
}
.page-header-sub {
  font-size: var(--font-xs);
  color: var(--text-secondary);
}
.back-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}
.back-btn:hover { background: var(--bg-hover); }
.back-btn svg { width: 20px; height: 20px; fill: var(--text-primary); }

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
}
.tab-btn {
  flex: 1;
  padding: var(--gap-4);
  font-weight: 700;
  font-size: var(--font-sm);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  position: relative;
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast);
  min-width: 0;
}
.tab-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.tab-btn.active {
  color: var(--text-primary);
}
.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 56px; height: 4px;
  background: var(--color-primary);
  border-radius: var(--r-full) var(--r-full) 0 0;
}

/* ── Profile Page ────────────────────────────────────────────────────────── */
.profile-banner {
  height: 200px;
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}
.profile-banner img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-row {
  padding: 0 var(--gap-4);
  position: relative;
  margin-top: -48px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--gap-3);
}
.profile-avatar {
  width: 96px; height: 96px;
  border-radius: var(--r-full);
  object-fit: cover;
  border: 4px solid var(--bg-primary);
}
.profile-actions { display: flex; gap: var(--gap-2); }
.profile-info { padding: 0 var(--gap-4); }
.profile-username { font-size: var(--font-xl); font-weight: 800; display: flex; align-items: center; gap: var(--gap-2); }
.profile-handle   { font-size: var(--font-sm); color: var(--text-secondary); margin-top: 2px; }
.profile-bio { margin: var(--gap-3) 0; font-size: var(--font-md); line-height: 1.5; }
.profile-meta {
  display: flex; flex-wrap: wrap; gap: var(--gap-4);
  margin-bottom: var(--gap-3); color: var(--text-secondary); font-size: var(--font-sm);
}
.profile-meta-item { display: flex; align-items: center; gap: var(--gap-1); }
.profile-meta-item svg { width: 16px; height: 16px; fill: currentColor; }
.profile-stats { display: flex; gap: var(--gap-5); font-size: var(--font-sm); margin-bottom: var(--gap-3); }
.profile-stat { cursor: pointer; }
.profile-stat:hover .stat-label { text-decoration: underline; }
.stat-count  { font-weight: 700; margin-right: 4px; }
.stat-label  { color: var(--text-secondary); }

/* ── Notification Item ───────────────────────────────────────────────────── */
.notification-item {
  display: flex;
  gap: var(--gap-3);
  padding: var(--gap-4);
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.notification-item:hover { background: var(--tweet-hover); }
.notification-item.unread { background: var(--bg-hover); }
.notification-icon-wrap {
  width: 40px; flex-shrink: 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 2px;
}
.notification-icon { width: 22px; height: 22px; }
.notification-like-icon     { fill: var(--color-danger); }
.notification-repost-icon   { fill: var(--color-success); }
.notification-follow-icon   { fill: var(--color-primary); }
.notification-mention-icon  { fill: var(--color-primary); }
.notification-reply-icon    { fill: var(--color-primary); }
.notification-info { flex: 1; min-width: 0; }
.notification-avatars { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: var(--gap-2); }
.notification-avatar { width: 32px; height: 32px; border-radius: var(--r-full); object-fit: cover; }
.notification-text { font-size: var(--font-sm); line-height: 1.4; }
.notification-text strong { font-weight: 700; }
.notification-preview { color: var(--text-secondary); font-size: var(--font-sm); margin-top: 2px; }
.notification-time { color: var(--text-secondary); font-size: var(--font-xs); margin-top: 2px; }

/* ── Messages ────────────────────────────────────────────────────────────── */
.conversation-list { }
.conversation-item {
  display: flex;
  gap: var(--gap-3);
  padding: var(--gap-4);
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.conversation-item:hover { background: var(--tweet-hover); }
.conversation-item.active { background: var(--bg-hover); }
.conversation-avatar { width: 48px; height: 48px; border-radius: var(--r-full); object-fit: cover; flex-shrink: 0; }
.conversation-info { flex: 1; min-width: 0; }
.conversation-header { display: flex; align-items: center; justify-content: space-between; }
.conversation-name   { font-weight: 700; font-size: var(--font-sm); }
.conversation-time   { color: var(--text-secondary); font-size: var(--font-xs); }
.conversation-preview { color: var(--text-secondary); font-size: var(--font-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-unread { width: 8px; height: 8px; background: var(--color-primary); border-radius: var(--r-full); flex-shrink: 0; margin-top: 4px; }

/* Message chat */
.message-thread {
  display: flex;
  flex-direction: column;
  padding: var(--gap-4);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  gap: 2px;
}
.message-bubble-row {
  display: flex;
  align-items: flex-end;
  gap: var(--gap-2);
  margin-bottom: var(--gap-3);
}
.message-bubble-row:last-child { margin-bottom: 0; }
.message-bubble-row.own {
  flex-direction: row-reverse;
}
.message-bubble-avatar { width: 32px; height: 32px; border-radius: var(--r-full); object-fit: cover; flex-shrink: 0; }
.message-bubble {
  padding: var(--gap-2) var(--gap-4);
  border-radius: var(--r-xl);
  font-size: var(--font-sm);
  line-height: 1.5;
  word-break: break-word;
}
.message-bubble.other { background: var(--bg-secondary); color: var(--text-primary); }
.message-bubble.own   { background: var(--color-primary); color: white; }
.message-time { font-size: 11px; color: var(--text-secondary); margin-top: 2px; text-align: right; }
.message-time.other { text-align: left; }
.message-bubble-content { display: flex; flex-direction: column; max-width: 70%; }
.message-input-bar {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  padding: var(--gap-3) var(--gap-4);
  border-top: 1px solid var(--border-color);
}
.message-input {
  flex: 1;
  background: var(--input-bg);
  border-radius: var(--r-full);
  padding: var(--gap-2) var(--gap-4);
  font-size: var(--font-sm);
  color: var(--text-primary);
  max-height: 120px;
  overflow-y: auto;
  resize: none;
}
.message-input::placeholder { color: var(--text-secondary); }
.message-send-btn {
  width: 38px; height: 38px;
  border-radius: var(--r-full);
  background: var(--color-primary);
  color: white;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}
.message-send-btn:hover { background: var(--color-primary-dark); }
.message-send-btn svg { width: 18px; height: 18px; fill: white; }
.message-send-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Form Elements ───────────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--gap-4); }
.form-label {
  display: block;
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: var(--gap-2);
}
.form-input, .form-textarea, .form-select {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--r-sm);
  padding: var(--gap-3) var(--gap-4);
  font-size: var(--font-md);
  color: var(--text-primary);
  transition: border-color var(--transition-fast);
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-secondary); }
.form-input.error, .form-textarea.error { border-color: var(--color-danger); }
.form-error { font-size: var(--font-xs); color: var(--color-danger); margin-top: var(--gap-1); }
.form-textarea { resize: vertical; min-height: 100px; }

/* Floating label input */
.input-float { position: relative; border: 1px solid var(--border-color); border-radius: var(--r-sm); transition: border-color var(--transition-fast); }
.input-float:focus-within { border-color: var(--color-primary); }
.input-float input {
  width: 100%; padding: 22px var(--gap-3) 8px;
  background: transparent; color: var(--text-primary);
  font-size: var(--font-md);
}
.input-float label {
  position: absolute; top: 50%; left: var(--gap-3); transform: translateY(-50%);
  color: var(--text-secondary); font-size: var(--font-md);
  pointer-events: none;
  transition: top var(--transition-fast), font-size var(--transition-fast), transform var(--transition-fast);
}
.input-float input:focus ~ label,
.input-float input:not(:placeholder-shown) ~ label {
  top: 10px; transform: none; font-size: var(--font-xs);
}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: var(--bg-overlay);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: var(--gap-4);
}
.modal-container {
  background: var(--modal-bg);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-lg);
}
.modal-header {
  display: flex; align-items: center; gap: var(--gap-4);
  padding: var(--gap-3) var(--gap-4);
  border-bottom: 1px solid var(--border-color);
  position: sticky; top: 0; background: var(--modal-bg);
  z-index: 1;
}
.modal-close {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}
.modal-close:hover { background: var(--bg-hover); }
.modal-close svg { width: 18px; height: 18px; fill: var(--text-primary); }
.modal-title { font-size: var(--font-xl); font-weight: 800; }
.modal-body { padding: var(--gap-5) var(--gap-6); }
.modal-footer {
  display: flex; justify-content: flex-end; gap: var(--gap-3);
  padding: var(--gap-4); border-top: 1px solid var(--border-color);
}

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: var(--gap-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--text-primary);
  color: var(--bg-primary);
  padding: var(--gap-3) var(--gap-5);
  border-radius: var(--r-full);
  font-size: var(--font-sm);
  font-weight: 500;
  pointer-events: all;
  animation: toastIn .25s ease, toastOut .25s ease 2.75s forwards;
  box-shadow: var(--shadow-md);
  max-width: min(90vw, 400px);
  text-align: center;
}
.toast.success { background: var(--color-success); color: white; }
.toast.error   { background: var(--color-danger);  color: white; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; } }

/* ── Lightbox ────────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  background: rgba(0,0,0,.5);
  color: white;
  font-size: 1.5rem;
  border-radius: var(--r-full);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 1;
  transition: background var(--transition-fast);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(0,0,0,.7); }
.lightbox-close { top: var(--gap-4); right: var(--gap-4); }
.lightbox-prev  { left: var(--gap-4); top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: var(--gap-4); top: 50%; transform: translateY(-50%); }
.lightbox-media { max-width: 90vw; max-height: 90vh; }
.lightbox-media img, .lightbox-media video { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: var(--r-md); }

/* ── Loading States ──────────────────────────────────────────────────────── */
.loading-pulse {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-elevated) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-md);
  height: 80px;
  margin: var(--gap-4);
}
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--border-color);
  border-top-color: var(--color-primary);
  border-radius: var(--r-full);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-center {
  display: flex; align-items: center; justify-content: center;
  padding: var(--gap-8);
}

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gap-10) var(--gap-8);
  text-align: center;
}
.empty-state-icon { font-size: 3rem; margin-bottom: var(--gap-4); }
.empty-state h3   { font-size: var(--font-2xl); font-weight: 800; margin-bottom: var(--gap-2); }
.empty-state p    { color: var(--text-secondary); font-size: var(--font-sm); max-width: 300px; }

/* ── User card hover ─────────────────────────────────────────────────────── */
.user-hovercard {
  background: var(--dropdown-bg);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-popup);
  width: 320px;
  padding: var(--gap-4);
  z-index: 200;
}
.user-hovercard-avatar { width: 64px; height: 64px; border-radius: var(--r-full); object-fit: cover; }
.user-hovercard-name   { font-size: var(--font-lg); font-weight: 800; }
.user-hovercard-handle { color: var(--text-secondary); font-size: var(--font-sm); }
.user-hovercard-bio    { font-size: var(--font-sm); margin: var(--gap-2) 0; }
.user-hovercard-stats  { display: flex; gap: var(--gap-4); font-size: var(--font-sm); }

/* ── Mobile Nav ──────────────────────────────────────────────────────────── */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  z-index: 100;
  height: 53px;
  align-items: center;
  justify-content: space-around;
  padding: 0 var(--gap-4);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-nav-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
  color: var(--text-primary);
  cursor: pointer;
}
.mobile-nav-link svg { width: 24px; height: 24px; fill: currentColor; }
.mobile-nav-badge {
  position: absolute;
  top: 6px; right: calc(50% - 20px);
  min-width: 16px; height: 16px;
  background: var(--color-primary);
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}
.mobile-compose {
  background: var(--color-primary);
  color: white;
  width: 50px; height: 50px;
  border-radius: var(--r-full);
  flex: unset;
  box-shadow: 0 4px 12px rgba(29,155,240,.4);
}
.mobile-compose svg { fill: white; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .sidebar-right { display: none; }
  #main-content { border-right: none; flex: 1; max-width: 600px; }
}
@media (max-width: 1024px) {
  .sidebar-left { width: 88px; }
  .nav-label, .compose-label, .user-menu-info, .user-menu-dots { display: none; }
  .btn-compose { width: 52px; height: 52px; padding: 0; }
  .compose-icon { width: 24px; height: 24px; }
  .user-menu-btn { justify-content: center; padding: var(--gap-2); }
}
@media (max-width: 700px) {
  .sidebar-left { display: none; }
  .mobile-nav   { display: flex; }
  #main-layout  { flex-direction: column; }
  #main-content { border: none; max-width: 100%; padding-bottom: 53px; }
  .auth-brand   { display: none; }
  .auth-container { justify-content: center; padding: var(--gap-4); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Theme Switcher ──────────────────────────────────────────────────────── */
.theme-picker {
  display: flex;
  gap: var(--gap-2);
  align-items: center;
}

.theme-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--r-lg);
  border: 2px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--font-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  min-width: 72px;
}
.theme-btn:hover {
  border-color: var(--color-primary);
  background: var(--bg-elevated);
}
.theme-btn.active {
  border-color: var(--color-primary);
  background: var(--bg-elevated);
  color: var(--color-primary);
}
.theme-btn .theme-swatch {
  width: 36px;
  height: 24px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-color);
}
.theme-btn[data-theme="dark"]  .theme-swatch { background: #000; }
.theme-btn[data-theme="dim"]   .theme-swatch { background: #15202b; }
.theme-btn[data-theme="light"] .theme-swatch { background: #fff; border-color: #ccc; }

/* Auth-screen theme picker */
.auth-theme-picker {
  display: flex;
  gap: var(--gap-2);
  margin-top: var(--gap-8);
  justify-content: flex-start;
  max-width: 380px;
}
.auth-theme-picker .theme-btn {
  padding: 6px 14px;
  min-width: unset;
  font-size: var(--font-xs);
}

@media (max-width: 700px) {
  .auth-container { flex-direction: column; }
  .auth-brand { min-height: 240px; flex: 0 0 240px; }
  .auth-brand-logo { width: 140px; height: 140px; }
  .auth-content { flex: 1; padding: 40px 24px; min-width: 0; width: 100%; }
  #auth-buttons .btn, .auth-signin-section .btn { padding: 12px 20px; }
}

/* ── Settings Page ───────────────────────────────────────────────────────── */
.settings-section-title {
  font-size: var(--font-base);
  font-weight: 700;
  margin-bottom: var(--gap-4);
  color: var(--text-primary);
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-4);
}
.settings-label { flex: 1; }
.settings-name  { font-weight: 600; font-size: var(--font-sm); color: var(--text-primary); }
.settings-desc  { font-size: var(--font-xs); color: var(--text-secondary); margin-top: 2px; }
.form-group     { margin-bottom: var(--gap-4); }
.form-label     { display: block; font-size: var(--font-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--gap-2); }
.form-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: var(--font-sm);
  transition: border-color var(--transition);
}
.form-input:focus { outline: none; border-color: var(--color-primary); background: var(--bg-primary); }
.btn-danger { border-color: var(--text-danger) !important; color: var(--text-danger) !important; }
.btn-danger:hover { background: rgba(244,33,46,.1) !important; }