/* Ciri AI — Siri-style top pill */
#ciri-trigger{position:fixed;top:0;left:0;width:100%;height:40px;z-index:calc(var(--z-ciri) + 5);cursor:pointer;}

#ciri-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;pointer-events:none;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;z-index:var(--z-ciri);display:none;}
body.ciri-active #ciri-backdrop{opacity:1;pointer-events:all;visibility:visible;display:block;}

#ciri-window{position:fixed;top:14px;left:50%;transform:translate(-50%,-120%) scale(.96);width:520px;max-width:92vw;background:rgba(15,15,15,.96);border:1px solid #333;border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);opacity:0;pointer-events:none;visibility:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s ease,width .45s cubic-bezier(.2,.8,.2,1),visibility .45s;z-index:calc(var(--z-ciri) + 10);display:none;flex-direction:column;padding:14px 18px;box-sizing:border-box;overflow:hidden;color:#fff;max-height:80vh;}
body.ciri-peek #ciri-window{opacity:1;pointer-events:all;visibility:visible;transform:translate(-50%,0) scale(1);display:flex;}
body.ciri-active #ciri-window{opacity:1;pointer-events:all;visibility:visible;transform:translate(-50%,0) scale(1);width:720px;display:flex;}
body.ciri-peek:not(.ciri-active) #ciri-window{padding:8px 14px;border-radius:24px;}

#ciri-header{display:flex;align-items:center;gap:12px;flex-shrink:0;cursor:text;}
#ciri-dot{width:10px;height:10px;border-radius:50%;background:#4caf50;box-shadow:0 0 12px #4caf50;flex-shrink:0;transition:all .3s;}
#ciri-dot.thinking{background:#ffd54f;box-shadow:0 0 16px #ffd54f;animation:ciriPulse 1s infinite;}
#ciri-dot.error{background:#ff4444;box-shadow:0 0 12px #ff4444;}
#ciri-dot.ready{background:#4caf50;box-shadow:0 0 12px #4caf50;}
@keyframes ciriPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}

#ciri-label{font-family:var(--font-header);font-size:12px;color:#aaa;letter-spacing:2px;flex-shrink:0;}
#ciri-input{flex:1;background:transparent;border:none;color:#fff;font-size:15px;font-family:var(--font-main);font-weight:600;padding:6px 8px;outline:none;min-width:0;}
#ciri-input::placeholder{color:#666;font-weight:500;}
#ciri-hint{font-size:11px;color:#555;flex-shrink:0;letter-spacing:.5px;}
body.ciri-active #ciri-hint{display:none;}

#ciri-clear{background:none;border:none;color:#666;cursor:pointer;font-size:12px;padding:6px 8px;border-radius:6px;transition:.15s;flex-shrink:0;}
#ciri-clear:hover{background:#222;color:#fff;}
body:not(.ciri-active) #ciri-clear{display:none;}

/* ---------- CIRI ATTACHMENTS ---------- */
#ciri-attach-btn{
  background:none;border:none;color:#666;cursor:pointer;
  font-size:13px;padding:6px 8px;border-radius:6px;
  transition:.15s;flex-shrink:0;
}
#ciri-attach-btn:hover{background:#222;color:#fff;}

#ciri-attachments{
  display:none;
  flex-wrap:wrap;
  gap:8px;
  padding:10px 4px 4px 4px;
  margin-top:8px;
  border-top:1px solid #222;
}
#ciri-attachments.has-items{display:flex;}

.ciri-attachment{
  position:relative;
  width:70px;
  height:70px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid #333;
  background:#111;
  flex-shrink:0;
  animation:ciriAttachPop .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes ciriAttachPop{
  from{opacity:0;transform:scale(.85);}
  to{opacity:1;transform:scale(1);}
}
.ciri-attachment img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.ciri-attachment-remove{
  position:absolute;top:2px;right:2px;
  width:18px;height:18px;
  border-radius:50%;
  background:rgba(0,0,0,.75);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  font-size:9px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:.15s;
}
.ciri-attachment-remove:hover{background:#ff4444;border-color:#ff4444;}

body.ciri-drag-over #ciri-window{
  border-color:#4fc3f7;
  box-shadow:0 30px 80px rgba(0,0,0,.9), inset 0 0 0 1px rgba(79,195,247,.3);
}

#ciri-history{display:none;flex-direction:column;gap:16px;overflow-y:auto;overflow-x:hidden;max-height:55vh;padding:16px 6px 4px 6px;margin-top:8px;border-top:1px solid #222;}
body.ciri-active #ciri-history{display:flex;}
#ciri-history::-webkit-scrollbar{width:5px;}
#ciri-history::-webkit-scrollbar-thumb{background:#444;border-radius:10px;}

.ciri-msg{max-width:88%;padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.55;word-wrap:break-word;font-weight:500;animation:ciriSlideUp .35s cubic-bezier(.2,.8,.2,1);}
.ciri-msg.user{background:#2b65f6;color:#fff;align-self:flex-end;border-bottom-right-radius:4px;}
.ciri-msg.ai{background:#1a1a1a;color:#e0e0e0;align-self:flex-start;border:1px solid #2a2a2a;border-bottom-left-radius:4px;}
.ciri-msg.ai pre{background:#0a0a0a;padding:10px;border-radius:8px;overflow-x:auto;border:1px solid #222;margin:6px 0;}
.ciri-msg.ai code{font-family:monospace;font-size:13px;color:#ccc;}
.ciri-msg.error{background:#3a1a1a;color:#ff9f9f;border:1px solid #552222;align-self:flex-start;}
@keyframes ciriSlideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.ciri-copy-btn{background:none;border:none;color:#666;cursor:pointer;font-size:11px;padding:4px 8px;border-radius:6px;margin-top:6px;display:inline-flex;align-items:center;gap:5px;transition:.15s;font-family:inherit;font-weight:600;letter-spacing:.3px;}
.ciri-copy-btn:hover{background:#222;color:#fff;}
.ciri-copy-btn.copied{color:#4caf50;}

#ciri-thinking{display:none;align-items:center;gap:8px;color:#888;font-size:13px;padding:8px 16px;font-weight:600;}
#ciri-thinking.active{display:flex;}
#ciri-thinking .dots{display:inline-flex;gap:3px;}
#ciri-thinking .dots span{width:5px;height:5px;border-radius:50%;background:#4fc3f7;animation:ciriDots 1.4s infinite;}
#ciri-thinking .dots span:nth-child(2){animation-delay:.2s;}
#ciri-thinking .dots span:nth-child(3){animation-delay:.4s;}
@keyframes ciriDots{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}

#ciri-key-prompt{display:none;flex-direction:column;gap:8px;padding:12px;background:#1a1a1a;border:1px solid #333;border-radius:12px;margin-top:8px;}
body.ciri-active #ciri-key-prompt:not(.hidden){display:flex;}
#ciri-key-prompt.hidden{display:none !important;}
#ciri-key-prompt p{font-size:12px;color:#aaa;margin:0;}
#ciri-key-input{background:#0d0d0d;border:1px solid #333;border-radius:8px;padding:8px 12px;color:#fff;font-family:monospace;font-size:12px;outline:none;width:100%;box-sizing:border-box;}
#ciri-key-input:focus{border-color:#4fc3f7;}
#ciri-key-save{background:#2b65f6;border:none;border-radius:8px;padding:8px;color:#fff;font-weight:700;cursor:pointer;font-size:12px;transition:.2s;}
#ciri-key-save:hover{background:#4a7fff;}

/* Legacy Ciri styles kept for compat (unused but harmless) */
.spinner{width:24px;height:24px;border:3px solid #333;border-top-color:#fff;border-radius:50%;animation:spin .8s cubic-bezier(.4,0,.2,1) infinite;margin-bottom:16px;}
@keyframes spin{to{transform:rotate(360deg)}}
.hidden-media{display:none;}
.hidden-input{display:none;}