/* ── Save template modal ── */
#save-tpl-overlay { position: fixed; inset: 0; background: rgba(30,32,34,.45); z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 20px; }
#save-tpl-overlay.hidden { display: none; }
#save-tpl-box { background: var(--ps-surface); border: 1.5px solid var(--ps-border); border-radius: var(--ps-radius); padding: 24px 28px; width: 100%; max-width: 380px; box-shadow: 0 24px 64px rgba(30,32,34,.2); }
#save-tpl-title { font-size: 15px; font-weight: 700; color: var(--ps-text-primary); margin-bottom: 16px; letter-spacing: -.2px; }
#save-tpl-box input { width: 100%; border: 1.5px solid var(--ps-border); border-radius: var(--ps-radius-sm); padding: 8px 12px; font-family: var(--display); font-size: 13px; color: var(--ps-text-primary); background: var(--ps-off-white); outline: none; transition: border-color .15s; margin-bottom: 10px; display: block; }
#save-tpl-box input:focus { border-color: var(--ps-azul); }
#save-tpl-btns-new.hidden, #save-tpl-btns-update.hidden { display: none; }
.save-tpl-update-btns { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding-top: 16px; border-top: 1.5px solid var(--ps-border); }
.save-tpl-update-actions { display: flex; gap: 8px; }
.stpl-secondary { background: transparent; border: 1.5px solid var(--ps-border); color: var(--ps-text-secondary); font-family: var(--display); font-size: 13px; font-weight: 500; padding: 7px 16px; border-radius: var(--ps-radius-pill); cursor: pointer; transition: all .15s; }
.stpl-secondary:hover { border-color: var(--ps-azul); color: var(--ps-azul); }

/* ── Confirm modal ── */
#confirm-overlay { position: fixed; inset: 0; background: rgba(30,32,34,.45); z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 20px; }
#confirm-overlay.hidden { display: none; }
#confirm-box { background: var(--ps-surface); border: 1.5px solid var(--ps-border); border-radius: var(--ps-radius); padding: 24px 28px; width: 100%; max-width: 360px; box-shadow: 0 24px 64px rgba(30,32,34,.2); }
#confirm-title { font-size: 15px; font-weight: 700; color: var(--ps-text-primary); margin-bottom: 6px; letter-spacing: -.2px; }
#confirm-msg { font-size: 13px; color: var(--ps-text-secondary); line-height: 1.6; margin-bottom: 20px; }
#confirm-msg:empty { display: none; }
.confirm-btns { display: flex; justify-content: flex-end; gap: 8px; }
.confirm-cancel { background: transparent; border: 1.5px solid var(--ps-border); color: var(--ps-text-secondary); font-family: var(--display); font-size: 13px; font-weight: 500; padding: 7px 16px; border-radius: var(--ps-radius-pill); cursor: pointer; transition: all .15s; }
.confirm-cancel:hover { border-color: var(--ps-border-strong); color: var(--ps-text-primary); }
.confirm-ok { background: var(--ps-azul); color: white; border: none; font-family: var(--display); font-size: 13px; font-weight: 600; padding: 7px 18px; border-radius: var(--ps-radius-pill); cursor: pointer; transition: background .15s; }
.confirm-ok:hover { background: var(--ps-azul-dark); }

/* ── Toast ── */
#toast-container { position: fixed; bottom: 140px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 12px; border-radius: var(--ps-radius-sm); font-family: var(--display); font-size: 13px; font-weight: 500; box-shadow: var(--ps-shadow-lg); animation: toastIn .22s cubic-bezier(.34,1.56,.64,1); pointer-events: all; min-width: 220px; max-width: 340px; }
.toast.out { animation: toastOut .2s ease forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(20px) scale(.95); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 0; transform: translateX(20px) scale(.95); } }
.toast-success { background: var(--ps-verde-faint); border: 1.5px solid var(--ps-verde-light); color: var(--ps-verde-dark); }
.toast-error   { background: var(--ps-terracotta-faint); border: 1.5px solid var(--ps-terracotta-light); color: var(--ps-terracotta-dark); }
.toast-info    { background: var(--ps-azul-faint); border: 1.5px solid var(--ps-azul-light); color: var(--ps-azul-dark); }
.toast-icon { font-size: 15px; flex-shrink: 0; line-height: 1; }

/* External link confirmation toast */
.toast-external { background: var(--ps-surface); border: 1.5px solid var(--ps-border-strong); color: var(--ps-text-primary); align-items: flex-start; padding: 14px 16px; gap: 12px; max-width: 300px; }
.toast-ext-icon { font-size: 18px; flex-shrink: 0; color: var(--ps-azul); margin-top: 1px; }
.toast-ext-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.toast-ext-title { font-size: 13px; font-weight: 700; color: var(--ps-text-primary); }
.toast-ext-msg { font-size: 12px; color: var(--ps-text-muted); line-height: 1.45; }
.toast-ext-url { font-family: var(--mono); font-size: 11px; color: var(--ps-azul-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; margin: 4px 0 8px; }
.toast-ext-actions { display: flex; gap: 6px; }
.toast-ext-open { background: var(--ps-azul); color: white; border: none; border-radius: var(--ps-radius-xs); padding: 5px 14px; font-family: var(--display); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .12s; }
.toast-ext-open:hover { background: var(--ps-azul-dark); }
.toast-ext-cancel { background: transparent; color: var(--ps-text-muted); border: 1.5px solid var(--ps-border); border-radius: var(--ps-radius-xs); padding: 5px 12px; font-family: var(--display); font-size: 12px; font-weight: 500; cursor: pointer; transition: all .12s; }
.toast-ext-cancel:hover { border-color: var(--ps-border-strong); color: var(--ps-text-secondary); }
.toast-msg { flex: 1; }
.toast-close-btn { background: none; border: none; cursor: pointer; color: currentColor; opacity: .5; font-size: 16px; line-height: 1; padding: 0; transition: opacity .12s; flex-shrink: 0; }
.toast-close-btn:hover { opacity: 1; }

/* ── Pin / favourite button ── */
.pin-btn {
  background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--ps-text-muted); opacity: 0; transition: opacity .15s, color .15s;
  flex-shrink: 0; display: inline-flex; align-items: center; border-radius: var(--ps-radius-xs);
}
.pin-btn.pinned { opacity: 1 !important; color: var(--ps-warm); }
.pin-btn:hover  { color: var(--ps-warm); opacity: 1; background: var(--ps-warm-light); }

/* Show on parent hover */
.persona-item:hover .pin-btn,
.drawer-item:hover  .pin-btn { opacity: 1; }

/* Card-level pin — absolute top-right, always on top */
.card-pin { position: absolute; top: 8px; right: 8px; z-index: 1; padding: 5px; border-radius: var(--ps-radius-xs); }
.card-pin:hover { background: var(--ps-warm-light); }
.persona-card:hover .card-pin { opacity: 1; }

/* ── Chat history badge ── */
.hi-chat-badge { font-family: var(--mono); font-size: 10px; font-weight: 600; background: var(--ps-verde-faint); color: var(--ps-verde-dark); border-radius: 4px; padding: 2px 7px; flex-shrink: 0; }
.history-item--chat { border-color: var(--ps-verde-light) !important; }
.history-item--chat:hover { border-color: var(--ps-verde) !important; background: var(--ps-verde-faint) !important; }

/* ── Floating tooltip ── */
#tooltip { position: fixed; z-index: 9999; background: var(--ps-sidebar); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.85); font-family: var(--display); font-size: 12px; line-height: 1.5; padding: 7px 12px; border-radius: var(--ps-radius-sm); max-width: 200px; pointer-events: none; box-shadow: var(--ps-shadow-lg); display: none; word-wrap: break-word; }