[v-cloak] {
      display: none !important;
    }

html,
    body {
      overscroll-behavior: none;
    }

    .app-shell {
      height: var(--app-vh, 100dvh);
      min-height: var(--app-vh, 100dvh);
      overscroll-behavior: none;
    }

    .chat-bg-layered {
      /* Hardcoded knobs */
      --chat-bg-overlay-opacity: 0.81;
      --chat-bg-overlay-rgb: 255, 255, 255;
      --chat-bg-tile-size: 172px;
      --chat-bg-tile-url: url('/assets/imgs/tile-tsp.png');

      /* 4-point color field */
      --chat-bg-c1: rgba(53, 132, 199, 0.42);
      --chat-bg-c2: rgba(46, 174, 161, 0.38);
      --chat-bg-c3: rgba(233, 143, 95, 0.34);
      --chat-bg-c4: rgba(109, 118, 203, 0.36);

      background-image:
        linear-gradient(rgba(var(--chat-bg-overlay-rgb), var(--chat-bg-overlay-opacity)),
          rgba(var(--chat-bg-overlay-rgb), var(--chat-bg-overlay-opacity))),
        var(--chat-bg-tile-url),
        radial-gradient(110% 90% at 0% 0%, var(--chat-bg-c1) 0%, rgba(53, 132, 199, 0) 58%),
        radial-gradient(110% 90% at 100% 0%, var(--chat-bg-c2) 0%, rgba(46, 174, 161, 0) 58%),
        radial-gradient(115% 92% at 100% 100%, var(--chat-bg-c3) 0%, rgba(233, 143, 95, 0) 60%),
        radial-gradient(115% 92% at 0% 100%, var(--chat-bg-c4) 0%, rgba(109, 118, 203, 0) 60%);
      background-size:
        100% 100%,
        var(--chat-bg-tile-size) var(--chat-bg-tile-size),
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%;
      background-repeat:
        no-repeat,
        repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat;
      background-position:
        center,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0;
    }

    .dark .chat-bg-layered {
      --chat-bg-overlay-opacity: 0.56;
      --chat-bg-overlay-rgb: 0, 0, 0;
      --chat-bg-tile-url: url('/assets/imgs/tile-tsp-dark.png');
    }

    .custom-scrollbar::-webkit-scrollbar {
      width: 6px;
    }

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

    .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: rgba(156, 163, 175, 0.3);
      border-radius: 20px;
    }

    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: rgba(71, 85, 105, 0.5);
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background-color: rgba(156, 163, 175, 0.6);
    }

    .video-note-wrap {
      position: relative;
      z-index: 1;
      width: 180px;
      height: 180px;
      display: grid;
      place-items: center;
      margin-left: auto;
      margin-right: auto;
      transform: scale(1);
      transform-origin: center center;
      transition: transform 200ms ease;
    }

    .video-note-wrap--incoming {
      margin-left: 0;
      margin-right: auto;
      transform-origin: left bottom;
    }

    .video-note-wrap--outgoing {
      margin-left: auto;
      margin-right: 0;
      transform-origin: right bottom;
    }

    .video-note-wrap--playing {
      transform: scale(1.75);
      z-index: 35;
    }

    .video-note-wrap--popup {
      width: 100%;
      height: 100%;
      transform: none;
      z-index: 1;
    }

    .video-note-ring {
      width: 180px;
      height: 180px;
      transform: rotate(-90deg);
    }

    .video-note-wrap--popup .video-note-ring {
      width: 100%;
      height: 100%;
    }

    .video-note-ring-track {
      fill: none;
      stroke: rgba(148, 163, 184, 0.35);
      stroke-width: 6;
    }

    .video-note-ring-progress {
      fill: none;
      stroke: #7AA9BA;
      stroke-width: 6;
      stroke-linecap: round;
      transition: stroke-dasharray 120ms linear;
    }

    .video-note-media {
      position: absolute;
      inset: 8px;
      border-radius: 9999px;
      overflow: hidden;
      background: #000;
      box-shadow: 0 3px 14px rgba(0, 0, 0, 0.22);
      touch-action: none;
      user-select: none;
      cursor: pointer;
    }

    .video-note-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      background: #000;
      pointer-events: none;
    }

    .video-note-overlay {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      background: radial-gradient(circle at center, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0));
      pointer-events: none;
    }

    .mute-schedule-scroll {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      display: block;
    }

    .mute-schedule-table {
      display: inline-grid;
      grid-auto-rows: min-content;
      gap: 3px;
      width: 100%;
      min-width: calc(var(--mute-day-col) + (24 * var(--mute-cell-size-min)) + (24 * var(--mute-grid-gap)));
      max-width: none;
      --mute-day-col: 28px;
      --mute-cell-size-min: 16px;
      --mute-grid-gap: 3px;
      margin: 0;
    }

    .mute-schedule-cell {
      font-size: 9px;
      line-height: 1;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      touch-action: none;
      cursor: pointer;
      width: 100%;
      min-width: 0;
      max-width: none;
      height: auto;
      min-height: 0;
      max-height: none;
      aspect-ratio: 1 / 1;
      padding: 0;
    }

    .mute-schedule-grid-row {
      display: grid;
      grid-template-columns: var(--mute-day-col) repeat(24, minmax(var(--mute-cell-size-min), 1fr));
      gap: var(--mute-grid-gap);
      align-items: center;
    }

    .mute-schedule-grid-row--head {
      margin-bottom: 1px;
    }

    .mute-schedule-day {
      width: var(--mute-day-col);
      min-width: var(--mute-day-col);
      max-width: var(--mute-day-col);
      padding: 0;
      text-align: center;
    }

    .mute-schedule-day--head {
      border-color: transparent;
      background: transparent;
    }

    .mute-schedule-hour-head {
      width: 100%;
      min-width: 0;
      max-width: none;
      height: 12px;
      line-height: 12px;
      text-align: center;
      font-size: 9px;
      color: #64748b;
      user-select: none;
    }

    .mute-schedule-cell--open {
      background: rgba(34, 197, 94, 0.15);
      border-color: rgba(34, 197, 94, 0.7);
      color: rgb(21, 128, 61);
    }

    .mute-schedule-cell--muted {
      background: rgba(239, 68, 68, 0.15);
      border-color: rgba(239, 68, 68, 0.7);
      color: rgb(185, 28, 28);
    }

    .mute-schedule-cell--range {
      box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.9) inset;
      outline: 1px solid rgba(59, 130, 246, 0.5);
    }

    .voice-player {
      display: flex;
      align-items: center;
      gap: 8px;
      width: min(100%, 420px);
      border-radius: 12px;
      padding: 6px 8px;
      border: 1px solid rgba(148, 163, 184, 0.3);
    }

    .voice-player--incoming {
      background: rgba(241, 245, 249, 0.9);
    }

    .voice-player--outgoing {
      background: rgba(255, 255, 255, 0.5);
      border-color: rgba(148, 163, 184, 0.45);
    }

    .voice-player-btn {
      width: 34px;
      height: 34px;
      flex-shrink: 0;
      border-radius: 9999px;
      border: 1px solid rgba(148, 163, 184, 0.5);
      background: rgba(255, 255, 255, 0.85);
      color: #0f172a;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      cursor: pointer;
    }

    .voice-player-btn:hover {
      background: rgba(255, 255, 255, 1);
    }

    .voice-player-body {
      min-width: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .voice-player-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
    }

    .voice-player-meta-time {
      font-size: 12px;
      line-height: 1.2;
      font-weight: 500;
      color: #334155;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .voice-player-time {
      font-size: 11px;
      line-height: 1;
      color: #64748b;
      text-align: right;
      white-space: nowrap;
    }

    .voice-transcribe-btn {
      width: 24px;
      height: 24px;
      border-radius: 9999px;
      border: 1px solid rgba(148, 163, 184, 0.5);
      background: rgba(255, 255, 255, 0.82);
      color: #334155;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      cursor: pointer;
      flex-shrink: 0;
    }

    .voice-transcribe-btn:disabled {
      opacity: 0.55;
      cursor: default;
    }

    .voice-transcribe-icon--spin {
      animation: voiceTranscribeSpin 0.9s linear infinite;
    }

    @keyframes voiceTranscribeSpin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .voice-player-state {
      font-size: 11px;
      line-height: 1.15;
      color: #64748b;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .voice-player-state--error {
      color: #b91c1c;
    }

    .voice-player-range {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 4px;
      border-radius: 9999px;
      background: rgba(148, 163, 184, 0.4);
      outline: none;
      margin: 0;
      cursor: pointer;
    }

    .voice-player-range::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 10px;
      height: 10px;
      border-radius: 9999px;
      background: #334155;
      border: none;
    }

    .voice-player-range::-moz-range-thumb {
      width: 10px;
      height: 10px;
      border-radius: 9999px;
      background: #334155;
      border: none;
    }

    .voice-player-range::-moz-range-track {
      height: 4px;
      border-radius: 9999px;
      background: rgba(148, 163, 184, 0.4);
      border: none;
    }

    .chat-drop-zone-active {
      box-shadow: inset 0 0 0 2px rgba(122, 169, 186, 0.35);
    }

    .message-jump-highlight {
      animation: messageJumpHighlightFade 1800ms ease-out forwards;
      will-change: box-shadow;
    }

    @keyframes messageJumpHighlightFade {
      0% {
        box-shadow: inset 0 0 0 999px rgba(122, 169, 186, 0.34);
      }

      100% {
        box-shadow: inset 0 0 0 999px rgba(122, 169, 186, 0);
      }
    }

    .chat-drop-overlay {
      position: absolute;
      inset: 0;
      z-index: 45;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(15, 23, 42, 0.16);
      backdrop-filter: blur(1.5px);
    }

    .chat-drop-overlay--inline {
      background: rgba(122, 169, 186, 0.14);
      backdrop-filter: none;
    }

    .chat-drop-overlay-card {
      min-width: min(460px, calc(100% - 2rem));
      max-width: calc(100% - 2rem);
      border-radius: 14px;
      border: 1px dashed rgba(51, 65, 85, 0.4);
      background: rgba(255, 255, 255, 0.95);
      color: #0f172a;
      box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
      padding: 14px 16px;
      text-align: center;
    }

    .chat-drop-overlay-card--inline {
      min-width: 0;
      max-width: calc(100% - 1rem);
      width: calc(100% - 1rem);
      padding: 8px 10px;
      border-radius: 10px;
    }

    .dark .chat-drop-overlay-card {
      border-color: rgba(148, 163, 184, 0.45);
      background: rgba(21, 39, 42, 0.95);
      color: #e2e8f0;
    }

    .chat-drop-overlay-title {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.25;
    }

    .chat-drop-overlay-subtitle {
      margin-top: 4px;
      font-size: 12px;
      color: #64748b;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .dark .chat-drop-overlay-subtitle {
      color: #94a3b8;
    }
.reaction-picker-pop {
  animation: reactionPickerFadeIn 250ms ease-out;
  will-change: opacity;
}

@keyframes reactionPickerFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}