/* DROPPED_V60_HOTBAR_FINAL_20260513_0205 */
/* Shorter black area in dripline inbox, hotbar visible in inbox, hidden in chat. */

:root {
  --bg: #07080b;
  --surface: #101116;
  --surface-2: #151720;
  --card: #171923;
  --card-soft: #1d202b;
  --ink: #f7f7f8;
  --muted: #9ca3af;
  --faint: #6b7280;
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.16);
  --button: #ffffff;
  --buttonText: #07080b;
  --danger: #ef4444;
  --shadow: 0 16px 36px rgba(0,0,0,.28);

  /* Phase 1 Design Tokens */
  --bg-primary: #09090b;
  --bg-surface: rgba(255, 255, 255, 0.04);
  --bg-surface-elevated: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-focus: rgba(255, 255, 255, 0.2);
  --text-primary: #f4f4f5;
  --text-muted: #a1a1aa;
  --glass-blur: blur(16px);
}

body.light {
  --bg: #f6f7f9;
  --surface: #eef0f4;
  --surface-2: #e5e7eb;
  --card: #ffffff;
  --card-soft: #f3f4f6;
  --ink: #101116;
  --muted: #5f6673;
  --faint: #7c8492;
  --line: rgba(0,0,0,.09);
  --line-strong: rgba(0,0,0,.14);
  --button: #101116;
  --buttonText: #ffffff;
  --shadow: 0 16px 36px rgba(15,23,42,.10);

  /* Phase 1 Design Tokens (light) */
  --bg-primary: #ffffff;
  --bg-surface: rgba(0, 0, 0, 0.03);
  --bg-surface-elevated: rgba(0, 0, 0, 0.06);
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-focus: rgba(0, 0, 0, 0.18);
  --text-primary: #18181b;
  --text-muted: #71717a;
  --glass-blur: blur(16px);
}

* {
  box-sizing: border-box;
  min-width: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button,
input,
textarea {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

html,
body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.07), transparent 30%),
    radial-gradient(circle at 85% 12%, rgba(255,255,255,.04), transparent 24%),
    linear-gradient(180deg, var(--bg), var(--surface));
  background-attachment: fixed;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
  border-radius: 999px;
  padding: 11px 16px;
  cursor: pointer;
  color: var(--buttonText);
  background: var(--button);
  font-weight: 850;
  box-shadow: none;
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
  max-width: 100%;
}

button:hover {
  transform: translateY(-1px);
}

button:disabled {
  opacity: .55;
  cursor: wait;
  transform: none;
}

/* Hotbar buttons must never inherit the base button accent color */
#mobileHotbar button,
#mobileHotbar .mobile-hotbar-btn {
  background: transparent;
  color: rgba(255,255,255,0.45);
  border: none;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
#mobileHotbar button:active,
#mobileHotbar .mobile-hotbar-btn:active,
#mobileHotbar button:focus,
#mobileHotbar .mobile-hotbar-btn:focus {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
}

input,
textarea,
select {
  color: var(--ink);
}

.ghost {
  color: var(--ink);
  background: var(--card-soft);
  border: 1px solid var(--line);
  box-shadow: none;
}

.danger-button {
  background: var(--danger);
  color: white;
}

.hidden {
  display: none !important;
}

.shell {
  width: min(1180px, 100%);
  max-width: 100vw;
  margin: 0 auto;
  padding: 16px 16px 104px;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
}

/* TOP BAR - hard fixed so nothing can cross over */
.topbar {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  grid-template-areas:
    "brand actions"
    "search search";
  gap: 10px;
  align-items: center;
  position: sticky;
  top: 12px;
  z-index: 50;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: rgba(16,17,22,.94);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

body.light .topbar {
  background: rgba(255,255,255,.94);
}

.brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}

/* This is now an actual image, not a CSS-drawn shape */
.brand-logo {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
  display: block;
  object-fit: cover;
  background: #0d0d10;
  border: 1px solid var(--line-strong);
}

.brand-mark {
  display: none !important;
}

.brand > div:last-child {
  min-width: 0;
  overflow: hidden;
}

.brand h1 {
  font-size: 24px;
  letter-spacing: -1px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand span {
  display: block;
  margin-top: 3px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search {
  grid-area: search;
  height: 46px;
  min-width: 0;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  overflow: hidden;
}

.search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
}

.top-actions {
  grid-area: actions;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 8px;
  align-items: center;
  justify-content: end;
}

.top-actions button {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* AUTH */
.auth-card,
.composer,
.drop,
.panel,
.pulse-card,
.modal {
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
}

.auth-page {
  min-height: calc(100vh - 116px);
  display: grid;
  place-items: center;
  padding: 22px;
}

.auth-card {
  width: min(480px, 100%);
  border-radius: 28px;
  padding: 28px;
}

.auth-card h1 {
  font-size: 50px;
  line-height: .95;
  letter-spacing: -3px;
  margin-bottom: 14px;
}

.auth-card p {
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 20px;
  font-weight: 650;
}

.auth-card input,
.catch-input-row input,
.modal textarea,
.settings-form input,
.settings-form select,
.settings-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  outline: 0;
  background: var(--surface-2);
  border-radius: 16px;
  padding: 13px 14px;
}

.auth-card input {
  margin-bottom: 12px;
}

.auth-card button {
  width: 100%;
  margin-top: 8px;
}

.eyebrow {
  display: inline-flex;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* MAIN LAYOUT */
.app-grid {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) minmax(280px, 300px);
  gap: 14px;
  margin-top: 14px;
  width: 100%;
  max-width: 100%;
  align-items: start;
}

.rail {
  position: sticky;
  top: 118px;
  height: fit-content;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 10px;
  display: grid;
  gap: 10px;
  align-content: start;
  justify-items: center;
}

.rail-group {
  display: grid;
  gap: 10px;
}

.rail-btn {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 19px;
  transition: .15s ease;
  box-shadow: none;
}

.rail-btn:hover,
.rail-btn.active {
  color: var(--buttonText);
  background: var(--button);
  transform: translateY(-1px);
}

.main {
  display: grid;
  gap: 20px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.hero {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 34px 36px;
  background: linear-gradient(145deg, #1a1d28, #101116);
  box-shadow: var(--shadow);
  color: white;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  right: -35px;
  bottom: -72px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 650px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero h2 {
  font-size: clamp(34px, 5vw, 58px);
  line-height: .96;
  letter-spacing: -2.5px;
  margin-bottom: 14px;
}

.hero p {
  max-width: 540px;
  line-height: 1.55;
  opacity: .88;
  font-weight: 600;
}

.hero-actions,
.challenge-row,
.composer-footer,
.profile-meta-row,
.profile-photo-row,
.button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-actions {
  margin-top: 22px;
}

.hero-actions button {
  background: white;
  color: #111113;
}

.hero-actions .glass-button {
  background: var(--card-soft);
  color: white;
  border: 1px solid var(--line);
}

/* CHALLENGE + METRICS */
.daily-challenge {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px 24px 22px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.daily-challenge h3 {
  font-size: 22px;
  letter-spacing: -.8px;
  margin: 12px 0 18px;
  line-height: 1.15;
}

.daily-challenge p {
  color: var(--muted);
  line-height: 1.5;
  font-weight: 700;
  margin: 0;
}

.challenge-row {
  align-items: center;
  justify-content: space-between;
}

.challenge-tag {
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pulse-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.pulse-card {
  border-radius: 20px;
  padding: 20px 18px 18px;
  overflow: hidden;
}

.pulse-card strong {
  display: block;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pulse-card span {
  color: var(--muted);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  display: block;
  margin-top: 8px;
  line-height: 1.25;
}

/* COMPOSER */
.composer {
  border-radius: 26px;
  padding: 14px;
}

.composer-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.composer textarea {
  width: 100%;
  min-height: 82px;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  font-size: 18px;
  line-height: 1.45;
}

.composer-footer {
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 14px;
}

.chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chip {
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  box-shadow: none;
}

/* FEED */
.feed {
  display: grid;
  gap: 14px;
}

.drop {
  border-radius: 26px;
  padding: 15px;
  overflow: hidden;
  max-width: 100%;
}

.drop-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.drop-user,
.profile-head {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.drop-user > div:last-child,
.profile-head > div:last-child,
.profile-main-info > div:last-child {
  min-width: 0;
  overflow: hidden;
}

.avatar,
.mini-avatar,
.small-avatar,
.settings-photo-preview {
  display: grid;
  place-items: center;
  color: var(--buttonText);
  font-weight: 900;
  background: var(--button);
  flex: 0 0 auto;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.avatar.has-photo,
.mini-avatar.has-photo,
.small-avatar.has-photo,
.settings-photo-preview.has-photo {
  color: transparent;
  text-shadow: none;
}

.avatar {
  width: 70px;
  height: 70px;
  font-size: 27px;
  border-radius: 24px;
}

.small-avatar {
  width: 46px;
  height: 46px;
  border-radius: 17px;
}

.mini-avatar {
  width: 38px;
  height: 38px;
  border-radius: 15px;
  font-size: 13px;
}

.drop-user p,
.username {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.drop-user strong,
.profile-head h2 {
  overflow-wrap: anywhere;
}

.drop-text {
  font-size: 17px;
  line-height: 1.58;
  white-space: pre-wrap;
  letter-spacing: -.15px;
  overflow-wrap: anywhere;
}

.drop-image {
  height: 300px;
  margin-top: 14px;
  border-radius: 22px;
  background: #121218;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}

.drop-image::after {
  content: "Drop";
  position: absolute;
  left: 18px;
  bottom: 16px;
  color: white;
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -1px;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.drop-video {
  display: block;
  width: 100%;
  max-height: 260px;
  margin-top: 14px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: #050508;
}

.drop-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.drop-badge {
  border: 1px solid var(--line);
  background: var(--surface-2);
  padding: 7px 10px;
  border-radius: 999px;
}

/* Hard fix: actions cannot sit on top of each other now */
.drop-actions {
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.action {
  min-width: 0;
  text-align: center;
  padding: 11px 9px;
  border-radius: 17px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
  transition: .15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action:hover,
.action.grabbed {
  color: var(--buttonText);
  background: var(--button);
  transform: translateY(-1px);
}

.catch-section {
  display: none;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.catch-section.open {
  display: block;
}

.catch-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.catch-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.catch {
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* SIDEBAR */
.side {
  display: grid;
  gap: 14px;
  align-content: start;
  position: sticky;
  top: 118px;
  height: fit-content;
  overflow: hidden;
}

.panel {
  border-radius: 26px;
  padding: 15px;
}

.profile-card {
  display: grid;
  gap: 14px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
}

.stat {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px 7px;
  text-align: center;
  overflow: hidden;
}

.stat strong {
  display: block;
  font-size: 20px;
  letter-spacing: -.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

.panel-title {
  font-size: 18px;
  margin-bottom: 14px;
  letter-spacing: -.4px;
}

.notification {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.notification:last-child {
  border-bottom: 0;
}

.notification span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

/* PROFILES */
.profile-page {
  display: none;
  gap: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.profile-page.active {
  display: grid;
}

.profile-hero {
  border-radius: 30px;
  padding: 18px;
  overflow: hidden;
  position: relative;
}

.profile-cover {
  height: 128px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.035));
  border: 1px solid var(--line);
  margin-bottom: -38px;
}

.profile-main-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.profile-main-info {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  max-width: 100%;
}

.profile-page-avatar {
  width: 96px;
  height: 96px;
  border-radius: 30px;
  border: 5px solid var(--bg);
  font-size: 36px;
}

.profile-page h2 {
  font-size: clamp(28px,4vw,42px);
  letter-spacing: -2px;
  line-height: 1;
}

.profile-bio {
  color: var(--muted);
  line-height: 1.5;
  margin-top: 10px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.profile-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.profile-pill {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 850;
}

.clickable-profile {
  cursor: pointer;
}

.clickable-profile:hover strong,
.clickable-profile:hover .username {
  text-decoration: underline;
}

.profile-feed-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* MODALS */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(12px);
}

.modal-backdrop.open {
  display: flex;
}

.modal {
  width: min(700px, 100%);
  max-width: calc(100vw - 24px);
  border-radius: 28px;
  padding: 18px;
  max-height: calc(100dvh - 28px);
  overflow: auto;
}

.modal-header,
.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.modal-footer {
  margin: 14px 0 0;
}

.modal textarea {
  min-height: 145px;
  resize: none;
  font-size: 17px;
  line-height: 1.45;
}

.settings-shell {
  display: grid;
  grid-template-columns: 170px minmax(0,1fr);
  gap: 14px;
  margin-top: 12px;
}

.settings-tabs {
  display: grid;
  gap: 8px;
  align-content: start;
}

.settings-tab {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 16px;
  padding: 11px 12px;
  text-align: left;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-tab.active {
  background: var(--button);
  color: var(--buttonText);
}

.settings-page {
  display: none;
  gap: 12px;
}

.settings-page.active {
  display: grid;
}

.settings-form {
  display: grid;
  gap: 12px;
}

.settings-form label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.settings-form input,
.settings-form select,
.settings-form textarea {
  margin-top: 6px;
}

.settings-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-2);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.settings-card p {
  color: var(--muted);
  line-height: 1.45;
  font-size: 14px;
}

.settings-photo-preview {
  width: 84px;
  height: 84px;
  border-radius: 28px;
  font-size: 31px;
}

.create-options {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  margin-top: 12px;
}

.create-option {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-2);
  color: var(--muted);
  padding: 13px 8px;
  text-align: center;
  font-weight: 950;
  cursor: pointer;
  box-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.create-option.active {
  color: var(--buttonText);
  background: var(--button);
}

.image-preview {
  display: none;
  height: 210px;
  border-radius: 22px;
  margin-top: 12px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
}

.record-preview {
  display: none;
  width: 100%;
  max-height: 260px;
  margin-top: 12px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: #050508;
}

.record-controls {
  display: none;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.recording-dot {
  display: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff4d4d;
  box-shadow: 0 0 16px rgba(255,77,77,.9);
  animation: pulseDot 1s infinite;
}

.recording-active .recording-dot {
  display: inline-block;
}

@keyframes pulseDot {
  0%,100% { opacity:.35; transform:scale(.9); }
  50% { opacity:1; transform:scale(1.15); }
}

.floating {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 62px;
  height: 62px;
  border-radius: 23px;
  font-size: 29px;
  z-index: 80;
}

.mobile-nav {
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 90;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.mobile-nav button {
  min-height: 48px;
  padding: 0;
  border-radius: 17px;
  background: var(--surface-2);
  color: var(--muted);
  box-shadow: none;
  border: 1px solid var(--line);
  font-size: 18px;
}

.mobile-nav button.active {
  background: var(--button);
  color: var(--buttonText);
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 96px;
  display: none;
  z-index: 400;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 14px 18px;
  color: var(--ink);
  background: var(--card);
  box-shadow: var(--shadow);
  font-weight: 850;
  min-width: 220px;
  max-width: min(420px,calc(100vw - 32px));
  line-height: 1.35;
}

.empty-state {
  text-align: center;
  padding: 24px;
  color: var(--muted);
}

.drop-impact {
  animation: dropImpact .6s ease;
}

@keyframes dropImpact {
  0% { transform: translateY(-40px) scale(.9); opacity:0; }
  60% { transform: translateY(6px) scale(1.05); opacity:1; }
  100% { transform: translateY(0) scale(1); }
}

/* RESPONSIVE */
@media (max-width: 1120px) {
  .app-grid {
    grid-template-columns: 76px minmax(0,1fr);
  }

  .side {
    display: none;
  }
}

@media (max-width: 900px) {
  .shell {
    padding: 10px 10px 96px;
  }

  .topbar {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "search"
      "actions";
    top: 0;
    /* Sleek: just safe area, minimal padding */
    padding: calc(4px + env(safe-area-inset-top, 0px)) 12px 8px !important;
    gap: 6px !important;
  }

  .top-actions {
    width: 100%;
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .top-actions button {
    width: 100%;
  }

  .app-grid {
    grid-template-columns: minmax(0,1fr);
  }

  .rail {
    display: none;
  }

  .mobile-nav {
    display: grid;
  }

  .floating {
    display: none !important;
  }

  .hero {
    display: none;
  }
}

@media (max-width: 720px) {
  .main {
    gap: 14px;
  }

  .topbar {
    border-radius: 18px;
    padding: calc(4px + env(safe-area-inset-top, 0px)) 10px 6px !important;
    width: 100%;
    gap: 4px !important;
  }

  .brand h1 {
    font-size: 20px;
  }

  .brand-logo {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 13px;
  }

  .app-grid {
    gap: 12px;
  }

  .daily-challenge {
    border-radius: 22px;
    padding: 16px;
  }

  .pulse-row {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
  }

  .pulse-card {
    padding: 14px 12px;
    border-radius: 20px;
  }

  .composer {
    border-radius: 22px;
    padding: 12px;
  }

  .composer textarea {
    font-size: 16px;
  }

  .composer-footer,
  .modal-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .catch-input-row {
    grid-template-columns: 1fr;
  }

  .chip {
    font-size: 12px;
    padding: 8px 10px;
  }

  .drop {
    border-radius: 22px;
    padding: 12px;
  }

  .action {
    padding: 10px 8px;
    font-size: 13px;
  }

  .drop-image {
    height: 235px;
    border-radius: 20px;
  }

  .profile-cover {
    height: 108px;
    border-radius: 20px;
    margin-bottom: -34px;
  }

  .profile-main-row {
    grid-template-columns: 1fr;
    align-items: center;
  }

  .profile-main-info {
    align-items: center;
  }

  .profile-page-avatar {
    width: 82px;
    height: 82px;
    border-radius: 26px;
    border-width: 4px;
  }

  .profile-meta-row {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .profile-pill {
    text-align: center;
  }

  .settings-shell {
    grid-template-columns: 1fr;
  }

  .settings-tabs {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .settings-tab {
    font-size: 13px;
    text-align: center;
  }

  .modal-backdrop {
    padding: 8px;
  }

  .modal {
    max-width: calc(100vw - 16px);
    border-radius: 24px;
    padding: 14px;
  }
}

@media (max-width: 420px) {
  .create-options {
    grid-template-columns: 1fr;
  }

  .drop-actions {
    grid-template-columns: 1fr;
  }
}


/* V12 targeted spacing safety fixes */
.hero,
.daily-challenge,
.pulse-card {
  overflow: hidden;
}

.hero .eyebrow,
.daily-challenge .challenge-tag,
.pulse-card strong,
.pulse-card span {
  position: relative;
  z-index: 1;
}

.challenge-row {
  gap: 12px;
  margin: 0;
}

.pulse-card strong,
.pulse-card span,
.hero h2,
.hero p,
.daily-challenge h3,
.daily-challenge p {
  word-break: break-word;
}

@media (max-width: 900px) {
  .hero {
    display: none;
  }
}

@media (max-width: 720px) {
  .hero,
  .daily-challenge,
  .pulse-card {
    border-radius: 22px;
  }

  .pulse-card strong {
    font-size: 20px;
  }
}


/* V13 vertical spacing fixes */
h1, h2, h3, p {
  margin-top: 0;
}

.hero .eyebrow {
  margin-bottom: 18px;
}

.hero h2 {
  margin: 0 0 16px;
}

.hero p {
  margin: 0 0 24px;
}

.hero-actions {
  margin-top: 0;
}

.daily-challenge {
  align-content: start;
}

.daily-challenge .challenge-row {
  align-items: center;
  justify-content: space-between;
}

.daily-challenge .challenge-tag,
.daily-challenge .ghost {
  align-self: start;
}

.pulse-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 108px;
}

.pulse-card strong,
.pulse-card span {
  position: relative;
  z-index: 1;
}

@media (max-width: 720px) {
  .hero {
    padding: 24px 22px;
  }

  .hero .eyebrow {
    margin-bottom: 14px;
  }

  .hero h2 {
    margin: 0 0 12px;
    line-height: 1;
  }

  .hero p {
    margin: 0 0 18px;
  }

  .daily-challenge {
    padding: 18px 16px 16px;
  }

  .daily-challenge h3 {
    margin: 10px 0 14px;
  }

  .pulse-card {
    min-height: 96px;
    padding: 16px 14px 14px;
  }

  .pulse-card strong {
    font-size: 20px;
  }

  .pulse-card span {
    margin-top: 6px;
  }
}


/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE

   These rules intentionally override all earlier hero/daily/pulse
   layout rules. The top cards now use the same normal block flow
   as the rest of the app so text cannot float to borders.
   ========================================================= */

/* Give the main stack a normal, consistent rhythm. */
.main {
  display: block !important;
}

#homeView {
  display: block !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

#homeView > .hero,
#homeView > .daily-challenge,
#homeView > .pulse-row,
#homeView > .composer,
#homeView > .feed {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

#homeView > .feed {
  margin-bottom: 0 !important;
}

/* HERO: normal card, normal content flow, no weird stretching. */
.hero {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 34px 36px !important;
  overflow: hidden !important;
}

.hero-content {
  display: block !important;
  max-width: 720px !important;
}

.hero .eyebrow {
  display: inline-flex !important;
  margin: 0 0 28px 0 !important;
}

.hero h2 {
  display: block !important;
  margin: 0 0 16px 0 !important;
  line-height: .95 !important;
}

.hero p {
  display: block !important;
  margin: 0 0 28px 0 !important;
  line-height: 1.55 !important;
}

.hero-actions {
  display: flex !important;
  margin: 0 !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* The decorative circle was visually crowding the lower border. */
.hero::after {
  width: 180px !important;
  height: 180px !important;
  right: -46px !important;
  bottom: -58px !important;
  opacity: .65 !important;
}

/* DAILY DROP: stop using grid for vertical spacing. */
.daily-challenge {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 22px 24px 24px !important;
  overflow: hidden !important;
}

.daily-challenge .challenge-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 34px 0 !important;
}

.daily-challenge h3 {
  display: block !important;
  margin: 0 0 22px 0 !important;
  line-height: 1.15 !important;
}

.daily-challenge p {
  display: block !important;
  margin: 0 !important;
  line-height: 1.55 !important;
}

/* STATS: normal card rhythm and no border-hugging. */
.pulse-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

.pulse-card {
  display: block !important;
  min-height: 98px !important;
  height: auto !important;
  padding: 20px 18px 18px !important;
  overflow: hidden !important;
}

.pulse-card strong {
  display: block !important;
  margin: 0 0 10px 0 !important;
  line-height: 1 !important;
}

.pulse-card span {
  display: block !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

/* Make composer/feed continue with the same rhythm. */
.composer {
  margin-top: 0 !important;
}

/* Mobile keeps the same block flow. */
@media (max-width: 900px) {
  #homeView > .hero {
    display: none !important;
  }

  #homeView > .daily-challenge,
  #homeView > .pulse-row,
  #homeView > .composer,
  #homeView > .feed {
    margin-bottom: 12px !important;
  }
}

@media (max-width: 720px) {
  .daily-challenge {
    padding: 18px 16px 18px !important;
  }

  .daily-challenge .challenge-row {
    margin-bottom: 24px !important;
  }

  .daily-challenge h3 {
    margin-bottom: 16px !important;
  }

  .pulse-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .pulse-card {
    min-height: 90px !important;
    padding: 16px 14px 14px !important;
  }
}


/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Banner customization, Dripline messaging, and Echoes.
   ========================================================= */

.profile-cover {
  background-size: cover !important;
  background-position: center !important;
}

.settings-banner-preview {
  width: 100%;
  min-height: 118px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.035)),
    var(--surface-2);
  background-size: cover;
  background-position: center;
}

.settings-url-label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.section-title-row h2 {
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -2px;
  line-height: 1;
}

.dripline-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.dripline-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.dripline-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.dripline-layout {
  display: block;
  min-height: 520px;
}

.dripline-layout .thread-sidebar {
  display: block;
}

.dripline-layout .chat-panel {
  display: none;
}

.dripline-layout.thread-active .thread-sidebar {
  display: none;
}

.dripline-layout.thread-active .chat-panel {
  display: grid;
}

.thread-list,
.chat-panel {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  min-width: 0;
}

.thread-list {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.thread-item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  min-width: 0;
  width: 100%;
  text-align: left;
}

.thread-item:hover,
.thread-item.active {
  background: var(--surface-3, var(--card-soft));
}

.thread-copy {
  min-width: 0;
}

.thread-copy strong,
.thread-copy p {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  overflow: hidden;
}

.chat-head {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}



.message-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  overflow-y: auto;
  min-height: 0;
  height: 100%;
}

.message-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.message-row.mine {
  align-items: flex-end;
}

.message-bubble {
  max-width: min(78%, 520px);
  padding: 11px 13px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.message-row.mine .message-bubble {
  justify-self: end;
  background: var(--button);
  color: var(--buttonText);
  border-color: transparent;
}

.message-time {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  opacity: .65;
  font-weight: 700;
}

.message-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--line);
}

.message-composer input {
  width: 100%;
  border: 1px solid var(--line);
  outline: 0;
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 12px 14px;
}

.echo-section {
  display: none;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.echo-section.open {
  display: block;
}

.echo-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.echo-input-row input {
  width: 100%;
  border: 1px solid var(--line);
  outline: 0;
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 999px;
  padding: 12px 14px;
}

.echo-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.echo {
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .dripline-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .thread-list {
    max-height: 240px;
  }

  .message-composer,
  .echo-input-row {
    grid-template-columns: 1fr;
  }
}


/* V16 profile click safety */
.clickable-profile,
.drop-user[data-action="profile"],
.profile-head[data-action="profile"] {
  cursor: pointer;
}

.clickable-profile:hover strong,
.drop-user[data-action="profile"]:hover strong,
.profile-head[data-action="profile"]:hover h2,
.drop-user[data-action="profile"]:hover .username,
.profile-head[data-action="profile"]:hover .username {
  text-decoration: underline;
}


/* V17 consolidated interaction/layout safety */
.brand-logo {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
  display: block;
  object-fit: cover;
  background: #0d0d10;
  border: 1px solid var(--line-strong);
}

.brand-mark {
  display: none !important;
}

.clickable-profile,
.drop-user[data-action="profile"],
.profile-head[data-action="profile"],
.thread-item,
[data-view="dripline"] {
  cursor: pointer;
}

.profile-cover {
  background-size: cover !important;
  background-position: center !important;
}

.settings-banner-preview {
  width: 100%;
  min-height: 118px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.035)),
    var(--surface-2);
  background-size: cover;
  background-position: center;
}

.settings-url-label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.section-title-row h2 {
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -2px;
  line-height: 1;
}

.dripline-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.dripline-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.dripline-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}



.echo-section {
  display: none;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.echo-section.open {
  display: block;
}

.echo-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.echo-input-row input {
  width: 100%;
  border: 1px solid var(--line);
  outline: 0;
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 999px;
  padding: 12px 14px;
}

.echo-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.echo {
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .dripline-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .thread-list {
    max-height: 240px;
  }

  .message-composer,
  .echo-input-row {
    grid-template-columns: 1fr;
  }
}


/* V18 nav/profile hard fix */
#profilePage:not(.active),
#driplineView.hidden,
#homeView.hidden {
  display: none !important;
}

#profilePage.active {
  display: grid !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

#driplineView:not(.hidden) {
  display: block !important;
}

.mobile-nav {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.mobile-nav button {
  min-width: 0 !important;
  font-size: 16px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.rail .rail-group:first-child {
  display: grid;
  gap: 10px;
}

.drop-user[data-action="profile"],
#sideProfileHead[data-action="profile"],
.thread-item,
[data-view] {
  cursor: pointer;
}

@media (max-width: 420px) {
  .mobile-nav {
    gap: 6px !important;
    padding: 8px !important;
  }

  .mobile-nav button {
    min-height: 44px !important;
    font-size: 15px !important;
    border-radius: 15px !important;
  }
}


/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   UI accessibility, profile banner readability, Dripline selector,
   and social graph views.
   ========================================================= */

/* Banner readability */
.profile-hero {
  position: relative;
  overflow: hidden;
}

.profile-cover {
  position: relative;
  min-height: 138px;
  background-size: cover !important;
  background-position: center !important;
  isolation: isolate;
}

.profile-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.62) 100%),
    linear-gradient(90deg, rgba(0,0,0,.42) 0%, transparent 65%);
  z-index: 0;
}

.profile-main-row {
  margin-top: -48px;
  padding: 0 12px 0;
}

.profile-main-info > div:last-child {
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}

.profile-main-info h2,
.profile-main-info .username,
#profilePageName,
#profilePageUsername {
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.9);
}

.profile-page-avatar {
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
  background-color: #fff;
}

/* General visual hierarchy/accessibility */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.action:focus-visible,
.thread-item:focus-visible,
.recipient-item:focus-visible,
.social-user-item:focus-visible {
  outline: 3px solid rgba(255,255,255,.55);
  outline-offset: 3px;
}

.drop,
.panel,
.composer,
.daily-challenge,
.pulse-card {
  border-color: rgba(255,255,255,.11);
}

.drop-text,
.profile-bio,
.daily-challenge p {
  color: rgba(247,247,248,.88);
}

body.light .drop-text,
body.light .profile-bio,
body.light .daily-challenge p {
  color: rgba(17,17,19,.78);
}

/* Clickable profile social graph */
.profile-pill-button,
.stat-button {
  cursor: pointer;
  color: var(--muted);
  font: inherit;
  box-shadow: none;
}

.profile-pill-button:hover,
.stat-button:hover {
  background: var(--button);
  color: var(--buttonText);
  transform: translateY(-1px);
}

.stat-button {
  width: 100%;
  display: block;
}

/* Dripline selector */
.dripline-layout {
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) !important;
}

.thread-sidebar {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  max-height: 680px;
}

.recipient-selector {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-2);
  padding: 12px;
  min-width: 0;
}

.selector-head {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
}

.recipient-selector input,
#newDripSearchInput {
  width: 100%;
  border: 1px solid var(--line);
  outline: 0;
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 11px 13px;
  margin-bottom: 10px;
}

.recipient-list {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}

.recipient-list.compact {
  max-height: 180px;
}

.recipient-item,
.social-user-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  text-align: left;
  box-shadow: none;
}

.recipient-item:hover,
.social-user-item:hover {
  background: var(--card-soft);
  color: var(--ink);
}

.recipient-item.selected {
  background: var(--button);
  color: var(--buttonText);
}

.recipient-item.selected .username {
  color: rgba(0,0,0,.64);
}

.thread-divider {
  height: 1px;
  background: var(--line);
}

.thread-list {
  border-radius: 22px;
}

/* Dripline rendering polish */
.chat-head h3 {
  font-size: 22px;
  letter-spacing: -.8px;
}

.message-list {
  scroll-behavior: smooth;
}

.message-bubble {
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
}

/* Social graph modal */
.social-modal {
  width: min(560px, 100%);
}

.social-user-list {
  display: grid;
  gap: 10px;
  max-height: min(560px, 70vh);
  overflow-y: auto;
}

.social-user-copy {
  min-width: 0;
}

.social-user-copy strong,
.social-user-copy .username {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobile */
@media (max-width: 900px) {
  .dripline-layout {
    grid-template-columns: 1fr !important;
  }

  .thread-sidebar {
    max-height: none;
  }

  .recipient-list {
    max-height: 180px;
  }
}

@media (max-width: 720px) {
  .profile-cover {
    min-height: 124px;
  }

  .profile-main-row {
    margin-top: -40px;
    padding: 0 6px;
  }

  .profile-main-info > div:last-child {
    padding: 8px 10px;
  }

  .profile-main-info {
    align-items: center;
  }

  .profile-main-info h2 {
    font-size: 28px;
  }

  .recipient-item,
  .social-user-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .recipient-item .ghost,
  .social-user-item .ghost {
    grid-column: 1 / -1;
    width: 100%;
  }
}


/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Profile layout refactor + Drip workflow polish
   ========================================================= */

/* Profile banner/username refactor:
   keep banner as a clean image strip, then place profile identity below it. */
.profile-hero {
  overflow: visible !important;
}

.profile-cover {
  min-height: 156px !important;
  margin-bottom: 0 !important;
  border-radius: 26px !important;
  position: relative !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
}

.profile-cover::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.35) 100%) !important;
  pointer-events: none !important;
}

.profile-main-row {
  margin-top: 18px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
}

.profile-main-info {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}

.profile-main-info > div:last-child {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

.profile-page-avatar {
  width: 96px !important;
  height: 96px !important;
  border-radius: 30px !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.28) !important;
}

.profile-main-info h2,
.profile-main-info .username,
#profilePageName,
#profilePageUsername {
  color: var(--ink) !important;
  text-shadow: none !important;
}

#profilePageUsername {
  color: var(--muted) !important;
}

.profile-cta-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

#profilePageDripBtn {
  min-width: 92px;
}

#profilePageActionBtn {
  min-width: 96px;
}

/* Global Drip button styles */
[data-action="quickDrip"],
[data-action="startDripFromProfile"] {
  cursor: pointer;
}

/* Drip selector/list naming and polish */
.recipient-item .ghost,
.social-user-item .ghost {
  white-space: nowrap;
}

/* Make social modal list buttons cleaner */
.social-user-item {
  grid-template-columns: auto minmax(0, 1fr) auto auto !important;
}

/* Mobile profile layout */
@media (max-width: 720px) {
  .profile-cover {
    min-height: 132px !important;
  }

  .profile-main-row {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 14px !important;
  }

  .profile-main-info {
    align-items: center !important;
  }

  .profile-page-avatar {
    width: 82px !important;
    height: 82px !important;
    border-radius: 26px !important;
  }

  .profile-cta-row {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-cta-row button {
    width: 100%;
  }

  .social-user-item {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }
}


/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Mobile hotbar reduced to Home / Post / Drip.
   ========================================================= */

.mobile-nav.hotbar-three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 10px !important;
  border-radius: 28px !important;
}

.mobile-nav.hotbar-three .hotbar-btn {
  min-height: 56px !important;
  display: grid !important;
  place-items: center !important;
  gap: 2px !important;
  padding: 7px 6px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.hotbar-icon {
  display: block;
  font-size: 20px;
  line-height: 1;
}

.hotbar-label {
  display: block;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .01em;
}

.mobile-nav.hotbar-three .hotbar-post {
  background: var(--button) !important;
  color: var(--buttonText) !important;
  transform: translateY(-6px);
  min-height: 62px !important;
  border-radius: 23px !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.28) !important;
}

.mobile-nav.hotbar-three .hotbar-post .hotbar-icon {
  font-size: 24px;
}

.mobile-nav.hotbar-three .hotbar-drip {
  position: relative;
  overflow: hidden;
}

.mobile-nav.hotbar-three .hotbar-drip.active,
.mobile-nav.hotbar-three .hotbar-drip:hover {
  background: var(--button) !important;
  color: var(--buttonText) !important;
}

.hotbar-drip-mark {
  display: block;
  width: 21px;
  height: 25px;
  position: relative;
  margin-top: 1px;
}

.hotbar-drip-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  border-radius: 55% 55% 55% 0;
  transform: rotate(135deg);
}

.hotbar-drip-mark::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--card);
  left: 7px;
  top: 9px;
  z-index: 1;
}

.mobile-nav.hotbar-three .hotbar-drip.active .hotbar-drip-mark::after,
.mobile-nav.hotbar-three .hotbar-drip:hover .hotbar-drip-mark::after {
  background: var(--buttonText);
  opacity: .25;
}

@media (max-width: 420px) {
  .mobile-nav.hotbar-three {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 9px !important;
  }

  .mobile-nav.hotbar-three .hotbar-btn {
    min-height: 52px !important;
    border-radius: 18px !important;
  }

  .mobile-nav.hotbar-three .hotbar-post {
    min-height: 58px !important;
  }
}


/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Hard override: mobile hotbar can only show Home / Post / Drip.
   ========================================================= */

#mobileNav.mobile-nav {
  display: none;
}

#mobileNav.mobile-nav:not(.hidden) {
  display: grid !important;
}

#mobileNav.hotbar-three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: column !important;
  grid-auto-columns: unset !important;
  gap: 10px !important;
  padding: 10px !important;
  border-radius: 28px !important;
}

/* Hide every button except the exact 3 allowed buttons. */
#mobileNav.hotbar-three > button {
  display: none !important;
}

#mobileNav.hotbar-three > button[data-view="home"],
#mobileNav.hotbar-three > button#mobileCreateBtn,
#mobileNav.hotbar-three > button[data-view="dripline"] {
  display: grid !important;
}

/* If an old hotbar somehow remains with extra buttons, hide old views anyway. */
#mobileNav > button[data-view="mine"],
#mobileNav > button[data-view="grabbed"],
#mobileNav > button[data-view="saved"] {
  display: none !important;
}

#mobileNav.hotbar-three .hotbar-btn {
  min-height: 56px !important;
  place-items: center !important;
  gap: 2px !important;
  padding: 7px 6px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

#mobileNav.hotbar-three .hotbar-icon {
  display: block;
  font-size: 20px;
  line-height: 1;
}

#mobileNav.hotbar-three .hotbar-label {
  display: block;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .01em;
}

#mobileNav.hotbar-three .hotbar-post {
  background: var(--button) !important;
  color: var(--buttonText) !important;
  transform: translateY(-6px);
  min-height: 62px !important;
  border-radius: 23px !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.28) !important;
}

#mobileNav.hotbar-three .hotbar-post .hotbar-icon {
  font-size: 24px;
}

#mobileNav.hotbar-three .hotbar-drip {
  position: relative;
  overflow: hidden;
}

#mobileNav.hotbar-three .hotbar-drip.active,
#mobileNav.hotbar-three .hotbar-drip:hover {
  background: var(--button) !important;
  color: var(--buttonText) !important;
}

.hotbar-drip-mark {
  display: block;
  width: 21px;
  height: 25px;
  position: relative;
  margin-top: 1px;
}

.hotbar-drip-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  border-radius: 55% 55% 55% 0;
  transform: rotate(135deg);
}

.hotbar-drip-mark::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--card);
  left: 7px;
  top: 9px;
  z-index: 1;
}

#mobileNav.hotbar-three .hotbar-drip.active .hotbar-drip-mark::after,
#mobileNav.hotbar-three .hotbar-drip:hover .hotbar-drip-mark::after {
  background: var(--buttonText);
  opacity: .25;
}

@media (max-width: 900px) {
  #mobileNav.hotbar-three:not(.hidden) {
    display: grid !important;
  }
}

@media (max-width: 420px) {
  #mobileNav.hotbar-three {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 9px !important;
  }

  #mobileNav.hotbar-three .hotbar-btn {
    min-height: 52px !important;
    border-radius: 18px !important;
  }

  #mobileNav.hotbar-three .hotbar-post {
    min-height: 58px !important;
  }
}


/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Login-safe defaults and auth chrome visibility.
   ========================================================= */

/* Search and logged-in chrome must never appear before auth is confirmed. */
body:not(.is-authed) #searchBox,
body:not(.is-authed) #settingsBtn,
body:not(.is-authed) #createTopBtn,
body:not(.is-authed) #logoutBtn,
body:not(.is-authed) #floatingBtn,
body:not(.is-authed) #mobileNav,
body:not(.is-authed) #app {
  display: none !important;
}

body.is-authed #authPage {
  display: none !important;
}

body.is-authed #app {
  display: grid !important;
}

/* Keep v22 hotbar rule: exactly three buttons. */
#mobileNav.hotbar-three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#mobileNav.hotbar-three > button {
  display: none !important;
}

#mobileNav.hotbar-three > button[data-view="home"],
#mobileNav.hotbar-three > button#mobileCreateBtn,
#mobileNav.hotbar-three > button[data-view="dripline"] {
  display: grid !important;
}

#mobileNav > button[data-view="mine"],
#mobileNav > button[data-view="grabbed"],
#mobileNav > button[data-view="saved"] {
  display: none !important;
}


/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Desktop rail and mobile hotbar are both only Home / Post / Drip.
   ========================================================= */

/* Desktop side rail: exactly 3 visible buttons */
.three-button-rail {
  width: 82px !important;
}

.three-button-rail .rail-group {
  display: grid !important;
  gap: 10px !important;
}

.three-button-rail .rail-btn {
  width: 58px !important;
  min-height: 58px !important;
  height: auto !important;
  display: grid !important;
  place-items: center !important;
  gap: 3px !important;
  padding: 8px 4px !important;
  border-radius: 20px !important;
  font-size: 18px !important;
}

.three-button-rail .rail-label {
  display: block;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
}

.three-button-rail .rail-icon {
  display: block;
  font-size: 20px;
  line-height: 1;
}

.three-button-rail .rail-create {
  background: var(--button) !important;
  color: var(--buttonText) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.25) !important;
}

.three-button-rail .rail-drip.active,
.three-button-rail .rail-drip:hover {
  background: var(--button) !important;
  color: var(--buttonText) !important;
}

.rail-drip-mark {
  display: block;
  width: 20px;
  height: 24px;
  position: relative;
}

.rail-drip-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  border-radius: 55% 55% 55% 0;
  transform: rotate(135deg);
}

.rail-drip-mark::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--card);
  left: 6.5px;
  top: 8.5px;
  z-index: 1;
}

.three-button-rail .rail-drip.active .rail-drip-mark::after,
.three-button-rail .rail-drip:hover .rail-drip-mark::after {
  background: var(--buttonText);
  opacity: .25;
}

/* Hard hide any old side rail buttons if stale HTML survives. */
.rail button[data-view="mine"],
.rail button[data-view="grabbed"],
.rail button[data-view="saved"],
.rail button[title="My drops"],
.rail button[title="Grabbed"],
.rail button[title="Saved"] {
  display: none !important;
}

/* Hard limit mobile hotbar to the same 3 buttons. */
#mobileNav.hotbar-three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#mobileNav.hotbar-three > button {
  display: none !important;
}

#mobileNav.hotbar-three > button[data-view="home"],
#mobileNav.hotbar-three > button#mobileCreateBtn,
#mobileNav.hotbar-three > button[data-view="dripline"] {
  display: grid !important;
}

#mobileNav > button[data-view="mine"],
#mobileNav > button[data-view="grabbed"],
#mobileNav > button[data-view="saved"] {
  display: none !important;
}


/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Auth UI safety retained.
   ========================================================= */

body:not(.is-authed) #searchBox,
body:not(.is-authed) #settingsBtn,
body:not(.is-authed) #createTopBtn,
body:not(.is-authed) #logoutBtn,
body:not(.is-authed) #floatingBtn,
body:not(.is-authed) #mobileNav,
body:not(.is-authed) #app {
  display: none !important;
}

body.is-authed #authPage {
  display: none !important;
}

body.is-authed #app {
  display: grid !important;
}


/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Repairs Google auth handler 404 and restores mobile hotbar.
   ========================================================= */

/* Logged-out: hide app chrome. */
body:not(.is-authed) #searchBox,
body:not(.is-authed) #settingsBtn,
body:not(.is-authed) #createTopBtn,
body:not(.is-authed) #logoutBtn,
body:not(.is-authed) #floatingBtn,
body:not(.is-authed) #mobileNav,
body:not(.is-authed) #app {
  display: none !important;
}

/* Logged-in app visibility. */
body.is-authed #authPage {
  display: none !important;
}

body.is-authed #app {
  display: grid !important;
}

/* Desktop should not show mobile hotbar. */
#mobileNav {
  display: none !important;
}

/* Mobile logged-in hotbar: force visible. */
@media (max-width: 900px) {
  body.is-authed #mobileNav.hotbar-three {
    display: grid !important;
  }

  body.is-authed #mobileNav.hotbar-three.hidden {
    display: none !important;
  }

  /* Ensure mobileHotbar actually hides when hidden class is applied */
  body.is-authed #mobileHotbar.mobile-hotbar.hidden,
  html body.is-authed #mobileHotbar.mobile-hotbar.hidden {
    display: none !important;
  }
}

/* Exactly three mobile buttons. */
#mobileNav.hotbar-three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: initial !important;
  gap: 10px !important;
  padding: 10px !important;
  border-radius: 28px !important;
}

#mobileNav.hotbar-three > button {
  display: none !important;
}

body.is-authed #mobileNav.hotbar-three > button[data-view="home"],
body.is-authed #mobileNav.hotbar-three > button#mobileCreateBtn,
body.is-authed #mobileNav.hotbar-three > button[data-view="dripline"] {
  display: grid !important;
}

#mobileNav > button[data-view="mine"],
#mobileNav > button[data-view="grabbed"],
#mobileNav > button[data-view="saved"] {
  display: none !important;
}

#mobileNav.hotbar-three .hotbar-btn {
  min-height: 56px !important;
  place-items: center !important;
  gap: 2px !important;
  padding: 7px 6px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

#mobileNav.hotbar-three .hotbar-post {
  background: var(--button) !important;
  color: var(--buttonText) !important;
  transform: translateY(-6px);
  min-height: 62px !important;
  border-radius: 23px !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.28) !important;
}

.hotbar-icon {
  display: block;
  font-size: 20px;
  line-height: 1;
}

.hotbar-label {
  display: block;
  font-size: 11px;
  line-height: 1;
}

.hotbar-drip-mark {
  display: block;
  width: 21px;
  height: 25px;
  position: relative;
}

.hotbar-drip-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  border-radius: 55% 55% 55% 0;
  transform: rotate(135deg);
}

.hotbar-drip-mark::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--card);
  left: 7px;
  top: 9px;
  z-index: 1;
}


/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Final mobile hotbar: simple, fixed, three buttons only.
   ========================================================= */

/* Kill every old hotbar/nav rule by hiding the old id completely. */
#mobileNav {
  display: none !important;
}

/* New hotbar is hidden by default and desktop. */
#mobileHotbar.mobile-hotbar {
  display: none !important;
}

/* =============================================
   HOTBAR — sleek full-width Instagram-style nav
   ============================================= */

/* Hidden everywhere by default */
#mobileHotbar {
  display: none !important;
}

@media (max-width: 900px) {
  /* Show only when authed and not loading */
  body.is-authed:not(.is-loading) #mobileHotbar {
    display: flex !important;
    align-items: flex-start !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    z-index: 10000 !important;
    background: var(--surface) !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    gap: 0 !important;
    /* Extend background into safe area below */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Pseudo-element to fill any gap below safe area */
  body.is-authed:not(.is-loading) #mobileHotbar::after {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: env(safe-area-inset-bottom, 0px) !important;
    background: var(--surface) !important;
    z-index: -1 !important;
  }

  /* Each button takes equal space */
  body.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-btn {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px 4px !important;
    min-height: 56px !important;
    height: 56px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: rgba(255,255,255,0.45) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
    line-height: 1.2 !important;
    transform: none !important;
    transition: color .15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
  }

  body.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-btn:active {
    background: transparent !important;
    color: rgba(255,255,255,0.45) !important;
  }

  body.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-btn.active {
    color: #ffffff !important;
  }

  body.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-icon {
    display: block !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  /* Padding so content isn't hidden behind the bar - only shell, main handles its own */
  body.is-authed:not(.is-loading):not(.flow-mode) .shell {
    padding-bottom: 0 !important;
  }
}

/* Drop/Post button — same size as others, accent color icon */
.mobile-hotbar-post {
  background: transparent !important;
  transform: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.mobile-hotbar-post .mobile-hotbar-icon {
  font-size: 24px !important;
}

.mobile-hotbar-drip-mark {
  display: block;
  width: 22px;
  height: 26px;
  position: relative;
}

.mobile-hotbar-drip-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  border-radius: 55% 55% 55% 0;
  transform: rotate(135deg);
}

.mobile-hotbar-drip-mark::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--card);
  left: 7.5px;
  top: 9.5px;
  z-index: 1;
}

.mobile-hotbar-drip.active .mobile-hotbar-drip-mark::after,
.mobile-hotbar-drip:hover .mobile-hotbar-drip-mark::after {
  background: var(--buttonText);
  opacity: .25;
}



/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Real-time notifications UI.
   ========================================================= */

.notification-top-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.notification-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--button);
  color: var(--buttonText);
  font-size: 11px;
  font-weight: 950;
}

.notifications-modal {
  width: min(620px, 100%);
}

.notifications-list-modal {
  display: grid;
  gap: 10px;
  max-height: min(620px, 70vh);
  overflow-y: auto;
}

.notification-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
  box-shadow: none;
}

.notification-card.unread {
  background: var(--card-soft);
  border-color: var(--line-strong);
}

.notification-card:hover {
  transform: translateY(-1px);
}

.notification-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--button);
  opacity: .95;
}

.notification-card:not(.unread) .notification-dot {
  opacity: .18;
}

.notification-copy {
  min-width: 0;
}

.notification-copy strong,
.notification-copy span {
  display: block;
}

.notification-copy strong {
  overflow-wrap: anywhere;
}

.notification-copy span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.notification-type {
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.panel .notification.unread strong::before {
  content: "• ";
}

@media (max-width: 720px) {
  .notification-top-btn {
    justify-content: center;
  }

  .notification-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .notification-type {
    grid-column: 2;
    justify-self: start;
  }
}


/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Notification visibility + modal styles.
   ========================================================= */

body:not(.is-authed) #notificationsBtn {
  display: none !important;
}

.notification-top-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.notification-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--button);
  color: var(--buttonText);
  font-size: 11px;
  font-weight: 950;
}

.notifications-modal {
  width: min(620px, 100%);
}

.notifications-list-modal {
  display: grid;
  gap: 10px;
  max-height: min(620px, 70vh);
  overflow-y: auto;
}

.notification-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
  box-shadow: none;
}

.notification-card.unread {
  background: var(--card-soft);
  border-color: var(--line-strong);
}

.notification-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--button);
}

.notification-card:not(.unread) .notification-dot {
  opacity: .18;
}

.notification-copy {
  min-width: 0;
}

.notification-copy strong,
.notification-copy span {
  display: block;
}

.notification-copy strong {
  overflow-wrap: anywhere;
}

.notification-copy span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.notification-type {
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.panel .notification.unread strong::before {
  content: "• ";
}


/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Cleaner side notifications + faster listener startup.
   ========================================================= */

/* Right sidebar notification card cleanup */
#notifications {
  display: grid;
  gap: 10px;
}

#notifications .notification {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}

#notifications .notification::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--button);
  opacity: .22;
}

#notifications .notification.unread {
  background: var(--card-soft);
  border-color: var(--line-strong);
}

#notifications .notification.unread::before {
  opacity: 1;
}

#notifications .notification:hover {
  transform: translateY(-1px);
  background: var(--card-soft);
}

#notifications .notification strong {
  display: block;
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#notifications .notification span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

#notifications .notification.unread strong::before,
.panel .notification.unread strong::before {
  content: "" !important;
}

/* Make the top notification button less cramped */
.notification-top-btn {
  white-space: nowrap;
}

@media (max-width: 1120px) {
  .notification-top-btn {
    width: 100%;
    justify-content: center;
  }
}


/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   The Flow, predictive search, and Permanent Collection.
   ========================================================= */

/* Predictive search */
.search {
  position: relative;
  overflow: visible !important;
  z-index: 60;
}

.search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow);
  z-index: 200;
  max-height: 360px;
  overflow-y: auto;
}

.search-suggestion {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
  box-shadow: none;
}

.search-suggestion:hover {
  background: var(--card-soft);
  transform: translateY(-1px);
}

.search-suggestion-copy {
  min-width: 0;
}

.search-suggestion-copy strong,
.search-suggestion-copy span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-rank {
  border-radius: 999px;
  padding: 6px 9px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

/* Flow */
#flowView.hidden {
  display: none !important;
}

.flow-page {
  display: grid;
  gap: 14px;
}

.flow-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 24px;
  border-radius: 28px;
}

.flow-hero h2 {
  font-size: clamp(32px, 5vw, 54px);
  letter-spacing: -2px;
  line-height: .95;
  margin: 10px 0 8px;
}

.flow-feed .drop {
  border-color: rgba(255,255,255,.16);
}

.flow-score-badge {
  border: 1px solid var(--line);
  background: var(--button);
  color: var(--buttonText);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.drop.video-drop {
  position: relative;
}

.drop.video-drop::before {
  content: "Video Drop";
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.58);
  color: white;
  border: 1px solid rgba(255,255,255,.18);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

/* Nav now includes Flow */
.flow-rail .rail-group {
  display: grid !important;
  gap: 10px !important;
}

.flow-rail .rail-btn {
  width: 58px !important;
  min-height: 58px !important;
}

.rail-flow.active,
.rail-flow:hover {
  background: var(--button) !important;
  color: var(--buttonText) !important;
}

@media (max-width: 900px) {

  .flow-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .search-suggestions {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 124px;
  }
}

/* Permanent Collection */
.permanent-title {
  margin-top: 20px;
}

.permanent-drop {
  border-color: rgba(255,255,255,.24) !important;
}

.permanent-drop .drop-meta::before {
  content: "Permanent Collection";
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--button);
  color: var(--buttonText);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}


/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Mobile Flow becomes a full-screen TikTok-style FYP.
   ========================================================= */

/* Desktop keeps regular Flow. */
.flow-feed .drop-video {
  object-fit: cover;
}

/* Mobile Flow immersive mode */
@media (max-width: 900px) {
  body.flow-mode {
    overflow: hidden !important;
    background: #000 !important;
  }

  body.flow-mode .shell {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  body.flow-mode .topbar,
  body.flow-mode .rail,
  body.flow-mode .side,
  body.flow-mode .floating,
  body.flow-mode #homeView,
  body.flow-mode #profilePage,
  body.flow-mode #driplineView {
    display: none !important;
  }

  body.flow-mode .app-grid {
    display: block !important;
    margin: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  body.flow-mode .main,
  body.flow-mode .shell,
  body.flow-mode .app-grid {
    display: block !important;
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  body.flow-mode #flowView {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 100 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background: #000 !important;
    overflow: hidden !important;
  }

  /* Hide hotbar in flow mode - flow is full screen */
  body.flow-mode #mobileHotbar {
    display: flex !important;
    z-index: 10050 !important;
  }

  body.flow-mode .flow-hero {
    display: none !important;
  }

  body.flow-mode .flow-feed {
    display: block !important;
    width: 100vw !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-snap-type: y mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    background: #000 !important;
  }

  body.flow-mode .flow-feed::-webkit-scrollbar {
    display: none !important;
  }

  body.flow-mode .flow-feed .drop {
    position: relative !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    color: #fff !important;
  }

  body.flow-mode .flow-feed .drop::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 0 0 0 !important;
    height: 45% !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.82)) !important;
  }

  body.flow-mode .flow-feed .drop.video-drop::before {
    left: 14px !important;
    right: auto !important;
    top: calc(14px + env(safe-area-inset-top, 0px)) !important;
    z-index: 5 !important;
    background: rgba(0,0,0,.42) !important;
    backdrop-filter: blur(10px) !important;
  }

  body.flow-mode .flow-feed .drop-header {
    position: absolute !important;
    left: 14px !important;
    right: 88px !important;
    bottom: calc(190px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 5 !important;
    display: block !important;
    margin: 0 !important;
  }

  body.flow-mode .flow-feed .drop-user {
    color: #fff !important;
  }

  body.flow-mode .flow-feed .drop-user .small-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
  }

  body.flow-mode .flow-feed .drop-user strong {
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.9) !important;
  }

  body.flow-mode .flow-feed .drop-user .username {
    color: rgba(255,255,255,.76) !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.9) !important;
  }

  body.flow-mode .flow-feed .drop-text {
    position: absolute !important;
    left: 14px !important;
    right: 88px !important;
    bottom: calc(128px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 5 !important;
    max-height: 88px !important;
    overflow: hidden !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.9) !important;
  }

  body.flow-mode .flow-feed .drop-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    background: #000 !important;
    z-index: 1 !important;
  }

  body.flow-mode .flow-feed .drop-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    z-index: 1 !important;
  }

  body.flow-mode .flow-feed .drop-meta {
    position: absolute !important;
    left: 14px !important;
    right: 88px !important;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 5 !important;
    margin: 0 !important;
    gap: 6px !important;
  }

  body.flow-mode .flow-feed .drop-badge,
  body.flow-mode .flow-feed .flow-score-badge {
    background: rgba(0,0,0,.42) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.18) !important;
    backdrop-filter: blur(10px) !important;
  }

  body.flow-mode .flow-feed .drop-actions {
    position: absolute !important;
    right: 10px !important;
    bottom: calc(116px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 6 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 66px !important;
    margin: 0 !important;
  }

  body.flow-mode .flow-feed .action {
    width: 62px !important;
    min-height: 52px !important;
    display: grid !important;
    place-items: center !important;
    padding: 8px 5px !important;
    border-radius: 20px !important;
    background: rgba(0,0,0,.38) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    backdrop-filter: blur(10px) !important;
    font-size: 12px !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.1 !important;
  }

  body.flow-mode .flow-feed .action.grabbed,
  body.flow-mode .flow-feed .action:hover {
    background: rgba(255,255,255,.92) !important;
    color: #000 !important;
  }

  body.flow-mode .flow-feed .echo-section {
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 20 !important;
    max-height: 45dvh !important;
    overflow-y: auto !important;
    padding: 12px !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 22px !important;
    background: rgba(0,0,0,.78) !important;
    backdrop-filter: blur(18px) !important;
  }

  body.flow-mode #mobileHotbar {
    display: none !important;
  }

  body.flow-mode .flow-feed .empty-state {
    height: 100dvh !important;
    display: grid !important;
    place-items: center !important;
    padding: 24px !important;
    color: #fff !important;
    background: #000 !important;
  }
}


/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Phone recording/upload video fix.
   ========================================================= */

.video-upload-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

#uploadVideoBtn {
  border-style: dashed;
}

.record-preview.has-video-file {
  display: block !important;
}


/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Hide mobile hotbar while posting/recording so buttons are not blocked.
   ========================================================= */

body.modal-open #mobileHotbar,
body.create-open #mobileHotbar {
  display: none !important;
}

body.modal-open,
body.create-open {
  overflow: hidden;
}

#createModal.open,
#createModal.modal-backdrop.open {
  z-index: 50000 !important;
}

#createModal .modal {
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  overflow-y: auto !important;
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
}

#createDropBtn {
  position: sticky;
  bottom: 0;
  z-index: 3;
}

@media (max-width: 900px) {
  body.modal-open #mobileHotbar.mobile-hotbar,
  body.create-open #mobileHotbar.mobile-hotbar {
    display: none !important;
  }

  #createModal .modal {
    width: calc(100vw - 18px) !important;
    margin: 9px !important;
  }

  #recordControls {
    padding-bottom: 8px;
  }
}


/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Makes phone video upload clearly visible.
   ========================================================= */

.upload-video-cta,
.always-visible-video-upload {
  width: 100%;
  justify-content: center;
  border-style: dashed !important;
  min-height: 48px;
  margin: 10px 0;
}

.always-visible-video-upload {
  background: var(--surface-2) !important;
}

.video-upload-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  margin-top: -4px;
}

#videoOption {
  border-style: dashed;
}

@media (max-width: 720px) {
  .upload-video-cta,
  .always-visible-video-upload {
    min-height: 54px;
    font-size: 15px;
  }
}


/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Flow audio toggle.
   ========================================================= */

.flow-sound-btn {
  display: none;
}

@media (max-width: 900px) {
  body.flow-mode .flow-sound-btn {
    display: inline-flex !important;
    position: fixed !important;
    top: calc(14px + env(safe-area-inset-top, 0px)) !important;
    right: 14px !important;
    z-index: 350 !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 9px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(0,0,0,.48) !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
    backdrop-filter: blur(14px) !important;
  }

  body.flow-mode .flow-sound-btn.sound-on {
    background: rgba(255,255,255,.92) !important;
    color: #000 !important;
  }

  body.flow-mode .flow-feed .drop-video {
    cursor: pointer;
  }
}

/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Upload progress + Flow control polish.
   ========================================================= */

.upload-progress {
  display: grid;
  gap: 9px;
  padding: 13px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  margin: 12px 0;
}

.upload-progress.hidden {
  display: none !important;
}

.upload-progress-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.upload-progress-row strong {
  font-size: 13px;
}

.upload-progress-row span {
  font-size: 13px;
  font-weight: 950;
  color: var(--muted);
}

.upload-progress-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
}

.upload-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--button);
  transition: width .2s ease;
}

.upload-progress p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

#createDropBtn.is-uploading {
  opacity: .72;
  pointer-events: none;
}

.flow-pause-indicator {
  display: none;
}

@media (max-width: 900px) {
  body.flow-mode .flow-pause-indicator {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: none;
    place-items: center;
    pointer-events: none;
  }

  body.flow-mode .flow-pause-indicator.visible {
    display: grid;
  }

  .flow-pause-icon {
    width: 76px;
    height: 76px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.18);
    color: white;
    font-size: 34px;
    font-weight: 950;
    backdrop-filter: blur(14px);
    box-shadow: 0 16px 40px rgba(0,0,0,.38);
  }

  body.flow-mode .flow-feed .drop-text {
    max-height: 54px !important;
    transition: max-height .2s ease;
  }

  body.flow-mode .flow-feed .drop-text.expanded {
    max-height: 180px !important;
    overflow-y: auto !important;
    padding-right: 4px;
  }

  body.flow-mode .flow-feed .drop-text::after {
    content: " tap caption";
    opacity: .62;
    font-size: 12px;
    font-weight: 900;
  }

  body.flow-mode .flow-feed .drop-text.expanded::after {
    content: "";
  }

  body.flow-mode .flow-feed .action {
    font-weight: 950 !important;
  }
}

/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Flow audio cleanup, Echoes, links, Saved Drops, caption fix.
   ========================================================= */

/* Saved Drops section */
#savedView.hidden {
  display: none !important;
}

.saved-page {
  display: grid;
  gap: 14px;
}

.saved-hero {
  padding: 24px;
  border-radius: 28px;
}

.saved-hero h2 {
  font-size: clamp(30px, 5vw, 50px);
  letter-spacing: -2px;
  line-height: 1;
  margin: 10px 0 8px;
}

/* Make Echoes/comment section feel clickable and usable */
.action[data-action="echoes"] {
  cursor: pointer;
}

.echo-section.open {
  display: block !important;
}

.echo-input-row input {
  min-height: 44px;
}

/* Flow caption fix: hide badges/metadata that were covering captions */
@media (max-width: 900px) {
  body.flow-mode .flow-feed .drop-meta {
    display: none !important;
  }

  body.flow-mode .flow-feed .drop-text {
    bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    right: 92px !important;
    max-height: 96px !important;
  }

  body.flow-mode .flow-feed .drop-text.expanded {
    max-height: 210px !important;
  }

  body.flow-mode .flow-feed .drop-header {
    bottom: calc(174px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.flow-mode .flow-feed .drop-actions {
    bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.flow-mode .flow-feed .echo-section.open {
    display: block !important;
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 500 !important;
    max-height: 46dvh !important;
    overflow-y: auto !important;
    padding: 12px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(0,0,0,.84) !important;
    backdrop-filter: blur(18px) !important;
  }

  body.flow-mode .flow-feed .echo-input-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  body.flow-mode .flow-feed .echo-input-row input {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.18) !important;
  }

  body.flow-mode .flow-feed .echo-input-row input::placeholder {
    color: rgba(255,255,255,.62) !important;
  }

  body.flow-mode .flow-feed .echo {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.14) !important;
  }
}

/* Top Saved button */
#savedTopBtn {
  white-space: nowrap;
}

/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Dedicated Echo sheet for mobile Flow.
   ========================================================= */

.flow-echo-backdrop {
  display: none;
}

.flow-echo-backdrop.open {
  display: grid !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 20000 !important;
  align-items: end !important;
  background: rgba(0,0,0,.45) !important;
}

.flow-echo-sheet {
  width: 100%;
  max-height: min(72dvh, 680px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
  border: 1px solid rgba(255,255,255,.14);
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 -18px 45px rgba(0,0,0,.45);
  overflow: hidden;
}

.flow-echo-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.flow-echo-head h2 {
  font-size: 26px;
  letter-spacing: -1px;
  line-height: 1;
}

.flow-echo-list {
  display: grid;
  gap: 10px;
  overflow-y: auto;
  min-height: 120px;
  padding-right: 2px;
}

.flow-echo-item {
  padding: 12px 13px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.flow-echo-item strong {
  display: block;
  margin-bottom: 4px;
}

.flow-echo-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.flow-echo-composer input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  outline: 0;
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 999px;
  padding: 0 14px;
}

.flow-echo-composer button {
  min-height: 48px;
}

body.flow-echo-open #mobileHotbar {
  display: none !important;
}

/* In Flow, don't try to show the regular inline Echo box. Use the sheet. */
@media (max-width: 900px) {
  body.flow-mode .flow-feed .echo-section {
    display: none !important;
  }
}

/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Top hamburger menu, Saved on profile, 5-button mobile hotbar.
   ========================================================= */

/* Top hamburger menu */
.menu-actions {
  position: relative;
}

.top-menu-btn {
  min-width: 46px;
  width: 46px;
  height: 42px;
  padding: 0 !important;
  display: inline-grid;
  place-items: center;
}

.hamburger-lines {
  display: grid;
  gap: 4px;
  width: 20px;
}

.hamburger-lines span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.top-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow);
  z-index: 5000;
}

.top-menu-panel.hidden {
  display: none !important;
}

.top-menu-panel button {
  width: 100%;
  justify-content: flex-start;
  box-shadow: none;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
}

.top-menu-panel button:hover {
  background: var(--button);
  color: var(--buttonText);
}

/* Profile Saved section */
.saved-profile-title {
  margin-top: 20px;
}

/* Old standalone saved page should not show if cached */
#savedView {
  display: none !important;
}

/* Five-button mobile hotbar */
@media (max-width: 900px) {
  /* five-hotbar old card styles removed - see HOTBAR section */
}

/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Video Drops are excluded from Home and live in Flow.
   ========================================================= */

.home-video-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   TikTok/Instagram profile panels + top-right menu placement.
   ========================================================= */

/* Put hamburger menu visually above/right of the search area */
.profile-menu-topbar {
  align-items: start !important;
}

.profile-menu-topbar .menu-actions {
  align-self: start !important;
  justify-self: end !important;
  margin-top: 0 !important;
  z-index: 100;
}

.profile-menu-topbar #searchBox {
  margin-top: 34px !important;
}

.top-menu-btn {
  box-shadow: 0 10px 25px rgba(0,0,0,.18) !important;
}

/* Hide search on profile, similar to IG/TikTok profile pages */
body.profile-mode #searchBox {
  display: none !important;
}

/* Profile page visual overhaul */
.profile-page.active {
  gap: 18px !important;
}

.profile-hero {
  padding: 0 !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
  background: var(--card) !important;
}

.profile-cover {
  border-radius: 0 !important;
  min-height: 185px !important;
}

.profile-main-row {
  margin-top: 0 !important;
  padding: 0 18px 18px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 16px !important;
  align-items: end !important;
}

.profile-main-info {
  margin-top: -42px !important;
  align-items: end !important;
}

.profile-page-avatar {
  width: 104px !important;
  height: 104px !important;
  border-radius: 50% !important;
  border: 5px solid var(--card) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.28) !important;
}

.profile-main-info h2 {
  font-size: clamp(30px, 5vw, 44px) !important;
  letter-spacing: -1.7px !important;
  line-height: 1 !important;
}

.profile-bio {
  padding: 0 18px !important;
  margin: 0 0 8px !important;
  max-width: 760px;
  color: var(--ink) !important;
  font-weight: 750;
}

/* IG/TikTok-style stats row */
.profile-meta-row {
  padding: 10px 18px 14px !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  background: var(--surface-2) !important;
}

.profile-pill,
.profile-pill-button {
  width: 100% !important;
  min-height: 58px !important;
  display: grid !important;
  place-items: center !important;
  gap: 2px !important;
  padding: 8px 6px !important;
  border-radius: 18px !important;
  background: var(--card) !important;
  text-align: center !important;
}

.profile-pill strong,
.profile-pill-button strong {
  font-size: 19px !important;
  color: var(--ink) !important;
}

.profile-pill,
.profile-pill-button {
  font-size: 12px !important;
  font-weight: 900 !important;
  color: var(--muted) !important;
}

/* Profile content panels/tabs */
.profile-panel-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 18px 18px;
  background: var(--card);
}

.profile-panel-tabs button {
  min-height: 46px;
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--line);
  box-shadow: none;
  font-weight: 950;
}

.profile-panel-tabs button.active {
  background: var(--button);
  color: var(--buttonText);
}

.profile-panel {
  display: none !important;
}

.profile-panel.active {
  display: grid !important;
}

.profile-feed-title.profile-panel.active {
  display: flex !important;
}

.profile-feed-title {
  margin-top: 6px !important;
}

/* Make profile feeds feel like panels/cards */
#profileFeed,
#profilePermanentFeed,
#profileSavedFeed {
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--card);
  padding: 12px;
}

/* Saved tab only makes sense on own profile. Hidden class should win. */
#profileSavedTab.hidden,
#profileSavedTitle.hidden,
#profileSavedFeed.hidden {
  display: none !important;
}

/* Mobile profile */
@media (max-width: 900px) {
  .profile-menu-topbar #searchBox {
    margin-top: 0 !important;
  }

  .profile-menu-topbar .menu-actions {
    position: absolute;
    top: 12px;
    right: 12px;
  }

  body.profile-mode .topbar {
    min-height: 62px;
  }

  .profile-cover {
    min-height: 150px !important;
  }

  .profile-main-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 14px 14px !important;
  }

  .profile-main-info {
    margin-top: -36px !important;
  }

  .profile-page-avatar {
    width: 88px !important;
    height: 88px !important;
    border-width: 4px !important;
  }

  .profile-cta-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .profile-meta-row {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    padding: 8px 10px 12px !important;
    gap: 6px !important;
  }

  .profile-pill,
  .profile-pill-button {
    min-height: 54px !important;
    border-radius: 14px !important;
    font-size: 10px !important;
    padding: 6px 4px !important;
  }

  .profile-pill strong,
  .profile-pill-button strong {
    font-size: 16px !important;
  }

  .profile-panel-tabs {
    padding: 12px 10px 14px;
    gap: 6px;
  }

  .profile-panel-tabs button {
    min-height: 42px;
    border-radius: 14px;
    font-size: 12px;
  }

  #profileFeed,
  #profilePermanentFeed,
  #profileSavedFeed {
    border-radius: 22px;
    padding: 8px;
  }
}

/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Hard rule: Video Drops only appear in Flow.
   ========================================================= */

#homeView .video-drop {
  display: none !important;
}

/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Home feed repair + search only Home + menu top-right.
   ========================================================= */

/* Search should only exist visually on Home. */
body:not(.home-mode) #searchBox {
  display: none !important;
}

/* Force hamburger to true top-right with search underneath it. */
.topbar.top-menu-layout,
.profile-menu-topbar.top-menu-layout {
  position: sticky !important;
  top: 0 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "brand spacer menu"
    "brand search search" !important;
  gap: 8px 14px !important;
  align-items: start !important;
}

.topbar.top-menu-layout .brand {
  grid-area: brand !important;
  align-self: center !important;
}

.topbar.top-menu-layout #searchBox {
  grid-area: search !important;
  justify-self: end !important;
  width: min(560px, 100%) !important;
  margin-top: 0 !important;
}

.topbar.top-menu-layout .menu-actions {
  grid-area: menu !important;
  justify-self: end !important;
  align-self: start !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 5001 !important;
}

.topbar.top-menu-layout .top-menu-btn {
  display: inline-grid !important;
}

.topbar.top-menu-layout .top-menu-panel {
  right: 0 !important;
  top: calc(100% + 8px) !important;
}

/* Remove earlier absolute mobile positioning that pushed it away. */
@media (max-width: 900px) {
  .topbar.top-menu-layout,
  .profile-menu-topbar.top-menu-layout {
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "brand spacer menu"
      "search search search" !important;
    gap: 8px !important;
  }

  .topbar.top-menu-layout .menu-actions {
    position: relative !important;
    top: auto !important;
    right: auto !important;
  }

  .topbar.top-menu-layout #searchBox {
    width: 100% !important;
  }
}

/* Backstop: even if a video card somehow renders into home, hide only video cards. */
#homeView .drop.video-drop {
  display: none !important;
}

/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Remove home total stats + live profile stats.
   ========================================================= */

/* Remove the home/sidebar total stat widget. */
.home-total-stats,
.removed-home-stats,
.side .stats {
  display: none !important;
}

/* Profile stats are now clean: Drops, Grabs, Followers, Following. */
.profile-meta-row {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 900px) {
  .profile-meta-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Hide stale Echo/Catch stat if old cached HTML survives. */
#profilePageCatches,
#profilePageCatches + * {
  display: none !important;
}

/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Force-hide home stats and lock menu to top-right only after login.
   ========================================================= */

/* Hamburger must NOT show on login page. */
body:not(.is-authed) #topMenuBtn,
body:not(.is-authed) #topMenuPanel,
body:not(.is-authed) .menu-actions {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Keep menu hidden until the logged-in chrome is active. */
#topMenuBtn.hidden,
#topMenuPanel.hidden {
  display: none !important;
}

/* Pin hamburger farther right, independent of the content width. */
body.is-authed .menu-actions {
  position: fixed !important;
  top: calc(12px + env(safe-area-inset-top, 0px)) !important;
  right: calc(10px + env(safe-area-inset-right, 0px)) !important;
  z-index: 25000 !important;
  margin: 0 !important;
  transform: none !important;
}

body.is-authed #topMenuBtn {
  display: inline-grid !important;
  width: 48px !important;
  height: 44px !important;
  min-width: 48px !important;
  border-radius: 16px !important;
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.22) !important;
}

body.is-authed #topMenuPanel {
  position: fixed !important;
  top: calc(64px + env(safe-area-inset-top, 0px)) !important;
  right: calc(10px + env(safe-area-inset-right, 0px)) !important;
  z-index: 25001 !important;
}

/* Give the search bar breathing room under the fixed menu. */
body.home-mode #searchBox {
  padding-right: 58px !important;
}

/* Hard remove remaining home/sidebar total stat widgets. */
.home-total-stats,
.removed-home-stats,
.side .stats,
.stats.home-total-stats,
.stats.removed-home-stats,
#homeView .stats,
#homeView [id="dropCount"],
#homeView [id="followerCount"],
#homeView [id="followingCount"],
#homeView [id="grabCount"],
.side [id="dropCount"],
.side [id="followerCount"],
.side [id="followingCount"],
.side [id="grabCount"] {
  display: none !important;
  visibility: hidden !important;
}

/* If a stat container only existed for those numbers, remove its spacing too. */
.side .panel:has(.stats),
#homeView .panel:has(.stats) {
  display: none !important;
}

/* Mobile: keep it at the real top-right too. */
@media (max-width: 900px) {
  body.is-authed .menu-actions {
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    right: calc(8px + env(safe-area-inset-right, 0px)) !important;
  }

  body.is-authed #topMenuPanel {
    top: calc(60px + env(safe-area-inset-top, 0px)) !important;
    right: calc(8px + env(safe-area-inset-right, 0px)) !important;
    width: min(260px, calc(100vw - 20px)) !important;
  }

  body.home-mode #searchBox {
    padding-right: 54px !important;
  }
}

/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Actually remove Home stats + portal hamburger.
   ========================================================= */

/* Home total stats are gone. Hide any cached/stale version too. */
.pulse-row,
#homeView .pulse-row,
.pulse-card,
#pulseDrops,
#pulseGrabs,
#pulseCatches,
#pulseFollows {
  display: none !important;
  visibility: hidden !important;
}

/* Hamburger portal: not inside topbar anymore. */
#topMenuPortal {
  display: none !important;
}

body.is-authed #topMenuPortal:not(.hidden) {
  display: block !important;
  position: fixed !important;
  top: calc(8px + env(safe-area-inset-top, 0px)) !important;
  right: calc(4px + env(safe-area-inset-right, 0px)) !important;
  z-index: 50000 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Never show on login page. */
body:not(.is-authed) #topMenuPortal,
body:not(.is-authed) #topMenuBtn,
body:not(.is-authed) #topMenuPanel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.is-authed #topMenuBtn:not(.hidden) {
  display: inline-grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 44px !important;
  min-width: 48px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.30) !important;
}

body.is-authed #topMenuPanel:not(.hidden) {
  display: grid !important;
  position: fixed !important;
  top: calc(60px + env(safe-area-inset-top, 0px)) !important;
  right: calc(4px + env(safe-area-inset-right, 0px)) !important;
  width: min(245px, calc(100vw - 12px)) !important;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 22px !important;
  background: var(--card) !important;
  box-shadow: var(--shadow) !important;
  z-index: 50001 !important;
}

#topMenuPanel button {
  width: 100% !important;
  justify-content: flex-start !important;
  box-shadow: none !important;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}

#topMenuPanel button:hover {
  background: var(--button) !important;
  color: var(--buttonText) !important;
}

.hamburger-lines {
  display: grid !important;
  gap: 4px !important;
  width: 20px !important;
}

.hamburger-lines span {
  display: block !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

/* Since the menu is fixed top-right, give home search a little right-side space. */
body.home-mode #searchBox {
  padding-right: 56px !important;
}

@media (max-width: 900px) {
  body.is-authed #topMenuPortal:not(.hidden) {
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    right: calc(4px + env(safe-area-inset-right, 0px)) !important;
  }

  body.is-authed #topMenuPanel:not(.hidden) {
    top: calc(58px + env(safe-area-inset-top, 0px)) !important;
    right: calc(4px + env(safe-area-inset-right, 0px)) !important;
  }
}

/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Hamburger belongs in the top bar, placed top-right.
   ========================================================= */

/* Kill the old portal behavior if any cached CSS/HTML remains. */
#topMenuPortal {
  display: none !important;
}

/* Login page: no hamburger. */
body:not(.is-authed) #topMenuWrap,
body:not(.is-authed) #topMenuBtn,
body:not(.is-authed) #topMenuPanel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Topbar layout with menu in real top-right corner. */
.topbar.top-menu-layout,
.profile-menu-topbar.top-menu-layout {
  position: sticky !important;
  top: 0 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) 52px !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "brand spacer menu"
    "brand search search" !important;
  gap: 8px 12px !important;
  align-items: start !important;
  overflow: visible !important;
}

.topbar.top-menu-layout .brand {
  grid-area: brand !important;
  align-self: center !important;
}

.topbar.top-menu-layout #searchBox {
  grid-area: search !important;
  width: min(560px, 100%) !important;
  justify-self: end !important;
  margin: 0 !important;
  padding-right: 0 !important;
}

body.is-authed #topMenuWrap {
  grid-area: menu !important;
  display: block !important;
  visibility: visible !important;
  position: relative !important;
  justify-self: end !important;
  align-self: start !important;
  width: 52px !important;
  height: 46px !important;
  margin: 0 !important;
  z-index: 25000 !important;
}

body.is-authed #topMenuBtn:not(.hidden) {
  display: inline-grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 44px !important;
  min-width: 48px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.20) !important;
}

body.is-authed #topMenuPanel:not(.hidden) {
  display: grid !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  width: min(245px, calc(100vw - 18px)) !important;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 22px !important;
  background: var(--card) !important;
  box-shadow: var(--shadow) !important;
  z-index: 25001 !important;
}

#topMenuPanel button {
  width: 100% !important;
  justify-content: flex-start !important;
  box-shadow: none !important;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}

#topMenuPanel button:hover {
  background: var(--button) !important;
  color: var(--buttonText) !important;
}

.hamburger-lines {
  display: grid !important;
  gap: 4px !important;
  width: 20px !important;
}

.hamburger-lines span {
  display: block !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

/* Search only on Home still applies. */
body:not(.home-mode) #searchBox {
  display: none !important;
}

@media (max-width: 900px) {
  .topbar.top-menu-layout,
  .profile-menu-topbar.top-menu-layout {
    grid-template-columns: auto minmax(0, 1fr) 52px !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "brand spacer menu"
      "search search search" !important;
    gap: 8px !important;
  }

  body.is-authed #topMenuWrap {
    grid-area: menu !important;
    justify-self: end !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
  }

  body.is-authed #topMenuPanel:not(.hidden) {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    width: min(260px, calc(100vw - 18px)) !important;
  }

  .topbar.top-menu-layout #searchBox {
    width: 100% !important;
  }
}

/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Clean Flow layout, no hotbar overlap, loading, end card.
   ========================================================= */

/* Remove global notification clutter from the right/bottom layout. */
.side .panel:has(#notifications),
#notifications,
#notifications:empty,
.notification-top-btn,
.bottom-notification,
.notification-indicator-bottom {
  display: none !important;
}

/* Shared Flow sizing variable. The Flow stops where the hotbar begins. */
:root {
  --flow-hotbar-space: calc(88px + env(safe-area-inset-bottom, 0px));
  --flow-safe-top: env(safe-area-inset-top, 0px);
}

/* Desktop Flow keeps normal card feed. */
.flow-end-card {
  display: grid;
  place-items: center;
  gap: 14px;
  min-height: 280px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--card);
  text-align: center;
}

.flow-end-card h2 {
  font-size: clamp(28px, 5vw, 48px);
  letter-spacing: -1.5px;
  line-height: 1;
  margin: 0;
}

.flow-end-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

/* Mobile Flow becomes a clean viewport above the hotbar. */
@media (max-width: 900px) {
  body.flow-mode {
    overflow: hidden !important;
    background: #000 !important;
  }

  body.flow-mode .shell,
  body.flow-mode .app-grid,
  body.flow-mode .main {
    height: calc(100dvh - var(--flow-hotbar-space)) !important;
    max-height: calc(100dvh - var(--flow-hotbar-space)) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  body.flow-mode #flowView {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--flow-hotbar-space) !important;
    height: auto !important;
    width: 100vw !important;
    z-index: 120 !important;
    background: #000 !important;
    overflow: hidden !important;
    display: block !important;
  }

  body.flow-mode .flow-feed {
    width: 100vw !important;
    height: calc(100dvh - var(--flow-hotbar-space)) !important;
    max-height: calc(100dvh - var(--flow-hotbar-space)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-snap-type: y mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    background: #000 !important;
    display: block !important;
  }

  body.flow-mode .flow-feed::-webkit-scrollbar {
    display: none !important;
  }

  body.flow-mode .flow-feed .drop.flow-card {
    position: relative !important;
    width: 100vw !important;
    height: calc(100dvh - var(--flow-hotbar-space)) !important;
    min-height: calc(100dvh - var(--flow-hotbar-space)) !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    color: #fff !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  body.flow-mode .flow-feed .drop.flow-card::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 0 0 0 !important;
    height: min(45%, 260px) !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.82)) !important;
  }

  .flow-video-frame {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: grid !important;
    place-items: center !important;
    background: #000 !important;
    overflow: hidden !important;
  }

  body.flow-mode .flow-feed .drop-video {
    width: 100vw !important;
    height: calc(100dvh - var(--flow-hotbar-space)) !important;
    max-height: calc(100dvh - var(--flow-hotbar-space)) !important;
    object-fit: contain !important;
    background: #000 !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .flow-video-loader {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: none;
    place-items: center;
    gap: 12px;
    background: radial-gradient(circle at center, rgba(255,255,255,.08), rgba(0,0,0,.92));
    color: #fff;
    text-align: center;
  }

  .flow-card.loading .flow-video-loader {
    display: grid;
  }

  .flow-video-loader span {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 3px solid rgba(255,255,255,.24);
    border-top-color: #fff;
    animation: flowSpin .85s linear infinite;
  }

  .flow-video-loader p {
    margin: 0;
    font-size: 12px;
    font-weight: 900;
    opacity: .78;
  }

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

  /* Profile + caption now live in one stack. Caption starts directly under profile. */
  .flow-info-stack {
    position: absolute !important;
    left: 14px !important;
    right: 86px !important;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 5 !important;
    display: grid !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.flow-mode .flow-info-stack .drop-header {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.flow-mode .flow-info-stack .drop-user {
    color: #fff !important;
    min-width: 0 !important;
  }

  body.flow-mode .flow-info-stack .small-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(255,255,255,.24) !important;
  }

  body.flow-mode .flow-info-stack strong {
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.9) !important;
  }

  body.flow-mode .flow-info-stack .username {
    color: rgba(255,255,255,.72) !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.9) !important;
  }

  body.flow-mode .flow-info-stack .drop-text {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    max-height: 76px !important;
    overflow: hidden !important;
    font-size: 15px !important;
    line-height: 1.32 !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.9) !important;
  }

  body.flow-mode .flow-info-stack .drop-text:empty {
    display: none !important;
  }

  body.flow-mode .flow-info-stack .drop-text.expanded {
    max-height: 190px !important;
    overflow-y: auto !important;
  }

  body.flow-mode .flow-info-stack .drop-text::after {
    content: "" !important;
  }

  /* Action rail lives inside the visible Flow viewport, above the hotbar. */
  body.flow-mode .flow-feed .drop-actions {
    position: absolute !important;
    right: 10px !important;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 6 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: 62px !important;
    margin: 0 !important;
  }

  body.flow-mode .flow-feed .action {
    width: 58px !important;
    min-height: 48px !important;
    display: grid !important;
    place-items: center !important;
    padding: 7px 4px !important;
    border-radius: 18px !important;
    background: rgba(0,0,0,.38) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    backdrop-filter: blur(10px) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.05 !important;
  }

  body.flow-mode .flow-feed .action.grabbed,
  body.flow-mode .flow-feed .action:hover {
    background: rgba(255,255,255,.92) !important;
    color: #000 !important;
  }

  /* Hide badges/metadata in Flow so nothing covers captions. */
  body.flow-mode .flow-feed .drop-meta,
  body.flow-mode .flow-feed .drop-badge,
  body.flow-mode .flow-feed .flow-score-badge,
  body.flow-mode .flow-feed .video-drop::before {
    display: none !important;
  }

  /* Hotbar hidden in flow mode */

  /* End of Flow card */
  body.flow-mode .flow-end-card {
    width: 100vw !important;
    height: calc(100dvh - var(--flow-hotbar-space)) !important;
    min-height: calc(100dvh - var(--flow-hotbar-space)) !important;
    scroll-snap-align: start !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at top, rgba(255,255,255,.12), transparent 42%),
      #000 !important;
    color: #fff !important;
    padding: 24px !important;
  }

  body.flow-mode .flow-end-card p {
    color: rgba(255,255,255,.72) !important;
  }

  body.flow-mode .flow-end-card button {
    background: #fff !important;
    color: #000 !important;
  }
}

/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Dripline branding, modern messaging, End of Flow polish.
   ========================================================= */

/* Dripline icon: droplet + chat dot, matching Flow/Drops language. */
.mobile-hotbar-dripline .mobile-hotbar-drip-mark,
.rail-dripline .rail-drip-mark,
.dripline-large-mark {
  display: block;
  width: 22px;
  height: 26px;
  position: relative;
}

.mobile-hotbar-dripline .mobile-hotbar-drip-mark::before,
.rail-dripline .rail-drip-mark::before,
.dripline-large-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  border-radius: 55% 55% 55% 0;
  transform: rotate(135deg);
}

.mobile-hotbar-dripline .mobile-hotbar-drip-mark::after,
.rail-dripline .rail-drip-mark::after,
.dripline-large-mark::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 6px;
  left: 7px;
  top: 10px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 0 0 2px rgba(255,255,255,.18);
}

.dripline-large-mark {
  width: 58px;
  height: 68px;
  color: var(--button);
}

/* Dripline page structure */
.dripline-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-height, 80px));
  max-height: calc(100vh - 80px);
}

.thread-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  flex: 1;
  overflow-y: auto;
}

.thread-item {
  width: 100%;
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 68px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: var(--ink);
  text-align: left;
  box-shadow: none;
  border-radius: 0;
}

.thread-item.active {
  background: var(--surface-2);
  color: var(--ink);
}

.thread-item.unread .thread-copy strong::after {
  content: " •";
}

.thread-avatar,
.chat-avatar {
  display: grid;
  place-items: center;
  background: var(--button);
  color: var(--buttonText);
  font-weight: 950;
  background-position: center;
  background-size: cover;
  flex: 0 0 auto;
}

.thread-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.chat-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.thread-copy {
  min-width: 0;
}

.thread-copy strong,
.thread-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-copy span,
.thread-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.thread-item.active .thread-copy span,
.thread-item.active .thread-meta {
  color: color-mix(in srgb, var(--buttonText), transparent 25%);
}

/* Chat panel */
.chat-area {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.06), transparent 35%),
    var(--card);
  min-height: min(760px, calc(100dvh - 170px));
}

.chat-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

.chat-header h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.8px;
}

.chat-header p {
  margin: 3px 0 0;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

.chat-messages {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
  scroll-behavior: smooth;
}

.message-row {
  display: flex;
  width: 100%;
}

.message-row.mine {
  justify-content: flex-end;
}

.message-row.theirs {
  justify-content: flex-start;
}

.message-bubble {
  max-width: min(74%, 520px);
  padding: 10px 12px 8px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: none;
}

.message-row.mine .message-bubble {
  background: var(--button);
  color: var(--buttonText);
  border-color: transparent;
  border-bottom-right-radius: 7px;
}

.message-row.theirs .message-bubble {
  border-bottom-left-radius: 7px;
}

.message-bubble p {
  margin: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.message-time {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 850;
  opacity: .68;
  text-align: right;
}

.message-row.theirs .message-time {
  text-align: left;
  color: var(--muted);
}

.message-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--card);
}

.message-composer input {
  width: 100%;
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  outline: none;
  padding: 0 15px;
  font-weight: 800;
}

.message-composer button {
  min-height: 48px;
  border-radius: 999px;
}

.chat-empty-state {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  min-height: 420px;
  text-align: center;
  padding: 24px;
}

.chat-empty-state h2 {
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: -1.4px;
  line-height: 1;
  margin: 0;
}

.chat-empty-state p {
  color: var(--muted);
  font-weight: 800;
  margin: 0;
}

/* End of Flow refinement */
.flow-end-card {
  padding: clamp(32px, 7vw, 72px) !important;
  gap: 22px !important;
  line-height: 1.25 !important;
}

.flow-end-card > div {
  display: grid;
  gap: 12px;
  max-width: 520px;
}

.flow-end-card h2 {
  line-height: .95 !important;
  margin: 0 !important;
}

.flow-end-card p {
  line-height: 1.5 !important;
  max-width: 420px;
  margin: 0 auto !important;
}

.flow-end-card button {
  min-height: 52px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  font-weight: 950 !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.28) !important;
}

/* Mobile Dripline */
@media (max-width: 900px) {
  .dripline-page {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: calc(100dvh - 160px);
  }

  .thread-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 76vw);
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    padding: 10px;
    border-radius: 22px;
  }

  .chat-area {
    min-height: calc(100dvh - 250px);
    border-radius: 24px;
  }

  .chat-header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .chat-header .ghost {
    grid-column: 1 / -1;
    width: 100%;
  }

  .message-bubble {
    max-width: 84%;
  }

  .message-composer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-hotbar-dripline span:last-child {
    font-size: 9px !important;
  }

  body.flow-mode .flow-end-card {
    padding: 34px 24px calc(44px + env(safe-area-inset-bottom, 0px)) !important;
    align-content: center !important;
    gap: 22px !important;
  }

  body.flow-mode .flow-end-card h2 {
    font-size: clamp(34px, 10vw, 58px) !important;
  }

  body.flow-mode .flow-end-card p {
    font-size: 15px !important;
  }

  body.flow-mode .flow-end-card button {
    width: min(260px, 100%) !important;
  }
}

/* =========================================================
   DROPPED_BUILD_V52_STABILITY_HOTBAR_DRIPLINE
   Stability fixes: Drip history, settings viewport, unified hotbar.
   ========================================================= */

/* Settings viewport: prevent zoomed/clipped modal on phones. */
#settingsModal.open,
#settingsModal.modal-backdrop.open {
  align-items: center !important;
  padding: 12px !important;
  overflow-y: auto !important;
}

#settingsModal .modal,
.settings-modal {
  width: min(960px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto !important;
  transform: none !important;
  zoom: 1 !important;
}

.settings-layout,
.settings-grid {
  max-width: 100% !important;
  overflow: hidden !important;
}

@media (max-width: 720px) {
  #settingsModal.open,
  #settingsModal.modal-backdrop.open {
    align-items: stretch !important;
    padding: 8px !important;
  }

  #settingsModal .modal,
  .settings-modal {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 0 !important;
    border-radius: 24px !important;
  }

  .settings-layout,
  .settings-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .settings-tabs {
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 6px !important;
  }

  .settings-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}

/* Old unified hotbar rules removed — see HOTBAR section above */

/* Dripline icon v52: clean line droplet like Flow's simple mark. */
.mobile-hotbar-dripline .mobile-hotbar-drip-mark,
.rail-dripline .rail-drip-mark,
.dripline-large-mark {
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
}

.mobile-hotbar-dripline .mobile-hotbar-drip-mark::before,
.rail-dripline .rail-drip-mark::before,
.dripline-large-mark::before {
  content: "◍" !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  transform: none !important;
  color: currentColor !important;
  font-size: 23px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.mobile-hotbar-dripline .mobile-hotbar-drip-mark::after,
.rail-dripline .rail-drip-mark::after,
.dripline-large-mark::after {
  content: "" !important;
  display: none !important;
}

/* Dripline message layout polish, but without hiding old history. */
.chat-area {
  min-width: 0 !important;
}

.chat-messages {
  padding: 16px !important;
}

.message-bubble {
  word-break: break-word !important;
}

.message-row.mine .message-bubble {
  margin-left: auto !important;
}

.message-row.theirs .message-bubble {
  margin-right: auto !important;
}


/* =========================================================
   DROPPED_V52_CLEAN_DRIPLINE_REWRITE
   Dripline UI only. Auth/login untouched.
   ========================================================= */


.recipient-section {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px;
  background: var(--surface);
}

.recipient-section-title {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.small-empty {
  min-height: auto !important;
  padding: 10px !important;
  font-size: 12px !important;
}

.thread-item.dripline-thread.unread {
  border-color: var(--button) !important;
}

.chat-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px !important;
  border-bottom: 1px solid var(--line) !important;
}

.dripline-chat-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.chat-avatar {
  width: 48px;
  height: 48px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--button);
  color: var(--buttonText);
  font-weight: 950;
  background-size: cover;
  background-position: center;
}

.message-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  padding: 16px !important;
  overflow-y: auto !important;
}

.message-row {
  display: flex;
  width: 100%;
}

.message-row.mine {
  justify-content: flex-end;
}

.message-row.theirs {
  justify-content: flex-start;
}

.message-bubble {
  max-width: min(76%, 560px);
  padding: 10px 12px 8px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.message-row.mine .message-bubble {
  background: var(--button);
  color: var(--buttonText);
  border-color: transparent;
  border-bottom-right-radius: 7px;
}

.message-row.theirs .message-bubble {
  border-bottom-left-radius: 7px;
}

.message-bubble p {
  margin: 0;
  line-height: 1.35;
}

.message-time {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 850;
  opacity: .68;
  text-align: right;
}

[data-action="echoes"].active,
[data-action="share"].active {
  background: var(--button) !important;
  color: var(--buttonText) !important;
  border-color: transparent !important;
}

@media (hover: none) {
  [data-action="echoes"]:hover:not(.active),
  [data-action="share"]:hover:not(.active),
  [data-action="echoes"]:focus:not(.active),
  [data-action="share"]:focus:not(.active) {
    background: var(--surface-2) !important;
    color: var(--muted) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
  }
}

@media (max-width: 900px) {
  .dripline-layout {
    grid-template-columns: 1fr !important;
  }

  .recipient-list,
  .thread-list {
    max-height: 230px;
    overflow-y: auto;
  }

  .message-bubble {
    max-width: 86%;
  }
}


/* =========================================================
   DROPPED_V52_NAV_REPAIR_AFTER_DRIPLINE
   Restores nav click behavior after Dripline rewrite.
   ========================================================= */

[data-view] {
  pointer-events: auto !important;
}


/* =========================================================
   DROPPED_V52_INSTAGRAM_DRIPLINE_UI
   Single-list Instagram-style Dripline UI.
   Same Firestore variables, auth/login untouched.
   ========================================================= */

#followingRecipientList {
  display: none !important;
}

.dripline-single-list,
.thread-list {
  display: grid !important;
  gap: 4px !important;
}

.thread-item.dripline-person-row,
.recipient-item.dripline-person-row {
  width: 100%;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 8px !important;
  border-radius: 16px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  text-align: left;
  cursor: pointer;
}

.thread-item.dripline-person-row:hover,
.thread-item.dripline-person-row.active {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
}

.thread-item.dripline-person-row.unread strong::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 7px;
  border-radius: 999px;
  background: var(--button);
  vertical-align: middle;
}

.thread-avatar,
.mini-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 999px !important;
  display: grid;
  place-items: center;
  background: var(--button);
  color: var(--buttonText);
  font-weight: 950;
  background-size: cover;
  background-position: center;
}

.thread-copy {
  min-width: 0;
}

.thread-copy strong,
.thread-copy span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.thread-copy strong {
  color: var(--ink);
  font-size: 14px;
}

.thread-copy span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.thread-meta {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  align-self: start;
  padding-top: 4px;
}

.message-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  padding: 16px !important;
  overflow-y: auto !important;
}

.message-row {
  display: flex;
  width: 100%;
}

.message-row.mine {
  justify-content: flex-end;
}

.message-row.theirs {
  justify-content: flex-start;
}

.message-bubble {
  max-width: min(76%, 560px);
  padding: 10px 12px 8px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.message-row.mine .message-bubble {
  background: var(--button);
  color: var(--buttonText);
  border-color: transparent;
  border-bottom-right-radius: 7px;
}

.message-row.theirs .message-bubble {
  border-bottom-left-radius: 7px;
}

.message-bubble p {
  margin: 0;
  line-height: 1.35;
}

.message-time {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 850;
  opacity: .68;
  text-align: right;
}

@media (max-width: 900px) {
  .dripline-layout {
    grid-template-columns: 1fr !important;
  }

  .thread-list {
    max-height: 340px !important;
    overflow-y: auto !important;
  }

  .message-bubble {
    max-width: 86%;
  }
}


/* =========================================================
   DROPPED_V52_ALL_BUTTONS_ROUTER_FIX
   Makes clickable controls clearly interactive.
   ========================================================= */

button,
[data-action],
[data-view],
[data-profile-panel],
[data-social-list],
[data-side-social],
[data-settings-tab],
[data-create-type] {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}


/* =========================================================
   DROPPED_V52_LINK_PASSWORD_LOGIN
   Settings card to link password login to Google account.
   ========================================================= */

.password-login-card {
  display: grid;
  gap: 10px;
}

.password-login-card .mini-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}


/* =========================================================
   DROPPED_V52_CAMERA_CAPTURE_DROP_HOTBAR
   Full-screen Drop capture interface.
   ========================================================= */

body.camera-capture-open {
  overflow: hidden !important;
}

body.camera-capture-open #mobileHotbar {
  display: none !important;
}

.mobile-hotbar-post {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.mobile-hotbar-post.active,
.mobile-hotbar-post:active {
  background: var(--button) !important;
  color: var(--buttonText) !important;
  border-color: transparent !important;
}

.mobile-hotbar-drop-mark {
  width: 22px;
  height: 22px;
  border-radius: 50% 50% 55% 55%;
  display: inline-block;
  background: currentColor;
  position: relative;
  transform: rotate(45deg);
}

.mobile-hotbar-drop-mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 999px;
  background: var(--surface-2);
}

.mobile-hotbar-post:active .mobile-hotbar-drop-mark::after,
.mobile-hotbar-post.active .mobile-hotbar-drop-mark::after {
  background: var(--button);
}

.camera-capture-view {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  background: #050505;
  color: #fff;
  overflow: hidden;
}

.camera-capture-view.open {
  display: block;
}

.camera-capture-preview,
.camera-image-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #050505;
}

.camera-image-preview {
  display: none;
  background-size: cover;
  background-position: center;
}

.camera-image-preview.show {
  display: block;
}

.camera-topbar {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 3;
}

.camera-title {
  text-align: center;
  display: grid;
  gap: 2px;
  text-shadow: 0 2px 16px rgba(0,0,0,.75);
}

.camera-title strong {
  font-size: 17px;
  letter-spacing: .02em;
}

.camera-title span {
  font-size: 12px;
  opacity: .82;
}

.camera-icon-btn,
.camera-tool-btn,
.camera-upload-btn,
.camera-drop-btn {
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 35px rgba(0,0,0,.22);
}

.camera-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 900;
}

.camera-tools {
  position: absolute;
  z-index: 3;
  top: calc(88px + env(safe-area-inset-top, 0px));
  right: 14px;
  display: grid;
  gap: 10px;
}

.camera-tool-btn {
  min-width: 64px;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 900;
  font-size: 12px;
}

.camera-tool-btn.active {
  background: #fff;
  color: #050505;
}

.camera-text-layer {
  position: absolute;
  z-index: 2;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  max-width: 82vw;
  padding: 10px 14px;
  border-radius: 18px;
  color: #fff;
  background: rgba(0,0,0,.32);
  text-align: center;
  font-size: clamp(22px, 7vw, 46px);
  font-weight: 950;
  line-height: 1.05;
  text-shadow: 0 3px 18px rgba(0,0,0,.75);
  white-space: pre-wrap;
}

.camera-text-layer.show {
  display: block;
}

.camera-countdown {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 25vw;
  font-weight: 1000;
  text-shadow: 0 6px 28px rgba(0,0,0,.8);
  pointer-events: none;
}

.camera-bottom {
  position: absolute;
  z-index: 3;
  left: 16px;
  right: 16px;
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: 84px 1fr 84px;
  align-items: center;
  gap: 12px;
}

.camera-upload-btn {
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 950;
}

.camera-upload-btn span {
  font-size: 22px;
  line-height: 1;
}

.camera-record-btn {
  width: 78px;
  height: 78px;
  border-radius: 999px;
  border: 5px solid rgba(255,255,255,.92);
  background: rgba(255,255,255,.18);
  justify-self: center;
  display: grid;
  place-items: center;
}

.camera-record-btn span {
  width: 54px;
  height: 54px;
  display: block;
  border-radius: 999px;
  background: #ff2d55;
  transition: transform .18s ease, border-radius .18s ease;
}

.camera-record-btn.recording span {
  transform: scale(.62);
  border-radius: 14px;
}

.camera-drop-btn {
  height: 58px;
  border-radius: 18px;
  font-weight: 1000;
  font-size: 14px;
  background: #fff;
  color: #050505;
}

.camera-caption-panel {
  position: absolute;
  z-index: 3;
  left: 16px;
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

.camera-caption-panel input {
  width: 100%;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.42);
  color: #fff;
  padding: 0 16px;
  font-weight: 800;
  outline: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.camera-caption-panel input::placeholder {
  color: rgba(255,255,255,.72);
}

@media (min-width: 760px) {
  .camera-capture-view {
    max-width: 520px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 1px solid rgba(255,255,255,.1);
    border-right: 1px solid rgba(255,255,255,.1);
  }
}


/* =========================================================
   DROPPED_V52_CAMERA_CAPTURE_POLISH
   Record centering, front-camera mirror, hotbar hiding, text gating.
   ========================================================= */

body.camera-capture-open #mobileHotbar,
body.camera-capture-open .mobile-hotbar,
body.camera-capture-open nav#mobileHotbar {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.camera-capture-preview.mirrored {
  transform: scaleX(-1);
}

.camera-record-btn {
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
}

.camera-record-btn span {
  margin: 0 !important;
  flex: 0 0 auto !important;
  transform-origin: center center !important;
}

.camera-record-btn.recording span {
  transform: scale(.62) !important;
  border-radius: 14px !important;
}

.camera-tool-btn:disabled,
.camera-tool-btn.disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}


/* =========================================================
   DROPPED_V52_CAMERA_CAPTURE_REVIEW_MODE
   Hide publish controls until media exists; retake/delete flow.
   ========================================================= */

.camera-topbar {
  grid-template-columns: 44px 1fr 44px;
}

.camera-topbar .camera-icon-btn {
  align-self: center;
  justify-self: center;
}

#cameraFlashBtn {
  font-size: 17px !important;
  line-height: 1 !important;
  padding: 0 !important;
  transform: translateY(0) !important;
}

.camera-capture-view:not(.media-ready) .camera-caption-panel,
.camera-capture-view:not(.media-ready) #cameraDropBtn,
.camera-capture-view:not(.media-ready) #cameraDeleteBtn {
  display: none !important;
}

.camera-capture-view.media-ready #cameraRecordBtn,
.camera-capture-view.media-ready #cameraUploadBtn,
.camera-capture-view.media-ready #cameraTimerBtn,
.camera-capture-view.media-ready #cameraFlashBtn,
.camera-capture-view.media-ready #cameraFlipBtn {
  display: none !important;
}

.camera-capture-view.media-ready .camera-bottom {
  grid-template-columns: 1fr 1fr;
}

.camera-delete-btn {
  height: 58px;
  border-radius: 18px;
  font-weight: 1000;
  font-size: 14px;
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 35px rgba(0,0,0,.22);
}

.camera-capture-view.media-ready .camera-tools {
  top: calc(88px + env(safe-area-inset-top, 0px));
}

.camera-capture-view.media-ready #cameraTextBtn {
  display: block !important;
}


/* =========================================================
   DROPPED_V52_CAMERA_CAPTURE_PROGRESS_LIMIT
   Recording progress bar, 30s limit, reliable review controls.
   ========================================================= */

.camera-record-progress {
  position: absolute;
  z-index: 4;
  top: calc(72px + env(safe-area-inset-top, 0px));
  left: 14px;
  right: 14px;
  height: 5px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.24);
  display: none;
  box-shadow: 0 8px 26px rgba(0,0,0,.25);
}

.camera-record-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: #fff;
  transition: width .09s linear;
}

.camera-record-time {
  position: absolute;
  z-index: 4;
  top: calc(82px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: none;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .02em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.camera-capture-view.recording .camera-record-progress,
.camera-capture-view.recording .camera-record-time {
  display: block;
}

.camera-capture-view.media-ready #cameraDropBtn,
.camera-capture-view.media-ready #cameraDeleteBtn,
.camera-capture-view.media-ready .camera-caption-panel {
  display: block !important;
}

.camera-capture-view.media-ready #cameraDropBtn,
.camera-capture-view.media-ready #cameraDeleteBtn {
  width: 100%;
}

.camera-capture-view:not(.media-ready) #cameraDropBtn,
.camera-capture-view:not(.media-ready) #cameraDeleteBtn,
.camera-capture-view:not(.media-ready) .camera-caption-panel {
  display: none !important;
}

.camera-capture-view.recording #cameraUploadBtn,
.camera-capture-view.recording #cameraTimerBtn,
.camera-capture-view.recording #cameraFlashBtn,
.camera-capture-view.recording #cameraFlipBtn,
.camera-capture-view.recording #cameraTextBtn,
.camera-capture-view.recording #cameraDropBtn,
.camera-capture-view.recording #cameraDeleteBtn,
.camera-capture-view.recording .camera-caption-panel {
  display: none !important;
}


/* =========================================================
   DROPPED_V52_DROP_POST_PROGRESS_TOPBAR
   Global posting progress after leaving CameraCapture.
   ========================================================= */

.drop-post-progress {
  position: fixed;
  z-index: 10050;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 24px));
  padding: 10px 12px 11px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--ink);
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.drop-post-progress.hidden {
  display: none !important;
}

.drop-post-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 950;
}

.drop-post-progress-top span {
  color: var(--muted);
}

.drop-post-progress-track {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
}

.drop-post-progress-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--button);
  transition: width .18s ease;
}

@media (max-width: 640px) {
  .drop-post-progress {
    top: calc(8px + env(safe-area-inset-top, 0px));
    width: calc(100vw - 18px);
  }
}


/* =========================================================
   DROPPED_V52_PERSIST_LOGIN_FLOW_PAUSE
   Saved login restore + tap-to-pause Flow videos.
   ========================================================= */

.flow-video-frame {
  position: relative;
}

.flow-pause-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.flow-pause-layer .flow-pause-icon,
.flow-pause-layer .flow-play-icon {
  width: 66px;
  height: 66px;
  border-radius: 999px;
  display: none;
  place-items: center;
  background: rgba(0,0,0,.38);
  color: #fff;
  font-size: 28px;
  font-weight: 1000;
  line-height: 1;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 14px 44px rgba(0,0,0,.28);
}

.flow-card.flow-active.flow-paused .flow-pause-layer .flow-play-icon {
  display: grid;
}

.flow-pause-layer:active .flow-pause-icon {
  display: grid;
}

.flow-card.flow-active.flow-paused .flow-pause-layer:active .flow-pause-icon {
  display: none;
}


/* =========================================================
   DROPPED_V52_FLOW_END_PAUSE_DRIPLINE_NEWEST
   Flow end-card pause + Dripline newest-message scroll.
   ========================================================= */

.message-list {
  overflow-y: auto !important;
  scroll-behavior: auto;
  overscroll-behavior: contain;
}

.flow-end-card {
  scroll-snap-align: start;
}


/* =========================================================
   DROPPED_V52_DRIPLINE_NEWEST_DATES
   Newest-message scroll + date separators.
   ========================================================= */

.message-list {
  overflow-y: auto !important;
  scroll-behavior: auto !important;
  overscroll-behavior: contain;
  min-height: 0 !important;
  contain: layout paint;
}

.message-date-separator {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px 0 8px;
  width: 100%;
}

.message-date-separator span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .02em;
}

.dripline-newest-anchor {
  width: 100%;
  height: 1px;
  flex: 0 0 1px;
}


/* =========================================================
   DROPPED_V52_WEB_PUSH_NOTIFICATIONS
   Settings card for device push registration.
   ========================================================= */

.push-notification-card {
  display: grid;
  gap: 10px;
}

.push-notification-card .mini-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}


/* =========================================================
   DROPPED_V52_WEB_PUSH_SAFE_FIREBASE
   Push messaging now loads lazily so Firebase startup is not blocked.
   ========================================================= */


/* =========================================================
   DROPPED_V52_DRIPLINE_SCROLL_UP_FIX
   Let users scroll up through Dripline history without being snapped down.
   ========================================================= */

.chat-panel {
  min-height: 0 !important;
  overflow: hidden !important;
}

.message-list,
#messageList {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y !important;
  min-height: 240px !important;
  max-height: calc(100vh - 250px) !important;
  scroll-behavior: auto !important;
  contain: none !important;
}

@media (max-width: 900px) {
  .dripline-layout {
    min-height: calc(100vh - 150px) !important;
  }

  .chat-panel {
    min-height: calc(100vh - 210px) !important;
  }

  .message-list,
  #messageList {
    height: calc(100vh - 315px) !important;
    max-height: calc(100vh - 315px) !important;
    min-height: 260px !important;
  }
}


/* =========================================================
   DROPPED_V53_INSTAGRAM_STYLE_CHAT_FIX
   Eliminate double scrollbar - lock page, isolate message scrolling
   ========================================================= */

/* Dripline view fills available space above hotbar */
#driplineView:not(.hidden) {
  display: flex !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Main dripline page container - fixed viewport height, no overflow */
#driplineView {
  display: none !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: var(--bg) !important;
  border-radius: 26px !important;
}

#driplineView:not(.hidden) {
  display: flex !important;
}

/* Shell takes full height */
.dripline-shell {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  background: var(--bg) !important;
}

/* Layout - single column by default */
.dripline-layout {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Thread list - inbox view */
.thread-sidebar {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 14px !important;
  gap: 10px !important;
}

.thread-list {
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Chat panel - Instagram style full screen */
.chat-panel {
  display: none !important;
  flex-direction: column !important;
  flex: 1 !important;
  height: 100% !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  background: var(--bg) !important;
}

/* When thread is active, show chat panel */
.dripline-layout.thread-active .thread-sidebar {
  display: none !important;
}

.dripline-layout.thread-active .chat-panel {
  display: flex !important;
}

/* Chat header - sticky at top */
.chat-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--line) !important;
  background: var(--surface) !important;
  flex-shrink: 0 !important;
  min-height: 60px !important;
  z-index: 10 !important;
}

/* Back button in chat header */
.chat-head [data-action="backToInbox"] {
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  border-radius: 20px !important;
  background: var(--card-soft) !important;
  border: 1px solid var(--line) !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}

.chat-head [data-action="backToInbox"]:hover {
  background: var(--button) !important;
  color: var(--buttonText) !important;
}

/* Chat title area */
.chat-head-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
}

.chat-back-btn {
  background: transparent !important;
  border: none !important;
  color: var(--ink) !important;
  font-size: 20px !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

.dripline-chat-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  color: var(--ink) !important;
  text-align: left !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

.chat-head-profile-link:active,
.chat-head-view-profile:active {
  opacity: 0.7 !important;
}

.chat-head-names {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
}

.chat-head h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
}

.chat-head .username {
  font-size: 13px !important;
  color: var(--muted) !important;
  margin: 0 !important;
}

.chat-head-view-profile {
  background: var(--button) !important;
  color: var(--buttonText) !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

.chat-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--button) !important;
  color: var(--buttonText) !important;
  display: grid !important;
  place-items: center !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  background-size: cover !important;
  background-position: center !important;
}

.chat-avatar.has-photo {
  color: transparent !important;
}

/* Settings close button */
.settings-close-btn {
  background: var(--button) !important;
  color: var(--buttonText) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  line-height: 1 !important;
  padding: 0 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

.settings-close-btn:active {
  opacity: 0.7 !important;
}

.chat-head h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
}

.chat-head .username {
  font-size: 13px !important;
  color: var(--muted) !important;
  margin: 2px 0 0 !important;
}

/* Message list - scrollable middle area */
.message-list,
#messageList {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 0 !important;
  scroll-behavior: smooth !important;
  overscroll-behavior: contain !important;
}

/* Message rows */
.message-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  max-width: 100% !important;
}

.message-row.mine {
  align-items: flex-end !important;
}

/* Message bubbles */
.message-bubble {
  max-width: 78% !important;
  padding: 12px 16px !important;
  border-radius: 20px !important;
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  line-height: 1.4 !important;
  font-size: 15px !important;
  overflow-wrap: anywhere !important;
}

.message-row.mine .message-bubble {
  background: var(--button) !important;
  color: var(--buttonText) !important;
  border-color: transparent !important;
}

/* Message time */
.message-time {
  font-size: 11px !important;
  color: var(--muted) !important;
  margin-top: 4px !important;
  padding: 0 4px !important;
}

/* Message composer - fixed at bottom */
.message-composer {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  border-top: 1px solid var(--line) !important;
  background: var(--surface) !important;
  flex-shrink: 0 !important;
  min-height: 64px !important;
}

.message-composer input {
  flex: 1 !important;
  border: 1px solid var(--line) !important;
  border-radius: 24px !important;
  padding: 12px 18px !important;
  background: var(--card) !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  outline: none !important;
}

.message-composer input:focus {
  border-color: var(--line-strong) !important;
}

.message-composer button {
  padding: 10px 20px !important;
  border-radius: 24px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}

/* Section title row for inbox */
.section-title-row {
  padding: 16px 16px 8px !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
}

/* Thread items */
.thread-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  text-align: left !important;
  width: 100% !important;
}

.thread-item:hover {
  background: var(--card-soft) !important;
}

.thread-item.active {
  background: var(--surface-2) !important;
}

.thread-item.unread {
  border-left: 3px solid var(--button) !important;
}

/* New message indicator anchor */
.dripline-newest-anchor {
  height: 1px !important;
  flex-shrink: 0 !important;
}

/* Empty states */
.dripline-empty {
  padding: 40px 20px !important;
  text-align: center !important;
  color: var(--muted) !important;
}

/* Desktop sidebar layout */
@media (min-width: 901px) {
  .dripline-layout {
    flex-direction: row !important;
  }

  .thread-sidebar {
    width: 360px !important;
    max-width: 360px !important;
    flex-shrink: 0 !important;
    border-right: 1px solid var(--line) !important;
  }

  .chat-panel {
    flex: 1 !important;
  }

  .dripline-layout.thread-active .thread-sidebar {
    display: flex !important;
  }
}

/* SIMPLE APPROACH: Hide entire app shell while loading */
body.is-loading .shell,
body.is-loading #mobileHotbar,
body.is-loading .topbar,
body.is-loading .rail,
body.is-loading .side {
  display: none !important;
}

body.is-loading {
  overflow: hidden !important;
  background: #09090b !important;
}

/* Hotbar visible in dripline inbox - hide only in active chat via JS */
@media (max-width: 900px) {
  /* Ensure chat input has proper safe area padding in active chat */
  .dripline-layout.thread-active .message-composer {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
    background: var(--surface) !important;
    border-top: 1px solid var(--line) !important;
  }
}

/* Small screen dripline adjustments */
@media (max-width: 420px) {
  #driplineView:not(.hidden) .message-composer {
    padding: 10px !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
  }
}

/* Mobile optimizations consolidated */
@media (max-width: 900px) {
  .chat-head {
    padding: 10px 12px !important;
    min-height: 56px !important;
  }

  .chat-head h3 {
    font-size: 15px !important;
  }

  .chat-avatar {
    width: 36px !important;
    height: 36px !important;
  }

  .message-list,
  #messageList {
    padding: 12px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .message-bubble {
    max-width: 85% !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
  }

  .message-composer {
    padding: 10px 12px !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
  }

  .message-composer input {
    padding: 10px 14px !important;
  }

  .message-composer button {
    padding: 10px 16px !important;
  }

  .thread-sidebar {
    padding: 10px !important;
  }

  .thread-item {
    padding: 10px 12px !important;
  }
}

/* FINAL OVERRIDE: Ensure mobileHotbar hides with hidden class */
html body.is-authed #mobileHotbar.mobile-hotbar.hidden {
  display: none !important;
}


/* Mobile input styling for native keyboard */
@media (max-width: 900px) {
  .message-composer input {
    font-size: 16px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
}

/* ULTIMATE CHAT LAYOUT OVERRIDE - Force Instagram-style layout */
@media (max-width: 900px) {
  html body .dripline-layout.thread-active .chat-panel {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    position: fixed !important;
    top: env(safe-area-inset-top, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 100 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  html body .dripline-layout.thread-active .chat-panel .thread-header {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 56px !important;
    max-height: 56px !important;
    position: relative !important;
    z-index: 10 !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  html body .dripline-layout.thread-active .chat-panel .message-list,
  html body .dripline-layout.thread-active .chat-panel #messageList {
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  html body .dripline-layout.thread-active .chat-panel .message-composer {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 64px !important;
    position: relative !important;
    z-index: 10 !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
  }
}

/* Mobile PWA Viewport Fixes - Instagram/TikTok style: lock to viewport, no page scroll */
@media (max-width: 900px) {
  /* Root extends FULL viewport including safe areas - background bleeds to edge */
  html {
    height: 100% !important;
    overflow: hidden !important;
  }

  body {
    height: 100lvh !important; /* Large viewport = includes safe areas */
    min-height: 100lvh !important;
    max-height: 100lvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    /* Background extends into safe area */
    background-attachment: fixed !important;
  }

  /* Content container stays within dynamic viewport (visible area) */
  .app-grid, .shell {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    /* Keep content above safe area */
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* Main content area - only this scrolls internally */
  .main {
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    /* Clear floating hotbar + safe area */
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 20px)) !important;
  }

  /* Dripline views fill viewport */
  #driplineView:not(.hidden) {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  /* Dripline page no overflow */
  .dripline-page {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  /* Thread list scrolls internally if needed - account for header + hotbar */
  .thread-list {
    max-height: calc(100dvh - 160px - env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Message list scrolls internally - account for header + input + hotbar */
  .message-list, #messageList {
    height: calc(100dvh - 220px - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 220px - env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Flow/grid scrolls internally - account for hotbar */
  .flow-grid, .drops-grid {
    min-height: calc(100dvh - 180px - env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 20px)) !important;
  }


  /* Full-screen chat panel override - beats html body .dripline-layout specificity */
  html body.chat-active .chat-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: var(--surface, #0d0d10) !important;
  }

  html body.chat-active .chat-panel .chat-head {
    flex: 0 0 auto !important;
    padding-top: calc(env(safe-area-inset-top, 44px) + 8px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 8px !important;
    min-height: auto !important;
    z-index: 10 !important;
  }

  html body.chat-active .chat-panel .message-list,
  html body.chat-active .chat-panel #messageList {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body.chat-active .chat-panel .message-composer {
    flex: 0 0 auto !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 8px) !important;
  }

  /* Scrollable message area fills remaining space */
  .dripline-layout.thread-active .chat-panel .message-list,
  .dripline-layout.thread-active .chat-panel #messageList {
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Fixed message composer at bottom */
  .dripline-layout.thread-active .chat-panel .message-composer {
    flex: 0 0 auto !important;
    min-height: 64px !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
    background: var(--surface) !important;
    border-top: 1px solid var(--line) !important;
  }

  /* Hide scrollbars but keep functionality */
  ::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
}

/* =========================================================
   DROPPED_V68_DESIGN_SYSTEM_OVERHAUL
   Cohesive dark-mode glassmorphism, micro-interactions,
   skeleton states, and mobile-first polish.
   ========================================================= */

/* ——— Extended design tokens ——— */
:root {
  /* Glassmorphism surfaces */
  --glass: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.10);
  --glass-highlight: rgba(255,255,255,0.12);
  --glass-press: rgba(255,255,255,0.03);

  /* Elevation */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.16);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.24);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.32);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-normal: 220ms;
  --duration-slow: 350ms;
}

body.light {
  --glass: rgba(0,0,0,0.04);
  --glass-border: rgba(0,0,0,0.08);
  --glass-highlight: rgba(0,0,0,0.06);
  --glass-press: rgba(0,0,0,0.02);
}

/* ——— Global micro-interactions ——— */
button,
.rail-btn,
.mobile-hotbar-btn,
.profile-pill-button,
.drop-action-btn,
.thread-item,
.chat-bubble,
.top-menu-btn,
.profile-panel-tabs button,
.settings-tabs button {
  transition:
    transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  will-change: transform;
}

button:active,
.rail-btn:active,
.mobile-hotbar-btn:active,
.profile-pill-button:active,
.drop-action-btn:active,
.thread-item:active,
.chat-bubble:active,
.top-menu-btn:active,
.profile-panel-tabs button:active,
.settings-tabs button:active {
  transform: scale(0.96) !important;
  opacity: 0.85;
}

button:not(:active),
.rail-btn:not(:active),
.mobile-hotbar-btn:not(:active) {
  transform: scale(1);
}

/* Remove focus rings on mobile; keep visible focus for desktop */
button:focus-visible {
  outline: 2px solid var(--button);
  outline-offset: 2px;
}

/* ——— Glassmorphism card upgrade ——— */
.panel,
.card,
.drop,
.thread-item,
.notification,
.settings-page,
.auth-card,
.empty-state,
.profile-hero {
  background: var(--card);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.drop:hover,
.thread-item:hover,
.notification:hover {
  border-color: var(--glass-highlight);
  box-shadow: var(--shadow-md);
}

/* ——— Shimmer / skeleton loaders ——— */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton,
.skeleton-text,
.skeleton-avatar,
.skeleton-card {
  background: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    var(--card-soft) 50%,
    var(--surface-2) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: 12px;
  pointer-events: none;
}

.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
}
.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.skeleton-card {
  height: 180px;
  width: 100%;
}

/* ——— Empty states ——— */
.empty-state {
  display: grid;
  place-items: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
  border-radius: 22px;
  background: var(--card);
  border: 1px dashed var(--glass-border);
  font-size: 15px;
}
.empty-state::before {
  content: "✦";
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.35;
}

/* ——— Floating mobile hotbar with active indicator ——— */
@media (max-width: 900px) {
  body.is-authed:not(.is-loading) #mobileHotbar {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 6px env(safe-area-inset-bottom, 0px) 6px !important;
    border-radius: 28px !important;
    border: 1px solid var(--glass-border) !important;
    background: rgba(16,17,22,0.78) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: var(--shadow-lg) !important;
  }

  body.light body.is-authed:not(.is-loading) #mobileHotbar {
    background: rgba(255,255,255,0.82) !important;
  }

  /* Active indicator pill */
  body.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-btn {
    position: relative !important;
    border-radius: 18px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 6px 2px !important;
  }

  body.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-btn.active {
    color: #ffffff !important;
    background: var(--glass-highlight) !important;
  }

  body.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-btn.active::after {
    content: "" !important;
    position: absolute !important;
    bottom: 4px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 18px !important;
    height: 4px !important;
    border-radius: 2px !important;
    background: var(--button) !important;
    opacity: 1 !important;
    transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-spring);
  }

  /* Remove old pseudo-element fill; floating bar already has rounded shape */
  body.is-authed:not(.is-loading) #mobileHotbar::after {
    display: none !important;
  }
}

/* ——— Feed cards: full-bleed media + gradient scrims ——— */
.drop {
  overflow: hidden;
  position: relative;
}

.drop-media,
.drop .media,
.drop img,
.drop video {
  width: 100%;
  border-radius: 16px;
  display: block;
  object-fit: cover;
  background: var(--surface-2);
}

.drop-media-wrap:has(.drop-media),
.drop .media-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

.drop-media-wrap::after,
.drop .media-wrap::after,
.drop:has(img)::after,
.drop:has(video)::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
  pointer-events: none;
  border-radius: 0 0 16px 16px;
}

/* Interaction rail */
.drop-actions,
.drop .actions,
.drop-interactions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
}

.drop-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--glass);
  color: var(--ink);
  border: 1px solid var(--glass-border);
  font-size: 14px;
  font-weight: 600;
}

.drop-action-btn.active {
  background: var(--button) !important;
  color: var(--buttonText) !important;
  transform: scale(1.02);
}

.drop-action-btn .icon {
  transition: transform var(--duration-fast) var(--ease-spring);
}

.drop-action-btn:active .icon {
  transform: scale(1.25);
}

/* ——— Chat bubbles + input ——— */
.message-row {
  display: flex;
  margin-bottom: 8px;
  animation: messagePop 0.25s var(--ease-spring);
}

@keyframes messagePop {
  0% { opacity: 0; transform: translateY(10px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.message-row.mine {
  justify-content: flex-end;
}

.message-bubble {
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 20px;
  font-size: 15px;
  line-height: 1.45;
  position: relative;
  box-shadow: var(--shadow-sm);
}

.message-row.mine .message-bubble {
  background: var(--button);
  color: var(--buttonText);
  border-bottom-right-radius: 6px;
}

.message-row.theirs .message-bubble {
  background: var(--card);
  color: var(--ink);
  border-bottom-left-radius: 6px;
}

.message-time {
  display: block;
  font-size: 11px;
  margin-top: 6px;
  opacity: 0.55;
  text-align: right;
}

.read-status {
  display: inline-block;
  margin-left: 4px;
}

.read-status.read {
  color: var(--buttonText);
}

.read-status.read::before {
  content: "✓✓";
  letter-spacing: -2px;
  opacity: 0.75;
}

.message-composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) 12px;
  background: var(--surface);
  border-top: 1px solid var(--glass-border);
}

.message-composer textarea,
.message-composer input {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  padding: 12px 16px;
  border-radius: 22px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--glass-border);
  resize: none;
  outline: none;
  font-size: 16px;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.message-composer textarea:focus,
.message-composer input:focus {
  border-color: var(--glass-highlight);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}

/* ——— Topbar glass polish ——— */
.topbar {
  border-radius: 24px;
  background: rgba(16,17,22,0.78);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
}

body.light .topbar {
  background: rgba(255,255,255,0.82);
}

/* ——— Pull-to-refresh cue ——— */
.pull-refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  color: var(--muted);
  font-size: 13px;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}

.pull-refresh.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ——— Smooth tab switching ——— */
.profile-panel-tabs,
.settings-tabs {
  position: relative;
}

.profile-panel-tabs button,
.settings-tabs button {
  position: relative;
  z-index: 1;
}

.profile-panel-tabs button.active,
.settings-tabs button.active {
  background: var(--button);
  color: var(--buttonText);
  transform: scale(1.02);
}

/* ——— Reduce motion preference ——— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   HOME VIEW BASELINE — single view test (v68b)
   ========================================================= */

/* Deep dark immersive background on root/shell */
html body .shell,
html body.is-authed .shell,
html body.is-loading .shell {
  background: #09090b !important;
}

/* Ensure Home view wrapper is pure dark and fills viewport */
html body #homeView,
html body.is-authed #homeView {
  background: #09090b !important;
  min-height: 100dvh !important;
  color: #ffffff !important;
}

/* Typography hierarchy on Home */
html body #homeView h1,
html body #homeView h2,
html body #homeView h3,
html body #homeView .brand h1 {
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

html body #homeView p,
html body #homeView span,
html body #homeView .drop-meta,
html body #homeView .username {
  color: #a1a1aa !important;
}

/* Search input on Home */
html body #homeView #searchInput,
html body #homeView #searchBox {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #ffffff !important;
}

html body #homeView #searchInput::placeholder {
  color: #a1a1aa !important;
}

/* Bottom nav frosted blur */
html body #mobileHotbar,
html body.is-authed #mobileHotbar {
  background: rgba(0,0,0,0.60) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 28px 28px 28px 28px !important;
  left: 12px !important;
  right: 12px !important;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.40) !important;
}

html body #mobileHotbar .mobile-hotbar-btn {
  color: #a1a1aa !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

html body #mobileHotbar .mobile-hotbar-btn.active {
  color: #ffffff !important;
}

html body #mobileHotbar .mobile-hotbar-btn.active::after {
  background: #ffffff !important;
  width: 20px !important;
  height: 4px !important;
  border-radius: 2px !important;
}

/* =========================================================
   PHASE 1: FEED & POST CARDS OVERHAUL
   ========================================================= */

/* Feed card surfaces */
html body .drop,
html body #feed .drop,
html body .feed .drop,
html body .drops-grid .drop,
html body .feed-grid .drop {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 20px !important;
  padding: 14px 14px 12px !important;
  margin-bottom: 14px !important;
  box-shadow: none !important;
  transition:
    transform 0.12s var(--ease-out),
    background 0.15s var(--ease-out),
    border-color 0.15s var(--ease-out),
    box-shadow 0.15s var(--ease-out) !important;
  will-change: transform !important;
}

html body .drop:active,
html body #feed .drop:active,
html body .feed .drop:active,
html body .drops-grid .drop:active {
  transform: scale(0.98) !important;
  background: var(--bg-surface-elevated) !important;
  border-color: var(--border-focus) !important;
}

html body .drop:hover {
  border-color: var(--border-focus) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important;
}

/* Post typography */
html body .drop .drop-author-name,
html body .drop .author-name,
html body .drop h4,
html body .drop .drop-title,
html body .drop .title {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  margin: 0 0 4px !important;
}

html body .drop .drop-meta,
html body .drop .meta,
html body .drop .username,
html body .drop .timestamp {
  color: var(--text-muted) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

html body .drop .drop-text,
html body .drop .drop-body,
html body .drop p,
html body .drop .content {
  color: var(--text-primary) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  margin: 8px 0 0 !important;
}

/* Media inside cards */
html body .drop .drop-media,
html body .drop img,
html body .drop video,
html body .drop .media,
html body .drop .media-wrap {
  border-radius: 16px !important;
  display: block !important;
  width: 100% !important;
  object-fit: cover !important;
  margin: 10px 0 0 !important;
}

/* Action rail */
html body .drop .drop-actions,
html body .drop .actions,
html body .drop .interaction-row,
html body .drop .engagement-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 0 0 !important;
  margin-top: 10px !important;
  border-top: 1px solid var(--border-subtle) !important;
}

/* Action buttons */
html body .drop .drop-action-btn,
html body .drop .action-btn,
html body .drop button[class*="like"],
html body .drop button[class*="comment"],
html body .drop button[class*="share"],
html body .drop .engagement-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 44px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 1px solid transparent !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition:
    transform 0.12s var(--ease-out),
    background 0.12s var(--ease-out),
    color 0.12s var(--ease-out),
    border-color 0.12s var(--ease-out) !important;
  will-change: transform !important;
}

html body .drop .drop-action-btn:hover,
html body .drop .action-btn:hover,
html body .drop button[class*="like"]:hover,
html body .drop button[class*="comment"]:hover,
html body .drop button[class*="share"]:hover {
  background: var(--bg-surface-elevated) !important;
  color: var(--text-primary) !important;
}

html body .drop .drop-action-btn:active,
html body .drop .action-btn:active,
html body .drop button[class*="like"]:active,
html body .drop button[class*="comment"]:active,
html body .drop button[class*="share"]:active {
  transform: scale(0.92) !important;
  background: var(--bg-surface-elevated) !important;
}

html body .drop .drop-action-btn.active,
html body .drop .action-btn.active,
html body .drop button[class*="like"].active {
  background: var(--button) !important;
  color: var(--buttonText) !important;
  border-color: var(--button) !important;
}

/* Comment / share icons */
html body .drop .drop-action-btn .icon,
html body .drop .action-btn .icon,
html body .drop .engagement-btn svg,
html body .drop .engagement-btn img {
  width: 18px !important;
  height: 18px !important;
  transition: transform 0.15s var(--ease-spring) !important;
}

html body .drop .drop-action-btn:active .icon,
html body .drop .action-btn:active .icon {
  transform: scale(1.2) !important;
}

/* =========================================================
   V73 POLISH PASS: shell, safe areas, nav, cards
   ========================================================= */

/* ---------- Phase 1: shell + scroll architecture ---------- */
@media (max-width: 900px) {
  html body .topbar,
  html body #mainTopbar,
  html body .chat-head,
  html body .thread-header {
    padding-top: max(12px, env(safe-area-inset-top)) !important;
  }

  html body:not(.flow-mode) .shell {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  html body:not(.flow-mode) .shell > #mainTopbar {
    flex: 0 0 auto !important;
  }

  html body:not(.flow-mode) .shell > .app-grid {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 0 !important;
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  html body:not(.flow-mode) .main {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding-top: 0 !important;
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 24px)) !important;
    scrollbar-width: none !important;
  }

  html body:not(.flow-mode) .main::-webkit-scrollbar {
    display: none !important;
  }

  html body:not(.flow-mode) #mainTopbar.hidden ~ .app-grid .main {
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  html body:not(.flow-mode) #homeView,
  html body:not(.flow-mode) #profilePage {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  html body:not(.flow-mode) #feed > :last-child {
    margin-bottom: 0 !important;
  }

  html body:not(.flow-mode) .flow-grid,
  html body:not(.flow-mode) .drops-grid {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }
}

/* ---------- Phase 2a: floating bottom navigation ---------- */
@media (max-width: 900px) {
  html body.is-authed:not(.is-loading) #mobileHotbar {
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 2px !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: calc(100% - 24px) !important;
    max-width: 480px !important;
    height: 56px !important;
    margin: 0 auto !important;
    padding: 5px 8px !important;
    background: rgba(13, 13, 16, 0.75) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 9999px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
  }

  html body.is-authed:not(.is-loading) #mobileHotbar::before,
  html body.is-authed:not(.is-loading) #mobileHotbar::after {
    display: none !important;
  }

  html body.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-btn {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    position: relative !important;
    height: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: transparent !important;
    color: #a1a1aa !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease !important;
  }

  html body.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-btn::before,
  html body.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-btn::after,
  html body.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-btn.active::before,
  html body.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-btn.active::after {
    content: none !important;
    display: none !important;
  }

  html body.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-btn > .mobile-hotbar-icon {
    position: static !important;
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  html body.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-drop-mark {
    width: 18px !important;
    height: 18px !important;
    margin: 1px 0 !important;
  }

  html body.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-drop-mark::after {
    inset: 5px !important;
    background: #0d0d10 !important;
  }

  html body.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-drip-mark {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
  }

  html body.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-btn > span:last-child {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
  }

  html body.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-btn.active,
  html body.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-post.active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.10) !important;
  }

  html body.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-btn:active {
    transform: scale(0.94) !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  html body.light.is-authed:not(.is-loading) #mobileHotbar {
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12) !important;
  }

  html body.light.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-btn {
    color: #71717a !important;
  }

  html body.light.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-btn.active {
    color: #18181b !important;
    background: rgba(0, 0, 0, 0.06) !important;
  }

  html body.light.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-drop-mark::after {
    background: #ffffff !important;
  }
}

/* ---------- Phase 2b: feed cards ---------- */
html body .drop:not(.flow-card) {
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 6px 20px rgba(0, 0, 0, 0.22) !important;
}

html body .drop:not(.flow-card):hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 6px 20px rgba(0, 0, 0, 0.22) !important;
}

html body .drop:not(.flow-card) .drop-image,
html body .drop:not(.flow-card) .drop-video {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--border-subtle) !important;
  margin-top: 12px !important;
}

html body .drop:not(.flow-card) .drop-text,
html body #homeView .drop:not(.flow-card) .drop-text,
html body #profilePage .drop:not(.flow-card) .drop-text {
  color: var(--text-primary) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

html body .drop:not(.flow-card) .drop-meta {
  gap: 6px !important;
  margin-top: 10px !important;
}

html body .drop:not(.flow-card) .drop-badge,
html body #homeView .drop:not(.flow-card) .drop-badge,
html body #profilePage .drop:not(.flow-card) .drop-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  border-radius: 9999px !important;
  border: 1px solid var(--border-subtle) !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em !important;
}

/* ---------- Phase 2c: engagement rail ---------- */
html body .drop:not(.flow-card) .drop-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  gap: 6px !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--border-subtle) !important;
}

html body .drop:not(.flow-card) .drop-actions .action,
html body #homeView .drop:not(.flow-card) .drop-actions .action,
html body #profilePage .drop:not(.flow-card) .drop-actions .action {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 36px !important;
  padding: 0 8px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #e4e4e7 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: none !important;
  transform: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

html body .drop:not(.flow-card) .drop-actions .action span,
html body #homeView .drop:not(.flow-card) .drop-actions .action span,
html body #profilePage .drop:not(.flow-card) .drop-actions .action span {
  color: inherit !important;
  font: inherit !important;
  margin: 0 !important;
}

html body .drop:not(.flow-card) .drop-actions .action:hover,
html body #homeView .drop:not(.flow-card) .drop-actions .action:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #e4e4e7 !important;
  transform: none !important;
}

@media (hover: hover) {
  html body .drop:not(.flow-card) .drop-actions .action:hover,
  html body #homeView .drop:not(.flow-card) .drop-actions .action:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
  }
}

html body .drop:not(.flow-card) .drop-actions .action.grabbed,
html body #homeView .drop:not(.flow-card) .drop-actions .action.grabbed,
html body #profilePage .drop:not(.flow-card) .drop-actions .action.grabbed {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 14px rgba(255, 255, 255, 0.08) !important;
}

html body .drop:not(.flow-card) .drop-actions .action:active,
html body #homeView .drop:not(.flow-card) .drop-actions .action:active,
html body #profilePage .drop:not(.flow-card) .drop-actions .action:active {
  transform: scale(0.96) !important;
  transition: transform 0.1s ease !important;
}

html body .drop:not(.flow-card):has(.drop-actions :active, .echo-section :active, .drop-header button:active) {
  transform: none !important;
}

html body.light .drop:not(.flow-card) .drop-actions .action,
html body.light #homeView .drop:not(.flow-card) .drop-actions .action {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #27272a !important;
}

html body.light .drop:not(.flow-card) .drop-actions .action.grabbed,
html body.light #homeView .drop:not(.flow-card) .drop-actions .action.grabbed {
  background: rgba(0, 0, 0, 0.07) !important;
  border-color: rgba(0, 0, 0, 0.24) !important;
  color: #09090b !important;
  box-shadow: none !important;
}

/* =========================================================
   V75 PROFILE HEADER FIX
   ========================================================= */

html body #profilePage.active {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 14px !important;
}

html body #profilePage.active > * {
  flex: 0 0 auto !important;
  min-height: auto !important;
}

html body #profilePage .profile-hero {
  height: auto !important;
  min-height: fit-content !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  padding-bottom: 18px !important;
}

html body #profilePage .profile-cover {
  height: 150px !important;
  min-height: 140px !important;
  max-height: 160px !important;
}

html body #profilePage .profile-main-row,
html body #profilePage .profile-cta-row {
  height: auto !important;
  overflow: visible !important;
}

html body #profilePage .profile-cta-row button {
  min-height: 42px !important;
  height: auto !important;
}

html body #profilePage .profile-bio {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body #profilePage .profile-meta-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin-top: 12px !important;
  margin-bottom: 16px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body #profilePage .profile-meta-row > .profile-pill,
html body #profilePage .profile-meta-row > .profile-pill-button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  flex-shrink: 1 !important;
}

html body #profilePage .profile-meta-row > .hidden {
  display: none !important;
}

html body #profilePage .profile-panel-tabs {
  padding-bottom: 0 !important;
}

html body #profilePage .profile-feed-title {
  margin-top: 10px !important;
}


html body #profilePage,
html body #profilePage *,
html body #profilePage *::before,
html body #profilePage *::after {
  box-sizing: border-box !important;
}

/* =========================================================
   V82 UNIFIED HOME DROP CARD (challenge + composer)
   ========================================================= */

html body #homeView > .home-drop-card {
  display: block !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  background: #121215 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top-color: rgba(255, 255, 255, 0.16) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden !important;
}

html body #homeView .home-drop-card > .daily-challenge,
html body #homeView .home-drop-card > .composer {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body #homeView .home-drop-card > .daily-challenge::before,
html body #homeView .home-drop-card > .daily-challenge::after,
html body #homeView .home-drop-card > .composer::before,
html body #homeView .home-drop-card > .composer::after {
  content: none !important;
  display: none !important;
}

html body #homeView .home-drop-card > .daily-challenge {
  padding: 16px 16px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html body #homeView .home-drop-card .challenge-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 10px 0 !important;
}

html body #homeView .home-drop-card .challenge-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 26px !important;
  padding: 0 11px 0 9px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  color: #fafafa !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body #homeView .home-drop-card .challenge-pill svg {
  flex: 0 0 auto !important;
  color: #ffffff !important;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.45)) !important;
}

html body #homeView .home-drop-card #usePromptBtn {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

html body #homeView .home-drop-card #challengeText {
  display: block !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

html body #homeView .home-drop-card > .composer {
  padding: 14px 16px 16px !important;
}

html body #homeView .home-drop-card .composer-top {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 0 12px 0 !important;
}

html body #homeView .home-drop-card .small-avatar {
  flex: 0 0 auto !important;
}

html body #homeView .home-drop-card #dropInput {
  flex: 1 1 auto !important;
  min-height: 72px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  color: #fafafa !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  resize: none !important;
}

html body #homeView .home-drop-card #dropInput::placeholder {
  color: rgba(255, 255, 255, 0.38) !important;
}

html body #homeView .home-drop-card #dropInput:focus {
  outline: none !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

html body #homeView .home-drop-card .composer-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body #homeView .home-drop-card .chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html body #homeView .home-drop-card .chip {
  min-height: 32px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.80) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

html body #homeView .home-drop-card #dropBtn {
  display: block !important;
  width: 100% !important;
  min-height: 46px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 0 !important;
  color: #09090b !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

html body #homeView .home-drop-card #dropBtn:active {
  transform: scale(0.98) !important;
}

@media (max-width: 900px) {
  html body #homeView > .home-drop-card {
    margin-bottom: 12px !important;
  }
}

html body.light #homeView > .home-drop-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  border-top-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.12) !important;
}

html body.light #homeView .home-drop-card > .daily-challenge {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

html body.light #homeView .home-drop-card .challenge-pill,
html body.light #homeView .home-drop-card .challenge-pill svg {
  color: #09090b !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
  box-shadow: none !important;
  filter: none !important;
}

html body.light #homeView .home-drop-card .challenge-pill svg {
  background: transparent !important;
}

html body.light #homeView .home-drop-card #challengeText,
html body.light #homeView .home-drop-card #usePromptBtn,
html body.light #homeView .home-drop-card .chip {
  color: rgba(9, 9, 11, 0.72) !important;
}

html body.light #homeView .home-drop-card #dropInput {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #09090b !important;
}

html body.light #homeView .home-drop-card #dropBtn {
  background: #09090b !important;
  color: #ffffff !important;
}

/* =========================================================
   V83 HOTBAR CENTER DROPLET ACTION
   ========================================================= */

html body #mobileHotbar #mobileCreateBtn,
html body #mobileHotbar #mobileCreateBtn.active,
html body #mobileHotbar #mobileCreateBtn:active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  color: #ffffff !important;
}

html body #mobileHotbar #mobileCreateBtn::before,
html body #mobileHotbar #mobileCreateBtn::after {
  content: none !important;
  display: none !important;
}

html body #mobileHotbar #mobileCreateBtn > .mobile-hotbar-drop-orb {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
  font-size: 0 !important;
  line-height: 0 !important;
  -webkit-transition: background 0.15s ease, transform 0.12s ease, border-color 0.15s ease !important;
  transition: background 0.15s ease, transform 0.12s ease, border-color 0.15s ease !important;
}

html body #mobileHotbar #mobileCreateBtn .mobile-hotbar-droplet {
  display: block !important;
  width: 16px !important;
  height: 24px !important;
  fill: #ffffff !important;
  color: #ffffff !important;
  -webkit-transition: transform 0.12s ease !important;
  transition: transform 0.12s ease !important;
}

html body #mobileHotbar #mobileCreateBtn:active > .mobile-hotbar-drop-orb,
html body #mobileHotbar #mobileCreateBtn.active > .mobile-hotbar-drop-orb {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  -webkit-transform: scale(0.92) !important;
  transform: scale(0.92) !important;
}

html body #mobileHotbar #mobileCreateBtn:active .mobile-hotbar-droplet {
  -webkit-transform: translateY(1px) !important;
  transform: translateY(1px) !important;
}

html body.light #mobileHotbar #mobileCreateBtn,
html body.light #mobileHotbar #mobileCreateBtn .mobile-hotbar-droplet {
  color: #09090b !important;
  fill: #09090b !important;
}

html body.light #mobileHotbar #mobileCreateBtn > .mobile-hotbar-drop-orb {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #09090b !important;
}

/* =========================================================
   V84 DRIPLINE SINGLE-SCROLL + COMPACT SEARCH + GLOBAL SURFACES
   ========================================================= */

/* ——— Global surface tokens ——— */
html body:not(.light) {
  --bg: #09090b;
  --surface: #121215;
  --surface-2: #121215;
  --card: #121215;
  --card-soft: rgba(255, 255, 255, 0.035);
  --line: rgba(255, 255, 255, 0.08);
  --muted: rgba(255, 255, 255, 0.55);
}

html body:not(.light) #homeView,
html body:not(.light) #flowView,
html body:not(.light) #savedView,
html body:not(.light) #profilePage,
html body:not(.light) #driplineView {
  background: #09090b !important;
}

html body:not(.light) #homeView .panel,
html body:not(.light) #flowView .panel,
html body:not(.light) #profilePage .panel,
html body:not(.light) #driplineView .panel,
html body:not(.light) #driplineView .recipient-selector,
html body:not(.light) #driplineView .recipient-item,
html body:not(.light) #profilePage .profile-card {
  background: #121215 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html body:not(.light) #homeView .username,
html body:not(.light) #flowView .username,
html body:not(.light) #profilePage .username,
html body:not(.light) #driplineView .username,
html body:not(.light) #driplineView .thread-meta,
html body:not(.light) #driplineView .message-time {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ——— 1. Single natural scroll: no nested scrollers in the inbox ——— */
html body #driplineView,
html body #driplineView:not(.hidden),
html body .dripline-page,
html body .dripline-shell,
html body .dripline-layout,
html body .thread-sidebar {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html body #threadList,
html body .thread-list,
html body #followingRecipientList,
html body .recipient-list,
html body .recipient-list.compact {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html body .main {
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
}

/* Active chat stays a self-contained overlay with its own message scroll.
   The panel is reparented to <body> when opened, so it is styled off body.chat-active. */
html body.chat-active .chat-panel,
html body .dripline-layout.thread-active .chat-panel {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  background: #09090b !important;
}

html body.light.chat-active .chat-panel {
  background: var(--bg) !important;
}

html body.chat-active .chat-panel .message-list,
html body.chat-active .chat-panel #messageList,
html body .dripline-layout.thread-active .chat-panel .message-list,
html body .dripline-layout.thread-active .chat-panel #messageList {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

@media (min-width: 901px) {
  html body .dripline-layout {
    align-items: flex-start !important;
  }

  html body:not(.chat-active) .dripline-layout .chat-panel {
    height: calc(100vh - 180px) !important;
    max-height: calc(100vh - 180px) !important;
  }
}

/* ——— 2. Compact "Drip following" search card ——— */
html body #driplineView .recipient-selector {
  padding: 10px 14px !important;
  border-radius: 16px !important;
}

html body #driplineView .selector-head {
  margin: 0 !important;
  gap: 0 !important;
}

html body #driplineView .selector-head strong {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

html body #driplineView .selector-head .username {
  display: none !important;
}

html body #driplineView #recipientSearchInput {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  margin: 6px 0 0 0 !important;
  font-size: 14px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #fafafa !important;
}

html body #driplineView #recipientSearchInput::placeholder {
  color: rgba(255, 255, 255, 0.40) !important;
}

html body.light #driplineView .selector-head strong {
  color: rgba(9, 9, 11, 0.78) !important;
}

html body.light #driplineView #recipientSearchInput {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
  color: #09090b !important;
}

html body.light #driplineView #recipientSearchInput::placeholder {
  color: rgba(9, 9, 11, 0.45) !important;
}

/* Following results only expand while searching, so threads stay above the fold. */
html body #driplineView #followingRecipientList {
  display: none !important;
}

html body #driplineView .recipient-selector.searching #followingRecipientList {
  display: grid !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

html body #driplineView .thread-divider {
  margin: 10px 0 !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* ——— 3. Chat rows: clean spacing, separators, tap feedback ——— */
html body #driplineView .thread-list {
  display: block !important;
  gap: 0 !important;
}

html body:not(.light) #driplineView .thread-item,
html body #driplineView .thread-item {
  gap: 12px !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:not(.light) #driplineView .thread-item:last-child,
html body #driplineView .thread-item:last-child {
  border-bottom: 0 !important;
}

html body:not(.light) #driplineView .thread-item:hover,
html body:not(.light) #driplineView .thread-item.active,
html body:not(.light) #driplineView .thread-item:active,
html body #driplineView .thread-item:hover,
html body #driplineView .thread-item.active,
html body #driplineView .thread-item:active {
  background: rgba(255, 255, 255, 0.06) !important;
}

html body.light #driplineView .thread-item {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

html body.light #driplineView .thread-item:hover,
html body.light #driplineView .thread-item.active,
html body.light #driplineView .thread-item:active {
  background: rgba(0, 0, 0, 0.05) !important;
}

html body #driplineView .thread-item.unread {
  border-left: 0 !important;
}

html body:not(.light) #driplineView .thread-item.unread strong {
  color: #ffffff !important;
}

/* =========================================================
   DROPPED_V85_STATIC_HEADER_SINGLE_DRIPLINE_HEADER
   Global header scrolls with the feed (Instagram-style) and the
   Dripline view carries one header with the search field under it.
   ========================================================= */

html body .topbar,
html body #mainTopbar {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 10px 2px !important;
}

@media (max-width: 900px) {
  html body .topbar,
  html body #mainTopbar {
    padding: max(10px, env(safe-area-inset-top)) 2px 8px !important;
  }

  html body:not(.flow-mode) .shell {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    scrollbar-width: none !important;
  }

  html body:not(.flow-mode) .shell::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  html body:not(.flow-mode) .shell > .app-grid {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body:not(.flow-mode) .main {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 24px)) !important;
  }
}

/* ---------- Dripline: a single header ---------- */

html body.dripline-mode #mainTopbar {
  display: none !important;
}

html body #driplineView .section-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 10px 0 !important;
  padding: max(8px, env(safe-area-inset-top)) 2px 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body #driplineView .section-title-row h2 {
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

html body #driplineView #newDripBtn {
  height: 34px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  border-radius: 9999px !important;
}

html body #driplineView .recipient-selector {
  padding: 0 !important;
  margin: 0 0 10px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body #driplineView .selector-head {
  display: none !important;
}

html body #driplineView #recipientSearchInput {
  width: 100% !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html body.light #driplineView #recipientSearchInput {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
  color: #09090b !important;
}

html body #driplineView .thread-divider {
  display: none !important;
}

html body #driplineView .thread-list {
  margin-top: 0 !important;
}

html body:not(.light) #driplineView .recipient-selector,
html body.light #driplineView .recipient-selector {
  background: transparent !important;
  border: 0 !important;
}

/* =========================================================
   V87 FLOW MEDIA PROPORTIONS
   One portrait media frame per Flow card, center-cropped.
   ========================================================= */

html body .flow-feed .flow-card .flow-video-frame {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 9 / 16 !important;
  max-height: min(74vh, 780px) !important;
  margin: 12px auto 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #000 !important;
}

html body .flow-feed .flow-card .flow-video-frame .drop-video,
html body .flow-feed .flow-card .flow-video-frame .drop-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: #000 !important;
}

html body .flow-feed .flow-card .flow-video-frame .drop-image::after {
  display: none !important;
}

@media (min-width: 901px) {
  html body .flow-feed .flow-card {
    width: 100% !important;
    max-width: 520px !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 900px) {
  /* Immersive Flow: the card itself is the frame, media fills it edge to edge. */
  html body.flow-mode .flow-feed .flow-card .flow-video-frame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 1 !important;
  }

  html body.flow-mode .flow-feed .flow-card .flow-video-frame .drop-video,
  html body.flow-mode .flow-feed .flow-card .flow-video-frame .drop-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* =========================================================
   V88 TRANSPARENT FLOW HOTBAR
   Flow runs full-bleed; the hotbar floats over the video
   instead of reserving a solid bar at the bottom.
   ========================================================= */

@media (max-width: 900px) {
  html body.flow-mode {
    --flow-hotbar-space: 0px !important;
  }

  html body.flow-mode.is-authed:not(.is-loading) #mobileHotbar,
  html body.light.flow-mode.is-authed:not(.is-loading) #mobileHotbar {
    display: flex !important;
    z-index: 140 !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body.flow-mode.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-btn,
  html body.light.flow-mode.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-btn {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.72) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85) !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.85)) !important;
  }

  html body.flow-mode.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-btn.active,
  html body.flow-mode.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-post.active,
  html body.light.flow-mode.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-btn.active {
    background: transparent !important;
    color: #ffffff !important;
  }

  html body.flow-mode.is-authed:not(.is-loading) #mobileHotbar .mobile-hotbar-drop-mark::after {
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Keep caption + action rail clear of the floating hotbar. */
  html body.flow-mode .flow-feed .flow-info-stack {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body.flow-mode .flow-feed .drop-actions {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* The bottom scrim now has to cover the hotbar area too. */
  html body.flow-mode .flow-feed .drop.flow-card::after {
    height: min(52%, 320px) !important;
  }
}

/* ==========================================================================
   SETTINGS REDESIGN (v94)
   ========================================================================== */

#settingsModal .settings-modal {
  width: min(680px, calc(100vw - 20px)) !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 24px !important;
  background: var(--surface) !important;
}

#settingsModal .settings-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: calc(14px + env(safe-area-inset-top)) 12px 12px 18px !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
}

#settingsModal .settings-header h2 {
  margin: 0 !important;
  font-size: 20px !important;
  letter-spacing: -0.01em !important;
}

#settingsModal .settings-close-btn {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  border-radius: 50% !important;
  font-size: 17px !important;
  background: var(--card-soft) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}

#settingsModal .settings-shell {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 0 0 calc(20px + env(safe-area-inset-bottom)) !important;
}

#settingsModal .settings-tabs {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
}

#settingsModal .settings-tabs::-webkit-scrollbar {
  display: none !important;
}

#settingsModal .settings-tab {
  flex: 0 0 auto !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

#settingsModal .settings-tab.active {
  background: var(--button) !important;
  color: var(--buttonText) !important;
  border-color: transparent !important;
  transform: none !important;
}

#settingsModal .settings-page {
  padding: 14px !important;
  display: none !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#settingsModal .settings-page.active {
  display: flex !important;
}

#settingsModal .settings-card {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  box-shadow: none !important;
}

#settingsModal .settings-card h3 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

#settingsModal .settings-card p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--muted) !important;
}

#settingsModal .settings-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#settingsModal .settings-form label,
#settingsModal .settings-url-label {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
}

#settingsModal input,
#settingsModal textarea,
#settingsModal select {
  width: 100% !important;
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  padding: 0 12px !important;
  height: 44px !important;
}

#settingsModal textarea {
  height: auto !important;
  min-height: 84px !important;
  padding: 10px 12px !important;
  resize: vertical !important;
}

#settingsModal .button-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#settingsModal button.ghost,
#settingsModal button.primary,
#settingsModal .danger-button {
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

#settingsModal button.ghost {
  background: var(--card-soft) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}

#settingsModal .settings-save-bar {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 2 !important;
  margin: 4px -14px calc(-6px - env(safe-area-inset-bottom)) !important;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
  background: linear-gradient(to top, var(--surface) 65%, transparent) !important;
}

#settingsModal .settings-save-bar button {
  width: 100% !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: var(--button) !important;
  color: var(--buttonText) !important;
  border: none !important;
  font-weight: 700 !important;
}

#settingsModal .settings-banner-preview {
  width: 100% !important;
  aspect-ratio: 3 / 1 !important;
  height: auto !important;
  border-radius: 14px !important;
  border: 1px solid var(--line) !important;
  background-color: var(--surface-2) !important;
  background-size: cover !important;
  background-position: center !important;
}

#settingsModal .profile-photo-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

#settingsModal .settings-photo-preview {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  border: 1px solid var(--line) !important;
}

.theme-choices {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.theme-choice {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 56px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  border: 1px solid var(--line) !important;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.theme-choice.active {
  border-color: var(--ink) !important;
  box-shadow: inset 0 0 0 1px var(--ink) !important;
}

.theme-swatch {
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  border: 1px solid var(--line-strong) !important;
  flex: 0 0 26px !important;
}

.theme-swatch-dark {
  background: linear-gradient(135deg, #0b0c10, #22242e) !important;
}

.theme-swatch-light {
  background: linear-gradient(135deg, #ffffff, #d8dbe2) !important;
}

@media (max-width: 720px) {
  #settingsModal.modal-backdrop.open {
    padding: 0 !important;
    align-items: stretch !important;
  }

  #settingsModal .settings-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}

/* ==========================================================================
   LIGHT MODE (v94) — the theme is driven by tokens; these rules replace the
   hardcoded dark surfaces that earlier sections bake in.
   ========================================================================== */

html body.light {
  background: var(--bg) !important;
  color: var(--ink) !important;
}

html body.light .app,
html body.light main,
html body.light #homeView,
html body.light #driplineView,
html body.light #profileView,
html body.light #savedView,
html body.light .view {
  background: var(--bg) !important;
  color: var(--ink) !important;
}

html body.light .topbar,
html body.light .rail,
html body.light .modal,
html body.light .panel,
html body.light .card,
html body.light .settings-card,
html body.light .drop:not(.flow-card),
html body.light .auth-card,
html body.light .empty-state,
html body.light .profile-hero,
html body.light .thread-item,
html body.light .notification,
html body.light .home-drop-card,
html body.light .chat-panel,
html body.light .chat-head {
  background: var(--card) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

html body.light h1,
html body.light h2,
html body.light h3,
html body.light h4,
html body.light strong,
html body.light .drop-text,
html body.light .thread-item strong,
html body.light .notification strong {
  color: var(--ink) !important;
}

html body.light p,
html body.light small,
html body.light .username,
html body.light .mini-note,
html body.light .muted,
html body.light .timestamp,
html body.light .drop-meta,
html body.light .thread-preview {
  color: var(--muted) !important;
}

html body.light input,
html body.light textarea,
html body.light select {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

html body.light input::placeholder,
html body.light textarea::placeholder {
  color: var(--faint) !important;
}

html body.light button.ghost,
html body.light .chip,
html body.light .pill,
html body.light .rail-btn,
html body.light .top-menu-btn {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

html body.light button.primary,
html body.light .danger-button,
html body.light .settings-tab.active,
html body.light .settings-save-bar button {
  color: var(--buttonText) !important;
}

html body.light .danger-button {
  background: var(--danger) !important;
  color: #ffffff !important;
}

html body.light svg {
  color: inherit !important;
}

/* Flow stays dark in light mode: the video owns the screen. */
html body.light.flow-mode,
html body.light.flow-mode .flow-feed,
html body.light .flow-feed,
html body.light .drop.flow-card {
  background: #000000 !important;
  color: #ffffff !important;
}

html body.light .drop.flow-card .drop-text,
html body.light .flow-feed .username,
html body.light .flow-feed .timestamp {
  color: rgba(255, 255, 255, 0.86) !important;
}

/* ==========================================================================
   LIGHT MODE OVERRIDES FOR ID-SCOPED DARK RULES (v94)
   ========================================================================== */

html body.light .shell,
html body.light.is-authed .shell,
html body.light.is-loading .shell,
html body.light #homeView,
html body.light.is-authed #homeView,
html body.light #driplinePage,
html body.light #profilePage,
html body.light .auth-page {
  background: var(--bg) !important;
  color: var(--ink) !important;
}

html body.light #homeView h1,
html body.light #homeView h2,
html body.light #homeView h3,
html body.light #homeView .brand h1,
html body.light .brand h1 {
  color: var(--ink) !important;
}

html body.light #homeView p,
html body.light #homeView span,
html body.light #homeView .drop-meta,
html body.light #homeView .username,
html body.light .brand span {
  color: var(--muted) !important;
}

html body.light #homeView #searchInput,
html body.light #homeView #searchBox {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

html body.light #homeView #searchInput::placeholder {
  color: var(--faint) !important;
}

html body.light .brand-logo {
  background: #ffffff !important;
}

html body.light #mobileHotbar,
html body.light.is-authed #mobileHotbar {
  background: rgba(255, 255, 255, 0.82) !important;
  border-top: 1px solid var(--line) !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.14) !important;
}

html body.light #mobileHotbar .mobile-hotbar-btn {
  color: var(--muted) !important;
}

html body.light #mobileHotbar .mobile-hotbar-btn.active {
  color: var(--ink) !important;
}

html body.light #mobileHotbar .mobile-hotbar-btn.active::after {
  background: var(--ink) !important;
}

html body.light #homeView > .home-drop-card {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-top-color: var(--line-strong) !important;
  box-shadow: 0 4px 18px -6px rgba(15, 23, 42, 0.18) !important;
}

html body.light #homeView .home-drop-card > .daily-challenge {
  border-bottom: 1px solid var(--line) !important;
}

html body.light #homeView .home-drop-card .challenge-pill {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}

html body.light #homeView .home-drop-card .challenge-pill svg,
html body.light #homeView .home-drop-card .challenge-pill svg * {
  color: var(--ink) !important;
  filter: none !important;
}

html body.light #homeView .home-drop-card #usePromptBtn {
  border: 1px solid var(--line) !important;
  color: var(--muted) !important;
}

/* Flow keeps its dark stage even in light mode. */
html body.light.flow-mode .shell,
html body.light #flowPage,
html body.light.flow-mode #flowPage {
  background: #000000 !important;
  color: #ffffff !important;
}

html body.light.flow-mode #mobileHotbar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.light.flow-mode #mobileHotbar .mobile-hotbar-btn {
  color: rgba(255, 255, 255, 0.82) !important;
}

html body.light.flow-mode #mobileHotbar .mobile-hotbar-btn.active {
  color: #ffffff !important;
}

html body.light.flow-mode #mobileHotbar .mobile-hotbar-btn.active::after {
  background: #ffffff !important;
}

/* =========================================================
   DROPPED_V84_NATIVE_CAMERA_PAGE
   Full-screen photo/video capture opened by the center droplet tab.
   ========================================================= */

#cameraPage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #000000;
  z-index: 5000;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: #ffffff;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#cameraPage.open {
  display: flex;
}

body.camera-page-open {
  overflow: hidden;
}

html body.camera-page-open #mobileHotbar,
html body.camera-page-open.is-authed #mobileHotbar,
html body.camera-page-open.is-authed:not(.is-loading) #mobileHotbar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#cameraLiveFeed.mirrored {
  transform: scaleX(-1);
}

.cam-shutter-flash {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
}

.cam-shutter-flash.show {
  animation: camShutterFlash 0.28s ease-out;
}

@keyframes camShutterFlash {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

/* ---------- Top overlay ---------- */

.cam-top {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
}

.cam-round-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 999px;
  border: none;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.cam-round-btn:active {
  transform: scale(0.92);
}

.cam-round-btn[hidden] {
  display: none;
}

/* Spacer keeps the pill centered when torch is unsupported (hidden). */
.cam-top::after {
  content: "";
  width: 44px;
  height: 44px;
  display: none;
}

.cam-top:has(#cameraTorchBtn[hidden])::after {
  display: block;
}

#cameraTorchBtn.active {
  background: #ffffff;
  color: #000000;
}

.cam-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.cam-rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ef4444;
  display: none;
}

#cameraPage.is-recording .cam-mode-pill {
  background: rgba(239, 68, 68, 0.22);
}

#cameraPage.is-recording .cam-rec-dot {
  display: block;
  animation: camRecPulse 1s ease-in-out infinite;
}

@keyframes camRecPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}


/* ---------- Bottom overlay ---------- */

.cam-bottom {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 36px 24px calc(env(safe-area-inset-bottom, 20px) + 16px);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.cam-mode-toggle {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: opacity 0.2s ease;
}

.cam-mode-btn {
  min-width: 74px;
  padding: 7px 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.cam-mode-btn.active {
  background: #ffffff;
  color: #000000;
}

.cam-controls {
  width: 100%;
  max-width: 420px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.cam-gallery-btn {
  justify-self: start;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.2s ease;
}

.cam-gallery-btn:active {
  transform: scale(0.92);
}

.cam-flip-btn {
  justify-self: end;
  width: 48px;
  height: 48px;
}

.cam-flip-btn svg {
  transition: transform 0.35s ease;
}

.cam-flip-btn:active svg {
  transform: rotate(180deg);
}

/* Shutter: 74px outer ring, 58px inner trigger */
.cam-shutter {
  width: 74px;
  height: 74px;
  padding: 0;
  border-radius: 999px;
  border: 4px solid #ffffff;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.cam-shutter:active {
  transform: scale(0.94);
}

.cam-shutter-inner {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #ffffff;
  transition: width 0.2s ease, height 0.2s ease, border-radius 0.2s ease, background 0.2s ease;
}

#cameraPage.mode-video .cam-shutter-inner {
  background: #ef4444;
}

#cameraPage.is-recording .cam-shutter-inner {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #ef4444;
}

#cameraPage.is-recording .cam-mode-toggle,
#cameraPage.is-recording .cam-gallery-btn,
#cameraPage.is-recording .cam-flip-btn,
#cameraPage.is-recording #cameraTorchBtn {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Review ---------- */

.cam-review {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  background: #000000;
}

.cam-review.open {
  display: flex;
}

.cam-review img,
.cam-review video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000000;
}

.cam-review img[hidden],
.cam-review video[hidden] {
  display: none;
}

.cam-review-top {
  position: relative;
  z-index: 2;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 0;
}

.cam-review-actions {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 36px 20px calc(env(safe-area-inset-bottom, 20px) + 16px);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

.cam-review-btn {
  height: 52px;
  border-radius: 999px;
  border: none;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.cam-review-btn:active {
  transform: scale(0.97);
}

.cam-review-retake {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.cam-review-next {
  color: #000000;
  background: #ffffff;
}

@media (min-width: 760px) {
  #cameraPage {
    left: 50%;
    width: 100%;
    max-width: 520px;
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cam-shutter-flash.show,
  #cameraPage.is-recording .cam-rec-dot {
    animation: none;
  }
}



/* =========================================================
   DROPPED_V96_VIDEO_POST_PAGE
   Minimalist full-screen TikTok-style video preview + publish.
   ========================================================= */

#dropPostPage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #000000;
  z-index: 6000;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: #ffffff;
  -webkit-tap-highlight-color: transparent;
}

#dropPostPage.open {
  display: flex;
}

body.drop-post-open {
  overflow: hidden;
}

html body.drop-post-open #mobileHotbar,
html body.drop-post-open.is-authed #mobileHotbar,
html body.drop-post-open.is-authed:not(.is-loading) #mobileHotbar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.dpp-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 20%, transparent 60%, rgba(0, 0, 0, 0.85) 100%);
}

/* ---------- Top bar ---------- */

.dpp-top {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 0 16px;
}

.dpp-icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.dpp-icon-btn:active {
  transform: scale(0.92);
}

#dropPostSoundBtn .dpp-ico-sound,
#dropPostSoundBtn.sound-on .dpp-ico-muted {
  display: none;
}

#dropPostSoundBtn.sound-on .dpp-ico-sound {
  display: block;
}

/* ---------- Right-hand tool stack ---------- */

.dpp-tools {
  position: absolute;
  z-index: 10;
  right: 16px;
  top: 35%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.dpp-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: none;
  background: none;
  color: #ffffff;
  cursor: pointer;
}

.dpp-tool-circle {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.15s ease;
}

.dpp-tool:active .dpp-tool-circle {
  transform: scale(0.92);
}

.dpp-tool-label {
  font-size: 11px;
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

#dropPostPauseBtn .dpp-ico-play,
#dropPostPauseBtn.is-paused .dpp-ico-pause {
  display: none;
}

#dropPostPauseBtn.is-paused .dpp-ico-play {
  display: block;
}

/* ---------- Bottom publish sheet ---------- */

.dpp-sheet {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px calc(env(safe-area-inset-bottom, 20px) + 16px) 16px;
}

#dropPostCaption {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  max-height: 132px;
  margin: 0;
  resize: none;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 12px 16px;
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  outline: none;
  box-shadow: none;
}

#dropPostCaption::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

#dropPostCaption:focus {
  border-color: rgba(255, 255, 255, 0.28);
}

.dpp-actions {
  display: flex;
  gap: 10px;
}

.dpp-draft,
.dpp-post {
  height: 48px;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.2s ease;
}

.dpp-draft:active,
.dpp-post:active {
  transform: scale(0.97);
}

.dpp-draft {
  flex: 0 0 calc(35% - 5px);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  font-weight: 600;
}

.dpp-post {
  flex: 1 1 auto;
  background: #ffffff;
  color: #000000;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.25);
}

.dpp-post:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Draft chip on the camera page (shown only when a draft exists) */
.cam-draft-chip {
  align-self: flex-start;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.cam-draft-chip[hidden],
#cameraPage.is-recording .cam-draft-chip {
  display: none;
}

@media (min-width: 760px) {
  #dropPostPage {
    left: 50%;
    width: 100%;
    max-width: 520px;
    transform: translateX(-50%);
  }
}



/* =========================================================
   DROPPED_V97_FRONT_FLASH
   Artificial selfie flash: full-white burst for photos, warm glow frame while recording.
   ========================================================= */

.cam-front-flash {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  background: #fff8ee;
  transition: opacity 0.12s ease-out;
}

.cam-front-flash.burst {
  opacity: 1;
  transition: opacity 0.05s ease-in;
}

.cam-front-flash.ring {
  opacity: 1;
  background: transparent;
  box-shadow: inset 0 0 0 26px #fff8ee, inset 0 0 90px 50px rgba(255, 248, 238, 0.85);
}

/* While the white burst is up, hide the overlays so the whole screen lights the face. */
#cameraPage:has(.cam-front-flash.burst) .cam-top,
#cameraPage:has(.cam-front-flash.burst) .cam-bottom {
  visibility: hidden;
}



/* =========================================================
   DROPPED_V99_SEARCH_OVERLAY
   Full-screen search launched from the header search bar.
   ========================================================= */

#searchBox,
#searchBox #searchInput {
  cursor: pointer;
  pointer-events: auto;
}

#searchOverlayPage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background: #09090b;
  z-index: 5500;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  color: #ffffff;
  will-change: opacity, transform;
}

#searchOverlayPage.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

#searchOverlayPage .search-overlay-field {
  transform: scale(0.96);
  transform-origin: left center;
  transition: transform 0.2s ease;
}

#searchOverlayPage.active .search-overlay-field {
  transform: scale(1);
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

#searchOverlayPage #cancelSearchBtn,
#searchOverlayPage #searchSuggestionsContainer {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

#searchOverlayPage.active #cancelSearchBtn,
#searchOverlayPage.active #searchSuggestionsContainer {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease 0.08s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
}

@media (prefers-reduced-motion: reduce) {
  #searchOverlayPage,
  #searchOverlayPage.active,
  #searchOverlayPage .search-overlay-field,
  #searchOverlayPage #cancelSearchBtn,
  #searchOverlayPage #searchSuggestionsContainer {
    transition-duration: 0.01s !important;
    transition-delay: 0s !important;
    transform: none !important;
  }
}

body.search-open {
  overflow: hidden;
}

.search-overlay-header {
  padding: calc(env(safe-area-inset-top, 16px) + 8px) 16px 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #09090b;
  flex-shrink: 0;
}

.search-overlay-field {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  background: #121215;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0 14px;
  height: 44px;
  margin: 0;
}

.search-overlay-icon {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.4);
}

#globalSearchInput {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  color: #ffffff;
  font-size: 15px;
  padding: 0 0 0 8px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

#globalSearchInput::-webkit-search-cancel-button,
#globalSearchInput::-webkit-search-decoration {
  -webkit-appearance: none;
}

#globalSearchInput::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.search-overlay-clear {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  color: #09090b;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.search-overlay-clear.hidden {
  display: none;
}

#cancelSearchBtn {
  flex-shrink: 0;
  background: none;
  border: none;
  box-shadow: none;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  padding: 6px 4px;
  min-height: 0;
  cursor: pointer;
}

#searchSuggestionsContainer {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}

.search-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 10px;
}

.search-section-head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}

.search-clear-all {
  background: none;
  border: none;
  box-shadow: none;
  padding: 4px 0;
  min-height: 0;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.search-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 14px;
  scrollbar-width: none;
}

.search-chip-row::-webkit-scrollbar {
  display: none;
}

.search-chip {
  flex-shrink: 0;
  min-height: 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #121215;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
}

.search-chip:active,
.search-row:active,
.search-row-main:active {
  background: rgba(255, 255, 255, 0.06);
}

.search-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 4px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}

.search-row-keyword {
  padding: 0;
  gap: 0;
  cursor: default;
}

.search-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 4px;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}

.search-row-avatar,
.search-row-badge,
.search-row-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #121215 center / cover no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  font-weight: 700;
  font-size: 16px;
}

.search-row-icon {
  color: rgba(255, 255, 255, 0.5);
}

.search-row-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-row-copy strong {
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-row-copy b {
  font-weight: 800;
}

.search-row-copy span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-row-tapahead {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.5);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.search-empty {
  padding: 48px 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 15px;
}

body.light #searchOverlayPage,
body.light .search-overlay-header {
  background: var(--bg, #f7f7f9);
  color: var(--ink, #111);
}

body.light .search-overlay-header,
body.light .search-row {
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .search-overlay-field,
body.light .search-chip,
body.light .search-row-avatar,
body.light .search-row-badge,
body.light .search-row-icon {
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
}

body.light #globalSearchInput,
body.light #cancelSearchBtn,
body.light .search-clear-all,
body.light .search-chip,
body.light .search-row,
body.light .search-row-copy strong {
  color: var(--ink, #111);
}

body.light #globalSearchInput::placeholder,
body.light .search-overlay-icon,
body.light .search-row-copy span,
body.light .search-section-head h4,
body.light .search-row-tapahead,
body.light .search-empty {
  color: rgba(0, 0, 0, 0.5);
}

body.light .search-overlay-clear {
  background: rgba(0, 0, 0, 0.2);
  color: #ffffff;
}

body.light .search-chip:active,
body.light .search-row:active,
body.light .search-row-main:active {
  background: rgba(0, 0, 0, 0.05);
}


/* =========================================================
   DROPPED_V101_CREATOR_PROFILE
   Minimal creator profile: centered identity, stat strip,
   sticky icon tabs, edge-to-edge 3-column media grid.
   ========================================================= */

html body #profilePage.cp {
  --cp-bg: #09090b;
  --cp-surface: #121215;
  --cp-ink: #ffffff;
  --cp-muted: rgba(255, 255, 255, 0.7);
  --cp-faint: rgba(255, 255, 255, 0.45);
  --cp-line: rgba(255, 255, 255, 0.08);
  --cp-btn-bg: rgba(255, 255, 255, 0.1);
  --cp-btn-line: rgba(255, 255, 255, 0.12);
  --cp-ring: rgba(255, 255, 255, 0.15);
  --cp-icon-idle: rgba(255, 255, 255, 0.4);
}

html body.light #profilePage.cp {
  --cp-bg: var(--bg, #f6f7f9);
  --cp-surface: #e9eaee;
  --cp-ink: #101116;
  --cp-muted: rgba(16, 17, 22, 0.72);
  --cp-faint: rgba(16, 17, 22, 0.5);
  --cp-line: rgba(0, 0, 0, 0.08);
  --cp-btn-bg: rgba(0, 0, 0, 0.05);
  --cp-btn-line: rgba(0, 0, 0, 0.1);
  --cp-ring: rgba(0, 0, 0, 0.12);
  --cp-icon-idle: rgba(16, 17, 22, 0.4);
}

body.profile-mode #mainTopbar {
  display: none !important;
}

html body #profilePage.cp.active {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--cp-bg) !important;
  color: var(--cp-ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

html body #profilePage.cp .cp-header {
  background: var(--cp-bg) !important;
  padding: calc(env(safe-area-inset-top, 16px) + 12px) 16px calc(16px + env(safe-area-inset-top, 0px)) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0 !important;
  box-shadow: none !important;
}

#profilePage.cp .cp-topbar {
  width: 100%;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  margin-bottom: 18px;
}

#profilePage.cp .cp-handle {
  margin: 0 !important;
  text-align: center;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  color: var(--cp-ink) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #profilePage.cp .cp-icon-btn {
  width: 40px !important;
  height: 40px !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: none !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  color: var(--cp-ink) !important;
  opacity: 0.8;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

html body #profilePage.cp .cp-icon-btn.hidden {
  visibility: hidden !important;
  display: grid !important;
}

html body #profilePage.cp .cp-icon-btn:active {
  opacity: 0.5;
}

#profilePage.cp .cp-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

html body #profilePage.cp .cp-avatar {
  width: 84px !important;
  height: 84px !important;
  min-width: 84px !important;
  border-radius: 50% !important;
  border: 2px solid var(--cp-ring) !important;
  overflow: hidden !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--cp-ink) !important;
  background-color: var(--cp-surface) !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: none !important;
}

html body #profilePage.cp .cp-name {
  margin: 12px 0 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  color: var(--cp-ink) !important;
}

html body #profilePage.cp .cp-bio {
  margin: 6px auto 0 !important;
  max-width: 320px;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: var(--cp-muted) !important;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

#profilePage.cp .cp-bio.hidden,
#profilePage.cp .cp-username.hidden,
#profilePage.cp .cp-btn.hidden {
  display: none !important;
}

#profilePage.cp .cp-stats {
  width: 100%;
  max-width: 360px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 18px 0 16px;
}

html body #profilePage.cp .cp-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  min-height: 0 !important;
  padding: 4px 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--cp-ink) !important;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

html body #profilePage.cp button.cp-stat {
  cursor: pointer;
}

html body #profilePage.cp button.cp-stat:active {
  opacity: 0.6;
}

#profilePage.cp .cp-stat strong {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cp-ink);
}

#profilePage.cp .cp-stat span {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--cp-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#profilePage.cp .cp-actions {
  width: 100%;
  max-width: 420px;
  display: flex;
  gap: 8px;
}

html body #profilePage.cp .cp-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 0 !important;
  padding: 0 12px !important;
  background: var(--cp-btn-bg) !important;
  border: 1px solid var(--cp-btn-line) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: var(--cp-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: none !important;
  transition: opacity 0.12s ease, transform 0.12s ease !important;
  -webkit-tap-highlight-color: transparent;
}

html body #profilePage.cp .cp-btn.cp-btn-primary {
  background: var(--cp-ink) !important;
  border-color: var(--cp-ink) !important;
  color: var(--cp-bg) !important;
}

html body #profilePage.cp .cp-btn:active {
  opacity: 0.75;
  transform: scale(0.98) !important;
}

html body #profilePage.cp .cp-tabs {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0 !important;
  margin: calc(-1 * env(safe-area-inset-top, 0px)) 0 0 !important;
  padding: env(safe-area-inset-top, 0px) 0 0 !important;
  background: var(--cp-bg) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cp-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#profilePage.cp .cp-tabs::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: env(safe-area-inset-top, 0px);
  height: 1px;
  background: var(--cp-line);
  pointer-events: none;
}

@media (max-width: 760px) {
  body.profile-mode .shell {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

html body #profilePage.cp .cp-tabs button {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 46px !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--cp-icon-idle) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transform: none !important;
  -webkit-tap-highlight-color: transparent;
}

html body #profilePage.cp .cp-tabs button.hidden {
  display: none !important;
}

html body #profilePage.cp .cp-tabs button.active {
  color: var(--cp-ink) !important;
  background: none !important;
}

#profilePage.cp .cp-tabs button::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--cp-ink);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

#profilePage.cp .cp-tabs button.active::after {
  opacity: 1;
  transform: scaleX(1);
}

html body #profilePage.cp .cp-grid {
  display: none !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--cp-bg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body #profilePage.cp .cp-grid.active {
  display: grid !important;
}

html body #profilePage.cp .cp-grid.active.hidden {
  display: none !important;
}

html body #profilePage.cp .cp-grid.is-empty {
  grid-template-columns: 1fr;
}

html body #profilePage.cp .cp-tile {
  position: relative;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 5;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  background: var(--cp-surface) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transform: none;
  transition: transform 0.12s ease, opacity 0.12s ease !important;
  -webkit-tap-highlight-color: transparent;
}

html body #profilePage.cp .cp-tile:active {
  transform: scale(0.98);
  opacity: 0.9;
}

#profilePage.cp .cp-tile-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--cp-surface);
  pointer-events: none;
}

#profilePage.cp .cp-tile-text {
  position: absolute;
  inset: 0;
  padding: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  text-align: left;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--cp-ink);
  overflow-wrap: anywhere;
}

#profilePage.cp .cp-tile-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.35);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  pointer-events: none;
}

#profilePage.cp .cp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 56px 24px;
  text-align: center;
  background: var(--cp-bg);
  color: var(--cp-faint);
}

#profilePage.cp .cp-empty svg {
  margin-bottom: 6px;
  opacity: 0.7;
}

#profilePage.cp .cp-empty strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--cp-ink);
}

#profilePage.cp .cp-empty span {
  font-size: 13px;
  max-width: 260px;
  line-height: 1.4;
}

#dropViewerModal .drop-viewer-modal {
  width: min(560px, 100%);
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#dropViewerModal .drop-viewer-header h2 {
  margin: 0;
  font-size: 16px;
}

#dropViewerModal .drop-viewer-body {
  margin-top: 8px;
}

#dropViewerModal .drop-viewer-body .drop {
  margin: 0 !important;
}

@media (max-width: 760px) {
  #dropViewerModal.modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }

  #dropViewerModal .drop-viewer-modal {
    max-width: 100vw;
    width: 100%;
    border-radius: 22px 22px 0 0;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 24px);
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
}


/* =========================================================
   DROPPED_V102_PROFILE_TABS_AND_CATCHES
   ========================================================= */

html body #profilePage.cp .cp-tabs button {
  flex-direction: column !important;
  gap: 3px !important;
  height: 54px !important;
  font-size: 11px !important;
  letter-spacing: 0.01em !important;
}

html body #profilePage.cp .cp-tabs button svg {
  width: 21px;
  height: 21px;
}

html body #profilePage.cp .cp-tile.is-evaporated .cp-tile-media,
html body #profilePage.cp .cp-tile.is-evaporated .cp-tile-text {
  opacity: 0.45;
  filter: grayscale(0.7);
}

html body #profilePage.cp .cp-tile.is-evaporated::after {
  content: "Evaporated";
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

html body .drop:not(.flow-card) .drop-actions {
  gap: 4px !important;
}

html body .drop:not(.flow-card) .drop-actions .action,
html body #homeView .drop:not(.flow-card) .drop-actions .action,
html body #profilePage .drop:not(.flow-card) .drop-actions .action {
  padding-left: 4px !important;
  padding-right: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

html body .drop:not(.flow-card) .drop-actions .action,
html body #homeView .drop:not(.flow-card) .drop-actions .action,
html body #profilePage .drop:not(.flow-card) .drop-actions .action {
  flex: 1 1 auto !important;
}

@media (max-width: 430px) {
  html body .drop:not(.flow-card) .drop-actions .action,
  html body #homeView .drop:not(.flow-card) .drop-actions .action,
  html body #profilePage .drop:not(.flow-card) .drop-actions .action {
    font-size: 10.5px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}

html body .drop-caught-by {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, rgba(255, 255, 255, 0.55));
  cursor: pointer;
}

html body.flow-mode .flow-feed .drop-caught-by {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

html body .drop-evaporated-note {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  font-size: 13px;
  color: var(--text-muted, rgba(255, 255, 255, 0.55));
}

html body #dropViewerModal.modal-backdrop {
  z-index: 10050 !important;
}


/* =========================================================
   DROPPED_V105_COMPOSER_PREVIEW_AND_FULLSCREEN_VIEWER
   ========================================================= */

html body .drop .drop-image[data-action="viewDrop"] {
  cursor: zoom-in;
}

html body #dropViewerModal.modal-backdrop {
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  background: #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body #dropViewerModal .drop-viewer-modal {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
  padding: 0 0 calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
}

html body #dropViewerModal .drop-viewer-header {
  position: sticky !important;
  top: 0;
  z-index: 2;
  margin: 0 !important;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px 16px !important;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) !important;
  border: 0 !important;
}

html body #dropViewerModal .drop-viewer-header h2 {
  color: #fff !important;
}

html body #dropViewerModal #closeDropViewerBtn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border: 0 !important;
}

html body #dropViewerModal .drop-viewer-body {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
}

html body #dropViewerModal .drop-viewer-body .drop {
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 16px !important;
  color: #fff;
}

html body #dropViewerModal .drop-viewer-body .drop-image {
  width: calc(100% + 32px) !important;
  max-width: none !important;
  margin: 12px -16px !important;
  height: 68dvh !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background-color: #000 !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

html body #dropViewerModal .drop-viewer-body .drop-image::after {
  display: none !important;
}

html body #dropViewerModal .drop-viewer-body .drop-video {
  display: block;
  width: calc(100% + 32px) !important;
  max-width: none !important;
  margin: 12px -16px !important;
  height: auto !important;
  max-height: 72dvh !important;
  border-radius: 0 !important;
  background: #000 !important;
  object-fit: contain !important;
}

html body #dropViewerModal.is-drip .drop-viewer-body .drop-text {
  font-size: clamp(20px, 5.6vw, 28px) !important;
  line-height: 1.35 !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 24px 0 !important;
}


/* =========================================================
   DROPPED_V106_POLLS
   ========================================================= */

html body .poll-builder {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 2px;
}

html body .poll-builder.hidden {
  display: none !important;
}

html body .poll-builder-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

html body .poll-builder-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line-strong, var(--line));
  background: var(--card-soft);
  color: var(--ink);
  font-size: 15px;
}

html body .poll-builder-row {
  display: flex;
  gap: 8px;
}

html body .chip#pollChip.active {
  background: var(--ink);
  color: var(--bg);
}

html body .poll-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 4px;
}

html body .poll-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line-strong, var(--line));
  background: var(--card-soft);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}

html body .poll-option:active:not([disabled]) {
  transform: scale(0.99);
}

html body .poll-option[disabled] {
  cursor: default;
  opacity: 0.8;
}

html body .poll-option.is-mine {
  border-color: var(--ink);
}

html body .poll-option-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  transition: width 0.35s ease;
  pointer-events: none;
}

html body .poll-option.is-mine .poll-option-fill {
  background: color-mix(in srgb, var(--ink) 24%, transparent);
}

html body .poll-option-label,
html body .poll-option-count {
  position: relative;
  pointer-events: none;
}

html body .poll-option-count {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

html body .poll-total {
  margin: 2px 2px 0;
  color: var(--muted);
  font-size: 12px;
}

html body .poll-option .poll-option-label {
  color: var(--ink) !important;
  opacity: 1 !important;
}

html body .composer .chip#pollChip.active,
html body .chip#pollChip.active {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border-color: var(--ink) !important;
}


/* =========================================================
   DROPPED_V107_SAFETY_REPORTING_ACCOUNT
   ========================================================= */

html {
  -webkit-tap-highlight-color: transparent;
}

html body button,
html body [role="button"],
html body [role="tab"],
html body [data-action],
html body [data-view],
html body .rail-btn,
html body .chip,
html body .action,
html body .cp-tabs button,
html body nav button {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html body .modal-backdrop {
  padding-top: max(14px, env(safe-area-inset-top, 0px));
  padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
}

html body .drop-more-btn {
  flex-shrink: 0;
  min-width: 40px;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 1;
  cursor: pointer;
}

html body .drop-more-btn:active {
  background: var(--card-soft);
}

html body.flow-mode .flow-feed .drop-more-btn {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

html body #actionSheet.modal-backdrop {
  z-index: 10090 !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 !important;
  background: rgba(0, 0, 0, 0.55) !important;
}

html body #actionSheet .action-sheet {
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  border-radius: 22px 22px 0 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-bottom: 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
  animation: dropped-sheet-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropped-sheet-in {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

html body #actionSheet .sheet-title {
  margin: 2px 4px 4px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

html body #actionSheet .sheet-message {
  margin: 0 6px 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}

html body #actionSheet .sheet-option {
  width: 100%;
  min-height: 50px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card-soft);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

html body #actionSheet .sheet-option.is-danger {
  color: var(--danger);
}

html body #actionSheet .sheet-option.is-cancel {
  margin-top: 4px;
  background: transparent;
  color: var(--muted);
}

html body #termsModal.modal-backdrop,
html body #deleteAccountModal.modal-backdrop {
  z-index: 10080 !important;
}

html body #termsModal .terms-modal,
html body #deleteAccountModal .delete-account-modal {
  width: min(560px, 100%);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 28px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

html body #termsModal .terms-body h3 {
  margin: 18px 0 6px;
  font-size: 16px;
  color: var(--ink);
}

html body #termsModal .terms-body p,
html body #termsModal .terms-body li {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

html body #termsModal .terms-body ul {
  margin: 6px 0;
  padding-left: 20px;
}

html body .delete-account-warning {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

html body .delete-account-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

html body .delete-account-label.hidden {
  display: none;
}

html body .delete-account-label input {
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line-strong, var(--line));
  background: var(--card-soft);
  color: var(--ink);
  font-size: 16px;
  letter-spacing: 0.04em;
}

html body .delete-account-actions {
  display: flex;
  gap: 10px;
}

html body .delete-account-actions button {
  flex: 1;
  min-height: 46px;
}

html body .delete-account-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

html body .settings-card.danger-zone {
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}

html body .blocked-users-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

html body .blocked-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-weight: 600;
}

html body .auth-terms {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

html body .auth-terms .link-button {
  display: inline;
  width: auto;
  min-height: 0;
  height: auto;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  box-shadow: none;
}

html body .cp-blocked {
  margin: 16px 16px 0;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
  font-weight: 600;
}

html body .cp-blocked.hidden {
  display: none;
}

html body .cp-blocked .cp-btn {
  margin-top: 10px;
}

html body #profilePage.is-blocked .cp-stats,
html body #profilePage.is-blocked .cp-actions,
html body #profilePage.is-blocked .cp-bio,
html body #profilePage.is-blocked .cp-tabs,
html body #profilePage.is-blocked .profile-panel {
  display: none !important;
}


/* =========================================================
   DROPPED_V108_COMMENTS_SHEET
   ========================================================= */


.comments-head {
  flex: 0 0 auto;
  padding: 0 14px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.comments-grabber {
  display: block;
  width: 36px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  margin: 8px auto 4px auto;
}

.comments-title-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
}

.comments-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  color: #ffffff;
}

.comments-close {
  position: absolute;
  right: 0;
  top: 2px;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.comments-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 16px;
  scrollbar-width: none;
}

.comments-list::-webkit-scrollbar {
  display: none;
}

.comment-row {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  align-items: flex-start;
}

.comment-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  min-height: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #1c1c21 center / cover no-repeat;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 700;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.comment-avatar.small {
  flex-basis: 26px;
  width: 26px;
  height: 26px;
  font-size: 11px;
}

.comment-body {
  flex: 1;
  min-width: 0;
}

.comment-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}

.comment-head strong {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.comment-time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.comment-text {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.comment-meta {
  display: flex;
  gap: 14px;
  margin-top: 6px;
}

.comment-meta-btn {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}

.comment-like {
  flex: 0 0 auto;
  min-width: 28px;
  min-height: 0;
  padding: 2px 0 0;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  cursor: pointer;
}

.comment-like.active {
  color: #ffffff;
}

.comment-like.pop svg {
  animation: commentLikePop 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes commentLikePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.comment-replies {
  margin: -6px 0 6px 44px;
  padding-left: 12px;
  border-left: 2px solid rgba(255, 255, 255, 0.06);
}

.comment-replies .comment-row {
  gap: 10px;
  margin-bottom: 14px;
}

.comments-empty,
.notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 220px;
  padding: 40px 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.35);
}

.comments-empty svg,
.notif-empty svg {
  margin-bottom: 6px;
}

.comments-empty strong,
.notif-empty strong {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

.comments-empty span,
.notif-empty span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  max-width: 260px;
}


/* Reply banner + pinned input bar */
.comment-reply-banner {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 16px;
  background: #18181b;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}

.comment-reply-banner[hidden] {
  display: none;
}

.comment-reply-cancel {
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 11px;
  display: grid;
  place-items: center;
  cursor: pointer;
}


.comment-send-btn {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #000000;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.12s ease;
}

.comment-send-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* =========================================================
   DROPPED_V108_NOTIFICATIONS
   ========================================================= */

html body #notificationsModal.modal-backdrop {
  background: rgba(0, 0, 0, 0.7) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

html body #notificationsModal .notifications-modal {
  width: min(560px, calc(100vw - 20px)) !important;
  max-height: min(760px, calc(100dvh - 40px)) !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #09090b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
  color: #ffffff;
}

.notif-header {
  position: sticky;
  top: 0;
  z-index: 2;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
  background: rgba(9, 9, 11, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.notif-header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  color: #ffffff;
}

.notif-close {
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
}

.notif-mark-all {
  min-height: 0;
  padding: 6px 4px;
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}


html body #notificationsModal .notifications-list-modal {
  flex: 1 1 auto;
  min-height: 0;
  display: block !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 0 calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  gap: 0 !important;
  scrollbar-width: none;
}

.notif-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.notif-row:active {
  background: rgba(255, 255, 255, 0.04);
}

.notif-row.unread {
  background: rgba(255, 255, 255, 0.03);
}

.notif-unread-dot {
  position: absolute;
  left: 8px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 999px;
  background: #ffffff;
  display: none;
}

.notif-row.unread .notif-unread-dot {
  display: block;
}

.notif-avatar {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #1c1c21 center / cover no-repeat;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.notif-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid #09090b;
  display: grid;
  place-items: center;
  background: #ffffff;
  color: #09090b;
}

.notif-badge-echo { background: #3b82f6; color: #ffffff; }
.notif-badge-grab { background: #f59e0b; color: #09090b; }
.notif-badge-follow { background: #22c55e; color: #09090b; }
.notif-badge-drip { background: #a855f7; color: #ffffff; }

.notif-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.notif-line {
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.8);
  overflow-wrap: anywhere;
}

.notif-line strong {
  font-weight: 700;
  color: #ffffff;
}

.notif-action {
  font-weight: 400;
}

.notif-time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

.notif-excerpt {
  font-size: 13px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-thumb {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  background: #18181b;
  pointer-events: none;
}

.notif-follow-back {
  flex: 0 0 auto;
  height: 30px;
  min-height: 0;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #000000;
  font-size: 12px;
  font-weight: 600;
  padding: 0 12px;
  cursor: pointer;
}

@media (max-width: 720px) {
  html body #notificationsModal.modal-backdrop.open {
    padding: 0 !important;
    align-items: stretch !important;
  }

  html body #notificationsModal .notifications-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
}


/* =========================================================
   DROPPED_V108_SETTINGS_MENU
   ========================================================= */

html body #settingsModal.modal-backdrop {
  background: rgba(0, 0, 0, 0.7) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

html body #settingsModal .settings-modal {
  background: #121215 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  color: #ffffff;
}

html body #settingsModal .settings-header {
  display: grid !important;
  grid-template-columns: 40px 1fr 40px !important;
  background: #121215 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px !important;
}

html body #settingsModal .settings-header h2 {
  text-align: center;
  font-size: 17px !important;
  font-weight: 700 !important;
}

html body #settingsModal .settings-back-btn,
html body #settingsModal .settings-close-btn {
  width: 36px !important;
  height: 36px !important;
  min-height: 0 !important;
  flex: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  justify-self: center;
}

html body #settingsModal .settings-back-btn {
  visibility: hidden;
}

html body #settingsModal.settings-on-detail .settings-back-btn {
  visibility: visible;
}

html body #settingsModal .settings-tabs {
  display: none !important;
}

html body #settingsModal .settings-page {
  padding: 16px !important;
  gap: 0 !important;
}

html body #settingsModal .settings-group,
html body #settingsModal .settings-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  margin-bottom: 16px !important;
  box-shadow: none !important;
}

html body #settingsModal .settings-group {
  overflow: hidden;
}

html body #settingsModal .settings-card {
  padding: 16px !important;
}

html body #settingsModal .settings-card p {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.settings-row {
  width: 100%;
  height: 52px;
  min-height: 0;
  margin: 0;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.settings-row + .settings-row {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-row svg {
  flex: 0 0 20px;
  opacity: 0.7;
}

.settings-row > span:not(.settings-chevron) {
  flex: 1;
}

.settings-chevron {
  font-size: 20px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.3);
}

.settings-row:active {
  background: rgba(255, 255, 255, 0.04);
}

.settings-row-danger {
  color: #f87171;
}

@media (max-width: 720px) {
  html body #settingsModal .settings-modal {
    border: 0 !important;
    border-radius: 0 !important;
  }
}

/* =========================================================
   DROPPED_V108_UNIVERSAL_INPUTS_GESTURES
   Low-specificity defaults (:where) so purpose-built pills (camera, search,
   chat composer, comment bar, video caption) keep their own styling.
   ========================================================= */

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), textarea, select) {
  background: #121215;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #ffffff;
  padding: 12px 14px;
}

:where(input, textarea, select):focus {
  border-color: rgba(255, 255, 255, 0.35);
  outline: none;
}

/* Explicitly standardize form fields inside modals and settings. */
html body :is(#settingsModal, #createModal, #newDripModal, #deleteAccountModal, #authPage)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), textarea) {
  background: #121215 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
}

html body :is(#settingsModal, #createModal, #newDripModal, #deleteAccountModal, #authPage)
  :is(input, textarea):focus {
  border-color: rgba(255, 255, 255, 0.35) !important;
  outline: none !important;
}

html body.light :is(#settingsModal, #createModal, #newDripModal, #deleteAccountModal, #authPage)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), textarea) {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #09090b !important;
}

* {
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
}

html body button,
html body [role="button"],
html body a {
  -webkit-tap-highlight-color: transparent;
}

/* Uses the standalone `scale` property so it stacks with buttons' own transforms. */
html body button:not(:disabled):active,
html body [role="button"]:active {
  scale: 0.98;
}

/* Light theme counterpart of the universal field defaults (still zero specificity). */
:where(body.light) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), textarea, select) {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  color: #09090b;
}



/* =========================================================
   DROPPED_V109_KEYBOARD_LOCK
   Freeze the page under any open comments view so the mobile
   keyboard cannot push the feed upward.
   ========================================================= */

html body.comments-locked {
  position: fixed !important;
  left: 0;
  right: 0;
  width: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none;
}

html body.flow-comments-open #mobileHotbar,
html body.home-comments-open #mobileHotbar {
  display: none !important;
}

.comment-input-bar {
  flex: 0 0 auto;
}

/* Shared auto-growing comment field (textarea inside the pill) */
html body .comment-input-pill textarea,
html body .comment-input-pill textarea:focus {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 22px;
  max-height: 110px;
  min-height: 0;
  margin: 10px 0;
  padding: 0 !important;
  resize: none;
  overflow-y: auto;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff;
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
}

.comment-input-pill textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.comment-input-pill {
  border-radius: 22px;
}

.comment-like.is-static {
  min-width: 28px;
}

.comments-loading {
  display: grid;
  place-items: center;
  min-height: 160px;
}

.comments-loading span {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: #ffffff;
  animation: commentsSpin 0.8s linear infinite;
}

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

/* =========================================================
   DROPPED_V109_FLOW_COMMENTS — TikTok-style floating sheet
   ========================================================= */

.flow-comments-backdrop {
  position: fixed;
  inset: 0;
  z-index: 25400;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.25s;
}

.flow-comments-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s ease;
}

#flowCommentsSheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25401;
  max-height: calc(100dvh - env(safe-area-inset-top, 44px) - 20px);
  height: 70dvh;
  max-width: 640px;
  margin: 0 auto;
  background: rgba(18, 18, 21, 0.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #ffffff;
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.45);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.25s;
}

#flowCommentsSheet.active {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

#flowCommentsSheet .comments-head {
  flex-shrink: 0;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.flow-comment-bar {
  padding: 8px 12px calc(env(safe-area-inset-bottom, 12px) + 8px);
  background: linear-gradient(to top, rgba(18, 18, 21, 0.98) 60%, rgba(18, 18, 21, 0));
}

.flow-comment-bar .comment-reply-banner {
  margin: 0 4px 8px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.flow-comment-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 6px 6px 6px 4px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.flow-comment-row .comment-input-pill {
  background: transparent;
  border: 0;
  min-height: 34px;
}

.flow-comment-row .comment-send-btn {
  margin-bottom: 1px;
}


/* =========================================================
   DROPPED_V109_HOME_COMMENTS — Instagram-style push-in view
   ========================================================= */

#homeCommentsView {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 25500;
  max-width: 640px;
  margin: 0 auto;
  background: #09090b;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 20px);
  box-sizing: border-box;
  overflow: hidden;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.28s;
}

#homeCommentsView.active {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-comments-top {
  position: sticky;
  top: 0;
  z-index: 2;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  padding: 10px 10px 10px;
  background: #09090b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.home-comments-top h2 {
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  color: #ffffff;
}

.home-comments-back {
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.home-comments-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.home-comments-context {
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.home-comments-context:empty {
  display: none;
}

.home-comments-context .comment-row {
  margin-bottom: 0;
}

.home-comments-list {
  flex: none;
  overflow: visible;
  padding: 14px 16px 24px;
}

.home-comment-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #09090b;
  padding: 8px 12px calc(env(safe-area-inset-bottom, 12px) + 8px);
}

.home-comment-bar .comment-reply-banner {
  margin: 0 -12px 8px;
  border-top: 0;
}

.home-comment-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.home-comment-avatar {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin-bottom: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #1c1c21 center / cover no-repeat;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.home-comment-post {
  flex: 0 0 auto;
  min-height: 0;
  height: 42px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.home-comment-post:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (min-width: 760px) {
  #homeCommentsView {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* Light theme */
html body.light #homeCommentsView,
html body.light .home-comments-top,
html body.light .home-comment-bar {
  background: #ffffff;
  color: #09090b;
}

html body.light #flowCommentsSheet {
  background: rgba(255, 255, 255, 0.96);
  color: #09090b;
}

html body.light :is(#homeCommentsView, #flowCommentsSheet) :is(.comments-title, .home-comments-top h2, .comment-head strong, .home-comments-back, .home-comment-post, .comments-empty strong) {
  color: #09090b;
}

html body.light :is(#homeCommentsView, #flowCommentsSheet) .comment-text,
html body.light .comment-input-pill textarea {
  color: rgba(9, 9, 11, 0.9);
}

html body.light .comment-input-pill {
  background: #f4f4f5;
  border-color: rgba(0, 0, 0, 0.1);
}

html body.light .flow-comment-bar {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.98) 60%, rgba(255, 255, 255, 0));
}

html body.light .comment-send-btn {
  background: #09090b;
  color: #ffffff;
}

html body.light .comment-like.active {
  color: #09090b;
}

/* =========================================================
   DROPPED_V110_POLISH
   - Universal '✕' Close Button Alignment Fix
   - Full-Width Comment Input Bar Layout Fix
   - iOS Keyboard Screen-Push Elimination (Body Scroll Lock)
   ========================================================= */

/* 1. Universal '✕' Close Button Alignment */
.modal-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  outline: none;
  cursor: pointer;
  color: #ffffff;
  flex-shrink: 0;
}
.modal-close-btn svg {
  display: block;
  margin: auto;
}

/* Ensure SVG centering across modal and sheet close buttons */
.comments-close,
.notif-close,
.settings-close-btn,
.comment-reply-cancel {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.comments-close svg,
.notif-close svg,
.settings-close-btn svg,
.comment-reply-cancel svg {
  display: block !important;
  margin: auto !important;
}

/* 2. Full-Width Comment Input Bar Layout Fix */
.comment-input-bar, #commentInputContainer {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px calc(env(safe-area-inset-bottom, 12px) + 8px) 16px;
  background: #09090b;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.home-comment-row,
.flow-comment-row {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
}

.comment-input-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.home-comment-avatar.comment-input-avatar {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  margin-bottom: 0 !important;
}

.comment-input-pill {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
}

.comment-input-field {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  background: #18181b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 10px 16px;
  color: #ffffff;
  font-size: 16px;
  outline: none;
  box-sizing: border-box;
}

.comment-input-field::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.comment-post-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 4px;
  cursor: pointer;
}

.comment-post-btn:disabled {
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
}

/* Light mode support for v110 comment bar */
html body.light .comment-input-bar,
html body.light #commentInputContainer {
  background: #ffffff;
  border-top-color: rgba(0, 0, 0, 0.08);
}

html body.light .comment-input-field {
  background: #f4f4f5;
  border-color: rgba(0, 0, 0, 0.12);
  color: #09090b;
}

html body.light .comment-input-field::placeholder {
  color: rgba(9, 9, 11, 0.4);
}

html body.light .comment-post-btn {
  color: #09090b;
}

html body.light .comment-post-btn:disabled {
  color: rgba(9, 9, 11, 0.25);
}

/* 3. iOS Keyboard Screen-Push Elimination: Fixed-Scroll Isolation Architecture */
html.comments-open,
body.comments-open {
  height: 100% !important;
  overflow: hidden !important;
}

body.comments-open {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
}

body.modal-open {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
}

.comments-sheet {
  display: flex;
  flex-direction: column;
  max-height: 75dvh;
  width: 100%;
  background: #121215;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  box-sizing: border-box;
}

#flowCommentsSheet .comments-list {
  flex: 1 1 auto;
  min-height: 0 !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.home-comments-list {
  flex: none !important;
  overflow: visible !important;
}

.comment-input-bar {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  background: #09090b;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 16px;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 12px));
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  will-change: transform;
  transition: transform 0.15s ease-out;
}

.flow-comment-bar {
  background: #121215 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.home-comment-bar {
  background: #09090b !important;
}

/* Extension filler beneath the comment input bar so no feed or void is visible when lifted above keyboard */
.comment-input-bar::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -4px;
  right: -4px;
  height: 600px;
  background: #09090b;
  pointer-events: none;
  z-index: 999;
}

.flow-comment-bar::after {
  background: #121215 !important;
}

html body.light .comment-input-bar::after {
  background: #ffffff !important;
}

/* =========================================================
   DROPPED_V112: Modern Post-Capture Publication View ("Create a Drip / Drop")
   ========================================================= */

/* Ensure mobileHotbar is COMPLETELY suppressed when ANY create modal or drop post page is active */
html body.create-modal-open #mobileHotbar,
html body.create-open #mobileHotbar,
html body.drop-post-open #mobileHotbar,
html body.camera-page-open #mobileHotbar,
html body #mobileHotbar.hidden,
html body.is-authed #mobileHotbar.hidden,
html body.is-authed.create-modal-open #mobileHotbar,
html body.is-authed.create-open #mobileHotbar,
html body.is-authed.drop-post-open #mobileHotbar,
html body.is-authed.camera-page-open #mobileHotbar,
html body.is-authed:not(.is-loading).create-modal-open #mobileHotbar,
html body.is-authed:not(.is-loading).create-open #mobileHotbar,
html body.is-authed:not(.is-loading).drop-post-open #mobileHotbar,
html body.is-authed:not(.is-loading).camera-page-open #mobileHotbar,
html body.flow-mode.is-authed:not(.is-loading).create-modal-open #mobileHotbar,
html body.flow-mode.is-authed:not(.is-loading).create-open #mobileHotbar,
html body.light.is-authed:not(.is-loading).create-modal-open #mobileHotbar,
html body.light.is-authed:not(.is-loading).create-open #mobileHotbar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

#createModal.create-publish-view {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background: #09090b;
  color: #ffffff;
  z-index: 50000 !important;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
  overflow: hidden;
}

#createModal.create-publish-view.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.22s ease;
}

.publish-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #09090b;
}

.publish-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  flex: 1;
}

.publish-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  outline: none;
  cursor: pointer;
  color: #ffffff;
  flex-shrink: 0;
}

.publish-nav-btn:active {
  background: rgba(255, 255, 255, 0.15);
}

.publish-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Side-by-Side Hero Media & Caption Dock */
.publish-hero-dock {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  background: #121215;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}

.publish-media-thumb {
  width: 72px;
  height: 96px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: #18181b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.publish-media-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 11px;
  display: none;
}

.publish-record-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11px;
  display: none;
}

.publish-media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 600;
}

.publish-media-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.publish-caption-wrapper {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

.publish-caption-input {
  width: 100%;
  min-height: 80px;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  color: #ffffff !important;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  padding: 0 !important;
  resize: none;
  box-shadow: none !important;
}

.publish-caption-input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

/* Native Options List */
.publish-options-list {
  display: flex;
  flex-direction: column;
  background: #121215;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
}

.publish-option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
}

.publish-option-row:last-child {
  border-bottom: none;
}

.publish-option-left {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  font-weight: 500;
  font-size: 14px;
}

.publish-option-icon {
  color: rgba(255, 255, 255, 0.65);
  flex-shrink: 0;
}

.publish-option-right {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
}

.publish-option-chevron {
  color: rgba(255, 255, 255, 0.3);
}

/* Switch Toggle for Comments */
.publish-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.publish-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.publish-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.16);
  transition: 0.2s;
  border-radius: 24px;
}

.publish-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  transition: 0.2s;
  border-radius: 50%;
}

.publish-switch input:checked + .publish-slider {
  background-color: #3b82f6;
}

.publish-switch input:checked + .publish-slider:before {
  transform: translateX(20px);
}

/* Pinned Full-Width Action Button */
.publish-footer {
  flex-shrink: 0;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 12px) + 12px);
  background: #09090b;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.publish-submit-btn {
  width: 100%;
  height: 48px;
  border-radius: 999px;
  background: #ffffff !important;
  color: #000000 !important;
  border: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.publish-submit-btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.publish-submit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* =========================================================
   DROPPED_V113: Hotbar Sliding Indicator
   ========================================================= */

.bottom-nav {
  position: fixed !important;
}

.nav-slider-indicator {
  position: absolute;
  left: 0;
  bottom: 6px;
  height: 3px;
  width: 22px;
  background: #ffffff;
  border-radius: 9999px;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
  transform: translateX(0);
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease;
}

.nav-slider-indicator.ready {
  opacity: 1;
}

/* =========================================================
   DROPPED_V113: Post-Capture Composer Overhaul
   ========================================================= */

.publish-composer-card {
  display: flex !important;
  gap: 14px !important;
  padding: 16px !important;
  background: transparent !important;
  border: none !important;
  align-items: flex-start !important;
  box-shadow: none !important;
}

.publish-thumbnail-preview {
  width: 72px !important;
  height: 96px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: #18181b !important;
  position: relative !important;
  overflow: hidden !important;
}

.publish-caption-input {
  flex: 1 !important;
  min-height: 80px !important;
  max-height: 120px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  resize: none !important;
  padding: 4px 0 !important;
}

.publish-sheet-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 0 16px 120px 16px !important;
}

.publish-actions-dock {
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 16px) + 8px) 16px !important;
  background: linear-gradient(to top, #09090b 80%, rgba(9, 9, 11, 0)) !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
}

/* =========================================================
   DROPPED_V113: Comment Deletion Button
   ========================================================= */

.comment-delete-btn {
  background: transparent !important;
  border: none !important;
  padding: 2px 6px !important;
  color: #f87171 !important;
  opacity: 0.85;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 11px !important;
  font-weight: 600 !important;
  transition: opacity 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
  margin-left: 6px;
}

.comment-delete-btn:hover,
.comment-delete-btn:active {
  opacity: 1;
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.18) !important;
}

.comment-row {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* =========================================================
   DROPPED_V116: Instagram Reels Video Scaling & Bottom-Sheet Architecture
   ========================================================= */

.flow-card .flow-video-frame,
.flow-card .video-wrapper,
.flow-card video,
.flow-card .drop-media {
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.32s ease !important;
  will-change: transform;
}

.flow-card.comments-stage-active .flow-video-frame,
.flow-card.comments-stage-active .video-wrapper,
.flow-card.comments-stage-active video,
.flow-card.comments-stage-active .drop-media {
  transform: scale(0.82) translateY(-4%) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* =========================================================
   DROPPED_V117: Instagram Reels Comments Architecture & Keyboard Dock
   ========================================================= */

/* Video Scaling Stage in The Flow when comments open */
.flow-card.comments-stage-active .flow-video-frame,
.flow-card.comments-stage-active .video-wrapper,
.flow-card.comments-stage-active video,
.flow-card.comments-stage-active .drop-media {
  transform: scale(0.82) translateY(-4%) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* 1. Comments Sheet Architecture */
#flowCommentsSheet,
.ig-comments-sheet {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0;
  width: 100vw !important;
  height: 62dvh;
  max-height: 65dvh;
  background: #18191c !important;
  border-radius: 24px 24px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 26000 !important;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6) !important;
  overflow: hidden !important;
  transition: height 0.25s cubic-bezier(0.2, 0.9, 0.3, 1), transform 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
  will-change: height, transform;
}

#flowCommentsSheet:not(.active) {
  transform: translateY(105%) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#flowCommentsSheet.active {
  transform: translateY(0) !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.flow-comments-backdrop {
  z-index: 25400 !important;
}

#homeCommentsView {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100dvh;
  z-index: 26000 !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  background: #09090b !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  padding-top: env(safe-area-inset-top, 20px) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.28s !important;
}

#homeCommentsView:not(.active) {
  transform: translateX(105%) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#homeCommentsView.active {
  transform: translateX(0) !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Hide mobile hotbar whenever comments are open */
body.comments-open #mobileHotbar,
body.flow-comments-open #mobileHotbar,
body.home-comments-open #mobileHotbar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 2. Top Drag Handle */
.sheet-drag-handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  margin: 10px auto 6px auto;
  flex-shrink: 0;
}

/* 3. Comment Input Dock (Strict Vertical Column Layout) */
.comment-input-bar,
.flow-comment-bar,
.home-comment-bar,
#commentInputContainer {
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 6px 14px calc(env(safe-area-inset-bottom, 12px) + 6px) 14px !important;
  background: #18191c !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: relative !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
}

.home-comment-bar {
  background: #09090b !important;
}

/* Extension filler so no background gap shows between keyboard and comment dock */
.comment-input-bar::after {
  content: "" !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  height: 600px !important;
  background: inherit !important;
  pointer-events: none !important;
}

/* 4. Quick Emoji Row */
.comment-emoji-strip {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 4px 2px 4px !important;
  background: transparent !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.emoji-quick-btn {
  background: transparent !important;
  border: none !important;
  font-size: 22px !important;
  line-height: 1 !important;
  padding: 4px 6px !important;
  cursor: pointer !important;
  transition: transform 0.12s ease !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.emoji-quick-btn:active {
  transform: scale(1.3) !important;
}

/* 5. Reply Banner */
.comment-reply-banner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.comment-reply-banner[hidden] {
  display: none !important;
}

/* 6. Comment Textarea Input Row */
.flow-comment-row,
.home-comment-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.comment-input-avatar,
.flow-comment-avatar,
.home-comment-avatar {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
}

.comment-input-pill {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  background: #242529 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  box-sizing: border-box !important;
  cursor: text !important;
}

.comment-input-pill textarea,
.comment-input-pill input,
.comment-input-pill .comment-input-field {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 15px !important;
  line-height: 20px !important;
  padding: 2px 0 !important;
  margin: 0 !important;
  resize: none !important;
  box-sizing: border-box !important;
  display: block !important;
  min-height: 20px !important;
  max-height: 80px !important;
  cursor: text !important;
  -webkit-user-select: text !important;
  user-select: text !important;
  pointer-events: auto !important;
}

.comment-input-pill textarea::placeholder,
.comment-input-pill input::placeholder,
.comment-input-pill .comment-input-field::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

.comment-post-btn,
.comment-send-btn,
.home-comment-post {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 10px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease, transform 0.12s ease !important;
}

.comment-post-btn:disabled,
.comment-send-btn:disabled,
.home-comment-post:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.comment-post-btn:not(:disabled),
.comment-send-btn:not(:disabled),
.home-comment-post:not(:disabled) {
  opacity: 1 !important;
  background: #3b82f6 !important;
  color: #ffffff !important;
}

/* Light Theme Support */
html body.light #flowCommentsSheet,
html body.light .ig-comments-sheet {
  background: #f8fafc !important;
  color: #0f172a !important;
}

html body.light .comment-input-bar,
html body.light .flow-comment-bar,
html body.light .home-comment-bar,
html body.light #commentInputContainer {
  background: #ffffff !important;
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}

html body.light .comment-input-bar::after {
  background: #ffffff !important;
}

html body.light .comment-input-pill {
  background: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

html body.light .comment-input-pill textarea,
html body.light .comment-input-pill input,
html body.light .comment-input-pill .comment-input-field {
  color: #0f172a !important;
}

html body.light .comment-input-pill textarea::placeholder,
html body.light .comment-input-pill input::placeholder,
html body.light .comment-input-pill .comment-input-field::placeholder {
  color: rgba(15, 23, 42, 0.45) !important;
}

html body.light .comment-reply-banner {
  background: rgba(0, 0, 0, 0.05) !important;
  color: rgba(15, 23, 42, 0.75) !important;
}

/* DROPPED_V119: iOS Safari/PWA Viewport Bounding & Flush Input Layout */
.ig-comments-sheet, #flowCommentsSheet {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: hidden !important;
}

.comments-list, .comment-list-container {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.comment-input-bar {
  flex-shrink: 0 !important;
  position: relative !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  background: #18191c !important;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 12px)) !important;
}

body.comments-open {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
}


/* DROPPED_V120: Social-app style keyboard handling.
   JS writes the visual viewport rect into --vv-top / --vv-height / --kb-inset
   so the open comments surface always ends exactly at the top of the keyboard. */
html.comments-open,
html.comments-open body {
  background: #09090b !important;
  overscroll-behavior: none !important;
}

#flowCommentsSheet,
.ig-comments-sheet {
  top: auto !important;
  bottom: var(--kb-inset, 0px) !important;
  height: min(62dvh, calc(var(--vv-height, 100dvh) - 56px)) !important;
  max-height: none !important;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

#homeCommentsView {
  top: var(--vv-top, 0px) !important;
  bottom: auto !important;
  height: var(--vv-height, 100dvh) !important;
  max-height: none !important;
}

.comment-input-pill textarea,
.comment-input-pill input,
.comment-input-pill .comment-input-field {
  font-size: 16px !important;
}

html body.keyboard-open .comment-input-bar,
html body.keyboard-open #commentInputContainer {
  padding-bottom: 8px !important;
}

html body.light.comments-open,
html.comments-open body.light {
  background: #f8fafc !important;
}

/* DROPPED_V121: Fill the area under the comment bar (behind Safari's translucent
   address pill, form accessory bar and keyboard) with the comments surface color. */
html body.comments-open.keyboard-open::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--kb-inset, 0px) + 2px);
  background: #18191c;
  z-index: 25999;
  pointer-events: none;
}

html body.home-comments-open.keyboard-open::after {
  background: #09090b;
  z-index: 26001;
}

html body.light.comments-open.keyboard-open::after {
  background: #ffffff;
}

/* DROPPED_V122: TikTok-style typing. The Flow sheet keeps its normal height
   (video stays visible above it); only the input bar rides on the keyboard. */
#flowCommentsSheet,
.ig-comments-sheet {
  bottom: 0 !important;
  height: 62dvh !important;
}

html body.flow-comments-open.keyboard-open #flowCommentsSheet.active {
  transform: none !important;
  will-change: auto !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  contain: none !important;
}

html body.flow-comments-open.keyboard-open #flowCommentsSheet .comment-input-bar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--kb-inset, 0px) !important;
  z-index: 30 !important;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35) !important;
}

/* DROPPED_V123: While typing in The Flow the whole sheet sits on the keyboard,
   shortened so the top of the video stays visible and comments remain readable. */
html body.flow-comments-open.keyboard-open #flowCommentsSheet.active {
  bottom: var(--kb-inset, 0px) !important;
  height: max(220px, calc(var(--vv-height, 100dvh) - 120px)) !important;
}

html body.flow-comments-open.keyboard-open #flowCommentsSheet .comment-input-bar {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  box-shadow: none !important;
}

html body.flow-comments-open.keyboard-open #flowCommentsSheet .sheet-drag-handle {
  display: none !important;
}

/* DROPPED_V124: Pull-to-refresh indicator */
.pull-refresh {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) - 34px);
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #1f2026;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translate(-50%, 0);
  z-index: 2147483000;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease, color 0.15s ease;
}

.pull-refresh.dragging {
  transition: color 0.15s ease;
}

.pull-refresh.ready,
.pull-refresh.refreshing {
  color: #3b82f6;
}

.pull-refresh.refreshing svg {
  animation: dropped-pull-spin 0.8s linear infinite;
}

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

html body.light .pull-refresh {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
}

/* DROPPED_V125: Show more of the video above the Flow sheet while typing */
html body.flow-comments-open.keyboard-open #flowCommentsSheet.active {
  height: max(220px, calc(var(--vv-height, 100dvh) - 180px)) !important;
}

/* DROPPED_V126: Native app - comment surfaces glide with the iOS keyboard
   (keyboard height comes from keyboardWillShow; the web view is not resized). */
html.native-keyboard #flowCommentsSheet,
html.native-keyboard .ig-comments-sheet {
  transition:
    bottom 0.3s cubic-bezier(0.38, 0.7, 0.125, 1),
    height 0.3s cubic-bezier(0.38, 0.7, 0.125, 1),
    transform 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

html.native-keyboard #homeCommentsView {
  transition:
    height 0.3s cubic-bezier(0.38, 0.7, 0.125, 1),
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.28s !important;
}

html.native-keyboard #homeCommentsView.active {
  transition:
    height 0.3s cubic-bezier(0.38, 0.7, 0.125, 1),
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.native-keyboard .comment-input-bar,
html.native-keyboard #commentInputContainer {
  transition: padding-bottom 0.3s cubic-bezier(0.38, 0.7, 0.125, 1) !important;
}

html.native-keyboard body.flow-comments-open.keyboard-open #flowCommentsSheet .sheet-drag-handle {
  display: block !important;
}

html.native-keyboard body.comments-open::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--kb-inset, 0px);
  background: #18191c;
  z-index: 25999;
  pointer-events: none;
  transition: height 0.3s cubic-bezier(0.38, 0.7, 0.125, 1);
}

html.native-keyboard body.home-comments-open::after {
  background: #09090b;
  z-index: 26001;
}

html.native-keyboard body.light.comments-open::after {
  background: #ffffff;
}

/* =========================================================================
   DROPPED_V127: BUTTON DESIGN SYSTEM
   "Liquid silver" - glassy, tactile buttons with spring physics.
   `html:not(#_) body:not(#_)` lifts specificity above the legacy layers.
   ========================================================================= */
:root {
  --fx-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fx-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fx-silver: linear-gradient(180deg, #ffffff 0%, #eef0f6 52%, #d6dae6 100%);
  --fx-accent: linear-gradient(180deg, #6aa5ff 0%, #3a7bff 55%, #2a63e8 100%);
  --fx-accent-glow: 0 10px 26px -10px rgba(58, 123, 255, 0.75);
  --fx-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.035) 100%);
  --fx-glass-line: rgba(255, 255, 255, 0.12);
  --fx-danger: #ff6b6b;
  --fx-drop: #7cc4ff;
}

@keyframes fx-sheen { 0% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(230%) skewX(-18deg); } }
@keyframes fx-ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@keyframes fx-pop-in { 0% { transform: scale(0.6); opacity: 0.4; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fx-drop-pop { 0% { transform: scale(1); } 30% { transform: scale(1.38) translateY(-2px); } 60% { transform: scale(0.88); } 100% { transform: scale(1); } }
@keyframes fx-splash { 0% { transform: scale(0.3); opacity: 0.9; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes fx-rise { 0% { transform: translateY(14px) scale(0.98); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fx-armed { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.55), 0 10px 26px -10px rgba(255, 60, 60, 0.8); } 50% { box-shadow: 0 0 0 6px rgba(255, 77, 77, 0), 0 10px 26px -10px rgba(255, 60, 60, 0.8); } }
@keyframes fx-busy { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- Shared tactile behavior ---------- */
html:not(#_) body:not(#_) :is(
  button.primary, #loginBtn, #createAccountBtn, #dropBtn, .publish-submit-btn, .dpp-post, .cam-review-next,
  button.ghost:not(.modal-close-btn):not(.top-menu-btn), .cp-btn, .dpp-draft, .cam-review-retake,
  .danger-button, .notif-follow-back, .sheet-option, .theme-choice, .chip, .search-chip
) {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition:
    transform 0.5s var(--fx-spring),
    box-shadow 0.3s var(--fx-out),
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease,
    filter 0.2s ease !important;
}

html:not(#_) body:not(#_) :is(
  button.primary, #loginBtn, #createAccountBtn, #dropBtn, .publish-submit-btn, .dpp-post, .cam-review-next,
  button.ghost:not(.modal-close-btn):not(.top-menu-btn), .cp-btn, .dpp-draft, .cam-review-retake,
  .danger-button, .notif-follow-back, .theme-choice, .chip, .search-chip
):not(:disabled):active {
  transform: scale(0.955) !important;
  transition-duration: 0.12s !important;
}

html:not(#_) body:not(#_) :is(button, [role="button"]):focus-visible {
  outline: 2px solid #8fb4ff !important;
  outline-offset: 3px !important;
}

/* ---------- Ripple (spawned by setupButtonFx in app.js) ---------- */
.fx-host { isolation: isolate; }
.fx-ripple-layer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.fx-ripple {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, currentColor 0%, currentColor 35%, transparent 70%);
  opacity: 0.2;
  animation: fx-ripple 0.65s var(--fx-out) forwards;
}

/* ---------- 1. Primary: liquid silver ---------- */
html:not(#_) body:not(#_) :is(button.primary, #loginBtn, #createAccountBtn, #dropBtn, .publish-submit-btn, .dpp-post, .cam-review-next) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0 !important;
  background: var(--fx-silver) !important;
  color: #0a0b10 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -2px 0 rgba(15, 18, 40, 0.1),
    0 12px 30px -12px rgba(196, 204, 240, 0.6),
    0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

html:not(#_) body:not(#_) :is(button.primary, #loginBtn, #createAccountBtn, #dropBtn, .publish-submit-btn, .dpp-post, .cam-review-next)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
  z-index: -1;
}

html:not(#_) body:not(#_) :is(#loginBtn, #createAccountBtn, #dropBtn, .publish-submit-btn, .dpp-post):not(:disabled)::before {
  animation: fx-sheen 1.1s var(--fx-out) 1.2s 1 both;
}

html:not(#_) body:not(#_) :is(button.primary, #loginBtn, #createAccountBtn, #dropBtn, .publish-submit-btn, .dpp-post, .cam-review-next):not(:disabled):active {
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -1px 0 rgba(15, 18, 40, 0.1),
    0 6px 16px -10px rgba(196, 204, 240, 0.6),
    0 1px 3px rgba(0, 0, 0, 0.35) !important;
}

@media (hover: hover) {
  html:not(#_) body:not(#_) :is(button.primary, #loginBtn, #createAccountBtn, #dropBtn, .publish-submit-btn, .dpp-post, .cam-review-next):not(:disabled):hover::before {
    animation: fx-sheen 0.9s var(--fx-out) 1 both;
  }
}

/* Busy / disabled: muted with a moving shimmer (e.g. "Logging in...", "Posting...") */
html:not(#_) body:not(#_) :is(button.primary, #loginBtn, #createAccountBtn, #dropBtn, .publish-submit-btn, .dpp-post):disabled {
  opacity: 1 !important;
  color: rgba(10, 11, 16, 0.55) !important;
  background: linear-gradient(100deg, #c9cdd8 20%, #eef0f6 40%, #c9cdd8 60%) !important;
  background-size: 200% 100% !important;
  animation: fx-busy 1.4s linear infinite;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  cursor: progress !important;
}

/* Sizes for the main full-width CTAs */
html:not(#_) body:not(#_) #authPage .auth-card :is(#loginBtn, #createAccountBtn, #googleBtn, #showCreateBtn, #showLoginBtn) {
  min-height: 52px !important;
  border-radius: 16px !important;
  font-size: 16px !important;
}

html:not(#_) body:not(#_) .publish-submit-btn {
  min-height: 54px !important;
  border-radius: 18px !important;
  font-size: 16px !important;
}

/* ---------- 2. Accent: Follow / Follow Back ---------- */
html:not(#_) body:not(#_) :is(.cp-btn.cp-btn-primary, .notif-follow-back) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0 !important;
  background: var(--fx-accent) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.18), var(--fx-accent-glow) !important;
}

html:not(#_) body:not(#_) .notif-follow-back {
  min-height: 32px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

/* ---------- 3. Secondary: frosted glass ---------- */
html:not(#_) body:not(#_) :is(button.ghost:not(.modal-close-btn):not(.top-menu-btn), .cp-btn:not(.cp-btn-primary), .dpp-draft, .cam-review-retake) {
  position: relative;
  background: var(--fx-glass) !important;
  border: 1px solid var(--fx-glass-line) !important;
  color: #f4f5f9 !important;
  font-weight: 600 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.45) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

html:not(#_) body:not(#_) :is(button.ghost:not(.modal-close-btn):not(.top-menu-btn), .cp-btn:not(.cp-btn-primary), .dpp-draft, .cam-review-retake):not(:disabled):active {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

@media (hover: hover) {
  html:not(#_) body:not(#_) :is(button.ghost:not(.modal-close-btn):not(.top-menu-btn), .cp-btn:not(.cp-btn-primary)):not(:disabled):hover {
    background: rgba(255, 255, 255, 0.11) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
  }
}

/* Profile action buttons */
html:not(#_) body:not(#_) #profilePage.cp .cp-btn {
  height: 40px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  overflow: hidden;
}

/* Continue with Google: brand mark */
html:not(#_) body:not(#_) #googleBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
html:not(#_) body:not(#_) #googleBtn::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.4-.4-3.5z'/%3E%3Cpath fill='%23FF3D00' d='m6.3 14.7 6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-8l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.4-.4-3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* "Need an account?" - quieter text-style button */
html:not(#_) body:not(#_) #authPage :is(#showCreateBtn, #showLoginBtn) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: rgba(255, 255, 255, 0.72) !important;
  font-weight: 600 !important;
}

/* ---------- 4. Danger ---------- */
html:not(#_) body:not(#_) .danger-button {
  position: relative;
  background: rgba(255, 77, 77, 0.1) !important;
  border: 1px solid rgba(255, 107, 107, 0.3) !important;
  color: var(--fx-danger) !important;
  font-weight: 650 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html:not(#_) body:not(#_) .danger-button:not(:disabled):active {
  background: rgba(255, 77, 77, 0.2) !important;
}

html:not(#_) body:not(#_) .danger-button:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* Delete confirm becomes a solid, pulsing red once DELETE is typed */
html:not(#_) body:not(#_) #confirmDeleteAccountBtn:not(:disabled) {
  background: linear-gradient(180deg, #ff6262 0%, #e52b2b 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  animation: fx-pop-in 0.35s var(--fx-spring), fx-armed 1.8s ease-in-out 0.35s infinite;
}

/* ---------- 5. Round icon buttons ---------- */
html:not(#_) body:not(#_) :is(.modal-close-btn, .settings-back-btn, .home-comments-back, .chat-back-btn, .cp-icon-btn, .drop-more-btn, .top-menu-btn) {
  background: var(--fx-glass) !important;
  border: 1px solid var(--fx-glass-line) !important;
  color: #f4f5f9 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.45s var(--fx-spring), background-color 0.2s ease !important;
}

html:not(#_) body:not(#_) :is(.modal-close-btn, .settings-back-btn, .home-comments-back, .chat-back-btn, .cp-icon-btn, .drop-more-btn, .top-menu-btn) svg {
  transition: transform 0.4s var(--fx-spring);
}

html:not(#_) body:not(#_) :is(.modal-close-btn, .settings-back-btn, .home-comments-back, .chat-back-btn, .cp-icon-btn, .drop-more-btn, .top-menu-btn):active {
  transform: scale(0.86) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  transition-duration: 0.12s !important;
}

/* Close (X) spins a quarter turn, back arrows nudge back */
html:not(#_) body:not(#_) .modal-close-btn:not(#createModalBackBtn):active svg { transform: rotate(90deg); }
html:not(#_) body:not(#_) :is(#createModalBackBtn, .settings-back-btn, .home-comments-back, .chat-back-btn):active svg { transform: translateX(-3px); }

/* ---------- 6. Settings rows: iOS-style icon tiles ---------- */
html:not(#_) body:not(#_) #settingsModal .settings-row {
  position: relative;
  height: 56px !important;
  gap: 14px !important;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s ease !important;
}

html:not(#_) body:not(#_) #settingsModal .settings-row svg {
  box-sizing: content-box;
  flex: 0 0 18px !important;
  width: 18px;
  height: 18px;
  padding: 7px;
  border-radius: 10px;
  opacity: 1 !important;
  color: #ffffff;
  background: linear-gradient(180deg, #5b6170, #3c414e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.45s var(--fx-spring);
}

html:not(#_) body:not(#_) #settingsModal .settings-row[data-settings-tab="profile"] svg { background: linear-gradient(180deg, #5aa2ff, #2f6bff); }
html:not(#_) body:not(#_) #settingsModal .settings-row[data-settings-tab="account"] svg { background: linear-gradient(180deg, #a78bfa, #7c3aed); }
html:not(#_) body:not(#_) #settingsModal .settings-row[data-settings-tab="appearance"] svg { background: linear-gradient(180deg, #818cf8, #4f46e5); }
html:not(#_) body:not(#_) #settingsModal .settings-row[data-settings-tab="notifications"] svg { background: linear-gradient(180deg, #fb7185, #e11d48); }
html:not(#_) body:not(#_) #settingsModal .settings-row[data-settings-tab="privacy"] svg { background: linear-gradient(180deg, #34d399, #059669); }
html:not(#_) body:not(#_) #settingsModal .settings-row[data-settings-tab="danger"] svg { background: linear-gradient(180deg, #fbbf24, #d97706); }
html:not(#_) body:not(#_) #settingsModal .settings-row.settings-row-danger svg { background: linear-gradient(180deg, #ff7676, #dc2626); }

html:not(#_) body:not(#_) #settingsModal .settings-row .settings-chevron {
  font-size: 22px !important;
  color: rgba(255, 255, 255, 0.28) !important;
  transition: transform 0.4s var(--fx-spring), color 0.2s ease;
}

html:not(#_) body:not(#_) #settingsModal .settings-row:active {
  background: rgba(255, 255, 255, 0.06) !important;
}
html:not(#_) body:not(#_) #settingsModal .settings-row:active svg { transform: scale(0.88); }
html:not(#_) body:not(#_) #settingsModal .settings-row:active .settings-chevron { transform: translateX(4px); color: rgba(255, 255, 255, 0.6) !important; }

html:not(#_) body:not(#_) #settingsModal .settings-row-danger { color: var(--fx-danger) !important; }

/* Settings buttons sizing */
html:not(#_) body:not(#_) #settingsModal :is(button.ghost, button.primary, .danger-button) {
  min-height: 46px !important;
  border-radius: 14px !important;
}

/* ---------- 7. Action sheet ---------- */
html:not(#_) body:not(#_) #actionSheet .sheet-option {
  position: relative;
  min-height: 54px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: #f4f5f9 !important;
  font-weight: 600 !important;
}
html:not(#_) body:not(#_) #actionSheet .sheet-option:active {
  transform: scale(0.975) !important;
  background: rgba(255, 255, 255, 0.13) !important;
  transition-duration: 0.12s !important;
}
html:not(#_) body:not(#_) #actionSheet .sheet-option.is-danger { color: var(--fx-danger) !important; }
html:not(#_) body:not(#_) #actionSheet .sheet-option.is-cancel {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}
html:not(#_) body:not(#_) #actionSheet.open .sheet-option { animation: fx-rise 0.42s var(--fx-spring) both; }
html:not(#_) body:not(#_) #actionSheet.open .sheet-option:nth-child(2) { animation-delay: 0.03s; }
html:not(#_) body:not(#_) #actionSheet.open .sheet-option:nth-child(3) { animation-delay: 0.06s; }
html:not(#_) body:not(#_) #actionSheet.open .sheet-option:nth-child(4) { animation-delay: 0.09s; }
html:not(#_) body:not(#_) #actionSheet.open .sheet-option:nth-child(5) { animation-delay: 0.12s; }
html:not(#_) body:not(#_) #actionSheet.open .sheet-option:nth-child(n+6) { animation-delay: 0.15s; }

/* ---------- 8. Create screen option rows ---------- */
html:not(#_) body:not(#_) .publish-option-row {
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s ease !important;
}
html:not(#_) body:not(#_) .publish-option-row:active { background: rgba(255, 255, 255, 0.06) !important; }
html:not(#_) body:not(#_) .publish-option-row .publish-option-icon {
  box-sizing: content-box;
  padding: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  transition: transform 0.45s var(--fx-spring);
}
html:not(#_) body:not(#_) .publish-option-row:active .publish-option-icon { transform: scale(0.88); }

/* ---------- 9. Chips & segmented choices ---------- */
html:not(#_) body:not(#_) :is(.chip, .search-chip) {
  background: var(--fx-glass) !important;
  border: 1px solid var(--fx-glass-line) !important;
  color: #e9ebf1 !important;
  font-weight: 600 !important;
}
html:not(#_) body:not(#_) :is(.chip, .search-chip, .theme-choice).active,
html:not(#_) body:not(#_) .theme-choice[aria-checked="true"] {
  background: var(--fx-silver) !important;
  border-color: transparent !important;
  color: #0a0b10 !important;
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px -8px rgba(196, 204, 240, 0.6) !important;
  animation: fx-pop-in 0.35s var(--fx-spring);
}

/* ---------- 10. Drop actions (Home / Profile feed) ---------- */
html:not(#_) body:not(#_) .drop:not(.flow-card) .drop-actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 2px !important;
  padding-top: 6px !important;
}
html:not(#_) body:not(#_) .drop:not(.flow-card) .drop-actions .action {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: transform 0.45s var(--fx-spring), background-color 0.18s ease, color 0.18s ease !important;
}
html:not(#_) body:not(#_) .drop:not(.flow-card) .drop-actions .action-save { margin-left: auto !important; }
html:not(#_) body:not(#_) .drop:not(.flow-card) .drop-actions .action > span {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  color: inherit !important;
  font: inherit !important;
}
html:not(#_) body:not(#_) .drop:not(.flow-card) .drop-actions .action .action-count {
  font-variant-numeric: tabular-nums;
  font-weight: 650 !important;
}
html:not(#_) body:not(#_) .drop:not(.flow-card) .drop-actions .action .action-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
html:not(#_) body:not(#_) .drop:not(.flow-card) .drop-actions .action:active {
  transform: scale(0.88) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  transition-duration: 0.12s !important;
}
@media (hover: hover) {
  html:not(#_) body:not(#_) .drop:not(.flow-card) .drop-actions .action:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
  }
}

/* Icons (both feeds) */
html:not(#_) body:not(#_) .drop-actions .action .action-icon {
  position: relative;
  display: inline-grid !important;
  place-items: center;
}
html:not(#_) body:not(#_) .drop-actions .action .action-icon svg {
  display: block;
  transition: fill 0.2s ease, stroke 0.2s ease;
}
html:not(#_) body:not(#_) .drop-actions .action .action-icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  pointer-events: none;
}

/* Active states */
html:not(#_) body:not(#_) .drop .drop-actions .action.action-grab.grabbed { color: var(--fx-drop) !important; }
html:not(#_) body:not(#_) .drop .drop-actions .action.action-grab.grabbed .action-icon svg { fill: currentColor; }
html:not(#_) body:not(#_) .drop .drop-actions .action.action-save.grabbed { color: #ffffff !important; }
html:not(#_) body:not(#_) .drop .drop-actions .action.action-save.grabbed .action-icon svg { fill: currentColor; }
html:not(#_) body:not(#_) .drop .drop-actions .action.action-catch.grabbed { color: #4ade80 !important; }
html:not(#_) body:not(#_) .drop .drop-actions .action.action-catch.grabbed .action-icon svg { stroke-width: 2.4; }

/* Splash animation right after tapping Grab / Save / Catch */
html:not(#_) body:not(#_) .drop-actions .action.action-pop .action-icon { animation: fx-drop-pop 0.6s var(--fx-spring); }
html:not(#_) body:not(#_) .drop-actions .action.action-pop .action-icon::after { animation: fx-splash 0.6s var(--fx-out); }

/* ---------- 11. Flow action rail (TikTok style) ---------- */
html:not(#_) body:not(#_).flow-mode .flow-feed .drop-actions {
  border: 0 !important;
  padding: 0 !important;
  gap: 14px !important;
  width: 60px !important;
}
html:not(#_) body:not(#_).flow-mode .flow-feed .action {
  width: 60px !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
html:not(#_) body:not(#_).flow-mode .flow-feed .action .action-icon {
  width: 46px;
  height: 46px;
  border-radius: 0;
  background: transparent;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: #ffffff;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
  transition: transform 0.45s var(--fx-spring), color 0.2s ease;
}
html:not(#_) body:not(#_).flow-mode .flow-feed .action .action-icon::after {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, transparent 68%);
}
html:not(#_) body:not(#_).flow-mode .flow-feed .action .action-icon svg { width: 32px; height: 32px; }
html:not(#_) body:not(#_).flow-mode .flow-feed .action:active .action-icon { transform: scale(0.8); transition-duration: 0.12s; }
html:not(#_) body:not(#_).flow-mode .flow-feed .action :is(.action-count, .action-label) {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}
html:not(#_) body:not(#_).flow-mode .flow-feed .action:not(.action-share):not(.action-save) .action-label { display: none !important; }
html:not(#_) body:not(#_).flow-mode .flow-feed .drop .drop-actions .action.grabbed,
html:not(#_) body:not(#_).flow-mode .flow-feed .action:hover {
  background: transparent !important;
  color: #ffffff !important;
}
html:not(#_) body:not(#_).flow-mode .flow-feed .action-grab.grabbed .action-icon {
  color: #4da3ff;
  filter: drop-shadow(0 0 10px rgba(77, 163, 255, 0.75));
}
html:not(#_) body:not(#_).flow-mode .flow-feed .action-grab.grabbed .action-icon svg { fill: #4da3ff; stroke: #4da3ff; }
html:not(#_) body:not(#_).flow-mode .flow-feed .action-catch.grabbed .action-icon {
  color: #3ddc84;
  filter: drop-shadow(0 0 10px rgba(61, 220, 132, 0.7));
}
html:not(#_) body:not(#_).flow-mode .flow-feed .action-save.grabbed .action-icon {
  color: #ffd84d;
  filter: drop-shadow(0 0 10px rgba(255, 216, 77, 0.7));
}

/* ---------- 12. Comment send button ---------- */
html:not(#_) body:not(#_) :is(.comment-post-btn, .comment-send-btn, .home-comment-post):not(:disabled) {
  background: var(--fx-accent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--fx-accent-glow) !important;
  animation: fx-pop-in 0.38s var(--fx-spring);
}
html:not(#_) body:not(#_) :is(.comment-post-btn, .comment-send-btn, .home-comment-post) svg { transition: transform 0.35s var(--fx-spring); }
html:not(#_) body:not(#_) :is(.comment-post-btn, .comment-send-btn, .home-comment-post):not(:disabled):active { transform: scale(0.88) !important; }
html:not(#_) body:not(#_) :is(.comment-post-btn, .comment-send-btn, .home-comment-post):not(:disabled):active svg { transform: translateY(-3px); }

/* ---------- Light theme ---------- */
html:not(#_) body.light:not(#_) :is(button.primary, #loginBtn, #createAccountBtn, #dropBtn, .publish-submit-btn, .dpp-post) {
  background: linear-gradient(180deg, #2a2f3d 0%, #11141c 100%) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 28px -12px rgba(17, 20, 28, 0.55) !important;
}
html:not(#_) body.light:not(#_) :is(button.primary, #loginBtn, #createAccountBtn, #dropBtn, .publish-submit-btn, .dpp-post)::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
}
html:not(#_) body.light:not(#_) :is(button.ghost:not(.modal-close-btn):not(.top-menu-btn), .cp-btn:not(.cp-btn-primary), .dpp-draft, .modal-close-btn, .settings-back-btn, .home-comments-back, .chat-back-btn, .cp-icon-btn, .drop-more-btn, .top-menu-btn, .chip, .search-chip) {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.03)) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}
html:not(#_) body.light:not(#_) #authPage :is(#showCreateBtn, #showLoginBtn) { color: rgba(15, 23, 42, 0.7) !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
html:not(#_) body.light:not(#_) #actionSheet .sheet-option { background: rgba(15, 23, 42, 0.05) !important; border-color: rgba(15, 23, 42, 0.06) !important; color: #0f172a !important; }
html:not(#_) body.light:not(#_) #actionSheet .sheet-option.is-cancel { background: transparent !important; color: rgba(15, 23, 42, 0.65) !important; }
html:not(#_) body.light:not(#_) .drop:not(.flow-card) .drop-actions .action { color: rgba(15, 23, 42, 0.72) !important; }
html:not(#_) body.light:not(#_) .drop:not(.flow-card) .drop-actions .action-save.grabbed { color: #0f172a !important; }
html:not(#_) body.light:not(#_) .drop:not(.flow-card) .drop-actions .action-grab.grabbed { color: #2f7cf6 !important; }
html:not(#_) body.light:not(#_) #settingsModal .settings-row .settings-chevron { color: rgba(15, 23, 42, 0.3) !important; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not(#_) body:not(#_) *,
  html:not(#_) body:not(#_) *::before,
  html:not(#_) body:not(#_) *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .fx-ripple { display: none; }
}

/* ---------- 13. Close buttons: clean iOS-style ---------- */
html:not(#_) body:not(#_) .modal-close-btn {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: rgba(120, 120, 128, 0.26) !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: rgba(255, 255, 255, 0.95) !important;
  padding: 0 !important;
  -webkit-tap-highlight-color: transparent;
}
html:not(#_) body:not(#_) .modal-close-btn:is(.cam-round-btn, .camera-icon-btn) {
  width: 44px !important;
  height: 44px !important;
}
html:not(#_) body:not(#_) .modal-close-btn:not(.publish-nav-btn) svg {
  width: 13px !important;
  height: 13px !important;
  stroke-width: 2.6;
}
html:not(#_) body:not(#_) .modal-close-btn:is(.cam-round-btn, .camera-icon-btn, .dpp-icon-btn) svg {
  width: 18px !important;
  height: 18px !important;
}
html:not(#_) body:not(#_) .modal-close-btn.publish-nav-btn svg {
  width: 18px !important;
  height: 18px !important;
}
html:not(#_) body:not(#_) .modal-close-btn:active {
  transform: scale(0.8) !important;
  background: rgba(120, 120, 128, 0.44) !important;
}
html:not(#_) body.light:not(#_) .modal-close-btn {
  background: rgba(60, 60, 67, 0.14) !important;
  color: rgba(30, 30, 36, 0.9) !important;
}
html:not(#_) body.light:not(#_) .modal-close-btn:active { background: rgba(60, 60, 67, 0.24) !important; }

/* ---------- 14. New Drop composer: iOS-native redesign ---------- */
/* The sheet compresses into the visible viewport above the keyboard. */
html:not(#_) body:not(#_) #createModal.create-publish-view {
  background: #0b0e14;
  transition: top 0.28s cubic-bezier(0.32, 0.72, 0, 1), height 0.28s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease, visibility 0s linear 0.22s;
}
html:not(#_) body:not(#_) #createModal.create-publish-view.open {
  top: var(--vv-top, 0px) !important;
  bottom: auto !important;
  height: var(--vv-height, 100dvh) !important;
  transition: top 0.28s cubic-bezier(0.32, 0.72, 0, 1), height 0.28s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease;
}

/* Top app bar: frosted, hairline bottom edge */
html:not(#_) body:not(#_) .publish-header {
  background: rgba(11, 14, 20, 0.82);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px;
  gap: 10px;
}
html:not(#_) body:not(#_) .publish-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.55);
}
html:not(#_) body:not(#_) .publish-close-hidden { display: none !important; }
html:not(#_) body:not(#_) #createModal .publish-nav-btn {
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  width: 34px;
  height: 34px;
}
html:not(#_) body:not(#_) #createModal .publish-nav-btn:active { transform: scale(0.88) !important; }

/* Primary pill CTA in the top bar */
html:not(#_) body:not(#_) .publish-cta-pill {
  height: 32px;
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(180deg, #ffffff, #d6dae4);
  color: #0b0e14;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1px;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 14px -4px rgba(255, 255, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease, filter 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
html:not(#_) body:not(#_) .publish-cta-pill:active { transform: scale(0.9); transition-duration: 0.1s; }
html:not(#_) body:not(#_) .publish-cta-pill:disabled {
  opacity: 0.32;
  filter: saturate(0.4);
  box-shadow: none;
}

/* Media + caption card */
html:not(#_) body:not(#_) .publish-hero-dock {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 20px;
  padding: 14px;
  gap: 14px;
}
html:not(#_) body:not(#_) .publish-media-thumb {
  width: 76px;
  height: 102px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html:not(#_) body:not(#_) .publish-media-placeholder { color: rgba(255, 255, 255, 0.35); }
html:not(#_) body:not(#_) .publish-media-remove {
  width: 22px;
  height: 22px;
  background: rgba(10, 10, 14, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
html:not(#_) body:not(#_) .publish-caption-input {
  font-size: 16px !important;
  line-height: 1.45 !important;
  min-height: 96px !important;
  max-height: 160px !important;
}
html:not(#_) body:not(#_) .publish-caption-input::placeholder { color: rgba(255, 255, 255, 0.32); }

/* Composer utility bar */
html:not(#_) body:not(#_) .publish-utility-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -8px;
  padding: 0 2px;
}
html:not(#_) body:not(#_) .publish-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.05);
  color: #7fb4ff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
html:not(#_) body:not(#_) .publish-chip .publish-chip-label { color: rgba(255, 255, 255, 0.5); font-weight: 500; }
html:not(#_) body:not(#_) .publish-chip:active { transform: scale(0.92); background: rgba(255, 255, 255, 0.1); transition-duration: 0.1s; }
html:not(#_) body:not(#_) .publish-char-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.32);
  font-variant-numeric: tabular-nums;
}

/* iOS-style inset grouped settings */
html:not(#_) body:not(#_) .publish-options-list {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
}
html:not(#_) body:not(#_) .publish-option-row {
  padding: 13px 16px;
  min-height: 54px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
html:not(#_) body:not(#_) .publish-option-row:last-child { border-bottom: 0; }
html:not(#_) body:not(#_) .publish-option-row .publish-option-icon {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.78);
  box-sizing: border-box;
}
html:not(#_) body:not(#_) .publish-option-left { font-size: 15px; font-weight: 500; gap: 12px; }
html:not(#_) body:not(#_) .publish-option-value { font-size: 14px; color: rgba(255, 255, 255, 0.4); }
html:not(#_) body:not(#_) .publish-option-chevron { width: 14px; height: 14px; color: rgba(255, 255, 255, 0.25); }

/* Minimalist iOS switch */
html:not(#_) body:not(#_) .publish-switch { width: 50px; height: 30px; }
html:not(#_) body:not(#_) .publish-slider {
  background-color: rgba(120, 120, 128, 0.32);
  transition: background-color 0.25s ease;
}
html:not(#_) body:not(#_) .publish-slider:before {
  width: 26px;
  height: 26px;
  left: 2px;
  bottom: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1);
}
html:not(#_) body:not(#_) .publish-switch input:checked + .publish-slider { background-color: #30d158; }
html:not(#_) body:not(#_) .publish-switch input:checked + .publish-slider:before { transform: translateX(20px); }

/* Footer: frosted, sits on top of the keyboard when it is open */
html:not(#_) body:not(#_) .publish-footer {
  background: rgba(11, 14, 20, 0.82);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 16px calc(env(safe-area-inset-bottom, 10px) + 10px);
}
html:not(#_) body:not(#_) .publish-submit-btn.is-empty { opacity: 0.45; }

/* Light theme */
html:not(#_) body.light:not(#_) #createModal.create-publish-view { background: #f4f5f8; }
html:not(#_) body.light:not(#_) .publish-header,
html:not(#_) body.light:not(#_) .publish-footer {
  background: rgba(244, 245, 248, 0.85);
  border-color: rgba(15, 23, 42, 0.08);
}
html:not(#_) body.light:not(#_) .publish-title { color: rgba(15, 23, 42, 0.55); }
html:not(#_) body.light:not(#_) .publish-cta-pill {
  background: linear-gradient(180deg, #2a2f3d, #11141c);
  color: #ffffff;
  box-shadow: 0 4px 14px -4px rgba(17, 20, 28, 0.4);
}
html:not(#_) body.light:not(#_) .publish-hero-dock,
html:not(#_) body.light:not(#_) .publish-options-list {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
html:not(#_) body.light:not(#_) .publish-media-thumb { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.1); }
html:not(#_) body.light:not(#_) .publish-media-placeholder { color: rgba(15, 23, 42, 0.4); }
html:not(#_) body.light:not(#_) .publish-caption-input { color: #0f172a !important; }
html:not(#_) body.light:not(#_) .publish-caption-input::placeholder { color: rgba(15, 23, 42, 0.35); }
html:not(#_) body.light:not(#_) .publish-chip { background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.1); color: #2f7cf6; }
html:not(#_) body.light:not(#_) .publish-chip .publish-chip-label { color: rgba(15, 23, 42, 0.5); }
html:not(#_) body.light:not(#_) .publish-char-count { color: rgba(15, 23, 42, 0.4); }
html:not(#_) body:not(#_) .publish-sheet-body { padding-bottom: 20px !important; gap: 16px !important; }

/* ---------- 15. Mention suggestions + hotbar failsafe ---------- */
html:not(#_) body:not(#_) .publish-caption-wrapper { position: relative; }
html:not(#_) body:not(#_) .mention-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  background: rgba(22, 25, 34, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 40px -8px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
html:not(#_) body:not(#_) .mention-suggest.hidden { display: none; }
html:not(#_) body:not(#_) .mention-suggest .mention-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
}
html:not(#_) body:not(#_) .mention-suggest .mention-row:last-child { border-bottom: 0; }
html:not(#_) body:not(#_) .mention-suggest .mention-row:active { background: rgba(255, 255, 255, 0.07); }
html:not(#_) body:not(#_) .mention-suggest .mini-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  background-size: cover;
  background-position: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
html:not(#_) body:not(#_) .mention-names { display: flex; flex-direction: column; min-width: 0; }
html:not(#_) body:not(#_) .mention-names strong { font-size: 14px; font-weight: 600; }
html:not(#_) body:not(#_) .mention-names em { font-style: normal; font-size: 12px; color: rgba(255, 255, 255, 0.45); }
html:not(#_) body.light:not(#_) .mention-suggest {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 14px 40px -8px rgba(15, 23, 42, 0.25);
}
html:not(#_) body.light:not(#_) .mention-suggest .mention-row { color: #0f172a; border-bottom-color: rgba(15, 23, 42, 0.06); }
html:not(#_) body.light:not(#_) .mention-suggest .mention-row:active { background: rgba(15, 23, 42, 0.05); }
html:not(#_) body.light:not(#_) .mention-suggest .mini-avatar { background: rgba(15, 23, 42, 0.1); color: #0f172a; }
html:not(#_) body.light:not(#_) .mention-names em { color: rgba(15, 23, 42, 0.45); }

/* Hotbar failsafe: with no modal-ish state on body, the bar must be visible. */
html:not(#_) body:not(#_):not(.is-loading):not(.is-guest):not(.modal-open):not(.create-modal-open):not(.create-open):not(.drop-post-open):not(.camera-page-open):not(.camera-capture-open):not(.chat-active):not(.comments-open):not(.flow-comments-open):not(.home-comments-open):not(.search-open):not(.comments-locked) #mobileHotbar.is-visible {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
html:not(#_) body:not(#_) .publish-media-remove { display: none !important; }
html:not(#_) body:not(#_) .app-version { margin: 18px 0 0; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.4px; color: rgba(255, 255, 255, 0.25); }
html:not(#_) body.light:not(#_) .app-version { color: rgba(15, 23, 42, 0.35); }