/* サポート窓口（アプリの「困った時は」と、公開のページ /support・/s/<鍵>）。2026-11-15
   読み込みの順は proto.css → parts.css → shell.css → desk.css。色は proto.css の :root の変数だけを使う（白い地の案: 地は黒・中身の札は白・赤は押すボタンと新着の印だけ）。
   proto.css / parts.css / shell.css はデザインの担当の持ち物なので、足りない分だけをここに書く。 */

/* 白い札（proto.css の「白い札」の決まりと同じ中身）: ショウの返事・設定の行・書く欄 */
.dk.shou,.drow,.f textarea,.sp-card{
  color-scheme:light;
  --surface:var(--w-surface); --raise:var(--w-raise); --sheet:var(--w-surface); --app:var(--w-surface);
  --line:var(--w-line); --line-2:var(--w-line-2);
  --ink:var(--w-ink); --sub:var(--w-sub); --dim:var(--w-dim); --on-ink:var(--w-surface);
  --accent-ink:var(--w-accent-ink); --accent-bg:var(--w-accent-bg);
  color:var(--ink);
}

/* 新着の赤い点（知らせの「新着」の点と同じ大きさと色） */
.ndot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.tab-ic{position:relative;display:inline-flex}
.tab-ic .ndot{position:absolute;top:-1px;right:-5px;box-shadow:0 0 0 2px var(--app)}

/* 設定の「そのほか」の行 */
.drow{width:100%;display:flex;align-items:center;gap:12px;min-height:56px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:0 14px;text-align:left;font-size:15px;font-weight:700}
.drow>span{flex:1;min-width:0}
.drow .ic{color:var(--sub)}
.drow .ic:first-child{color:var(--ink)}
.drow+.f,.drow+.btn{margin-top:10px!important}

/* ホームの札: サポートからお返事 */
.desk-banner{width:100%;align-items:center;text-align:left}
.desk-banner>div{flex:1;min-width:0}
.desk-banner .ic:last-child{color:var(--sub)}

/* 書く欄（入力と同じ形の複数行） */
.f textarea{display:block;width:100%;min-height:124px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--ink);font:500 16px/1.6 var(--f-ja);padding:11px 12px;resize:vertical;min-width:0}
.f textarea::placeholder{color:var(--dim)}
textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* やりとり: 自分 = 右寄せの黒の札 / ショウ（AI）= 左寄せの白い札 */
.desk{margin-top:6px}
.desk-lead{margin:14px 2px 0;font-size:15px;line-height:1.7;color:var(--ink);text-wrap:pretty}
.dk-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.dk{max-width:min(86%,640px);display:flex;flex-direction:column;gap:4px;border-radius:18px;padding:11px 14px 9px}
.dk.me{align-self:flex-end;background:var(--raise);border:1px solid var(--line);border-bottom-right-radius:6px}
.dk.shou{align-self:flex-start;background:var(--surface);border-bottom-left-radius:6px}
.dk-who{font-size:12px;font-weight:700;color:var(--sub);letter-spacing:.04em}
.dk-b{margin:0;font-size:15px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal}
.dk-t{font:600 12.5px/1.2 var(--f-num);color:var(--sub);align-self:flex-end}
.dk-note{margin:10px 2px 0;font-size:13px;color:var(--sub);text-align:right}
.dk-end{display:block;height:1px}
.desk-form .f:first-child{margin-top:16px}
.desk-form .btn{margin-top:12px}

/* 入口の下の小さなリンク */
.gate-help{margin-top:8px}

/* PC・横長のタブレット: 左にやりとり・右に書く欄（書く欄は動かさずに見えたまま） */
@media (min-width:900px){
  .desk{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(340px,1fr);gap:0 clamp(28px,3vw,56px);align-items:start}
  .desk-form{position:sticky;top:0}
  .desk-form .f:first-child{margin-top:14px}
  .f textarea{min-height:220px}
  .dk{max-width:min(82%,720px)}
  .tab-ic .ndot{right:-6px}
}

/* ---------- 公開のページ（/support・/s/<鍵>）: アプリの入口と同じ黒の地 ---------- */
.sp-page{min-height:100vh;min-height:100dvh;background:var(--app);padding:max(24px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 48px max(16px,env(safe-area-inset-left,0px))}
.sp-in{width:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column}
.sp-head{text-align:center;margin:8px 0 6px}
.sp-head .wm{font-size:44px}
.sp-ttl{text-align:center;margin:18px 0 4px}
.sp-lead{margin:4px 0 0;text-align:center;font-size:15px;color:var(--sub)}
.sp-form .f:first-child{margin-top:20px}
.sp-form .btn{margin-top:16px}
.sp-msg:empty{margin:0}
.sp-open{margin-top:14px;text-align:center}
.sp-none{margin-top:24px;text-align:center}
/* 人には見えない欄（機械だけが埋める）。画面の外へ出す */
@media (min-width:600px) and (max-width:899px){ .sp-in{max-width:720px} }
.sp-hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}
@media (min-width:900px){
  .sp-page{padding:48px clamp(28px,4vw,80px) 64px}
  .sp-in{max-width:none}
  .sp-head{text-align:left;margin:0}
  .sp-head .wm{font-size:40px}
  /* 送る前: 左に見出しと一言・右に書く欄 / やりとり: 左にやりとり・右に書く欄 */
  .sp-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(360px,1fr);gap:0 clamp(32px,4vw,80px);align-items:start;margin-top:28px}
  .sp-ttl{text-align:left;margin:0 0 6px;font-size:34px}
  .sp-lead{text-align:left;font-size:17px}
  .sp-grid .sp-form{position:sticky;top:24px}
  .sp-grid .sp-form .f:first-child{margin-top:0}
  .sp-open{margin:18px 0 0;text-align:left;padding-left:2px}
  /* 送る前・見つからない時: 入口の画面と同じく、真ん中に 1 列（書く物が 2 つだけなので、横に広げると左が空くため） */
  .sp-solo .sp-page{display:grid;place-items:center;padding-top:40px}
  .sp-solo .sp-in{max-width:560px}
  .sp-solo .sp-head{text-align:center}
  .sp-solo .sp-head .wm{font-size:54px}
  .sp-solo .sp-grid{display:block;margin-top:0}
  .sp-solo .sp-ttl,.sp-solo .sp-lead{text-align:center}
  .sp-solo .sp-ttl{margin:20px 0 4px;font-size:30px}
  .sp-solo .sp-form .f:first-child{margin-top:24px}
  .sp-solo .sp-open{text-align:center;padding-left:0}
  .f textarea.sp-tall{min-height:200px}
}

/* ---------- AI サービスに送る同意（はじめて送る前だけ・「送る」のすぐ上）2026-11-15 ---------- */
.ai-ok{display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding:0 2px}
.ai-ok input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--accent);cursor:pointer}
.ai-ok p{margin:0;min-width:0;font-size:14px;line-height:1.6;color:var(--ink);text-wrap:pretty}
.ai-ok label{cursor:pointer}
.ai-more{font-size:12.5px;color:var(--sub);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.desk-form .ai-ok+.btn,.sp-form .ai-ok+.btn{margin-top:12px}
.link.ai-off{margin-top:6px}
.sp-form .link.ai-off{margin:8px auto 0}

/* 小さなリンクを横に並べる（設定の「退会する」・入口の「困った時は」・公開のページの下） */
.links-row{display:flex;justify-content:center;flex-wrap:wrap;gap:0 18px}
.links-row .link{margin:0}
.gate .links-row{margin-top:4px}
.sp-links{margin-top:14px}
.sp-links .sp-open{margin:0}
.sp-none .sp-pp{margin-top:0}
@media (min-width:900px){
  .sp-grid .sp-links{justify-content:flex-start;margin-top:18px}
  .sp-grid .sp-links .sp-open{margin:0;padding-left:8px}
  .sp-solo .sp-links{justify-content:center}
}