/* Full-screen demo layout with a black device-like frame */
.demo-wrapper {
  min-height: 92vh; /* reduce excessive top whitespace */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Softer, modern background */
  background: linear-gradient(135deg, #f6f9ff 0%, #eef3ff 50%, #f8fbff 100%);
  padding: 40px 16px;
  position: relative;
  overflow: visible; /* allow page scrolling */
}

.device-frame {
  background: #ffffff; /* inner white area */
  border-radius: 18px;
  position: relative; /* create stacking context for footer */
  z-index: 2;
}
/* New wrapper equivalent to device-frame */
.demo-chat {
  background: transparent;
  border-radius: 18px;
  position: relative;
  z-index: 2;
}
/* Outer black outline so inner space isn't reduced */
.device-frame::before {
  content: "";
  position: absolute;
  inset: -14px; /* expand outward */
  border-radius: 26px;
  background: #000;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
  z-index: -1;
}
/* Hide outer outline by default; we'll move it to #demo-chat */
.device-frame::before { display: none; }
.demo-chat::before { display: none; }
/* Outline for new wrapper */
.demo-chat::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 26px;
  /* Dark navy frame with subtle gradient */
  background: linear-gradient(180deg, #0f172a 0%, #1f2a44 100%);
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.35);
  z-index: -1;
}
/* size */
.device-frame { max-width: 1400px; width: 100%; }
.demo-chat { max-width: 1400px; width: 100%; }

/* Reduce size on desktop to prevent covering section title */
@media (min-width: 1201px) {
  .device-frame { 
    width: 100%; 
    margin: 0 auto;
  }
  .demo-chat { 
    width: 100%; 
    margin: 0 auto;
  }
}

/* Prevent horizontal overflow on medium screens by hiding outer border */
@media (max-width: 1200px) {
  .device-frame::before { display: none; }
  .demo-chat::before { display: none; }
}

.device-screen {
  background: #ffffff;
  border-radius: 16px;
  min-height: 620px; /* more inner space while border is outside */
  height: clamp(560px, 80vh, 900px); /* bound height so inner chat can scroll */
  overflow: visible; /* allow illustration to float over the border */
  display: grid;                    /* two columns: content | chat */
  grid-template-columns: 3fr 7fr;   /* 30% title | 70% chat */
  grid-template-rows: 1fr auto;     /* main row + footer row */
}
/* New screen equivalent */
.demo-chat__screen {
  background: transparent;
  border-radius: 16px;
  min-height: 620px;
  height: clamp(560px, 80vh, 900px);
  overflow: visible;
  display: grid;
  grid-template-columns: 3fr 7fr;
  grid-template-rows: 1fr auto;
  position: relative; /* anchor for absolute elements inside */
}

/* Reduce height on desktop to prevent covering section title */
@media (min-width: 1201px) {
  .device-screen {
    min-height: 480px;
    height: clamp(480px, 66vh, 700px);
  }
  .demo-chat__screen {
    min-height: 480px;
    height: clamp(480px, 66vh, 700px);
  }
}

/* Right-side chat area between header and footer */
.chat-area {
  grid-column: 2;
  grid-row: 1;
  margin: 8px 0 0 0; /* remove right margin to prevent overflow */
  width: auto;
  min-height: 0; /* allow inner scroll area to define height */
  height: 100%; /* fill row height so inner list can scroll */
  position: relative;
  display: flex;               /* vertical stack: messages over input */
  flex-direction: column;
  justify-content: flex-end;   /* keep input at bottom */
  border-left: 1px solid rgba(0,0,0,0.08); /* vertical divider between content and chat */
  padding-left: 16px;
  box-sizing: border-box;      /* prevent padding from causing overflow */
  overflow: visible;           /* Allow scrolling in child */
}
/* Move outer frame border to only the chat area */
#demo-chat.chat-area {
  border-left: none;
  /* Match the outer frame tone */
  border-radius: 26px;
  box-shadow: 0 24px 80px rgba(15,23,42,0.30);
  padding-left: 16px; /* keep inner spacing */
  /* Soft gradient background for chat area */
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}
.chat-scroll {
  /* Make message list scroll within flex layout */
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 8px;
  padding-bottom: 8px; /* space for better scrolling */
  margin-bottom: 16px; /* space before suggestions/input */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Start from top, let content flow naturally */
  align-items: stretch; /* each bubble decides its own side */
  gap: 8px;
  width: 100%;
  /* Add some space at the top for better scroll experience */
  padding-top: 8px;
}
.chat-bubble {
  display: block;
  max-width: 86%; /* give bubbles more width */
  padding: 10px 14px;
  border-radius: 14px;
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.35;
  box-shadow: 0 2px 6px rgba(16,24,40,0.06);
}
.chat-user { 
  /* Primary gradient bubble */
  background: linear-gradient(135deg, #3f5bd9 0%, #6a88ff 100%);
  color: #ffffff; 
  margin-left: auto; 
  align-self: flex-end; 
  border-bottom-right-radius: 6px; 
}

.chat-bot { 
  /* Light surface bubble for bot */
  background: #f2f6ff; 
  color: #0f172a; 
  margin-right: auto; 
  align-self: flex-start; 
  border-bottom-left-radius: 6px; 
  border: 1px solid rgba(63,91,217,0.18);
}

/* Typing indicator and markdown rendering support */
.typing-indicator { display: inline-flex; align-items: center; gap: 4px; }
.typing-dots .dot { width: 6px; height: 6px; background: #888; border-radius: 50%; display: inline-block; margin: 0 2px; opacity: 0.3; animation: blink 1.2s infinite; }
.typing-dots .dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dots .dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

/* Consistent styling for markdown elements in chat bubbles */
.chat-bubble {
  font-family: inherit;
  font-size: 14px;
  line-height: 1.35;
}

.chat-bubble pre, .chat-bubble code { 
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 
  white-space: pre-wrap; 
  word-break: break-word; 
  background: rgba(255, 255, 255, 0.3);
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 13px;
}

.chat-bubble pre {
  background: rgba(255, 255, 255, 0.2);
  padding: 8px;
  border-radius: 6px;
  margin: 4px 0;
}

.chat-bubble p { 
  margin: 0 0 6px; 
  font-size: 14px;
  line-height: 1.35;
}

.chat-bubble ul { 
  padding-left: 18px; 
  margin: 6px 0; 
}

.chat-bubble li {
  margin: 2px 0;
  font-size: 14px;
  line-height: 1.35;
}

.chat-bubble h1, .chat-bubble h2, .chat-bubble h3 { 
  margin: 6px 0 4px; 
  font-size: 15px; 
  font-weight: 600;
  line-height: 1.3;
}

.chat-bubble h1 { font-size: 16px; }
.chat-bubble h2 { font-size: 15px; }
.chat-bubble h3 { font-size: 14px; }

.chat-bubble strong {
  font-weight: 600;
}

.chat-bubble em {
  font-style: italic;
}

/* Floating AI chat badge */
/* AI icon removed */

.demo-body { flex: 1; padding: 32px; grid-column: 1; grid-row: 1; position: relative; }
/* Ensure no stray dark dots or overlays appear on corners */
.demo-body, .demo-body::before, .demo-body::after { background: transparent !important; box-shadow: none !important; }


/* Tablet / medium screens fixes */
@media (max-width: 1200px) and (min-width: 768px) {
  .demo-wrapper { padding: 24px 12px; }
  .chat-area { padding-left: 12px; }
  .device-screen { grid-template-columns: 2fr 5fr; } /* slightly narrower to fit container */
  .demo-chat__screen { grid-template-columns: 2fr 5fr; }
}

@media (max-width: 1200px) {
  .demo-content { grid-template-columns: 1fr; }
}

.floating-illustration {
  position: absolute;
  left: -60px; /* overlap device border */
  bottom: -5px;
  max-width: 460px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.25));
  z-index: 6; /* above device border, below bubble if needed */
}

.demo-right { display: flex; flex-direction: column; justify-content: center; }
.demo-title { font-size: 32px; margin-bottom: 8px; color: #0d1b2a; }
.demo-subtitle { color: #445; margin-bottom: 24px; }
/* Match banner bubble look but keep layout inside demo area */
@media (min-width: 992px) {
  .demo-body .coment-box1 {
    position: absolute;
    top: 4rem; /* raise to head level */
    right: 10px;
    max-width: calc(100% - 80px);
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px; /* larger height */
    justify-content: flex-start;
    background-color: rgba(255,255,255,0.98);
    border-radius: 14px;
    box-shadow: 0px 9px 16px rgb(0 0 0 / 8%);
    border: 1px solid rgba(63,91,217,0.25);
    color: #0f172a;
    font-weight: 600;
    letter-spacing: 0.2px;
    z-index: 7;
    pointer-events: none;
  }
  /* Small speech-bubble tail */
  .demo-body .coment-box1::after {
    content: "";
    position: absolute;
    left: -6px; /* stick to left edge pointing to mouth */
    top: 50%;
    width: 12px;
    height: 12px;
    background: rgba(255,255,255,0.98);
    border-top: 1px solid rgba(63,91,217,0.25);
    border-left: 1px solid rgba(63,91,217,0.25);
    transform: translate(0, -50%) rotate(45deg);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.04);
  }
  .demo-body .coment-box1 .demo-subtitle-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(13,27,42,0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .demo-body .coment-box1 .demo-subtitle-avatar img {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
  }
}
/* Desktop-only: make subtitle look like a floating banner badge */
@media (min-width: 992px) {
  .demo-subtitle--badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(90deg, rgba(63,91,217,0.12), rgba(255,118,177,0.10));
    color: #1b2b8c;
    border: 1px solid rgba(63,91,217,0.25);
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.2px;
    box-shadow: 0 8px 24px rgba(13,27,42,0.08);
    position: relative;
    z-index: 4; /* float above background like banner */
  }
  .demo-subtitle--badge .demo-subtitle-icon {
    color: #3f5bd9;
    filter: drop-shadow(0 1px 0 rgba(63,91,217,0.2));
  }
}

.demo-footer { padding: 12px 20px 16px; background: #fafcff; border-top: 1px solid #eef2f7; position: relative; z-index: 4; grid-column: 1 / -1; grid-row: 2; display: none; }
.demo-footer-inner { display: flex; align-items: center; gap: 16px; min-height: 72px; }
.demo-messages { display: none; }
.bubble { padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.2; white-space: nowrap; max-width: 40ch; text-overflow: ellipsis; overflow: hidden; border: 1px solid rgba(0,0,0,0.06); }
.bubble-user { background: #e3ecff; color: #1b2b8c; }
.bubble-bot { background: #eef3f7; color: #1f2937; }
.demo-form { width: 100%; }
.demo-footer .demo-input-group { flex: 0 0 780px; max-width: 780px; margin-left: auto; margin-right: 12px; } /* 1.5x wider */

/* Suggestions above input */
.demo-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px 0; }
.demo-suggestion { border: 1px solid rgba(63,91,217,0.20); background: #f3f6ff; color: #2f3e92; border-radius: 999px; padding: 6px 10px; font-size: 13px; line-height: 1; cursor: pointer; }
.demo-suggestion:hover { background: #e9eeff; }

/* Add spacing between last message and input */
.chat-area .demo-form { margin-top: 16px; }

/* Responsive: mobile adjustments */
@media (max-width: 1200px) {
  /* Remove outer border/frame and make content full-screen */
  .demo-wrapper { min-height: 100vh; padding: 0; }
  .device-frame { max-width: none; width: 100%; border-radius: 0; }
  .device-frame::before { display: none; }
  .demo-chat { max-width: none; width: 100%; border-radius: 0; }
  .demo-chat::before { display: none; }
  .device-screen { border-radius: 0; min-height: 84vh; position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .demo-chat__screen { border-radius: 0; min-height: 84vh; position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  /* Hide demo title/subtitle on mobile */
  .demo-title, .demo-subtitle { display: none !important; }
  /* Background image stronger, larger, centered with minimal blur */
  .device-screen::after { content: ""; position: absolute; inset: 0; background: var(--demo-image-url, url('/images/wcu.png')) no-repeat center center/75vw auto; filter: blur(2px); opacity: 0.22; pointer-events: none; }
  .demo-chat__screen::after { content: ""; position: absolute; inset: 0; background: var(--demo-image-url, url('/images/wcu.png')) no-repeat center center/75vw auto; filter: blur(2px); opacity: 0.22; pointer-events: none; }
  /* Hide extra decorations */
  .floating-illustration { display: none; }
  .demo-body { display: block; grid-column: 1; grid-row: 1; }
  /* Chat fills the screen */
  .chat-area { grid-column: 1; grid-row: 1; width: 100%; margin: 0; padding: 12px 12px 0 12px; border-left: none; box-sizing: border-box; }
  /* Keep messages anchored at the bottom */
    .chat-scroll { 
      height: calc(84vh - 120px); 
      max-height: calc(84vh - 120px);
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; /* Allow natural scroll from top */
    overflow-y: auto;
    overflow-x: hidden;
  }
  /* Remove rounded container/shadow on mobile to avoid dark corners */
  #demo-chat.chat-area { background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%); box-shadow: none; border-radius: 0; }
  .chat-bubble { font-size: 16px; line-height: 1.4; padding: 12px 16px; }
  .demo-footer .demo-input { font-size: 16px; }
  .demo-send { width: 48px; height: 48px; }
  /* Footer sticks to bottom and spans full width */
  .demo-footer { position: sticky; bottom: 0; left: 0; right: 0; padding: 10px 12px 12px; background: #ffffff; border-top: 1px solid #eef2f7; }
  .demo-footer-inner { min-height: auto; }
  .demo-footer .demo-input-group { flex: 1 1 auto; max-width: none; width: 100%; margin: 0; }
  /* Hide AI badge on mobile */
  .chat-ai-badge { display: none; }
}
.demo-footer .demo-input { font-size: 15px; }
.demo-input-group {
  display: flex;
  align-items: center;
  /* Glassy ring with brand gradient */
  background: linear-gradient(0deg, #ffffff, #ffffff) padding-box,
              linear-gradient(90deg, #7aa2ff, #e2b8ff) border-box;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0px;
  box-shadow: 0 6px 18px rgba(13, 27, 42, 0.08);
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: 16px;
}
.demo-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 12px 16px;
  outline: none;
  min-width: 0; /* prevent flex overflow on narrow screens */
}
.demo-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  color: #ffffff;
  background: linear-gradient(135deg, #3f5bd9 0%, #6a88ff 100%);
  transition: all .2s ease;
}
.demo-send:hover { filter: brightness(1.04); box-shadow: 0 6px 18px rgba(63,91,217,0.35); }
.demo-send-icon { display: block; }

/* Ensure page scrolls normally */
/* Removed overflow hidden to allow Home page to scroll */

/* Additional CSS fixes for chat scroll behavior */
.chat-scroll {
  /* Force scroll container to recognize content height changes */
  contain: layout style paint;
}

/* Add a spacer element to push messages to bottom initially */
.chat-scroll::before {
  content: '';
  flex: 1 0 0;
  min-height: 1px;
}

/* Ensure chat bubbles maintain their positioning */
.chat-bubble {
  flex-shrink: 0; /* Prevent bubbles from shrinking */
}

/* Fix for webkit browsers scrollbar */
.chat-scroll::-webkit-scrollbar {
  width: 6px;
}

.chat-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.chat-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
}

.chat-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.4);
}

/* Force reflow when content changes */
.chat-scroll[data-updated] {
  transform: translateZ(0);
}