/* =========================================================
   AKSHAT NETWORK HUB AI
   ADVANCED FIREFOX-OPTIMIZED CSS
========================================================= */

/* =========================================================
   ROOT VARIABLES
========================================================= */

:root{

  --bg-primary:#020617;
  --bg-secondary:#0f172a;
  --bg-card:#111827cc;
  --bg-glass:rgba(15,23,42,0.72);

  --border:rgba(255,255,255,0.08);

  --text-primary:#ffffff;
  --text-secondary:#94a3b8;
  --text-muted:#64748b;

  --accent:#2563eb;
  --accent-hover:#1d4ed8;

  --success:#10b981;
  --danger:#ef4444;
  --warning:#f59e0b;

  --shadow:
    0 10px 40px rgba(0,0,0,0.35);

  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:14px;

  --transition:0.28s ease;

  --sidebar-width:320px;

}

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

*,
*::before,
*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  -moz-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  font-family:'Inter',sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
  overflow:hidden;
  min-height:100vh;

  /* FIREFOX OPTIMIZATION */

  scrollbar-width:thin;
  scrollbar-color:
    #334155
    transparent;

  text-rendering:optimizeLegibility;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

}

/* =========================================================
   FIREFOX SCROLLBAR
========================================================= */

*{
  scrollbar-width:thin;
  scrollbar-color:
    #334155
    transparent;
}

::-webkit-scrollbar{
  width:8px;
  height:8px;
}

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

::-webkit-scrollbar-thumb{
  background:#334155;
  border-radius:20px;
}

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

body::before{

  content:"";

  position:fixed;
  inset:0;

  background:
    radial-gradient(
      circle at top left,
      rgba(37,99,235,0.18),
      transparent 28%
    ),

    radial-gradient(
      circle at bottom right,
      rgba(168,85,247,0.16),
      transparent 28%
    ),

    radial-gradient(
      circle at center,
      rgba(59,130,246,0.08),
      transparent 35%
    );

  z-index:-2;

}

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

#overlay{

  position:fixed;
  inset:0;

  background:rgba(0,0,0,0.55);

  z-index:90;

  opacity:0;
  visibility:hidden;

  transition:var(--transition);

}

#overlay.active{
  opacity:1;
  visibility:visible;
}

/* =========================================================
   APP LAYOUT
========================================================= */

.app{
  display:flex;
  width:100%;
  height:100vh;
  overflow:hidden;
}

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

.sidebar{

  width:var(--sidebar-width);

  background:var(--bg-glass);

  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);

  border-right:1px solid var(--border);

  display:flex;
  flex-direction:column;

  position:relative;

  z-index:100;

  overflow:hidden;

}

/* FIREFOX BACKDROP FALLBACK */

@-moz-document url-prefix(){

  .sidebar,
  .topbar,
  .input-area,
  .ai{

    background:#0f172ae8;

  }

}

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

.sidebar-top{

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:22px;

  border-bottom:1px solid var(--border);

}

.logo{
  display:flex;
  align-items:center;
  gap:14px;
}

.logo img{

  width:54px;
  height:54px;

  border-radius:18px;

  object-fit:cover;

  box-shadow:
    0 6px 22px rgba(37,99,235,0.35);

}

.logo h1{

  font-size:20px;
  font-weight:800;

}

.logo p{

  color:var(--text-secondary);
  font-size:13px;

  margin-top:3px;

}

#closeSidebarBtn{

  display:none;

  background:none;
  border:none;

  color:var(--text-secondary);

  font-size:22px;

  cursor:pointer;

}

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

.new-chat-btn{

  margin:18px;

  border:none;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #3b82f6
    );

  color:white;

  padding:16px;

  border-radius:18px;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  font-weight:600;

  transition:var(--transition);

  box-shadow:
    0 10px 25px rgba(37,99,235,0.25);

}

.new-chat-btn:hover{

  transform:translateY(-2px);

  background:
    linear-gradient(
      135deg,
      #1d4ed8,
      #2563eb
    );

}

/* =========================================================
   SEARCH
========================================================= */

.sidebar-search{

  margin:0 18px 18px;

  display:flex;
  align-items:center;
  gap:12px;

  background:#111827;

  border:1px solid var(--border);

  border-radius:16px;

  padding:14px;

}

.sidebar-search i{
  color:var(--text-muted);
}

.sidebar-search input{

  flex:1;

  background:none;
  border:none;
  outline:none;

  color:white;

  font-size:14px;

}

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

.history-list{

  flex:1;

  overflow-y:auto;

  padding:0 18px 20px;

}

.history-item{

  background:#11182799;

  border:1px solid transparent;

  border-radius:16px;

  padding:14px;

  margin-bottom:12px;

  cursor:pointer;

  transition:var(--transition);

}

.history-item:hover{

  border-color:rgba(59,130,246,0.35);

  background:#1e293bcc;

}

.history-item-title{

  font-size:14px;
  font-weight:500;

  line-height:1.5;

  color:white;

}

.history-item-date{

  margin-top:8px;

  font-size:12px;

  color:var(--text-muted);

}

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

.sidebar-links{

  padding:20px;

  border-top:1px solid var(--border);

  display:grid;
  gap:12px;

}

.sidebar-links a{

  text-decoration:none;

  color:#dbeafe;

  background:#111827aa;

  padding:14px;

  border-radius:14px;

  display:flex;
  align-items:center;
  gap:12px;

  transition:var(--transition);

  border:1px solid transparent;

}

.sidebar-links a:hover{

  border-color:rgba(59,130,246,0.25);

  transform:translateY(-1px);

  background:#1e293b;

}

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

.main{

  flex:1;

  display:flex;
  flex-direction:column;

  min-width:0;

  overflow:hidden;

}

/* =========================================================
   TOPBAR
========================================================= */

.topbar{

  height:78px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 24px;

  border-bottom:1px solid var(--border);

  background:rgba(2,6,23,0.72);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

}

.topbar-left{

  display:flex;
  align-items:center;
  gap:18px;

}

#menuBtn{

  display:none;

  width:48px;
  height:48px;

  border:none;

  border-radius:14px;

  background:#111827;

  color:white;

  cursor:pointer;

  font-size:18px;

}

.topbar h2{

  font-size:20px;
  font-weight:700;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

}

.status{

  display:flex;
  align-items:center;
  gap:10px;

  color:var(--success);

  font-size:14px;

}

.status-dot{

  width:10px;
  height:10px;

  border-radius:50%;

  background:var(--success);

  box-shadow:
    0 0 15px var(--success);

}

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

.chat-container{

  flex:1;

  overflow-y:auto;

  display:flex;
  flex-direction:column;

  gap:24px;

  padding:
    34px
    clamp(18px,4vw,42px);

}

/* =========================================================
   WELCOME
========================================================= */

.welcome{

  margin:auto;

  width:100%;
  max-width:850px;

  text-align:center;

}

.welcome-logo img{

  width:120px;
  height:120px;

  border-radius:32px;

  margin-bottom:30px;

  box-shadow:
    0 15px 45px rgba(37,99,235,0.28);

}

.welcome h1{

  font-size:
    clamp(
      38px,
      6vw,
      72px
    );

  font-weight:800;

  line-height:1.1;

  margin-bottom:20px;

  background:
    linear-gradient(
      90deg,
      #60a5fa,
      #818cf8,
      #c084fc
    );

  -webkit-background-clip:text;
  background-clip:text;

  -webkit-text-fill-color:transparent;

}

.welcome p{

  color:var(--text-secondary);

  font-size:18px;

  line-height:1.8;

  max-width:720px;

  margin:auto;

}

/* =========================================================
   QUICK ACTIONS
========================================================= */

.quick-actions{

  margin-top:42px;

  display:flex;
  flex-wrap:wrap;
  justify-content:center;

  gap:14px;

}

.quick-btn{

  background:#111827cc;

  border:1px solid rgba(255,255,255,0.06);

  color:white;

  padding:14px 18px;

  border-radius:16px;

  cursor:pointer;

  transition:var(--transition);

  font-size:14px;

}

.quick-btn:hover{

  transform:translateY(-2px);

  background:#1e293b;

  border-color:
    rgba(59,130,246,0.35);

}

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

.message{

  max-width:min(920px,92%);

  padding:20px 22px;

  border-radius:24px;

  line-height:1.8;

  animation:fadeIn 0.25s ease;

  word-break:break-word;

  position:relative;

}

.user{

  align-self:flex-end;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #3b82f6
    );

  box-shadow:
    0 12px 30px rgba(37,99,235,0.25);

}

.ai{

  align-self:flex-start;

  background:var(--bg-card);

  border:1px solid var(--border);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

}

.ai *{
  color:white;
}

.ai p{
  margin-bottom:16px;
}

.ai ul,
.ai ol{
  padding-left:22px;
  margin-bottom:18px;
}

.ai h1,
.ai h2,
.ai h3,
.ai h4{
  margin:
    18px 0 14px;
}

.ai img{

  max-width:100%;

  border-radius:18px;

  margin-top:16px;

  cursor:pointer;

}

.ai pre{

  margin-top:18px;

  background:#020617;

  border-radius:18px;

  padding:20px;

  overflow:auto;

  border:1px solid rgba(255,255,255,0.05);

}

.ai code{

  color:#93c5fd;

  font-family:
    Consolas,
    monospace;

}

/* =========================================================
   CODE TOOLBAR
========================================================= */

.code-toolbar{

  margin-top:14px;

  display:flex;
  flex-wrap:wrap;
  gap:12px;

}

.code-toolbar button{

  border:none;

  background:#1e293b;

  color:white;

  padding:10px 14px;

  border-radius:12px;

  cursor:pointer;

  font-size:13px;

  transition:var(--transition);

}

.code-toolbar button:hover{
  background:#2563eb;
}

/* =========================================================
   FILE PREVIEW
========================================================= */

.file-preview-container{

  display:flex;
  flex-wrap:wrap;

  gap:14px;

  padding:
    0
    clamp(18px,4vw,42px)
    16px;

}

.file-preview{

  background:#111827;

  border:1px solid var(--border);

  border-radius:16px;

  padding:14px;

  display:flex;
  align-items:center;
  gap:12px;

  max-width:240px;

}

.file-preview-name{

  font-size:13px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

}

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

.input-area{

  padding:18px;

  border-top:1px solid var(--border);

  background:rgba(2,6,23,0.74);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

}

.input-tools{

  display:flex;
  gap:12px;

  max-width:1200px;

  margin:
    0 auto 12px;

}

.tool-btn{

  width:48px;
  height:48px;

  border:none;

  border-radius:14px;

  background:#111827;

  color:white;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  transition:var(--transition);

}

.tool-btn:hover{

  background:#1e293b;

}

.input-wrapper{

  max-width:1200px;

  margin:auto;

  display:flex;
  align-items:flex-end;

  gap:16px;

}

#promptInput{

  flex:1;

  resize:none;

  border:none;
  outline:none;

  background:#111827;

  color:white;

  border-radius:22px;

  padding:18px 20px;

  min-height:64px;
  max-height:220px;

  font-size:15px;

  line-height:1.7;

}

#sendBtn{

  width:64px;
  height:64px;

  border:none;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #3b82f6
    );

  color:white;

  font-size:20px;

  cursor:pointer;

  transition:var(--transition);

  box-shadow:
    0 10px 25px rgba(37,99,235,0.25);

}

#sendBtn:hover{

  transform:translateY(-2px);

}

.footer-note{

  text-align:center;

  margin-top:14px;

  color:var(--text-muted);

  font-size:12px;

}

/* =========================================================
   MODALS
========================================================= */

.image-modal,
.preview-modal{

  position:fixed;
  inset:0;

  background:rgba(0,0,0,0.82);

  z-index:200;

  display:none;

  align-items:center;
  justify-content:center;

}

.image-modal.active,
.preview-modal.active{
  display:flex;
}

.image-modal img{

  max-width:92%;
  max-height:92%;

  border-radius:20px;

}

.preview-modal{

  flex-direction:column;

  padding:20px;

}

.preview-header{

  width:min(1200px,100%);

  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:12px;

}

.preview-header button{

  width:48px;
  height:48px;

  border:none;

  border-radius:12px;

  background:#111827;

  color:white;

  cursor:pointer;

}

#previewFrame{

  width:min(1200px,100%);
  height:80vh;

  border:none;

  border-radius:20px;

  background:white;

}

/* =========================================================
   TOAST
========================================================= */

.toast{

  position:fixed;

  bottom:24px;
  right:24px;

  background:#111827;

  border:1px solid var(--border);

  color:white;

  padding:16px 20px;

  border-radius:16px;

  z-index:300;

  opacity:0;
  transform:translateY(20px);

  transition:var(--transition);

}

.toast.active{

  opacity:1;
  transform:translateY(0);

}

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

.typing{

  display:flex;
  align-items:center;
  gap:8px;

}

.typing span{

  width:8px;
  height:8px;

  border-radius:50%;

  background:#93c5fd;

  animation:typing 1.2s infinite;

}

.typing span:nth-child(2){
  animation-delay:0.2s;
}

.typing span:nth-child(3){
  animation-delay:0.4s;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes fadeIn{

  from{
    opacity:0;
    transform:translateY(12px);
  }

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

}

@keyframes typing{

  0%,80%,100%{
    opacity:0.2;
    transform:scale(0.8);
  }

  40%{
    opacity:1;
    transform:scale(1);
  }

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){

  .sidebar{

    position:fixed;

    left:-100%;
    top:0;

    height:100%;

    transition:0.35s ease;

  }

  .sidebar.active{
    left:0;
  }

  #closeSidebarBtn{
    display:block;
  }

  #menuBtn{
    display:flex;
    align-items:center;
    justify-content:center;
  }

}

@media(max-width:768px){

  .topbar{
    padding:0 16px;
  }

  .topbar h2{
    font-size:16px;
  }

  .chat-container{
    padding:20px 14px;
  }

  .message{
    max-width:100%;
    padding:18px;
  }

  .welcome h1{
    font-size:42px;
  }

  .welcome p{
    font-size:15px;
  }

  .quick-actions{
    gap:10px;
  }

  .quick-btn{
    width:100%;
  }

  .input-wrapper{
    gap:12px;
  }

  #sendBtn{
    width:56px;
    height:56px;
  }

}

@media(max-width:480px){

  :root{
    --sidebar-width:290px;
  }

  .welcome-logo img{
    width:92px;
    height:92px;
  }

  .welcome h1{
    font-size:34px;
  }

  .sidebar-links{
    padding:16px;
  }

  .sidebar-links a{
    font-size:14px;
  }

}

/* STREAMING */

.streaming-text{

  animation:
    fadeStream 0.2s linear;

}

.streaming-cursor::after{

  content:"▋";

  animation:
    blink 1s infinite;

}

@keyframes blink{

  50%{
    opacity:0;
  }

}

.stream-container{

  white-space:pre-wrap;

  word-wrap:break-word;

  line-height:1.7;

}