/* chat.css — スタンドアロンチャット + 埋め込み共用 */
:root{--chat-primary:#9b2d35;--chat-primary-dark:#7a1f27;--chat-primary-rgb:155,45,53;--chat-quick-bg:#f0e8dc;--chat-quick-bg-hover:#e8dcc4;--chat-quick-border:#d4c5a8;--chat-quick-text:#7a1f27;--chat-note-bg:#fff4e6;--chat-note-border:#f5d7a8;--chat-note-text:#7a4a15}
body[data-mode="women"]{--chat-primary:#b5627a;--chat-primary-dark:#8e4a5d;--chat-primary-rgb:181,98,122;--chat-quick-bg:#fce7ee;--chat-quick-bg-hover:#f8d5e1;--chat-quick-border:#e9b5c5;--chat-quick-text:#8e4a5d;--chat-note-bg:#fff0f4;--chat-note-border:#f5c8d4;--chat-note-text:#7a3f52}
body[data-mode="men_same"]{--chat-primary:#2a5a8f;--chat-primary-dark:#1e4268;--chat-primary-rgb:42,90,143;--chat-quick-bg:#e3ecf5;--chat-quick-bg-hover:#cfdcea;--chat-quick-border:#a9c1db;--chat-quick-text:#1e4268;--chat-note-bg:#eff5fb;--chat-note-border:#c4d6e8;--chat-note-text:#24456e}
body[data-mode="women_same"]{--chat-primary:#8a5a9e;--chat-primary-dark:#6b4079;--chat-primary-rgb:138,90,158;--chat-quick-bg:#efe5f5;--chat-quick-bg-hover:#e1d0ec;--chat-quick-border:#c5aed6;--chat-quick-text:#6b4079;--chat-note-bg:#f5ecfa;--chat-note-border:#dcc5ea;--chat-note-text:#5a3466}
body[data-mode="este"]{--chat-primary:#2aa8b8;--chat-primary-dark:#1e7d8a;--chat-primary-rgb:42,168,184;--chat-quick-bg:#dff2f4;--chat-quick-bg-hover:#c7e8eb;--chat-quick-border:#a0d4da;--chat-quick-text:#1e7d8a;--chat-note-bg:#ecf7f9;--chat-note-border:#bfe0e5;--chat-note-text:#1e5a64}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100svh;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;color:#222;background:#f7f5f2;-webkit-font-smoothing:antialiased;font-size:16px;overflow:hidden;position:fixed;width:100%;top:0;left:0}
body{overscroll-behavior:none}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit;padding:0}
a{color:var(--chat-primary);text-decoration:none}

/* iOS キーボード対応:
   - #chat-root は height を `100svh - margin - --kb-h` に合わせて縮める (キーボード分 = kb-h).
     flex 子要素 (header/thread/footer) は縮んだ高さに再配分される.
   - **100svh を使う理由**: iOS Safari はキーボード close 時に URL bar が再展開される. 100dvh は
     URL bar 状態で動的に変わるため、chat-root が URL bar アニメに引きずられて二重にリサイズ
     して見える. 100svh は URL bar 最大表示時の viewport (=最小値で安定) なので、URL bar
     アニメ中も chat-root サイズ不変になる.
   - top 固定なのでヘッダー位置は不動. キーボードが出ると chat-root 下端が上がる形.
   - close 時は --kb-h を 0 に即スナップ (iOS keyboard slide-down アニメは待たない).
     サイズ変化中の描画崩れは JS 側の isClosing ガードで vv.resize を無視することで回避.
   - padding-bottom 方式は iOS Safari で flex 再レイアウトが不安定 (2026-04-24 overlap 報告).
   - offsetTop/transition/top 変更は全て禁止 (keyboard アニメと二重化するため). */
#chat-root{position:fixed;top:8px;left:8px;right:8px;display:flex;flex-direction:column;height:calc(100svh - 16px - var(--kb-h, 0px));max-height:calc(100svh - 16px - var(--kb-h, 0px));overflow:hidden;background:#fff;border:1px solid rgba(var(--chat-primary-rgb),.22);border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.08),0 2px 8px rgba(var(--chat-primary-rgb),.15);transform:translate3d(0,0,0);contain:layout style}
@media (max-width:480px){#chat-root{top:4px;left:4px;right:4px;height:calc(100svh - 8px - var(--kb-h, 0px));max-height:calc(100svh - 8px - var(--kb-h, 0px));border-radius:10px}}
/* 埋込時 (iframe内) は iOS Safari の svh 振舞いが不安定なため、
   JSで vv.height を --embed-h に直読みしてそれを使う.
   iframe 自体がコンテナなので余白/角丸/影は不要. */
body.embedded #chat-root{top:0;left:0;right:0;bottom:auto;margin:0;width:100%;height:var(--embed-h, 100%);max-height:var(--embed-h, 100%);border:0;border-radius:0;box-shadow:none}
@media (max-width:480px){body.embedded #chat-root{top:0;left:0;right:0;height:var(--embed-h, 100%);max-height:var(--embed-h, 100%);border-radius:0}}
.hidden{display:none!important}

/* ===== ヘッダー ===== */
#chat-header{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:12px 6px 12px 16px;background:linear-gradient(135deg,var(--chat-primary) 0%,var(--chat-primary-dark) 100%);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.08);z-index:10;flex-shrink:0;border-top-left-radius:13px;border-top-right-radius:13px}
@media (max-width:480px){#chat-header{border-top-left-radius:9px;border-top-right-radius:9px}}
.chat-header-left{justify-self:start;display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden}
.chat-header-center{justify-self:center;display:flex;align-items:center;gap:6px;min-width:0;max-width:100%;overflow:hidden}
.header-back{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.header-back:hover{background:rgba(255,255,255,.28)}
.header-back.hidden{display:none}
.visitor-name{font-size:13px;font-weight:600;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.visitor-name.hidden{display:none}
#chat-shop-name{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;display:block}

/* YobuHo認証バッジ (♥+✓): 訪問者画面でのみ店舗名/キャスト名の左に表示.
   白塗りハート + テーマ色チェック で、ジャンル別テーマ色のヘッダー上でも視認性を確保. */
.verified-badge{width:20px;height:20px;flex-shrink:0;display:inline-block;vertical-align:middle;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
.verified-badge.hidden{display:none}

/* 訪問者ヘッダーモード: shop-name を左寄せ + 認証バッジと並べる.
   body.visitor-header クラスは chat.js enterVisitorMode で付与.
   gap:2px は ♥認証バッジ ↔ 店舗名の距離 (訪問者モードでは戻るボタンと
   訪問者名は hidden なので、実質バッジと店舗名のみが残る). */
body.visitor-header #chat-header{grid-template-columns:1fr auto}
body.visitor-header .chat-header-center{display:none}
body.visitor-header .chat-header-left{justify-self:stretch;flex:1;gap:2px}
body.visitor-header .chat-header-left #chat-shop-name{font-size:16px;display:block}
.status-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}
.status-dot.online{background:#4caf50;box-shadow:0 0 8px rgba(76,175,80,.8)}
.status-dot.offline{display:none}
.status-label{font-size:12px;opacity:.9;line-height:1.2;text-align:center}
.status-label-line{display:block}

/* ===== キャスト自分用モード装飾 (body[data-role="cast"]) ===== */
/* 店舗オーナー画面と区別するための装飾. gender_mode 色はそのまま使い、役割バッジと縁取りで違いを出す. */
body[data-role="cast"] #chat-header::before{content:"📬 キャスト受信箱";position:absolute;top:4px;left:12px;font-size:10px;font-weight:700;letter-spacing:.08em;opacity:.85;background:rgba(255,255,255,.18);padding:2px 8px;border-radius:10px;line-height:1.4;white-space:nowrap;z-index:11}
body[data-role="cast"] #chat-header{padding-top:22px}
body[data-role="cast"] #chat-root{border:1px solid rgba(var(--chat-primary-rgb),.45);box-shadow:0 8px 28px rgba(0,0,0,.10),0 2px 10px rgba(var(--chat-primary-rgb),.22)}
@media (max-width:480px){body[data-role="cast"] #chat-header::before{font-size:9px;top:3px;left:10px}}

/* Header right cluster */
.chat-header-right{justify-self:end;display:flex;align-items:center;gap:8px}
.font-size-btn{height:34px;padding:0 12px;border-radius:17px;background:#f0ede7;color:#555;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;gap:6px;transition:background .15s;flex-shrink:0;line-height:1;border:1px solid #e0dbd0}
.font-size-btn .font-size-icon{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:16px;color:#9b2d35;line-height:1;padding-right:6px;border-right:1px solid #d4ccbe}
.font-size-btn:hover{background:#e5e0d8}
.lang-select{height:34px;padding:0 26px 0 10px;border-radius:17px;background:#f0ede7;color:#444;font-size:13px;font-weight:600;border:1px solid #e0dbd0;cursor:pointer;flex-shrink:0;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23666' d='M5 6L0 0h10z'/></svg>");background-repeat:no-repeat;background-position:right 8px center}
.lang-select:focus{outline:none;background-color:#e5e0d8}
.lang-select option{color:#222;background:#fff}

/* Font size scaling (applied to #chat-root) */
#chat-root[data-font-size="s"] .msg{font-size:13px}
#chat-root[data-font-size="s"] #chat-input,#chat-root[data-font-size="s"] .nickname-input{font-size:16px}
#chat-root[data-font-size="s"] .msg-time{font-size:9px}
#chat-root[data-font-size="l"] .msg{font-size:17px}
#chat-root[data-font-size="l"] #chat-input,#chat-root[data-font-size="l"] .nickname-input{font-size:18px}
#chat-root[data-font-size="l"] .msg-time{font-size:12px}
#chat-root[data-font-size="l"] .quick-btn,#chat-root[data-font-size="l"] .template-btn{font-size:14px}
#chat-root[data-font-size="xl"] .msg{font-size:20px;max-width:90%}
#chat-root[data-font-size="xl"] #chat-input,#chat-root[data-font-size="xl"] .nickname-input{font-size:20px}
#chat-root[data-font-size="xl"] .msg-time{font-size:13px}
#chat-root[data-font-size="xl"] .quick-btn,#chat-root[data-font-size="xl"] .template-btn{font-size:15px}

/* Owner toggle */
.owner-toggle{display:flex;align-items:center;gap:6px;margin-right:0}
.owner-toggle .toggle-label{margin-right:0;padding-right:0}
.toggle-label{font-size:13px}
.toggle-switch{position:relative;display:inline-block;width:44px;height:24px}
.toggle-switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:rgba(255,255,255,.3);border-radius:24px;transition:.2s}
.slider::before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s}
.toggle-switch input:checked + .slider{background:#4caf50}
.toggle-switch input:checked + .slider::before{transform:translateX(20px)}

/* ===== Inbox ===== */
.owner-panel{overflow-y:auto;flex:1;background:#f7f5f2}
.inbox-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#fff;border-bottom:1px solid #e5e0d8}
.inbox-header h2{margin:0;font-size:14px;color:#555}
.mini-btn{padding:6px 12px;font-size:12px;background:var(--chat-primary);color:#fff;border-radius:4px}
.inbox-list{list-style:none;margin:0;padding:0}
.inbox-item{padding:14px 16px;border-bottom:1px solid #e5e0d8;background:#fff;cursor:pointer;transition:background .15s}
.inbox-item:hover{background:#faf7f2}
.inbox-item.unread{background:#fef8e7;border-left:3px solid #ff9800}
.inbox-item-title{font-size:13px;font-weight:700;color:#333;margin-bottom:4px;display:flex;justify-content:space-between;align-items:center}
.inbox-item-preview{font-size:13px;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-item-time{font-size:11px;color:#999;margin-top:4px}
.unread-badge{background:#ff3b30;color:#fff;padding:1px 6px;border-radius:10px;font-size:11px;font-weight:700}
.inbox-empty{padding:40px 16px;text-align:center;color:#888;font-size:14px}

/* ===== メッセージエリア ===== */
.chat-thread{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
/* justify-content:flex-end → 標準のチャットUI挙動 (LINE/WhatsApp): メッセージは下から積み上がる.
   空〜少数メッセージ時は welcome msg が入力欄直上に来る. オーバーフロー時は scroll で過去を遡る.
   旧 flex-start だと空時に welcome が上端に張り付き入力欄まで大きな gap が出る. */
.chat-messages{flex:1;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#f7f5f2;-webkit-overflow-scrolling:touch;justify-content:flex-end}
.msg-row{display:flex;align-items:flex-end;gap:6px;max-width:88%}
.msg-row.visitor{align-self:flex-end;justify-content:flex-end}
.msg-row.shop{align-self:flex-start;justify-content:flex-start}
.msg{padding:4px 10px;border-radius:14px;line-height:1.45;font-size:15px;word-wrap:break-word;white-space:pre-wrap}
.msg.visitor{background:var(--chat-primary);color:#fff;border-bottom-right-radius:4px}
.msg.shop{background:#fff;color:#333;border:1px solid #e5e0d8;border-bottom-left-radius:4px}
.msg-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;padding-bottom:2px}
.msg-row.shop .msg-meta{align-items:flex-start}
.msg-avatar{width:32px;height:32px;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;flex-shrink:0;align-self:flex-end;margin-bottom:2px;background-color:#e5e0d8}
.inbox-limit-note{list-style:none;padding:10px 12px;text-align:center;color:#999;font-size:11px;border-top:1px dashed #e5e0d8;margin-top:4px}
.msg-time{font-size:10px;opacity:.55;white-space:nowrap;color:#555;line-height:1}
.msg-read{font-size:10px;color:var(--chat-primary);opacity:.85;white-space:nowrap;line-height:1}
/* 楽観UI: 送信中は半透明, 失敗は赤枠+再送ボタン */
.msg.sending{opacity:.55}
.msg.failed{opacity:.8;border:1px solid #d39a9a !important;background:#fdeeee !important;color:#8b2a2a !important}
.msg.failed.pending-retry{border-color:#e6c58a !important;background:#fff8ea !important;color:#8a6500 !important}
.msg-send-status{font-size:10px;color:#888;line-height:1.2;white-space:nowrap;display:flex;align-items:center;gap:4px}
.msg-send-status.failed{color:#c0392b;font-weight:600}
.msg-send-status.pending-retry{color:#8a6500;font-weight:600}
.msg-send-status-icon{font-size:12px;line-height:1}
.msg-retry-btn{background:none;border:none;color:var(--chat-primary);text-decoration:underline;font-size:10px;cursor:pointer;padding:0;margin-left:2px;font-weight:600}
.msg-retry-btn:hover{opacity:.7}
.msg-failed-actions{display:inline-flex;align-items:center;gap:8px;margin-left:4px;flex-wrap:wrap}
.msg-failed-actions button{background:none;border:none;color:#888;font-size:10px;cursor:pointer;padding:0;text-decoration:underline}
.msg-failed-actions button:hover{color:#333}
.msg-failed-actions .msg-act-delete{color:#b44}
.msg-failed-actions .msg-act-delete:hover{color:#8a2a2a}
.msg-failed-actions .msg-act-reason{color:#b44;font-size:10px;line-height:1.3}
/* ネットワーク状態バナー: offline=赤, reconnected=緑 */
.network-banner{position:fixed;left:50%;transform:translateX(-50%) translateY(-120%);top:8px;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:200;white-space:nowrap;transition:transform .25s ease-out;pointer-events:none;max-width:90vw;overflow:hidden;text-overflow:ellipsis}
.network-banner.visible{transform:translateX(-50%) translateY(0)}
.network-banner.offline{background:#fdeeee;color:#8b2a2a;border:1px solid #d39a9a}
.network-banner.reconnected{background:#e9f7ec;color:#2a6b3a;border:1px solid #9bcfa5}
.network-banner.hidden{display:none}
/* Day 8: 入力中 3ドット吹き出し (常に相手=左=shop側) */
.typing-indicator{margin-top:2px}
.typing-indicator.hidden{display:none}
.typing-bubble{padding:10px 14px !important;display:inline-flex;align-items:center;gap:4px;min-height:22px}
.typing-dot{width:6px;height:6px;border-radius:50%;background:#a3a3a3;display:inline-block;animation:typingDot 1.3s infinite ease-in-out}
.typing-dot:nth-child(2){animation-delay:.18s}
.typing-dot:nth-child(3){animation-delay:.36s}
@keyframes typingDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.chat-push-btn{margin-right:8px;padding:4px 10px;border:1px solid rgba(var(--chat-primary-rgb),.4);background:rgba(255,255,255,.9);color:var(--chat-primary);border-radius:14px;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;line-height:1.4;transition:background .15s,border-color .15s}
.chat-push-btn:hover:not(:disabled){background:#fff;border-color:var(--chat-primary)}
.chat-push-btn.is-on{background:var(--chat-primary);color:#fff;border-color:var(--chat-primary)}
.chat-push-btn.is-on:hover:not(:disabled){opacity:.9}
.chat-push-btn:disabled{opacity:.5;cursor:not-allowed}
.chat-push-btn.hidden{display:none}
@media (max-width:480px){.chat-push-btn{padding:3px 7px;font-size:10px}}
.msg-date-sep{display:flex;justify-content:center;margin:8px 0 2px}
.msg-date-sep span{background:rgba(0,0,0,.06);color:#666;font-size:11px;padding:2px 10px;border-radius:10px}
.msg-translation{margin-top:6px;padding-top:6px;border-top:1px dashed rgba(var(--chat-primary-rgb),.25);font-size:13px;opacity:.85;line-height:1.4}
.msg.visitor .msg-translation{border-top-color:rgba(255,255,255,.35);color:#fff}
.msg-translation-badge{display:inline-block;font-size:10px;padding:1px 6px;border-radius:8px;background:rgba(var(--chat-primary-rgb),.1);color:var(--chat-primary);margin-bottom:3px;font-weight:600}
.msg.visitor .msg-translation-badge{background:rgba(255,255,255,.25);color:#fff}
.msg-translation-body{font-size:inherit}
.msg-system{align-self:center;background:#fff8e1;color:#8b6914;padding:6px 12px;border-radius:10px;font-size:12px}
.chat-system-note{align-self:center;background:rgba(var(--chat-primary-rgb),.08);color:var(--chat-primary);padding:8px 14px;border-radius:12px;font-size:13px;line-height:1.5;text-align:center;max-width:86%;margin:4px 0}

/* ===== スクロール・ダウン ボタン（下にスクロール済みで新着が来た時だけ表示） ===== */
.chat-thread{position:relative}
.scroll-bottom-btn{position:absolute;right:16px;bottom:92px;z-index:25;display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 10px;background:#fff;color:var(--chat-primary);border:1px solid rgba(var(--chat-primary-rgb),.35);border-radius:18px;font-size:12px;font-weight:700;box-shadow:0 3px 10px rgba(0,0,0,.12);cursor:pointer;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .18s ease-out,transform .18s ease-out}
.scroll-bottom-btn.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.scroll-bottom-btn:hover{background:var(--chat-quick-bg)}
.scroll-bottom-btn .scroll-bottom-arrow{font-size:14px;line-height:1}
.scroll-bottom-btn .scroll-bottom-count{background:var(--chat-primary);color:#fff;border-radius:10px;padding:1px 7px;font-size:11px;font-weight:700;min-width:18px;text-align:center;line-height:1.4}
.scroll-bottom-btn .scroll-bottom-count.hidden{display:none}
@media (max-width:480px){.scroll-bottom-btn{right:12px;bottom:84px}}

/* ===== 訪問者ノート ===== */
.chat-note{margin:10px 12px 4px;padding:8px 12px;background:var(--chat-note-bg);border:1px solid var(--chat-note-border);border-radius:8px;font-size:13px;color:var(--chat-note-text);line-height:1.5}
.chat-note.reception-closed{background:#fdecec;border-color:#f2b5b5;color:#8b2323;font-weight:600}

/* ===== 訪問者メール通知 opt-in =====
   nickname行の末尾にチェックボックスを同居、ON時のみ下に入力欄パネルが出る */
.visitor-notify-inline{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;cursor:pointer;user-select:none;white-space:nowrap}
.visitor-notify-inline input[type=checkbox]{width:14px;height:14px;accent-color:var(--chat-primary);cursor:pointer;flex:0 0 auto;margin:0}
.visitor-notify-inline .visitor-notify-title{font-size:12px;color:#555}
@media (max-width:480px){.visitor-notify-inline{gap:3px}.visitor-notify-inline .visitor-notify-title{font-size:10px}.visitor-notify-inline input[type=checkbox]{width:12px;height:12px}}
.visitor-notify{margin:0 12px 4px;padding:0;font-size:13px;color:#555}
.visitor-notify-body{display:flex;gap:6px;align-items:center;padding:8px 10px;background:#fafafa;border:1px solid #e5e0d8;border-radius:8px}
.visitor-notify-email{flex:1 1 auto;padding:6px 10px;border:1px solid #ccc;border-radius:6px;font-size:16px;background:#fff;min-width:0}
.visitor-notify-email:focus{outline:none;border-color:var(--chat-primary)}
.visitor-notify-save{flex:0 0 auto;padding:6px 14px;background:var(--chat-primary);color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer;font-weight:600}
.visitor-notify-save:hover{background:var(--chat-primary-dark)}
.visitor-notify-save:disabled{background:#aaa;cursor:wait}
.visitor-notify-close-link{background:transparent;border:none;color:#888;font-size:11px;cursor:pointer;text-decoration:underline;padding:0;line-height:1}
.visitor-notify-close-link:hover{color:var(--chat-primary,#b5627a)}
.visitor-notify-status{margin-top:6px;font-size:12px;padding:0 10px;line-height:1.5;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.visitor-notify-status.ok{color:#2a8a5e}
.visitor-notify-status.err{color:#a44}
.visitor-notify-status.pending{color:#b07b00;background:#fffaed;border:1px solid #f0d783;border-radius:6px;padding:6px 10px}
.visitor-notify-resend{margin-top:6px;background:transparent;color:var(--chat-primary,#b5627a);border:1px solid var(--chat-primary,#b5627a);border-radius:4px;padding:4px 10px;font-size:12px;cursor:pointer;align-self:flex-start}
.visitor-notify-resend:hover{background:var(--chat-primary,#b5627a);color:#fff}
.visitor-notify-resend:disabled{opacity:.5;cursor:wait}
.visitor-notify-edit{margin-top:4px;background:transparent;color:#888;border:none;padding:2px 4px;font-size:11px;cursor:pointer;text-decoration:underline;align-self:flex-start}
.visitor-notify-edit:hover{color:var(--chat-primary,#b5627a)}
.visitor-notify.verified-collapsed{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 10px}
.visitor-notify.verified-collapsed .visitor-notify-body{display:none}
.visitor-notify.verified-collapsed .visitor-notify-status{margin-top:0;padding:0;flex:0 0 auto}
.visitor-notify.verified-collapsed .visitor-notify-edit{margin-top:0;flex:0 0 auto}

/* ===== クイック質問（1行横スクロール） ===== */
.quick-questions{background:#fff;border-top:1px solid #e5e0d8;padding:6px 0}
.quick-row{display:flex;gap:6px;overflow-x:auto;white-space:nowrap;padding:2px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.quick-row::-webkit-scrollbar{display:none}
.quick-btn{flex:0 0 auto;padding:6px 12px;background:var(--chat-quick-bg);color:var(--chat-quick-text);border:1px solid var(--chat-quick-border);border-radius:14px;font-size:12px;cursor:pointer;transition:background .15s;white-space:nowrap}
.quick-btn:hover{background:var(--chat-quick-bg-hover)}
#owner-quick .quick-btn,#visitor-quick .quick-btn{min-width:44px;padding:6px 8px;font-size:22px;line-height:1;background:transparent;border:none;border-radius:8px}
#owner-quick .quick-btn:hover,#visitor-quick .quick-btn:hover{background:#f0ede7}
#visitor-quick{max-height:240px;overflow-y:auto}

/* ===== 絵文字ピッカー ===== */
.chat-input-area{position:relative}
.emoji-toggle{width:38px;height:38px;border-radius:50%;background:#f0ede7;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;align-self:flex-end;flex-shrink:0;transition:background .15s}
.emoji-toggle:hover{background:#e5e0d8}
.emoji-toggle.hidden{display:none}
/* タッチ端末は OS 標準の絵文字キーボードがあるので絵文字ボタン不要.
   その分 send-btn を広げて誤タップで focus が抜けるのを防ぐ.
   min-height 44px は iOS HIG 推奨タップサイズ. textarea 1行時は input-area が
   34px 程度しかないため明示しないと送信ボタンも詰まる (2026-04-27 追加). */
@media (pointer:coarse){
  .emoji-toggle{display:none !important}
  .send-btn{padding:0 24px;min-width:72px;min-height:44px}
}
.emoji-popup{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:6px;display:flex;gap:4px;padding:8px 10px;background:#fff;border:1px solid #e5e0d8;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.12);z-index:20;flex-wrap:wrap;width:max-content;max-width:calc(100vw - 24px)}
.emoji-popup.hidden{display:none}

/* ===== 定型文 ===== */
.owner-templates{padding:8px 12px;background:#fff;border-top:1px solid #e5e0d8;display:flex;align-items:center;gap:8px}
.hint{margin:0;font-size:11px;color:#888;flex-shrink:0}
.template-list{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;flex:1;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:2px}
.template-list::-webkit-scrollbar{height:4px}
.template-list::-webkit-scrollbar-thumb{background:#d4c8be;border-radius:2px}
.template-btn{flex-shrink:0;display:inline-block;padding:6px 10px;background:var(--chat-quick-bg);color:var(--chat-quick-text);border:1px solid var(--chat-quick-border);border-radius:16px;font-size:12px;cursor:pointer;transition:background .15s;white-space:nowrap}
.template-btn:hover{background:var(--chat-quick-bg-hover)}
.template-btn-title{font-weight:700;margin-right:4px;font-size:12px;color:var(--chat-primary)}

/* ===== ニックネーム ===== */
.nickname-area{display:flex;align-items:center;gap:6px;padding:6px 10px;background:#fff;border-top:1px solid #e5e0d8}
.nickname-label{font-size:11px;color:#888;flex-shrink:0}
.nickname-input{flex:1 1 0;min-width:60px;padding:6px 10px;border:1px solid var(--chat-quick-border);border-radius:14px;font-size:16px;background:#fafafa}
@media (max-width:480px){
  .nickname-area{gap:4px;padding:4px 8px}
  .nickname-label{font-size:10px}
  .nickname-input{padding:5px 8px}
}
.nickname-input:focus{outline:none;border-color:var(--chat-primary);background:#fff}
.nickname-input.locked{background:#f3efe8;color:#6a6256;cursor:not-allowed;border-style:dashed}
.nickname-input.locked:focus{background:#f3efe8;border-color:var(--chat-quick-border)}

/* ===== 入力エリア ===== */
.chat-input-area{display:flex;align-items:center;padding:10px 12px;gap:8px;background:#fff;border-top:1px solid #e5e0d8;flex-shrink:0}
#chat-input{flex:1;padding:6px 10px;border:1px solid var(--chat-quick-border);border-radius:14px;font-size:16px;resize:none;font-family:inherit;line-height:1.4;min-height:32px;max-height:120px;overflow-y:auto;background:#fafafa}
#chat-input:focus{outline:none;border-color:var(--chat-primary);background:#fff}
/* iOS Safari (PWA含む) で、送信後など特定タイミングで input/textarea が focus 状態でも
   文字入力できなくなるバグの対策. -webkit-user-select:text を明示することで回避できるケースが多い. */
#chat-root input,#chat-root textarea,.nickname-input,#chat-input,#cdr-code{-webkit-user-select:text !important;-moz-user-select:text;user-select:text;-webkit-touch-callout:default}
/* textarea の placeholder は仕様上テキスト折返しが起きる. 狭い領域で「メッセージを入力...」が
   2行目に折返して 1行目末尾が「ー」だけになり、視覚的には「メッセ ジを入力...」と空白挿入されたように見える. */
#chat-input::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.send-btn{padding:0 18px;background:var(--chat-primary);color:#fff;border-radius:18px;font-weight:700;font-size:14px}
.send-btn::after{content:" ➤";margin-left:4px;font-weight:400;font-size:13px;display:inline-block;transform:translateY(-1px)}
.send-btn:disabled{background:#ccc;cursor:not-allowed}
.send-btn:disabled::after{opacity:.7}

/* ===== フッター ===== */
.chat-footer{position:relative;display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fafafa;border-top:1px solid #e5e0d8;flex-wrap:wrap;border-bottom-left-radius:13px;border-bottom-right-radius:13px}
@media (max-width:480px){.chat-footer{border-bottom-left-radius:9px;border-bottom-right-radius:9px}}
.footer-btn{height:34px;padding:0 14px;border-radius:17px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid #e0dbd0;background:#f0ede7;color:#444;flex-shrink:0}
.footer-btn:hover{background:#e5e0d8}
.footer-btn.danger{color:#c62828;border-color:#ffcdd2;background:#fff5f5}
.footer-btn.danger:hover{background:#ffe5e5}
.visitor-exit{display:flex;flex-direction:column;gap:8px;padding:10px 12px;background:#fafafa;border-top:1px solid #e5e0d8}
.exit-link{display:inline-block;padding:10px 16px;border-radius:6px;text-align:center;font-size:14px;font-weight:600;text-decoration:none;background:var(--chat-primary);color:#fff}
.exit-link:last-child{background:#06c755}

/* ===== エラー表示 ===== */
.chat-error{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:#c62828;color:#fff;padding:12px 20px;border-radius:24px;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,.2);z-index:100;max-width:90vw}

/* ===== ローディング ===== */
.loading::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.8) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><circle cx='20' cy='20' r='15' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round' stroke-dasharray='70 30'><animateTransform attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='1s' repeatCount='indefinite'/></circle></svg>") center center no-repeat;z-index:99}

/* ===== モバイル最適化 ===== */
@media (max-width:480px){
  #chat-header{padding:10px 4px 10px 12px}
  #chat-shop-name{font-size:14px}
  .msg{font-size:14px;max-width:85%}
  .chat-messages{padding:12px}
  #chat-input{font-size:16px;padding:5px 8px}
  /* スマホでキーボード表示中はメッセージ欄と入力行以外を隠してチャット領域を最大化.
     #visitor-note (受付時間外ステータス) は重要情報なので残す. */
  body.chat-input-focused #visitor-notify,
  body.chat-input-focused #nickname-area,
  body.chat-input-focused #reservation-hint,
  body.chat-input-focused #cast-view-banner,
  body.chat-input-focused #owner-templates,
  body.chat-input-focused #chat-footer{display:none}
}

/* ===== キャストモード: viewport 問わず入力中は画面を広く ===== */
/* キャストは iframe 埋込/PC返信 etc で viewport が 480px超になるケースがあるため @media 外で適用. */
body.cast-mode.chat-input-focused #visitor-notify,
body.cast-mode.chat-input-focused #nickname-area,
body.cast-mode.chat-input-focused #reservation-hint,
body.cast-mode.chat-input-focused #cast-view-banner,
body.cast-mode.chat-input-focused #owner-templates,
body.cast-mode.chat-input-focused #chat-footer{display:none}

/* ===== 埋込モード (iframe): viewport 問わず入力中は画面を広く ===== */
/* iframe 埋込 (②/⑤/① widget) では親が iframe 高さ = vv.height-stickyInset に縮める.
   その縮んだ高さに footer (113px) が入ると入力欄が iframe 中央付近に来てしまい、
   キーボード直上にピタリ来ない. cast-mode と同じく @media 外で footer 等を畳む. */
body.embedded.chat-input-focused #visitor-notify,
body.embedded.chat-input-focused #nickname-area,
body.embedded.chat-input-focused #reservation-hint,
body.embedded.chat-input-focused #cast-view-banner,
body.embedded.chat-input-focused #owner-templates,
body.embedded.chat-input-focused #chat-footer{display:none}

/* ===== 埋込モード: nickname/email 入力時は対象欄をキーボード直上に固定 =====
   iframe 高さ = vv.height-stickyInset だと nickname/email は iframe 上方にあり、
   iOS の input auto-scroll で画面外に押し上げられたり、
   chat-header の裏に隠れたりして入力できないケースがある.
   focus-within 中だけ position:absolute; bottom:0 でキーボード直上に持ち上げ、
   chat-input-area / templates / footer を畳んで前面に出す.
   ユーザー直接タップ前提 (programmatic focus は memory: feedback_chat_no_programmatic_focus 参照). */
/* :focus-within ではなく「テキスト/メール入力にフォーカス時のみ」にスコープ.
   チェックボックス (visitor-notify-toggle) クリックで :focus-within が立つと
   nickname-area が position:absolute bottom:0 z-index:10 で浮いてしまい、
   その下の visitor-notify (メール入力欄) を白背景で覆い隠してしまう. */
body.embedded #nickname-area:has(input:not([type=checkbox]):focus),
body.embedded #visitor-notify:has(input:not([type=checkbox]):focus){
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    z-index:10;
    background:#fff;
    border-top:1px solid #e5e0d8;
    box-shadow:0 -4px 12px rgba(0,0,0,.06);
    margin:0;
    padding:10px 12px
}
body.embedded #nickname-area:has(input:not([type=checkbox]):focus) ~ #chat-input-area,
body.embedded #visitor-notify:has(input:not([type=checkbox]):focus) ~ #chat-input-area,
body.embedded #nickname-area:has(input:not([type=checkbox]):focus) ~ #owner-templates,
body.embedded #visitor-notify:has(input:not([type=checkbox]):focus) ~ #owner-templates,
body.embedded #nickname-area:has(input:not([type=checkbox]):focus) ~ #chat-footer,
body.embedded #visitor-notify:has(input:not([type=checkbox]):focus) ~ #chat-footer{display:none}
/* sticky 化された入力欄に被らないよう chat-messages 下端に余白. :has() は iOS 15.4+ */
body.embedded #chat-root:has(#nickname-area input:not([type=checkbox]):focus) .chat-messages,
body.embedded #chat-root:has(#visitor-notify input:not([type=checkbox]):focus) .chat-messages{padding-bottom:90px}

/* ===== Footer brand (visitor mode, yobuho.com promo) ===== */
.footer-brand{margin-left:auto;display:inline-flex;flex-direction:column;align-items:flex-end;gap:1px;padding:4px 10px;border-radius:14px;font-size:11px;color:#6b5a50;text-decoration:none;background:transparent;transition:background .15s,color .15s;line-height:1.25}
.footer-brand:hover{background:#f0ede7}
.footer-brand.hidden{display:none}
.footer-brand-row{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.footer-brand-name{font-weight:800;color:#9b2d35;letter-spacing:.2px}
.footer-brand-ruby{font-size:10px;color:#8a7a6a;letter-spacing:.5px}
.footer-brand-by{color:#a89a8a;font-size:10px}
.footer-brand-site{font-weight:700;color:#555}
.footer-brand:hover .footer-brand-site{color:#9b2d35}
.footer-brand:hover .footer-brand-name{color:#7a1f27}
@media (max-width:420px){.footer-brand{font-size:10px;padding:3px 6px}.footer-brand-row{gap:3px}}
@media (max-width:640px){
  .chat-footer{flex-wrap:nowrap;gap:4px;padding:6px 8px}
  .font-size-btn,.footer-btn{height:30px;padding:0 8px;font-size:11px}
  .font-size-btn .font-size-icon{font-size:13px;padding-right:4px}
  .lang-select{height:30px;font-size:11px;padding:0 22px 0 8px}
  .footer-brand{margin-left:auto;padding:2px 6px;font-size:10px;flex-shrink:0}
  .footer-brand-ruby{font-size:9px}
  .footer-brand-by{font-size:9px}
}

/* ===== Owner login footer (visitor mode, discreet) ===== */
.owner-login-footer{padding:6px 12px;text-align:center;background:#fafafa;border-top:1px solid #eee;flex-shrink:0}
.owner-login-footer.hidden{display:none}
.owner-login-link-btn{font-size:11px;color:#888;background:transparent;padding:4px 8px;text-decoration:underline;cursor:pointer}
.owner-login-link-btn:hover{color:#555}

/* Inbox header buttons wrapper */
.inbox-header-btns{display:flex;gap:6px}

/* ===== Owner login modal ===== */
.owner-login-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;animation:fadeIn .2s}
.owner-login-modal.hidden{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.owner-login-card{background:#fff;border-radius:12px;width:100%;max-width:380px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:calc(100svh - 40px);overflow-y:auto}
.owner-login-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.owner-login-head h2{margin:0;font-size:17px;color:#222}
.owner-login-close{width:32px;height:32px;border-radius:50%;background:#f2f2f2;color:#666;font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.owner-login-close:hover{background:#e8e8e8}
.owner-login-desc{margin:0 0 16px;font-size:12px;color:#666;line-height:1.6}
.owner-login-form{display:flex;flex-direction:column;gap:12px}
.owner-login-label{display:flex;flex-direction:column;gap:4px}
.owner-login-label span{font-size:12px;font-weight:600;color:#555}
.owner-login-label input{padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;font-family:inherit;background:#fafafa;outline:none;transition:border-color .15s,background .15s}
.owner-login-label input:focus{border-color:var(--chat-primary);background:#fff}
.owner-login-error{padding:8px 10px;background:#ffebee;border:1px solid #ffcdd2;color:#c62828;border-radius:6px;font-size:12px}
.owner-login-error.hidden{display:none}
.owner-login-submit{padding:12px;background:linear-gradient(135deg,var(--chat-primary) 0%,var(--chat-primary-dark) 100%);color:#fff;border-radius:6px;font-weight:700;font-size:14px;cursor:pointer;transition:opacity .15s}
.owner-login-submit:hover{opacity:.9}
.owner-login-submit:disabled{opacity:.5;cursor:not-allowed}
.owner-login-note{margin:4px 0 0;font-size:11px;color:#888;text-align:center;line-height:1.6}

/* 埋込時のみ表示する直リンク誘導（iframeで不調な時のフォールバック） */
/* チャット本体の終わりを示すため、上端にチャットヘッダーと同色の区切り線を入れる */
.embed-direct-link{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px;background:#fafafa;border-top:2px solid var(--chat-primary);font-size:12px;color:#777;border-bottom-left-radius:13px;border-bottom-right-radius:13px}
.embed-direct-link.hidden{display:none}
/* 直リンク行が表示されている時は chat-footer の角丸を解除して直リンク行に移譲 */
body:has(#embed-direct-link:not(.hidden)) #chat-footer{border-bottom-left-radius:0;border-bottom-right-radius:0}
@media (max-width:480px){.embed-direct-link{border-bottom-left-radius:9px;border-bottom-right-radius:9px}}
.embed-direct-link-label{color:#999;font-size:11px}
.embed-direct-link-anchor{color:var(--chat-primary);font-weight:700;text-decoration:none;padding:4px 10px;border:1px solid var(--chat-primary);border-radius:14px;font-size:12px;min-height:28px;display:inline-flex;align-items:center}
.embed-direct-link-anchor:hover{background:var(--chat-primary);color:#fff}
.embed-cast-picker{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-basis:100%;width:100%;max-width:100%;margin-top:4px}
.embed-cast-picker.hidden{display:none}
.embed-cast-label{font-size:13px;color:#555;flex-shrink:0;font-weight:600}
.embed-cast-list{display:flex;gap:8px;flex-wrap:wrap;max-width:100%}
.embed-cast-link{display:inline-flex;align-items:center;padding:7px 14px;border:1.5px solid var(--chat-primary);border-radius:16px;background:#fff;color:var(--chat-primary);font-size:14px;font-weight:700;text-decoration:none;min-height:34px;line-height:1.2;transition:background .15s ease,color .15s ease}
.embed-cast-link:hover,.embed-cast-link:focus-visible{background:var(--chat-primary);color:#fff;outline:none}
@media (max-width:480px){body.chat-input-focused #embed-direct-link{display:none}}
body.cast-mode.chat-input-focused #embed-direct-link{display:none}

/* ======================================================================
   jofu (women) ネオモーフ + ピンクベージュ系リファイン (2026-04-29)
   ======================================================================
   対象: body[data-mode="women"]. 他モードは従来スタイル維持.
   レイアウト構造・ID・クラスは触らず、色・影・フォントスタイルのみ上書き.
   仕様: 文字コントラスト WCAG AA 以上、UI は柔らかい凸シャドウで上品に.
   ====================================================================== */
body[data-mode="women"]{
  --thb-bg-base:#F5EAE4;
  --thb-bg-soft:#FBF6F2;
  --thb-bg-shadow:#EFE3DD;
  --thb-header-from:#B85470;
  --thb-header-to:#8B3A52;
  --thb-header-text:#FBE9E7;
  --thb-accent:#B85470;
  --thb-accent-soft:#C66B85;
  --thb-accent-deep:#A04960;
  --thb-text-primary:#1F0A14;
  --thb-text-body:#3D1A2A;
  --thb-text-sub:#8B5666;
  --thb-text-muted:#A07585;
  --thb-text-heading:#5C2A38;
  --thb-status-online:#7DD3A8;
  --thb-shadow-light:rgba(255,255,255,0.92);
  --thb-shadow-dark:rgba(180,130,120,0.18);
  --thb-shadow-dark-strong:rgba(180,130,120,0.22);
  --thb-border-soft:rgba(184,84,112,0.15);
  --thb-border-faint:rgba(184,84,112,0.12);
}
body[data-mode="women"]{background:var(--thb-bg-shadow)}
/* chat-root 背景は白. ローズヘッダーの角丸 (border-top-radius) の隙間が
   chat-sheet トップバー(白) と同色になり「角丸の上が白で透けてる」感を維持.
   pink テーマの本体 (チャット領域) は .chat-messages 等で個別に着色する. */
body[data-mode="women"] #chat-root{background:#fff}
body[data-mode="women"] .chat-messages{background:var(--thb-bg-base)}
body[data-mode="women"] .chat-thread{background:var(--thb-bg-base)}

/* B-1. ヘッダー (店舗名/受付時間/通知トグル) */
body[data-mode="women"] #chat-header{
  background:linear-gradient(135deg,var(--thb-header-from) 0%,var(--thb-header-to) 100%);
  color:var(--thb-header-text);
}
body[data-mode="women"] #chat-shop-name{
  color:var(--thb-header-text);
  font-weight:600;
  letter-spacing:.04em;
}
body[data-mode="women"] .status-label{
  color:rgba(251,233,231,.85);
  font-size:10px;
}
body[data-mode="women"] .status-dot.online{
  background:var(--thb-status-online);
  width:8px;height:8px;
  box-shadow:0 0 6px rgba(125,211,168,.6);
}
body[data-mode="women"] .toggle-switch .slider{
  background:rgba(0,0,0,.28);
  box-shadow:inset 1px 1px 3px rgba(0,0,0,.32);
}
body[data-mode="women"] .toggle-switch input:checked + .slider{
  background:var(--thb-status-online);
  box-shadow:inset 1px 1px 2px rgba(40,90,70,.25),0 0 8px rgba(125,211,168,.4);
}
body[data-mode="women"] .toggle-switch .slider::before{
  background:var(--thb-header-text);
  box-shadow:1px 1px 2px rgba(0,0,0,.25);
}

/* B-2. 「受信チャット」タイトル行 (.inbox-header) */
body[data-mode="women"] .inbox-header{
  background:var(--thb-bg-base);
  border-bottom:1px solid var(--thb-border-faint);
}
body[data-mode="women"] .inbox-header h2{
  color:var(--thb-text-heading);
  font-size:15px;
  font-weight:600;
}

/* B-3. 更新/ログアウトボタン (.mini-btn) — 1番目=更新(凸), 2番目=ログアウト(塗り) */
body[data-mode="women"] .inbox-header-btns{display:flex;gap:8px}
body[data-mode="women"] .mini-btn{
  background:var(--thb-bg-base);
  color:var(--thb-accent);
  border-radius:14px;
  padding:7px 14px;
  font-weight:600;
  font-size:12px;
  box-shadow:3px 3px 7px var(--thb-shadow-dark),-3px -3px 7px var(--thb-shadow-light);
  transition:box-shadow .15s ease,transform .1s ease;
}
body[data-mode="women"] .mini-btn:active{
  box-shadow:inset 2px 2px 5px var(--thb-shadow-dark-strong),inset -2px -2px 5px rgba(255,255,255,.85);
  transform:scale(0.98);
}
/* ログアウトは行末なので :last-child でプライマリ塗りに */
body[data-mode="women"] .inbox-header-btns .mini-btn:last-child{
  background:linear-gradient(135deg,var(--thb-accent-soft),var(--thb-accent-deep));
  color:#fff;
  box-shadow:2px 2px 5px rgba(160,73,96,.3),-1px -1px 3px rgba(255,255,255,.7);
}
body[data-mode="women"] .inbox-header-btns .mini-btn:last-child:active{
  box-shadow:inset 1px 1px 3px rgba(0,0,0,.2);
  transform:scale(0.98);
}

/* B-4. チャットリスト (最重要・可読性優先) */
body[data-mode="women"] .inbox-list{background:var(--thb-bg-base)}
body[data-mode="women"] .inbox-item{
  background:var(--thb-bg-base);
  padding:14px 16px 12px;
  border-bottom:1px solid var(--thb-border-soft);
  line-height:1.6;
  transition:background .15s ease;
}
body[data-mode="women"] .inbox-item:last-child{border-bottom:none}
body[data-mode="women"] .inbox-item:hover{background:var(--thb-bg-soft)}
body[data-mode="women"] .inbox-item.unread{
  background:linear-gradient(90deg,rgba(184,84,112,.06) 0%,var(--thb-bg-base) 100%);
  border-left:3px solid var(--thb-accent);
}
body[data-mode="women"] .inbox-item-title{
  color:var(--thb-text-primary);
  font-size:15px;
  font-weight:700;
  letter-spacing:.01em;
  margin-bottom:5px;
}
body[data-mode="women"] .inbox-item-preview{
  color:var(--thb-text-body);
  font-size:14px;
  font-weight:500;
  margin-bottom:5px;
}
body[data-mode="women"] .inbox-item-time{
  color:var(--thb-text-sub);
  font-size:11px;
  font-weight:500;
  margin-top:4px;
}
body[data-mode="women"] .inbox-empty{color:var(--thb-text-sub)}

/* B-5. A/中 サイズ切替ボタン (.font-size-btn) */
body[data-mode="women"] .font-size-btn{
  background:var(--thb-bg-base);
  color:var(--thb-text-muted);
  border:none;
  border-radius:18px;
  padding:6px 14px;
  font-weight:500;
  box-shadow:3px 3px 7px var(--thb-shadow-dark),-3px -3px 7px var(--thb-shadow-light);
}
body[data-mode="women"] .font-size-btn .font-size-icon{
  color:var(--thb-accent);
  border-right-color:var(--thb-border-soft);
}
body[data-mode="women"] .font-size-btn:hover{background:var(--thb-bg-soft)}
body[data-mode="women"] .font-size-btn:active{
  box-shadow:inset 2px 2px 4px var(--thb-shadow-dark-strong),inset -2px -2px 4px rgba(255,255,255,.85);
  transform:scale(0.98);
}

/* B-6/B-7. チャット全画面表示ボタン + 指名キャストボタン (.embed-direct-link 系) */
body[data-mode="women"] .embed-direct-link{
  background:var(--thb-bg-base);
  border-top:1px solid var(--thb-border-faint);
  color:var(--thb-text-sub);
}
body[data-mode="women"] .embed-direct-link-anchor{
  background:var(--thb-bg-base);
  color:var(--thb-accent);
  border:1.5px solid var(--thb-accent-soft);
  border-radius:22px;
  padding:8px 14px;
  font-weight:500;
  box-shadow:3px 3px 7px var(--thb-shadow-dark),-3px -3px 7px var(--thb-shadow-light);
}
body[data-mode="women"] .embed-direct-link-anchor:hover{
  background:var(--thb-bg-soft);
  color:var(--thb-accent-deep);
}
body[data-mode="women"] .embed-direct-link-anchor:active{
  box-shadow:inset 2px 2px 4px var(--thb-shadow-dark-strong),inset -2px -2px 4px rgba(255,255,255,.85);
  transform:scale(0.98);
}
body[data-mode="women"] .embed-cast-label{
  color:var(--thb-text-heading);
  font-weight:600;
}
body[data-mode="women"] .embed-cast-link{
  background:var(--thb-bg-base);
  color:var(--thb-accent);
  border:1.5px solid var(--thb-accent-soft);
  box-shadow:3px 3px 7px var(--thb-shadow-dark),-3px -3px 7px var(--thb-shadow-light);
  font-weight:600;
  transition:box-shadow .15s ease,transform .1s ease,background .15s ease,color .15s ease;
}
body[data-mode="women"] .embed-cast-link:hover,
body[data-mode="women"] .embed-cast-link:focus-visible{
  background:linear-gradient(135deg,var(--thb-accent-soft),var(--thb-accent-deep));
  color:#fff;
}
body[data-mode="women"] .embed-cast-link:active{
  box-shadow:inset 2px 2px 5px var(--thb-shadow-dark-strong),inset -2px -2px 5px rgba(255,255,255,.85);
  transform:scale(0.98);
}

/* チャット入力エリア (送信ボタン以外の可読性) — セクション境界メリハリ強化 */
body[data-mode="women"] .chat-input-area{
  background:var(--thb-bg-soft);
  border-top:1px solid var(--thb-border-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
  padding:12px 14px;
}
body[data-mode="women"] #chat-input{
  background:#fff;
  border:1.5px solid var(--thb-border-soft);
  color:var(--thb-text-primary);
  border-radius:16px;
  box-shadow:inset 2px 2px 4px var(--thb-shadow-dark-strong),inset -1px -1px 3px rgba(255,255,255,0.85);
}
body[data-mode="women"] #chat-input:focus{
  background:#fff;
  border-color:var(--thb-accent);
  box-shadow:inset 2px 2px 4px var(--thb-shadow-dark-strong),inset -1px -1px 3px rgba(255,255,255,0.85),0 0 0 2px rgba(184,84,112,0.12);
}

/* 送信ボタン: ネオモーフ凸 + ローズグラデ (控えめサイズ・元のサイズ感維持) */
body[data-mode="women"] .send-btn{
  background:linear-gradient(135deg,var(--thb-accent-soft),var(--thb-accent-deep));
  color:#fff;
  border-radius:18px;
  font-weight:700;
  letter-spacing:.04em;
  box-shadow:
    4px 4px 9px rgba(160,73,96,0.35),
    -2px -2px 6px rgba(255,255,255,0.9),
    inset 0 1px 0 rgba(255,255,255,0.3);
  transition:box-shadow .15s ease,transform .1s ease,filter .15s ease;
}
body[data-mode="women"] .send-btn:hover{
  filter:brightness(1.05);
}
body[data-mode="women"] .send-btn:active{
  transform:scale(0.96);
  box-shadow:
    inset 3px 3px 6px rgba(106,40,56,0.45),
    inset -2px -2px 5px rgba(255,255,255,0.18);
}
body[data-mode="women"] .send-btn:disabled{
  background:linear-gradient(135deg,#dccbcf,#b8a0aa);
  color:rgba(255,255,255,0.85);
  box-shadow:
    2px 2px 5px var(--thb-shadow-dark),
    -1px -1px 3px var(--thb-shadow-light);
  filter:none;
}

/* ニックネーム / 通知 / 予約ヒント / 入力欄エリア間のセクション境界をハッキリと.
   交互に bg-base / bg-soft でバンディングして視覚分離を演出. */
body[data-mode="women"] .nickname-area{
  background:var(--thb-bg-base);
  border-top:1px solid var(--thb-border-soft);
  padding:10px 14px;
}
body[data-mode="women"] .visitor-notify{
  background:var(--thb-bg-soft);
  border-top:1px solid var(--thb-border-faint);
  margin:0;
  padding:10px 14px;
}
body[data-mode="women"] #reservation-hint,
body[data-mode="women"] .reservation-hint,
body[data-mode="women"] .chat-note{
  background:linear-gradient(180deg,rgba(184,84,112,0.08),rgba(184,84,112,0.04));
  border-top:1px solid var(--thb-border-soft);
  border-bottom:1px solid var(--thb-border-soft);
  color:var(--thb-text-heading);
  padding:10px 14px;
  font-size:12px;
}

/* ブランド表記 (フッター) — A/中切替の親コンテナ #chat-footer */
body[data-mode="women"] .footer-brand,
body[data-mode="women"] #chat-footer{
  background:var(--thb-bg-soft);
  color:var(--thb-text-muted);
  border-top:1px solid var(--thb-border-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
  padding:8px 14px;
}

/* embed-direct-link (チャット全画面表示+指名) はさらに分離感.
   背景色を bg-base に戻し、上に強めの境界線+影で「フッター下のオプション領域」感. */
body[data-mode="women"] .embed-direct-link{
  background:var(--thb-bg-base);
  border-top:1.5px solid var(--thb-border-soft);
  box-shadow:inset 0 2px 4px -2px var(--thb-shadow-dark);
  padding:14px;
}