/* The reviews pages, from the styleguide (styleguides/bite/feedback-index.html, feedback-show.html + style.css).
   Every rule is scoped under .rl (list) or .rd (detail) so it cannot touch the rest of the application. */
.rl{--accent:#2093df;--accent-dark:#0f6398;--accent-pale:#eaf6ff;--accent-mid:#93d4ff;--ink:#292b31;--muted:#595d6c;--faint:#75798c;--border:#cfd3e5;--border-light:#e4e7f5;--surface:#f7f9fc;--ok:#0b6b3a;--ok-bg:#dff5e8;--warn:#785a0b;--warn-bg:#fff3d4;--danger:#ae1800;--danger-bg:#ffe0d9;--agent:#5b3fd1;--agent-bg:#ece8ff;--navy:#172c43;--radius:8px;--radius-lg:14px;--shadow:0 1px 2px rgba(23,44,67,.06),0 6px 20px rgba(23,44,67,.06);--sans:"Inter",system-ui,sans-serif;--display:"Afacad","Inter",system-ui,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,monospace;max-width:1120px;margin:0 auto;color:var(--ink);font:15px/1.6 var(--sans)}
.rl *,.rl *::before,.rl *::after{box-sizing:border-box}
.rl h1,.rl h2,.rl h3{font-weight:500;letter-spacing:-.02em;margin:0 0 .4em;line-height:1.15}
.rl h1{font-family:var(--display);font-size:38px}.rl h2{font-size:20px}.rl h3{font-size:16px}
.rl p{margin:0 0 .8em;line-height:1.6}
.rl a{color:var(--accent-dark);text-decoration:none}.rl a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.rl .mono,.rl code{font-family:var(--mono);font-size:.88em}
.rl .muted{color:var(--muted)}
.rl .avatar-agent{background:var(--agent-bg);color:var(--agent);border-radius:9px}
.rl .errors{border:1px solid #f2b8aa;background:var(--danger-bg);color:var(--danger);border-radius:var(--radius);padding:12px 14px;font-size:14px}
.rl .errors p{margin:0 0 4px;font-weight:500}
.rl input.btn,.rl button.btn{font-family:inherit}
.rl .button_to{display:block}
.rl .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rl .icon{width:18px;height:18px;flex:none}
.rl .muted{color:var(--muted)}
.rl .eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dark);margin:0 0 6px}
.rl .lede{color:var(--muted);font-size:16px;max-width:60ch}
.rl .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--accent);border-radius:var(--radius);background:transparent;color:var(--accent-dark);font:500 15px var(--sans);padding:10px 18px;cursor:pointer;white-space:nowrap}
.rl .btn:hover{background:var(--accent-pale);text-decoration:none;color:var(--accent-dark)}
.rl .btn.secondary{border-color:var(--border);color:#3f424d;background:#fff}
.rl .btn.secondary:hover{background:var(--surface);color:var(--ink)}
.rl .badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:500;background:var(--accent-pale);color:var(--accent-dark);white-space:nowrap}
.rl .badge.neutral{background:var(--surface);color:var(--muted);border:1px solid var(--border-light)}
.rl .badge.warn{background:var(--warn-bg);color:var(--warn)}
.rl .status-dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.rl .avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-pale);color:var(--accent-dark);font:600 12px var(--sans);display:inline-grid;place-items:center;flex:none;border:2px solid #fff}
.rl .chip{display:inline-flex;align-items:center;gap:5px;font:500 12px var(--mono);background:var(--surface);border:1px solid var(--border-light);border-radius:6px;padding:1px 8px;color:var(--muted)}
.rl .chip .icon{width:13px;height:13px}
.rl .page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.rl .page-head .lede{margin:0}
.rl .actions{display:flex;gap:10px;flex-wrap:wrap}
.rl .inline-search{display:flex;align-items:center;gap:8px;color:var(--faint)}
.rl .inline-search .input{width:240px}
.rl .input{width:100%;border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;font:15px var(--sans);background:#fff;color:var(--ink)}
.rl .input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.rl textarea.input{resize:vertical}
.rl .count{font-size:12px;background:var(--surface);border-radius:999px;padding:0 7px;color:var(--muted)}
.rl .list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.rl .summary-line{margin:0;color:var(--muted)}
.rl .summary-line strong{color:var(--ink);font-weight:500}
.rl .tabs{display:flex;gap:4px;border-bottom:1px solid var(--border-light);margin:0 0 16px}
.rl .tab{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--muted);font-weight:500}
.rl .tab:hover{color:var(--ink);text-decoration:none}
.rl .tab.active{color:var(--accent-dark);border-color:var(--accent)}
.rl .tab .count{font-size:12px;background:var(--surface);border:1px solid var(--border-light);border-radius:999px;padding:0 8px;color:var(--faint)}
.rl .filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.rl .select{width:auto;min-width:150px;padding:7px 10px;font-size:14px}
.rl .clear-link{font-size:14px;margin-left:4px}
.rl .results-head{display:flex;justify-content:space-between;align-items:center;color:var(--faint);font-size:13px;margin:0 0 10px}
.rl .sort-link{color:var(--muted);font-weight:500}
.rl .review-list{display:grid;gap:10px}
.rl .review-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:16px 18px;background:#fff;box-shadow:var(--shadow);color:var(--ink)}
.rl .review-card:hover{border-color:var(--accent-mid);text-decoration:none}
.rl .review-main{display:grid;gap:8px;min-width:0;border:0;padding:0;flex-direction:initial}
.rl .review-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rl .review-top strong{font-weight:500;font-size:16px}
.rl .review-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--faint);font-size:13px}
.rl .review-excerpt{color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rl .review-arrow{align-self:center;color:var(--faint);font-size:18px}
.rl .review-card:hover .review-arrow{color:var(--accent-dark)}
@media (max-width:900px){.rl .review-card{grid-template-columns:auto minmax(0,1fr)}
.rl .review-arrow{display:none}
.rl .filters .select{flex:1 1 140px}
.rl .tabs{overflow-x:auto}}

/* Rails' own pieces for the list: the empty states, the summary line's turbo frame, hidden submit buttons. */
.rl turbo-frame{display:block}
.rl .empty{padding:48px 22px;text-align:center;border:1px dashed var(--border);border-radius:var(--radius-lg);color:var(--muted)}
.rl .empty h2{color:var(--ink)}
.rl .results-head .sort-link{color:var(--muted);font-weight:500}
.rl .review-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.rd{--accent:#2093df;--accent-dark:#0f6398;--accent-pale:#eaf6ff;--accent-mid:#93d4ff;--ink:#292b31;--muted:#595d6c;--faint:#75798c;--border:#cfd3e5;--border-light:#e4e7f5;--surface:#f7f9fc;--ok:#0b6b3a;--ok-bg:#dff5e8;--warn:#785a0b;--warn-bg:#fff3d4;--danger:#ae1800;--danger-bg:#ffe0d9;--agent:#5b3fd1;--agent-bg:#ece8ff;--navy:#172c43;--radius:8px;--radius-lg:14px;--shadow:0 1px 2px rgba(23,44,67,.06),0 6px 20px rgba(23,44,67,.06);--sans:"Inter",system-ui,sans-serif;--display:"Afacad","Inter",system-ui,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,monospace;max-width:1120px;margin:0 auto;color:var(--ink);font:15px/1.6 var(--sans)}
.rd *,.rd *::before,.rd *::after{box-sizing:border-box}
.rd h1,.rd h2,.rd h3{font-weight:500;letter-spacing:-.02em;margin:0 0 .4em;line-height:1.15}
.rd h1{font-family:var(--display);font-size:38px}.rd h2{font-size:20px}.rd h3{font-size:16px}
.rd p{margin:0 0 .8em;line-height:1.6}
.rd a{color:var(--accent-dark);text-decoration:none}.rd a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.rd .mono,.rd code{font-family:var(--mono);font-size:.88em}
.rd .muted{color:var(--muted)}
.rd .avatar-agent{background:var(--agent-bg);color:var(--agent);border-radius:9px}
.rd .errors{border:1px solid #f2b8aa;background:var(--danger-bg);color:var(--danger);border-radius:var(--radius);padding:12px 14px;font-size:14px}
.rd .errors p{margin:0 0 4px;font-weight:500}
.rd input.btn,.rd button.btn{font-family:inherit}
.rd .button_to{display:block}
.rd .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rd .icon{width:18px;height:18px;flex:none}
.rd .mono{font-family:var(--mono);font-size:.88em}
.rd .muted{color:var(--muted)}
.rd .eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dark);margin:0 0 6px}
.rd .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--accent);border-radius:var(--radius);background:transparent;color:var(--accent-dark);font:500 15px var(--sans);padding:10px 18px;cursor:pointer;white-space:nowrap}
.rd .btn:hover{background:var(--accent-pale);text-decoration:none;color:var(--accent-dark)}
.rd .btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.rd .btn.primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.rd .btn.secondary{border-color:var(--border);color:#3f424d;background:#fff}
.rd .btn.secondary:hover{background:var(--surface);color:var(--ink)}
.rd .btn.quiet{border-color:transparent;color:var(--muted)}
.rd .btn.quiet:hover{background:var(--surface)}
.rd .btn.sm{padding:5px 12px;font-size:13px}
.rd .btn.full{width:100%}
.rd .badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:500;background:var(--accent-pale);color:var(--accent-dark);white-space:nowrap}
.rd .badge.ok{background:var(--ok-bg);color:var(--ok)}
.rd .badge.neutral{background:var(--surface);color:var(--muted);border:1px solid var(--border-light)}
.rd .badge.warn{background:var(--warn-bg);color:var(--warn)}
.rd .badge.agent{background:var(--agent-bg);color:var(--agent)}
.rd .status-dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.rd .avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-pale);color:var(--accent-dark);font:600 12px var(--sans);display:inline-grid;place-items:center;flex:none;border:2px solid #fff}
.rd .avatar.agent{background:var(--agent-bg);color:var(--agent);border-radius:10px}
.rd .chip{display:inline-flex;align-items:center;gap:5px;font:500 12px var(--mono);background:var(--surface);border:1px solid var(--border-light);border-radius:6px;padding:1px 8px;color:var(--muted)}
.rd .chip .icon{width:13px;height:13px}
.rd .panel{border:1px solid var(--border-light);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow);margin-bottom:24px;overflow:hidden}
.rd .panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;border-bottom:1px solid var(--border-light)}
.rd .panel-head h2{margin:0}
.rd .panel-head p{margin:2px 0 0;color:var(--muted);font-size:14px}
.rd .panel-body{padding:20px 22px}
.rd .stack{display:grid;gap:24px}
.rd .stack .panel{margin:0}
.rd .input{width:100%;border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;font:15px var(--sans);background:#fff;color:var(--ink)}
.rd .input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.rd .input.sm{padding:5px 8px;font-size:14px;width:auto}
.rd textarea.input{resize:vertical}
.rd .hint{color:var(--faint);font-size:13px;margin:0}
.rd .overview-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:24px;align-items:start}
.rd .overview-grid .panel{margin:0}
.rd .shot{position:relative;display:block;aspect-ratio:16/10;background:#fff;border:1px solid var(--border);border-radius:6px;overflow:hidden;width:100%}
.rd .shot i{position:absolute;display:block}
.rd .s-bar{inset:0 0 auto 0;height:12%;background:var(--border-light)}
.rd .s-h{left:8%;top:24%;width:56%;height:11%;background:var(--ink);border-radius:2px}
.rd .s-p{left:8%;top:42%;width:40%;height:6%;background:var(--border);border-radius:2px}
.rd .s-btn{left:8%;top:60%;width:34%;height:15%;background:var(--accent);border-radius:3px}
.rd .s-target{left:6%;top:56%;width:38%;height:23%;border:2px solid #ff5a3c;border-radius:4px;box-shadow:0 0 0 3px rgba(255,90,60,.2)}
.rd .shot.b .s-h{width:36%}
.rd .shot.b .s-btn{left:56%;top:30%;width:30%;height:10%;background:var(--navy)}
.rd .shot.b .s-target{left:54%;top:26%;width:34%;height:18%}
.rd .meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:0;padding:10px 12px;border-top:1px solid var(--border-light);font-size:12px}
.rd .meta dt{color:var(--faint)}
.rd .meta dd{margin:0}
@media (max-width:900px){.rd .overview-grid{grid-template-columns:1fr}}
.rd .summary{display:grid;grid-template-columns:auto 1fr;gap:8px 24px;margin:0}
.rd .summary dt{color:var(--faint);font-size:13px}
.rd .summary dd{margin:0;font-weight:500}
.rd .detail-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.rd .detail-nav-links{display:flex;gap:4px}
.rd .detail-head{margin-bottom:24px}
.rd .detail-head h1{font-size:30px;max-width:30ch}
.rd .detail-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);margin:0}
.rd .cap-list{display:grid;gap:28px}
.rd .cap-item h3{display:flex;align-items:baseline;gap:10px;margin:0 0 10px}
.rd .cap-item h3 small{color:var(--faint);font-weight:400}
.rd .cap-shot{margin:0;padding:12px;border:1px solid var(--border-light);border-radius:var(--radius);background:var(--surface)}
.rd .cap-shot .shot{max-width:520px;margin:0 auto}
.rd .cap-foot{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin:10px 0;font-size:13px;color:var(--muted)}
.rd .cap-meta{border:1px solid var(--border-light);border-radius:var(--radius);border-top:1px solid var(--border-light)}
.rd .cap-meta dd{overflow-wrap:anywhere}
.rd .msgs{display:grid;gap:0}
.rd .msg{display:flex;gap:12px;padding:18px 22px;border-top:1px solid var(--border-light)}
.rd .msg:first-child{border-top:0}
.rd .msg-body{min-width:0}
.rd .msg-body header{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.rd .msg-body header strong{font-weight:500}
.rd .msg-body time{color:var(--faint);font-size:13px}
.rd .msg-body p{margin:0 0 6px;color:var(--ink)}
.rd .msg.from-agent{background:#faf8ff}
.rd .reply-box{display:grid;gap:8px;padding:18px 22px;border-top:1px solid var(--border-light);background:var(--surface)}
.rd .reply-box label{font-weight:500;font-size:14px}
.rd .reply-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.rd .reply-foot .hint{margin:0}
.rd .who-inline{display:inline-flex;align-items:center;gap:8px}
.rd .small{font-size:13px}
.rd .block{display:block;color:var(--faint);font-size:13px;font-weight:400}
.rd .panel-actions{display:grid;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border-light)}
.rd .panel-actions .hint{margin:0}
.rd .btn.full{width:100%}

/* Rails' own pieces for the detail page: real screenshots, the no-screenshot fallback, reply states. */
.rd .cap-shot img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:6px;border:1px solid var(--border)}
.rd .cap-fallback{display:grid;place-items:center;gap:4px;padding:36px 16px;text-align:center;color:var(--muted)}
.rd .cap-fallback strong{color:var(--ink);font-weight:500}
.rd .cap-fallback p{margin:0}
.rd .reply-box textarea{min-height:90px;resize:vertical}
.rd .panel-actions form{display:block}
.rd .msg .button_to{display:inline}
.rd .msg-body form[hidden]{display:none}
.rd .conversation-count{display:inline-flex}

/* Delete dialogs and the deleted-reviews page (styleguides/bite/feedback-show.html, feedback-deleted.html). */
.rd .callout{display:flex;gap:14px;background:var(--accent-pale);border:1px solid var(--accent-mid);border-radius:var(--radius-lg);padding:20px}.mi .callout h3{margin-bottom:4px}.mi .callout p{color:var(--muted);margin:0}
.rd .modal{border:0;border-radius:var(--radius-lg);padding:0;width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px);box-shadow:0 24px 60px rgba(23,44,67,.28);color:var(--ink);font:15px/1.6 var(--sans)}
.rd .modal::backdrop{background:rgba(23,44,67,.45)}
.rd .modal[open]{display:flex;flex-direction:column}
.rd .modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 24px 12px}.mi .modal-head h2{margin:0}.mi .modal-head p{margin:2px 0 0}
.rd .modal-body{padding:0 24px 8px;overflow:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.rd .modal-foot{display:flex;justify-content:flex-end;padding:14px 24px;border-top:1px solid var(--border-light);background:var(--surface)}
.rd .modal .steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:16px}
.rd .modal .steps li{counter-increment:s;position:relative;padding-left:36px;min-width:0}
.rd .modal .steps li::before{content:counter(s);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--accent-pale);color:var(--accent-dark);font:600 12px/24px var(--sans);text-align:center}
.rd .modal .snippet{position:relative;margin-top:8px}
.rd .modal .snippet pre{margin:0;background:var(--navy);color:#e8f1f9;border-radius:var(--radius);padding:14px 84px 14px 16px;font:13px/1.55 var(--mono);overflow-x:auto;white-space:pre}
.rd .modal .snippet .btn{position:absolute;top:8px;right:8px}
.rd .modal em{font-style:italic}
.rd .modal .snippet .btn{min-height:0;line-height:1.4}
.rl .callout{display:flex;gap:14px;background:var(--accent-pale);border:1px solid var(--accent-mid);border-radius:var(--radius-lg);padding:20px}.mi .callout h3{margin-bottom:4px}.mi .callout p{color:var(--muted);margin:0}
.rl .modal{border:0;border-radius:var(--radius-lg);padding:0;width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px);box-shadow:0 24px 60px rgba(23,44,67,.28);color:var(--ink);font:15px/1.6 var(--sans)}
.rl .modal::backdrop{background:rgba(23,44,67,.45)}
.rl .modal[open]{display:flex;flex-direction:column}
.rl .modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 24px 12px}.mi .modal-head h2{margin:0}.mi .modal-head p{margin:2px 0 0}
.rl .modal-body{padding:0 24px 8px;overflow:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.rl .modal-foot{display:flex;justify-content:flex-end;padding:14px 24px;border-top:1px solid var(--border-light);background:var(--surface)}
.rl .modal .steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:16px}
.rl .modal .steps li{counter-increment:s;position:relative;padding-left:36px;min-width:0}
.rl .modal .steps li::before{content:counter(s);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--accent-pale);color:var(--accent-dark);font:600 12px/24px var(--sans);text-align:center}
.rl .modal .snippet{position:relative;margin-top:8px}
.rl .modal .snippet pre{margin:0;background:var(--navy);color:#e8f1f9;border-radius:var(--radius);padding:14px 84px 14px 16px;font:13px/1.55 var(--mono);overflow-x:auto;white-space:pre}
.rl .modal .snippet .btn{position:absolute;top:8px;right:8px}
.rl .modal em{font-style:italic}
.rl .modal .snippet .btn{min-height:0;line-height:1.4}
.rd .btn.danger-text,.rl .btn.danger-text{color:var(--danger)}
.rd .btn.danger-text:hover,.rl .btn.danger-text:hover{background:var(--danger-bg);color:var(--danger)}
.rd .btn.danger,.rl .btn.danger{border-color:var(--danger);color:var(--danger);background:#fff}
.rd .btn.danger:hover,.rl .btn.danger:hover{background:var(--danger-bg);color:var(--danger)}
.rd .modal-foot form,.rl .modal-foot form{margin:0}
.rl .callout{display:flex;gap:14px;background:var(--accent-pale);border:1px solid var(--accent-mid);border-radius:var(--radius-lg);padding:20px;margin-bottom:16px}.rl .callout h3{margin-bottom:4px}.rl .callout p{color:var(--muted);margin:0}
.rl .review-card.is-deleted{background:var(--surface);grid-template-columns:auto minmax(0,1fr) auto}.rl .review-card.is-deleted .review-excerpt{color:var(--faint)}
.rl .review-actions{display:flex;gap:8px;align-self:center;flex-wrap:wrap;justify-content:flex-end}.rl .review-actions form{margin:0}
@media (max-width:900px){.rl .review-card.is-deleted{grid-template-columns:auto minmax(0,1fr)}.rl .review-actions{grid-column:2;justify-content:flex-start}}

/* Pagination: Pagy's series nav, styled like styleguides/bite/feedback-index.html. */
.rl .pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px}
.rl .page-status{color:var(--faint);font-size:13px}
.rl .pagy{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rl .pagy a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;color:#3f424d;font-size:14px;font-weight:500;text-decoration:none}
.rl .pagy a[href]:hover{background:var(--surface);color:var(--ink);text-decoration:none}
.rl .pagy a[aria-current]{background:var(--accent);border-color:var(--accent);color:#fff}
.rl .pagy a[aria-disabled]:not([aria-current]){color:var(--faint);background:var(--surface);cursor:not-allowed}
.rl .pagy a[aria-label="Previous"],.rl .pagy a[aria-label="Next"]{font-size:0}
.rl .pagy a[aria-label="Previous"]::before{content:"‹ Previous";font-size:14px}
.rl .pagy a[aria-label="Next"]::before{content:"Next ›";font-size:14px}

/* Agent avatars in the conversation: the same corner badge as the Members page. */
.rd .avatar-agent{position:relative}
.rd .av-badge{position:absolute;right:-6px;bottom:-6px;width:17px;height:17px;border-radius:50%;border:2px solid #fff;display:grid;place-items:center;font:600 7px var(--sans);font-style:normal;line-height:1;letter-spacing:0}
.rd .av-badge.server{background:var(--navy);color:#fff}.rd .av-badge.server svg{width:9px;height:9px}
.rd .av-badge.owner{background:var(--accent-pale);color:var(--accent-dark);box-shadow:0 0 0 1px var(--accent-mid)}

/* An agent's avatar is a purple rounded square, as on the Members page. These rules must beat
   the round person avatar defined further up (.rd .avatar, .rl .avatar), which comes later in
   this file than the earlier .avatar-agent rules and was overriding them. */
.rd .avatar.avatar-agent,.rl .avatar.avatar-agent{background:var(--agent-bg);color:var(--agent);border-radius:9px}

/* A drag-selected area, outlined on its screenshot, and what it covers. */
.rd .region-wrap{position:relative;display:block}
.rd .region-wrap img{display:block;width:100%}
.rd .region-frame{position:absolute;display:block;border:2px solid #ff5a3c;border-radius:4px;background:rgba(255,90,60,.06);box-shadow:0 0 0 3px rgba(255,90,60,.2);pointer-events:none;box-sizing:border-box}
.rd .region-context{display:grid;gap:6px;font-size:13px;margin-top:12px}
.rd .region-label{margin:0;color:var(--faint)}
.rd .region-crumbs{display:flex;flex-wrap:wrap;gap:4px 6px;margin:0;padding:0;list-style:none;font:12px var(--mono)}
.rd .region-crumbs li+li::before{content:"›";color:var(--faint);margin-right:6px}
.rd .region-crumbs .anchor{font-weight:600;color:var(--accent-dark)}
.rd .region-dom summary{cursor:pointer;font-weight:500}
.rd .region-dom summary small{color:var(--faint);font-weight:400;margin-left:6px}
.rd .region-dom pre{margin:8px 0 0;padding:10px 12px;background:var(--surface);border:1px solid var(--border-light);border-radius:8px;overflow-x:auto;font:12px/1.6 var(--mono);white-space:pre}

/* Areas, their notes and numbers. */
.rd .region-frame b { position: absolute; left: -11px; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: #ff5a3c; color: #fff; border: 2px solid #fff; display: grid; place-items: center; font: 600 11px var(--sans, system-ui); }
.rd .region-frame.hl { outline: 3px solid #ff5a3c; outline-offset: 2px; }
.rd .areas { display: grid; gap: 10px; }
.rd .area { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--border-light); border-radius: 10px; padding: 10px 12px; background: #fff; }
.rd .area.hl { border-color: #ff5a3c; box-shadow: 0 0 0 3px rgba(255, 90, 60, .18); }
.rd .area-crop { flex: none; width: min(240px, 45%); max-height: 200px; object-fit: contain; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.rd .area-body { display: grid; gap: 8px; justify-items: start; min-width: 0; flex: 1; }
.rd .area-note { margin: 0; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.rd .area-body .locate { margin: 0; }
.rd .capture-details { border-top: 1px solid var(--border-light); font-size: 12px; margin-top: 4px; }
.rd .capture-details > summary { cursor: pointer; padding: 10px 0; font-weight: 500; color: var(--ink); }
.rd .capture-details > summary small { margin-left: 8px; color: var(--faint); font-weight: 400; }
.rd .capture-details > .meta { margin-bottom: 12px; }
.rd .area-tech { border: 1px solid var(--border-light); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; margin-bottom: 12px; }
.rd .area-tech.hl { border-color: #ff5a3c; }
.rd .area-head { display: flex; gap: 12px; align-items: center; }
.rd .area-head strong { font-weight: 600; }
.rd .area-head p { margin: 2px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.rd .ref { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #ff5a3c; color: #fff; font: 600 11px var(--sans, system-ui); text-decoration: none; vertical-align: 1px; }
.rd .ref:hover { background: #d9401f; }
.rd .ref.gone { background: var(--border); color: var(--muted); text-decoration: line-through; cursor: default; }
.rd .area .num, .rd .area-tech .num { flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: #ff5a3c; color: #fff; display: grid; place-items: center; font: 600 11px var(--sans, system-ui); }
.rd textarea[data-controller~="autogrow"] { resize: none; overflow: hidden; }
.rd .region-frame.emph{box-shadow:0 0 0 3px rgba(255,90,60,.35)}.rd .region-frame.dim{opacity:.5;box-shadow:none}

/* Editing your own words, in place */
.rd turbo-frame.editable { display: block; }
.rd .edit-link { border: 0; background: none; color: var(--muted); font: 500 12px var(--sans, system-ui); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.rd .edit-link:hover { color: var(--accent-dark); }
.rd .edit-link[hidden] { display: none; }
.rd .edited { color: var(--faint); font-size: 12px; cursor: help; }
.rd .edited::before { content: "· "; }
.rd .edit-meta { margin: 2px 0 0; display: flex; gap: 8px; align-items: center; }
.rd .edit-meta:empty { display: none; }
.rd .e-text { margin: 0; overflow-wrap: anywhere; }
.rd .edit-form { display: grid; gap: 8px; }
.rd .edit-form textarea { resize: none; overflow: hidden; line-height: 1.45; width: 100%; box-sizing: border-box; }
.rd .edit-form .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rd .edit-form .hint { margin: 0; font-size: 12px; color: var(--faint); }
.rd .edit-form .edit-error { color: var(--danger, #b3261e); }