:root{
  --bg0:#050814;
  --bg1:#060b18;
  --glass: rgba(255,255,255,.06);
  --glass2: rgba(255,255,255,.10);
  --txt: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.60);

  --grad1: linear-gradient(135deg,#6ee7ff 0%,#9b8cff 100%);
  --grad2: radial-gradient(1200px 600px at 30% 25%, rgba(110,231,255,.18), transparent 60%),
           radial-gradient(900px 700px at 80% 20%, rgba(155,140,255,.18), transparent 55%),
           radial-gradient(1100px 900px at 50% 90%, rgba(64,255,191,.10), transparent 60%);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg0);
  color: var(--txt);
}

/* Make links inside chat messages obvious and readable (YELLOW) */
.message a {
  color: #fde047 !important;          /* bright yellow */
  font-weight: 700 !important;
  text-decoration: underline !important;
  word-break: break-all;              /* prevents overflow on long URLs */
}

.message a:visited {
  color: #fde047 !important;
}

.message a:hover {
  color: #facc15 !important;
}


.app{
  height:100vh;
  display:flex;
  background: var(--grad2), linear-gradient(180deg, var(--bg1), #000);
}

.sidebar{
  width: 320px;
  padding: 18px;
  border-right: 1px solid rgba(255,255,255,.08);
  background: rgba(5,8,20,.80);
  backdrop-filter: blur(16px);
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.sidebar-foot{
  margin-top:auto;
  font-size: 12px;
  color: var(--muted);
  opacity:.85;
}

.chat-list{
  display:flex;
  flex-direction:column;
  gap: 10px;
  overflow:auto;
  padding-right: 4px;
}

.chat-item{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--txt);
  padding: 12px 12px;
  border-radius: 14px;
  cursor:pointer;
  text-align:left;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.chat-item:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.chat-item.active{
  background: rgba(255,255,255,.10);
  border-color: rgba(110,231,255,.35);
  box-shadow: 0 10px 40px rgba(110,231,255,.10);
}

.chat-title-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.chat-title{
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
}

.chat-delete-btn{
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* NOT red — subtle glass button */
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.70);

  font-size: 16px;
  line-height: 1;
  user-select: none;
  cursor: pointer;

  transition: background .12s ease, border-color .12s ease, transform .12s ease, color .12s ease;
}

.chat-delete-btn:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  transform: translateY(-1px);
}

.chat-delete-btn:active{
  transform: translateY(0px);
}

.chat-meta{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

/* Chat message links: bright yellow, readable on dark background */
.message a{
  color: #fde047;          /* bright yellow */
  font-weight: 700;
  text-decoration: underline;
  word-break: break-all;   /* wrap long URLs on mobile */
}

.message a:visited{
  color: #fde047;
}

.message a:hover{
  color: #facc15;
}

.main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width: 0;
}

.topbar{
  height: 72px;
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(5,8,20,.40);
  backdrop-filter: blur(14px);
}

.brand-title{
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 18px;
}
.brand-sub{
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.messages{
  flex:1;
  overflow:auto;
  padding: 24px 22px 10px;
}

/* Chat links: force readable yellow inside actual bubble DOM structure */
.bubble a,
.msg a {
  color: #fde047 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  word-break: break-all;
}

.bubble a:visited,
.msg a:visited {
  color: #fde047 !important;
}


/* Make links inside chat messages obvious and readable */
.message a {
  color: #6ee7ff;          /* bright cyan for dark background */
  font-weight: 600;
  text-decoration: underline;
  word-break: break-all;   /* prevents overflow on long URLs */
}

.message a:visited {
  color: #6ee7ff;
}


.msg{
  display:flex;
  margin: 14px 0;
}
.msg.user{ justify-content:flex-end; }
.msg.assistant{ justify-content:flex-start; }

.bubble{
  max-width: min(760px, 82%);
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  line-height: 1.45;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}

.msg.user .bubble{
  background: var(--grad1);
  color: #071017;
  border: 0;
  box-shadow: 0 14px 50px rgba(110,231,255,.15);
  font-weight: 650;
}

.typing{
  padding: 0 22px 10px;
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--muted);
}
.hidden{ display:none !important; }
.dot{
  width: 7px;
  height: 7px;
  background: rgba(110,231,255,.75);
  border-radius: 50%;
  display:inline-block;
  animation: bounce 1s infinite;
}
.dot:nth-child(2){ animation-delay: .15s }
.dot:nth-child(3){ animation-delay: .30s }
@keyframes bounce{
  0%,80%,100%{ transform: translateY(0); opacity:.6 }
  40%{ transform: translateY(-6px); opacity:1 }
}
.typing-text{ font-size: 13px; opacity: .85; }

.composer{
  padding: 14px 16px 18px;
  display:flex;
  gap: 12px;
  align-items:flex-end; /* so textarea can grow upward while buttons stay aligned */
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(5,8,20,.45);
  backdrop-filter: blur(14px);
}

.pending{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap: wrap;
}

.chip{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  font-size: 13px;
  line-height: 1.1;
  max-width: 320px;
}

.chip .chip-name{
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}

.chip .chip-x{
  border: 0;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.90);
  width: 22px;
  height: 22px;
  border-radius: 10px;
  cursor: pointer;
  display:grid;
  place-items:center;
  font-weight: 900;
}

.attachments{
  margin-top: 10px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.att{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  overflow: hidden;
}

.att-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 10px 12px;
  gap: 10px;
}

.att-head a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-weight: 750;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.att-meta{
  color: rgba(255,255,255,.65);
  font-size: 12px;
  white-space: nowrap;
}

.att-img{
  display:block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  background: rgba(0,0,0,.20);
}

.att-pdf{
  width: 100%;
  height: 420px;
  border: 0;
  display:block;
  background: rgba(0,0,0,.20);
}

/* ✅ video attachment preview (minimal) */
.att-video{
  width: 100%;
  max-height: 420px;
  background: rgba(0,0,0,.22);
  display:block;
}

.att-note{
  padding: 10px 12px 12px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
  border-top: 1px solid rgba(255,255,255,.10);
}

.prompt{
  flex:1;
  min-height: 50px;
  max-height: 160px;   /* stops it from taking over the screen */
  border-radius: 16px;
  padding: 12px 16px;  /* vertical padding so multiline looks good */
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  color: #fff;
  outline: none;
  font-size: 15px;
  line-height: 20px;

  resize: none;        /* user shouldn't drag-resize */
  overflow-y: hidden;  /* JS will switch to auto when needed */
  white-space: pre-wrap;
  word-wrap: break-word;
}
.prompt::placeholder{ color: rgba(255,255,255,.70); }

.btn{
  border:0;
  cursor:pointer;
  border-radius: 16px;
  padding: 12px 16px;
  font-weight: 800;
  color: #061018;
}
.btn-primary{
  background: var(--grad1);
  box-shadow: 0 14px 50px rgba(110,231,255,.12);
}
.btn-send{
  background: var(--grad1);
  min-width: 84px;
  box-shadow: 0 14px 50px rgba(110,231,255,.14);
}

.btn-icon{
  width: 50px;
  height: 50px;
  border-radius: 16px;
  border: 0;
  background: var(--grad1);
  color: #061018;
  font-size: 20px;
  font-weight: 900;
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow: 0 14px 50px rgba(110,231,255,.14);
}

/* ✅ hamburger button polish */
.menu-btn{
  display:none;
  position: relative;
}

/* hamburger glyph */
.hamburger{
  width: 18px;
  height: 2px;
  background: #061018;
  position: relative;
  border-radius: 2px;
}
.hamburger::before,
.hamburger::after{
  content:"";
  position:absolute;
  left:0;
  width: 18px;
  height: 2px;
  background:#061018;
  border-radius:2px;
}
.hamburger::before{ top: -6px; }
.hamburger::after{ top: 6px; }

/* ✅ Backdrop overlay */
.backdrop{
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .18s ease;
}
.backdrop.show{ opacity: 1; }

/* ✅ assistant link previews (minimal, matches existing glass cards) */
.link-previews{
  margin-top: 10px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.link-card{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  overflow: hidden;
}

.link-thumb{
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  display:block;
  background: rgba(0,0,0,.20);
}

.link-meta{
  padding: 10px 12px 12px;
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.link-title{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
}

.link-desc{
  color: rgba(255,255,255,.70);
  font-size: 12px;
  line-height: 1.35;
}

.link-row{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* YouTube embed */
.yt-embed{
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display:block;
  background: rgba(0,0,0,.25);
}

/* MOBILE drawer + premium layout */
@media (max-width: 980px){
  .menu-btn{ display:grid; }

  .sidebar{
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 50;

    background: rgba(5,8,20,.98);
    backdrop-filter: blur(18px);
    border-right: 1px solid rgba(255,255,255,.10);
    box-shadow: 30px 0 90px rgba(0,0,0,.70);

    transform: translateX(-105%);
    transition: transform .22s ease;
    width: min(340px, 86vw);
  }
  .sidebar.open{ transform: translateX(0); }

  .messages{ padding: 18px 14px 10px; }

  /* ✅ Mobile attachments chips ABOVE input, full width */
  .composer{
    flex-wrap: wrap;
    align-items: stretch;
    padding: 12px 12px 14px;
  }
  .pending{
    order: 0;
    width: 100%;
    margin-bottom: 6px;
  }
  #attachBtn{ order: 1; }
  .prompt{ order: 2; flex: 1 1 auto; min-width: 0; }
  #sendBtn{ order: 3; }

  /* keep attachment previews from taking over */
  .att-img{ max-height: 42vh; }
  .att-pdf{ height: 40vh; }
  .att-video{ max-height: 40vh; }
  .link-thumb{ max-height: 32vh; }
}



/* chat links = yellow (bubble/msg are actual classes) */
.bubble a,
.msg a {
  color: #fde047 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  word-break: break-all;
}

.bubble a:visited,
.msg a:visited {
  color: #fde047 !important;
}