@import "tailwindcss";

:root {
  --page-bg: oklch(0.97 0.02 61);
  --panel: oklch(0.995 0.01 80 / 0.9);
  --panel-strong: oklch(0.24 0.05 302);
  --sand: oklch(0.96 0.03 73);
  --ink-strong: oklch(0.26 0.05 304);
  --ink-soft: oklch(0.5 0.04 302);
  --overlay: oklch(0.2 0.03 305 / 0.68);
  --melon: oklch(0.74 0.19 33);
  --melon-soft: oklch(0.91 0.08 28);
  --sun: oklch(0.88 0.15 88);
  --aqua: oklch(0.82 0.12 191);
  --aqua-soft: oklch(0.94 0.07 190);
  --rose: oklch(0.82 0.11 355);
  --rose-soft: oklch(0.93 0.06 355);
  --lime: oklch(0.86 0.17 133);
}

@theme inline {
  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body: "Instrument Sans", sans-serif;
}

html {
  font-family: var(--font-body);
  background: #1a0e2e;
  color-scheme: dark;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background:
    radial-gradient(circle at 10% 20%, color-mix(in oklch, var(--sun) 46%, transparent), transparent 26%),
    radial-gradient(circle at 90% 15%, color-mix(in oklch, var(--aqua) 42%, transparent), transparent 24%),
    linear-gradient(180deg, oklch(0.98 0.018 68), oklch(0.95 0.022 56));
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgb(139 92 246 / 0.2);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(139 92 246 / 0.35);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(139 92 246 / 0.2) transparent;
}

/* Overscroll background — prevents white flash */
html, body {
  overscroll-behavior: none;
  background: #1a0e2e;
}

/* Selection color */
::selection {
  background: rgb(139 92 246 / 0.35);
  color: white;
}

/* Smooth focus outlines */
:focus-visible {
  outline: 2px solid rgb(139 92 246 / 0.5);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

button,
input,
select,
textarea {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* Disabled state */
button:disabled {
  cursor: not-allowed;
}

/* Smooth scrolling for panels */
.yano-chat-panel,
.yano-participants-panel {
  scroll-behavior: smooth;
}

/* Prevent text size adjust on orientation change */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.font-display {
  font-family: var(--font-display);
}

.yano-grain::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px;
}

.yano-wordmark {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  user-select: none;
}

.yano-wordmark__ya {
  color: rgb(221 214 254 / 1);
}

.yano-wordmark__no {
  color: rgb(167 139 250 / 0.7);
}

.yano-ui-layer {
  transition: opacity 300ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.yano-ui-layer--hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(8px);
}

.yano-enter {
  animation: yano-enter 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes yano-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.yano-dot-pop {
  animation: yano-dot-pop 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
  transform-origin: center;
}

@keyframes yano-dot-pop {
  0% { transform: scale(0.85); }
  55% { transform: scale(1.28); }
  100% { transform: scale(1); }
}

.yano-menu-pop {
  transform-origin: top right;
  animation: yano-menu-pop 160ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes yano-menu-pop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.yano-locale-tile {
  transition:
    transform 140ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
  will-change: transform;
}

/* ============ PROFILE ACTION SHEET ============ */
/* z-index intentionally above .yano-dm-panel (410) so the sheet can be
   summoned from inside an open DM without being hidden behind it. */
.yano-sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 430;
  background: rgb(7 4 18 / 0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.yano-sheet-scrim--open {
  opacity: 1;
  pointer-events: auto;
}

.yano-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 440;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transform: translateY(102%);
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.yano-sheet--open {
  transform: translateY(0);
}

.yano-sheet-card {
  position: relative;
  pointer-events: auto;
  width: 100%;
  max-width: 28rem;
  background:
    linear-gradient(180deg, rgb(167 139 250 / 0.06) 0%, transparent 22%),
    rgb(19 10 34 / 0.98);
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  border-top: 1px solid rgb(167 139 250 / 0.18);
  box-shadow:
    0 -28px 80px -10px rgb(0 0 0 / 0.6),
    0 -1px 0 rgb(167 139 250 / 0.18);
  padding: 0.625rem 0 max(1.5rem, env(safe-area-inset-bottom)) 0;
}
.yano-sheet-card::before {
  /* glowing accent edge */
  content: "";
  position: absolute;
  top: 0;
  left: 26%;
  right: 26%;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: rgb(167 139 250 / 0.85);
  box-shadow: 0 0 18px rgb(167 139 250 / 0.7);
}

.yano-sheet-grabber {
  width: 38px;
  height: 4px;
  border-radius: 4px;
  background: rgb(255 255 255 / 0.18);
  margin: 0 auto 0.875rem;
}

.yano-sheet-action {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  padding: 0.875rem 0.75rem;
  border-radius: 1rem;
  text-align: left;
  background: transparent;
  transition: background-color 160ms ease, transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
}
.yano-sheet-action:hover {
  background: rgb(167 139 250 / 0.06);
}
.yano-sheet-action:active {
  background: rgb(167 139 250 / 0.16);
  transform: scale(0.985);
}
.yano-sheet-action--danger:hover {
  background: rgb(239 68 68 / 0.08);
}
.yano-sheet-action--danger:active {
  background: rgb(239 68 68 / 0.16);
}

.yano-sheet-action__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 0.75rem;
  background: rgb(167 139 250 / 0.10);
  color: rgb(196 181 253 / 1);
  flex-shrink: 0;
}
.yano-sheet-action--danger .yano-sheet-action__icon {
  background: rgb(239 68 68 / 0.10);
  color: rgb(252 165 165 / 1);
}

.yano-sheet-divider {
  height: 1px;
  background: rgb(167 139 250 / 0.10);
  margin: 0.375rem 1.625rem;
}

.yano-sheet-profile {
  display: grid;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  border-radius: 1.1rem;
  background: rgb(167 139 250 / 0.05);
  border: 1px solid rgb(167 139 250 / 0.08);
}

.yano-sheet-profile__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.yano-sheet-profile__row--stacked {
  display: grid;
  gap: 0.35rem;
}

.yano-sheet-profile__label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(196 181 253 / 0.52);
}

.yano-sheet-profile__value {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgb(245 243 255 / 0.92);
}

.yano-sheet-profile__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.4rem;
  padding: 0.42rem 0.92rem 0.42rem 0.52rem;
  border-radius: 999px;
  background: color-mix(in oklch, oklch(0.18 0.05 304) 84%, transparent);
  border: 1px solid color-mix(in oklch, oklch(0.78 0.13 320) 14%, transparent);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgb(245 243 255 / 0.9);
}

.yano-sheet-profile__pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
}

.yano-sheet-profile__pill--woman {
  border-color: color-mix(in oklch, oklch(0.76 0.12 12) 28%, transparent);
  color: color-mix(in oklch, oklch(0.9 0.03 12) 88%, white);
}

.yano-sheet-profile__pill--woman .yano-sheet-profile__pill-icon {
  background: color-mix(in oklch, oklch(0.72 0.16 12) 22%, transparent);
  color: oklch(0.84 0.12 12);
}

.yano-sheet-profile__pill--man {
  border-color: color-mix(in oklch, oklch(0.74 0.11 235) 28%, transparent);
  color: color-mix(in oklch, oklch(0.91 0.03 235) 88%, white);
}

.yano-sheet-profile__pill--man .yano-sheet-profile__pill-icon {
  background: color-mix(in oklch, oklch(0.75 0.14 235) 20%, transparent);
  color: oklch(0.84 0.1 235);
}

.yano-sheet-profile__pill--unspecified {
  border-color: color-mix(in oklch, oklch(0.72 0.05 180) 20%, transparent);
  color: color-mix(in oklch, oklch(0.92 0.02 180) 86%, white);
}

.yano-sheet-profile__pill--unspecified .yano-sheet-profile__pill-icon {
  background: color-mix(in oklch, oklch(0.82 0.05 180) 14%, transparent);
  color: oklch(0.86 0.04 180);
}

.yano-sheet-profile__bio {
  font-size: 0.92rem;
  line-height: 1.45;
  font-weight: 600;
  color: rgb(221 214 254 / 0.72);
}

/* Stagger reveal for sheet content rows */
.yano-sheet--open .yano-sheet-stagger > * {
  opacity: 0;
  transform: translateY(8px);
  animation: yano-sheet-rise 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.yano-sheet--open .yano-sheet-stagger > *:nth-child(1) { animation-delay: 70ms; }
.yano-sheet--open .yano-sheet-stagger > *:nth-child(2) { animation-delay: 110ms; }
.yano-sheet--open .yano-sheet-stagger > *:nth-child(3) { animation-delay: 150ms; }
.yano-sheet--open .yano-sheet-stagger > *:nth-child(4) { animation-delay: 190ms; }
.yano-sheet--open .yano-sheet-stagger > *:nth-child(5) { animation-delay: 230ms; }
.yano-sheet--open .yano-sheet-stagger > *:nth-child(6) { animation-delay: 270ms; }
.yano-sheet--open .yano-sheet-stagger > *:nth-child(7) { animation-delay: 310ms; }
@keyframes yano-sheet-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .yano-sheet,
  .yano-sheet-scrim,
  .yano-sheet-action {
    transition: none !important;
  }
  .yano-sheet--open .yano-sheet-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ============ 1:1 DM PANEL ============ */
.yano-dm-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 410;
  display: flex;
  flex-direction: column;
  width: min(26rem, 100vw);
  background:
    radial-gradient(120% 80% at 80% -20%, rgb(167 139 250 / 0.12) 0%, transparent 55%),
    linear-gradient(180deg, #150826 0%, #100620 60%, #0c041a 100%);
  border-left: 1px solid rgb(167 139 250 / 0.18);
  box-shadow: -28px 0 80px -10px rgb(0 0 0 / 0.6);
  transform: translateX(100%);
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  /* iOS safe area */
  padding-top: env(safe-area-inset-top);
}
.yano-dm-panel--open {
  transform: translateX(0);
  pointer-events: auto;
}

.yano-dm-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 0.875rem 0.875rem 0.625rem;
  border-bottom: 1px solid rgb(167 139 250 / 0.10);
}
.yano-dm-header::before {
  /* subtle violet wash from the avatar */
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgb(167 139 250 / 0.45) 50%, transparent 100%);
}

.yano-dm-iconbtn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: rgb(196 181 253 / 0.7);
  background: transparent;
  transition: background 160ms ease, color 160ms ease, transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}
.yano-dm-iconbtn:hover {
  background: rgb(167 139 250 / 0.10);
  color: rgb(221 214 254 / 1);
}
.yano-dm-iconbtn:active {
  transform: scale(0.92);
}

.yano-dm-avatar {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgb(167 139 250 / 0.16);
  color: rgb(221 214 254 / 1);
  font-weight: 800;
  font-size: 0.95rem;
  font-family: var(--font-display, "Bricolage Grotesque"), sans-serif;
  letter-spacing: -0.02em;
  ring: 1px solid rgb(167 139 250 / 0.25);
  box-shadow:
    inset 0 0 0 1px rgb(167 139 250 / 0.25),
    0 12px 24px -12px rgb(167 139 250 / 0.55);
}
.yano-dm-avatar__online {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #4ade80;
  border: 2px solid #150826;
  box-shadow: 0 0 8px rgb(74 222 128 / 0.55);
}
.yano-dm-avatar--tappable {
  cursor: pointer;
  transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease;
}
.yano-dm-avatar--tappable:hover {
  box-shadow:
    inset 0 0 0 1px rgb(167 139 250 / 0.45),
    0 14px 28px -10px rgb(167 139 250 / 0.7);
}
.yano-dm-avatar--tappable:active {
  transform: scale(0.94);
}
.yano-dm-avatar--tappable::after {
  /* tiny "tap to open" affordance — chevron-down badge in lower-right */
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #1a0e2e url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4b5fd' stroke-width='3' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>") center / 9px 9px no-repeat;
  border: 1.5px solid rgb(167 139 250 / 0.45);
  opacity: 0.85;
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.yano-dm-avatar--tappable:hover::after {
  opacity: 1;
  transform: scale(1.08);
}

.yano-dm-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: rgb(167 139 250 / 0.18) transparent;
}
.yano-dm-body::-webkit-scrollbar {
  width: 5px;
}
.yano-dm-body::-webkit-scrollbar-thumb {
  background: rgb(167 139 250 / 0.18);
  border-radius: 5px;
}

.yano-dm-system {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  background: rgb(167 139 250 / 0.08);
  border: 1px solid rgb(167 139 250 / 0.14);
  font-size: 11px;
  font-weight: 600;
  color: rgb(196 181 253 / 0.75);
  margin-bottom: 0.25rem;
}

.yano-dm-bubble {
  max-width: 78%;
  padding: 0.625rem 0.875rem;
  border-radius: 1.125rem;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  word-wrap: break-word;
  animation: yano-dm-bubble-in 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.yano-dm-bubble--them {
  align-self: flex-start;
  background: rgb(167 139 250 / 0.12);
  color: rgb(237 233 254 / 0.96);
  border-top-left-radius: 0.375rem;
}
.yano-dm-bubble--you {
  align-self: flex-end;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  border-top-right-radius: 0.375rem;
  box-shadow: 0 8px 24px -10px rgb(139 92 246 / 0.55);
}
.yano-dm-bubble-time {
  font-size: 10px;
  font-weight: 600;
  color: rgb(196 181 253 / 0.35);
  margin-top: -0.125rem;
  letter-spacing: 0.02em;
}
.yano-dm-bubble-time--them {
  align-self: flex-start;
  margin-left: 0.875rem;
}
.yano-dm-bubble-time--you {
  align-self: flex-end;
  margin-right: 0.875rem;
}

@keyframes yano-dm-bubble-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.yano-dm-typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: 0.75rem 0.875rem;
  border-radius: 1.125rem;
  background: rgb(167 139 250 / 0.10);
  border-top-left-radius: 0.375rem;
}
.yano-dm-typing span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgb(196 181 253 / 0.6);
  animation: yano-dm-typing-bounce 1.2s ease-in-out infinite;
}
.yano-dm-typing span:nth-child(2) { animation-delay: 0.12s; }
.yano-dm-typing span:nth-child(3) { animation-delay: 0.24s; }
@keyframes yano-dm-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-3px); opacity: 1; }
}

.yano-dm-input-wrap {
  border-top: 1px solid rgb(167 139 250 / 0.10);
  padding: 0.75rem 0.875rem max(0.875rem, env(safe-area-inset-bottom));
  background: rgb(15 6 28 / 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.yano-dm-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgb(167 139 250 / 0.08);
  border: 1px solid rgb(167 139 250 / 0.14);
  border-radius: 1.125rem;
  padding: 0.5rem 0.5rem 0.5rem 0.875rem;
  transition: border-color 180ms ease, background 180ms ease;
}
.yano-dm-input:focus-within {
  border-color: rgb(167 139 250 / 0.35);
  background: rgb(167 139 250 / 0.12);
}
.yano-dm-input input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: rgb(237 233 254 / 0.96);
  font-size: 14px;
  font-weight: 500;
  min-width: 0;
}
.yano-dm-input input::placeholder {
  color: rgb(196 181 253 / 0.35);
}
.yano-dm-send {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  flex-shrink: 0;
  transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1), filter 160ms ease;
  box-shadow: 0 8px 22px -8px rgb(139 92 246 / 0.6);
}
.yano-dm-send:hover {
  filter: brightness(1.08);
}
.yano-dm-send:active {
  transform: scale(0.94);
}
.yano-dm-send:disabled {
  opacity: 0.4;
  pointer-events: none;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .yano-dm-panel,
  .yano-dm-bubble,
  .yano-dm-typing span,
  .yano-dm-iconbtn {
    transition: none !important;
    animation: none !important;
  }
}

/* ============ DM ACTIVE BADGE (on participant tiles) ============ */
.yano-dm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 6px 2px 5px;
  border-radius: 999px;
  background: rgb(167 139 250 / 0.22);
  border: 1px solid rgb(167 139 250 / 0.35);
  color: rgb(237 233 254);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
.yano-dm-badge svg {
  width: 10px;
  height: 10px;
}
.yano-dm-badge--unread {
  background: rgb(236 72 153 / 0.22);
  border-color: rgb(236 72 153 / 0.45);
  color: rgb(252 231 243);
  animation: yano-dm-badge-pulse 1.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes yano-dm-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(236 72 153 / 0.0); }
  50%      { box-shadow: 0 0 0 4px rgb(236 72 153 / 0.18); }
}

/* Floating dot variant — for avatar overlay */
.yano-dm-dot {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ec4899, #db2777);
  color: white;
  font-size: 9px;
  font-weight: 800;
  border: 2px solid #1a0e2e;
  box-shadow: 0 4px 10px -2px rgb(236 72 153 / 0.55);
  animation: yano-dm-dot-pop 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes yano-dm-dot-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
.yano-dm-dot--read {
  background: rgb(167 139 250 / 0.85);
  box-shadow: 0 4px 10px -2px rgb(167 139 250 / 0.5);
  animation: none;
}

/* ============ DM TOAST (incoming message preview while minimized) ============ */
.yano-dm-toast {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  left: 50%;
  z-index: 420;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem 0.625rem 0.625rem;
  border-radius: 1.25rem;
  background: rgb(26 14 46 / 0.94);
  border: 1px solid rgb(167 139 250 / 0.22);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(0 0 0 / 0.25);
  width: min(22rem, calc(100vw - 1.5rem));
  transform: translate(-50%, -120%);
  opacity: 0;
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1), opacity 280ms ease;
  cursor: pointer;
}
.yano-dm-toast--open {
  transform: translate(-50%, 0);
  opacity: 1;
}
.yano-dm-toast:hover {
  border-color: rgb(167 139 250 / 0.35);
}
.yano-dm-toast:active {
  transform: translate(-50%, 0) scale(0.985);
}
.yano-dm-toast__avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgb(167 139 250 / 0.18);
  color: rgb(221 214 254);
  font-family: var(--font-display, "Bricolage Grotesque"), sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgb(167 139 250 / 0.25);
}
.yano-dm-toast__name {
  font-family: var(--font-display, "Bricolage Grotesque"), sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: rgb(196 181 253 / 0.75);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.yano-dm-toast__text {
  font-size: 13.5px;
  font-weight: 500;
  color: rgb(237 233 254 / 0.96);
  line-height: 1.3;
  margin-top: 1px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .yano-dm-toast,
  .yano-dm-badge--unread,
  .yano-dm-dot {
    animation: none !important;
    transition: none !important;
  }
}

@media (hover: hover) {
  .yano-locale-tile:hover {
    transform: translateY(-1px) scale(1.02);
  }
}

.yano-locale-tile:active {
  transform: translateY(0) scale(0.98);
}

.yano-prejoin-preview .yano-camera-video {
  filter: var(--yano-preview-filter, none);
  transition: filter 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.yano-prejoin-preview .yano-camera-canvas {
  filter: var(--yano-preview-filter, none);
  transition: filter 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.yano-camera-faceblur {
  opacity: 0;
  transition:
    opacity 120ms ease,
    filter 180ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: clip-path, opacity, filter, transform;
}

.yano-prejoin-preview video.yano-camera-faceblur {
  filter: var(--yano-preview-filter, none) blur(var(--yano-face-blur, 12px)) saturate(0.98) contrast(1.04);
}

.yano-prejoin-preview canvas.yano-camera-faceblur {
  filter: none;
}

.yano-range {
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.18);
  outline: none;
}

.yano-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(245, 243, 255, 0.92);
  border: 2px solid rgba(139, 92, 246, 0.35);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

.yano-range::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.18);
}

.yano-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(245, 243, 255, 0.92);
  border: 2px solid rgba(139, 92, 246, 0.35);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

.yano-preview-vignette {
  opacity: 0;
  transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1);
  background: radial-gradient(
    circle at 50% 35%,
    rgb(0 0 0 / 0) 52%,
    rgb(0 0 0 / 0.42) 100%
  );
}

.yano-preview-vignette--on {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .yano-dot-pop {
    animation: none;
  }

  .yano-menu-pop {
    animation: none;
  }

  .yano-locale-tile {
    transition: none;
  }
}

.yano-preview-ring {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.45),
    rgba(167, 139, 250, 0.25) 50%,
    rgba(139, 92, 246, 0.4)
  );
}

.yano-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(40px);
  opacity: 0.75;
  animation: drift 12s ease-in-out infinite;
}

.yano-orb--melon {
  top: 6rem;
  left: -3rem;
  height: 18rem;
  width: 18rem;
  background: color-mix(in oklch, var(--melon) 54%, transparent);
}

.yano-orb--aqua {
  right: -4rem;
  top: 15rem;
  height: 24rem;
  width: 24rem;
  background: color-mix(in oklch, var(--aqua) 52%, transparent);
  animation-delay: -4s;
}

.yano-orb--sun {
  bottom: 4rem;
  left: 28%;
  height: 14rem;
  width: 14rem;
  background: color-mix(in oklch, var(--sun) 52%, transparent);
  animation-delay: -7s;
}

.yano-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 999px;
  padding: 0.5rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
}

.yano-pill::before {
  content: "";
  height: 0.55rem;
  width: 0.55rem;
  border-radius: 999px;
  background: currentColor;
}

.yano-pill--aqua {
  background: color-mix(in oklch, var(--aqua-soft) 80%, white);
  color: var(--ink-strong);
}

.yano-pill--sun {
  background: color-mix(in oklch, var(--sun) 70%, white);
  color: var(--ink-strong);
}

.yano-pill--rose {
  background: color-mix(in oklch, var(--rose-soft) 80%, white);
  color: var(--ink-strong);
}

.yano-stat {
  display: flex;
  min-height: 7.25rem;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 1.75rem;
  background: color-mix(in oklch, white 76%, var(--melon-soft));
  padding: 1.2rem;
}

.yano-stat span {
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.yano-stat strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-strong);
}

.yano-field {
  display: grid;
  gap: 0.65rem;
}

.yano-field span {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.68);
}

.yano-field input,
.yano-field select,
.yano-field textarea,
.yano-field--light input,
.yano-field--light select,
.yano-field--light textarea {
  width: 100%;
  border: 0;
  border-radius: 1.35rem;
  padding: 0.85rem 0.95rem;
  outline: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.yano-field--compact {
  gap: 0.45rem;
}

.yano-field--compact span {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}

.yano-field--compact input,
.yano-field--compact select,
.yano-field--compact textarea {
  border-radius: 1rem;
  padding: 0.72rem 0.82rem;
  font-size: 0.95rem;
}

.yano-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.64);
}

.yano-profile-card,
.yano-profile-section {
  border-radius: 1.35rem;
  background: rgb(255 255 255 / 0.08);
  padding: 0.95rem;
}

.yano-profile-card {
  background:
    radial-gradient(circle at top right, rgb(255 255 255 / 0.1), transparent 42%),
    linear-gradient(135deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.05));
}

.yano-profile-section--flex {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.yano-profile-index,
.yano-mini-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  padding: 0.3rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgb(255 255 255 / 0.82);
}

.yano-field input,
.yano-field select,
.yano-field textarea {
  background: rgb(255 255 255 / 0.12);
  color: white;
}

.yano-field input::placeholder,
.yano-field textarea::placeholder {
  color: rgb(255 255 255 / 0.45);
}

.yano-field--light span {
  color: var(--ink-soft);
}

.yano-field--light input,
.yano-field--light select,
.yano-field--light textarea {
  background: rgb(255 255 255 / 0.8);
  color: var(--ink-strong);
}

.yano-field input:focus,
.yano-field select:focus,
.yano-field textarea:focus,
.yano-field--light input:focus,
.yano-field--light select:focus,
.yano-field--light textarea:focus {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--aqua) 35%, white);
}

.yano-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.25rem;
  padding: 0.85rem 1.2rem;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.yano-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.yano-button:active:not(:disabled) {
  transform: scale(0.96);
  transition-duration: 80ms;
}

.yano-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.yano-button--primary {
  width: 100%;
  border-radius: 1.6rem;
  padding: 1.25rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  background: oklch(0.75 0.18 320);
  color: white;
  box-shadow: 0 12px 40px oklch(0.75 0.18 320 / 0.35);
}

.yano-button--primary:hover:not(:disabled) {
  background: oklch(0.8 0.19 320);
  box-shadow: 0 16px 48px oklch(0.75 0.18 320 / 0.45);
}

.yano-button--secondary {
  background: rgb(139 92 246 / 0.1);
  color: rgb(196 181 253 / 1);
}

.yano-button--secondary:hover:not(:disabled) {
  background: rgb(139 92 246 / 0.18);
}

.yano-button--ghost {
  background: rgb(255 255 255 / 0.08);
  color: white;
}

.yano-button--danger {
  background: linear-gradient(135deg, var(--rose), var(--melon));
  color: var(--ink-strong);
}

.yano-button--small {
  padding: 0.68rem 0.9rem;
  font-size: 0.88rem;
}

.yano-segment {
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  padding: 0.68rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.82);
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}

.yano-segment--active {
  background: linear-gradient(135deg, var(--melon), var(--sun));
  color: var(--ink-strong);
}

.yano-mode-tab {
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  padding: 0.74rem 0.9rem;
  font-weight: 700;
  color: rgb(255 255 255 / 0.8);
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}

.yano-mode-tab--active {
  background: linear-gradient(135deg, var(--aqua), var(--sun));
  color: var(--ink-strong);
}

.yano-language-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 1rem;
  background: rgb(255 255 255 / 0.08);
  padding: 0.7rem 0.78rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.86);
  text-align: left;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}

.yano-language-chip--selected {
  background: linear-gradient(135deg, color-mix(in oklch, var(--aqua) 80%, white), color-mix(in oklch, var(--sun) 78%, white));
  color: var(--ink-strong);
}

.yano-language-chip:hover,
.yano-segment:hover,
.yano-mode-tab:hover {
  transform: translateY(-1px);
}

.yano-share-input {
  width: 100%;
  border: 0;
  border-radius: 1rem;
  background: rgb(255 255 255 / 0.08);
  padding: 0.82rem 0.9rem;
  color: white;
  outline: none;
}

.yano-share-input::placeholder {
  color: rgb(255 255 255 / 0.45);
}

.yano-share-input:focus {
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--aqua) 35%, white);
}

.yano-member-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  padding: 0.45rem 0.75rem;
  font-size: 0.82rem;
  color: rgb(255 255 255 / 0.86);
}

.yano-media-toggle,
.yano-call-control,
.yano-call-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 120ms cubic-bezier(0.16, 1, 0.3, 1), background-color 150ms ease, color 150ms ease, opacity 180ms ease;
}

.yano-media-toggle,
.yano-call-control {
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  border: 0;
  background: rgb(139 92 246 / 0.12);
  color: rgb(196 181 253 / 1);
  backdrop-filter: blur(10px);
}

.yano-call-control--wide {
  width: auto;
  white-space: nowrap;
  border-radius: 1rem;
  padding-inline: 1.1rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.yano-call-control--off {
  background: rgb(239 68 68 / 0.2);
  color: rgb(252 165 165 / 1);
}

.yano-call-control--attention {
  background: rgb(249 115 22 / 0.16);
  color: rgb(255 237 213 / 1);
  box-shadow: inset 0 0 0 1.5px rgb(251 146 60 / 0.72), 0 0 0 3px rgb(251 146 60 / 0.14);
}

.yano-media-toggle--off {
  background: rgb(239 68 68 / 0.2);
  color: rgb(252 165 165 / 1);
}

.yano-call-control--danger {
  background: rgb(220 38 38 / 0.92);
  border-color: rgb(248 113 113 / 0.9);
  color: white;
}

.yano-call-chip {
  border-radius: 1rem;
  border: 2px solid rgb(255 255 255 / 0.1);
  padding: 0.82rem 1rem;
  background: rgb(0 0 0 / 0.36);
  color: white;
  font-size: 0.85rem;
  font-weight: 700;
  backdrop-filter: blur(10px);
}

.yano-chat-badge {
  position: absolute;
  top: -0.15rem;
  right: -0.05rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding-inline: 0.24rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--melon), var(--sun));
  color: var(--ink-strong);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.15rem;
  text-align: center;
  box-shadow: 0 10px 24px rgb(255 115 73 / 0.25);
}

.yano-pending-badge {
  position: absolute;
  top: -0.3rem;
  left: -0.45rem;
  min-width: 1rem;
  height: 1rem;
  padding-inline: 0.22rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgb(251 146 60 / 1), rgb(245 158 11 / 1));
  color: rgb(36 17 0 / 0.92);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1rem;
  text-align: center;
  box-shadow: 0 8px 18px rgb(251 146 60 / 0.32);
}

.yano-media-toggle:hover,
.yano-call-control:hover,
.yano-call-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgb(0 0 0 / 0.18);
}

.yano-call-tile {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 1.3rem;
  background: #130a22;
  box-shadow: inset 0 0 0 1px rgb(139 92 246 / 0.08);
}

.yano-call-tile--waiting {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: none;
}

.yano-waiting-signal {
  position: relative;
  display: grid;
  height: 5rem;
  width: 5rem;
  place-items: center;
}

.yano-waiting-signal__ring,
.yano-waiting-signal__dot {
  position: absolute;
  border-radius: 999px;
}

.yano-waiting-signal__ring {
  inset: 0;
  border: 1px solid rgb(167 139 250 / 0.3);
  animation: waiting-pulse 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.yano-waiting-signal__dot {
  height: 1rem;
  width: 1rem;
  background: rgb(167 139 250 / 0.8);
  box-shadow: 0 0 0 0 rgb(255 219 120 / 0.4);
  animation: waiting-dot 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.yano-participants-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: min(20rem, calc(100% - 1rem));
  border-right: 2px solid rgb(139 92 246 / 0.1);
  background: rgb(19 10 34 / 0.96);
  box-shadow: 24px 0 64px rgb(0 0 0 / 0.35);
  backdrop-filter: blur(18px);
}

.yano-chat-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  width: min(24rem, calc(100% - 1rem));
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  border-left: none;
  background: transparent;
  box-shadow: none;
}

.yano-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 2px solid rgb(139 92 246 / 0.1);
  padding: 0.95rem 1rem;
}

.yano-chat-messages {
  display: grid;
  gap: 0.85rem;
  overflow-y: auto;
  align-content: start;
  padding: 0.9rem 1rem;
}

.yano-chat-row {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.yano-chat-row--self {
  justify-items: end;
}

.yano-chat-row--other {
  justify-items: start;
}

.yano-chat-bubble {
  max-width: min(18rem, 100%);
  border: 1px solid rgb(139 92 246 / 0.12);
  border-radius: 1.1rem;
  padding: 0.72rem 0.85rem 0.58rem;
  overflow-wrap: break-word;
  word-break: break-word;
}

.yano-chat-bubble--self {
  background: rgb(139 92 246 / 0.25);
  border-color: rgb(139 92 246 / 0.35);
  color: rgb(221 214 254 / 1);
}

.yano-chat-bubble--other {
  background: rgb(139 92 246 / 0.08);
  color: rgb(196 181 253 / 1);
}

.yano-chat-sender {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(167 139 250 / 0.6);
}

.yano-chat-time {
  margin-top: 0.45rem;
  font-size: 0.68rem;
  opacity: 0.66;
}

.yano-chat-line {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.yano-chat-line--self {
  flex-direction: row-reverse;
}

.yano-chat-avatar {
  display: inline-flex;
  height: 1.75rem;
  width: 1.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  color: white;
}

.yano-chat-avatar--self {
  background: linear-gradient(135deg, rgb(236 72 153), rgb(124 58 237));
}

.yano-chat-avatar--other {
  background: linear-gradient(135deg, rgb(56 189 248), rgb(139 92 246));
}

.yano-chat-input {
  width: 100%;
  resize: none;
  border: 0;
  background: transparent;
  color: white;
  outline: none;
}

.yano-chat-input::placeholder {
  color: rgb(113 113 122 / 1);
}

.yano-overlay-chat {
  pointer-events: none;
  position: absolute;
  left: 1rem;
  right: 8rem;
  bottom: 5.4rem;
  z-index: 18;
  display: flex;
  max-height: 40vh;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.45rem;
  transition: bottom 200ms ease;
}

.yano-overlay-chat--raised {
  bottom: 9rem;
}

.yano-overlay-chat--keyboard {
  bottom: 3rem;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, black 28%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 28%);
}

.yano-overlay-chat__line {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  padding: 0.2rem 0;
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.6);
  animation: chat-fade-in 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.yano-overlay-chat__name {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 800;
}

.yano-overlay-chat__name--self {
  color: rgb(244 114 182 / 1);
}

.yano-overlay-chat__name--other {
  color: rgb(167 139 250 / 1);
}

.yano-link {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color 180ms ease;
}

.yano-link:hover {
  color: var(--ink-strong);
}

.signal-dot {
  height: 0.85rem;
  width: 0.85rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--ink-soft) 40%, white);
}

.signal-dot--live {
  background: var(--lime);
  box-shadow: 0 0 0 0 rgb(126 235 122 / 0.45);
  animation: ping-soft 1.8s ease-out infinite;
}

@keyframes drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, 18px, 0) scale(1.04);
  }
}

@keyframes ping-soft {
  0% {
    box-shadow: 0 0 0 0 rgb(126 235 122 / 0.4);
  }
  80%,
  100% {
    box-shadow: 0 0 0 14px rgb(126 235 122 / 0);
  }
}

@keyframes waiting-pulse {
  0% {
    transform: scale(0.78);
    opacity: 0.9;
  }
  75%,
  100% {
    transform: scale(1.14);
    opacity: 0;
  }
}

@keyframes waiting-dot {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgb(167 139 250 / 0.35);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 14px rgb(167 139 250 / 0);
  }
}

@keyframes chat-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tile-msg-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes tile-msg-border {
  0% { transform: scaleX(0); opacity: 1; }
  50% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .yano-orb,
  .signal-dot--live,
  .yano-waiting-signal__ring,
  .yano-waiting-signal__dot,
  .yano-overlay-chat__line,
  .yano-enter {
    animation: none;
  }

  .yano-ui-layer,
  .yano-button,
  .yano-field input,
  .yano-field select,
  .yano-field textarea {
    transition: none;
  }
}

@media (max-width: 640px) {
  .yano-pill {
    padding: 0.42rem 0.7rem;
    font-size: 0.74rem;
  }

  .yano-button {
    padding: 0.72rem 1rem;
    font-size: 0.94rem;
  }

  .yano-call-control,
  .yano-media-toggle {
    height: 2.9rem;
    width: 2.9rem;
  }

  .yano-call-control--wide {
    padding-inline: 1rem;
  }

  .yano-participants-panel {
    top: 4.5rem;
    right: 0.75rem;
    bottom: 5.25rem;
    left: 0.75rem;
    width: auto;
    border: 2px solid rgb(139 92 246 / 0.12);
    border-radius: 1.6rem;
  }

  .yano-chat-panel {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100dvh;
    border: none;
    border-radius: 0;
    background: rgb(19 10 34 / 0.85);
    grid-template-rows: 0fr minmax(0, 1fr) auto;
  }

  .yano-chat-panel .yano-chat-header {
    overflow: hidden;
    padding: 0;
    border: none;
    min-height: 0;
  }

  .yano-chat-panel .yano-chat-messages {
    overscroll-behavior: contain;
    align-content: end;
  }

  .yano-chat-panel .yano-chat-footer {
    background: #1a0e2e;
    padding-bottom: calc(0.75rem + 4.5rem);
  }

  .yano-overlay-chat {
    right: 1rem;
    bottom: 6.25rem;
    max-height: 52vh;
  }

  .yano-overlay-chat__name {
    font-size: 0.82rem;
  }
}

/* ─────────── Profile trigger chip (home screen) ─────────── */
.yano-profile-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.85rem 0.55rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, oklch(0.75 0.18 320) 25%, transparent);
  background:
    linear-gradient(180deg, rgb(139 92 246 / 0.14), rgb(139 92 246 / 0.06));
  text-align: left;
  cursor: pointer;
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

.yano-profile-trigger:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklch, oklch(0.78 0.18 320) 45%, transparent);
  background:
    linear-gradient(180deg, rgb(139 92 246 / 0.2), rgb(139 92 246 / 0.08));
  box-shadow: 0 6px 22px rgb(15 6 30 / 0.4);
}

.yano-profile-trigger:active {
  transform: scale(0.985);
}

.yano-profile-trigger:focus-visible {
  outline: none;
  border-color: color-mix(in oklch, var(--aqua) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--aqua) 30%, transparent);
}

.yano-profile-trigger__avatar-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1.5px dashed color-mix(in oklch, oklch(0.78 0.16 320) 60%, transparent);
  background: rgb(139 92 246 / 0.08);
  color: oklch(0.85 0.08 320);
}

.yano-profile-trigger__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgb(139 92 246 / 0.16);
  color: rgb(221 214 254 / 0.9);
  transition: background-color 180ms ease, color 180ms ease;
}

.yano-profile-trigger:hover .yano-profile-trigger__edit {
  background: rgb(139 92 246 / 0.28);
  color: rgb(245 243 255);
}

.yano-profile-trigger__arrow {
  font-size: 1.1rem;
  font-weight: 800;
  color: oklch(0.82 0.13 320);
  letter-spacing: -0.04em;
  transform: translateY(-1px);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.yano-profile-trigger:hover .yano-profile-trigger__arrow {
  transform: translate(2px, -1px);
}

/* ─────────── Profile sheet (modal / bottom sheet) ─────────── */
.yano-profile-backdrop {
  background: oklch(0.08 0.04 305 / 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  animation: yano-profile-fade 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
  border: none;
}

@keyframes yano-profile-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.yano-profile-sheet {
  position: relative;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in oklch, oklch(0.62 0.22 30) 18%, transparent), transparent 55%),
    radial-gradient(110% 70% at 0% 0%, color-mix(in oklch, oklch(0.78 0.16 200) 14%, transparent), transparent 60%),
    linear-gradient(180deg, oklch(0.18 0.05 304), oklch(0.13 0.045 302));
  border-top: 1px solid color-mix(in oklch, oklch(0.85 0.13 320) 20%, transparent);
  border-left: 1px solid color-mix(in oklch, oklch(0.85 0.13 320) 8%, transparent);
  border-right: 1px solid color-mix(in oklch, oklch(0.85 0.13 320) 8%, transparent);
  box-shadow:
    0 -24px 60px rgb(5 2 16 / 0.55),
    inset 0 1px 0 rgb(255 255 255 / 0.05);
  animation: yano-profile-slide 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
  overflow: hidden;
}

@keyframes yano-profile-slide {
  from {
    transform: translateY(28px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (min-width: 640px) {
  .yano-profile-sheet {
    border-radius: 30px;
    border: 1px solid color-mix(in oklch, oklch(0.85 0.13 320) 16%, transparent);
    box-shadow:
      0 36px 90px rgb(5 2 16 / 0.6),
      0 0 0 1px rgb(255 255 255 / 0.04),
      inset 0 1px 0 rgb(255 255 255 / 0.06);
    animation: yano-profile-pop 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @keyframes yano-profile-pop {
    from {
      transform: translateY(14px) scale(0.965);
      opacity: 0;
    }
    to {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }
}

.yano-profile-sheet::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in oklch, var(--melon) 26%, transparent), transparent 70%);
  pointer-events: none;
  filter: blur(8px);
}

.yano-profile-sheet::after {
  content: "";
  position: absolute;
  bottom: -160px;
  left: -100px;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in oklch, var(--aqua) 18%, transparent), transparent 70%);
  pointer-events: none;
  filter: blur(12px);
}

.yano-profile-sheet__handle {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: rgb(221 214 254 / 0.22);
  margin: 10px auto 2px;
  position: relative;
  z-index: 1;
}

@media (min-width: 640px) {
  .yano-profile-sheet__handle {
    display: none;
  }
}

.yano-profile-sheet__close {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  color: rgb(221 214 254 / 0.85);
  border: 1px solid rgb(255 255 255 / 0.05);
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.yano-profile-sheet__close:hover {
  background: rgb(255 255 255 / 0.12);
  color: white;
}

.yano-profile-sheet__close:active {
  transform: scale(0.94);
}

.yano-profile-sheet__close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.yano-profile-sheet form {
  position: relative;
  z-index: 1;
}

/* ─────────── Profile photo placeholder ─────────── */
.yano-profile-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 18rem);
  gap: 0.75rem;
}

.yano-profile-photo--editing {
  width: min(100%, 15rem);
  gap: 1rem;
}

.yano-profile-photo__button {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.yano-profile-photo__button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.yano-profile-photo__stage {
  position: relative;
  display: block;
  width: 176px;
  height: 176px;
  margin-inline: auto;
}

.yano-profile-photo__ring {
  position: absolute;
  top: 8px;
  left: 16px;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.85;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'><circle cx='80' cy='80' r='78.5' fill='none' stroke='%23ead7ff' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='0.1 6.2'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: yano-profile-photo__ring-spin 48s linear infinite;
  filter: drop-shadow(0 0 6px rgb(234 215 255 / 0.18));
}

@keyframes yano-profile-photo__ring-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .yano-profile-photo__ring {
    animation: none;
  }
}

.yano-profile-photo__aura {
  position: absolute;
  top: 18px;
  left: 26px;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / 0.1), transparent 58%),
    linear-gradient(160deg, rgb(105 65 145 / 0.34), rgb(46 24 74 / 0.18));
  border: 1px solid rgb(196 181 253 / 0.18);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.05),
    0 18px 40px rgb(8 3 22 / 0.26);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.yano-profile-photo__inner {
  position: absolute;
  top: 18px;
  left: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 24%, color-mix(in oklch, oklch(0.85 0.16 320) 26%, transparent), transparent 58%),
    linear-gradient(180deg, rgb(70 38 101 / 0.92), rgb(43 21 70 / 0.95));
  color: oklch(0.88 0.09 320);
  border: 1px solid color-mix(in oklch, oklch(0.85 0.13 320) 16%, transparent);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.05),
    0 14px 32px rgb(8 3 22 / 0.4);
}

.yano-profile-photo__inner--image {
  overflow: hidden;
  background: linear-gradient(180deg, rgb(70 38 101 / 0.92), rgb(43 21 70 / 0.95));
}

.yano-profile-photo__inner--staged {
  overflow: hidden;
  background: linear-gradient(180deg, rgb(70 38 101 / 0.92), rgb(43 21 70 / 0.95));
}

.yano-profile-photo__inner--staged .yano-profile-photo__image {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  max-width: none;
  object-fit: initial;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.yano-profile-photo__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yano-profile-photo__plus {
  position: absolute;
  right: -4px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--melon), var(--sun));
  color: var(--ink-strong);
  border: 3px solid oklch(0.16 0.04 304);
  box-shadow: 0 6px 18px rgb(10 4 24 / 0.52);
}

.yano-profile-photo__caption {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(196 181 253 / 0.56);
  text-align: center;
}

.yano-profile-photo__editor {
  width: 100%;
}

.yano-profile-photo__crop {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, oklch(0.85 0.13 320) 18%, transparent);
  background:
    linear-gradient(180deg, rgb(70 38 101 / 0.85), rgb(43 21 70 / 0.9));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.05),
    0 18px 40px rgb(8 3 22 / 0.32);
  cursor: grab;
  touch-action: none;
}

.yano-profile-photo__crop .yano-profile-photo__image {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.yano-profile-photo__crop--dragging {
  cursor: grabbing;
}

.yano-profile-photo__crop-mask {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.05);
  pointer-events: none;
}

.yano-profile-photo__crop-mask::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgb(236 233 254 / 0.92);
  box-shadow:
    inset 0 0 0 1px rgb(7 4 18 / 0.22),
    0 16px 30px rgb(6 2 18 / 0.22);
}

.yano-profile-photo__range {
  display: grid;
  gap: 0.35rem;
  width: 100%;
  margin-top: 0.9rem;
}

.yano-profile-photo__range span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(221 214 254 / 0.55);
}

.yano-profile-photo__range input[type="range"] {
  width: 100%;
  accent-color: color-mix(in oklch, var(--melon) 60%, white);
}

.yano-profile-photo__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}

.yano-profile-photo__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.72rem 0.95rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, oklch(0.78 0.13 320) 16%, transparent);
  background: color-mix(in oklch, oklch(0.16 0.04 304) 78%, transparent);
  color: rgb(236 233 254 / 0.88);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 180ms ease,
    background-color 180ms ease;
}

.yano-profile-photo__action:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklch, var(--aqua) 36%, transparent);
}

.yano-profile-photo__action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.yano-profile-photo__action--primary {
  background: linear-gradient(135deg, var(--melon), var(--sun));
  border-color: transparent;
  color: var(--ink-strong);
}

/* ─────────── Profile labels & inputs ─────────── */
.yano-profile-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(221 214 254 / 0.75);
}

.yano-profile-input {
  width: 100%;
  border-radius: 18px;
  border: 1px solid color-mix(in oklch, oklch(0.78 0.13 320) 14%, transparent);
  background: color-mix(in oklch, oklch(0.16 0.04 304) 78%, transparent);
  padding: 0.85rem 1rem;
  color: rgb(245 243 255);
  font-size: 1rem;
  font-weight: 600;
  outline: none;
  transition:
    border-color 200ms ease,
    background-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.yano-profile-input::placeholder {
  color: rgb(196 181 253 / 0.4);
  font-weight: 500;
}

.yano-profile-input:focus {
  border-color: color-mix(in oklch, var(--aqua) 55%, transparent);
  background: color-mix(in oklch, oklch(0.18 0.05 304) 90%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--aqua) 22%, transparent);
}

.yano-profile-input--textarea {
  resize: none;
  min-height: 88px;
  font-size: 0.92rem;
  line-height: 1.55;
  font-weight: 500;
}

/* ─────────── Gender chips ─────────── */
.yano-profile-chip {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 74px;
  padding: 0.8rem 0.6rem 0.72rem;
  border-radius: 18px;
  border: 1px solid color-mix(in oklch, oklch(0.78 0.13 320) 16%, transparent);
  background: color-mix(in oklch, oklch(0.16 0.04 304) 78%, transparent);
  color: rgb(221 214 254 / 0.85);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms ease,
    background 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease;
}

.yano-profile-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.05);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}

.yano-profile-chip__label {
  line-height: 1.15;
}

.yano-profile-chip--woman {
  border-color: color-mix(in oklch, oklch(0.76 0.12 12) 28%, transparent);
  color: color-mix(in oklch, oklch(0.9 0.03 12) 88%, white);
}

.yano-profile-chip--woman .yano-profile-chip__icon {
  background: color-mix(in oklch, oklch(0.72 0.16 12) 22%, transparent);
  color: oklch(0.84 0.12 12);
}

.yano-profile-chip--man {
  border-color: color-mix(in oklch, oklch(0.74 0.11 235) 28%, transparent);
  color: color-mix(in oklch, oklch(0.91 0.03 235) 88%, white);
}

.yano-profile-chip--man .yano-profile-chip__icon {
  background: color-mix(in oklch, oklch(0.75 0.14 235) 20%, transparent);
  color: oklch(0.84 0.1 235);
}

.yano-profile-chip--unspecified {
  border-color: color-mix(in oklch, oklch(0.72 0.05 180) 20%, transparent);
  color: color-mix(in oklch, oklch(0.92 0.02 180) 86%, white);
}

.yano-profile-chip--unspecified .yano-profile-chip__icon {
  background: color-mix(in oklch, oklch(0.82 0.05 180) 14%, transparent);
  color: oklch(0.86 0.04 180);
}

.yano-profile-chip:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklch, oklch(0.82 0.14 320) 32%, transparent);
  color: white;
}

.yano-profile-chip:active {
  transform: scale(0.97);
}

.yano-profile-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--aqua) 30%, transparent);
}

.yano-profile-chip--active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--melon), var(--sun));
  color: var(--ink-strong);
  box-shadow:
    0 8px 22px color-mix(in oklch, var(--melon) 35%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 0.4);
}

.yano-profile-chip--active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 100% at 50% 0%, rgb(255 255 255 / 0.4), transparent 60%);
  pointer-events: none;
  mix-blend-mode: overlay;
}

.yano-profile-chip--active .yano-profile-chip__icon {
  background: rgb(255 255 255 / 0.34);
  color: var(--ink-strong);
}

@media (max-width: 640px) {
  .yano-profile-sheet {
    max-width: 100%;
  }
}