/*
 * File: doc-doan-van-style.css
 * Description: Stylesheet for the "Doc Doan Van" Plugin (v1.8)
 * Purpose: Provides styling for inline and block speak buttons,
 * as well as floating control buttons for text-to-speech functionality.
 * Author: Đại Phúc Minh
 * Version: 1.8
 */

/* --- Base styles for all speak buttons and wrappers --- */

/* Base wrapper */
.speak-wrapper {
    display: inline-flex; /* Mặc định là inline-flex cho sự linh hoạt ban đầu */
    align-items: center; /* Căn giữa theo chiều dọc */
    gap: 4px; /* Khoảng cách giữa nút và nội dung */
    vertical-align: middle; /* Căn chỉnh nút với dòng văn bản xung quanh */
    line-height: 1.4; /* Đảm bảo wrapper không làm giãn dòng quá mức */
}

/* Base button */
.speak-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 3px; /* Bo tròn nhẹ */
    cursor: pointer;
    transition: background-color 0.3s ease;
    flex-shrink: 0; /* Ngăn nút bị co lại */
    display: inline-flex; /* Đảm bảo icon/chữ trong nút căn giữa */
    align-items: center;
    justify-content: center;
    padding: 0; /* Bỏ padding mặc định */
}

.speak-button:hover {
    background-color: #0056b3;
}

/* Nội dung văn bản cần đọc */
.speak-content {
    display: inline; /* Giữ nội dung là inline theo mặc định */
    word-wrap: break-word;
}

/* --- Specific styles for shortcode types --- */

/* [speak] (mặc định) - Thiết kế để CHÈN TRONG DÒNG (inline) */
.speak-wrapper-inline {
    display: inline-flex !important; /* Buộc là inline-flex container */
    align-items: center; /* CĂN GIỮA MỌI THỨ BÊN TRONG THEO CHIỀU DỌC */
    margin: 0 3px; /* Khoảng cách nhỏ để không dính vào chữ */
    vertical-align: middle; /* Căn giữa toàn bộ wrapper với dòng chữ */
    line-height: normal; /* Quan trọng: để văn bản bên trong có line-height bình thường */
}
.speak-button-inline {
    width: 18px; /* Kích thước nhỏ nhất cho inline */
    height: 18px;
    font-size: 11px; /* Kích thước font của icon */
    border-radius: 3px;
    flex-shrink: 0; /* Đảm bảo nút không bị co lại */
    /* REMOVED: position: relative; top: 3px; - Not needed due to flexbox alignment */
}
.speak-wrapper-inline .speak-content {
    display: inline !important; /* Đảm bảo nội dung là inline */
    line-height: normal; /* Đảm bảo nội dung có line-height bình thường */
    /* vertical-align không cần ở đây vì đã dùng flexbox trên wrapper */
}


/* --- Styles cho các shortcode BLOCK: [speak1], [speak2], [speak3], [speak4] --- */
/* Wrapper chung cho các loại shortcode BLOCK */
.speak-wrapper-block {
    display: flex !important; /* Buộc là flex (tức block) để luôn xuống dòng */
    align-items: flex-start; /* CRITICAL: Căn chỉnh lên trên cùng đoạn văn */
    gap: 8px; /* Khoảng cách giữa nút và nội dung */
    clear: both; /* Đảm bảo không bị nổi sang các phần tử khác */

    /* --- Key adjustments for left alignment and spacing --- */
    margin-left: 0 !important; /* Override any inherited left margin */
    padding-left: 0 !important; /* Override any inherited left padding */
    width: 100%; /* Ensures wrapper takes full available width */
    box-sizing: border-box; /* Includes padding and border in the element's total width */
    margin-top: 10px !important; /* Clear spacing above block */
    margin-bottom: 10px !important; /* Clear spacing below block */
}
.speak-wrapper-block .speak-content {
    display: block !important; /* Buộc nội dung là block trong wrapper này */
    flex-grow: 1; /* Cho phép nội dung chiếm hết không gian còn lại */
    line-height: 1.6; /* Tăng khoảng cách dòng để dễ đọc hơn */
}

/* Styles riêng cho từng loại nút BLOCK */
/* [speak1] (BLOCK) - Icon nhỏ nhất trong nhóm block, BẰNG KÍCH THƯỚC CỦA [speak] INLINE */
.speak-button-1 {
    width: 18px; /* Kích thước nhỏ, consistent with .speak-button-inline */
    height: 18px;
    font-size: 11px; /* Font size consistent with .speak-button-inline */
    border-radius: 3px;
    /* REMOVED: position: relative; top: 3px; - Not needed due to flexbox alignment */
}

/* [speak2] (BLOCK) - Tăng kích thước dần */
.speak-button-2 {
    width: 24px;
    height: 24px;
    font-size: 14px;
    border-radius: 4px;
}

/* [speak3] (BLOCK) - Tăng kích thước dần */
.speak-button-3 {
    width: 28px;
    height: 28px;
    font-size: 16px;
    border-radius: 5px;
}

/* [speak4] (BLOCK) - Lớn nhất và có chữ "Nghe" */
.speak-button-4 {
    height: 30px;
    font-size: 16px;
    padding: 0 10px; /* Padding để chứa chữ */
    border-radius: 5px;
    min-width: 65px; /* Đảm bảo đủ chỗ cho chữ "Nghe" */
}


/* --- Styles for the main floating buttons (Fixed position) --- */
#ssaf-buttons {
    position: fixed;
    bottom: 60px; /* Vị trí dưới cùng */
    right: 11px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
}

.ssaf-btn {
    width: 46px;
    height: 46px;
    font-size: 20px;
    background: #4A90E2; /* Blue */
    color: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.2s ease;
}

.ssaf-btn:hover {
    background: #357ABD; /* Darker blue on hover */
    transform: translateY(-2px); /* Slight lift effect */
}

/* Styles for active/playing state */
.ssaf-btn.active { /* Áp dụng cho nút chung khi active (đang phát/tạm dừng) */
    background: #28a745; /* Green for playing */
}

.ssaf-btn.paused { /* Áp dụng cho nút tạm dừng khi đang tạm dừng */
    background: #ffc107; /* Amber/Yellow for paused */
}

.ssaf-btn.stop { /* Áp dụng cho nút dừng */
    background: #dc3545; /* Red for stop */
}

.ssaf-btn.stop:hover {
    background: #c82333; /* Darker red on hover */
}

.ssaf-btn.restart { /* Áp dụng cho nút restart */
    background: #007bff; /* Blue for restart */
}

.ssaf-btn.restart:hover {
    background: #0056b3;
}