/* 「声をきかせて」（姉妹アプリ共通の 1 本）[VOICE_FEEDBACK_2026_10_09]
   仕様: docs/specs/features/VOICE_FEEDBACK_SPEC（声をきかせて仕様書）.md §9。
   置き場はサイドバーの足（.sp-side-foot）を想定。寸法・色は sidebar.css の作法に寄せる。 */

/* ── 入口（サイドバー足のピル）── */
.vf-entry {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #d9dce3;
    background: #f3faf7;
    color: #1a9e6c;
    border-radius: 9999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
/* サイドバーの足（AccessPod / LeadPod）では横いっぱいに。トップバー（ScanPodWeb）では他のピルと同じく中身の幅 */
.sp-side-foot .vf-entry { display: flex; width: 100%; margin-bottom: 8px; }
.vf-entry:hover { background: #22bb80; color: #fff; border-color: #22bb80; }
.vf-entry-ic { display: inline-flex; width: 15px; height: 15px; flex-shrink: 0; }
.vf-entry-ic svg { width: 15px; height: 15px; }
.sp-side.is-folded .vf-entry-t { display: none; }
.sp-side.is-folded .vf-entry { justify-content: center; padding: 6px; }

/* ── 覆いと右パネル ── */
.vf-overlay { position: fixed; inset: 0; background: rgba(26, 26, 46, .3); z-index: 1200; }
.vf-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(420px, calc(100vw - 24px));
    background: #fff;
    border-left: 1px solid #e8e8ef;
    z-index: 1201;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 28px rgba(26, 26, 46, .14);
}

.vf-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 12px 10px 16px;
    border-bottom: 1px solid #e8e8ef;
}
.vf-head-ic { display: inline-flex; width: 16px; height: 16px; color: #22bb80; }
.vf-head-ic svg { width: 16px; height: 16px; }
.vf-head-t { font-size: 15px; font-weight: 700; color: #1a1a2e; }
/* 優先処理の対象者（当社名簿・MG-139）にだけ出る印 [VOICE_OUTREACH_2026_10_09] */
.vf-prio {
    margin-left: 2px; padding: 1px 7px; border-radius: 4px;
    background: #fde8e8; color: #b42318;
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
.vf-ic-btn {
    border: none; background: transparent; cursor: pointer;
    width: 28px; height: 28px; border-radius: 8px;
    color: #4a4a5e; font-size: 14px; line-height: 1;
}
.vf-ic-btn:hover { background: #f4f5f7; }
.vf-close { margin-left: auto; }

.vf-body { flex: 1; overflow-y: auto; padding: 14px 16px 16px; }

/* ── 選ぶ ── */
.vf-title { font-size: 15px; font-weight: 700; color: #1a1a2e; }
.vf-sub { font-size: 12px; color: #8b8b9e; margin: 4px 0 12px; }
.vf-choice {
    display: flex; align-items: center; gap: 12px; width: 100%;
    border: 1px solid #e8e8ef; background: #fafbfc; border-radius: 10px;
    padding: 12px; margin-bottom: 8px; cursor: pointer; text-align: left; font: inherit;
}
.vf-choice:hover { border-color: #22bb80; background: #e6f9f0; }
.vf-choice-ic {
    width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.vf-choice-ic svg { width: 18px; height: 18px; }
.vf-choice-ic.is-bug { background: #fde8e8; color: #b42318; }
.vf-choice-ic.is-idea { background: #fff8e6; color: #8a6200; }
.vf-choice-ic.is-other { background: #f3e5f5; color: #6a1b9a; }
.vf-choice-tx { min-width: 0; display: flex; flex-direction: column; }
.vf-choice-tx b { font-size: 14px; color: #1a1a2e; }
.vf-choice-tx small { font-size: 11px; color: #8b8b9e; }
.vf-choice-arrow { margin-left: auto; color: #8b8b9e; }
.vf-adv-row { border-top: 1px dashed #e8e8ef; margin-top: 4px; padding-top: 10px; }
.vf-adv {
    display: flex; align-items: center; gap: 8px; width: 100%;
    border: 1px solid #e8e8ef; background: #fff; border-radius: 8px;
    padding: 9px 12px; cursor: pointer; font-size: 12px; font-weight: 700; color: #4a4a5e;
}
.vf-adv:hover { border-color: #6a1b9a; color: #4a148c; }
.vf-adv-ic { display: inline-flex; width: 14px; height: 14px; }
.vf-adv-ic svg { width: 14px; height: 14px; }

/* ── フォーム ── */
.vf-label { display: block; font-size: 12px; font-weight: 700; color: #4a4a5e; margin: 12px 0 5px; }
.vf-label small { font-weight: 400; color: #8b8b9e; }
.vf-input {
    width: 100%; box-sizing: border-box;
    border: 1px solid #c4c4d0; border-radius: 8px;
    padding: 8px 11px; font-size: 13px; font-family: inherit;
    background: #fff; color: #1a1a2e;
}
.vf-input:focus { outline: 2px solid #22bb80; outline-offset: 0; border-color: #22bb80; }
.vf-area { resize: vertical; }
.vf-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.vf-pill {
    border: 1px solid #e8e8ef; background: #fafbfc; border-radius: 9999px;
    padding: 5px 12px; font-size: 12px; cursor: pointer; color: #1a1a2e; font-family: inherit;
}
.vf-pill.is-on { border-color: #22bb80; background: #e6f9f0; color: #1a9e6c; font-weight: 700; }
.vf-fine { font-size: 11px; color: #8b8b9e; margin: 10px 0 0; line-height: 1.6; }
.vf-error { font-size: 12px; color: #b42318; margin: 10px 0 0; }

.vf-nudge {
    margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    border: 1px solid #d97706; background: #fff8e6; color: #8a6200;
    border-radius: 8px; padding: 8px 11px; font-size: 12px;
}
.vf-nudge-btns { display: flex; gap: 6px; margin-left: auto; }
.vf-nudge-btns button {
    border: 1px solid #d97706; background: #fff; color: #8a6200;
    border-radius: 7px; padding: 4px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.vf-nudge-btns button:hover { background: #d97706; color: #fff; }

/* ── スクショ（明示オプトイン）[VOICE_FEEDBACK_SHOT_WEB_2026_10_09] ── */
.vf-shot-btn {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px dashed #c4c4d0; background: #fafbfc; color: #4a4a5e;
    border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: inherit; margin-top: 14px;
}
.vf-shot-btn:hover { border-color: #22bb80; color: #1a9e6c; }
.vf-shot-btn:disabled { opacity: .6; cursor: default; }
.vf-shot-card {
    margin-top: 10px; border: 1px solid #e8e8ef; background: #fafbfc;
    border-radius: 10px; padding: 10px;
}
.vf-shot-wrap {
    position: relative; display: inline-block; max-width: 100%;
    cursor: crosshair; touch-action: none; /* 指でも黒塗りを引けるように（スクロールに取られない） */
}
.vf-shot-img {
    display: block; max-width: 100%; max-height: 180px;
    border: 1px solid #c4c4d0; border-radius: 5px; user-select: none; -webkit-user-drag: none;
}
.vf-shot-rect { position: absolute; background: #000; pointer-events: none; }
.vf-shot-remove { margin-top: 8px; padding: 5px 12px; font-size: 12px; }

/* ── AI の聞き返し ── */
.vf-followup {
    border: 1px solid #ce93d8; background: #f3e5f5; border-radius: 10px;
    padding: 12px; margin-top: 4px; display: flex; flex-direction: column; gap: 6px;
}
.vf-followup-head { font-size: 12px; font-weight: 700; color: #6a1b9a; }
.vf-followup-q { font-size: 13px; color: #1a1a2e; margin-bottom: 4px; }
.vf-followup-choice {
    border: 1px solid #c4c4d0; background: #fff; border-radius: 8px;
    padding: 9px 12px; text-align: left; font-size: 13px; cursor: pointer; font-family: inherit; color: #1a1a2e;
}
.vf-followup-choice:hover { border-color: #6a1b9a; color: #4a148c; }
.vf-followup-skip {
    border: none; background: transparent; color: #8b8b9e; font-size: 11px;
    text-decoration: underline; cursor: pointer; align-self: center; margin-top: 4px;
}

/* ── 完了・送信列 ── */
.vf-done { text-align: center; padding: 24px 8px 8px; }
.vf-done-ok {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: #e6f9f0; color: #1a9e6c; font-size: 24px; font-weight: 700;
}
.vf-done-t { font-size: 15px; font-weight: 700; color: #1a1a2e; margin: 12px 0 6px; }
.vf-done-d { font-size: 12px; color: #4a4a5e; margin: 0 16px; }
.vf-done-btns { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }

.vf-actions {
    display: flex; gap: 8px; padding: 10px 16px;
    border-top: 1px solid #e8e8ef; background: #fff;
}
.vf-btn-ghost {
    border: 1px solid #c4c4d0; background: transparent; color: #4a4a5e;
    border-radius: 8px; padding: 9px 16px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.vf-btn-ghost:hover { border-color: #22bb80; color: #1a9e6c; }
.vf-btn-primary {
    flex: 1; border: none; background: #22bb80; color: #fff; font-weight: 700;
    border-radius: 8px; padding: 9px 16px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.vf-btn-primary:hover { background: #1a9e6c; }
.vf-btn-primary:disabled { opacity: .55; cursor: default; }

/* 遅い直後の一言 [PERF_ASK_2026_10_10]（VOICE_FEEDBACK_SPEC §10）。画面の下に 1 行だけ・パネルより手前に出さない */
.vf-perfask {
    /* 幅は中身の長さ・上限は画面幅−32px（width を決めずに left:50% で寄せると幅が画面の半分に縮み、スマホで文字が縦に潰れる） */
    position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px);
    z-index: 900; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; box-sizing: border-box;
    background: #fff; color: #1f2430; border: 1px solid #d9dce3; border-radius: 12px;
    padding: 8px 8px 8px 14px; font-size: 13px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
.vf-perfask-q { flex: 1 1 auto; min-width: 0; }
.vf-perfask-acts { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; } /* 答えと ✕ は一緒に折り返す */ /* 入りきらなければ問いだけ 1 行目に残してボタンを折り返す */
.vf-perfask-btn {
    border: 1px solid #d9dce3; background: #f3faf7; color: #1a9e6c; font-weight: 700;
    border-radius: 9999px; padding: 6px 12px; min-height: 32px; font-size: 12px; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.vf-perfask-btn:hover { background: #22bb80; color: #fff; border-color: #22bb80; }
.vf-perfask-btn:disabled { opacity: .55; cursor: default; }