.read-along-room, .read-along-index { max-width:1180px; margin:auto; }
.read-along-tabs { display:flex; gap:12px; margin:0 0 28px; border-bottom:1px solid var(--line); }
.read-along-tabs a { padding:12px 14px; color:var(--muted); border-bottom:3px solid transparent; }
.read-along-tabs .is-active { color:var(--green); border-color:var(--green); font-weight:bold; }
[data-read-along-badge] { display:inline-grid; place-items:center; background:var(--primary); color:var(--surface); border-radius:30px; padding:2px 6px; min-width:20px; font:600 .7rem/1.3 system-ui,sans-serif; }
[data-read-along-badge][hidden] { display:none; }
.social-rail a:has([data-read-along-badge]) { position:relative; }
.social-rail [data-read-along-badge] { position:absolute; right:0; top:1px; }
.read-along-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.read-along-card { border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; transition:border-color 160ms; }
.read-along-card:hover { border-color:var(--green); }
.read-along-card-main { display:flex; align-items:center; gap:24px; padding:26px; }
.read-along-card .book-cover { width:95px; height:140px; flex-shrink:0; font-size:.8rem; }
.read-along-card-main > div { min-width:0; }
.read-along-card h2 { font-size:1.4rem; line-height:1.2; margin:12px 0; overflow-wrap:anywhere; }
.read-along-card p { margin:8px 0; font-size:.9rem; }
.read-along-card small, .read-along-host { color:var(--muted); font-size:.8rem; }
.read-along-card footer { display:grid; gap:10px; padding:18px 26px; background:var(--sage); font-size:.85rem; }
.read-along-card footer a { color:var(--green); display:flex; justify-content:space-between; font-weight:bold; margin-top:4px; }
.read-along-state { display:inline-block; color:var(--green); font:600 .72rem/1.4 system-ui,sans-serif; }
.read-along-empty { grid-column:1/-1; text-align:center; padding:70px 24px; background:var(--sage); border-radius:18px; }
.read-along-empty > i { font-size:3rem; color:var(--green); }
.read-along-empty h2 { margin:24px 0 12px; }
.read-along-empty p { max-width:520px; margin:0 auto 24px; line-height:1.6; color:var(--muted); }
.read-along-create { max-width:680px; margin:0 auto; }
.read-along-create header { margin:30px 0; }
.read-along-create header h1 { font-size:2.4rem; margin:12px 0; }
.read-along-create header > p:last-child { color:var(--muted); line-height:1.6; }
.read-along-create > form { padding:30px; border:1px solid var(--line); background:var(--surface); border-radius:14px; }
.reading-choices { max-height:320px; overflow-y:auto; scrollbar-width:thin; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:0 6px 14px var(--shadow); padding:6px; }
.reading-choices > p { padding:10px; font-size:.85rem; }
.reading-choice { width:100%; display:flex; align-items:center; gap:12px; padding:12px; border:0; background:transparent; text-align:left; border-radius:6px; color:var(--ink); cursor:pointer; }
.reading-choice:hover,.reading-choice:focus-visible { background:var(--sage); }
.reading-choice span { display:grid; gap:5px; min-width:0; }
.reading-choice strong { overflow-wrap:anywhere; }
.reading-choice small { color:var(--muted); font-size:.8rem; }
.reading-choice .avatar { width:36px; height:36px; }
.read-along-selection { padding:14px; background:var(--sage); border-radius:8px; color:var(--green); font-size:.9rem; }
.read-along-promise { display:flex; align-items:center; gap:20px; background:var(--sage); border-radius:10px; padding:18px; margin-top:24px; }
.read-along-promise > i { font-size:1.8rem; color:var(--green); }
.read-along-promise p { margin:0; font-size:.85rem; line-height:1.5; }
.read-along-promise span { display:block; color:var(--muted); margin-top:5px; }
.read-along-hero { display:flex; gap:26px; align-items:center; margin:24px 0 32px; padding-bottom:28px; border-bottom:1px solid var(--line); }
.read-along-hero .book-cover { width:90px; height:130px; font-size:.75rem; flex-shrink:0; }
.read-along-hero h1 { font-size:clamp(1.7rem,3vw,2.6rem); margin:10px 0; overflow-wrap:anywhere; }
.read-along-hero p:last-child { margin:10px 0 0; font-size:.85rem; color:var(--muted); }
.read-along-hero a { font-size:.95rem; }
.read-along-layout { display:grid; grid-template-columns:300px minmax(0,1fr); gap:24px; align-items:start; }
.read-along-sidebar { display:grid; gap:18px; }
.read-along-sidebar > section { border:1px solid var(--line); border-radius:14px; padding:22px; background:var(--surface); }
.read-along-sidebar .read-along-progress { background:var(--sage); }
.read-along-sidebar h2 { font-size:1.15rem; margin:10px 0 20px; }
.read-along-percent { display:block; color:var(--green); font-size:2.5rem; margin-bottom:12px; }
.read-along-percent small { font-size:1rem; padding-left:4px; }
.read-along-progress p { font-size:.82rem; color:var(--green); margin-bottom:0; }
.read-along-own-progress { margin-top:22px; border-top:1px solid var(--line); padding-top:16px; }
.read-along-own-progress label { font-size:.85rem; }
.read-along-own-progress > div { display:flex; align-items:center; gap:8px; }
.read-along-own-progress input { min-width:0; width:80px; margin:0; }
.read-along-own-progress small,.read-along-options p { display:block; font-size:.75rem; color:var(--muted); margin-top:10px; line-height:1.5; }
.read-along-person { display:flex; align-items:center; gap:10px; margin-top:18px; }
.read-along-person .avatar { width:36px; height:36px; }
.read-along-person > div { flex:1; min-width:0; }
.read-along-person strong { font-size:.85rem; display:block; overflow-wrap:anywhere; }
.read-along-person small { display:block; font-size:.72rem; color:var(--muted); margin:4px 0; }
.read-along-person progress { height:4px; }
.read-along-start { border-top:1px solid var(--line); margin-top:20px; padding-top:20px; }
.read-along-start .button { width:100%; justify-content:center; }
.read-along-start p { font-size:.75rem; color:var(--muted); line-height:1.5; margin-bottom:0; }
.read-along-options { font-size:.85rem; padding:0 10px; }
.read-along-options .text-button { color:var(--error); min-height:44px; }
.read-along-chat { position:relative; min-width:0; border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; }
.read-along-chat > header { display:flex; justify-content:space-between; align-items:baseline; gap:15px; padding:24px; border-bottom:1px solid var(--line); }
.read-along-chat h2 { font-size:1.45rem; margin:0 0 8px; }
.read-along-chat header p { font-size:.82rem; margin:0; color:var(--muted); }
.read-along-live { font:500 .67rem/1.4 system-ui,sans-serif; color:var(--green); flex-shrink:0; }
.read-along-message-area { height:440px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--line) transparent; padding:24px; }
.read-along-messages { display:grid; gap:25px; }
.read-along-message { display:flex; align-items:flex-start; gap:12px; }
.read-along-message > .avatar { width:32px; height:32px; flex-shrink:0; }
.read-along-message-main { flex:1; min-width:0; }
.read-along-message header { display:flex; flex-wrap:wrap; align-items:center; gap:7px 10px; margin:0 0 9px; }
.read-along-message header strong { font-size:.85rem; }
.read-along-message header time { font-size:.68rem; color:var(--muted); }
.read-along-message header span { font:500 .62rem/1.4 system-ui,sans-serif; background:var(--sage); color:var(--green); padding:3px 7px; border-radius:5px; }
.read-along-message-text { padding:13px 16px; background:var(--surface-soft); border-radius:0 12px 12px; font-size:.95rem; line-height:1.55; overflow-wrap:anywhere; }
.read-along-message.is-own .read-along-message-text { background:var(--sage); }
.read-along-spoiler { background:var(--surface-soft); border:1px dashed var(--line-strong); padding:14px; border-radius:10px; font-size:.82rem; color:var(--muted); }
.read-along-spoiler p { margin:7px 0; }
.read-along-spoiler .text-button { font-size:.78rem; color:var(--green); min-height:36px; }
.read-along-chat-empty { text-align:center; color:var(--muted); margin:90px 20px; font-size:1rem; font-style:italic; }
.read-along-composer { padding:18px 24px 20px; border-top:1px solid var(--line); }
.read-along-composer textarea { background:var(--paper); border:1px solid var(--line-strong); font-size:1rem; resize:vertical; min-height:90px; max-height:240px; }
.read-along-composer > div { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.read-along-composer label { display:flex; align-items:center; gap:8px; font-size:.75rem; margin:0; font-weight:normal; }
.read-along-composer input[type=number] { width:66px; padding:8px; margin:0; }
.read-along-composer > small { display:block; color:var(--muted); font-size:.7rem; line-height:1.5; margin-top:12px; }
.read-along-closed { background:var(--sage); margin:0; padding:24px; font-size:.9rem; color:var(--green); }
.read-along-new-messages { position:absolute; right:24px; bottom:235px; background:var(--green); color:var(--surface); border:0; border-radius:30px; padding:10px 14px; cursor:pointer; box-shadow:0 2px 12px var(--shadow); }
.read-along-notice { padding:14px 18px; border:1px solid var(--line); background:var(--sage); border-radius:10px; font-size:.9rem; }
.read-along-invitation { max-width:660px; margin:40px auto; padding:40px; border:1px solid var(--line); background:var(--surface); border-radius:18px; text-align:center; }
.read-along-invitation > i { font-size:2.5rem; color:var(--green); }
.read-along-invitation p { color:var(--muted); line-height:1.6; }
.read-along-invitation .actions { justify-content:center; gap:16px; }
@media(max-width:1000px) { .read-along-layout { grid-template-columns:260px minmax(0,1fr); gap:16px; } .read-along-chat > header { flex-wrap:wrap; } }
@media(max-width:760px) {
    .read-along-cards,.read-along-layout { grid-template-columns:1fr; }
    .read-along-card-main { padding:20px; gap:18px; }
    .read-along-sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .read-along-sidebar > section { padding:18px; }
    .read-along-sidebar .read-along-invite,.read-along-sidebar .read-along-options { grid-column:1/-1; }
    .read-along-hero { gap:16px; }
    .read-along-hero .book-cover { width:66px; height:95px; font-size:.6rem; }
    .read-along-hero > div { min-width:0; }
    .read-along-hero a { font-size:.85rem; }
    .read-along-create > form,.read-along-invitation { padding:22px; }
    .read-along-create header h1 { font-size:2rem; }
    .read-along-composer,.read-along-message-area,.read-along-chat > header { padding:18px; }
    .read-along-message-area { height:380px; }
    .read-along-composer > div { flex-wrap:wrap; }
    .read-along-composer .button { padding:12px 16px; }
    .read-along-own-progress > div { flex-wrap:wrap; }
    .read-along-own-progress input { width:60px; }
    .read-along-message { gap:8px; }
    .read-along-message > .avatar { width:26px; height:26px; }
}
@media(prefers-reduced-motion:reduce) { .read-along-card { transition:none; } }

.account-menu__portrait:has([data-read-along-badge]) { position:relative; overflow:visible; }
.account-menu__portrait [data-read-along-badge] { position:absolute; top:-4px; right:-5px; }

.read-along-card-options { padding:12px 26px; font-size:.78rem; color:var(--muted); }
.read-along-card-options p { font-size:.78rem; }
.read-along-card-options button { min-height:44px; color:var(--error); }

.read-along-create-fields { display:grid; gap:20px; margin-top:20px; }
@media(max-width:760px) {
    .read-along-sidebar { grid-template-columns:1fr; }
    .read-along-progress [data-reading-live="summary"] { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 16px; }
    .read-along-progress .read-along-state { grid-column:1; }
    .read-along-progress h2 { grid-column:1; margin:0; }
    .read-along-progress .read-along-percent { grid-column:2; grid-row:1/3; margin:0; }
    .read-along-progress progress,.read-along-progress p { grid-column:1/-1; margin:6px 0 0; }
    .read-along-own-progress { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; margin-top:18px; }
    .read-along-own-progress > div { flex-wrap:nowrap; }
    .read-along-own-progress small { grid-column:1/-1; margin:0; }
    .read-along-own-progress .button { padding:12px; }
    .read-along-participants { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; }
    .read-along-participants h2 { grid-column:1/-1; margin:0; }
    .read-along-person { margin:0; }
}

.read-along-book-link { margin:12px 0 0; }