/* ══════════════════════════════════════════════════════
   F24nT AI Chat v12 — override / restore v10.9 design
   Loaded LAST — wins over any stale overwrites
   ══════════════════════════════════════════════════════ */

/* ── Welcome screen ── */
#wlc {
  min-height: calc(100vh - 245px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 48px 24px 135px !important;
  position: relative !important;
  overflow: hidden !important;
}
#wlc::before, #wlc::after {
  content: "" !important;
  position: absolute !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
#wlc::before {
  width: 360px; height: 360px; right: 4%; top: 8%;
  background: radial-gradient(circle, rgba(255,169,102,.14), transparent 68%);
  animation: c8Orb 8s ease-in-out infinite !important;
}
#wlc::after {
  width: 240px; height: 240px; left: 10%; bottom: 8%;
  background: radial-gradient(circle, rgba(239,106,24,.09), transparent 68%);
  animation: c8Orb 10s ease-in-out infinite reverse !important;
}
#wlogo {
  width: 78px !important;
  height: 78px !important;
  padding: 12px;
  border-radius: 25px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(239,106,24,.14);
  box-shadow: 0 24px 55px rgba(239,106,24,.15), inset 0 1px 0 #fff;
  animation: c8LogoHero 5s ease-in-out infinite !important;
}
#wh {
  font-size: clamp(34px, 4.2vw, 58px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.052em !important;
  margin-top: 22px !important;
  font-weight: 850 !important;
  background: linear-gradient(95deg, #17120f 8%, #4a2d1b 62%, #e85f14 105%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
#pills {
  max-width: 760px !important;
  margin-top: 28px !important;
  gap: 10px !important;
  justify-content: center !important;
  z-index: 1 !important;
}
.pill {
  border-radius: 16px !important;
  padding: 11px 15px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(73,43,27,.10) !important;
  color: #5c4437 !important;
  box-shadow: 0 7px 22px rgba(65,38,22,.045) !important;
  transition: .22s cubic-bezier(.2,.8,.2,1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.pill:hover {
  transform: translateY(-4px) rotate(-.7deg) !important;
  border-color: rgba(239,106,24,.26) !important;
  box-shadow: 0 14px 34px rgba(82,43,19,.10) !important;
  color: #d85a11 !important;
}

/* ── Messages ── */
.mg { animation: c8MsgIn .38s cubic-bezier(.18,.82,.24,1) both !important; }
.ma {
  border-radius: 25px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(73,43,27,.085) !important;
  box-shadow: 0 18px 50px rgba(59,34,20,.055) !important;
  padding: 20px 22px !important;
  backdrop-filter: blur(15px) !important;
}
.mu-b {
  border-radius: 22px 22px 7px 22px !important;
  background: linear-gradient(145deg, #ffe5cc, #fff1e3) !important;
  border: 1px solid rgba(239,106,24,.13) !important;
  box-shadow: 0 14px 38px rgba(87,45,18,.065) !important;
}

/* ── Top bar ── */
#tb {
  height: 72px !important;
  margin: 10px 14px 0 !important;
  border: 1px solid rgba(var(--br1), .5) !important;
  border-radius: 21px !important;
  background: rgba(255,250,245,.78) !important;
  backdrop-filter: blur(26px) saturate(1.25) !important;
  box-shadow: 0 12px 38px rgba(61,36,22,.06) !important;
  padding: 0 14px !important;
}
[data-theme="dark"] #tb {
  background: rgba(22,20,17,.82) !important;
  border-color: rgba(55,50,44,.5) !important;
}

/* ── Sidebar ── */
#sb {
  background: rgb(var(--sb)) !important;
  border-right: 1px solid rgba(var(--br1), .5) !important;
}

/* ── Composer ── */
#ibox {
  border-radius: 30px !important;
  background: rgba(255,253,250,.91) !important;
  border: 1px solid rgba(79,47,28,.12) !important;
  box-shadow: 0 28px 80px rgba(70,38,18,.14), inset 0 1px 0 #fff !important;
  backdrop-filter: blur(26px) saturate(1.24) !important;
  padding: 11px 12px 10px !important;
  transition: .28s cubic-bezier(.2,.8,.2,1) !important;
}
#ibox:focus-within {
  transform: translateY(-5px) !important;
  box-shadow: 0 35px 90px rgba(70,38,18,.18), 0 0 0 4px rgba(239,106,24,.07), inset 0 1px 0 #fff !important;
  border-color: rgba(239,106,24,.30) !important;
}
[data-theme="dark"] #ibox {
  background: rgba(28,26,22,.92) !important;
  border-color: rgba(55,50,44,.55) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* ── Send button ── */
#send:not(:disabled) {
  background: linear-gradient(145deg, #ff812d, #df560b 72%) !important;
  box-shadow: 0 10px 28px rgba(239,106,24,.34), inset 0 1px 0 rgba(255,255,255,.42) !important;
}
#send:not(:disabled):hover {
  transform: translateY(-3px) scale(1.045) !important;
  box-shadow: 0 16px 36px rgba(239,106,24,.39) !important;
}

/* ── Dark mode messages ── */
[data-theme="dark"] .ma {
  background: rgba(30,28,24,.88) !important;
  border-color: rgba(55,50,44,.5) !important;
}
[data-theme="dark"] .mu-b {
  background: rgba(42,38,32,.88) !important;
  border-color: rgba(70,60,48,.5) !important;
  color: rgb(220,216,206) !important;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  #tb { margin: 8px 8px 0 !important; height: 62px !important; border-radius: 18px !important; }
  #wlc { min-height: calc(100vh - 215px) !important; padding: 34px 16px 125px !important; }
  #wlogo { width: 66px !important; height: 66px !important; }
  #wh { font-size: clamp(32px, 9vw, 46px) !important; }
  .pill { padding: 10px 12px !important; font-size: 12px !important; }
}
@media (max-width: 640px) {
  #wlc { justify-content: flex-start !important; padding-top: 11vh !important; }
  #pills { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; width: 100% !important; max-width: 390px !important; }
  .pill { justify-content: flex-start !important; text-align: left !important; }
  #msgs { padding: 18px 10px 180px !important; }
  .ma { padding: 16px !important; border-radius: 21px !important; }
}

@keyframes c8LogoHero {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-8px) rotate(2deg); }
}
@keyframes c8Orb {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(18px,-18px) scale(1.08); }
}
@keyframes c8MsgIn {
  from { opacity:0; transform:translateY(12px) scale(.988); }
  to   { opacity:1; transform:none; }
}