/*
 * Kalshi cockpit adapter.
 *
 * The exported Kalshi stylesheet is loaded before this file. This adapter maps
 * the demo cockpit toward the current Kalshi exchange UI: black app shell,
 * compact market cards, green YES/CTA treatments, red NO/risk, and low-contrast
 * watchlist dividers.
 */

.kalshi-cockpit {
  --kalshi-app: #08090d;
  --kalshi-card: var(--surface-x20, #14181f);
  --kalshi-card-raised: var(--surface-x30, #1b2029);
  --kalshi-header: #0c0e12;
  --kalshi-border: rgba(255, 255, 255, 0.075);
  --kalshi-border-strong: rgba(255, 255, 255, 0.16);
  --kalshi-hairline: rgba(255, 255, 255, 0.055);
  --kalshi-copy: var(--text-x10, rgba(255, 255, 255, 0.9));
  --kalshi-muted: var(--text-x20, rgba(255, 255, 255, 0.55));
  --kalshi-faint: var(--text-x30, rgba(255, 255, 255, 0.3));
  --kalshi-green: var(--brand-primary, #28cc95);
  --kalshi-green-2: var(--green-x50, #7ee0bf);
  --kalshi-red: var(--red-x10, #ff4d6a);
  --kalshi-blue: #408fff;
  --kalshi-orange: #ff9500;
  --kalshi-pill: 999px;

  background: var(--kalshi-app) !important;
  border: 1px solid var(--kalshi-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 64px rgba(0, 0, 0, 0.42) !important;
  color: var(--kalshi-copy) !important;
  font-family: var(--font-kalshi-sans), Inter, system-ui, sans-serif !important;
  overflow: hidden !important;
}

.kalshi-cockpit *,
.kalshi-cockpit button,
.kalshi-cockpit input {
  font-family: var(--font-kalshi-sans), Inter, system-ui, sans-serif !important;
}

/* Exchange header: black nav bar, green Kalshi mark, compact live/account pill. */
.kalshi-cockpit > div:first-of-type {
  background: var(--kalshi-header) !important;
  border-bottom: 1px solid var(--kalshi-border) !important;
  min-height: 50px !important;
  padding: 0 16px !important;
}

.kalshi-cockpit > div:first-of-type img {
  height: 24px !important;
  object-fit: contain !important;
  width: 24px !important;
}

.kalshi-cockpit > div:first-of-type > span {
  color: var(--kalshi-copy) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  line-height: 18px !important;
}

.kalshi-cockpit > div:first-of-type > span:first-of-type::after {
  color: var(--kalshi-muted);
  content: "   MARKETS   LIVE   SPORTS";
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-left: 14px;
}

.kalshi-cockpit > div:first-of-type > span:last-child {
  background: rgba(40, 204, 149, 0.12) !important;
  border: 1px solid rgba(40, 204, 149, 0.32) !important;
  border-radius: var(--kalshi-pill) !important;
  color: var(--kalshi-green) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  letter-spacing: 0.04em !important;
  padding: 5px 10px !important;
}

.kalshi-cockpit > div:first-of-type > span:last-child > span {
  background: var(--kalshi-green) !important;
  box-shadow: 0 0 10px rgba(40, 204, 149, 0.55) !important;
}

/* Body: dense market board with compact cards and a subtle green glow. */
.kalshi-cockpit .bot-panes {
  background:
    radial-gradient(circle at 78% 4%, rgba(40, 204, 149, 0.14), transparent 28%),
    var(--kalshi-app) !important;
  gap: 10px !important;
  padding: 12px !important;
}

.kalshi-cockpit .bot-pane,
.kalshi-cockpit .bot-pane-stack > div {
  background: linear-gradient(180deg, rgba(27, 32, 41, 0.96), rgba(15, 18, 23, 0.96)) !important;
  border: 1px solid var(--kalshi-border) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

.kalshi-cockpit .bot-pane > div,
.kalshi-cockpit .bot-pane-stack > div > div {
  background: transparent !important;
}

.kalshi-cockpit .bot-pane > div > div:first-child,
.kalshi-cockpit .bot-pane-stack > div > div > div:first-child {
  background: rgba(8, 9, 13, 0.42) !important;
  border-bottom: 1px solid var(--kalshi-border) !important;
  min-height: 36px !important;
  padding: 0 12px !important;
}

.kalshi-cockpit .bot-pane > div > div:first-child span,
.kalshi-cockpit .bot-pane-stack > div > div > div:first-child span {
  color: var(--kalshi-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

/* Schedules as market/probability pills. */
.kalshi-cockpit .bot-pane-schedule [style*="border-top"],
.kalshi-cockpit .bot-pane-schedule [style*="border-left"],
.kalshi-cockpit .bot-pane-directory [style*="border-top"],
.kalshi-cockpit .bot-pane-directory [style*="border-bottom"] {
  border-color: var(--kalshi-hairline) !important;
}

.kalshi-cockpit .bot-pane-schedule button {
  background: rgba(40, 204, 149, 0.10) !important;
  border: 1px solid rgba(40, 204, 149, 0.32) !important;
  border-radius: var(--kalshi-pill) !important;
  box-shadow: none !important;
  color: var(--kalshi-copy) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  line-height: 13px !important;
  min-height: 28px !important;
  overflow: hidden !important;
  padding: 4px 10px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.kalshi-cockpit .bot-pane-schedule button:nth-of-type(2n) {
  background: rgba(64, 143, 255, 0.11) !important;
  border-color: rgba(64, 143, 255, 0.32) !important;
}

.kalshi-cockpit .bot-pane-schedule button:nth-of-type(3n) {
  background: rgba(255, 149, 0, 0.10) !important;
  border-color: rgba(255, 149, 0, 0.30) !important;
}

.kalshi-cockpit .bot-pane-schedule button::before {
  background: var(--kalshi-green);
  border-radius: 999px;
  content: "";
  display: inline-block;
  height: 6px;
  margin-right: 7px;
  width: 6px;
}

.kalshi-cockpit .bot-pane-schedule button:hover {
  background: rgba(40, 204, 149, 0.17) !important;
}

/* Directory rows as trending/watchlist rows. */
.kalshi-cockpit .bot-pane-directory button {
  border-radius: 8px !important;
  color: var(--kalshi-muted) !important;
  font-size: 11px !important;
  font-weight: 550 !important;
}

.kalshi-cockpit .bot-pane-directory button:hover {
  background: rgba(255, 255, 255, 0.045) !important;
  color: var(--kalshi-copy) !important;
}

.kalshi-cockpit .bot-pane-directory button::after {
  color: var(--kalshi-green);
  content: "  ›";
  font-weight: 800;
}

/* Chat/timeline: dark market cards with YES/NO edge color. */
.kalshi-cockpit .msg-bubble > div,
.kalshi-cockpit .bot-pane-chat .ytSpecButtonShapeNextTonal {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid var(--kalshi-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: var(--kalshi-copy) !important;
}

.kalshi-cockpit .msg-bubble:nth-child(2n) > div {
  border-color: rgba(40, 204, 149, 0.28) !important;
}

.kalshi-cockpit .msg-bubble > div:hover,
.kalshi-cockpit .bot-pane-chat .ytSpecButtonShapeNextTonal:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.kalshi-cockpit .bot-pane-chat > div > div:last-child {
  background: rgba(8, 9, 13, 0.55) !important;
  border-top: 1px solid var(--kalshi-border) !important;
  padding: 10px 12px !important;
}

.kalshi-cockpit .minichat-input {
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid var(--kalshi-border) !important;
  border-radius: var(--kalshi-pill) !important;
  color: var(--kalshi-copy) !important;
  font-size: 13px !important;
  height: 38px !important;
  line-height: 18px !important;
  padding: 0 14px !important;
}

.kalshi-cockpit .minichat-input::placeholder {
  color: var(--kalshi-faint) !important;
}

.kalshi-cockpit .minichat-input:focus {
  background: rgba(255, 255, 255, 0.075) !important;
  border-color: var(--kalshi-green) !important;
  box-shadow: 0 0 0 3px rgba(40, 204, 149, 0.14) !important;
}

.kalshi-cockpit .bot-pane-chat button[aria-label="Send"] {
  align-items: center !important;
  background: var(--kalshi-green) !important;
  border: none !important;
  border-radius: 50% !important;
  color: var(--text-inverse, rgba(0, 0, 0, 0.9)) !important;
  display: flex !important;
  height: 38px !important;
  justify-content: center !important;
  min-width: 0 !important;
  padding: 0 !important;
  width: 38px !important;
}

.kalshi-cockpit .bot-pane-chat button[aria-label="Send"]:hover {
  background: var(--kalshi-green-2) !important;
}

/* Remove terminal chrome, keep compact exchange status dots. */
.kalshi-cockpit .bot-pane-terminal span[style*="gap"] {
  opacity: 0.5 !important;
}

.kalshi-cockpit .bot-pane-terminal span[style*="background"] {
  box-shadow: none !important;
}

.kalshi-cockpit .bot-pane-terminal [style*="color"],
.kalshi-cockpit .bot-pane-chat [style*="color"] {
  color: inherit;
}

.kalshi-cockpit .bot-scroll {
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent !important;
}