/*
  Scoped embed stylesheet for integrating the RMAF chat inside index.html
  without affecting existing host styles. All selectors are namespaced under
  #irenChatRoot and only variables within that subtree are defined.
*/

/* Scoped design tokens (extracted from base.css) */
#irenChatRoot {
  /* Primitive Color Tokens */
  --color-white: rgba(255, 255, 255, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-cream-50: rgba(252, 252, 249, 1);
  --color-cream-100: rgba(255, 255, 253, 1);
  --color-gray-200: rgba(245, 245, 245, 1);
  --color-gray-300: rgba(167, 169, 169, 1);
  --color-gray-400: rgba(119, 124, 124, 1);
  --color-slate-500: rgba(98, 108, 113, 1);
  --color-brown-600: rgba(94, 82, 64, 1);
  --color-charcoal-700: rgba(31, 33, 33, 1);
  --color-charcoal-800: rgba(38, 40, 40, 1);
  --color-slate-900: rgba(19, 52, 59, 1);
  --color-teal-300: rgba(50, 184, 198, 1);
  --color-teal-400: rgba(45, 166, 178, 1);
  --color-teal-500: rgba(33, 128, 141, 1);
  --color-teal-600: rgba(29, 116, 128, 1);
  --color-teal-700: rgba(26, 104, 115, 1);
  --color-teal-800: rgba(41, 150, 161, 1);
  --color-red-400: rgba(255, 84, 89, 1);
  --color-red-500: rgba(192, 21, 47, 1);
  --color-orange-400: rgba(230, 129, 97, 1);
  --color-orange-500: rgba(168, 75, 47, 1);

  /* RGB versions for opacity control */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;
  --color-slate-500-rgb: 98, 108, 113;
  --color-red-500-rgb: 192, 21, 47;
  --color-red-400-rgb: 255, 84, 89;
  --color-orange-500-rgb: 168, 75, 47;
  --color-orange-400-rgb: 230, 129, 97;

  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-rgb: var(--color-teal-500-rgb);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-border-light: rgba(var(--color-brown-600-rgb), 0.1);
  --color-border-dark: rgba(var(--color-brown-600-rgb), 0.3);
  --color-surface-hover: rgba(var(--color-brown-600-rgb), 0.05);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-danger: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
  --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);

  /* Common style patterns */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* Typography */
  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 30px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 550;
  --font-weight-bold: 600;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --letter-spacing-tight: -0.01em;

  /* Spacing */
  --space-0: 0;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-base: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.03);

  /* Layout helpers used by chat */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 52px;
  --header-height: 64px;
  --input-area-height: auto;
  --panel-gap: 12px;
}

/* Dark mode colors (auto via OS preference) */
@media (prefers-color-scheme: dark) {
  #irenChatRoot {
    /* RGB versions for opacity control (Dark Mode) */
    --color-gray-400-rgb: 119, 124, 124;
    --color-teal-300-rgb: 50, 184, 198;
    --color-gray-300-rgb: 167, 169, 169;
    --color-gray-200-rgb: 245, 245, 245;

    /* Semantic Color Tokens (Dark Mode) */
    --color-background: var(--color-charcoal-700);
    --color-surface: var(--color-charcoal-800);
    --color-text: var(--color-gray-200);
    --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
    --color-primary: var(--color-teal-300);
    --color-primary-rgb: var(--color-teal-300-rgb);
    --color-primary-hover: var(--color-teal-400);
    --color-primary-active: var(--color-teal-800);
    --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
    --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
    --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
    --color-border: rgba(var(--color-gray-400-rgb), 0.3);
    --color-border-light: rgba(var(--color-gray-400-rgb), 0.15);
    --color-border-dark: rgba(var(--color-gray-400-rgb), 0.45);
    --color-surface-hover: rgba(var(--color-gray-400-rgb), 0.1);
    --color-error: var(--color-red-400);
    --color-danger: var(--color-red-400);
    --color-success: var(--color-teal-300);
    --color-warning: var(--color-orange-400);
    --color-info: var(--color-gray-300);
    --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
    --color-btn-primary-text: var(--color-slate-900);
    --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
    --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
    --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);
  }

  /* Use dark caret icon for selects in dark mode */
  #irenChatRoot select.form-control { background-image: var(--select-caret-dark); }
}

/* Manual theme switching via data attribute on <html> */
[data-color-scheme="dark"] #irenChatRoot {
  /* RGB versions for opacity control (Dark Mode) */
  --color-gray-400-rgb: 119, 124, 124;
  --color-teal-300-rgb: 50, 184, 198;
  --color-gray-300-rgb: 167, 169, 169;
  --color-gray-200-rgb: 245, 245, 245;

  /* Semantic Color Tokens (Dark Mode) */
  --color-background: var(--color-charcoal-700);
  --color-surface: var(--color-charcoal-800);
  --color-text: var(--color-gray-200);
  --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
  --color-primary: var(--color-teal-300);
  --color-primary-rgb: var(--color-teal-300-rgb);
  --color-primary-hover: var(--color-teal-400);
  --color-primary-active: var(--color-teal-800);
  --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
  --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
  --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
  --color-border: rgba(var(--color-gray-400-rgb), 0.3);
  --color-border-light: rgba(var(--color-gray-400-rgb), 0.15);
  --color-border-dark: rgba(var(--color-gray-400-rgb), 0.45);
  --color-surface-hover: rgba(var(--color-gray-400-rgb), 0.1);
  --color-error: var(--color-red-400);
  --color-danger: var(--color-red-400);
  --color-success: var(--color-teal-300);
  --color-warning: var(--color-orange-400);
  --color-info: var(--color-gray-300);
  --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
  --color-btn-primary-text: var(--color-slate-900);
  --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
  --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
  --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);
}

[data-color-scheme="dark"] #irenChatRoot select.form-control { background-image: var(--select-caret-dark); }
[data-color-scheme="light"] #irenChatRoot select.form-control { background-image: var(--select-caret-light); }

/* Container sizing so chat fills available area inside host layout */
#irenChatRoot {
  display: block;
}

#irenChatRoot .app-container {
  display: flex;
  flex-direction: column;
  height: var(--app-viewport-height, 100%);
  background-color: transparent;
  border-radius: 0;
  border: none;
  overflow: hidden;
}

/* ===== Scoped from layout.css ===== */
#irenChatRoot .main-content {
  flex: 1;
  display: flex;
  min-height: 0;
}

#irenChatRoot .chat-layout {
  display: flex;
  flex: 1;
  width: 100%;
  min-width: 0;
  align-items: stretch;
  gap: var(--panel-gap);
}

/* Generic panel card to visually split app elements */
#irenChatRoot .panel-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

#irenChatRoot .sidebar {
  width: var(--sidebar-width);
  background: transparent;
  border-right: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: width 240ms ease, margin-left 0.3s ease;
  will-change: width;
}
#irenChatRoot .sidebar.collapsed { width: var(--sidebar-collapsed-width); }
#irenChatRoot .sidebar.collapsed .sidebar-header { padding: 6px; justify-content: center; gap: 0; }

/* Animate title hide/show */
#irenChatRoot .sidebar-header h3 {
  transition: opacity 200ms ease, width 200ms ease, margin 200ms ease;
  white-space: nowrap;
  overflow: hidden;
}
#irenChatRoot .sidebar:not(.collapsed) .sidebar-header h3 { opacity: 1; }
#irenChatRoot .sidebar.collapsed .sidebar-header h3 { opacity: 0; width: 0; margin: 0; }

/* Animate sidebar content fade */
#irenChatRoot .sidebar-content { transition: opacity 200ms ease; }
#irenChatRoot .sidebar.collapsed .sidebar-content { opacity: 0; visibility: hidden; pointer-events: none; }

#irenChatRoot .sidebar-header { padding: 6px 16px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 8px; height: var(--header-height, 64px); box-sizing: border-box; }
#irenChatRoot .sidebar-header h3 { margin: 0; font-size: var(--font-size-lg); }
#irenChatRoot .sidebar-header .panel-icon { margin-left: auto; width: 20px; height: 20px; color: var(--color-primary); cursor: pointer; transition: background-color 0.2s, color 0.2s; border-radius: 50%; }
#irenChatRoot .sidebar-header .panel-icon.btn--icon { padding: 0; }
#irenChatRoot .sidebar-header .panel-icon svg { width: 18px; height: 18px; display: block; }
#irenChatRoot .sidebar-header .panel-icon:hover { background-color: var(--color-secondary-hover); box-shadow: 0 0 0 6px var(--color-secondary-hover); color: var(--color-primary-hover); }
#irenChatRoot .sidebar-header .panel-icon:active { background-color: var(--color-secondary-active); box-shadow: 0 0 0 6px var(--color-secondary-active); }
#irenChatRoot .sidebar.collapsed .sidebar-header .panel-icon { margin-left: 0; }
#irenChatRoot .sidebar-header .icon-maximize { display: none; }
#irenChatRoot .sidebar.collapsed .icon-minimize { display: none; }
#irenChatRoot .sidebar.collapsed .icon-maximize { display: inline; }

/* Make the panel-header icon clickable to toggle collapse */
#irenChatRoot .sidebar-header .panel-icon { cursor: pointer; }
#irenChatRoot .sidebar-header .panel-icon:active { transform: scale(0.96); }
#irenChatRoot .sidebar-content { flex: 1; overflow-y: auto; padding: 16px; }

#irenChatRoot .rmaf-properties { display: flex; flex-direction: column; gap: 20px; }
#irenChatRoot .property-category { background-color: var(--color-background); border-radius: 8px; padding: 16px; border: 1px solid var(--color-border); transition: all 0.3s ease; }
#irenChatRoot .property-category:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
#irenChatRoot .property-category.active { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.08); }
#irenChatRoot .property-category.active .category-title { border-bottom-color: var(--color-primary); }
#irenChatRoot .property-item.active { background-color: var(--color-surface-hover); border-radius: 4px; padding: 8px; margin: 0 -8px; }
#irenChatRoot .category-title { margin: 0 0 12px 0; font-size: var(--font-size-md); font-weight: 600; color: var(--color-primary); border-bottom: 2px solid var(--color-primary); padding-bottom: 8px; display: flex; align-items: center; }
#irenChatRoot .category-title::after { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: var(--color-border-light); margin-left: auto; transition: background-color 0.3s ease, box-shadow 0.3s ease; }
#irenChatRoot .property-category.has-summary .category-title::after { background-color: var(--color-success); }

#irenChatRoot .llm-summary { background-color: var(--color-surface); border-radius: 6px; padding: 12px; margin: 12px 0; border: 1px solid var(--color-border-light); border-left: 4px solid var(--color-primary); animation: slideInSummary 0.3s ease-out; transform-origin: top; }
@keyframes slideInSummary { from { opacity: 0; transform: translateY(-10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
#irenChatRoot .summary-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
#irenChatRoot .summary-icon { font-size: 16px; }
#irenChatRoot .summary-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-primary); }
#irenChatRoot .summary-content h5 { margin: 8px 0 4px 0; font-size: var(--font-size-xs); font-weight: 600; color: var(--color-text); }
#irenChatRoot .findings-list, #irenChatRoot .recommendations-list { margin: 4px 0 8px 0; padding-left: 16px; }
#irenChatRoot .findings-list li, #irenChatRoot .recommendations-list li { font-size: var(--font-size-xs); color: var(--color-text-secondary); line-height: 1.4; margin-bottom: 2px; }
#irenChatRoot .property-items { margin-top: 12px; }
#irenChatRoot .property-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--color-border-light); }
#irenChatRoot .property-item:last-child { border-bottom: none; }
#irenChatRoot .property-number { font-size: var(--font-size-xs); font-weight: 600; background-color: var(--color-primary); color: var(--color-btn-primary-text); padding: 2px 6px; border-radius: 4px; min-width: 24px; text-align: center; line-height: 1.2; }
#irenChatRoot .property-description { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.4; flex: 1; }
#irenChatRoot .property-item:hover { background-color: var(--color-surface-hover); border-radius: 4px; padding: 8px; margin: 0 -8px; }

#irenChatRoot .sidebar-content::-webkit-scrollbar { width: 6px; }
#irenChatRoot .sidebar-content::-webkit-scrollbar-track { background: var(--color-surface); }
#irenChatRoot .sidebar-content::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
#irenChatRoot .sidebar-content::-webkit-scrollbar-thumb:hover { background: var(--color-border-dark); }

#irenChatRoot .chat-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: transparent; gap: var(--panel-gap); }
#irenChatRoot .chat-card { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
#irenChatRoot .sidebar .panel-card { display: flex; flex-direction: column; flex: 1 1 auto; height: 100%; }
#irenChatRoot .sidebar.collapsed .panel-card { padding-left: 0 !important; padding-right: 0 !important; }
#irenChatRoot .progress-section { padding: 6px 16px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 16px; height: var(--header-height, 64px); box-sizing: border-box; }
#irenChatRoot .progress-text { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
#irenChatRoot .progress-bar-container { flex: 1; }
#irenChatRoot #toggleFullscreen { margin-left: auto; color: var(--color-primary); }
#irenChatRoot #toggleFullscreen:hover { color: var(--color-primary-hover); }
#irenChatRoot #toggleFullscreen .fullscreen-icon { width: 18px; height: 18px; display: block; }
#irenChatRoot .chat-messages { flex: 1; overflow-y: auto; padding: 24px; scroll-behavior: smooth; }
#irenChatRoot .chat-input-area { padding: 16px 24px; border-top: 1px solid var(--color-border); background-color: var(--color-background); }
#irenChatRoot .chat-input-container { display: flex; align-items: center; gap: 12px; }
#irenChatRoot .input-actions-left, #irenChatRoot .input-actions-right { display: flex; align-items: center; gap: 8px; }
#irenChatRoot .input-actions-left .btn, #irenChatRoot .input-actions-right .btn { background: transparent; border: none; color: var(--color-text-secondary); cursor: pointer; padding: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s, color 0.2s; }
#irenChatRoot .input-actions-left .btn:hover, #irenChatRoot .input-actions-right .btn:hover { background-color: var(--color-secondary-hover); color: var(--color-text); }
#irenChatRoot #voiceInput, #irenChatRoot #uploadScreenshot { color: var(--color-primary); }
#irenChatRoot #voiceInput:hover, #irenChatRoot #uploadScreenshot:hover { color: var(--color-primary-hover); }
#irenChatRoot #voiceInput.recording { background: var(--color-danger); color: #fff; animation: recordingPulse 1.5s infinite; box-shadow: 0 0 2px rgba(255,0,0,0.3), 0 0 4px rgba(255,0,0,0.2), 0 0 6px rgba(255,0,0,0.1), 0 0 8px rgba(255,0,0,0.05); }
#irenChatRoot #sendMessage { color: var(--color-primary); }
#irenChatRoot #sendMessage:hover { color: var(--color-primary-hover); transform: none; }
#irenChatRoot #sendMessage:disabled { color: var(--color-text-secondary); background-color: transparent; cursor: not-allowed; }
#irenChatRoot .chat-input-footer { font-size: var(--font-size-xs); color: var(--color-text-secondary); display: flex; justify-content: space-between; padding: 4px 8px 0; }
#irenChatRoot .hidden { display: none !important; }
#irenChatRoot .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Align char counter under textarea left edge using grid layout */
#irenChatRoot .chat-input-area { display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; }
#irenChatRoot .chat-input-container { display: contents; }
#irenChatRoot .input-actions-left { grid-column: 1; }
#irenChatRoot .chat-input { grid-column: 2; }
#irenChatRoot .input-actions-right { grid-column: 3; }
#irenChatRoot .chat-input-footer { grid-column: 2 / 4; padding-left: 0; }

@media (max-width: 768px) {
  /* Compact spacing and ensure everything fits between header and footer */
  #irenChatRoot { --panel-gap: 8px; --header-height: 44px; }
  /* Mobile slide-in behavior removed along with hamburger */
  #irenChatRoot .sidebar { position: relative; height: 100%; z-index: auto; box-shadow: none; margin-left: 0; }
  #irenChatRoot .sidebar-overlay { display: none !important; }
  #irenChatRoot .chat-panel { width: 100%; }
  #irenChatRoot .chat-messages { padding: 16px; }
  #irenChatRoot .chat-input-area { padding: 12px; }

  /* Ensure sidebar and chat headers share a consistent fixed height */
  #irenChatRoot .sidebar-header,
  #irenChatRoot .progress-section {
    height: 44px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }

  /* When category (sidebar) is maximized on small screens, show only the fullscreen icon in chat title */
  #irenChatRoot .sidebar:not(.collapsed) ~ .chat-panel .progress-section .progress-text,
  #irenChatRoot .sidebar:not(.collapsed) ~ .chat-panel .progress-section .progress-bar-container {
    display: none !important;
  }
  #irenChatRoot .sidebar:not(.collapsed) ~ .chat-panel .progress-section {
    padding: 6px 8px;
  }

  /* Fullscreen mode on small screens: show only chat and input cards (keep chat title visible) */
  #irenChatRoot.host-chrome-hidden .sidebar { display: none !important; }
  #irenChatRoot.host-chrome-hidden .chat-panel { gap: 8px; width: 100%; }
  #irenChatRoot.host-chrome-hidden .chat-messages { padding-top: 8px; }

  /* In fullscreen on small screens: remove card chrome for messages and input,
     but keep the progress section as a standalone card at the top */
  #irenChatRoot.host-chrome-hidden .chat-panel .panel-card.chat-card {
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  #irenChatRoot.host-chrome-hidden .chat-panel .panel-card.chat-card .progress-section {
    background-color: var(--color-surface);
    border: 1px solid var(--color-card-border);
    border-radius: 12px;
    border-bottom: 0;
    margin: 0 0 8px 0;
  }
  #irenChatRoot.host-chrome-hidden .chat-input-area.panel-card {
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  /* Break out of padded host container so embed uses full device width */
  #irenChatRoot {
    position: relative;
    width: 100vw;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
  }

  /* Ensure inner container doesn't re-introduce horizontal overflow */
  #irenChatRoot .app-container {
    max-width: 100vw;
  }

  /* When host chrome is hidden, use full dynamic viewport height */
  #irenChatRoot.host-chrome-hidden .app-container {
    height: 100vh;
    height: 100dvh;
  }
}

/* Hide overlay from layout flow on larger screens so it doesn't affect gaps */
#irenChatRoot .sidebar-overlay { display: none; }

/* Remove extra gap below host header on this page */
body > header.app-header { margin-bottom: 0 !important; }
body > footer.app-footer { margin-top: 0 !important; }

/* Compact host header/footer padding on small screens */
@media (max-width: 768px) {
  body > header.app-header { padding-top: 8px !important; padding-bottom: 8px !important; }
  body > footer.app-footer { padding-top: 4px !important; padding-bottom: 4px !important; margin-top: 0 !important; }
  
  /* Fix iPhone viewport height issues */
  body { min-height: 100vh; min-height: 100dvh; }
  html { height: 100%; }
  
  /* Prevent iOS Safari address bar from causing layout shifts */
  #irenChatRoot .app-container {
    height: var(--app-viewport-height, 100dvh);
    min-height: 400px;
  }
}

/* ===== Scoped from chat.css ===== */
#irenChatRoot .message { display: flex; gap: 16px; margin-bottom: 14px; max-width: 85%; align-items: flex-start; }
#irenChatRoot .message--user { margin-left: auto; flex-direction: row-reverse; }
#irenChatRoot .message-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-medium); flex-shrink: 0; background-color: var(--color-primary); color: var(--color-btn-primary-text); }
#irenChatRoot .message-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
#irenChatRoot .message--ai .message-avatar { background-color: var(--color-secondary); color: var(--color-text); }
#irenChatRoot .message-content { display: flex; flex-direction: column; align-items: flex-start; }
#irenChatRoot .message--user .message-content { align-items: flex-end; }
#irenChatRoot .message-bubble { padding: 12px 16px; border-radius: 18px; word-wrap: break-word; line-height: 1.5; background-color: var(--color-background); border: 1px solid var(--color-border); }
#irenChatRoot .message--user .message-bubble { background-color: var(--color-primary); color: var(--color-btn-primary-text); border: none; border-bottom-right-radius: 4px; }
#irenChatRoot .message--ai .message-bubble { border-bottom-left-radius: 4px; }
#irenChatRoot .message-text { margin: 0; }
#irenChatRoot .message-text > *:first-child { margin-top: 0; }
#irenChatRoot .message-text > *:last-child { margin-bottom: 0; }
#irenChatRoot .message--thinking .message-bubble, #irenChatRoot .message.typing-indicator .message-bubble { background-color: var(--color-background); border: 1px solid var(--color-border); }

#irenChatRoot .message-text code { background: rgba(var(--color-primary-rgb), 0.1); padding: 2px 6px; border-radius: 4px; font-family: var(--font-family-mono); font-size: 0.9em; color: var(--color-primary); border: 1px solid rgba(var(--color-primary-rgb), 0.2); }
#irenChatRoot .message-text ul { list-style: disc outside; margin: 6px 0; padding-left: 1.25rem; }
#irenChatRoot .message-text ol { list-style: decimal outside; margin: 6px 0; padding-left: 1.25rem; }
#irenChatRoot .message-text li { margin: 3px 0; line-height: 1.5; }
#irenChatRoot .message-text p { margin: 6px 0; }

#irenChatRoot .typing-indicator { display: flex; align-items: center; gap: 8px; padding: 0; font-size: inherit; line-height: inherit; min-height: 1.5em; }
#irenChatRoot .typing-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-text-secondary); animation: typing-bounce 1.4s infinite ease-in-out both; }
#irenChatRoot .typing-dot:nth-child(2) { animation-delay: -0.32s; }
#irenChatRoot .typing-dot:nth-child(3) { animation-delay: -0.16s; }
@keyframes typing-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } }

#irenChatRoot .chat-input { flex: 1; border: 1px solid var(--color-border); border-radius: 12px; padding: 10px 16px; font-size: var(--font-size-base); line-height: 1.5; resize: none; min-height: 42px; max-height: 200px; background: var(--color-surface); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02); transition: border-color 0.2s ease, box-shadow 0.2s ease, height 0.2s ease; overflow-y: hidden; }
#irenChatRoot .chat-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring), 0 4px 12px rgba(var(--color-primary-rgb), 0.1); outline: none; }

#irenChatRoot .input-actions-left .btn svg, #irenChatRoot .input-actions-right .btn svg { width: 20px; height: 20px; stroke-width: 2; }
#irenChatRoot #sendMessage { background: transparent; color: var(--color-primary); border: none; }
#irenChatRoot #sendMessage:hover { background-color: var(--color-secondary-hover); color: var(--color-primary-hover); }
#irenChatRoot #sendMessage:disabled { background: transparent; color: var(--color-text-secondary); border: none; opacity: 0.6; cursor: not-allowed; }
#irenChatRoot .btn--icon:disabled, #irenChatRoot .input-actions-left .btn[disabled], #irenChatRoot .input-actions-right .btn[disabled], #irenChatRoot #uploadScreenshot:disabled { background: transparent; color: var(--color-text-secondary); opacity: 0.6; cursor: not-allowed; }

@media (max-width: 768px) {
  #irenChatRoot .chat-messages { padding: 16px; }
  #irenChatRoot .chat-input-area { padding: 12px; }
  /* Prevent iOS Safari zoom on focus by ensuring >=16px */
  #irenChatRoot .chat-input { padding: 12px; min-height: 44px; max-height: 120px; font-size: 16px; }
}
@media (max-width: 480px) {
  #irenChatRoot .message { gap: 8px; }
  #irenChatRoot .message-avatar { width: 32px; height: 32px; font-size: 14px; }
  #irenChatRoot .message-bubble { padding: 10px 14px; font-size: var(--font-size-sm); }
  #irenChatRoot .chat-input { padding: 10px; min-height: 40px; max-height: 100px; }
  #irenChatRoot .chat-input-footer { display: none; }
}

/* ===== Scoped from progress.css ===== */
#irenChatRoot .progress-bar { width: 100%; height: 8px; background: var(--color-background); border-radius: 4px; overflow: hidden; position: relative; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); }
#irenChatRoot .progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); border-radius: 4px; transition: width 0.6s ease; position: relative; box-shadow: 0 2px 4px rgba(var(--color-primary-rgb), 0.3); }
#irenChatRoot .progress-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%); animation: progressShine 2s infinite; }
@keyframes progressShine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ===== Scoped essentials from components.css ===== */
#irenChatRoot .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border: none; border-radius: 8px; font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: 1.4; text-decoration: none; cursor: pointer; transition: all 0.2s ease; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#irenChatRoot .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%); transition: left 0.5s ease; }
#irenChatRoot .btn:hover::before { left: 100%; }
#irenChatRoot .btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
#irenChatRoot .btn--icon { background: transparent; border: none; color: var(--color-text-secondary); cursor: pointer; padding: 6px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.2s, color 0.2s; }
#irenChatRoot .btn--icon:hover { background-color: var(--color-secondary-hover); color: var(--color-text); }
#irenChatRoot .btn--primary { background: var(--color-primary); color: var(--color-btn-primary-text); box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3); }
#irenChatRoot .btn--primary:hover { background: var(--color-primary-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.4); }
#irenChatRoot .btn--primary:active { background: var(--color-primary-active); transform: translateY(0); box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3); }
#irenChatRoot .btn--secondary { background: var(--color-secondary); color: var(--color-text); border: 1px solid var(--color-border); }
#irenChatRoot .btn--outline { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); }
#irenChatRoot .btn--outline:hover { background: var(--color-primary); color: var(--color-btn-primary-text); }
#irenChatRoot .btn--sm { padding: 6px 12px; font-size: var(--font-size-sm); }
#irenChatRoot .btn--lg { padding: 12px 24px; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
#irenChatRoot .btn:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
#irenChatRoot .form-control { width: 100%; padding: 12px 16px; border: 2px solid var(--color-border); border-radius: 8px; font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: 1.5; background: var(--color-surface); color: var(--color-text); transition: all 0.2s ease; }
#irenChatRoot select.form-control { appearance: none; background-image: var(--select-caret-light); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 40px; }
#irenChatRoot .form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); }
#irenChatRoot .form-control:invalid { border-color: var(--color-error); }
#irenChatRoot .form-control:invalid:focus { box-shadow: 0 0 0 3px rgba(var(--color-error-rgb), 0.2); }
#irenChatRoot .form-label { display: block; margin-bottom: 6px; font-weight: var(--font-weight-medium); color: var(--color-text); font-size: var(--font-size-sm); }
#irenChatRoot .form-group { margin-bottom: 16px; }




/* Smooth transitions for fullscreen toggle */
#irenChatRoot.fs-animating .app-container {
  transition: height 240ms ease;
}

#irenChatRoot.fs-animating .chat-panel {
  transition: gap 240ms ease;
}

#irenChatRoot.fs-animating .panel-card,
#irenChatRoot.fs-animating .chat-input-area,
#irenChatRoot.fs-animating .chat-messages,
#irenChatRoot.fs-animating .progress-section {
  transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease, padding 240ms ease, margin 240ms ease, height 240ms ease;
}

/* Hint the browser for better perf on toggles */
#irenChatRoot.fs-animating .panel-card,
#irenChatRoot.fs-animating .chat-input-area,
#irenChatRoot.fs-animating .chat-messages,
#irenChatRoot.fs-animating .progress-section,
#irenChatRoot.fs-animating .chat-panel,
#irenChatRoot.fs-animating .app-container {
  will-change: height, padding, margin, gap, background-color, border-color, box-shadow;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #irenChatRoot * { transition: none !important; animation: none !important; }
}