/* ================================================
   LH Language Lab — AI Speech Recorder v2.2
   Fixed slider, dual buttons, premium UI
   ================================================ */

.lhlr-wrap, .lhlr-mini {
    --accent: #6C63FF; --accent-rgb: 108,99,255;
    --radius: 16px; --radius-s: 10px; --radius-xs: 6px;
    --font-d: 'Playfair Display', Georgia, serif;
    --font-b: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --ease: 0.3s cubic-bezier(0.4,0,0.2,1);
    --bounce: 0.5s cubic-bezier(0.34,1.56,0.64,1);
    --glow: 0 0 40px rgba(var(--accent-rgb),0.25);
}
.lhlr-wrap[data-theme="dark"], .lhlr-mini[data-theme="dark"] {
    --bg:#0D0F14;--surface-1:#151820;--surface-2:#1C1F2B;--surface-3:#252836;
    --border:rgba(255,255,255,0.06);--border-a:rgba(var(--accent-rgb),0.2);
    --text:#F1F2F6;--text-2:#A0A4B8;--text-3:#5C6078;
}
.lhlr-wrap[data-theme="light"], .lhlr-mini[data-theme="light"] {
    --bg:#F8F9FC;--surface-1:#FFFFFF;--surface-2:#F0F1F6;--surface-3:#E4E6EF;
    --border:rgba(0,0,0,0.06);--border-a:rgba(var(--accent-rgb),0.15);
    --text:#1A1D2E;--text-2:#5A5E78;--text-3:#9498AE;
}

/* Container */
.lhlr-wrap { font-family:var(--font-b); color:var(--text); background:var(--bg); border-radius:var(--radius); border:1px solid var(--border); padding:28px; max-width:680px; margin:32px auto; position:relative; overflow:hidden; box-shadow:0 16px 64px rgba(0,0,0,0.16); line-height:1.5; }
.lhlr-wrap::before { content:''; position:absolute; top:-120px; right:-120px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),0.12) 0%,transparent 70%); pointer-events:none; z-index:0; }
.lhlr-wrap > * { position:relative; z-index:1; }

/* Header */
.lhlr-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.lhlr-header-left { display:flex; align-items:center; gap:14px; }
.lhlr-logo { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(var(--accent-rgb),0.1); border:1px solid rgba(var(--accent-rgb),0.15); }
.lhlr-title { font-family:var(--font-d); font-size:20px; font-weight:600; margin:0; letter-spacing:-0.02em; color:var(--text); }
.lhlr-subtitle { font-size:11px; color:var(--text-3); font-weight:500; letter-spacing:0.04em; text-transform:uppercase; }
.lhlr-icon-btn { width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-xs); border:1px solid var(--border); background:var(--surface-1); color:var(--text-2); cursor:pointer; transition:var(--ease); }
.lhlr-icon-btn:hover { background:var(--surface-2); color:var(--text); border-color:var(--border-a); }

/* Video sync badge */
.lhlr-sync-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:100px; background:rgba(78,205,196,0.1); border:1px solid rgba(78,205,196,0.2); color:#4ECDC4; font-size:11px; font-weight:600; letter-spacing:0.02em; animation:sync-fade-in 0.5s ease; }
@keyframes sync-fade-in { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }

/* Prompt */
.lhlr-prompt { background:var(--surface-1); border:1px solid var(--border-a); border-radius:var(--radius-s); padding:16px 20px; margin-bottom:20px; border-left:3px solid var(--accent); }
.lhlr-prompt-label { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent); margin-bottom:8px; }
.lhlr-prompt-text { font-size:15px; line-height:1.6; color:var(--text); margin:0; font-style:italic; }

/* Visualizer */
.lhlr-viz-wrap { margin-bottom:24px; }
.lhlr-viz { height:160px; background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-s); position:relative; overflow:hidden; }
.lhlr-canvas { width:100%; height:100%; display:block; }
.lhlr-viz-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; transition:opacity 0.4s ease; }
.lhlr-viz-overlay.hidden { opacity:0; }
.lhlr-rings { position:relative; width:70px; height:70px; margin-bottom:10px; }
.lhlr-ring { position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(var(--accent-rgb),0.15); }
.r1 { animation:ring-p 3s ease-in-out infinite; }
.r2 { animation:ring-p 3s ease-in-out infinite 1s; inset:-8px; }
.r3 { animation:ring-p 3s ease-in-out infinite 2s; inset:-16px; }
@keyframes ring-p { 0%,100%{transform:scale(0.95);opacity:0.3} 50%{transform:scale(1.05);opacity:0.7} }
.lhlr-status-text { font-size:13px; color:var(--text-3); font-weight:500; }

/* Live transcript */
.lhlr-live-transcript { background:var(--surface-1); border:1px solid var(--border-a); border-radius:var(--radius-xs); padding:12px 16px; margin-top:10px; max-height:80px; overflow-y:auto; }
.lhlr-live-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent); display:block; margin-bottom:4px; }
.lhlr-live-text { font-size:13px; color:var(--text-2); margin:0; line-height:1.5; }

/* ========================
   TIMELINE / SLIDER — FIXED
   ======================== */
.lhlr-timeline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 0 4px;
}
.lhlr-time {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    user-select: none;
}
.lhlr-time:last-child { text-align: right; }

.lhlr-track {
    flex: 1;
    height: 6px;
    background: var(--surface-3);
    border-radius: 3px;
    position: relative;
    /* ← Expand touch target vertically */
    padding: 14px 0;
    margin: -14px 0;
    background-clip: content-box;
}

.lhlr-track-fill {
    height: 6px;
    background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0.7));
    border-radius: 3px;
    width: 0%;
    position: absolute;
    top: 14px; /* align with padding */
    left: 0;
    pointer-events: none;
    transition: none; /* no transition — must follow slider exactly */
}

/* The range input — overlays the track, full touch target */
.lhlr-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* fills the padded area = 34px tall touch target */
    margin: 0;
    padding: 0;
    opacity: 0; /* invisible but fully interactive */
    cursor: pointer;
    z-index: 2;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
}

/* Webkit thumb (Chrome, Safari, Edge) */
.lhlr-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    cursor: grab;
}
.lhlr-slider::-webkit-slider-thumb:active { cursor: grabbing; }

/* Firefox thumb */
.lhlr-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    cursor: grab;
}

/* Visual thumb dot on the fill bar */
.lhlr-track-fill::after {
    content: '';
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5);
    pointer-events: none;
    /* Always visible when there's a recording */
    opacity: 1;
    transition: transform 0.15s ease;
}

.lhlr-track:hover .lhlr-track-fill::after,
.lhlr-track:active .lhlr-track-fill::after {
    transform: translateY(-50%) scale(1.3);
}

/* ========================
   CONTROLS
   ======================== */
.lhlr-controls { display:flex; flex-direction:column; align-items:center; gap:20px; margin-bottom:8px; }
.lhlr-controls-main { display:flex; align-items:center; gap:16px; }
.lhlr-ctrl-btn { width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--border); background:var(--surface-1); color:var(--text-2); cursor:pointer; transition:var(--ease); }
.lhlr-ctrl-btn:hover:not(:disabled) { background:var(--surface-2); color:var(--text); border-color:var(--border-a); transform:scale(1.05); }
.lhlr-ctrl-btn:disabled { opacity:0.3; cursor:not-allowed; }

/* Record (red) */
.lhlr-rec-btn { width:72px; height:72px; border-radius:50%; border:3px solid #EF4444; background:rgba(239,68,68,0.08); color:#EF4444; cursor:pointer; position:relative; display:flex; align-items:center; justify-content:center; transition:var(--ease); }
.lhlr-rec-btn:hover { background:rgba(239,68,68,0.15); transform:scale(1.05); box-shadow:0 0 30px rgba(239,68,68,0.2); }
.lhlr-rec-btn.is-rec { background:rgba(239,68,68,0.18); animation:rec-breathe 1.5s ease-in-out infinite; }
.lhlr-rec-pulse { position:absolute; inset:-8px; border-radius:50%; border:2px solid #EF4444; opacity:0; pointer-events:none; }
.lhlr-rec-btn.is-rec .lhlr-rec-pulse { animation:pulse-ring 1.5s ease-out infinite; }
@keyframes rec-breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
@keyframes pulse-ring { 0%{transform:scale(1);opacity:0.6} 100%{transform:scale(1.6);opacity:0} }

/* Play (accent) */
.lhlr-play-btn { width:72px; height:72px; border-radius:50%; border:3px solid var(--accent); background:rgba(var(--accent-rgb),0.08); color:var(--accent); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--ease); }
.lhlr-play-btn:hover:not(:disabled) { background:rgba(var(--accent-rgb),0.18); transform:scale(1.05); box-shadow:var(--glow); }
.lhlr-play-btn:disabled { opacity:0.3; cursor:not-allowed; }
.lhlr-play-btn.is-play { background:rgba(var(--accent-rgb),0.15); }

/* Pills */
.lhlr-controls-sec { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.lhlr-pill { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:100px; border:1px solid var(--border); background:var(--surface-1); color:var(--text-2); font-family:var(--font-b); font-size:13px; font-weight:600; cursor:pointer; transition:var(--ease); white-space:nowrap; }
.lhlr-pill:hover:not(:disabled) { background:var(--surface-2); color:var(--text); border-color:var(--border-a); transform:translateY(-1px); }
.lhlr-pill:disabled { opacity:0.3; cursor:not-allowed; }
.lhlr-pill-accent { background:linear-gradient(135deg,rgba(var(--accent-rgb),0.12),rgba(var(--accent-rgb),0.05)); border-color:rgba(var(--accent-rgb),0.25); color:var(--accent); }
.lhlr-pill-accent:hover:not(:disabled) { background:linear-gradient(135deg,rgba(var(--accent-rgb),0.2),rgba(var(--accent-rgb),0.1)); box-shadow:var(--glow); }

/* ========================
   ANALYSIS PANEL
   ======================== */
.lhlr-panel { margin-top:24px; background:var(--surface-1); border:1px solid var(--border-a); border-radius:var(--radius-s); overflow:hidden; animation:slide-up 0.5s cubic-bezier(0.16,1,0.3,1); }
@keyframes slide-up { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.lhlr-panel-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); background:rgba(var(--accent-rgb),0.03); }
.lhlr-panel-title { display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; color:var(--text); }
.lhlr-panel-body { padding:0; }
.lhlr-loading { padding:48px 20px; text-align:center; }
.lhlr-dots { display:flex; justify-content:center; gap:8px; margin-bottom:20px; }
.lhlr-dots span { width:12px; height:12px; border-radius:50%; background:var(--accent); animation:dot-b 1.4s ease-in-out infinite; }
.lhlr-dots span:nth-child(2) { animation-delay:0.16s; }
.lhlr-dots span:nth-child(3) { animation-delay:0.32s; }
@keyframes dot-b { 0%,80%,100%{transform:scale(0.6);opacity:0.4} 40%{transform:scale(1);opacity:1} }
.lhlr-loading-title { font-weight:600; font-size:16px; color:var(--text); margin:0 0 6px; }
.lhlr-loading-sub { font-size:13px; color:var(--text-3); margin:0; }
.lhlr-results { padding:24px 20px; }
.lhlr-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 16px; background:var(--surface-2); border:1px solid var(--border-a); border-radius:100px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--accent); margin-bottom:20px; }
.lhlr-scores { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:28px; }
.lhlr-score { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px; background:var(--surface-2); border-radius:var(--radius-s); border:1px solid var(--border); transition:var(--ease); }
.lhlr-score:hover { border-color:var(--border-a); transform:translateY(-2px); }
.lhlr-score-ring { position:relative; width:58px; height:58px; }
.lhlr-score-ring svg { width:100%; height:100%; }
.lhlr-arc { transition:stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1); }
.lhlr-score-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.lhlr-score-lbl { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-3); }
.lhlr-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.lhlr-tag { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; background:rgba(78,205,196,0.1); color:#4ECDC4; border-radius:100px; font-size:13px; font-weight:500; border:1px solid rgba(78,205,196,0.2); }
.lhlr-section { margin-bottom:16px; border:1px solid var(--border); border-radius:var(--radius-s); overflow:hidden; }
.lhlr-section-head { padding:12px 18px; background:var(--surface-2); font-weight:600; font-size:14px; color:var(--text); }
.lhlr-section-body { padding:16px 18px; }
.lhlr-body-text { font-size:14px; line-height:1.7; color:var(--text-2); margin:0; }
.lhlr-fb { padding:14px 16px; margin-bottom:10px; background:var(--surface-2); border-radius:var(--radius-xs); border-left:3px solid var(--accent); }
.lhlr-fb:last-child { margin-bottom:0; }
.lhlr-fb-cat { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px; }
.lhlr-fb-sum { font-size:14px; color:var(--text); margin-bottom:10px; font-weight:500; }
.lhlr-fb-issue { padding:10px 12px; margin-top:8px; background:var(--surface-1); border-radius:var(--radius-xs); font-size:13px; color:var(--text-2); line-height:1.6; }
.lhlr-fb-issue p { margin:0; }
.lhlr-label-warn { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700; background:rgba(255,179,71,0.12); color:#FFB347; }
.lhlr-ok { color:#4ECDC4; font-weight:600; }
.lhlr-wrong { text-decoration:line-through; color:#EF4444; opacity:0.7; }
.lhlr-tip { display:flex; gap:14px; padding:14px 16px; margin-bottom:10px; background:var(--surface-2); border-radius:var(--radius-xs); align-items:flex-start; }
.lhlr-tip:last-child { margin-bottom:0; }
.lhlr-tip-dot { flex-shrink:0; width:8px; height:8px; border-radius:50%; margin-top:6px; }
.lhlr-tip-dot.high { background:#EF4444; box-shadow:0 0 8px rgba(239,68,68,0.4); }
.lhlr-tip-dot.medium { background:#FFB347; box-shadow:0 0 8px rgba(255,179,71,0.4); }
.lhlr-tip-dot.low { background:#4ECDC4; box-shadow:0 0 8px rgba(78,205,196,0.4); }
.lhlr-tip-body { flex:1; }
.lhlr-tip-area { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-3); margin-bottom:3px; }
.lhlr-tip-text { font-size:14px; color:var(--text); line-height:1.5; margin-bottom:4px; }
.lhlr-tip-ex { font-size:12px; color:var(--accent); font-style:italic; padding:8px 12px; background:rgba(var(--accent-rgb),0.06); border-radius:var(--radius-xs); margin-top:6px; }
.lhlr-encourage { padding:16px 20px; background:linear-gradient(135deg,rgba(var(--accent-rgb),0.08),rgba(var(--accent-rgb),0.03)); border:1px solid rgba(var(--accent-rgb),0.15); border-radius:var(--radius-s); font-size:14px; color:var(--text); line-height:1.6; font-style:italic; text-align:center; margin-top:16px; }
.lhlr-notice { display:flex; align-items:flex-start; gap:10px; padding:12px 16px; margin-top:16px; border-radius:var(--radius-xs); background:rgba(255,179,71,0.08); border:1px solid rgba(255,179,71,0.2); font-size:12px; color:var(--text-2); line-height:1.5; }
.lhlr-notice strong { color:var(--text); }

/* Mini */
.lhlr-mini { font-family:var(--font-b); color:var(--text); background:var(--bg); border-radius:var(--radius-s); border:1px solid var(--border); padding:16px; max-width:300px; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.lhlr-mini-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.lhlr-mini-title { font-size:13px; font-weight:600; color:var(--text); }
.lhlr-mini-time { font-size:12px; font-weight:600; color:var(--text-3); font-variant-numeric:tabular-nums; }
.lhlr-mini-viz { height:48px; background:var(--surface-1); border-radius:var(--radius-xs); margin-bottom:12px; overflow:hidden; }
.lhlr-mini-viz canvas { width:100%; height:100%; display:block; }
.lhlr-mini-ctrls { display:flex; justify-content:center; gap:10px; }
.lhlr-mini-btn { width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--border); background:var(--surface-1); color:var(--text-2); cursor:pointer; transition:var(--ease); }
.lhlr-mini-btn:hover:not(:disabled) { background:rgba(var(--accent-rgb),0.1); border-color:var(--accent); color:var(--accent); }
.lhlr-mini-btn:disabled { opacity:0.3; cursor:not-allowed; }
.lhlr-mini-btn.is-rec { background:rgba(239,68,68,0.15); border-color:#EF4444; color:#EF4444; animation:rec-breathe 1.5s ease-in-out infinite; }

/* Responsive */
@media (max-width:640px) {
    .lhlr-wrap { padding:20px; margin:16px; border-radius:12px; }
    .lhlr-scores { grid-template-columns:repeat(3,1fr); }
    .lhlr-controls-main { gap:10px; }
    .lhlr-rec-btn, .lhlr-play-btn { width:62px; height:62px; }
    .lhlr-ctrl-btn { width:42px; height:42px; }
    .lhlr-controls-sec { flex-direction:column; width:100%; }
    .lhlr-pill { justify-content:center; }
    .lhlr-subtitle { display:none; }
}
@media (max-width:420px) {
    .lhlr-scores { grid-template-columns:repeat(2,1fr); }
    .lhlr-rec-btn, .lhlr-play-btn { width:56px; height:56px; }
    .lhlr-rec-btn svg, .lhlr-play-btn svg { width:20px; height:20px; }
}

.lhlr-wrap *:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) {
    .r1,.r2,.r3,.lhlr-dots span,.lhlr-rec-btn.is-rec,.lhlr-rec-pulse,.lhlr-mini-btn.is-rec { animation:none !important; }
}