/* ═══════════════════════════════════════════════════════════
   INVENTORY FORECAST AGENT — Static Forecast Feed Styles
   Sibling of gap_agent.css. Differs in three ways:
   1) Distinct palette — teal/emerald (gap is navy/amber)
   2) Logs appear pre-populated (not trickling in like gap)
   3) Each log opens its own investigation tab in the ext panel
   ═══════════════════════════════════════════════════════════ */

/* ── Toggle Button (top-left, sits right of #gapToggle) ── */
/* Positioning: gap_agent.js owns #gapToggle at left:12px. We anchor to its
   right edge via JS (an rAF loop similar to the home-button one). When the
   gap toggle is hidden or absent, this falls back to left:12px. */
#invToggle {
  position: fixed;
  top: 12px;
  left: 12px;           /* JS overrides to (gapToggle.right + 8px) */
  z-index: 710;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 12px;
  background: rgba(6, 78, 89, .92);          /* deep teal — contrasts gap's navy */
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  cursor: pointer;
  transition: all .25s, left 0s;             /* left jumps instantly when JS sets it */
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  font-family: 'DM Sans', sans-serif;
  color: #fff;
}
#invToggle:hover {
  border-color: rgba(16, 185, 129, .4);
  box-shadow: 0 6px 28px rgba(0,0,0,.4);
  transform: translateY(-1px);
}

.inv-toggle-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #10b981, #0d9488); /* emerald → teal */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  flex-shrink: 0;
}

.inv-toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(16, 185, 129, .1);
  border: 1px solid rgba(16, 185, 129, .25);
  border-radius: 16px;
  color: #10b981;
  font-size: 12px;
  font-weight: 600;
}

.inv-toggle-badge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #0ea5e9;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
}


/* ── Panel ── */
#invPanel {
  position: fixed;
  top: 58px;
  left: 12px;       /* JS overrides to align with #invToggle's left edge */
  z-index: 708;
  width: 440px;
  max-height: 0;
  overflow: hidden;
  /* No background on the container — its rounded corners + overflow:hidden
     still clip children, but no white fill paints behind the gradient header
     (which was causing a thin white halo at the top corners). The body below
     paints its own white. */
  border-radius: 14px;
  box-shadow: 0 12px 50px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.06);
  transition: max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  opacity: 0;
  display: flex;
  flex-direction: column;
}

#invPanel.open {
  max-height: calc(100vh - 74px);
  opacity: 1;
}


/* ── Panel Header ── */
.inv-header {
  padding: 12px 16px;
  background: linear-gradient(135deg, #064e59, #0d9488);  /* deep teal */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  border-radius: 14px 14px 0 0;
}

.inv-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inv-header-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #10b981, #0d9488);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
}

.inv-header-title {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.inv-header-sub {
  font-size: 10px;
  color: rgba(255,255,255,.5);
  margin-top: 1px;
}

.inv-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inv-pulse {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: #6ee7b7;
  letter-spacing: .03em;
}

.inv-pulse span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6ee7b7;
  animation: invPulse 2s ease-in-out infinite;
}

@keyframes invPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(110,231,183,.4); }
  50% { opacity: .6; box-shadow: 0 0 0 4px rgba(110,231,183,0); }
}

.inv-close-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.6);
  cursor: pointer;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}

.inv-close-btn:hover {
  background: rgba(255,255,255,.2);
  color: #fff;
}


/* ── Cycle banner (the row above the log list) ── */
.inv-cycle {
  padding: 10px 16px;
  background: #f0fdfa;
  border-bottom: 1px solid #ccfbf1;
  font-size: 11px;
  color: #115e59;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.inv-cycle i { color: #0d9488; }
.inv-cycle strong { color: #064e59; font-weight: 700; }


/* ── Body (the log list) ── */
.inv-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 480px;
  scroll-behavior: smooth;
}

.inv-body::-webkit-scrollbar { width: 4px; }
.inv-body::-webkit-scrollbar-track { background: transparent; }
.inv-body::-webkit-scrollbar-thumb { background: #99f6e4; border-radius: 2px; }


/* ── Log Entry (a forecast card) ── */
.inv-log {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 13px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  transition: all .2s;
  animation: invFadeIn .35s ease both;
}
.inv-log:hover {
  border-color: #14b8a6;
  box-shadow: 0 4px 14px rgba(20,184,166,.12);
}

@keyframes invFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.inv-log-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f0fdfa;
  border: 1.5px solid #99f6e4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  color: #0d9488;
}

/* Pattern-type variants */
.inv-log.pattern-seasonality .inv-log-icon { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8 }
.inv-log.pattern-reorder     .inv-log-icon { background:#fef2f2; border-color:#fecaca; color:#b91c1c }
.inv-log.pattern-surge       .inv-log-icon { background:#fffbeb; border-color:#fde68a; color:#b45309 }
.inv-log.pattern-slow        .inv-log-icon { background:#f5f3ff; border-color:#ddd6fe; color:#6d28d9 }
.inv-log.pattern-leadtime    .inv-log-icon { background:#ecfdf5; border-color:#bbf7d0; color:#047857 }
.inv-log.pattern-weekend     .inv-log-icon { background:#fff7ed; border-color:#fed7aa; color:#c2410c }
.inv-log.pattern-healthy     .inv-log-icon { background:#f0fdf4; border-color:#bbf7d0; color:#15803d }

.inv-log-body {
  flex: 1;
  min-width: 0;
}

.inv-log-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.inv-log-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 1px 7px;
  border-radius: 4px;
}
.inv-log.pattern-seasonality .inv-log-tag { background:#dbeafe; color:#1d4ed8 }
.inv-log.pattern-reorder     .inv-log-tag { background:#fee2e2; color:#991b1b }
.inv-log.pattern-surge       .inv-log-tag { background:#fef3c7; color:#92400e }
.inv-log.pattern-slow        .inv-log-tag { background:#ede9fe; color:#5b21b6 }
.inv-log.pattern-leadtime    .inv-log-tag { background:#d1fae5; color:#065f46 }
.inv-log.pattern-weekend     .inv-log-tag { background:#ffedd5; color:#9a3412 }
.inv-log.pattern-healthy     .inv-log-tag { background:#dcfce7; color:#166534 }

.inv-log-sku {
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: .03em;
}

.inv-log-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: #334155;
}

.inv-log-text strong { color: #0f172a; font-weight: 600; }
.inv-log-text em { font-style: normal; font-weight: 600; color: #0d9488; }

/* Mini sparkline embedded in the log card (SVG) */
.inv-log-spark {
  width: 100%;
  height: 28px;
  margin-top: 8px;
  display: block;
}

.inv-log-actions {
  margin-top: 10px;
  display: flex;
  gap: 6px;
}

.inv-log-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #0d9488;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.inv-log-btn:hover {
  background: #0f766e;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(13,148,136,.3);
}
.inv-log-btn.investigated {
  background: #10b981;
  cursor: default;
}
.inv-log-btn.investigated:hover {
  transform: none;
}

/* "Logged" chip — shown in place of the Investigate button on entries the
   AI has noted but is not escalating to the rep. Visually quieter (no green
   fill, no hover lift) so the eye is drawn to the action-required cards. */
.inv-log-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  user-select: none;
}
.inv-log-chip i {
  font-size: 10px;
  color: #94a3b8;
}

/* Slight subtle lift on investigatable cards so the eye knows where the
   actionable items are at a glance. */
.inv-log.investigatable {
  border-color: #99f6e4;
  box-shadow: 0 1px 0 rgba(13,148,136,.04);
}


/* ═══════════════════════════════════════════════════════════
   INVESTIGATION CHAT TAB CONTENT
   The card that renders in the ext panel's #invMsgs pane when
   an investigation is opened.
   ═══════════════════════════════════════════════════════════ */

.inv-chat-card {
  background: linear-gradient(135deg, #f0fdfa, #ecfdf5);
  border: 1px solid #99f6e4;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 8px;
}

.inv-chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.inv-chat-header i {
  color: #0d9488;
  font-size: 14px;
}

.inv-chat-header strong {
  font-size: 14px;
  color: #064e59;
}

.inv-chat-sku {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  margin-bottom: 12px;
}

.inv-chat-sku-field { font-size: 11px; }
.inv-chat-sku-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #0d9488;
  opacity: .8;
}
.inv-chat-sku-value {
  font-weight: 500;
  color: #064e59;
  margin-top: 1px;
}

.inv-chat-chart-wrap {
  background: #fff;
  border: 1px solid #ccfbf1;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0;
}
.inv-chat-chart-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #064e59;
  margin-bottom: 8px;
}
.inv-chat-chart-canvas {
  width: 100%;
  height: 180px;
  display: block;
}

.inv-chat-analysis {
  font-size: 12.5px;
  line-height: 1.6;
  color: #0f172a;
  white-space: pre-wrap;
  margin-top: 6px;
}
.inv-chat-analysis strong { color: #064e59; font-weight: 700; }
.inv-chat-analysis em { font-style: normal; color: #0d9488; font-weight: 600; }

.inv-chat-recommend {
  margin-top: 12px;
  padding: 10px 12px;
  background: #fff;
  border-left: 3px solid #0d9488;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #064e59;
}
.inv-chat-recommend-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #0d9488;
  margin-bottom: 4px;
  display: block;
}


/* ═══════════════════════════════════════════════════════════
   EXTENSION PANEL — INVENTORY TAB STYLING
   Customizes the ep-tab[data-tab="inv"] in the chat tab bar so
   inventory tabs are visually distinct from gap and main tabs.
   ═══════════════════════════════════════════════════════════ */

/* Inv tab — teal accent when active */
.ep-tab[data-tab="inv"].active {
  border-bottom-color: #0d9488;
  color: #064e59;
}

.ep-tab[data-tab="inv"] i {
  color: #0d9488;
}

/* Inv tab indicator dot — distinct from gap's amber dot */
.ep-tab[data-tab="inv"] .ep-tab-dot,
.ep-tab .inv-dot {
  background: #0d9488;
}