/* ==========================================================================
   [08] PÁGINA: LEITOR DE MANGÁ (Completo, Premium e Blindado)
   ========================================================================== */
body:has(.dt-reader-layout) { background: #000; overflow-x: hidden; }

/* ... o resto do código do leitor ... */

/* Esconde as barras de navegação do resto do site para dar imersão */
body:has(.dt-reader-layout) .dt-topbar-desktop,
body:has(.dt-reader-layout) .dt-topbar-mobile,
body:has(.dt-reader-layout) .dt-bottom-nav {
  display: none !important;
}

.dt-reader-layout { position: relative; width: 100%; min-height: 100vh; background: #000; overflow-x: hidden; }

/* --- A BLINDAGEM DAS IMAGENS --- */
.dt-reader-content { 
  display: flex !important; 
  flex-direction: column !important; 
  align-items: center !important; 
  margin: 0 auto !important; 
  transition: max-width 0.4s ease; 
  padding-bottom: 40px;
}
.dt-reader-content img { 
  display: block !important; 
  width: 100% !important; 
  max-width: 100% !important;
  height: auto !important; 
  margin: 0 !important; 
  padding: 0 !important; 
  float: none !important; 
  clear: both !important;
  vertical-align: top !important; /* Mata o espaço branco entre as imagens */
}

/* Controle de Largura do Leitor (Configurações) */
.dt-reader-content.w-sm { max-width: 600px; }
.dt-reader-content.w-md { max-width: 800px; }
.dt-reader-content.w-lg { max-width: 1000px; }

/* --- BLOCO FINAL: REAÇÕES --- */
.dt-end-chapter-box { text-align: center; padding: 40px 20px 20px; width: 100%; }
.dt-end-text { color: #fff; font-size: 18px; font-weight: 900; text-transform: uppercase; margin: 0 0 5px 0; letter-spacing: 1px; }
.dt-reaction-total { color: #888; font-size: 12px; font-weight: 700; display: block; margin-bottom: 25px; text-transform: uppercase; }

.dt-reactions-container { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.dt-reaction-item { background: transparent; border: none; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; padding: 0; outline: none; }
.dt-react-circle { width: 65px; height: 65px; border-radius: 50%; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; font-size: 30px; transition: 0.2s; border: 2px solid transparent; }
.dt-react-name { color: #888; font-size: 13px; font-weight: 800; text-transform: uppercase; transition: 0.2s; }
.dt-react-num { color: #666; font-size: 12px; font-weight: 700; transition: 0.2s; }

/* Efeitos ao passar o mouse e ao clicar (Reações) */
.dt-reaction-item:hover .dt-react-circle { transform: translateY(-5px); background: rgba(255,255,255,0.1); }
.dt-reaction-item.active .dt-react-circle { border-color: #7C3AED; background: rgba(124, 58, 237, 0.1); }
.dt-reaction-item.active .dt-react-name { color: #7C3AED; }
.dt-reaction-item.active .dt-react-num { color: #fff; }

/* --- BOTÃO DE COMENTÁRIOS (SÓ ÍCONE ABAIXO DA NAVEGAÇÃO) --- */
.dt-end-comment-wrapper { display: flex; justify-content: center; margin-top: -30px; padding-bottom: 60px; }
.dt-end-comment-btn-icon { 
  background: #262627; 
  border: 1px solid rgba(255,255,255,0.05); 
  color: #fff; 
  width: 56px; 
  height: 56px; 
  border-radius: 50%; 
  font-size: 22px; 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  position: relative; 
  transition: 0.2s; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.4); 
}
.dt-end-comment-btn-icon:hover { background: #7C3AED; transform: translateY(-4px); border-color: #7C3AED; }
.dt-end-comment-btn-icon .dt-badge-count { 
  position: absolute; 
  top: -2px; 
  right: -5px; 
  background: #ffb800; 
  color: #000; 
  font-size: 11px; 
  font-weight: 900; 
  padding: 2px 6px; 
  border-radius: 10px; 
  border: 2px solid #262627; 
}

/* Vinheta Escura */
.dt-reader-vignette { position: fixed; inset: 0; background: rgba(0,0,0,0.70); pointer-events: none; opacity: 0; z-index: 10; transition: opacity 0.4s ease; }
.dt-reader-layout.ui-visible .dt-reader-vignette { opacity: 1; }

/* INTERFACE GERAL (UI) */
.dt-reader-ui { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0; visibility: hidden; transition: all 0.4s ease; }
.dt-reader-layout.ui-visible .dt-reader-ui { opacity: 1; visibility: visible; }
.dt-reader-ui * { pointer-events: auto; } 
.ui-hidden { display: none !important; }

/* Topbar */
.dt-reader-topbar-wrapper { position: absolute; top: 20px; left: 0; width: 100%; display: flex; justify-content: center; }
.dt-reader-topbar { background: rgba(26, 26, 30, 0.95); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.08); border-radius: 50px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.6); min-width: 400px;}
.dt-tb-btn { background: rgba(255,255,255,0.05); border: none; color: #fff; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: 0.2s; text-decoration: none;}
.dt-tb-btn:hover { background: rgba(255,255,255,0.1); color: #7C3AED; }
.dt-tb-title-area { display: flex; flex-direction: column; align-items: center; text-align: center; }
.dt-tb-obra-title { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.dt-tb-cap-info { color: #fff; font-size: 16px; font-weight: 900; }

/* Ilha Flutuante & Popup AutoScroll */
.dt-reader-island-wrapper { position: absolute; bottom: 30px; left: 0; width: 100%; display: flex; flex-direction: column; align-items: center; }

.dt-autoscroll-popup { background: rgba(26, 26, 30, 0.98); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 12px; margin-bottom: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.8); opacity: 0; visibility: hidden; transform: translateY(10px); transition: 0.2s; }
.dt-autoscroll-popup.active { opacity: 1; visibility: visible; transform: translateY(0); }
.dt-as-popup-header { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; text-align: center; letter-spacing: 1px;}
.dt-as-popup-grid { display: flex; gap: 6px; }

.dt-reader-island { background: rgba(26, 26, 30, 0.95); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 60px; padding: 8px 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.8); }
.dt-island-btn { background: transparent; border: none; color: #fff; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; transition: 0.2s; position: relative; }
.dt-island-btn:hover { background: rgba(255,255,255,0.05); color: #7C3AED; }

.dt-island-comments { position: relative; }
.dt-island-badge { position: absolute; top: 4px; right: 4px; background: #ffb800; color: #000; font-size: 9px; font-weight: 900; padding: 2px 5px; border-radius: 8px; border: 2px solid rgba(26, 26, 30, 0.95); }

/* Botão de Auto-scroll ligado */
.dt-btn-run.running { background: #7C3AED; color: #fff; box-shadow: 0 0 15px rgba(124, 58, 237, 0.4); }
.dt-btn-run.running:hover { background: #8B5CF6; color: #fff; }

/* MODAIS E GAVETAS */
.dt-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); z-index: 150; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
.dt-drawer-overlay.active { opacity: 1; visibility: visible; }

.dt-config-drawer { position: fixed; top: 80px; right: 20px; width: 280px; background: rgba(26, 26, 30, 0.98); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.8); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: 0.3s; z-index: 100;}
.dt-config-drawer.active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;}

.dt-bottom-drawer { position: absolute; bottom: 0; left: 50%; width: 100%; max-width: 700px; height: 80vh; background: #161618; border-radius: 24px 24px 0 0; box-shadow: 0 -10px 50px rgba(0,0,0,0.9); transform: translateX(-50%) translateY(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.05); border-bottom: none;}
.dt-bottom-drawer.active { transform: translateX(-50%) translateY(0); }

.dt-drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.dt-drawer-header h3, .dt-drawer-header h5 { margin: 0; color: #fff; font-size: 16px; font-weight: 900; }
.dt-close-drawer-btn { background: transparent; border: none; color: var(--muted); font-size: 18px; cursor: pointer; transition: 0.2s; }
.dt-close-drawer-btn:hover { color: #ef4444; }
.dt-drawer-body { flex: 1; overflow-y: auto; padding: 0; }
.dt-drawer-body::-webkit-scrollbar { width: 6px; }
.dt-drawer-body::-webkit-scrollbar-thumb { background: #3B3B3C; border-radius: 3px; }

.dt-chapters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 12px; padding: 24px; }
.dt-cap-grid-item { background: #262627; border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; height: 60px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 900; text-decoration: none; transition: 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.2);}
.dt-cap-grid-item:hover { background: #3B3B3C; transform: translateY(-4px); }
.dt-cap-grid-item.active { background: #7C3AED; color: #fff; border-color: #7C3AED; box-shadow: 0 4px 15px rgba(124,58,237,0.4);}

.dt-config-options-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dt-opt-btn, .dt-opt-speed-btn { background: rgba(255,255,255,0.05); border: 1px solid transparent; color: #fff; padding: 12px 6px; border-radius: 12px; font-size: 13px; font-weight: 800; cursor: pointer; transition: 0.2s; text-align: center; }
.dt-opt-btn:hover, .dt-opt-speed-btn:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); }
.dt-opt-btn.active, .dt-opt-speed-btn.active { background: #7C3AED; border-color: #7C3AED; }

.dt-drawer-input { position: sticky; bottom: 0; background: #161618; padding: 16px 24px; border-top: 1px solid rgba(255,255,255,0.05); display: flex; gap: 12px; margin-top: auto; }
.dt-drawer-input input { flex: 1; background: #262627; border: 1px solid transparent; border-radius: 12px; padding: 0 16px; color: #fff; font-size: 14px; outline: none; transition: 0.2s; }
.dt-drawer-input input:focus { border-color: #7C3AED; }
.dt-drawer-input button { background: #7C3AED; border: none; color: #fff; width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; }

/* --- NOVA NAVEGAÇÃO ENTRE CAPÍTULOS --- */
.dt-chapter-navigation-block {
  display: flex;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 600px;
  margin: 20px auto 10px auto; /* Reduzimos o espaço absurdo aqui */
  padding: 0 20px;
}
.dt-nav-ch-btn {
  background: #262627;
  border: 1px solid rgba(255,255,255,0.05);
  color: #fff;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: 0.2s;
  flex: 1;
  justify-content: center;
}
.dt-nav-ch-btn:hover:not(:disabled) { 
  background: #7C3AED; 
  border-color: #7C3AED; 
  transform: translateY(-2px); 
}

/* Classe extra para quando for clicado (Mantém Roxo) */
.dt-nav-ch-btn.loading {
  background: #7C3AED !important;
  border-color: #7C3AED !important;
  color: #fff !important;
}
.dt-nav-ch-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.dt-btn-next-ch { background: #7C3AED; border-color: #7C3AED; }
.dt-btn-next-ch:hover:not(:disabled) { background: #8B5CF6; }

/* Ajuste do Fim do Cap para ficar mais colado */
.dt-end-chapter-box { padding: 40px 20px 60px 20px; }

/* --- REPOSICIONANDO MENU DE LARGURA PARA BAIXO (DESKTOP) --- */
@media (min-width: 769px) {
  .dt-config-drawer {
    top: auto;
    bottom: 120px; /* Subimos para descolar da ilha inferior */
    right: auto;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
  }
  /* ESSA É A REGRA QUE ESTAVA FALTANDO! */
  .dt-config-drawer.active { 
    opacity: 1 !important; 
    visibility: visible !important; 
    transform: translateX(-50%) translateY(0) !important; 
    pointer-events: auto !important;
  }
}

/* --- BALÃO NATIVO DEFINITIVO --- */
.dt-onboarding-hint {
  position: absolute;
  top: 70px; /* Força ele a ficar debaixo da barra */
  left: 10px; /* Alinha exatamente debaixo do botão X */
  background: #1A1A1EF2;
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-align: center !important;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  z-index: 9999;
  pointer-events: none;
  
  /* Escondido por padrão */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

/* A setinha apontando pro botão X */
.dt-onboarding-hint::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 15px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #1A1A1EF2 transparent;
}

/* Regra que o JS usa para mostrar */
.dt-onboarding-hint.show-hint {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Botão Play/Pause Flutuante (Fica visível rolando a tela) */
.dt-floating-play-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: #7C3AED;
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
  cursor: pointer;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  transform: scale(0.8);
}
.dt-floating-play-btn.visible { opacity: 1; visibility: visible; transform: scale(1); }
/* ==========================================================================
   9. MOBILE - LEITOR SÊNIOR
   ========================================================================== */
@media (max-width: 768px) {
  .dt-reader-content.w-sm, .dt-reader-content.w-md, .dt-reader-content.w-lg { max-width: 100%; } 
  
  /* --- AJUSTE DA TOPBAR COM O TÍTULO DE VOLTA --- */
  .dt-reader-topbar { min-width: 0; width: 92%; padding: 6px 10px; gap: 10px; }
  .dt-tb-btn { width: 38px; height: 38px; font-size: 16px; flex-shrink: 0; }
  
  /* Área central fluida para não quebrar a barra */
  .dt-tb-title-area { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center;}
  
  /* Título da obra visível, com limite de espaço (...) */
  .dt-tb-obra-title { 
    display: block; /* Trouxemos de volta! */
    font-size: 9px; 
    width: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; /* Coloca "..." se for muito grande */
    text-align: center;
  } 
  .dt-tb-cap-info { font-size: 14px; }
  /* ---------------------------------------------- */

  .dt-reader-island { width: 92%; justify-content: space-between; padding: 8px 10px; gap: 8px;}
  .dt-island-btn { width: 44px; height: 44px; font-size: 18px; }
  
  .dt-bottom-drawer { max-width: 100%; height: 85vh; }
  
  .dt-config-drawer { top: auto; bottom: 100px; right: 10px; left: 10px; width: auto; transform: translateY(20px); }
}