/* =========================================================
   Digi Idle — Wiki (painel flutuante)
   Lista + artigo · @container responsivo
   ========================================================= */

#dwikiRoot.dwiki-root {
  --dwiki-shell: #3a7ab8;
  --dwiki-shell-2: #1e4f86;
  --dwiki-shell-hi: #6eb6ef;
  --dwiki-cyan: #4fd6ff;
  --dwiki-text: #e8f4ff;
  --dwiki-muted: #7a9bb0;
  --dwiki-ok: #5dffb0;
  --dwiki-warn: #ffc14d;
  --dwiki-lcd: #071018;
  --dwiki-panel: #0a1520;
  --dwiki-card: #0c1824;
  --dwiki-font: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --dwiki-display: "Orbitron", "Rajdhani", system-ui, sans-serif;

  position: fixed;
  inset: 0;
  z-index: 99990;
  display: none;
  pointer-events: none !important;
  background: transparent;
}
#dwikiRoot.dwiki-root.is-open {
  display: block;
}

#dwikiRoot .dwiki-panel {
  pointer-events: auto !important;
  box-sizing: border-box;
  container-type: size;
  container-name: dwiki;
  position: fixed;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-width: 300px;
  min-height: 260px;
  border-radius: 14px;
  border: 2px solid #1a4a78;
  background: linear-gradient(165deg, var(--dwiki-shell-hi), var(--dwiki-shell) 42%, var(--dwiki-shell-2));
  color: var(--dwiki-text);
  font: 500 13px/1.35 var(--dwiki-font);
  box-shadow:
    0 0 0 1px rgba(180, 220, 255, 0.28) inset,
    0 16px 36px rgba(0, 0, 0, 0.5);
  user-select: none;
}

/* —— Hinge —— */
#dwikiRoot .dwiki-panel > .dwiki-hinge.devo-head {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 5px 7px 0;
  padding: 5px 7px 5px 9px !important;
  border: 1px solid rgba(0, 0, 0, 0.45) !important;
  border-bottom: 2px solid #061018 !important;
  border-radius: 10px 10px 3px 3px !important;
  background: linear-gradient(180deg, #243848, #121c28) !important;
  cursor: grab;
  touch-action: none;
}
#dwikiRoot .dwiki-hinge:active { cursor: grabbing; }
#dwikiRoot .dwiki-hinge-left {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
#dwikiRoot .dwiki-hinge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dwiki-cyan);
  box-shadow: 0 0 8px rgba(79, 214, 255, 0.7);
  flex: 0 0 auto;
}
#dwikiRoot .dwiki-hinge-title {
  font: 700 10px/1 var(--dwiki-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #dff6ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#dwikiRoot .dwiki-close {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid #1a4a78;
  background: linear-gradient(180deg, #c8e8ff, #4ea0e0);
  color: #0a2030;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
#dwikiRoot .dwiki-close:hover { filter: brightness(1.08); }

/* —— Shell —— */
#dwikiRoot .dwiki-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  margin: 5px 7px 7px;
  border-radius: 10px;
  border: 1px solid rgba(79, 214, 255, 0.2);
  background: var(--dwiki-lcd);
  overflow: hidden !important;
}

/* —— Nav —— */
#dwikiRoot .dwiki-nav {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  border-bottom: 1px solid rgba(79, 214, 255, 0.12);
  background: rgba(4, 12, 20, 0.7);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
#dwikiRoot .dwiki-nav-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px solid rgba(79, 214, 255, 0.16);
  background: var(--dwiki-card);
  color: var(--dwiki-text);
  font: 600 11px/1.2 var(--dwiki-font);
  cursor: pointer;
  white-space: nowrap;
}
#dwikiRoot .dwiki-nav-btn:hover {
  border-color: rgba(79, 214, 255, 0.4);
}
#dwikiRoot .dwiki-nav-btn.is-on {
  border-color: var(--dwiki-cyan);
  background: linear-gradient(180deg, rgba(40, 90, 130, 0.55), var(--dwiki-card));
  box-shadow: inset 0 0 0 1px rgba(79, 214, 255, 0.22);
}
#dwikiRoot .dwiki-nav-ico { font-size: 13px; line-height: 1; }
#dwikiRoot .dwiki-nav-label { letter-spacing: 0.02em; }

/* —— Content —— */
#dwikiRoot .dwiki-content {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#dwikiRoot .dwiki-content-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 12px 12px;
  -webkit-overflow-scrolling: touch;
}
#dwikiRoot .dwiki-content-scroll::-webkit-scrollbar { width: 4px; }
#dwikiRoot .dwiki-content-scroll::-webkit-scrollbar-thumb {
  background: rgba(79, 214, 255, 0.28);
  border-radius: 4px;
}

#dwikiRoot .dwiki-article-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
#dwikiRoot .dwiki-article-ico {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(79, 214, 255, 0.35));
}
#dwikiRoot .dwiki-article-title {
  margin: 0;
  font: 700 16px/1.2 var(--dwiki-display);
  color: #fff;
  letter-spacing: 0.02em;
}

#dwikiRoot .dwiki-article-body {
  color: var(--dwiki-text);
  user-select: text;
}
#dwikiRoot .dwiki-article-body p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #d2e8f8;
}
#dwikiRoot .dwiki-article-body ul {
  margin: 0 0 10px;
  padding: 0 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#dwikiRoot .dwiki-article-body li {
  font-size: 12.5px;
  line-height: 1.35;
  color: #c8dcec;
}
#dwikiRoot .dwiki-article-body strong {
  color: var(--dwiki-cyan);
  font-weight: 700;
}
#dwikiRoot .dwiki-article-body em {
  color: var(--dwiki-warn);
  font-style: normal;
  font-weight: 600;
}
#dwikiRoot .dwiki-article-body kbd {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(79, 214, 255, 0.3);
  background: rgba(0, 0, 0, 0.35);
  font: 700 11px/1.3 var(--dwiki-display);
  color: var(--dwiki-gold, var(--dwiki-warn));
}

#dwikiRoot .dwiki-callout {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(79, 214, 255, 0.22);
  background: rgba(20, 50, 75, 0.45);
  font-size: 12px;
  line-height: 1.35;
  color: var(--dwiki-text);
}
#dwikiRoot .dwiki-callout.warn {
  border-color: rgba(255, 193, 77, 0.35);
  background: rgba(60, 40, 10, 0.4);
  color: #ffe8b0;
}

/* —— Responsive —— */
@container dwiki (min-width: 520px) {
  #dwikiRoot .dwiki-shell {
    grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1.6fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }
  #dwikiRoot .dwiki-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-x: hidden;
    overflow-y: auto;
    border-bottom: 0;
    border-right: 1px solid rgba(79, 214, 255, 0.12);
    align-content: start;
  }
  #dwikiRoot .dwiki-nav-btn {
    width: 100%;
    justify-content: flex-start;
  }
}

@container dwiki (max-width: 380px) {
  #dwikiRoot .dwiki-nav-label {
    /* ícone + texto curto ainda cabe; em telas mínimas corta label longa */
    max-width: 9ch;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #dwikiRoot .dwiki-article-title {
    font-size: 14px;
  }
}

@container dwiki (max-height: 320px) {
  #dwikiRoot .dwiki-callout {
    display: none;
  }
  #dwikiRoot .dwiki-article-body p {
    margin-bottom: 6px;
  }
}