:root {
      --bg: #0b1120;
      --bg2: #0f172a;
      --panel: #131c2e;
      --panel2: #182338;
      --line: #263247;
      --line2: #334155;
      --text: #f8fafc;
      --muted: #94a3b8;
      --accent: #3b82f6;
      --accent2: #2563eb;
      --green: #10b981;
      --red: #ef4444;
      --bubble-me: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
      --bubble-them: #1f2937;
      --shadow: 0 10px 30px rgba(0,0,0,.25);
      --radius: 16px;
      --radius-sm: 12px;
      --sidebar-width: 330px;
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-right: env(safe-area-inset-right, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --safe-left: env(safe-area-inset-left, 0px);
      --bottom-nav-height: 66px;
    }

    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: var(--bg);
      color: var(--text);
      font-family: Arial, sans-serif;
    }

    .hidden { display: none !important; }

    .bottom-nav {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: calc(8px + max(0px, min(var(--safe-bottom), 8px)));
      width: min(calc(100vw - 18px - var(--safe-left) - var(--safe-right)), 520px);
      display: flex;
      gap: 8px;
      padding: 8px;
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(11,16,27,.94), rgba(11,16,27,.88));
      border: 1px solid rgba(148,163,184,.14);
      box-shadow: 0 18px 38px rgba(0,0,0,.26);
      backdrop-filter: blur(18px) saturate(1.1);
      z-index: 3300;
    }

    .bottom-nav.hidden {
      display: none !important;
    }

    .bottom-nav-btn {
      flex: 1 1 0;
      min-width: 0;
      min-height: 50px;
      border-radius: 16px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      background: transparent;
      color: #cbd5e1;
      box-shadow: none;
      font-size: 11px;
      font-weight: 700;
    }

    .bottom-nav-btn span {
      font-size: 18px;
      line-height: 1;
    }

    .bottom-nav-btn.profile-btn {
      overflow: hidden;
    }

    .bottom-nav-avatar {
      width: 24px;
      height: 24px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(51,65,85,.95) center/cover no-repeat;
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 4px 10px rgba(0,0,0,.18);
    }

    .bottom-nav-btn.active {
      background: rgba(59,130,246,.16);
      color: #eff6ff;
      border: 1px solid rgba(96,165,250,.22);
      box-shadow: 0 10px 20px rgba(0,0,0,.14);
    }

    .bottom-panel {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      top: calc(72px + var(--safe-top));
      width: min(calc(92vw - var(--safe-left) - var(--safe-right)), 430px);
      max-height: calc(100dvh - var(--bottom-nav-height) - 110px - var(--safe-top) - var(--safe-bottom));
      overflow-y: auto;
      z-index: 3001;
    }


    .app {
      width: 100%;
      min-height: 100dvh;
      height: 100%;
      display: grid;
      grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
      padding-left: var(--safe-left);
      padding-right: var(--safe-right);
      background:
        var(--theme-overlay, linear-gradient(rgba(7, 10, 18, .48), rgba(7, 10, 18, .66))),
        var(--theme-art, none),
        var(--bg);
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: scroll;
      transition: background .42s ease, background-color .42s ease, filter .42s ease;
      will-change: background, filter;
    }

    .sidebar {
      height: 100dvh;
      overflow-y: auto;
      border-right: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(11,16,27,.86), rgba(11,16,27,.72));
      backdrop-filter: blur(18px) saturate(1.15);
      padding:
        calc(14px + var(--safe-top))
        14px
        calc(14px + var(--safe-bottom));
    }

    .brand {
      font-size: 24px;
      font-weight: 800;
      margin: 2px 4px 14px;
      letter-spacing: .2px;
    }

    .card {
      background: linear-gradient(180deg, rgba(17,24,39,.78), rgba(15,23,42,.64));
      backdrop-filter: blur(16px) saturate(1.12);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 14px;
      margin-bottom: 12px;
      box-shadow: var(--shadow);
    }

    .card h3 {
      margin: 0 0 12px;
      font-size: 15px;
    }

    .row {
      display: flex;
      gap: 8px;
    }

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

    input, button, select {
      width: 100%;
      min-height: 44px;
      border-radius: 12px;
      font-size: 14px;
    }

    input, select {
      border: 1px solid var(--line2);
      background: #0b1220;
      color: var(--text);
      padding: 11px 12px;
      outline: none;
    }

    input:focus, select:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(59,130,246,.15);
    }

    button {
      border: none;
      cursor: pointer;
      color: white;
      font-weight: 700;
      background: linear-gradient(180deg, var(--accent), var(--accent2));
      padding: 10px 14px;
    }

    button.secondary {
      background: linear-gradient(180deg, #64748b, #475569);
    }

    button.green {
      background: linear-gradient(180deg, #22c55e, #16a34a);
    }

    button.red {
      background: linear-gradient(180deg, #ef4444, #dc2626);
    }

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

    .main {
      height: 100dvh;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      overflow: hidden;
      min-width: 0;
    }

    .topbar {
      border-bottom: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(10,14,24,.78), rgba(10,14,24,.62));
      backdrop-filter: blur(8px);
      padding:
        calc(14px + var(--safe-top))
        calc(18px + var(--safe-right))
        14px
        calc(18px + var(--safe-left));
      min-width: 0;
    }


    .topbar-row {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .back-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      width: 44px;
      height: 44px;
      padding: 0;
      border-radius: 12px;
      font-size: 20px;
      flex-shrink: 0;
    }

    .chat-sections {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .chat-section-title {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #93c5fd;
      margin: 2px 2px 0;
    }

    .chat-title {
      font-size: 20px;
      font-weight: 800;
      max-width: none;
      white-space: nowrap;
    }

    .typing {
      min-height: 18px;
      margin-top: 4px;
      color: #93c5fd;
      font-size: 13px;
    }

    .messages {
      overflow-y: auto;
      min-height: 0;
      padding:
        14px
        calc(14px + var(--safe-right))
        12px
        calc(14px + var(--safe-left));
      display: flex;
      flex-direction: column;
      gap: 6px;
      scroll-behavior: smooth;
    }

    .message {
      display: flex;
      gap: 8px;
      align-items: flex-end;
      width: 100%;
      margin: 0;
    }

    .message.mine { justify-content: flex-end; }
    .message.theirs { justify-content: flex-start; }

    .avatar, .message-avatar {
      width: 38px;
      height: 38px;
      border-radius: 999px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #334155 center/cover no-repeat;
      color: white;
      font-weight: 700;
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 6px 16px rgba(0,0,0,.2);
    }

    .message-avatar {
      width: 34px;
      height: 34px;
      font-size: 13px;
      cursor: pointer;
      align-self: flex-end;
      margin-bottom: 2px;
    }

    .avatar.big {
      width: 52px;
      height: 52px;
      font-size: 18px;
    }

    .stack {
      max-width: min(78%, 560px);
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .message.mine .stack { align-items: flex-end; }
    .message.theirs .stack { align-items: flex-start; }

    .message.mine + .message.mine,
    .message.theirs + .message.theirs {
      margin-top: 2px;
    }

    .message.mine .meta,
    .message.mine .stack {
      padding-right: 2px;
    }

    .message.theirs .meta,
    .message.theirs .stack {
      padding-left: 1px;
    }

    .bubble > :last-child {
      margin-bottom: 0;
    }

    .message-text {
      white-space: pre-wrap;
    }

    .meta {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap;
      font-size: 11px;
      color: #cbd5e1;
      padding: 0 2px 1px;
      line-height: 1.15;
    }

    .author {
      font-weight: 700;
    }

    .time {
      color: var(--muted);
    }

    .bubble {
      border-radius: 18px;
      padding: 7px 10px 8px;
      border: 1px solid rgba(255,255,255,.08);
      word-break: break-word;
      line-height: 1.28;
      font-size: 14px;
      box-shadow: 0 8px 18px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter: blur(12px) saturate(1.06);
      max-width: 100%;
      min-width: 44px;
    }

    .message.mine .bubble {
      background: var(--bubble-me);
      color: white;
      border-bottom-right-radius: 6px;
      border-top-right-radius: 14px;
      margin-left: auto;
    }

    .message.theirs .bubble {
      background: var(--bubble-them);
      color: var(--text);
      border-bottom-left-radius: 6px;
      border-top-left-radius: 14px;
      margin-right: auto;
    }

    .message-media {
      margin-top: 6px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: flex-start;
    }

    .message-media img,
    .message-media video {
      max-width: min(280px, 100%);
      width: 100%;
      border-radius: 14px;
      display: block;
      background: #0b1220;
    }

    .message-media audio {
      width: min(280px, 100%);
      max-width: 100%;
    }

    .message-media a {
      color: #bfdbfe;
      text-decoration: none;
      word-break: break-all;
    }

    .message-media a:hover {
      text-decoration: underline;
    }

    .system-note {
      color: var(--muted);
      font-size: 14px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px dashed var(--line2);
      background: rgba(15,23,42,.55);
      display: inline-block;
    }

    .composer {
      border-top: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(10,14,24,.88), rgba(10,14,24,.78));
      padding:
        8px
        calc(12px + var(--safe-right))
        max(6px, min(var(--safe-bottom), 8px))
        calc(12px + var(--safe-left));
      margin-bottom: calc(var(--bottom-nav-height) + 8px);
    }

    .composer-top {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
      align-items: center;
      flex-wrap: wrap;
    }

    .attach-inline {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .file-chip {
      display: none;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid var(--line2);
      background: #0b1220;
      font-size: 12px;
      color: #cbd5e1;
      max-width: 100%;
    }

    .file-chip.show {
      display: inline-flex;
    }

    .composer-row {
      display: flex;
      gap: 10px;
      align-items: flex-end;
      width: 100%;
      min-width: 0;
    }

    .composer-row > * {
      min-width: 0;
      flex-shrink: 0;
    }

    #messageInput {
      display: block;
      flex: 1 1 auto;
      width: 100%;
      min-width: 0;
      min-height: 44px;
      height: 44px;
      max-height: 44px;
      font-size: 15px;
      line-height: 1.2;
      padding: 0 14px;
      border-radius: 22px;
      overflow: hidden;
      font-family: inherit;
      color: var(--composer-text-color, #ffffff);
      caret-color: var(--composer-text-color, #ffffff);
      background: rgba(9,14,26,.96);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.08);
      -webkit-appearance: none;
      appearance: none;
    }

    .attach-inline,
    .ghost-btn {
      flex: 0 0 36px;
      width: 36px;
      min-width: 36px;
    }

    #sendBtn {
      flex: 0 0 40px;
      width: 40px;
      min-width: 40px;
    }

    #messageInput::placeholder {
      color: color-mix(in srgb, var(--composer-text-color, #ffffff) 72%, #64748b 28%);
    }

    .ghost-btn {
      border-radius: 14px;
      min-height: 36px;
      padding: 0;
      background: linear-gradient(180deg, #334155, #1e293b);
      width: 36px;
      min-width: 36px;
      box-shadow: 0 8px 18px rgba(0,0,0,.16);
      font-size: 16px;
    }

    #sendBtn {
      min-height: 40px;
      min-width: 40px;
      width: 40px;
      padding: 0;
      font-size: 18px;
      white-space: nowrap;
      border-radius: 16px;
      box-shadow: 0 12px 24px rgba(37,99,235,.24), inset 0 1px 0 rgba(255,255,255,.16);
    }

    .emoji-picker {
      position: absolute;
      left: 0;
      bottom: calc(100% + 10px);
      width: min(320px, calc(100vw - 24px));
      padding: 10px;
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(10,14,24,.97), rgba(10,14,24,.92));
      border: 1px solid rgba(148,163,184,.18);
      box-shadow: 0 20px 46px rgba(0,0,0,.34);
      backdrop-filter: blur(18px);
      display: none;
      z-index: 50;
    }

    .emoji-picker.show {
      display: block;
      animation: sectionFadeIn .18s ease;
    }

    .emoji-tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }

    .emoji-tab {
      width: auto;
      min-width: 44px;
      min-height: 34px;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(148,163,184,.08);
      color: #cbd5e1;
      font-size: 16px;
      box-shadow: none;
    }

    .emoji-tab.active {
      background: rgba(59,130,246,.18);
      border: 1px solid rgba(96,165,250,.22);
      color: #eff6ff;
    }

    .emoji-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 6px;
    }

    .emoji-btn {
      min-height: 38px;
      height: 38px;
      border-radius: 12px;
      padding: 0;
      font-size: 20px;
      background: rgba(148,163,184,.08);
      border: 1px solid rgba(148,163,184,.12);
      box-shadow: none;
    }

    .emoji-btn:hover {
      background: rgba(148,163,184,.14);
    }

    .composer-row {
      position: relative;
    }

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

    .item {
      padding: 10px 11px;
      background: rgba(11,18,32,.92);
      border: 1px solid var(--line);
      border-radius: 14px;
      cursor: pointer;
      transition: .15s ease;
      touch-action: manipulation;
    }

    .item:hover {
      background: #101a2d;
      transform: translateY(-1px);
    }

    .item.active {
      border-color: #60a5fa;
      background: linear-gradient(180deg, #14213d, #122036);
      box-shadow: 0 0 0 1px rgba(96,165,250,.15);
    }

    .chat-section {
      position: relative;
      padding: 10px;
      border-radius: 18px;
      background: rgba(9,14,26,.34);
      border: 1px solid rgba(148,163,184,.10);
      animation: sectionFadeIn .2s ease;
    }

    .chat-section.public-group {
      box-shadow: inset 0 0 0 1px rgba(96,165,250,.06);
    }

    .chat-section.direct-group {
      box-shadow: inset 0 0 0 1px rgba(236,72,153,.06);
    }

    .chat-section.public-group .chat-section-title { color: #93c5fd; }
    .chat-section.direct-group .chat-section-title { color: #f9a8d4; }

    .screen-animating .sidebar-page:not(.hidden),
    .screen-animating .main,
    .screen-animating .messages {
      animation: sectionSlideIn .22s ease;
    }

    @keyframes sectionFadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes sectionSlideIn {
      from { opacity: 0; transform: translateX(14px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .item-title {
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 4px;
      white-space: nowrap;
      max-width: none;
    }

    .muted {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .preview {
      margin-top: 4px;
      color: #cbd5e1;
      font-size: 12px;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .profile-head {
      display: flex;
      gap: 12px;
      align-items: center;
      margin-bottom: 12px;
    }

    .profile-name {
      font-weight: 800;
      font-size: 15px;
      word-break: break-word;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 11px;
      color: #bfdbfe;
      background: rgba(37,99,235,.15);
      border: 1px solid rgba(96,165,250,.22);
    }

    .title-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
    }

    .hint {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
      margin-top: 8px;
    }

    .color-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .color-row input[type="color"] {
      width: 52px;
      min-width: 52px;
      padding: 4px;
      height: 44px;
      border-radius: 12px;
      cursor: pointer;
    }

    .join-lock {
      margin-left: 6px;
      font-size: 12px;
      color: #fbbf24;
    }

    .remember-row {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--text);
      margin-top: 2px;
    }

    .remember-row input[type="checkbox"] {
      width: 18px;
      height: 18px;
      min-height: 18px;
      accent-color: var(--accent);
      cursor: pointer;
    }

    .chat-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .unread-badge {
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, #22c55e, #16a34a);
      color: white;
      font-size: 11px;
      font-weight: 800;
      flex-shrink: 0;
      box-shadow: 0 6px 14px rgba(34,197,94,.28);
    }

    .sidebar-actions {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
    }

    .popup-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(2, 6, 23, .38);
      z-index: 1800;
      backdrop-filter: blur(3px);
    }

    .popup-card {
      position: fixed;
      top: calc(72px + var(--safe-top));
      left: 50%;
      transform: translateX(-50%);
      width: min(calc(92vw - var(--safe-left) - var(--safe-right)), 430px);
      max-height: calc(100dvh - 96px - var(--safe-top) - var(--safe-bottom));
      overflow-y: auto;
      z-index: 1900;
      box-shadow: 0 20px 60px rgba(0,0,0,.45);
    }

    .popup-close {
      width: auto;
      min-width: 40px;
      min-height: 36px;
      padding: 0 12px;
      border-radius: 10px;
      font-size: 18px;
      line-height: 1;
    }

    .reply-preview {
      margin: 0 0 6px;
      padding: 6px 9px;
      border-radius: 12px;
      background: rgba(255,255,255,.08);
      border-left: 3px solid rgba(147,197,253,.95);
      font-size: 11px;
      line-height: 1.25;
      cursor: pointer;
    }

    .message.theirs .reply-preview {
      background: rgba(255,255,255,.04);
    }

    .reply-preview-author {
      font-weight: 700;
      margin-bottom: 2px;
      color: #bfdbfe;
    }

    .reply-preview-text {
      opacity: .9;
      word-break: break-word;
    }

    .message-source-highlight .bubble {
      box-shadow: 0 0 0 2px rgba(96,165,250,.9), 0 8px 18px rgba(0,0,0,.14);
    }

    .jump-bottom-btn {
      position: fixed;
      right: calc(16px + var(--safe-right));
      bottom: calc(88px + var(--safe-bottom));
      z-index: 1600;
      width: 48px;
      height: 48px;
      min-height: 48px;
      padding: 0;
      border-radius: 999px;
      box-shadow: 0 14px 26px rgba(0,0,0,.28);
      font-size: 20px;
    }

    .message-action {
      display: none;
    }

    .profile-settings {
      display: block;
      margin-top: 10px;
      animation: sectionFadeIn .22s ease;
    }

    .profile-settings.show {
      display: block;
    }

    .profile-tag-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .profile-tag-prefix {
      min-width: 36px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      border: 1px solid var(--line2);
      background: #0b1220;
      color: #cbd5e1;
      font-weight: 800;
    }

    .bubble-header {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 4px;
      min-width: 0;
    }

    .bubble-tag {
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      padding: 2px 7px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .02em;
      background: rgba(255,255,255,.18);
      border: 1px solid rgba(255,255,255,.16);
      color: rgba(255,255,255,.96);
      backdrop-filter: blur(10px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-shadow: 0 4px 10px rgba(0,0,0,.12);
      flex: 0 1 auto;
    }

    .message.theirs .bubble-tag {
      background: rgba(148,163,184,.16);
      color: #e2e8f0;
    }

    .remember-row {
      display: none !important;
    }

    .profile-notify-section {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--line);
    }

    .profile-notify-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 8px;
      max-height: 260px;
      overflow-y: auto;
      padding-right: 2px;
    }

    .profile-notify-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(11,18,32,.72);
    }

    .profile-notify-title {
      font-size: 13px;
      font-weight: 700;
      min-width: 0;
      max-width: none;
      white-space: nowrap;
    }

    .profile-notify-type {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px;
    }

    

    .mention-text {
      color: #bfdbfe;
      font-weight: 800;
      cursor: pointer;
      text-decoration: none;
    }

    .mention-text.mention-me {
      color: #fde68a;
      text-shadow: 0 0 10px rgba(253,230,138,.18);
    }


    .mention-text {
      display: inline;
      vertical-align: baseline;
      position: static;
      white-space: normal;
      line-height: inherit;
    }

    .bubble-tag {
      position: static;
      z-index: 1;
      max-width: min(45%, 180px);
      margin-left: auto;
      flex: 0 0 auto;
    }

    .bubble-author {
      min-height: 14px;
      line-height: 1.15;
      padding-top: 0;
      min-width: 0;
      flex: 1 1 auto;
    }

    .mention-suggestions {
      position: absolute;
      left: 46px;
      right: 92px;
      bottom: calc(100% + 10px);
      display: none;
      flex-direction: column;
      gap: 6px;
      max-height: 220px;
      overflow-y: auto;
      padding: 8px;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(10,14,24,.97), rgba(10,14,24,.92));
      border: 1px solid rgba(148,163,184,.18);
      box-shadow: 0 20px 46px rgba(0,0,0,.34);
      backdrop-filter: blur(18px);
      z-index: 55;
    }

    .mention-suggestions.show {
      display: flex;
      animation: sectionFadeIn .18s ease;
    }

    .mention-suggestion {
      width: 100%;
      min-height: 42px;
      border-radius: 12px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(148,163,184,.08);
      border: 1px solid rgba(148,163,184,.12);
      text-align: left;
      box-shadow: none;
    }

    .mention-suggestion.active {
      background: rgba(59,130,246,.18);
      border-color: rgba(96,165,250,.24);
    }

    .mention-suggestion-avatar {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: #334155 center/cover no-repeat;
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      border: 1px solid rgba(255,255,255,.12);
    }

    .mention-suggestion-meta {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .mention-suggestion-title {
      font-size: 13px;
      font-weight: 800;
      color: #eff6ff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .mention-suggestion-subtitle {
      font-size: 11px;
      color: #cbd5e1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .bubble-author {
      font-size: 11px;
      font-weight: 800;
      margin-bottom: 0;
      opacity: .92;
      min-width: 0;
      flex: 1 1 auto;
      word-break: break-word;
    }

    .message.mine .bubble-author {
      color: rgba(255,255,255,.92);
    }

    .message.theirs .bubble-author {
      color: #93c5fd;
    }

    .user-profile-card .profile-head {
      align-items: center;
      margin-bottom: 14px;
    }

    .user-profile-status {
      margin-top: 4px;
      font-size: 12px;
      color: var(--muted);
    }

    .clickable-avatar {
      cursor: pointer;
    }

    .profile-notify-switch {
      width: 18px;
      height: 18px;
      min-height: 18px;
      accent-color: var(--accent);
      cursor: pointer;
      flex-shrink: 0;
    }

    .sidebar::-webkit-scrollbar,
    .messages::-webkit-scrollbar {
      width: 10px;
    }

    .sidebar::-webkit-scrollbar-thumb,
    .messages::-webkit-scrollbar-thumb {
      background: #273449;
      border-radius: 999px;
      border: 2px solid transparent;
      background-clip: padding-box;
    }


    #voiceRecordBtn {
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      touch-action: none;
      flex: 0 0 40px;
      width: 40px;
      min-width: 40px;
      order: 3;
    }

    #voiceRecordBtn.is-recording {
      background: linear-gradient(180deg, #ef4444, #dc2626);
      box-shadow: 0 10px 22px rgba(239,68,68,.28);
    }

    #voiceRecordBtn.is-locked {
      background: linear-gradient(180deg, #f59e0b, #d97706);
      box-shadow: 0 10px 22px rgba(245,158,11,.28);
    }

    #sendBtn {
      order: 2;
    }

    #messageInput {
      order: 1;
    }



    .messages.voice-chat-mode {
      display: block !important;
      height: 100% !important;
      overflow: hidden !important;
      overscroll-behavior: contain !important;
      padding-bottom: 0 !important;
    }

    .messages.voice-chat-mode > .voice-panel,
    .messages.voice-chat-mode .voice-panel {
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
      min-height: 0 !important;
      overflow: hidden !important;
      gap: 10px !important;
    }

    .messages.voice-chat-mode .voice-room-card:last-child {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      display: flex !important;
      flex-direction: column !important;
    }

    .messages.voice-chat-mode #voiceTextFeed,
    .messages.voice-chat-mode .voice-text-feed {
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
      flex: 1 1 auto !important;
      min-height: 0 !important;
      height: 100% !important;
      max-height: none !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      overscroll-behavior: contain !important;
      -webkit-overflow-scrolling: touch !important;
      padding-right: 4px !important;
    }

    .messages.voice-chat-mode #voiceTextFeed .message,
    .messages.voice-chat-mode .voice-text-feed .message {
      gap: 5px !important;
      margin: 0 !important;
    }

    .messages.voice-chat-mode #voiceTextFeed .stack,
    .messages.voice-chat-mode .voice-text-feed .stack {
      max-width: min(80%, 300px) !important;
      gap: 2px !important;
    }

    .messages.voice-chat-mode #voiceTextFeed .message-avatar,
    .messages.voice-chat-mode .voice-text-feed .message-avatar {
      width: 22px !important;
      height: 22px !important;
      font-size: 10px !important;
    }

    .messages.voice-chat-mode #voiceTextFeed .bubble,
    .messages.voice-chat-mode .voice-text-feed .bubble {
      padding: 4px 7px !important;
      border-radius: 10px !important;
      font-size: 11px !important;
      line-height: 1.14 !important;
      min-width: 0 !important;
      box-shadow: 0 6px 14px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.06) !important;
    }

    .messages.voice-chat-mode #voiceTextFeed .bubble-header,
    .messages.voice-chat-mode .voice-text-feed .bubble-header {
      margin-bottom: 3px !important;
      gap: 4px !important;
    }

    .messages.voice-chat-mode #voiceTextFeed .bubble-author,
    .messages.voice-chat-mode .voice-text-feed .bubble-author {
      font-size: 9px !important;
      min-height: 0 !important;
      padding-top: 0 !important;
      margin-bottom: 0 !important;
    }

    .messages.voice-chat-mode #voiceTextFeed .reply-preview,
    .messages.voice-chat-mode .voice-text-feed .reply-preview {
      padding: 4px 6px !important;
      font-size: 9px !important;
      margin-bottom: 4px !important;
    }

    .messages.voice-chat-mode #voiceTextFeed .message-media,
    .messages.voice-chat-mode .voice-text-feed .message-media {
      margin-top: 4px !important;
      gap: 4px !important;
    }

    .messages.voice-chat-mode #voiceTextFeed .message-media audio,
    .messages.voice-chat-mode .voice-text-feed .message-media audio {
      width: min(150px, 100%) !important;
      max-width: 100% !important;
      height: 28px !important;
    }


    .voice-recorder-panel {
      display: none;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 8px 10px;
      border-radius: 16px;
      border: 1px solid rgba(239,68,68,.22);
      background: linear-gradient(180deg, rgba(28,12,18,.96), rgba(18,10,16,.9));
      box-shadow: 0 10px 24px rgba(0,0,0,.22);
      overflow: hidden;
    }
    .voice-recorder-panel.show { display: flex; }
    .voice-recorder-status {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
      flex: 0 0 auto;
    }
    .voice-recorder-title {
      font-size: 12px;
      font-weight: 800;
      color: #fecaca;
      white-space: nowrap;
    }
    .voice-recorder-subtitle {
      font-size: 10px;
      color: #fda4af;
      white-space: nowrap;
    }
    .voice-record-lock-hint {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: flex-end;
      color: #f8fafc;
      font-size: 11px;
      overflow: hidden;
    }
    .voice-record-lock-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: #fff;
      font-weight: 700;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .voice-record-swipe-track {
      position: relative;
      flex: 1 1 auto;
      min-width: 80px;
      max-width: 180px;
      height: 26px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.04);
      overflow: hidden;
    }
    .voice-record-swipe-track::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
      animation: voiceSwipeGlow 1.3s linear infinite;
      opacity: .8;
    }
    .voice-record-swipe-arrow {
      position: absolute;
      left: 8px;
      top: 50%;
      transform: translateY(-50%);
      color: #fda4af;
      font-size: 14px;
      font-weight: 800;
      animation: voiceSwipeArrow 1.1s ease-in-out infinite;
    }
    .voice-record-swipe-text {
      position: absolute;
      left: 28px;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      color: #fecdd3;
      font-size: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .voice-recorder-panel.is-locked .voice-record-swipe-track { display: none; }
    .voice-recorder-panel.is-locked .voice-record-lock-pill {
      background: rgba(245,158,11,.18);
      border-color: rgba(245,158,11,.24);
      color: #fde68a;
    }
    .voice-record-wave {
      display: flex;
      align-items: flex-end;
      gap: 3px;
      height: 26px;
      min-width: 84px;
      flex: 0 0 auto;
    }
    .voice-record-bar {
      width: 4px;
      height: 6px;
      border-radius: 999px;
      background: linear-gradient(180deg, #fda4af, #ef4444);
      transition: height .12s ease, opacity .12s ease, transform .12s ease;
      opacity: .9;
    }
    .voice-record-timer {
      min-width: 42px;
      font-variant-numeric: tabular-nums;
      font-size: 12px;
      font-weight: 800;
      color: #fff;
      text-align: right;
      flex: 0 0 auto;
    }
    .voice-message-player {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      width: min(250px, 100%);
      padding: 2px 0;
    }
    .voice-message-play {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,.16);
      border: 1px solid rgba(255,255,255,.18);
      color: #fff;
      flex: 0 0 auto;
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
      box-shadow: 0 6px 14px rgba(0,0,0,.14);
    }
    .voice-message-play.is-playing {
      background: rgba(255,255,255,.24);
    }
    .voice-message-wave {
      display: flex;
      align-items: flex-end;
      gap: 2px;
      flex: 1 1 auto;
      min-width: 0;
      height: 20px;
    }
    .voice-message-wave span {
      flex: 1 1 0;
      min-width: 2px;
      border-radius: 999px;
      background: rgba(255,255,255,.68);
      opacity: .95;
    }
    .voice-message-duration {
      font-size: 10px;
      color: inherit;
      opacity: .88;
      flex: 0 0 auto;
      white-space: nowrap;
    }
    .voice-message-player audio {
      display: block;
      width: 0;
      height: 0;
      opacity: 0;
      pointer-events: none;
    }
    @keyframes voiceSwipeArrow {
      0% { transform: translateY(-50%) translateY(0); opacity: .6; }
      50% { transform: translateY(-50%) translateY(-6px); opacity: 1; }
      100% { transform: translateY(-50%) translateY(0); opacity: .6; }
    }
    @keyframes voiceSwipeGlow {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }

    @media (max-width: 900px) {
      .app {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
      }

      .app:not(.chat-open) .main {
        display: none;
      }

      .app.chat-open {
        grid-template-rows: 1fr;
      }

      .app.chat-open .sidebar {
        display: none;
      }

      .app:not(.chat-open) .sidebar {
        max-height: 100dvh;
        height: 100dvh;
        border-bottom: none;
      }


      .sidebar {
        height: auto;
        max-height: 44dvh;
        border-right: none;
        border-bottom: 1px solid var(--line);
      }

      .stack {
        max-width: 96%;
      }
    }

    @media (max-width: 640px) {
      .sidebar {
        padding:
          calc(10px + var(--safe-top))
          10px
          calc(10px + var(--safe-bottom));
        max-height: 46dvh;
      }

      .brand {
        font-size: 20px;
        margin-bottom: 10px;
      }

      .card {
        padding: 12px;
        border-radius: 16px;
      }

      .topbar {
        padding:
          calc(12px + var(--safe-top))
          calc(14px + var(--safe-right))
          12px
          calc(14px + var(--safe-left));
      }

      .chat-title {
        font-size: 18px;
      }

      .messages {
        padding:
          10px
          calc(10px + var(--safe-right))
          8px
          calc(10px + var(--safe-left));
      }

      .stack {
        max-width: 94%;
      }

      .message-avatar {
        width: 32px;
        height: 32px;
      }

      .bubble {
        padding: 7px 10px 8px;
        font-size: 14px;
      }

      .composer {
        padding:
          7px
          calc(10px + var(--safe-right))
          max(4px, min(var(--safe-bottom), 6px))
          calc(10px + var(--safe-left));
        margin-bottom: calc(var(--bottom-nav-height) + 6px);
      }

      .attach-inline,
      .ghost-btn {
        flex-basis: 34px;
        width: 34px;
        min-width: 34px;
      }

      #sendBtn {
        min-height: 38px;
        width: 38px;
        flex-basis: 38px;
        font-size: 17px;
        padding: 0;
      }

      #messageInput {
        min-height: 40px;
        height: 40px;
        max-height: 40px;
        padding: 0 13px;
        font-size: 16px;
      }

      .row {
        flex-direction: column;
      }
    }
  
    body.theme-graphite {
      --bg: #0a0d12;
      --bg2: #11161d;
      --panel: #151b23;
      --panel2: #1b2330;
      --line: #2a3341;
      --line2: #364152;
      --text: #eef2f7;
      --muted: #95a1b3;
      --accent: #64748b;
      --accent2: #475569;
      --bubble-me: linear-gradient(135deg, #3f4d63 0%, #263241 100%);
      --bubble-them: #202734;
    }

    body.theme-violet {
      --bg: #120d24;
      --bg2: #1c1235;
      --panel: #22193f;
      --panel2: #2d2150;
      --line: #47336d;
      --line2: #5a4389;
      --text: #f7f3ff;
      --muted: #c4b5fd;
      --accent: #8b5cf6;
      --accent2: #7c3aed;
      --bubble-me: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
      --bubble-them: #31244f;
    }

    body.theme-neon {
      --bg: #050816;
      --bg2: #0b1024;
      --panel: #0f1735;
      --panel2: #15214b;
      --line: #1f3b65;
      --line2: #24508a;
      --text: #e0f2fe;
      --muted: #7dd3fc;
      --accent: #06b6d4;
      --accent2: #2563eb;
      --bubble-me: linear-gradient(135deg, #06b6d4 0%, #2563eb 100%);
      --bubble-them: #142447;
    }

    .personalization-section {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--line);
    }

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

    .pattern-option {
      min-height: 58px;
      border-radius: 14px;
      border: 1px solid var(--line2);
      background: #0b1220;
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
    }

    .pattern-option.active {
      border-color: #93c5fd;
      box-shadow: 0 0 0 2px rgba(147,197,253,.18);
      transform: translateY(-1px);
    }

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

    .theme-option {
      position: relative;
      min-height: 96px;
      border-radius: 16px;
      border: 1px solid rgba(148,163,184,.18);
      background:
        linear-gradient(180deg, rgba(7,10,18,.12), rgba(7,10,18,.60)),
        var(--theme-preview, linear-gradient(135deg, #0f172a, #1e293b));
      background-size: cover;
      background-position: center;
      color: #f8fafc;
      cursor: pointer;
      font-weight: 800;
      text-align: left;
      overflow: hidden;
      padding: 12px;
      isolation: isolate;
      box-shadow: 0 10px 24px rgba(0,0,0,.18);
      transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, filter .14s ease;
    }

    .theme-option::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 38%, rgba(0,0,0,.18));
      pointer-events: none;
      z-index: 0;
    }

    .theme-option > * {
      position: relative;
      z-index: 1;
    }

    .theme-option:hover {
      filter: brightness(1.04);
    }

    .theme-option.active {
      border-color: rgba(147,197,253,.95);
      box-shadow: 0 0 0 2px rgba(147,197,253,.22), 0 14px 30px rgba(0,0,0,.24);
      transform: translateY(-1px);
    }

    .theme-option-title {
      display: block;
      font-size: 15px;
      line-height: 1.15;
      margin-bottom: 6px;
      text-shadow: 0 2px 10px rgba(0,0,0,.28);
    }

    .theme-option small {
      display: block;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.25;
      opacity: .96;
      max-width: 92%;
      color: rgba(248,250,252,.92);
      text-shadow: 0 1px 8px rgba(0,0,0,.26);
      margin-top: 0;
    }

    .theme-option-badge {
      position: absolute;
      right: 10px;
      top: 10px;
      min-width: 28px;
      height: 28px;
      padding: 0 8px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(7,10,18,.42);
      border: 1px solid rgba(255,255,255,.16);
      backdrop-filter: blur(10px);
      font-size: 14px;
      box-shadow: 0 6px 16px rgba(0,0,0,.18);
    }

    .theme-option[data-theme-value="classic"] {
      --theme-preview: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    }

    .theme-option[data-theme-value="graphite"] {
      --theme-preview: linear-gradient(135deg, #101419 0%, #2b3441 100%);
    }

    .theme-option[data-theme-value="violet"] {
      --theme-preview: linear-gradient(135deg, #241244 0%, #6d28d9 100%);
    }

    .theme-option[data-theme-value="neon"] {
      --theme-preview: linear-gradient(135deg, #07111f 0%, #0ea5e9 55%, #2563eb 100%);
    }

    .theme-option[data-theme-value="tavern"] {
      --theme-preview: url("/static/themes/theme_tavern.webp");
    }

    .theme-option[data-theme-value="stars"] {
      --theme-preview: url("/static/themes/theme_stars.webp");
    }

    .theme-option[data-theme-value="games"] {
      --theme-preview: url("/static/themes/theme_games.webp");
    }

    .theme-option[data-theme-value="cartoon"] {
      --theme-preview: url("/static/themes/theme_cartoon.webp");
    }

    .theme-option[data-theme-value="fantasy"] {
      --theme-preview: url("/static/themes/theme_fantasy.webp");
    }

    .theme-option[data-theme-value="horror"] {
      --theme-preview: url("/static/themes/theme_horror.webp");
    }

    .bubble[class*="pattern-"]::before {
      content: "";
      position: absolute;
      inset: -24%;
      pointer-events: none;
      opacity: .24;
      background-repeat: repeat;
      background-size: 54px 54px;
      mix-blend-mode: screen;
      border-radius: inherit;
      transform: rotate(-18deg) scale(1.08);
      transform-origin: center;
    }

    .bubble {
      position: relative;
      overflow: hidden;
    }

    .bubble.pattern-none::before {
      display: none;
    }

    .bubble.pattern-stars::before {
      background-image:
        radial-gradient(circle at 10px 10px, rgba(255,255,255,.88) 0 1.8px, transparent 1.8px),
        radial-gradient(circle at 26px 18px, rgba(255,255,255,.62) 0 1.4px, transparent 1.4px),
        radial-gradient(circle at 18px 30px, rgba(255,255,255,.58) 0 1.2px, transparent 1.2px);
    }

    .bubble.pattern-hearts::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ctext x='8' y='26' font-size='18'%3E%E2%9D%A4%EF%B8%8F%3C/text%3E%3C/svg%3E");
    }

    .bubble.pattern-sparkles::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ctext x='8' y='26' font-size='18'%3E%E2%9C%A8%3C/text%3E%3C/svg%3E");
    }

    .bubble.pattern-skulls::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ctext x='8' y='26' font-size='18'%3E%F0%9F%92%80%3C/text%3E%3C/svg%3E");
    }

    .bubble.pattern-lightning::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ctext x='8' y='26' font-size='18'%3E%E2%9A%A1%3C/text%3E%3C/svg%3E");
    }

    
    .bubble.pattern-animals::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ctext x='6' y='26' font-size='18'%3E%F0%9F%90%BE%3C/text%3E%3C/svg%3E");
    }

    .bubble.pattern-cats::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ctext x='6' y='26' font-size='18'%3E%F0%9F%90%B1%3C/text%3E%3C/svg%3E");
    }

    .bubble.pattern-dogs::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ctext x='6' y='26' font-size='18'%3E%F0%9F%90%B6%3C/text%3E%3C/svg%3E");
    }

    .bubble.pattern-lamps::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ctext x='6' y='26' font-size='18'%3E%F0%9F%92%A1%3C/text%3E%3C/svg%3E");
    }

    .bubble.pattern-moons::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ctext x='6' y='26' font-size='18'%3E%F0%9F%8C%99%3C/text%3E%3C/svg%3E");
    }

    .bubble.pattern-mushrooms::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ctext x='6' y='26' font-size='18'%3E%F0%9F%8D%84%3C/text%3E%3C/svg%3E");
    }

    .bubble.pattern-beer::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ctext x='6' y='26' font-size='18'%3E%F0%9F%8D%BA%3C/text%3E%3C/svg%3E");
    }

    .bubble.pattern-dragons::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ctext x='6' y='26' font-size='18'%3E%F0%9F%90%89%3C/text%3E%3C/svg%3E");
    }

    .bubble.pattern-frogs::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ctext x='6' y='26' font-size='18'%3E%F0%9F%90%B8%3C/text%3E%3C/svg%3E");
    }

    .bubble.pattern-pandas::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ctext x='6' y='26' font-size='18'%3E%F0%9F%90%BC%3C/text%3E%3C/svg%3E");
    }

    .bubble.pattern-paws::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ctext x='6' y='26' font-size='18'%3E%F0%9F%90%BE%3C/text%3E%3C/svg%3E");
    }

    .bubble.pattern-paws::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ctext x='6' y='26' font-size='18'%3E%F0%9F%90%BE%3C/text%3E%3C/svg%3E");
    }

    .bubble.pattern-nature::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ctext x='6' y='26' font-size='18'%3E%F0%9F%8C%BF%3C/text%3E%3C/svg%3E");
    }

    
    body.theme-tavern {
      --theme-overlay: linear-gradient(rgba(22, 12, 4, .50), rgba(14, 8, 3, .68));
      --bg: #140f0a;
      --bg2: #24160d;
      --panel: #2b1f16;
      --panel2: #35251a;
      --line: #58402c;
      --line2: #725138;
      --text: #fff4df;
      --muted: #e1c9a0;
      --accent: #d97706;
      --accent2: #b45309;
      --bubble-me: linear-gradient(135deg, #a16207 0%, #7c3f00 100%);
      --bubble-them: rgba(57,39,26,.84);
      --theme-art: url("/static/themes/theme_tavern.webp");
    }

    body.theme-stars {
      --theme-overlay: linear-gradient(rgba(5, 10, 25, .42), rgba(4, 8, 20, .62));
      --bg: #06111f;
      --bg2: #0a1830;
      --panel: #0c1731;
      --panel2: #112043;
      --line: #233d61;
      --line2: #35567d;
      --text: #eef7ff;
      --muted: #b5d4ff;
      --accent: #60a5fa;
      --accent2: #2563eb;
      --bubble-me: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
      --bubble-them: rgba(12,24,49,.82);
      --theme-art: url("/static/themes/theme_stars.webp");
    }

    body.theme-games {
      --theme-overlay: linear-gradient(rgba(8, 5, 24, .48), rgba(10, 6, 28, .68));
      --bg: #0a0616;
      --bg2: #120c24;
      --panel: #17112e;
      --panel2: #21184a;
      --line: #3c2f66;
      --line2: #56449a;
      --text: #f4ecff;
      --muted: #ceb9ff;
      --accent: #8b5cf6;
      --accent2: #0ea5e9;
      --bubble-me: linear-gradient(135deg, #8b5cf6 0%, #0ea5e9 100%);
      --bubble-them: rgba(24,16,44,.84);
      --theme-art: url("/static/themes/theme_games.webp");
    }

    body.theme-cartoon {
      --theme-overlay: linear-gradient(rgba(16, 24, 52, .32), rgba(12, 18, 38, .54));
      --bg: #0f1428;
      --bg2: #18214a;
      --panel: #1b2752;
      --panel2: #26346a;
      --line: #4250a0;
      --line2: #5969c0;
      --text: #f8fbff;
      --muted: #d7ddff;
      --accent: #f97316;
      --accent2: #ec4899;
      --bubble-me: linear-gradient(135deg, #fb7185 0%, #f97316 100%);
      --bubble-them: rgba(30,42,88,.82);
      --theme-art: url("/static/themes/theme_cartoon.webp");
    }

    body.theme-fantasy {
      --theme-overlay: linear-gradient(rgba(9, 12, 28, .42), rgba(8, 10, 20, .62));
      --bg: #0d1020;
      --bg2: #151935;
      --panel: #1b2142;
      --panel2: #242c58;
      --line: #47548a;
      --line2: #616fb3;
      --text: #f4f0ff;
      --muted: #d6cffd;
      --accent: #a78bfa;
      --accent2: #4f46e5;
      --bubble-me: linear-gradient(135deg, #7c3aed 0%, #4338ca 100%);
      --bubble-them: rgba(27,34,66,.84);
      --theme-art: url("/static/themes/theme_fantasy.webp");
    }

    body.theme-horror {
      --theme-overlay: linear-gradient(rgba(8, 3, 6, .58), rgba(6, 2, 5, .78));
      --bg: #09070a;
      --bg2: #140c11;
      --panel: #1a1017;
      --panel2: #24131d;
      --line: #47202f;
      --line2: #6b2c3f;
      --text: #f9f1f2;
      --muted: #d3a8b2;
      --accent: #ef4444;
      --accent2: #991b1b;
      --bubble-me: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
      --bubble-them: rgba(30,16,23,.86);
      --theme-art: url("/static/themes/theme_horror.webp");
    }

    .preview-bubble-card {
      padding: 12px;
      border-radius: 16px;
      background: rgba(11,18,32,.72);
      border: 1px solid var(--line);
    }


    .message {
      animation: messagePop .22s ease;
    }

    @keyframes messagePop {
      from {
        opacity: 0;
        transform: translateY(8px) scale(.985);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .bubble {
      backdrop-filter: blur(10px) saturate(1.1);
      box-shadow: 0 10px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
    }

    .message.mine .bubble {
      border-bottom-right-radius: 8px;
    }

    .message.theirs .bubble {
      border-bottom-left-radius: 8px;
    }

    .message.theirs .bubble {
      background: linear-gradient(180deg, rgba(30,41,59,.88), rgba(22,30,45,.88));
    }

    .message.mine .bubble::after,
    .message.theirs .bubble::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 45%);
      opacity: .55;
      border-radius: inherit;
    }

    .composer {
      backdrop-filter: blur(18px) saturate(1.05);
    }

    .chat-item,
    .user-item,
    .theme-option,
    .pattern-option,
    button {
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
    }

    button:hover,
    .theme-option:hover,
    .pattern-option:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(0,0,0,.16);
    }

    .context-menu {
      position: fixed;
      z-index: 2600;
      min-width: 220px;
      background: linear-gradient(180deg, rgba(10,14,24,.94), rgba(10,14,24,.88));
      border: 1px solid rgba(148,163,184,.22);
      border-radius: 18px;
      box-shadow: 0 20px 60px rgba(0,0,0,.45);
      backdrop-filter: blur(18px);
      padding: 8px;
      display: none;
    }

    .context-menu.show {
      display: block;
      animation: contextMenuIn .16s ease;
    }

    @keyframes contextMenuIn {
      from { opacity: 0; transform: translateY(8px) scale(.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .context-menu-item {
      width: 100%;
      min-height: 42px;
      border-radius: 12px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      padding: 0 12px;
      font-weight: 700;
    }

    .context-menu-item:hover {
      background: rgba(148,163,184,.10);
      border-color: rgba(148,163,184,.14);
    }

    .context-menu-item.red {
      color: #fecaca;
    }

    .context-reaction-row {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 6px;
      padding: 2px 2px 8px;
    }

    .context-reaction-btn {
      min-width: 34px;
      min-height: 38px;
      height: 38px;
      border-radius: 12px;
      padding: 0;
      font-size: 18px;
      background: rgba(148,163,184,.08);
      border: 1px solid rgba(148,163,184,.14);
      box-shadow: none;
    }

    .context-reaction-btn:hover {
      background: rgba(148,163,184,.14);
    }


    .message-actions-inline {
      display: flex;
      gap: 6px;
      opacity: .0;
      transform: translateY(2px);
      transition: .14s ease;
    }

    .message:hover .message-actions-inline {
      opacity: 1;
      transform: translateY(0);
    }

    .theme-option small {
      display: block;
      font-size: 11px;
      font-weight: 600;
      opacity: .8;
      margin-top: 3px;
    }


    .main {
      animation: mainFadeIn .22s ease;
    }

    @keyframes mainFadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .chat-item {
      overflow: hidden;
    }

    .chat-item::after {
      content: "";
      position: absolute;
      inset: auto 0 0 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(147,197,253,.6), transparent);
      opacity: 0;
      transition: opacity .16s ease;
    }

    .chat-item:hover::after,
    .chat-item.active::after {
      opacity: 1;
    }

    .message {
      animation: messagePop .18s ease;
    }

    .message .bubble,
    .item,
    .card,
    .popup-card {
      transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
    }

    .message:hover .bubble {
      transform: translateY(-1px);
      box-shadow: 0 12px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
    }

    .topbar,
    .sidebar,
    .composer {
      box-shadow: 0 14px 36px rgba(0,0,0,.16);
    }


    .popup-card {
      display: block;
    }

    .popup-card.hidden {
      display: none !important;
    }

    .popup-backdrop {
      display: block;
    }

    .popup-backdrop.hidden {
      display: none !important;
      pointer-events: none !important;
    }

    #usersCard,
    #chatsCard,
    #userProfileCard,
    #messageContextMenu,
    #jumpBottomBtn,
    #popupBackdrop {
      position: fixed;
    }

    #usersCard,
    #chatsCard,
    #profileCard,
    #createChatCard {
      z-index: 3001;
    }

    #userProfileCard {
      z-index: 3003;
    }

    #popupBackdrop {
      z-index: 3000;
    }

    #messageContextMenu {
      z-index: 3002;
    }


    .message,
    .bubble,
    .meta,
    .reply-preview,
    .message-avatar,
    .bubble-author {
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      touch-action: manipulation;
    }

    .messages {
      scroll-behavior: smooth;
    }

    .message {
      animation: bubbleLiftIn .22s cubic-bezier(.2,.8,.2,1);
      transform-origin: center bottom;
    }

    @keyframes bubbleLiftIn {
      from {
        opacity: 0;
        transform: translateY(10px) scale(.985);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .composer,
    .topbar,
    .sidebar,
    .card,
    .popup-card {
      transition: background .18s ease, box-shadow .18s ease, border-color .18s ease, transform .18s ease;
    }

    .chat-item,
    .user-item,
    .theme-option,
    .pattern-option {
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, filter .16s ease;
    }

    .chat-item:hover,
    .user-item:hover {
      filter: brightness(1.03);
    }


    .message,
    .message * {
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }

    .message input,
    .message textarea {
      -webkit-user-select: text;
      user-select: text;
    }

    .jump-bottom-btn {
      z-index: 3205;
      background: linear-gradient(180deg, rgba(37,99,235,.98), rgba(29,78,216,.94));
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 16px 34px rgba(37,99,235,.26), 0 12px 28px rgba(0,0,0,.30);
      transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
    }

    .jump-bottom-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 38px rgba(37,99,235,.32), 0 12px 28px rgba(0,0,0,.30);
    }

    .bubble {
      border-radius: 18px;
      padding: 10px 13px;
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 10px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
    }

    .message.mine .bubble {
      border-bottom-right-radius: 8px;
      min-width: 112px;
    }

    .message.theirs .bubble {
      border-bottom-left-radius: 8px;
      min-width: 112px;
    }

    .bubble[class*="pattern-"]::before {
      opacity: .28;
      background-size: 34px 34px;
      transform: rotate(-18deg) scale(1.22);
      transform-origin: center;
      inset: -18%;
      mix-blend-mode: screen;
    }

    .bubble-author {
      margin-bottom: 7px;
      font-size: 12px;
      letter-spacing: .01em;
    }

    .stack {
      max-width: min(72%, 640px);
    }

    .message {
      animation: messageFloatIn .22s ease;
    }

    @keyframes messageFloatIn {
      from { opacity: 0; transform: translateY(10px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .bubble,
    .chat-item,
    .user-item,
    .context-menu,
    .composer textarea,
    .ghost-btn,
    #sendBtn {
      transition: transform .16s ease, box-shadow .18s ease, opacity .16s ease, background .18s ease, border-color .18s ease;
    }

    .message:hover .bubble {
      transform: translateY(-2px);
      box-shadow: 0 14px 28px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.08);
    }

  
    .message,
    .bubble,
    .stack {
      touch-action: pan-y;
    }

    .context-menu,
    .context-menu * {
      -webkit-user-select: none !important;
      user-select: none !important;
    }

    .reactions-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 4px 4px 0;
      min-height: 28px;
    }

    .reaction-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-height: 26px;
      padding: 0 8px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(9,14,26,.46);
      color: var(--text);
      font-size: 12px;
      box-shadow: 0 6px 16px rgba(0,0,0,.14);
      cursor: pointer;
    }

    .reaction-chip.mine {
      border-color: rgba(147,197,253,.35);
      box-shadow: 0 8px 18px rgba(59,130,246,.18);
    }

    .reaction-add-btn {
      opacity: .82;
      background: rgba(255,255,255,.06);
    }

    .reaction-picker {
      position: absolute;
      left: 8px;
      bottom: calc(100% + 10px);
      display: none;
      gap: 6px;
      padding: 8px;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(10,14,24,.96), rgba(10,14,24,.90));
      border: 1px solid rgba(148,163,184,.18);
      box-shadow: 0 18px 40px rgba(0,0,0,.34);
      z-index: 5;
      flex-wrap: wrap;
      max-width: 260px;
    }

    .reaction-picker.show {
      display: flex;
      animation: contextMenuIn .14s ease;
    }

    .reaction-picker-btn {
      width: 34px;
      min-width: 34px;
      min-height: 34px;
      height: 34px;
      border-radius: 999px;
      padding: 0;
      font-size: 18px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: none;
    }

    .bubble-wrap {
      position: relative;
      width: 100%;
    }


    /* screen-style sidebar sections instead of popup cards */
    #profileCard,
    #createChatCard,
    #usersCard,
    #chatsCard {
      position: static !important;
      inset: auto !important;
      left: auto !important;
      top: auto !important;
      transform: none !important;
      width: 100% !important;
      max-width: none !important;
      max-height: none !important;
      overflow: visible !important;
      z-index: auto !important;
      box-shadow: var(--shadow);
      margin-bottom: 12px;
    }

    #closeUsersBtn,
    #closeChatsBtn {
      display: none !important;
    }

    .sidebar-page.hidden {
      display: none !important;
    }

    .app.chat-open .composer {
      margin-bottom: 0;
      padding-bottom: max(6px, min(var(--safe-bottom), 8px));
    }

    .app.chat-open ~ .bottom-nav,
    body.chat-open-nav-hidden #bottomNav {
      display: none !important;
    }

    .topbar {
      background: linear-gradient(180deg, rgba(10,14,24,.68), rgba(10,14,24,.48));
      backdrop-filter: blur(14px) saturate(1.08);
      padding:
        calc(8px + var(--safe-top))
        calc(12px + var(--safe-right))
        8px
        calc(12px + var(--safe-left));
      box-shadow: 0 10px 24px rgba(0,0,0,.12);
    }

    .topbar-row {
      gap: 6px;
    }

    .back-btn {
      min-width: 36px;
      width: 36px;
      height: 36px;
      border-radius: 10px;
      font-size: 18px;
      background: linear-gradient(180deg, rgba(71,85,105,.95), rgba(51,65,85,.9));
    }

    .chat-title {
      font-size: 16px;
      line-height: 1.2;
    }

    .typing {
      min-height: 14px;
      margin-top: 2px;
      font-size: 11px;
      color: #a5c8ff;
    }

    #clearChatBtn,
    #deleteChatBtn {
      width: auto;
      min-width: 0;
      min-height: 32px;
      height: 32px;
      padding: 0 10px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 700;
      box-shadow: 0 8px 18px rgba(0,0,0,.14);
    }

    .card,
    .item,
    .bottom-nav,
    .composer,
    .topbar {
      backdrop-filter: blur(18px) saturate(1.1);
    }

    .item {
      background: rgba(11,18,32,.76);
    }

    @media (max-width: 640px) {
      .topbar {
        padding:
          calc(7px + var(--safe-top))
          calc(10px + var(--safe-right))
          7px
          calc(10px + var(--safe-left));
      }

      .chat-title {
        font-size: 15px;
      }

      #clearChatBtn,
      #deleteChatBtn {
        min-height: 30px;
        height: 30px;
        padding: 0 8px;
        font-size: 11px;
      }
    }

    /* micro-fix: убираем дёрганье экранов и чатов */
    .screen-animating .sidebar-page:not(.hidden),
    .screen-animating .main,
    .screen-animating .messages,
    .main,
    .chat-section,
    .message,
    .chat-item::after {
      animation: none !important;
    }

    .message,
    .message .bubble,
    .item,
    .card,
    .popup-card,
    .chat-item,
    .user-item,
    .theme-option,
    .pattern-option,
    button,
    .composer,
    .topbar,
    .sidebar {
      transition: none !important;
    }

    .item:hover,
    button:hover,
    .theme-option:hover,
    .pattern-option:hover,
    .message:hover .bubble,
    .chat-item:hover,
    .user-item:hover,
    .jump-bottom-btn:hover {
      transform: none !important;
      filter: none !important;
      box-shadow: inherit;
    }

    /* emoji справа от поля ввода */
    .composer-row > .attach-inline { order: 1; }
    .composer-row > #clearFileBtn { order: 2; }
    .composer-row > #messageInput { order: 3; }
    .composer-row > #emojiToggleBtn { order: 4; }
    .composer-row > #sendBtn { order: 5; }

    .emoji-picker {
      left: auto;
      right: 46px;
    }

    @media (max-width: 640px) {
      .emoji-picker {
        right: 44px;
      }
    }

    @media (max-width: 640px) {
      .theme-grid {
        grid-template-columns: 1fr;
      }

      .theme-option {
        min-height: 88px;
      }
    }

  
    @media (max-width: 900px) {
      .app {
        background-position: center top;
      }
    }

    body.theme-switching .app {
      filter: saturate(1.03) brightness(1.01);
    }

    body.theme-switching .sidebar,
    body.theme-switching .topbar,
    body.theme-switching .composer,
    body.theme-switching .card,
    body.theme-switching .item {
      transition: background .34s ease, border-color .34s ease, box-shadow .34s ease, color .34s ease;
    }

    body.theme-switching .theme-option {
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
    }


  
    .voice-create-card {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--line);
    }

    .voice-panel {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
    }

    .voice-room-card {
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(11,18,32,.72);
      padding: 14px;
      backdrop-filter: blur(14px);
    }

    .voice-room-title {
      font-size: 18px;
      font-weight: 800;
      margin-bottom: 6px;
    }

    .voice-room-subtitle {
      color: var(--muted);
      font-size: 13px;
      margin-bottom: 12px;
    }

    .voice-controls {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .voice-controls button {
      width: auto;
      min-width: 0;
      padding: 0 14px;
    }

    .voice-participants,
    .voice-text-feed {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .voice-participant {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(11,18,32,.82);
    }

    .voice-participant-name {
      font-weight: 700;
    }

    .voice-participant-state {
      font-size: 12px;
      color: var(--muted);
    }

    .messages.voice-chat-mode {
      overflow: hidden;
      overscroll-behavior: contain;
      padding-bottom: 0;
    }

    .messages.voice-chat-mode .voice-panel {
      height: 100%;
      min-height: 0;
      overflow: hidden;
    }

    .messages.voice-chat-mode .voice-room-card:last-child {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .voice-notice {
      margin-top: 8px;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid rgba(96,165,250,.22);
      background: rgba(30,41,59,.55);
      color: #e2e8f0;
      font-size: 12px;
    }

    .voice-participants {
      max-height: 220px;
      overflow-y: auto;
      padding-right: 2px;
    }

    .voice-text-feed {
      flex: 1 1 auto;
      min-height: 0;
      max-height: 38dvh;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-right: 4px;
    }

    .messages.voice-chat-mode .voice-text-feed .message {
      gap: 6px;
    }

    .messages.voice-chat-mode .voice-text-feed .message-avatar {
      width: 28px;
      height: 28px;
      font-size: 12px;
    }

    .messages.voice-chat-mode .voice-text-feed .stack {
      max-width: min(88%, 420px);
      gap: 3px;
    }

    .messages.voice-chat-mode .voice-text-feed .bubble {
      padding: 6px 9px;
      border-radius: 14px;
      font-size: 13px;
      line-height: 1.25;
    }

    .messages.voice-chat-mode .voice-text-feed .bubble-header {
      margin-bottom: 5px;
    }

    .messages.voice-chat-mode .voice-text-feed .bubble-author {
      font-size: 10px;
    }

    .messages.voice-chat-mode .voice-text-feed .reply-preview {
      padding: 6px 8px;
      font-size: 11px;
    }

    .voice-participant {
      transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease, background .14s ease;
    }

    .voice-participant.is-speaking {
      border-color: rgba(34,197,94,.42);
      box-shadow: 0 0 0 1px rgba(34,197,94,.18), 0 10px 24px rgba(16,185,129,.12);
      background: rgba(15,33,28,.92);
      transform: translateY(-1px);
    }

    .voice-participant.is-speaking .badge {
      color: #dcfce7;
      background: rgba(34,197,94,.18);
      border-color: rgba(34,197,94,.26);
    }


    /* luxe bubble pack */
    :root {
      --bubble-gloss-strength: .24;
      --bubble-tail-size: 14px;
      --bubble-pop-distance: 14px;
      --bubble-shadow-deep: 0 16px 34px rgba(0,0,0,.22);
      --bubble-shadow-soft: 0 8px 18px rgba(0,0,0,.12);
      --bubble-highlight: rgba(255,255,255,.22);
      --bubble-rim: rgba(255,255,255,.14);
    }

    body.theme-tavern {
      --bubble-gloss-strength: .18;
      --bubble-highlight: rgba(255,238,205,.18);
    }

    body.theme-stars,
    body.theme-neon,
    body.theme-games {
      --bubble-gloss-strength: .28;
      --bubble-highlight: rgba(255,255,255,.26);
    }

    body.theme-horror {
      --bubble-gloss-strength: .16;
      --bubble-highlight: rgba(255,220,220,.12);
    }

    .messages .message {
      animation: bubbleRiseIn .28s cubic-bezier(.2,.9,.2,1) !important;
      transform-origin: center bottom;
    }

    @keyframes bubbleRiseIn {
      from {
        opacity: 0;
        transform: translateY(var(--bubble-pop-distance)) scale(.965);
        filter: blur(1px);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    .bubble-wrap {
      position: relative;
      display: inline-flex;
      flex-direction: column;
      align-items: stretch;
      max-width: 100%;
      isolation: isolate;
      filter: drop-shadow(0 8px 18px rgba(0,0,0,.10));
    }

    .messages .message .bubble-wrap,
    .messages .message .bubble,
    .messages .message .bubble-tail {
      transition: transform .18s ease, box-shadow .22s ease, filter .22s ease, opacity .22s ease !important;
    }

    .messages .message .bubble {
      background: var(--bubble-fill, var(--bubble-me)) !important;
      position: relative;
      overflow: hidden;
      border-radius: 22px !important;
      border: 1px solid var(--bubble-rim) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -10px 18px rgba(0,0,0,.10),
        var(--bubble-shadow-soft),
        var(--bubble-shadow-deep) !important;
      backdrop-filter: blur(14px) saturate(1.1) !important;
    }

    .messages .message.mine .bubble {
      border-bottom-right-radius: 10px !important;
    }

    .messages .message.theirs .bubble {
      border-bottom-left-radius: 10px !important;
    }

    .messages .message .bubble::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,var(--bubble-gloss-strength)) 0%, rgba(255,255,255,.08) 18%, transparent 48%),
        radial-gradient(120% 70% at 20% 0%, var(--bubble-highlight) 0%, transparent 58%);
      opacity: .95;
      border-radius: inherit;
    }

    .messages .message .bubble-tail {
      position: absolute;
      bottom: 7px;
      width: var(--bubble-tail-size);
      height: calc(var(--bubble-tail-size) + 4px);
      background: var(--bubble-fill, var(--bubble-me));
      border: 1px solid var(--bubble-rim);
      z-index: -1;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 10px 20px rgba(0,0,0,.14);
    }

    .messages .message.mine .bubble-tail {
      right: -6px;
      border-left: none;
      border-top: none;
      border-radius: 0 0 14px 0;
      clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 100%);
      transform: skewY(6deg);
    }

    .messages .message.theirs .bubble-tail {
      left: -6px;
      border-right: none;
      border-top: none;
      border-radius: 0 0 0 14px;
      clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
      transform: skewY(-6deg);
    }

    .messages .message:hover .bubble-wrap {
      transform: translateY(-2px);
      filter: drop-shadow(0 12px 24px rgba(0,0,0,.16));
    }

    .messages .message:hover .bubble {
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.2),
        inset 0 -10px 18px rgba(0,0,0,.08),
        0 10px 20px rgba(0,0,0,.12),
        0 20px 40px rgba(0,0,0,.20) !important;
    }

    .messages .message .bubble-header {
      margin-bottom: 8px;
    }

    .messages .message .bubble-author {
      text-shadow: 0 1px 8px rgba(0,0,0,.18);
    }

    .messages .message .bubble-tag {
      box-shadow: 0 6px 14px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.10);
    }

    .preview-bubble-card #personalizationPreview {
      background: var(--bubble-fill, linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%)) !important;
      border-radius: 20px !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -10px 18px rgba(0,0,0,.10),
        0 10px 22px rgba(0,0,0,.16) !important;
      position: relative;
      overflow: hidden;
    }

    .preview-bubble-card #personalizationPreview::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.08) 16%, transparent 46%),
        radial-gradient(120% 70% at 20% 0%, rgba(255,255,255,.18) 0%, transparent 58%);
      pointer-events: none;
      border-radius: inherit;
    }

    @media (max-width: 640px) {
      .messages .message .bubble {
        border-radius: 20px !important;
      }

      .messages .message.mine .bubble {
        border-bottom-right-radius: 9px !important;
      }

      .messages .message.theirs .bubble {
        border-bottom-left-radius: 9px !important;
      }

      .messages .message .bubble-tail {
        width: 12px;
        height: 15px;
        bottom: 6px;
      }
    }