/* Chat V3 UI/UX Overhaul v1.0 */

/* === ERROR BANNER FIX === */
.gl-error-banner,.js-error-bar,[data-error-banner]{
  display:none!important
}

/* === MESSAGE AREA === */
#cv3m{
  padding:12px 16px 20px;
  gap:14px;
  scroll-behavior:smooth
}

/* === MESSAGE BUBBLES === */
.cb{
  padding:14px 18px;
  border-radius:18px;
  font-size:15px;
  line-height:1.65;
  max-width:82%;
  position:relative;
  animation:cv3FadeIn .3s ease
}
@keyframes cv3FadeIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* User Bubble */
.cb.u{
  background:linear-gradient(135deg,var(--primary),#6366f1);
  border-radius:18px 18px 6px 18px;
  box-shadow:0 2px 12px rgba(99,102,241,.25);
  font-size:15px
}

/* AI Bubble */
.cb.a{
  background:var(--bg-secondary,rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.06);
  border-radius:6px 18px 18px 18px;
  box-shadow:0 1px 8px rgba(0,0,0,.12)
}
.cb.a .an{
  gap:8px;
  font-size:12px;
  margin-bottom:8px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.04)
}
.cb.a .ct{
  font-size:15px;
  line-height:1.7
}
.cb.a .ct strong{
  color:var(--primary);
  font-weight:600
}
.cb.a .ct em{
  color:var(--primary);
  font-style:normal
}
.cb.a .ct p{margin:0 0 8px}
.cb.a .ct p:last-child{margin-bottom:0}
.cb.a .ct ul,.cb.a .ct ol{
  margin:6px 0;
  padding-left:20px
}
.cb.a .ct li{margin-bottom:4px}
.cb.a .ct code{
  background:rgba(255,255,255,.06);
  padding:2px 6px;
  border-radius:4px;
  font-size:13px
}
.cb.a .ct pre{
  background:rgba(0,0,0,.2);
  padding:12px;
  border-radius:10px;
  overflow-x:auto;
  font-size:13px;
  margin:8px 0
}

/* === QUICK REPLY BUTTONS === */
.cv3-qr{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px
}
.cv3-qr button{
  padding:10px 18px;
  border-radius:22px;
  border:1.5px solid rgba(99,102,241,.3);
  background:rgba(99,102,241,.06);
  color:var(--primary);
  cursor:pointer;
  font-size:13px;
  font-weight:500;
  transition:all .2s ease;
  line-height:1.3;
  text-align:left;
  max-width:100%
}
.cv3-qr button:hover{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(99,102,241,.3)
}
.cv3-qr button:active{
  transform:translateY(0);
  box-shadow:0 2px 8px rgba(99,102,241,.2)
}

/* === AGENT TABS === */
.cv3-ag{
  padding:12px 16px 10px;
  gap:8px;
  border-bottom:1px solid var(--border)
}
.cv3-ag .ab{
  padding:8px 16px;
  border-radius:22px;
  font-size:13px;
  font-weight:500;
  transition:all .2s
}
.cv3-ag .ab.on{
  box-shadow:0 2px 12px rgba(99,102,241,.3)
}

/* === BAR (Pro + Delete) === */
.cv3-bar{
  padding:6px 16px 4px;
  border-bottom:1px solid rgba(255,255,255,.03)
}
.cv3-bar label{
  font-size:12px;
  gap:5px;
  opacity:.6;
  transition:opacity .2s
}
.cv3-bar label:hover{opacity:1}

/* === TYPING INDICATOR === */
.cv3-typ{
  padding:8px 16px;
  display:flex;
  align-items:center;
  gap:6px
}

/* === INPUT AREA === */
.cv3-in{
  padding:10px 14px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  gap:8px;
  background:var(--bg-card,var(--bg-primary));
  border-top:1px solid rgba(255,255,255,.06)
}
.cv3-in textarea{
  min-height:42px;
  padding:10px 16px;
  border-radius:22px;
  font-size:15px;
  border:1.5px solid rgba(255,255,255,.08);
  transition:border-color .2s,box-shadow .2s
}
.cv3-in textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(99,102,241,.1)
}
.cv3-in .bs{
  width:42px;
  height:42px;
  border-radius:50%;
  font-size:17px;
  box-shadow:0 2px 8px rgba(99,102,241,.3);
  transition:all .2s
}
.cv3-in .bs:hover:not(:disabled){
  transform:scale(1.05);
  box-shadow:0 4px 16px rgba(99,102,241,.4)
}
.cv3-in .bi{
  width:42px;
  height:42px
}

/* === WELCOME SCREEN === */
.cv3-wel{
  padding:60px 24px 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px
}
.cv3-wel .cv3-qr{
  margin-top:20px;
  justify-content:center;
  gap:10px
}
.cv3-wel .cv3-qr button{
  padding:12px 20px;
  font-size:14px;
  font-weight:500;
  background:rgba(99,102,241,.08);
  border-color:rgba(99,102,241,.2)
}

/* === IMAGE PREVIEW === */
#cv3ip{
  padding:6px 16px;
  border-top:1px solid rgba(255,255,255,.04)
}

/* === MOBILE === */
@media(max-width:640px){
  .cv3{height:calc(100dvh - 52px)}
  #cv3m{padding:10px 12px 16px;gap:12px}
  .cb{
    max-width:90%;
    padding:12px 14px;
    font-size:14px;
    border-radius:16px
  }
  .cb.u{border-radius:16px 16px 4px 16px}
  .cb.a{border-radius:4px 16px 16px 16px}
  .cb.a .ct{font-size:14px;line-height:1.6}
  .cv3-qr{gap:6px;margin-top:10px}
  .cv3-qr button{
    padding:9px 14px;
    font-size:12px;
    border-radius:18px
  }
  .cv3-ag{padding:10px 12px 8px;gap:6px}
  .cv3-ag .ab{padding:7px 14px;font-size:12px}
  .cv3-in{padding:8px 10px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .cv3-in textarea{
    min-height:40px;
    padding:9px 14px;
    font-size:14px
  }
  .cv3-in .bs,.cv3-in .bi{width:40px;height:40px}
  .cv3-wel{padding:40px 16px 24px}
  .cv3-wel .cv3-qr button{
    padding:10px 16px;
    font-size:13px
  }
}

@media(max-width:380px){
  .cb{max-width:92%;padding:10px 12px;font-size:13px}
  .cb.a .ct{font-size:13px}
  .cv3-qr button{padding:8px 12px;font-size:11px}
  .cv3-wel{padding:30px 12px 20px}
}