/* styles.css (ส่วนที่แก้ไขและเพิ่มเติม) */

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    /* height: 100%; เอาออกเพื่อให้ body ของ admin.html ขยายตามเนื้อหาได้ */
    /* overflow: hidden; เอาออกเพื่อให้ admin.html scroll ได้ */
    min-height: 100vh; /* ให้ body มีความสูงอย่างน้อยเต็ม viewport แต่สามารถยาวกว่านั้นได้ */
    font-family: 'Prompt', Arial, sans-serif;
    background-color: #f4f4f4; /* สีพื้นหลังเริ่มต้น (เหมาะสำหรับ admin) */
}

/* --- User Page Styles --- */
.fullscreen-display {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: 5%;
    box-sizing: border-box;
    background-color: #111; /* Default background for user page display */
    overflow-wrap: break-word;
    word-break: break-all;
}

.fullscreen-display-text {
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    /* animation properties will be set by JS */
    animation-iteration-count: infinite; /* All effects will loop */
    white-space: nowrap; /* Important for marquee */
}

/* --- Text Effects (Revised for Looping) --- */
.effect-none {
    animation: none !important; /* Ensure no animation */
}

/* BLINK */
@keyframes blink-animation {
    50% { opacity: 0; }
}
.effect-blink {
    animation-name: blink-animation;
    animation-timing-function: step-start; /* Makes it a sharp blink */
}

/* PULSE */
@keyframes pulse-animation {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; } /* Subtle pulse */
}
.effect-pulse {
    animation-name: pulse-animation;
    animation-timing-function: ease-in-out;
}

/* SLIDE IN LEFT (Loop) */
@keyframes slide-in-left-animation {
    0% { transform: translateX(-100%); opacity: 0; }
    40%, 60% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(-100%); opacity: 0; }
}
.effect-slide-in-left {
    animation-name: slide-in-left-animation;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* SLIDE IN RIGHT (Loop) */
@keyframes slide-in-right-animation {
    0% { transform: translateX(100%); opacity: 0; }
    40%, 60% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}
.effect-slide-in-right {
    animation-name: slide-in-right-animation;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ZOOM IN (Loop) */
@keyframes zoom-in-animation {
    0% { transform: scale(0.5); opacity: 0; }
    40%, 60% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.5); opacity: 0; }
}
.effect-zoom-in {
    animation-name: zoom-in-animation;
    animation-timing-function: ease-out;
}

/* MARQUEE (New) */
@keyframes marquee-animation {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
.effect-marquee {
    animation-name: marquee-animation;
    animation-timing-function: linear;
    /* animation-duration will be set by JS, e.g., 10s for normal speed */
    /* Ensure the text container allows overflow for marquee */
    display: inline-block; /* Or block, depending on layout needs */
    padding-left: 100%; /* Start off-screen to the right */
}
.fullscreen-display.marquee-active .fullscreen-display-text {
    /* If marquee needs specific container help */
}


/* --- Random Color Effects on displayDiv --- */
.display-effect-fade {
    /* Fade is handled by JS setting transition duration */
}
.display-effect-blink-slow {
    animation: blink-animation 2s infinite step-start;
}
.display-effect-blink-fast {
    animation: blink-animation 0.7s infinite step-start;
}


/* --- Admin Page Styles --- */
.admin-container {
    padding: 20px;
    max-width: 800px; /* Increased width for more controls */
    margin: 30px auto;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.admin-container h1 { text-align: center; color: #333; margin-bottom: 25px; font-size: 2em; }
.admin-container h2 { color: #555; border-bottom: 2px solid #007bff; padding-bottom: 8px; margin-top: 30px; margin-bottom: 15px; font-size: 1.5em; }
.admin-container h3 { color: #444; margin-top: 20px; margin-bottom: 10px; font-size: 1.2em; }
.admin-container label { display: block; margin-top: 12px; margin-bottom: 5px; color: #555; font-weight: bold; }
.admin-container input[type="text"],
.admin-container input[type="color"],
.admin-container input[type="number"],
.admin-container select,
.admin-container textarea { /* Added textarea */
    width: 100%; padding: 10px; margin-top: 5px; border-radius: 6px; border: 1px solid #ccc; box-sizing: border-box; font-size: 0.95em;
}
.admin-container input[type="color"] { height: 45px; padding: 5px; }
.admin-container button { background-color: #007bff; color: white; cursor: pointer; padding: 12px 20px; border: none; border-radius: 6px; font-size: 1em; transition: background-color 0.2s ease; margin-top: 15px; width: 100%; }
.admin-container button:hover { background-color: #0056b3; }
.admin-container .button-group { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } /* Added flex-wrap */
.admin-container .button-group button { flex-grow: 1; width: auto; min-width: 120px; } /* Added min-width */
.control-section { background-color: #f9f9f9; padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #eee; }
.color-profile-edit-area .color-input-group,
.gradient-color-stop { /* Added gradient-color-stop */
    display: flex; align-items: center; gap: 10px; margin-bottom: 5px;
}
.color-profile-edit-area .color-input-group input[type="color"],
.gradient-color-stop input[type="color"] { /* Added gradient-color-stop */
    width: auto; flex-grow: 1;
}
.color-profile-edit-area .color-input-group label,
.gradient-color-stop label { /* Added gradient-color-stop */
    margin-top: 0; min-width: 20px;
}
.admin-container fieldset { border: 1px solid #ccc; border-radius: 6px; padding: 10px; margin-bottom: 15px; }
.admin-container legend { font-weight: bold; color: #333; padding: 0 5px; }

/* Styles for Sequence Editor */
.sequence-step {
    border: 1px dashed #ccc;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    background-color: #fff;
}
.sequence-step label {
    font-weight: normal;
    font-size: 0.9em;
}
.sequence-step input[type="number"], .sequence-step select {
    width: auto; /* Smaller inputs for sequence steps */
    padding: 5px;
    margin-right: 10px;
}
.sequence-step .step-controls button {
    width: auto;
    padding: 5px 10px;
    font-size: 0.8em;
    margin-top: 5px;
    margin-right: 5px;
}
.sequence-step-details {
    font-size: 0.85em;
    color: #666;
    padding: 5px;
    background-color: #efefef;
    border-radius: 3px;
    margin-top: 5px;
    white-space: pre-wrap; /* Show JSON-like details */
    word-break: break-all;
}

/* Audio Reactive styling */
#audioVisualizer {
    width: 100%;
    height: 50px;
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    margin-top: 10px;
}