/* File / voice messages, video player, user colors — index/media.css */
    /* --- File / Voice messages --- */
    .msg-file {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--msg-file-bg, #43485557);
      border-radius: 10px;
      padding: 6px 12px;
      text-decoration: none;
      color: var(--msg-file-color, var(--text-primary));
      font-size: 12px;
      transition: border-color 0.2s;
      max-width: 260px;
    }

    .msg.other .msg-file {
      background: var(--msg-other-file-bg, var(--msg-file-bg, #43485557));
    }

    .msg-file:hover { border-color: var(--accent); }

    .msg-file-icon { font-size: 18px; }

    .msg-file-info { display: flex; flex-direction: column; }
    .msg-file-name { font-weight: 500; word-break: break-all; }
    .msg-file-size { font-size: 10px; color: var(--msg-file-size-color, var(--text-primary)); }

    .msg-image { max-width: 100%; max-height: 490px; border-radius: 12px; cursor: pointer; display: block; align-self: flex-start; }

    /* === Image loading placeholder === */
    .img-load-wrap {
      position: relative;
      display: inline-flex;
      align-items: flex-start;
      border-radius: 12px;
      overflow: hidden;
      background: var(--bg-tertiary);
    }

    .img-load-wrap:not(.img-loaded) {
      min-width: 120px;
      min-height: 80px;
    }

    .img-load-wrap .msg-image {
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    .img-load-wrap.img-loaded .msg-image {
      opacity: 1;
    }

    .img-load-wrap:not(.img-loaded) .msg-image {
      pointer-events: none;
    }

    .img-load-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      pointer-events: none;
      z-index: 2;
      transition: opacity 0.25s ease;
    }

    .img-load-wrap.img-loaded .img-load-overlay {
      opacity: 0;
      pointer-events: none;
    }

    .img-load-spinner {
      font-size: 22px;
      color: var(--accent);
      opacity: 0.8;
    }

    .img-load-pct {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary);
      letter-spacing: 0.04em;
      min-height: 14px;
    }

    .img-load-overlay.no-pct .img-load-pct {
      display: none;
    }

    .msg-image-wrap {
      display: flex;
      gap: 6px;
      max-width: 320px;
      justify-content: space-around;
      flex-wrap: wrap;
    }

    .msg-image-caption {
      padding: 2px 4px 0;
      font-size: var(--msg-font-size);
      line-height: 1.35;
      word-break: break-word;
      white-space: pre-wrap;
      opacity: 0.95;
    }
    .msg-attachment-caption {
      padding: 2px 4px 0;
      font-size: var(--msg-font-size);
      line-height: 1.35;
      word-break: break-word;
      white-space: pre-wrap;
      opacity: 0.95;
    }
    .msg.own .msg-image-caption { color: rgba(255,255,255,0.96); }
    .msg.other .msg-image-caption { color: var(--text-primary); }
    .msg-channel-inline-image {
      margin-top: 6px;
      margin-bottom: 4px;
      margin-left: 0;
      margin-right: 0;
    }
    .msg-channel-post-wrap {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .msg-channel-banner {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 14px;
      border: 1px solid rgba(34, 211, 238, 0.35);
      background: linear-gradient(135deg, rgba(34, 211, 238, 0.14), rgba(59, 130, 246, 0.12));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .msg-channel-avatar,
    .msg-channel-avatar-fallback {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .msg-channel-avatar {
      object-fit: cover;
      border: 1px solid rgba(255,255,255,0.35);
      box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    }
    .msg-channel-avatar-fallback {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.4px;
      color: #e0f2fe;
      background: linear-gradient(140deg, #0ea5e9, #2563eb);
      border: 1px solid rgba(255,255,255,0.35);
      box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    }
    .msg-channel-banner-meta {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    .msg-channel-banner-title {
      font-size: 12px;
      font-weight: 700;
      line-height: 1.2;
      color: var(--msg-channel-banner-title-color, #f0f9ff);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .msg-channel-banner-sub {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.2px;
      color: var(--msg-channel-banner-sub-color, rgba(224, 242, 254, 0.9));
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .msg-channel-post-body {
      white-space: pre-wrap;
      word-break: break-word;
    }
    .msg.own .msg-attachment-caption { color: rgba(255,255,255,0.96); }
    .msg.other .msg-attachment-caption { color: var(--text-primary); }

    .msg-video-wrap {
      width: min(320px, 82vw);
      max-width: 100%;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .msg-video {
      width: 100%;
      max-height: min(320px, 60vh);
      display: block;
      border-radius: 12px;
      background: #000;
      outline: none;
    }

    .msg-video-download {
      align-self: flex-start;
      font-size: 12px;
      color: inherit;
      text-decoration: none;
      opacity: 0.9;
    }

    .msg-video-download:hover {
      color: var(--accent-hover);
      opacity: 1;
    }

    /* ---- Custom Video Player ---- */
    .custom-video-player {
      width: min(320px, 82vw);
      max-width: 100%;
      border-radius: 14px;
      overflow: hidden;
      background: #000;
      user-select: none;
      direction: ltr;
    }
    .cvp-video-container {
      position: relative;
      width: 100%;
      cursor: pointer;
      min-height: 160px;
    }
    .cvp-video {
      display: block;
      width: 100%;
      max-height: min(300px, 56vh);
      object-fit: contain;
      background: #000;
      aspect-ratio: 16 / 9;
    }
    /* Thumbnail overlay (shown before first play) */
    .cvp-thumbnail-layer {
      position: absolute;
      inset: 0;
      z-index: 2;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.3s ease;
    }
    [data-video-player][data-cvp-loaded] .cvp-thumbnail-layer {
      opacity: 0;
      pointer-events: none;
    }
    .cvp-thumbnail-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
    .cvp-thumbnail-placeholder {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(20,30,55,0.9) 0%, rgba(10,15,35,1) 100%);
    }
    /* Download / buffering bar (shown between container and controls while loading) */
    .cvp-download-bar {
      display: none;
      align-items: center;
      gap: 8px;
      padding: 5px 10px;
      background: linear-gradient(180deg, rgba(4,9,20,0.97), rgba(8,15,35,0.96));
      border-top: 1px solid rgba(255,255,255,0.04);
    }
    .cvp-download-bar.cvp-download-active {
      display: flex;
    }
    .cvp-download-track {
      flex: 1;
      height: 3px;
      border-radius: 999px;
      background: rgba(255,255,255,0.15);
      overflow: hidden;
    }
    .cvp-download-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #22d3ee, #3b82f6);
      border-radius: 999px;
      transition: width 0.3s linear;
    }
    .cvp-download-label {
      font-size: 10px;
      color: rgba(226,232,240,0.65);
      white-space: nowrap;
      flex-shrink: 0;
      font-variant-numeric: tabular-nums;
    }
    .cvp-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.32);
      transition: opacity 0.22s ease;
    }
    .custom-video-player.cvp-playing .cvp-overlay {
      opacity: 0;
      pointer-events: none;
    }
    .custom-video-player.cvp-playing .cvp-video-container:hover .cvp-overlay {
      opacity: 1;
      pointer-events: auto;
    }
    .cvp-big-play {
      width: 52px;
      height: 52px;
      border: none;
      border-radius: 50%;
      background: rgba(255,255,255,0.18);
      backdrop-filter: blur(4px);
      color: #fff;
      font-size: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.18s, transform 0.18s;
    }
    .cvp-big-play:hover {
      background: rgba(255,255,255,0.28);
      transform: scale(1.08);
    }
    .cvp-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      background: linear-gradient(180deg, rgba(8,15,35,0.98), rgba(12,22,50,0.96));
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .cvp-btn {
      width: 28px;
      height: 28px;
      border: none;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      color: rgba(226,232,240,0.9);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      font-size: 11px;
      transition: background 0.18s, transform 0.15s;
    }
    .cvp-btn:hover {
      background: rgba(255,255,255,0.18);
      transform: scale(1.1);
    }
    .cvp-progress {
      position: relative;
      flex: 1;
      height: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
    .cvp-progress-track {
      position: absolute;
      inset: 7px 0;
      border-radius: 999px;
      background: rgba(255,255,255,0.18);
      overflow: hidden;
    }
    .cvp-progress-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #22d3ee, #3b82f6);
      border-radius: 999px;
      transition: width 0.12s linear;
    }
    .cvp-progress-thumb {
      position: absolute;
      top: 50%;
      left: 0%;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 0 2px rgba(34,211,238,0.3);
      transform: translate(-50%, -50%);
      pointer-events: none;
      transition: left 0.12s linear;
    }
    .cvp-time {
      font-size: 10px;
      color: rgba(226,232,240,0.65);
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
      flex-shrink: 0;
    }

    .msg-file-wrap {
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-width: 260px;
    }

    .msg-audio-wrap {
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-width: min(320px, 82vw);
    }

    .voice-player {
      --voice-track: rgba(255,255,255,0.22);
      --voice-muted: rgba(255,255,255,0.72);
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 220px;
      max-width: min(320px, 82vw);
      user-select: none;
      direction: ltr;
    }

    .msg.other .voice-player,
    .voice-preview-bar .voice-player {
      --voice-track: rgba(91,104,139,0.24);
      --voice-muted: var(--text-muted);
    }

    .voice-player audio { display: none; }

    .voice-player-btn {
      width: 36px;
      height: 36px;
      border: none;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      cursor: pointer;
      background: rgba(255,255,255,0.18);
      color: #fff;
      transition: transform 0.18s, background 0.18s, color 0.18s;
    }

    .msg.other .voice-player-btn,
    .voice-preview-bar .voice-player-btn {
      background: rgba(233,69,96,0.14);
      color: var(--accent);
    }

    .voice-player-btn:hover { transform: scale(1.04); }

    .voice-player-main {
      min-width: 0;
      flex: 1;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .voice-player-wave {
      position: relative;
      width: 100%;
      flex: 1;
      height: 24px;
      border: none;
      padding: 0;
      margin: 0;
      background: transparent;
      cursor: pointer;
    }

    .voice-player-wave::before {
      content: '';
      position: absolute;
      inset: 4px 0;
      border-radius: 999px;
      background: repeating-linear-gradient(90deg, var(--voice-track) 0 3px, transparent 3px 6px);
      opacity: 0.95;
    }

    .voice-player-wave-fill {
      position: absolute;
      inset: 4px auto 4px 0;
      width: 0%;
      border-radius: 999px;
      background: repeating-linear-gradient(90deg, rgba(255,255,255,0.95) 0 3px, transparent 3px 6px);
      overflow: hidden;
      transition: width 0.1s linear;
    }

    .msg.other .voice-player-wave-fill,
    .voice-preview-bar .voice-player-wave-fill {
      background: repeating-linear-gradient(90deg, #e94560 0 3px, transparent 3px 6px);
    }

    .voice-player-wave-thumb {
      position: absolute;
      top: 50%;
      left: 0%;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 0 2px rgba(255,255,255,0.16);
      transform: translate(-50%, -50%);
      transition: left 0.1s linear;
    }

    .msg.other .voice-player-wave-thumb,
    .voice-preview-bar .voice-player-wave-thumb {
      background: var(--accent);
      box-shadow: 0 0 0 2px rgba(233,69,96,0.16);
    }

    /* Audio download / buffer progress bar */
    .voice-player-wave { overflow: hidden; }

    .voice-player-load-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      width: var(--vp-dl-pct, 0%);
      border-radius: 999px;
      background: rgba(255,255,255,0.72);
      display: none;
      transition: width 0.3s linear;
    }

    .msg.other .voice-player-load-bar,
    .voice-preview-bar .voice-player-load-bar {
      background: var(--accent);
    }

    .voice-player-load-bar.vp-load-active {
      display: block;
    }

    .voice-player-load-bar.vp-load-indet {
      width: 32%;
      animation: vp-load-slide 1.5s ease-in-out infinite;
    }

    @keyframes vp-load-slide {
      0%   { left: -32%; opacity: 1; }
      45%  { left: 68%;  opacity: 1; }
      55%  { left: 68%;  opacity: 0; }
      56%  { left: -32%; opacity: 0; }
      72%  { left: -32%; opacity: 1; }
      100% { left: -32%; opacity: 1; }
    }

    .voice-player-meta {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0;
      min-width: fit-content;
      font-size: 11px;
    }

    .voice-player-time {
      flex-shrink: 0;
      color: var(--voice-muted);
      font-variant-numeric: tabular-nums;
    }

    /* Voice transcribe button & transcript result */
    .voice-transcribe-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .voice-transcribe-row .voice-player {
      flex: 1;
      min-width: 0;
    }

    .voice-transcribe-btn {
      flex-shrink: 0;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: none;
      background: var(--voice-transcribe-btn-bg, rgba(99,102,241,0.14));
      color: var(--voice-transcribe-btn-color, #6366f1);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      transition: background 0.18s, transform 0.12s;
    }

    .voice-transcribe-btn:hover:not(:disabled) {
      background: var(--voice-transcribe-btn-hover-bg, rgba(99,102,241,0.26));
      transform: scale(1.08);
    }

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

    .msg.other .voice-transcribe-btn {
      background: rgba(255,255,255,0.12);
      color: #a5b4fc;
    }

    .msg.other .voice-transcribe-btn:hover:not(:disabled) {
      background: rgba(255,255,255,0.22);
    }

    /* Spinner animation for transcribe button */
    @keyframes voice-transcribe-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .voice-transcribe-btn i.fa-spinner {
      font-size: 18px;
      animation: voice-transcribe-spin 1s linear infinite;
    }

    .voice-transcribe-btn i.fa-closed-captioning {
      font-size: 18px;
    }

    .voice-transcribe-btn i.fa-rotate-right {
      font-size: 14px;
    }
    .msg.own .voice-transcribe-btn i {
    font-size: 14px;
    } 

    .voice-transcript-result {
      display: none;
      margin-top: 6px;
      padding: 7px 10px;
      background: var(--voice-transcript-bg, rgba(99,102,241,0.08));
      border-radius: 8px;
      font-size: 13px;
      line-height: 1.5;
      color: var(--text-primary);
      word-break: break-word;
      direction: rtl;
    }

    .voice-transcript-result.transcribing {
      color: var(--text-muted);
      font-style: italic;
    }

    /* ── Voice message listen indicators ──────────────────────────────────── */

    /* Unheard dot: small inline dot in the voice meta area */
    .voice-unheard-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #22c55e;
      margin-inline-start: 5px;
      flex-shrink: 0;
      vertical-align: middle;
      animation: voice-dot-fade-in 0.3s ease;
    }

    .msg.own .voice-unheard-dot {
      background: rgba(255,255,255,0.85);
    }

    @keyframes voice-dot-fade-in {
      from { opacity: 0; transform: scale(0.5); }
      to   { opacity: 1; transform: scale(1); }
    }

    .msg.other .voice-transcript-result {
      background: rgba(255,255,255,0.1);
    }

    .msg.own .voice-transcribe-btn {
      background: rgba(255,255,255,0.18);
      color: #fff;
    }

    .msg.own .voice-transcribe-btn:hover:not(:disabled) {
      background: rgba(255,255,255,0.30);
    }

    .msg.own .voice-transcript-result {
      background: rgba(0,0,0,0.18);
      color: #fff;
    }

    .msg.own .voice-transcript-result.transcribing {
      color: rgba(255,255,255,0.7);
    }

    .voice-speed-bar {
      display: none;
      position: absolute;
      left: 0;
      right: 0;
      z-index: 99;
      height: 38px;
      align-items: center;
      justify-content: space-between;
      gap: 7px;
      padding: 3px 8px;
      border-radius: 0;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: 1px solid var(--voice-speed-bar-border, rgb(66 103 163 / 24%));
      background: var(--voice-speed-bar-bg, linear-gradient(270deg, rgb(8 15 35 / 12%), rgb(48 68 111 / 96%)));
      box-shadow: var(--voice-speed-bar-shadow, 0 2px 10px rgba(2, 6, 23, 0.22));
      backdrop-filter: blur(8px) saturate(1.05);
    }

    .voice-speed-bar.visible { display: flex; }

    .voice-speed-center {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 1;
      min-width: 0;
      justify-content: center;
      padding: 0;
      border: none;
      background: transparent;
      overflow: hidden;
    }

    .voice-speed-label {
      display: none;
      align-items: center;
      gap: 4px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--voice-speed-label-color, rgba(226, 232, 240, 0.82));
      white-space: nowrap;
      flex-shrink: 0;
    }

    .voice-speed-label i {
      color: var(--voice-speed-label-icon-color, rgba(34, 211, 238, 0.95));
      font-size: 10px;
    }

    .voice-speed-options {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      direction: ltr;
      flex-wrap: nowrap;
      min-width: 0;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .voice-speed-options::-webkit-scrollbar { display: none; }

    .voice-speed-action {
      font-size: 12px;
      width: 25px;
      height: 23px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border-radius: 5px;
      border: 1px solid var(--voice-speed-action-border, rgba(148, 163, 184, 0.28));
      background: var(--voice-speed-action-bg, rgba(8, 15, 35, 0.62));
      color: var(--voice-speed-action-color, rgba(226, 232, 240, 0.92));
      cursor: pointer;
      transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
    }

    .voice-speed-action:hover {
      transform: none;
      border-color: var(--voice-speed-action-hover-border, rgba(56, 189, 248, 0.66));
      background: var(--voice-speed-action-hover-bg, rgba(9, 24, 52, 0.92));
      box-shadow: 0 2px 8px rgba(2, 6, 23, 0.2);
    }

    .voice-speed-action:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .voice-speed-nav {
      font-size: 13px;
    }

    .voice-speed-action.repeat-on#voice-speed-repeat {
      border-color: rgba(34, 211, 238, 0.95);
      color: #031b26;
      background: linear-gradient(145deg, #06b6d4, #0ea5e9);
      box-shadow: 0 0 10px rgba(34, 211, 238, 0.45);
    }

    #voice-speed-repeat,
    #voice-speed-toggle {
      border-color: var(--voice-speed-aux-border, rgba(34, 211, 238, 0.78));
      color: var(--voice-speed-aux-color, #22d3ee);
      background: var(--voice-speed-aux-bg, rgba(7, 56, 95, 0.48));
    }

    #voice-speed-repeat:hover,
    #voice-speed-toggle:hover {
      border-color: var(--voice-speed-aux-hover-border, rgba(34, 211, 238, 0.95));
      background: var(--voice-speed-aux-hover-bg, rgba(7, 56, 95, 0.72));
    }

    .voice-speed-btn {
      min-width: 30px;
      padding: 2px 8px 1px 8px;
      border-radius: 5px;
      border: 1px solid var(--voice-speed-btn-border, rgb(15 16 16 / 75%));
      background: var(--voice-speed-btn-bg, rgba(15, 23, 42, 0.72));
      color: var(--voice-speed-btn-color, rgba(226, 232, 240, 0.88));
      font-size: 11px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
      transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
    }

    .voice-speed-btn:hover {
      transform: none;
      border-color: var(--voice-speed-btn-hover-border, rgba(34, 211, 238, 0.52));
      background: var(--voice-speed-btn-hover-bg, rgba(9, 24, 52, 0.92));
      color: var(--voice-speed-btn-hover-color, #f8fafc);
    }

    .voice-speed-btn.active {
      background: var(--voice-speed-btn-active-bg, linear-gradient(145deg, #06b6d4, #0ea5e9));
      border:none;
      color: var(--voice-speed-btn-active-color, #031b26);
      box-shadow: var(--voice-speed-btn-active-shadow, 0 2px 8px rgba(14, 165, 233, 0.34));
    }

    .voice-bubble {
      min-width: 320px;
      padding-top: 10px;
      direction: ltr;
    }

    .voice-preview-bar {
      display: none;
      align-items: center;
      gap: 14px;
      padding: 10px 14px 12px;
      background: var(--bg-secondary);
      border-top: 1px solid var(--border);
      flex-wrap: wrap;
      position: relative;
      z-index: 1;
    }

    .voice-preview-head {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 120px;
      color: var(--text-primary);
      font-size: 12px;
      font-weight: 700;
    }

    .voice-preview-pulse {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #ef4444;
      box-shadow: 0 0 0 0 rgba(239,68,68,0.4);
      animation: pulse 1.4s ease-out infinite;
    }

    .voice-preview-player-host {
      flex: 1;
      min-width: min(260px, 100%);
    }

    .voice-preview-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
    }

    .voice-preview-send,
    .voice-preview-cancel {
      border-radius: 10px;
      padding: 8px 14px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      white-space: nowrap;
    }

    .voice-preview-send {
      background: var(--accent);
      border: none;
      color: #fff;
    }

    .voice-preview-cancel {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-muted);
    }

    @media (max-width: 640px) {
      .voice-player { min-width: 0; max-width: 100%; }
      .voice-bubble { min-width: 0; width: min(100%, 290px); }
      .voice-preview-bar { align-items: stretch; }
      .voice-preview-player-host,
      .voice-preview-actions { width: 100%; }
      .voice-preview-actions { margin-left: 0; justify-content: flex-end; }
    }

    .upload-pending-wrap {
      display: flex; flex-direction: column; gap: 4px; min-width: 200px; max-width: 260px;
    }
    .upload-pending-info {
      display: flex; align-items: center; gap: 8px;
      background: var(--bg-tertiary); border: 1px solid var(--border);
      border-radius: 10px; padding: 6px 12px; font-size: 12px; color: var(--text-primary);
    }
    .upload-pending-info i { font-size: 18px; flex-shrink: 0; }
    .upload-pending-name { font-weight: 500; word-break: break-all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
    .upload-progress-track {
      height: 4px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden;
    }
    .upload-progress-fill {
      height: 100%; width: 0%; background: var(--accent); border-radius: 4px;
      transition: width 0.2s;
    }
    .upload-progress-label {
      font-size: 10px; color: var(--text-muted); text-align: right;
    }
    .upload-cancel-btn {
      background: none; border: none; cursor: pointer;
      color: var(--text-muted); padding: 2px 4px; margin-left: auto;
      border-radius: 4px; font-size: 14px; line-height: 1; flex-shrink: 0;
      transition: color 0.15s, background 0.15s;
    }
    .upload-cancel-btn:hover { color: var(--danger, #f38ba8); background: rgba(0,0,0,0.08); }

    /* --- User colors --- */
    .color-0 { color: #e94560; }
    .color-1 { color: #64ffda; }
    .color-2 { color: #ffd93d; }
    .color-3 { color: #6c63ff; }
    .color-4 { color: #ff6b9d; }
    .color-5 { color: #00d2ff; }
    .color-6 { color: #ffa502; }
    .color-7 { color: #a29bfe; }