/* ===== Conversations → Messages: embedded Convo iframe ===== */
/* When the empty-page container is rendering c-messages, kill all chrome
   padding and let the iframe fill the available height edge-to-edge. */
#page-empty.is-messages .gp-wrap {
  padding: 0;
  gap: 0;
  flex: 1;
  min-height: 0;
}
#page-empty.is-messages {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#page-empty.is-messages .shimmer-overlay { display: none !important; }
.gp-convo-host { position: relative; width: 100%; height: 100%; flex: 1; min-height: 0; background: #FFFFFF; }
.gp-convo-iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block; background: #FFFFFF;
  opacity: 0; transition: opacity .22s ease-out;
}
.gp-convo-skel[data-loaded="1"] { opacity: 0; pointer-events: none; }
.gp-convo-skel[data-loaded="1"] ~ .gp-convo-iframe { opacity: 1; }
.gp-convo-skel {
  position: absolute; inset: 0; z-index: 2;
  display: flex; background: #FFFFFF;
  transition: opacity .22s ease-out;
}
.gp-convo-skel .sk {
  background: linear-gradient(90deg, #F1F3F5 0%, #F8F9FA 50%, #F1F3F5 100%);
  background-size: 200% 100%;
  animation: gp-cvs-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  display: inline-block;
}
.gp-convo-skel .sk-pill { border-radius: 500px; height: 22px; }
.gp-convo-skel .sk-circle { width: 36px; height: 36px; border-radius: 500px; flex-shrink: 0; }
@keyframes gp-cvs-shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
.gp-cvs-list { width: 374px; border-right: 1px solid #E4E7EC; flex-shrink: 0; }
.gp-cvs-listhead { display: flex; align-items: center; padding: 14px 14px 8px; gap: 8px; }
.gp-cvs-pillrow { display: flex; gap: 6px; padding: 4px 14px 12px; border-bottom: 1px solid #E4E7EC; }
.gp-cvs-row { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-bottom: 1px solid #F2F4F7; }
.gp-cvs-rowtxt { flex: 1; min-width: 0; }
.gp-cvs-rowline { display: flex; align-items: center; gap: 8px; }
.gp-cvs-thread { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #FAFAFA; }
.gp-cvs-threadhead { display: flex; align-items: center; padding: 12px 18px; background: #FFFFFF; border-bottom: 1px solid #E4E7EC; flex-shrink: 0; }
.gp-cvs-stream { flex: 1; padding: 18px 24px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.gp-cvs-bub { display: flex; }
.gp-cvs-bub.right { justify-content: flex-end; }
.gp-cvs-comp { padding: 14px 18px; background: #FFFFFF; border-top: 1px solid #E4E7EC; flex-shrink: 0; }

/* ===== Inline-mounted Convo embed ===== */
/* The convo React tree mounts into #convo-mount which fills the page. */
.gp-convo-host { position: relative; width: 100%; height: 100%; flex: 1; min-height: 0; background: #FFFFFF; }
#convo-mount { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .22s ease-out; }
#convo-mount[data-mounted="1"] { opacity: 1; }
#convo-mount[data-mounted="1"] ~ .gp-convo-skel { opacity: 0; pointer-events: none; }

/* Convo's Convo-agent.html harmonization rules (radius bumps, scroll anim
   keyframes) — adapted from body[data-embed="1"] to #convo-mount scope so
   they don't leak onto the dashboard's own buttons / inputs / cards. */
#convo-mount button[style*="border-radius: 4px"],
#convo-mount button[style*="borderRadius: 4"] { border-radius: 6px !important; }
#convo-mount input[style*="border-radius: 4px"] { border-radius: 6px !important; }
#convo-mount [data-card],
#convo-mount .convo-card { border-radius: 8px !important; }
#convo-mount .convoThreadRow { padding-block: 14px !important; }

@keyframes convoNextPulseAnim {
  0%   { box-shadow: 0 0 0 0 rgba(127,86,217,0.55); background: #F4EBFF; }
  60%  { box-shadow: 0 0 0 8px rgba(127,86,217,0);  background: #F9F5FF; }
  100% { box-shadow: 0 0 0 0 rgba(127,86,217,0);    background: transparent; }
}
#convo-mount .convoNextPulse { animation: convoNextPulseAnim .9s ease-out 2; }

/* Landing flash for a message the summary's citations jump to — the whole
   row lights up, not just the bubble, so a call card or an event marker is as
   findable as an SMS. Paired with convo:scrollToMsg in thread-view.jsx. */
@keyframes convoMsgFlashAnim {
  0%   { background: rgba(127,86,217,0);   box-shadow: 0 0 0 0 rgba(127,86,217,0); }
  12%  { background: rgba(127,86,217,.12); box-shadow: 0 0 0 6px rgba(127,86,217,.12); }
  70%  { background: rgba(127,86,217,.10); box-shadow: 0 0 0 6px rgba(127,86,217,.10); }
  100% { background: rgba(127,86,217,0);   box-shadow: 0 0 0 6px rgba(127,86,217,0); }
}
#convo-mount .convo-msg-anchor { border-radius: 10px; }
#convo-mount .convo-msg-flash { animation: convoMsgFlashAnim 1.8s ease-out; }

@keyframes aiSummaryLabelIn {
  from { max-width: 0; opacity: 0; transform: translateX(-4px); }
  to   { max-width: 120px; opacity: 1; transform: translateX(0); }
}
@keyframes aiSummaryPillBorderIn {
  0%   { box-shadow: 0 0 0 0 rgba(127,86,217,0); }
  50%  { box-shadow: 0 0 0 4px rgba(127,86,217,.18); }
  100% { box-shadow: 0 0 0 0 rgba(127,86,217,0); }
}
#convo-mount .aiSummaryPill.expanded { animation: aiSummaryPillBorderIn .55s ease-out; }
#convo-mount .aiSummaryPill .aiSummaryLabel {
  display: inline-block;
  overflow: hidden;
  animation: aiSummaryLabelIn .28s ease-out both;
}

/* Convo scrollbar styling — scoped */
#convo-mount ::-webkit-scrollbar { width: 8px; height: 8px; }
#convo-mount ::-webkit-scrollbar-thumb { background: #E4E7EC; border-radius: 4px; }
#convo-mount ::-webkit-scrollbar-thumb:hover { background: #D0D5DD; }
#convo-mount ::-webkit-scrollbar-track { background: transparent; }

/* ===== Calls Analytics — tighten to match reference ===== */
#anWrap { padding: 12px 18px 24px !important; gap: 10px !important; }
#anWrap .ext-section { margin-top: 0 !important; margin-bottom: 0 !important; }
#anWrap .kpi { padding: 12px 16px; gap: 2px; }
#anWrap .k-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
#anWrap .k-val { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
#anWrap .k-row { gap: 6px; }
#anWrap .k-link { font-size: 11px; }
#anWrap .kpi--sm { padding: 10px 14px; gap: 2px; }
#anWrap .kpi--sm .k-val { font-size: 14px; font-weight: 700; }
#anWrap .kpi--sm .k-label { font-size: 11px; font-weight: 500; }
#anWrap .kpi-section-head { padding: 10px 14px; font-size: 12px; font-weight: 600; }
#anWrap .chart-head { padding: 10px 14px; font-size: 12px; font-weight: 600; }
#anWrap .chart-body { padding: 8px 12px 12px; }
#anWrap .chart-body svg { max-height: 200px; }
#anWrap .kpi-grid--bordered,
#anWrap .chart-panel,
#anWrap .panel { border-radius: 8px; }
#anWrap .kpi-badge { font-size: 10px; padding: 1px 5px; border-radius: 4px; }
#anWrap .ext-section .panel-header { padding: 10px 14px 6px; }
#anWrap .ext-section .panel-title { font-size: 13px; font-weight: 600; }
#anWrap .ext-section .panel-sub { font-size: 11px; }
#anWrap .ext-section .section-head { padding: 10px 14px; }
#anWrap .ext-section .section-head .title { font-size: 12px; font-weight: 600; }
#anWrap .ext-section .section-head .meta { font-size: 11px; }
#anWrap .live-tabs { padding: 0 14px; }
#anWrap .live-tab { font-size: 12px; padding: 8px 0; }
#anWrap .live-body { padding: 10px 14px; }
#anWrap .lc-top .lc-label { font-size: 11px; }
#anWrap .lc-value { font-size: 28px; font-weight: 700; }
#anWrap .lc-split { font-size: 11px; gap: 14px; }
#anWrap .lc-split .v { font-size: 16px; font-weight: 600; }
#anWrap .live-table { font-size: 12px; }
#anWrap .live-table th, #anWrap .live-table td { padding: 8px 10px; }
#anWrap .btn-monitor { font-size: 11px; padding: 5px 10px; }
#anWrap .info-banner { padding: 8px 12px; font-size: 12px; border-radius: 8px; }
#anWrap .info-banner .ib-link { font-size: 12px; }

/* Subtle scale-up entry animation for analytics sections (graphs, KPI cards) */
@keyframes anRise {
  0%   { opacity: 0; transform: scale(0.96) translateY(6px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.anim-rise {
  animation: anRise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  transform-origin: center top;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .anim-rise { animation: none; }
}

/* Graph content (SVG paths/circles/bars) eases in with a subtle scale-up — gated by .in-view */
@keyframes graphRise {
  0%   { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes graphLineDraw {
  from { stroke-dashoffset: var(--len, 2000); opacity: 0; }
  60%  { opacity: 1; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes graphDotPop {
  0%   { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes graphBarRise {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
/* Hide chart content until panel scrolls into view */
#anWrap .chart-panel .chart-body svg { opacity: 0; }
#anWrap .chart-body polyline:not([stroke-dasharray]) {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  opacity: 0;
}
#anWrap .chart-body circle { opacity: 0; }
#anWrap .chart-body rect[data-bar],
#anWrap .chart-body .bar { transform: scaleY(0); transform-origin: bottom center; transform-box: fill-box; }

/* When .in-view is added, fire the animations */
#anWrap .chart-panel.in-view .chart-body svg {
  animation: graphRise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  transform-origin: center center;
}
#anWrap .chart-panel.in-view .chart-body polyline:not([stroke-dasharray]) {
  animation: graphLineDraw 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.25s;
}
#anWrap .chart-panel.in-view .chart-body polyline:not([stroke-dasharray]):nth-of-type(2) { animation-delay: 0.45s; }
#anWrap .chart-panel.in-view .chart-body circle {
  transform-origin: center;
  transform-box: fill-box;
  animation: graphDotPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 1.05s;
}
#anWrap .chart-panel.in-view .chart-body rect[data-bar],
#anWrap .chart-panel.in-view .chart-body .bar {
  animation: graphBarRise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  #anWrap .chart-panel .chart-body svg,
  #anWrap .chart-body polyline,
  #anWrap .chart-body circle,
  #anWrap .chart-body rect[data-bar],
  #anWrap .chart-body .bar { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
}