/* Codex-added styles */

/* Floating AI badge (kept outside box DOM) */
.pp-ai-badge-float {
  position: fixed;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.pp-ai-badge-float .material-symbols-outlined {
  font-size: 18px;
}

.pp-ai-badge-float.pp-ai-badge-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Keep markdown grid children bounded within parent */
.pp-md-grid {
  overflow: hidden;
  box-sizing: border-box;
}

.pp-md-grid > .nbx {
  max-width: 100%;
  box-sizing: border-box;
}

/* Contain deeper nested boxes in markdown grids */
.pp-md-grid,
.pp-md-grid .nbx {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.pp-md-grid .nbx > p,
.pp-md-grid .nbx p {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Prevent grid items from overflowing their columns */
.pp-md-grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.pp-md-grid > .nbx,
.pp-md-grid > div {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Allow nested cards to size naturally; avoid truncation */
.pp-md-grid {
  overflow: visible;
}

.pp-md-grid .nbx {
  overflow: visible;
}

/* Nested markdown grids inside a card should render as block to avoid overflow */
.pp-md-card > .pp-md-grid {
  display: block;
}

/* Increase vertical spacing between grid rows */
.pp-md-grid {
  row-gap: 0.5rem;
}

/* Sticky header */
#GroupHeader {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--pp-panel-header-bg, rgba(255,255,255,0.95));
  backdrop-filter: blur(6px);
}

/* Prevent sticky header from causing horizontal scroll */
#GroupHeader {
  width: 100%;
  left: 0;
  right: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

/* Fix horizontal overflow on multi-column grids */
.grid1,
.grid11,
.grid111,
.grid1111,
.grid11111,
.grid111111,
.grid21,
.grid12,
.grid31,
.grid13,
.grid32,
.grid23,
.grid121,
.grid433,
.grid343,
.grid334,
.grid312,
.grid211,
.grid112,
.grid221,
.grid123,
.grid1.grid-fluid,
.grid11.grid-fluid,
.grid111.grid-fluid,
.grid1111.grid-fluid,
.grid11111.grid-fluid,
.grid111111.grid-fluid,
.grid21.grid-fluid,
.grid12.grid-fluid,
.grid31.grid-fluid,
.grid13.grid-fluid,
.grid32.grid-fluid,
.grid23.grid-fluid,
.grid121.grid-fluid,
.grid433.grid-fluid,
.grid343.grid-fluid,
.grid334.grid-fluid,
.grid312.grid-fluid,
.grid211.grid-fluid,
.grid112.grid-fluid,
.grid221.grid-fluid,
.grid123.grid-fluid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.grid1 > .nbx,
.grid11 > .nbx,
.grid111 > .nbx,
.grid1111 > .nbx,
.grid11111 > .nbx,
.grid111111 > .nbx,
.grid21 > .nbx,
.grid12 > .nbx,
.grid31 > .nbx,
.grid13 > .nbx,
.grid32 > .nbx,
.grid23 > .nbx,
.grid121 > .nbx,
.grid433 > .nbx,
.grid343 > .nbx,
.grid334 > .nbx,
.grid312 > .nbx,
.grid211 > .nbx,
.grid112 > .nbx,
.grid221 > .nbx,
.grid123 > .nbx,
.grid1.grid-fluid > .nbx,
.grid11.grid-fluid > .nbx,
.grid111.grid-fluid > .nbx,
.grid1111.grid-fluid > .nbx,
.grid11111.grid-fluid > .nbx,
.grid111111.grid-fluid > .nbx,
.grid21.grid-fluid > .nbx,
.grid12.grid-fluid > .nbx,
.grid31.grid-fluid > .nbx,
.grid13.grid-fluid > .nbx,
.grid32.grid-fluid > .nbx,
.grid23.grid-fluid > .nbx,
.grid121.grid-fluid > .nbx,
.grid433.grid-fluid > .nbx,
.grid343.grid-fluid > .nbx,
.grid334.grid-fluid > .nbx,
.grid312.grid-fluid > .nbx,
.grid211.grid-fluid > .nbx,
.grid112.grid-fluid > .nbx,
.grid221.grid-fluid > .nbx,
.grid123.grid-fluid > .nbx {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  [class*="grid"].grid-fluid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [class*="grid"].grid-fluid-2 > .nbx {
    grid-column: auto !important;
    grid-column-end: auto !important;
  }
}

/* Color picker background should be visible */
.pp-colorpicker-root {
  background: var(--pp-floating-panel-bg) !important;
  border: var(--pp-glass-border);
  box-shadow: var(--pp-floating-panel-bs);
  backdrop-filter: var(--pp-floating-panel-bf);
}

/* Allow user-picked backgrounds to override pp-root level colors */
.pp-root > .nbx {
  background: var(--pp-override-bg, var(--pp-l2-bg, color-mix(in srgb, var(--pp-c2) calc(var(--pp-l2-opacity)*100%), transparent))) !important;
  background-color: var(--pp-override-bg, var(--pp-l2-bg, var(--pp-c2))) !important;
}
.pp-root > .nbx > .nbx {
  background: var(--pp-override-bg, var(--pp-l3-bg, color-mix(in srgb, var(--pp-c3) calc(var(--pp-l3-opacity)*100%), transparent))) !important;
  background-color: var(--pp-override-bg, var(--pp-l3-bg, var(--pp-c3))) !important;
}
.pp-root > .nbx > .nbx > .nbx {
  background: var(--pp-override-bg, var(--pp-l4-bg, color-mix(in srgb, var(--pp-c4) calc(var(--pp-l4-opacity)*100%), transparent))) !important;
  background-color: var(--pp-override-bg, var(--pp-l4-bg, var(--pp-c4))) !important;
}
.pp-root > .nbx > .nbx > .nbx > .nbx {
  background: var(--pp-override-bg, var(--pp-l5-bg, color-mix(in srgb, var(--pp-c5) calc(var(--pp-l5-opacity)*100%), transparent))) !important;
  background-color: var(--pp-override-bg, var(--pp-l5-bg, var(--pp-c5))) !important;
}
.pp-root > .nbx > .nbx > .nbx > .nbx > .nbx {
  background: var(--pp-override-bg, var(--pp-l5-bg, color-mix(in srgb, var(--pp-c5) calc(var(--pp-l5-opacity)*100%), transparent))) !important;
  background-color: var(--pp-override-bg, var(--pp-l5-bg, var(--pp-c5))) !important;
}
.pp-root > .nbx > .nbx > .nbx > .nbx > .nbx > .nbx,
.pp-root .nbx .nbx .nbx .nbx .nbx .nbx .nbx {
  background: var(--pp-override-bg, var(--pp-l5-bg, color-mix(in srgb, var(--pp-c5) calc(var(--pp-l5-opacity)*100%), transparent))) !important;
  background-color: var(--pp-override-bg, var(--pp-l5-bg, var(--pp-c5))) !important;
}

/* Prefer explicit level classes over depth-based styling */
.pp-root .nbx.pp-level-1 {
  background: var(--pp-override-bg, var(--pp-l1-bg, color-mix(in srgb, var(--pp-c1) calc(var(--pp-l1-opacity)*100%), transparent))) !important;
  background-color: var(--pp-override-bg, var(--pp-l1-bg, var(--pp-c1))) !important;
}
.pp-root .nbx.pp-level-2 {
  background: var(--pp-override-bg, var(--pp-l2-bg, color-mix(in srgb, var(--pp-c2) calc(var(--pp-l2-opacity)*100%), transparent))) !important;
  background-color: var(--pp-override-bg, var(--pp-l2-bg, var(--pp-c2))) !important;
}
.pp-root .nbx.pp-level-3 {
  background: var(--pp-override-bg, var(--pp-l3-bg, color-mix(in srgb, var(--pp-c3) calc(var(--pp-l3-opacity)*100%), transparent))) !important;
  background-color: var(--pp-override-bg, var(--pp-l3-bg, var(--pp-c3))) !important;
}
.pp-root .nbx.pp-level-4 {
  background: var(--pp-override-bg, var(--pp-l4-bg, color-mix(in srgb, var(--pp-c4) calc(var(--pp-l4-opacity)*100%), transparent))) !important;
  background-color: var(--pp-override-bg, var(--pp-l4-bg, var(--pp-c4))) !important;
}
.pp-root .nbx.pp-level-5 {
  background: var(--pp-override-bg, var(--pp-l5-bg, color-mix(in srgb, var(--pp-c5) calc(var(--pp-l5-opacity)*100%), transparent))) !important;
  background-color: var(--pp-override-bg, var(--pp-l5-bg, var(--pp-c5))) !important;
}
.pp-root .nbx.pp-level-cycle-3 {
  background: var(--pp-override-bg, var(--pp-l3-bg, color-mix(in srgb, var(--pp-c3) calc(var(--pp-l3-opacity)*100%), transparent))) !important;
  background-color: var(--pp-override-bg, var(--pp-l3-bg, var(--pp-c3))) !important;
}
.pp-root .nbx.pp-level-cycle-4 {
  background: var(--pp-override-bg, var(--pp-l4-bg, color-mix(in srgb, var(--pp-c4) calc(var(--pp-l4-opacity)*100%), transparent))) !important;
  background-color: var(--pp-override-bg, var(--pp-l4-bg, var(--pp-c4))) !important;
}
.pp-root .nbx.pp-level-cycle-5 {
  background: var(--pp-override-bg, var(--pp-l5-bg, color-mix(in srgb, var(--pp-c5) calc(var(--pp-l5-opacity)*100%), transparent))) !important;
  background-color: var(--pp-override-bg, var(--pp-l5-bg, var(--pp-c5))) !important;
}

/* Ticker font size inline input */
.pp-ticker-input {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.pp-ticker-input-field {
  width: 3.2rem;
  padding: 2px 4px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.12);
  font-size: 0.75rem;
  text-align: right;
  background: rgba(255,255,255,0.85);
  color: var(--pp-font-menu-color, #222);
}

.pp-ticker-input-label {
  font-size: 0.75rem;
  color: var(--pp-font-menu-color, #222);
}

/* Floating font size input (shown near ticker item) */
.pp-fontsize-popup {
  position: fixed;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--pp-bg-menu, rgba(255,255,255,0.9));
  border: var(--pp-border-menu, 1px solid rgba(0,0,0,0.12));
  box-shadow: var(--pp-box-shadow-menu, 0 8px 20px rgba(0,0,0,0.12));
  z-index: 1001;
  font-family: var(--pp-font-menu, Nunito);
}

.pp-fontsize-popup input {
  width: 3.4rem;
  padding: 2px 4px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.12);
  font-size: 0.75rem;
  text-align: right;
  background: rgba(255,255,255,0.9);
  color: var(--pp-font-menu-color, #222);
}

.pp-fontsize-popup span {
  font-size: 0.75rem;
  color: var(--pp-font-menu-color, #222);
}