/* Meshcue Design System v2.0 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --brand-coral: #FF6B6B;
  --brand-lavender: #C084FC;
  --brand-teal: #4ECDC4;
  --brand-navy: #1A1A2E;
  --gradient-brand: linear-gradient(135deg, #FF6B6B 0%, #C084FC 50%, #4ECDC4 100%);
  --gradient-short: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%);
  /* Enhanced vibrant gradient background */
  --page-bg: linear-gradient(135deg, #FFD6E8 0%, #E4D4F4 25%, #C2E9FF 60%, #A7F3D0 100%);
  /* Stronger glass cards with better contrast */
  --surface-card: rgba(255, 255, 255, 0.75);
  --surface-card-border: rgba(255, 255, 255, 0.9);
  --surface-card-shadow: 0 24px 64px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1);
  --surface-heavy: rgba(255, 255, 255, 0.95);
  --surface-modal: rgba(255, 255, 255, 0.98);
  --surface-dim: rgba(255, 255, 255, 0.7);
  /* Richer hero gradient */
  --hero-bg: linear-gradient(180deg, rgba(255, 107, 107, 0.4) 0%, rgba(192, 132, 252, 0.35) 50%, rgba(78, 205, 196, 0.3) 100%);
  /* Better input visibility */
  --input-bg: rgba(255, 255, 255, 0.9);
  --input-border: rgba(200, 200, 220, 0.5);
  --input-bg-focus: rgba(255, 255, 255, 1);
  --input-border-focus: rgba(192, 132, 252, 0.6);
  --msg-user-bg: linear-gradient(135deg, #FF6B6B 0%, #C084FC 50%);
  --msg-user-shadow: 0 4px 12px rgba(192, 132, 252, 0.3);
  --msg-ai-bg: rgba(255, 255, 255, 0.85);
  --msg-ai-border: rgba(230, 230, 240, 0.8);
  /* Darker text for better readability */
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6B7280;
  --text-dim: #9CA3AF;
  --dm-received-bg: rgba(255, 255, 255, 0.85);
  --dm-received-border: rgba(230, 230, 240, 0.8);
  /* Enhanced shadows for depth */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --shadow-xl: 0 20px 64px rgba(0, 0, 0, 0.2);
  --shadow-brand: 0 8px 32px rgba(192, 132, 252, 0.5);
  --shadow-brand-sm: 0 4px 16px rgba(192, 132, 252, 0.35);
  --overlay-dark: rgba(0, 0, 0, 0.5);
  --modal-overlay: rgba(255, 255, 255, 0.75);
  --border-subtle: rgba(200, 200, 220, 0.4);
  --border-hover: rgba(192, 132, 252, 0.5);
  --hover-tint: rgba(192, 132, 252, 0.12);
  --dot-inactive: #D1D5DB;
  --voice-orb-shadow: 0 0 80px rgba(192, 132, 252, 0.5), 0 0 140px rgba(78, 205, 196, 0.3);
  --voice-ring-color: rgba(192, 132, 252, 0.4);
  --selection-bg: rgba(192, 132, 252, 0.3);
  --scrollbar-thumb: #C4C4D4;
  --tab-bar-height: 64px;
  --top-bar-height: 56px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-body: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.08);
}

/* Dark Mode */
html.dark {
  --page-bg: linear-gradient(135deg, #0F172A 0%, #131B2E 30%, #1A1F35 60%, #1E293B 100%);
  --surface-card: rgba(30, 41, 59, 0.7);
  --surface-card-border: rgba(71, 85, 105, 0.4);
  --surface-card-shadow: 0 24px 64px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2);
  --surface-heavy: rgba(30, 41, 59, 0.95);
  --surface-modal: rgba(30, 41, 59, 0.95);
  --surface-dim: rgba(30, 41, 59, 0.6);
  --hero-bg: linear-gradient(180deg, rgba(255, 184, 168, 0.15) 0%, rgba(232, 196, 240, 0.1) 50%, rgba(168, 212, 248, 0.08) 100%);
  --input-bg: rgba(30, 41, 59, 0.8);
  --input-border: rgba(71, 85, 105, 0.5);
  --input-bg-focus: rgba(30, 41, 59, 0.95);
  --input-border-focus: rgba(168, 168, 248, 0.4);
  --msg-ai-bg: rgba(30, 41, 59, 0.75);
  --msg-ai-border: rgba(71, 85, 105, 0.4);
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-dim: #475569;
  --dm-received-bg: rgba(30, 41, 59, 0.6);
  --dm-received-border: rgba(71, 85, 105, 0.3);
  --shadow-brand: 0 8px 24px rgba(192, 132, 252, 0.2);
  --shadow-brand-sm: 0 2px 8px rgba(192, 132, 252, 0.15);
  --selection-bg: rgba(168, 168, 248, 0.3);
  --scrollbar-thumb: #475569;
  --border-subtle: rgba(71, 85, 105, 0.4);
  --overlay-dark: rgba(0, 0, 0, 0.6);
  --modal-overlay: rgba(15, 23, 42, 0.7);
  --dot-inactive: #475569;
  --hover-tint: rgba(192, 132, 252, 0.06);
  --glass-bg: rgba(30, 41, 59, 0.5);
  --glass-border: rgba(71, 85, 105, 0.3);
}

/* Base */
body {
  font-family: var(--font-sans);
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  background: var(--page-bg);
  background-attachment: fixed;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased
}

/* Prevent any app content from showing before authentication */
body:not(.authenticated) .app-shell {
  display: none !important;
  visibility: hidden !important;
}

::selection {
  background: var(--selection-bg)
}

/* App Shell */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow: hidden
}

/* Top Bar */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  /* Float over content */
  top: 16px;
  left: 0;
  width: 100%;
  padding: 0 12px;
  flex-shrink: 0;
  z-index: 30;
  background: transparent;
  border-bottom: none;
}

.top-bar-left,
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 4px
}

.top-bar-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s
}

.top-bar-btn:hover {
  background: var(--hover-tint);
  color: var(--text-primary)
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 8px
}

.brand-orb {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-brand-sm)
}

.brand-orb span {
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.5px
}

.brand-orb.small {
  width: 24px;
  height: 24px;
  border-radius: 8px
}

.brand-orb.small span {
  font-size: 9px
}

.brand-orb.large {
  width: 80px;
  height: 80px;
  border-radius: 24px
}

.brand-orb.large span {
  font-size: 28px
}

/* New Brand Mark */
.brand-mark-large {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.brand-mark-large svg {
  filter: drop-shadow(0 8px 24px rgba(192, 132, 252, 0.4));
  transition: transform 0.3s ease;
}

.brand-mark-large svg:hover {
  transform: scale(1.05);
}

/* Small brand icons */
.brand-icon-small,
.install-brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-icon-small svg {
  width: 32px;
  height: 32px;
}

.install-brand-icon svg {
  width: 40px;
  height: 40px;
}

/* Voice orb inner */
.voice-orb-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 24px;
  background: var(--gradient-brand);
  box-shadow: var(--shadow-brand);
  transition: transform 0.2s ease;
}

.voice-orb:active .voice-orb-inner {
  transform: scale(0.95);
}

/* Search Empty State */
.search-empty-state {
  margin-top: 32px;
  padding: 0 24px;
  max-width: 600px;
  width: 100%;
}

.trending-topics,
.recent-searches {
  margin-bottom: 24px;
}

.trending-label,
.recent-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.topic-chips,
.recent-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.topic-chip {
  padding: 10px 16px;
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.topic-chip:hover {
  background: var(--hover-tint);
  border-color: var(--brand-lavender);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.recent-list {
  flex-direction: column;
  gap: 4px;
}

.recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

.recent-item:hover {
  background: var(--surface-card);
  color: var(--text-primary);
}

.recent-item svg {
  width: 16px;
  height: 16px;
  opacity: 0.5;
}

.brand-name {
  font-weight: 700;
  font-size: 18px;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

/* Chat Header */
.chat-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--surface-card-border);
  background: var(--surface-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-shrink: 0;
  z-index: 30
}

.chat-header-bar.hidden {
  display: none
}

.chat-header-left {
  display: flex;
  align-items: center;
  gap: 10px
}

.chat-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--gradient-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer
}

.chat-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px
}

.chat-header-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px
}

.chat-header-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted)
}

.chat-header-right {
  display: flex;
  align-items: center;
  gap: 2px
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot-inactive);
  flex-shrink: 0
}

.status-dot.online {
  background: #22C55E
}

.status-text {
  font-size: 12px;
  color: var(--text-muted)
}

.memory-badge {
  background: linear-gradient(135deg, var(--brand-lavender), var(--brand-teal));
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap
}

/* View Port & Views */
.view-port {
  flex: 1;
  overflow: hidden;
  position: relative
}

.view-container {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
  -webkit-overflow-scrolling: touch
}

.view-container.active {
  display: block
}

#view-search.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
  /* Prevent scrolling on search home */
}

/* Bottom Tab Bar */
.tab-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: var(--tab-bar-height);
  flex-shrink: 0;
  background: var(--surface-card);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-top: 1px solid var(--surface-card-border);
  padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 40
}

.tab-bar-hidden {
  transform: translateY(100%)
}

.tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  flex: 1;
  min-width: 0;
  min-height: 48px;
  position: relative;
  font-family: inherit
}

.tab-btn.active {
  color: var(--brand-coral)
}

.tab-btn.active svg {
  stroke: var(--brand-coral)
}

.tab-btn.center-tab .center-tab-orb {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-brand-sm);
  margin-top: -16px;
  transition: all .3s
}

.tab-btn.center-tab .center-tab-orb svg {
  stroke: #fff
}

.tab-btn.center-tab.active .center-tab-orb {
  box-shadow: 0 0 20px rgba(192, 132, 252, 0.6), 0 0 40px rgba(192, 132, 252, 0.3);
  transform: scale(1.1);
  background: linear-gradient(135deg, #FF6B6B 0%, #C084FC 100%);
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.tab-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 20px);
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--brand-coral);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px
}

.tab-badge.hidden {
  display: none
}

/* ==================== SEARCH HOME (ENTRY) ==================== */
.search-home {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem;
  min-height: 100dvh;
  margin: 0 auto;
  /* Center horizontally */
}

/* SEARCH HERO TEXT */
.search-hero {
  position: relative;
  text-align: center;
  margin-bottom: 0.5rem;
}

.greeting-prompt {
  font-family: 'Inter', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #FF6B6B 0%, #C084FC 50%, #4ECDC4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Network Avatars */
.mesh-network-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* Shift up more to create space */
  transform: translateY(-15%);
}

.avatar-layer div {
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.1s linear, opacity 0.3s ease;
}

.avatar-layer img {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}

.avatar-layer div:hover img {
  transform: scale(1.15);
  box-shadow: 0 8px 24px rgba(192, 132, 252, 0.5);
  border-color: rgba(192, 132, 252, 0.8);
}

.search-hero {
  text-align: center;
  padding: 0;
  position: relative;
  margin-bottom: 120px;
  /* Space for fixed search box at bottom */
}

.hero-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(192, 132, 252, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none
}

.hero-content {
  position: relative;
  z-index: 1
}

.hero-orb {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--gradient-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: var(--shadow-brand)
}

.hero-orb span {
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.5px
}

.greeting-title {
  font-size: 48px;
  font-weight: 700;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
  letter-spacing: -1.5px;
  line-height: 1.1;
}

.greeting-prompt {
  font-size: 24px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 22px;
  letter-spacing: -0.5px;
  line-height: 1.1;
  opacity: 0.8;
}

@media (max-width: 640px) {

  .greeting-title,
  .greeting-prompt {
    font-size: 32px;
  }
}

/* Search Input */
.search-input-wrap {
  position: fixed;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  width: 44%;
  max-width: 560px;
  z-index: 100;
  margin: 0;
}

.search-input-field {
  position: relative;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 48px;
  /* Top: 20px, Bottom: 12px to fit footer */
  padding: 20px 32px 12px 32px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(192, 132, 252, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1);
  transition: all .3s;
  display: flex;
  flex-direction: column;
  height: 100px;
}

html.dark .search-input-field {
  background: rgba(30, 41, 59, 0.1);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.search-input-field:focus-within {
  background: var(--input-bg-focus);
  border-color: var(--input-border-focus);
  box-shadow: var(--shadow-md)
}

.search-input-row {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.search-card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  /* Permanent positioning */
  position: absolute;
  bottom: 12px;
  right: 24px;
}




.search-textarea {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  color: var(--text-primary);
  resize: none;
  outline: none;
  font-family: inherit;
  min-height: 24px;
  max-height: 100px;
  line-height: 1.5
}

.search-textarea::placeholder {
  color: var(--text-muted)
}

.voice-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0
}

.voice-btn:hover {
  color: var(--brand-lavender);
  background: var(--hover-tint)
}

.search-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 4px;
  /* Removed divider for modern look */
  border-top: none
}

.search-action-left {
  display: flex;
  gap: 4px
}

.action-chip {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s
}

.action-chip:hover {
  background: var(--hover-tint);
  color: var(--text-primary)
}

/* Send Button */
.send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 14px;
  border: none;
  background: var(--gradient-short);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  min-height: 44px
}

.send-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand)
}

.send-btn:disabled {
  opacity: .4;
  transform: none;
  box-shadow: none;
  cursor: default
}

.send-btn svg {
  width: 14px;
  height: 14px;
}

.send-btn.small {
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  min-height: 36px
}

/* Quick Actions */
.quick-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px
}

.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 14px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  min-height: 44px
}

.quick-action-btn.primary {
  background: var(--gradient-short);
  color: #fff;
  box-shadow: var(--shadow-brand-sm)
}

.quick-action-btn.primary:hover {
  box-shadow: var(--shadow-brand);
  transform: translateY(-1px)
}

.quick-action-btn.secondary {
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  color: var(--text-secondary);
  backdrop-filter: blur(10px)
}

.quick-action-btn.secondary:hover {
  background: var(--hover-tint)
}

/* Sections */
.section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px
}

.section-icon {
  font-size: 14px
}

.section-title {
  font-size: 12px
}

.recent-section,
.trending-section {
  margin-bottom: 20px
}

.recent-list {
  display: flex;
  flex-direction: column;
  gap: 4px
}

/* Trending Chips */
.trending-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.trending-chip {
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--surface-card-border);
  background: var(--surface-card);
  backdrop-filter: blur(10px);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  white-space: nowrap
}

.trending-chip:hover {
  border-color: var(--border-hover);
  color: var(--brand-coral);
  background: var(--hover-tint)
}

/* Pulse Animation for Collab Button removed */

/* Live Activity Card (Grokipedia style) */
.live-activity-card {

  background: rgba(30, 41, 59, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px 20px;
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  margin: 16px auto 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(10px);
  opacity: 0;
  animation: floatUp 0.6s ease-out forwards 0.4s;
  cursor: pointer;
  transition: all .2s;
}

.live-activity-card:hover {
  background: rgba(30, 41, 59, 0.6);
  transform: translateY(0) scale(1.02);
  border-color: rgba(192, 132, 252, 0.2);
}

.activity-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activity-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.activity-time {
  font-size: 11px;
  color: var(--text-muted);
}

.activity-sub {
  font-size: 12px;
  color: var(--text-secondary);
}

@keyframes floatUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Stats Footer (Minimal) */
.stats-footer {
  width: 100%;
  max-width: 800px;
  margin-top: auto;
  padding: 20px 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.stats-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}

.stats-text .separator {
  margin: 0 8px;
  opacity: 0.4;
}

.footer-links {
  display: flex;
  gap: 20px;
}

.footer-links a {
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--text-primary);
}

/* Chat Area */
.chat-area {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 5
}

.chat-area.hidden {
  display: none !important;
}

/* Unifed Clean UI State (Nuclear Hiding) */
body.state-clean-ui #chatArea,
body.state-clean-ui .chat-area,
body.state-clean-ui #sideNav,
body.state-clean-ui .history-panel,
body.state-clean-ui #sideProfileBtn,
body.state-clean-ui .chat-history-sidebar,
body.state-clean-ui #topBar,
body.state-clean-ui .floating-action-btns,
body.state-clean-ui [class*="brand-floating-top"] {
  display: none !important;
}

/* Added specific right-side icons seen in screenshot */
body.state-clean-ui .nav-icon-floating,
body.state-clean-ui #navToggle,
body.state-clean-ui #searchToggle {
  display: none !important;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px
}

.chat-messages::-webkit-scrollbar {
  width: 4px
}

.chat-messages::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 2px
}

/* Message Bubbles */
.msg-user {
  background: var(--msg-user-bg);
  color: #fff;
  border-radius: 18px 18px 4px 18px;
  padding: 10px 16px;
  max-width: 80%;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: var(--msg-user-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-self: flex-end
}

.msg-ai {
  background: var(--msg-ai-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--text-primary);
  border-radius: 18px 18px 18px 4px;
  border: 1px solid var(--msg-ai-border);
  padding: 12px 16px;
  max-width: 85%;
  font-size: 14px;
  line-height: 1.6;
  align-self: flex-start
}

.msg-ai pre {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 8px 12px;
  overflow-x: auto;
  font-size: 13px;
  margin: 8px 0
}

.msg-ai code {
  font-size: 13px
}

/* Chat Input — matches entry search input position/size */
.chat-input-wrap {
  position: fixed;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  width: 44%;
  max-width: 560px;
  z-index: 100;
  margin: 0;
  padding: 0;
  background: none;
}

.chat-input-field {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: rgba(30, 41, 59, 0.1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 48px;
  padding: 12px 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  transition: all .3s
}

.chat-input-field:focus-within {
  background: var(--input-bg-focus);
  border-color: var(--input-border-focus)
}

.chat-textarea {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  color: var(--text-primary);
  resize: none;
  outline: none;
  font-family: inherit;
  min-height: 24px;
  max-height: 120px;
  line-height: 1.5
}

.chat-textarea::placeholder {
  color: var(--text-muted)
}

.chat-input-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0
}

.chat-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s
}

/* Typing Indicator */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 8px
}

.typing-indicator.hidden {
  display: none
}

.typing-avatar {
  flex-shrink: 0
}

.typing-bubble {
  display: flex;
  gap: 4px;
  background: var(--msg-ai-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--msg-ai-border);
  border-radius: 18px;
  padding: 12px 16px
}

.typing-dot {
  width: 8px;
  height: 8px;
  background: var(--text-muted);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite
}

.typing-dot:nth-child(2) {
  animation-delay: .2s
}

.typing-dot:nth-child(3) {
  animation-delay: .4s
}

@keyframes typingBounce {

  0%,
  60%,
  100% {
    transform: translateY(0)
  }

  30% {
    transform: translateY(-6px)
  }
}

/* Glass Input */
.glass-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: all .2s
}

.glass-input:focus {
  background: var(--input-bg-focus);
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.1)
}

.glass-input.mono {
  font-family: monospace;
  font-size: 12px
}

/* History Panel */
.history-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s
}

.history-overlay.open {
  opacity: 1;
  pointer-events: auto
}

/* Sidebar Styles */
.history-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 320px;
  background: #0f172a;
  /* Dark background per design */
  z-index: 60;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.history-panel.open {
  transform: translateX(0);
}

.history-header {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.history-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.history-search-container {
  padding: 0 16px 12px;
}

.sidebar-search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 14px;
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  transition: all 0.2s;
}

.sidebar-search-input:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  outline: none;
}

.sidebar-filters {
  display: flex;
  gap: 8px;
  padding: 0 16px 16px;
  overflow-x: auto;
  /* Hide scrollbar */
  scrollbar-width: none;
}

.sidebar-filters::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 20px;
  padding: 6px 12px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.filter-chip.active,
.filter-chip:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.history-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px;
}

.history-footer {
  .new-chat-btn:hover {
    box-shadow: var(--shadow-brand)
  }

  /* Close Button */
  .close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s
  }

  .close-btn:hover {
    background: var(--hover-tint);
    color: var(--text-primary)
  }
}

/* Sidebar Category Tabs */
.sidebar-cat-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px 12px;
}

.sidebar-cat-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 4px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.sidebar-cat-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

.sidebar-cat-tab.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3));
  border-color: rgba(99, 102, 241, 0.5);
  color: #fff;
}

.sidebar-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: sidebarPulse 2s ease-in-out infinite;
}

@keyframes sidebarPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.sidebar-social-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  color: inherit;
}

.sidebar-social-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-social-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.sidebar-social-icon.threads {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3));
}

.sidebar-social-icon.groups {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.3));
}

.sidebar-social-icon.dms {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.3));
}

.sidebar-social-details {
  flex: 1;
  min-width: 0;
}

.sidebar-social-name {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-social-preview {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.sidebar-social-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.sidebar-social-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
}

.sidebar-active-badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  font-weight: 600;
}

.sidebar-section-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 12px 6px;
}

.sidebar-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.3);
}

.sidebar-empty-state svg {
  margin: 0 auto 12px;
  opacity: 0.4;
}

.sidebar-empty-state p {
  font-size: 13px;
  margin-bottom: 4px;
}

.sidebar-empty-state small {
  font-size: 11px;
  opacity: 0.7;
}

/* Inline create forms */
.sidebar-inline-form {
  padding: 8px 12px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-inline-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 12px;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.sidebar-inline-input:focus {
  border-color: rgba(99, 102, 241, 0.5);
  outline: none;
}

.sidebar-inline-select {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 8px;
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

.sidebar-inline-select option {
  background: #1e293b;
  color: #fff;
}

.sidebar-inline-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.sidebar-inline-btn:hover {
  opacity: 0.9;
}

/* Join & Chat action badges */
.sidebar-join-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.25));
  color: #a5b4fc;
  font-weight: 600;
}

.sidebar-chat-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.25));
  color: #6ee7b7;
  font-weight: 600;
}

/* Presence indicator dot on avatars */
.sidebar-social-icon {
  position: relative;
}

.sidebar-presence-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #64748b;
  border: 2px solid #0f172a;
}

.sidebar-presence-dot.online {
  background: #22c55e;
}

.sidebar-presence-dot.away {
  background: #f59e0b;
}

/* Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-dark);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  padding: 16px
}

.modal-overlay.open,
.modal-overlay.active {
  opacity: 1;
  pointer-events: auto
}

.modal-card {
  background: var(--surface-modal);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid var(--surface-card-border);
  border-radius: 24px;
  box-shadow: var(--shadow-xl);
  max-width: 400px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto
}

.modal-card.compact {
  max-width: 360px
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid var(--surface-card-border);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.modal-header h2 {
  font-size: 16px;
  font-weight: 600
}

.modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px
}

/* Identity */
.identity-section {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.identity-section.bordered {
  border-top: 1px solid var(--surface-card-border);
  padding-top: 16px
}

.identity-section h3 {
  font-size: 14px;
  font-weight: 600
}

.section-label {
  font-size: 12px;
  color: var(--text-muted)
}

.hint-text {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5
}

.id-display {
  font-family: monospace;
  font-size: 12px;
  background: var(--surface-dim);
  border-radius: 12px;
  padding: 10px 14px;
  word-break: break-all;
  color: var(--text-secondary)
}

.id-display.small {
  font-size: 11px;
  padding: 8px 12px
}

.qr-container {
  display: flex;
  justify-content: center;
  padding: 8px 0
}

.qr-container.small {
  padding: 4px 0
}

.status-msg {
  font-size: 12px;
  text-align: center;
  margin-top: 8px
}

.status-msg.hidden {
  display: none
}

.recover-panel {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.recovery-shares {
  display: flex;
  flex-direction: column;
  gap: 8px
}

/* Buttons */
.primary-btn {
  padding: 10px 20px;
  border-radius: 14px;
  border: none;
  background: var(--gradient-short);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center
}

.primary-btn:hover {
  box-shadow: var(--shadow-brand);
  transform: translateY(-1px)
}

.secondary-btn {
  padding: 10px 20px;
  border-radius: 14px;
  border: none;
  background: var(--surface-dim);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  min-height: 44px
}

.secondary-btn:hover {
  background: var(--hover-tint)
}

.link-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  font-family: inherit
}

.link-btn:hover {
  color: var(--text-primary)
}

.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.full-width {
  width: 100%
}

.mt-2 {
  margin-top: 8px
}

.mt-3 {
  margin-top: 12px
}

.flex-spacer {
  flex: 1
}

.hidden {
  display: none !important
}

/* Language */
.lang-switcher {
  position: relative
}

.lang-badge {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(192, 132, 252, 0.2), rgba(78, 205, 196, 0.2));
  border: 1px solid var(--surface-card-border);
  cursor: pointer;
  color: var(--brand-lavender);
  transition: all .2s;
  font-family: inherit
}

.lang-badge:hover {
  background: linear-gradient(135deg, rgba(192, 132, 252, 0.35), rgba(78, 205, 196, 0.35))
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface-modal);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--surface-card-border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  min-width: 150px;
  max-width: 200px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 60;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.lang-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lang-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  white-space: nowrap;
}

.lang-dropdown button:hover {
  background: var(--hover-tint);
  color: var(--text-primary);
  transform: translateX(2px);
}

.lang-dropdown button.active {
  color: var(--brand-lavender);
  font-weight: 600;
  background: rgba(192, 132, 252, 0.1);
}

/* Scrollbar styling for dropdown */
.lang-dropdown::-webkit-scrollbar {
  width: 6px;
}

.lang-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.lang-dropdown::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

/* Install Banner */
.install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(135deg, var(--brand-coral), var(--brand-lavender));
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  transition: transform .3s, opacity .3s
}

.install-banner.hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none
}

.install-info {
  display: flex;
  align-items: center;
  gap: 12px
}

.install-title {
  font-size: 14px;
  font-weight: 600
}

.install-desc {
  font-size: 12px;
  opacity: .85
}

.install-actions {
  display: flex;
  align-items: center;
  gap: 8px
}

.install-later {
  background: none;
  border: none;
  color: rgba(255, 255, 255, .8);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit
}

.install-now {
  background: #fff;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-family: inherit
}

/* Offline Bar */
.offline-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transform: translateY(-100%);
  transition: transform .3s
}

.offline-bar.show {
  transform: translateY(0)
}

/* Backend Down Bar (online but API unreachable) */
.backend-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 59;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transform: translateY(-100%);
  transition: transform .3s
}

.backend-bar.show {
  transform: translateY(0)
}

/* Disclaimer */
.disclaimer {
  position: fixed;
  bottom: 10px;
  /* Push all the way down */
  left: 0;
  right: 0;
  text-align: center;
  z-index: 5;
  pointer-events: none
}

.disclaimer p {
  font-size: 11px;
  color: var(--text-muted);
  opacity: .6
}

/* Voice Overlay */
.voice-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--page-bg);
  background-attachment: fixed;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s
}

.voice-overlay.active {
  opacity: 1;
  pointer-events: auto
}

.voice-top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top))
}

.voice-lang-select {
  background: var(--surface-card);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--text-primary);
  border: 1px solid var(--surface-card-border);
  outline: none;
  font-family: inherit
}

.voice-close-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px)
}

.voice-center {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -40px
}

.voice-rings {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  pointer-events: none
}

.voice-rings .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--voice-ring-color)
}

.voice-orb {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .3s;
  box-shadow: var(--voice-orb-shadow)
}

.voice-orb.idle {
  animation: orbIdle 3s ease-in-out infinite
}

.voice-orb.listening {
  animation: orbListen 1.5s ease-in-out infinite
}

@keyframes orbIdle {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.02)
  }
}

@keyframes orbListen {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 60px rgba(192, 132, 252, 0.4)
  }

  50% {
    transform: scale(1.08);
    box-shadow: 0 0 100px rgba(192, 132, 252, 0.7)
  }
}

.voice-state {
  margin-top: 32px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-secondary)
}

.voice-transcript-area {
  margin-top: 16px;
  text-align: center;
  padding: 0 32px;
  color: var(--text-muted);
  font-size: 14px;
  min-height: 24px;
  max-width: 360px;
  font-style: italic
}

.voice-ai-response {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 30vh;
  overflow-y: auto;
  padding: 16px 24px 32px;
  padding-bottom: max(32px, env(safe-area-inset-bottom))
}

.voice-ai-card {
  background: var(--surface-dim);
  backdrop-filter: blur(20px);
  border: 1px solid var(--surface-card-border);
  border-radius: 20px;
  padding: 16px;
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center
}

/* Inline Voice Widget */
.inline-voice-widget {
  position: fixed;
  bottom: calc(var(--tab-bar-height) + 80px);
  left: 16px;
  right: 16px;
  z-index: 35;
  max-width: 480px;
  margin: 0 auto
}

.voice-widget-inner {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), rgba(236, 72, 153, 0.95));
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(20px)
}

.voice-widget-row {
  display: flex;
  align-items: center;
  gap: 16px
}

.voice-orb-inline {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.voice-orb-inline.listening {
  animation: orbListen 1.5s ease-in-out infinite
}

.voice-widget-text {
  flex: 1;
  min-width: 0
}

.voice-state-label {
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 4px
}

.voice-transcript {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: italic
}

.voice-stop-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0
}

/* Onboarding */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--modal-overlay);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s
}

.onboarding-overlay.active {
  opacity: 1;
  pointer-events: auto
}

.onboarding-card {
  background: var(--surface-modal);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid var(--surface-card-border);
  border-radius: 24px;
  box-shadow: var(--shadow-xl);
  max-width: 400px;
  width: calc(100% - 32px);
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px
}

.onboarding-step {
  display: none
}

.onboarding-step.active {
  display: block
}

.onboarding-step h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px
}

.ob-desc {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px
}

.onboarding-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px
}

.onboarding-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot-inactive);
  transition: all .3s
}

.onboarding-dots .dot.active {
  background: var(--gradient-brand);
  width: 24px;
  border-radius: 4px
}

.lang-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

.lang-option {
  padding: 10px 16px;
  border-radius: 12px;
  border: 2px solid var(--border-subtle);
  background: var(--surface-dim);
  cursor: pointer;
  transition: all .2s;
  text-align: center;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary)
}

.lang-option:hover {
  border-color: var(--border-hover)
}

.lang-option.selected {
  border-color: var(--brand-lavender);
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(192, 132, 252, 0.1));
  box-shadow: var(--shadow-brand-sm)
}

.interest-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.interest-chip {
  padding: 8px 16px;
  border-radius: 20px;
  border: 2px solid var(--border-subtle);
  background: var(--surface-dim);
  cursor: pointer;
  transition: all .2s;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary)
}

.interest-chip:hover {
  border-color: var(--border-hover)
}

.interest-chip.selected {
  border-color: var(--brand-lavender);
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(192, 132, 252, 0.1))
}

.onboarding-nav {
  display: flex;
  align-items: center;
  margin-top: 24px;
  gap: 12px
}

/* DM Overlay removed — two-panel messaging layout in #view-social */

.dm-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--surface-dim);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer
}

.dm-delete-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer
}

.dm-delete-btn:hover {
  color: #ef4444
}

/* Bubble wrapper — controls alignment and max-width */
.dm-bubble-wrap {
  max-width: 75%;
  display: flex;
  flex-direction: column;
}

.dm-wrap-sent {
  align-self: flex-end;
}

.dm-wrap-received {
  align-self: flex-start;
}

.dm-day-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0 4px;
  align-self: center;
}

.dm-day-header span {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 3px 12px;
}

.dm-context-menu {
  position: fixed;
  z-index: 100;
  background: rgba(30, 41, 59, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 6px 0;
  min-width: 140px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
}

.dm-context-action {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  color: var(--text-primary);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
}

.dm-context-action:hover {
  background: rgba(99, 102, 241, 0.15);
}

.dm-context-action:last-child {
  color: #ef4444;
}

.dm-bubble-meta {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.7);
  margin-top: 3px;
  padding: 0 4px;
}

.dm-meta-sent {
  text-align: right;
}

.dm-bubble-sent {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  border-radius: 20px 20px 6px 20px;
  padding: 10px 16px;
  font-size: 15px;
  line-height: 1.5;
  word-wrap: break-word;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.dm-bubble-received {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px 20px 20px 6px;
  padding: 10px 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary, #e2e8f0);
  word-wrap: break-word;
}

/* Group chat sender name */
.dm-group-sender {
  font-size: 11px;
  font-weight: 600;
  color: #60a5fa;
  margin-bottom: 2px;
  padding-left: 2px;
}

/* Group avatar in conversation list */
.msg-group-avatar {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dm-input-field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 26px;
  padding: 8px 8px 8px 16px;
  transition: all 0.2s;
}

.dm-input-field:focus-within {
  border-color: rgba(99, 102, 241, 0.4);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}

.dm-text-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
  min-height: 24px;
}

/* Old contact-item, contact-share-section, unread-badge removed — replaced by msg-conv-* */

/* ==================== MESH CHAT ==================== */

/* Tab Bar */
.mesh-tab-bar {
  display: flex;
  gap: 4px;
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 16px;
}

.mesh-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}

.mesh-tab:hover {
  color: var(--text-primary);
  background: var(--hover-tint);
}

.mesh-tab.active {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: var(--shadow-brand-sm);
}

.mesh-tab.active svg {
  color: #fff;
}

/* Mesh Header */
.mesh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 2px;
}

.mesh-location-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mesh-location-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.mesh-range-select {
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: inherit;
  cursor: pointer;
  outline: none;
}

.mesh-range-select:focus {
  border-color: var(--brand-lavender);
}

/* Feed List */
.mesh-feed-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100px;
  padding-bottom: 120px;
}

/* Post Card */
.mesh-post {
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: 16px;
  padding: 14px 16px;
  transition: box-shadow 0.2s;
}

.mesh-post:hover {
  box-shadow: var(--shadow-sm);
}

.mesh-pin {
  border-color: rgba(192, 132, 252, 0.3);
  background: linear-gradient(135deg, rgba(192, 132, 252, 0.05), rgba(78, 205, 196, 0.05));
}

.mesh-pin-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--brand-lavender);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.mesh-post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.mesh-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--gradient-brand);
}

.mesh-post-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mesh-post-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mesh-biz-tag {
  font-size: 10px;
  font-weight: 500;
  color: var(--brand-lavender);
  background: rgba(192, 132, 252, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

.mesh-post-time {
  font-size: 11px;
  color: var(--text-muted);
}

.mesh-post-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  word-wrap: break-word;
}

.mesh-menu-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
  flex-shrink: 0;
}

.mesh-menu-btn:hover {
  background: var(--hover-tint);
  color: var(--text-primary);
}

/* Empty State */
.mesh-empty {
  text-align: center;
  padding: 48px 16px;
}

/* Location Prompt */
.mesh-location-prompt {
  text-align: center;
  padding: 48px 24px;
}

.mesh-enable-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--gradient-brand);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-brand-sm);
  transition: transform 0.15s, box-shadow 0.15s;
}

.mesh-enable-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand);
}

/* Compose */
.mesh-compose {
  position: sticky;
  bottom: 0;
  background: var(--surface-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--surface-card-border);
  border-radius: 16px 16px 0 0;
  padding: 10px 12px 8px;
  margin: 0 -4px;
}

.mesh-compose-field {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 16px;
  padding: 6px 8px 6px 14px;
  transition: border-color 0.2s;
}

.mesh-compose-field:focus-within {
  border-color: var(--brand-lavender);
}

.mesh-compose-field textarea {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
  resize: none;
  min-height: 24px;
  max-height: 80px;
  overflow-y: auto;
  line-height: 1.4;
  padding: 4px 0;
}

.mesh-compose-field textarea::placeholder {
  color: var(--text-dim);
}

.mesh-compose-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.mesh-pin-toggle {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.mesh-pin-toggle:hover {
  background: var(--hover-tint);
  color: var(--text-primary);
}

.mesh-pin-toggle.active {
  background: rgba(192, 132, 252, 0.15);
  color: var(--brand-lavender);
}

.mesh-send-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-brand-sm);
  transition: transform 0.15s;
}

.mesh-send-btn:hover {
  transform: scale(1.05);
}

.mesh-compose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 0;
}

.mesh-char-count {
  font-size: 10px;
  color: var(--text-dim);
}

.mesh-pin-hint {
  font-size: 10px;
  color: var(--brand-lavender);
  font-weight: 500;
}

/* Action Sheet */
.mesh-action-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--overlay-dark);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.15s;
}

.mesh-action-sheet {
  background: var(--surface-modal);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 400px;
  padding: 8px 0;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  animation: slideUp 0.2s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.mesh-action-title {
  padding: 12px 20px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
}

.mesh-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  border: none;
  background: transparent;
  font-size: 15px;
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.mesh-action-btn:hover {
  background: var(--hover-tint);
}

.mesh-action-btn.danger {
  color: #ef4444;
}

.mesh-action-btn.cancel {
  justify-content: center;
  color: var(--text-muted);
  font-weight: 500;
  border-top: 1px solid var(--border-subtle);
  margin-top: 4px;
}

/* Feedback */
.feedback-btn {
  transition: all .2s;
  opacity: .4;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px
}

.feedback-btn:hover {
  opacity: .8
}

.feedback-btn.selected {
  opacity: 1
}

/* Citation & Suggestion */
.citation-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 4px
}

.citation-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--surface-dim);
  border: 1px solid var(--surface-card-border);
  color: var(--text-secondary);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis
}

.suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px
}

.suggestion-chip {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 16px;
  background: var(--surface-dim);
  border: 1px solid var(--surface-card-border);
  color: var(--brand-coral);
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
  font-family: inherit
}

.suggestion-chip:hover {
  background: var(--brand-coral);
  color: #fff;
  border-color: var(--brand-coral)
}

/* RTL */
[dir="rtl"] .msg-user {
  border-radius: 18px 18px 18px 4px
}

[dir="rtl"] .msg-ai {
  border-radius: 18px 18px 4px 18px
}

[dir="rtl"] .dm-bubble-sent {
  border-radius: 16px 16px 16px 4px
}

[dir="rtl"] .dm-bubble-received {
  border-radius: 16px 16px 4px 16px
}

/* ==================== TYPING INDICATOR ==================== */
.dm-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px;
  color: var(--text-muted);
  font-size: 12px
}

.dm-typing.hidden {
  display: none
}

.dm-typing-dots {
  display: flex;
  gap: 3px
}

.dm-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typingBounce 1.2s ease-in-out infinite
}

.dm-typing-dots span:nth-child(2) {
  animation-delay: .2s
}

.dm-typing-dots span:nth-child(3) {
  animation-delay: .4s
}

@keyframes typingBounce {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: .4
  }

  30% {
    transform: translateY(-4px);
    opacity: 1
  }
}

/* ==================== READ RECEIPTS ==================== */
.dm-tick {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
  letter-spacing: -2px
}

.dm-tick.read,
.dm-tick-read {
  color: #60a5fa
}

.dm-tick-pending {
  opacity: 0.5;
  animation: tick-pulse 1.2s ease-in-out infinite;
}

.dm-tick-queued {
  color: var(--text-dim);
}

.dm-tick-failed {
  color: #ef4444;
}

.dm-tick-sent {
  color: var(--text-muted);
}

@keyframes tick-pulse {

  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 0.8;
  }
}

/* ==================== REPLY SYSTEM ==================== */
.dm-reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: var(--surface-dim);
  border-left: 3px solid var(--accent, #6366f1);
  font-size: 12px;
  color: var(--text-secondary)
}

.dm-reply-bar.hidden {
  display: none
}

.reply-preview {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.reply-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px
}

.dm-reply-quote {
  background: var(--surface-dim);
  border-left: 3px solid var(--accent, #6366f1);
  border-radius: 4px;
  padding: 4px 8px;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  max-width: 75%
}

.dm-reply-from {
  display: block;
  font-weight: 600;
  font-size: 11px;
  color: var(--accent, #6366f1);
  margin-bottom: 2px
}

/* ==================== IMAGE MESSAGES ==================== */
.dm-image {
  max-width: 240px;
  max-height: 240px;
  border-radius: 12px;
  cursor: pointer;
  object-fit: cover
}

.dm-caption {
  font-size: 13px;
  margin-top: 4px;
  color: var(--text-secondary)
}

.dm-img-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted);
  flex-shrink: 0
}

.dm-img-btn:hover {
  color: var(--accent, #6366f1)
}

/* ==================== IMAGE LIGHTBOX ==================== */
.dm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  cursor: zoom-out
}

.dm-lightbox.active {
  opacity: 1;
  pointer-events: auto
}

.dm-lightbox img {
  max-width: 95vw;
  max-height: 90vh;
  border-radius: 8px;
  object-fit: contain
}

/* ==================== NEW CHAT OVERLAY ==================== */
.new-chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--page-bg);
  display: none;
  flex-direction: column;
}

.new-chat-overlay.active {
  display: flex;
}

.new-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--surface-card-border);
  background: var(--surface-card)
}

.new-chat-body {
  padding: 16px;
  max-width: 480px;
  margin: 0 auto;
  width: 100%
}

.new-chat-results {
  margin-top: 16px
}

.new-chat-result-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border)
}

.dm-start-btn {
  padding: 6px 16px;
  border-radius: 16px;
  border: none;
  background: var(--accent, #6366f1);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer
}

.dm-start-btn:hover {
  opacity: .9
}

/* ==================== CONTACT SEARCH + NEW CHAT BTN ==================== */
.dm-contact-search {
  width: 100%;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  margin-bottom: 8px;
  font-family: inherit
}

.dm-contact-search:focus {
  border-color: var(--accent, #6366f1)
}

.dm-new-chat-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--surface-card-border);
  background: var(--surface-card);
  color: var(--accent, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer
}

.dm-new-chat-btn:hover {
  background: var(--hover-tint)
}

[dir="rtl"] .history-panel {
  transform: translateX(100%);
  left: auto;
  right: 0
}

[dir="rtl"] .history-panel.open {
  transform: translateX(0)
}

[dir="rtl"] .lang-dropdown {
  right: auto;
  left: 0
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(12px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%)
  }

  to {
    transform: translateY(0)
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .6
  }
}

.animate-fade-in {
  animation: fadeIn .5s ease forwards
}

.pulse {
  animation: pulse 2s infinite
}

/* Skeleton Loading */
.skeleton {
  background: linear-gradient(90deg, var(--surface-dim) 25%, var(--surface-card) 50%, var(--surface-dim) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px
}

@keyframes shimmer {
  0% {
    background-position: 200% 0
  }

  100% {
    background-position: -200% 0
  }
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 4px
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 2px
}

textarea::-webkit-scrollbar {
  display: none
}

textarea {
  caret-color: var(--brand-lavender)
}

/* ==================== LinkedIn-Inspired Cards ==================== */
.glass-card {
  background: var(--surface-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--surface-card-border);
  border-radius: 16px
}

/* Filter Tabs */
.filter-tab {
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit
}

.filter-tab:hover {
  background: var(--hover-tint)
}

.filter-tab.active {
  background: var(--gradient-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-brand-sm)
}

/* Feed Items */
.feed-item {
  cursor: default
}

.feed-item:hover {
  box-shadow: var(--shadow-md)
}

.gradient-avatar {
  background: var(--gradient-brand)
}

.follow-btn {
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--brand-coral);
  background: transparent;
  color: var(--brand-coral);
  cursor: pointer;
  transition: all .2s;
  font-family: inherit
}

.follow-btn:hover {
  background: var(--brand-coral);
  color: #fff
}

.follow-btn.following {
  background: var(--brand-coral);
  color: #fff;
  border-color: var(--brand-coral)
}

/* Feed Actions */
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .2s;
  font-family: inherit
}

.action-btn:hover {
  background: var(--hover-tint);
  color: var(--text-primary)
}

.action-btn.upvoted {
  color: var(--brand-coral)
}

.action-btn.upvoted svg {
  fill: var(--brand-coral)
}

/* Line Clamp */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  ;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  ;
  -webkit-box-orient: vertical;
  overflow: hidden
}

/* Scrollbar Hide (horizontal scroll) */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none
}

.scrollbar-hide::-webkit-scrollbar {
  display: none
}

/* Discover Category Icons — constrain SVG size */
.domain-card svg,
.seasonal-card svg {
  max-width: 32px;
  max-height: 32px
}

/* Dark mode overrides for new components */
html.dark .filter-tab {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(71, 85, 105, 0.4);
  color: var(--text-secondary)
}

html.dark .filter-tab.active {
  background: var(--gradient-brand);
  color: #fff;
  border-color: transparent
}

html.dark .glass-card {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(71, 85, 105, 0.4)
}

html.dark .feed-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3)
}

html.dark .follow-btn {
  border-color: var(--brand-lavender);
  color: var(--brand-lavender)
}

html.dark .follow-btn:hover,
.dark .follow-btn.following {
  background: var(--brand-lavender);
  color: #fff;
  border-color: var(--brand-lavender)
}

/* Mesh Network Visualization */
.mesh-network-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.mesh-canvas {
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

/* Profile Avatars */
.profile-avatar {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 10;
}

.profile-avatar:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(192, 132, 252, 0.4);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar::after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #10B981;
  border: 2px solid var(--page-bg);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Avatar positions (positioned around mesh) */
.profile-avatar:nth-child(1) {
  top: 35%;
  left: 12%;
  border-color: #FF6B6B;
}

.profile-avatar:nth-child(2) {
  top: 25%;
  left: 25%;
  border-color: #C084FC;
}

.profile-avatar:nth-child(3) {
  top: 38%;
  right: 20%;
  border-color: #4ECDC4;
}

.profile-avatar:nth-child(4) {
  top: 42%;
  right: 12%;
  border-color: #FFB84D;
}

.profile-avatar:nth-child(5) {
  bottom: 30%;
  left: 18%;
  border-color: #60A5FA;
}

.profile-avatar:nth-child(6) {
  bottom: 35%;
  left: 32%;
  border-color: #F472B6;
}

.profile-avatar:nth-child(7) {
  bottom: 28%;
  right: 25%;
  border-color: #A78BFA;
}

.profile-avatar:nth-child(8) {
  bottom: 32%;
  right: 38%;
  border-color: #34D399;
}

/* Search Container on mesh */
.mesh-search-container {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 2rem;
}

.mesh-search-input {
  width: 100%;
  max-width: 600px;
  padding: 1.25rem 1.5rem 1.25rem 3.5rem;
  font-size: 1.1rem;
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(71, 85, 105, 0.5);
  border-radius: 9999px;
  color: var(--text-primary);
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.mesh-search-input:focus {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(168, 168, 248, 0.6);
  box-shadow: 0 8px 32px rgba(192, 132, 252, 0.3);
}

.mesh-search-input::placeholder {
  color: var(--text-muted);
}

.search-icon {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

/* Vertical Side Navigation — Nana Banana 2 */
.side-nav {
  position: fixed;
  right: 24px;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 50;
  padding: 16px 10px;
  background: rgba(10, 14, 26, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.nav-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.nav-btn:hover {
  color: #fff;
  transform: scale(1.15);
}

.nav-btn.active {
  color: #fff;
}

.nav-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-btn:hover .nav-icon {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
}

.nav-btn.active .nav-icon {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(6, 182, 212, 0.5);
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.3), inset 0 0 8px rgba(6, 182, 212, 0.1);
}

.nav-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #EF4444;
  color: white;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 10px;
  min-width: 16px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Floating Brand (Top Left) */
.brand-floating-top {
  position: fixed;
  top: 32px;
  left: 32px;
  z-index: 50;
  pointer-events: none;
  /* Just visual */
}

/* Adjust Main Content to full height since top bar is gone */
.main-content {
  padding-top: 0 !important;
  /* Override previous padding */
  padding-bottom: 0 !important;
  height: 100vh;
  height: 100dvh;
}

/* Search Orb Special Styling in Vertical Nav */
.search-orb circle {
  fill: currentColor;
  opacity: 0.1;
}

.active .search-orb circle {
  fill: currentColor;
  opacity: 0.2;
}

/* Top Navigation (Right Aligned) */
.nav-center {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* Move from center to right */
  gap: 4px;
  /* Tighter spacing */
  flex: 1;
  margin-right: 12px;
}

.nav-btn-top {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.nav-btn-top:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.nav-btn-top.active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
}

.nav-badge-top {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #EF4444;
  color: white;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 6px;
  min-width: 14px;
  font-weight: 700;
  border: 1px solid var(--surface-bg);
}


/* Right Sidebar Navigation */
.right-sidebar {
  position: fixed;
  right: 32px;
  /* Aligned between Moon and Data icons */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 40;
  /* Ensure it's above mesh but below modals */
}

.nav-btn-right {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.profile-btn-img,
.profile-btn-initials {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.profile-btn-initials {
  display: flex !important;
  align-items: center;
  justify-content: center;
}


.nav-btn-right:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transform: scale(1.1);
}

.nav-btn-right.active {
  color: #fff;
}

/* Active Indicator Dot */
.nav-btn-right.active::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
}

.search-orb-nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  /* Slightly prominent */
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-btn-right.active .search-orb-nav {
  background: rgba(255, 255, 255, 0.2);
}

/* ==================== P2P COLLABORATIVE SEARCH ==================== */
@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.collab-active {
  transform: scale(1.1);
}

.no-peers-message {
  padding: 12px 16px;
  background: rgba(251, 191, 36, 0.1);
  border-left: 3px solid #FBBF24;
  border-radius: 8px;
  margin: 8px 0;
}

html.dark .no-peers-message {
  background: rgba(251, 191, 36, 0.05);
  border-color: #F59E0B;
}

/* ==================== MODERN CONVERSATION LIST ==================== */
.conv-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
  position: relative;
}

.conv-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.conv-item-active {
  background: rgba(192, 132, 252, 0.1) !important;
  border-left: 3px solid #C084FC;
  padding-left: 9px;
}

.conv-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.conv-avatar-ai {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.conv-avatar-group {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.peer-count {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: #10b981;
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 10px;
  border: 2px solid #0f172a;
}

.conv-content {
  flex: 1;
  min-width: 0;
}

.conv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.conv-title {
  font-size: 14px;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.conv-time {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  margin-left: 8px;
}

.conv-preview {
  font-size: 13px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.conv-unread-dot {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: #3b82f6;
  border-radius: 50%;
}

.empty-history {
  text-align: center;
  padding: 60px 20px;
  color: #64748b;
}

.empty-text {
  font-size: 15px;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 4px;
}

.empty-subtext {
  font-size: 13px;
  color: #64748b;
}

/* History panel updates */
.history-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.history-list::-webkit-scrollbar {
  width: 6px;
}

.history-list::-webkit-scrollbar-track {
  background: transparent;
}

.history-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.history-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

.new-chat-btn-full {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.new-chat-btn-full:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.new-chat-btn-full:active {
  transform: translateY(0);
}

.history-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.8);
}

/* ==================== PEER INVITE UI ==================== */
.peer-invite-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: transparent;
  transition: background 0.2s ease;
  margin-bottom: 8px;
}

.peer-invite-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.skill-badge {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  margin-right: 8px;
}

.invite-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.invite-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.invite-btn:active {
  transform: scale(0.95);
}

.peer-invite-pending {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 12px;
  text-align: center;
}

/* ==================== GEMINI-LIKE CHAT LAYOUT ==================== */
.chat-messages {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 20px 160px;
  /* Bottom padding accounts for fixed chat input */
}

/* Centered conversation thread — translucent over mesh visualization */
.chat-area {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

html.dark .chat-area {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Message alignment - Gemini style */
.chat-messages>div {
  max-width: 100%;
}

/* User messages - right aligned */
.chat-messages .flex.justify-end {
  justify-content: flex-end;
}

/* AI messages - left aligned with max width */
.chat-messages .flex.items-start {
  max-width: 100%;
}

.msg-ai {
  max-width: 100%;
}

/* ==================== NANA BANANA 2: LOGIN WALL ==================== */
.login-wall {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #0a0e1a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  isolation: isolate;
  overflow: hidden;
}

/* Animated mesh network background */
.login-wall::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 20% 30%, rgba(99, 102, 241, 0.15) 0%, transparent 70%),
    radial-gradient(ellipse 500px 350px at 80% 70%, rgba(168, 85, 247, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 300px 300px at 50% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 70%);
  animation: meshPulse 8s ease-in-out infinite alternate;
  pointer-events: none;
}

.login-wall::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.15), transparent),
    radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.1), transparent),
    radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.12), transparent),
    radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,0.08), transparent),
    radial-gradient(1px 1px at 90% 40%, rgba(255,255,255,0.1), transparent);
  pointer-events: none;
}

@keyframes meshPulse {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.05); }
}

.login-wall.hidden {
  display: none !important;
  pointer-events: none;
}

/* Ensure app shell is completely hidden when not authenticated */
.app-shell.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.login-container {
  width: 100%;
  max-width: 440px;
  background: rgba(15, 20, 40, 0.65);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding: 48px 40px;
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.6),
    0 0 80px rgba(99, 102, 241, 0.1),
    0 0 120px rgba(168, 85, 247, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: fadeInScale 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.login-container::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.6), rgba(168, 85, 247, 0.6), transparent);
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.login-header {
  text-align: center;
  margin-bottom: 32px;
}

.login-header .brand-orb {
  margin: 0 auto 16px;
}

.brand-mark-large svg rect {
  fill: url(#brandGradient);
}

.login-title {
  font-size: 32px;
  font-weight: 800;
  background: linear-gradient(135deg, #06b6d4 0%, #a855f7 50%, #6366f1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  letter-spacing: -1px;
}

.login-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}

.auth-form {
  display: none;
}

.auth-form.active {
  display: block;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

.auth-form-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-form-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.3), transparent);
}

.form-group {
  margin-bottom: 16px;
}

.auth-input {
  width: 100%;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(15, 23, 42, 0.6);
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-input:focus {
  background: rgba(15, 23, 42, 0.8);
  border-color: rgba(6, 182, 212, 0.5);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1), 0 0 20px rgba(6, 182, 212, 0.1);
}

.auth-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.auth-btn {
  width: 100%;
  padding: 14px 20px;
  border-radius: 14px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-top: 8px;
}

.auth-btn.primary {
  background: linear-gradient(135deg, #06b6d4 0%, #6366f1 50%, #a855f7 100%);
  color: #fff;
  box-shadow: 0 10px 30px -5px rgba(99, 102, 241, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
}

.auth-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px -5px rgba(99, 102, 241, 0.5), 0 0 20px rgba(6, 182, 212, 0.2);
}

.auth-btn.primary:active {
  transform: translateY(0);
}

.auth-switch {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-secondary);
}

.auth-switch .link-btn {
  background: none;
  border: none;
  color: var(--brand-lavender);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  font-family: inherit;
  font-size: inherit;
  transition: opacity 0.2s;
}

.auth-switch .link-btn:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.auth-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #EF4444;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 16px;
  animation: shake 0.3s ease-out;
}

.auth-error.hidden {
  display: none;
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-4px);
  }

  75% {
    transform: translateX(4px);
  }
}

.auth-loading {
  text-align: center;
  padding: 40px 20px;
}

.auth-loading.hidden {
  display: none;
}

.spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  border: 3px solid var(--surface-card-border);
  border-top-color: var(--brand-lavender);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.auth-loading p {
  color: var(--text-secondary);
  font-size: 14px;
}

/* User Badge */
.user-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(192, 132, 252, 0.1);
  border: 1px solid var(--surface-card-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-lavender);
}

.user-badge.hidden {
  display: none;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .login-container {
    padding: 32px 24px;
  }

  .login-title {
    font-size: 24px;
  }

  .auth-form-title {
    font-size: 18px;
  }
}

/* ==================== TWO-PANEL MESSAGING LAYOUT ==================== */

#view-social.active {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}

.messaging-container {
  display: flex;
  flex: 1;
  height: 100%;
  overflow: hidden;
}

/* --- Left Panel: Conversation Sidebar --- */
.msg-sidebar {
  width: 380px;
  min-width: 320px;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(10, 17, 34, 0.98) 100%);
  overflow: hidden;
}

.msg-sidebar-header {
  display: flex;
  align-items: center;
  padding: 20px 20px 14px;
  padding-top: max(20px, env(safe-area-inset-top));
  gap: 6px;
}

.msg-sidebar-title {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  flex: 1;
  letter-spacing: -0.3px;
}

.msg-new-chat-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.msg-new-chat-btn:hover {
  background: rgba(99, 102, 241, 0.2);
  color: #818cf8;
  transform: scale(1.05);
}

.msg-new-chat-btn:active {
  transform: scale(0.95);
}

.msg-filter-tabs {
  display: flex;
  gap: 6px;
  padding: 0 16px 12px;
}

.msg-filter-tab {
  padding: 6px 14px;
  border: none;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.msg-filter-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

.msg-filter-tab.active {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.msg-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 0 5px;
}

.msg-filter-tab.active .msg-filter-count {
  background: rgba(255, 255, 255, 0.25);
}

/* ==================== CATEGORY TABS ==================== */
.msg-category-tabs {
  display: flex;
  gap: 4px;
  padding: 0 12px 12px;
}

.msg-category-tab {
  flex: 1;
  padding: 8px 6px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: relative;
}

.msg-category-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

.msg-category-tab.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15));
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.25);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}

.msg-category-tab svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.msg-category-tab.active svg {
  opacity: 1;
  color: #818cf8;
}

.msg-category-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
  animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }

  50% {
    opacity: 0.7;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
  }
}

/* ==================== THREAD LIST ITEMS ==================== */
.thread-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.thread-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.thread-item.active {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.15);
}

.thread-item-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

.thread-item-details {
  flex: 1;
  min-width: 0;
}

.thread-item-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-item-preview {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.thread-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
}

.thread-active-count {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #22c55e;
  font-weight: 600;
  font-size: 11px;
}

.thread-active-count::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
}

/* ==================== THREAD PARTICIPANT STRIP ==================== */
.thread-participants {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: 8px;
}

.thread-participants.hidden {
  display: none;
}

.thread-participant-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(15, 23, 42, 0.98);
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  margin-left: -6px;
  position: relative;
  overflow: hidden;
}

.thread-participant-avatar:first-child {
  margin-left: 0;
}

.thread-participant-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.thread-participant-count {
  margin-left: 6px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Category-specific thread icon colors */
.thread-icon-agriculture {
  background: linear-gradient(135deg, #10b981, #059669);
}

.thread-icon-health {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.thread-icon-education {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.thread-icon-business {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.thread-icon-technology {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.thread-icon-culture {
  background: linear-gradient(135deg, #ec4899, #db2777);
}

.thread-icon-general {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
}

/* ==================== SECTION HEADERS IN LIST ==================== */
.msg-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 16px 12px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.msg-empty-state {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: 13px;
}

.msg-empty-state p+p {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.7;
}

.msg-search-input {
  margin: 0 16px 12px;
  padding: 10px 12px 10px 38px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  font-family: inherit;
  transition: all 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 15px;
}

.msg-search-input:focus {
  border-color: rgba(99, 102, 241, 0.4);
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.msg-conversation-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 8px;
}

/* Conversation list item */
.msg-conv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 68px;
}

.msg-conv-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.msg-conv-item:active {
  transform: scale(0.99);
}

.msg-conv-item.active {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.15);
}

.msg-conv-avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  overflow: hidden;
}

.msg-conv-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.msg-conv-avatar .presence-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2.5px solid rgba(15, 23, 42, 0.98);
  background: #475569;
  z-index: 1;
}

.msg-conv-avatar .presence-dot.online {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

.msg-conv-details {
  flex: 1;
  min-width: 0;
}

.msg-conv-top-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.msg-conv-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-conv-time {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  font-weight: 400;
}

.msg-conv-time.has-unread {
  color: #818cf8;
  font-weight: 600;
}

.msg-conv-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.msg-conv-preview {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.msg-conv-preview.has-unread {
  color: var(--text-secondary);
  font-weight: 500;
}

.msg-conv-unread {
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(99, 102, 241, 0.3);
}

/* Blue dot for seen-no-count */
.msg-conv-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6366f1;
  flex-shrink: 0;
}

/* Section headers in conversation list */
.msg-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 12px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

/* --- Right Panel: Active Chat --- */
.msg-chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: var(--page-bg);
}

.msg-chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 32px;
  gap: 8px;
}

.msg-chat-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 24px;
  background: rgba(99, 102, 241, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.msg-chat-empty-title {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.msg-chat-empty-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
  max-width: 280px;
  line-height: 1.5;
}

.msg-chat-active {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.msg-chat-active.hidden {
  display: none;
}

.msg-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  padding-top: max(12px, env(safe-area-inset-top));
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
  flex-shrink: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.msg-back-btn {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}

.msg-back-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.msg-header-avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  overflow: hidden;
  position: relative;
}

.msg-header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

.msg-header-avatar .presence-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(15, 23, 42, 0.98);
  background: #94a3b8;
}

.msg-header-avatar .presence-dot.online {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

.msg-chat-contact-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.msg-chat-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.msg-chat-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.msg-chat-encrypted {
  font-size: 12px;
  color: var(--text-muted);
}

.msg-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  -webkit-overflow-scrolling: touch;
}

.msg-chat-input-wrap {
  padding: 10px 20px 14px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  background: rgba(15, 23, 42, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

/* --- Mobile: Single panel mode --- */
@media (max-width: 768px) {
  .msg-sidebar {
    width: 100%;
    max-width: none;
    min-width: auto;
    border-right: none;
  }

  .msg-chat-area {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: var(--page-bg);
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .msg-chat-area.slide-in {
    transform: translateX(0);
  }

  .msg-back-btn {
    display: flex;
  }

  .messaging-container {
    position: relative;
  }
}

/* ==================== DISCOVER VIEW ==================== */
.discover-content h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-sans);
}

.discover-content p {
  color: var(--text-secondary);
}

.discover-content h3 {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.seasonal-card {
  transition: transform 0.15s ease;
}

.seasonal-card:active {
  transform: scale(0.97);
}

.domain-card {
  transition: transform 0.15s ease;
}

.domain-card:active {
  transform: scale(0.97);
}

.popular-q {
  transition: background 0.15s ease;
}

.popular-q:hover {
  background: var(--hover-tint);
}

/* ==================== LOADING SKELETONS ==================== */
@keyframes skeleton-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.skeleton-card {
  padding: 16px;
  border-radius: 16px;
  background: var(--surface-card);
  margin-bottom: 12px;
}

.skeleton-line {
  background: var(--surface-dim);
  border-radius: 8px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* ==================== EMPTY & ERROR STATES ==================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
}

.empty-state-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.empty-state-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ==================== SKELETON LOADING ==================== */
@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.skeleton-pulse {
  background: linear-gradient(90deg, var(--glass-bg, rgba(255, 255, 255, 0.06)) 25%, rgba(255, 255, 255, 0.12) 50%, var(--glass-bg, rgba(255, 255, 255, 0.06)) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}

.skeleton-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-line {
  height: 12px;
  border-radius: 6px;
}

.skeleton-line-short {
  width: 55%;
}

.skeleton-line-long {
  width: 80%;
}

/* ==================== SIGNALS VIEW ==================== */
.signals-content {
  max-width: 640px;
  margin: 0 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.signals-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

/* Signal cards */
.signal-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: 16px;
  padding: 16px;
  backdrop-filter: blur(12px);
}

/* Sentiment */
.sentiment-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.08));
}

.sentiment-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}

.sentiment-greed {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.sentiment-neutral {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}

.sentiment-fear {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

.sentiment-bar-wrap {
  height: 6px;
  background: linear-gradient(90deg, #dc2626 0%, #f59e0b 50%, #22c55e 100%);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.sentiment-bar {
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  position: absolute;
  right: 0;
  border-radius: 0 3px 3px 0;
  transition: width 0.5s ease;
}

/* Market ticker grid */
.market-ticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.market-ticker-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}

.ticker-pair {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.ticker-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 4px 0 2px;
  font-variant-numeric: tabular-nums;
}

.ticker-change {
  font-size: 12px;
  font-weight: 600;
}

.signal-up {
  color: #16a34a;
}

.signal-down {
  color: #dc2626;
}

/* Signals CTA in chat */
.signals-cta-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.12));
  border: 1px solid rgba(99, 102, 241, 0.25);
  color: #818cf8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.signals-cta-card:hover {
  background: rgba(99, 102, 241, 0.2);
}

.signals-cta-card:active {
  transform: scale(0.97);
}

/* Event cards */
.event-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.event-tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
}

.event-impact {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.impact-high {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.impact-medium {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.impact-low {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.event-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.4;
}

.event-explanation {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
}

.event-why {
  font-size: 12px;
  color: var(--text-secondary);
  background: rgba(99, 102, 241, 0.06);
  border-left: 3px solid #6366f1;
  padding: 8px 12px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 8px;
  line-height: 1.5;
}

.event-disclaimer {
  font-size: 10px;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 6px;
}

.event-ask-btn {
  font-size: 12px;
  font-weight: 600;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.15s;
}

.event-ask-btn:hover {
  background: rgba(99, 102, 241, 0.15);
}

.event-ask-btn:active {
  transform: scale(0.97);
}

/* Lesson cards */
.lesson-card {
  border-left: 3px solid #3b82f6;
}

.lesson-category {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: #3b82f6;
  margin-bottom: 4px;
}

.lesson-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.lesson-body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Community signals */
.community-signal-user {
  font-size: 12px;
  font-weight: 600;
  color: #6366f1;
}

.community-signal-time {
  font-size: 10px;
  color: var(--text-dim);
}

.community-signal-text {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
}

.community-confidence {
  font-size: 11px;
  color: #f59e0b;
}

/* Community signal avatars */
.community-signal-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.community-signal-avatar-fallback {
  display: flex;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #6366f1;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

/* Community signal action bar */
.community-signal-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--surface-card-border);
}

/* Vote buttons */
.signal-vote-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  transition: color 0.15s, background 0.15s;
  min-width: 32px;
  min-height: 32px;
  justify-content: center;
}

.signal-vote-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.signal-vote-btn.voted-up {
  color: #16a34a;
}

.signal-vote-btn.voted-down {
  color: #dc2626;
}

.signal-vote-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 20px;
  text-align: center;
}

/* Action buttons (learn more, report) */
.signal-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s, background 0.15s;
  min-height: 32px;
}

.signal-action-btn:hover {
  background: rgba(99, 102, 241, 0.1);
  color: #818cf8;
}

.signal-report-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}

/* ---- Advanced Analysis Cards (MFDFA, TE, TDA) ---- */
.advanced-signal-card {
  border-left: 3px solid #a855f7;
  position: relative;
}

.quant-symbol-select {
  background: var(--card-bg, #1e1e2e);
  color: var(--text-primary, #e0e0e0);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  min-height: 32px;
}

.quant-symbol-select:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* Custom dropdown (replaces native <select> for consistent downward direction) */
.custom-dropdown {
  position: relative;
  display: inline-block;
}

.custom-dropdown-btn {
  background: var(--card-bg, #1e1e2e);
  color: var(--text-primary, #e0e0e0);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  padding: 4px 24px 4px 8px;
  font-size: 12px;
  cursor: pointer;
  min-height: 32px;
  white-space: nowrap;
  position: relative;
}

.custom-dropdown-btn::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-secondary, #999);
}

.custom-dropdown-btn:hover {
  border-color: #a855f7;
}

.custom-dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  background: var(--card-bg, #1e1e2e);
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  margin-top: 4px;
  max-height: 260px;
  overflow-y: auto;
  min-width: 120px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.custom-dropdown.open .custom-dropdown-list {
  display: block;
}

.custom-dropdown-item {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-primary, #e0e0e0);
  cursor: pointer;
  white-space: nowrap;
}

.custom-dropdown-item:hover {
  background: rgba(168, 85, 247, 0.15);
}

.custom-dropdown-item.active {
  color: #a855f7;
  font-weight: 600;
}

.hurst-gauge {
  height: 4px;
  background: linear-gradient(90deg, #3b82f6 0%, #fbbf24 50%, #22c55e 100%);
  border-radius: 2px;
  position: relative;
  margin-top: 4px;
}

.hurst-marker {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid var(--text-primary);
  border-radius: 50%;
  top: -3px;
  transform: translateX(-50%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.quant-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  margin-top: 4px;
}

.quant-metric-label {
  color: var(--text-muted);
  font-weight: 500;
}

.quant-metric-value {
  font-weight: 700;
  color: var(--text-primary);
}

.regime-trending {
  color: #22c55e;
}

.regime-reverting {
  color: #3b82f6;
}

.regime-random {
  color: #fbbf24;
}

/* Transfer Entropy flow rows */
.te-flow-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
}

.te-flow-source,
.te-flow-target {
  font-weight: 600;
  color: var(--text-primary);
  min-width: 32px;
}

.te-flow-arrow {
  font-size: 14px;
  font-weight: 700;
}

.te-strong {
  color: #22c55e;
}

.te-moderate {
  color: #fbbf24;
}

.te-weak {
  color: var(--text-dim);
}

.te-flow-value {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* TDA regime indicator */
.regime-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.regime-dot-stable {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.regime-dot-warning {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
  animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* Compose button (FAB) */
.signal-compose-btn {
  position: fixed;
  bottom: 80px;
  right: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  transition: transform 0.15s;
}

.signal-compose-btn:active {
  transform: scale(0.92);
}

/* Compose modal */
.signal-compose-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.signal-compose-modal {
  width: 100%;
  max-width: 500px;
  background: var(--surface-modal);
  border-radius: 20px 20px 0 0;
  padding: 20px;
  animation: slideUpModal 0.25s ease;
}

@keyframes slideUpModal {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.signal-compose-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 13px;
  margin-bottom: 10px;
  font-family: var(--font-sans);
}

.signal-compose-textarea {
  width: 100%;
  height: 100px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 13px;
  resize: none;
  margin-bottom: 10px;
  font-family: var(--font-sans);
  line-height: 1.5;
}

.signal-submit-btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
}

.signal-submit-btn:active {
  opacity: 0.85;
}

/* Global disclaimer footer */
.signal-global-disclaimer {
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  padding: 16px;
  line-height: 1.6;
  border-top: 1px solid var(--surface-card-border);
}

/* Skeleton shimmer for signals */
.skeleton-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: 16px;
  padding: 16px;
}

.skeleton-card .skeleton-line {
  background: linear-gradient(90deg, var(--surface-dim) 25%, var(--surface-card) 50%, var(--surface-dim) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.skeleton-line.w-40 {
  width: 160px;
}

.skeleton-line.w-full {
  width: 100%;
}

/* ---- Portfolio Tracker ---- */
.portfolio-add-btn {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.portfolio-add-btn:hover {
  background: rgba(99, 102, 241, 0.25);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.portfolio-item {
  background: var(--surface-card, rgba(30, 30, 46, 0.6));
  border: 1px solid var(--border-color, #333);
  border-radius: 10px;
  padding: 10px;
}

.portfolio-symbol {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}

.portfolio-price {
  font-size: 12px;
  color: var(--text-primary);
  margin-top: 4px;
}

.portfolio-holdings {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.portfolio-total {
  font-size: 13px;
  color: var(--text-primary);
  text-align: right;
  padding: 6px 0;
}

.portfolio-remove-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}

.portfolio-remove-btn:hover {
  color: #f87171;
}

.portfolio-alert-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
}

.portfolio-alerts {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.portfolio-alert-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text-muted);
}

/* ---- Hurst History Chart ---- */
.hurst-chart {
  width: 100%;
  height: auto;
  max-height: 140px;
  display: block;
}

/* ---- Correlation Matrix ---- */
.corr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  text-align: center;
}

.corr-table th {
  padding: 4px 3px;
  font-weight: 600;
  font-size: 9px;
  color: var(--text-muted);
  white-space: nowrap;
}

.corr-label {
  text-align: left;
  font-weight: 600;
  font-size: 9px;
  color: var(--text-muted);
  padding-right: 6px;
  white-space: nowrap;
}

.corr-cell {
  padding: 4px 2px;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-radius: 3px;
}

.corr-strong-pos {
  background: rgba(34, 197, 94, 0.25);
  color: #22c55e;
}

.corr-mod-pos {
  background: rgba(34, 197, 94, 0.1);
  color: #4ade80;
}

.corr-neutral {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dim);
}

.corr-mod-neg {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}

.corr-strong-neg {
  background: rgba(239, 68, 68, 0.25);
  color: #ef4444;
}

/* P&L display */
.portfolio-pnl {
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.pnl-profit {
  color: #22c55e;
}

.pnl-loss {
  color: #ef4444;
}

/* Ticker region tag */
.ticker-region {
  font-size: 9px;
  color: var(--text-dim);
  margin-top: 1px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Risk metrics grid */
.risk-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.risk-metric-item {
  text-align: center;
  padding: 8px 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.risk-metric-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.risk-metric-value {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.metric-good {
  color: #22c55e;
}

.metric-ok {
  color: #f59e0b;
}

.metric-bad {
  color: #ef4444;
}

.risk-details summary {
  font-size: 11px;
}

.risk-explanation {
  font-size: 10px;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.5;
  padding: 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
}

/* Backtester controls */
.backtest-controls {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.backtest-run-btn {
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  background: var(--gradient-brand);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}

.backtest-run-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.backtest-run-btn:hover:not(:disabled) {
  filter: brightness(1.1);
}

.backtest-results {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.backtest-result-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  text-transform: capitalize;
}

.backtest-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.backtest-stat {
  text-align: center;
}

.backtest-stat-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}

.backtest-stat-value {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.backtest-benchmark {
  font-size: 11px;
  padding: 4px 0;
}

/* Onboarding overlay — Nana Banana 2 */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 14, 26, 0.85);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
}

.onboarding-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.onboarding-card {
  background: rgba(15, 20, 40, 0.8);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-radius: 24px;
  padding: 32px 28px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 60px rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

.onboarding-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.5), rgba(99, 102, 241, 0.5), transparent);
}

.onboarding-step-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}

.onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition: all 0.3s;
}

.onboarding-dot.active {
  background: linear-gradient(135deg, #06b6d4, #6366f1);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
}

.onboarding-title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  margin-bottom: 8px;
}

.onboarding-body {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 16px;
}

.onboarding-icon {
  text-align: center;
  font-size: 40px;
  margin-bottom: 12px;
}

.onboarding-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.onboarding-btn {
  padding: 12px 24px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.25s;
}

.onboarding-btn-primary {
  background: linear-gradient(135deg, #06b6d4, #6366f1, #a855f7);
  color: white;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
}

.onboarding-btn-skip {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Mobile: responsive risk + backtest */
@media (max-width: 480px) {
  .corr-table {
    font-size: 8px;
  }

  .corr-table th {
    font-size: 7px;
    padding: 2px 1px;
  }

  .corr-label {
    font-size: 7px;
    padding-right: 3px;
  }

  .corr-cell {
    padding: 3px 1px;
    font-size: 8px;
  }

  .portfolio-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .risk-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .risk-metric-value {
    font-size: 14px;
  }

  .backtest-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .backtest-controls {
    flex-direction: column;
  }

  .backtest-controls select,
  .backtest-run-btn {
    width: 100%;
  }
}

.skeleton-line.w-3\/4 {
  width: 75%;
}

/* ==================== ALERT TYPE BADGES ==================== */
.alert-type-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 4px;
  letter-spacing: 0.5px;
}

.alert-type-regime {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
}

.alert-type-hurst {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.alert-type-drawdown {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* ==================== PREDICTION BADGES ==================== */
.signal-prediction-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.signal-prediction-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 6px;
}

.pred-bullish {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.pred-bearish {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.pred-neutral {
  background: rgba(251, 191, 36, 0.15);
  color: #f59e0b;
}

.pred-expired {
  opacity: 0.5;
}

.pred-icon {
  font-size: 10px;
}

.pred-tf {
  font-size: 9px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 4px;
  border-radius: 3px;
}

.pred-status {
  font-size: 9px;
  font-style: italic;
  opacity: 0.7;
}

@media (max-width: 480px) {
  .signal-prediction-row {
    flex-direction: column;
  }
}

/* ==================== PRICE CHART ==================== */
.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.chart-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chart-current-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.chart-range-bar {
  display: flex;
  gap: 4px;
}

.chart-range-btn {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(150, 150, 170, 0.3);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.chart-range-btn:hover {
  border-color: var(--brand-lavender);
  color: var(--brand-lavender);
}

.chart-range-btn.active {
  background: var(--brand-lavender);
  color: #fff;
  border-color: var(--brand-lavender);
}

.price-chart-svg {
  width: 100%;
  border-radius: 6px;
}

/* ==================== ASSET SCREENER ==================== */
.screener-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.screener-filter-btn {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(150, 150, 170, 0.3);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.screener-filter-btn:hover {
  border-color: var(--brand-teal);
  color: var(--brand-teal);
}

.screener-filter-btn.active {
  background: var(--brand-teal);
  color: #fff;
  border-color: var(--brand-teal);
}

.screener-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.screener-table thead th {
  text-align: left;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(150, 150, 170, 0.2);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.screener-table thead th:hover {
  color: var(--text-primary);
}

.screener-table tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(150, 150, 170, 0.08);
  white-space: nowrap;
  color: var(--text-primary);
}

.screener-table tbody tr:hover {
  background: rgba(150, 150, 170, 0.06);
}

.screener-symbol {
  font-weight: 700;
}

.screener-class-tag {
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 6px;
  letter-spacing: 0.5px;
  background: rgba(150, 150, 170, 0.12);
  color: var(--text-dim);
}

/* ==================== NEWS FEED ==================== */
.news-card {
  padding: 10px 14px;
}

.news-source {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}

.news-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.news-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
  text-decoration: none;
  margin-top: 4px;
}

.news-title:hover {
  color: var(--brand-lavender);
  text-decoration: underline;
}

.news-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 4px;
}

@media (max-width: 600px) {
  .screener-table {
    font-size: 11px;
  }

  .screener-table thead th,
  .screener-table tbody td {
    padding: 5px 4px;
  }

  .chart-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==================== SEARCH-FIRST: RESULT CARDS + EXPLAIN ==================== */
.search-results-wrapper {
  flex: 1;
  min-width: 0;
}

.search-results-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.search-result-card {
  padding: 12px 16px;
  border-left: 3px solid var(--brand-lavender, #C084FC);
  margin-bottom: 8px;
  background: var(--surface-card, rgba(255, 255, 255, 0.75));
  border-radius: 8px;
  transition: background 0.15s;
}

.search-result-card:hover {
  background: var(--surface-heavy, rgba(255, 255, 255, 0.95));
}

.search-result-content {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary, #111827);
}

.search-result-meta {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.search-result-score,
.search-result-source,
.search-result-lang {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(192, 132, 252, 0.1);
  color: var(--text-muted, #6B7280);
}

.search-result-score {
  color: var(--brand-teal, #4ECDC4);
  font-weight: 600;
}

.explain-btn {
  min-height: 48px;
  padding: 12px 24px;
  background: var(--gradient-short, linear-gradient(135deg, #FF6B6B, #4ECDC4));
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  margin-top: 12px;
  transition: opacity 0.2s, transform 0.1s;
}

.explain-btn:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}

.explain-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.explain-btn[data-state="done"] {
  background: var(--surface-card, rgba(255, 255, 255, 0.75));
  color: var(--text-muted, #6B7280);
  border: 1px solid var(--surface-card-border, rgba(255, 255, 255, 0.9));
  font-size: 12px;
  min-height: 36px;
  padding: 8px 16px;
}

.ai-explain-area {
  padding: 16px;
  background: var(--surface-card, rgba(255, 255, 255, 0.75));
  border: 1px solid var(--surface-card-border, rgba(255, 255, 255, 0.9));
  border-radius: 8px;
  margin-top: 12px;
  line-height: 1.6;
  font-size: 14px;
  color: var(--text-primary, #111827);
}

.explain-loading {
  color: var(--text-muted, #6B7280);
  font-style: italic;
}

/* Dark mode overrides for search-first */
@media (prefers-color-scheme: dark) {
  .search-result-card {
    background: var(--surface-card, #1e293b);
    border-left-color: var(--brand-lavender, #C084FC);
  }

  .search-result-card:hover {
    background: var(--surface-heavy, #0f172a);
  }

  .search-result-content {
    color: var(--text-primary, #e2e8f0);
  }

  .search-result-score,
  .search-result-source,
  .search-result-lang {
    background: rgba(192, 132, 252, 0.15);
    color: var(--text-muted, #94a3b8);
  }

  .ai-explain-area {
    background: var(--surface-card, #1e293b);
    border-color: var(--surface-card-border, #334155);
    color: var(--text-primary, #e2e8f0);
  }

  .explain-btn[data-state="done"] {
    background: var(--surface-card, #1e293b);
    border-color: var(--surface-card-border, #334155);
    color: var(--text-muted, #94a3b8);
  }
}

@media (max-width: 600px) {
  .search-result-card {
    padding: 10px 12px;
  }

  .explain-btn {
    font-size: 16px;
  }
}

/* Social Mesh Network Pivot Styles */

/* Base overrides for Nanabana 2.0 aesthetics */
/* Deep navy abstract background, with glassmorphism panels */

:root {
  --social-sidebar-width: 320px;
  --social-neon-purple: #c084fc;
  --social-neon-cyan: #4ecdc4;
  --social-bg-dark: #0f172a;
  --social-panel-bg: rgba(30, 41, 59, 0.6);
  --social-panel-border: rgba(71, 85, 105, 0.4);
  --social-glass-blur: blur(24px);
}

html.dark body {
  background: var(--social-bg-dark);
}

/* Redesigned View Container for Social Split View */
#view-social-mesh {
  display: flex !important;
  flex-direction: row !important;
  width: 100%;
  height: 100%;
  padding-top: var(--top-bar-height);
  padding-bottom: var(--tab-bar-height);
  padding-right: 80px;
  /* Make room for sideNav */
  overflow: hidden;
}

@media (max-width: 768px) {
  #view-social-mesh {
    flex-direction: column !important;
  }

  .network-radar-sidebar {
    width: 100% !important;
    height: 40% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--social-panel-border);
  }

  .live-feed-main {
    height: 60% !important;
  }
}

/* Network Radar Sidebar — Nana Banana 2 */
.network-radar-sidebar {
  width: var(--social-sidebar-width);
  height: 100%;
  background: rgba(10, 14, 26, 0.85);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-right: 1px solid rgba(99, 102, 241, 0.12);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 10;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
}

.radar-header {
  padding: 16px;
  border-bottom: 1px solid var(--social-panel-border);
}

.radar-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.radar-subtitle {
  font-size: 13px;
  color: var(--social-neon-cyan);
  display: flex;
  align-items: center;
  gap: 6px;
}

.radar-subtitle::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--social-neon-cyan);
  box-shadow: 0 0 8px var(--social-neon-cyan);
}

.radar-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Canvas Orbital Radar Container */
.radar-canvas-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 200px;
}

/* Radar User Card — Nana Banana 2 */
.radar-user-card {
  background: rgba(15, 20, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  position: relative;
}

.radar-user-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(6, 182, 212, 0.5), transparent);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.3s;
}

.radar-user-card:hover {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.2);
  transform: translateX(4px);
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.1);
}

.radar-user-card:hover::before {
  opacity: 1;
}

.radar-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-image: linear-gradient(to right, #0f172a, #0f172a), linear-gradient(135deg, var(--social-neon-purple), var(--social-neon-cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.radar-avatar img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block;
}

.radar-user-info {
  flex: 1;
  min-width: 0;
}

.radar-user-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.radar-user-title {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.radar-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.radar-tag {
  font-size: 10px;
  padding: 2px 8px;
  background: rgba(99, 102, 241, 0.12);
  color: rgba(168, 85, 247, 0.9);
  border-radius: 6px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  font-weight: 500;
}

.radar-distance {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* Ephemeral Live Feed Main Area */
.live-feed-main {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
  position: relative;
  background: transparent;
}

/* Feed Header — Nana Banana 2 */
.feed-header {
  padding: 16px 24px;
  border-bottom: 1px solid rgba(99, 102, 241, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 14, 26, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 5;
}

.feed-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.feed-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}

.feed-container {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

/* ==================== INTENT BEACONS & BOUNTIES ==================== */

:root {
  --intent-hiring: #4CAF50;
  --intent-seeking: #c084fc;
  --intent-social: #4ecdc4;
  --intent-bounty: #FF6B6B;
  --intent-bounty-gold: #FFD700;
}

.intent-aura {
  position: relative;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hiring Glow (Green) */
.intent-aura.hiring {
  box-shadow: 0 0 25px rgba(76, 175, 80, 0.4);
  border: 2px solid var(--intent-hiring) !important;
}

/* Seeking Glow (Purple) */
.intent-aura.seeking {
  box-shadow: 0 0 25px rgba(192, 132, 252, 0.4);
  border: 2px solid var(--intent-seeking) !important;
}

/* Social Glow (Cyan) */
.intent-aura.social {
  box-shadow: 0 0 25px rgba(78, 205, 196, 0.4);
  border: 2px solid var(--intent-social) !important;
}

/* Bounty Aura (Pulsing Pink) */
.intent-aura.bounty {
  border: 4px solid var(--intent-bounty) !important;
  animation: intent-bounty-pulse 2s infinite, intent-bounty-shake 5s infinite;
  box-shadow: 0 0 30px rgba(255, 107, 107, 0.5);
}

@keyframes intent-bounty-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7); }
  70% { box-shadow: 0 0 0 20px rgba(255, 107, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); }
}

@keyframes intent-bounty-shake {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.05); }
  50% { transform: scale(1.05) rotate(2deg); }
  55% { transform: scale(1.05) rotate(-2deg); }
  60% { transform: scale(1.05) rotate(0); }
}

/* Bounty Feed Card Styling */
.feed-post-card.bounty-post {
  border: 2px solid var(--intent-bounty) !important;
  background: linear-gradient(145deg, rgba(255, 107, 107, 0.1) 0%, rgba(15, 23, 42, 0.9) 100%);
  position: relative;
  overflow: hidden;
}

.bounty-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.25rem 0.75rem;
  background: var(--intent-bounty);
  color: white;
  border-radius: 4px;
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
  z-index: 10;
}

.bounty-reward {
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
  margin: 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bounty-timer {
  font-family: monospace;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--intent-bounty);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
}

/* Intent Selector Styling */
.intent-selector-wrap {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.intent-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.intent-select {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 0.5rem;
  border-radius: 8px;
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
  transition: all 0.2s;
}

.intent-select:focus {
  border-color: var(--brand-lavender);
  box-shadow: 0 0 10px rgba(192, 132, 252, 0.2);
}

/* Bounty Meta Row — floats ABOVE the composer */
.bounty-meta-row {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 600px;
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: 16px;
  align-items: center;
  transition: all 0.3s ease;
  z-index: 21;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
}

.bounty-meta-row.hidden {
  display: none;
}

.bounty-reward-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 107, 107, 0.3);
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.9rem;
  outline: none;
}

.bounty-duration-select {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 0.5rem;
  border-radius: 8px;
  font-size: 0.85rem;
  outline: none;
}

/* Intent Text Helper Labels */
.intent-text {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.intent-text.hiring { 
  background: rgba(76, 175, 80, 0.2); 
  color: var(--intent-hiring); 
}
.intent-text.seeking { 
  background: rgba(192, 132, 252, 0.2); 
  color: var(--intent-seeking); 
}
.intent-text.social { 
  background: rgba(78, 205, 196, 0.2); 
  color: var(--intent-social); 
}
.intent-text.bounty { 
  background: rgba(255, 107, 107, 0.2); 
  color: var(--intent-bounty); 
}

.feed-post-card {
  background: var(--social-panel-bg);
  backdrop-filter: var(--social-glass-blur);
  -webkit-backdrop-filter: var(--social-glass-blur);
  border: 1px solid var(--social-panel-border);
  border-radius: 16px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.feed-post-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.12), 0 0 16px rgba(6, 182, 212, 0.06);
  transform: translateY(-2px);
}

.feed-post-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(192, 132, 252, 0.5), rgba(78, 205, 196, 0.2), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Ephemeral Expiring Effect */
.feed-post-card.expiring-soon {
  opacity: 0.6;
}

.feed-post-card.expiring-very-soon {
  opacity: 0.3;
  filter: grayscale(0.5);
}

.post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.post-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.post-author-name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.post-timestamp {
  font-size: 12px;
  color: var(--text-muted);
}

.post-content {
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 16px;
}

.post-image {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 12px;
  margin-top: 12px;
}

.post-actions {
  display: flex;
  gap: 16px;
}

.post-action-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.post-action-btn:hover {
  color: var(--social-neon-cyan);
  background: rgba(6, 182, 212, 0.08);
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.1);
}

.post-expiration {
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 4px;
}

.post-expiration svg {
  width: 12px;
  height: 12px;
}

/* Composer Floating Action Bar — Nana Banana 2 */
.feed-composer-bar {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 600px;
  background: rgba(10, 14, 26, 0.85);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 20px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(99, 102, 241, 0.08);
  z-index: 20;
}

.composer-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 15px;
  padding: 8px 0;
  outline: none;
}

.composer-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.composer-actions {
  display: flex;
  gap: 8px;
}

.composer-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: none;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(168, 85, 247, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.composer-btn:hover {
  background: rgba(99, 102, 241, 0.15);
  color: #fff;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.2);
}

.composer-btn.primary {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff;
  border-radius: 12px;
}

.composer-btn.primary:hover {
  background: linear-gradient(135deg, #06b6d4, #6366f1);
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.4);
  transform: scale(1.05);
}

@media (max-width: 768px) {
  #view-social-mesh {
    flex-direction: column;
  }

  .network-radar-sidebar {
    width: 100%;
    height: auto;
    max-height: 200px;
    border-right: none;
    border-bottom: 1px solid var(--social-panel-border);
  }

  .radar-list {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px 16px;
  }

  .radar-user-card {
    min-width: 200px;
  }
}