/* ========================================
   V2 ENHANCEMENTS — Dynamic Effects & UX
   ======================================== */

/* === P0: Reduced Motion Accessibility === */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* === P0: Focus-Visible Keyboard Navigation === */
:focus-visible{
  outline:1.5px solid var(--md-primary);
  outline-offset:2px;
  border-radius:4px;
}
button:focus-visible,
.acl-quick:focus-visible,
.nav-rail-item:focus-visible,
.acl-chip:focus-visible{
  outline:1.5px solid var(--md-primary);
  outline-offset:2px;
  box-shadow:0 0 12px rgba(0,82,217,.18),0 0 4px rgba(0,82,217,.12);
}
:focus:not(:focus-visible){outline:none}
/* 输入框类元素：无论 focus 还是 focus-visible 都不要 outline，只靠 box-shadow glow */
input:focus,input:focus-visible,
textarea:focus,textarea:focus-visible,
select:focus,select:focus-visible,
[contenteditable]:focus,[contenteditable]:focus-visible,
.auth-input:focus,.auth-input:focus-visible,
.acl-wiz-input:focus,.acl-wiz-input:focus-visible,
.adclaw-input:focus,.adclaw-input:focus-visible,
.acl-modal-input2:focus,.acl-modal-input2:focus-visible,
.modal-input:focus,.modal-input:focus-visible,
.pref-drawer-input:focus,.pref-drawer-input:focus-visible,
.agent-search:focus,.agent-search:focus-visible,
.agent-form-input:focus,.agent-form-input:focus-visible,
.agent-form-select:focus,.agent-form-select:focus-visible,
.agent-form-textarea:focus,.agent-form-textarea:focus-visible,
.cap-search:focus,.cap-search:focus-visible{
  outline:none !important;
  outline-offset:0 !important;
}

/* === P1: Logo & Avatar — Hover-only scale (PNG icon) === */
.nav-rail-logo .adclaw-icon{transition:transform .3s var(--ease-spring)}
.nav-rail-logo:hover .adclaw-icon{transform:scale(1.1) rotate(-3deg)}

/* === P2: Timestamp hover-reveal === */
.acl-bubble-time{opacity:0;transition:opacity .25s ease;pointer-events:none}
.acl-bubble:hover .acl-bubble-time{opacity:1}
/* Keep timestamps visible for long content / daily reports */
.acl-bubble.acl-long .acl-bubble-time{opacity:1}

/* === P2: Message stagger animation on load === */
.acl-msg:nth-child(1){animation-delay:0s}
.acl-msg:nth-child(2){animation-delay:.08s}
.acl-msg:nth-child(3){animation-delay:.16s}
.acl-msg:nth-child(4){animation-delay:.24s}
.acl-msg:nth-child(5){animation-delay:.32s}

/* === P2: Scroll-to-bottom FAB === */
.scroll-to-bottom-fab{
  position:absolute;
  bottom:140px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  opacity:0;
  pointer-events:none;
  z-index:20;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--md-surface-3);
  background:var(--md-surface);
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .3s var(--ease-spring),transform .3s var(--ease-spring),box-shadow .25s var(--ease-spring),border-color .25s var(--ease-spring);
}
.scroll-to-bottom-fab.visible{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.scroll-to-bottom-fab:hover{
  box-shadow:0 6px 24px rgba(0,82,217,.2);
  border-color:var(--md-primary);
  transform:translateX(-50%) translateY(-2px);
}
.scroll-to-bottom-fab .material-symbols-outlined{
  font-size:22px;
  color:var(--md-on-surface-variant);
  transition:color .2s;
}
.scroll-to-bottom-fab:hover .material-symbols-outlined{color:var(--md-primary)}
.scroll-to-bottom-fab .fab-unread-count{
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:9px;
  background:var(--md-primary);
  color:#fff;
  font-size:10px;
  font-weight:700;
  display:none;
  align-items:center;
  justify-content:center;
}
[data-theme="dark"] .scroll-to-bottom-fab{
  background:var(--md-surface-2);
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}

/* === P3: Input focus — animated bottom border line === */
.adclaw-input-area{position:relative}
.adclaw-input-area::after{
  content:'';
  position:absolute;
  bottom:0;
  left:50%;
  width:0;
  height:2px;
  background:var(--brand-gradient);
  background-size:200% 200%;
  animation:gradientShift 4s ease infinite;
  transition:width .35s var(--ease-spring),left .35s var(--ease-spring);
  border-radius:1px;
}
.adclaw-input-area:focus-within::after{
  width:100%;
  left:0;
}

/* === P3: Send button — enhanced glow on hover === */
.adclaw-send:hover{
  box-shadow:0 0 20px rgba(0,82,217,.3),0 4px 16px rgba(0,82,217,.4);
}
[data-theme="dark"] .adclaw-send:hover{
  box-shadow:0 0 20px rgba(110,161,255,.25),0 4px 16px rgba(110,161,255,.35);
}

/* === P3: Send button — particle burst on click === */
@keyframes sendParticle1{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(-18px,-22px) scale(0)}}
@keyframes sendParticle2{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(16px,-26px) scale(0)}}
@keyframes sendParticle3{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(22px,-8px) scale(0)}}
@keyframes sendParticle4{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(-14px,-30px) scale(0)}}
@keyframes sendParticle5{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(10px,14px) scale(0)}}
.send-particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:10;
}
.send-particle{
  position:absolute;
  top:50%;left:50%;
  width:5px;height:5px;
  border-radius:50%;
  background:rgba(255,255,255,.85);
  opacity:0;
}
.send-particles.burst .send-particle:nth-child(1){animation:sendParticle1 .5s var(--ease-spring) forwards}
.send-particles.burst .send-particle:nth-child(2){animation:sendParticle2 .5s var(--ease-spring) .02s forwards}
.send-particles.burst .send-particle:nth-child(3){animation:sendParticle3 .5s var(--ease-spring) .04s forwards}
.send-particles.burst .send-particle:nth-child(4){animation:sendParticle4 .5s var(--ease-spring) .06s forwards}
.send-particles.burst .send-particle:nth-child(5){animation:sendParticle5 .5s var(--ease-spring) .08s forwards}

/* === P3: Quick action button hover glow === */
.acl-quick.acl-quick-accent:hover{
  box-shadow:0 0 16px rgba(0,82,217,.2),0 4px 12px rgba(0,82,217,.15);
}

/* === P1: Toast system v2 — multi-type + stacking + progress === */
.toast-container{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:9999;
  display:flex;
  flex-direction:column-reverse;
  gap:8px;
  pointer-events:none;
}
.toast-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  background:var(--md-on-surface);
  color:var(--md-surface);
  border-radius:12px;
  font-size:14px;
  font-weight:500;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  pointer-events:auto;
  opacity:0;
  transform:translateY(20px) scale(.95);
  animation:toastIn .35s var(--ease-spring) forwards;
  position:relative;
  overflow:hidden;
  min-width:280px;
  max-width:480px;
}
.toast-item.toast-exit{
  animation:toastOut .25s ease forwards;
}
.toast-item .material-symbols-outlined{font-size:20px;flex-shrink:0}
.toast-item.toast-success .material-symbols-outlined{color:var(--md-success)}
.toast-item.toast-error .material-symbols-outlined{color:var(--md-error)}
.toast-item.toast-warning .material-symbols-outlined{color:var(--md-warning)}
.toast-item.toast-info .material-symbols-outlined{color:var(--md-primary)}
.toast-item .toast-text{flex:1;line-height:1.4}
.toast-item .toast-close{
  width:24px;height:24px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.15);
  color:inherit;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .2s;
}
.toast-item .toast-close:hover{background:rgba(255,255,255,.25)}
.toast-item .toast-close .material-symbols-outlined{font-size:14px}
.toast-progress{
  position:absolute;
  bottom:0;left:0;
  height:3px;
  background:rgba(255,255,255,.3);
  border-radius:0 0 12px 12px;
  animation:toastProgress var(--toast-duration,3s) linear forwards;
}
@keyframes toastIn{0%{opacity:0;transform:translateY(20px) scale(.95)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(20px) scale(.9)}}
@keyframes toastProgress{0%{width:100%}100%{width:0%}}

/* Dark mode toast */
[data-theme="dark"] .toast-item{
  background:var(--md-surface-3);
  color:var(--md-on-surface);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}

/* === AI typing cursor blink for streaming effect === */
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}
.ai-cursor{
  display:inline-block;
  width:2px;
  height:1em;
  background:var(--md-primary);
  margin-left:2px;
  vertical-align:text-bottom;
  animation:cursorBlink .8s ease-in-out infinite;
}
[data-theme="dark"] .ai-cursor{background:var(--md-primary)}

/* Nav-rail lobster silhouette icon styles */
.nav-rail-item .nav-lobster-icon{color:var(--md-on-surface-variant);transition:color .2s}
.nav-rail-item.active .nav-lobster-icon{color:var(--md-on-primary-container)}
.nav-rail-item:hover .nav-lobster-icon{color:var(--md-on-surface)}

/* Lobster hover animation */
.lobster-hover:hover .claw-left{animation:clawSnapL .4s ease}
.lobster-hover:hover .claw-right{animation:clawSnapR .4s ease}
@keyframes clawSnapL{0%,100%{transform:rotate(0deg)}50%{transform:rotate(10deg)}}
@keyframes clawSnapR{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-10deg)}}