/* 通話画面 共通ライトテーマ（4タイプ共通のベース。各ページで上書き可） */
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: #eef1f6; color: #1f2530; }
header { padding: 12px 16px; background: #ffffff; border-bottom: 1px solid #e3e6ea; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
h1 { font-size: 15px; margin: 0; font-weight: 600; }
.badge { font-size:12px; background:#f1f3f6; border:1px solid #e3e6ea; padding:3px 8px; border-radius:999px; color:#4b5563; }
.wrap { display: grid; gap: 12px; padding: 12px; height: calc(100vh - 52px); }
.panel { background:#ffffff; border:1px solid #e3e6ea; border-radius:10px; padding:12px; box-shadow:0 2px 8px rgba(30,40,60,.04); }
input, button { font: inherit; }
input { background:#ffffff; color:#1f2530; border:1px solid #d1d5db; border-radius:6px; padding:8px 10px; }
button { border:0; border-radius:6px; padding:8px 12px; cursor:pointer; background:#3b82f6; color:#fff; font-weight:600; }
button.secondary { background:#eceff3; color:#374151; }
button.danger { background:#ef4444; color:#fff; }
button:disabled { opacity:.5; cursor:not-allowed; }
/* マイク・カメラの状態表示：線＋薄い背景（ON＝青 / OFF＝グレー）*/
button.on  { background:#eff5ff; color:#2563eb; border:1px solid #3b82f6; }
button.off { background:#f3f4f6; color:#6b7280; border:1px solid #d1d5db; }
#micBtn, #camBtn { display:inline-flex; align-items:center; gap:6px; }
#micBtn .ic, #camBtn .ic { flex:none; }
/* OFF時だけ赤い斜め線（＋背景色のふち取りでキレイに抜く）*/
.slash, .slashbg { display:none; }
button.off .slash, button.off .slashbg { display:inline; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* ビデオ／音声タイル */
.videos { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:10px; }
.tile { position:relative; background:#111418; border-radius:8px; overflow:hidden; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; }
.tile video { width:100%; height:100%; object-fit:cover; }
.tile .label { position:absolute; left:6px; bottom:6px; font-size:12px; background:rgba(0,0,0,.6); padding:2px 6px; border-radius:4px; color:#fff; }
.tile .novid { color:#8a93a0; font-size:13px; }

/* 課金メーター */
.meter { font-size:26px; font-weight:700; letter-spacing:.5px; color:#111827; }
.meter small { font-size:13px; color:#6b7280; font-weight:500; }
.status { font-size:12px; color:#6b7280; }

/* チャット */
.chat { display:flex; flex-direction:column; height:100%; }
.chatlog { flex:1; overflow-y:auto; background:#f7f8fa; border:1px solid #e3e6ea; border-radius:6px; padding:10px; font-size:14px; min-height:160px; }

/* LINE風 吹き出し */
.msg-row { display:flex; flex-direction:column; margin-bottom:10px; max-width:80%; }
.msg-row.mine { margin-left:auto; align-items:flex-end; }
.msg-row.theirs { margin-right:auto; align-items:flex-start; }
.msg-row .who { font-size:11px; color:#8a93a0; margin:0 6px 3px; }
.msg-row .line { display:flex; align-items:flex-end; gap:6px; max-width:100%; }
.time { font-size:10px; color:#9aa0aa; white-space:nowrap; margin-bottom:3px; }
.bubble { position:relative; padding:8px 13px; border-radius:16px; line-height:1.5; word-break:break-word;
          transform-origin:top; animation: popIn .28s cubic-bezier(.34,1.56,.64,1); }
/* 自分（右・青）：右上の角から上端に沿って尻尾 */
.msg-row.mine .bubble { background:#3b82f6; color:#fff; border-top-right-radius:4px; }
.msg-row.mine .bubble::after { content:''; position:absolute; top:0; right:-7px;
          border:9px solid transparent; border-top:0; border-right:0; border-left-color:#3b82f6; }
/* 相手（左・白）：左上の角から上端に沿って尻尾 */
.msg-row.theirs .bubble { background:#ffffff; color:#1f2530; box-shadow:0 1px 2px rgba(30,40,60,.10); border-top-left-radius:4px; }
.msg-row.theirs .bubble::after { content:''; position:absolute; top:0; left:-7px;
          border:9px solid transparent; border-top:0; border-left:0; border-right-color:#ffffff; }
@keyframes popIn {
  0%   { opacity:0; transform: translateY(10px) scale(.82); }
  60%  { opacity:1; }
  100% { opacity:1; transform: translateY(0) scale(1); }
}

/* 画像・動画メッセージ（吹き出しなし）*/
.media-row .line { gap:8px; }
.media-link { display:block; line-height:0; }
.chatmedia { display:block; max-width:min(240px,60vw); max-height:280px; border-radius:14px; cursor:pointer; }
.media-side { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; }
.dl-icon { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
           background:#ffffff; border:1px solid #e3e6ea; color:#4b5563; text-decoration:none; font-size:14px;
           box-shadow:0 1px 2px rgba(30,40,60,.1); }
.dl-icon:hover { background:#f3f4f6; }

/* 入力中インジケーター（相手の「…」吹き出し）*/
.typing { display:none; margin-top:2px; }
.typing.show { display:block; }
.typing .bubble { padding:12px 14px; }
.typing .dots { display:inline-flex; gap:4px; }
.typing .dots span { width:7px; height:7px; border-radius:50%; background:#b6bdc7; animation: blink 1.2s infinite; }
.typing .dots span:nth-child(2){ animation-delay:.2s; }
.typing .dots span:nth-child(3){ animation-delay:.4s; }
@keyframes blink { 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

/* 終了ポップアップ */
.overlay { position:fixed; inset:0; background:rgba(20,25,35,.45); display:none; align-items:center; justify-content:center; z-index:50; }
.overlay.show { display:flex; }
.modal { background:#ffffff; border:1px solid #e3e6ea; border-radius:16px; padding:28px 26px; max-width:360px; width:90%; text-align:center; box-shadow:0 20px 60px rgba(30,40,60,.25); }
.modal h2 { margin:0; font-size:19px; color:#111827; }
.modal .amount { font-size:36px; font-weight:800; margin:16px 0 2px; color:#2563eb; }
.modal .dur { color:#6b7280; font-size:14px; }
.modal .reason { color:#9aa0aa; font-size:13px; margin-top:12px; }
.modal button { margin-top:22px; width:100%; padding:13px; border-radius:10px; font-size:15px; }