@charset "utf-8";
/* ============================================================
   AInformation「みんなの意見」
   swell_child/assets/css/ainews-voice.css   2026-09-01
   ------------------------------------------------------------
   2026-09-01に藤井さんの指示で作り直した。
   ・記述式（コメント）はやめて、選択式の投票だけにした
   ・SNSのアンケートに近い、親しみやすい見た目にした
     （角丸・押すと動く・白いカードに影・「◯人が回答」）
   色は水色＋グレー＋濃紺の3つだけ。多色とグラデーションは使わない。
   ============================================================ */

.ai-voice{
  --v-a:#1AC2F1;        /* 肯定 */
  --v-a-bg:#BDEBFA;
  --v-n-bg:#DCE4E9;     /* 中立 */
  --v-d-bg:#C3D0DA;     /* 否定 */
  margin:0 0 30px;
  padding:22px 22px 18px;
  background:var(--ai-paper);
  border-radius:18px;
  box-shadow:0 2px 0 var(--ai-line),0 10px 26px rgba(13,27,42,.06);
  font-size:15px;
}
.ai-voice [hidden]{display:none!important;}

/* ---------- 見出し ---------- */
.ai-voice__lb{
  display:flex;align-items:center;gap:6px;margin:0 0 8px;
  font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ai-accent-ink);
}
.ai-voice__lb svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto;}
.ai-voice__q{margin:0 0 15px;font-size:18px;font-weight:900;line-height:1.55;color:var(--ai-ink);}

/* ---------- 選択肢（押すとそのまま結果の帯になる） ---------- */
.ai-voice__opts{display:block;}
.ai-voice__opt{
  position:relative;display:block;width:100%;overflow:hidden;
  border:0;background:var(--ai-surface);border-radius:999px;
  padding:14px 22px;margin-bottom:9px;
  font:inherit;font-size:15.5px;font-weight:700;line-height:1.45;text-align:left;color:var(--ai-ink);
  cursor:pointer;transition:transform .12s,background .15s;
}
.ai-voice__opt:last-child{margin-bottom:0;}
.ai-voice__opt:hover{background:#DFEBF2;transform:translateY(-1px);}
.ai-voice__opt:active{transform:scale(.985);}
.ai-voice__opt:disabled{cursor:default;}

.ai-voice__fill{
  position:absolute;top:0;bottom:0;left:0;width:0;z-index:1;
  background:var(--v-a-bg);
  transition:width .85s cubic-bezier(.22,.72,.3,1);
}
.ai-voice__opt.is-c1 .ai-voice__fill{background:var(--v-n-bg);}
.ai-voice__opt.is-c2 .ai-voice__fill{background:var(--v-d-bg);}
.ai-voice__opt.is-c3 .ai-voice__fill{background:var(--v-a-bg);}
.ai-voice__opt.is-c4 .ai-voice__fill{background:var(--v-d-bg);}

.ai-voice__lbl{position:relative;z-index:2;}
.ai-voice__pct{
  position:absolute;right:22px;top:50%;transform:translateY(-50%);z-index:2;
  font-family:var(--ai-num);font-size:17px;font-weight:700;color:var(--ai-ink);
  opacity:0;transition:opacity .35s .3s;
}
.ai-voice__pct i{font-style:normal;font-size:12px;margin-left:1px;}
/* 票数は検索とAIに読ませるためだけに置く。人には出さない */
.ai-voice__n{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* 結果が見えている状態 */
.ai-voice.is-open .ai-voice__fill{width:calc(var(--p,0) * 1%);}
.ai-voice.is-open .ai-voice__pct{opacity:1;}
.ai-voice.is-open .ai-voice__opt{padding-right:74px;}

/* 投票ずみ */
.ai-voice.is-voted .ai-voice__opt{cursor:default;}
.ai-voice.is-voted .ai-voice__opt:hover{background:var(--ai-surface);transform:none;}
/* 自分が選んだ行の輪郭。塗り（.ai-voice__fill）より上に出さないと隠れる */
.ai-voice.is-voted .ai-voice__opt.is-mine::after{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none;
  border-radius:999px;box-shadow:inset 0 0 0 2px var(--v-a);
}
.ai-voice.is-voted .ai-voice__opt.is-mine .ai-voice__lbl::after{
  content:"あなた";margin-left:9px;padding:2px 8px;border-radius:999px;
  font-size:10px;font-weight:700;color:#fff;background:var(--ai-ink);vertical-align:2px;
}

/* ---------- 足もと ---------- */
.ai-voice__foot{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:15px 0 0;font-size:12.5px;color:var(--ai-muted);
}
.ai-voice__dots{display:flex;flex:0 0 auto;}
.ai-voice__dots i{
  display:block;width:16px;height:16px;border-radius:50%;
  background:#C3D0DA;border:2px solid var(--ai-paper);margin-left:-6px;
}
.ai-voice__dots i:first-child{margin-left:0;background:var(--v-a);}
.ai-voice__dots i:nth-child(2){background:#5C7080;}
.ai-voice__cnt b{font-family:var(--ai-num);font-size:15px;font-weight:700;color:var(--ai-text);}
.ai-voice__peek{
  margin-left:auto;border:0;background:none;padding:4px 2px;
  font:inherit;font-size:12.5px;font-weight:700;color:var(--ai-accent-ink);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.ai-voice__peek:hover{color:var(--ai-ink);}

/* ---------- 知らせ ---------- */
.ai-voice__msg{
  margin:12px 0 0;padding:11px 16px;border-radius:12px;
  background:var(--ai-chip);font-size:13px;font-weight:700;color:var(--ai-ink);
}
.ai-voice__msg.is-err{background:#FDEAED;color:#A31B33;}
.ai-voice__msg.is-ok{background:#E4F7FD;color:#0A5F7F;}

/* ---------- スマホ ---------- */
@media (max-width:600px){
  .ai-voice{padding:18px 16px 15px;border-radius:16px;}
  .ai-voice__q{font-size:17px;}
  .ai-voice__opt{padding:13px 18px;font-size:15.5px;}
  .ai-voice.is-open .ai-voice__opt{padding-right:66px;}
  .ai-voice__pct{right:18px;font-size:16px;}
  .ai-voice__peek{margin-left:0;width:100%;text-align:left;}
}

@media (prefers-reduced-motion:reduce){
  .ai-voice *{transition:none!important;animation:none!important;}
}