/* GracePress Talk Rooms: paper-theme group chat. Light-mode design only; Dark Mode owns any inversion. */
.gpt-rooms {
  --gpr-paper: var(--nb-paper, #faf8f1);
  --gpr-ink: var(--nb-ink, #292a26);
  --gpr-muted: var(--nb-muted, #65645e);
  --gpr-red: var(--nb-red, #974735);
  --gpr-blue: var(--nb-blue, #315e72);
  --gpr-rule: #cfc8b6;
  font-family: var(--nb-sans, Arial, Helvetica, sans-serif);
  font-size: 14px; color: var(--gpr-ink); box-sizing: border-box; max-width: 760px; margin: 0 auto;
}
.gpt-rooms *, .gpt-rooms *::before, .gpt-rooms *::after { box-sizing: border-box; }
.gpt-rooms [hidden] { display: none !important; }

.gpr-card { position: relative; background: var(--gpr-paper); border: 1.5px solid var(--gpr-ink); border-radius: 4px 9px 3px 6px; box-shadow: 3px 4px 0 rgba(41,42,38,.14); overflow: hidden; }
.gpr-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 12px 16px 10px; border-bottom: 1.5px solid var(--gpr-ink); background:
  linear-gradient(to right, transparent 36px, rgba(151,71,53,.55) 36px, rgba(151,71,53,.55) 38px, transparent 38px), var(--gpr-paper); }
.gpr-title { margin: 0; font: 400 26px/1.1 var(--nb-script, 'GP Notebook', cursive); color: var(--gpr-ink); padding-left: 34px; }
.gpr-back { font-size: 13px; color: var(--gpr-blue); text-decoration: none; padding-left: 34px; }
.gpr-back:hover { text-decoration: underline; }
.gpr-back + .gpr-title { padding-left: 0; }
.gpr-sub { flex-basis: 100%; color: var(--gpr-muted); font-size: 13px; padding-left: 34px; }
.gpr-body { padding: 14px 16px 16px; }
.gpr-small { color: var(--gpr-muted); font-size: 13px; margin: 6px 0; }
.gpr-err { color: var(--gpr-red); }
.gpr-intro { margin: 0 0 12px; color: var(--gpr-muted); }

.gpr-btn { display: inline-block; font: inherit; font-size: 14px; padding: 7px 14px; border: 1.5px solid var(--gpr-ink); border-radius: 3px 7px 2px 5px; background: #fff; color: var(--gpr-ink); text-decoration: none; cursor: pointer; }
.gpr-btn:hover, .gpr-btn:focus-visible { background: #f2ede0; outline: 2px solid var(--gpr-blue); outline-offset: 2px; }
.gpr-btn-primary { background: var(--gpr-blue); border-color: var(--gpr-blue); color: #fff; }
.gpr-btn-primary:hover, .gpr-btn-primary:focus-visible { background: #274d5f; }

.gpr-gate { border: 1.5px dashed var(--gpr-rule); border-radius: 4px; padding: 14px 16px; margin: 0 0 14px; background: #fff; }
.gpr-gate-msg { margin: 0 0 10px; font-size: 15px; }
.gpr-gate-btns { display: flex; flex-wrap: wrap; gap: 8px; }

.gpr-list { display: grid; gap: 8px; }
.gpr-room { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #fff; border: 1.5px solid var(--gpr-ink); border-radius: 3px 8px 2px 6px; color: inherit; text-decoration: none; }
.gpr-room:hover, .gpr-room:focus-visible { background: #f6f1e2; outline: 2px solid var(--gpr-blue); outline-offset: 2px; }
.gpr-room-hash { font: 400 28px/1 var(--nb-script, 'GP Notebook', cursive); color: var(--gpr-red); width: 22px; text-align: center; }
.gpr-room-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gpr-room-text strong { font-size: 16px; }
.gpr-room-desc { color: var(--gpr-ink); }
.gpr-room-meta { color: var(--gpr-muted); font-size: 12px; }
.gpr-room-go { color: var(--gpr-blue); font-size: 18px; }

.gpr-body > .gpr-scroll { height: var(--gpr-height, 560px); max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; border: 1.5px solid var(--gpr-rule); border-radius: 3px; background: #fff; padding: 6px 4px; }
.gpr-body { position: relative; }
.gpr-jump { position: absolute; left: 50%; transform: translateX(-50%); bottom: 118px; background: var(--gpr-blue); color: #fff; border: 0; border-radius: 14px; padding: 5px 14px; font: inherit; font-size: 13px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.gpr-note { margin: 8px 0 0; padding: 6px 10px; background: #fff7d6; border: 1px solid #d8c98a; border-radius: 3px; font-size: 13px; }
.gpr-closed { margin: 10px 0 0; color: var(--gpr-muted); text-align: center; }

.gpr-day { text-align: center; margin: 12px 0 6px; font-size: 12px; color: var(--gpr-muted); }
.gpr-day::before, .gpr-day::after { content: ''; display: inline-block; width: 18%; height: 1px; background: var(--gpr-rule); vertical-align: middle; margin: 0 10px; }
.gpr-msg { position: relative; display: flex; gap: 10px; padding: 3px 10px 3px 8px; border-radius: 3px; }
.gpr-msg:not(.gpr-cont) { margin-top: 8px; }
.gpr-msg:hover { background: #f8f4e8; }
.gpr-av { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%; background: hsl(var(--h, 200) 38% 82%); border: 1.5px solid var(--gpr-ink); display: flex; align-items: center; justify-content: center; font: 400 18px/1 var(--nb-script, 'GP Notebook', cursive); }
.gpr-cont .gpr-av { visibility: hidden; height: 0; border: 0; }
.gpr-main { flex: 1; min-width: 0; }
.gpr-meta { display: flex; align-items: baseline; gap: 8px; }
.gpr-name { font-size: 14px; }
.gpr-time { font-size: 11px; color: var(--gpr-muted); }
.gpr-badge { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; background: var(--gpr-red); color: #fff; border-radius: 2px; padding: 1px 5px; }
.gpr-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.gpr-text a { color: var(--gpr-blue); }
.gpr-mine .gpr-name { color: var(--gpr-blue); }
.gpr-host { background: #fbf1ea; }
.gpr-more { opacity: 0; position: absolute; right: 6px; top: 2px; background: transparent; border: 0; font-size: 18px; line-height: 1; padding: 2px 6px; cursor: pointer; color: var(--gpr-muted); }
.gpr-msg:hover .gpr-more, .gpr-more:focus-visible { opacity: 1; }
@media (hover: none) { .gpr-more { opacity: .6; } }
.gpr-pop { position: absolute; right: 8px; top: 24px; z-index: 5; background: #fff; border: 1.5px solid var(--gpr-ink); border-radius: 3px 6px 2px 4px; box-shadow: 2px 3px 0 rgba(41,42,38,.18); min-width: 170px; }
.gpr-pop-item { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 8px 12px; font: inherit; cursor: pointer; }
.gpr-pop-item:hover, .gpr-pop-item:focus-visible { background: #f2ede0; }
.gpr-danger { color: var(--gpr-red); }

.gpr-form { position: relative; display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.gpr-input { flex: 1; resize: none; min-height: 38px; max-height: 120px; padding: 8px 10px; font: inherit; color: var(--gpr-ink); background: #fff; border: 1.5px solid var(--gpr-ink); border-radius: 3px 7px 2px 5px; line-height: 1.35; }
.gpr-input:focus { outline: 2px solid var(--gpr-blue); outline-offset: 1px; }
.gpr-send { height: 38px; }
.gpr-count { position: absolute; right: 90px; bottom: 4px; font-size: 11px; color: var(--gpr-red); pointer-events: none; }

@media (max-width: 600px) {
  .gpr-body { padding: 10px; }
  .gpr-head { padding: 10px 10px 8px; }
  .gpr-title { font-size: 22px; }
  .gpr-body > .gpr-scroll { max-height: 62vh; }
  .gpr-input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .gpt-rooms * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }