/* Sunny inline mount — dark chat panel embedded in page content (FCG hero).
   Uses the host theme's Nocturne tokens where present, with dark fallbacks so
   it still looks right off-theme. Class-prefixed (sunny-il-) to avoid clashing
   with the corner widget. */

.sunny-il { --sunny-accent: #9184d9; }
.sunny-il *, .sunny-il *::before, .sunny-il *::after { box-sizing: border-box; }

.sunny-il-panel {
	background: var(--color-surface, #232532);
	border-radius: var(--radius-lg, 14px);
	overflow: hidden;
	display: flex; flex-direction: column;
	height: min(74vh, 660px);
	box-shadow: var(--shadow-md, 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,0.55));
	font-family: var(--font-body, "Inter", system-ui, sans-serif);
}

/* header */
.sunny-il-head {
	display: flex; align-items: center; gap: var(--space-3, 8.4px);
	padding: var(--space-4, 11.2px) var(--space-6, 16.8px);
	background: var(--color-neutral-900, #292b31);
}
.sunny-il-avatar {
	width: 26px; height: 26px; flex: none; border-radius: 50%;
	background: var(--color-accent-800, #423a6a);
	border: 1px solid var(--sunny-accent);
}
.sunny-il-meta { flex: 1; }
.sunny-il-name { margin: 0; font-family: var(--font-heading, inherit); font-weight: 500; font-size: 15px; color: var(--color-text, #e9e9ed); }
.sunny-il-status { margin: 0; font-size: 12px; color: var(--color-accent-300, #d2cefd); }
.sunny-il-reset {
	font-size: 12px; cursor: pointer; color: var(--color-text, #e9e9ed);
	background: transparent; border: 1px solid var(--color-divider, rgba(233,233,237,0.16));
	padding: 5px 10px; border-radius: var(--radius-md, 8px);
}
.sunny-il-reset:hover { background: color-mix(in srgb, var(--color-text, #e9e9ed) 7%, transparent); }

/* log */
.sunny-il-log {
	flex: 1; overflow-y: auto;
	padding: var(--space-6, 16.8px);
	display: flex; flex-direction: column; gap: var(--space-4, 11.2px);
}
.sunny-il-msg {
	max-width: 88%; font-size: 14px; line-height: 1.55;
	padding: var(--space-3, 8.4px) var(--space-4, 11.2px);
	white-space: pre-wrap; word-wrap: break-word; border-radius: var(--radius-md, 8px);
}
.sunny-il-msg.user { align-self: flex-end; background: var(--color-accent-800, #423a6a); color: var(--color-accent-100, #f5f4ff); }
.sunny-il-msg.bot  { align-self: flex-start; background: var(--color-neutral-900, #292b31); color: var(--color-neutral-200, #e4e7f5); }
.sunny-il-msg a { color: var(--color-accent-300, #d2cefd); }

.sunny-il-typing {
	align-self: flex-start; display: flex; gap: 5px;
	padding: var(--space-4, 11.2px) var(--space-6, 16.8px);
	background: var(--color-neutral-900, #292b31); border-radius: var(--radius-md, 8px);
}
.sunny-il-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--color-neutral-500, #9397ab); animation: sunny-il-blip 1.1s infinite; }
.sunny-il-typing span:nth-child(2) { animation-delay: .15s; }
.sunny-il-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes sunny-il-blip { 0%,60%,100% { transform: translateY(0); opacity: .3; } 30% { transform: translateY(-3px); opacity: 1; } }

/* composer */
.sunny-il-compose { background: var(--color-neutral-900, #292b31); padding: var(--space-4, 11.2px) var(--space-6, 16.8px) var(--space-6, 16.8px); }
.sunny-il-chips { display: flex; flex-wrap: wrap; gap: var(--space-2, 5.6px); margin-bottom: var(--space-4, 11.2px); }
.sunny-il-chip {
	font-size: 13px; white-space: nowrap; cursor: pointer;
	color: var(--color-text, #e9e9ed); background: transparent;
	border: 1px solid var(--color-divider, rgba(233,233,237,0.16));
	padding: 5px 10px; border-radius: var(--radius-md, 8px);
	font-family: inherit;
}
.sunny-il-chip:hover { background: color-mix(in srgb, var(--color-text, #e9e9ed) 7%, transparent); }
.sunny-il-form { display: flex; gap: var(--space-2, 5.6px); align-items: flex-end; }
.sunny-il-input {
	flex: 1; min-height: 38px; max-height: 120px; resize: none;
	padding: 8px 10px; font: inherit; font-size: 14px;
	color: var(--color-text, #e9e9ed); caret-color: var(--sunny-accent);
	background: var(--color-surface, #232532);
	border: 1px solid var(--color-divider, rgba(233,233,237,0.16)); border-radius: var(--radius-md, 8px);
}
.sunny-il-input:focus { outline: none; border-color: var(--sunny-accent); }
.sunny-il-send {
	flex: none; width: 38px; height: 38px; cursor: pointer;
	color: var(--sunny-accent); background: transparent;
	border: 1px solid var(--sunny-accent); border-radius: var(--radius-md, 8px);
	font-size: 16px; line-height: 1;
}
.sunny-il-send:hover { background: color-mix(in srgb, var(--sunny-accent) 12%, transparent); }
.sunny-il-send:disabled { opacity: .45; cursor: not-allowed; }
.sunny-il-fineprint { margin: var(--space-3, 8.4px) 0 0; font-size: 11px; color: var(--color-neutral-600, #75798c); }