/* Reset và font */
html, body {
  height: 100%;
  margin: 0;
  font-family: sans-serif;
}

/* Toolbar */
.toolbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 36px;
  background: rgba(0, 77, 77, 0.01);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  z-index: 9999;
}
.toolbar .logo { font-weight: bold; }
.toolbar .actions { display: flex; align-items: center; }

/* Ô tìm kiếm */
.toolbar .search-box {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 20px;
  padding: 2px 10px;
  margin-left: 10px;
}
.toolbar .search-box.hidden { display: none; }
.toolbar .search-box input {
  border: none; outline: none;
  padding: 6px 8px;
  border-radius: 20px;
  font-size: 14px;
  flex: 1;
}
.toolbar .search-box button {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
}
.toolbar .search-box button:hover { color: teal; }
.toolbar .search-box .status-label {
  font-size: 13px;
  margin-left: 6px;
  color: #333;
  min-width: 80px;
  text-align: right;
}

/* Container + Flipbook */
.container { margin-top: 0; }
#df_manual_book { width: 100%; height: 99%; }

/* Panel kết quả tìm kiếm */
#searchResultsPanel {
  position: fixed;
  top: 50px;
  right: -320px;
  width: 300px;
  height: calc(100% - 50px);
  background: #fff;
  border-left: 1px solid #ccc;
  z-index: 9999;
  font-size: 14px;
  transition: right 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
}
#searchResultsPanel.visible { right: 0; }
#searchResultsHeader {
  position: sticky;
  top: 0;
  background: #f0f0f0;
  padding: 5px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#searchResultsList { flex: 1; overflow-y: auto; }
.search-result-item {
  padding: 5px;
  border-bottom: 1px solid #eee;
}
.search-result-item:hover { background: #f6f6f6; }
.search-result-item.active { background: #ffe58a; }
.snippet-item { padding: 3px 0; cursor: pointer; }
.snippet-item:hover { background: #f6f6f6; }

/* Highlight */
#df_manual_book .df-page { position: relative !important; }
.highlight-overlay {
  position: absolute;
  background: yellow;
  opacity: 0.5;
  pointer-events: none;
  z-index: 5000;
}
mark {
  background: #ffeb3b;
  font-weight: bold;
  padding: 0 2px;
}

/* Hiệu ứng nháy highlight */
@keyframes blink {
  0% { background: yellow; }
  50% { background: orange; }
  100% { background: yellow; }
}

 #ai-assistant-button {
    position: fixed;
    bottom: 10px; right: 5px;
    background: #007bff;
    color: white;
    border-radius: 50%;
    width: 25px; height: 25px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    font-size: 15px;
	z-index:9999;
  }
  #ai-chat-box {
    position: fixed;
    bottom: 80px; right: 20px;
    width: 300px; height: 400px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 10px;
    display: none;
    flex-direction: column;
    box-shadow: 0 3px 12px rgba(0,0,0,0.3);
	z-index:9999;
  }
  #ai-chat-box.show { display: flex; }
  #ai-chat-header {
    background: #007bff; color: white;
    padding: 8px; border-top-left-radius: 10px; border-top-right-radius: 10px;
    font-weight: bold;
    display: flex; justify-content: space-between; align-items: center;
  }
  #ai-chat-messages {
    flex: 1; padding: 8px; overflow-y: auto; font-size: 14px;
  }
  .user-msg { text-align: right; margin: 4px 0; color: #333; }
  .ai-msg { text-align: left; margin: 4px 0; color: #007bff; }
  #ai-chat-input {
    display: flex; border-top: 1px solid #ddd;
  }
  #ai-chat-input input {
    flex: 1; border: none; padding: 6px;
  }
  #ai-chat-input button {
    border: none; background: #007bff; color: white; padding: 6px 12px;
    cursor: pointer;
  }