/* ========================= */
/* RESET */
/* ========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html, body{
  height:100%;
  width:100%;
  font-family:'Poppins',sans-serif;
  background:url('images/bg.jpg') center/cover no-repeat fixed;
  /* FIX: removed overflow:hidden from body — causes scroll issues on mobile */
  overflow:hidden;
  color:white;
}

/* ========================= */
/* BACKGROUND OVERLAY */
/* ========================= */

.bg-overlay{
  position:fixed;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(5,10,20,0.75),
    rgba(5,10,20,0.92)
  );
  z-index:-1;
}

/* ========================= */
/* MAIN APP */
/* ========================= */

.app-container{
  display:flex;
  height:100vh;
  height:100dvh; /* FIX: dynamic viewport height — fixes mobile keyboard issue */
  width:100%;
  overflow:hidden;
}

/* ========================= */
/* SIDEBAR */
/* ========================= */

.sidebar{
  width:290px;
  min-width:290px;
  background:rgba(8,15,28,0.95);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-right:1px solid rgba(255,255,255,0.06);
  display:flex;
  flex-direction:column;
  padding:22px;
  overflow-y:auto;
  overflow-x:hidden;
  /* FIX: smooth scroll in sidebar */
  -webkit-overflow-scrolling:touch;
}

.sidebar-top{
  flex-shrink:0;
}

/* ========================= */
/* LOGO */
/* ========================= */

.logo-box{
  margin-bottom:25px;
}

.logo-text{
  font-size:28px;
  font-weight:700;
  color:white;
  text-shadow:0 0 12px #38bdf8, 0 0 30px #38bdf8;
}

.logo-sub{
  margin-top:5px;
  font-size:13px;
  color:rgba(255,255,255,0.65);
}

/* ========================= */
/* NEW CHAT */
/* ========================= */

.new-chat-btn{
  width:100%;
  padding:12px;
  border:none;
  border-radius:18px;
  background:linear-gradient(135deg,#38bdf8,#2563eb);
  color:white;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.new-chat-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(37,99,235,0.4);
}

/* ========================= */
/* MENU */
/* ========================= */

.menu-section{
  margin-top:24px;
  flex-shrink:0;
}

.menu-title{
  font-size:11px;
  color:rgba(255,255,255,0.4);
  margin-bottom:10px;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.menu-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  cursor:pointer;
  margin-bottom:6px;
  transition:0.2s;
  font-size:14px;
}

.menu-item:hover{
  background:rgba(255,255,255,0.06);
}

.active-menu{
  background:rgba(56,189,248,0.16);
  border:1px solid rgba(56,189,248,0.25);
}

.menu-item i{
  font-size:15px;
  width:18px;
  flex-shrink:0;
}

/* ========================= */
/* HISTORY SECTION */
/* ========================= */

/* ========================= */
/* HISTORY SECTION */
/* ========================= */

.history-section{
  margin-top:24px;
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  min-height:0;
  max-height:280px;
}

.history-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}

.history-text{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
  min-width:0;
  cursor:pointer;
}

.history-text span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13px;
}

/* NEW history classes */
.history-menu-item{
  padding:8px 10px !important;
  margin-bottom:4px !important;
}

.history-mode-icon{
  font-size:14px;
  flex-shrink:0;
}

.history-info{
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:1px;
}

.history-title{
  font-size:12px;
  color:rgba(255,255,255,0.85);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:160px;
}

.history-date{
  font-size:10px;
  color:rgba(255,255,255,0.38);
}

.delete-history-btn{
  background:none;
  border:none;
  color:rgba(255,255,255,0.3);
  cursor:pointer;
  font-size:12px;
  transition:0.2s;
  padding:4px 6px;
  flex-shrink:0;
  border-radius:6px;
}

.delete-history-btn:hover{
  color:#ef4444;
  background:rgba(239,68,68,0.12);
}

/* ========================= */
/* USER */
/* ========================= */

.sidebar-bottom{
  margin-top:20px;
  flex-shrink:0;
}

.user-profile{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,0.05);
}

.user-avatar{
  width:40px;
  height:40px;
  min-width:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#38bdf8,#2563eb);
  font-weight:700;
  font-size:16px;
}

.user-info{
  min-width:0; /* FIX: text truncation */
}

.user-info h4{
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.user-info p{
  font-size:11px;
  color:rgba(255,255,255,0.55);
}

/* ========================= */
/* CHAT SECTION */
/* ========================= */

.chat-section{
  flex:1;
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100dvh; /* FIX: dynamic viewport */
  overflow:hidden;
  min-width:0;
}

/* ========================= */
/* TOP BAR */
/* ========================= */

.top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 24px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  background:rgba(5,10,20,0.5);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  position:sticky;
  top:0;
  z-index:999;
  flex-shrink:0;
}

.top-left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.top-left div{
  min-width:0;
}

.top-left h2{
  font-size:20px;
  white-space:nowrap;
}

.top-left p{
  font-size:12px;
  color:rgba(255,255,255,0.55);
  white-space:nowrap;
}

.top-right{
  flex-shrink:0;
  margin-left:12px;
}

/* ========================= */
/* STATUS BADGE */
/* ========================= */

.status-badge{
  padding:8px 14px;
  border-radius:30px;
  background:rgba(56,189,248,0.12);
  border:1px solid rgba(56,189,248,0.22);
  color:#38bdf8;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}

/* ========================= */
/* CHAT BOX */
/* ========================= */

.chat-box{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:20px 20px 20px 20px;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  min-height:0; /* FIX: key fix for flex scroll */
}

/* ========================= */
/* MESSAGE */
/* ========================= */

.message{
  display:flex;
  gap:14px;
  margin-bottom:24px;
  max-width:100%;
}

.message-avatar{
  width:38px;
  height:38px;
  min-width:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#38bdf8,#2563eb);
  font-weight:700;
  font-size:13px;
  flex-shrink:0;
  align-self:flex-start; /* FIX: avatar stays at top */
}

.message-content{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.07);
  padding:18px 20px;
  border-radius:20px;
  max-width:80%; /* FIX: was 850px fixed — now responsive */
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  min-width:0;
  word-wrap:break-word; /* FIX: long words dont overflow */
  overflow-wrap:break-word;
}

.message-content h4{
  margin-bottom:8px;
  font-size:14px;
  color:#38bdf8;
}

.message-content p{
  line-height:1.8;
  color:rgba(255,255,255,0.88);
  font-size:14px;
  word-break:break-word; /* FIX: text overflow */
}

.user-message{
  justify-content:flex-end;
}

.user-message .message-content{
  background:linear-gradient(
    135deg,
    rgba(37,99,235,0.4),
    rgba(56,189,248,0.25)
  );
  max-width:75%;
}

/* ========================= */
/* QUICK BUTTONS */
/* ========================= */

.quick-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.quick-btn{
  border:none;
  padding:10px 16px;
  border-radius:14px;
  background:rgba(255,255,255,0.08);
  color:white;
  cursor:pointer;
  transition:0.2s;
  font-size:13px;
}

.quick-btn:hover,
.quick-btn:active{
  background:rgba(56,189,248,0.22);
}

/* ========================= */
/* TYPING */
/* ========================= */

.typing-box{
  display:flex;
  gap:8px;
  margin-left:52px;
  margin-bottom:24px;
  align-items:center;
}

.typing-box span,
.typing-indicator .message-content span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#38bdf8;
  animation:typing 1.2s infinite;
  display:inline-block;
}

.typing-box span:nth-child(2),
.typing-indicator .message-content span:nth-child(2){ animation-delay:0.2s; }
.typing-box span:nth-child(3),
.typing-indicator .message-content span:nth-child(3){ animation-delay:0.4s; }

.typing-indicator .message-content{
  display:flex;
  gap:8px;
  align-items:center;
  min-height:auto;
  padding:14px 18px;
}

@keyframes typing{
  0%  { opacity:0.2; transform:translateY(0); }
  50% { opacity:1;   transform:translateY(-5px); }
  100%{ opacity:0.2; transform:translateY(0); }
}

/* ========================= */
/* INPUT AREA */
/* ========================= */

.input-wrapper{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 20px;
  background:rgba(5,10,20,0.6);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,0.06);
  flex-shrink:0; /* FIX: input never gets pushed out */
}

/* ========================= */
/* ICON BUTTON */
/* ========================= */

.input-icon-btn{
  width:46px;
  height:46px;
  min-width:46px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  color:white;
  cursor:pointer;
  font-size:16px;
  transition:0.2s;
  display:flex;
  align-items:center;
  justify-content:center;
}

.input-icon-btn:hover,
.input-icon-btn:active{
  background:rgba(56,189,248,0.22);
}

/* ========================= */
/* TEXTAREA */
/* ========================= */

.input-box{
  flex:1;
  min-width:0;
}

.input-box textarea{
  width:100%;
  height:48px;
  max-height:120px; /* FIX: auto expand limit */
  border:none;
  outline:none;
  resize:none;
  border-radius:18px;
  padding:14px 18px;
  background:rgba(255,255,255,0.07);
  color:white;
  font-size:14px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-family:'Poppins',sans-serif;
  line-height:1.5;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.input-box textarea::placeholder{
  color:rgba(255,255,255,0.45);
}

/* ========================= */
/* SEND */
/* ========================= */

.send-btn{
  width:50px;
  height:50px;
  min-width:50px;
  border:none;
  border-radius:50%;
  background:linear-gradient(135deg,#38bdf8,#2563eb);
  color:white;
  cursor:pointer;
  font-size:18px;
  transition:0.2s;
  display:flex;
  align-items:center;
  justify-content:center;
}

.send-btn:hover,
.send-btn:active{
  transform:scale(1.06);
}

/* ========================= */
/* BOTTOM TEXT */
/* ========================= */

.bottom-text{
  text-align:center;
  padding:8px 20px 12px;
  flex-shrink:0;
}

.bottom-text p{
  color:rgba(255,255,255,0.35);
  font-size:11px;
}

/* ========================= */
/* MOBILE MENU BUTTON */
/* ========================= */

.mobile-menu-btn{
  display:none;
  background:none;
  border:none;
  color:white;
  font-size:22px;
  cursor:pointer;
  padding:4px;
}

/* ========================= */
/* PROGRESS BAR */
/* ========================= */

.progress-bar{
  width:100%;
  height:10px;
  background:rgba(255,255,255,0.1);
  border-radius:20px;
  overflow:hidden;
  margin-top:10px;
}

.progress-fill{
  height:100%;
  background:linear-gradient(90deg,#7c3aed,#06b6d4);
  border-radius:20px;
  transition:0.5s;
}

/* ========================= */
/* STARTUP MODAL */
/* ========================= */

.startup-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.88);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99999;
  padding:20px;
}

.startup-box{
  background:rgba(10,15,30,0.98);
  border:1px solid rgba(255,255,255,0.08);
  padding:30px 24px;
  border-radius:24px;
  width:100%;
  max-width:400px;
  text-align:center;
}

.startup-box h2{
  font-size:22px;
  margin-bottom:8px;
}

.startup-box p{
  color:rgba(255,255,255,0.6);
  font-size:14px;
}

.startup-box input{
  width:100%;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;
  margin-top:20px;
  background:rgba(255,255,255,0.06);
  color:white;
  font-size:15px;
  outline:none;
}

.startup-box input::placeholder{
  color:rgba(255,255,255,0.4);
}

.startup-buttons{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:20px;
}

.startup-buttons button{
  padding:14px;
  border:none;
  border-radius:14px;
  cursor:pointer;
  font-size:15px;
  font-weight:600;
  transition:0.2s;
}

.startup-buttons button:first-child{
  background:linear-gradient(135deg,#38bdf8,#2563eb);
  color:white;
}

.startup-buttons button:last-child{
  background:rgba(255,255,255,0.08);
  color:white;
  border:1px solid rgba(255,255,255,0.1);
}

/* ========================= */
/* VOICE OVERLAY */
/* ========================= */

.voice-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:99999;
  opacity:0;
  pointer-events:none;
  transition:0.3s ease;
}

.voice-overlay.active{
  opacity:1;
  pointer-events:auto;
}

.voice-circle{
  width:110px;
  height:110px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(56,189,248,0.2),rgba(37,99,235,0.2));
  border:2px solid rgba(56,189,248,0.4);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:38px;
  color:#38bdf8;
  animation:pulse 1.5s infinite;
  cursor:pointer;
}

.voice-overlay p{
  margin-top:20px;
  font-size:16px;
  color:rgba(255,255,255,0.8);
}

@keyframes pulse{
  0%  { transform:scale(1);    box-shadow:0 0 0 0 rgba(56,189,248,0.3); }
  50% { transform:scale(1.08); box-shadow:0 0 0 20px rgba(56,189,248,0); }
  100%{ transform:scale(1);    box-shadow:0 0 0 0 rgba(56,189,248,0); }
}

/* ========================= */
/* TABLET — iPad */
/* ========================= */

@media(max-width:1024px) and (min-width:769px){

  .sidebar{
    width:240px;
    min-width:240px;
    padding:18px;
  }

  .logo-text{
    font-size:24px;
  }

  .message-content{
    max-width:85%;
  }

  .top-bar{
    padding:14px 20px;
  }

}

/* ========================= */
/* MOBILE — hide sidebar */
/* ========================= */

@media(max-width:768px){

  .mobile-menu-btn{
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .sidebar{
    position:fixed;
    top:0;
    left:0;
    width:80vw;
    max-width:300px;
    height:100vh;
    height:100dvh;
    z-index:9999;
    overflow-y:auto;
    transition:transform 0.3s ease;
    padding:20px 18px;
    transform:translateX(-100%);
  }

  .sidebar.active{
    transform:translateX(0);
    left:0;
  }

  /* FIX: dark overlay when sidebar open */
  body.menu-open::after{
    content:'';
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.5);
    z-index:9998;
    cursor:pointer;
  }

  .chat-box{
    padding:16px;
  }

  .message-content{
    max-width:88%;
    padding:14px 16px;
  }

  .user-message .message-content{
    max-width:82%;
  }

  .message-content p{
    font-size:13px;
  }

  .input-wrapper{
    padding:10px 14px;
    gap:8px;
  }

  .input-icon-btn{
    width:42px;
    height:42px;
    min-width:42px;
    font-size:15px;
  }

  .send-btn{
    width:44px;
    height:44px;
    min-width:44px;
    font-size:16px;
  }

  .input-box textarea{
    height:44px;
    font-size:13px;
    padding:12px 16px;
  }

  .top-bar{
    padding:12px 16px;
  }

  .top-left h2{
    font-size:18px;
  }

  .top-left p{
    font-size:11px;
  }

  .status-badge{
    font-size:11px;
    padding:6px 10px;
  }

  .quick-btn{
    font-size:12px;
    padding:8px 12px;
  }

  .bottom-text{
    padding:6px 16px 10px;
  }

}

/* ========================= */
/* SMALL PHONES */
/* ========================= */

@media(max-width:390px){

  .sidebar{
    width:100%;
  }

  .message-content{
    max-width:92%;
  }

  .top-left h2{
    font-size:16px;
  }

  .status-badge{
    display:none; /* hide on very small screens */
  }

}

/* ========================= */
/* SCROLLBAR STYLE */
/* ========================= */

::-webkit-scrollbar{
  width:4px;
}

::-webkit-scrollbar-track{
  background:transparent;
}

::-webkit-scrollbar-thumb{
  background:rgba(56,189,248,0.3);
  border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
  background:rgba(56,189,248,0.5);
}

/* ========================= */
/* iOS SAFARI FIXES */
/* ========================= */

/* Prevent input zoom on iOS */
input, textarea, select {
  font-size: 16px !important;
  -webkit-appearance: none;
}

/* iOS safe area insets (iPhone notch/home bar) */
.input-wrapper {
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}

/* ========================= */
/* MIC ACTIVE BAR            */
/* ========================= */

/* Mic bar sits above input — both visible */
.mic-active-bar {
  display: none;
  align-items: center;
  background: rgba(5, 15, 28, 0.97);
  border: 1px solid rgba(56,189,248,0.4);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 12px 18px;
  margin: 0 16px 6px 16px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}

.mic-active-bar.active {
  display: flex !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Input stays visible always */
body.mic-active .input-wrapper {
  display: none !important;
}

body.mic-active .bottom-text {
  display: none !important;
}

/* iOS momentum scrolling */
.chat-box,
.sidebar {
  -webkit-overflow-scrolling: touch;
}

/* Fix iOS button tap highlight */
button, a {
  -webkit-tap-highlight-color: transparent;
}

/* iOS Safari vh fix */
.app-container {
  height: -webkit-fill-available;
}

/* Fix iOS Safari fixed position with keyboard */
@supports (-webkit-touch-callout: none) {
  .input-wrapper {
    position: sticky;
    bottom: 0;
  }
}