/* Halo Modern UI v1 — visual layer only */
:root {
  color-scheme: dark;
  --ui-bg: #070a10;
  --ui-bg-soft: #0b1019;
  --ui-panel: rgba(15, 21, 32, .88);
  --ui-panel-solid: #101722;
  --ui-panel-hover: #151e2b;
  --ui-raised: #182231;
  --ui-text: #f4f7fb;
  --ui-muted: #8e9bad;
  --ui-subtle: #647286;
  --ui-line: rgba(148, 163, 184, .14);
  --ui-line-strong: rgba(148, 163, 184, .24);
  --ui-accent: #7c6cf2;
  --ui-accent-2: #4da8f7;
  --ui-accent-soft: rgba(124, 108, 242, .14);
  --ui-success: #55d6a4;
  --ui-danger: #ff6f91;
  --ui-shadow: 0 20px 60px rgba(0, 0, 0, .28);
  --ui-shadow-soft: 0 10px 34px rgba(0, 0, 0, .16);
  --ui-radius: 18px;
  --ui-radius-sm: 12px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --ui-bg: #f4f6fa;
  --ui-bg-soft: #eef1f7;
  --ui-panel: rgba(255, 255, 255, .9);
  --ui-panel-solid: #ffffff;
  --ui-panel-hover: #f5f7fb;
  --ui-raised: #eef2f8;
  --ui-text: #172033;
  --ui-muted: #68758a;
  --ui-subtle: #8792a4;
  --ui-line: rgba(38, 51, 77, .11);
  --ui-line-strong: rgba(38, 51, 77, .2);
  --ui-accent: #6557dc;
  --ui-accent-2: #2587dc;
  --ui-accent-soft: rgba(101, 87, 220, .1);
  --ui-success: #168a62;
  --ui-danger: #d84368;
  --ui-shadow: 0 18px 50px rgba(30, 45, 72, .1);
  --ui-shadow-soft: 0 8px 28px rgba(30, 45, 72, .08);
}

html { background: var(--ui-bg); }
body {
  background:
    radial-gradient(circle at 5% -10%, color-mix(in srgb, var(--ui-accent) 12%, transparent), transparent 34rem),
    radial-gradient(circle at 96% 5%, color-mix(in srgb, var(--ui-accent-2) 9%, transparent), transparent 30rem),
    var(--ui-bg);
  color: var(--ui-text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  transition: background-color .25s ease, color .25s ease;
}
body::before, body::after { opacity: .35; }
.app-shell { width: min(1440px, 100%); padding: 0 24px 18px; }
.topbar { min-height: 72px; padding: 12px 0; border-color: var(--ui-line); }
.topbar, .topbar a, .topbar button { color: var(--ui-text); }
.footer { min-height: 44px; padding: 18px 0 2px; color: var(--ui-subtle); font-size: 11px; letter-spacing: .03em; }

/* Authenticated shell */
.social-shell {
  grid-template-columns: 214px minmax(0, 1fr);
  gap: 22px;
  min-height: calc(100vh - 112px);
  padding: 8px 0 20px;
}
.social-rail {
  top: 16px;
  width: auto;
  height: calc(100vh - 34px);
  min-height: 620px;
  align-items: stretch;
  padding: 18px 14px;
  border: 1px solid var(--ui-line);
  border-radius: 22px;
  background: var(--ui-panel);
  box-shadow: var(--ui-shadow-soft);
  backdrop-filter: blur(24px) saturate(130%);
}
.social-rail-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  padding: 2px 6px 18px;
  color: var(--ui-text);
  font-size: 11px;
  letter-spacing: .14em;
}
.social-brand-pulse {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--ui-accent), var(--ui-accent-2));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ui-accent) 28%, transparent);
}
.social-brand-pulse::after { width: 8px; height: 8px; margin: 13px; }
.social-nav { display: grid; gap: 6px; margin: 4px 0 auto; }
.social-nav-button {
  display: flex;
  min-height: 46px;
  place-items: unset;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 11px;
  border-radius: 12px;
  color: var(--ui-muted);
}
.social-nav-button span { width: 22px; text-align: center; font-size: 18px; }
.social-nav-button b { font-size: 11px; font-weight: 680; letter-spacing: 0; }
.social-nav-button:hover { background: var(--ui-panel-hover); color: var(--ui-text); }
.social-nav-button.is-active {
  border-color: color-mix(in srgb, var(--ui-accent) 24%, transparent);
  background: var(--ui-accent-soft);
  color: var(--ui-text);
  box-shadow: none;
}
.social-rail-security {
  justify-items: start;
  grid-template-columns: 9px 1fr;
  column-gap: 8px;
  padding: 13px 10px 4px;
  border-top: 1px solid var(--ui-line);
  color: var(--ui-muted);
  text-align: left;
}
.social-rail-security span { grid-row: 1 / 3; align-self: center; }
.social-rail-security b { font-size: 9px; }
.social-rail-security small { color: var(--ui-subtle); font-size: 8px; }
.social-main { padding: 0; }
.social-main-header {
  min-height: 78px;
  padding: 8px 2px 16px;
}
.social-main-header h1 { margin-top: 2px; font-size: clamp(28px, 3.3vw, 42px); }
.social-header-actions { gap: 8px; }
.social-secure-chip {
  border-color: color-mix(in srgb, var(--ui-success) 22%, transparent);
  background: color-mix(in srgb, var(--ui-success) 8%, transparent);
  color: var(--ui-success);
}

/* Theme control */
.halo-theme-toggle {
  display: inline-grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: var(--ui-panel);
  color: var(--ui-text);
  cursor: pointer;
  box-shadow: var(--ui-shadow-soft);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.halo-theme-toggle:hover { transform: translateY(-1px); border-color: var(--ui-line-strong); background: var(--ui-panel-hover); }
.halo-theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.halo-theme-toggle .theme-sun { display: none; }
:root[data-theme="light"] .halo-theme-toggle .theme-sun { display: block; }
:root[data-theme="light"] .halo-theme-toggle .theme-moon { display: none; }

/* Clear layout */
.social-dashboard-grid {
  grid-template-columns: minmax(0, 1fr) 330px;
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 16px;
}
.halo-discovery-card { grid-column: 2; grid-row: 1; }
.social-contacts-card { grid-column: 1; grid-row: 1 / span 2; }
.social-dashboard-grid > .social-side-stack { grid-column: 2; grid-row: 2; }
.social-profile-grid { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 16px; }
.social-card,
.social-feature-hero,
.social-dialog-card {
  border-color: var(--ui-line);
  background: var(--ui-panel);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-soft);
}
.social-card { border-radius: var(--ui-radius); }
.social-contacts-card { min-height: 560px; padding: 22px; }
.social-privacy-card, .social-next-card, .social-profile-card, .social-data-note { padding: 19px; }
.social-card h2, .social-card h3, .social-feature-hero h2, .social-dialog h2 { color: var(--ui-text); }
.social-card-head p, .social-card > p, .social-feature-hero > p,
.social-profile-identity p:last-child, .social-data-note p, .social-dialog-card > p:not(.overline) { color: var(--ui-muted); }
.overline { color: var(--ui-subtle); }
.social-count {
  border-color: color-mix(in srgb, var(--ui-accent-2) 20%, transparent);
  background: color-mix(in srgb, var(--ui-accent-2) 9%, transparent);
  color: var(--ui-accent-2);
}
.social-search, .halo-search-control,
.social-profile-card input, .social-profile-card textarea,
.halo-identity-value, .social-invite-field input {
  border-color: var(--ui-line);
  background: var(--ui-bg-soft);
  color: var(--ui-text);
  box-shadow: none;
}
.social-search input, .halo-search-control input, input, textarea, select { color: var(--ui-text); }
input::placeholder, textarea::placeholder { color: var(--ui-subtle); }
.social-contact, .halo-person-row {
  border-color: transparent;
  background: transparent;
  color: var(--ui-text);
}
.social-contact:hover, .halo-person-row:hover {
  transform: none;
  border-color: var(--ui-line);
  background: var(--ui-panel-hover);
}
.social-contact + .social-contact, .halo-person-row + .halo-person-row { border-top-color: var(--ui-line); }
.social-contact-identity small, .social-contact-identity p, .halo-person-copy small, .halo-person-copy p { color: var(--ui-muted); }
.social-contact-call, .social-contact-message,
.halo-person-actions button:not(.primary) {
  border-color: var(--ui-line);
  background: var(--ui-raised);
  color: var(--ui-text);
}
.social-contact-menu { border-color: var(--ui-line); background: transparent; color: var(--ui-muted); }
.social-accent-button, .halo-person-actions button.primary {
  border-color: transparent;
  background: linear-gradient(120deg, var(--ui-accent), var(--ui-accent-2));
  color: white;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ui-accent) 20%, transparent);
}
.social-muted-button {
  border-color: var(--ui-line);
  background: var(--ui-raised);
  color: var(--ui-text);
}
.social-accent-button, .social-muted-button, .halo-person-actions button { border-radius: 11px; }
.social-side-stack { gap: 14px; }
.social-privacy-card ul { color: var(--ui-muted); }
.social-progress { background: var(--ui-raised); }
.social-feature-hero { min-height: 520px; border-radius: var(--ui-radius); }
.social-feature-pills span { border-color: var(--ui-line); background: var(--ui-raised); color: var(--ui-muted); }
.social-dialog { color: var(--ui-text); }
.social-dialog::backdrop { background: rgba(5, 8, 14, .6); }
.social-dialog-close { border-color: var(--ui-line); background: var(--ui-raised); color: var(--ui-text); }
.social-toast { border-color: color-mix(in srgb, var(--ui-success) 25%, transparent); background: var(--ui-panel-solid); color: var(--ui-text); box-shadow: var(--ui-shadow); }
.social-toast.error { border-color: color-mix(in srgb, var(--ui-danger) 30%, transparent); background: var(--ui-panel-solid); color: var(--ui-danger); }

/* Username/discovery */
.halo-discovery-card, .halo-identity-card, .halo-notification-card { padding: 18px; }
.halo-section-heading { align-items: center; }
.halo-section-heading h2, .halo-request-heading h3 { color: var(--ui-text); }
.halo-section-heading p, .halo-search-state, .halo-identity-copy, .halo-notification-card p { color: var(--ui-muted); }
.halo-request-heading { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ui-line); }
#halo-refresh-requests, #halo-search-clear { color: var(--ui-accent-2); }
.halo-people-list { gap: 4px; }
.halo-person-row { padding: 10px 7px; border-radius: 12px; }
.halo-person-avatar { border-color: var(--ui-line); box-shadow: none; }
.halo-discovery-switch { border-color: var(--ui-line); background: var(--ui-bg-soft); }

/* Direct chat */
.halo-chat-overlay, .halo-call-overlay { background: color-mix(in srgb, var(--ui-bg) 76%, transparent); }
.halo-chat-shell, .halo-call-card {
  border-color: var(--ui-line);
  background: var(--ui-panel-solid);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow);
}
.halo-chat-header, .halo-chat-composer { border-color: var(--ui-line); background: var(--ui-panel-solid); }
.halo-chat-messages { background: var(--ui-bg-soft); }
.halo-chat-message.incoming { background: var(--ui-raised); color: var(--ui-text); }
.halo-chat-message.outgoing { background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2)); color: white; }
.halo-chat-composer textarea { border-color: var(--ui-line); background: var(--ui-bg-soft); color: var(--ui-text); }
.halo-chat-header button, .halo-chat-composer button { border-color: var(--ui-line); background: var(--ui-raised); color: var(--ui-text); }

/* Light theme compatibility for legacy surfaces */
:root[data-theme="light"] body::before, :root[data-theme="light"] body::after { opacity: .12; }
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .glass-card,
:root[data-theme="light"] .auth-card,
:root[data-theme="light"] .lobby-card,
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] .call-header { color: var(--ui-text); }
:root[data-theme="light"] .social-contact-avatar,
:root[data-theme="light"] #social-profile-avatar { color: white; }
:root[data-theme="light"] .social-card input,
:root[data-theme="light"] .social-card textarea { color: var(--ui-text); }

@media (max-width: 1080px) {
  .social-shell { grid-template-columns: 82px minmax(0, 1fr); gap: 16px; }
  .social-rail { align-items: center; padding: 14px 9px; }
  .social-rail-brand { display: grid; justify-items: center; padding: 2px 0 14px; font-size: 8px; }
  .social-nav-button { display: grid; min-height: 60px; place-items: center; gap: 2px; padding: 6px 2px; }
  .social-nav-button span { width: auto; }
  .social-nav-button b { font-size: 8px; }
  .social-rail-security small { display: none; }
  .social-rail-security { display: grid; justify-items: center; grid-template-columns: 1fr; border-top: 0; text-align: center; }
  .social-rail-security span { grid-row: auto; }
  .social-dashboard-grid { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 860px) {
  .social-dashboard-grid, .social-profile-grid { grid-template-columns: 1fr; }
  .halo-discovery-card, .social-contacts-card, .social-dashboard-grid > .social-side-stack { grid-column: 1; grid-row: auto; }
  .social-dashboard-grid > .social-side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-contacts-card { min-height: 440px; }
}

@media (max-width: 680px) {
  .app-shell { padding: 0 14px 12px; }
  .social-shell { padding-top: 0; padding-bottom: 84px; }
  .social-rail {
    position: fixed;
    top: auto;
    right: 8px; bottom: 8px; left: 8px;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 6px;
    border-radius: 17px;
    background: color-mix(in srgb, var(--ui-panel-solid) 90%, transparent);
  }
  .social-nav-button { min-height: 52px; }
  .social-main-header { min-height: 68px; align-items: center; padding: 6px 0 12px; }
  .social-main-header h1 { font-size: 29px; }
  .social-header-actions { align-items: center; }
  .halo-theme-toggle { width: 40px; height: 40px; flex-basis: 40px; }
  .social-dashboard-grid > .social-side-stack { grid-template-columns: 1fr; }
  .social-contacts-card, .halo-discovery-card, .social-profile-card { padding: 16px; }
  .social-card { border-radius: 16px; }
  .social-secure-chip { display: none; }
  .social-contact-actions { gap: 4px; }
  .social-contact-call { display: inline-flex; }
  .social-contact-message, .social-contact-call { width: 36px; overflow: hidden; color: transparent; position: relative; padding: 0; }
  .social-contact-message::after { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ui-text); }
  .social-contact-call::after { content: "⌁"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ui-text); }
  .footer { padding-bottom: 76px; }
}

@media (max-width: 430px) {
  .social-main-header { display: flex; }
  .social-main-header .overline { display: none; }
  .social-main-header h1 { font-size: 25px; }
  #social-new-invite { width: 40px; min-width: 40px; padding: 0; overflow: hidden; color: transparent; position: relative; }
  #social-new-invite::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; color: white; font-size: 20px; }
  .social-contact { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 9px; padding: 9px 4px; }
  .halo-person-row { grid-template-columns: 40px minmax(0, 1fr); }
  .halo-person-actions { grid-column: 2; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}