/* ═══════════════════════════════════════════════════════════════════════
       SCREEN: CHAT
       ═══════════════════════════════════════════════════════════════════════ */
    #screen-chat {
      background: #000;
    }
    .chat-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-size: auto 80%;
      background-position: center bottom;
      background-repeat: no-repeat;
      background-color: #0a0a0a;
    }
    @media (max-width: 767px) {
      .chat-bg { background-size: auto 70%; }
    }
    @media (min-width: 768px) {
      .chat-bg { background-size: auto 85%; }
      .chat-header, .rel-island, .chat-messages, .chat-bottom {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
      }
    }
    .chat-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.8) 0%,
        rgba(0,0,0,0.5) 25%,
        rgba(0,0,0,0.35) 45%,
        rgba(0,0,0,0.5) 65%,
        rgba(0,0,0,0.9) 100%
      );
    }

    .chat-header {
      position: relative;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 16px;
      padding-top: calc(var(--safe-top) + 10px);
      flex-shrink: 0;
    }
    .chat-header__left {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .chat-back-btn {
      font-size: 24px;
      color: #fff;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .chat-header__avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid rgba(255,255,255,0.2);
      flex-shrink: 0;
    }
    .chat-header__avatar img { width: 100%; height: 100%; object-fit: cover; }
    .chat-header__info {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .chat-header__name { font-size: 15px; font-weight: 700; color: #fff; }
    .chat-header__meta {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 2px;
      min-width: 0;
    }
    .chat-header__profile-link {
      font-size: 12px;
      color: rgba(255,255,255,0.6);
      cursor: pointer;
    }
    .chat-header__profile-link:hover { color: rgba(255,255,255,0.85); }
    .chat-header__right {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .v2-debug-btn {
      height: 38px;
      min-width: 42px;
      padding: 0 10px;
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 14px;
      background: rgba(15,18,28,0.9);
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0;
      box-shadow: 0 8px 24px rgba(0,0,0,0.22);
    }
    .v2-debug-btn--radar {
      color: #bfffee;
      border-color: rgba(94,234,212,0.32);
      background: linear-gradient(135deg, rgba(9,26,32,0.94), rgba(24,18,35,0.9));
    }
    .v2-debug-btn:active {
      transform: scale(0.98);
    }
    /* Relationship level badge in chat header — HIDDEN (moved to rel-island bar) */
    .chat-rel-badge { display: none !important; }
    .chat-rel-badge__icon { display: none; }
    .chat-rel-badge__level { display: none; }
    .chat-balance-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 6px 12px;
      border-radius: var(--radius-full);
      background: rgba(255,255,255,0.12);
      backdrop-filter: blur(10px);
      font-size: 13px;
      font-weight: 600;
      color: #fff;
    }
    .chat-balance-btn .coin-icon {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #fff6c7, #fbd279 40%, #d28b1f);
      flex-shrink: 0;
    }
    .chat-message-counter {
      appearance: none;
      border: none;
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 108px;
      padding: 7px 12px;
      border-radius: var(--radius-full);
      background: rgba(156, 183, 255, 0.11);
      border: 1px solid rgba(156, 183, 255, 0.18);
      backdrop-filter: blur(10px);
      color: #e8f0ff;
      cursor: pointer;
      transition: transform 0.2s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    }
    .chat-message-counter:hover {
      transform: translateY(-1px);
    }
    .chat-message-counter.is-vip-inactive {
      background:
        linear-gradient(180deg, rgba(20, 28, 54, 0.82), rgba(16, 20, 40, 0.74)),
        rgba(156, 183, 255, 0.11);
      border-color: rgba(156, 183, 255, 0.22);
      box-shadow: 0 14px 28px rgba(8, 10, 22, 0.28);
    }
    .chat-message-counter.is-vip-active {
      background:
        linear-gradient(135deg, rgba(58, 45, 24, 0.9), rgba(25, 28, 40, 0.82) 48%, rgba(31, 26, 19, 0.88)),
        rgba(255,255,255,0.06);
      border-color: rgba(243, 214, 164, 0.5);
      box-shadow:
        0 0 0 1px rgba(243, 214, 164, 0.14),
        0 16px 34px rgba(10, 8, 16, 0.34),
        0 0 28px rgba(243, 214, 164, 0.12);
    }
    .chat-message-counter__icon {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(156, 183, 255, 0.28), rgba(255, 141, 161, 0.24));
      font-size: 10px;
      flex-shrink: 0;
    }
    .chat-message-counter.is-vip-active .chat-message-counter__icon {
      background: linear-gradient(135deg, rgba(243, 214, 164, 0.42), rgba(255, 141, 161, 0.26));
      box-shadow: 0 0 18px rgba(243, 214, 164, 0.16);
    }
    .chat-message-counter__meta {
      display: flex;
      flex-direction: column;
      min-width: 0;
      line-height: 1.05;
      align-items: flex-start;
    }
    .chat-message-counter__amount {
      font-size: 13px;
      font-weight: 700;
      color: #fff;
    }
    .chat-message-counter__label {
      font-size: 10px;
      color: rgba(232, 240, 255, 0.72);
      white-space: nowrap;
    }
    .chat-message-counter__label-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .chat-message-counter__vip-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
      height: 16px;
      padding: 0 6px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.76);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.05em;
    }
    .chat-message-counter.is-vip-active .chat-message-counter__vip-badge {
      background: linear-gradient(135deg, rgba(243, 214, 164, 0.88), rgba(255, 141, 161, 0.78));
      color: #1a1512;
      box-shadow: 0 8px 18px rgba(243, 214, 164, 0.18);
    }

    /* Chat messages area */
    .chat-messages {
      position: relative;
      z-index: 5;
      flex: 1;
      overflow-y: auto;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      -webkit-overflow-scrolling: touch;
    }
    .chat-messages::-webkit-scrollbar { width: 0; }

    .msg { max-width: 85%; }
    .msg--ai {
      align-self: flex-start;
      color: #fff;
      background: rgba(255,255,255,0.14);
      backdrop-filter: blur(8px);
      border-radius: 16px 16px 16px 4px;
      padding: 10px 14px;
      font-size: 15px;
      line-height: 1.5;
      text-shadow: none;
    }
    .narrative-action {
      color: rgba(200, 170, 255, 0.85);
      font-style: italic;
    }
    .msg--user {
      align-self: flex-end;
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(8px);
      border-radius: 16px 16px 4px 16px;
      padding: 10px 14px;
      font-size: 14px;
      line-height: 1.45;
    }
    .msg--system {
      align-self: center;
      font-size: 12px;
      color: var(--text-secondary);
      background: rgba(255,255,255,0.08);
      padding: 4px 12px;
      border-radius: var(--radius-full);
    }
    .msg--gift {
      align-self: flex-end;
      max-width: none;
      background: none;
      padding: 0;
    }
    .gift-sticker {
      position: relative;
      width: min(40vw, 156px);
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      padding: 11px;
      border-radius: 28px 28px 12px 28px;
      background:
        radial-gradient(circle at 28% 24%, rgba(255,255,255,0.10), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
      border: 1px solid rgba(255,255,255,0.05);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 10px 24px rgba(0,0,0,0.18),
        0 2px 8px rgba(0,0,0,0.10);
      overflow: hidden;
      isolation: isolate;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }
    .gift-sticker__glow {
      position: absolute;
      inset: 12% 14%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 196, 108, 0.18), rgba(255,255,255,0) 72%);
      filter: blur(18px);
      z-index: -1;
      pointer-events: none;
    }
    .gift-sticker__img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 12px 18px rgba(0,0,0,0.22));
    }
    .gift-sticker--emoji {
      background:
        radial-gradient(circle at 28% 24%, rgba(255,255,255,0.09), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    }
    .gift-sticker__emoji {
      font-size: clamp(72px, 18vw, 96px);
      line-height: 1;
      filter: drop-shadow(0 12px 18px rgba(0,0,0,0.24));
    }
    .gift-sticker--tier-base {
      width: min(40vw, 156px);
    }
    .gift-sticker--tier-deluxe {
      width: min(43vw, 170px);
      padding: 12px;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.09),
        0 13px 28px rgba(0,0,0,0.20),
        0 0 0 1px rgba(255,255,255,0.03);
    }
    .gift-sticker--tier-premium {
      width: min(47vw, 184px);
      padding: 13px;
      border-color: rgba(255, 219, 160, 0.12);
      background:
        radial-gradient(circle at 28% 22%, rgba(255,255,255,0.12), transparent 40%),
        linear-gradient(180deg, rgba(255,244,220,0.065), rgba(255,255,255,0.018));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.11),
        0 16px 34px rgba(0,0,0,0.22),
        0 0 26px rgba(255, 196, 108, 0.08);
    }
    .gift-sticker--tier-premium .gift-sticker__glow {
      background: radial-gradient(circle, rgba(255, 196, 108, 0.24), rgba(255,255,255,0) 72%);
    }
    .gift-sticker--variant-0 {
      border-radius: 30px 26px 14px 30px;
    }
    .gift-sticker--variant-0 .gift-sticker__glow {
      inset: 10% 12% 16% 18%;
    }
    .gift-sticker--variant-1 {
      border-radius: 24px 30px 14px 26px;
      transform: translateY(-1px);
    }
    .gift-sticker--variant-1 .gift-sticker__glow {
      inset: 14% 18% 12% 12%;
      background: radial-gradient(circle, rgba(255, 168, 128, 0.20), rgba(255,255,255,0) 74%);
    }
    .gift-sticker--variant-2 {
      border-radius: 32px 24px 16px 28px;
    }
    .gift-sticker--variant-2 .gift-sticker__glow {
      inset: 13% 13% 15% 15%;
      background: radial-gradient(circle, rgba(255, 220, 150, 0.22), rgba(255,255,255,0) 76%);
    }

    .msg--photo {
      padding: 4px;
      background: rgba(255,255,255,0.06);
      border-radius: 12px;
      width: min(74vw, 320px);
      max-width: 82%;
      aspect-ratio: 4 / 5;
      min-height: 210px;
      overflow: hidden;
    }
    .msg--photo .chat-photo {
      width: 100%;
      height: 100%;
      border-radius: 10px;
      display: block;
      cursor: pointer;
      transition: opacity 0.15s;
      background: rgba(255,255,255,0.04);
      object-fit: cover;
      object-position: center;
    }
    .msg--video .chat-video {
      cursor: default;
      background: #000;
      object-fit: cover;
    }
    .msg--photo .chat-photo:active { opacity: 0.8; }
    .msg--photo.msg--photo-error {
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.08);
    }
    .chat-photo-error {
      color: var(--text-secondary);
      font-size: 13px;
      text-align: center;
      padding: 10px;
    }

    /* ══════ PAYWALL CARD ══════ */
    .msg--photo-offer {
      padding: 0 !important;
      background: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      max-width: 82%;
      width: 74vw;
      width: min(74vw, 320px);
    }
    .paywall-card {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 5;
      min-height: 280px;
      border-radius: 14px;
      overflow: hidden;
      background: linear-gradient(135deg, #2a1a3e 0%, #1a1028 50%, #2d1b42 100%);
      border: 1px solid rgba(139, 92, 246, 0.3);
      box-shadow: 0 4px 24px rgba(139, 92, 246, 0.2);
    }
    .paywall-card__blur {
      position: absolute;
      inset: 0;
      background: linear-gradient(145deg,
        rgba(180, 120, 255, 0.15) 0%,
        rgba(100, 60, 180, 0.12) 30%,
        rgba(200, 140, 255, 0.1) 60%,
        rgba(80, 40, 140, 0.18) 100%);
      filter: blur(0px);
      animation: paywall-shimmer 3s ease-in-out infinite;
    }
    @keyframes paywall-shimmer {
      0%, 100% { opacity: 0.7; }
      50% { opacity: 1; }
    }
    .paywall-card__overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      z-index: 2;
    }
    .paywall-card__icon {
      font-size: 36px;
      filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
    }
    .paywall-card__btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 10px 24px;
      border: none;
      border-radius: 24px;
      background: linear-gradient(135deg, #8b5cf6, #a855f7);
      color: #fff;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s;
      box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .paywall-card__btn:hover { transform: scale(1.04); }
    .paywall-card__btn:active { transform: scale(0.97); }
    .paywall-card__btn:disabled {
      opacity: 0.7;
      cursor: wait;
      transform: none;
    }
    .paywall-card__status {
      color: rgba(255,255,255,0.8);
      font-size: 13px;
      font-weight: 500;
    }
    .paywall-card__spinner {
      width: 32px;
      height: 32px;
      border: 3px solid rgba(255,255,255,0.2);
      border-top-color: #a855f7;
      border-radius: 50%;
      animation: paywall-spin 0.8s linear infinite;
    }
    @keyframes paywall-spin {
      to { transform: rotate(360deg); }
    }
    .paywall-card--generating .paywall-card__blur {
      animation: paywall-shimmer 1.5s ease-in-out infinite;
    }

    .photo-viewer-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9999;
      align-items: center;
      justify-content: center;
    }
    .photo-viewer-modal.open { display: flex; }
    .photo-viewer-modal__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.92);
    }
    .photo-viewer-modal__img {
      position: relative;
      max-width: 92vw;
      max-height: 88vh;
      border-radius: 8px;
      object-fit: contain;
      z-index: 1;
    }
    .photo-viewer-modal__close {
      position: absolute;
      top: calc(var(--safe-top, 0px) + 8px);
      right: calc(env(safe-area-inset-right, 0px) + 12px);
      z-index: 10001;
      background: rgba(0,0,0,0.7);
      border: 1px solid rgba(255,255,255,0.3);
      color: #fff;
      font-size: 30px;
      font-weight: 700;
      line-height: 1;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(0,0,0,0.45);
      -webkit-tap-highlight-color: transparent;
    }

    .typing-dots {
      align-self: flex-start;
      display: flex;
      gap: 5px;
      padding: 10px 14px;
      background: rgba(255,255,255,0.08);
      border-radius: 16px;
    }
    .typing-dots span {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: rgba(255,255,255,0.5);
      animation: dotBounce 1.2s infinite ease-in-out;
    }
    .typing-dots span:nth-child(2) { animation-delay: 0.15s; }
    .typing-dots span:nth-child(3) { animation-delay: 0.3s; }
    @keyframes dotBounce {
      0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
      40% { transform: scale(1); opacity: 1; }
    }

    /* Date separator */
    .msg-date {
      align-self: center;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-tertiary);
      background: rgba(255,255,255,0.08);
      padding: 3px 10px;
      border-radius: var(--radius-full);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Chat bottom area */
    .chat-bottom {
      position: relative;
      z-index: 10;
      padding: 0 12px;
      padding-bottom: calc(var(--safe-bottom) + 12px);
      flex-shrink: 0;
    }

    /* Gifts row */
    .chat-gifts {
      display: flex;
      justify-content: space-between;
      gap: 4px;
      padding: 10px 2px 14px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .chat-gifts::-webkit-scrollbar { display: none; }
    .gift-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      min-width: calc((100% - 16px) / 5);
      cursor: pointer;
      transition: transform 0.15s;
      flex: 0 0 calc((100% - 16px) / 5);
      padding: 6px 2px 4px;
      border-radius: 18px;
    }
    .gift-item::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(circle at center, rgba(255,255,255,0.14), rgba(255,255,255,0) 72%);
      opacity: 0;
      transition: opacity 0.2s ease;
      pointer-events: none;
    }
    .gift-item:active { transform: scale(0.9); }
    .gift-item__icon { font-size: 52px; line-height: 1; }
    .gift-item__img { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; }
    .gift-item__price {
      font-size: 14px;
      color: var(--text-secondary);
      font-weight: 600;
      line-height: 1;
    }
    .gift-item--locked {
      opacity: 0.4;
      filter: grayscale(0.5);
      position: relative;
    }
    .gift-item--locked:active { transform: none; }
    .gift-item__lock {
      font-size: 9px;
      color: #f59e0b;
      font-weight: 700;
      background: rgba(245,158,11,0.15);
      padding: 1px 5px;
      border-radius: 6px;
      white-space: nowrap;
    }

    /* Input row */
    .chat-input-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 2px 0 4px;
    }
    
    .chat-input-wrap {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border-radius: var(--radius-xl);
      background: rgba(255,255,255,0.12);
      backdrop-filter: blur(12px);
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      will-change: transform;
      pointer-events: auto;
      z-index: 10;
    }
    .chat-attach-btn {
      flex-shrink: 0;
      color: var(--text-tertiary);
      display: flex;
      align-items: center;
    }
    .chat-attach-btn svg { width: 20px; height: 20px; }
    .chat-input {
      flex: 1;
      border: none;
      background: transparent;
      color: #fff;
      font-size: 15px;
      outline: none;
      min-width: 0;
      -webkit-text-size-adjust: 100%;
      -webkit-appearance: none;
      appearance: none;
      will-change: transform;
    }
    .chat-input::placeholder { color: var(--text-tertiary); }
    .chat-input:focus {
      outline: none;
      caret-color: var(--accent);
    }
    /* iOS Telegram WebApp input fixes applied in .chat-input-wrap above */
    /* Right button: album thumbnail or send */
    .chat-action-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.2s;
      overflow: hidden;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      pointer-events: auto;
      z-index: 10;
    }
    .chat-action-btn.is-album {
      border: 2px solid rgba(255,255,255,0.2);
      background: rgba(0,0,0,0.4);
      padding: 3px;
    }
    .chat-action-btn.is-album img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }
    .chat-action-btn.is-send {
      background: #fff;
      color: #000;
    }
    .chat-action-btn.is-send svg { width: 20px; height: 20px; }

    /* Quick replies disabled in chat */
    .chat-quick-replies {
      display: none;
    }
    .chat-quick-replies::-webkit-scrollbar { display: none; }
    .quick-reply {
      padding: 6px 14px;
      border-radius: var(--radius-full);
      background: rgba(255,255,255,0.10);
      font-size: 13px;
      font-weight: 500;
      color: var(--text-primary);
      white-space: nowrap;
      border: 1px solid rgba(255,255,255,0.08);
      transition: background 0.15s;
    }
    .quick-reply:hover { background: rgba(255,255,255,0.16); }

    .chat-info-text {
      text-align: center;
      font-size: 11px;
      color: var(--text-tertiary);
      padding: 4px 0 2px;
    }

    /* Relationship island — full-width progress bar below header */
    .rel-island {
      position: relative;
      z-index: 10;
      display: none;
      align-items: center;
      gap: 0;
      margin: 0 auto;
      padding: 6px 12px;
      background: transparent;
      cursor: pointer;
      width: 100%;
      flex-shrink: 0;
      box-sizing: border-box;
    }
    .rel-island__lvl {
      font-size: 10px;
      font-weight: 800;
      color: #c084fc;
      background: rgba(168,85,247,0.2);
      border: 1px solid rgba(168,85,247,0.35);
      border-radius: 4px;
      padding: 1px 5px;
      white-space: nowrap;
      line-height: 1.3;
      flex-shrink: 0;
    }
    .rel-island__name {
      font-size: 11px;
      font-weight: 600;
      color: rgba(255,255,255,0.75);
      margin-left: 6px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    /* Track wrapper — holds bar + dots overlay; animation target */
    .rel-island__track-wrap {
      flex: 1;
      margin: 0 8px;
      position: relative;
      display: flex;
      align-items: center;
      min-width: 0;
      height: 8px;
      transition: transform 0.3s ease;
    }
    .rel-island__track-wrap.xp-pulse {
      animation: relBarPulse 0.7s ease;
    }
    @keyframes relBarPulse {
      0%   { transform: scaleY(1); }
      15%  { transform: scaleY(1.8); }
      40%  { transform: scaleY(1.5); }
      100% { transform: scaleY(1); }
    }
    /* The filled bar (overflow hidden so gradient doesn't bleed) */
    .rel-island__bar {
      width: 100%;
      height: 8px;
      border-radius: 4px;
      background: rgba(255,255,255,0.12);
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    .rel-island__fill {
      height: 100%;
      border-radius: 4px;
      background: linear-gradient(90deg, #8b5cf6, #a855f7, #ec4899);
      transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
      box-shadow: 0 0 8px rgba(168,85,247,0.5);
    }
    .rel-island__track-wrap.xp-pulse .rel-island__fill {
      box-shadow: 0 0 14px rgba(168,85,247,0.8), 0 0 24px rgba(236,72,153,0.4);
    }
    /* Dots overlay — sits OUTSIDE overflow:hidden bar, on top */
    .rel-island__dots {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      padding: 0 4px;
      pointer-events: none;
    }
    .rel-island__dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(255,255,255,0.3);
      flex-shrink: 0;
      transition: background 0.3s;
      box-shadow: 0 0 2px rgba(0,0,0,0.4);
    }
    .rel-island__dot.filled {
      background: rgba(255,255,255,0.8);
      box-shadow: 0 0 3px rgba(255,255,255,0.4);
    }
    .rel-island__lvl-next {
      font-size: 10px;
      font-weight: 800;
      color: rgba(255,255,255,0.35);
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 4px;
      padding: 1px 5px;
      white-space: nowrap;
      line-height: 1.3;
      flex-shrink: 0;
    }

    /* Mood bar in modal */
    .mood-bar-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
    .mood-bar-track { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.1); overflow: hidden; }
    .mood-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
    .mood-bar-val { font-size: 16px; font-weight: 700; min-width: 50px; text-align: right; }
    .mood-tips__title { font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }

    
/* ═══════════════════════════════════════════════════════════════════════
       SCREEN: CHATS LIST
       ═══════════════════════════════════════════════════════════════════════ */
    .chats-search-wrap {
      padding: 0 16px 12px;
      flex-shrink: 0;
    }
    .chats-search {
      width: 100%;
      padding: 10px 16px 10px 40px;
      border-radius: var(--radius-full);
      border: 1px solid var(--border);
      background: var(--bg-elevated);
      color: #fff;
      font-size: 14px;
      outline: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: 14px center;
    }
    .chats-search::placeholder { color: var(--text-tertiary); }

    .chats-scroll {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .chat-list-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      cursor: pointer;
      transition: background 0.15s;
    }
    .chat-list-item:hover { background: rgba(255,255,255,0.04); }
    .chat-list-item:active { background: rgba(255,255,255,0.06); }
    .chat-list-item__avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
    }
    .chat-list-item__avatar img { width: 100%; height: 100%; object-fit: cover; }
    .chat-list-item__content {
      flex: 1;
      min-width: 0;
    }
    .chat-list-item__name {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 2px;
    }
    .chat-list-item__last-msg {
      font-size: 13px;
      color: var(--text-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .chat-list-item__meta {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
      flex-shrink: 0;
    }
    .chat-list-item__time {
      font-size: 11px;
      color: var(--text-tertiary);
    }
    .chat-list-item__unread {
      min-width: 20px;
      height: 20px;
      border-radius: 10px;
      background: var(--accent);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 6px;
    }
    .chats-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center;
      color: var(--text-secondary);
    }
    .chats-empty__icon { font-size: 48px; margin-bottom: 16px; }
    .chats-empty__text { font-size: 14px; line-height: 1.5; }