/* MOBILE AUDIO REVISION 4 — keep the desktop player composition on small screens.
       The progress input stays in .voice-row; only the decorative waveform is removed. */
    @media (max-width: 620px) {
      .voice-player {
        grid-template-columns: 44px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 12px !important;
        padding: 18px 0 15px !important;
      }
      .voice-player > .play-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        margin: 0 !important;
        align-self: start !important;
      }
      .voice-player > .voice-main {
        grid-column: 2 !important;
        min-width: 0 !important;
        padding: 0 !important;
      }
      .voice-title {
        display: flex !important;
        align-items: baseline !important;
        flex-wrap: wrap !important;
        column-gap: .32em !important;
        row-gap: 2px !important;
        margin: 0 0 10px !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
      }
      .voice-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 70px !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 18px !important;
        margin: 0 !important;
      }
      .voice-row > .voice-progress {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 10px !important;
        margin: 0 !important;
      }
      .voice-time {
        display: block !important;
        width: 70px !important;
        min-width: 70px !important;
        text-align: right !important;
        white-space: nowrap !important;
        font-size: 10px !important;
        letter-spacing: .02em !important;
      }
      /* Decorative bars are hidden. The real slider above remains the seek control. */
      .voice-player > .voice-visual {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
      }

      /* Fixed soundbar: timeline row first; desktop-like controls and title below it. */
      .voice-dock {
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        grid-template-rows: 22px 42px !important;
        align-content: center !important;
        align-items: center !important;
        row-gap: 7px !important;
        column-gap: 10px !important;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box !important;
      }
      .dock-timeline {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 22px !important;
        min-height: 22px !important;
        gap: 6px !important;
        margin: 0 !important;
      }
      .dock-time { flex: 0 0 32px !important; min-width: 32px !important; font-size: 9px !important; }
      .dock-range { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; height: 6px !important; }
      .dock-range::-webkit-slider-runnable-track { height: 6px !important; }
      .dock-range::-moz-range-track { height: 6px !important; }
      .dock-controls {
        grid-column: 1 !important;
        grid-row: 2 !important;
        min-width: 0 !important;
        gap: 6px !important;
        align-items: center !important;
      }
      .dock-title {
        grid-column: 2 !important;
        grid-row: 2 !important;
        min-width: 0 !important;
        align-self: center !important;
      }
      .dock-title small { margin-bottom: 3px !important; font-size: 8px !important; }
      .dock-title strong { font-size: 12px !important; }
      .dock-btn { width: 20px !important; height: 24px !important; }
      .dock-btn .icon { width: 13px !important; height: 13px !important; }
      .dock-play { width: 40px !important; height: 40px !important; min-width: 40px !important; flex: 0 0 40px !important; }
      .dock-play .icon { width: 15px !important; height: 15px !important; }
      .dock-volume { gap: 4px !important; padding-left: 6px !important; margin-left: 0 !important; }
      .dock-volume-btn { width: 16px !important; height: 20px !important; }
      .dock-volume-btn .icon { width: 14px !important; height: 14px !important; }
      .dock-volume-range { width: 38px !important; }
      .dock-bars { display: none !important; width: 0 !important; height: 0 !important; min-height: 0 !important; }
      .artist-page { padding-bottom: calc(142px + env(safe-area-inset-bottom, 0px)) !important; }

      /* The collapsed-player restore button is centered on phones. */
      .dock-resume {
        left: 50% !important;
        right: auto !important;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        transform: translate(-50%, 8px) !important;
      }
      .dock-resume.is-visible { transform: translate(-50%, 0) !important; }
    }