/* ITK Chat widget. Tokens come from the theme (same pattern as itk-my-dogs), prefixed --itkc- so a palette change
   retints the widget without touching this file. Bottom-right on purpose: My Dogs keeps bottom-left. */
.itkc {
	--itkc-ink:       var(--ink, #141210);
	--itkc-body:      var(--body, #4A483D);
	--itkc-muted:     var(--muted, #63604F);
	--itkc-white:     var(--white, #FFFFFF);
	--itkc-panel:     var(--panel, #FAF8EE);
	--itkc-rule:      var(--rule, #C8C3AE);
	--itkc-rule-lt:   var(--rule-lt, #E3DFCB);
	--itkc-action:    var(--blue, #93292E);
	--itkc-action-d:  var(--blue-d, #74201F);
	--itkc-on-action: var(--on-blue, #FFFFFF);
	--itkc-bad:       var(--red, #A82C16);
	font-family: inherit;
	color: var(--itkc-ink);
}
.itkc-fab {
	position: fixed; right: 16px; bottom: 16px; z-index: 61;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 16px 10px 12px; border: 1px solid var(--itkc-ink); border-radius: 999px;
	background: var(--itkc-ink); color: var(--itkc-white); font: 600 14px/1 inherit; cursor: pointer;
	box-shadow: 4px 4px 0 var(--itkc-rule); transition: transform .15s ease;
}
.itkc-fab:hover { transform: translateY(-1px); }
.itkc-fab:focus-visible { outline: 3px solid var(--itkc-action); outline-offset: 2px; }
.itkc-fab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.itkc-fab__dot { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--itkc-bad); border: 2px solid var(--itkc-white); display: none; }
.itkc-fab.has-unread .itkc-fab__dot { display: block; }
.itkc.is-open .itkc-fab { display: none; }
/* Give way to the compare tray and the post dock, both of which sit on the same edge. */
body:has(#cmp-tray:not([hidden])) .itkc-fab { bottom: 88px; }
body:has(.eng-dock.is-up) .itkc-fab { bottom: 84px; }
/* The quiz dare bar is in the DOM on every page, hidden; only a showing one takes the corner. */
body:has(.fq-darebar:not([hidden])) .itkc-fab { display: none; }

.itkc-panel {
	position: fixed; right: 16px; bottom: 16px; z-index: 62;
	width: 360px; max-width: calc(100vw - 32px); height: min(560px, calc(100vh - 32px));
	display: none; flex-direction: column;
	background: var(--itkc-white); border: 1px solid var(--itkc-ink); box-shadow: 4px 4px 0 var(--itkc-ink);
}
.itkc.is-open .itkc-panel { display: flex; }
.itkc-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid var(--itkc-rule-lt); background: var(--itkc-panel); }
.itkc-head h2 { margin: 0; font-size: 16px; line-height: 1.25; font-weight: 700; color: var(--itkc-ink); }
.itkc-head p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--itkc-muted); }
.itkc-x { margin-left: auto; flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid var(--itkc-rule); background: var(--itkc-white); border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; color: var(--itkc-ink); }
.itkc-x:focus-visible { outline: 3px solid var(--itkc-action); }
.itkc-log { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.itkc-msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.itkc-msg--visitor { align-self: flex-end; background: var(--itkc-ink); color: var(--itkc-white); border-bottom-right-radius: 4px; }
.itkc-msg--staff { align-self: flex-start; background: var(--itkc-panel); color: var(--itkc-ink); border: 1px solid var(--itkc-rule-lt); border-bottom-left-radius: 4px; }
.itkc-msg time { display: block; margin-top: 4px; font-size: 11px; opacity: .7; }
.itkc-msg--staff::before { content: 'In The Kibble'; display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--itkc-muted); margin-bottom: 3px; }
.itkc-note { font-size: 12.5px; line-height: 1.45; color: var(--itkc-muted); text-align: center; padding: 4px 8px; }
.itkc-note--err { color: var(--itkc-bad); }
.itkc-form { border-top: 1px solid var(--itkc-rule-lt); padding: 10px 12px 12px; display: grid; gap: 8px; background: var(--itkc-white); }
.itkc-form label { font-size: 12px; color: var(--itkc-muted); display: grid; gap: 4px; }
.itkc-form input, .itkc-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; color: var(--itkc-ink); background: var(--itkc-white); border: 1px solid var(--itkc-rule); padding: 8px 10px; border-radius: 6px; }
.itkc-form textarea { resize: none; min-height: 44px; max-height: 140px; line-height: 1.4; }
.itkc-form input:focus, .itkc-form textarea:focus { outline: none; border-color: var(--itkc-action); box-shadow: 0 0 0 3px color-mix(in srgb, var(--itkc-action) 20%, transparent); }
.itkc-row { display: flex; gap: 8px; align-items: flex-end; }
.itkc-row textarea { flex: 1 1 auto; }
.itkc-send { flex: 0 0 auto; height: 40px; padding: 0 16px; border: 1px solid var(--itkc-action-d); border-radius: 6px; background: var(--itkc-action); color: var(--itkc-on-action); font: 600 14px/1 inherit; cursor: pointer; }
.itkc-send:disabled { opacity: .55; cursor: default; }
.itkc-send:focus-visible { outline: 3px solid var(--itkc-ink); outline-offset: 2px; }
.itkc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.itkc-fine { font-size: 11px; color: var(--itkc-muted); margin: 0; line-height: 1.4; }
.itkc-fine a { color: inherit; }
@media (max-width: 600px) {
	.itkc-fab span { display: none; }
	.itkc-fab { padding: 12px; }
	.itkc-panel { right: 8px; left: 8px; bottom: 8px; width: auto; max-width: none; height: min(78vh, 600px); }
}
@media (prefers-reduced-motion: reduce) { .itkc-fab, .itkc-log { transition: none; scroll-behavior: auto; } }