/* style.css - responsive + mobile friendly */

/* Reset */
*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,Segoe UI,Arial;}

:root{
  --sidebar-w:300px;
  --accent1:#0015ff;
  --accent2:#cc00ff;
  --glass: rgba(255,255,255,0.06);
}

html,body,#main{height:100%;}
body{background:#0b0b0b;color:#fff;overflow:hidden;}

/* Background container */
.bg-container{position:fixed;inset:0;z-index:-2;overflow:hidden;}
#bg-image{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(0.55);}
#bg-video{width:100%;height:100%;object-fit:cover;}

/* Intro overlay */
.intro-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000;z-index:9999;transition:opacity .8s;}
.intro-content{color:#fff;text-align:center;opacity:0;}
.intro-text{font-size:64px;letter-spacing:2px;opacity:0;transform:translateY(10px);transition:all .6s;}
.intro-sub{margin-top:16px;font-size:18px;opacity:0;transform:translateY(10px);transition:all .6s .6s;}

/* App layout */
.app{display:flex;height:100vh;position:relative;}

/* Sidebar */
.sidebar{
  width:var(--sidebar-w);
  min-width:240px;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  backdrop-filter:blur(8px);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:transform .4s ease, width .3s ease;
  z-index:50;
  box-shadow: 0 6px 30px rgba(0,0,0,0.5);
  border-right:1px solid rgba(255,255,255,0.04);
}

/* Closed state will move off-screen */
.sidebar.closed{transform:translateX(-110%);position:fixed;left:0;}

/* Top brand */
.sidebar-top{display:flex;justify-content:space-between;align-items:center;}
.brand{display:flex;gap:10px;align-items:center;}
.brand-logo{width:44px;height:44px;border-radius:8px;object-fit:cover;}
.brand-title{font-weight:700;}
.brand-sub{font-size:12px;color:#ccc;}

/* Controls */
.icon-btn{background:transparent;border:none;color:#fff;font-size:18px;cursor:pointer;padding:8px;border-radius:8px;}
.side-btn{width:100%;padding:10px;border-radius:10px;border:none;background:linear-gradient(135deg,var(--accent1),var(--accent2));color:#fff;cursor:pointer;margin-bottom:8px;}
.side-input{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:#fff;margin-bottom:8px;}

.section-title{font-size:12px;color:#bbb;padding:8px 0;}

/* chat list */
.chat-list{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow:auto;}
.chat-item{padding:10px;border-radius:8px;background:rgba(255,255,255,0.02);cursor:pointer;display:flex;justify-content:space-between;align-items:center;}
.chat-item:hover{background:rgba(255,255,255,0.03);}

/* Sidebar bottom */
.sidebar-bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;}
.user-mini{display:flex;gap:8px;align-items:center;}
.user-mini img{width:36px;height:36px;border-radius:50%;object-fit:cover;}
.auth-buttons{display:flex;gap:8px;}
.auth-btn{padding:8px 10px;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,0.06);color:#fff;cursor:pointer;}

/* Floating FAB when sidebar closed */
.fab{position:fixed;left:12px;top:12px;z-index:70;border-radius:12px;padding:8px;background:rgba(255,255,255,0.06);backdrop-filter:blur(6px);border:none;cursor:pointer;}
.fab-logo{width:28px;height:28px;object-fit:cover;border-radius:6px;}

/* Main */
.main{flex:1;display:flex;flex-direction:column;gap:12px;padding:18px;transition:margin-left .4s ease;}
.main.shifted{margin-left:calc(var(--sidebar-w)/2);} /* when sidebar closed we shift to center */

/* Chat header */
.chat-header{display:flex;justify-content:space-between;align-items:center;padding:8px 4px;}
.chat-header .left{display:flex;align-items:center;gap:10px;}
.logo-small img{width:36px;height:36px;border-radius:6px;}
.title{font-weight:700;font-size:18px;}
.top-btn{padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:#fff;cursor:pointer;margin-left:8px}

/* Messages */
.messages{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:10px;}
.message{padding:12px 16px;border-radius:14px;max-width:70%;word-wrap:break-word;opacity:0;transform:translateY(8px);animation:slideIn .2s forwards;}
.user-message{align-self:flex-end;background:linear-gradient(135deg,var(--accent1),var(--accent2));color:#fff;}
.bot-message{align-self:flex-start;background:linear-gradient(135deg,#fbff00,#3300ff);color:#000;}

/* Input area */
.input-area{display:flex;gap:10px;padding:12px;border-radius:12px;background:linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.25));align-items:center;}
#userInput{flex:1;padding:12px;border-radius:10px;border:none;background:rgba(255,255,255,0.02);color:#fff;outline:none;font-size:15px;}
.send-btn{padding:12px 18px;border-radius:10px;border:none;background:linear-gradient(135deg,var(--accent1),var(--accent2));color:#fff;cursor:pointer;}

/* Profile display bottom-left */
.profile-display{position:fixed;left:18px;bottom:18px;background:rgba(0,0,0,0.5);padding:8px 10px;border-radius:12px;display:flex;align-items:center;gap:10px;backdrop-filter:blur(6px);}
.profile-display img{width:42px;height:42px;border-radius:50%;object-fit:cover;}
.profile-display div{font-weight:600;color:#fff;font-size:14px;}

/* Modal */
.modal{position:fixed;inset:0;display:none;z-index:200;}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s;}
.modal-content{position:relative;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:20px;border-radius:12px;width:90%;max-width:520px;margin:80px auto;opacity:0;transform:translateY(12px);transition:all .3s;}
.modal-close{position:absolute;right:12px;top:12px;background:transparent;border:none;color:#fff;font-size:18px;cursor:pointer;}
.modal-section{margin-top:12px;}
.switch{position:relative;display:inline-block;width:44px;height:24px;}
.switch input{display:none;}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ccc;border-radius:34px;transition:.4s;}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;top:3px;background:white;border-radius:50%;transition:.4s;}
.switch input:checked + .slider{background:linear-gradient(135deg,var(--accent1),var(--accent2));}
.switch input:checked + .slider:before{transform:translateX(20px);}

/* small screens */
@media (max-width:800px){
  :root{--sidebar-w:260px;}
  .sidebar{position:fixed;left:0;top:0;height:100vh;z-index:80;}
  .main{padding:14px;}
  .sidebar.closed{transform:translateX(-110%);}
  .fab{display:block;}
  .main.shifted{margin-left:0;}
  .message{max-width:85%;}
  .profile-display{left:10px;bottom:10px;}
}

/* animations */
@keyframes slideIn{to{opacity:1;transform:translateY(0);}}

/* helper hidden */
.hidden{display:none;}