/***** ML TTS: Siri風の幻想的な波形ボタン *****/

.ml-tts-player {
    width: 98%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* プレイヤー内の絶対配置（字幕など）の基準点 */
.ml-tts-player__inner {
    border-radius: 24px;
    position: relative;
    overflow: visible;
}
.ml-tts-player__inner{
    box-shadow:
        0 1px 2px rgba(0,0,0,.06),
        0 10px 30px rgba(0,0,0,.08);
}
.ml-tts-player .ml-tts-wavebtn {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 0;
    width: 100%;
    height: 45px;              /* ← 高さがないと見えません */
    border-radius: 22.5px;
    cursor: pointer;
    position: relative;         /* ← bgをabsoluteで乗せるため必須 */
    overflow: hidden;           /* ← はみ出しを切る */
    background: rgba(8, 10, 18, 0.92);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    color: transparent;
    padding-left: 45px;
    padding-right: 45px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    /* UAのフォーカスリング/タップハイライトを徹底的に無効化 */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    /* iOS/Safariで一瞬だけ外周が色づく“はみ出し”を抑える */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* キーボード操作時だけ分かるフォーカスリングを出す（クリック/タップでは青枠を出さない） */
.ml-tts-player .ml-tts-wavebtn:focus {
    outline: none;
}

/* Safari等でクリック後も focus-visible 扱いになって枠が出ることがあるので、基本は枠を出さない */
.ml-tts-player .ml-tts-wavebtn:focus-visible {
    outline: none;
}

/* 再生中はフォーカス由来の枠/影を完全に無効化（再生状態の視認を邪魔しない） */
.ml-tts-player .ml-tts-wavebtn[data-state="pause"]:focus,
.ml-tts-player .ml-tts-wavebtn[data-state="pause"]:focus-visible,
.ml-tts-player .ml-tts-wavebtn[data-state="playing"]:focus,
.ml-tts-player .ml-tts-wavebtn[data-state="playing"]:focus-visible {
    outline: none;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

/* クリック/タップで付くことがある枠（active / focus）を確実に殺す */
.ml-tts-player .ml-tts-wavebtn:active,
.ml-tts-player .ml-tts-wavebtn:focus,
.ml-tts-player .ml-tts-wavebtn:focus-visible {
    outline: none !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2) !important;
}

/* Firefoxの内側フォーカス枠対策 */
.ml-tts-player .ml-tts-wavebtn::-moz-focus-inner {
    border: 0;
}

.ml-tts-player .ml-tts-wavebtn::before {
    content: '';
    position: absolute;
    inset: -60px;
    border-radius: inherit;

    /* 幻想的なモヤ（Siriっぽい色のにじみ） */
    background:
        radial-gradient(closest-side at 18% 32%, rgba(84,150,255,.42), rgba(84,150,255,0) 64%),
        radial-gradient(closest-side at 52% 38%, rgba(255,92,187,.36), rgba(255,92,187,0) 62%),
        radial-gradient(closest-side at 82% 58%, rgba(92,255,210,.32), rgba(92,255,210,0) 66%),
        radial-gradient(closest-side at 38% 74%, rgba(160,145,255,.30), rgba(160,145,255,0) 64%),
        radial-gradient(closest-side at 62% 68%, rgba(255,255,255,.08), rgba(255,255,255,0) 70%);

    filter: blur(22px);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: none;

    animation: ml-tts-moya-drift 3.6s ease-in-out infinite;
}

.ml-tts-player .ml-tts-wavebtn::after {
    content: '';
    position: absolute;
    inset: -80px;
    border-radius: inherit;

    /* うっすら光の流れ（線は作らず、あくまでモヤの動きだけ） */
    background:
        conic-gradient(from 220deg at 50% 50%,
            rgba(84,150,255,0.00),
            rgba(84,150,255,0.12),
            rgba(255,92,187,0.10),
            rgba(92,255,210,0.10),
            rgba(84,150,255,0.00)
        );

    filter: blur(30px);
    opacity: 0.85;
    mix-blend-mode: screen;
    transform: translate3d(0, 0, 0);
    pointer-events: none;

    animation: ml-tts-moya-spin 3.8s linear infinite;
}

@keyframes ml-tts-moya-drift {
    0%, 100% {
        transform: translate3d(-22px, 8px, 0) scale(1.12);
    }
    50% {
        transform: translate3d(26px, -10px, 0) scale(1.22);
    }
}


@keyframes ml-tts-moya-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 再生中だけモヤを強めに動かす（体感を出す） */
@keyframes ml-tts-moya-drift-strong {
    0%, 100% {
        transform: translate3d(-64px, 28px, 0) scale(1.22) rotate(-2deg);
    }
    35% {
        transform: translate3d(72px, -34px, 0) scale(1.44) rotate(1.5deg);
    }
    70% {
        transform: translate3d(-18px, -48px, 0) scale(1.36) rotate(-1deg);
    }
}

@keyframes ml-tts-moya-spin-strong {
    0% {
        transform: rotate(0deg) scale(1.02);
    }
    50% {
        transform: rotate(210deg) scale(1.10);
    }
    100% {
        transform: rotate(360deg) scale(1.02);
    }
}

.ml-tts-player .ml-tts-wavebtn__bg {
    /* バー表示はやめて、波形要素はDOM上に残しつつ非表示 */
    display: none;
}

.ml-tts-player .ml-tts-wavebtn__bar {
    display: none;
}

/* 波形（モヤ）ボタンの上に、波打つシークUIを重ねる */
.ml-tts-wavewrap {
    position: relative;
}

/* シークUI（SVGの波形 + 透明レンジ） */
.ml-tts-seekwrap {
    position: absolute;
    left: 50px;
    right: 12px;
    bottom: 3px;
    height: 26px;

    z-index: 3;
}

/* 見た目の波形（SVG） */
.ml-tts-seekwave {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;

    pointer-events: none;
    opacity: 0.95;
}

/* 二重に見えるのが嫌なら、ベース波形は消す（進捗/カーソルだけ見せる） */
/* ベース波形は“常に残す”（シークが通った後も消さない） */
.ml-tts-seekwave [data-ml-tts-wave-base] {
    display: inline;
    opacity: 0.35 !important;
}

/* 進捗が 0% のときでも「シークバーが存在する」ことを伝えるためのトラック（SVGの下敷き） */
.ml-tts-seekwave [data-ml-tts-seek-track] {
    display: none;
}

/* 進捗波形はベースの上に重ねる（ベースを消さない） */
.ml-tts-seekwave [data-ml-tts-seek-track-prog] {
    opacity: 0.90;
    mix-blend-mode: screen;
}

.ml-tts-seekwave [data-ml-tts-wave-cursor] {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.35));
}

/* SafariでSVGの描画順が崩れて“通過後に消えたように見える”対策 */
.ml-tts-seekwave {
    isolation: isolate;
}
.ml-tts-seekwave [data-ml-tts-wave-base] {
    mix-blend-mode: normal;
}

/* 入力用レンジは透明で上に重ねる（ドラッグ/タップ） */
.ml-tts-seek--overlay {
    appearance: none;
    -webkit-appearance: none;

    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    margin: 0;
    background: transparent;
    cursor: pointer;

    /* 見た目はSVG側に任せる */
    opacity: 0;
}

.ml-tts-seek--overlay:focus {
    outline: none;
}

/* range input の focus-visible 枠も消す */
.ml-tts-seek--overlay:focus-visible {
    outline: none;
}

/* iOS/Safari 対策でレンジの見た目を完全に消す */
.ml-tts-seek--overlay::-webkit-slider-runnable-track {
    background: transparent;
    border: 0;
    height: 100%;
}

.ml-tts-seek--overlay::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;

    width: 1px;
    height: 100%;
    background: transparent;
    border: 0;
}

.ml-tts-seek--overlay::-moz-range-track {
    background: transparent;
    border: 0;
    height: 100%;
}

.ml-tts-seek--overlay::-moz-range-thumb {
    width: 1px;
    height: 100%;
    background: transparent;
    border: 0;
}


/* ===== Fallback: spanベースのシークUI（SVGを消した構成でも必ず表示される） ===== */

.ml-tts-seekwrap {
    /* ここが 0px だと“消えた”ように見えるので、最低高さを確保 */
    min-height: 18px;
}

.ml-tts-seek-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;

    /* クリック領域は seekwrap 側で確保しつつ、見た目のトラックは細く */
    height: 15px;
    transform: translateY(-50%);

    display: block;
    /* background: rgba(255, 255, 255, 0.10);
    border-radius: 999px; */
    overflow: hidden;
}

.ml-tts-seek-track__prog {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    /* JSで width を更新する想定（なければ 0% のまま） */
    width: 0%;

    /* background: rgba(255, 255, 255, 0.26); */
}

.ml-tts-seek-track__cursor {
    position: absolute;
    top: 50%;

    /* JSで left を更新する想定（なければ 0 の位置） */
    left: 0;

    width: 4px;
    height: 32px;
    transform: translateY(-50%);

    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
}

/* ===== Thin modifiers（HTMLにstyleを書かずに細くする） ===== */

/* シーク領域そのものを細く（SVG/span共通） */
.ml-tts-seekwrap--thin {
    height: 16px;
    min-height: 16px;
}

/* spanフォールバックのトラックを細く・控えめに */
.ml-tts-seek-track--thin {
    /* background: rgba(255, 255, 255, 0.08); */
}

.ml-tts-seek-track--thin .ml-tts-seek-track__prog {
    /* background: rgba(255, 255, 255, 0.18); */
}

/* 縦カーソルを細く（◯ではなくライン） */
.ml-tts-seek-track--thin .ml-tts-seek-track__cursor {
    top: 50%;
    width: 3px;
    height: 28px;
    transform: translateY(-50%);
    /* background: rgba(255, 255, 255, 0.92); */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.40);
}

/* SVG版の縦カーソル（data属性）も細くする */
.ml-tts-seekwrap--thin .ml-tts-seekwave [data-ml-tts-wave-cursor] {
    stroke-width: 2.25;
}

/* SVG版の直線トラック/進捗の太さを抑える */
/* (Removed per instructions) */


.ml-tts-seekwrap--thin .ml-tts-seekwave [data-ml-tts-seek-track-prog] {
    stroke-width: 1;
}

/* SVG版のトラック/進捗も気持ち控えめ */

.ml-tts-seekwrap--thin .ml-tts-seekwave [data-ml-tts-seek-track-prog] {
    opacity: 0.9;
}

/* ===== Play button (circle) on the left ===== */

.ml-tts-wavebtn__play {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 25px;
    z-index: 5;
    pointer-events: none; /* クリックはボタン本体で拾う */
}

/* 再生アイコン（三角） */
.ml-tts-wavebtn__play::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-42%, -50%);

    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid rgba(255, 255, 255, 0.92);

    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.18));
}

/* 再生中は停止（||）に切り替え */
.ml-tts-wavebtn[data-state="pause"] .ml-tts-wavebtn__play::before {
    width: 10px;
    height: 14px;
    border: 0;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;

    background:
        linear-gradient(to right,
            rgba(255, 255, 255, 0.92) 0 3px,
            transparent 3px 7px,
            rgba(255, 255, 255, 0.92) 7px 10px
        );

    border-radius: 1px;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.18));
}

/* 読み込み中は薄くする（状態がわかる） */
.ml-tts-wavebtn[data-state="loading"] .ml-tts-wavebtn__play {
    opacity: 0.65;
}

/* エラー時は少し赤み（押しても始まらないを明確に） */
.ml-tts-wavebtn[data-state="error"] .ml-tts-wavebtn__play {
    border-color: rgba(255, 120, 120, 0.38);
}


/* 再生中（data-state="pause" = 再生中扱い）だけ背景モヤを強く・速く */
.ml-tts-player .ml-tts-wavebtn[data-state="pause"]::before,
.ml-tts-player .ml-tts-wavebtn[data-state="playing"]::before {
    animation: ml-tts-moya-drift-strong 1.65s ease-in-out infinite;
    filter: blur(24px);
    opacity: 1;
}

.ml-tts-player .ml-tts-wavebtn[data-state="pause"]::after,
.ml-tts-player .ml-tts-wavebtn[data-state="playing"]::after {
    animation: ml-tts-moya-spin-strong 1.85s linear infinite;
    filter: blur(32px);
    opacity: 1;
}

/* 再生中はボタン全体にfilterを掛けない（外周が青く見える副作用を避ける） */
.ml-tts-player .ml-tts-wavebtn[data-state="pause"]::before,
.ml-tts-player .ml-tts-wavebtn[data-state="pause"]::after,
.ml-tts-player .ml-tts-wavebtn[data-state="playing"]::before,
.ml-tts-player .ml-tts-wavebtn[data-state="playing"]::after {
    filter: blur(28px) saturate(1.06) brightness(1.02);
}

/* ===== Wave button status (loading / error) ===== */

.ml-tts-wavebtn__status{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    width:16px;
    height:16px;
    opacity:0;
    z-index:4;
    pointer-events:none;
}

/* loading: spinner */
.ml-tts-wavebtn[data-state="loading"] .ml-tts-wavebtn__status{
    opacity:1;
    border: 1.5px solid rgba(255,255,255,0.25);
    border-top-color: rgba(255,255,255,0.90);
    border-radius:999px;
    animation: ml-tts-spin 0.9s linear infinite;
}

/* error: exclamation badge */
.ml-tts-wavebtn[data-state="error"] .ml-tts-wavebtn__status{
    opacity:1;
    border-radius:999px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 0 12px rgba(255,255,255,0.18);
}
.ml-tts-wavebtn[data-state="error"] .ml-tts-wavebtn__status::before{
    content:"!";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:900;
    color: rgba(255,255,255,0.92);
}

/* 見た目だけの補助（押したのに無反応感を減らす） */
.ml-tts-wavebtn[data-state="loading"]{
    cursor: progress;
    filter: brightness(0.95);
}

@keyframes ml-tts-spin{
    from{ transform:translateY(-50%) rotate(0deg); }
    to  { transform:translateY(-50%) rotate(360deg); }
}


/***** ML TTS: Gemini Live（背景だけ差し替え） *****/

/* ボタン本体の背景（共通UIは触らない） */
.ml-tts-player[data-ml-tts-theme="gemini-live"] .ml-tts-wavebtn {
    background: rgba(8, 10, 14, 0.94);
}

/* 下から立ち上がる“深いブルー”グラデーション（Gemini Liveの雰囲気） */
.ml-tts-player[data-ml-tts-theme="gemini-live"] .ml-tts-wavebtn::before {
    background:
        /* ベース：指定のブルーグラデーション */
        linear-gradient(
            to top,
            rgb(28, 78, 255) 0%,
            rgb(20, 55, 110) 40%,
            rgb(13, 44, 82) 70%,
            rgb(8, 17, 29) 100%
        ),
        /* 下部に強い発光（青） */
        radial-gradient(140% 220% at 18% 132%, rgba(28, 78, 255, 0.62), rgba(28, 78, 255, 0) 60%),
        radial-gradient(160% 240% at 82% 140%, rgba(95, 200, 255, 0.42), rgba(95, 200, 255, 0) 62%),
        /* green accents：足すだけ（主役は青のまま） */
        radial-gradient(150% 260% at 28% 146%, rgba(70, 255, 170, 0.22), rgba(70, 255, 170, 0) 64%),
        radial-gradient(140% 240% at 62% 142%, rgba(120, 255, 205, 0.14), rgba(120, 255, 205, 0) 72%),
        /* ほんのり白い霧（質感） */
        radial-gradient(110% 180% at 50% 150%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 76%);

    filter: blur(26px);
    opacity: 1;

    /* 背景が“呼吸”する程度の動き */
    animation: ml-tts-gemini-moya-drift 4.8s ease-in-out infinite;
}

/* うっすらした光の流れ（青主体 + 緑を少し） */
.ml-tts-player[data-ml-tts-theme="gemini-live"] .ml-tts-wavebtn::after {
    background:
        conic-gradient(from 210deg at 50% 120%,
            rgba(28, 78, 255, 0.00),
            rgba(28, 78, 255, 0.14),
            rgba(95, 200, 255, 0.12),
            rgba(70, 255, 170, 0.07),
            rgba(28, 78, 255, 0.00)
        );

    filter: blur(42px);
    opacity: 0.72;
    mix-blend-mode: screen;

    animation: ml-tts-gemini-moya-spin 6.0s linear infinite;
}

@keyframes ml-tts-gemini-moya-drift {
    0%, 100% {
        transform: translate3d(-18px, 10px, 0) scale(1.10);
    }
    50% {
        transform: translate3d(22px, -8px, 0) scale(1.18);
    }
}

@keyframes ml-tts-gemini-moya-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
 
/***** ML TTS: Apple Music（ダーク） - 背景だけ差し替え *****/

/* ボタン本体：ダーク */
.ml-tts-player[data-ml-tts-theme="apple-music"] .ml-tts-wavebtn {
    background: rgba(10, 10, 16, 0.94);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

/* Apple Musicっぽい“マゼンタ寄り”の柔らかいグラデーション */
.ml-tts-player[data-ml-tts-theme="apple-music"] .ml-tts-wavebtn::before {
    background:
        /* Apple Musicのアクセントに寄せた“赤寄りマゼンタ”を強めに */
        radial-gradient(130% 190% at 18% 122%, rgba(255, 45, 85, 0.72), rgba(255, 45, 85, 0) 56%),
        radial-gradient(140% 200% at 84% 126%, rgba(255, 55, 120, 0.62), rgba(255, 55, 120, 0) 58%),
        radial-gradient(120% 170% at 42% 112%, rgba(255, 80, 140, 0.46), rgba(255, 80, 140, 0) 62%),
        radial-gradient(120% 170% at 62% 110%, rgba(255, 160, 205, 0.28), rgba(255, 160, 205, 0) 72%),
        radial-gradient(100% 140% at 50% 140%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 78%);

    filter: blur(28px);
    opacity: 1;

    animation: ml-tts-applemusic-moya-drift 5.2s ease-in-out infinite;
}

/* うっすら光の流れ（白基調なので控えめ） */
.ml-tts-player[data-ml-tts-theme="apple-music"] .ml-tts-wavebtn::after {
    background:
        /* 赤の“芯”を作ってApple Musicらしさを増す */
        conic-gradient(from 225deg at 50% 120%,
            rgba(255, 45, 85, 0.00),
            rgba(255, 45, 85, 0.18),
            rgba(255, 80, 140, 0.16),
            rgba(255, 255, 255, 0.06),
            rgba(255, 45, 85, 0.00)
        );

    filter: blur(40px);
    opacity: 0.75;
    mix-blend-mode: screen;

    animation: ml-tts-applemusic-moya-spin 7.0s linear infinite;
}

/* ダーク背景に合わせて、左の再生アイコンの白を強調 */
.ml-tts-player[data-ml-tts-theme="apple-music"] .ml-tts-wavebtn__play::before {
    border-left-color: rgba(255, 255, 255, 0.92);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.18));
}

.ml-tts-player[data-ml-tts-theme="apple-music"] .ml-tts-wavebtn[data-state="pause"] .ml-tts-wavebtn__play::before {
    background:
        linear-gradient(to right,
            rgba(255, 255, 255, 0.92) 0 3px,
            transparent 3px 7px,
            rgba(255, 255, 255, 0.92) 7px 10px
        );
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.18));
}

.ml-tts-player[data-ml-tts-theme="apple-music"] .ml-tts-wavebtn[data-state="loading"] .ml-tts-wavebtn__status{
    border: 1.5px solid rgba(255,255,255,0.25);
    border-top-color: rgba(255,255,255,0.90);
}

.ml-tts-player[data-ml-tts-theme="apple-music"] .ml-tts-wavebtn[data-state="error"] .ml-tts-wavebtn__status{
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 0 12px rgba(255,255,255,0.18);
}

.ml-tts-player[data-ml-tts-theme="apple-music"] .ml-tts-wavebtn[data-state="error"] .ml-tts-wavebtn__status::before{
    color: rgba(255,255,255,0.92);
}

/***** ML TTS: Black（モノトーン/ダーク） - 背景だけ差し替え *****/

/* 黒ベース。発光は“ほぼ無色”で、質感だけ出す */
.ml-tts-player[data-ml-tts-theme="black"] .ml-tts-wavebtn {
    background: rgba(0, 0, 0, 0.96);
}

.ml-tts-player[data-ml-tts-theme="black"] .ml-tts-wavebtn::before {
    background:
        radial-gradient(130% 200% at 18% 122%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 58%),
        radial-gradient(140% 210% at 84% 126%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 62%),
        radial-gradient(120% 170% at 46% 112%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 66%),
        radial-gradient(100% 140% at 50% 140%, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 78%);

    filter: blur(30px);
    opacity: 1;

    animation: ml-tts-black-moya-drift 6.2s ease-in-out infinite;
}

.ml-tts-player[data-ml-tts-theme="black"] .ml-tts-wavebtn::after {
    background:
        conic-gradient(from 220deg at 50% 120%,
            rgba(255, 255, 255, 0.00),
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.04),
            rgba(255, 255, 255, 0.00)
        );

    filter: blur(46px);
    opacity: 0.75;
    mix-blend-mode: screen;

    animation: ml-tts-black-moya-spin 10.0s linear infinite;
}

@keyframes ml-tts-black-moya-drift {
    0%, 100% {
        transform: translate3d(-18px, 10px, 0) scale(1.10);
    }
    50% {
        transform: translate3d(22px, -8px, 0) scale(1.18);
    }
}

@keyframes ml-tts-black-moya-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/***** ML TTS: Siri（ライト） - 背景だけ差し替え *****/

/* Siriっぽい“虹色のモヤ”は残しつつ、白背景に最適化 */
.ml-tts-player[data-ml-tts-theme="siri-light"] .ml-tts-wavebtn {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.ml-tts-player[data-ml-tts-theme="siri-light"] .ml-tts-wavebtn::before {
    background:
        radial-gradient(closest-side at 18% 32%, rgba(84,150,255,.34), rgba(84,150,255,0) 64%),
        radial-gradient(closest-side at 52% 38%, rgba(255,92,187,.28), rgba(255,92,187,0) 62%),
        radial-gradient(closest-side at 82% 58%, rgba(92,255,210,.24), rgba(92,255,210,0) 66%),
        radial-gradient(closest-side at 38% 74%, rgba(160,145,255,.22), rgba(160,145,255,0) 64%),
        radial-gradient(closest-side at 62% 68%, rgba(0,0,0,.06), rgba(0,0,0,0) 72%);

    filter: blur(26px);
    opacity: 0.92;

    animation: ml-tts-moya-drift 3.6s ease-in-out infinite;
}

.ml-tts-player[data-ml-tts-theme="siri-light"] .ml-tts-wavebtn::after {
    background:
        conic-gradient(from 220deg at 50% 50%,
            rgba(84,150,255,0.00),
            rgba(84,150,255,0.10),
            rgba(255,92,187,0.08),
            rgba(92,255,210,0.08),
            rgba(84,150,255,0.00)
        );

    filter: blur(34px);
    opacity: 0.55;
    mix-blend-mode: multiply;

    animation: ml-tts-moya-spin 3.8s linear infinite;
}

/* 左の再生/停止アイコンは黒寄りで視認性確保 */
.ml-tts-player[data-ml-tts-theme="siri-light"] .ml-tts-wavebtn__play::before {
    border-left-color: rgba(0, 0, 0, 0.78);
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.14));
}

.ml-tts-player[data-ml-tts-theme="siri-light"] .ml-tts-wavebtn[data-state="pause"] .ml-tts-wavebtn__play::before {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0.78) 0 3px,
            transparent 3px 7px,
            rgba(0, 0, 0, 0.78) 7px 10px
        );
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.14));
}

/* シークUIも黒寄りに（白背景で埋もれない） */
.ml-tts-player[data-ml-tts-theme="siri-light"] .ml-tts-seekwave [data-ml-tts-wave-cursor] {
    stroke: rgba(0, 0, 0, 0.70);
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.18));
}

.ml-tts-player[data-ml-tts-theme="siri-light"] .ml-tts-seekwave [data-ml-tts-wave-base] {
    stroke: rgba(0, 0, 0, 0.18);
    opacity: 0.95;
}

.ml-tts-player[data-ml-tts-theme="siri-light"] .ml-tts-seekwave [data-ml-tts-seek-track-prog] {
    stroke: rgba(0, 0, 0, 0.46);
    opacity: 0.95;
}

.ml-tts-player[data-ml-tts-theme="siri-light"] .ml-tts-seek-track__cursor {
    background: rgba(0, 0, 0, 0.66);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
}

/* loading: spinner を黒系に */
.ml-tts-player[data-ml-tts-theme="siri-light"] .ml-tts-wavebtn[data-state="loading"] .ml-tts-wavebtn__status{
    border: 1.5px solid rgba(0,0,0,0.16);
    border-top-color: rgba(0,0,0,0.72);
}

/* error: バッジを黒系に */
.ml-tts-player[data-ml-tts-theme="siri-light"] .ml-tts-wavebtn[data-state="error"] .ml-tts-wavebtn__status{
    background: rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.14);
    box-shadow: 0 0 12px rgba(0,0,0,0.10);
}

.ml-tts-player[data-ml-tts-theme="siri-light"] .ml-tts-wavebtn[data-state="error"] .ml-tts-wavebtn__status::before{
    color: rgba(0,0,0,0.78);
}

/***** ML TTS: White（モノトーン/ライト） - 背景だけ差し替え *****/

/* 白ベース。陰影は“薄いグレー”で、清潔感を優先 */
.ml-tts-player[data-ml-tts-theme="white"] .ml-tts-wavebtn {
    background: rgba(255, 255, 255, 0.98);
}

.ml-tts-player[data-ml-tts-theme="white"] .ml-tts-wavebtn::before {
    background:
        radial-gradient(130% 200% at 18% 122%, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0) 58%),
        radial-gradient(140% 210% at 84% 126%, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0) 62%),
        radial-gradient(120% 170% at 46% 112%, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0) 66%),
        radial-gradient(100% 140% at 50% 140%, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0) 78%);

    filter: blur(26px);
    opacity: 0.90;

    animation: ml-tts-white-moya-drift 6.6s ease-in-out infinite;
}

.ml-tts-player[data-ml-tts-theme="white"] .ml-tts-wavebtn::after {
    background:
        conic-gradient(from 225deg at 50% 120%,
            rgba(0, 0, 0, 0.00),
            rgba(0, 0, 0, 0.06),
            rgba(0, 0, 0, 0.04),
            rgba(0, 0, 0, 0.00)
        );

    filter: blur(38px);
    opacity: 0.55;
    mix-blend-mode: multiply;

    animation: ml-tts-white-moya-spin 10.6s linear infinite;
}

@keyframes ml-tts-white-moya-drift {
    0%, 100% {
        transform: translate3d(-14px, 8px, 0) scale(1.08);
    }
    50% {
        transform: translate3d(16px, -6px, 0) scale(1.14);
    }
}

@keyframes ml-tts-white-moya-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* --- Theme: white (improve contrast) ------------------------------------ */

/* 再生アイコン（三角）を黒に */
.ml-tts-player[data-ml-tts-theme="white"] .ml-tts-wavebtn__play::before {
    border-left-color: rgba(0, 0, 0, 0.82);
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.18));
}

/* 再生中の停止（||）も黒に */
.ml-tts-player[data-ml-tts-theme="white"] .ml-tts-wavebtn[data-state="pause"] .ml-tts-wavebtn__play::before {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0.82) 0 3px,
            transparent 3px 7px,
            rgba(0, 0, 0, 0.82) 7px 10px
        );
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.18));
}

/* SVGカーソルの発光は白だと飛ぶので、黒寄りに */
.ml-tts-player[data-ml-tts-theme="white"] .ml-tts-seekwave [data-ml-tts-wave-cursor] {
    opacity: 1;
    stroke: rgba(0, 0, 0, 0.78);
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.22));
}

/* SVGの波形/進捗も黒寄りに（白背景で埋もれないように） */
.ml-tts-player[data-ml-tts-theme="white"] .ml-tts-seekwave [data-ml-tts-wave-base] {
    stroke: rgba(0, 0, 0, 0.22);
    opacity: 0.95;
}

.ml-tts-player[data-ml-tts-theme="white"] .ml-tts-seekwave [data-ml-tts-seek-track-prog] {
    stroke: rgba(0, 0, 0, 0.52);
    opacity: 0.95;
}

/* spanフォールバックの縦カーソルも黒寄りに */
.ml-tts-player[data-ml-tts-theme="white"] .ml-tts-seek-track__cursor {
    background: rgba(0, 0, 0, 0.72);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.18);
}

/* loading: spinner を黒系に */
.ml-tts-player[data-ml-tts-theme="white"] .ml-tts-wavebtn[data-state="loading"] .ml-tts-wavebtn__status{
    border: 1.5px solid rgba(0,0,0,0.18);
    border-top-color: rgba(0,0,0,0.78);
}

/* error: バッジを黒系に */
.ml-tts-player[data-ml-tts-theme="white"] .ml-tts-wavebtn[data-state="error"] .ml-tts-wavebtn__status{
    background: rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.16);
    box-shadow: 0 0 12px rgba(0,0,0,0.10);
}
.ml-tts-player[data-ml-tts-theme="white"] .ml-tts-wavebtn[data-state="error"] .ml-tts-wavebtn__status::before{
    color: rgba(0,0,0,0.78);
}

/* 任意: テキスト色（もし表示される場合） */
.ml-tts-player[data-ml-tts-theme="white"] .ml-tts-seekwrap,
.ml-tts-player[data-ml-tts-theme="white"] .ml-tts-seek {
    color: rgba(0, 0, 0, 0.85);
}
/***** ML TTS: Apple Intelligence（背景だけ差し替え） *****/

/* Apple Intelligenceのロゴっぽい青→紫→ピンク→赤→オレンジのグラデーション */
.ml-tts-player[data-ml-tts-theme="apple-intelligence"] .ml-tts-wavebtn {
    background: rgba(8, 10, 18, 0.92);
}

.ml-tts-player[data-ml-tts-theme="apple-intelligence"] .ml-tts-wavebtn::before {
    /* 大きめの面グラデーション＋にじみ（ロゴの質感） */
    background:
        linear-gradient(90deg,
            rgba(  0, 122, 255, 0.55) 0%,
            rgba( 88,  86, 214, 0.52) 28%,
            rgba(175,  82, 222, 0.50) 44%,
            rgba(255,  45,  85, 0.48) 66%,
            rgba(255, 149,   0, 0.42) 100%
        ),
        radial-gradient(closest-side at 20% 35%, rgba(  0, 122, 255, 0.55), rgba(  0, 122, 255, 0) 70%),
        radial-gradient(closest-side at 48% 40%, rgba(175,  82, 222, 0.45), rgba(175,  82, 222, 0) 68%),
        radial-gradient(closest-side at 72% 55%, rgba(255,  45,  85, 0.42), rgba(255,  45,  85, 0) 70%),
        radial-gradient(closest-side at 88% 62%, rgba(255, 149,   0, 0.36), rgba(255, 149,   0, 0) 72%);

    filter: blur(24px);
    opacity: 1;

    /* 既存のSiri系アニメに乗せる（共通部品は触らない） */
    animation: ml-tts-moya-drift 3.9s ease-in-out infinite;
}

.ml-tts-player[data-ml-tts-theme="apple-intelligence"] .ml-tts-wavebtn::after {
    /* 角度付きの“光の流れ”を足して立体感 */
    background:
        conic-gradient(from 215deg at 50% 55%,
            rgba(  0, 122, 255, 0.00),
            rgba(  0, 122, 255, 0.14),
            rgba(175,  82, 222, 0.14),
            rgba(255,  45,  85, 0.12),
            rgba(255, 149,   0, 0.10),
            rgba(  0, 122, 255, 0.00)
        );

    filter: blur(34px);
    opacity: 0.78;
    mix-blend-mode: screen;

    animation: ml-tts-moya-spin 4.2s linear infinite;
}

/* 再生中は少しだけ強め（色は変えない） */
.ml-tts-player[data-ml-tts-theme="apple-intelligence"] .ml-tts-wavebtn[data-state="pause"]::before,
.ml-tts-player[data-ml-tts-theme="apple-intelligence"] .ml-tts-wavebtn[data-state="playing"]::before {
    filter: blur(26px);
}

.ml-tts-player[data-ml-tts-theme="apple-intelligence"] .ml-tts-wavebtn[data-state="pause"]::after,
.ml-tts-player[data-ml-tts-theme="apple-intelligence"] .ml-tts-wavebtn[data-state="playing"]::after {
    filter: blur(36px);
    opacity: 0.84;
}


/***** ML TTS: Apple Intelligence（ライト） - 背景だけ差し替え *****/

/* ライトは白ベース。背景グラデーションはロゴの色味を“淡く”滲ませる */
.ml-tts-player[data-ml-tts-theme="apple-intelligence-light"] .ml-tts-wavebtn {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.ml-tts-player[data-ml-tts-theme="apple-intelligence-light"] .ml-tts-wavebtn::before {
    background:
        radial-gradient(closest-side at 16% 34%, rgba(  0, 122, 255, 0.34), rgba(  0, 122, 255, 0) 70%),
        radial-gradient(closest-side at 46% 40%, rgba(175,  82, 222, 0.28), rgba(175,  82, 222, 0) 70%),
        radial-gradient(closest-side at 72% 54%, rgba(255,  45,  85, 0.24), rgba(255,  45,  85, 0) 72%),
        radial-gradient(closest-side at 88% 62%, rgba(255, 149,   0, 0.22), rgba(255, 149,   0, 0) 74%),
        radial-gradient(closest-side at 58% 70%, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0) 76%);

    filter: blur(26px);
    opacity: 0.92;

    /* 共通のSiri系アニメを流用 */
    animation: ml-tts-moya-drift 3.9s ease-in-out infinite;
}

.ml-tts-player[data-ml-tts-theme="apple-intelligence-light"] .ml-tts-wavebtn::after {
    background:
        conic-gradient(from 215deg at 50% 55%,
            rgba(  0, 122, 255, 0.00),
            rgba(  0, 122, 255, 0.10),
            rgba(175,  82, 222, 0.10),
            rgba(255,  45,  85, 0.08),
            rgba(255, 149,   0, 0.06),
            rgba(  0, 122, 255, 0.00)
        );

    filter: blur(36px);
    opacity: 0.55;
    mix-blend-mode: multiply;

    animation: ml-tts-moya-spin 4.2s linear infinite;
}

/* 白背景で視認性が落ちる要素は黒寄りに（波形やロジックは触らず色だけ） */
.ml-tts-player[data-ml-tts-theme="apple-intelligence-light"] .ml-tts-wavebtn__play::before {
    border-left-color: rgba(0, 0, 0, 0.78);
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.14));
}

.ml-tts-player[data-ml-tts-theme="apple-intelligence-light"] .ml-tts-wavebtn[data-state="pause"] .ml-tts-wavebtn__play::before {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0.78) 0 3px,
            transparent 3px 7px,
            rgba(0, 0, 0, 0.78) 7px 10px
        );
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.14));
}

.ml-tts-player[data-ml-tts-theme="apple-intelligence-light"] .ml-tts-seekwave [data-ml-tts-wave-cursor] {
    stroke: rgba(0, 0, 0, 0.70);
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.18));
}

.ml-tts-player[data-ml-tts-theme="apple-intelligence-light"] .ml-tts-seekwave [data-ml-tts-wave-base] {
    stroke: rgba(0, 0, 0, 0.18);
    opacity: 0.95;
}

.ml-tts-player[data-ml-tts-theme="apple-intelligence-light"] .ml-tts-seekwave [data-ml-tts-seek-track-prog] {
    stroke: rgba(0, 0, 0, 0.46);
    opacity: 0.95;
}

.ml-tts-player[data-ml-tts-theme="apple-intelligence-light"] .ml-tts-seek-track__cursor {
    background: rgba(0, 0, 0, 0.66);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
}

.ml-tts-player[data-ml-tts-theme="apple-intelligence-light"] .ml-tts-wavebtn[data-state="loading"] .ml-tts-wavebtn__status{
    border: 1.5px solid rgba(0,0,0,0.16);
    border-top-color: rgba(0,0,0,0.72);
}

.ml-tts-player[data-ml-tts-theme="apple-intelligence-light"] .ml-tts-wavebtn[data-state="error"] .ml-tts-wavebtn__status{
    background: rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.14);
    box-shadow: 0 0 12px rgba(0,0,0,0.10);
}

.ml-tts-player[data-ml-tts-theme="apple-intelligence-light"] .ml-tts-wavebtn[data-state="error"] .ml-tts-wavebtn__status::before{
    color: rgba(0,0,0,0.78);
}


.ml-tts-player[data-ml-tts-theme="apple-intelligence-light"] .ml-tts-wavebtn[data-state="error"] .ml-tts-wavebtn__status::before{
    color: rgba(0,0,0,0.78);
}


/***** ML TTS: Karaoke（原稿ハイライト / 雰囲気カラオケ） *****/

/*
  目的:
  - 波形UIの上に“原稿の一部”を重ねて表示
  - JSが data-ml-tts-state を付け替えてハイライト

  想定DOM:
  - .ml-tts-wavebtn の中に .ml-tts-karaoke を置く
  - .ml-tts-karaoke 内に span[data-ml-tts-seg] を並べる
*/

.ml-tts-player .ml-tts-karaoke {
    position: absolute;
    left: 50px;
    right: 12px;
    top: 3px;

    height: 18px;
    line-height: 18px;

    z-index: 4; /* seekwave(3) より上 */

    overflow: hidden;
    white-space: nowrap;

    /* JSの計測（clientWidth/scrollWidth）を安定させ、スクロールが“1回だけ”になりにくくする */
    contain: layout paint;

    pointer-events: none; /* クリックは波形ボタンに通す */

    /* 端をフェード（横スクロールしても自然に） */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #fff 5%, #fff 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #fff 5%, #fff 95%, transparent 100%);
}

.ml-tts-player .ml-tts-karaoke__line {
    display: block;
    width: 100%;
}

.ml-tts-player .ml-tts-karaoke__inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    /* JSが transform を書き換える想定（DOMに合わせる） */
    will-change: transform;

    /* 初期値を与えて合成レイヤー化を安定させ、カクつきを抑える */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* セグメント（通常） */
.ml-tts-player .ml-tts-karaoke [data-ml-tts-seg] {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;

    /* 通常は淡く。active だけ“塗り”に切り替える */
    color: rgba(255, 255, 255, 0.72);

    /* 進捗（0..1）: JSが span に --ml-tts-kprog を入れる */
    --ml-tts-kprog: 0;

    /* 塗りの下準備（activeで text-fill: transparent にする） */
    background-repeat: no-repeat;
    background-position: left center;

    /* にじみ（雰囲気） */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.16);
}

/* 読み上げ済み（JSが data-ml-tts-state="done" を付与） */
.ml-tts-player .ml-tts-karaoke [data-ml-tts-seg][data-ml-tts-state="done"] {
    color: rgba(255, 255, 255, 0.52);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.10);
}

/* 読み上げ中（JSが data-ml-tts-state="active" を付与） */
.ml-tts-player .ml-tts-karaoke [data-ml-tts-seg][data-ml-tts-state="active"] {
    /* 文字を“塗る”ために text-fill を透明に */
    color: transparent;
    -webkit-text-fill-color: transparent;

    /*
      2レイヤー:
      - layer1: ハイライト（進捗分だけ表示）
      - layer2: 未消化のベース（薄く全体）
    */
    background-image:
        linear-gradient(
            to top,
            rgb(28,78,255) 0%,
            rgb(20,55,110) 40%,
            rgb(13,44,82) 70%,
            rgb(8,17,29) 100%
        ),
        linear-gradient(
            to right,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.22) 100%
        );

    /* layer1 は進捗ぶんだけ幅を伸ばす */
    background-size:
        calc(var(--ml-tts-kprog, 0) * 100%) 100%,
        100% 100%;

    background-position: left center, left center;
    background-repeat: no-repeat, no-repeat;

    -webkit-background-clip: text;
    background-clip: text;

    /* “カラオケっぽい発光” */
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.26),
        0 0 18px rgba(28, 78, 255, 0.18);
}

/* 再生中だけ、原稿にわずかな動き（無音時にうるさくしない） */
.ml-tts-player .ml-tts-wavebtn[data-state="pause"] .ml-tts-karaoke,
.ml-tts-player .ml-tts-wavebtn[data-state="playing"] .ml-tts-karaoke {
    opacity: 1;
}

/* ローディング中は薄く（状態がわかる） */
.ml-tts-player .ml-tts-wavebtn[data-state="loading"] .ml-tts-karaoke {
    opacity: 0.55;
}

/* エラー時はさらに薄く */
.ml-tts-player .ml-tts-wavebtn[data-state="error"] .ml-tts-karaoke {
    opacity: 0.40;
}


/***** Light themes: karaoke color adjustments *****/

.ml-tts-player[data-ml-tts-theme="white"] .ml-tts-karaoke [data-ml-tts-seg],
.ml-tts-player[data-ml-tts-theme="siri-light"] .ml-tts-karaoke [data-ml-tts-seg],
.ml-tts-player[data-ml-tts-theme="apple-intelligence-light"] .ml-tts-karaoke [data-ml-tts-seg] {
    color: rgba(0, 0, 0, 0.72);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
}

.ml-tts-player[data-ml-tts-theme="white"] .ml-tts-karaoke [data-ml-tts-seg][data-ml-tts-state="done"],
.ml-tts-player[data-ml-tts-theme="siri-light"] .ml-tts-karaoke [data-ml-tts-seg][data-ml-tts-state="done"],
.ml-tts-player[data-ml-tts-theme="apple-intelligence-light"] .ml-tts-karaoke [data-ml-tts-seg][data-ml-tts-state="done"] {
    color: rgba(0, 0, 0, 0.50);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
}

.ml-tts-player[data-ml-tts-theme="white"] .ml-tts-karaoke [data-ml-tts-seg][data-ml-tts-state="active"],
.ml-tts-player[data-ml-tts-theme="siri-light"] .ml-tts-karaoke [data-ml-tts-seg][data-ml-tts-state="active"],
.ml-tts-player[data-ml-tts-theme="apple-intelligence-light"] .ml-tts-karaoke [data-ml-tts-seg][data-ml-tts-state="active"] {
    color: transparent;
    -webkit-text-fill-color: transparent;

    background-image:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.92) 100%
        ),
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0.20) 0%,
            rgba(0, 0, 0, 0.20) 100%
        );

    background-size:
        calc(var(--ml-tts-kprog, 0) * 100%) 100%,
        100% 100%;

    background-position: left center, left center;
    background-repeat: no-repeat, no-repeat;

    -webkit-background-clip: text;
    background-clip: text;

    text-shadow:
        0 0 10px rgba(0, 0, 0, 0.18),
        0 0 18px rgba(28, 78, 255, 0.10);
}