/* ===== Posisi widget ===== */
#wd-accessibility {
  position: fixed;
  top: 80px; /* di bawah navigasi/header */
  left: 0; /* panel menempel kiri */
  z-index: 99999;
  font-family: system-ui, -apple-system, Arial, sans-serif;
}

/* Tombol kotak di samping panel */
#wd-btn {
  background: #005baa;
  color: #fff;
  font-size: 14px;
  border: none;
  border-radius: 4px; /* kotak */
  width: 50px;
  height: 50px;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);

  position: absolute;
  top: 0;
  left: 100%; /* tepat di sebelah kanan panel */
  margin-left: 6px; /* jarak dari panel */
  z-index: 99999;
}

/* ===== Panel slide menempel sisi layar ===== */
#wd-panel {
  position: fixed;
  top: 100px;
  left: 0;
  width: 160px;
  max-height: 60vh;
  background: #fff;
  border-right: 1px solid #e5e7eb;
  box-shadow: 2px 0 10px rgba(0,0,0,0.25);
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  z-index: 99998;
  padding: 10px;
  overflow-y: auto;
  border-radius: 0 10px 10px 0;
}

#wd-panel.active {
  transform: translateX(0);
}

/* Tombol Voice / Baca Konten / Reset */
#wd-panel .wd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;     /* full width satu kolom */
  margin-bottom: 6px;
  padding: 8px 10px;
  font-size: 13px;
  background: #f3f4f6;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s;
}

#wd-panel .wd-item:hover { background: #e5e7eb; }

/* Gunakan flex kolom agar setiap tombol satu baris penuh */
#wd-panel .wd-row {
  display: flex;
  flex-direction: column; /* satu tombol per baris */
  gap: 6px;
}

/* Warna khusus tombol */
#wd-panel .wd-read { background: #e8f5ff; }
#wd-panel .wd-stop { background: #ffe8e8; }
#wd-panel .wd-reset { background: #fff2d6; }

/* Indikator tombol Voice aktif */
#wd-panel #wd-voice-toggle.on { outline: 2px solid #2563eb; }

/* ===== Mobile friendly ===== */
@media (max-width: 768px) {
  #wd-btn {
    width: 40px;
    height: 40px;
    font-size: 12px;
  }
  #wd-panel {
    width: 50vw;
    max-height: 40vh;
    top: 70px;
    padding: 10px;
  }
  #wd-panel .wd-item {
    font-size: 9px;
    padding: 5px 6px;
  }
}

/* Mode aksesibilitas */
.wd-high-contrast { background: #000 !important; color: #ff0 !important; }
.wd-grayscale { filter: grayscale(100%); }
.wd-underline a { text-decoration: underline !important; }
.wd-highlight a { background: yellow !important; color: #000 !important; }
.wd-spacing p, .wd-spacing li { line-height: 2 !important; }