/* ============================================================
 * 司南 Agent · 右下角浮窗 v2
 * 设计目标：小体量、真透明、有活人感
 * ============================================================ */

/* ========== FAB · 星芒 AI · 心跳呼吸 ========== */
.sinan-fab{
  position:fixed;right:24px;bottom:24px;z-index:9998;
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg, #0052D9 0%, #00A4FF 100%);
  color:#fff;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:
    0 8px 24px rgba(0, 82, 217, .35),
    0 2px 8px rgba(0, 82, 217, .18),
    inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .3s
}
.sinan-fab::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  background:radial-gradient(circle, rgba(0,164,255,.45) 0%, transparent 65%);
  opacity:.7;animation:sinanHalo 2.8s ease-in-out infinite;
  pointer-events:none;z-index:-1
}
@keyframes sinanHalo{
  0%,100%{transform:scale(.95);opacity:.4}
  50%{transform:scale(1.2);opacity:.85}
}
.sinan-fab:hover{transform:translateY(-3px) scale(1.08) rotate(-8deg);box-shadow:0 14px 36px rgba(0,82,217,.45)}
.sinan-fab:active{transform:translateY(-1px) scale(1.02)}
.sinan-fab.open{transform:scale(.92);opacity:.7}
.sinan-fab.hidden{display:none}

.sinan-fab .sinan-icon svg{
  width:26px;height:26px;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.5));
  animation:sinanTwinkle 3.5s ease-in-out infinite
}
@keyframes sinanTwinkle{
  0%,100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.1) rotate(15deg)}
}

.sinan-fab .sinan-badge{
  position:absolute;top:4px;right:4px;
  width:9px;height:9px;border-radius:50%;background:#F25F7A;border:2px solid #fff;
  display:none
}
.sinan-fab.has-badge .sinan-badge{display:block}

/* ========== 面板 · 真毛玻璃，小体量 ========== */
.sinan-panel{
  position:fixed;right:24px;bottom:92px;z-index:9999;
  width:340px;max-width:calc(100vw - 48px);
  height:500px;max-height:calc(100vh - 140px);
  background:color-mix(in srgb, var(--bg-canvas, #F6F8FC) 62%, transparent);
  backdrop-filter:blur(32px) saturate(1.8);
  -webkit-backdrop-filter:blur(32px) saturate(1.8);
  border:1px solid color-mix(in srgb, var(--border-strong, #DCE2ED) 55%, transparent);
  border-radius:22px;
  box-shadow:
    0 24px 60px rgba(11,16,32,.14),
    0 6px 20px rgba(11,16,32,.06),
    inset 0 1px 0 rgba(255,255,255,.5);
  display:flex;flex-direction:column;
  transform-origin:bottom right;
  opacity:0;transform:scale(.4) translateY(40px);pointer-events:none;
  transition:opacity .3s ease, transform .42s cubic-bezier(.34,1.56,.64,1);
  overflow:hidden
}
.sinan-panel.open{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}

[data-theme="dark"] .sinan-panel{
  background:color-mix(in srgb, #0B1020 58%, transparent);
  border-color:rgba(234,238,247,.1)
}

/* ========== 头部 · 极简同底色，只显身份 ========== */
.sinan-head{
  padding:14px 16px 12px;
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;
  border-bottom:1px solid color-mix(in srgb, var(--border-subtle,#e4e7ec) 40%, transparent);
  background:transparent
}
.sinan-avatar{
  width:34px;height:34px;border-radius:50%;
  background:url('brand/agents/sinan-avatar.png') no-repeat center/cover,
             linear-gradient(135deg, #0052D9, #00A4FF);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:#fff;position:relative;
  box-shadow:0 2px 8px rgba(0,82,217,.3)
}
.sinan-avatar::after{
  /* 在线心跳绿点 */
  content:"";position:absolute;right:-1px;bottom:-1px;
  width:10px;height:10px;border-radius:50%;
  background:#3DDC97;border:2px solid var(--bg-canvas,#fff);
  animation:sinanHeart 1.6s ease-in-out infinite
}
@keyframes sinanHeart{
  0%,100%{transform:scale(1)}
  15%{transform:scale(1.3)}
  30%{transform:scale(1)}
  45%{transform:scale(1.2)}
}
.sinan-avatar svg{width:18px;height:18px;display:none}
.sinan-head-name{flex:1;min-width:0}
.sinan-head-name .n{
  font-family:"Noto Serif SC",serif;font-size:15px;font-weight:700;
  color:var(--ysn-fg-primary);line-height:1.2
}
.sinan-head-name .s{
  font-size:11px;color:var(--ysn-fg-tertiary);margin-top:2px;
  letter-spacing:.02em;font-family:"Noto Sans SC",sans-serif
}
.sinan-close{
  width:28px;height:28px;border-radius:50%;border:0;
  background:transparent;color:var(--ysn-fg-tertiary);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .18s;flex-shrink:0
}
.sinan-close:hover{background:var(--ysn-bg-sunken);color:var(--ysn-fg-primary);transform:rotate(90deg)}

/* ========== 消息区 ========== */
.sinan-body{
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:10px;
  background:transparent
}
.sinan-body::-webkit-scrollbar{width:4px}
.sinan-body::-webkit-scrollbar-thumb{background:rgba(11,16,32,.1);border-radius:2px}
[data-theme="dark"] .sinan-body::-webkit-scrollbar-thumb{background:rgba(234,238,247,.12)}

/* 消息：去掉 avatar 列，气泡靠边 + 尾巴，更像 iMessage */
.sinan-msg{
  display:flex;max-width:85%;
  animation:sinanBubbleIn .4s cubic-bezier(.34,1.56,.64,1)
}
@keyframes sinanBubbleIn{
  from{opacity:0;transform:translateY(8px) scale(.92)}
  to{opacity:1;transform:none}
}
.sinan-msg.user{align-self:flex-end;justify-content:flex-end}
.sinan-msg.agent{align-self:flex-start}

.sinan-msg-bubble{
  padding:9px 13px;border-radius:18px;
  font-size:13.5px;line-height:1.72;
  white-space:pre-wrap;word-break:break-word;
  position:relative;max-width:100%
}
/* agent 气泡 · 左下尾巴 */
.sinan-msg.agent .sinan-msg-bubble{
  background:color-mix(in srgb, var(--bg-canvas, #fff) 90%, transparent);
  border:1px solid color-mix(in srgb, var(--border-subtle,#e4e7ec) 50%, transparent);
  color:var(--ysn-fg-primary);
  border-bottom-left-radius:5px;
  backdrop-filter:blur(6px)
}
[data-theme="dark"] .sinan-msg.agent .sinan-msg-bubble{
  background:rgba(26,35,68,.75);border-color:rgba(234,238,247,.08)
}
/* user 气泡 · 右下尾巴 */
.sinan-msg.user .sinan-msg-bubble{
  background:linear-gradient(135deg,#0052D9,#00A4FF);color:#fff;
  border-bottom-right-radius:5px;
  box-shadow:0 2px 8px rgba(0,82,217,.22)
}
.sinan-msg-bubble strong{font-weight:700}
.sinan-msg-bubble code{background:rgba(11,16,32,.08);padding:1px 5px;border-radius:4px;font-family:"JetBrains Mono",monospace;font-size:12px}
.sinan-msg.user .sinan-msg-bubble code{background:rgba(255,255,255,.18);color:#fff}
.sinan-msg-bubble a{color:var(--brand,#0052D9);text-decoration:underline}
.sinan-msg.user .sinan-msg-bubble a{color:#fff}

/* 反馈按钮 */
.sinan-msg-actions{
  display:flex;gap:4px;margin-top:4px;
  font-size:11px;opacity:0;transition:opacity .2s
}
.sinan-msg.agent:hover ~ .sinan-msg-actions,
.sinan-msg-actions:hover{opacity:1}
.sinan-msg-actions.persist{opacity:.5}
.sinan-msg-actions.persist:hover{opacity:1}
.sinan-vote{
  cursor:pointer;padding:2px 8px;border-radius:5px;transition:all .15s;
  color:var(--ysn-fg-tertiary);background:transparent
}
.sinan-vote:hover{background:color-mix(in srgb, var(--ysn-brand) 10%, transparent);color:var(--ysn-brand)}
.sinan-vote.voted{background:var(--ysn-brand);color:#fff}

/* typing 指示器 · 就是个气泡里三个跳点 */
.sinan-typing-bubble{
  display:inline-flex;gap:4px;padding:10px 14px;align-items:center;
  background:color-mix(in srgb, var(--bg-canvas, #fff) 90%, transparent);
  border:1px solid color-mix(in srgb, var(--border-subtle,#e4e7ec) 50%, transparent);
  border-radius:18px;border-bottom-left-radius:5px;
  backdrop-filter:blur(6px)
}
.sinan-typing-bubble span{
  width:6px;height:6px;border-radius:50%;background:var(--brand,#0052D9);opacity:.55;
  animation:sinanDot 1.4s infinite
}
.sinan-typing-bubble span:nth-child(2){animation-delay:.2s}
.sinan-typing-bubble span:nth-child(3){animation-delay:.4s}
@keyframes sinanDot{
  0%,60%,100%{transform:translateY(0);opacity:.4}
  30%{transform:translateY(-6px);opacity:1}
}
.sinan-typing-hint{
  font-size:11px;color:var(--ysn-fg-tertiary);margin-top:4px;margin-left:2px;
  font-style:italic;letter-spacing:.02em
}

/* 快捷建议 */
.sinan-suggests{
  display:flex;flex-wrap:wrap;gap:5px;margin-top:4px
}
.sinan-sug{
  font-size:11.5px;padding:5px 11px;border-radius:999px;
  background:color-mix(in srgb, var(--bg-canvas, #fff) 70%, transparent);
  border:1px solid color-mix(in srgb, var(--border-subtle,#e4e7ec) 50%, transparent);
  cursor:pointer;transition:all .18s;color:var(--ysn-fg-secondary);
  backdrop-filter:blur(4px)
}
.sinan-sug:hover{border-color:var(--ysn-brand);color:var(--ysn-brand);background:color-mix(in srgb, var(--ysn-brand) 8%, transparent);transform:translateY(-1px)}

/* 底部签名条（首次问候下的俏皮话） */
.sinan-signoff{
  font-size:10.5px;color:var(--ysn-fg-tertiary);
  margin-top:6px;padding-left:2px;
  font-style:italic;letter-spacing:.03em;opacity:.75
}

/* ========== 输入区 · 同底毛玻璃 ========== */
.sinan-foot{
  padding:10px 12px;
  background:color-mix(in srgb, var(--bg-canvas, #fff) 80%, transparent);
  border-top:1px solid color-mix(in srgb, var(--border-subtle,#e4e7ec) 40%, transparent);
  display:flex;flex-direction:column;gap:8px;flex-shrink:0;
  backdrop-filter:blur(16px)
}
.sinan-input-row{display:flex;gap:8px;align-items:flex-end}

/* 图片附件 chips · 用户点击选中或拖进来的图 · 发送前展示 */
.sinan-img-chips{display:none;gap:6px;flex-wrap:wrap}
.sinan-img-chip{
  position:relative;width:42px;height:42px;border-radius:8px;overflow:hidden;
  border:1px solid color-mix(in srgb, var(--border-subtle,#e4e7ec) 60%, transparent);
  background:var(--bg-sunken, #eef1f7);flex-shrink:0
}
.sinan-img-chip img{width:100%;height:100%;object-fit:cover;display:block}
.sinan-img-x{
  position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;
  border:0;background:rgba(0,0,0,.72);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;line-height:1;padding:0;
  box-shadow:0 2px 6px rgba(0,0,0,.28)
}
.sinan-img-x:hover{background:var(--data-neg,#C63A4E)}

/* 附件按钮 */
.sinan-attach{
  width:32px;height:36px;border-radius:10px;border:0;
  background:color-mix(in srgb, var(--bg-canvas,#fff) 55%, transparent);
  color:var(--ysn-fg-secondary);cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .15s, color .15s
}
.sinan-attach:hover{background:color-mix(in srgb, var(--brand,#0052D9) 8%, transparent);color:var(--brand,#0052D9)}

/* 流式态 · 收到首 token 前展示打点 · 首 token 到来后切成普通气泡
 * 不再使用 stream-caret / stage-chip（闪烁不美 · 模型名用户不关心）*/
.sinan-msg.agent.streaming .sinan-msg-bubble:not(.sinan-typing-bubble){
  opacity:.98
}

/* 图片消息预览 · 用户发出时显示自己附的图 */
.sinan-img-preview{
  display:flex;gap:6px;padding:6px 14px 4px;flex-wrap:wrap;justify-content:flex-end
}
.sinan-img-preview img{
  width:60px;height:60px;object-fit:cover;border-radius:8px;
  border:1px solid color-mix(in srgb, var(--border-subtle,#e4e7ec) 60%, transparent)
}

/* 拖拽覆盖层 */
.sinan-panel.drag-over{outline:2px dashed var(--brand,#0052D9);outline-offset:-8px}
.sinan-panel.drag-over::after{
  content:"拖进来即附为图片";position:absolute;inset:0;z-index:10;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--brand,#0052D9) 8%, transparent);
  color:var(--brand,#0052D9);font-weight:600;pointer-events:none
}
.sinan-input{
  flex:1;min-height:36px;max-height:110px;
  padding:8px 12px;font-size:13px;line-height:1.5;
  border:1px solid color-mix(in srgb, var(--border-subtle,#e4e7ec) 60%, transparent);
  border-radius:12px;
  background:color-mix(in srgb, var(--bg-canvas, #fff) 55%, transparent);
  color:var(--ysn-fg-primary);
  font-family:inherit;resize:none;outline:none;transition:all .15s
}
.sinan-input:focus{border-color:var(--ysn-brand);background:var(--ysn-bg-canvas);box-shadow:0 0 0 3px color-mix(in srgb, var(--ysn-brand) 10%, transparent)}
.sinan-input::placeholder{color:var(--ysn-fg-tertiary);font-style:italic}

.sinan-send{
  width:36px;height:36px;border-radius:10px;border:0;
  background:linear-gradient(135deg,#0052D9,#00A4FF);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s,box-shadow .15s, opacity .15s;flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,82,217,.25)
}
.sinan-send:hover:not(:disabled){transform:translateY(-1px) rotate(-8deg);box-shadow:0 4px 12px rgba(0,82,217,.35)}
.sinan-send:disabled{opacity:.4;cursor:not-allowed}
.sinan-send svg{width:14px;height:14px}

/* 打印 / 屏蔽 */
@media print{.sinan-fab,.sinan-panel{display:none !important}}
body[data-no-agent="1"] .sinan-fab,
body[data-no-agent="1"] .sinan-panel{display:none !important}

/* ============================================================
 * propose ⌘J 选字召唤浮层（F6 · 2026-04-25）
 * ============================================================ */
.sinan-propose-pop{
  position:absolute;z-index:10000;
  min-width:240px;max-width:340px;
  background:color-mix(in srgb, var(--bg-canvas,#fff) 72%, transparent);
  backdrop-filter:blur(28px) saturate(1.6);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid color-mix(in srgb, var(--border-strong,#dce2ed) 55%, transparent);
  border-radius:14px;
  box-shadow:
    0 18px 48px rgba(11,16,32,.18),
    0 4px 14px rgba(11,16,32,.06),
    inset 0 1px 0 rgba(255,255,255,.5);
  opacity:0;transform:translateY(-4px) scale(.96);pointer-events:none;visibility:hidden;
  transition:opacity .16s ease, transform .22s cubic-bezier(.34,1.56,.64,1)
}
.sinan-propose-pop.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;visibility:visible}

[data-theme="dark"] .sinan-propose-pop{
  background:color-mix(in srgb, #0B1020 72%, transparent);
  border-color:rgba(234,238,247,.12)
}

.sinan-propose-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px 6px;
  border-bottom:1px solid color-mix(in srgb, var(--border-subtle,#e4e7ec) 40%, transparent)
}
.sinan-propose-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;
  color:var(--brand,#0052D9);text-transform:uppercase;font-weight:700
}
.sinan-propose-x{
  width:20px;height:20px;border:0;background:transparent;color:var(--ysn-fg-tertiary);
  font-size:16px;line-height:1;cursor:pointer;border-radius:6px;
  display:flex;align-items:center;justify-content:center
}
.sinan-propose-x:hover{background:color-mix(in srgb, var(--ysn-fg-primary) 8%, transparent);color:var(--ysn-fg-primary)}

.sinan-propose-list{padding:6px;display:flex;flex-direction:column;gap:2px}
.sinan-propose-item{
  width:100%;text-align:left;padding:10px 12px;
  border:0;background:transparent;border-radius:8px;cursor:pointer;
  display:flex;flex-direction:column;gap:4px;
  transition:background .12s
}
.sinan-propose-item:hover,
.sinan-propose-item:focus-visible{
  background:color-mix(in srgb, var(--brand,#0052D9) 8%, transparent);outline:none
}
.sinan-propose-label{
  font-size:13px;font-weight:600;color:var(--ysn-fg-primary);
  font-family:'Noto Serif SC',serif;letter-spacing:-.005em
}
.sinan-propose-meta{
  display:flex;gap:8px;align-items:center;font-size:10px;
  font-family:'JetBrains Mono',monospace;letter-spacing:.06em
}
.sinan-propose-agent{
  padding:1px 6px;border-radius:4px;font-weight:600;
  background:color-mix(in srgb, var(--brand,#0052D9) 12%, transparent);
  color:var(--brand,#0052D9)
}
.sinan-propose-est{color:var(--ysn-fg-tertiary)}

.sinan-propose-foot{
  padding:6px 14px 8px;border-top:1px solid color-mix(in srgb, var(--border-subtle,#e4e7ec) 40%, transparent)
}
.sinan-propose-hint{
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ysn-fg-tertiary);letter-spacing:.06em
}

.sinan-propose-loading{
  display:flex;align-items:center;padding:16px 14px;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ysn-fg-tertiary);letter-spacing:.04em
}
.sinan-propose-dot{
  width:4px;height:4px;border-radius:50%;background:var(--brand,#0052D9);margin-right:3px;
  animation:sinanProposeBob 1.1s ease-in-out infinite
}
.sinan-propose-dot:nth-child(2){animation-delay:.15s}
.sinan-propose-dot:nth-child(3){animation-delay:.3s}
@keyframes sinanProposeBob{
  0%,80%,100%{transform:scale(.8);opacity:.5}
  40%{transform:scale(1.3);opacity:1}
}

.sinan-propose-err{
  padding:14px;font-size:12px;color:var(--data-neg,#C63A4E);line-height:1.6
}

body[data-no-agent="1"] .sinan-propose-pop{display:none !important}
@media print{.sinan-propose-pop{display:none !important}}


/* =========================================================
 * 2026-04-27 补4 · Delphi 派单卡片
 * 司南对话触发 deep_research intent · 派单成功后追加在气泡下方
 * ========================================================= */
.delphi-task-card {
  display: block;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--ysn-border-subtle);
  border-left: 3px solid var(--ysn-brand);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ysn-brand) 5%, var(--ysn-bg-canvas));
  text-decoration: none;
  color: var(--ysn-fg-primary);
  transition: all .15s;
  cursor: pointer;
}
.delphi-task-card:hover {
  background: color-mix(in srgb, var(--ysn-brand) 10%, var(--ysn-bg-canvas));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ysn-brand) 15%, transparent);
  transform: translateY(-1px);
}
.delphi-task-card .dtc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.delphi-task-card .dtc-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: .1em;
  padding: 2px 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ysn-brand) 12%, transparent);
  color: var(--ysn-brand);
  font-weight: 600;
}
.delphi-task-card .dtc-id {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--ysn-fg-tertiary);
}
.delphi-task-card .dtc-status {
  font-size: 13px;
  color: var(--ysn-fg-primary);
  margin-bottom: 4px;
}
.delphi-task-card .dtc-cta {
  font-size: 11px;
  color: var(--ysn-brand);
  font-weight: 500;
  letter-spacing: .02em;
}