* { margin:0; padding:0; box-sizing:border-box; }
:root { --bg-color:#ffffff; --text-color:#000000; --guide-color:#ff0000; --main-width:55%; --font-size:48px; --line-height:1.7; }
body { width:100vw; height:100vh; overflow:hidden; background:var(--bg-color); color:var(--text-color); font-family:Calibri,Arial,sans-serif; user-select:none; }
#container { position: fixed;top: 80px; left: 0; width: 88%;height: calc(100vh - 80px);overflow: hidden;z-index:9999;margin-top: 20px; inset:18px; background:#fff; border:3px solid #000; border-radius:12px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,0.18); }

#text { position:absolute; width:75%; text-align: center;left: 0;padding: 0 70px; transform:translateX(5%); top:100%; font-size:var(--font-size); line-height:var(--line-height); color:var(--text-color); text-align:left; letter-spacing:0.3px; word-break:break-word; overflow-wrap: break-word;white-space: normal !important;text-shadow:0px 2px 6px rgba(0,0,0,0.15); transition:top 0.08s linear; }

#text .line, #text p, #text div, #text h1 { 
    padding: 0 20px;
    box-sizing: border-box;
    max-width: 100%;
    white-space: normal;         /* ✅ ye add karo — line ko wrap hone do */
    word-wrap: break-word;        /* ✅ lambe words bhi tootenge agar zaroorat pade */
    overflow-wrap: break-word;    /* ✅ extra safety, same purpose */
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 4px;
}
#text .center-highlight { 
    background-color: #000000 !important; 
    color: #ffffff !important; 
    display: inline-block; 
    width: 80%; 
    padding: 4px 8px; 
    border-radius: 6px;
	align:left;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
#text .center-highlight * { 
    background-color: transparent !important;
    color: #ffffff !important;
}
#guide { position:absolute; top:50%; left:0; width:100%; border-top:3px dashed var(--guide-color); opacity:0.6; pointer-events:none; z-index:10; }

/* Camera Preview - MJPEG Support */
#cameraPreview { position:fixed; left:;top:40px;bottom:50px; right:100px; width:480px; height:780; border-radius:12px; border:3px solid #fff; box-shadow:0 8px 30px rgba(0,0,0,0.5); z-index:99999; background:#000; overflow:hidden; display:none; cursor:move; }
#cameraPreview img { width:100%; height:100%; object-fit:cover; background:#111; }
#cameraPreview .pip-controls { position:absolute; top:8px; right:8px; display:flex; gap:6px; z-index:10; }
#cameraPreview .pip-controls button { background:rgba(0,0,0,0.7); color:#fff; border:none; border-radius:50%; width:28px; height:28px; cursor:pointer; font-size:14px; transition:0.2s; }
#cameraPreview .pip-controls button:hover { background:rgba(255,255,255,0.3); }
#cameraPreview .pip-label { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.6); color:#fff; padding:2px 12px; border-radius:10px; font-size:11px; font-weight:bold; z-index:10; }

/* ========== NEW: Camera Timer Overlay ========== */
#cameraTimerOverlay {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.75);
    padding: 6px 14px 6px 10px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.15);
}
#recordingDot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff1744;
    display: none;
    box-shadow: 0 0 10px rgba(255,23,68,0.6);
}
#recordingDot.active {
    display: block;
    animation: blinkRed 1s infinite;
}
@keyframes blinkRed {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}
#cameraTimer {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
    background: rgba(0,0,0,0.3);
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 65px;
    text-align: center;
}
#cameraTimerLabel {
    color: rgba(255,255,255,0.5);
    font-size: 10px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
#recordBtnOverlay {
    position: absolute;
    top: 12px;
    right: 60px;
    z-index: 20;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: #fff;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    cursor: pointer;
    transition: 0.2s;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.1);
}
#recordBtnOverlay:hover { background: rgba(255,255,255,0.2); }
#recordBtnOverlay.recording { background: #ff1744; border-color: #ff1744; animation: pulseRed 1s infinite; }
@keyframes pulseRed {
    0% { box-shadow: 0 0 0 0 rgba(255,23,68,0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255,23,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,23,68,0); }
}

#cameraPreview .loading-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; z-index:5; flex-direction:column; gap:10px; }
#cameraPreview .loading-overlay .spinner { width:30px; height:30px; border:3px solid #fff; border-top-color:#0a84ff; border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

#voiceStatus { position:fixed; top:80px; left:50%; transform:translateX(-50%); padding:8px 20px; border-radius:20px; font-size:14px; font-weight:bold; z-index:9999; display:none; }
#voiceStatus.speaking { background:#00c853; color:#fff; display:block; animation:pulse 1s infinite; }
#voiceStatus.silent { background:#ff1744; color:#fff; display:block; animation:pulse 1s infinite; }
@keyframes pulse { 0%{opacity:1;} 50%{opacity:0.7;} 100%{opacity:1;} }

#status { position:fixed; top:25px; right:25px; min-width:180px; padding:14px 18px; background:#111; color:#fff; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,0.18); font-size:14px; line-height:1.6; z-index:9999; }
#timer { position:fixed; left:25px; top:25px; padding:12px 16px; background:#111; color:#fff; border-radius:10px; font-size:18px; box-shadow:0 8px 20px rgba(0,0,0,0.18); z-index:9999; }
#progress { position:fixed; left:0; bottom:0; width:0%; height:6px; background:#0a84ff; transition:width 0.2s linear; z-index:9999; }

#commandsPanel { position:fixed; right:18px; top:1240px; transform:translateY(-80%); background:rgba(20,20,20,0.92); backdrop-filter:blur(6px); color:#fff; padding:18px 16px; border-radius:14px; z-index:99999; width:1000px; box-shadow:0 8px 30px rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.15); pointer-events:none; }
#commandsPanel h4 { text-align:center; margin-bottom:14px; font-size:15px; border-bottom:1px solid #555; padding-bottom:8px; color:#ffcc00; }
.cmd-item { display:flex; justify-content:space-between; padding:6px 0; font-size:13px; border-bottom:1px solid rgba(255,255,255,0.06); }
.cmd-word { font-weight:bold; color:#66ffcc; }
.cmd-desc { color:#ccc; font-size:12px; text-align:right; padding-left:10px; }

#topBar { 
    position: fixed;
    top: 25px;              /* bottom:25px ki jagah top:25px */
    left: 130px;             /* timer box ke turant baad se shuru */
    bottom: auto;             /* purani bottom value cancel karo */
    transform: none;          /* purana translateX hata do */
    display: flex; align-items: center; 
    gap: 10px; 
    padding: 10px 18px; 
    background: rgba(24, 133, 6, 0.9); 
    color: #fff; 
    border-radius: 12px; 
    z-index: 999999; 
    backdrop-filter: blur(8px); 

    flex-wrap:wrap; 
    flex-direction: row;
    justify-content: center; 
    height: 55px; 
    max-width: calc(100% - 150px); 
}

#topBar button, #topBar input, #topBar label { color:#fff; }
.ctrlBtn { padding:6px 12px; border:none; border-radius:8px; font-weight:bold; cursor:pointer; background:#fff; color:#000; transition:0.2s;margin-bottom:32px; }
.ctrlBtn:hover { background:#ddd; transform:scale(1.05); }
.ctrlBtn.active { background:#00c853; color:#fff; }
.ctrlBtn.inactive { background:#ff1744; color:#fff; }
.ctrlLabel { font-size:13px;}
input[type="range"] { cursor:pointer; width:70px;transform: translateh(10px);vertical-align: middle;}
input[type="text"] { padding:4px 8px; border-radius:6px; border:none; font-size:12px; width:160px; background:#333; color:#fff;margin-top:5px;display: inline-block;vertical-align: middle; }
.themeBtn { width:28px; height:28px; border-radius:50%; border:2px solid #fff; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; background:#fff; margin-bottom:30px;}
#fileInput { background:#fff; border:2px solid #000; padding:4px; border-radius:6px; color:#000; max-width:110px; }
#voiceWave { display:none; align-items:center; gap:3px; height:20px; }
#voiceWave.active { display:flex; }
.waveBar { width:4px; height:5px; background:#00c853; border-radius:2px; animation:waveAnim 0.5s infinite alternate; }
.waveBar:nth-child(2) { height:10px; animation-delay:0.1s; }
.waveBar:nth-child(3) { height:15px; animation-delay:0.2s; }
.waveBar:nth-child(4) { height:20px; animation-delay:0.3s; }
.waveBar:nth-child(5) { height:15px; animation-delay:0.2s; }
.waveBar:nth-child(6) { height:10px; animation-delay:0.1s; }
.waveBar:nth-child(7) { height:5px; }
@keyframes waveAnim { 0%{transform:scaleY(0.3);} 100%{transform:scaleY(1);} }

#toast { position:fixed; bottom:90px; left:50%; transform:translateX(-50%); background:#111; color:#fff; padding:10px 22px; border-radius:10px; z-index:999999; opacity:0; transition:0.3s; pointer-events:none; font-size:14px; max-width:80%; text-align:center; }
#toast.show { opacity:1; }
.hideCursor { cursor:none; }
.camera-btn { background:#0a84ff !important; color:#fff !important; }
.camera-btn.active { background:#ff1744 !important; }

@media (max-width:1024px) { :root{--font-size:34px;--main-width:80%;} #commandsPanel{display:none;} #cameraPreview{width:200px;height:150px;right:20px;bottom:80px;} input[type="text"]{width:100px;font-size:10px;} }
@media (max-width:768px) { #commandsPanel{display:none;} #status{display:none;} #cameraPreview{width:150px;height:110px;right:10px;bottom:70px;} #cameraTimer{font-size:11px;min-width:50px;} }
/* Save Script Button Styling */
.btn-save {
    background-color: #28a745;       /* Green color */
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	margin-bottom;50px;
}

.btn-save:hover {
    background-color: #218838;       /* Hover par thoda dark green */
    transform: translateY(-1px);
}

.btn-save:active {
    transform: translateY(0);
}