/*
 * AIスタッフ「ルカ」— washoku-demos の ChatWidget.tsx / AiStaffFigure.tsx を忠実移植。
 * テーマのデザイントークンがあれば継承し、無ければAZUNOAブランドの既定値を使う。
 */
.azc-root {
	--azc-shell: var(--color-shell, #fffcfc);
	--azc-shell-2: var(--color-shell-2, #fdf1f0);
	--azc-sumi: var(--color-sumi, #2b2426);
	--azc-stone: var(--color-stone, #6f6669);
	--azc-gold: var(--color-gold, #b83a4e);
	--azc-gold-deep: var(--color-gold-deep, #932b3d);
	--azc-line: var(--color-line, #f6e3e1);
	--azc-display: var(--font-display, "Cormorant Garamond", Georgia, serif);
	--azc-quint: cubic-bezier(0.22, 1, 0.36, 1);
	font-family: var(--font-sans, "Zen Kaku Gothic New", "Hiragino Sans", sans-serif);
}

/* ---------- 起動ボタン（黒い長方形。円ではない） ---------- */
.azc-launcher {
	position: fixed;
	right: 1rem;
	/* テーマ側の下部固定バー（電話/LINE/予約）に重ならないよう、その上に逃がす。
	   バーが無いサイトでは --az-quickbar-h が未定義なので 0rem として働く。 */
	bottom: calc(1rem + var(--az-quickbar-h, 0rem) + env(safe-area-inset-bottom));
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	height: 3rem;
	padding-inline: 1.25rem;
	border: 1px solid var(--azc-sumi);
	background: var(--azc-sumi);
	color: var(--azc-shell);
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	cursor: pointer;
	font-family: inherit;
	transition: all 400ms var(--azc-quint);
}
@media (min-width: 1024px) { .azc-launcher { right: 1.5rem; bottom: 1.5rem; height: 3.25rem; } }
.azc-launcher:hover { background: var(--azc-gold-deep); border-color: var(--azc-gold-deep); }
.azc-launcher.is-open { opacity: 0; pointer-events: none; }
.azc-launcher__label { font-size: 0.75rem; letter-spacing: 0.1em; }

/* ---------- AiStaffFigure: 5枚重ねてopacityだけ切り替える ---------- */
.azc-figure { position: relative; display: block; overflow: hidden; flex-shrink: 0; background: var(--azc-shell-2); }
.azc-figure__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 500ms ease; opacity: 0; }
.azc-figure__img.is-active { opacity: 1; }

/* 起動ボタン内: 36×36の円。zoomなし。左に-10pxはみ出させて余白を食う */
.azc-figure--launcher { width: 2.25rem; height: 2.25rem; border-radius: 50%; margin-left: -0.625rem; }
.azc-figure--launcher .azc-figure__img { object-position: 50% 22%; }

/* パネルヘッダー内: 104×78の長方形 → lgで128×96。scale(1.5)で顔を寄せる */
.azc-figure--header { width: 4.875rem; height: 6.5rem; }
@media (min-width: 1024px) { .azc-figure--header { width: 6rem; height: 8rem; } }
.azc-figure--header .azc-figure__img { object-position: 50% 18%; transform: scale(1.5); transform-origin: 50% 26%; }

/* ---------- パネル ---------- */
.azc-panel {
	position: fixed;
	right: 0.75rem;
	bottom: 0.75rem;
	left: 0.75rem;
	z-index: 50;
	display: none;
	flex-direction: column;
	max-height: 82svh;
	overflow: hidden;
	border: 1px solid var(--azc-line);
	background: var(--azc-shell);
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
	color: var(--azc-sumi);
}
@media (min-width: 1024px) {
	.azc-panel { right: 1.5rem; bottom: 1.5rem; left: auto; width: 32rem; max-height: min(48rem, 86svh); }
}
.azc-panel.is-open { display: flex; }

/* ---------- ヘッダー ---------- */
.azc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; border-bottom: 1px solid var(--azc-line); padding: 1rem 1.25rem; }
.azc-header__main { display: flex; min-width: 0; align-items: center; gap: 1rem; }
.azc-header__name { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.5rem; row-gap: 0.25rem; margin: 0; font-size: 1rem; letter-spacing: 0.06em; color: var(--azc-sumi); }
.azc-header__badge { border: 1px solid var(--azc-line); padding: 0.125rem 0.375rem; font-size: 0.625rem; letter-spacing: 0.08em; color: var(--azc-stone); }
.azc-header__status { margin: 0.25rem 0 0; font-size: 0.6875rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--azc-stone); }
.azc-header__hours { margin: 0.25rem 0 0; font-size: 0.625rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--azc-stone); opacity: 0.7; }
.azc-close { display: flex; height: 2.25rem; width: 2.25rem; align-items: center; justify-content: center; border: 0; background: none; color: var(--azc-stone); cursor: pointer; font-size: 1.125rem; line-height: 1; }
.azc-close:hover { color: var(--azc-sumi); }

/* ---------- メッセージ領域 ---------- */
.azc-messages { min-width: 0; flex: 1; overflow-x: hidden; overflow-y: auto; padding: 1.25rem; overflow-wrap: anywhere; }
.azc-intro { margin: 0; font-size: 0.875rem; line-height: 2; color: var(--azc-sumi); }
.azc-suggest-label { margin: 1rem 0 0; font-size: 0.6875rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--azc-stone); }
.azc-suggestions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.azc-suggestions button {
	width: 100%;
	border: 1px solid var(--azc-line);
	background: none;
	padding: 0.75rem 1rem;
	text-align: left;
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.625;
	color: var(--azc-sumi);
	cursor: pointer;
	transition: all 300ms ease;
}
.azc-suggestions button:hover { border-color: var(--azc-gold); background: rgb(184 58 78 / 0.06); }

.azc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }

/* ユーザー発話は黒い塗りのバブル。アシスタントはバブルなしの素のテキスト */
.azc-msg--user { display: flex; justify-content: flex-end; }
.azc-msg--user p { max-width: 85%; margin: 0; background: var(--azc-sumi); padding: 0.625rem 1rem; font-size: 0.9375rem; line-height: 1.625; color: var(--azc-shell); }
.azc-msg--assistant p.azc-text { margin: 0; font-size: 0.9375rem; line-height: 2; white-space: pre-wrap; color: var(--azc-sumi); }
.azc-thinking { margin: 0; font-size: 0.9375rem; color: var(--azc-stone); }
.azc-thinking span { display: inline-block; animation: azc-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes azc-pulse { 50% { opacity: 0.5; } }

.azc-tools { list-style: none; margin: 0 0 0.625rem; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.azc-tools li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; color: var(--azc-stone); }
.azc-tools .done { color: var(--azc-gold); }

.azc-source { margin: 0.625rem 0 0; }
.azc-source span { border: 1px solid var(--azc-line); padding: 0.125rem 0.5rem; font-size: 0.625rem; color: var(--azc-stone); }

.azc-notice { margin: 0.25rem 0 0; border-left: 2px solid var(--azc-gold); background: var(--azc-shell-2); padding: 0.625rem 0.875rem; font-size: 0.8125rem; line-height: 1.625; color: var(--azc-sumi); }
.azc-error { margin: 0.25rem 0 0; border-left: 2px solid #b4544a; background: rgb(180 84 74 / 0.06); padding: 0.625rem 0.875rem; font-size: 0.8125rem; line-height: 1.625; color: var(--azc-sumi); }

/* ---------- 予約カード ---------- */
.azc-card { margin-top: 0.875rem; border: 1px solid var(--azc-gold); background: rgb(184 58 78 / 0.07); padding: 1rem; }
.azc-card__eyebrow { margin: 0; font-family: var(--azc-display); font-size: 0.5625rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--azc-gold); }
.azc-card__when { margin: 0.5rem 0 0; font-variant-numeric: tabular-nums; font-size: 0.875rem; color: var(--azc-sumi); }
.azc-card dl { margin: 0.625rem 0 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; color: var(--azc-stone); }
.azc-card dl > div { display: flex; gap: 0.5rem; }
.azc-card dt { width: 3rem; flex-shrink: 0; }
.azc-card dd { margin: 0; min-width: 0; color: var(--azc-sumi); }
.azc-card dd.tnum { font-variant-numeric: tabular-nums; }
.azc-card__note { margin: 0.75rem 0 0; border-top: 1px solid rgb(184 58 78 / 0.3); padding-top: 0.625rem; font-size: 0.625rem; line-height: 1.625; color: var(--azc-stone); }
.azc-card__deposit { margin-top: 0.75rem; }
.azc-card__deposit-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 100%; min-height: 3.25rem; padding-inline: 2rem;
	border: 1px solid var(--azc-sumi); background: none; color: var(--azc-sumi);
	font-family: inherit; font-size: 0.8125rem; letter-spacing: 0.16em;
	cursor: pointer; transition: all 400ms var(--azc-quint);
}
.azc-card__deposit-btn:hover { background: var(--azc-sumi); color: var(--azc-shell); }

/* ---------- 入力欄 ---------- */
.azc-form { border-top: 1px solid var(--azc-line); padding: 0.75rem 1rem; }
.azc-form__row { display: flex; align-items: flex-end; gap: 0.5rem; }
.azc-form textarea {
	flex: 1; width: 100%; min-width: 0;
	min-height: 2.75rem; max-height: 7rem;
	padding: 0.625rem 1rem;
	border: 1px solid var(--azc-line);
	background: transparent;
	color: var(--azc-sumi);
	font-family: inherit;
	font-size: 1rem; /* iOSの自動ズームを防ぐため16px。小さくしないこと */
	resize: none;
}
@media (min-width: 1024px) { .azc-form textarea { font-size: 0.9375rem; } }
.azc-form textarea:focus { border-color: var(--azc-gold); outline: none; }
.azc-form button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 2.75rem; padding-inline: 1rem;
	border: 1px solid var(--azc-sumi); background: var(--azc-sumi); color: var(--azc-shell);
	font-family: inherit; font-size: 0.8125rem; letter-spacing: 0.16em;
	cursor: pointer; transition: all 400ms var(--azc-quint);
}
.azc-form button:hover { background: var(--azc-gold-deep); border-color: var(--azc-gold-deep); }
.azc-form button:disabled { opacity: 0.35; cursor: not-allowed; }
.azc-caution { margin: 0.5rem 0 0; font-size: 0.625rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--azc-stone); }

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