/* Command Messages only. Reuse native groups, owner badges and .action buttons. */
@font-face {
	font-family: "Command Font Awesome Sharp Light Reply";
	font-style: normal;
	font-weight: 300;
	font-display: block;
	src: url("fontawesome/command-fa-sharp-light-reply-300.woff2") format("woff2");
	unicode-range: U+F3E5;
}
.dashboard-app .pm-history { position: relative; min-width: 0; }
.dashboard-app .pm-send-section { border-top: 1px solid #262626; margin: 10px -10px -10px; }
.dashboard-app .pm-path { position: relative; width: 100%; aspect-ratio: 2 / 1; margin: 0; border: 0; background: #000; overflow: hidden; pointer-events: none; user-select: none; }
.dashboard-app .pm-path canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dashboard-app .pm-path:not([hidden]) + .pm-entry { border-top: 1px solid #262626; }
.dashboard-app .pm-feed { display: flex; flex-direction: column; gap: 20px; max-height: 360px; overflow-y: auto; overscroll-behavior: contain; min-width: 0; box-sizing: border-box; padding: 10px; }
.dashboard-app .pm-reply-hint { position: absolute; z-index: 2; inset: auto 0 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 40px; padding: 0 20px; background: linear-gradient(to bottom, transparent, #000); color: var(--command-grey, #727578); font-size: var(--font-sm); text-align: center; pointer-events: none; }
.dashboard-app .pm-reply-hint[hidden] { display: none; }
.dashboard-app .pm-reply-only .pm-feed { padding-bottom: 40px; }
.dashboard-app .pm-empty { font-size: var(--font-md); color: var(--command-grey, #727578); padding: 10px; text-align: center; }
.dashboard-app .pm-feed > :is(.pm-empty-no-transmissions, .pm-empty-loading-transmissions) { display: flex; flex: 1 0 auto; flex-direction: column; align-items: center; justify-content: center; align-self: stretch; gap: 16px; box-sizing: border-box; min-height: 220px; padding: 20px 10px; background: #000; color: var(--command-grey, #727578); }
.dashboard-app .dashboard-card-overlay .pm-feed > :is(.pm-empty-no-transmissions, .pm-empty-loading-transmissions) { background: transparent; }
.dashboard-app .pm-empty-ground-station { display: block; width: 160px; height: 160px; max-width: 42vw; max-height: 42vw; color: var(--command-grey, #727578); }
.dashboard-app .pm-msg { display: flex; flex: none; flex-direction: column; align-items: flex-start; width: 100%; max-width: 100%; min-width: 0; align-self: flex-start; }
.dashboard-app .pm-msg.right { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; width: 100%; max-width: 100%; }
.dashboard-app .pm-bubble { width: fit-content; max-width: 80%; box-sizing: border-box; border: 0; border-radius: 12px; padding: 10px 10px 5px; background: #2b2d38; color: #ededed; }
.dashboard-app .pm-msg.right .pm-bubble { width: fit-content; max-width: 80%; background: #464b5a; text-align: right; }
.dashboard-app .pm-msg.right :is(.pm-meta, .pm-actions) { justify-content: flex-end; }
.dashboard-app .pm-meta { display: flex; align-items: center; gap: 10px; min-height: 18px; margin-top: 5px; font-size: var(--font-sm); color: var(--command-grey, #727578); line-height: 1.4; }
.dashboard-app .pm-replyable { cursor: pointer; }
.dashboard-app .pm-replyable:focus-visible { outline: 1px solid #727578; outline-offset: 3px; }
.dashboard-app .pm-reply-icon { --fa: "\f3e5"; font-family: "Command Font Awesome Sharp Light Reply"; font-weight: 300; order: 1; margin-left: auto; padding-left: 0; color: inherit; font-size: 12px; }
.dashboard-app .pm-x { width: 18px; min-width: 0; height: 18px; flex: none; order: 2; margin-left: auto; display: flex; align-items: center; justify-content: flex-end; background: none; border: 0; padding: 0; color: var(--command-grey, #727578); font-size: var(--font-sm); cursor: pointer; }
.dashboard-app .pm-replyable .pm-x { margin-left: 0; }
.dashboard-app .pm-x:hover { color: #ededed; }
/* Who a message is from (Planet → Planet in Comms, the owner badge in The Outpost) sits under its bubble. */
.dashboard-app .pm-identity { display: flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; margin: 5px 0 0; }
.dashboard-app .pm-transmission-summary .pm-identity { margin-top: 10px; }
.dashboard-app .pm-msg.right .pm-identity { justify-content: flex-end; max-width: 100%; }
.dashboard-app .pm-endpoint { display: flex; align-items: center; gap: 5px; flex: 0 1 auto; min-width: 0; max-width: calc((100% - 24px) / 2); }
.dashboard-app .pm-direction { flex: 0 0 14px; width: 14px; font-size: 12px; color: var(--command-grey, #727578); text-align: center; }
.dashboard-app .pm-planet { display: flex; align-items: center; gap: 5px; min-width: 25px; color: var(--command-grey, #727578); cursor: pointer; background: none; border: 0; font-size: 11px; line-height: 15px; padding: 0; text-align: left; }
.dashboard-app .pm-recipient { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--command-grey, #727578); font-size: 11px; line-height: 15px; }
.dashboard-app .pm-planet-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-app .pm-planet-thumb { display: block; flex: 0 0 25px; box-sizing: border-box; width: 25px; height: 25px; overflow: hidden; border: 1px solid #262626; border-radius: 50%; background: #000; }
.dashboard-app .pm-planet-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dashboard-app .pm-planet:disabled { cursor: default; }
.dashboard-app .pm-text { font-size: var(--font-lg); line-height: 1.35; color: #ededed; white-space: pre-wrap; overflow-wrap: anywhere; }
.dashboard-app .pm-progress { height: 2px; background: #262626; margin-top: 5px; }
.dashboard-app .pm-progress i { display: block; height: 100%; background: #5acc77; width: 0; }
.dashboard-app .pm-eta { font-size: var(--font-sm); color: #5acc77; margin-top: 5px; font-variant-numeric: tabular-nums; }
.dashboard-app .pm-actions { display: flex; gap: 10px; margin-top: 5px; }
.dashboard-app .pm-link { background: none; border: 0; color: var(--command-grey, #727578); font: inherit; font-size: var(--font-sm); cursor: pointer; padding: 0; }
.dashboard-app .pm-link:hover { color: #ededed; }
.dashboard-app .pm-composer { margin: 0; padding: 10px; }
.dashboard-app .pm-draft { position: relative; width: 100%; background: #000; padding: 0; }
.dashboard-app .pm-compose-scroll { width: 100%; min-width: 0; }
/* The "Important" notice is a full-width section under the buttons (Comms, The Outpost, the compose
   popup): its container has 10px padding, so it reaches 10px past each side and the bottom, with a
   top border only. */
.dashboard-app .pm-public-notice { box-sizing: border-box; clear: both; float: none; width: calc(100% + 20px); margin: 10px -10px -10px; border: 0; border-top: 1px solid var(--command-border, #262626); padding: 10px; color: var(--command-grey, #727578); font-size: var(--font-md); line-height: 1.4; }
.dashboard-app .pm-public-notice strong { font-weight: 500; }
.dashboard-app .pm-composer textarea { display: block; box-sizing: border-box; width: 100%; resize: none; min-height: 1.4em; max-height: 4.2em; height: 1.4em; overflow-y: hidden; background: transparent; color: #ededed; border: 0; border-radius: 0; padding: 0; font-size: 16px; line-height: 1.4; outline: none; -webkit-appearance: none; }
.dashboard-app .pm-composer textarea::placeholder { font-size: 16px; color: var(--command-grey, #727578); }
.dashboard-app .pm-composer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.dashboard-app .pm-route { display: flex; flex: 1; align-items: center; gap: 5px; min-width: 0; margin: 0; font-size: var(--font-sm); color: var(--command-grey, #727578); line-height: 1.4; font-variant-numeric: tabular-nums; }
.dashboard-app .pm-source { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-app .pm-counter, .dashboard-app .pm-route-dot { flex: none; }
.dashboard-app :is(.pm-send, .pm-notice-action) { width: fit-content; min-width: 0; padding-left: 20px; padding-right: 20px; }
.dashboard-app .pm-send { flex: none; }
.dashboard-app .pm-send:not(:disabled) { background: #5acc77; color: #000; }
.dashboard-app .pm-send:disabled { color: #666; background: #202020; cursor: default; }
.dashboard-app .pm-replying { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--font-sm); color: var(--command-grey, #727578); padding: 0 0 10px; }
.dashboard-app .pm-reply-cancel { flex: none; box-sizing: border-box; height: 25px; border: 1px solid #262626; border-radius: 999px; padding: 0 10px; }
.dashboard-app .pm-error { box-sizing: border-box; width: calc(100% - 20px); margin: 10px; padding: 10px; border: 1px solid #5e0001; background: #000; color: #dd0002; font-size: var(--font-sm); line-height: 1.35; }
.dashboard-app .pm-notice { padding: 10px; font-size: var(--font-md); color: var(--command-grey, #727578); line-height: 1.4; }
.dashboard-app .pm-notice-action, .dashboard-app .pm-retry { margin-top: 10px; }
.dashboard-app [data-box="messages"] [hidden] { display: none !important; }

/* Mobile Comms reuses the same draft in a native-looking local dialog. */
.dashboard-app .pm-compose-launch { display: none; }
.dashboard-app .pm-mobile-compose > .pm-compose-launch { position: fixed; z-index: 10001; right: 10px; bottom: 70px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; background: #5acc77; color: #000; font-size: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.75); cursor: pointer; touch-action: manipulation; }
.dashboard-app .pm-mobile-compose > .pm-send-section { display: none; }
.dashboard-app .pm-mobile-compose .pm-feed { padding: 10px 10px 70px; }
.dashboard-app .pm-mobile-compose.pm-reply-only .pm-feed { padding-bottom: 60px; }
.dashboard-app .pm-mobile-compose .pm-reply-hint { height: 60px; }
.dashboard-app .pm-compose-overlay { position: fixed; inset: 0; z-index: 10040; background: rgba(0, 0, 0, .9); overflow: hidden; }
.dashboard-app .pm-compose-overlay .popup-scroll { padding: 10px 20px 20px; }
.dashboard-app .pm-compose-overlay [hidden] { display: none !important; }
.dashboard-app .pm-compose-overlay .popup-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dashboard-app .pm-compose-overlay .popup-title .pm-planet-thumb { flex-basis: 40px; width: 40px; height: 40px; }
.dashboard-app .pm-modal-form { display: flow-root; padding: 0; width: 100%; }
.dashboard-app .pm-modal-form .popup-body { padding: 0; }
/* No divider between the typing area and the buttons; 10px from the "From …" line to the buttons:
   the line sits at the bottom of its strip (below), and the footer has a plain 10px top padding. */
.dashboard-app .pm-modal-form .popup-footer { padding: 10px; border-top: 0 !important; }
.dashboard-app .pm-modal-form .pm-compose-scroll { box-sizing: border-box; min-height: calc(1.4em + 50px); max-height: calc(4.2em + 50px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; font-size: 16px; line-height: 1.4; scrollbar-gutter: auto; }
/* Typing area: 10px inside, like the rest of the popup; the bottom keeps room for the route line. */
.dashboard-app .pm-modal-form textarea { min-height: calc(1.4em + 50px); max-height: none; padding: 10px 10px 40px; overflow-y: hidden; }
.dashboard-app .pm-modal-form .pm-draft .pm-route { position: absolute; z-index: 1; right: 10px; bottom: 0; left: 10px; box-sizing: border-box; height: 40px; margin: 0; padding: 0; align-items: flex-end; background: linear-gradient(to bottom, transparent 0, #000 50%, #000 100%); pointer-events: none; }
.dashboard-app .pm-modal-form .pm-notice, .dashboard-app .pm-modal-form .pm-replying { margin: 20px 20px 0; padding: 0 0 10px; }
.dashboard-app .pm-modal-form .popup-footer .pm-error { width: 100%; margin: 0 0 10px; }
/* The buttons row is a float in the shared popup CSS; here it is in flow so the notice section
   below it keeps its 10px gap (a cleared float swallowed the margin and let them overlap). */
.dashboard-app .pm-modal-form .popup-footer .popup-action { float: none; }
.dashboard-app .pm-modal-form .popup-action > .action { flex: 1 1 0; width: 0; min-width: 0; padding-left: 20px; padding-right: 20px; }

/* Keep the feed's scrollbar on the outer edge and confine sending to Comms. */
.dashboard-app .pm-transmission-mode { position: relative; min-height: 0; }
.dashboard-app .pm-transmission-mode > .pm-send-section { flex: none; margin: 0; }
.dashboard-app .pm-transmission-overlay { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--pm-transmission-background, #000); opacity: 1; transition: opacity 350ms ease; }
.dashboard-app .pm-transmission-overlay[hidden] { display: none; }
.dashboard-app .pm-transmission-overlay > :is(.pm-path, .pm-transmission-summary) { opacity: 0; transition: opacity 350ms ease; }
.dashboard-app .pm-transmission-overlay.is-visible > :is(.pm-path, .pm-transmission-summary) { opacity: 1; }
.dashboard-app .pm-transmission-overlay.is-delivered { opacity: 0; }
.dashboard-app .pm-transmission-overlay > .pm-path { display: block; flex: 1 1 0; min-height: 0; aspect-ratio: auto; background: #000; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35px, #000 calc(100% - 35px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 35px, #000 calc(100% - 35px), transparent); }
.dashboard-app .pm-transmission-summary { flex: none; min-width: 0; margin-top: auto; padding: 40px 20px; text-align: center; background: var(--pm-transmission-background, #000); }
.dashboard-app .pm-transmission-summary .pm-planet-name { color: var(--command-grey, #727578); }
.dashboard-app .pm-transmission-summary :is(.pm-msg, .pm-msg.right) { align-items: center; }
.dashboard-app .pm-transmission-summary :is(.pm-identity, .pm-msg.right .pm-identity) { justify-content: center; }
.dashboard-app .pm-transmission-summary :is(.pm-bubble, .pm-msg.right .pm-bubble) { max-width: min(90%, 480px); max-height: calc(4.05em + 20px); overflow: hidden; padding-bottom: 10px; font-size: var(--font-lg); line-height: 1.35; text-align: center; }
/* Stop the clipped-message fade before the rounded edge to leave no residual
   hairline when the browser composites fractional device pixels. */
.dashboard-app .pm-transmission-summary .pm-bubble.is-clipped {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 25px), transparent calc(100% - 2px));
	mask-image: linear-gradient(to bottom, #000 calc(100% - 25px), transparent calc(100% - 2px));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.dashboard-app .pm-transmission-summary .pm-transmission-status { position: relative; z-index: 1; margin-top: 10px; }
.dashboard-app .pm-transmission-summary > .pm-progress { position: relative; z-index: 1; width: min(80%, 240px); margin: 10px auto 0; }
@media (min-width: 801px) {
	.dashboard-app .pm-transmission-mode.pm-transmitting { min-height: min(440px, calc(100svh - 200px)); }
}
@media (hover: hover) {
	.dashboard-app .pm-compose-launch:hover, .dashboard-app .pm-send:not(:disabled):hover { background: #76df91; }
}

@media (max-width: 800px) {
	.dashboard-app .pm-text,
	.dashboard-app .pm-transmission-summary :is(.pm-bubble, .pm-msg.right .pm-bubble) { font-size: var(--font-xl); }
}

/* The viewed Planet is already named in the card header. */
.dashboard-app .pm-endpoint-current { flex: 0 0 25px; max-width: 25px; }
.dashboard-app .pm-identity:has(.pm-endpoint-current) .pm-endpoint:not(.pm-endpoint-current) { max-width: calc(100% - 49px); }
@media (min-width: 801px) {
 .dashboard-app .pm-composer-row .pm-send { margin-left: auto; }
}

/* ---------- The Outpost (Commanders group chat) ----------
   Same Comms markup inside a popup: the feed fills the popup and scrolls, the composer
   sits at the bottom, and the transmission scene covers both while a message travels. */
.dashboard-app .outpost-button .fa-messages { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.dashboard-app .outpost-button .fa-messages::before { display: none; }
.dashboard-app .outpost-button .fa-messages svg { display: block; width: 20px; height: 20px; }
.dashboard-app .command-outpost-overlay .popup-card { height: min(680px, calc(100svh - 140px)); min-height: 320px; }
.dashboard-app .outpost-chat-root { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.dashboard-app .outpost-chat > .pm-history { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.dashboard-app .outpost-chat .pm-feed { flex: 1 1 auto; min-height: 0; max-height: none; }
.dashboard-app .outpost-chat > .pm-send-section { flex: none; margin: 0; }
.dashboard-app .outpost-chat .pm-retry { align-self: center; margin: 0 0 20px; }
/* Owner badges are absolutely placed on cards; in a chat row they sit in the flow. */
.dashboard-app .outpost-chat .outpost-sender .dashboard-owner-badge { position: static; inset: auto; z-index: auto; width: max-content; min-width: 0; max-width: 100%; margin: 0; overflow: hidden; }
.dashboard-app .outpost-chat .pm-retry[hidden], .dashboard-app .outpost-chat .pm-route[hidden] { display: none; }
@media (max-width: 800px) {
	/* Fill the visible screen like the other popups (bounded by the overlay, not by a viewport
	   unit: 100svh assumed Safari's toolbars were showing and left a gap when they collapsed). */
	body.dashboard-app :is(.popup-overlay, .command-search-overlay).command-outpost-overlay .popup-scroll { align-items: stretch; }
	body.dashboard-app :is(.popup-overlay, .command-search-overlay).command-outpost-overlay .popup-content { display: flex; height: auto; }
	body.dashboard-app :is(.popup-overlay, .command-search-overlay).command-outpost-overlay .popup-card { height: auto; min-height: 0; }
}

/* The Outpost title: a 40px floating Outpost before the name, like a Planet avatar but without
   its circle or border. */
/* The drawing leaves 3px free on each side of its 40px box, so a 7px gap reads as the
   10px between a Planet avatar (which fills its circle) and its title. */
.dashboard-app .command-outpost-overlay .popup-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
/* Same optical correction on the left: 7px + the drawing's 3px = a Planet avatar's 10px. */
.dashboard-app .command-outpost-overlay.command-transmissions-overlay .popup-title { padding-left: 7px; }
.dashboard-app .command-outpost-overlay .outpost-title-icon { display: block; flex: 0 0 40px; width: 40px; height: 40px; }
/* Subtitle above the name, styled like a Planet's D-code above its custom name. */
.dashboard-app .command-outpost-overlay .popup-title .dashboard-header-text { height: 40px; }
.dashboard-app .command-outpost-overlay .outpost-title-name { line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A popup opened from The Outpost (connect) stacks above it. */
body.command-outpost-open.dashboard-app .popup-overlay { z-index: 10040; }


/* The Outpost: unread divider. "New messages" (green) until read, then the first unread message's
   date (grey). Both states have the same height, so nothing moves when it changes. The feed's 20px
   gap is halved around it: 10px above and below. */
.dashboard-app .outpost-chat .outpost-divider { display: flex; flex: none; align-items: center; gap: 10px; height: 12px; margin: -10px 0; color: #5acc77; }
.dashboard-app .outpost-chat .outpost-divider::before,
.dashboard-app .outpost-chat .outpost-divider::after { content: ""; flex: 1 1 0; height: 1px; background: #1f4a2b; transition: background-color .4s ease; }
.dashboard-app .outpost-chat .outpost-divider-label { flex: none; font-size: var(--font-xxs); line-height: 12px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; transition: color .4s ease; }
.dashboard-app .outpost-chat .outpost-divider.is-read { color: var(--command-grey, #727578); }
.dashboard-app .outpost-chat .outpost-divider.is-read::before,
.dashboard-app .outpost-chat .outpost-divider.is-read::after { background: var(--command-border, #252729); }

/* The Outpost: replies. Reply button sits where the Comms reply icon sits. */
.dashboard-app .outpost-chat .pm-reply { position: relative; order: 1; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: auto; padding: 0; border: 0; background: none; color: inherit; font-size: var(--font-sm); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dashboard-app .outpost-chat .pm-reply .pm-reply-icon { margin: 0; color: inherit; }
.dashboard-app .outpost-chat .pm-meta.has-reply .pm-x { margin-left: 0; }
@media (hover: hover) { .dashboard-app .outpost-chat .pm-reply:hover { color: #fff; } }
/* The bubble's ✕ and reply icons stay small but take a 40px (invisible) tap area. */
.dashboard-app .pm-meta .pm-x { position: relative; -webkit-tap-highlight-color: transparent; }
.dashboard-app .pm-meta :is(.pm-x, .pm-reply)::before { content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); }

/* A reply: the quoted message (max 80% - corner - 10px, two lines) and the quoted Commander's small
   badge sit 5px above the bubble, joined to it by a grey corner line. The bubble is at least as wide. */
.dashboard-app .outpost-chat .pm-msg.has-reply { container-type: inline-size; }
.dashboard-app .outpost-chat .pm-thread { display: flex; flex-direction: column; align-items: stretch; width: fit-content; max-width: 80cqw; min-width: 0; }
.dashboard-app .outpost-chat .pm-thread > .pm-bubble,
.dashboard-app .outpost-chat .pm-msg.right .pm-thread > .pm-bubble { width: auto; max-width: none; text-align: left; }
.dashboard-app .pm-thread-ref { display: flex; align-items: stretch; min-width: 0; margin: 0 0 5px; padding-right: 10px; }
.dashboard-app .pm-thread-corner { flex: 0 0 15px; margin: 12px 5px 0; border-top: 1px solid #3a3d42; border-left: 1px solid #3a3d42; border-top-left-radius: 6px; }
.dashboard-app .pm-thread-body { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; max-width: calc(80cqw - 35px); }
.dashboard-app .pm-thread-quote { box-sizing: border-box; max-width: 100%; padding: 5px 10px; border: 1px solid #303236; border-radius: 10px; color: #b5b8bb; font-size: var(--font-sm); line-height: 1.35; text-align: left; }
/* Two lines at most, then an ellipsis (the clamp sits inside the padding so no third line peeks out). */
.dashboard-app .pm-thread-quote-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.dashboard-app .pm-thread-quote.is-muted { color: var(--command-grey, #727578); font-style: italic; }
.dashboard-app .pm-thread-sender { display: flex; min-width: 0; max-width: 100%; }
.dashboard-app :is(.outpost-chat, .outpost-compose-overlay) .pm-thread-sender .dashboard-owner-badge { position: static; inset: auto; z-index: auto; width: max-content; min-width: 0; max-width: 100%; height: 20px; margin: 0; padding: 0 8px 0 0; overflow: hidden; }
.dashboard-app :is(.outpost-chat, .outpost-compose-overlay) .pm-thread-sender .dashboard-owner-badge :is(.project-owner-username, .project-owner-address) { grid-template-columns: 18px minmax(0, 1fr); gap: 5px; height: 18px; line-height: 18px; font-size: var(--font-xs); }
.dashboard-app :is(.outpost-chat, .outpost-compose-overlay) .pm-thread-sender .dashboard-owner-badge :is(.project-owner-username > img, .project-owner-wallet) { width: 18px; height: 18px; }
.dashboard-app :is(.outpost-chat, .outpost-compose-overlay) .pm-thread-sender .dashboard-owner-badge .owner-name { font-size: var(--font-xs); line-height: 18px; }

/* Replying: the same quote above the input (flush with it, no extra corner inset), 5px above it,
   with a small cancel ✕ top right (24px circle, 40px hit area). */
.dashboard-app :is(.outpost-chat, .outpost-compose-overlay) .pm-reply-compose { position: relative; container-type: inline-size; margin: 0 0 10px; }
.dashboard-app :is(.outpost-chat, .outpost-compose-overlay) .pm-reply-compose[hidden] { display: none; }
.dashboard-app :is(.outpost-chat, .outpost-compose-overlay) .pm-reply-compose .pm-thread-ref { margin: 0; padding-right: 34px; }
.dashboard-app :is(.outpost-chat, .outpost-compose-overlay) .pm-reply-compose .pm-thread-corner { margin-left: 0; }
.dashboard-app :is(.outpost-chat, .outpost-compose-overlay) .pm-reply-compose .pm-thread-body { max-width: min(calc(80cqw - 20px), calc(100cqw - 54px)); }
.dashboard-app :is(.outpost-chat, .outpost-compose-overlay) .pm-reply-cancel { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; box-sizing: border-box; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; background: none; color: var(--command-grey, #727578); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dashboard-app :is(.outpost-chat, .outpost-compose-overlay) .pm-reply-cancel-face { display: grid; place-items: center; box-sizing: border-box; width: 24px; height: 24px; border: 1px solid var(--command-border, #262626); border-radius: 50%; background: rgba(0, 0, 0, .8); }
.dashboard-app :is(.outpost-chat, .outpost-compose-overlay) .pm-reply-cancel-face i { font-size: 12px; line-height: 1; }
.dashboard-app :is(.outpost-chat, .outpost-compose-overlay) .pm-reply-cancel:focus-visible .pm-reply-cancel-face { outline: 2px solid currentColor; outline-offset: 2px; }
@media (hover: hover) { .dashboard-app :is(.outpost-chat, .outpost-compose-overlay) .pm-reply-cancel:hover { color: #ededed; } }

/* Feed and sending view: the quote lines up with the reply bubble's sides. The corner line starts
   10px in from the bubble's left edge; on the right (own) side the quote sits flush right and the
   corner line stretches to it. */
.dashboard-app .pm-thread > .pm-thread-ref { padding-right: 0; }
.dashboard-app .pm-thread > .pm-thread-ref .pm-thread-corner { flex: 0 0 25px; margin: 12px 5px 0 10px; }
.dashboard-app .pm-thread > .pm-thread-ref .pm-thread-body { max-width: calc(80cqw - 40px); }
.dashboard-app .pm-msg.right .pm-thread > .pm-thread-ref .pm-thread-corner { flex: 1 1 25px; }

/* The Outpost: "Transmit" / "Enter The Outpost" sits on the right at every width, also when the
   counter beside it is hidden (not connected). */
.dashboard-app .outpost-chat .pm-composer-row .pm-send { margin-left: auto; }

/* The Outpost on mobile: the same + button and compose popup as Planet-to-Planet Comms. The button
   sits in the messages area's bottom-right corner; the feed keeps the same 70px clear space. */
.dashboard-app .outpost-chat { position: relative; }
.dashboard-app .outpost-chat.pm-mobile-compose > .pm-compose-launch { position: absolute; right: 10px; bottom: 10px; }
.dashboard-app .outpost-chat > .pm-compose-launch[hidden] { display: none; }
/* In the popup the quoted message sits above the input, 10px in, 10px above the typing area. */
.dashboard-app .outpost-compose-overlay .pm-modal-form .pm-reply-compose { margin: 10px 10px 0; }
.dashboard-app .outpost-compose-overlay .popup-title { display: flex; align-items: center; min-width: 0; padding-left: 10px; }
.dashboard-app .outpost-compose-overlay .popup-title .dashboard-header-text { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }

/* "Something went wrong" (command-error.js): the shared popup frame, above every other popup. */
.dashboard-app .command-error-overlay { position: fixed; inset: 0; z-index: 10060; overflow: hidden; }
.dashboard-app .command-error-overlay .popup-title { padding-left: 10px; }
.dashboard-app .command-error-overlay .command-error-body { padding: 10px; }
.dashboard-app .command-error-overlay .command-error-message { margin: 0; color: #ededed; font-size: var(--font-md); line-height: 1.45; overflow-wrap: anywhere; }
.dashboard-app .command-error-overlay .command-error-reference { margin: 10px 0 0; color: var(--command-grey, #727578); font-size: var(--font-sm); line-height: 1.4; user-select: text; -webkit-user-select: text; overflow-wrap: anywhere; }
.dashboard-app .command-error-overlay .popup-footer { padding: 10px; }
.dashboard-app .command-error-overlay .popup-action { float: none; }
.dashboard-app .command-error-overlay .popup-action > .action { flex: 1 1 0; width: 0; min-width: 0; }
/* Close is the primary (green) action; the theme paints .action from these variables. */
body.dashboard-app .command-error-overlay .command-error-close { --command-action-background: #5acc77; --command-action-hover: #76df91; color: #000; }

/* In the mobile compose popup the reply is cancelled with Cancel: no small ✕ next to the quote,
   and the quote no longer keeps room for it. */
.dashboard-app .outpost-compose-overlay .pm-reply-cancel { display: none; }
.dashboard-app .outpost-compose-overlay .pm-reply-compose .pm-thread-ref { padding-right: 0; }
.dashboard-app .outpost-compose-overlay .pm-reply-compose .pm-thread-body { max-width: calc(80cqw - 20px); }

/* The Outpost: a connected wallet without a Planet reads along; instead of the composer (or the
   mobile + button) it sees "Only Planet holders can post in The Outpost." */
.dashboard-app .outpost-chat.pm-mobile-compose > .pm-send-section:has(.outpost-holders-note:not([hidden])) { display: block; }
.dashboard-app .outpost-chat .outpost-holders-note { text-align: center; }
.dashboard-app .outpost-chat .outpost-holders-note[hidden] { display: none; }