/* ============================================================
   ChatBase — 🍅 Study Room (studyroom.js)
   ============================================================ */
.sr-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 16px; max-width: 1000px; }
.sr-timer-card, .sr-side {
    padding: 24px;
    border-radius: 24px;
    border: 1px solid var(--neo-line, rgba(255,255,255,.08));
    background: var(--neo-surface, rgba(22,22,28,.55));
    -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
}
.sr-timer-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.sr-phase { font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--neo-dim, rgba(235,235,245,.6)); }
.sr-ring { position: relative; width: min(280px, 70vw); aspect-ratio: 1; }
.sr-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sr-ring circle { fill: none; stroke-width: 7; }
.sr-ring-bg { stroke: rgba(255,255,255,.08); }
.sr-ring-fg { stroke: var(--neo-accent, #8ab4ff); stroke-linecap: round; transition: stroke-dashoffset .5s linear, stroke .4s; }
#studyroom[data-phase="break"] .sr-ring-fg { stroke: #34e8b0; }
#studyroom[data-phase="paused"] .sr-ring-fg { stroke: #ffb443; }
.sr-clock {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(48px, 12vw, 72px); font-weight: 750; letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}
.sr-round { font-size: 13px; color: var(--neo-faint, rgba(235,235,245,.32)); min-height: 18px; }
.sr-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 44px; }
.sr-btn {
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.07);
    color: #fff; font: inherit; font-size: 14px; font-weight: 650;
    cursor: pointer;
    transition: background .2s, transform .2s var(--neo-spring, ease);
}
.sr-btn:hover { background: rgba(255,255,255,.13); transform: translateY(-1px); }
.sr-primary { background: var(--gradient-purple); border-color: transparent; box-shadow: 0 6px 24px var(--neo-glow, rgba(138,180,255,.35)); }
.sr-ghost { background: transparent; margin-top: 10px; }
.sr-lengths { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; font-size: 12px; color: var(--neo-faint, rgba(235,235,245,.32)); }
.sr-lengths span { margin: 0 4px 0 10px; }
.sr-lengths button {
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--neo-line, rgba(255,255,255,.08));
    background: transparent; color: var(--neo-dim, rgba(235,235,245,.6));
    font: inherit; font-size: 12px; cursor: pointer;
}
.sr-lengths button.on { border-color: var(--neo-accent, #8ab4ff); color: #fff; }
.sr-side { display: flex; flex-direction: column; gap: 12px; }
.sr-muted { margin: 0; font-size: 13px; color: var(--neo-dim, rgba(235,235,245,.6)); line-height: 1.5; }
.sr-join .sr-btn { width: 100%; margin-top: 10px; }
.sr-task-row { display: flex; gap: 8px; margin-top: 6px; }
.sr-input {
    flex: 1; min-width: 0;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.06);
    color: #fff; font: inherit; font-size: 14px; outline: none;
}
.sr-input:focus { border-color: var(--neo-accent, #8ab4ff); }
.sr-members-head { font-size: 14px; padding-top: 8px; border-top: 1px solid var(--neo-line, rgba(255,255,255,.08)); }
.sr-members-head span { color: var(--neo-faint, rgba(235,235,245,.32)); }
.sr-members { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.sr-member { display: flex; align-items: center; gap: 10px; }
.sr-av { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; }
.sr-av img { width: 100%; height: 100%; object-fit: cover; }
.sr-mtext { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.sr-mtext small { color: var(--neo-dim, rgba(235,235,245,.6)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-today { font-size: 13px; color: var(--neo-dim, rgba(235,235,245,.6)); padding-top: 8px; border-top: 1px solid var(--neo-line, rgba(255,255,255,.08)); }

@media (max-width: 860px) {
    .sr-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .sr-ring-fg { transition: none; }
    .sr-btn:hover { transform: none; }
}