.elsaChatBlock {
	--elsa-chat-border: #d2d2d2;
	--elsa-chat-surface: #f5f7f9;
	--elsa-chat-user: color-mix(in srgb, var(--elsa-primary-color, #24333f) 16%, #fff);
	display: flex;
	width: 100%;
	margin: 16px 0 24px;
	overflow: hidden;
	border: 1px solid var(--elsa-chat-border);
	border-radius: 10px;
	background: #fff;
	flex-direction: column;
}
/*
	fill: 親から渡された高さいっぱいへ広がる表示modifier。会話だけがスクロールし、
	composer（入力欄）は下端に残る。外枠を別のブロックが持つ配置（スペース画面の
	会話ペイン）で使う。呼び出し側が祖先セレクタでCHATの内側を書き換えないための、
	CHAT自身の選択肢である。
*/
.elsaChatBlock--fill { height: 100%; min-height: 0; margin: 0; border: 0; border-radius: 0; flex: 1 1 auto; }
.elsaChatBlock--fill .elsaChatMessages { min-height: 0; max-height: none; flex: 1 1 auto; }
.elsaChatMessages { display: flex; min-height: 180px; max-height: 640px; padding: 18px; overflow: auto; background: var(--elsa-chat-surface); flex-direction: column; gap: 12px; }
.elsaChatEmpty { margin: auto; color: #667085; text-align: center; }
.elsaChatMessage { display: flex; width: 100%; justify-content: flex-start; }
.elsaChatMessage--user { justify-content: flex-end; }
.elsaChatMessage--system { justify-content: center; }
.elsaChatBubble { width: fit-content; max-width: min(78%, 720px); padding: 10px 12px; border: 1px solid var(--elsa-chat-border); border-radius: 4px 14px 14px 14px; background: #fff; overflow-wrap: anywhere; }
.elsaChatMessage--user .elsaChatBubble { border-radius: 14px 4px 14px 14px; background: var(--elsa-chat-user); }
.elsaChatMessage--developer .elsaChatBubble { border-color: color-mix(in srgb, var(--elsa-primary-color, #24333f) 45%, #fff); }
.elsaChatMessage--system .elsaChatBubble { max-width: 90%; padding: 7px 12px; border-radius: 999px; background: #eef1f3; color: #56636d; text-align: center; }
.elsaChatMeta { display: flex; margin-bottom: 4px; color: #667085; font-size: .8em; gap: 10px; justify-content: space-between; }
.elsaChatMeta strong { color: inherit; font-weight: 600; }
.elsaChatMeta time { font-variant-numeric: tabular-nums; }
.elsaChatBody { margin: 0; line-height: 1.6; white-space: normal; }
.elsaChatAttachments { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 220px)); gap: 8px; margin-top: 8px; }
.elsaChatAttachment { display: grid; overflow: hidden; border: 1px solid var(--elsa-chat-border); border-radius: 6px; background: #fff; color: inherit; text-decoration: none; }
.elsaChatAttachment img { display: block; width: 100%; height: 140px; object-fit: contain; background: #eef1f3; }
.elsaChatAttachment span { padding: 6px 8px; font-size: .85em; overflow-wrap: anywhere; }
.elsaChatAttachmentFile { display: grid; min-height: 84px; background: #eef1f3; color: #56636d; font-size: 1em !important; font-weight: 700; place-items: center; }
.elsaChatAttachmentName { font-weight: 600; }
.elsaChatComposer { display: grid; padding: 14px; border-top: 1px solid var(--elsa-chat-border); background: #fff; gap: 8px; }
.elsaChatComposerLabel { font-weight: 600; }
.elsaChatComposerLabel--visuallyHidden,
.elsaChatAttachmentPickerText--visuallyHidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
.elsaChatComposerInput { width: 100%; min-height: 92px; resize: vertical; }
.elsaChatComposer--compact { padding: 8px 10px; gap: 6px; }
.elsaChatComposer--compact .elsaChatComposerInput { min-height: 52px; }
.elsaChatComposerAttachments { display: grid; gap: 7px; }
.elsaChatAttachmentPicker { display: inline-flex; width: fit-content; height: var(--elsa-block-action-height, 30px); min-height: var(--elsa-block-action-height, 30px); padding: 0 11px; border: 1px solid #b8b8b8; border-radius: 5px; background: var(--elsa-button-default-bg, #d2d2d2); color: var(--elsa-button-default-color, #555); cursor: pointer; align-items: center; gap: 5px; }
.elsaChatAttachmentPicker--icon { box-sizing: border-box; flex: 0 0 var(--elsa-block-action-height, 30px); width: var(--elsa-block-action-height, 30px); min-width: var(--elsa-block-action-height, 30px); max-width: var(--elsa-block-action-height, 30px); height: var(--elsa-block-action-height, 30px); min-height: var(--elsa-block-action-height, 30px); max-height: var(--elsa-block-action-height, 30px); padding: 0; justify-content: center; font-size: 1.35em; line-height: 1; }
.elsaChatAttachmentPicker:focus-visible { outline: 2px solid var(--elsa-primary-color, #24333f); outline-offset: 2px; }
.elsaChatAttachmentPicker.is-dragover { border-color: var(--elsa-primary-color, #24333f); }
.elsaChatAttachmentQueue { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 7px; }
.elsaChatQueuedAttachment { display: grid; min-width: 0; min-height: 48px; padding: 5px; border: 1px solid var(--elsa-chat-border); border-radius: 6px; background: #fff; grid-template-columns: 38px minmax(0, 1fr) 30px; align-items: center; gap: 7px; }
.elsaChatQueuedAttachment img { width: 38px; height: 38px; border-radius: 4px; object-fit: cover; }
.elsaChatQueuedAttachmentType { display: grid; width: 38px; height: 38px; border-radius: 4px; background: #eef1f3; color: #56636d; font-size: .7em; font-weight: 700; place-items: center; }
.elsaChatQueuedAttachmentName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elsaChatQueuedAttachmentRemove { width: 30px; height: var(--elsa-block-action-height, 30px); min-height: var(--elsa-block-action-height, 30px); padding: 0; border: 0; border-radius: 50%; background: var(--elsa-button-default-bg, #d2d2d2); color: var(--elsa-button-default-color, #555); cursor: pointer; font-size: 1.1em; }
.elsaChatQueuedAttachmentRemove:focus-visible { outline: 2px solid var(--elsa-primary-color, #24333f); outline-offset: 2px; }
.elsaChatAttachmentCount { margin: 0; color: #667085; font-size: .8em; }
.elsaChatBlock--hideAttachmentCount .elsaChatAttachmentCount { display: none; }
.elsaChatComposerActions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.elsaChatComposerActionLink { display: inline-flex; box-sizing: border-box; flex: 0 0 var(--elsa-block-action-height, 30px); width: var(--elsa-block-action-height, 30px); min-width: var(--elsa-block-action-height, 30px); max-width: var(--elsa-block-action-height, 30px); height: var(--elsa-block-action-height, 30px); min-height: var(--elsa-block-action-height, 30px); max-height: var(--elsa-block-action-height, 30px); padding: 0; border-radius: 4px; background: var(--elsa-button-default-bg, #d2d2d2); color: var(--elsa-button-default-color, #555); align-items: center; justify-content: center; text-decoration: none; }
.elsaChatComposerActionLink:focus-visible { outline: 2px solid var(--elsa-primary-color, #24333f); outline-offset: 1px; }
.elsaChatComposerActionIcon { display: block; width: 1.2em; height: 1.2em; background: currentColor; }
.elsaChatComposerActionLink--settings .elsaChatComposerActionIcon { -webkit-mask: url("../php/blocks/calendar/icons/settings.svg") center / contain no-repeat; mask: url("../php/blocks/calendar/icons/settings.svg") center / contain no-repeat; }
.elsaChatComposerActions .elsaCommandBlock[data-chat-submit-icon="paper-plane"] { display: grid; box-sizing: border-box; flex: 0 0 var(--elsa-block-action-height, 30px); width: var(--elsa-block-action-height, 30px); min-width: var(--elsa-block-action-height, 30px); max-width: var(--elsa-block-action-height, 30px); height: var(--elsa-block-action-height, 30px); min-height: var(--elsa-block-action-height, 30px); max-height: var(--elsa-block-action-height, 30px); padding: 0; font-size: 0; place-items: center; }
.elsaChatComposerActions .elsaCommandBlock[data-chat-submit-icon="paper-plane"]::before { display: block; width: 19px; height: 19px; background: currentColor; content: ""; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.2 3.1 22 12 2.2 20.9l1.7-7.2 10.7-1.7L3.9 10.3 2.2 3.1Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.2 3.1 22 12 2.2 20.9l1.7-7.2 10.7-1.7L3.9 10.3 2.2 3.1Z'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (hover: hover) {
	.elsaChatAttachmentPicker:hover { border-color: var(--elsa-button-hover-bg, var(--elsa-primary-color, #24333f)); background: var(--elsa-button-hover-bg, var(--elsa-primary-color, #24333f)); color: var(--elsa-button-hover-color, #fff); }
	.elsaChatComposerActionLink:hover { background: var(--elsa-button-hover-bg, var(--elsa-primary-color, #24333f)); color: var(--elsa-button-hover-color, #fff); }
	.elsaChatQueuedAttachmentRemove:hover { background: var(--elsa-button-danger-hover-bg, #c0392b); color: #fff; }
}
@media (max-width: 640px) {
	.elsaChatMessages { min-height: 140px; max-height: 70vh; padding: 12px; }
	.elsaChatBubble { max-width: 88%; }
	.elsaChatMessage--system .elsaChatBubble { max-width: 100%; }
	.elsaChatAttachments { grid-template-columns: minmax(0, 1fr); }
	.elsaChatAttachmentQueue { grid-template-columns: minmax(0, 1fr); }
}