/* Base Styles & Variables (Unchanged) */
:root {
    --background: 240 10% 3.9%; --foreground: 0 0% 98%; --background-hero: 5 5% 5%;
    --purple-300: hsl(259, 90%, 80%); --purple-400: hsl(259, 90%, 65%); --purple-950: hsl(259, 50%, 10%); --orange-200: hsl(30, 90%, 80%); --pink-600:   hsl(330, 80%, 60%);
    --gray-400:   hsl(240, 5%, 65%); --gray-600:   hsl(240, 4%, 46%); --gray-800:   hsl(240, 6%, 20%); --gray-900:   hsl(240, 6%, 10%);
    --white-5:    hsla(0, 0%, 100%, 0.05); --white-10:   hsla(0, 0%, 100%, 0.10); --purple-400-10: hsla(259, 90%, 65%, 0.10); --purple-400-20: hsla(259, 90%, 65%, 0.20); --purple-400-30: hsla(259, 90%, 65%, 0.30); --purple-950-30: hsla(259, 50%, 10%, 0.30); --zinc-300-5:    hsla(240, 5%, 84%, 0.05); --zinc-300-10:   hsla(240, 5%, 84%, 0.10);
    --success: hsl(134, 61%, 41%); --success-background: hsla(134, 61%, 41%, 0.1); --success-border: hsla(134, 61%, 41%, 0.3); --warning: hsl(45, 100%, 51%); --warning-background: hsla(45, 100%, 51%, 0.1); --warning-border: hsla(45, 100%, 51%, 0.3); --danger: hsl(354, 70%, 54%); --danger-background: hsla(354, 70%, 54%, 0.1); --danger-border: hsla(354, 70%, 54%, 0.3); --info: hsl(208, 100%, 50%); --info-background: hsla(208, 100%, 50%, 0.1); --info-border: hsla(208, 100%, 50%, 0.3);
    --card-background: var(--white-5); --card-content-background: hsl(var(--background)); --card-content-text: hsl(var(--foreground)); --card-border: var(--white-10); --card-header-background: var(--gray-800); --muted-foreground: var(--gray-400); --muted-background: var(--white-5); --input-border: var(--white-10); --timeline-line-color: var(--gray-600);
    --font-family-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800;
    --tracking-tighter: -0.05em; --tracking-tight: -0.025em;
    --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --timeline-indent: 4rem;
    --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-full: 9999px;
    --sticky-top-offset: 10px; /* Space above sticky card */
    --font-weight-light: 300;
    --tracking-tighter: -0.05em;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: var(--font-family-sans); }
body { 
  background-color: hsla(259, 50%, 10%, 0.05); /* purple-950/5 */
  background-image: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(120,119,198,0.15), rgba(255,255,255,0));
  color: hsl(var(--foreground)); 
  min-height: 100vh; line-height: inherit; font-family: var(--font-family-sans); height: auto; overflow: hidden; }
.hidden { display: none !important; }
.inline-block { display: inline-block; } .text-center { text-align: center; }
.text-gradient { background-clip: text; -webkit-background-clip: text; color: transparent; background-image: linear-gradient(to right, var(--purple-300), var(--orange-200)); }
.text-gradient-purple-pink { 
  font-size: 2.25rem; /* text-4xl */
  font-weight: var(--font-weight-light);
  margin-bottom: 1.5rem; /* mb-6 */
  text-align: center;
  letter-spacing: var(--tracking-tighter);
  background-clip: text; 
  -webkit-background-clip: text; 
  color: transparent; 
  background-image: linear-gradient(to right, var(--purple-400), var(--pink-600)); 
}
.icon { display: inline-block; vertical-align: middle; line-height: 1; width: 1em; height: 1em; }

span strong {
  margin-left: 4px !important;
}

span i {
  margin-right: 4px !important;
}

/* --- Layout & Wrapper --- */
.demo-wrapper { max-width: 1280px; margin: var(--space-lg) auto; border-radius: var(--radius-lg); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; height: calc(100vh - (var(--space-lg) * 2)); overflow: hidden; }
.demo-header { color: hsl(var(--foreground)); padding: var(--space-lg) var(--space-xl); text-align: center; flex-shrink: 0; }
.demo-header h1 { 
  margin: 0 0 var(--space-sm) 0; 
  font-size: 2.25rem; /* text-4xl */
  font-weight: var(--font-weight-light);
  margin-bottom: 0.5rem;
  text-align: center;
  letter-spacing: var(--tracking-tighter);
}
.demo-header p { margin: 0; font-size: 0.95rem; color: var(--muted-foreground); font-weight: var(--font-weight-light); }
.demo-main-content { display: flex; padding: var(--space-md); gap: var(--space-md); flex: 1 1 auto; min-height: 0; align-items: stretch; position: relative; /* For mobile island positioning */ }

/* --- Panels --- */
.panel { background-color: var(--card-background); border-radius: var(--radius-lg); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); border: 1px solid var(--card-border); display: flex; flex-direction: column; overflow: hidden; }
.source-stream-panel { flex: 0 0 450px; width: 450px; max-width: 450px; padding: 0; gap: 0; }
.insights-panel { flex: 1; min-width: 0; background: none; border: none; gap: var(--space-md); overflow-y: auto; display: flex; flex-direction: column; } /* Desktop default */
.panel h3 { color: hsl(var(--foreground)); margin: 0 0 var(--space-sm) 0; padding-bottom: var(--space-xs); border-bottom: 1px solid var(--card-border); font-size: 1rem; font-weight: var(--font-weight-medium); display: flex; align-items: center; }
.panel h3 .icon { margin-right: var(--space-sm); color: var(--purple-300); width: 16px; height: 16px; }

/* --- Left Panel: Timeline --- */
.timeline-controls { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--card-border); flex-shrink: 0; display: flex; align-items: center; gap: var(--space-md); background-color: var(--card-header-background); position: relative; z-index: 20; }
.controls-label { font-size: 0.9rem; color: var(--muted-foreground); font-weight: var(--font-weight-medium); margin-right: auto; }
.fetching-indicator { font-size: 0.8rem; color: var(--muted-foreground); display: flex; align-items: center; gap: var(--space-xs); }
.fetching-indicator .fa-spinner { animation: fa-spin 1.5s linear infinite; }
.control-button.icon-button { background: transparent; border: 1px solid var(--card-border); border-radius: var(--radius-full); width: 32px; height: 32px; color: var(--muted-foreground); cursor: pointer; display: flex; justify-content: center; align-items: center; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.control-button.icon-button:hover { background-color: var(--white-5); border-color: var(--muted-foreground); color: hsl(var(--foreground)); }
.control-button.icon-button .icon { width: 18px; height: 18px; }
#timeline-play-pause-btn .icon-pause { color: var(--info); } #timeline-play-pause-btn .icon-play { color: var(--success); }
#audio-control-btn.playing { color: var(--danger); border-color: var(--danger); } #audio-control-btn.playing .icon-volume-up { display: block; } #audio-control-btn.playing .icon-volume-off { display: none; } #audio-control-btn:not(.playing) .icon-volume-up { display: none; } #audio-control-btn:not(.playing) .icon-volume-off { display: block; }

.timeline-flow { flex-grow: 1; overflow-y: auto; padding: var(--sticky-top-offset) calc(var(--space-md) - 6px) 0 var(--space-sm); /* Add top padding for sticky */ position: relative; display: flex; flex-direction: column-reverse; /* Newest at bottom */ }
.timeline-flow::-webkit-scrollbar { width: 6px; } .timeline-flow::-webkit-scrollbar-track { background: transparent; } .timeline-flow::-webkit-scrollbar-thumb { background-color: var(--gray-600); border-radius: 3px; } .timeline-flow { scrollbar-width: thin; scrollbar-color: var(--gray-600) transparent; }

#timeline-list { list-style: none; padding: 0; margin: 0 0 auto 0; padding-left: var(--timeline-indent); position: relative; }
#timeline-list::before { content: ''; position: absolute; top: -10px; bottom: 0; left: calc(var(--timeline-indent) -  16px); width: 2px; background-color: var(--timeline-line-color); transform: translateX(-50%); z-index: 0; }
.timeline-item-spacer { height: var(--space-md); list-style: none; flex-shrink: 0; }

.timeline-item { margin-bottom: var(--space-lg); position: relative; padding-left: var(--space-sm); flex-shrink: 0; }
.timeline-item-collapsed { cursor: pointer; } .timeline-item:not(.timeline-item-collapsed) { cursor: default; }
.timeline-date-marker { position: absolute; left: calc(-1 * var(--timeline-indent)); top: 0; width: var(--timeline-indent); text-align: center; z-index: 2; color: var(--muted-foreground); font-size: 0.8rem; padding-right: calc(var(--timeline-indent) / 2 + 5px); }
.timeline-item-current .timeline-date-marker { display: none; }
.timeline-date-marker .day { display: block; font-size: 1.5rem; font-weight: var(--font-weight-semibold); color: hsl(var(--foreground)); line-height: 1.1; }
.timeline-date-marker .month { display: block; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 2px; }
.timeline-date-marker .label { display: block; font-size: 0.75rem; font-weight: var(--font-weight-bold); color: var(--danger); }
.timeline-item::before { content: ''; position: absolute; top: 8px; left: -16px; width: 10px; height: 10px; background-color: var(--gray-800); border: 2px solid var(--timeline-line-color); border-radius: 50%; transform: translateX(-50%); z-index: 1; }
.timeline-item-current::before { display: none; }

.timeline-card { border-radius: var(--radius-md); border: 1px solid var(--card-border); box-shadow: 0 2px 4px rgba(0,0,0,0.1); overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease, max-height 0.3s ease-out; position: relative; z-index: 1; background-color: var(--card-header-background); }
.timeline-item-collapsed:hover .timeline-card { box-shadow: 0 4px 8px rgba(0,0,0,0.15); transform: translateY(-1px); }
.timeline-card.sticky { position: sticky; top: var(--sticky-top-offset); z-index: 10; border-bottom: 2px solid var(--purple-400); box-shadow: 0 5px 15px rgba(0,0,0,0.2); background-color: var(--card-header-background); }

.timeline-card-header { background-color: var(--card-header-background); padding: var(--space-sm) var(--space-md); display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
.timeline-card-header-info { flex-grow: 1; min-width: 0; padding-right: var(--space-sm); }
.timeline-card-header-info .card-title { display: block; font-weight: var(--font-weight-medium); font-size: 0.95rem; color: hsl(var(--foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.timeline-card-header-info .card-meta { display: block; font-size: 0.8rem; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timeline-card-header-info .card-meta .chip { margin-left: var(--space-sm); vertical-align: middle; }
.timeline-card-source-icon { flex-shrink: 0; color: var(--purple-300); font-size: 1.2rem; }

.timeline-card-content { padding: var(--space-md); color: var(--card-content-text); font-size: 0.9rem; background-color: var(--card-content-background); border-top: 1px solid var(--card-border); overflow-y: auto; /* Enable scrolling */ max-height: calc(100vh - 400px); /* Limit height */ transition: padding 0.3s ease-out, max-height 0.3s ease-out, min-height 0.3s ease-out; position: relative; z-index: 1; }
.timeline-item-collapsed .timeline-card-content { display: none; }
.timeline-card.sticky .timeline-card-content { display: block; background-color: var(--card-content-background); }

.timeline-card-content pre { white-space: pre-wrap; word-wrap: break-word; margin: 0; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 1.6; color: var(--card-content-text); }
.timeline-card-content .email-card { border: 1px solid var(--card-border); border-radius: var(--radius-sm); margin-bottom: var(--space-sm); background-color: hsl(var(--background) / 0.8); opacity: 1; animation: none; transition: opacity 0.5s ease-out; }
.timeline-item-current .timeline-card-content .email-card { opacity: 0; animation: slideInEmail 0.6s ease-out forwards; animation-delay: var(--delay, 0s); }
.timeline-card-content .email-header { background-color: var(--gray-900); padding: var(--space-xs) var(--space-sm); font-size: 0.75rem; color: var(--muted-foreground); border-bottom: 1px solid var(--card-border); }
.timeline-card-content .email-header strong { color: hsl(var(--foreground)); font-weight: var(--font-weight-medium); }
.timeline-card-content .email-body { padding: var(--space-sm); font-size: 0.9rem;}
.timeline-card-content .email-body pre { margin: 0; white-space: pre-wrap; word-wrap: break-word; color: var(--card-content-text);}
.timeline-card-content .email-attachments { font-size: 0.75rem; color: var(--muted-foreground); padding: 0 var(--space-sm) var(--space-xs) var(--space-sm); font-style: italic; }
.timeline-card-content .email-attachments .icon { width: 12px; height: 12px; margin-right: var(--space-xs);}
@keyframes slideInEmail { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }

/* Dynamic "Now" Marker */
.timeline-now-marker-dynamic { position: absolute; display: flex; flex-direction: row; transform: translateX(calc(-100% + 6px)); align-items: center; top: 0px; left: calc(-16px);  height: 40px; pointer-events: none; z-index: 5; }
.timeline-now-marker-dynamic .now-text { position: relative; margin-right: 8px; font-size: 0.9rem; font-weight: var(--font-weight-bold); color: var(--danger); z-index: 2; }
.timeline-now-marker-dynamic .now-dot { position: relative;  width: 12px; height: 12px; background-color: var(--danger); border: 2px solid var(--danger); border-radius: 50%; z-index: 1; }

/* Final CTA Item Styling */
.final-cta-item { margin-bottom: var(--space-lg); position: relative; padding-left: var(--space-sm); flex-shrink: 0; }
.final-cta-item .timeline-item-dot { position: absolute; top: 8px; left: -16px; width: 10px; height: 10px; background-color: var(--success); border: 2px solid var(--success); border-radius: 50%; transform: translateX(-50%); z-index: 1; }
.final-cta-item .timeline-item-line { position: absolute; top: 12px; left: calc(-1 * var(--timeline-indent) / 2); height: 2px; width: calc(var(--timeline-indent) / 2 + var(--space-sm)); background-color: var(--timeline-line-color); transform: translate(-50%, -50%); z-index: 0; }
.final-cta-item .final-cta-content { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md); background-color: var(--card-header-background); border-radius: var(--radius-md); border: 1px solid var(--card-border); min-height: 60px; }
.final-cta-item .finished-text { font-size: 0.9rem; font-weight: var(--font-weight-bold); color: var(--success); }
.final-cta-item .animated-cta-button-wrapper { /* Positioned by flex */ }

/* --- Right Panel: Insights [UNCHANGED] --- */
/* ... [Rest of Insights CSS remains the same] ... */
.insight-section { 
  background-color: var(--white-5);
  backdrop-filter: blur(4px); /* backdrop-blur-sm */
  border-radius: 1rem; /* rounded-2xl */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
  border: 1px solid var(--white-10);  overflow: hidden; 
  flex-shrink: 0; transition: flex-grow 0.4s ease-out, min-height 0.4s ease-out, max-height 0.4s ease-out, padding 0.4s ease-out; display: flex; flex-direction: column; }
.insight-section.active:not(#knowledge-graph-section) { flex-grow: 1; flex-shrink: 1; min-height: 150px; }
.insight-section#knowledge-graph-section.active.detail-view-active { flex-grow: 10; min-height: 200px; }
.section-header { display: flex; align-items: center; padding: var(--space-sm) var(--space-md); cursor: pointer; background-color: var(--white-5); border-bottom: 1px solid var(--card-border); flex-shrink: 0; transition: background-color 0.2s ease; }
.section-header:not(.no-hover):hover { background-color: var(--white-5); } .section-header.no-hover { cursor: default; } .section-header.no-hover:hover { background-color: var(--card-header-background); }
.section-header h3 { flex-grow: 1; margin: 0; border-bottom: none; font-size: 1rem; font-weight: var(--font-weight-medium); display: flex; align-items: center; } .section-header h3 .icon { margin-right: var(--space-sm); width: 16px; height: 16px; color: var(--muted-foreground); }
.item-count { font-size: 0.75rem; font-weight: var(--font-weight-medium); color: var(--muted-foreground); background-color: hsl(var(--background)); padding: 0.15rem 0.6rem; border-radius: var(--radius-full); margin-right: var(--space-sm); border: 1px solid var(--card-border); }
.toggle-collapse { background: transparent; border: none; color: var(--muted-foreground); cursor: pointer; padding: var(--space-xs); margin-left: var(--space-xs); } .toggle-collapse:hover { color: hsl(var(--foreground)); } .toggle-collapse .icon { width: 18px; height: 18px; }
.section-content { padding: 0 var(--space-md); overflow: hidden; display: flex; flex-direction: column; flex-grow: 0; min-height: 0; max-height: 0; transition: max-height 0.4s ease-out, padding 0.4s ease-out, flex-grow 0.4s ease-out; }
.insight-section.active:not(#knowledge-graph-section) > .section-content { padding: var(--space-md); max-height: 800px; overflow-y: auto; flex-grow: 1; }
.insight-section#knowledge-graph-section:not(.detail-view-active) > .section-content { max-height: 80px; padding: var(--space-sm) 0; overflow: hidden; flex-grow: 0; }
.insight-section#knowledge-graph-section.active.detail-view-active > .section-content { padding: var(--space-md); max-height: 1000px; overflow-y: auto; flex-grow: 1; }
.empty-state { text-align: center; color: var(--muted-foreground); font-style: italic; padding: var(--space-xl) 0; flex-grow: 1; display: flex; justify-content: center; align-items: center; min-height: 50px; font-size: 0.9rem; }
.empty-state.hidden { display: none; } .section-content.showing-empty-state ul { display: none; }
.pill-preview { padding: var(--space-sm) var(--space-md); overflow-x: auto; white-space: nowrap; height: 100%; display: block; scrollbar-width: thin; scrollbar-color: var(--muted-foreground) transparent; }
.pill-preview::-webkit-scrollbar { height: 6px; } .pill-preview::-webkit-scrollbar-track { background: transparent; } .pill-preview::-webkit-scrollbar-thumb { background-color: var(--muted-foreground); border-radius: 3px; }
.kg-detail-view { padding-top: var(--space-sm); border-top: 1px dashed var(--card-border); position: relative; flex-grow: 1; display: flex; flex-direction: column; }
.close-kg-button { position: absolute; top: -2px; right: -2px; background: transparent; border: none; color: var(--muted-foreground); cursor: pointer; padding: var(--space-xs); z-index: 2; } .close-kg-button:hover { color: var(--danger); } .close-kg-button .icon { width: 20px; height: 20px; }
#kg-detail-title { margin: 0 0 var(--space-sm) 0; color: var(--purple-300); font-size: 1.1em; font-weight: var(--font-weight-semibold);}
#kg-detail-info { flex-shrink: 0; } #kg-detail-info p { margin: var(--space-xs) 0 var(--space-sm) 0; font-size: 0.9rem; line-height: 1.5; color: var(--muted-foreground);} #kg-detail-info strong { color: hsl(var(--foreground)); font-weight: var(--font-weight-medium); }
.kg-detail-view h5 { margin: var(--space-md) 0 var(--space-sm) 0; font-size: 0.95rem; color: hsl(var(--foreground)); font-weight: var(--font-weight-medium); display: flex; align-items: center; flex-shrink: 0;} .kg-detail-view h5 .icon { margin-right: var(--space-xs); width: fit-content; height: 14px; color: var(--muted-foreground); }
#kg-detail-related-items { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex-grow: 1; min-height: 50px; }
#kg-detail-related-items li { font-size: 0.85rem; background-color: hsl(var(--background)); padding: var(--space-sm); border-radius: var(--radius-sm); margin-bottom: var(--space-xs); border: 1px solid var(--card-border); color: var(--muted-foreground); line-height: 1.4; }
#kg-detail-related-items li strong { color: hsl(var(--foreground)); font-weight: var(--font-weight-medium); }
#kg-detail-related-items .status, #kg-detail-related-items .owner, #kg-detail-related-items .due-date { font-size: 0.9em; color: var(--muted-foreground); margin-left: var(--space-sm); font-style: italic;} #kg-detail-related-items .tag-source { margin-left: var(--space-sm); font-size: 0.8em; vertical-align: middle;}
.entity-pill { padding: 0.25rem 0.75rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: var(--font-weight-medium); cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease, border-color 0.2s ease; opacity: 0; animation: fadeInPill 0.5s ease forwards; margin-right: var(--space-sm); border: 1px solid transparent; display: inline-block; }
.entity-pill:hover { transform: translateY(-1px); background-color: var(--white-10); }
.entity-pill.entity-client { background-color: var(--info-background); color: var(--info); border-color: var(--info-border); } .entity-pill.entity-product { background-color: var(--success-background); color: var(--success); border-color: var(--success-border); } .entity-pill.entity-employee { background-color: var(--warning-background); color: var(--warning); border-color: var(--warning-border); } .entity-pill.entity-other { background-color: var(--muted-background); color: var(--muted-foreground); border-color: var(--card-border); }
.placeholder-pill { font-style: italic; color: var(--muted-foreground); font-size: 0.9em;}
@keyframes fadeInPill { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
.section-content ul { list-style: none; padding: 0; margin: 0; }
.section-content li.insight-item { background-color: hsl(var(--background)); border: 1px solid var(--card-border); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-sm); position: relative; opacity: 0; animation: slideDownItem 0.5s ease forwards; overflow: hidden; transition: opacity 0.3s ease; }
.section-content li.insight-item:last-child { margin-bottom: 0; }
@keyframes slideDownItem { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.item-main-text { display: block; margin-bottom: var(--space-xs); font-weight: var(--font-weight-medium); color: hsl(var(--foreground)); transition: text-decoration 0.3s ease;}
.item-details { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); font-size: 0.8rem; color: var(--muted-foreground); margin-bottom: var(--space-xs); }
.item-details span { display: flex; align-items: center; } .item-details .icon { margin-right: var(--space-xs); width: 12px; height: 12px; } .item-details strong { font-weight: var(--font-weight-medium); transition: color 0.3s ease, text-decoration 0.3s ease;}
.status-open { color: var(--warning); } .status-done { color: var(--success); } .status-in-progress { color: var(--info); } .status-identified { color: var(--warning); } .status-needs-resolution { color: var(--danger); } .status-risk-identified { color: var(--danger); } .status-superseded { color: var(--muted-foreground); } .status-resolved { color: var(--success); }
li.status-done, li.status-superseded { opacity: 0.6 !important; }
li.status-done .item-main-text, li.status-superseded .item-main-text, strong.status-done, strong.status-superseded { text-decoration: line-through; }
.item-tags { margin-top: var(--space-xs); border-top: 1px dashed var(--card-border); padding-top: var(--space-xs); }
.tag { display: inline-block; margin-right: var(--space-xs); margin-bottom: var(--space-xs); vertical-align: middle; }
.chip { padding: 0.25rem 0.75rem; border-radius: var(--radius-full); white-space: nowrap; font-size: 0.75rem; background-color: var(--purple-400-10); color: var(--purple-300); border: 1px solid var(--purple-400-20); display: inline-block; }
.source-tag { padding: 0.25rem 0.75rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: var(--font-weight-medium); white-space: nowrap; border: 1px solid transparent; display: inline-block; }
.tag-internal { background-color: var(--purple-400-10); color: var(--purple-300); border-color: var(--purple-400-20); }
.tag-client { background-color: var(--info-background); color: var(--info); border-color: var(--info-border); }
.item-tags .tag-source { background-color: var(--muted-background); color: var(--muted-foreground); border-color: var(--card-border); padding: 0.25rem 0.75rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: var(--font-weight-medium); white-space: nowrap; display: inline-flex; align-items: center; }
.item-tags .tag-source .icon { width: 12px; height: 12px; margin-right: var(--space-xs); color: var(--muted-foreground); }
.item-tags .tag-entity { background-color: var(--purple-400-10); color: var(--purple-300); border-color: var(--purple-400-20); padding: 0.25rem 0.75rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: var(--font-weight-medium); white-space: nowrap; display: inline-block; }
.ai-insights-area { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--card-border); display: flex; gap: var(--space-md); flex-shrink: 0; }
.ai-insights-area.hidden { display: none; }
.insight-box { flex: 1; background-color: var(--card-background); border-radius: var(--radius-lg); padding: var(--space-md); border: 1px solid var(--card-border); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.insight-box h3 { margin-top: 0; margin-bottom: var(--space-sm); font-size: 1rem; font-weight: var(--font-weight-medium); border-bottom: none; display: flex; align-items: center; color: hsl(var(--foreground)); }
.insight-box h3 .icon { margin-right: var(--space-sm); width: 16px; height: 16px; color: var(--muted-foreground); }
.insight-box p { font-size: 0.9rem; color: var(--muted-foreground); margin-bottom: var(--space-sm); line-height: 1.5;}
.query-example { display: flex; align-items: center; margin-bottom: var(--space-sm); flex-wrap: wrap; }
.query-example input[type="text"] { flex-grow: 1; padding: 0.5rem 1rem; border: 1px solid var(--input-border); border-radius: var(--radius-sm) 0 0 var(--radius-sm); background-color: hsl(var(--background)); color: hsl(var(--foreground)); font-size: 0.85rem; outline: none; height: 38px; min-width: 200px; }
.query-example button { background-color: var(--purple-400); border: 1px solid var(--purple-400); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: none; color: hsl(var(--foreground)); cursor: default; width: 40px; height: 38px; display: flex; align-items: center; justify-content: center; }
.query-example button .icon { width: 16px; height: 16px; }
.query-example .result { margin-top: var(--space-sm); font-size: 0.85rem; background-color: hsl(var(--background)); padding: var(--space-sm); border-radius: var(--radius-sm); border: 1px dashed var(--card-border); color: var(--muted-foreground); line-height: 1.5; width: 100%; }
.suggestion-example { margin-top: var(--space-sm); font-size: 0.85rem; background-color: var(--warning-background); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); border: 1px solid var(--warning-border); color: var(--warning); display: flex; align-items: flex-start; }
.suggestion-example .icon { color: var(--warning); margin-right: var(--space-sm); width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;}
.suggestion-example strong { font-weight: var(--font-weight-medium); color: var(--warning);}
.demo-footer { text-align: center; padding: var(--space-md); background-color: hsl(var(--background)); color: var(--muted-foreground); font-size: 0.8rem; border-top: 1px solid var(--card-border); flex-shrink: 0; }
.demo-footer p { margin: 0; }

/* --- Animated CTA Button --- */
.animated-cta-button-wrapper { position: relative; display: inline-block; overflow: hidden; border-radius: var(--radius-full); padding: 1.5px; vertical-align: middle; }
.animated-cta-spinner { position: absolute; width: 400px; height: 400px; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(0deg); will-change: transform; border-radius: 50%; animation: spin 2s linear infinite; background: conic-gradient(from 90deg at 50% 50%, var(--purple-300) 0%, var(--purple-400) 50%, var(--purple-300) 100%); pointer-events: none; }
.animated-cta-button { position: relative; display: inline-flex; height: 100%; width: 100%; cursor: pointer; align-items: center; justify-content: center; border-radius: var(--radius-full); background-color: hsl(var(--background)); font-size: 0.75rem; font-weight: var(--font-weight-medium); color: hsl(var(--foreground)); backdrop-filter: blur(24px); border: 1px solid hsl(var(--background) / 0.5); transition: all 0.3s ease; padding: 0.5rem 1.5rem; background-image: linear-gradient(to top right, var(--zinc-300-5), var(--purple-400-20), transparent); text-decoration: none; white-space: nowrap; }
.animated-cta-button:hover { background-image: linear-gradient(to top right, var(--zinc-300-10), var(--purple-400-30), transparent); }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }


/* --- Mobile Styles --- */
/* Default: Hide Mobile Elements */
.mobile-insights-island,
.mobile-insight-detail {
    display: none;
}

@media (max-width: 768px) {
    .demo-main-content { flex-direction: column; padding: var(--space-sm); gap: var(--space-sm); /* Space for island */ }
    .source-stream-panel { flex: 1 1 auto; width: 100%; max-width: 100%; border-radius: var(--radius-md); }
    .insights-panel { display: none; } /* Hide desktop insights */

    /* Mobile Insights Island */
    .mobile-insights-island { display: flex; position: fixed; bottom: var(--space-md); left: var(--space-md); right: var(--space-md); background-color: hsl(var(--background) / 0.8); backdrop-filter: blur(10px); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--card-border); box-shadow: 0 -4px 15px rgba(0,0,0, 0.15); z-index: 100; align-items: center; justify-content: space-between; transition: transform 0.3s ease-out, opacity 0.3s ease-out; }
    .mobile-insights-island.hidden { transform: translateY(120%); opacity: 0; }
    .island-label { font-size: 0.9rem; font-weight: var(--font-weight-medium); color: var(--muted-foreground); }
    .island-buttons { display: flex; gap: var(--space-sm); }
    .island-button { position: relative; /* For badge positioning */ background-color: var(--gray-800); border: 1px solid var(--card-border); color: var(--muted-foreground); border-radius: var(--radius-full); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
    .island-button:hover { background-color: var(--white-5); color: hsl(var(--foreground)); }
    .island-button .icon { font-size: 1.1rem; }
    /* Island Badge */
    .island-badge { position: absolute; top: -4px; right: -4px; background-color: var(--purple-400); color: hsl(var(--foreground)); border-radius: var(--radius-full); font-size: 0.65rem; font-weight: bold; line-height: 1; padding: 3px 5px; min-width: 16px; text-align: center; border: 1px solid hsl(var(--background)); }
    .island-badge.hidden { display: none; } /* Hide badge if count is 0 */


    /* Mobile Insight Detail Overlay */
    .mobile-insight-detail { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: hsl(var(--background) / 0.98); /* More opaque */ backdrop-filter: blur(10px); z-index: 110; opacity: 0; transform: translateY(100%); transition: transform 0.3s ease-out, opacity 0.3s ease-out; pointer-events: none; }
    .mobile-insight-detail.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .mobile-detail-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md); border-bottom: 1px solid var(--card-border); background-color: var(--card-header-background); flex-shrink: 0; }
    .mobile-detail-header h3 { margin: 0; font-size: 1.1rem; border: none; padding: 0; }
    .mobile-detail-header .close-kg-button { position: static; transform: none; }
    .mobile-detail-content { flex-grow: 1; overflow-y: auto; padding: var(--space-md); }
    .mobile-detail-content .insight-item { background-color: var(--card-background); } /* Style items in overlay */
    .mobile-detail-content .pill-preview { /* Style KG pills in overlay */ padding: var(--space-sm) 0; }


    .demo-header {
      padding-top: 8px;
      padding-bottom: 8px;
    }

    .demo-header h1 {
      font-size: 1.5rem;
      margin-bottom: 0.5rem;
    }

    .demo-header p {
      font-size: 0.85rem;
      margin: 0;
    }

    .demo-footer { display: none; }

    #timeline-list::before {
      top: -80px;
      bottom: -80px;
    }
}

.service-card {
  background-color: var(--white-5);
  backdrop-filter: blur(4px); /* backdrop-blur-sm */
  border-radius: 1rem; /* rounded-2xl */
  padding: 2rem; /* p-8 */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
  border: 1px solid var(--white-10);
}

.background-section-gradient {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: hsla(259, 50%, 10%, 0.05); /* purple-950/5 */
  background-image: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(120,119,198,0.15), rgba(255,255,255,0));
}

.section-heading {
  font-size: 2.25rem; /* text-4xl */
  font-weight: var(--font-weight-light);
  margin-bottom: 1.5rem; /* mb-6 */
  text-align: center;
  letter-spacing: var(--tracking-tighter);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(to right, var(--purple-400), var(--pink-600));
}