.cf-ai{
  position:fixed; right:22px; bottom:22px; z-index:70;
  font-family:var(--sans,'Inter',system-ui,sans-serif);
}

.cf-ai-launch{
  position:relative; width:60px; height:60px; border-radius:50%;
  border:1px solid rgba(236,212,154,.35); cursor:pointer;
  background:radial-gradient(120% 120% at 30% 25%, #d8b878 0%, #b08552 55%, #8a6338 100%);
  color:#151107; display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
}
.cf-ai-launch:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 16px 40px rgba(0,0,0,.55); }
.cf-ai-launch svg{ width:26px; height:26px; grid-area:1/1; transition:opacity .25s, transform .25s; }
.cf-ai-ico-close{ opacity:0; transform:rotate(-45deg) scale(.6); }
.cf-ai.open .cf-ai-ico-open{ opacity:0; transform:rotate(45deg) scale(.6); }
.cf-ai.open .cf-ai-ico-close{ opacity:1; transform:none; }

.cf-ai-pulse{
  position:absolute; inset:-4px; border-radius:50%;
  border:1px solid rgba(216,184,120,.5); opacity:0;
  animation:cfaiPulse 2.8s ease-out infinite;
}
.cf-ai.open .cf-ai-pulse{ display:none; }
@keyframes cfaiPulse{
  0%{ opacity:.7; transform:scale(1); }
  70%{ opacity:0; transform:scale(1.5); }
  100%{ opacity:0; transform:scale(1.5); }
}
@media(prefers-reduced-motion:reduce){ .cf-ai-pulse{ animation:none; } }

.cf-ai-panel{
  position:absolute; right:0; bottom:74px;
  width:min(374px, calc(100vw - 32px)); height:min(560px, 72vh);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg-2,#1a1a1a); color:var(--ivory,#f3eee3);
  border:1px solid var(--line,rgba(216,184,120,.16)); border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  transform-origin:bottom right; transform:translateY(14px) scale(.96); opacity:0;
  transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .28s;
}
.cf-ai-panel[hidden]{ display:none; }
.cf-ai.open .cf-ai-panel{ transform:none; opacity:1; }

.cf-ai-head{
  display:flex; align-items:center; gap:11px; padding:15px 16px;
  border-bottom:1px solid var(--line,rgba(216,184,120,.16));
  background:linear-gradient(180deg, rgba(216,184,120,.09), rgba(216,184,120,0));
}
.cf-ai-badge{
  width:34px; height:34px; border-radius:9px; flex:0 0 auto; display:grid; place-items:center; padding:4px;
  background:#161310; border:1px solid rgba(216,184,120,.28);
}
.cf-ai-badge img{ width:100%; height:100%; object-fit:contain; display:block; }
.cf-ai-badge svg{ width:19px; height:19px; }
.cf-ai-titles{ display:flex; flex-direction:column; line-height:1.25; flex:1 1 auto; min-width:0; }
.cf-ai-titles strong{ font-family:var(--serif,'Cormorant Garamond',serif); font-size:18px; font-weight:600; color:var(--ivory,#f3eee3); }
.cf-ai-titles small{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted,#8b8478); }
.cf-ai-x{ background:none; border:0; color:var(--muted,#8b8478); cursor:pointer; padding:6px; border-radius:8px; transition:.2s; }
.cf-ai-x:hover{ color:var(--ivory,#f3eee3); background:rgba(255,255,255,.05); }
.cf-ai-x svg{ width:18px; height:18px; }

.cf-ai-log{ flex:1 1 auto; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; scroll-behavior:smooth; }
.cf-ai-log::-webkit-scrollbar{ width:8px; }
.cf-ai-log::-webkit-scrollbar-thumb{ background:rgba(216,184,120,.2); border-radius:8px; }

.cf-ai-msg{ max-width:84%; padding:10px 13px; border-radius:14px; font-size:14px; line-height:1.65; white-space:pre-wrap; word-wrap:break-word; }
.cf-ai-msg.bot{ align-self:flex-start; background:var(--bg-3,#202020); border:1px solid var(--line,rgba(216,184,120,.16)); border-bottom-left-radius:5px; }
.cf-ai-msg.user{ align-self:flex-end; background:linear-gradient(180deg, rgba(216,184,120,.2), rgba(176,133,82,.16)); border:1px solid rgba(216,184,120,.28); color:var(--ivory,#f3eee3); border-bottom-right-radius:5px; }
html[dir="rtl"] .cf-ai-msg.bot{ border-bottom-left-radius:14px; border-bottom-right-radius:5px; }
html[dir="rtl"] .cf-ai-msg.user{ border-bottom-right-radius:14px; border-bottom-left-radius:5px; }

.cf-ai-typing{ display:inline-flex; gap:4px; align-items:center; padding:4px 2px; }
.cf-ai-typing i{ width:6px; height:6px; border-radius:50%; background:var(--gold,#d8b878); opacity:.5; animation:cfaiDot 1.2s infinite ease-in-out; }
.cf-ai-typing i:nth-child(2){ animation-delay:.2s; }
.cf-ai-typing i:nth-child(3){ animation-delay:.4s; }
@keyframes cfaiDot{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }

.cf-ai-sugg{ display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 12px; }
.cf-ai-sugg.hide{ display:none; }
.cf-ai-chip{
  font-family:inherit; font-size:12.5px; color:var(--ivory-soft,#cdc6b8); cursor:pointer;
  background:rgba(216,184,120,.06); border:1px solid var(--line,rgba(216,184,120,.16));
  border-radius:20px; padding:7px 13px; transition:.2s;
}
.cf-ai-chip:hover{ background:rgba(216,184,120,.14); color:var(--ivory,#f3eee3); border-color:rgba(216,184,120,.4); }

.cf-ai-form{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-top:1px solid var(--line,rgba(216,184,120,.16)); }
.cf-ai-input{
  flex:1 1 auto; min-width:0; background:var(--bg,#111); color:var(--ivory,#f3eee3);
  border:1px solid var(--line,rgba(216,184,120,.16)); border-radius:22px; padding:11px 15px;
  font-family:inherit; font-size:14px; outline:none; transition:border-color .2s;
}
.cf-ai-input::placeholder{ color:var(--muted,#8b8478); }
.cf-ai-input:focus{ border-color:rgba(216,184,120,.5); }
.cf-ai-send{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%; cursor:pointer; border:0;
  background:radial-gradient(120% 120% at 30% 25%, #d8b878, #b08552); color:#151107;
  display:grid; place-items:center; transition:.2s;
}
.cf-ai-send:hover{ transform:scale(1.06); }
.cf-ai-send:disabled{ opacity:.45; cursor:default; transform:none; }
.cf-ai-send svg{ width:19px; height:19px; }
html[dir="rtl"] .cf-ai-send svg{ transform:scaleX(-1); }

.cf-ai-foot{ margin:0; padding:0 16px 12px; font-size:11px; color:var(--muted,#8b8478); text-align:center; }

@media(max-width:520px){
  .cf-ai{ right:16px; bottom:16px; }
  .cf-ai-panel{ width:calc(100vw - 24px); height:70vh; bottom:72px; right:-4px; }
}