/* ============================================
   ZIZI - AI Fish Assistant Widget
   ============================================ */

#zizi-root {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9990;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: 'Nunito', 'DM Sans', sans-serif;
}

/* Speech bubble tooltip */
.zizi-tip {
  background: #fff;
  border: 2px solid #ffd166;
  border-radius: 16px;
  border-bottom-right-radius: 4px;
  padding: 9px 15px;
  font-size: .8rem;
  font-weight: 700;
  color: #1a2744;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  animation: zTipIn .5s ease 1.2s both;
  transition: opacity .4s;
  position: relative;
}
.zizi-tip::after {
  content: '';
  position: absolute;
  bottom: -10px; right: 18px;
  border: 5px solid transparent;
  border-top-color: #ffd166;
}
@keyframes zTipIn {
  from { opacity:0; transform:translateY(6px) scale(.95); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

/* Chat window */
.zizi-win {
  width: 340px;
  background: #fff;
  border-radius: 24px;
  border: 2.5px solid #ffd166;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  overflow: hidden;
  display: none;
  flex-direction: column;
  max-height: 520px;
  animation: zWinPop .3s cubic-bezier(.34,1.56,.64,1);
}
.zizi-win.open { display: flex; }
@keyframes zWinPop {
  from { opacity:0; transform:scale(.85) translateY(12px); }
  to { opacity:1; transform:scale(1) translateY(0); }
}

/* Header */
.zizi-hdr {
  background: linear-gradient(135deg, #2EC4B6, #0891b2);
  padding: .9rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.zizi-hdr::before {
  content:'';
  position:absolute; top:-30px; right:-30px;
  width:80px; height:80px;
  background: rgba(255,255,255,0.1);
  border-radius:50%;
}
.hdr-fish { width:40px; height:40px; flex-shrink:0; }
.hdr-info h3 { font-size:.9rem; font-weight:800; color:#fff; }
.hdr-info p { font-size:.68rem; color:rgba(255,255,255,.7); margin-top:1px; }
.hdr-online { display:flex; align-items:center; gap:4px; margin-top:2px; }
.hdr-dot { width:6px; height:6px; background:#86efac; border-radius:50%; animation:zPulse 2s infinite; }
@keyframes zPulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
.hdr-online span { font-size:.65rem; color:#86efac; font-weight:700; }
.zizi-x {
  margin-left:auto;
  background:rgba(255,255,255,.15); border:none;
  color:#fff; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:.9rem; transition:background .2s;
}
.zizi-x:hover { background:rgba(255,255,255,.3); }

/* Messages */
.zizi-msgs {
  flex:1; overflow-y:auto;
  padding:1rem; display:flex;
  flex-direction:column; gap:8px;
  background:#f8fafc;
  min-height: 200px;
  max-height: 300px;
}
.zizi-msgs::-webkit-scrollbar { width:3px; }
.zizi-msgs::-webkit-scrollbar-thumb { background:#e2e8f0; border-radius:2px; }

#zizi-root .msg {
  max-width:84%; padding:9px 13px;
  border-radius:16px; font-size:.83rem; line-height:1.55;
  animation:zMsgIn .2s ease;
}
@keyframes zMsgIn {
  from{opacity:0;transform:translateY(5px);}
  to{opacity:1;transform:translateY(0);}
}
#zizi-root .msg.bot {
  background:#fff; color:#1a2744;
  border:1.5px solid #e2e8f0;
  border-bottom-left-radius:4px;
  align-self:flex-start;
}
#zizi-root .msg.user {
  background: linear-gradient(135deg,#2EC4B6,#0891b2);
  color:#fff; border-bottom-right-radius:4px;
  align-self:flex-end;
}

/* Quick replies */
.qr-wrap {
  padding:.6rem 1rem .8rem;
  display:flex; flex-wrap:wrap; gap:6px;
  background:#f8fafc;
  border-top:1px solid #f1f5f9;
}
.qr {
  background:#fff; border:1.5px solid #2EC4B6;
  border-radius:20px; padding:4px 11px;
  font-size:.73rem; font-weight:700;
  font-family: inherit;
  color:#0891b2; cursor:pointer;
  transition:all .15s;
}
.qr:hover { background:#2EC4B6; color:#fff; }

/* Input */
.zizi-inp-row {
  display:flex; padding:.7rem .9rem;
  gap:7px; background:#fff;
  border-top:1.5px solid #f1f5f9;
}
.zizi-inp {
  flex:1; border:1.5px solid #e2e8f0;
  border-radius:20px; padding:8px 14px;
  font-size:.82rem; font-family:inherit;
  outline:none; color:#1a2744; background:#f8fafc;
  transition:border-color .2s;
}
.zizi-inp:focus { border-color:#2EC4B6; }
.zizi-send {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,#2EC4B6,#0891b2);
  border:none; cursor:pointer; display:flex;
  align-items:center; justify-content:center;
  flex-shrink:0; transition:transform .15s;
}
.zizi-send:hover { transform:scale(1.1); }
.zizi-send:active { transform:scale(.93); }

/* Fish button */
.zizi-btn {
  width:80px; height:80px;
  background:none; border:none;
  cursor:pointer; position:relative;
  display:flex; align-items:center; justify-content:center;
}

.bubble-wrap {
  position:absolute;
  bottom:60px; left:50%;
  transform:translateX(-50%);
  width:60px; height:80px;
  pointer-events:none;
  overflow:visible;
}
.bubble {
  position:absolute;
  border-radius:50%;
  background:rgba(46,196,182,.25);
  border:1.5px solid rgba(46,196,182,.5);
  opacity:0;
}

.fish-svg {
  width:72px; height:72px;
  filter:drop-shadow(0 6px 16px rgba(46,196,182,.35));
  transform-origin:center;
}

/* Fish animations */
@keyframes fishFloat {
  0%,100%{transform:translateY(0) rotate(-2deg);}
  50%{transform:translateY(-8px) rotate(2deg);}
}
@keyframes fishSpin {
  0%{transform:rotate(0deg) scale(1.05);}
  100%{transform:rotate(360deg) scale(1.05);}
}
@keyframes fishJump {
  0%{transform:translateY(0) rotate(0deg);}
  30%{transform:translateY(-22px) rotate(-15deg);}
  60%{transform:translateY(-14px) rotate(10deg);}
  80%{transform:translateY(-4px) rotate(-5deg);}
  100%{transform:translateY(0) rotate(0deg);}
}
@keyframes bubbleRise1 {
  0%{opacity:0;transform:translate(10px,0) scale(.5);}
  20%{opacity:.8;}
  100%{opacity:0;transform:translate(5px,-70px) scale(1);}
}
@keyframes bubbleRise2 {
  0%{opacity:0;transform:translate(25px,0) scale(.3);}
  20%{opacity:.7;}
  100%{opacity:0;transform:translate(30px,-60px) scale(.8);}
}
@keyframes bubbleRise3 {
  0%{opacity:0;transform:translate(15px,0) scale(.4);}
  20%{opacity:.6;}
  100%{opacity:0;transform:translate(8px,-55px) scale(.7);}
}

/* Mobile */
@media (max-width: 480px) {
  .zizi-win { width: calc(100vw - 2rem); right: 0; }
  #zizi-root { bottom: 1rem; right: 1rem; }
}