:root{
  --line-green:#06C755;
  --wall:#8CABD8;
  --bubble-in:#FFFFFF;
  --bubble-out:#06C755;
  --ink:#111317;
  --sub:#6b7280;
  --hdr:#FFFFFF;
  --radius:18px;
  --phone-w:430px;
  --font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:#1b2330;
  background-image:radial-gradient(1200px 600px at 50% -10%,#2f4a6e 0%,#131a24 70%);
  overscroll-behavior:none;
}

/* ---------- 端末フレーム ---------- */
.stage{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:0}
.phone{
  width:100%;max-width:var(--phone-w);height:100dvh;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  background:var(--wall);
}
@media (min-width:520px) and (min-height:720px){
  .stage{padding:24px}
  .phone{height:min(880px,calc(100dvh - 48px));border-radius:38px;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 10px #0d1118,0 0 0 11px #2b3340}
}

/* ---------- ステータスバー ---------- */
.statusbar{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:7px 20px 3px;background:var(--hdr);color:#000;
  font-size:13px;font-weight:700;letter-spacing:.2px;
}
.sb-notch{flex:1}
.sb-right{display:flex;align-items:center;gap:5px}
.sb-ic{height:11px;width:auto;fill:currentColor}
.sb-ic:last-child{height:13px}

/* ---------- ヘッダー ---------- */
.chat-header{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:4px 10px 8px;background:var(--hdr);
  border-bottom:1px solid rgba(0,0,0,.07);
}
.hdr-btn{
  flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;
  background:none;border:0;padding:0;color:#2b2f36;cursor:pointer;border-radius:50%;
}
.hdr-btn:active{background:rgba(0,0,0,.06)}
.hdr-btn svg{width:22px;height:22px}
.hdr-name{flex:1;min-width:0;margin-left:2px}
.hdr-name strong{display:block;font-size:15px;font-weight:700;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-count{font-style:normal;font-weight:500;color:#9aa3ae;margin-left:6px;font-size:13px}

/* ---------- HUD ---------- */
.hud{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:7px 12px;background:rgba(14,22,33,.86);color:#fff;
  font-size:11px;backdrop-filter:blur(6px);
}
.hud-item{display:flex;align-items:center;gap:5px;min-width:0}
.hud-item:not(.sleep){flex:1}
.hud-lbl{opacity:.75;white-space:nowrap;letter-spacing:.3px}
.hud-bar{flex:1;height:5px;min-width:30px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}
.hud-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#3ddc84,#06C755);transition:width .45s cubic-bezier(.2,.7,.3,1)}
.hud-bar.trust i{background:linear-gradient(90deg,#8ec9ff,#3b9bff)}
.hud-val{font-variant-numeric:tabular-nums;font-weight:700;min-width:22px;text-align:right}
.hud-val.big{min-width:auto;color:#ffd666}
.hud.danger .hud-bar i{background:linear-gradient(90deg,#ff8a6b,#ff3b30)}
.hud.danger{animation:pulseRed 1.1s ease-in-out infinite}
@keyframes pulseRed{50%{background:rgba(74,16,20,.9)}}

/* ---------- チャット ---------- */
.chat{
  flex:1 1 auto;overflow-y:auto;overflow-x:hidden;
  padding:12px 12px 14px;
  display:flex;flex-direction:column;gap:3px;
  -webkit-overflow-scrolling:touch;
}
.chat::-webkit-scrollbar{width:0}

.daypill{align-self:center;margin:8px 0 12px;padding:3px 13px;border-radius:99px;
  background:rgba(0,0,0,.18);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.4px}

.sys{align-self:center;margin:8px 0;padding:5px 14px;border-radius:99px;max-width:88%;
  background:rgba(0,0,0,.2);color:#fff;font-size:11.5px;text-align:center;line-height:1.5}

.row{display:flex;align-items:flex-end;gap:7px;width:100%;animation:pop .22s cubic-bezier(.2,.8,.3,1)}
.row+.row{margin-top:3px}
.row.in{justify-content:flex-start}
.row.out{flex-direction:row-reverse;justify-content:flex-start}
.row.grouped{margin-top:2px}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}}

.av{width:38px;height:38px;border-radius:50%;flex:0 0 38px;overflow:hidden;align-self:flex-start;
  object-fit:cover;object-position:30% 44%;background:#cfd8e3}
.av.spacer{visibility:hidden}

.stack{display:flex;flex-direction:column;gap:2px;min-width:0;align-items:flex-start;
  max-width:calc(100% - 84px)}
.row.out .stack{align-items:flex-end;max-width:calc(100% - 46px)}
.sender{font-size:11.5px;color:rgba(255,255,255,.95);margin:2px 0 1px 2px;text-shadow:0 1px 1px rgba(0,0,0,.18)}

.bub{
  position:relative;
  padding:9px 13px;border-radius:var(--radius);
  font-size:15px;line-height:1.55;white-space:pre-wrap;overflow-wrap:break-word;
  box-shadow:0 1px 1px rgba(0,0,0,.06);
}
.in .bub{background:var(--bubble-in);color:var(--ink);border-top-left-radius:5px}
.in .bub.cont{border-top-left-radius:var(--radius)}
.out .bub{background:var(--bubble-out);color:#111;border-top-right-radius:5px}
.out .bub.cont{border-top-right-radius:var(--radius)}
.in .bub::before{content:"";position:absolute;left:-5px;top:0;width:10px;height:14px;
  background:var(--bubble-in);clip-path:path("M10 0 L10 14 Q0 10 1 0 Z")}
.in .bub.cont::before{display:none}
.bub b{font-weight:700}

/* リンクとプレビューカード */
.url{display:block;color:#1a73c7;text-decoration:underline;word-break:break-all}
.card{margin:8px -4px -2px;border:1px solid #e2e6ec;border-radius:9px;overflow:hidden;background:#fff}
.card-t{padding:7px 9px 0;font-size:12.5px;font-weight:700;line-height:1.4}
.card-d{padding:2px 9px 0;font-size:11.5px;line-height:1.4;color:#737d8a}
.card-u{padding:4px 9px 7px;font-size:10.5px;color:#9aa3ae}

.meta{display:flex;flex-direction:column;justify-content:flex-end;gap:1px;
  font-size:10.5px;color:rgba(255,255,255,.92);flex:0 0 auto;padding-bottom:2px;
  text-shadow:0 1px 1px rgba(0,0,0,.2)}
.out .meta{align-items:flex-end;text-align:right}
.meta .read{font-weight:700}

.sticker{font-size:62px;line-height:1.1;padding:2px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.2));
  animation:stampIn .32s cubic-bezier(.2,1.5,.4,1)}
@keyframes stampIn{from{opacity:0;transform:scale(.5) rotate(-12deg)}}

.photo{width:190px;max-width:62vw;border-radius:14px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.2);
  background:#dfe8f3;display:block}
.photo .ph-body{aspect-ratio:4/3;display:grid;place-items:center;font-size:44px;
  background:linear-gradient(140deg,#cfe0f2,#aac4de)}
.photo .ph-cap{padding:6px 9px;font-size:11.5px;color:#39465a;background:#fff;line-height:1.4}

/* ---------- 返信候補 ---------- */
.quick{
  flex:0 0 auto;display:flex;flex-direction:column;gap:7px;
  max-height:46%;overflow-y:auto;
  padding:10px 12px 4px;background:linear-gradient(180deg,rgba(140,171,216,0),rgba(236,241,246,.96) 34%);
  animation:riseUp .26s ease-out;
}
@keyframes riseUp{from{opacity:0;transform:translateY(10px)}}
.quick-hint{font-size:10.5px;color:#5c6878;letter-spacing:.4px;margin:0 2px;font-weight:700}
.qbtn{
  text-align:left;padding:10px 14px;border-radius:17px;border:1.5px solid var(--line-green);
  background:#fff;color:#0d1b12;font-size:14px;font-family:var(--font);line-height:1.5;
  cursor:pointer;transition:transform .12s,background .12s;
}
.qbtn:hover{background:#f1fff6}
.qbtn:active{transform:scale(.985);background:#e3fbec}

/* ---------- 入力欄 ---------- */
.composer{
  flex:0 0 auto;display:flex;align-items:flex-end;gap:7px;
  padding:7px 10px calc(9px + env(safe-area-inset-bottom));
  background:#f7f8fa;border-top:1px solid rgba(0,0,0,.06);
}
.cp-btn,.cp-send{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;
  border:0;background:none;padding:0;cursor:pointer;color:#57606e;border-radius:50%}
.cp-btn svg{width:23px;height:23px}
.cp-send{background:var(--line-green);color:#fff;transition:opacity .15s,transform .12s}
.cp-send svg{width:18px;height:18px;margin-left:-1px}
.cp-send:active{transform:scale(.92)}
.cp-send:disabled{background:#cfd5dd;cursor:default}
.cp-field{flex:1;display:flex;align-items:center;background:#fff;border-radius:19px;
  border:1px solid rgba(0,0,0,.08);padding:0 4px 0 13px;min-width:0}
.cp-field input{flex:1;min-width:0;border:0;outline:0;background:none;padding:9px 0;
  font-size:15px;font-family:var(--font);color:var(--ink)}
.cp-emoji{width:30px;height:30px;display:grid;place-items:center;border:0;background:none;
  color:#8a929d;cursor:pointer;padding:0}
.cp-emoji svg{width:21px;height:21px}

/* ---------- 着信 ---------- */
.call{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:linear-gradient(170deg,#1f2a36,#0c1218);animation:fade .3s}
.call-inner{text-align:center;color:#fff;padding:28px;max-width:360px}
.call-kind{font-size:12px;letter-spacing:2px;opacity:.65;margin:0 0 26px}
.call-av{width:118px;height:118px;border-radius:50%;overflow:hidden;object-fit:cover;object-position:30% 44%;
  box-shadow:0 0 0 5px rgba(255,255,255,.12);animation:ring 1.4s ease-in-out infinite}
@keyframes ring{50%{box-shadow:0 0 0 20px rgba(6,199,85,.16)}}
.call-inner h2{margin:18px 0 4px;font-size:23px;font-weight:700}
.call-state{margin:0;font-size:14px;opacity:.75;min-height:20px}
.call-acts{display:flex;gap:46px;justify-content:center;margin:40px 0 18px}
.call-btn{display:flex;flex-direction:column;align-items:center;gap:9px;background:none;
  border:0;color:#fff;font-size:12.5px;font-family:var(--font);cursor:pointer}
.call-btn span{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;font-size:26px}
.call-btn.decline span{background:#ff3b30}
.call-btn.accept span{background:var(--line-green)}
.call-btn:active span{transform:scale(.93)}
.call-note{font-size:11px;opacity:.45;margin:0}

/* ---------- プッシュ通知 ---------- */
.push{
  position:absolute;z-index:45;left:8px;right:8px;top:8px;
  display:block;width:auto;margin:0;padding:12px 14px 13px;text-align:left;
  border:1px solid rgba(0,0,0,.08);border-radius:18px;cursor:default;color:#111;
  background:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.32);
  font-family:var(--font);animation:pushIn .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes pushIn{from{opacity:0;transform:translateY(-18px)}}
.push-top{display:flex;align-items:center;gap:6px;color:#5c6570;font-size:12px;font-weight:650}
.push-ic{width:15px;height:15px;color:#3478f6}
.push.is-line .push-ic-mail{display:none}
.push:not(.is-line) .push-ic-line{display:none}
.push-ic-line{color:#06C755}
.push-time{margin-left:auto;font-weight:500}
.push-from{display:block;margin-top:4px;font-size:14px;font-weight:700;line-height:1.3}
.push-body{display:block;margin-top:2px;font-size:13px;line-height:1.45;font-weight:400;white-space:pre-wrap}

/* ---------- シート（スタート/結果） ---------- */
.sheet{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:18px;
  background:rgba(8,12,18,.72);backdrop-filter:blur(7px);overflow-y:auto;animation:fade .25s}
@keyframes fade{from{opacity:0}}
.sheet-card{width:100%;max-width:410px;background:#fff;border-radius:24px;padding:28px 24px 22px;
  text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.45);animation:popCard .32s cubic-bezier(.2,.9,.3,1)}
@keyframes popCard{from{opacity:0;transform:translateY(18px) scale(.97)}}
.title-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1px;
  color:#06793a;background:#dff7e8;border-radius:99px;padding:5px 13px}
.sheet-card h1{margin:14px 0 16px;font-size:30px;line-height:1.26;letter-spacing:-.5px}
.lead{margin:0 0 18px;font-size:13.5px;line-height:1.95;color:#39414d;text-align:left;
  background:#f4f6f9;border-radius:14px;padding:14px 16px}
.lead b{color:#0d1117}
.rules{margin:0 0 22px;padding:0;list-style:none;text-align:left;font-size:12.5px;color:#4a5361}
.rules li{position:relative;padding:5px 0 5px 20px;line-height:1.6}
.rules li::before{content:"";position:absolute;left:4px;top:12px;width:6px;height:6px;
  border-radius:50%;background:var(--line-green)}
.primary{width:100%;padding:15px;border:0;border-radius:15px;background:var(--line-green);
  color:#fff;font-size:16px;font-weight:700;font-family:var(--font);cursor:pointer;
  box-shadow:0 6px 16px rgba(6,199,85,.33)}
.primary:active{transform:translateY(1px)}
.ghost{width:100%;padding:12px;border:1.5px solid #dde2e9;border-radius:13px;background:#fff;
  color:#3a4350;font-size:13.5px;font-weight:700;font-family:var(--font);cursor:pointer}
.ghost:active{background:#f2f5f8}
.disclaimer{margin:16px 0 0;font-size:10.5px;color:#9aa3ae;line-height:1.7}

.result .res-badge{width:76px;height:76px;margin:0 auto 12px;border-radius:50%;display:grid;
  place-items:center;font-size:36px;font-weight:800;color:#fff;
  background:linear-gradient(145deg,#06C755,#039b43);box-shadow:0 8px 20px rgba(6,199,85,.35)}
.result h2{margin:0 0 6px;font-size:23px;line-height:1.4}
.res-sub{margin:0 0 20px;font-size:13px;line-height:1.8;color:#515b68;text-align:left;
  background:#f4f6f9;border-radius:14px;padding:13px 15px}
.res-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.res-stats div{background:#f4f6f9;border-radius:12px;padding:9px 4px}
.res-stats span{display:block;font-size:10.5px;color:#7b8694;margin-bottom:2px}
.res-stats b{font-size:18px;font-variant-numeric:tabular-nums}
.res-type{margin:0 0 18px;font-size:13px;color:#434c59}
.res-type b{color:#06793a}
.res-acts{display:flex;flex-direction:column;gap:8px}

.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:90;
  background:rgba(12,17,24,.94);color:#fff;font-size:13px;padding:11px 20px;border-radius:99px;
  animation:pop .22s;box-shadow:0 8px 22px rgba(0,0,0,.35)}

.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}
  40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}