.ncf-root{display:block}
.ncf-frame{display:grid;gap:1rem;height:36rem;max-height:85vh}

/* Desktop: three columns; auto-collapse via CSS grid if sections hidden */
@media (min-width: 1024px){
  .ncf-frame{grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: stretch}
  .ncf-frame.ncf-one{grid-template-columns: 1fr}
  .ncf-frame.ncf-two{grid-template-columns: 1fr 2fr}
  .ncf-frame.ncf-three{grid-template-columns: 1fr 1fr 1fr}
  .ncf-section{border:1px solid var(--ncw-border,#e5e7eb); border-radius:1rem; overflow:hidden; background:var(--ncw-bg,#fff); height:100%; display:flex; flex-direction:column; min-height:0}
  .ncf-chat{display:flex;flex-direction:column;min-height:0}
  .ncf-messages{flex:1;overflow:auto;padding:0.75rem;min-height:0;-webkit-overflow-scrolling:touch;padding-bottom:5rem}
  .ncf-input{padding:0.5rem 0.75rem;display:flex;gap:0.5rem;position:sticky;bottom:0;left:0;right:0;background:var(--ncw-bg,#fff);align-items:center;width:100%;z-index:1;box-sizing:border-box}
  .ncf-input input{flex:1;min-width:0;padding:0.6rem 0.75rem;border:1px solid #e5e7eb !important;border-radius:0.5rem;background:#fff;box-sizing:border-box}
  .ncf-input button{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer}
  .ncf-input button svg{display:block}
  /* Config button: match send button shape (icon-only, no border/bg); only icon color changes */
  .ncf-input .ncf-config-btn{background:transparent;border:none;color:#9ca3af;transition:color .15s ease}
  .ncf-input .ncf-config-btn:hover{background:transparent;border:none;color:#374151}
  .ncf-input .ncf-config-btn svg{width:24px;height:24px}
  .ncf-powered{display:block;margin:0.25rem 0.75rem 0.25rem auto;font-size:0.75rem;color:#cbd5e1;text-decoration:none;white-space:nowrap;opacity:0.7;transition:color .15s ease, opacity .15s ease}
  .ncf-powered:hover{color:#9ca3af;opacity:1;text-decoration:none}
  /* Meta ID overlay (top-right inside messages) */
  .ncf-messages{position:relative}
}
/* Hide mini video by default; only show on mobile */
.ncf-mini-video{display:none}
/* Hide desktop video on mobile */
.ncf-video-desktop{display:block}

/* Base meta ID overlay styling - applies to all screen sizes */
.ncf-meta{position:absolute;top:0.25rem;right:0.75rem;background:transparent;font-size:0.75rem;line-height:1;color:#cbd5e1;opacity:0.7;white-space:nowrap;max-width:70%;overflow:hidden;text-overflow:ellipsis;pointer-events:none}

/* Mobile: stacked; chat first, configurator second, video minimized */
@media (max-width: 1023.98px){
  .ncf-frame{grid-template-columns: 1fr}
  .ncf-frame{height:36rem; overflow:hidden}
  .ncf-section{border:1px solid var(--ncw-border,#e5e7eb); border-radius:1rem; overflow:hidden; background:var(--ncw-bg,#fff); height:36rem; display:flex; flex-direction:column; min-height:0}
  .ncf-chat{position:relative;min-height:0;display:flex;flex-direction:column}
  /* Hide desktop video on mobile */
  .ncf-video-desktop{display:none}
  /* Show mini video on mobile */
  .ncf-mini-video{display:block; position:absolute; top:0.5rem; left:0.5rem; width:80px; height:80px; border-radius:0.5rem; overflow:hidden; border:0 !important; background:#000}
  /* Adjust banner positioning only when mini video exists */
  .ncf-chat.has-mini-video .ncf-banner{margin-left:6rem; margin-right:0.5rem}
  /* Mobile messages area - takes up available space */
  .ncf-messages{flex:1;overflow:auto;padding:0.75rem;min-height:0;-webkit-overflow-scrolling:touch;padding-bottom:5rem}
  /* Mobile input styling - stays at bottom */
  .ncf-input{padding:0.5rem 0.75rem;display:flex;gap:0.5rem;position:sticky;bottom:0;left:0;right:0;background:var(--ncw-bg,#fff);align-items:center;width:100%;z-index:1;box-sizing:border-box;margin-top:auto}
  .ncf-input input{flex:1;min-width:0;padding:0.6rem 0.75rem;border:1px solid #e5e7eb !important;border-radius:0.5rem;background:#fff;box-sizing:border-box}
  .ncf-input button{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer}
  .ncf-input button svg{display:block}
  /* Config button: match send button shape (icon-only, no border/bg); only icon color changes */
  .ncf-input .ncf-config-btn{background:transparent;border:none;color:#9ca3af;transition:color .15s ease}
  .ncf-input .ncf-config-btn:hover{background:transparent;border:none;color:#374151}
  .ncf-input .ncf-config-btn svg{width:24px;height:24px}
  .ncf-powered{display:block;margin:0.25rem 0.75rem 0.25rem auto;font-size:0.75rem;color:#cbd5e1;text-decoration:none;white-space:nowrap;opacity:0.7;transition:color .15s ease, opacity .15s ease}
  .ncf-powered:hover{color:#9ca3af;opacity:1;text-decoration:none}
  /* Meta overlay adjustments on mobile */
  .ncf-meta{max-width:80%}
}

/* Mobile config-mode: show chat and configurator simultaneously, each scrolls internally */
@media (max-width: 1023.98px){
  .ncf-frame.config-mode{display:grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr; height:36rem; overflow:hidden}
  .ncf-frame.config-mode .ncf-section{height:auto; min-height:0}
  .ncf-frame.config-mode .ncf-chat{display:flex; flex-direction:column; min-height:0}
  .ncf-frame.config-mode .ncf-messages{flex:1; overflow:auto}
  .ncf-frame.config-mode .ncf-config{display:flex; flex-direction:column; min-height:0}
}

.ncf-banner{margin:0.5rem 0.5rem 0; padding:0.5rem; background:#eff6ff; border:1px solid #bfdbfe; border-radius:0.5rem; font-size:0.875rem; color:#1e3a8a}
.ncf-banner.hidden{display:none}
.ncf-section.hidden{display:none}
/* Hidden explorer must not take layout space (it shares panel with configurator) */
.ncf-explorer.hidden{display:none !important}
.ncf-frame.config-mode{height:36rem; max-height:85vh}
/* Use existing chat classes for bubble layout */
.chat-bubble .markdown-body{margin:0}
.chat-bubble .markdown-body p{margin:0.35rem 0}
.chat-bubble .markdown-body ul{list-style:disc; list-style-position:outside; margin:0.35rem 0 0.35rem 1rem; padding-left:1rem}
.chat-bubble .markdown-body ol{list-style:decimal; list-style-position:outside; margin:0.35rem 0 0.35rem 1rem; padding-left:1rem}
.chat-bubble .markdown-body li{margin:0.2rem 0}
.chat-bubble .markdown-body code{background:#e5e7eb;padding:0.1rem 0.3rem;border-radius:0.25rem}
.chat-bubble .markdown-body pre{background:#0f172a;color:#e5e7eb;padding:0.5rem;border-radius:0.5rem;overflow:auto;margin:0.35rem 0}
/* Handle Python markdown's codehilite wrapper */
.chat-bubble .markdown-body .codehilite{background:transparent;margin:0.35rem 0}
.chat-bubble .markdown-body .codehilite pre{background:#0f172a;color:#e5e7eb;padding:0.5rem;border-radius:0.5rem;overflow:auto;margin:0}
.chat-bubble .markdown-body>:first-child{margin-top:0}
.chat-bubble .markdown-body>:last-child{margin-bottom:0}
/* Ensure consistent styling for all markdown elements regardless of renderer */
.chat-bubble .markdown-body h1,.chat-bubble .markdown-body h2,.chat-bubble .markdown-body h3,.chat-bubble .markdown-body h4,.chat-bubble .markdown-body h5,.chat-bubble .markdown-body h6{margin:0.5rem 0 0.35rem 0;font-weight:600}
.chat-bubble .markdown-body blockquote{border-left:3px solid #d1d5db;padding-left:0.75rem;margin:0.35rem 0;color:#6b7280}
.chat-bubble .markdown-body a{color:#2563eb;text-decoration:underline}
.chat-bubble .markdown-body a:hover{color:#1d4ed8}
.chat-bubble .markdown-body table{border-collapse:collapse;margin:0.35rem 0;width:100%}
.chat-bubble .markdown-body table th,.chat-bubble .markdown-body table td{border:1px solid #e5e7eb;padding:0.25rem 0.5rem;text-align:left}
.chat-bubble .markdown-body table th{background:#f3f4f6;font-weight:600}
.ncf-loading{padding:0.25rem 0.5rem; font-size:0.875rem; color:#6b7280}

/* Markdown body styles for better rendering */
/* Reset inside bubble and apply modest spacing similar to existing chat */
.ncf-bubble .markdown-body{margin:0}
.ncf-bubble .markdown-body p{margin:0.35rem 0}
.ncf-bubble .markdown-body ul{list-style:disc; list-style-position:outside; margin:0.35rem 0 0.35rem 1rem; padding-left:1rem}
.ncf-bubble .markdown-body ol{list-style:decimal; list-style-position:outside; margin:0.35rem 0 0.35rem 1rem; padding-left:1rem}
.ncf-bubble .markdown-body li{margin:0.2rem 0}
.ncf-bubble .markdown-body code{background:#e5e7eb;padding:0.1rem 0.3rem;border-radius:0.25rem}
.ncf-bubble .markdown-body pre{background:#0f172a;color:#e5e7eb;padding:0.5rem;border-radius:0.5rem;overflow:auto;margin:0.35rem 0}
/* Handle Python markdown's codehilite wrapper */
.ncf-bubble .markdown-body .codehilite{background:transparent;margin:0.35rem 0}
.ncf-bubble .markdown-body .codehilite pre{background:#0f172a;color:#e5e7eb;padding:0.5rem;border-radius:0.5rem;overflow:auto;margin:0}
.ncf-bubble .markdown-body>:first-child{margin-top:0}
.ncf-bubble .markdown-body>:last-child{margin-bottom:0}
/* Ensure consistent styling for all markdown elements regardless of renderer */
.ncf-bubble .markdown-body h1,.ncf-bubble .markdown-body h2,.ncf-bubble .markdown-body h3,.ncf-bubble .markdown-body h4,.ncf-bubble .markdown-body h5,.ncf-bubble .markdown-body h6{margin:0.5rem 0 0.35rem 0;font-weight:600}
.ncf-bubble .markdown-body blockquote{border-left:3px solid #d1d5db;padding-left:0.75rem;margin:0.35rem 0;color:#6b7280}
.ncf-bubble .markdown-body a{color:#2563eb;text-decoration:underline}
.ncf-bubble .markdown-body a:hover{color:#1d4ed8}
.ncf-bubble .markdown-body table{border-collapse:collapse;margin:0.35rem 0;width:100%}
.ncf-bubble .markdown-body table th,.ncf-bubble .markdown-body table td{border:1px solid #e5e7eb;padding:0.25rem 0.5rem;text-align:left}
.ncf-bubble .markdown-body table th{background:#f3f4f6;font-weight:600}


/* Avoid inner borders that create a double-border look */
.ncf-chat .ncf-banner{border:0 !important}
/* Ensure configurator panel doesn't have its own border when inside ncf-config */
.ncf-config .ncf-section{border:0 !important}

/* Config panel: fill section height so carousel centers and list view gets proper space (fixes mobile) */
.ncf-config{min-width:0; flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden}
.ncf-config .ncf-config-views{min-width:0; flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column}
.ncf-config-carousel-view{min-width:0; max-width:100%; overflow:hidden; flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1rem}
.ncf-configurator{min-width:0; overflow:hidden; flex:1; min-height:0; display:flex; flex-direction:column}
/* Feature carousel: spacing only (no card border) */
.ncf-config-carousel-feature{
  width:100%; max-width:280px;
  padding:1.25rem;
  background:var(--ncw-bg,#fff);
  box-sizing:border-box;
  gap:0.25rem;
}
.ncf-config-carousel-feature .ncf-config-carousel-img{margin-bottom:1.125rem}
/* Feature image: border and rounded corners */
.ncf-config-carousel-img{
  border:1px solid var(--ncw-border,#e5e7eb);
  box-sizing:border-box;
}
/* List view: features list takes all space, total cost stays compact at bottom */
.ncf-config-list-view{flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden}
.ncf-config-list-view .ncf-total-cost{flex-shrink:0}

/* Carousel feature image: smaller on mobile */
@media (max-width: 1023.98px){
  .ncf-config-carousel-img{width:88px !important;height:88px !important}
  .ncf-config-carousel-feature{padding:1rem; max-width:100%}
}
/* Ensure video elements themselves don't add extra borders/outlines */
.ncf-video video{border:0 !important; outline:0 !important}
/* Image fallback should behave like the video (full bleed, cover) */
.ncf-media-image img{width:100%;height:100%;object-fit:cover;display:block}
/* Prevent inner white background from appearing as a second border inside video section */
.ncf-video{background:transparent !important}
/* Ensure only the outer section draws the border; inner video container has none */
.ncf-video.ncf-section{border:1px solid var(--ncw-border,#e5e7eb) !important}
.ncf-video > div{border:0 !important; box-shadow:none !important}

/* Video layer styles for seamless transitions */
.video-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease-in-out;
}

/* Ensure the first video is visible by default */
#ncfCurrent {
  opacity: 1 !important;
}

/* Sources block: shown below answer, smaller and muted */
.sources-block {
  font-size: 0.875em;
  margin-top: 1em;
  color: #6b7280;
}