/* Jürgen-Widget und Onboarding-Tour */

.zj-jg { position: fixed; right: 20px; bottom: 20px; z-index: 1080; font-family: var(--zj-font, Inter, sans-serif); }
.zj-jg-fab {
  display: flex; align-items: center; gap: .6rem; padding: .55rem 1rem .55rem .55rem; border: 1px solid rgba(91, 140, 255, .45);
  border-radius: 999px; background: rgba(10, 16, 30, .82); color: #e7ecf6; box-shadow: 0 12px 34px rgba(0, 0, 0, .45), 0 0 0 4px rgba(47, 107, 255, .08);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); cursor: pointer; font-weight: 600; transition: transform .15s;
}
.zj-jg-fab:hover { transform: translateY(-2px); }
.zj-jg.is-open .zj-jg-fab { display: none; }
.zj-jg-avatar {
  width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  background: linear-gradient(135deg, #6b97ff, #1f4fd6); color: #fff; font-weight: 800;
}
.zj-jg-panel {
  width: min(390px, calc(100vw - 24px)); height: min(600px, calc(100vh - 40px)); display: flex; flex-direction: column;
  background: rgba(9, 13, 24, .9); border: 1px solid rgba(148, 163, 184, .18); border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #e7ecf6;
}
.zj-jg-panel[hidden] { display: none; }
html[data-theme="light"] .zj-jg-panel { background: rgba(255, 255, 255, .95); color: #0b1736; border-color: rgba(15, 23, 42, .1); }
html[data-theme="light"] .zj-jg-fab { background: rgba(255, 255, 255, .92); color: #0b1736; }
.zj-jg-head { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; border-bottom: 1px solid rgba(148, 163, 184, .14); }
.zj-jg-head small { display: block; color: #8d99b0; font-size: .75rem; }
.zj-jg-head .flex-1 { flex: 1; min-width: 0; }
.zj-jg-icon { background: transparent; border: 0; color: inherit; opacity: .7; font-size: 1.2rem; padding: .25rem .4rem; border-radius: 8px; }
.zj-jg-icon:hover { opacity: 1; background: rgba(148, 163, 184, .12); }
.zj-jg-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.zj-jg-msg { max-width: 88%; padding: .6rem .85rem; border-radius: 14px; line-height: 1.5; font-size: .92rem; word-wrap: break-word; }
.zj-jg-msg ul { margin: .3rem 0 .3rem 1rem; padding: 0; }
.zj-jg-bot { align-self: flex-start; background: rgba(148, 163, 184, .1); border-top-left-radius: 4px; }
.zj-jg-me { align-self: flex-end; background: linear-gradient(135deg, #4d82ff, #2456e6); color: #fff; border-top-right-radius: 4px; }
.zj-jg-error { background: rgba(239, 68, 68, .14); color: #fca5a5; }
.zj-jg-offline { border: 1px dashed rgba(245, 158, 11, .5); }
.zj-jg-chips, .zj-jg-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.zj-jg-chip {
  display: inline-block; padding: .3rem .7rem; border-radius: 999px; border: 1px solid rgba(91, 140, 255, .4); background: rgba(47, 107, 255, .1);
  color: #9bb8ff; font-size: .8rem; text-decoration: none; cursor: pointer;
}
html[data-theme="light"] .zj-jg-chip { color: #1f4fd6; }
.zj-jg-chip:hover { background: rgba(47, 107, 255, .2); }
.zj-jg-sources { width: 100%; font-size: .75rem; color: #8d99b0; }
.zj-jg-form { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid rgba(148, 163, 184, .14); }
.zj-jg-form textarea {
  flex: 1; resize: none; border-radius: 12px; border: 1px solid rgba(148, 163, 184, .25); background: rgba(4, 6, 11, .5); color: inherit;
  padding: .55rem .75rem; font: inherit; font-size: .92rem; outline: none;
}
html[data-theme="light"] .zj-jg-form textarea { background: #fff; }
.zj-jg-form textarea:focus { border-color: rgba(47, 107, 255, .7); }
.zj-jg-send { border: 0; border-radius: 12px; width: 44px; background: linear-gradient(135deg, #4d82ff, #2456e6); color: #fff; font-size: 1.1rem; }
.zj-jg-note { margin: 0; padding: 0 .9rem .7rem; font-size: .7rem; color: #8d99b0; }
.zj-jg-typing i { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: currentColor; opacity: .4; animation: zj-dot 1s infinite; }
.zj-jg-typing i:nth-child(2) { animation-delay: .15s; }
.zj-jg-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes zj-dot { 50% { opacity: 1; transform: translateY(-2px); } }

@media (max-width: 575.98px) {
  .zj-jg { right: 12px; bottom: 12px; }
  .zj-jg-fab-label { display: none; }
  .zj-jg-fab { padding: .45rem; }
}

/* Onboarding-Tour */
.zj-tour-backdrop { position: fixed; inset: 0; z-index: 1090; background: rgba(2, 4, 8, .55); }
.zj-tour-spot {
  position: fixed; z-index: 1091; border-radius: 14px; pointer-events: none; transition: all .25s ease;
  box-shadow: 0 0 0 4px rgba(91, 140, 255, .9), 0 0 0 9999px rgba(2, 4, 8, .55);
}
.zj-tour-card {
  position: fixed; z-index: 1092; width: min(360px, calc(100vw - 24px)); padding: 1.1rem 1.2rem; border-radius: 18px;
  background: rgba(10, 16, 30, .96); color: #e7ecf6; border: 1px solid rgba(91, 140, 255, .35); box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
html[data-theme="light"] .zj-tour-card { background: #fff; color: #0b1736; }
.zj-tour-card h6 { margin: 0 0 .35rem; font-weight: 700; color: inherit; }
.zj-tour-card p { margin: 0 0 .9rem; font-size: .92rem; line-height: 1.5; color: inherit; opacity: .85; }
.zj-tour-steps { font-size: .75rem; color: #8d99b0; }
.zj-tour-dots { display: flex; gap: 4px; margin-bottom: .75rem; }
.zj-tour-dots i { flex: 1; height: 3px; border-radius: 3px; background: rgba(148, 163, 184, .25); }
.zj-tour-dots i.on { background: #5b8cff; }

/* Dialoge (natives <dialog>) */
dialog.zj-dialog {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 40px); padding: 0; border-radius: 18px;
  border: 1px solid var(--zj-border-strong, rgba(148, 163, 184, .24)); background: var(--zj-surface-solid, #0c1220); color: var(--zj-text, #e7ecf6);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
dialog.zj-dialog::backdrop { background: rgba(2, 4, 8, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog.zj-dialog form, dialog.zj-dialog .zj-dialog-body { padding: 1.25rem 1.4rem; }
dialog.zj-dialog header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.4rem; border-bottom: 1px solid var(--zj-border, rgba(148, 163, 184, .14)); }
dialog.zj-dialog header h6 { margin: 0; font-weight: 700; }
dialog.zj-dialog footer { display: flex; justify-content: flex-end; gap: .5rem; padding: 0 1.4rem 1.25rem; }
.zj-dns-table input, .zj-dns-table select { min-width: 0; }
.zj-result { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: 12px; border: 1px solid var(--zj-border, rgba(148, 163, 184, .14)); margin-bottom: .5rem; }
.zj-result .flex-1 { flex: 1; min-width: 0; }