/*
 * ============================================================
 * ThinkerStreet Markdown — Structured Formatting
 * ============================================================
 * PURPOSE
 *   One and only styling source for structured AI output.
 *
 * OWNS
 *   inline code, fenced code, tables, math, Mermaid/diagrams,
 *   future chart containers, frame shells, toolbars, copy/wrap
 *   controls, horizontal overflow and structured scrollbars.
 *
 * DOES NOT OWN
 *   chat layout/bubbles or prose typography.
 *
 * LOAD ORDER
 *   None. No rule in this file depends on overriding chat.css
 *   or markdown.css. It targets only md-* structured classes.
 * ============================================================
 */

/* ============================================================
   1. FORMATTING THEME
   Change this section to reskin structured output globally.
   ============================================================ */

.chat-bubble.bot {
  --fmt-accent: var(--response-color, var(--accent, #65d5be));
  --fmt-panel: #080d15;
  --fmt-panel-raised: #101925;
  --fmt-text: #dce7f3;
  --fmt-muted: #9baabd;
  --fmt-edge: color-mix(in srgb, var(--fmt-accent) 18%, #ffffff18);
  --fmt-radius: 13px;
  --fmt-cell-min: 120px;
}

/* ============================================================
   2. INLINE CODE
   ============================================================ */

.chat-bubble.bot .md-inline-code {
  padding: .13em .38em;
  border: 1px solid color-mix(in srgb, var(--fmt-accent) 13%, #ffffff20);
  border-radius: 5px;
  background: color-mix(in srgb, var(--fmt-accent) 3%, #ffffff0c);
  color: #dce8f2;
  font: .88em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

/* ============================================================
   3. STRUCTURED FRAMES
   ============================================================ */

.chat-bubble.bot .md-code-block,
.chat-bubble.bot .md-table-frame,
.chat-bubble.bot .md-math-frame,
.chat-bubble.bot .md-chart-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 1.18em 0 1.38em;
  overflow: hidden;
}

/* Strong glass shell: code / math / charts. */
.chat-bubble.bot .md-code-block,
.chat-bubble.bot .md-math-frame,
.chat-bubble.bot .md-chart-frame {
  border: 1px solid var(--fmt-edge);
  border-radius: var(--fmt-radius);
  background: linear-gradient(145deg, rgba(16,25,38,.96), rgba(6,10,17,.985));
  box-shadow: 0 10px 30px #0000002b, inset 0 1px #ffffff0b;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Tables deliberately use a quieter shell. */
.chat-bubble.bot .md-table-frame {
  border: 1px solid color-mix(in srgb, var(--fmt-accent) 13%, #ffffff13);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(255,255,255,.014), rgba(255,255,255,.006));
  box-shadow: 0 5px 20px #00000018, inset 0 1px #ffffff07;
}

.chat-bubble.bot .md-code-block::before,
.chat-bubble.bot .md-table-frame::before,
.chat-bubble.bot .md-math-frame::before,
.chat-bubble.bot .md-chart-frame::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 145px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--fmt-accent),
    color-mix(in srgb, var(--fmt-accent) 38%, transparent), transparent);
  opacity: .9;
}

/* ============================================================
   4. FRAME TOOLBARS
   ============================================================ */

.chat-bubble.bot .md-code-toolbar,
.chat-bubble.bot .md-frame-toolbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  box-sizing: border-box;
  padding: 5px 7px 5px 13px;
  border-bottom: 1px solid #ffffff10;
  background: linear-gradient(180deg, #ffffff07, rgba(255,255,255,.010));
  color: var(--fmt-muted);
  font: 650 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .035em;
}

.chat-bubble.bot .md-table-frame .md-frame-toolbar {
  min-height: 34px;
  padding-block: 3px;
  background: color-mix(in srgb, var(--fmt-accent) 2.5%, #0a111b);
}

.chat-bubble.bot .md-code-language,
.chat-bubble.bot .md-frame-toolbar > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--fmt-accent) 27%, #aab8c8);
}

.chat-bubble.bot .md-code-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* ============================================================
   5. COPY + WRAP CONTROLS
   ============================================================ */

.chat-bubble.bot .md-code-action,
.chat-bubble.bot .md-frame-copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 29px;
  box-sizing: border-box;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--fmt-accent) 11%, #ffffff1b);
  border-radius: 7px;
  outline: 0;
  background: linear-gradient(180deg, #ffffff09, rgba(255,255,255,.014));
  color: #bdcad8;
  font: 650 11px/1.2 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .16s ease, border-color .16s ease, color .16s ease,
    transform .12s ease, box-shadow .16s ease;
}

.chat-bubble.bot .md-code-action:hover,
.chat-bubble.bot .md-code-action:focus-visible,
.chat-bubble.bot .md-frame-copy:hover,
.chat-bubble.bot .md-frame-copy:focus-visible {
  border-color: color-mix(in srgb, var(--fmt-accent) 38%, #ffffff28);
  background: color-mix(in srgb, var(--fmt-accent) 8%, #ffffff0c);
  color: #fff;
  box-shadow: 0 0 14px color-mix(in srgb, var(--fmt-accent) 9%, transparent);
}

.chat-bubble.bot .md-code-action:active,
.chat-bubble.bot .md-frame-copy:active { transform: scale(.96); }

/* Copy glyph is CSS-only; no icon dependency. */
.chat-bubble.bot .md-code-copy::before,
.chat-bubble.bot .md-frame-copy::before {
  content: "";
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border: 1.35px solid currentColor;
  border-radius: 2px;
  box-shadow: -3px 3px 0 -1px var(--fmt-panel-raised), -4px 4px 0 -1px currentColor;
  transform: translate(1px,-1px);
  opacity: .9;
}

/* ============================================================
   6. HORIZONTAL SCROLL REGIONS
   One scrollbar design for every structured output type.
   ============================================================ */

.chat-bubble.bot .md-code-scroll,
.chat-bubble.bot .md-table-wrap,
.chat-bubble.bot .md-math-display,
.chat-bubble.bot .md-diagram,
.chat-bubble.bot .md-chart-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--fmt-accent) 88%, #fff) transparent;
}

.chat-bubble.bot .md-code-scroll::-webkit-scrollbar,
.chat-bubble.bot .md-table-wrap::-webkit-scrollbar,
.chat-bubble.bot .md-math-display::-webkit-scrollbar,
.chat-bubble.bot .md-diagram::-webkit-scrollbar,
.chat-bubble.bot .md-chart-scroll::-webkit-scrollbar { height: 8px; }

.chat-bubble.bot .md-code-scroll::-webkit-scrollbar-track,
.chat-bubble.bot .md-table-wrap::-webkit-scrollbar-track,
.chat-bubble.bot .md-math-display::-webkit-scrollbar-track,
.chat-bubble.bot .md-diagram::-webkit-scrollbar-track,
.chat-bubble.bot .md-chart-scroll::-webkit-scrollbar-track { background: transparent; }

.chat-bubble.bot .md-code-scroll::-webkit-scrollbar-thumb,
.chat-bubble.bot .md-table-wrap::-webkit-scrollbar-thumb,
.chat-bubble.bot .md-math-display::-webkit-scrollbar-thumb,
.chat-bubble.bot .md-diagram::-webkit-scrollbar-thumb,
.chat-bubble.bot .md-chart-scroll::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fmt-accent) 86%, #fff);
  background-clip: padding-box;
  box-shadow: 0 0 8px color-mix(in srgb, var(--fmt-accent) 20%, transparent);
}

.chat-bubble.bot .md-table-wrap:focus-visible,
.chat-bubble.bot .md-code-scroll:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--fmt-accent) 72%, #fff);
  outline-offset: -2px;
}

/* ============================================================
   7. CODE BLOCKS
   ============================================================ */

.chat-bubble.bot .md-code-block pre {
  width: max-content;
  min-width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 0;
  padding: 16px 17px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  color: var(--fmt-text);
  font: 12.75px/1.62 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  tab-size: 2;
}

.chat-bubble.bot .md-code-block pre code {
  display: block;
  width: max-content;
  min-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.chat-bubble.bot .md-code-block.is-wrapped pre,
.chat-bubble.bot .md-code-block.is-wrapped pre code {
  width: 100%;
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Code-copy feedback. */
.chat-bubble.bot .md-code-copy-flash {
  position: absolute;
  z-index: 8;
  top: 38px;
  bottom: 0;
  left: -26%;
  width: 20%;
  opacity: 0;
  pointer-events: none;
  transform: skewX(-15deg);
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--fmt-accent) 42%, #fff), transparent);
  mix-blend-mode: screen;
}

.chat-bubble.bot .md-code-block.is-copied .md-code-copy-flash {
  animation: ts-format-copy-scan 760ms cubic-bezier(.2,.75,.25,1) forwards;
}

@keyframes ts-format-copy-scan {
  0% { left: -26%; opacity: 0; }
  14% { opacity: .8; }
  100% { left: 110%; opacity: 0; }
}

.chat-bubble.bot .md-code-copied {
  position: absolute;
  z-index: 10;
  top: 48px;
  right: 12px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--fmt-accent) 40%, #ffffff19);
  border-radius: 999px;
  opacity: 0;
  background: #080e18ed;
  color: #f4f7fb;
  font-size: 10px;
  font-weight: 700;
  pointer-events: none;
}

.chat-bubble.bot .md-code-block.is-copied .md-code-copied {
  animation: ts-format-copied 1050ms ease forwards;
}

@keyframes ts-format-copied {
  0%,100% { opacity: 0; transform: translateY(3px) scale(.92); }
  18% { opacity: 1; transform: translateY(0) scale(1.03); }
  55% { opacity: 1; transform: scale(1); }
}

/* ============================================================
   8. TABLES
   This is the ONLY table styling section in the package.
   ============================================================ */

.chat-bubble.bot .md-table-wrap {
  position: relative;
  display: block;
  margin: 0;
}

/*
 * The table is allowed to exceed its container.
 * Cells provide the minimum column width, so overflow-x:auto
 * has real overflow to scroll instead of crushing the columns.
 */
.chat-bubble.bot .md-table {
  width: max-content;
  min-width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  background: transparent;
  font-size: 13px;
  line-height: 1.48;
}

.chat-bubble.bot .md-table th,
.chat-bubble.bot .md-table td {
  min-width: var(--fmt-cell-min);
  max-width: 380px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 0;
  border-right: 1px solid #ffffff0a;
  border-bottom: 1px solid #ffffff0b;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.chat-bubble.bot .md-table th {
  color: color-mix(in srgb, var(--fmt-accent) 58%, #fff);
  font-weight: 720;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--fmt-accent) 12%, #ffffff04),
    color-mix(in srgb, var(--fmt-accent) 5%, #ffffff02));
  box-shadow: inset 0 -1px color-mix(in srgb, var(--fmt-accent) 24%, #ffffff08);
}

.chat-bubble.bot .md-table td {
  color: color-mix(in srgb, var(--ink, #e8edf5) 90%, var(--muted, #9da9ba));
}

.chat-bubble.bot .md-table .md-align-left { text-align: left; }
.chat-bubble.bot .md-table .md-align-center { text-align: center; }
.chat-bubble.bot .md-table .md-align-right { text-align: right; }

.chat-bubble.bot .md-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.006); }
.chat-bubble.bot .md-table tbody tr:hover td { background: color-mix(in srgb, var(--fmt-accent) 4%, #ffffff02); }
.chat-bubble.bot .md-table tr:last-child td { border-bottom: 0; }
.chat-bubble.bot .md-table th:last-child,
.chat-bubble.bot .md-table td:last-child { border-right: 0; }

.chat-bubble.bot .md-table .md-inline-code { white-space: nowrap; }

/* ============================================================
   9. MATH + DIAGRAMS + CHARTS
   ============================================================ */

.chat-bubble.bot .md-math {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.chat-bubble.bot .md-math-display {
  padding: 16px;
  text-align: center;
}

.chat-bubble.bot .md-math-display > .katex-display {
  width: max-content;
  min-width: 100%;
  margin: 0;
}

.chat-bubble.bot .md-math-source[hidden] { display: none !important; }

.chat-bubble.bot .md-diagram {
  padding: 14px;
  text-align: center;
}

.chat-bubble.bot .md-diagram svg {
  display: block;
  width: max-content;
  max-width: none;
  min-width: 100%;
  height: auto;
  margin: 0 auto;
}

.chat-bubble.bot .md-code-block.has-diagram .md-code-scroll { display: none; }
.chat-bubble.bot .md-code-block.has-diagram.is-source-visible .md-code-scroll { display: block; }

.chat-bubble.bot .md-chart-scroll { padding: 14px; }
.chat-bubble.bot .md-chart-scroll canvas,
.chat-bubble.bot .md-chart-scroll svg { display: block; max-width: none; }

/* ============================================================
   10. SMALL SCREENS
   ============================================================ */

@media (max-width: 600px) {
  .chat-bubble.bot {
    --fmt-radius: 11px;
    --fmt-cell-min: 118px;
  }

  .chat-bubble.bot .md-code-block pre {
    padding: 15px 14px 17px;
    font-size: 12.25px;
  }

  .chat-bubble.bot .md-table th,
  .chat-bubble.bot .md-table td { padding: 10px 11px; }
}

/* ============================================================
   11. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .chat-bubble.bot .md-code-block.is-copied .md-code-copy-flash,
  .chat-bubble.bot .md-code-block.is-copied .md-code-copied { animation: none; }

  .chat-bubble.bot .md-code-action,
  .chat-bubble.bot .md-frame-copy { transition: none; }
}