/* ============================================================
   BlockAiChat 公開側スタイル（常時読込・自己完結・テーマ非依存）
   CSS変数 --bkaic-accent（基調色）/ --bkaic-h（メッセージ表示領域の高さ）はブロックごとに block.ctp から渡される。
   ============================================================ */
.bkaic-root{
  max-width:520px;
  margin:0 auto;
  box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --bkaic-accent:#e21d7a;
  --bkaic-h:380px;
}
.bkaic-root *{ box-sizing:border-box; }

.bkaic-setup-note{
  background:#fff6e5;
  border:1px solid #ecc873;
  color:#7a5300;
  font-size:12.5px;
  font-weight:700;
  line-height:1.7;
  padding:9px 12px;
  border-radius:8px;
  margin:0 0 10px;
}

.bkaic-card{
  border:1px solid #e3e1e6;
  border-radius:16px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 2px 14px rgba(20,10,25,.06);
}

.bkaic-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  background:var(--bkaic-accent);
  color:#fff;
}
.bkaic-head-dot{
  width:9px; height:9px; border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.35);
  flex:0 0 auto;
}
.bkaic-head-title{
  font-size:14px;
  font-weight:800;
  line-height:1.4;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

/* 音声ボタン（サイトのAIチャットで音声が有効なときだけヘッダーに出る） */
.bkaic-mic{
  margin-left:auto;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:4px;
  border:none;
  border-radius:999px;
  padding:5px 11px;
  cursor:pointer;
  background:rgba(255,255,255,.2);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  font-family:inherit;
  line-height:1;
  transition:background .15s ease;
}
.bkaic-mic:hover{ background:rgba(255,255,255,.32); }
.bkaic-mic svg{ display:block; }
.bkaic-mic.is-on{
  background:#fff;
  color:var(--bkaic-accent);
  animation:bkaic-pulse 1.6s infinite;
}
@keyframes bkaic-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,.55); }
  50%{ box-shadow:0 0 0 6px rgba(255,255,255,0); }
}
@media (prefers-reduced-motion: reduce){
  .bkaic-mic.is-on{ animation:none; }
}

.bkaic-msgs{
  height:var(--bkaic-h);
  overflow-y:auto;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:9px;
  background:#faf9fb;
  -webkit-overflow-scrolling:touch;
}

.bkaic-row{ display:flex; }
.bkaic-row-user{ justify-content:flex-end; }
.bkaic-row-bot{ justify-content:flex-start; }
.bkaic-row-err{ justify-content:flex-start; }

.bkaic-bubble{
  max-width:82%;
  padding:9px 13px;
  border-radius:16px;
  font-size:13.5px;
  line-height:1.65;
  word-break:break-word;
  white-space:pre-wrap;
}
.bkaic-row-user .bkaic-bubble{
  background:var(--bkaic-accent);
  color:#fff;
  border-bottom-right-radius:4px;
}
.bkaic-row-bot .bkaic-bubble{
  background:#fff;
  color:#2b2530;
  border:1px solid #e7e3ea;
  border-bottom-left-radius:4px;
}
.bkaic-row-err .bkaic-bubble{
  background:#fdecec;
  color:#9a2b2b;
  border:1px solid #f2c2c2;
  border-bottom-left-radius:4px;
}

.bkaic-typing{ display:inline-flex; align-items:center; gap:4px; padding:2px 2px; }
.bkaic-typing i{
  width:6px; height:6px; border-radius:50%;
  background:#9a8fa3;
  display:inline-block;
  animation:bkaic-bounce 1.1s infinite ease-in-out;
}
.bkaic-typing i:nth-child(2){ animation-delay:.15s; }
.bkaic-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes bkaic-bounce{
  0%, 60%, 100%{ transform:translateY(0); opacity:.5; }
  30%{ transform:translateY(-4px); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .bkaic-typing i{ animation:none; opacity:.8; }
}

.bkaic-form{
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:10px 12px;
  border-top:1px solid #e7e3ea;
  background:#fff;
}
.bkaic-input{
  flex:1 1 auto;
  resize:none;
  min-height:38px;
  max-height:96px;
  padding:9px 12px;
  border:2px solid #e3e1e6;
  border-radius:12px;
  font-size:13.5px;
  line-height:1.5;
  font-family:inherit;
  color:#2b2530;
  background:#faf9fb;
}
.bkaic-input:focus{
  outline:none;
  border-color:var(--bkaic-accent);
  background:#fff;
}
.bkaic-send{
  flex:0 0 auto;
  width:38px; height:38px;
  border:none;
  border-radius:50%;
  background:var(--bkaic-accent);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .12s ease, opacity .12s ease;
}
.bkaic-send:hover{ transform:scale(1.06); }
.bkaic-send:active{ transform:scale(.94); }
.bkaic-send:disabled{ opacity:.55; cursor:default; transform:none; }
.bkaic-send svg{ display:block; }

@media(max-width:480px){
  .bkaic-bubble{ max-width:88%; font-size:13px; }
  .bkaic-head-title{ font-size:13px; }
}