:root{
  --bg:#000;
  --panel:#1f1f1f;
  --pill:#2d2d2d;
  --pill-active:#e9e9e9;
  --text:#e9e9e9;
  --muted:#bdbdbd;
  --shadow:0 6px 18px rgba(0,0,0,.35);
  --ring: 0 0 0 2px #ffffff;

  /* new theme-able pieces */
  --bubble-bg:#bcbcbc;
  --bubble-fg:#111;
  --input-bg:#dcdcdc;
  --input-fg:#111;
  --bubble-bot-bg:#bcbcbc;
  --bubble-user-bg:#bcbcbc;
  --send-bg:#0b0b0b;
  --pill-hover:#3a3a3a;

  /* new cross-theme vars with dark defaults */
  --panel-shadow:var(--shadow);
  --nav-bg:transparent;
  --nav-shadow:none;
  --accent:#6C63FF;

  --bubble-bot-bg:#bcbcbc;
  --bubble-bot-fg:#111;
  --bubble-user-bg:#bcbcbc;
  --bubble-user-fg:#111;

  --input-bg:#dcdcdc;
  --input-fg:#111;
  --placeholder:#7a7a7a;

  --send-bg:#0b0b0b;
  --send-hover-bg:#0b0b0b;
}
/* Light theme: modern purple/blue gradient background (slightly darker) */
:root[data-theme="light"]{
--bg: linear-gradient(135deg, #ebe6ff, #ffffff, #ddecff);
}

:root[data-theme="light"]{
  --bg:#F5F5F7;
  --panel:#ffffff;
  --pill:#ececec;
  --pill-active:#111111;
  --text:#111111;
  --muted:#555;
  --shadow:0 10px 28px rgba(0,0,0,.10);
  --ring: 0 0 0 2px #111111;

  --bubble-bg:#e2e2e2;
  --bubble-fg:#111;
  --input-bg:#f0f0f0;
  --input-fg:#111;
  --bubble-bot-bg:#EDE7F6;   /* bot */
  --bubble-user-bg:#E3F2FD;  /* user */
  --send-bg:#3B82F6; /* blue; keep existing hover animation */
  --pill-hover:#E3F2FD; /* use same light blue */

  /* 1) Background & container */
  --bg:#F5F5F7;
  --panel:#FFFFFF;
  --panel-shadow:0 4px 20px rgba(0,0,0,0.10);

  /* 3) Top nav look + text */
  --nav-bg:#FFFFFF;
  --nav-shadow:0 2px 10px rgba(0,0,0,0.05);
  --text:#333333;

  /* 2) Chat bubbles */
  --bubble-bot-bg:#EDE7F6;  /* bot */
  --bubble-bot-fg:#3D2C8D;
  --bubble-user-bg:#E3F2FD; /* user */
  --bubble-user-fg:#1565C0;

  /* 4) Input and send */
  --input-bg:#F1F3F4;
  --input-fg:#111;
  --placeholder:#757575;
  --send-bg:#6C63FF;
  --send-hover-bg:#574bdb;

  /* 5) Accent */
  --accent:#6C63FF;
}

/* use the variables where appropriate */
.bubble{ background:var(--bubble-bg); color:var(--bubble-fg) }
.bubble.right{ background:var(--bubble-bg); color:var(--bubble-fg) }
.composer input{ background:var(--input-bg); color:var(--input-fg) }

*{box-sizing:border-box}
html,body{height:100%}
html, body{overflow:hidden}
body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Utils */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Top bar */
.topbar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px 6px;
}
.icon-button{
  width:38px;height:38px;
  border:none;border-radius:12px;
  background:#101010;color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:var(--shadow);
  transition:transform .12s ease, background-color .2s ease, box-shadow .2s ease;
}
.icon-button:hover{transform:translateY(-1px)}
.icon-button:active{transform:translateY(0)}
.hamburger{background:transparent;box-shadow:none}

.auth{display:flex;gap:14px}

/* Pills */
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 0;                 /* vertical only; width comes from flex */
  border-radius:28px;
  background:var(--pill);color:#d7d7d7;text-decoration:none;
  font-weight:600;letter-spacing:.35px;box-shadow:var(--shadow);
  text-align:center;
  transition: background-color .2s ease, color .2s ease, transform .06s ease;
}
.pill.sm{padding:8px 16px;border-radius:20px;font-size:12px}
.pill.ghost{background:#1a1a1a;color:#cfcfcf}
.pill:not(.active):hover{background:#3a3a3a;color:#fff}
.pill:active{transform:translateY(1px) scale(.98)}
.pill:focus-visible{outline:2px solid #fff; outline-offset:2px}

/* Main nav: equal-width tabs */
.main-nav{
  display:flex;gap:16px;justify-content:center;
  padding:8px 20px 18px;
  flex-wrap:nowrap;max-width:min(1100px,92vw);margin:0 auto;
  position:relative;           /* Added to contain dropdowns */
  z-index:1;                   /* Ensure proper layering */
}
.main-nav .pill{flex:1 1 0; min-width:0}

/* Dropdowns open above the button */
.dropdown{ position:relative }
.menu{
  position:absolute;
  bottom:100%;              /* Open above the button */
  left:0;
  margin-bottom:8px;        /* Gap above button */
  min-width:280px;
  background:var(--panel);
  color:var(--text);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:10px;
  display:none;
  z-index:10;
}
.dropdown.open .menu{ display:block }

@media (max-width:700px){ .menu{ min-width:240px } }
.menu .group{ padding:6px 6px 10px }
.menu .group + .group{ border-top:1px solid rgba(255,255,255,.08) }
:root[data-theme="light"] .menu .group + .group{ border-top:1px solid rgba(0,0,0,.08) }
.group-title{
  font-size:12px; opacity:.8; margin:6px 6px 8px; text-transform:uppercase; letter-spacing:.4px;
}
.menu-item{
  display:block; padding:10px 12px; border-radius:10px; color:inherit; text-decoration:none;
}
.menu-item:hover{ background:var(--pill-hover); color:inherit }

/* Make ALL buttons (pills + dropdown toggles) visually identical */
.main-nav .pill,
.dropdown .dropdown-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:20px 24px;          /* Adjust horizontal padding here */
  border-radius:28px;
  background:var(--pill);
  color:#d7d7d7;
  font-weight:600;
  letter-spacing:.35px;
  box-shadow:var(--shadow);
  text-align:center;
  transition: background-color .2s ease, color .2s ease, transform .06s ease;
  border:1px solid transparent;
  height:24px;                /* Adjust height here if needed */
  line-height:1;
}
.main-nav .pill:hover,
.dropdown .dropdown-toggle:hover{
  background:#3a3a3a;
  color:#fff;
}

/* Light theme parity */
:root[data-theme="light"] .main-nav .pill,
:root[data-theme="light"] .dropdown .dropdown-toggle{
  background:transparent;
  color:var(--text);
  border:1px solid transparent;
}
:root:not([data-theme="light"]) .main-nav .pill,
:root:not([data-theme="light"]) .dropdown .dropdown-toggle{
  background:rgba(255,255,255,.08);
  color:#ffffff;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:saturate(120%) blur(6px);
}

/* Ensure buttons size consistently (no flex stretching) */
.main-nav .pill{ flex:0 0 auto }

/* Chat area - increased height to accommodate navigation */
.chat-wrap{display:flex;justify-content:center;padding:10px 16px 36px}
.chat-surface{
  position:relative;
  width:min(1100px,92vw);
  height:min(750px,85vh);  /* Increased from 700px to 750px */
  background:var(--panel);
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:26px 26px 140px;  /* Increased bottom padding from 92px to 140px */
  overflow:hidden;
}

/* Kebab menu positioned at right top with transparent background */
.chat-surface .kebab{
  position:absolute;
  right:18px;
  top:14px;
  background:transparent;
  box-shadow:none;
}

/* Bottom-centered nav bar */
.main-nav {
  position: fixed;      /* stick to screen */
  bottom: 100px;         /* distance from bottom */
  left: 60%;            /* center horizontally */
  transform: translateX(-50%);
  display: flex;
  gap: 25px;
  justify-content: center;
  padding: 10px 20px;
  background: var(--panel);
  border-radius: 20px;
  box-shadow: var(--shadow);
  z-index: 100;         /* keep above chat */
}

/* Pills inside nav */
.main-nav .pill,
.main-nav .dropdown .dropdown-toggle {
  flex: 0 0 auto;
}



/* Smaller navigation buttons to fit in chat container */
.chat-surface .main-nav .pill,
.chat-surface .dropdown .dropdown-toggle{
  flex:1;
  padding:12px 16px;  /* Reduced from 20px 24px */
  font-size:12px;  /* Smaller font size */
  height:20px;  /* Reduced height */
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Adjust dropdown positioning for smaller buttons */
.chat-surface .dropdown .menu{
  bottom:120%;  /* Changed from top:120% to bottom:120% to display upwards */
  min-width:200px;  /* Smaller dropdown width */
}


/* Messages */
.messages{
  position:absolute;
  inset:64px 26px 96px 26px;
  overflow-y:auto; overflow-x:hidden;
  padding-right:6px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;              /* no horizontal stretch */
  scrollbar-width:thin;
  scrollbar-color:#555 transparent;
}
.messages::-webkit-scrollbar{height:8px;width:8px}
.messages::-webkit-scrollbar-thumb{background:#4a4a4a;border-radius:10px}

/* Bubbles */
.bubble{
  position:relative;
  background:#bcbcbc;
  color:#111;
  display:inline-block;
  width:auto; max-width:68%;
  padding:12px 16px;
  border-radius:16px;          /* rounded like the screenshot */
  box-shadow:var(--shadow);    /* soft elevation */
}

/* Hide the old triangle tail element from HTML */
.bubble .tail{display:none}


/* Right-aligned user bubbles + mirrored tail */
.bubble.right{
  align-self:flex-end;
  margin-left:0;
  width:auto; max-width:48%;
  background:#bcbcbc; color:#111;
  border-radius:16px;
  box-shadow:var(--shadow);
}

/* Composer - moved upwards */
.composer{
  position:absolute;left:22px;right:22px;bottom:20px;  /* Changed from bottom:18px to bottom:40px */
  display:flex;gap:12px;align-items:center;
}
.composer input{
  flex:1;border:none;outline:none;
  background:#dcdcdc;color:#111;
  padding:16px 18px;border-radius:28px;font-size:14px;
  transition: box-shadow .2s ease, background-color .2s ease;
}
.composer input::placeholder{color:#7a7a7a;letter-spacing:.2px}
.composer input:focus{box-shadow:var(--ring)}
.send{
  width:56px;height:56px;border:none;border-radius:50%;
  background:#0b0b0b;color:#fff;font-size:0;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);
  transition: transform .12s ease, background-color .2s ease, box-shadow .2s ease;
}
.send:hover{transform:translateY(-1px)}
.send:active{transform:translateY(0)}
.send:focus-visible{outline:2px solid #fff; outline-offset:2px}

/* Responsiveness */
@media (max-width:900px){
  .main-nav{gap:10px}
  .chat-surface{height:min(62vh,520px)}
}
@media (max-width:700px){
  .pill{padding:10px 0}
  .auth{gap:10px}
  .bubble{max-width:82%}
  .bubble.right{max-width:70%}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}

/* Page and chat container */
body{ background:var(--bg) }
.chat-surface{
background:var(--panel);
border-radius:28px;
box-shadow:var(--panel-shadow);
}

/* 3) Navigation bar (top tabs) */
.main-nav{
background:var(--nav-bg);
box-shadow:var(--nav-shadow);
border-radius:20px;
}
.main-nav .pill{
background:transparent;
color:var(--text);
font-weight:600;
/* make border consistent so dark style looks crisp */
border:1px solid transparent;
}
.main-nav .pill:hover{
color:var(--accent);            /* accent on hover */
background:transparent;         /* keep white bar visible */
}

/* 2) Chat bubbles (padding + rounded + colors) */
.bubble{
background:var(--bubble-bot-bg);
color:var(--bubble-bot-fg);
padding:14px 18px;              /* extra readability */
border-radius:20px;
}
.bubble.right{
background:var(--bubble-user-bg);
color:var(--bubble-user-fg);
border-radius:20px;
}
/* keep new slanted pointer in sync with bubble colors */
.bubble::after{ background:var(--bubble-bot-bg) }
.bubble.right::after{ background:var(--bubble-user-bg) }

/* 4) Input box + placeholder */
.composer input{
background:var(--input-bg);
color:var(--input-fg);
border-radius:16px;
}
.composer input::placeholder{ color:var(--placeholder) }

/* 4,5) Send button with same hover animation, just color swap */
.send{ background:var(--send-bg); color:#fff }
.send:hover{ background:var(--send-hover-bg) }  /* retains existing transform on hover */

/* Light theme: modern purple/blue gradient background */
:root[data-theme="light"]{
--bg: linear-gradient(135deg, #f3f0ff, #ffffff, #eaf3ff);
}

/* Keep chat container readable over the gradient */
.chat-surface{
background:var(--panel);              /* should already be #FFFFFF in light mode */
box-shadow:var(--panel-shadow);       /* e.g., 0 4px 20px rgba(0,0,0,0.10) */
border-radius:28px;
}

/* Light theme: remove the nav bar background and shadow */
:root[data-theme="light"]{
--nav-bg: transparent;
--nav-shadow: none;
}

/* If the bar still shows due to earlier rules, hard-override */
:root[data-theme="light"] .main-nav{
background: transparent;
box-shadow: none;
}

:root:not([data-theme="light"]) .main-nav .pill{
background:rgba(255,255,255,.08);
color:#ffffff;
border:1px solid rgba(255,255,255,.18);
backdrop-filter:saturate(120%) blur(6px);
}
:root:not([data-theme="light"]) .main-nav .pill:hover{
background:rgba(255,255,255,.16);
}

/* Typing indicator (three animated dots) */
@keyframes nlDot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}
.bubble.typing .dots {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: 1em;
}
.bubble.typing .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.25;
  animation: nlDot 1.2s infinite ease-in-out;
}
.bubble.typing .dot:nth-child(2) { animation-delay: .2s; }
.bubble.typing .dot:nth-child(3) { animation-delay: .4s; }

/* Mobile view adjustments */
@media (max-width: 768px) {
  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin: 0;
  }

  .chatbot-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  .right-side-content {
    width: 100%;
    padding: 15px;
    text-align: center;
  }

  .nav-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 15px;
    position: relative;  /* Keep relative to chatbot */
    bottom: auto;        /* Not locked to screen */
  }

  .nav-buttons button {
    margin: 5px;
    font-size: 14px;
    padding: 8px 12px;
  }
}


/* Header brand (logo + name) */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-logo{
  width:34px;
  height:34px;
  border-radius:8px;
  display:block;
}
.brand-name{
  font-weight:600;
  letter-spacing:.2px;
  color:var(--brand-fg);
}

/* Theme-aware brand color */
:root{ --brand-fg:#e9e9e9; }                 /* dark theme text color */
:root[data-theme="light"]{ --brand-fg:#333; } /* light theme text color (matches light palette) */

/* Optional: tighten topbar spacing a touch for the new brand block */
.topbar{
  padding:14px 20px 6px;
}

/* Brand sizing + typography */
.brand{
  gap:12px;
}
.brand-logo{
  width:44px;
  height:44px;
  border-radius:10px;
}
.brand-name{
  font-size:20px;           /* increase name size */
  font-weight:700;          /* bold like the screenshot */
  letter-spacing:.25px;     /* slight tracking for a clean look */
  line-height:1.2;
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Larger on wide screens */
@media (min-width: 1100px){
  .brand-logo{ width:48px; height:48px }
  .brand-name{ font-size:22px }
}

/* Tweak for small screens so it fits */
@media (max-width: 600px){
  .brand-logo{ width:38px; height:38px }
  .brand-name{ font-size:18px }
}
/* Theme-aware text color (already set earlier, kept here for clarity)
   :root{ --brand-fg:#e9e9e9 } 
   :root[data-theme="light"]{ --brand-fg:#333 } 
*/

/* Make the theme toggle button backgroundless */
.theme-toggle{
  background:transparent !important;
  box-shadow:none !important;
  border:none;
  color:var(--text);
}
.theme-toggle:hover,
.theme-toggle:active{
  background:transparent;
  box-shadow:none;
  transform:translateY(-1px);
}
.theme-toggle svg path{
  fill: currentColor;  /* inherits from --text per theme */
}

/* Slightly reduce space between logo and name */
.brand{ gap:9px; }

/* Layout: chat positioned between 1/3 and 1/2 of screen width */
.chat-wrap{
  display:flex;
  justify-content:flex-start;
  gap:18px;
  align-items:flex-start;    /* Added to prevent stretching */
}
.chat-surface{
  flex:0 0 30%;
  width:auto;
}
.right-slot{
  flex:1 1 auto;
  min-width:0;
}

/* Nav aligned left, same width as chat */
.main-nav{
  justify-content:flex-start;
  width:41.666%;
  max-width:none;
  margin:10px 0 0 0;
  padding-left:0;
  position:relative;
  z-index:1;
  flex-shrink:0;             /* Added to prevent shrinking */
}
@media (max-width: 900px){
  .main-nav{ width:100% }
}

/* Dropdowns open above the button */
.dropdown{ position:relative }
.menu{
  position:absolute;
  bottom:100%;              /* Open above the button */
  left:0;
  margin-bottom:8px;        /* Gap above button */
  min-width:280px;
  background:var(--panel);
  color:var(--text);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:10px;
  display:none;
  z-index:10;
}
.dropdown.open .menu{ display:block }

@media (max-width:700px){ .menu{ min-width:240px } }
.menu .group{ padding:6px 6px 10px }
.menu .group + .group{ border-top:1px solid rgba(255,255,255,.08) }
:root[data-theme="light"] .menu .group + .group{ border-top:1px solid rgba(0,0,0,.08) }
.group-title{
  font-size:12px; opacity:.8; margin:6px 6px 8px; text-transform:uppercase; letter-spacing:.4px;
}
.menu-item{
  display:block; padding:10px 12px; border-radius:10px; color:inherit; text-decoration:none;
}
.menu-item:hover{ background:var(--pill-hover); color:inherit }

/* Make ALL buttons (pills + dropdown toggles) visually identical */
.main-nav .pill,
.dropdown .dropdown-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:20px 24px;          /* Adjust horizontal padding here */
  border-radius:28px;
  background:var(--pill);
  color:#d7d7d7;
  font-weight:600;
  letter-spacing:.35px;
  box-shadow:var(--shadow);
  text-align:center;
  transition: background-color .2s ease, color .2s ease, transform .06s ease;
  border:1px solid transparent;
  height:24px;                /* Adjust height here if needed */
  line-height:1;
}
.main-nav .pill:hover,
.dropdown .dropdown-toggle:hover{
  background:#3a3a3a;
  color:#fff;
}

/* Light theme parity */
:root[data-theme="light"] .main-nav .pill,
:root[data-theme="light"] .dropdown .dropdown-toggle{
  background:transparent;
  color:var(--text);
  border:1px solid transparent;
}
:root:not([data-theme="light"]) .main-nav .pill,
:root:not([data-theme="light"]) .dropdown .dropdown-toggle{
  background:rgba(255,255,255,.08);
  color:#ffffff;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:saturate(120%) blur(6px);
}

/* Ensure buttons size consistently (no flex stretching) */
.main-nav .pill{ flex:0 0 auto }

/* Right-side headline: centered and accent-colored */
.right-slot{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  text-align:center;
}
.right-hero{ width:100%; }
.right-hero-title{
  margin:0;
  color:var(--accent);
  font-weight:900;
  line-height:1.2;
  letter-spacing:.2px;
  font-size: clamp(28px, 4.5vw, 56px);
}

/* Right panel hero text - darker and animated */
.right-slot{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.right-hero{
  width: 100%;
}

.right-hero-title{
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.2;
  color: #a8a4c0;  /* Darkened version of #f3f0ff */
  text-align: center;
  letter-spacing: 0.3px;
  margin: 0;
  padding: 0 20px;
  
  /* Animation properties */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out 0.3s forwards;
}

/* Fade in and slide up animation */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ensure right panel hides on mobile as before */
@media (max-width: 900px){
  .right-slot{ display: none }
}

/* Content sections styling */
.content-section {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 30px;
  text-align: left;
  opacity: 0;
  transform: translateY(20px);
}
.content-section.fade-in {
  animation: contentFadeIn 0.6s ease-out forwards;
}

/* Justify right-side content without breaking words */
.content-section,
.content-section p,
.content-section li {
  text-align: justify;
  text-justify: inter-word;
  text-align-last: left;   /* keep last line left-aligned */
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.content-section.fade-in {
  animation: contentFadeIn 0.6s ease-out forwards;
}

@keyframes contentFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-title {
  font-size: 32px;
  font-weight: 800;
  color: #a8a4c0;  /* Darkened version of #d4d1e8 */
  margin-top: -50px;
  margin-bottom: 24px;
  text-align: center;
}

.service-category {
  margin-bottom: 16px;      /* Further reduced from 20px */
  padding: 12px;            /* Further reduced from 16px */
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

.service-category h3 {
  font-size: 20px;
  font-weight: 700;
  color: #a8a4c0;
  margin-bottom: 8px;       /* Further reduced from 12px */
}

.service-category h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 8px 0 4px 0;      /* Further reduced from 12px 0 6px 0 */
}

.service-category p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 6px;       /* Further reduced from 8px */
}

.explore-ai {
  text-align: center;
  font-weight: 600;
  color: var(--accent);
  margin-top: 24px;
  font-style: italic;
}

.client-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.client-item {
  padding: 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  text-align: center;
  font-weight: 600;
  color: var(--text);
  backdrop-filter: blur(10px);
  transition: transform 0.2s ease;
}

.client-item:hover {
  transform: translateY(-2px);
}

.contact-info {
  text-align: center;
}

.contact-info p {
  margin-bottom: 16px;
}

.contact-info a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.contact-info a:hover {
  text-decoration: underline;
}

.location {
  margin-top: 24px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

.location h4 {
  color: #a8a4c0;  /* Darkened version */
  margin-bottom: 12px;
}

.project-item {
  margin-bottom: 12px;      /* Further reduced from 16px */
  padding: 12px;            /* Further reduced from 16px */
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

.project-item h3 {
  font-size: 18px;
  font-weight: 700;
  color: #a8a4c0;
  margin-bottom: 6px;       /* Further reduced from 8px */
}

.project-item p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

:root[data-theme="light"] .main-nav .pill:hover,
:root[data-theme="light"] .dropdown .dropdown-toggle:hover{
  background:rgba(108, 99, 255, 0.1);
  color:var(--accent);
}

/* Center the right hero text vertically */
.right-slot{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  min-height: 60vh; /* Add minimum height to center it better */
}

/* Dark theme: use actual chat bubble text color instead of too dark color */
:root:not([data-theme="light"]) .right-hero-title,
:root:not([data-theme="light"]) .content-title,
:root:not([data-theme="light"]) .service-category h3,
:root:not([data-theme="light"]) .project-item h3,
:root:not([data-theme="light"]) .location h4 {
  color: #aab2b8ef; /* Use actual chat bubble text color */
}

/* Mobile: right content below topbar, chat below that; scroll if content would overlap */
@media (max-width: 768px){
  .chat-wrap{
    flex-direction: column !important;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    width: 100vw;
    margin: 0;
    height: 100vh; /*  take full screen height */
  }

  /* Right side content sits below the topbar; scroll if tall */
  .right-slot{
    display: block !important;
    order: 1;
    width: 100%;
    height: 25vh;        /* 👈 40% height */
    max-height: 55% !important;
    min-height: auto !important; /* 👈 reset desktop min-height */   /* prevents overlap */
    overflow-y: auto;      /* adds scrollbar when content is tall */
    padding: 12px;
  }

  /* Chat container sits below the right content */
  .chat-surface{
    order: 2;
    width: 100% !important;
    max-width: 95% !important;
    height: 75vh !important;   /* uses the remaining space */
    min-height: 55% !important;
    border-radius: 50px;
    box-shadow:  var(--panel-shadow); /* shadow like desktop */
    margin: 8px;  
  }
}

/* Remove unwanted duplicate navigation tabs on desktop and keep mobile menu hidden unless opened */
.mobile-nav,
.mobile-overlay{ display:none !important; }

@media (max-width: 768px){
  .mobile-nav{ display:none; }          /* hidden by default */
  .mobile-nav.open{ display:block; }    /* only visible when explicitly opened */
  .mobile-overlay{ display:none; }
  .mobile-overlay.open{ display:block; }
}

/* Desktop: hide mobile hamburger */
.mobile-menu-btn{ display:none; }

/* Mobile: show hamburger inside the composer, keep tabs hidden */
@media (max-width: 768px){
  .chat-surface .main-nav{ display:none !important; }
  
  .main-nav {
    display: none !important;
  }

  .mobile-menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;height:40px;
    border:none;border-radius:10px;
    background:transparent;  /* Changed from var(--input-bg) to transparent */
    position:absolute;
    right:70px;                 /* sits just left of the send button */
    top:50%;
    transform:translateY(-50%);
    box-shadow:none;           /* Changed from var(--shadow) to none */
    cursor:pointer;
  }
  .mobile-menu-btn:active{ transform:translateY(-50%) scale(.98) }

  /* ensure input text doesn't go under the hamburger */
  .composer input{ padding-right:60px; }
}

/* Mobile side menu: hidden by default, visible when .open (overrides earlier display:none !important) */
@media (max-width: 768px){
  .mobile-nav{
    position:fixed;
    top:0;
    right:-100%;
    width:80vw;
    height:100vh;
    background:var(--panel);
    z-index:1000;
    transition:right .3s ease;
    padding:60px 16px 20px;
    box-shadow:-5px 0 15px rgba(0,0,0,0.25);
    overflow-y:auto;
    display:block;        /* keep element mount; off-screen until .open */
  }
  .mobile-nav.open{ right:0; display:block !important; }

  .mobile-overlay{
    position:fixed;
    top:0; left:0;
    width:100vw; height:100vh;
    background:rgba(0,0,0,0.5);
    z-index:999;
    display:none;
  }
  .mobile-overlay.open{ display:block !important; }

  /* Simple list styling inside the mobile menu */
  .mobile-nav .pill,
  .mobile-nav .dropdown-toggle{
    display:block;
    width:100%;
    margin: 12px 0;
    padding:14px;
    border-radius:16px;
    background:var(--panel);
    color:var(--text);
    font-weight: 600;
    text-align:center;
    box-shadow: var(--shadow); /* subtle shadow for button effect */
    transition: background .2s ease;
  }
  
  /* Hide dropdown arrow if any */
  .mobile-nav .dropdown-toggle::after {
    display: none;
  }
    
    /* Hide dropdown sub-menus by default in mobile, show when open */
  .mobile-nav .dropdown .menu {
    display: none;
  }

  .mobile-nav .dropdown.open .menu {
    display: block;
  }

  .mobile-nav .menu-item{
    display:block;

  .mobile-nav .menu-item:hover {
    background: var(--pill-hover);
    color: var(--accent);
  }
}
}

/* Mobile dropdown menus should always open downward */
@media (max-width: 768px) {
  .mobile-nav .dropdown {
    position: relative; /* menu positions relative to this */
  }

  .mobile-nav .dropdown .menu {
    top: 100% !important;   /* push below the button */
    bottom: auto !important;
    left: 0;
    right: auto;
    position: absolute;
    z-index: 9999;          /* stay on top */
    max-height: 50vh;       /* limit size */
    overflow-y: auto;       /* scroll if too long */
    background: var(--surface, #222); /* match theme background */
  }
  
}

/* Right-side background video */
.right-slot {
  position: relative;
}

.right-bg-video {
  position: absolute;
  top: 0;
  left: 5%;
  width: 96%;
  height: 150%;
  object-fit: cover;
  opacity: 0.45; /* 45% transparency */
  z-index: 0;
}

/* Keep text/content above video */
.right-slot > *:not(.right-bg-video) {
  position: relative;
  z-index: 1;
}
/* Show video only in dark theme */
:root[data-theme="dark"] .right-bg-video {
  display: block;
}

:root[data-theme="light"] .right-bg-video {
  display: none;
}