:root {
  --brand: #608fb9;
  --brand-deep: #416f99;
  --ink: #182230;
  --muted: #64748b;
  --paper: #fbfcfd;
  --surface: #eef5f8;
  --line: #dce8ef;
  --clay: #c86f4a;
  --green: #2f7d5a;
  --gold: #e7b45f;
  --white: #ffffff;
  --danger: #b94343;
  --shadow: 0 24px 70px rgba(24, 34, 48, 0.12);
  --radius: 8px;
  --sidebar: 260px;
  --right: 320px;
  font-family:
    "Noto Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--paper);
  scrollbar-color: rgba(96, 143, 185, 0.8) rgba(238, 245, 248, 0.9);
  scrollbar-width: thin;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(96, 143, 185, 0.08), transparent 36%),
    linear-gradient(315deg, rgba(200, 111, 74, 0.08), transparent 32%),
    var(--paper);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: rgba(238, 245, 248, 0.88);
}

*::-webkit-scrollbar-thumb {
  border: 2px solid rgba(238, 245, 248, 0.88);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand), var(--brand-deep));
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--brand-deep), var(--green));
}

h1,
h2,
h3,
strong,
.btn,
.nav-link,
.bottom-nav__item,
.mode-tabs button {
  font-family: "Plus Jakarta Sans", "Noto Sans", ui-sans-serif, system-ui, sans-serif;
}

ion-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  --ionicon-stroke-width: 42px;
}

[hidden] {
  display: none !important;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.splash {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
  background: var(--paper);
  transition: opacity 320ms ease, visibility 320ms ease;
}

.splash.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.splash__logo {
  width: min(280px, 72vw);
  height: auto;
  object-fit: contain;
}

.splash h1,
.brand-lockup h1 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 4.3rem);
  line-height: 1;
  letter-spacing: 0;
}

.loader {
  width: 132px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.loader::after {
  display: block;
  width: 44px;
  height: 100%;
  content: "";
  animation: load 950ms ease-in-out infinite;
  border-radius: inherit;
  background: var(--brand);
}

@keyframes load {
  0% {
    transform: translateX(-46px);
  }
  100% {
    transform: translateX(136px);
  }
}

.eyebrow,
.section-kicker {
  margin: 0 0 8px;
  color: var(--brand-deep);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.onboarding {
  position: relative;
  display: none;
  min-height: 100svh;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 0.48fr);
  gap: clamp(22px, 4vw, 64px);
  align-items: center;
  overflow: hidden;
  padding: clamp(16px, 3.3vw, 52px);
}

.onboarding.is-active {
  display: grid;
}

.onboarding__panel,
.onboarding__side {
  position: relative;
  z-index: 1;
}

.onboarding__ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 18%, rgba(96, 143, 185, 0.22), transparent 28%),
    radial-gradient(circle at 14% 82%, rgba(231, 180, 95, 0.16), transparent 26%),
    linear-gradient(135deg, rgba(238, 245, 248, 0.8), rgba(251, 252, 253, 0.35));
}

.onboarding__ambient::after {
  position: absolute;
  inset: 18px;
  content: "";
  opacity: 0.38;
  background-image:
    linear-gradient(45deg, rgba(96, 143, 185, 0.11) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(47, 125, 90, 0.09) 25%, transparent 25%);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}

.onboarding__panel::before,
.right-panel::before {
  position: absolute;
  inset: -18px;
  z-index: -1;
  content: "";
  border-radius: 24px;
  background-image:
    linear-gradient(45deg, rgba(96, 143, 185, 0.12) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(47, 125, 90, 0.1) 25%, transparent 25%);
  background-size: 18px 18px;
  opacity: 0.5;
}

.brand-lockup {
  display: flex;
  gap: 18px;
  align-items: center;
}

.brand-lockup img,
.sidebar__brand img,
.mobile-brand img,
.mobile-topbar img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.onboarding__copy {
  max-width: 820px;
  margin: clamp(20px, 4vh, 42px) 0 clamp(16px, 3vh, 24px);
}

.onboarding__copy h2 {
  max-width: 850px;
  margin: 0;
  font-size: clamp(2.5rem, 5.1vw, 5.25rem);
  line-height: 0.96;
  letter-spacing: 0;
}

.onboarding__copy p:last-child {
  max-width: 620px;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.35vw, 1.08rem);
  line-height: 1.55;
}

.mode-grid {
  display: grid;
  max-width: 780px;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.mode-card,
.btn,
.icon-btn,
.control-btn,
.message-box button,
.preview-controls button,
.tool-list button,
.chat-row {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
}

.mode-card {
  display: grid;
  min-height: clamp(76px, 13vh, 108px);
  place-items: center;
  align-content: center;
  gap: 5px;
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(24, 34, 48, 0.06);
  font-weight: 800;
}

.mode-card small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.mode-card.is-selected,
.mode-card:hover {
  border-color: rgba(96, 143, 185, 0.65);
  background: #f3f8fb;
  color: var(--brand-deep);
}

.onboarding__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 760px;
  margin-top: 14px;
}

.onboarding__chips span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid rgba(96, 143, 185, 0.22);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.66);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 900;
}

.onboarding__actions,
.top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(16px, 3vh, 26px);
}

.onboarding__side {
  display: grid;
  align-content: center;
  gap: 14px;
  min-height: min(520px, calc(100svh - 72px));
}

.community-card {
  display: grid;
  gap: 9px;
  padding: 16px;
  border: 1px solid rgba(220, 232, 239, 0.86);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 50px rgba(24, 34, 48, 0.09);
  backdrop-filter: blur(18px);
}

.community-card--hero {
  min-height: 250px;
  align-content: space-between;
  background:
    linear-gradient(145deg, rgba(96, 143, 185, 0.2), rgba(47, 125, 90, 0.08)),
    rgba(255, 255, 255, 0.82);
}

.community-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.community-card__top img {
  width: 46px;
  height: 46px;
}

.community-card__top strong,
.community-card > strong {
  display: block;
  font-size: 1rem;
}

.community-card__top span,
.community-card > span,
.community-card p {
  color: var(--muted);
}

.community-card p {
  margin: 0;
  line-height: 1.5;
}

.avatar-stack {
  display: flex;
  align-items: center;
}

.avatar-stack span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  margin-right: -10px;
  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: var(--brand);
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 950;
}

.avatar-stack span:nth-child(2) {
  background: var(--green);
}

.avatar-stack span:nth-child(3) {
  background: var(--clay);
}

.avatar-stack span:nth-child(4) {
  background: var(--gold);
  color: var(--ink);
}

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

.side-grid .community-card {
  min-height: 132px;
  align-content: start;
}

.side-grid ion-icon {
  color: var(--brand-deep);
}

.side-logo {
  width: clamp(112px, 18vw, 210px);
  aspect-ratio: 1;
  object-fit: contain;
}

.onboarding__side h3 {
  max-width: 440px;
  margin: 0;
  font-size: clamp(1.35rem, 2.5vw, 2.55rem);
  line-height: 1.05;
}

.side-links {
  display: grid;
  gap: 10px;
}

.side-links a {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  font-weight: 900;
}

.btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 16px;
  border-radius: var(--radius);
  font-weight: 800;
}

.btn--primary {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--white);
}

.btn--soft {
  background: var(--surface);
}

.btn--ghost {
  background: transparent;
}

.phone {
  width: min(360px, 100%);
  margin: 0 auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.mobile-topbar,
.mobile-header,
.message-box,
.chat-row,
.switch-row {
  display: flex;
  align-items: center;
}

.mobile-topbar {
  justify-content: space-between;
  font-weight: 900;
}

.mobile-topbar img {
  width: 38px;
  height: 38px;
}

.match-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 12px;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(47, 125, 90, 0.14);
}

.chat-feed {
  display: flex;
  min-height: 390px;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  padding: 12px;
}

.chat-feed--preview {
  min-height: 300px;
  border-radius: 18px;
  background: var(--surface);
}

.bubble {
  max-width: min(72%, 520px);
  padding: 12px 14px;
  border-radius: 18px;
  color: var(--ink);
  line-height: 1.45;
}

.bubble--them {
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  background: var(--white);
}

.bubble--me {
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  background: #dfeef7;
}

.preview-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.preview-controls button,
.icon-btn,
.message-box button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: var(--radius);
}

.preview-controls button {
  width: 100%;
}

.app-shell {
  display: none;
  height: 100vh;
  overflow: hidden;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
}

.app-shell.is-active {
  display: grid;
}

.sidebar,
.right-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px;
}

.sidebar {
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(18px);
}

.sidebar__brand {
  display: block;
  margin-bottom: 32px;
}

.sidebar__brand img {
  width: min(196px, 100%);
  height: auto;
  object-position: left center;
}

.nav-list,
.mobile-drawer,
.tool-list {
  display: grid;
  gap: 8px;
}

.nav-link {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-radius: var(--radius);
  color: var(--muted);
  font-weight: 800;
}

.nav-link.is-active,
.nav-link:hover {
  background: var(--surface);
  color: var(--brand-deep);
}

.region-card,
.panel-card,
.settings-panel,
.chat-panel,
.session-panel,
.list-panel,
.profile-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 45px rgba(24, 34, 48, 0.07);
}

.region-card {
  position: absolute;
  right: 22px;
  bottom: 22px;
  left: 22px;
  padding: 14px;
}

.region-card div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.region-card p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.mobile-header,
.mobile-drawer,
.bottom-nav {
  display: none;
}

.content {
  min-width: 0;
  height: 100vh;
  overflow: auto;
  padding: 0 28px 28px;
}

body[data-route="meet"] .content {
  overflow: hidden;
}

.page {
  display: none;
}

.page.is-active {
  display: block;
}

.page-heading {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 -28px 22px;
  padding: 28px 28px 18px;
  background:
    linear-gradient(135deg, rgba(96, 143, 185, 0.08), rgba(251, 252, 253, 0.94) 34%),
    linear-gradient(315deg, rgba(200, 111, 74, 0.08), rgba(251, 252, 253, 0.94) 32%),
    rgba(251, 252, 253, 0.94);
  backdrop-filter: blur(14px);
}

.page-heading h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.8rem);
  line-height: 1.05;
}

.meet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
  gap: 18px;
}

.page-meet-simple {
  height: calc(100vh - 28px);
  overflow: hidden;
}

.page.page-meet-simple.is-active {
  display: flex;
  flex-direction: column;
}

.page-meet-simple .page-heading,
.page-meet-simple .meet-header {
  align-items: center;
  margin-bottom: 12px;
}

.page-meet-simple .top-actions .btn--soft {
  display: none;
}

.page-meet-simple .meet-grid {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 12px;
}

.mode-tabs {
  display: inline-grid;
  grid-template-columns: repeat(3, 42px);
  gap: 8px;
}

.mode-tabs button {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.68);
  color: var(--ink);
  font-weight: 900;
}

.mode-tabs button.is-active {
  border-color: rgba(96, 143, 185, 0.58);
  background: #e8f2f8;
  color: var(--brand-deep);
}

.mode-tabs button:disabled {
  color: var(--muted);
}

.mode-tabs button[data-coming-soon] {
  cursor: pointer;
}

.mode-tabs button:disabled::after {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 8px;
  height: 8px;
  content: "";
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--gold);
}

.page-meet-simple .chat-panel {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.page-meet-simple .chat-feed {
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 12px 0 8px;
}

.page-meet-simple .message-box {
  flex: 0 0 auto;
  margin-top: auto;
}

.chat-panel,
.session-panel,
.settings-panel,
.list-panel,
.profile-panel {
  padding: 16px;
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(231, 180, 95, 0.4);
  border-radius: var(--radius);
  background: rgba(231, 180, 95, 0.12);
  color: #755527;
  font-weight: 700;
}

.message-box {
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.message-box input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: var(--ink);
}

.video-card {
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
  gap: 14px;
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(96, 143, 185, 0.18), rgba(47, 125, 90, 0.1)),
    var(--surface);
  text-align: center;
}

.avatar-orb,
.avatar-lg,
.avatar-sm {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--white);
  font-weight: 950;
}

.avatar-orb {
  width: 88px;
  height: 88px;
  font-size: 2rem;
}

.avatar-lg {
  width: 70px;
  height: 70px;
  flex: 0 0 auto;
}

.avatar-sm {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}

.avatar-sm--green {
  background: var(--green);
}

.avatar-sm--gold {
  background: var(--gold);
  color: var(--ink);
}

.video-card span,
.chat-row small,
.profile-panel p {
  display: block;
  color: var(--muted);
}

.session-controls {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.control-btn {
  display: grid;
  min-height: 72px;
  place-items: center;
  gap: 6px;
  border-radius: var(--radius);
  font-weight: 800;
}

.control-btn--end {
  border-color: rgba(185, 67, 67, 0.35);
  color: var(--danger);
}

.mini-card {
  margin-top: 14px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.chip.is-active {
  border-color: rgba(96, 143, 185, 0.5);
  background: #e8f2f8;
  color: var(--brand-deep);
}

.right-panel {
  border-left: 1px solid var(--line);
  background: rgba(238, 245, 248, 0.45);
}

.panel-card + .panel-card {
  margin-top: 14px;
}

.panel-card {
  padding: 16px;
}

.panel-card h3,
.settings-panel h3 {
  margin: 0 0 12px;
  font-size: 1rem;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.segmented button {
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}

.segmented button.is-active {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(24, 34, 48, 0.08);
}

.switch-row {
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  color: var(--muted);
  font-weight: 800;
}

.switch-row input {
  width: 42px;
  height: 24px;
  accent-color: var(--brand);
}

.view-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, 42px);
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.76);
}

.view-toggle button {
  display: grid;
  width: 42px;
  height: 38px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
}

.view-toggle button.is-active {
  background: var(--surface);
  color: var(--brand-deep);
  box-shadow: 0 8px 24px rgba(24, 34, 48, 0.08);
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.settings-panel--wide {
  grid-column: 1 / -1;
}

.settings-hint {
  max-width: 720px;
  margin: -4px 0 14px;
  color: var(--muted);
  line-height: 1.5;
}

.tag-input {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.tag-input input {
  min-width: 0;
  flex: 1;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  outline: 0;
}

.tag-input input:focus {
  border-color: rgba(96, 143, 185, 0.7);
  box-shadow: 0 0 0 3px rgba(96, 143, 185, 0.14);
}

.select-field {
  display: grid;
  gap: 8px;
}

.select-field span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.select-field select {
  min-height: 46px;
  padding: 0 42px 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(45deg, transparent 50%, var(--brand-deep) 50%),
    linear-gradient(135deg, var(--brand-deep) 50%, transparent 50%),
    var(--white);
  background-position:
    calc(100% - 20px) 19px,
    calc(100% - 14px) 19px,
    0 0;
  background-size:
    6px 6px,
    6px 6px,
    100% 100%;
  background-repeat: no-repeat;
  color: var(--ink);
  font-weight: 800;
  outline: 0;
  appearance: none;
}

.select-field select:focus {
  border-color: rgba(96, 143, 185, 0.7);
  box-shadow: 0 0 0 3px rgba(96, 143, 185, 0.14);
}

.memes-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.upload-panel,
.meme-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 45px rgba(24, 34, 48, 0.07);
}

.upload-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
}

.upload-drop {
  display: grid;
  min-height: 220px;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 18px;
  border: 1px dashed rgba(96, 143, 185, 0.65);
  border-radius: var(--radius);
  background: #f3f8fb;
  text-align: center;
}

.upload-drop ion-icon {
  width: 34px;
  height: 34px;
  color: var(--brand-deep);
}

.upload-drop span,
.meme-card__body p {
  color: var(--muted);
}

.upload-panel textarea {
  min-height: 96px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  color: var(--ink);
  outline: 0;
}

.fab {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 16;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: var(--white);
  box-shadow: 0 18px 44px rgba(65, 111, 153, 0.3);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  place-items: end center;
}

.modal.is-open {
  display: grid;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 34, 48, 0.38);
}

.modal__panel {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(620px, calc(100vw - 28px));
  gap: 12px;
  margin: 14px;
  padding: 18px;
  border-radius: 16px 16px 8px 8px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.modal__panel h2 {
  margin: 0;
}

.modal__panel--small {
  max-width: 420px;
  place-items: start;
}

.modal__panel--small p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.modal__panel textarea {
  min-height: 96px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Toast container — centered horizontally inside the viewport. Using
   left:0/right:0 + a grid centerline means the `is-open` rule can safely
   tweak just the panel's transform without breaking centering. */
.toast {
  position: fixed;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 0 12px;
  box-sizing: border-box;
}

.toast__panel {
  display: flex;
  width: min(430px, 100%);
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(96, 143, 185, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 48px rgba(24, 34, 48, 0.16);
  backdrop-filter: blur(18px);
}

.toast__icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand-deep);
}

.toast h2,
.toast p {
  margin: 0;
}

.toast h2 {
  font-size: 0.95rem;
}

.toast p {
  color: var(--muted);
  font-size: 0.82rem;
}

.notification-list {
  gap: 12px;
}

.notification-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.82);
}

.notification-row ion-icon {
  color: var(--brand-deep);
}

.notification-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

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

.component-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 220px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 45px rgba(24, 34, 48, 0.07);
}

.component-card p,
.component-card small {
  margin: 0;
  color: var(--muted);
}

.component-card__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--brand-deep);
}

/* Responder-only browseable list — replaces .finding-state on Kutana
   for users with is_responder=True. */
.responder-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius);
  background: rgba(96, 143, 185, 0.06);
  border: 1px solid rgba(96, 143, 185, 0.18);
  min-height: 220px;
}
.responder-list__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 6px 10px;
  border-bottom: 1px solid rgba(96, 143, 185, 0.18);
}
.responder-list__head b { font-size: 1rem; color: var(--brand-deep); }
.responder-list__hint {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 2px;
}
.responder-list__refresh {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.responder-list__rows { display: flex; flex-direction: column; gap: 8px; }
.responder-list__empty {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 22px 12px;
  color: var(--muted);
  text-align: center;
}
.responder-list__empty b { color: var(--ink); font-size: 0.95rem; }
.responder-list__empty small { font-size: 0.82rem; }
.responder-list__auto {
  align-self: center;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.responder-row {
  display: grid;
  grid-template-columns: 38px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.responder-row:hover {
  background: rgba(96, 143, 185, 0.05);
  border-color: rgba(96, 143, 185, 0.35);
}
.responder-row:active { transform: scale(0.99); }
.responder-row[disabled] { opacity: 0.55; cursor: progress; }
.responder-row.is-compatible { border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.04); }
.responder-row__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(96, 143, 185, 0.18);
  color: var(--brand-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
}
.responder-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.responder-row__main strong { font-size: 0.94rem; }
.responder-row__tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.responder-row__tag {
  font-size: 0.7rem;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(96, 143, 185, 0.12);
  color: var(--brand-deep);
  font-weight: 600;
}
.responder-row__badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.16);
  color: #157a3d;
  font-weight: 800;
}
.responder-row__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--brand-deep);
}
.responder-row__cta ion-icon { font-size: 14px; }
@media (max-width: 540px) {
  .responder-row { grid-template-columns: 38px 1fr auto; }
  .responder-row__badge { grid-column: 2 / 4; justify-self: start; }
}

.finding-state {
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 28px 18px;
  border-radius: var(--radius);
  background: transparent;
  text-align: center;
  color: var(--brand-deep, #2d5a86);
}
.finding-state b { font-size: 1.05rem; color: var(--ink, #15202b); font-weight: 700; }
.finding-state small { color: var(--muted, #6c7787); font-size: 0.88rem; }

/* Lightweight 3-dot loader. Animates ONLY opacity on three fixed-size
   spans (no SVG, no stroke-dasharray, no transforms) so the browser can
   composite each dot on the GPU and avoid repaints — even on low-end
   Android. Honors prefers-reduced-motion by going static. */
.kj-dots {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
}
.kj-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand, #608fb9);
  opacity: 0.25;
  will-change: opacity;
  animation: kj-dots-fade 1.2s ease-in-out infinite;
}
.kj-dots span:nth-child(2) { animation-delay: 0.18s; }
.kj-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes kj-dots-fade {
  0%, 80%, 100% { opacity: 0.25; }
  40%           { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .kj-dots span { animation: none; opacity: 0.65; }
}

/* Backward-compat: anywhere the old .finding-rings markup is still used
   (e.g. agent waiter empty state, partner-left footer), keep it visible
   as plain rings — the new SVG only appears in #findingState. */
.finding-rings {
  position: relative;
  width: 56px;
  height: 56px;
}
.finding-rings span {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(96, 143, 185, 0.55);
  border-radius: 50%;
  animation: pulse-ring 1.7s ease-out infinite;
}
.finding-rings span:nth-child(2) { animation-delay: 0.28s; }
.finding-rings span:nth-child(3) { animation-delay: 0.56s; }

/* Preferences FAB shown only during the finding-state on Kutana. The
   full chat input bar is hidden in that state — the user just sees the
   animation + this small FAB to tweak their preference tags. */
.kj-prefs-fab {
  position: fixed;
  right: 18px;
  bottom: calc(94px + env(safe-area-inset-bottom));
  z-index: 30;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand-deep, #2d5a86);
  box-shadow: 0 10px 24px rgba(15,32,43,0.15);
  display: none;  /* shown by .is-searching rule below */
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.kj-prefs-fab ion-icon { font-size: 22px; }
.kj-prefs-fab:hover { background: var(--surface, #fafbfd); }

/* During searching: hide the full message-box, show the FAB. */
#page-meet.is-searching .message-box { display: none !important; }
body[data-route="meet"] #page-meet.is-searching ~ * .kj-prefs-fab,
body[data-route="meet"] .page.is-active#page-meet.is-searching .kj-prefs-fab,
body[data-route="meet"] #page-meet.is-searching .kj-prefs-fab { display: inline-flex; }
/* Desktop: pull the FAB up a touch since there's no bottom-nav. */
@media (min-width: 981px) {
  .kj-prefs-fab { bottom: 24px; }
}

@keyframes pulse-ring {
  0% {
    opacity: 0.9;
    transform: scale(0.35);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

.component-chat-preview {
  display: grid;
  gap: 8px;
}

/* Round 15 — meme feed redesigned for social-media post cards.
   Single-column feed (X / Instagram style), bigger image, cleaner
   header with avatar + relative time, caption beneath the actions,
   and a "view N comments" toggle. */
.meme-feed {
  display: grid;
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
  gap: 22px;
  padding-bottom: 32px;
}
@media (min-width: 1280px) {
  .meme-feed { grid-template-columns: minmax(0, 620px); }
}

.meme-card {
  background: #fff;
  border: 1px solid var(--line, #e6ebf1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,32,43,0.04);
  display: flex;
  flex-direction: column;
}

.meme-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}
.meme-card__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--brand-soft, #e8f1f8);
  color: var(--brand-deep, #2d5a86);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.95rem;
  flex: 0 0 38px;
}
.meme-card__author {
  display: flex; flex-direction: column; min-width: 0; flex: 1;
}
.meme-card__author strong {
  font-size: 0.92rem; color: var(--ink, #15202b); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.meme-card__author small {
  font-size: 0.78rem; color: var(--muted, #6c7787); margin-top: 1px;
}
.meme-card__menu {
  background: transparent; border: 0; padding: 6px;
  color: var(--muted, #6c7787); cursor: pointer; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.meme-card__menu:hover { background: var(--surface, #fafbfd); color: var(--ink); }
.meme-card__menu svg { width: 18px; height: 18px; }

/* Legacy text-poster variants ONLY (modifier classes). The default
   .meme-card__media rule is defined later (Round 15) and adapts to
   the actual content. */
.meme-card__media--blue,
.meme-card__media--green {
  display: grid;
  min-height: 260px;
  place-items: center;
  padding: 22px;
  color: var(--white);
  font-size: clamp(1.3rem, 2.5vw, 2.2rem);
  font-weight: 950;
  line-height: 1.08;
  text-align: center;
}

.meme-card__media--blue {
  background:
    linear-gradient(145deg, rgba(24, 34, 48, 0.14), transparent),
    var(--brand);
}

.meme-card__media--green {
  background:
    linear-gradient(145deg, rgba(24, 34, 48, 0.16), transparent),
    var(--green);
}

.meme-card__body {
  padding: 14px;
}

.meme-card__body p {
  margin: 5px 0 12px;
}

.meme-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.meme-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.meme-view-toggle {
  display: none;
}

.meme-actions button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--muted);
  font-weight: 900;
}

.list-panel {
  display: grid;
  gap: 10px;
}

.chats-list--grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.chat-row {
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border-radius: var(--radius);
  text-align: left;
}

.chats-list--grid .chat-row {
  position: relative;
  display: grid;
  min-height: 180px;
  align-content: space-between;
  justify-items: start;
}

.chats-list--grid .chat-row .avatar-sm {
  width: 58px;
  height: 58px;
}

.chats-list--grid .chat-row span:nth-child(2) {
  display: grid;
  gap: 4px;
}

.chats-list--grid .chat-row > ion-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  transform: rotate(-45deg);
  color: var(--brand-deep);
}

.chat-row span:nth-child(2) {
  flex: 1;
}

.tool-list button {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-radius: var(--radius);
  font-weight: 800;
  text-align: left;
}

.profile-panel {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-panel > div {
  min-width: 0;
  flex: 1;
}

.profile-edit {
  margin-left: auto;
}

.profile-panel h3,
.profile-panel p {
  margin: 0;
}

.profile-panel p {
  margin-top: 4px;
}

@media (max-width: 1380px) {
}

@media (max-width: 1180px) {

  .onboarding {
    grid-template-columns: 1fr;
  }

  .onboarding {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.46fr);
  }

  .onboarding__side {
    min-height: auto;
  }
}

@media (max-width: 980px) {
  .app-shell.is-active {
    display: block;
  }

  .sidebar {
    display: none;
  }

  .mobile-header {
    position: sticky;
    top: 0;
    z-index: 15;
    display: flex;
    justify-content: space-between;
    height: 66px;
    padding: 0 14px;
    border-bottom: 1px solid var(--line);
    background: rgba(251, 252, 253, 0.92);
    backdrop-filter: blur(18px);
  }

  .mobile-header .icon-btn {
    width: 42px;
    height: 42px;
  }

  .mobile-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 950;
  }

  .mobile-brand img {
    width: 136px;
    height: auto;
    max-height: 44px;
  }

  .mobile-drawer {
    position: fixed;
    top: 72px;
    right: 12px;
    left: 12px;
    z-index: 20;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow);
  }

  .mobile-drawer.is-open {
    display: grid;
  }

  .bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 18;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    min-height: 72px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(251, 252, 253, 0.94);
    box-shadow: 0 -18px 45px rgba(24, 34, 48, 0.08);
    backdrop-filter: blur(18px);
  }

  .bottom-nav__item {
    display: grid;
    min-width: 0;
    place-items: center;
    gap: 3px;
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
  }

  .bottom-nav__item ion-icon {
    width: 21px;
    height: 21px;
  }

  .bottom-nav__item.is-active {
    background: var(--surface);
    color: var(--brand-deep);
  }

  .content {
    height: calc(100svh - 66px);
    overflow: auto;
    padding: 72px 14px calc(92px + env(safe-area-inset-bottom));
  }

  .page-meet-simple {
    height: calc(100svh - 158px);
  }

  .page-meet-simple .meet-grid {
    min-height: 0;
  }

  .page-meet-simple .chat-feed {
    max-height: none;
  }

  .page-heading,
  .page-meet-simple .meet-header {
    top: 66px;
    align-items: flex-start;
    margin: 0 -14px 18px;
    padding: 14px 14px 12px;
  }

  .page-heading {
    flex-direction: column;
  }

  .page-meet-simple .meet-header {
    flex-direction: row;
  }

  .view-toggle {
    align-self: flex-end;
    margin-top: -52px;
  }

  .top-actions {
    width: 100%;
    margin-top: 0;
  }

  .top-actions .btn {
    flex: 1;
  }

  .meet-grid,
  .settings-grid,
  .memes-layout,
  .meme-feed,
  .chats-list--grid {
    grid-template-columns: 1fr;
  }

  .settings-panel--wide {
    grid-column: auto;
  }

  .session-panel {
    order: 0;
  }

  .chat-panel,
  .session-panel,
  .settings-panel,
  .list-panel,
  .profile-panel,
  .upload-panel,
  .meme-card {
    box-shadow: 0 8px 28px rgba(24, 34, 48, 0.055);
  }

  .upload-drop {
    min-height: 168px;
  }

  /* Only enforce a min-height for text-poster variants on mobile;
     real images should always show at their natural aspect ratio. */
  .meme-card__media--blue,
  .meme-card__media--green {
    min-height: 210px;
  }

  .video-card {
    min-height: 180px;
  }

  .session-controls {
    grid-template-columns: repeat(4, 1fr);
  }

  .control-btn {
    min-height: 62px;
    padding: 0 4px;
    font-size: 0.78rem;
  }

  .chat-feed {
    min-height: 300px;
    padding: 8px 0;
  }

  .message-box {
    position: sticky;
    bottom: calc(84px + env(safe-area-inset-bottom));
    z-index: 6;
    box-shadow: 0 14px 34px rgba(24, 34, 48, 0.1);
  }

  .page-meet-simple .message-box {
    position: fixed;
    right: 14px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    left: 14px;
    z-index: 17;
    box-shadow: 0 12px 30px rgba(24, 34, 48, 0.08);
  }

  .components-grid {
    grid-template-columns: 1fr;
  }

  .page-meet-simple .chat-feed {
    padding-bottom: 76px;
  }

  .fab {
    display: grid;
    bottom: calc(92px + env(safe-area-inset-bottom));
  }

  #page-memes .page-heading .btn {
    display: none;
  }

  .bubble {
    max-width: 86%;
  }

  .onboarding {
    min-height: 100svh;
    align-content: center;
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .onboarding__copy {
    margin: 18px 0 16px;
  }

  .onboarding__copy h2 {
    font-size: clamp(2.05rem, 10.5vw, 3.8rem);
    line-height: 1;
  }

  .onboarding__copy p:last-child {
    font-size: 0.96rem;
    line-height: 1.45;
  }

  .mode-grid {
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mode-card {
    min-height: 78px;
    gap: 6px;
    font-size: 0.9rem;
  }

  .brand-lockup {
    gap: 12px;
  }

  .brand-lockup img {
    width: 44px;
    height: 44px;
  }

  .brand-lockup h1 {
    font-size: 2.2rem;
  }

  .onboarding__actions {
    margin-top: 18px;
  }
}

@media (max-height: 620px) and (min-width: 981px) {
  .onboarding {
    padding-block: 18px;
  }

  .brand-lockup img {
    width: 46px;
    height: 46px;
  }

  .brand-lockup h1 {
    font-size: clamp(2rem, 4.2vw, 3.9rem);
  }

  .onboarding__copy {
    margin: 18px 0 16px;
  }

  .onboarding__copy h2 {
    max-width: 680px;
    font-size: clamp(2.1rem, 5vw, 4.2rem);
  }

  .onboarding__copy p:last-child {
    max-width: 560px;
    margin: 14px 0 0;
    line-height: 1.45;
  }

  .mode-card {
    min-height: 72px;
  }

  .onboarding__side {
    min-height: auto;
    padding: 22px;
  }

  .community-card {
    padding: 12px;
  }

  .community-card--hero {
    min-height: 180px;
  }

  .avatar-stack span {
    width: 46px;
    height: 46px;
  }

  .side-grid .community-card {
    min-height: 104px;
  }
}

@media (min-width: 981px) and (max-height: 650px) {
  .onboarding {
    padding-block: 12px;
  }

  .brand-lockup img {
    width: 42px;
    height: 42px;
  }

  .brand-lockup h1 {
    font-size: 2.5rem;
  }

  .onboarding__copy {
    margin: 12px 0 10px;
  }

  .onboarding__copy h2 {
    max-width: 680px;
    font-size: clamp(2.1rem, 4.2vw, 3.25rem);
    line-height: 0.98;
  }

  .onboarding__copy p:last-child {
    max-width: 560px;
    margin: 8px 0 0;
    font-size: 0.9rem;
    line-height: 1.35;
  }

  .onboarding__chips {
    display: none;
  }

  .mode-card {
    min-height: 62px;
  }

  .mode-card small {
    font-size: 0.7rem;
  }

  .onboarding__actions {
    margin-top: 10px;
  }

  .community-card--hero {
    min-height: 170px;
  }

  .side-grid,
  .side-links {
    display: none;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  .onboarding {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.48fr);
    gap: 18px;
  }

  .onboarding__side {
    display: grid;
  }

  .onboarding__copy h2 {
    font-size: clamp(2.2rem, 6vw, 3.7rem);
  }

  .community-card {
    padding: 12px;
  }

  .community-card--hero {
    min-height: 190px;
  }

  .side-grid {
    grid-template-columns: 1fr;
  }

  .side-grid .community-card {
    min-height: auto;
  }

  .side-links {
    display: none;
  }
}

@media (min-width: 761px) and (max-width: 980px) and (max-height: 650px) {
  .onboarding {
    align-content: center;
    padding-block: 12px;
  }

  .brand-lockup img {
    width: 40px;
    height: 40px;
  }

  .brand-lockup h1 {
    font-size: 2.3rem;
  }

  .onboarding__copy {
    margin: 10px 0 10px;
  }

  .onboarding__copy h2 {
    font-size: clamp(2rem, 5vw, 2.8rem);
    line-height: 0.98;
  }

  .onboarding__copy p:last-child {
    margin: 8px 0 0;
    font-size: 0.88rem;
    line-height: 1.35;
  }

  .onboarding__chips {
    display: none;
  }

  .mode-card {
    min-height: 64px;
  }

  .onboarding__actions {
    margin-top: 10px;
  }

  .community-card--hero {
    min-height: 154px;
  }

  .community-card p,
  .community-card > span {
    font-size: 0.84rem;
    line-height: 1.35;
  }

  .avatar-stack span {
    width: 40px;
    height: 40px;
    font-size: 0.95rem;
  }

  .side-grid {
    display: none;
  }
}

@media (max-width: 760px) {
  .onboarding__side {
    display: none;
  }
}

@media (max-height: 720px) and (max-width: 980px) {
  .eyebrow,
  .section-kicker {
    margin-bottom: 5px;
    font-size: 0.66rem;
  }

  .brand-lockup img {
    width: 38px;
    height: 38px;
  }

  .brand-lockup h1 {
    font-size: 1.9rem;
  }

  .onboarding__copy {
    margin: 14px 0 12px;
  }

  .onboarding__copy h2 {
    font-size: clamp(1.9rem, 9.4vw, 3.1rem);
  }

  .onboarding__copy p:last-child {
    margin: 10px 0 0;
    font-size: 0.88rem;
    line-height: 1.35;
  }

  .mode-card {
    min-height: 64px;
  }

  .onboarding__actions {
    margin-top: 12px;
  }

  .btn {
    min-height: 40px;
  }
}

@media (max-width: 480px) {
  .btn {
    width: 100%;
  }

  .onboarding__actions {
    display: grid;
  }

  .tag-input {
    align-items: stretch;
    flex-direction: column;
  }

  .session-controls {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* === Meet header === */
.meet-header {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 -28px 12px;
  padding: 28px 28px 18px;
  background:
    linear-gradient(135deg, rgba(96, 143, 185, 0.08), rgba(251, 252, 253, 0.96) 34%),
    linear-gradient(315deg, rgba(200, 111, 74, 0.08), rgba(251, 252, 253, 0.96) 32%),
    rgba(251, 252, 253, 0.96);
  backdrop-filter: blur(14px);
}

.meet-header h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.8rem);
  line-height: 1.05;
}

.meet-ruka {
  flex: 0 0 auto;
  width: auto;
}

.chat-partner-name {
  margin: 8px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  opacity: 0.72;
}
#page-meet.is-searching .meet-ruka,
#page-meet.is-searching .chat-partner-name { display: none; }
#page-meet:not(.is-searching) #findingState { display: none; }

/* === Sticky mobile top bar === */
@media (max-width: 980px) {
  .mobile-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    background: rgba(251, 252, 253, 0.96) !important;
    backdrop-filter: blur(18px);
  }
  .content {
    padding-top: 72px;
  }
}

/* === Hamburger button === */
.mobile-menu-btn { display: none; }
@media (max-width: 980px) {
  .mobile-menu-btn { display: grid; place-items: center; }
}

/* === Drawer divider === */
.drawer-divider {
  height: 1px;
  background: var(--line);
  margin: 6px 4px;
}
.mobile-drawer .nav-link ion-icon {
  margin-right: 6px;
}
@media (max-width: 980px) {
  .mobile-drawer {
    display: none;
    grid-template-columns: 1fr;
    gap: 4px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
  .mobile-drawer.is-open { display: grid; }
}

/* === Nav red dot (match found) === */
.nav-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px var(--white);
  margin-left: 6px;
}
.bottom-nav__item .nav-dot {
  position: absolute;
  top: 6px;
  right: calc(50% - 16px);
  margin: 0;
}
.bottom-nav__item { position: relative; }
.sidebar .nav-link .nav-dot { margin-left: auto; }

/* Notification badge — same DOM hook as the old red dot but shows a
   number. When the inline element has textContent it grows into a pill;
   when empty + [hidden] it disappears entirely. */
.nav-dot[data-notif-dot] {
  width: auto;
  height: auto;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--white);
}
.bottom-nav__item .nav-dot[data-notif-dot] {
  top: 2px;
  right: calc(50% - 20px);
  min-width: 16px;
  padding: 0 5px;
  font-size: 0.65rem;
  line-height: 14px;
}
/* Bell icon in mobile header — turn the dot into a pill too */
.badge-dot[data-notif-dot] {
  width: auto;
  height: auto;
  min-width: 16px;
  padding: 0 5px;
  border-radius: 999px;
  top: 2px;
  right: 2px;
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
  display: inline-block;
}

/* === Post compose === */
.modal__panel--post { gap: 12px; }
.post-compose { display: flex; align-items: center; gap: 10px; }
.post-attach {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--brand-deep); cursor: pointer;
  transition: background 120ms;
}
.post-attach:hover { background: #e8f2f8; }
.post-attach.has-file { background: #e8f2f8; border-color: var(--brand); }
.post-attach ion-icon { width: 22px; height: 22px; }
.post-field { position: relative; flex: 1; }
.post-field input {
  width: 100%; box-sizing: border-box;
  padding: 12px 50px 12px 16px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.95rem; font-family: inherit;
  background: var(--surface);
}
.post-field input:focus {
  outline: 2px solid var(--brand); outline-offset: -1px; border-color: transparent;
}
.post-send {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand); color: #fff; border: none; cursor: pointer;
}
.post-send ion-icon { width: 18px; height: 18px; }
.post-attach-name {
  margin: 0; padding: 0 4px;
  font-size: 0.78rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* === Profile edit modal === */
.profile-form { display: grid; gap: 14px; }
.field-group { display: grid; gap: 6px; }
.field-group > span {
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted);
}
.field-group input {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: inherit; font-size: 0.95rem;
  background: var(--surface);
}
.field-group input:focus {
  outline: 2px solid var(--brand); outline-offset: -1px;
  border-color: transparent;
}
.field-hint {
  color: var(--muted); font-size: 0.78rem;
}
.username-input {
  position: relative;
  display: flex; align-items: center;
}
.username-prefix {
  position: absolute; left: 12px;
  color: var(--muted); font-weight: 700;
  pointer-events: none;
}
.username-input input {
  padding-left: 28px; padding-right: 90px;
}
.username-status {
  position: absolute; right: 12px;
  font-size: 0.78rem; font-weight: 700;
}
.username-status.is-available { color: #2f7d5a; }
.username-status.is-taken { color: #c0392b; }
.username-status.is-checking { color: var(--muted); }

/* === Meme cards (rebuilt) === */
.meme-feed {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.meme-card { display: flex; flex-direction: column; }
/* The media block adapts to whatever's inside: a real image keeps its
   natural aspect ratio (no crop), a text-only meme renders centred big
   text on a gradient background. */
.meme-card__media {
  position: relative;
  display: block;
  background: transparent;
  overflow: hidden;
  min-height: 0;
  padding: 0;
}
.meme-card__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(80vh, 720px);
  object-fit: contain;          /* never crop — letterbox if portrait */
  background: #0e1622;          /* dark band that frames a portrait */
  cursor: zoom-in;
}
.meme-card__media > span {
  position: static;
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 28px 24px;
  color: var(--ink, #15202b);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  line-height: 1.18;
  text-align: center;
  text-shadow: none;
  background: linear-gradient(135deg, rgba(96, 143, 185, 0.18), rgba(47, 125, 90, 0.14));
}

/* Round 15 — clean horizontal actions row à la Instagram. */
.meme-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 6px 12px 2px;
}
.meme-actions button {
  display: inline-flex;
  align-items: center; gap: 6px;
  height: 38px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink, #15202b);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 120ms, color 120ms, transform 80ms;
}
.meme-actions button:hover { background: #f3f8fb; }
.meme-actions button:active { transform: scale(0.94); }
.meme-actions button ion-icon { width: 24px; height: 24px; color: var(--ink, #15202b); }
.meme-actions button.is-liked ion-icon { color: #ef4444; }
.meme-actions button.is-liked { color: #ef4444; }
.meme-actions .share-btn { margin-left: auto; }
.meme-actions .share-btn ion-icon { width: 22px; height: 22px; }
.meme-actions .like-count, .meme-actions .comment-count {
  font-variant-numeric: tabular-nums;
}

.meme-card__caption {
  margin: 4px 14px 10px;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink, #15202b);
}
.meme-card__caption strong { font-weight: 700; margin-right: 4px; }

.meme-card__comments-toggle {
  margin: 0 14px 12px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--muted, #6c7787);
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
  align-self: flex-start;
}
.meme-card__comments-toggle:hover { color: var(--ink); }

/* ── Image lightbox ─────────────────────────────────────── */
.kj-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(8, 14, 22, 0.94);
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.kj-lightbox.is-open { display: flex; animation: kj-lb-fade 160ms ease; }
.kj-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  animation: kj-lb-pop 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.kj-lightbox__close {
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.16); color: #fff; border: 0;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
.kj-lightbox__close:hover { background: rgba(255,255,255,0.28); }
.kj-lightbox__close ion-icon { font-size: 24px; }
.kj-no-scroll { overflow: hidden; }
@keyframes kj-lb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kj-lb-pop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }

@media (min-width: 981px) {
  .meme-view-toggle {
    display: inline-grid;
  }

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

  .meme-feed--list .meme-card {
    display: grid;
    grid-template-columns: minmax(300px, 0.42fr) minmax(0, 1fr);
    min-height: 250px;
  }

  .meme-feed--list .meme-card__media {
    height: 100%;
    aspect-ratio: auto;
  }

  .meme-feed--list .meme-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px;
  }
}

/* Comments panel */
.meme-comments {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: grid; gap: 8px;
}
.meme-comments[hidden] { display: none; }
.comment-row {
  display: grid; gap: 2px;
  background: var(--surface);
  padding: 8px 10px;
  border-radius: var(--radius);
}
.comment-row strong {
  font-size: 0.78rem;
  color: var(--brand-deep);
}
.comment-row p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink);
}
.comment-form {
  display: flex; gap: 6px; margin-top: 6px;
}
.comment-form input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-family: inherit;
  font-size: 0.9rem;
}
.comment-form button {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: var(--brand); color: #fff;
  cursor: pointer;
}
.comment-form button ion-icon { width: 16px; height: 16px; }

/* === Generic content === */
.static-doc {
  max-width: 720px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  line-height: 1.65;
}
.static-doc h3 { margin: 22px 0 6px; font-size: 1rem; color: var(--brand-deep); }
.static-doc ul { padding-left: 18px; margin: 6px 0 12px; }
.static-doc li { margin: 4px 0; }
.static-doc hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 28px 0 20px;
}
.static-doc__meta {
  background: var(--surface);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 18px;
}
.static-doc code {
  background: var(--surface);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.86rem;
}

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


/* Typing indicator */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 6px;
  color: var(--muted);
  font-size: 0.78rem;
}
.typing-indicator[hidden] { display: none; }
.typing-dots {
  display: inline-flex;
  gap: 3px;
}
.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  animation: typing-bounce 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ── Additions for AUDIT pass (history, in-chat report, blocked list, etc.) ── */

.meet-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  margin-left: auto;
  gap: 8px;
}

.meet-actions .icon-btn {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  color: var(--brand-deep);
  border-radius: 12px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.meet-actions .icon-btn[hidden] { display: none; }
.meet-actions .icon-btn:hover { background: var(--surface); }

#reportBtn ion-icon { color: var(--danger); }
#blockBtn ion-icon { color: #ffe082; }

#page-meet.is-searching .meet-actions .icon-btn:not(#rukaBtn) { display: none; }

/* mobile back button */
.mobile-back {
  display: none;
}
@media (max-width: 880px) {
  .mobile-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 8px;
    border-radius: 10px;
    background: var(--surface-2, rgba(0,0,0,0.04));
    color: var(--text, #222);
  }
}

/* history tabs */
.history-tabs {
  margin-bottom: 14px;
}
.history-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.history-tabs button ion-icon { font-size: 16px; }

.history-row {
  position: relative;
  padding-right: 90px !important;
}
.history-row .history-tag {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 193, 7, 0.18);
  color: #8b5a00;
  padding: 4px 8px;
  border-radius: 12px;
}
.history-row .icon-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* chip remove button */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chip-remove {
  border: none;
  background: rgba(0,0,0,0.08);
  color: inherit;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
}
.chip.is-active .chip-remove { background: rgba(255,255,255,0.25); }
.chip-remove ion-icon { font-size: 12px; }

/* report modal */
.report-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.report-reasons .chip { cursor: pointer; }
.report-reasons .chip.is-active {
  background: var(--brand, #608fb9);
  color: #fff;
}
#reportNote {
  width: 100%;
  min-height: 90px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.92rem;
  resize: vertical;
}
.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.modal__subtle {
  color: var(--muted, #7a7a7a);
  font-size: 0.86rem;
  margin: 4px 0 8px;
}

/* Reusable confirm modal — smaller than the post / report panels. */
.modal__panel--confirm {
  max-width: 380px;
  width: calc(100vw - 32px);
  padding: 22px;
  border-radius: 16px;
}
.modal__panel--confirm h2 {
  margin: 0 0 6px;
  font-size: 1.1rem;
}
.btn--primary.btn--danger {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
}
.btn--primary.btn--danger:hover {
  background: #dc2626;
}

/* notification dot in header */
.badge-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e53935;
}

/* unread notification */
.notification-row.is-unread {
  background: rgba(96,143,185,0.08);
  border-left: 3px solid var(--brand, #608fb9);
}

/* badge for unread chat count */
.chat-row .badge {
  min-width: 22px;
  height: 22px;
  background: var(--brand, #608fb9);
  color: #fff;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  padding: 0 7px;
}

.blocked-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-tips {
  margin: 4px 0 0;
  padding-left: 18px;
  color: var(--muted, #555);
  font-size: 0.92rem;
  line-height: 1.55;
}
.settings-tips li + li { margin-top: 4px; }

/* meme flag button */
.meme-actions .flag-btn {
  margin-left: auto;
  color: var(--muted, #7a7a7a);
}
.meme-actions .flag-btn:hover { color: #c62828; }

/* lazy image placeholder */
.meme-card__media img { background: rgba(0,0,0,0.04); }


/* ── Mode picker (collapsed message/voice/video) ── */
.mode-picker {
  position: relative;
  display: inline-flex;
}
.mode-picker__toggle {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.82);
  color: var(--brand-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mode-picker__toggle:hover { background: var(--surface); }
.mode-picker__toggle ion-icon { font-size: 22px; }
.mode-picker.is-open .mode-picker__toggle { background: var(--surface); }

.mode-picker__menu {
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(24, 34, 48, 0.14);
  z-index: 20;
  animation: mode-slide 0.18s ease;
}
@keyframes mode-slide {
  from { opacity: 0; transform: translate(6px, -50%); }
  to   { opacity: 1; transform: translate(0, -50%); }
}
.mode-picker__menu button {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mode-picker__menu button:hover { background: var(--surface); }
.mode-picker__menu button.is-active {
  background: var(--brand, #608fb9);
  color: #fff;
}
.mode-picker__menu button ion-icon { font-size: 20px; }

@media (max-width: 880px) {
  /* On phones, slide downward instead of right so it doesn't overflow the
     viewport when the meet-header is near the edge. */
  .mode-picker__menu {
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    transform: none;
  }
  @keyframes mode-slide {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ── PWA install banner ── */
.install-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 80px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 16px 38px rgba(0,0,0,0.18);
  z-index: 60;
  animation: install-rise 0.25s ease;
}
@keyframes install-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.install-banner[hidden] { display: none; }

.install-banner__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand, #608fb9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.install-banner__icon img { width: 32px; height: 32px; }

.install-banner__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.install-banner__body strong { font-size: 0.96rem; }
.install-banner__body small { color: var(--muted, #7a7a7a); font-size: 0.8rem; }

.install-banner__cta {
  flex-shrink: 0;
  min-height: 42px;
  padding: 0 14px;
  white-space: nowrap;
}

.install-banner__dismiss {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

@media (min-width: 881px) {
  .install-banner {
    left: auto;
    right: 24px;
    bottom: 24px;
    max-width: 420px;
  }
}

@media (max-width: 600px) {
  .install-banner {
    right: 12px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    left: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 32px;
    gap: 8px;
    padding: 8px;
    border-radius: var(--radius);
  }

  .install-banner__icon {
    display: none;
  }

  .install-banner__body strong {
    display: block;
    overflow: hidden;
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .install-banner__body small {
    display: none;
  }

  .install-banner__cta {
    width: auto;
    min-width: 0;
    min-height: 36px;
    padding: 0 10px;
    border-radius: var(--radius);
    font-size: 0.86rem;
  }

  .install-banner__cta ion-icon {
    width: 17px;
    height: 17px;
  }

  .install-banner__dismiss {
    width: 32px;
    height: 32px;
  }

  #installAppBtn .profile-action__body small {
    display: none;
  }
}

/* ── Profile actions list (Account page) ── */
.profile-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.profile-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text, #222);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}
.profile-action:hover { background: rgba(96,143,185,0.06); }
.profile-action:active { transform: scale(0.99); }

.profile-action[hidden] { display: none; }

.profile-action__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(96,143,185,0.12);
  color: var(--brand, #608fb9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-action__icon ion-icon { font-size: 20px; }

.profile-action__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.profile-action__body strong { font-size: 0.98rem; }
.profile-action__body small { color: var(--muted, #7a7a7a); font-size: 0.82rem; }

.profile-action > ion-icon:last-child {
  color: var(--muted, #aaa);
  font-size: 18px;
  flex-shrink: 0;
}

/* ── Danger button variant (Block) ── */
.btn--danger {
  background: rgba(229, 57, 53, 0.1);
  color: #c62828;
  border: 1px solid rgba(229, 57, 53, 0.2);
}
.btn--danger:hover {
  background: rgba(229, 57, 53, 0.16);
}

.modal__actions--report {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.modal__actions--report .btn { flex: 0 0 auto; }

@media (max-width: 600px) {
  #installAppBtn.profile-action {
    gap: 10px;
    padding: 10px;
    border-radius: var(--radius);
  }

  #installAppBtn .profile-action__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
  }

  #installAppBtn .profile-action__body small {
    display: none;
  }
}

/* ── Tag input without separate Ongeza submit button ── */
.tag-input--noaction { display: flex; gap: 8px; margin-bottom: 12px; }
.tag-input--noaction input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  background: #fff;
  font: inherit;
}
.tag-input--noaction input:focus {
  outline: 2px solid rgba(96,143,185,0.35);
  outline-offset: 0;
}

/* Single Hifadhi button at the bottom of a settings page */
.form-footer {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 880px) {
  .form-footer { padding-bottom: 80px; }
  .form-footer .btn { flex: 1; }
}

/* Language toggle on Profile page */
.profile-language { margin-top: 18px; }
.language-toggle { display: inline-flex; gap: 4px; }
.language-toggle button {
  padding: 8px 18px;
  border: none;
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
}
.language-toggle button.is-active {
  background: var(--brand, #608fb9);
  color: #fff;
  font-weight: 600;
}

/* Heart (friend) button in meet header */
#friendBtn.is-active ion-icon { color: #e53935; }
#friendBtn[hidden] { display: none; }

/* Friends list (marafiki) */
.marafiki-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.marafiki-list .chat-row .avatar-sm--green {
  outline: 2px solid rgba(46, 125, 50, 0.5);
  outline-offset: 2px;
}

/* History row friend toggle: active state shows a filled heart */
.history-row .icon-btn.is-active ion-icon { color: #e53935; }


/* ────────────────────────────────────────────────────────────────
   Round 5 fixes — mobile header overflow, meet header stacking,
   real-time notification banners, login modal, account-meme list
   ──────────────────────────────────────────────────────────────── */

/* Kill any horizontal overflow that was making the mobile header drift
   into the centre of the viewport. */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
.app-shell, .content { max-width: 100vw; }

/* On phones, stack the meet header: heading on top, action row below.
   This prevents the Ruka button getting clipped or pushing the header. */
@media (max-width: 720px) {
  .page-meet-simple .meet-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .page-meet-simple .meet-header > div:first-child {
    width: 100%;
    min-width: 0;
  }
  .page-meet-simple .meet-actions {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .meet-actions .meet-ruka {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Notifications page — pinned 'unsigned' warning row */
.unsigned-warning {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.04));
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: 14px;
}
.unsigned-warning__icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(245, 158, 11, 0.16); color: #b45309;
  border-radius: 12px;
  flex-shrink: 0;
}
.unsigned-warning__body { flex: 1; min-width: 0; }
.unsigned-warning__body strong { display: block; font-size: 0.95rem; }
.unsigned-warning__body small { color: #6b7280; font-size: 0.82rem; }
.unsigned-warning .btn { flex-shrink: 0; }

/* Account-page banner uses the same colour palette. */
.account-warning {
  margin: 12px 0;
}

/* Account memes list (delete/edit) */
.account-memes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.account-meme {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
  aspect-ratio: 1;
}
.account-meme img {
  width: 100%; height: 100%; object-fit: cover;
}
.account-meme__caption {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  color: #fff; font-size: 0.8rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  padding: 4px 6px; background: rgba(0,0,0,0.32); border-radius: 6px;
}
.account-meme__actions {
  position: absolute; top: 6px; right: 6px;
  display: flex; gap: 4px;
}
.account-meme__actions button {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 6px;
  background: rgba(0,0,0,0.6); color: #fff;
  cursor: pointer;
}

/* Login modal */
.login-modal__provider {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.12); border-radius: 12px;
  background: #fff; font: inherit; font-weight: 600; cursor: pointer;
  transition: background 120ms;
}
.login-modal__provider:hover { background: rgba(0,0,0,0.04); }
.login-modal__provider--disabled { opacity: 0.5; cursor: not-allowed; }
.login-modal__provider img { width: 20px; height: 20px; }
.login-modal__divider {
  text-align: center; color: var(--muted); font-size: 0.82rem;
  margin: 10px 0;
}
.login-modal__why {
  background: rgba(96,143,185,0.06);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.85rem;
  color: var(--ink);
  margin-bottom: 14px;
}


/* ────────────────────────────────────────────────────────────────
   Round 6 — sidebar polish, skeleton + spinner loading states
   ──────────────────────────────────────────────────────────────── */

.nav-divider {
  height: 1px;
  background: var(--line);
  margin: 8px 8px;
}
.nav-link--muted {
  opacity: 0.78;
  font-size: 0.92rem;
}
.nav-link--muted:hover { opacity: 1; }

/* Sidebar gets a notification dot too */
.sidebar .nav-link {
  position: relative;
}
.sidebar .nav-link .nav-dot {
  position: static;
  margin-left: auto;
}

/* Generic spinner. <span class="kj-spinner"></span> or
   <span class="kj-spinner kj-spinner--lg"></span>. */
.kj-spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(96,143,185,0.18);
  border-top-color: var(--brand, #608fb9);
  border-radius: 50%;
  animation: kj-spin 0.85s linear infinite;
  vertical-align: middle;
}
.kj-spinner--lg { width: 40px; height: 40px; border-width: 3px; }
@keyframes kj-spin { to { transform: rotate(360deg); } }

.kj-loading-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 28px 0; color: var(--muted, #7a7a7a);
  font-size: 0.92rem;
}

/* Inline button spinner (replaces the icon while submitting) */
.btn[disabled] .kj-spinner {
  border-color: rgba(255,255,255,0.32);
  border-top-color: #fff;
}

/* Full-screen overlay for the meme upload */
.kj-overlay {
  position: fixed; inset: 0;
  z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 25, 40, 0.42);
  backdrop-filter: blur(4px);
  animation: kj-fade 160ms ease;
}
.kj-overlay[hidden] { display: none; }
.kj-overlay__card {
  background: #fff;
  border-radius: 16px;
  padding: 24px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.kj-overlay__card small { color: var(--muted, #7a7a7a); }
@keyframes kj-fade { from { opacity: 0; } to { opacity: 1; } }

/* Skeleton placeholders for the meme feed, marafiki, history, notifications */
.kj-skel {
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.04) 0%,
    rgba(0,0,0,0.08) 50%,
    rgba(0,0,0,0.04) 100%
  );
  background-size: 200% 100%;
  animation: kj-shimmer 1.4s linear infinite;
  border-radius: 10px;
}
@keyframes kj-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.kj-skel--card { aspect-ratio: 1; }
.kj-skel--row {
  height: 64px;
  margin-bottom: 8px;
}
.kj-skel--text {
  height: 14px;
  margin: 6px 0;
  width: 60%;
}


/* ────────────────────────────────────────────────────────────────
   Round 7 — compact mobile meet header, sticky-under-top-bar,
   unsigned-warning vertical layout on phones
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  /* Meet-header on phones: stick right under the mobile top bar with
     no visible gap, and shrink the inner content so it doesn't dominate
     the screen. Hide the giant "Kutana" heading + kicker — the partner
     name is enough context on mobile. */
  .page-meet-simple .meet-header {
    position: sticky;
    top: 60px;                /* equal to .mobile-header height */
    margin: -14px -14px 8px;  /* pull tight under the top bar */
    padding: 10px 14px 10px;
    gap: 8px;
    background: rgba(251, 252, 253, 0.98);
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
    backdrop-filter: blur(14px);
    z-index: 9;
  }
  .page-meet-simple .meet-header .section-kicker,
  .page-meet-simple .meet-header h2 {
    display: none;
  }
  .page-meet-simple .meet-header .chat-partner-name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    opacity: 0.9;
  }
  /* Tighter action row */
  .page-meet-simple .meet-actions {
    gap: 6px;
  }
  .page-meet-simple .meet-actions .icon-btn {
    width: 36px;
    height: 36px;
  }
  .page-meet-simple .meet-actions .meet-ruka {
    padding: 8px 14px;
    font-size: 0.92rem;
    min-height: 36px;
  }

  /* When still searching, hide the partner row too — the finding-state
     ring carries all the meaning. */
  #page-meet.is-searching .meet-header .chat-partner-name {
    display: none;
  }
  #page-meet.is-searching .meet-header {
    padding: 8px 14px;
  }
}

/* Tighten generic page-heading on phones the same way (memes, history…). */
@media (max-width: 720px) {
  .page-heading {
    margin: -14px -14px 12px;
    padding: 10px 14px 10px;
    position: sticky;
    top: 60px;
    background: rgba(251, 252, 253, 0.98);
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
    backdrop-filter: blur(14px);
    z-index: 9;
  }
  .page-heading .section-kicker {
    font-size: 0.7rem;
    margin: 0 0 2px;
  }
  .page-heading h2 {
    font-size: 1.2rem;
    margin: 0;
  }
  .mobile-back {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }
}

/* Unsigned-warning on small screens: stack vertically so the icon, text
   and CTA don't fight for inline space and force every word onto its
   own line (the bug in screenshot #3). */
@media (max-width: 720px) {
  .unsigned-warning {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
  }
  .unsigned-warning__body { width: 100%; }
  .unsigned-warning .btn { width: 100%; justify-content: center; }
}


/* ──────────────────────────────────────────────────────────────
   Round 8 — force the mobile meet header to sit *directly under*
   the top bar (previous sticky attempts kept leaving a gap because
   of competing media queries and content padding). Going with
   position:fixed at the right y-offset is the only reliable way.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Pin the top bar to a known 56px */
  .mobile-header {
    height: 56px !important;
    min-height: 56px !important;
    padding: 6px 12px !important;
  }
  .content { padding-top: 56px !important; }

  /* Kill .page-meet-simple's own top padding so its first child is the
     meet-header at y=0 of the page body. */
  .page-meet-simple { padding-top: 0 !important; }

  /* Meet header pinned right below the mobile top bar, full width.
     z-index above the chat content. backdrop-filter for the OS look. */
  body[data-route="meet"] .page-meet-simple .meet-header {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    background: rgba(251, 252, 253, 0.96) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
    backdrop-filter: blur(14px);
    z-index: 20 !important;
    gap: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  body[data-route="meet"] .page-meet-simple .meet-header > div:first-child {
    flex: 0 0 auto !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 8px;
  }
  body[data-route="meet"] .page-meet-simple .meet-header .section-kicker,
  body[data-route="meet"] .page-meet-simple .meet-header h2 {
    display: none !important;
  }
  body[data-route="meet"] .page-meet-simple .meet-header .chat-partner-name {
    margin: 0 !important;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    opacity: 0.92;
    max-width: 38vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-route="meet"] .page-meet-simple .meet-actions {
    width: auto !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    justify-content: flex-end !important;
  }
  body[data-route="meet"] .page-meet-simple .meet-actions .icon-btn {
    width: 34px !important;
    height: 34px !important;
  }
  body[data-route="meet"] .page-meet-simple .meet-actions .meet-ruka {
    padding: 7px 12px !important;
    min-height: 34px !important;
    height: 34px !important;
    font-size: 0.9rem !important;
    flex: 0 0 auto !important;
  }
  /* Push the chat grid below the now-fixed meet header. */
  body[data-route="meet"] .page-meet-simple .meet-grid {
    padding-top: 56px;
  }

  /* While searching, hide the partner name (it's empty anyway). */
  body[data-route="meet"] #page-meet.is-searching .meet-header > div:first-child {
    display: none;
  }
  body[data-route="meet"] #page-meet.is-searching .meet-actions {
    width: 100% !important;
    justify-content: space-between !important;
  }
}

/* ── Memes list view: tighter when image is portrait ─────────── */
.meme-feed--list .meme-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}
.meme-feed--list .meme-card__media {
  max-height: 420px;
  min-height: 220px;
}
.meme-feed--list .meme-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.meme-feed--list .meme-card__body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;  /* author top, actions bottom — but tight */
  gap: 14px;
}
.meme-feed--list .meme-card__body > strong {
  font-size: 1.05rem;
}
.meme-feed--list .meme-actions {
  margin-top: auto;
  justify-content: flex-start;
  gap: 16px;
}

/* ── Double-tap "love" animation on memes ─────────────────────── */
.meme-card__media {
  position: relative;
  user-select: none;
}
.meme-love-burst {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 5;
  animation: kj-love-pop 700ms ease-out forwards;
}
.meme-love-burst ion-icon {
  font-size: 120px;
  color: #fff;
  filter: drop-shadow(0 4px 14px rgba(229, 57, 53, 0.55));
}
@keyframes kj-love-pop {
  0%   { opacity: 0; transform: scale(0.4); }
  25%  { opacity: 1; transform: scale(1.15); }
  60%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* ── Bottom-nav resize so 5 items fit comfortably on small screens ── */
@media (max-width: 720px) {
  .bottom-nav {
    padding: 6px 4px !important;
  }
  .bottom-nav__item {
    padding: 4px 2px !important;
    min-width: 0;
    flex: 1;
  }
  .bottom-nav__item span {
    font-size: 0.68rem !important;
  }
  .bottom-nav__item ion-icon {
    font-size: 20px !important;
  }
}


/* Coming-soon card (Michezo placeholder etc.) */
.coming-soon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 24px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
}
.coming-soon-card__icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(96,143,185,0.12);
  color: var(--brand, #608fb9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.coming-soon-card__icon ion-icon { font-size: 36px; }
.coming-soon-card strong { font-size: 1.15rem; }
.coming-soon-card p { color: var(--muted, #7a7a7a); max-width: 320px; margin: 0; }


/* ──────────────────────────────────────────────────────────────
   Round 9 — FINAL mobile layout override. Earlier media queries
   kept fighting each other (720px vs 980px vs base rules with
   the same selector specificity), so this block runs at the same
   980px breakpoint as the rest of the mobile CSS, sits at the
   END of the file, and uses !important everywhere it matters.
   The header is fixed; the meet header sits right below the
   top bar at top:52px; the bottom nav is forced into one row.
   ────────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  /* Top bar: fixed 52px height, pinned to top, full width */
  .mobile-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 4px 12px !important;
    z-index: 30 !important;
    box-sizing: border-box !important;
    background: rgba(251, 252, 253, 0.96) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(14px);
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .mobile-header .icon-btn {
    width: 40px !important;
    height: 40px !important;
  }
  .mobile-header .mobile-brand img {
    height: 40px !important;
  }

  /* Content area: padding-top exactly equals top bar height. */
  .content {
    padding-top: 52px !important;
    padding-bottom: 64px !important;
  }

  /* Page heading + meet header: fixed right under the top bar at top:52px */
  .page-heading,
  .page-meet-simple .meet-header {
    position: fixed !important;
    top: 52px !important;
    left: 0 !important;
    right: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 4px 12px !important;
    margin: 0 !important;
    background: rgba(251, 252, 253, 0.96) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(14px);
    z-index: 25 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  /* Page heading kills the kicker, keeps just back-button + small h2 */
  .page-heading .section-kicker { display: none !important; }
  .page-heading h2 {
    font-size: 1.05rem !important;
    margin: 0 !important;
    flex: 1 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .page-heading .mobile-back {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 auto !important;
  }
  /* Wrapper div sometimes wraps the kicker+h2 — make it inline-flex shrink */
  .page-heading > div {
    flex: 1 !important;
    min-width: 0 !important;
  }
  /* Trailing buttons (Hifadhi / Soma yote / Pakia) need to stay small */
  .page-heading > .btn {
    padding: 5px 10px !important;
    height: 32px !important;
    min-height: 32px !important;
    font-size: 0.78rem !important;
  }

  /* Meet header: hide kicker/h2, keep only partner name + tight actions */
  .page-meet-simple .meet-header > div:first-child {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .page-meet-simple .meet-header .section-kicker,
  .page-meet-simple .meet-header h2 {
    display: none !important;
  }
  .page-meet-simple .meet-header .chat-partner-name {
    margin: 0 !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  .page-meet-simple .meet-actions {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    width: auto !important;
  }
  .page-meet-simple .meet-actions .icon-btn {
    width: 32px !important;
    height: 32px !important;
  }
  .page-meet-simple .meet-actions .meet-ruka {
    padding: 4px 10px !important;
    height: 32px !important;
    min-height: 32px !important;
    font-size: 0.82rem !important;
    flex: 0 0 auto !important;
  }
  /* When searching, hide partner row; let actions take the room */
  #page-meet.is-searching .meet-header > div:first-child {
    display: none !important;
  }

  /* Push the active page's body below the fixed page-heading. */
  .page { padding-top: 50px !important; }
  .page-meet-simple .meet-grid { padding-top: 50px !important; }

  /* Bottom nav: ONE ROW, period. */
  .bottom-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: stretch !important;
    padding: 4px 2px !important;
    box-sizing: border-box !important;
  }
  .bottom-nav__item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 4px 2px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
  }
  .bottom-nav__item ion-icon { font-size: 19px !important; }
  .bottom-nav__item span {
    font-size: 0.62rem !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* Chat message-box must clear the now-known 58 px bottom-nav. */
  .page-meet-simple .message-box {
    bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }
  .page-meet-simple .chat-feed {
    padding-bottom: 80px !important;
  }
}


/* Michezo game tiles */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.game-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink, #222);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.game-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(24, 34, 48, 0.08);
}
.game-tile__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(96, 143, 185, 0.12);
  color: var(--brand, #608fb9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.game-tile__icon ion-icon { font-size: 22px; }
.game-tile strong { font-size: 1.0rem; }
.game-tile small { color: var(--muted, #7a7a7a); font-size: 0.82rem; }
.game-tile__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
}


/* ──────────────────────────────────────────────────────────────
   Round 10 — drop hamburger/drawer, mode-picker in top bar,
   message-box truly above bottom-nav, dismissible toast, clean
   thumbs-down SVG, PWA splash colour
   ────────────────────────────────────────────────────────────── */

/* The hamburger and drawer no longer exist in this markup — make
   sure no old rules accidentally show them. */
.mobile-menu-btn, .mobile-drawer { display: none !important; }

/* The mobile-header right cluster holds the (route-conditional) mode
   picker and the notification bell. */
.mobile-header__right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Mode picker in the top bar — hidden unless we're on Kutana. */
.mode-picker--top { display: none; }
body[data-route="meet"] .mode-picker--top { display: inline-flex; }

/* The icon-only brand in the top bar replaces the wide logo+text. */
.mobile-brand--icon img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px;
}
.mobile-brand--icon {
  padding: 4px !important;
  display: inline-flex;
  align-items: center;
  border: none !important;
  background: transparent !important;
}

/* The mode picker's pop-out menu opens DOWN from the top bar now. */
.mode-picker--top .mode-picker__menu {
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
}
@keyframes mode-slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mode-picker--top .mode-picker__menu { animation: mode-slide-down 0.18s ease; }

/* Toast: close button + swipe affordance. */
.toast__panel {
  position: relative;
  touch-action: pan-y;
}
.toast__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  color: var(--muted, #7a7a7a);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}
.toast__close:hover { background: rgba(0, 0, 0, 0.1); }

/* Clean thumbs-down icon — used in JS as inline SVG. The wrapper button
   keeps its existing flag-btn class so positioning stays consistent. */
.flag-btn svg.kj-thumb-down {
  width: 22px;
  height: 22px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}

/* Force the message-box to ALWAYS clear the bottom-nav on phones, no
   matter what other rules say. Bottom-nav is one row ~58px, and the
   safe-area-inset takes care of iOS home indicators. */
@media (max-width: 980px) {
  .page-meet-simple .message-box {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    z-index: 18 !important;
    box-shadow: 0 14px 34px rgba(24, 34, 48, 0.1) !important;
  }
  .page-meet-simple .chat-feed {
    padding-bottom: 96px !important;
  }
}


/* ──────────────────────────────────────────────────────────────
   Round 11 — clean icon swap (no more generated "K"), Skip + Block
   buttons in the chat partner bar
   ────────────────────────────────────────────────────────────── */

/* The user-supplied icon is a square symbol (no wordmark), so it
   needs a different aspect ratio than the old wide kijiwenilogo2.svg. */
.splash__logo { width: min(180px, 50vw) !important; }
.sidebar__brand img { width: min(72px, 100%) !important; }

/* Brand colour the splash backdrop briefly to bridge the PWA launcher
   colour (#608fb9) and the white app body — avoids a sudden flash. */
.splash {
  background: linear-gradient(180deg, #608fb9 0%, #f3f6f9 70%) !important;
}

/* === Block button + Skip button in the chat partner row === */
#blockBtn[hidden] { display: none; }
.meet-actions #blockBtn ion-icon { color: #ff8a80; }


/* Make the Skip button always visible on mobile when matched. Compact
   the Ruka button label so all four chat-header buttons fit. */
@media (max-width: 980px) {
  .page-meet-simple .meet-actions {
    gap: 4px !important;
  }
  .page-meet-simple .meet-actions .icon-btn {
    width: 30px !important;
    height: 30px !important;
  }
  .page-meet-simple .meet-actions .meet-ruka {
    padding: 4px 8px !important;
    height: 30px !important;
    min-height: 30px !important;
    font-size: 0.78rem !important;
  }
  /* On very narrow screens drop the Ruka text — the play-skip icon is enough. */
  @media (max-width: 380px) {
    .page-meet-simple .meet-actions .meet-ruka__label { display: none; }
    .page-meet-simple .meet-actions .meet-ruka {
      width: 30px;
      padding: 0 !important;
    }
  }
}


/* ──────────────────────────────────────────────────────────────
   Round 12 — toast redesign, heart wiggle, splash overlay,
   chat input gap, empty states without cards, verified badge,
   new-posts banner
   ────────────────────────────────────────────────────────────── */

/* === Toast: rounded box (not pill), no checkmark, X in the top-right ===
   Re-uses the centered-flex container from the earlier .toast block. Only
   styles the panel + open-state animation here so transforms don't fight. */
.toast { z-index: 200; }
.toast.is-open { pointer-events: auto; }
.toast__panel {
  position: relative;
  display: block;
  width: min(440px, 100%);
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 14px 44px 14px 16px;   /* room for the X on the right */
  box-shadow: 0 18px 40px rgba(20, 30, 50, 0.18);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.toast.is-open .toast__panel {
  opacity: 1;
  transform: translateY(0);
}
/* Hide the legacy checkmark + its rounded container if any old markup uses it */
.toast__panel .toast__icon { display: none !important; }
.toast__panel h2 {
  margin: 0 0 2px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink, #1c2734);
}
.toast__panel p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted, #586577);
  line-height: 1.35;
}
.toast__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px !important;
  height: 26px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  color: var(--muted, #7a7a7a);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  z-index: 2;
}
.toast__close ion-icon { font-size: 16px; }
.toast__close:hover { background: rgba(0, 0, 0, 0.1); }

/* === Heart double-tap: big red, wiggle, fade === */
.meme-love-burst {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 5;
  animation: kj-heart-wiggle 900ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.meme-love-burst ion-icon {
  font-size: min(70vw, 320px);
  color: #ef4444;
  filter: drop-shadow(0 10px 26px rgba(239, 68, 68, 0.55));
}
.meme-love-burst svg {
  width: 80%;
  height: 80%;
  max-width: 480px;
  max-height: 480px;
  fill: #ef4444;
  filter: drop-shadow(0 12px 30px rgba(239, 68, 68, 0.55));
}
@keyframes kj-heart-wiggle {
  0%   { opacity: 0; transform: scale(0.25) rotate(-15deg); }
  18%  { opacity: 1; transform: scale(1.35) rotate(8deg); }
  34%  { transform: scale(1.18) rotate(-6deg); }
  48%  { transform: scale(1.28) rotate(4deg); }
  62%  { transform: scale(1.2) rotate(-3deg); }
  80%  { opacity: 1; transform: scale(1.24) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.55) rotate(0deg); }
}

/* === Splash overlay: covers the top bar while loading === */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;   /* above mobile-header (30) and everything else */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #608fb9 0%, #f3f6f9 70%);
  transition: opacity 0.4s ease;
}
.splash.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* === Chat input: a touch of breathing room above the bottom-nav === */
@media (max-width: 980px) {
  .page-meet-simple .message-box {
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
  }
}

/* === Partner-left footer — inline notice at the bottom of the chat feed
   that keeps message history visible after the partner skips / blocks /
   leaves. The icon teaches the user the action's symbol. */
.partner-left-footer {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 12px auto 4px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.88rem;
  max-width: 90%;
  animation: kj-fade-up 220ms ease;
}
.partner-left-footer[data-tone="warn"]   { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.35); }
.partner-left-footer[data-tone="danger"] { background: rgba(239, 68, 68,0.08); border-color: rgba(239, 68, 68,0.30); }
.partner-left-footer[data-tone="muted"]  { background: var(--surface); }
.partner-left-footer__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  flex: 0 0 32px;
}
.partner-left-footer[data-tone="warn"]   .partner-left-footer__icon { color: #b07307; }
.partner-left-footer[data-tone="danger"] .partner-left-footer__icon { color: #c73030; }
.partner-left-footer[data-tone="muted"]  .partner-left-footer__icon { color: var(--muted); }
.partner-left-footer__icon ion-icon { font-size: 18px; }
.partner-left-footer__text { line-height: 1.4; }
.partner-left-footer em { font-style: normal; font-weight: 700; color: var(--brand-deep); }
@keyframes kj-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === Round 14 — chat input usability ============================
   #9 The visible "input pill" is wide but the actual <input> element
       had no padding/min-height, so only the centre line accepted clicks.
       Force it to fill the wrapper so any tap on the pill focuses it.
   #8 The "anaandika..." typing indicator on mobile lived in normal flow
       and was covered by the position:fixed message-box. Pin it directly
       above the message-box at the same fixed coordinates. ===========*/
.message-box {
  align-items: stretch;
  padding: 8px 10px;
}
.message-box input {
  align-self: stretch;
  padding: 12px 8px;
  font-size: 1rem;
  line-height: 1.2;
  background: transparent;
  width: 100%;
}
.message-box input::placeholder { color: var(--muted); }
.message-box button {
  align-self: stretch;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 980px) {
  /* Bigger touch target on phones */
  .page-meet-simple .message-box {
    padding: 8px 10px !important;
  }
  .page-meet-simple .message-box input {
    padding: 14px 8px !important;
    font-size: 1.02rem !important;
  }
  .page-meet-simple .message-box button {
    width: 44px !important;
    height: 44px !important;
  }
  /* Pin the typing indicator just above the fixed message-box so it isn't
     hidden behind it. Same horizontal alignment, smaller font, faint pill
     so it's readable on the white-ish page background. */
  .page-meet-simple .typing-indicator {
    position: fixed !important;
    left: 12px !important;
    bottom: calc(78px + env(safe-area-inset-bottom) + 56px) !important;
    z-index: 19 !important;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 12px !important;
    box-shadow: 0 6px 20px rgba(24, 34, 48, 0.08);
    backdrop-filter: blur(10px);
  }
}

/* === Notifications list — redesigned to match the reference layout:
   tinted circular icon on the left, "Actor verb-phrase" + timestamp on
   the right, with section headers grouping recent vs earlier. No card
   borders — the list just sits flat on the page background. */
.notification-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.notif-section-head {
  margin: 18px 4px 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted, #6c7787);
  text-transform: uppercase;
}
.notif-section-head:first-child { margin-top: 6px; }
.notif-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.notif-row:hover { background: #fafbfd; }
.notif-row:active { transform: scale(0.997); }
.notif-row__icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  align-items: center;
  justify-content: center;
}
.notif-row__icon ion-icon { font-size: 22px; }
.notif-row__icon--rose  { background: rgba(239, 68, 68, 0.12);  color: #ef4444; }
.notif-row__icon--blue  { background: rgba(96, 143, 185, 0.16); color: var(--brand-deep, #2d5a86); }
.notif-row__icon--green { background: rgba(34, 197, 94, 0.14);  color: #16a34a; }
.notif-row__icon--amber { background: rgba(245, 158, 11, 0.14); color: #d97706; }
.notif-row__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.notif-row__title {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink, #1c2734);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.notif-row__title strong {
  font-weight: 800;
  color: var(--ink);
}
.notif-row__time {
  font-size: 0.78rem;
  color: var(--muted, #7a8593);
}
.notif-row__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: transparent;
  flex: 0 0 9px;
}
.notif-row.is-unread {
  background: #f3f7fb;
  border-color: rgba(96, 143, 185, 0.25);
}
.notif-row.is-unread .notif-row__dot {
  background: var(--brand, #608fb9);
}
@media (max-width: 720px) {
  .notif-row {
    padding: 10px 12px;
    grid-template-columns: 38px 1fr auto;
    gap: 10px;
  }
  .notif-row__icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  .notif-row__icon ion-icon { font-size: 19px; }
  .notif-row__title { font-size: 0.88rem; }
  .notif-row__time { font-size: 0.74rem; }
}

/* ──────────────────────────────────────────────────────────────
   Round 13 — chat-header action row stays on the SAME row as the
   partner name. Buttons are shrunk (28 px icon-btns, icon-only
   Ruka) so all four fit comfortably next to the name on a phone.
   Name truncates with ellipsis if it ever gets long.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  body[data-route="meet"] .page-meet-simple .meet-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 6px 12px !important;
    gap: 8px !important;
  }
  body[data-route="meet"] .page-meet-simple .meet-header > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
  }
  body[data-route="meet"] .page-meet-simple .meet-header .chat-partner-name {
    margin: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  /* Actions on the right of the name, single row, compact. */
  body[data-route="meet"] .page-meet-simple .meet-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
  }
  body[data-route="meet"] .page-meet-simple .meet-actions .icon-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    flex: 0 0 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    padding: 0 !important;
  }
  body[data-route="meet"] .page-meet-simple .meet-actions .icon-btn ion-icon {
    font-size: 16px !important;
  }
  /* Ruka becomes an icon-only square — matches the other action buttons. */
  body[data-route="meet"] .page-meet-simple .meet-actions .meet-ruka {
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 28px !important;
    gap: 0 !important;
  }
  body[data-route="meet"] .page-meet-simple .meet-actions .meet-ruka ion-icon {
    font-size: 16px !important;
  }
  body[data-route="meet"] .page-meet-simple .meet-actions .meet-ruka__label {
    display: none !important;
  }
  /* Chat panel sits below the standard 52 px header. */
  body[data-route="meet"] .page-meet-simple .meet-grid {
    padding-top: 60px !important;
  }
  /* While searching, hide the empty actions row — finding-state is enough. */
  body[data-route="meet"] #page-meet.is-searching .meet-actions {
    display: none !important;
  }
}

/* === Empty states without cards (Marafiki, Taarifa, etc.) === */
.list-panel.is-empty,
.list-panel:empty {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 24px 0 !important;
}
.list-panel > .empty-feed:only-child {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 36px 16px !important;
  text-align: center;
  color: var(--muted, #7a7a7a);
}
/* Same for the notification-list specifically — it has its own class */
.notification-list {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.notification-list > .empty-feed:only-child {
  padding: 36px 16px !important;
  text-align: center;
}
.marafiki-list {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.marafiki-list > .empty-feed:only-child {
  padding: 36px 16px !important;
  text-align: center;
}

/* === Verified badge (next to the partner name + on Account etc.) === */
.kj-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--brand, #608fb9);
  color: #fff;
}
.kj-verified svg {
  width: 11px;
  height: 11px;
  stroke: #fff;
  stroke-width: 3;
  fill: none;
}

/* === Twitter-style "new posts" banner at top of meme feed ===
   Three small overlapping boxes stand in for post thumbnails (like
   X / Twitter shows avatars). Click to flush queued memes + scroll up. */
.new-posts-banner {
  position: sticky;
  top: 12px;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #608fb9 0%, #2d5a86 100%);
  color: #fff;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  margin: 10px auto 16px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 12px 28px rgba(45, 90, 134, 0.45);
  animation: kj-banner-drop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.new-posts-banner:hover {
  box-shadow: 0 16px 34px rgba(45, 90, 134, 0.55);
}
.new-posts-banner:active {
  transform: translateX(-50%) scale(0.97);
}
@keyframes kj-banner-drop {
  from { opacity: 0; transform: translateX(-50%) translateY(-24px) scale(0.92); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.new-posts-banner__dots {
  display: inline-flex;
  align-items: center;
}
.new-posts-banner__dots span {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.96);
  border: 2px solid #608fb9;
  margin-left: -6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.new-posts-banner__dots span:first-child { margin-left: 0; }
.new-posts-banner__dots span:nth-child(2) { background: rgba(255,255,255,0.85); }
.new-posts-banner__dots span:nth-child(3) { background: rgba(255,255,255,0.7); }
.new-posts-banner ion-icon { font-size: 18px; }
.new-posts-banner[hidden] { display: none; }