/* Scoped additions to the existing exchange UI. No parent-page/global layout. */
.exchange-guide { margin: 10px 24px; padding: 10px 12px; border: 1px solid var(--line,#ddd); border-radius: 12px; font-size: 14px; }
.exchange-guide summary,.call-help summary { cursor:pointer; font-weight:700; padding:6px 0; }
.exchange-guide-content { display:grid; gap:12px; margin-top:8px; }
.exchange-guide p,.call-help p { line-height:1.65; overflow-wrap:anywhere; margin:6px 0; }
.exchange-guide .topic-group { margin:8px 0 8px 10px; }
.exchange-guide .phrase-card { padding:8px 0; border-bottom:1px solid var(--line,#ddd); }
.exchange-guide .phrase-card p[lang=id] { color:var(--muted,#666); }
.exchange-plan-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:10px 0; }
.exchange-plan-fields label { display:grid; gap:4px; min-width:0; }
.exchange-plan-fields input,.exchange-plan-fields select { width:100%; min-width:0; box-sizing:border-box; padding:9px; font:inherit; border:1px solid var(--line,#ddd); border-radius:8px; }
.exchange-guide button { white-space:normal; min-height:44px; }
.precheck { padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
.precheck-card { max-height:calc(100dvh - 24px); overflow:auto; overscroll-behavior:contain; box-sizing:border-box; }
.precheck-video { max-height:30dvh; }
.call-help { font-size:13px; line-height:1.65; max-width:100%; overflow-wrap:anywhere; }
.video-overlay { padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); box-sizing:border-box; height:100vh; height:100dvh; }
.video-overlay .video-bar { flex-shrink:0; padding-left:max(10px,env(safe-area-inset-left)); padding-right:max(10px,env(safe-area-inset-right)); }
.video-overlay .video-brand { margin:0; font-size:16px; }
.video-overlay .video-partner { overflow-wrap:anywhere; margin:0; }
.video-overlay .video-stage { overflow:auto; }
.video-overlay .video-card { flex:1 0 240px; min-height:240px; }
.video-overlay .video-frame { min-height:240px; }
.video-overlay .video-actions > *,.precheck-actions > * { min-height:44px; }
.video-overlay .call-help { width:min(100%,1200px); flex-shrink:0; }
.call-panel .call-error { width:100%; color:#862f23; }
@media(max-width:640px){.exchange-guide{margin:10px 12px}.exchange-plan-fields{grid-template-columns:1fr}.precheck-card{padding:16px}.video-overlay .video-bar{gap:6px}.video-overlay .video-partner{min-width:0;flex-basis:100%}}
.video-cleanup{padding:16px;margin:12px 0;border:1px solid #d49c37;border-radius:12px;background:#fff7e3;overflow-wrap:anywhere}.video-cleanup[hidden]{display:none}.video-cleanup-row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:12px 0}.video-cleanup p{margin:0 0 10px}
/* 1.2.29: 日記の「💬 この人と話す」— 行の右端に小さな丸ボタン（折り返したら次の行の右端） */
.jlf-post-actions .jlf-talk{margin-left:auto;border-radius:999px;padding:5px 12px;background:#EAF2F5;font-weight:700;white-space:nowrap}
.jlf-post-actions .jlf-talk:hover{background:#DCEAF0}
/* 1.2.30: 埋め込みの公開プレビュー（未参加・管理者の見本）では、上のメニュー（相手を探す・メッセージ・みんなの投稿）は使えないので出さない */
body[data-embed="true"][data-preview="true"] .page-tabs{display:none!important}
/* 1.2.31: プロフィールの「🎥 通話を提案」を「話しかける」と同じ幅に */
.profile-dialog #profile-detail>.call-shortcut{display:flex;align-items:center;justify-content:center;width:100%;margin-top:10px}
.profile-dialog .person-top>div{text-align:center;width:100%}
.profile-dialog .person-bio{text-align:center}
/* 1.2.32: 母語の旗（名前の横）と、写真を読み込めなかったときの表示 */
.jlf-name-line{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.jlf-flag{display:inline-block;width:18px;height:12px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.2);flex:0 0 auto;vertical-align:-1px}
.jlf-flag-ja{background:#fff radial-gradient(circle at 50% 50%,#bc002d 0,#bc002d 3.6px,transparent 3.9px)}
.jlf-flag-id{background:linear-gradient(#ce1126 0,#ce1126 50%,#fff 50%,#fff 100%)}
.person-name .jlf-flag{margin-left:8px;vertical-align:middle}
.jlm-media-retry{margin:6px 0;padding:10px 12px;border:1px dashed #c9cfda;border-radius:10px;background:#f7f8fb;color:#5b6475;font-size:13px}
.jlm-media-retry button{margin-left:6px;border:1px solid #b8c0cf;background:#fff;border-radius:8px;padding:3px 10px;font:inherit;cursor:pointer}
/* 1.2.32: 埋め込み（japafly のマイページ・JLC のマイページ）でも写真を切らずに全体を見せる。以前は幅いっぱい・高さ 240px で上下を切り取っていた */
body[data-embed="true"] .jlf-post-image{width:100%;height:auto;max-height:360px;object-fit:contain;background:#f5f3ed}
/* 1.2.33: keep scrolled-to content below the sticky header (phones) */
html{scroll-padding-top:84px}
/* 1.2.33: call clock — elapsed time, time left to the target, entry-link deadline */
.video-overlay .video-clock{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;font-variant-numeric:tabular-nums;font-size:13px;line-height:1.3;order:3;flex-basis:100%}
.video-overlay .video-actions{order:2}
.video-overlay .video-bar{row-gap:6px}.video-overlay .video-newtab{display:inline-flex;align-items:center}
.video-clock .vc-elapsed{font-weight:800;color:#2B2224;background:#EEF5FB;border-radius:99px;padding:5px 11px;white-space:nowrap}
.video-clock .vc-reset{border:0;background:transparent;color:#1F7FB3;font-weight:800;font-size:16px;cursor:pointer;min-height:32px;min-width:32px;padding:0 4px;border-radius:99px}
.video-clock .vc-reset:hover{background:#EEF5FB}
.video-clock .vc-left{font-weight:800;color:#1F7FB3;white-space:nowrap}
.video-clock.is-half .vc-left{color:#B7791F}
.video-clock.is-over .vc-left{color:#C2410C}
.video-clock .vc-goal{font:inherit;font-size:12px;font-weight:700;color:#3a2e31;border:1px solid #d9e2ea;border-radius:99px;padding:4px 8px;background:#fff;min-height:32px}
.video-clock .vc-exp{font-size:11.5px;color:#7a6f73;white-space:nowrap}
.video-clock .vc-exp.is-soon{color:#C2410C;font-weight:800}
.video-overlay .video-stage{position:relative}
.video-toast{position:absolute;z-index:3;top:14px;left:50%;transform:translateX(-50%);width:max-content;max-width:min(92%,560px);margin:0;background:#2B2224;color:#fff;border-radius:14px;padding:10px 16px;font-weight:700;font-size:14px;line-height:1.5;box-shadow:0 10px 26px rgba(0,0,0,.28);text-align:center}
.video-toast[hidden]{display:none}
.video-close .vc-short{display:none}
/* 1.2.33: phones — one compact header (title+partner / clock / actions) so the Daily view gets the height */
@media(max-width:640px){.video-overlay .video-bar{gap:6px 8px;padding:8px 10px}.video-overlay .video-brand{font-size:14px;margin:0}.video-overlay .video-partner{flex:1 1 0;min-width:0;margin:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-overlay .video-clock{flex-basis:100%;order:3;font-size:12.5px}.video-overlay .video-actions{order:4;flex-basis:100%;gap:8px}.video-overlay .video-done,.video-overlay .video-close{padding:8px 11px;font-size:12px;white-space:nowrap}.video-overlay .video-newtab{font-size:11.5px;white-space:nowrap}.video-close .vc-long{display:none}.video-close .vc-short{display:inline}.video-overlay .video-note{font-size:11.5px}.video-toast{top:10px;font-size:13px}}
/* 1.2.35: ことば交換のルール（メニューの「📘 ルール」・参加前の案内・通話前の確認） */
.rules-line{display:flex;justify-content:flex-end;margin:0 0 10px}
.rules-link{min-height:0;padding:4px 8px;border:0;border-radius:8px;background:none;color:#1F7FB3;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.rules-link:hover,.rules-link:focus-visible{background:#EEF5FB}
body[data-preview="true"] .rules-line{display:none}
body[data-embed="true"] .rules-line{clear:both;margin:0 0 6px}
.rules-dialog{position:fixed;width:min(640px,calc(100% - 24px));max-height:calc(100vh - 32px);overflow:auto;border:0;border-radius:20px;padding:22px 22px 18px;box-shadow:0 24px 60px rgba(40,25,15,.3);color:#3a2e31;background:#fff;box-sizing:border-box}
.rules-dialog::backdrop{background:rgba(30,20,15,.45)}
.rules-dialog h2{margin:0 40px 10px 0;font-size:20px;line-height:1.4}
.rules-dialog h3{margin:16px 0 6px;font-size:15px;color:#C43D3D}
.rules-dialog ul{margin:0;padding-left:20px}
.rules-dialog li{margin:4px 0;line-height:1.65;font-size:14px}
.rules-dialog .rules-lead{margin:0 0 4px;line-height:1.7;font-size:14px}
.rules-dialog .rules-foot{margin:16px 0 0;padding:10px 12px;background:#FFF6E0;border-radius:12px;font-size:13px;line-height:1.65}
.rules-dialog .dialog-close{position:absolute;top:12px;right:12px}
.rules-dialog .rules-ok{display:block;margin:16px auto 0;min-width:160px}
.rules-dialog.rules-fallback{top:16px;left:50%;transform:translateX(-50%);z-index:2147483000}
.rules-note{margin:10px 0 12px;padding:10px 12px;border-radius:12px;background:#EEF5FB;font-size:13px;line-height:1.65;color:#3a2e31;text-align:left}
.rules-note .rules-read{display:inline;min-height:0;padding:0;margin:0 0 0 2px;border:0;background:none;font:inherit;font-weight:700;color:#1F7FB3;text-decoration:underline;cursor:pointer}
.precheck-card .rules-note{margin:12px 0}
@media(max-width:640px){.rules-dialog{padding:18px 16px 14px}.rules-dialog h2{font-size:18px}.rules-dialog li{font-size:13.5px}}
/* 1.2.36: プロフィール — 日記の名前・アイコンから開く／任意の項目／最近の日記／編集 */
.jlf-avatar-link{padding:0;border:0;background:none;cursor:pointer;border-radius:50%;line-height:0;flex:0 0 auto}
.jlf-avatar-link:hover .jlf-avatar,.jlf-avatar-link:focus-visible .jlf-avatar{box-shadow:0 0 0 3px rgba(224,78,78,.2)}
.jlf-person-link{cursor:pointer}
.person-extras{display:grid;gap:7px;margin:0 0 16px;padding:12px 14px;border-radius:14px;background:#faf6ef;font-size:13px;line-height:1.6;text-align:left}
.person-extra{display:flex;gap:10px;align-items:baseline}
.person-extra-k{flex:0 0 auto;min-width:8.2em;color:var(--muted,#8a7f79);font-size:12px}
.person-extra-v{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.person-recent{margin:2px 0 6px;text-align:left}
.person-recent h4{margin:0 0 8px;font-size:12.5px;color:var(--muted,#8a7f79)}
.person-recent-item{margin:0 0 6px;padding:9px 12px;border:1px solid var(--line,#eee6dc);border-radius:12px;background:#fff}
.person-recent-meta{display:flex;align-items:center;gap:8px;margin:0 0 3px;font-size:11px;color:var(--muted,#8a7f79)}
.person-recent-lang{padding:0 7px;border-radius:9px;background:#f5f4ef}
.person-recent-item p{margin:0;font-size:13px;line-height:1.7;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.person-same-side{margin:14px 0 0!important;text-align:center}
.settings-dialog #edit-profile{display:block;width:100%;margin:0 0 14px}
.profile-edit-dialog h2{margin:0 0 8px;font-size:22px}
.profile-edit-dialog>.small-note{margin:0;font-size:12px;line-height:1.7}
.profile-edit-dialog form{display:grid;gap:14px;margin-top:14px}
.profile-edit-dialog label,.profile-more label{display:grid;gap:6px;font-size:13.5px;font-weight:700}
.profile-edit-dialog input,.profile-edit-dialog select,.profile-edit-dialog textarea,.profile-more input,.profile-more select{width:100%;min-width:0;box-sizing:border-box;margin:0;background:#fff;border:1px solid var(--line,#dedcda);border-radius:12px;color:var(--ink,#3a2e31);font:inherit;font-weight:400;line-height:1.6;padding:10px 12px}
.profile-edit-dialog textarea{min-height:110px;max-height:320px;resize:vertical}
.profile-edit-dialog small,.profile-more small{font-weight:400;font-size:11.5px;color:var(--muted,#6b5e60)}
.profile-edit-dialog .pe-langs{margin:0;font-size:12px;color:var(--muted,#6b5e60)}
.profile-edit-dialog .primary{width:100%}
.profile-more{padding:12px 14px;border:1px dashed var(--line,#e2d8cb);border-radius:14px;background:#fffdf9}
.profile-more summary{cursor:pointer;font-weight:700;font-size:14px}
.profile-more[open] summary{margin-bottom:12px}
.profile-more label{margin:0 0 12px}
body[data-embed="true"] .profile-edit-dialog{width:min(480px,calc(100% - 20px));padding:26px 18px}