/* ==========================================================
   components/voice.css
   ----------------------------------------------------------
   音声の操作（ジャービス。D-58）の ironman の見た目。

   ・ヘッダーのマイクのボタン：ブログ名と同じ HUD の札。聞いている間は赤く光る
   ・会話の欄：画面の右下の HUD のパネル
   ・アークリアクター（トップページ）：押すと話しかけられる。
     聞いている間は光が速く脈打ち、考えている間は HUD の円が速く回り、話している間は強く脈打つ
   ========================================================== */

.site-header button.voice-button,
.site-header a.notice-button {
    padding: 5px 9px;
    color: var(--im-cyan);
    background: rgba(102, 217, 255, 0.06);
    border: 1px solid var(--im-line-strong);
    border-radius: 2px;
    box-shadow: none;
    filter: none;
}

.site-header button.voice-button:hover,
.site-header a.notice-button:hover,
.site-header button.voice-button:focus-visible,
.site-header a.notice-button:focus-visible {
    color: var(--im-cyan-bright);
    background: rgba(102, 217, 255, 0.14);
    box-shadow: var(--im-glow);
    filter: none;
}

body.voice-listening .site-header button.voice-button {
    color: #fff;
    background: rgba(255, 90, 82, 0.3);
    border-color: var(--im-red);
    box-shadow: 0 0 12px rgba(255, 90, 82, 0.6);
    animation: voiceBlink 1s ease-in-out infinite;
}

@keyframes voiceBlink {

    50% {
        box-shadow: 0 0 4px rgba(255, 90, 82, 0.3);
    }

}


/* ==========================================================
   会話の欄
   ========================================================== */

.voice-panel {
    color: var(--im-text);
    background:
        linear-gradient(180deg, rgba(102, 217, 255, 0.1), rgba(102, 217, 255, 0.03)),
        var(--im-bg-panel-solid);
    border: 1px solid var(--im-line-strong);
    border-radius: 2px;
    box-shadow: 0 0 22px rgba(102, 217, 255, 0.25);
}

.voice-panel-title {
    font-family: var(--im-font-logo);
    font-size: 13px;
    letter-spacing: 0.2em;
    color: var(--im-cyan-bright);
    text-shadow: var(--im-glow-text);
}

.voice-panel-state {
    font-family: var(--im-font-hud);
    color: var(--im-cyan);
}

body.voice-listening .voice-panel-state {
    color: var(--im-red);
}

.voice-line-user {
    color: var(--im-text-muted);
}

.voice-line-reply {
    color: var(--im-text);
}


/* ==========================================================
   アークリアクター（トップページ）
   ========================================================== */

body.voice-available .hud-reactor .reactor {
    cursor: pointer;
}

/* 音声の操作中の動きの速さは、reactor/reactor.css（.reactor の data-voice。D-76） */


/* ==========================================================
   ヘッダーのアイコンのボタン（お知らせ・音声操作・ログアウト）の形
   ----------------------------------------------------------
   ブログ名のボタン（components/header.css）と同じく、四隅を斜めに削った形にし、マウスを乗せると枠を電気が流れる
   （流れる電気の SVG（.hover-flow）は js/script.js の startHoverFlow が置く）。
   色は変数で変える：--hover-line（枠の線）・--hover-accent（流れる電気）。
   ヘッダーの各ボタンの見た目（header.css・このファイルの上）より後に読み込まれるため、ここに書く。
   ========================================================== */

.site-header button.logout-button,
.site-header button.voice-button,
.site-header a.notice-button {
    --hover-cut: 6px;

    position: relative;
    border-color: transparent;
    border-radius: 0;
    box-shadow: inset 0 0 10px rgba(102, 217, 255, 0.08);
    clip-path: polygon(
        var(--hover-cut) 0, calc(100% - var(--hover-cut)) 0, 100% var(--hover-cut), 100% calc(100% - var(--hover-cut)),
        calc(100% - var(--hover-cut)) 100%, var(--hover-cut) 100%, 0 calc(100% - var(--hover-cut)), 0 var(--hover-cut));
}

/* 枠の線（八角形の輪） */
.site-header button.logout-button::after,
.site-header button.voice-button::after,
.site-header a.notice-button::after {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--hover-line, var(--im-line-strong));
    transition: background var(--im-ease);
    clip-path: polygon(evenodd,
        var(--hover-cut) 0, calc(100% - var(--hover-cut)) 0, 100% var(--hover-cut), 100% calc(100% - var(--hover-cut)),
        calc(100% - var(--hover-cut)) 100%, var(--hover-cut) 100%, 0 calc(100% - var(--hover-cut)), 0 var(--hover-cut), var(--hover-cut) 0,
        calc(var(--hover-cut) + 0.5px) 1px, calc(100% - var(--hover-cut) - 0.5px) 1px, calc(100% - 1px) calc(var(--hover-cut) + 0.5px),
        calc(100% - 1px) calc(100% - var(--hover-cut) - 0.5px), calc(100% - var(--hover-cut) - 0.5px) calc(100% - 1px),
        calc(var(--hover-cut) + 0.5px) calc(100% - 1px), 1px calc(100% - var(--hover-cut) - 0.5px), 1px calc(var(--hover-cut) + 0.5px),
        calc(var(--hover-cut) + 0.5px) 1px);
    pointer-events: none;
}

/* マウスを乗せたとき：形で切るため外側の光は出せない。内側を光らせ、枠を電気が流れる */
.site-header button.voice-button:hover,
.site-header a.notice-button:hover,
.site-header button.voice-button:focus-visible,
.site-header a.notice-button:focus-visible {
    --hover-line: var(--im-cyan);
    border-color: transparent;
    box-shadow: inset 0 0 14px rgba(102, 217, 255, 0.3);
}

/* ログアウト（終わる操作）は赤 */
.site-header button.logout-button:hover,
.site-header button.logout-button:focus-visible {
    --hover-line: var(--im-red);
    border-color: transparent;
    --hover-accent: var(--im-red);
    box-shadow: inset 0 0 14px rgba(255, 90, 82, 0.35);
}

/* 話を聞いている間の音声操作のボタンは、赤い枠を電気が流れ続ける */
body.voice-listening .site-header button.voice-button {
    --hover-line: var(--im-red);
    border-color: transparent;
    --hover-accent: var(--im-red);
    box-shadow: inset 0 0 14px rgba(255, 90, 82, 0.45);
}

.site-header button.logout-button:hover > .hover-flow,
.site-header button.logout-button:focus-visible > .hover-flow,
.site-header button.voice-button:hover > .hover-flow,
.site-header button.voice-button:focus-visible > .hover-flow,
.site-header a.notice-button:hover > .hover-flow,
.site-header a.notice-button:focus-visible > .hover-flow,
body.voice-listening .site-header button.voice-button > .hover-flow {
    opacity: 1;
}

.site-header button.logout-button:hover > .hover-flow path,
.site-header button.logout-button:focus-visible > .hover-flow path,
.site-header button.voice-button:hover > .hover-flow path,
.site-header button.voice-button:focus-visible > .hover-flow path,
.site-header a.notice-button:hover > .hover-flow path,
.site-header a.notice-button:focus-visible > .hover-flow path,
body.voice-listening .site-header button.voice-button > .hover-flow path {
    animation-play-state: running;
}


/* ==========================================================
   お知らせのボタンの数（D-74）
   ----------------------------------------------------------
   ボタンは形で切るため、数はボタンの外（.notice-wrap）に置き、右上に重ねる。要対応の赤で光らせる
   ========================================================== */

.site-header .notice-wrap {
    display: inline-flex;
}

.site-header a.notice-button {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.site-header .notice-badge {
    top: -7px;
    right: -8px;
    font-family: var(--im-font-hud);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--im-red);
    box-shadow: 0 0 8px rgba(255, 90, 82, 0.7);
}