/* COTOCO の AI相談。色は cotoco-design と同じ（黒・緑）。日本語は 16px 未満にしない。 */
.cac-float, .cac-inline {
	--cac-ink: #1A1715; --cac-base: #F6F4EF; --cac-pop: #00754A; --cac-pop-d: #005C3A;
	--cac-rule: #DAD4C8; --cac-muted: #5C544C; --cac-tint: #E4F0EB;
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
	font-size: 16px; line-height: 1.7; color: var(--cac-ink);
}

/* ---------- 右下のボタン（スマホは下の予約バー 56px の上） ---------- */
.cac-float { position: fixed; z-index: 40; right: 16px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
@media (min-width: 900px) { .cac-float { right: 24px; bottom: 24px; } }
.cac-fab { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: var(--cac-pop); color: #fff; font: inherit; font-weight: 700; letter-spacing: .06em; cursor: pointer; box-shadow: 0 6px 20px rgba(26,23,21,.28); transition: transform .2s, background .2s; }
.cac-fab:hover { background: var(--cac-pop-d); transform: translateY(-2px); }
.cac-fab:focus-visible, .cac-chip:focus-visible, .cac-send:focus-visible, .cac-close:focus-visible, .cac-tel:focus-visible { outline: 3px solid #3DBE86; outline-offset: 2px; }
.cac-float.is-open .cac-fab-label { display: none; }
.cac-float.is-open .cac-fab { padding: 0 16px; }

.cac-pop { width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 170px)); }
.cac-pop .cac-panel { height: 100%; box-shadow: 0 12px 40px rgba(26,23,21,.3); }

/* ---------- チャット画面（共通） ---------- */
.cac-panel { display: flex; flex-direction: column; background: var(--cac-base); border: 1px solid var(--cac-rule); border-radius: 14px; overflow: hidden; }
.cac-inline .cac-panel { height: min(640px, 80vh); max-width: 720px; margin: 1.5rem auto; }
.cac-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--cac-ink); color: #fff; }
.cac-title { font-weight: 700; letter-spacing: .12em; }
.cac-close { width: 40px; height: 40px; margin: -8px -8px -8px 0; border: 0; background: none; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }

.cac-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.cac-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cac-msg--assistant { align-self: flex-start; background: #fff; border: 1px solid var(--cac-rule); border-top-left-radius: 4px; }
.cac-msg--user { align-self: flex-end; background: var(--cac-pop); color: #fff; border-top-right-radius: 4px; }
.cac-msg a { color: var(--cac-pop); text-decoration: underline; }
.cac-msg--user a { color: #fff; }

.cac-typing { display: inline-flex; gap: 5px; padding: 14px 16px; }
.cac-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--cac-muted); animation: cac-dot 1.2s infinite ease-in-out; }
.cac-typing span:nth-child(2) { animation-delay: .15s; }
.cac-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes cac-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.cac-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.cac-chips[hidden] { display: none; }
.cac-chip { padding: 6px 14px; border: 1px solid var(--cac-pop); border-radius: 999px; background: var(--cac-tint); color: var(--cac-pop-d); font: inherit; cursor: pointer; }
.cac-chip:hover { background: #fff; }

.cac-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--cac-rule); background: #fff; }
.cac-input { flex: 1; min-height: 44px; max-height: 120px; padding: 10px 12px; border: 1px solid #8a938e; border-radius: 10px; font: inherit; resize: none; background: #fff; color: var(--cac-ink); }
.cac-input:focus { outline: 2px solid var(--cac-pop); outline-offset: 0; border-color: var(--cac-pop); }
.cac-send { min-width: 64px; border: 0; border-radius: 10px; background: var(--cac-ink); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.cac-send:disabled { opacity: .45; cursor: wait; }

.cac-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 14px 10px; background: #fff; color: var(--cac-muted); }
.cac-tel { color: var(--cac-pop); font-weight: 700; text-decoration: none; white-space: nowrap; }

.cac-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
	.cac-fab { transition: none; }
	.cac-fab:hover { transform: none; }
	.cac-typing span { animation: none; opacity: .6; }
}