/* Cinga AI — açık tema (2026-09-22 yeniden tasarım). Token'lar tek
   yerde tanımlı, bileşenler onlardan besleniyor - yeni bir renk eklemek
   gerekirse sadece :root değişir. */

:root {
	--bg: #f5f6f8;
	--surface: #ffffff;
	--surface-2: #f8f9fb;
	--border: #e5e7eb;
	--border-strong: #d1d5db;
	--text: #111827;
	--text-dim: #6b7280;
	--text-faint: #9ca3af;
	--accent: #10b981;
	--accent-dark: #059669;
	--accent-soft: #ecfdf5;
	--critical: #ef4444;
	--critical-soft: #fef2f2;
	--warning: #f59e0b;
	--warning-soft: #fffbeb;
	--info: #3b82f6;
	--info-soft: #eff6ff;
	--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
	--radius-card: 14px;
	--radius-pill: 999px;
	--font-body: "Inter", system-ui, -apple-system, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
}

.hidden {
	display: none !important;
}

.screen {
	height: 100vh;
	display: flex;
	flex-direction: column;
}

button {
	font-family: var(--font-body);
}

svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* --- Login --- */

#login-screen {
	align-items: center;
	justify-content: center;
}

.login-card {
	width: 100%;
	max-width: 380px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-md);
	padding: 36px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.brand-mark {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.brand-name {
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -0.01em;
	color: var(--text);
}

.brand-tagline {
	font-size: 11px;
	color: var(--text-faint);
}

/* Cinga AI 1.0 Version Badge (2026-10-07) - a Small, Persistent Visual
   Marker Next to the Brand Name so the Deployed Version is Visible at a
   Glance. Updated 2026-10-08 to Append "(Core vN)" (see app.js's
   loadCoreVersionBadge()) - no Longer a Fully Static Label, now Reads
   the Real Core Orchestrator Version From /health on Load. Updated
   Again 2026-10-09 With a Hover Tooltip Listing Each Sub-Agent's own
   Version Per Domain (Suv/Temir/Kun) - see .version-tooltip Below. */
.version-badge {
	display: inline-block;
	position: relative;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--accent, #3b82f6);
	background: color-mix(in srgb, var(--accent, #3b82f6) 14%, transparent);
	border-radius: 999px;
	padding: 1px 7px;
	margin-left: 6px;
	vertical-align: middle;
	cursor: help;
}

/* Sub-Agent Version Tooltip (2026-10-09) - Built Entirely in JS (see
   loadCoreVersionBadge()) From /health's Specialist_Versions Field,
   one .version-tooltip-group Per Domain. Hidden by Default (opacity:0
   + a Tiny Upward Offset for a Subtle Rise-In, not display:none - Same
   Reasoning as .device-panel.hidden's own Comment: a display Change
   Can't Transition), Shown via the Plain :hover Pseudo-Class - no JS
   Event Listener Needed for the Show/Hide Itself. */
.version-tooltip {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 8px;
	min-width: 180px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: var(--shadow-md);
	padding: 10px 12px;
	z-index: 30;
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	text-align: left;
	white-space: nowrap;
}

.version-badge:hover .version-tooltip {
	opacity: 1;
	transform: translateY(0);
}

.version-tooltip-group {
	font-size: 11px;
	font-weight: 500;
	color: var(--text-dim);
	line-height: 1.6;
}

.version-tooltip-group + .version-tooltip-group {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--border);
}

.version-tooltip-group strong {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 2px;
}

.brand-sub {
	color: var(--text-dim);
	font-size: 13px;
	margin: 8px 0 24px;
}

#login-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

#login-form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	color: var(--text-dim);
}

#login-form input {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 10px 12px;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 14px;
}

#login-form input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

#login-form button[type="submit"] {
	margin-top: 6px;
	background: var(--accent);
	color: #ffffff;
	border: none;
	border-radius: 10px;
	padding: 11px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}

#login-form button[type="submit"]:hover {
	background: var(--accent-dark);
}

.error-text {
	color: var(--critical);
	font-size: 13px;
	margin: 0;
	min-height: 1em;
}

/* --- Topbar --- */

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 20px;
	border-bottom: 1px solid var(--border);
	background: var(--surface);
	flex-wrap: wrap;
}

.topbar-right {
	display: flex;
	align-items: center;
	gap: 12px;
}

.user-name {
	font-size: 13px;
	color: var(--text-dim);
}

.ghost-btn {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 8px;
	padding: 6px 12px;
	font-size: 13px;
	cursor: pointer;
}

.ghost-btn:hover {
	border-color: var(--accent);
	color: var(--accent-dark);
}

/* --- Workspace layout (chat + optional device panel) --- */

.workspace {
	flex: 1;
	display: flex;
	min-height: 0;
	width: 100%;
}

.chat-column {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* Empty-Chat Centered Layout (2026-10-09, Real Ask: Cognivo Reference -
   "sohbet başlangıcı büyükce ortada metin kutusu... ama kullanıcı ilk
   promptu yazıp devam edince normal yapımıza döneriz") - Toggled by
   app.js's updateSuggestionsVisibility(). #messages's own flex:1/
   overflow-y:auto (Above) is Overridden to its Natural Size so
   justify-content:center Can Actually Center the Greeting+Cards Block
   AND the Input Row Together as one Group - Without This Override,
   flex:1 Would Claim the Whole Column and Centering Would be a No-Op.
   Every Rule Here Only Applies While This Class is Present - a Chat
   With Real Messages (the Class Removed) Falls Straight Back to the
   Plain, Always-Bottom-Pinned Layout That Existed Before This Change. */
.chat-column.empty-state {
	justify-content: center;
}

.chat-column.empty-state .messages {
	flex: 0 1 auto;
	overflow: visible;
}

.messages {
	flex: 1;
	overflow-y: auto;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	/* Widened From 900px (2026-09-28, Real Ask: "chat kısmı ortada iframe
	   tarzı olmuş, sağ tarafı kaldıracaktık olmamış") - 900px Was Narrow
	   Enough That Even WITH the Sidebar Eating Into the Left-Side Margin,
	   a Typical Laptop/Desktop Window Still Showed a Visibly Boxed Column
	   With its own Scroll Bar Floating in a Sea of Empty Gray on the
	   Right - Reads as a Stray Embedded iframe Rather Than the App's own
	   Main Content Area. 1300px Fills Most Common Window Widths (1440-
	   1920px, Even After the 300px Sidebar) Comfortably, While Still
	   Capping Line Length on a Genuinely Ultra-Wide Monitor so Prose
	   Doesn't Stretch Edge-to-Edge and Become Hard to Read. */
	max-width: 1300px;
	width: 100%;
	margin: 0 auto;
}

/* --- Suggested Questions (empty-conversation state) --- */

.suggestions {
	max-width: 720px;
	margin: 30px auto 0;
}

/* Below the (now-centered) Input Row - the Empty-State Layout Flows
   Greeting -> Input -> Cards Top to Bottom, Cognivo-Style, so the
   Suggestion Cards Sit Under the Input Visually Even Though Both Live
   Inside #messages/.chat-column's own Normal Document Order (#suggestions
   is #messages's own Child, Rendered Before .chat-input-row - Order is
   Unchanged, Only Spacing/Sizing Differ in This State). */
.chat-column.empty-state .suggestions {
	margin: 0 auto 28px;
}

.suggestions-title {
	color: var(--text-dim);
	font-size: 12.5px;
	font-weight: 600;
	margin: 0 0 12px;
}

.suggestions-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

/* Rich Cognivo-Style Card (2026-10-09) - Was a Single-Line icon+text Chip;
   Now a Short Title + Description Stacked Under the Icon, Still a Plain
   Button so the Existing Click-to-Ask Behavior is Unchanged. */
.suggestion-chip {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 12px;
	padding: 14px 16px;
	text-align: left;
	cursor: pointer;
	font-family: var(--font-body);
	box-shadow: var(--shadow-sm);
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.suggestion-chip svg {
	color: var(--accent-dark);
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	margin-top: 1px;
}

.suggestion-chip-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.suggestion-chip-title {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text);
}

.suggestion-chip-description {
	font-size: 12px;
	color: var(--text-dim);
	line-height: 1.35;
}

.suggestion-chip:hover {
	border-color: var(--accent);
	transform: translateY(-1px);
}

.greeting {
	color: var(--text);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 26px;
}

/* Vurgulanmış Greeting (2026-10-09, Cognivo Reference: "üstte de büyükce
   görsel olarak güzel şekilde nasıl yardım edebilirim tarzı bir giriş
   cümlesi") - Only While the Chat is Genuinely Empty; a Chat With Real
   Messages Never Sees This (the Class is Absent, and #suggestions is
   Hidden Entirely at That Point Regardless). */
.chat-column.empty-state .greeting {
	font-size: 30px;
	text-align: center;
	margin: 0 0 32px;
}

/* Bigger, Centered Input (2026-10-09, Cognivo Reference) - the Textarea
   Itself Grows; the Row's own max-width/Centering is Already Shared
   With the Normal State (see .chat-input-row Below), so Only the Visual
   Weight of the Box Changes Here. */
.chat-column.empty-state .chat-input-row {
	max-width: 720px;
}

.chat-column.empty-state .chat-input-row textarea {
	padding: 18px 22px;
	font-size: 15.5px;
	border-radius: 26px;
}

.chat-column.empty-state .chat-input-row button {
	width: 48px;
	height: 48px;
}

@media (max-width: 700px) {
	.suggestions-grid {
		grid-template-columns: 1fr;
	}
}

/* --- Messages --- */

.message-row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	max-width: 88%;
}

.message-row.user {
	align-self: flex-end;
	flex-direction: row-reverse;
}

.message-row.assistant {
	align-self: flex-start;
}

.avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	overflow: hidden;
}

.avatar.assistant-avatar {
	background: var(--accent-soft);
	padding: 6px;
}

.avatar.assistant-avatar img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.avatar.user-avatar {
	background: var(--info-soft);
	color: var(--info);
}

.message-col {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.message-row.user .message-col {
	align-items: flex-end;
}

.bubble {
	padding: 12px 14px;
	border-radius: var(--radius-card);
	font-size: 14px;
	line-height: 1.55;
	word-wrap: break-word;
	box-shadow: var(--shadow-sm);
}

.bubble.user {
	background: var(--accent);
	color: #ffffff;
	white-space: pre-wrap;
	border-bottom-right-radius: 4px;
}

.bubble.assistant {
	background: var(--surface);
	border: 1px solid var(--border);
	border-bottom-left-radius: 4px;
	max-width: 100%;
}

.bubble.assistant.pending::after {
	content: "▍";
	color: var(--accent);
	animation: blink 1s step-start infinite;
}

.bubble.error {
	background: var(--critical-soft);
	border: 1px solid var(--critical);
	color: var(--critical);
	white-space: pre-wrap;
}

/* 2026-10-17 fix - a small, non-alarming flag appended below an
   already-streamed reply when its connection died before the server's
   own completion signal arrived (app.js's sendMessage() catch block) -
   deliberately `warning`, not `critical`/`.bubble.error`'s red: the
   reply itself is very likely already fine (real incident: the server
   persists it before that signal is even sent), this just surfaces that
   the browser couldn't confirm it cleanly. */
.connection-lost-note {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed var(--warning);
	color: var(--warning);
	font-size: 12px;
}

@keyframes blink {
	50% { opacity: 0; }
}

/* Progress card - shown inside the assistant bubble while a Managed
   Agents turn is still running (Router thinking -> delegated ->
   specialist working -> synthesizing -> answer ready), replaced in
   place by the real reply the instant it starts streaming in. See
   app.js's createProgressController(). */
.bubble.progress-active {
	border-style: dashed;
}

.progress-card {
	display: flex;
	align-items: center;
	gap: 10px;
}

.progress-spinner {
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid var(--accent-soft);
	border-top-color: var(--accent);
	animation: progress-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.progress-spinner {
		animation: none;
	}
}

@keyframes progress-spin {
	to { transform: rotate(360deg); }
}

.progress-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.progress-phase {
	color: var(--text);
	font-weight: 500;
}

.progress-subtext {
	color: var(--text-dim);
	font-size: 12.5px;
}

.message-time {
	/* 2026-10-08, Real Ask: the "X sn'de cevap verildi" Duration Label Was
	   Never Removed From the Code - it Was Just Easy to Miss at --text-
	   faint (#9ca3af)/10.5px. Bumped to --text-dim (#6b7280, a Real,
	   Already-Defined Token - not a New Color) and a Touch Larger - Same
	   Position/Logic, Just Readable. */
	font-size: 11.5px;
	color: var(--text-dim);
	padding: 0 4px;
}

/* Markdown content inside an assistant bubble */

.bubble.assistant > *:first-child { margin-top: 0; }
.bubble.assistant > *:last-child { margin-bottom: 0; }
.bubble.assistant p { margin: 0 0 10px; }
.bubble.assistant ul, .bubble.assistant ol { margin: 0 0 10px; padding-left: 22px; }
.bubble.assistant li { margin-bottom: 4px; }
.bubble.assistant strong { color: var(--text); }
.bubble.assistant code {
	font-family: var(--font-mono);
	font-size: 12.5px;
	background: var(--surface-2);
	padding: 2px 5px;
	border-radius: 4px;
}
.bubble.assistant pre {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 10px 12px;
	overflow-x: auto;
	margin: 0 0 10px;
}
.bubble.assistant pre code { background: none; padding: 0; }
.bubble.assistant table {
	border-collapse: collapse;
	width: 100%;
	margin: 0 0 10px;
	font-size: 13px;
}
.bubble.assistant th, .bubble.assistant td {
	border: 1px solid var(--border);
	padding: 6px 8px;
	text-align: left;
}
.bubble.assistant th { background: var(--surface-2); font-weight: 600; }
.bubble.assistant blockquote {
	border-left: 3px solid var(--accent);
	margin: 0 0 10px;
	padding: 2px 12px;
	color: var(--text-dim);
}
.bubble.assistant a { color: var(--accent-dark); }
.bubble.assistant h1, .bubble.assistant h2, .bubble.assistant h3 {
	font-size: 15px;
	margin: 0 0 8px;
	color: var(--text);
}

/* --- Chart card (```chart blocks) --- */

.chart-wrapper {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 14px;
	margin: 0 0 10px;
	max-width: 560px;
}

/* --- PDF link + quick-action row under an assistant reply --- */

.reply-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 0 4px;
}

.pdf-link, .quick-action {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: var(--text-dim);
	text-decoration: none;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 5px 10px;
	cursor: pointer;
	font-family: var(--font-body);
}

.pdf-link:hover, .quick-action:hover {
	color: var(--accent-dark);
	border-color: var(--accent);
}

/* "Bildirildi" state (2026-10-17, data-request button) - a disabled
   .quick-action must look inert, not just behave that way; without this
   it would otherwise still show the same hover affordance above. */
.quick-action:disabled {
	cursor: default;
	opacity: 0.65;
}
.quick-action:disabled:hover {
	color: var(--text-dim);
	border-color: var(--border);
}

/* Specialist Explicitly Signaled a Report (```pdf-report Fence, see
   app.js's extractPdfReportBlock()) - Same Link/Route as .pdf-link, Just
   Styled Like .btn-primary so it Reads as "This Reply's Report is Ready"
   Instead of the Same Quiet Footer Link Every Reply Already Has. */
.pdf-link-highlight {
	color: #ffffff;
	background: var(--accent);
	border-color: var(--accent);
	font-weight: 600;
}

.pdf-link-highlight:hover {
	color: #ffffff;
	background: var(--accent-dark);
	border-color: var(--accent-dark);
}

/* --- Chat input row --- */

.chat-input-row {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	padding: 4px 24px 6px;
	/* Matches .messages's own widened max-width above - the input row has
	   to track it exactly, or the message list and the input box visibly
	   disagree on how wide the "chat column" actually is. */
	max-width: 1300px;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

.chat-input-row textarea {
	flex: 1;
	resize: none;
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: 22px;
	padding: 12px 18px;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 14px;
	max-height: 160px;
	box-shadow: var(--shadow-sm);
}

.chat-input-row textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.chat-input-row button {
	background: var(--accent);
	color: #ffffff;
	border: none;
	border-radius: 50%;
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.chat-input-row button:hover {
	background: var(--accent-dark);
}

.chat-input-row button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* "Durdur" Özelliği (2026-10-08) - #send-btn Doubles as a Stop Button
   While a Response is Streaming (app.js's setSendButtonMode()) - Red,
   not --accent, so it Reads as a Distinct, Deliberate Action, Matching
   --critical's Existing Use for Every Other "Something Needs Attention/
   is Stoppable" Signal in This File (e.g. .usage-meter-fill.usage-
   critical). #dc2626 (Tailwind red-600) is a Plain, one-off Darker Hover
   Shade - no --critical-dark Variable Exists in This File to Reuse. */
.chat-input-row button.stop-mode {
	background: var(--critical);
}

.chat-input-row button.stop-mode:hover {
	background: #dc2626;
}

.chat-disclaimer {
	text-align: center;
	font-size: 10.5px;
	color: var(--text-faint);
	margin: 0 0 12px;
}

/* --- Left Sidebar (Conversation History + Daily Usage) --- */

.sidebar {
	width: 300px;
	flex-shrink: 0;
	border-right: 1px solid var(--border);
	background: var(--surface);
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* A Real Flex Sidebar Needs a Real Screen to Coexist With Both the
   Centered Chat Content AND the Conditional Right-Hand Device Panel -
   Below This, it Hides Entirely (Same Graceful-Degradation Precedent
   #device-panel Already Established for its own Narrow-Screen Case)
   Rather Than Risk Squeezing #messages/.chat-input-row Down to an
   Unusably Narrow Column. */
@media (max-width: 980px) {
	.sidebar {
		display: none;
	}
}

.sidebar-section {
	padding: 16px;
}

.sidebar-conversations {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding-bottom: 8px;
}

/* Full-Width, Colored Primary CTA - Real Ask (2026-09-28): "yeni sohbet
   butonunu uygun ve renkli bir şekilde soldaki sohbetlerin en üstüne
   alalım". Reuses .btn-primary's Existing Accent-Colored Look (Already
   Established for the Admin Panel's "+ Yeni Kullanıcı" Button) Rather
   Than Inventing a Second Primary-Action Style - Only Overrides What
   Genuinely Differs Here (Full Width, Centered Content, Spacing Below
   Before the Conversation List Starts). */
.new-chat-btn {
	width: 100%;
	justify-content: center;
	margin-bottom: 16px;
}

.sidebar-title {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.conversation-list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 -8px;
}

.conversation-list-empty {
	margin: 4px 8px;
	font-size: 12.5px;
	color: var(--text-faint);
}

/* Two Separate Buttons Side by Side (Open / Delete), not one Button
   Nested Inside Another - Invalid HTML, and the two are Genuinely
   Distinct Actions Sharing one Row. */
.conversation-item {
	display: flex;
	align-items: center;
	gap: 2px;
	border-radius: 8px;
	padding: 2px;
}

.conversation-item:hover {
	background: var(--surface-2);
}

.conversation-item.active {
	background: var(--accent-soft);
}

.conversation-item-open {
	flex: 1;
	min-width: 0;
	display: block;
	text-align: left;
	background: transparent;
	border: none;
	border-radius: 6px;
	padding: 9px 8px;
	cursor: pointer;
	font-family: var(--font-body);
}

.conversation-item-title {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.conversation-item-time {
	display: block;
	font-size: 11px;
	color: var(--text-faint);
	margin-top: 2px;
}

.conversation-item-delete {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: 6px;
	color: var(--text-faint);
	cursor: pointer;
}

.conversation-item-delete svg {
	width: 14px;
	height: 14px;
}

.conversation-item-delete:hover {
	background: var(--critical-soft);
	color: var(--critical);
}

.usage-section {
	flex-shrink: 0;
	border-top: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.usage-panel-title {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.usage-meter {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.usage-meter-header {
	font-size: 12.5px;
	color: var(--text-dim);
}

.usage-meter-fraction {
	display: block;
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--text-faint);
	text-align: right;
}

.usage-meter-track {
	height: 6px;
	border-radius: var(--radius-pill);
	background: var(--surface-2);
	border: 1px solid var(--border);
	overflow: hidden;
}

.usage-meter-fill {
	height: 100%;
	width: 0%;
	border-radius: var(--radius-pill);
	background: var(--accent);
	transition: width 0.4s ease;
}

.usage-meter-fill.usage-warning {
	background: var(--warning);
}

.usage-meter-fill.usage-critical {
	background: var(--critical);
}

/* --- Device Context Panel --- */
/* Animated Flex Sibling (2026-10-09, revised same day - real, live
   feedback: the first cut made this position:absolute/overlay, which
   DID slide in smoothly but sat ON TOP of the chat column, covering
   its right edge - "sağdaki panel chat alanı üzerinde kalıyor...
   chat alanını bir tık küçültsün ki üzerine binmesin". So back to a
   REAL flex sibling (.chat-column's own flex:1 genuinely yields
   space to this panel, never overlapping it) - the "esnek/layer"
   feel instead comes from ANIMATING width/padding between 0 and
   320px, so the chat column visibly, smoothly resizes as the panel
   opens/closes rather than snapping instantly (the old pre-2026-10-09
   behavior). overflow:hidden is required so this panel's own 320px-
   wide content doesn't visibly spill out while width is mid-
   transition toward 0. Closing Stays EXACTLY as Before (Only the ✕
   Button, see app.js's renderDevicePanel()/resetDevicePanel()) -
   Deliberately no Click-Outside-to-Close, Which Would Contradict
   "Chat Aksa da Sabit Kalsın" (the Panel Should Only Ever Disappear
   on an Explicit User Action). */
.device-panel {
	width: 320px;
	flex-shrink: 0;
	border-left: 1px solid var(--border);
	background: var(--surface);
	overflow-y: auto;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: width 0.25s ease, padding 0.25s ease;
}

/* Overrides the Generic .hidden Utility (style.css's own `.hidden {
   display: none !important; }`, Used Everywhere Else in This App) -
   display:none Would Make the Width/Padding Transition Above
   Impossible to Animate (a display Change Can't Transition), so This
   Panel Specifically Stays display:flex and Instead Collapses to
   Zero Width/Padding (a Zero-Width Flex Item Takes no Visible Space -
   .chat-column's own flex:1 Smoothly Reclaims That Space as This
   Transitions) - overflow:hidden on the Base Rule Above Already
   Clips the 320px-wide Content While This is Mid-Collapse. Higher
   Specificity (.device-panel.hidden, two Classes) Than the Plain
   .hidden Rule, so This Wins Despite Both Using !important - no
   app.js Change Needed, Every Existing classList.add/remove
   ("hidden") Call Site Keeps Working As-Is. */
.device-panel.hidden {
	display: flex !important;
	width: 0;
	padding-left: 0;
	padding-right: 0;
	border-left: none;
}

.device-panel-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.device-panel-close {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 50%;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--text-dim);
	flex-shrink: 0;
}

.device-panel-close:hover {
	color: var(--critical);
	border-color: var(--critical);
}

.device-identity {
	display: flex;
	align-items: center;
	gap: 12px;
}

.device-icon {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	background: var(--surface-2);
	border: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent-dark);
	flex-shrink: 0;
}

.device-icon svg {
	width: 24px;
	height: 24px;
}

.device-name {
	font-weight: 700;
	font-size: 15px;
	color: var(--text);
}

.device-meta {
	font-size: 12px;
	color: var(--text-dim);
}

.device-id {
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--text-faint);
}

.status-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	width: fit-content;
}

.status-pill::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
}

.status-pill.running { background: var(--accent-soft); color: var(--accent-dark); }
.status-pill.running::before { background: var(--accent); }
.status-pill.stopped { background: var(--critical-soft); color: var(--critical); }
.status-pill.stopped::before { background: var(--critical); }
.status-pill.unknown { background: var(--surface-2); color: var(--text-faint); }
.status-pill.unknown::before { background: var(--text-faint); }

.device-last-seen {
	font-size: 11px;
	color: var(--text-faint);
}

.metrics-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.metric-tile {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 10px 12px;
}

.metric-value {
	font-family: var(--font-mono);
	font-size: 17px;
	font-weight: 700;
	color: var(--text);
}

.metric-value .metric-unit {
	font-size: 11px;
	font-weight: 500;
	color: var(--text-faint);
	margin-left: 2px;
}

.metric-label {
	font-size: 10.5px;
	color: var(--text-dim);
	margin-top: 2px;
}

.metric-tile.severity-warning .metric-value { color: var(--warning); }
.metric-tile.severity-critical .metric-value { color: var(--critical); }

.panel-section-title {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0 0 6px;
}

/* Phase-grouped gauges (R/S/T) - see app.js's phaseGaugeGroupHtml() for
   the JSON contract. Reuses .panel-section-title above for the group
   label (e.g. "Gerilim (V)"); each phase is a small semicircle SVG gauge
   + a metric-tile-style mono-font value below it. */
.phase-gauge-group {
	margin-bottom: 4px;
}

.phase-gauge-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
}

.phase-gauge-item {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 6px 4px 8px;
	text-align: center;
}

.phase-gauge-svg {
	width: 100%;
	height: auto;
	display: block;
}

.phase-gauge-track {
	fill: none;
	stroke: var(--border-strong);
	stroke-width: 5;
	stroke-linecap: round;
}

.phase-gauge-value {
	fill: none;
	stroke-width: 5;
	stroke-linecap: round;
	transition: d 0.2s ease;
}

.phase-gauge-needle {
	stroke: var(--text);
	stroke-width: 1.6;
	stroke-linecap: round;
}

.phase-gauge-hub {
	fill: var(--text);
}

.phase-gauge-value-text {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
	color: var(--text);
	margin-top: 2px;
}

.phase-gauge-phase-label {
	font-size: 10px;
	font-weight: 600;
	color: var(--text-faint);
	letter-spacing: 0.03em;
}

.suggestion-card {
	background: var(--accent-soft);
	border: 1px solid var(--accent);
	border-radius: 10px;
	padding: 12px;
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.suggestion-card svg {
	color: var(--accent-dark);
	margin-top: 2px;
}

.suggestion-card p {
	margin: 0;
	font-size: 12.5px;
	color: var(--text);
}

/* "Cinga'ya Sor" (2026-10-09) - Only Rendered by metricTileHtml() for
   a warning/critical Metric Tile (see app.js). Deliberately a Plain
   Inline Text Link, not a .btn-primary-style Button - a Metric Tile
   is Already Small/Dense, a Full Button Would Overwhelm it. */
.metric-ask-cinga {
	display: inline-block;
	margin-top: 6px;
	background: none;
	border: none;
	padding: 0;
	font-family: var(--font-body);
	font-size: 10.5px;
	font-weight: 600;
	color: var(--accent-dark);
	cursor: pointer;
	text-decoration: underline;
}

.metric-ask-cinga:hover {
	color: var(--accent);
}

/* .admin-* / .overlay / .badge* / .user-cell* / .stat-stack* /
   .cost-value* / .last-login-value* / .danger-btn CSS Removed Entirely
   (2026-10-01, Aşama 7e) - That Whole Admin Panel is Gone From This
   Service's own Frontend (see index.html/app.js's own Removal
   Comments). .btn-primary (Still Used by #new-chat-btn) Kept Below,
   Moved out of What Used to be This Section. */

.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--accent);
	color: #ffffff;
	border: none;
	border-radius: 9px;
	padding: 9px 16px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}

.btn-primary:hover {
	background: var(--accent-dark);
}

.btn-primary svg {
	width: 15px;
	height: 15px;
}

/* --- Sorun Bildir Modali (2026-10-08) --- */
/* Deliberately Named issue-report-*, not the Generic .overlay/.panel
   Those Class Names Used to be (Removed Entirely 2026-10-01, Aşama 7e,
   When the old Admin Panel Left This Service - see the Removal Comment
   Above .btn-primary) - a Fresh, Narrowly-Scoped Set so a Future "remove
   this too" Decision Can't Collide With Anything Else. */

.issue-report-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 40;
}

.issue-report-panel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-md);
	padding: 20px;
	width: 100%;
	max-width: 480px;
}

.issue-report-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	font-weight: 700;
	font-size: 15px;
	color: var(--text);
}

.issue-report-panel textarea {
	width: 100%;
	min-height: 110px;
	resize: vertical;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 10px 12px;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--text);
	margin-bottom: 12px;
}

.issue-report-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

.issue-report-message {
	font-size: 12.5px;
	color: var(--text-dim);
	margin: 8px 0 0;
}

/* "Eksik bilgiyi Ovoo ekibine bildir" Modali (2026-10-17) - Deliberately
   its own data-request-* Set, Same Narrow-Naming Reasoning as
   .issue-report-* Above, Reusing That Modal's Overlay/Panel/Header/
   Actions/Message Shape Directly (Same Class Names) and Only Adding
   What's Genuinely New Here: the per-Item List. */

.data-request-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 40;
}

.data-request-panel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-md);
	padding: 20px;
	width: 100%;
	max-width: 520px;
	max-height: 85vh;
	overflow-y: auto;
}

.data-request-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	font-weight: 700;
	font-size: 15px;
	color: var(--text);
}

.data-request-items {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 12px;
}

.data-request-item {
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 10px 12px;
	background: var(--bg);
}

.data-request-item-field {
	font-weight: 600;
	font-size: 13px;
	color: var(--text);
	margin-bottom: 2px;
}

.data-request-item-detail {
	font-size: 12px;
	color: var(--text-dim);
	margin-bottom: 8px;
}

.data-request-item input.data-request-value-input {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 6px 10px;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--text);
}

.data-request-panel textarea {
	width: 100%;
	min-height: 70px;
	resize: vertical;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 10px 12px;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--text);
	margin-bottom: 12px;
}

.data-request-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

.data-request-message {
	font-size: 12.5px;
	color: var(--text-dim);
	margin: 8px 0 0;
}