/* Personal agent chat: #agent page + corner panel (public/agent.js). */

/* ---- status ---- */
.ag-status{display:inline-flex;align-items:center;gap:6px}
.ag-dot{width:8px;height:8px;border-radius:50%;background:#b9bfb2;flex:0 0 8px}
.ag-dot.on{background:#3f9a59;box-shadow:0 0 0 3px rgba(63,154,89,.16)}
.ag-state{color:var(--sage);font-size:12px}

/* ---- chat view (shared) ---- */
.ag-chat{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--surface)}
.ag-msgs{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:14px}
.ag-chat.compact .ag-msgs{padding:14px}
.ag-empty{margin:auto;text-align:center;color:var(--sage);max-width:320px;font-size:13px}
.ag-empty-ic{font-size:28px;color:var(--evergreen);margin-bottom:6px}
.ag-msg{display:flex;flex-direction:column;max-width:100%}
.ag-user{align-items:flex-end}
.ag-bubble{background:var(--paper);border:1px solid var(--line);border-radius:14px 14px 4px 14px;padding:8px 12px;white-space:pre-wrap;word-wrap:break-word;max-width:85%}
.ag-chip{margin-top:4px;font-size:11.5px;color:var(--moss);background:var(--hover);border-radius:6px;padding:1px 7px;max-width:85%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-chip:hover{color:var(--ink)}
.ag-bot{align-items:flex-start}
.ag-md{max-width:100%;overflow-wrap:anywhere;line-height:1.55}
.ag-md>:first-child{margin-top:0}.ag-md>:last-child{margin-bottom:0}
.ag-md p{margin:0 0 8px}
.ag-md h4{margin:12px 0 6px;font-size:14px}
.ag-md ul,.ag-md ol{margin:0 0 8px;padding-left:22px}
.ag-md li{margin:2px 0}
.ag-md a{color:var(--berry);text-decoration:underline}
.ag-md code{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:12px;background:var(--hover);border-radius:4px;padding:1px 4px}
.ag-md pre{background:#f6f7f3;border:1px solid var(--line);border-radius:8px;padding:10px 12px;overflow-x:auto;margin:0 0 8px}
.ag-md pre code{background:none;padding:0;font-size:12px;line-height:1.5}
.ag-bot.st-pending .ag-md>:last-child::after{content:"▍";color:var(--sage);margin-left:2px;animation:ag-blink 1s steps(2) infinite}
.ag-typing{display:flex;gap:4px;padding:8px 2px}
.ag-typing i{width:6px;height:6px;border-radius:50%;background:var(--sage);animation:ag-bounce 1.2s infinite ease-in-out}
.ag-typing i:nth-child(2){animation-delay:.15s}.ag-typing i:nth-child(3){animation-delay:.3s}
@keyframes ag-bounce{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes ag-blink{50%{opacity:0}}
.ag-err{color:var(--clay);background:#f8eeea;border:1px solid #ecd6cf;border-radius:10px;padding:8px 12px;white-space:pre-wrap;max-width:100%}
.ag-retry{margin-top:6px;padding:3px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--moss);font-size:12px}
.ag-retry:hover{background:var(--hover);color:var(--ink)}
/* agent steps (activity): live list while pending, "▸ N trin" disclosure when finished */
.ag-steps{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--moss);max-width:100%}
.ag-step{display:flex;align-items:center;gap:7px;min-width:0}
.ag-step-ic{flex:0 0 18px;text-align:center;font-size:12px}
.ag-step-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-step.run .ag-step-t{color:var(--ink)}
.ag-step.err .ag-step-t{color:var(--clay)}
.ag-more{color:var(--sage);font-size:11.5px;padding-left:25px}
.ag-spin{flex:0 0 10px;width:10px;height:10px;border:1.5px solid var(--line);border-top-color:var(--moss);border-radius:50%;animation:ag-rot .8s linear infinite}
@keyframes ag-rot{to{transform:rotate(360deg)}}
.ag-steps-wrap{margin-bottom:6px;max-width:100%}
.ag-steps-wrap .ag-steps{margin:4px 0 2px}
.ag-steps-btn{border:0;background:none;padding:1px 4px 1px 0;color:var(--sage);font-size:12px}
.ag-steps-btn:hover{color:var(--ink)}
.ag-stop{margin-top:6px;padding:2px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--moss);font-size:12px}
.ag-stop:hover{background:var(--hover);color:var(--clay)}
.ag-stop:disabled{opacity:.5;cursor:default}
.ag-stopped{margin-top:4px;color:var(--sage);font-size:11.5px;font-style:italic}
.ag-offline{margin:0 16px 8px;padding:7px 11px;border-radius:8px;background:#fbf6e6;border:1px solid #efe3bd;color:var(--moss);font-size:12.5px}
.ag-compose{padding:0 16px 14px}
.ag-about{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--moss);margin:0 2px 6px;cursor:pointer;user-select:none;min-width:0}
.ag-about input{margin:0}
.ag-about-t{color:var(--sage);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ag-about-t:not(:empty)::before{content:"· "}
.ag-row{display:flex;align-items:flex-end;gap:8px;border:1px solid var(--line);border-radius:12px;padding:6px 6px 6px 12px;background:var(--surface)}
.ag-row:focus-within{border-color:var(--sage)}
.ag-input{flex:1;border:0;outline:none;resize:none;font-size:14px;line-height:1.45;padding:5px 0;max-height:180px;background:transparent;color:var(--ink)}
.ag-send{width:30px;height:30px;flex:0 0 30px;border-radius:50%;border:0;background:var(--evergreen);color:#fff;font-size:15px;font-weight:700;display:grid;place-items:center}
.ag-send:disabled{opacity:.5;cursor:default}

/* ---- #agent page ---- */
.ag-page{flex:1;display:flex;min-height:0}
.ag-side{width:250px;flex:0 0 250px;border-right:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column;min-height:0}
.ag-side-head{padding:12px}
.ag-new{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-weight:500;text-align:left}
.ag-new:hover{background:var(--hover)}
.ag-threads{flex:1;overflow-y:auto;padding:0 8px 12px}
.ag-none{color:var(--sage);font-size:13px;padding:8px 6px}
.ag-th{display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:7px;cursor:pointer;color:var(--moss);font-size:13px}
.ag-th:hover{background:var(--hover)}
.ag-th.sel{background:var(--active);color:var(--ink)}
.ag-th-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-th-ago{color:var(--sage);font-size:11px;flex:0 0 auto}
.ag-del{border:0;background:none;color:var(--sage);font-size:15px;line-height:1;padding:0 2px;visibility:hidden}
.ag-th:hover .ag-del{visibility:visible}
.ag-del:hover{color:var(--clay)}
.ag-main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.ag-main .ag-msgs,.ag-main .ag-compose,.ag-main .ag-offline{width:100%;max-width:780px;margin-left:auto;margin-right:auto}
.ag-main .ag-offline{width:calc(100% - 32px);max-width:748px}
.ag-head{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);min-height:44px}
.ag-name{font-weight:600}
.ag-handle{color:var(--sage);font-size:12px}
.ag-page{position:relative}
.ag-listbtn{display:none}
.ag-sec{font-size:11px;font-weight:600;color:var(--sage);text-transform:uppercase;letter-spacing:.06em;padding:12px 8px 4px}
.ag-sec:first-child{padding-top:2px}
@media(max-width:720px){
  .ag-side{display:none}
  .ag-listbtn{display:inline-block}
  .ag-page.list-open .ag-side{display:flex;position:absolute;top:0;bottom:0;left:0;z-index:6;width:min(300px,86vw);box-shadow:0 10px 30px rgba(24,32,26,.2)}
}

/* ---- agent rooms (swarm group chats) in the #agent page ---- */
.rm-th .rm-hash{color:var(--sage);font-weight:600;flex:0 0 auto}
.rm-arcade .ag-th-t{font-weight:600;color:var(--ink)}
.rm-th.closed .ag-th-t{color:var(--sage)}
.rm-th.ask{background:#fbf3dc}
.rm-th.ask:hover,.rm-th.ask.sel{background:#f5e7bd}
.rm-th:has(.rm-unread) .ag-th-t{color:var(--ink);font-weight:600}
.rm-ask{flex:0 0 16px;height:16px;border-radius:8px;background:#c9952b;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.rm-unread{flex:0 0 auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--evergreen);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center}
.rm-view{flex:1;display:flex;flex-direction:column;min-height:0}
.rm-state{flex:0 0 auto;font-size:11px;font-weight:600;border-radius:5px;padding:1px 7px}
.rm-state.open{background:#e3efe4;color:var(--evergreen)}
.rm-head .ag-name{flex:0 0 auto;white-space:nowrap}
.rm-state.closed{background:var(--hover);color:var(--sage)}
.rm-goal{flex:1 1 auto;min-width:0;color:var(--sage);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-head .ag-hbtn{flex:0 0 auto}
.rm-tasks{list-style:none;margin:0;padding:8px 16px;border-bottom:1px solid var(--line);background:var(--paper);max-height:40vh;overflow-y:auto;display:flex;flex-direction:column;gap:3px;font-size:12.5px}
.rm-tasks li{display:flex;gap:8px;align-items:baseline}
.rm-tasks li.done .rm-task{color:var(--sage);text-decoration:line-through}
.rm-tick{flex:0 0 14px;color:var(--evergreen)}
.rm-task{flex:1;min-width:0}
.rm-owner{flex:0 0 auto;font-weight:600;font-size:12px}
.rm-msg{gap:2px}
.rm-meta{display:flex;align-items:baseline;gap:7px;font-size:12px;flex-wrap:wrap}
.rm-who{font-weight:600}
.rm-to,.rm-time{color:var(--sage)}
.rm-time{font-size:11px}
.rm-kind{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;border-radius:4px;padding:0 5px;background:var(--hover);color:var(--moss)}
.rm-kind.k-plan{background:#e6eaf4;color:var(--berry)}
.rm-kind.k-done{background:#e3efe4;color:var(--evergreen)}
.rm-kind.k-ask-esben{background:#c9952b;color:#fff}
.rm-kind.k-summary{background:var(--evergreen);color:#fff}
.rm-kind.k-take{background:#efe6f4;color:#6b3f8a}
.rm-kind.k-review{background:#e4eef1;color:#2c5f6e}
.rm-msg.k-ask-esben .rm-body{background:#fbf3dc;border:1px solid #efdca6;border-radius:10px;padding:8px 12px}
.rm-msg.k-summary .rm-body{background:#eef4ee;border:1px solid #cfe0d1;border-radius:10px;padding:8px 12px}
.rm-msg.k-claim .rm-body,.rm-msg.k-done .rm-body{color:var(--moss)}
.rm-pending{display:contents}
.rm-out .ag-bubble{opacity:.7}
.rm-out-st{font-size:11px;color:var(--sage);margin-top:3px}
.rm-out.err .rm-out-st{color:var(--clay)}
/* starting a swarm: "+ Ny swarm", rows/rooms waiting for the mini, the form */
.rm-sec{display:flex;align-items:center;gap:6px}
.rm-sec>span{flex:1}
.rm-new{border:1px solid var(--line);background:var(--surface);color:var(--moss);border-radius:6px;padding:1px 7px;font-size:11px;font-weight:600;text-transform:none;letter-spacing:0}
.rm-new:hover,.rm-new.sel{background:var(--active);color:var(--ink)}
.rm-starting .ag-th-t{color:var(--sage);font-style:italic}
.rm-starting.failed .ag-th-ago{color:var(--clay)}
.rm-state.starting{background:#fbf6e6;color:#8a6a1e}
.rm-state.failed{background:#f8eeea;color:var(--clay)}
.ag-empty.rm-failed .ag-empty-t{color:var(--clay)}
.ag-empty .ag-typing{justify-content:center}
.sw-scroll{flex:1;overflow-y:auto;background:var(--surface)}
.sw-form{max-width:560px;margin:0 auto;padding:20px 24px 32px;display:flex;flex-direction:column;gap:14px}
.sw-field{display:flex;flex-direction:column;gap:4px}
.sw-label{font-size:12px;font-weight:600;color:var(--moss)}
.sw-hint{font-size:11.5px;color:var(--sage)}
.sw-in{font:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 10px;outline:none;width:100%}
.sw-in:focus{border-color:var(--sage)}
textarea.sw-in{resize:vertical;min-height:96px;line-height:1.45}
.sw-model{width:auto;min-width:140px}
.sw-roles{display:flex;flex-wrap:wrap;gap:6px 16px}
.sw-role{display:flex;align-items:center;gap:5px;font-size:13.5px;cursor:pointer;user-select:none}
.sw-err{color:var(--clay);background:#f8eeea;border:1px solid #ecd6cf;border-radius:8px;padding:7px 11px;font-size:13px}
.sw-actions{display:flex;justify-content:flex-end}
.sw-go{border:0;border-radius:8px;background:var(--evergreen);color:#fff;font-weight:600;padding:8px 16px}
.sw-go:disabled{opacity:.5;cursor:default}
@media(max-width:720px){
  .rm-head{flex-wrap:wrap}
  .rm-goal{order:9;flex-basis:100%}
  .rm-head .ag-name{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis}
}
.rm-goal{cursor:pointer}
.rm-goal.open{white-space:normal;overflow:visible}
/* Room = timeline + Result sidebar (sticky, own scroll, folds into a rail; a drawer at <= 900 px) */
.rm-body{flex:1;display:flex;min-height:0;position:relative}
.rm-col{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.rm-side{width:340px;flex:0 0 340px;border-left:1px solid var(--line);background:#f6f9f4;display:flex;flex-direction:column;min-height:0}
.rm-side-top{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 16px;min-height:40px;border-bottom:1px solid var(--line);font-size:13px;color:var(--evergreen)}
.rm-side-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:12px 16px 24px;display:flex;flex-direction:column;gap:14px;font-size:13px}
.rm-side-h{font-size:11px;font-weight:600;color:var(--sage);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.rm-side-h.hot{color:#9a6400}
.rm-side-none{color:var(--sage);font-size:12.5px}
.rm-rail{display:none}
.rm-view.side-closed .rm-side{width:34px;flex-basis:34px}
.rm-view.side-closed .rm-side-top,.rm-view.side-closed .rm-side-body{display:none}
.rm-view.side-closed .rm-rail{display:block;flex:1;border:0;background:none;writing-mode:vertical-rl;color:var(--evergreen);font-weight:600;font-size:12px;letter-spacing:.06em;padding:14px 0;cursor:pointer}
.rm-view.side-closed .rm-rail:hover{background:var(--hover)}
.rm-side-btn,.rm-scrim{display:none}
.rm-side-btn.has::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--evergreen);margin-left:6px;vertical-align:1px}
.rm-result-links{font-size:13px}
.rm-result-links ul{margin:2px 0 0}
.rm-result-dir{font-size:12.5px;color:var(--moss);overflow-wrap:anywhere}
.rm-msg.rm-flash{animation:rm-flash 1.6s ease-out}
@keyframes rm-flash{0%,30%{background:#fff1c7;box-shadow:0 0 0 6px #fff1c7}100%{background:transparent;box-shadow:0 0 0 6px transparent}}
@media(max-width:1180px){.rm-side{width:300px;flex-basis:300px}}
@media(max-width:900px){
  .rm-side-btn{display:inline-block}
  .rm-side,.rm-view.side-closed .rm-side{position:absolute;top:0;right:0;bottom:0;z-index:6;width:min(360px,88vw);flex-basis:auto;transform:translateX(105%);visibility:hidden;transition:transform .2s ease,visibility 0s .2s;box-shadow:-12px 0 32px rgba(24,32,26,.18)}
  .rm-view.side-closed .rm-side-top{display:flex}
  .rm-view.side-closed .rm-side-body{display:flex}
  .rm-view .rm-side .rm-rail{display:none}
  .rm-view.side-open .rm-side{transform:none;visibility:visible;transition:transform .2s ease}
  .rm-view.side-open .rm-scrim{display:block;position:absolute;inset:0;z-index:5;background:rgba(24,32,26,.28)}
}
@media(prefers-reduced-motion:reduce){.rm-side{transition:none!important}.rm-msg.rm-flash{animation:none;outline:2px solid #e8c766}}
/* "For me" filter, long bodies, unread line */
.rm-filter{display:flex;gap:6px;padding:6px 16px;border-bottom:1px solid var(--line);justify-content:center}
.rm-filter-b{border:1px solid var(--line);background:var(--surface);color:var(--moss);border-radius:14px;padding:2px 11px;font-size:12px}
.rm-filter-b.on{background:var(--evergreen);border-color:var(--evergreen);color:#fff}
.rm-msgs.focus .rm-other{display:none}
.rm-clamp{max-height:9.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent)}
.rm-more{align-self:flex-start;border:0;background:none;padding:0;color:var(--berry);font-size:12px}
.rm-new-line{display:flex;align-items:center;gap:8px;color:var(--clay);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.rm-new-line::before,.rm-new-line::after{content:"";flex:1;height:1px;background:#e4c6bc}
.rm-task-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.rm-done-b{align-self:flex-start;border:0;background:none;padding:2px 0;color:var(--sage);font-size:12px}
.rm-none{color:var(--sage)}
/* chat/room message footers: time + copy; local paths copy on click */
.ag-foot{display:flex;align-items:center;gap:8px;margin-top:3px;font-size:11px;color:var(--sage)}
.ag-user .ag-foot{justify-content:flex-end}
.ag-foot .ag-stopped{margin:0}
.ag-copy{border:0;background:none;padding:0 2px;color:var(--sage);font-size:11px;opacity:.75}
.ag-copy:hover,.ag-copy.copied{color:var(--evergreen);opacity:1}
.ag-msg:not(:hover) .ag-foot .ag-copy,.rm-msg:not(:hover) .rm-meta .ag-copy{opacity:.35}
.rm-meta .ag-copy{margin-left:auto}
.ag-path{cursor:copy;border-bottom:1px dotted var(--sage)}
.ag-path.copied{background:#e3efe4}
.ag-md blockquote{margin:0 0 8px;padding:2px 0 2px 12px;border-left:3px solid var(--line);color:var(--moss)}
.ag-md li>ul,.ag-md li>ol{margin:2px 0 2px}
@media(hover:none){
  .ag-del{visibility:visible}
  .ag-copy{opacity:1}
}

/* ---- corner button + panel ---- */
.ag-fab{position:fixed;right:20px;bottom:20px;z-index:45;width:48px;height:48px;border-radius:50%;border:0;background:var(--evergreen);color:#fff;box-shadow:0 8px 24px rgba(24,32,26,.25);display:grid;place-items:center;transition:transform .15s}
.ag-fab:hover{transform:scale(1.05)}
.ag-fab.open{background:var(--moss)}
.ag-fab-ic{font-size:20px;line-height:1}
.ag-fab .ag-status{position:absolute;top:3px;right:3px}
.ag-fab .ag-dot{border:2px solid #fff;width:12px;height:12px;flex-basis:12px;box-shadow:none}
.ag-panel{position:fixed;right:20px;bottom:80px;z-index:45;width:380px;height:560px;max-width:calc(100vw - 24px);max-height:calc(100vh - 100px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(24,32,26,.22);overflow:hidden}
.ag-panel .ag-head{padding:8px 8px 8px 14px}
.ag-sp{flex:1}
.ag-hbtn{padding:4px 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--moss);font-size:12.5px;font-weight:500}
.ag-hbtn:hover{background:var(--hover);color:var(--ink)}
.ag-hbtn.ag-icon{border-color:transparent;padding:4px 7px;font-size:15px;line-height:1}
@media(max-width:720px){
  .ag-fab{right:14px;bottom:14px}
  .ag-panel{right:12px;bottom:72px}
}
@media print{.ag-fab,.ag-panel{display:none!important}}
/* who is working in a room (tmux on the mini) and the wait for an agent's answer */
.rm-live{padding:3px 16px;font-size:12px;color:var(--sage);border-bottom:1px solid var(--line)}
.rm-live.busy::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#3f9a59;margin-right:6px;animation:ag-blink 1.2s steps(2) infinite}
.rm-wait{align-self:flex-end;font-size:11.5px;color:var(--sage);font-style:italic;margin-top:-8px}
/* Room messages, Slack-style: the sender's arcade sprite as avatar, name · title · time, the body; consecutive posts
   by one sender within 5 min (rm-cont) drop the avatar and name. Threads nest under their root ("N replies"). */
.rm-msgs .rm-msg,.rm-thread .rm-msg{flex-direction:row;align-items:flex-start;gap:10px;max-width:100%}
.rm-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
/* Chat avatars: the outlined sprite (arcade.js avatarUrl) on a light tile tinted with the agent's colour (--av). */
.rm-av,.rm-thr-av,.rm-replying-av{--av:#8a9382;background:color-mix(in srgb,var(--av) 16%,var(--surface));border:1px solid color-mix(in srgb,var(--av) 38%,transparent)}
.rm-av{flex:0 0 36px;width:36px;height:36px;padding:0;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:var(--ink);font-weight:700;overflow:hidden}
/* the 20x19 sprite at exact multiples: 1.5x (3 device px per pixel on a 2x screen), 4/3x on 3x phones */
.rm-av img{width:30px;height:28.5px;margin-top:2px;image-rendering:pixelated;image-rendering:crisp-edges}
.rm-av:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--av) 60%,transparent)}
.rm-msg.sys .rm-av{cursor:default;box-shadow:none}
.rm-msg.sys .rm-av img{opacity:.55}
.rm-msg.sys .rm-body{color:var(--sage);font-size:12.5px}
.rm-msg.rm-cont{margin-top:-11px}
.rm-msg.rm-cont .rm-av{visibility:hidden;height:2px}
.rm-msg.rm-cont .rm-who,.rm-msg.rm-cont .rm-title{display:none}
.rm-msg.rm-cont .rm-meta{font-size:11px}
.rm-who,.rm-to-who{border:0;background:none;padding:0;font:inherit;cursor:pointer}
.rm-who{font-weight:700;color:var(--ink)}
.rm-to-who{color:var(--sage)}
.rm-who:hover,.rm-to-who:hover{text-decoration:underline}
.rm-title{color:var(--sage);font-size:11.5px}
.rm-plain{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
.rm-msg.mine .rm-body{background:#eef4ee;border:1px solid #d7e5d8;border-radius:8px;padding:6px 10px;align-self:flex-start;max-width:100%}
.rm-msg.to-esben .rm-main{border-left:3px solid #c9952b;padding-left:9px}
.rm-msg.rm-out .rm-body{opacity:.7}
.rm-thr{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:2px 9px 2px 4px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--berry);font-size:12px;cursor:pointer;max-width:100%;text-align:left}
.rm-thr:hover{border-color:var(--berry);background:#f3f5fb}
.rm-thr span{color:var(--sage);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-thr-av{width:20px;height:19px;image-rendering:pixelated;border-radius:4px}
.rm-thread{display:flex;flex-direction:column;gap:12px}
.rm-thread .rm-av{flex-basis:32px;width:32px;height:32px}
.rm-thread .rm-msg.rm-cont{margin-top:-9px}
.rm-thread-n{font-size:11px;color:var(--sage);border-bottom:1px solid var(--line);padding-bottom:4px;text-transform:uppercase;letter-spacing:.05em}
.rm-side-top .rm-side-back{font-size:20px;padding:0 6px}
.rm-side-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:720px){
  .rm-view.side-sheet .rm-side{width:100%}
  .rm-av{flex-basis:32px;width:32px;height:32px}
  .rm-av img{width:26.667px;height:25.333px}
}
/* Reply to a message: ↩ Reply on hover (always on touch screens, "r" on a focused message); the composer shows what
   it answers; Esben's replies sit in the stream, highlighted, and in the thread of the message they answer. */
.rm-reply-b{color:var(--berry)}
.rm-msg:not(:hover):not(:focus) .rm-meta .rm-reply-b{opacity:0}
.rm-msg:focus{outline:2px solid #c9d6ef;outline-offset:3px;border-radius:6px}
.rm-msg:focus:not(:focus-visible){outline:none}
.rm-msg.esben-reply .rm-main{border-left:3px solid var(--berry);padding-left:9px}
.rm-in-thread{border:0;background:none;padding:0;color:var(--berry);font-size:11.5px;cursor:pointer}
.rm-in-thread:hover{text-decoration:underline}
.rm-in-thread.static{cursor:default;text-decoration:none}
.rm-replying{display:flex;align-items:center;gap:8px;margin:0 2px 6px;padding:5px 6px 5px 10px;border-left:3px solid var(--berry);background:#f3f5fb;border-radius:6px;font-size:12.5px;color:var(--moss);min-width:0}
.rm-replying[hidden]{display:none}
.rm-replying-av{flex:0 0 auto;width:21px;height:20px;border-radius:4px;image-rendering:pixelated;image-rendering:crisp-edges}
.rm-replying-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-replying-q{color:var(--sage)}
.rm-replying-x{border:0;background:none;font-size:17px;line-height:1;color:var(--sage);padding:0 4px;cursor:pointer}
.rm-replying-x:hover{color:var(--clay)}
@media(hover:none){.rm-msg .rm-meta .rm-reply-b{opacity:1!important}}