.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}
.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}
.chat-bubble .markdown-body>:first-child{margin-top:0}
.chat-bubble .markdown-body>:last-child{margin-bottom:0}
.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}
.ncf-bubble .markdown-body>:first-child{margin-top:0}
.ncf-bubble .markdown-body>:last-child{margin-bottom:0}


/* Avoid inner borders that create a double-border look */
.ncf-chat .ncf-banner{border:0 !important}
/* Ensure video elements themselves don't add extra borders/outlines */
.ncf-video video{border:0 !important; outline:0 !important}
/* 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;
}