/* 手紙鳥のポスト。クラスはすべて elb- 接頭辞。フォントはテーマ（JINR）を継承する */
.elb-root{
  --elb-surface:#ffffff; --elb-fg:#1f2a33; --elb-muted:#5d6a74; --elb-line:#d8dee4;
  --elb-accent:#d2453a; --elb-accent-ink:#ffffff; --elb-teal:#2f7d78;
  --elb-sky1:#bfe0f0; --elb-sky2:#f7efe1; --elb-bubble:#ffffff; --elb-bubble-ink:#1f2a33;
  display:grid;gap:14px;max-width:880px;margin:2em auto;font-family:inherit;color:var(--elb-fg);line-height:1.75;
  position:relative;
}
.elb-root *,.elb-root *::before,.elb-root *::after{box-sizing:border-box}

/* ステージ：3D が読み込まれるまでは静止画を出す */
.elb-root .elb-stage{position:relative;width:100%;aspect-ratio:16/7;border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,var(--elb-sky1) 0%,var(--elb-sky2) 78%);border:1px solid var(--elb-line);touch-action:manipulation}
@media (max-width:560px){.elb-root .elb-stage{aspect-ratio:4/3}}
.elb-root .elb-poster-pic,.elb-root .elb-poster{position:absolute;inset:0;width:100%;height:100%;display:block;margin:0}
.elb-root .elb-poster{object-fit:cover;max-width:none}
.elb-root .elb-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0}
.elb-root .elb-canvas[hidden]{display:none}
.elb-root .elb-stage.is-3d .elb-poster-pic{display:none}
.elb-root .elb-stage.is-tappable{cursor:pointer}
.elb-root .elb-stage.is-3d.is-tappable{cursor:default}

/* 吹き出し：3D 中は JS が位置を決める。静止画のあいだは止まり木の上に固定 */
.elb-root .elb-bubble{position:absolute;left:0;top:0;pointer-events:none;background:var(--elb-bubble);color:var(--elb-bubble-ink);
  font-weight:700;font-size:13px;line-height:1.4;padding:6px 11px;border-radius:12px;white-space:nowrap;
  box-shadow:0 4px 14px rgba(20,30,40,.14);transform:translate(-50%,-100%);transition:opacity .25s;z-index:2}
.elb-root .elb-bubble::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:var(--elb-bubble)}
.elb-root .elb-stage:not(.is-3d) .elb-bubble{left:var(--elb-bx,26%);top:var(--elb-by,36%)}
.elb-root .elb-chip{position:absolute;font-size:12px;background:var(--elb-surface);color:var(--elb-fg);border-radius:999px;padding:3px 11px;opacity:.92;z-index:2}
.elb-root .elb-hint{left:12px;bottom:12px}
.elb-root .elb-count{right:12px;top:12px;font-variant-numeric:tabular-nums}

/* 入力欄 */
.elb-root .elb-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:0}
.elb-root .elb-field{flex:1 1 300px;min-width:0;display:grid;gap:4px}
.elb-root .elb-field label{font-size:13px;color:var(--elb-muted);display:grid;gap:4px;margin:0}
.elb-root .elb-field-row{position:relative;display:block}
.elb-root .elb-msg{width:100%;font:inherit;font-size:16px;color:var(--elb-fg);background:var(--elb-surface);
  border:1px solid var(--elb-line);border-radius:12px;padding:11px 56px 11px 14px;margin:0;height:auto;box-shadow:none}
.elb-root .elb-msg:focus-visible{outline:2px solid var(--elb-teal);outline-offset:1px}
.elb-root .elb-len{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--elb-muted);font-variant-numeric:tabular-nums}
.elb-root .elb-note{font-size:12px;color:var(--elb-muted);margin:0}
.elb-root .elb-send{font:inherit;font-weight:700;font-size:16px;color:var(--elb-accent-ink);background:var(--elb-accent);border:0;border-radius:12px;
  padding:12px 22px;cursor:pointer;transition:transform .15s,opacity .2s;width:auto;margin:0}
.elb-root .elb-send:hover{transform:translateY(-1px)}
.elb-root .elb-send:focus-visible{outline:2px solid var(--elb-fg);outline-offset:2px}
.elb-root .elb-send:disabled{opacity:.45;cursor:default;transform:none}

/* おとり欄：画面には出さない（display:none だと見抜くボットがいるので画面外へ） */
.elb-root .elb-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* トースト */
.elb-root .elb-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--elb-fg);color:#fff;font-weight:700;padding:10px 18px;border-radius:999px;transition:.3s;max-width:calc(100% - 32px);text-align:center;z-index:9999}
.elb-root .elb-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* 3D なしの端末：投函すると旗が立つ（静止画を差し替えて出す） */
.elb-root .elb-stage.is-done .elb-poster{animation:elb-pop .5s ease-out}
@keyframes elb-pop{from{filter:brightness(1.12)}}
@media (prefers-reduced-motion:reduce){.elb-root .elb-stage.is-done .elb-poster{animation:none}.elb-root .elb-toast{transition:none}}