:root {
    --primary-color: #4f46e5; --light-gray: #f3f4f6; --border-color: #e5e7eb;
    --text-color: #1f2937; --text-light: #6b7280; --container-bg: #ffffff;
    --heart-color: #ef4444; --danger-color: #dc2626; --success-color: #10b981; --highlight-color: #f59e0b;
}

/* === BỐ CỤC KHUNG ỨNG DỤNG (APP SHELL) === */
html, body { height: 100%; overflow: hidden; }
body { background-color: var(--light-gray); margin: 0; color: var(--text-color); }

@keyframes pulse-animation { 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); } 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); } }
.sidebar-toggle { background: none; border: 1px solid transparent; padding: 8px; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: pulse-animation 2s 3; }
.sidebar-toggle:hover { background-color: var(--light-gray); }
.sidebar-toggle svg { width: 20px; height: 20px; stroke: var(--text-light); }
.icon-collapse, .icon-expand { transition: all 0.2s ease-in-out; }
body:not(.sidebar-collapsed) .icon-expand { display: none; }
body.sidebar-collapsed .icon-collapse { display: none; }

.app-layout { display: flex; height: calc(100vh - 66px); }
.sidebar-menu { width: 200px; flex-shrink: 0; background-color: var(--container-bg); border-right: 1px solid var(--border-color); padding: 20px 16px; display: flex; flex-direction: column; transition: width 0.3s ease-in-out, padding 0.3s ease-in-out; }
body.sidebar-collapsed .sidebar-menu { width: 60px; padding: 20px 12px; }
.sidebar-nav { list-style: none; padding: 0; margin: 0; }
.sidebar-nav .nav-heading { font-size: 0.75em; font-weight: 700; color: var(--text-light); text-transform: uppercase; padding: 16px 12px 8px 12px; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; transition: opacity 0.2s; }
body.sidebar-collapsed .nav-heading,
body.sidebar-collapsed .nav-link span { opacity: 0; visibility: hidden; width: 0; }
.sidebar-nav .nav-link { display: flex; align-items: center; gap: 12px; padding: 6px 12px; border-radius: 8px; text-decoration: none; color: #374151; font-weight: 500; font-size: 0.95em; transition: background-color 0.2s, color 0.2s; white-space: nowrap; overflow: hidden; }
body.sidebar-collapsed .nav-link { justify-content: center; }
.sidebar-nav .nav-link:hover { background-color: var(--light-gray); }
.sidebar-nav .nav-link.active { background-color: var(--primary-color); color: white; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.sidebar-nav .nav-link svg { width: 20px; height: 20px; stroke-width: 2; flex-shrink: 0; }
.sidebar-nav .nav-link.active svg { stroke: white; }
/*.sidebar-footer { margin-top: auto; padding-bottom: 20px; background-color: var(--container-bg)}*/

.main-content { flex-grow: 1; overflow-y: auto; padding: 16px; }
.panel { background-color: var(--container-bg); padding: 16px; border-radius: 16px; border: 1px solid var(--border-color); box-shadow: 0 1px 2px rgba(27,31,35,0.04), 0 4px 12px rgba(27,31,35,0.08); display: flex; flex-direction: column; }

.tool-view { display: none; }
.tool-view.active { display: block; }

#composer-tool .main-layout { display: flex; gap: 24px; height: 100%; max-height: calc(100vh - 114px); }
#composer-tool .left-panel { flex: 40%; }
#composer-tool .right-panel { flex: 60%; overflow-y: auto; scroll-behavior: smooth; }

.section-title { font-size: 1.1em; font-weight: 700; margin-top: 20px; margin-bottom: 12px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; flex-shrink: 0; }
.section-title:first-child { margin-top: 0; }

.tool-tabs { display: flex; margin-bottom: 15px; background-color: var(--light-gray); border-radius: 8px; padding: 4px; flex-shrink: 0;}
.tab-button { flex: 1; padding: 8px 12px; border: none; background: none; cursor: pointer; font-size: 0.9em; font-weight: 500; color: var(--text-light); border-radius: 6px; transition: all 0.2s ease-in-out; }
.tab-button.active { color: var(--text-color); background-color: var(--container-bg); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.tool-content { display: block; width: 720px; max-width: 100%;}

/*.composer-wrapper { flex-shrink: 0; }*/

/* === KHUNG SOẠN THẢO LƠ LỬNG (PHIÊN BẢN MỚI) === */
#main-input {
    position: fixed;
    z-index: 50;
    
    /* Vị trí lơ lửng */
    bottom: 24px;
    left: 284px;
    right: 24px;

    /* Kích thước */
    width: auto;
    max-width: 800px;
    margin: 0 auto;
    height: 54px;
    min-height: 120px;
    max-height: 250px;
    
    /* Giao diện */
    padding: 15px 25px;
    font-size: 1.1em;
    border-radius: 27px;
    background-color: var(--container-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    resize: none;
    transition: all 0.3s ease-in-out;

    /* Viền mặc định */
    border: 2px solid var(--border-color);
}

#main-input::placeholder {
    color: var(--text-light);
    font-weight: 500;
}

#main-input:focus {
    outline: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); /* Giữ lại bóng đổ */

    /* === KỸ THUẬT TẠO VIỀN DẢI MÀU (GRADIENT BORDER) === */
    border-color: transparent; /* 1. Làm viền trong suốt */

    /* 2. Dùng 2 lớp nền: 1 lớp màu trắng bên trong và 1 lớp gradient bên ngoài */
    background-image: linear-gradient(var(--container-bg), var(--container-bg)), 
                      linear-gradient(to right, #8B5CF6, #EC4899, #F59E0B); /* <-- Bạn có thể đổi màu gradient ở đây */
    
    /* 3. Đảm bảo lớp gradient chỉ hiển thị ở khu vực viền */
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* Điều chỉnh vị trí khi sidebar thu gọn */
body.sidebar-collapsed #main-input {
    left: 104px;
}

/* Responsive cho mobile */
@media (max-width: 768px) {
    #main-input {
        left: 15px;
        right: 15px;
        bottom: 50px; 
    }
}

/*.icon-tray-container { display: flex; align-items: center; gap: 10px; background-color: var(--light-gray); padding: 8px 12px; border-radius: 8px; margin: 10px 0 20px 0; border: 1px solid var(--border-color); }
#icon-tray-list { flex-grow: 1; display: flex; align-items: center; gap: 10px; overflow-x: auto; padding: 5px 0; }
.tray-icon-wrapper { position: relative; padding: 8px; border-radius: 8px; border: 2px solid transparent; transition: all 0.2s ease-in-out; }
.tray-icon-wrapper:hover { border-color: var(--border-color); background-color: #fff; }
.tray-icon { font-size: 1.8em; cursor: pointer; }
.tray-action-btn { position: absolute; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: scale(0.8); transition: all 0.2s ease-in-out; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.tray-icon-wrapper:hover .tray-action-btn { opacity: 1; visibility: visible; transform: scale(1); }
.tray-action-btn:hover { transform: scale(1.2); }
.tray-svg-icon { width: 14px; height: 14px; }
.tray-icon-delete-btn { top: -8px; right: -8px; background-color: var(--danger-color); }
.tray-icon-delete-btn .tray-svg-icon { stroke: white; stroke-width: 2.5; }
.tray-icon-fav-btn { top: -8px; left: -8px; background-color: #fff; border: 1px solid var(--border-color); }
.tray-icon-fav-btn .tray-svg-icon { stroke: var(--text-light); fill: none; stroke-width: 1.5; }
.tray-icon-fav-btn:hover .tray-svg-icon { stroke: var(--heart-color); }
.tray-icon-fav-btn.favorited { background-color: var(--heart-color); }
.tray-icon-fav-btn.favorited .tray-svg-icon { stroke: white; fill: white; }
#copy-tray-button { padding: 6px 12px; font-size: 12px; flex-shrink: 0; }*/

#icon-selector-wrapper { flex-grow: 1; display: flex; border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; min-height: 200px; }
#icon-nav { background-color: var(--light-gray); padding: 8px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; width: 55px; box-sizing: border-box; border-right: 1px solid var(--border-color); }
#icon-nav .nav-item { font-size: 24px; cursor: pointer; padding: 6px; border-radius: 8px; transition: background-color 0.2s; text-align: center; }
#icon-nav .nav-item:hover, #icon-nav .nav-item.active { background-color: #d1d5db; }
#icon-grid-container { flex-grow: 1; overflow-y: auto; padding: 15px; scroll-behavior: smooth; }
.icon-category h3 { font-size: 1em; margin-top: 15px; margin-bottom: 10px; color: #374151; position: sticky; top: 0; background: white; padding: 8px 0; margin-left: -15px; padding-left: 15px; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 8px; }
.grid-icon-wrapper { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: all 0.2s; }
.grid-icon-wrapper:hover { background-color: var(--light-gray); transform: scale(1.1); }
.icon { font-size: 24px; cursor: pointer; padding: 5px; }
.grid-icon-fav-btn { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; background-color: #fff; border: 1px solid var(--border-color); opacity: 0; visibility: hidden; transform: scale(0.8); transition: all 0.2s ease-in-out; box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.grid-icon-wrapper:hover .grid-icon-fav-btn { opacity: 1; visibility: visible; }
.grid-icon-fav-btn .tray-svg-icon { stroke: var(--text-light); fill: none; width: 12px; height: 12px; stroke-width: 2; }
.grid-icon-fav-btn.favorited { background-color: var(--heart-color); border-color: var(--heart-color); }
.grid-icon-fav-btn.favorited .tray-svg-icon { stroke: white; fill: white; }

.output-style { position: relative; background-color: transparent; border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; margin-bottom: 12px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.output-style-name { font-weight: 500; color: var(--text-color); flex-shrink: 0; width: 120px; }
.output-text { flex-grow: 1; font-size: 1.1em; background-color: var(--light-gray); padding: 12px; border-radius: 8px; word-break: break-all; white-space: pre-wrap; flex-basis: 100%; order: 1; }
.output-actions { display: flex; gap: 8px; order: 2; margin-left: auto; align-items: center; }
.action-btn { background-color: #fff; color: var(--text-light); border: 1px solid var(--border-color); padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.action-btn:hover { background-color: var(--light-gray); color: var(--text-color); border-color: #d1d5db; }
.action-btn.added { background-color: var(--success-color); border-color: var(--success-color); color: white; }
.copy-btn { background-image: linear-gradient(to right, var(--primary-color) 0%, #6d28d9 100%); color: white; border: none; padding: 10px 15px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.copy-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.favorite-heart { font-size: 18px; line-height: 1; padding: 6px; background: none; border: none; cursor: pointer; opacity: 0.3; transition: all 0.2s ease-in-out; }
.output-style:hover .favorite-heart { opacity: 1; }
.favorite-heart.favorited { opacity: 1; color: var(--heart-color); transform: scale(1.1); }
.output-style.is-favorite { background-image: linear-gradient(to right, #fef2f2, #fff1f2); border-color: #fecaca; }
#favorites-view .output-style .output-text { order: 0; flex-basis: auto; }
#favorites-view .output-style .output-actions { display: none; }

@keyframes highlight-fade { from { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.5); border-color: var(--highlight-color); } to { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); border-color: var(--border-color); } }
.composer-area { margin-top: 16px; }
#final-composer-output { width: 100%; height: 200px; padding: 12px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 1.1em; box-sizing: border-box; resize: vertical; margin-bottom: 12px; background-color: #fff; transition: box-shadow 0.3s, border-color 0.3s; }
#final-composer-output.highlight { animation: highlight-fade 1.5s ease-out; }
.composer-actions { display: flex; gap: 10px; }
.composer-actions .copy-btn { flex-grow: 1; }
.composer-actions .clear-btn { background-color: var(--danger-color); color: white; border: none; padding: 10px 15px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; }

#favorites-view .section-title { margin-top: 0; }
#favorite-icons-container { padding: 10px; border-radius: 8px; margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.favorite-icon-wrapper { position: relative; }
.favorite-icon-wrapper .icon { cursor: default; }
.remove-favorite-btn { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; border-radius: 50%; background-color: var(--danger-color); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; font-weight: bold; line-height: 1; opacity: 0; visibility: hidden; transform: scale(0.8); transition: all 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.favorite-icon-wrapper:hover .remove-favorite-btn { opacity: 1; visibility: visible; transform: scale(1); }

/* === CSS CHO KHỐI GIỚI THIỆU === */
.info-block {
    background-color: #f9fafb;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-top: 24px;
}
.info-block h3 {
    font-size: 1.1em;
    color: var(--text-color);
    margin-top: 0;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}
.info-block ul, .info-block ol {
    list-style: none;
    padding-left: 0;
    margin: 0 0 16px 0;
}
.info-block li {
    margin-bottom: 12px;
    line-height: 1.6;
    color: var(--text-light);
}
.info-block li strong {
    color: var(--text-color);
    font-weight: 500;
}
.info-block ol {
    counter-reset: guide-counter;
}
.info-block ol li {
    counter-increment: guide-counter;
    display: flex;
    align-items: flex-start;
}
.info-block ol li::before {
    content: counter(guide-counter);
    background-color: var(--primary-color);
    color: white;
    font-weight: 700;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    margin-right: 12px;
    flex-shrink: 0;
}
.info-link {
    font-size: 0.9em;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
    transition: opacity 0.2s;
}
.info-link:hover {
    opacity: 0.8;
}
/* === RESPONSIVE STYLES === */
@media (max-width: 768px) {
    body { overflow: auto; } 
    .main-content { padding: 12px; padding-bottom: 80px; } /* Thêm đệm dưới cho menu bottom */
    #text-converter-view .main-layout { flex-direction: column; height: auto; gap: 16px; }

    /* Ẩn sidebar desktop và nút toggle của nó */
    .app-layout .sidebar-menu { display: none; }
    .app-header .sidebar-toggle { display: none; }
}