/* 新卒クエスト — ガチ研修 Stage 3「電話（声）」の画面（gk- の接頭辞。まじめ寄り：白い面・薄い線・紺と判定の3色。ui_rules.md 5章）。
   通話の画面（左に素材・まん中に通話・右に伝言メモかチャット）、最初の答え方の選択、データを入れる小窓、判定の通話の記録。 */
#gachi[data-r="task"][data-k="call"] .fx-wrap,#gachi[data-r="result"][data-k="call"] .fx-wrap{max-width:1560px}
#gachi .gk-work-call{grid-template-columns:minmax(230px,.55fr) minmax(460px,1.25fr) minmax(330px,.85fr)}
#gachi .gk-work-call.gk-call-2col{grid-template-columns:minmax(260px,.6fr) minmax(520px,1.4fr)}
#gachi .gk-callmats .gk-kv{grid-template-columns:auto 1fr}
#gachi .gk-callmats .gk-book li{display:grid;gap:2px}
#gachi .gk-callmats .gk-book code{font-size:14px;font-weight:700}
#gachi .gk-callmats textarea{font:inherit;font-size:15px;line-height:1.6;width:100%;box-sizing:border-box;border:2px solid var(--line2);border-radius:8px!important;padding:8px 10px;min-height:44px;resize:vertical;color:var(--ink);background:#FFFFFF}
#gachi .gk-callmats textarea:focus{border-color:var(--ink);outline:none}
#gachi .gk-callmats h3 label{font:inherit}
#gachi .gk-callmats h3 small{font-size:13px;color:var(--sub);font-weight:400;font-family:var(--body)}
#gachi .gk-callnote{font-size:13px;line-height:1.6}

/* ---------- 通話（まん中） ---------- */
#gachi .gk-call{position:relative;background:#FFFFFF;border:1px solid var(--line2);border-top:4px solid var(--ink);border-radius:10px!important;display:flex;flex-direction:column;min-height:0;min-width:0}
#gachi .gk-call-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:8px 12px;border-bottom:1px solid var(--line2)}
#gachi .gk-call-line{display:flex;align-items:center;gap:8px;min-width:0}
#gachi .gk-call-line b{font-size:15px;font-weight:800;font-family:var(--round)}
#gachi .gk-call-line small{font-size:13px;color:var(--sub);white-space:nowrap}
#gachi .gk-ring-dot{width:10px;height:10px;border-radius:50%!important;background:#C9CEDB;flex:none}
#gachi .gk-ring-dot.gk-on{background:var(--good)}
#gachi .gk-call-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
#gachi .gk-ansmode{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--sub);margin-right:4px}
#gachi .gk-ansmode .gk-seg-b{min-height:36px;padding:2px 12px;font-size:14px}
#gachi .gk-ansmode .gk-seg-b:disabled{background:var(--tile);color:#6B6F86}
#gachi .gk-callb{min-height:44px;padding:6px 16px;border:1px solid var(--line2);border-radius:8px!important;background:#FFFFFF;color:var(--ink);font-weight:800;font-family:var(--round);font-size:15px}
#gachi .gk-callb:hover{background:var(--tile-h)}
#gachi .gk-callb:disabled{background:var(--tile);color:#6B6F86;border-color:var(--line2)}
#gachi .gk-callb.gk-is-on{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
#gachi .gk-callb-s{min-height:36px;padding:2px 10px;font-size:14px;font-weight:700}
#gachi .gk-callb-main{background:var(--ink);border-color:var(--ink);color:#FFFFFF;box-shadow:0 3px 0 var(--ink-d)}
#gachi .gk-callb-main:hover{background:#3A4884}
#gachi .gk-callb-main:active{box-shadow:0 1px 0 var(--ink-d);transform:translateY(2px)}
#gachi .gk-vreason{margin:8px 12px 0;padding:8px 12px;border-radius:8px!important;background:var(--navy-soft);font-size:14px;line-height:1.6}
#gachi .gk-call-log{list-style:none;margin:0;padding:10px 12px;flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:6px;position:relative}
#gachi .gk-call-log li{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:baseline;font-size:15px;line-height:1.7}
#gachi .gk-call-log li b{font-size:13px;font-weight:800;white-space:nowrap;color:var(--sub2)}
#gachi .gk-lg-c{padding:4px 10px;border-radius:8px!important;background:var(--tile)}
#gachi .gk-lg-c.gk-now{background:var(--navy-soft)}
#gachi .gk-lg-y{padding:4px 10px;border-radius:8px!important;border:1px solid var(--line2)}
#gachi .gk-lg-y.gk-fbad{border-color:#E7B4AE;background:#FFF8F7}
#gachi .gk-lg-y b{color:var(--ink)}
#gachi .gk-lg-sys{display:block!important;font-size:14px!important;color:var(--sub);padding:0 10px}
#gachi .gk-lg-sys.gk-fbad{color:var(--crit-ink);font-weight:700}
#gachi .gk-lg-call{display:block!important;font-size:13px!important;font-weight:800;color:var(--sub2);border-top:1px solid var(--line2);padding-top:6px;margin-top:2px}
#gachi .gk-lg-call:first-child{border-top:0;margin-top:0;padding-top:0}
#gachi .gk-hid{color:var(--sub);font-size:14px}
#gachi .gk-call-log i{font-style:normal;color:var(--sub)}
#gachi .gk-holdtag{display:inline-block;margin-left:6px;padding:0 8px;border-radius:6px!important;background:var(--warn-bg);color:var(--warn);font-size:12px;font-weight:800;font-style:normal}
/* いまの番（下に固定） */
#gachi .gk-cnow{border-top:1px solid var(--line2);padding:10px 12px 12px;display:grid;gap:8px;background:#FBFCFE;border-radius:0 0 10px 10px!important}
#gachi .gk-cnow-msg{font-size:16px;line-height:1.6;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
#gachi .gk-cnow-msg small{font-size:13px;color:var(--sub)}
#gachi .gk-cnow-msg b{font-family:var(--round);font-weight:800}
#gachi .gk-cnow-ring{grid-template-columns:auto 1fr auto;align-items:center;gap:14px}
#gachi .gk-cnow-ring p{display:grid;gap:2px}
#gachi .gk-cnow-ring b{font-size:17px;font-family:var(--round)}
#gachi .gk-cnow-ring small{font-size:14px;color:var(--sub)}
#gachi .gk-cnow-ring .gk-callb-main{min-width:120px;min-height:48px;font-size:16px}
#gachi .gk-ring-ic{width:22px;height:22px;border-radius:50%!important;background:var(--ink);box-shadow:0 0 0 0 rgba(46,58,110,.45)}
#gachi .gk-ring-ic.gk-ringing{animation:gkRing 1.1s ease-out infinite}
@keyframes gkRing{0%{box-shadow:0 0 0 0 rgba(46,58,110,.45)}100%{box-shadow:0 0 0 12px rgba(46,58,110,0)}}
@media (prefers-reduced-motion:reduce){#gachi .gk-ring-ic.gk-ringing{animation:none;box-shadow:0 0 0 4px rgba(46,58,110,.25)}}
#gachi .gk-you-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
#gachi .gk-you-h b{font-size:16px;font-family:var(--round);font-weight:800}
#gachi .gk-you-to{font-size:14px;color:var(--warn);font-weight:700}
#gachi .gk-you-tip{font-size:13px}
#gachi .gk-you textarea{font:inherit;font-size:15px;line-height:1.6;width:100%;box-sizing:border-box;border:2px solid var(--line2);border-radius:8px!important;padding:8px 10px;min-height:72px;resize:vertical;color:var(--ink);background:#FFFFFF}
#gachi .gk-you textarea:focus{border-color:var(--ink);outline:none}
#gachi .gk-you textarea[readonly]{background:var(--tile)}
#gachi .gk-you-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
#gachi .gk-you-f .gk-note{margin-right:auto;font-size:13px}
#gachi .gk-mic-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#gachi .gk-mic{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:6px 18px;border:2px solid var(--ink);border-radius:10px!important;background:#FFFFFF;color:var(--ink);font-weight:800;font-family:var(--round);font-size:16px}
#gachi .gk-mic.gk-is-on{background:var(--ink);color:#FFFFFF}
#gachi .gk-mic-st{font-size:14px;color:var(--sub)}
#gachi .gk-heard{min-height:72px;padding:8px 10px;border:2px dashed var(--line2);border-radius:8px!important;font-size:15px;line-height:1.6}
#gachi .gk-heard .gk-fin{color:var(--ink)}
#gachi .gk-heard .gk-int{color:#6B6F86}
/* データを入れる小窓（画面全体を暗くする） */
#gachi .gk-sheet{position:fixed;inset:0;z-index:40;background:rgba(46,58,110,.42);display:grid;place-items:center;padding:16px}
#gachi .gk-sheet-box{background:#FFFFFF;border-radius:12px!important;padding:20px 22px;max-width:520px;display:grid;gap:12px;box-shadow:var(--v1-shadow-lg,0 6px 0 rgba(46,58,110,.14))}

/* ---------- 伝言メモ（右） ---------- */
#gachi .gk-telmemo .gk-form-b{gap:4px;padding:8px 12px 10px}
#gachi .gk-telmemo .gk-form-h{padding:6px 12px}
#gachi .gk-telmemo .gk-form-h h2{white-space:nowrap;font-size:16px}
#gachi .gk-telmemo .gk-form-h h2 small{font-size:13px;color:var(--sub);font-weight:400;font-family:var(--body);margin-left:6px}
#gachi .gk-mcopy{min-height:36px!important;padding:2px 12px!important;font-size:14px!important}
#gachi .gk-mempty{font-size:13px;display:flex;flex-wrap:wrap;gap:4px 10px}
#gachi .gk-lg-empty{padding:24px 10px!important;text-align:center}
#gachi .gk-mrow{display:grid;grid-template-columns:88px 1fr;align-items:center;gap:8px}
#gachi .gk-mrow>label,#gachi .gk-mrow>.gk-lab{font-size:14px;font-weight:700;color:var(--sub2)}
#gachi .gk-mrow-big{align-items:start}
#gachi .gk-mrow2{grid-template-columns:88px minmax(0,1fr) auto 88px}
#gachi .gk-mrow2>label{font-size:14px;font-weight:700;color:var(--sub2)}
#gachi .gk-mrow:has(.gk-cb){align-items:start}
#gachi .gk-mrow:has(.gk-cb)>.gk-lab{padding-top:8px}
#gachi .gk-mrow-big>label{padding-top:10px}
#gachi .gk-telmemo :is(input[type="text"],textarea){padding:6px 10px}
#gachi .gk-cb{display:grid;gap:6px}
#gachi .gk-cbr{display:flex;flex-wrap:wrap;gap:4px}
#gachi .gk-cbr .gk-segl{min-height:36px;padding:2px 10px;font-size:14px}


/* ---------- チャット（右） ---------- */
#gachi .gk-callchat{display:flex;flex-direction:column;min-height:0;gap:6px}
#gachi .gk-callchat-h{font-size:16px;display:flex;align-items:baseline;gap:8px;white-space:nowrap}
#gachi .gk-callchat-h small{font-size:13px;color:var(--sub);font-weight:400;font-family:var(--body)}
#gachi .gk-callchat-b{flex:1;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:6px}
#gachi .gk-callchat .gk-chans{padding:4px 6px;display:flex;flex-wrap:wrap;gap:2px 4px}
#gachi .gk-callchat .gk-chans h3{display:none}
#gachi .gk-callchat .gk-chans ul{display:contents}
#gachi#gachi .gk-callchat .gk-chb{white-space:nowrap;min-height:32px;padding:0 8px;font-size:14px}
#gachi .gk-callchat .gk-chhead{padding:4px 10px}
#gachi .gk-callchat .gk-cmp textarea{min-height:56px;height:64px}
#gachi .gk-callchat .gk-cmp-l small{display:none}
#gachi .gk-callchat .gk-chb small,#gachi .gk-callchat .gk-chb .gk-new{display:none}

/* ---------- 最初の答え方の選択 ---------- */
#gachi .gk-vchoice{display:grid;place-items:center;padding:12px 0 24px}
#gachi .gk-vchoice-box{background:#FFFFFF;border:1px solid var(--line2);border-top:4px solid var(--ink);border-radius:12px!important;padding:24px 28px;max-width:720px;display:grid;gap:12px}
#gachi .gk-vchoice-box .gk-p{font-size:16px;line-height:1.85}
#gachi .gk-vchoice-b{gap:12px}
#gachi .gk-vchoice-b button{min-width:180px;min-height:48px;font-size:16px}
#gachi .gk-vchoice-l{margin:4px 0 0;padding-left:20px;display:grid;gap:4px;font-size:14px;line-height:1.7;color:var(--sub)}

/* ---------- 判定の通話の記録 ---------- */
#gachi .gk-call-log-r{flex:none;overflow:visible;padding:0;margin-bottom:12px}
#gachi .gk-vcnote{font-size:13px;margin-bottom:8px}

@media (max-width:1439px){
  #gachi .gk-work-call{grid-template-columns:minmax(210px,.5fr) minmax(420px,1.25fr) minmax(320px,.85fr)}
  #gachi .gk-mrow{grid-template-columns:76px 1fr}
  #gachi .gk-mrow2{grid-template-columns:76px minmax(0,1fr) auto 76px}
}
@media (max-height:760px){
  #gachi .gk-cnow{padding:8px 12px 10px;gap:6px}
  #gachi .gk-you textarea{min-height:60px}
  #gachi .gk-call-bar{padding:6px 10px}
}

/* 再提出の知らせは、通話の画面の中（呼び出しの所）に出す（1280×720 でも作業の画面をスクロールさせない） */
#gachi[data-k="call"] .gk-again{display:none}
#gachi .gk-cnow-again{grid-column:1/-1;font-size:13px}

#gachi .gk-lg-y .gk-sent-b{padding:0;border:0;background:none;min-height:0;font-size:15px;line-height:1.7}