body { font-family: sans-serif; text-align: center; margin: 0; background-color: white; transition: background-color 0.3s; overscroll-behavior-y: none;
-webkit-user-select: none;
  user-select: none;
  touch-action: manipulation; /* disables double-tap zoom */
} 
button { cursor: pointer; border: none; font-weight: bold; }

#setupUI { margin-top: 50px; }
#connectBtn { padding: 15px 30px; font-size: 18px; border-radius: 8px; background: #007bff; color: white; }
#log { margin-top: 30px; color: #555; font-size: 14px; padding: 0 20px; word-wrap: break-word; line-height: 1.4; }
.error { color: red; font-weight: bold; }

#aboutLink {
    display: inline-block;
    margin-top: 40px;
    font-size: 13px;
    color: #999;
    text-decoration: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid #ddd;
    padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
}
#aboutLink:hover { color: #007bff; border-color: #007bff; }

#homeBtn {
    position: fixed;
    top: 10px; left: 12px;
    z-index: 200;
    background: transparent;
    color: #888;
    font-size: 26px;
    padding: 2px 8px;
    border-radius: 6px;
    line-height: 1;
    transition: color 0.2s;
}
#homeBtn:hover { color: white; }

#trainingUI { display: none; }

body.connected { background-color: black; color: white; }
body.connected #setupUI { display: none; }
body.connected #trainingUI {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    height: 100vh; padding-top: 2vh; box-sizing: border-box;
}

#heartRateDisplay { font-size: 25vw; margin: 0; line-height: 1; }

#stateIndicatorContainer {
    position: relative;
    width: 200px;
    height: 200px;
    margin-top: calc(3vh - 20px);
    margin-right: 0;
    margin-bottom: calc(3vh - 40px);
    margin-left: 0;
    flex-shrink: 0;
}

/* HR history graph — 90×120 canvas centred on the 120×120 state dot.
   Dot centre in the 200×200 container = (100, 100).
   Canvas left = 100 − 45 = 55px, top = 100 − 60 = 40px. */
#hrGraphCanvas {
    position: absolute;
    left: 55px;
    top: 40px;
    pointer-events: none;
    z-index: 1;
}

#speedometerSVG {
    position: absolute;
    top: 0; left: 0;
    width: 200px; height: 200px;
    pointer-events: none;
}

.state-dot {
    position: absolute;
    top: 40px; left: 40px;
    width: 120px; height: 120px; border-radius: 50%; transition: background-color 0.3s;
}
.state-dot.stopped { background-color: #333333; }
.state-dot.active { background-color: #28a745; }
.state-dot.rest { background-color: #fd7e14; }
.state-dot.reset { background-color: #dc3545; }
.state-dot.reset-rfb { background-color: #1a7fff; }
.state-dot.reset-hrv { background-color: #7c3aed; }
.state-dot.pause { background-color: #888888; }

@keyframes reconnect-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.88); }
}
.state-dot.reconnecting {
    animation: reconnect-pulse 1.2s ease-in-out infinite;
}

#stateDescription {
    font-size: 18px; 
    color: #aaaaaa;
    height: 4vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -1vh; 
    margin-bottom: 4px;
}

#coherenceDisplay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 3vh;
    margin-bottom: 12px;
}
#coherenceRow, #asiRow {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
}
.coherence-label {
    font-size: 10px;
    letter-spacing: 0.14em;
    color: #555;
    font-family: sans-serif;
    text-transform: uppercase;
}
.coherence-value {
    font-family: monospace;
    font-size: 18px;
    font-weight: bold;
    transition: color 0.6s;
}

/* New Stats Block (80% of Timer size) */
.stat-block { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    font-family: monospace; 
    font-size: 9.6vw; 
    color: #ddd; 
}

.stat-block .long-time { font-size: 6vw; }

#timersContainer {
    display: flex; 
    flex-direction: column; 
    align-items: center;
    width: 100%;
    margin-bottom: 4vh; 
}

.timers-row {
    display: flex; 
    justify-content: space-around; 
    width: 90%;
    margin-bottom: 2vh; 
}

.timer-block { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    font-family: monospace; 
    font-size: 12vw; 
}

.timer-block .long-time { font-size: 7.5vw; }

.timer-label { 
    font-size: 3vw; 
    color: #888; 
    font-family: sans-serif; 
    margin-top: -5px; 
    letter-spacing: 1px; 
}

/* Action Buttons Grid */
#actionButtonsContainer {
    display: flex;
    justify-content: center;
    align-items: stretch; 
    gap: 15px; 
    width: 90%;
    max-width: 400px;
    margin-bottom: 2vh;
}

#manualResetBtn {
    width: 64px; 
    flex-shrink: 0;
    font-size: 32px; 
    border-radius: 12px;
    background: #dc3545; 
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 4px; 
}
#manualResetBtn.rfb { background: #1a7fff; transition: background 0.3s; }

#toggleSessionBtn {
    padding: 20px 0; 
    flex-grow: 1; 
    font-size: 24px; 
    border-radius: 12px;
    background: #28a745; 
    color: white;
}
#toggleSessionBtn.running { background: #dc3545; }
#toggleSessionBtn.running.paused { background: #28a745; }

/* Pause / End / Cancel modal */
#sessionModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 100;
    align-items: center;
    justify-content: center;
}
#sessionModal.visible { display: flex; }
#sessionModalBox {
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 16px;
    padding: 28px 24px 20px;
    width: 82vw;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#sessionModalBox p {
    margin: 0 0 4px;
    font-size: 18px;
    color: #ddd;
    text-align: center;
}
.modal-btn {
    width: 100%;
    padding: 16px 0;
    font-size: 20px;
    border-radius: 10px;
    color: white;
}
#modalPauseBtn  { background: #888888; }
#modalEndBtn    { background: #dc3545; }
#modalCancelBtn { background: #444444; }

/* ─── Resonance Breathing time-up modal ──────────────────────────────────── */
#rbTimeUpModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 100;
    align-items: center;
    justify-content: center;
}
#rbTimeUpModal.visible { display: flex; }
#rbTimeUpModalBox {
    background: #1a1a1a;
    border: 1px solid #1a7fff;
    border-radius: 16px;
    padding: 28px 24px 20px;
    width: 82vw;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#rbTimeUpModalBox p {
    margin: 0 0 4px;
    font-size: 18px;
    color: #ddd;
    text-align: center;
}
#rbTimeUpEndBtn    { background: #dc3545; }
#rbTimeUpExtendBtn { background: #1a7fff; }

/* ─── Setup links ─────────────────────────────────────────────────────────── */
#setupLinks {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
#setupLinks a {
    display: inline-block;
    font-size: 13px;
    color: #999;
    text-decoration: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid #ddd;
    padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
}
#setupLinks a:hover { color: #007bff; border-color: #007bff; }

/* ─── Session Summary Modal ───────────────────────────────────────────────── */
#summaryModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 200;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 16px 0 32px;
}
#summaryModal.visible { display: flex; }

#summaryModalBox {
    background: #111;
    border: 1px solid #333;
    border-radius: 18px;
    padding: 20px 16px 16px;
    width: 92vw;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.summary-title {
    margin: 0 0 4px;
    font-size: 20px;
    color: #eee;
    text-align: center;
    font-weight: 700;
}

.summary-section {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 10px 12px 12px;
}

.summary-section-header {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #2a2a2a;
}
.active-header   { color: #28a745; }
.recovery-header { color: #fd7e14; }
.lag-header      { color: #17a2b8; }
.session-header  { color: #aaa; }
.rfb-header      { color: #1a7fff; }
.hrv-header      { color: #7c3aed; }

.hrv-short-note {
    font-size: 12px;
    color: #a78bfa;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #2a2a2a;
    text-align: center;
    line-height: 1.5;
}

.summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px 4px;
}

.summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.summary-stat span {
    font-family: monospace;
    font-size: 18px;
    color: #ddd;
    line-height: 1.2;
}
.summary-stat label {
    font-size: 10px;
    color: #666;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Wide cell that spans full row in a 3-col grid (used for lone Avg HR cell) */
.summary-stat-wide {
    grid-column: 1 / -1;
}

#summaryNotes {
    width: 100%;
    box-sizing: border-box;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 10px;
    color: #ccc;
    font-size: 15px;
    padding: 10px 12px;
    resize: none;
    font-family: sans-serif;
}
#summaryNotes::placeholder { color: #555; }
#summaryNotes:focus { outline: none; border-color: #555; }

#summaryError {
    display: none;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
}
#summaryError.summary-warning {
    display: block;
    background: #1c1800;
    border: 1px solid #4a3a00;
    color: #ffc107;
}
#summaryError.summary-error {
    display: block;
    background: #1e0808;
    border: 1px solid #4a1515;
    color: #f08080;
}

#summaryActions {
    display: flex;
    gap: 10px;
}
#summaryDiscardBtn {
    flex: 1;
    padding: 16px 0;
    font-size: 17px;
    border-radius: 10px;
    background: #333;
    color: #aaa;
    border: none;
    cursor: pointer;
    font-weight: 600;
}
#summarySaveBtn {
    flex: 2;
    padding: 16px 0;
    font-size: 17px;
    border-radius: 10px;
    background: #28a745;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: 700;
}
#summarySaveBtn:active { background: #218838; }

/* ─── Activity Select Modal ───────────────────────────────────────────────── */
#activitySelectModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.82);
    z-index: 100;
    align-items: center;
    justify-content: center;
}
#activitySelectModal.visible { display: flex; }
#activitySelectBox {
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 16px;
    padding: 24px 20px 20px;
    width: 84vw;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
#activitySelectBox h3 {
    margin: 0;
    font-size: 17px;
    color: #ddd;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.04em;
}
#activitySelectDropdown {
    width: 100%;
    background: #252525;
    border: 1px solid #444;
    border-radius: 10px;
    color: white;
    font-size: 16px;
    padding: 10px 12px;
    box-sizing: border-box;
}
#activitySelectDropdown:focus { outline: none; border-color: #4af; }
#activitySelectDesc {
    font-size: 13px;
    color: #999;
    font-style: italic;
    line-height: 1.5;
    padding: 8px 10px;
    background: #111;
    border-radius: 8px;
    border-left: 2px solid #333;
    display: none;
}
#activitySelectActions { display: flex; gap: 10px; }
#activitySelectCancelBtn {
    flex: 1;
    padding: 14px 0;
    font-size: 17px;
    border-radius: 10px;
    background: #333;
    color: #aaa;
    border: none;
    cursor: pointer;
    font-weight: 600;
}
#activitySelectStartBtn {
    flex: 2;
    padding: 14px 0;
    font-size: 17px;
    border-radius: 10px;
    background: #28a745;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: 700;
}
#activitySelectStartBtn:active { background: #218838; }

/* ─── Activity Display (below pause button) ───────────────────────────────── */
#activityDisplay {
    display: none;
    font-size: 13px;
    color: #666;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    margin-top: 8px;
    padding: 4px 16px;
    border-radius: 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid #2a2a2a;
    max-width: 260px;
}

/* ─── Resonance Breathing layout adjustments ─────────────────────────────── */
#stateDescription.rb-mode {
    margin-top: 2vh;
}