/* =====================================================================
   File: app/static/css/chats/chats_styles.css
   Purpose: Main stylesheet for authenticated chats page with chat interface
===================================================================== */

/* === Core Layout & Base Styles === */
@import url('../shared_ui/base.css');
/* Global layout, body, main container */

/* === Charting-owned Chart Styles (shared chart system) === */
@import url('../charting/charting_styles.css');
/* Chart visuals, axes, toolbars, overlays, drawings */

/* === Chat Interface === */
@import url('./chats_main/chats_main.css');
/* Chat container, messages, input area */

/* === Shared Employee Chart Styles === */
@import url('../markets/markets_symbols/symbols_overview/symbols_overview_employee_count.css');
/* Reused on chat employee visuals so controls/tooltips match symbols profile exactly */

/* === Shared Forecast Visual Styles === */
@import url('../markets/markets_symbols/symbols_forecast/symbols_forecast_visuals.css');
/* Gauge, price targets bar, chart SVG base styles */
@import url('../markets/markets_symbols/symbols_forecast/symbols_forecast_snapshot_cards.css');
/* Sentiment metrics table styles */

/* === Shared Statistics Pie Visual Styles === */
@import url('../markets/markets_symbols/symbols_statistics/symbols_statistics_toggle.css');
@import url('../markets/markets_symbols/symbols_statistics/symbols_statistics_charts.css');

/* === Shared Ownership Visual Styles === */
@import url('../markets/markets_symbols/symbols_ownership.css');

/* === Header Components === */
@import url('search_chats/search_chats.css');
/* Search chats modal and functionality */

/* =====================================================================
    Chats Watchlist Modal | Chats-only watchlist modal sizing
===================================================================== */

#watchlistModal.show {
   display: flex;
}

.reply-ownership-chart-row {
   justify-content: flex-start;
   padding: 0.5rem 0;
}

.reply-ownership-canvas {
   width: 240px !important;
   height: 240px !important;
   max-width: 240px;
   max-height: 240px;
   margin: 0 auto;
}

.reply-stats-microchart-container {
   min-height: 220px;
}

.reply-visual-debug {
   margin-top: 0.75rem;
   border: 1px solid var(--color-border-subtle);
   border-radius: 6px;
   background: rgba(255, 255, 255, 0.03);
   overflow: hidden;
}

.reply-visual-debug summary {
   cursor: pointer;
   padding: 0.55rem 0.75rem;
   color: var(--color-text-secondary);
   font-size: 0.8rem;
}

.reply-visual-debug-pre {
   margin: 0;
   padding: 0.75rem;
   white-space: pre-wrap;
   word-break: break-word;
   font-size: 0.72rem;
   color: var(--color-text-secondary);
   border-top: 1px solid var(--color-border-subtle);
   background: rgba(0, 0, 0, 0.18);
}