/**
 * QPID AI Support（alpha.13：Canva風チャットUI）
 * public/css/qas-support.css
 * PC：右下フローティング 400×最大660px。スマホ：ほぼ全画面モーダル。
 */

#qas-sup-root { position: fixed; right: 18px; bottom: 18px; z-index: 99990; font-family: -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; }

/* ── FAB：ピル型＋通知ドット＋ふわっと浮くアニメ ── */
.qas-sup-fab { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 28px;
	background: linear-gradient(135deg, #2b6cb0, #3182ce); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
	box-shadow: 0 6px 20px rgba(43,108,176,.45); animation: qas-sup-float 3s ease-in-out infinite; }
.qas-sup-fab:hover { filter: brightness(1.08); }
.qas-sup-fab-ico { font-size: 18px; }
.qas-sup-dot { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: #f6ad55; border: 2px solid #fff;
	animation: qas-sup-pulse 1.6s ease-out infinite; }
.qas-sup-fab-open .qas-sup-dot { display: none; }
@keyframes qas-sup-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes qas-sup-pulse { 0% { box-shadow: 0 0 0 0 rgba(246,173,85,.7); } 70% { box-shadow: 0 0 0 10px rgba(246,173,85,0); } 100% { box-shadow: 0 0 0 0 rgba(246,173,85,0); } }

/* ── パネル ── */
.qas-sup-panel { position: fixed; right: 18px; bottom: 84px; width: 400px; max-width: calc(100vw - 24px);
	height: 660px; max-height: min(82vh, 700px); display: flex; flex-direction: column;
	background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 44px rgba(0,0,0,.28); }

/* ヘッダー */
.qas-sup-hd { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: linear-gradient(135deg, #2b6cb0, #3182ce); color: #fff; }
.qas-sup-title { flex: 1; font-size: 15px; letter-spacing: .02em; }
.qas-sup-title b { font-weight: 800; }
.qas-sup-lang { border: 0; border-radius: 8px; padding: 5px 8px; font-size: 13px; background: rgba(255,255,255,.92); color: #234; max-width: 110px; }
.qas-sup-x { border: 0; border-radius: 50%; width: 36px; height: 36px; background: rgba(255,255,255,.22); color: #fff;
	font-size: 22px; line-height: 1; cursor: pointer; padding: 0; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.qas-sup-x:hover { background: rgba(255,255,255,.35); }

/* アバター：小さく（回答エリアを圧迫しない）。 */
.qas-sup-avatar { display: flex; justify-content: center; align-items: flex-start; background: linear-gradient(#eaf2fc, #fff); overflow: hidden; }
.qas-av { position: relative; }
.qas-av-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .05s; }
.qas-av-base { position: relative; }
.qas-av.qas-av-speaking { animation: qas-av-bob 1.2s ease-in-out infinite; }
@keyframes qas-av-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* 会話ログ：伸縮して大きく使う。 */
.qas-sup-log { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; background: #f7f9fc; }
.qas-sup-msg { display: flex; }
.qas-sup-ai { justify-content: flex-start; }
.qas-sup-user { justify-content: flex-end; }
.qas-sup-bubble { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.65; white-space: normal; word-break: break-word; }
.qas-sup-ai .qas-sup-bubble { background: #fff; border: 1px solid #e2e8f0; border-bottom-left-radius: 4px; color: #1a202c; }
.qas-sup-user .qas-sup-bubble { background: #2b6cb0; color: #fff; border-bottom-right-radius: 4px; }
.qas-sup-link { color: #2b6cb0; font-weight: 700; text-decoration: none; }
.qas-sup-user .qas-sup-link { color: #fff; text-decoration: underline; }

/* 回答内のアクションボタン（登録・ログイン）。 */
.qas-sup-actions { gap: 8px; flex-wrap: wrap; }
.qas-sup-act { display: inline-block; padding: 9px 14px; border-radius: 20px; font-size: 13.5px; font-weight: 700; text-decoration: none;
	background: #fff; border: 1.5px solid #2b6cb0; color: #2b6cb0 !important; }
.qas-sup-act-primary { background: #2b6cb0; color: #fff !important; border-color: #2b6cb0; }
.qas-sup-act:hover { filter: brightness(1.06); }

/* クイックボタン：折り返し表示（パネル幅に収める・多い場合は縦スクロール）。 */
.qas-sup-quick { display: flex; flex-wrap: wrap; gap: 6px; overflow-x: hidden; overflow-y: auto; max-height: 108px; padding: 8px 10px; background: #fff; border-top: 1px solid #edf2f7; scrollbar-width: thin; }
.qas-sup-qbtn { flex: 0 0 auto; border: 1px solid #cbd5e0; background: #f7fafc; color: #234 !important; border-radius: 16px; padding: 7px 12px;
	font-size: 12.5px; cursor: pointer; white-space: nowrap; text-decoration: none; }
.qas-sup-qbtn:hover { background: #ebf4ff; border-color: #90cdf4; }

/* 入力欄：下部固定・大きめ。 */
.qas-sup-in { display: flex; gap: 8px; padding: 10px; background: #fff; border-top: 1px solid #e2e8f0; }
.qas-sup-in input { flex: 1; border: 1.5px solid #cbd5e0; border-radius: 22px; padding: 11px 16px; font-size: 15px; outline: none; min-width: 0; }
.qas-sup-in input:focus { border-color: #3182ce; box-shadow: 0 0 0 3px rgba(49,130,206,.15); }
.qas-sup-send { border: 0; border-radius: 50%; width: 44px; height: 44px; background: #2b6cb0; color: #fff; font-size: 17px; cursor: pointer; flex: 0 0 auto; }
.qas-sup-send:hover { background: #2c5282; }

/* 左配置オプション */
.qas-sup-left .qas-sup-fab { }
.qas-sup-left { right: auto; left: 18px; }
.qas-sup-left .qas-sup-panel { right: auto; left: 18px; }

/* ── スマホ：全画面にせず、吹き出し程度の小さなカード（画面を隠さない） ── */
@media (max-width: 640px) {
	.qas-sup-panel { position: fixed; inset: auto; left: 10px; right: 10px; bottom: 76px; top: auto;
		width: auto; max-width: none; height: auto; max-height: min(62vh, 460px); border-radius: 16px; }
	.qas-sup-hd { padding: 9px 10px; }
	.qas-sup-title { font-size: 13px; }
	/* アバターはスマホでは小さく（会話を隠さない） */
	.qas-sup-avatar { max-height: 92px; }
	.qas-sup-avatar img { max-height: 92px; width: auto; }
	.qas-sup-log { padding: 10px; gap: 8px; }
	.qas-sup-bubble { font-size: 13.5px; padding: 8px 11px; line-height: 1.55; }
	.qas-sup-quick { max-height: 76px; padding: 6px 8px; }
	.qas-sup-quick button { font-size: 12px; padding: 5px 9px; }
	.qas-sup-in { padding: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
	.qas-sup-in input { padding: 9px 13px; font-size: 14px; }
	.qas-sup-send { width: 38px; height: 38px; font-size: 15px; }
	/* スマホ：閉じるボタンを大きく・白丸ではっきり見せる（44pxタップ領域）。 */
	.qas-sup-x { width: 34px; height: 34px; font-size: 22px; background: #fff; color: #2b6cb0; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
	.qas-sup-x:hover { background: #fff; }
	.qas-sup-in { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
	.qas-sup-fab-txt { font-size: 14px; }
}

/* 画面が低い端末：さらに控えめに */
@media (max-width: 640px) and (max-height: 700px) {
	.qas-sup-panel { max-height: 56vh; bottom: 70px; }
	.qas-sup-avatar { max-height: 72px; }
	.qas-sup-avatar img { max-height: 72px; }
}

/* ── alpha.64：一言バブル（自動全開のかわり）── */
.qas-sup-peek{
  position:absolute; right:0; bottom:64px; z-index:2;
  display:flex; align-items:center; gap:8px;
  max-width:230px; padding:10px 12px;
  background:#fff; color:#22314d; font-size:13.5px; line-height:1.4;
  border:1px solid #dbe3ef; border-radius:14px 14px 4px 14px;
  box-shadow:0 6px 20px rgba(20,40,80,.16);
  cursor:pointer; animation:qas-sup-peek-in .28s ease-out both;
}
.qas-sup-left .qas-sup-peek{ right:auto; left:0; border-radius:14px 14px 14px 4px; }
.qas-sup-peek-txt{ flex:1 }
.qas-sup-peek-x{
  flex:none; width:20px; height:20px; padding:0; line-height:18px;
  border:0; border-radius:50%; background:#eef2f8; color:#7385a3;
  font-size:14px; cursor:pointer;
}
.qas-sup-peek-x:hover{ background:#e2e8f2; color:#48597a }
@keyframes qas-sup-peek-in{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* FABをちょこっと揺らす（2回で止まる） */
.qas-sup-nudge{ animation:qas-sup-nudge 1.1s ease-in-out 2; }
@keyframes qas-sup-nudge{
  0%,100%{ transform:none }
  20%{ transform:translateY(-5px) }
  40%{ transform:translateY(0) }
  60%{ transform:translateY(-2px) }
  80%{ transform:translateY(0) }
}
/* 動きが苦手な人・省電力設定を尊重 */
@media (prefers-reduced-motion:reduce){
  .qas-sup-nudge{ animation:none }
  .qas-sup-peek{ animation:none }
}