/* Download.chat — floating AI chat launcher (bubble + overlay).
   The chat inside reuses chat-app.css; this file styles only the bubble, the overlay chrome,
   and re-flows the shared chat markup to fit a docked panel. */

/* ------------------------------------------------------------------ *
 * The bubble — modern / futuristic: rotating conic aura + breathing ring.
 * ------------------------------------------------------------------ */
.dc-fab {
	position: fixed; right: 22px; bottom: 22px; z-index: 60;
	width: 62px; height: 62px; padding: 0;
	border: 0; border-radius: 50%; background: none; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	filter: drop-shadow(0 10px 26px rgba(109, 59, 245, 0.5));
	animation: dc-fab-pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
	-webkit-tap-highlight-color: transparent;
}
.dc-fab__glow {
	position: absolute; inset: -7px; border-radius: 50%; z-index: 0;
	background: conic-gradient(from 0deg, #6d3bf5, #b8a6ff, #4be0ff, #6d3bf5);
	filter: blur(9px); opacity: 0.75;
	animation: dc-fab-spin 6s linear infinite;
}
.dc-fab__core {
	position: relative; z-index: 1;
	width: 100%; height: 100%; border-radius: 50%;
	background: var(--dc-accent-gradient); color: #0a0616;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), inset 0 -6px 14px rgba(10, 6, 22, 0.35);
	transition: transform 0.16s ease;
}
/* Breathing ring pulsing outward. */
.dc-fab::after {
	content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 0;
	border: 2px solid rgba(184, 166, 255, 0.55);
	animation: dc-fab-ring 2.6s ease-out infinite;
}
.dc-fab:hover .dc-fab__core { transform: scale(1.06); }
.dc-fab:hover { filter: drop-shadow(0 14px 34px rgba(109, 59, 245, 0.7)); }
.dc-fab:focus-visible { outline: 3px solid var(--dc-lavender); outline-offset: 3px; }
.dc-fab[aria-expanded="true"] { transform: scale(0.9); opacity: 0; pointer-events: none; }

@keyframes dc-fab-spin { to { transform: rotate(360deg); } }
@keyframes dc-fab-ring { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
@keyframes dc-fab-pop { from { transform: scale(0) translateY(10px); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ------------------------------------------------------------------ *
 * The overlay
 * ------------------------------------------------------------------ */
body.dc-chatov-open { overflow: hidden; }

.dc-chatov { position: fixed; inset: 0; z-index: 80; }
.dc-chatov[hidden] { display: none; }

.dc-chatov__scrim {
	position: absolute; inset: 0; background: rgba(6, 3, 16, 0.55);
	opacity: 0; transition: opacity 0.2s ease;
}
.dc-chatov.is-in .dc-chatov__scrim { opacity: 1; }

.dc-chatov__panel {
	position: absolute; right: 22px; bottom: 22px;
	width: min(420px, calc(100vw - 32px));
	height: min(660px, calc(100dvh - 40px));
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--dc-surface); background-image: var(--dc-bg-gradient);
	border: 1px solid var(--dc-border); border-radius: var(--dc-radius-lg);
	box-shadow: 0 24px 70px rgba(6, 3, 16, 0.6), var(--dc-shadow-glow);
	transform: translateY(16px) scale(0.98); opacity: 0;
	transform-origin: bottom right;
	transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.22s ease;
}
.dc-chatov.is-in .dc-chatov__panel { transform: none; opacity: 1; }

/* Header */
.dc-chatov__bar {
	flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
	padding: 13px 14px; border-bottom: 1px solid var(--dc-border);
	background: rgba(27, 16, 54, 0.6); backdrop-filter: blur(8px);
}
.dc-chatov__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dc-chatov__brand-mark {
	flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
	background: var(--dc-accent-gradient); color: #0a0616;
	display: inline-flex; align-items: center; justify-content: center;
}
.dc-chatov__brand-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.dc-chatov__brand-txt strong { font-size: 0.95rem; }
.dc-chatov__brand-txt small { color: var(--dc-muted); font-size: 0.74rem; }
.dc-chatov__x {
	margin-left: auto; flex: 0 0 auto;
	width: 34px; height: 34px; border-radius: 10px;
	background: none; border: 1px solid transparent; color: var(--dc-muted);
	font-size: 1.5rem; line-height: 1; cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dc-chatov__x:hover { background: rgba(184, 166, 255, 0.1); color: var(--dc-text); border-color: var(--dc-border); }

/* Chat body: re-flow the shared markup to a self-contained column (overrides the global
   .dc-home / .dc-composer widths, which only make sense on the home page). */
.dc-chatov__body {
	flex: 1 1 auto; min-height: 0; max-width: none; width: auto; margin: 0;
	display: flex; flex-direction: column; padding: 0;
}
.dc-chatov__welcome {
	flex: 0 0 auto; text-align: center; padding: 20px 18px 10px; margin: 0;
}
.dc-chatov__welcome .dc-welcome__title { font-size: 1.3rem; margin: 0 0 8px; }
.dc-chatov__welcome .dc-welcome__subtitle { font-size: 0.9rem; margin: 0 auto 14px; max-width: none; }
.dc-chatov__body.dc-chatting .dc-chatov__welcome { display: none; }

.dc-chatov__body .dc-chat-log {
	flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; margin: 0;
	padding: 8px 16px; overflow-y: auto; overscroll-behavior: contain;
	scrollbar-width: thin; scrollbar-gutter: stable;
}
.dc-chatov__body .dc-chat-log__pane { display: flex; flex-direction: column; gap: 14px; }

.dc-chatov__body .dc-composer {
	flex: 0 0 auto; max-width: none; width: auto; margin: 0;
	padding: 8px 14px 14px; background: none; border: 0; box-shadow: none;
}
.dc-chatov__body .dc-composer__hint { display: none; }
/* The "+" menu opens upward inside the panel; keep it above the messages. */
.dc-chatov__body .dc-composer__menu { z-index: 3; }

/* Mobile: a full-height sheet. */
@media (max-width: 560px) {
	.dc-fab { right: 16px; bottom: 16px; width: 56px; height: 56px; }
	.dc-chatov__panel {
		right: 0; bottom: 0; top: 0; left: 0;
		width: 100%; height: 100dvh; border-radius: 0; border: 0;
	}
	.dc-chatov__welcome { padding-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.dc-fab, .dc-fab__glow, .dc-fab::after { animation: none; }
	.dc-chatov__scrim, .dc-chatov__panel { transition: none; }
}