/* --- hard-fix overrides for right-bottom blue button --- */
/* 右下固定を最優先（他CSSを打ち消す） */
#ac-root{
position: fixed !important;
right: 20px !important;
bottom: 20px !important;
z-index: 99999 !important;
/* 他レイヤーの影響遮断（親の transform / z-index など） */
isolation: isolate;
font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
}
/* グローバルbuttonのdisplay:block;width:100%などを無効化 */
#ac-open{
display: inline-flex !important;
align-items: center;
gap: 10px;
width: auto !important;
min-width: 160px;
height: 48px;
padding: 0 14px;
box-sizing: border-box;
cursor: pointer;
/* 見た目（青ボタン）を再適用 */
-webkit-appearance: none;
appearance: none;
border: none !important;
border-radius: 999px;
background: var(--primary, #2563eb);
color: #fff !important;
font: 600 14px/1 system-ui,"Noto Sans JP",Arial,sans-serif;
text-decoration: none !important;
box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
/* 画像が縦横比崩れ・拡大しないように */
#ac-open .ac-avatar{
width: 28px !important;
height: 28px !important;
border-radius: 50%;
object-fit: cover;
display: block;
}
/* パネル位置も右下に固定（万一の上書き対策） */
#ac-panel{
position: fixed !important;
right: 20px !important;
bottom: 80px !important;
width: 360px;
max-width: calc(100vw - 24px);
height: 520px;
max-height: calc(100vh - 120px);
}
#ac-panel[hidden]{ display:none !important; }
/* グローバル img{max-width:100%} に影響されないように */
#ac-root img{ max-width: none !important; }
/* 小画面 */
@media (max-width:480px){
#ac-open{ min-width:140px; height:44px; }
#ac-panel{ width:92vw; right:4vw !important; height:70vh; }
}
/* === hard override: keep the blue button at bottom-right === */
#ac-root{
position: fixed !important;
/* insetで全辺を一括指定 → 他のright/left指定を打ち消す */
inset: auto 20px 20px auto !important; /* top right bottom left */
right: 20px !important;
left: auto !important;
bottom: 20px !important;
z-index: 2147483647 !important; /* どんなz-indexにも勝つ */
isolation: isolate; /* 積層の干渉を分離 */
}
/* もしグローバルCSSが display:block;width:100% を当てている場合に備え、形状を固定 */
#ac-open{
display: inline-flex !important;
align-items: center;
gap: 10px;
width: auto !important;
min-width: 160px;
height: 48px;
padding: 0 14px;
box-sizing: border-box;
float: none !important; /* 左寄せの原因を排除 */
clear: none !important;
margin: 0 !important;
transform: none !important; /* 変な変形が付与されていた場合の保険 */
-webkit-appearance: none;
appearance: none;
border: none !important;
border-radius: 999px;
background: var(--primary, #2563eb) !important;
color: #fff !important;
font: 600 14px/1 system-ui,"Noto Sans JP",Arial,sans-serif;
text-decoration: none !important;
box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
/* パネルも右下基準に固定（万一の上書き対策） */
#ac-panel{
position: fixed !important;
inset: auto 20px 80px auto !important;
right: 20px !important;
left: auto !important;
bottom: 80px !important;
width: 360px; max-width: calc(100vw - 24px);
height: 520px; max-height: calc(100vh - 120px);
}
#ac-panel[hidden]{ display:none !important; }
/* グローバル img{max-width:100%} の影響回避 */
#ac-root img{ max-width: none !important; }
/* モバイル調整 */
@media (max-width:480px){
#ac-open{ min-width:140px; height:44px; }
#ac-panel{ width:92vw; inset: auto 4vw 12vh auto !important; }
}
/* ===== fix-pack: frame & layout hard overrides ===== */
/* 右下固定＆積層の安定化 */
#ac-root{
position: fixed !important;
inset: auto 20px 20px auto !important;
right: 20px !important;
left: auto !important;
bottom: 20px !important;
z-index: 2147483647 !important;
isolation: isolate;
}
/* 青い起動ボタンの形が崩れないように */
#ac-open{
display: inline-flex !important;
align-items: center;
gap: 10px;
width: auto !important; min-width: 160px; height: 48px;
padding: 0 14px; box-sizing: border-box;
float: none !important; margin: 0 !important;
border: none !important; border-radius: 999px !important;
background: var(--primary, #2563eb) !important; color: #fff !important;
text-decoration: none !important; -webkit-appearance: none; appearance: none;
box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
/* ---- 外枠（パネル）を“必ず”箱っぽくする ---- */
#ac-panel{
position: fixed !important;
inset: auto 20px 80px auto !important; /* bottom=80px でボタンの上に出す */
width: 360px; max-width: calc(100vw - 24px);
height: 520px; max-height: calc(100vh - 120px);
background: #fff !important;
border: 1px solid var(--border, #ddd) !important;
border-radius: 12px !important;
box-shadow: 0 10px 24px rgba(0,0,0,.25) !important;
overflow: hidden !important; /* 角丸を効かせる */
box-sizing: border-box !important; /* 変な拡張を防止 */
}
#ac-panel[hidden]{ display:none !important; }
/* ヘッダー帯（角丸と色を“固定”） */
#ac-header{
background: var(--primary, #2563eb) !important;
color:#fff !important; padding:10px 12px !important;
display:flex; align-items:center; gap:10px;
box-sizing: border-box;
}
#ac-header .ac-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.6); }
#ac-header .ac-name{ font-weight:700; color:#fff; }
#ac-header .ac-sub{ color:#e0e7ff; }
#ac-close{
margin-left:auto; width:28px; height:28px; line-height:28px;
background:#fff !important; color:var(--primary,#2563eb) !important;
border:none !important; border-radius:6px; cursor:pointer;
}
/* 本文と入力（フッター）の整形を固定 */
#ac-body{
flex:1 1 auto; overflow-y:auto; padding:12px;
background:#f9fafb; font-size:14px; box-sizing:border-box;
}
#ac-footer{
display:flex; align-items:center; gap:8px;
border-top:1px solid var(--border,#ddd); background:#fff; padding:8px;
}
#ac-input{
flex:1 1 auto; height:36px; padding:6px 10px; font-size:14px;
border:1px solid #d1d5db !important; border-radius:8px !important;
outline: none; background:#fff;
}
#ac-send{
height:36px; padding:0 14px; border:none !important; border-radius:8px !important;
background: var(--primary,#2563eb) !important; color:#fff !important; font-weight:700;
}
/* 吹き出しは常に“ふきだし”に見えるよう固定 */
.ac-msg{ margin-bottom:12px; display:flex; }
.ac-msg.user{ justify-content:flex-end; }
.ac-msg.assistant{ justify-content:flex-start; }
.ac-msg .bubble{
display:inline-block; max-width:70%; padding:8px 12px; border-radius:12px;
line-height:1.5; font-size:.9rem; word-break:break-word; white-space:pre-wrap;
box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.ac-msg.user .bubble{ background:#2563eb; color:#fff; }
.ac-msg.assistant .bubble{ background:#f1f5f9; color:#111; }
/* グローバル img{ max-width:100% } の副作用を遮断 */
#ac-root img{ max-width: none !important; }
/* モバイル */
@media (max-width:480px){
#ac-open{ min-width:140px; height:44px; }
#ac-panel{ width:92vw; inset: auto 4vw 12vh auto !important; height:70vh; }
}
/* ===== Banner hard override (style always consistent) ===== */
#ac-panel .ac-banner{
/* レイアウト */
padding: 10px 12px !important;
border-bottom: 1px solid #e5e7eb !important;
/* 色と背景（薄い青） */
background: #eef2ff !important; /* ← 薄い青 */
color: #1e40af !important;
/* 文字・余白 */
font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif !important;
font-size: 0.9rem !important; /* だいたい 14～15px */
line-height: 1.5 !important;
letter-spacing: .01em !important;
/* 他のCSSの影響排除 */
text-decoration: none !important;
box-sizing: border-box !important;
}
/* 1行目の “※ …” を少し強調 */
#ac-panel .ac-banner .ac-banner-quote{
font-weight: 600 !important;
}
/* リンクの見た目（青＋下線）を固定 */
#ac-panel .ac-banner a{
color: #1d4ed8 !important; /* 既存テーマの青に近い */
text-decoration: underline !important;
font-weight: 600 !important;
}
/* もしグローバルCSSが p{margin:…} を強く当てていても崩れないように */
#ac-panel .ac-banner p{
margin: 0 0 4px !important;
}
#ac-panel .ac-banner p:last-child{
margin-bottom: 0 !important;
}
/* ==== Scroll fix pack ==== */
/* パネルは縦flex。本文が縮められるよう min-height:0 を必ず入れる */
#ac-panel{
display: flex !important;
flex-direction: column !important;
overflow: hidden !important; /* スクロールは #ac-body が担当 */
min-height: 0 !important;
}
/* 本文は伸縮して内部スクロール。iOS慣性スクロールもON */
#ac-body{
flex: 1 1 auto !important;
min-height: 0 !important; /* ← これが超重要（Flex子のはみ出し防止） */
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
/* バナーとフッターは固定領域扱い（潰れ防止） */
#ac-panel .ac-banner,
#ac-footer{
flex: 0 0 auto !important;
}
/* --- keep "Yuri / AIアシスタント" next to the avatar cleanly --- */
#ac-open .ac-label{
white-space: nowrap;
line-height: 1;
display: inline-flex;
align-items: center;
gap: 4px;
}
#ac-open .ac-label .role{ font-weight: 600; }
/* ヘッダー名も1行で並べる（幅が足りない時は自動折返し） */
#ac-header .ac-title{ min-width: 0; }
#ac-header .ac-name{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 極小画面では折り返し許可 */
@media (max-width: 360px){
#ac-open .ac-label{ white-space: normal; }
#ac-header .ac-name{ white-space: normal; }
}
