/* Roxyon Agent: the side panel (views/widgets/assistant.view) and the full page (views/agent.view)
   share these styles and one engine (js/agent/core.js). Panel ids start with "rxa-", page ids with "rxp-". */
.rxa-launch {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10050;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 18px 0 14px;
    border: 0;
    border-radius: 24px;
    background: var(--color-primary, #d50c2d);
    color: #fff;
    font: 600 14px/1 Inter, sans-serif;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
    cursor: pointer;
}

.rxa-launch:hover {
    background: var(--color-primary--hover, #ed0d32);
}

.rxa-launch .iconify {
    font-size: 22px;
}

.rxa-open .rxa-launch {
    display: none;
}

.rxa-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10060;
    width: 420px;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    text-align: start;
    background: #1f1f1f;
    color: var(--color-text, #ededed);
    border-left: 1px solid var(--color-border--dark, #3d3d3d);
    box-shadow: -6px 0 24px rgba(0, 0, 0, .5);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .2s ease, visibility .2s;
}

.rxa-open .rxa-panel {
    transform: none;
    visibility: visible;
}

.rxa-head {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 64px;
    padding: 0 12px 0 18px;
    background: #383838;
    flex: none;
}

.rxa-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary, #d50c2d);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 16px/1 Inter, sans-serif;
    flex: none;
}

.rxa-title {
    flex: 1;
    min-width: 0;
}

.rxa-title b {
    display: block;
    font-size: 15px;
    color: #fff;
}

.rxa-title span {
    font-size: 12px;
    color: #a8a8a8;
}

.rxa-close {
    border: 0;
    background: none;
    color: #cfcfcf;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rxa-close:hover {
    background: rgba(255, 255, 255, .08);
}

.rxa-log {
    flex: 1;
    overflow-y: auto;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rxa-msg {
    max-width: 85%;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.rxa-msg--assistant {
    align-self: flex-start;
    background: #2f2f2f;
    border-end-start-radius: 4px;
}

.rxa-msg--client {
    align-self: flex-end;
    background: var(--color-primary, #d50c2d);
    color: #fff;
    border-end-end-radius: 4px;
}

.rxa-msg--note {
    align-self: center;
    max-width: 100%;
    background: none;
    color: #a8a8a8;
    font-size: 13px;
    text-align: center;
    padding: 4px 8px;
}

.rxa-msg--error {
    color: #ff8a8a;
}

.rxa-time {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    opacity: .6;
    white-space: normal;
}

/* A saved progress line is status, not content (2026-11-05): a compact dim row with no bubble and no controls. */
.rxa-msg--progress {
    align-self: flex-start;
    max-width: 90%;
    padding: 2px 6px;
    border-inline-start: 2px solid var(--color-border, #595959);
    border-radius: 0;
    background: none;
    color: var(--color-text-muted, #8a8a8a);
    font-size: 12px;
    line-height: 1.45;
    opacity: .9;
}

.rxa-card {
    align-self: flex-start;
    width: 85%;
    padding: 12px 13px;
    border: 1px solid var(--color-border, #595959);
    border-radius: 12px;
    background: #262626;
    font-size: 13px;
}

.rxa-card-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}

.rxa-card-secret {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.rxa-card-secret code {
    flex: 1;
    min-width: 0;
    padding: 7px 9px;
    border-radius: 6px;
    background: #141414;
    font: 13px/1.4 ui-monospace, Menlo, monospace;
    overflow-wrap: anywhere;
    user-select: all;
}

.rxa-card-hint {
    margin-top: 8px;
    color: #f5a524;
    font-size: 12px;
}

.rxa-card-gone {
    color: #a8a8a8;
}

.rxa-btn {
    border: 1px solid var(--color-border, #595959);
    background: #333;
    color: #fff;
    border-radius: 8px;
    padding: 7px 12px;
    font: 600 13px/1 Inter, sans-serif;
    cursor: pointer;
    white-space: nowrap;
}

.rxa-btn:hover {
    background: #3d3d3d;
}

.rxa-btn[disabled] {
    opacity: .5;
    cursor: default;
}

.rxa-job {
    align-self: flex-start;
    max-width: 85%;
    padding: 6px 12px;
    border-radius: 14px;
    border: 1px dashed var(--color-border, #595959);
    color: #cfcfcf;
    font-size: 12px;
}

.rxa-job.done {
    border-style: solid;
    border-color: #3f8f5a;
    color: #9be0b2;
}

.rxa-job.failed {
    border-style: solid;
    border-color: #a04545;
    color: #ff9a9a;
}

.rxa-typing {
    align-self: flex-start;
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    row-gap: 2px;
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    background: #2f2f2f;
    font-size: 13px;
}

.rxa-status-ic {
    display: flex;
    margin-left: 6px;
    font-size: 16px;
    color: var(--color-primary--link, #ef2b4b);
}

/* Richer working status (2026-11-05): elapsed time, a Stop that matches the composer's buttons, a chevron and a
   small collapsible log of the steps. All dark-safe via the panel's variables, all in the app's muted greys. */
.rxa-status-label {
    min-width: 0;
    cursor: pointer;
}

.rxa-status-time {
    margin-inline-start: 2px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted, #8a8a8a);
    white-space: nowrap;
}

/* High/Max effort while a turn runs ("High effort"); Standard stays quiet. */
.rxa-status-effort {
    margin-inline-start: 4px;
    padding-inline-start: 6px;
    border-inline-start: 1px solid var(--color-border--dark, #3d3d3d);
    font-size: 11px;
    color: var(--color-text-muted, #8a8a8a);
    white-space: nowrap;
}

.rxa-status-effort[hidden] {
    display: none;
}

.rxa-status-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #9a9a9a;
    font-size: 14px;
    cursor: pointer;
}

.rxa-status-more:hover,
.rxa-status-more:focus-visible {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.rxa-status-stop {
    margin-inline-start: auto;
    padding: 2px 9px;
    border: 1px solid var(--color-border, #595959);
    border-radius: 11px;
    background: none;
    color: #c2c2c2;
    font: 500 11px/1.6 Inter, sans-serif;
    cursor: pointer;
}

.rxa-status-stop:hover,
.rxa-status-stop:focus-visible {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.rxa-status-stop[hidden] {
    display: none;
}

.rxa-activity-log {
    flex: 0 0 100%;
    width: 100%;
    max-height: 96px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--color-border--dark, #3d3d3d);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    font-size: 11px;
    line-height: 1.5;
    color: var(--color-text-muted, #8a8a8a);
}

.rxa-activity-log[hidden] {
    display: none;
}

.rxa-activity-row {
    padding: 1px 0;
    overflow-wrap: anywhere;
}

.rxa-status-label,
.rxa-job.live {
    background: linear-gradient(90deg, #9a9a9a 0%, #9a9a9a 35%, #fff 50%, #9a9a9a 65%, #9a9a9a 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rxa-shimmer 1.8s linear infinite;
}

@keyframes rxa-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -150% 0; }
}

.rxa-msg a {
    color: #ff8fa3;
    text-decoration: underline;
}

.rxa-msg--client a {
    color: #fff;
}

/* Under each reply: Copy, Retry (latest reply only), thumbs up/down. */
.rxa-ctl {
    align-self: flex-start;
    display: flex;
    gap: 2px;
    margin: -6px 0 0 2px;
}

.rxa-ctl button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #8a8a8a;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rxa-ctl button:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.rxa-ctl button.on {
    color: var(--color-primary--link, #ef2b4b);
}

.rxa-ctl .rxa-retry {
    display: none;
}

.rxa-ctl.latest .rxa-retry {
    display: flex;
}

.rxa-busy .rxa-ctl .rxa-retry {
    display: none;
}

.rxa-fb {
    align-self: flex-start;
    width: 85%;
    display: flex;
    gap: 6px;
}

.rxa-fb input {
    flex: 1;
    min-width: 0;
    height: 32px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--color-border, #595959);
    border-radius: 8px;
    background: #262626;
    color: #fff;
    font: 13px Inter, sans-serif;
    outline: none;
}

/* reply.actions: chips to pick from, or a card to confirm changes. */
.rxa-choices {
    align-self: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 92%;
}

.rxa-chip {
    padding: 7px 13px;
    border: 1px solid var(--color-primary--link, #ef2b4b);
    border-radius: 100px;
    background: rgba(213, 12, 45, .1);
    color: #fff;
    font: 600 12px/1.3 Inter, sans-serif;
    text-align: start;
    cursor: pointer;
}

.rxa-chip:hover {
    background: rgba(213, 12, 45, .25);
}

.rxa-chip[disabled],
.rxa-confirm button[disabled] {
    opacity: .45;
    cursor: default;
}

.rxa-chip[disabled]:hover {
    background: rgba(213, 12, 45, .1);
}

.rxa-confirm ul {
    margin: 0 0 10px;
    padding-left: 18px;
    line-height: 1.5;
}

.rxa-confirm-row {
    display: flex;
    gap: 8px;
}

.rxa-confirm .rxa-btn--primary {
    background: var(--color-primary, #d50c2d);
    border-color: var(--color-primary, #d50c2d);
}

@media (prefers-reduced-motion: reduce) {
    .rxa-status-label,
    .rxa-job.live,
    .rxa-typing i {
        animation: none;
    }

    .rxa-status-label,
    .rxa-job.live {
        color: #cfcfcf;
        background: none;
    }
}

.rxa-busy .rxa-typing {
    display: flex;
}

.rxa-typing i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9a9a9a;
    animation: rxa-dot 1.2s infinite ease-in-out;
}

.rxa-typing i:nth-child(2) {
    animation-delay: .15s;
}

.rxa-typing i:nth-child(3) {
    animation-delay: .3s;
}

@keyframes rxa-dot {
    0%, 80%, 100% { opacity: .3; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
}

.rxa-form {
    flex: none;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--color-border--dark, #3d3d3d);
    background: #1a1a1a;
}

.rxa-input {
    flex: 1;
    height: 42px;
    min-height: 42px;
    max-height: 160px;
    margin: 0;
    resize: none;
    padding: 10px 12px;
    border: 1px solid var(--color-border, #595959);
    border-radius: 10px;
    background: #262626;
    color: #fff;
    font: 14px/1.4 Inter, sans-serif;
    outline: none;
}

.rxa-input::placeholder {
    color: rgba(255, 255, 255, .55);
    opacity: 1;
}

.rxa-input:focus {
    border-color: var(--color-primary--link, #ef2b4b);
}

.rxa-send {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 10px;
    background: var(--color-primary, #d50c2d);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.rxa-send[disabled] {
    background: var(--color-primary--disabled, #45101a);
    color: #777;
    cursor: default;
}

.rxa-modes {
    flex: none;
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    background: #2b2b2b;
    border-bottom: 1px solid var(--color-border--dark, #3d3d3d);
}

.rxa-mode {
    flex: 1;
    border: 1px solid transparent;
    background: none;
    color: #bdbdbd;
    border-radius: 8px;
    padding: 6px 4px;
    font: 600 12px/1.2 Inter, sans-serif;
    cursor: pointer;
}

.rxa-mode:hover {
    background: rgba(255, 255, 255, .06);
}

.rxa-mode.on {
    border-color: var(--color-primary, #d50c2d);
    background: rgba(213, 12, 45, .15);
    color: #fff;
}

.rxa-fund {
    align-self: flex-start;
    margin: -2px 0 4px;
    padding: 6px 14px;
    border: 0;
    border-radius: 100px;
    background: var(--primary, #e5383b);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.rxa-mode-hint {
    padding: 2px 14px 8px;
    font-size: 11px;
    color: #9a9a9a;
    background: #2b2b2b;
    flex: none;
}

/* Sara's highlight on a list row she just touched, and the banner on a
   form she filled in. Lives here because these land inside other views. */
.rxa-hl {
    position: relative;
    outline: 2px solid var(--color-primary--link, #ef2b4b) !important;
    outline-offset: -2px;
    background-color: rgba(213, 12, 45, .12) !important;
    transition: background-color .4s;
}

.rxa-hl-badge {
    position: absolute;
    top: 4px;
    right: 8px;
    z-index: 5;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--color-primary, #d50c2d);
    color: #fff;
    font: 700 11px/16px Inter, sans-serif;
    pointer-events: none;
}

.rxa-banner {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-primary--link, #ef2b4b);
    background: rgba(213, 12, 45, .12);
    color: #fff;
    font-size: 13px;
    line-height: 1.45;
    text-align: start;
}

.rxa-banner b {
    color: #fff;
}

.rxa-pulse {
    box-shadow: 0 0 0 3px rgba(239, 43, 75, .55) !important;
}

/* ---- Threads (2026-10-09) ---- */
.rxa-hbtn {
    border: 0;
    background: none;
    color: #cfcfcf;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.rxa-hbtn:hover,
.rxa-hbtn.on {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.rxa-title b,
.rxa-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rxa-people {
    display: flex;
    flex: none;
}

.rxa-pp {
    width: 24px;
    height: 24px;
    margin-left: -6px;
    border-radius: 50%;
    border: 2px solid #383838;
    background: #5a5a5a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 10px/1 Inter, sans-serif;
}

.rxa-pp:first-child {
    margin-left: 0;
}

.rxa-menu {
    position: absolute;
    top: 56px;
    right: 12px;
    z-index: 21;
    min-width: 190px;
    max-height: calc(100% - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    border: 1px solid var(--color-border--dark, #3d3d3d);
    border-radius: 10px;
    background: #2a2a2a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

.rxa-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #e6e6e6;
    font: 500 13px/1.2 Inter, sans-serif;
    text-align: start;
    cursor: pointer;
}

.rxa-menu button:hover {
    background: rgba(255, 255, 255, .07);
}

.rxa-menu button.danger {
    color: #ff8a8a;
}

.rxa-menu .iconify {
    font-size: 17px;
    flex: none;
}

/* Effort (2026-11-05): a segmented control in the settings menu, the same look as the panel's mode bar. The note
   under it always explains the current choice; High/Max also say they use more tokens and cost more. */
.rxa-efforts {
    display: flex;
    gap: 4px;
    margin: 2px 8px 4px;
}

.rxa-efforts button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    padding: 6px 3px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: #bdbdbd;
    font: 600 11px/1.3 Inter, sans-serif;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

.rxa-efforts button:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.rxa-efforts button.on {
    border-color: var(--color-primary, #d50c2d);
    background: rgba(213, 12, 45, .15);
    color: #fff;
}

.rxa-efforts button:focus-visible {
    outline: 2px solid var(--color-primary--link, #ef2b4b);
    outline-offset: 1px;
}

.rxa-effort-note {
    padding: 0 12px 8px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--color-text-muted, #8a8a8a);
    overflow-wrap: anywhere;
}

.rxa-sheet {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    background: #1f1f1f;
}

.rxa-sheet[hidden] {
    display: none;
}

.rxa-sheet-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 10px 10px 16px;
    border-bottom: 1px solid var(--color-border--dark, #3d3d3d);
    flex: none;
}

.rxa-sheet-head b {
    flex: 1;
    font-size: 14px;
    color: #fff;
}

.rxa-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
}

.rxa-sheet-bar {
    display: flex;
    gap: 8px;
}

.rxa-field {
    width: 100%;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--color-border, #595959);
    border-radius: 8px;
    background: #141414;
    color: #fff;
    font: 14px/1.3 Inter, sans-serif;
}

.rxa-field::placeholder {
    color: #8a8a8a;
}

.rxa-field:focus {
    outline: none;
    border-color: var(--color-primary, #d50c2d);
}

.rxa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--color-border, #595959);
    border-radius: 8px;
    background: none;
    color: #e6e6e6;
    font: 600 13px/1.2 Inter, sans-serif;
    white-space: nowrap;
    cursor: pointer;
}

.rxa-btn:hover {
    background: rgba(255, 255, 255, .06);
}

.rxa-btn--primary {
    border-color: var(--color-primary, #d50c2d);
    background: var(--color-primary, #d50c2d);
    color: #fff;
}

.rxa-btn--primary:hover {
    background: var(--color-primary--hover, #ed0d32);
}

.rxa-btn--danger {
    border-color: #b3261e;
    background: #b3261e;
    color: #fff;
}

.rxa-btn:disabled {
    opacity: .5;
    cursor: default;
}

.rxa-link {
    align-self: center;
    margin-top: 6px;
    border: 0;
    background: none;
    color: #a8a8a8;
    font: 500 12px/1.2 Inter, sans-serif;
    text-decoration: underline;
    cursor: pointer;
}

.rxa-hint {
    color: #9a9a9a;
    font-size: 12px;
    line-height: 1.45;
}

.rxa-hint--error {
    color: #ff8a8a;
}

.rxa-label {
    margin-top: 6px;
    font-weight: 600;
    color: #d6d6d6;
}

.rxa-trow {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #272727;
    color: inherit;
    text-align: start;
    font: inherit;
    cursor: pointer;
}

.rxa-trow:hover {
    background: #2f2f2f;
}

.rxa-trow.on {
    border-color: var(--color-primary, #d50c2d);
}

.rxa-trow-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rxa-trow-top b {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 13px;
}

.rxa-trow-top small,
.rxa-trow-shared {
    flex: none;
    color: #9a9a9a;
    font-size: 11px;
}

.rxa-trow-shared {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.rxa-trow p {
    margin: 4px 0 0;
    color: #b0b0b0;
    font-size: 12px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rxa-trow mark {
    background: rgba(213, 12, 45, .35);
    color: #fff;
    border-radius: 2px;
}

.rxa-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.rxa-tag {
    padding: 2px 7px;
    border-radius: 100px;
    background: #3a3a3a;
    color: #d0d0d0;
    font-size: 11px;
}

.rxa-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    border-radius: 6px;
    cursor: pointer;
}

.rxa-check:hover {
    background: rgba(255, 255, 255, .04);
}

.rxa-check input {
    accent-color: var(--color-primary, #d50c2d);
    width: 16px;
    height: 16px;
    flex: none;
}

.rxa-check span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.rxa-check small {
    display: block;
    color: #9a9a9a;
}

.rxa-msg--peer {
    align-self: flex-start;
    background: #2a3540;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 14px;
}

.rxa-by {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    color: #9cc3e6;
    white-space: normal;
}

.rxa-flash {
    box-shadow: 0 0 0 2px #f5c542;
    transition: box-shadow .4s;
}

/* ---- Attachments + live (2026-10-09) ---- */
.rxa-clip {
    width: 42px;
    height: 42px;
    border: 1px solid var(--color-border, #595959);
    border-radius: 10px;
    background: #262626;
    color: #cfcfcf;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.rxa-clip:hover {
    color: #fff;
    background: #2f2f2f;
}

.rxa-mic[hidden],
#rxa-rec[hidden],
.rxa-voice[hidden] {
    display: none !important;
}

.rxa-mic.on {
    color: #fff;
    border-color: var(--color-primary, #d50c2d);
    background: rgba(213, 12, 45, .25);
    animation: rxa-mic-pulse 1.4s ease-in-out infinite;
}

@keyframes rxa-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(213, 12, 45, .45); }
    50% { box-shadow: 0 0 0 5px rgba(213, 12, 45, 0); }
}

.rxa-voice {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #1a1a1a;
    border-top: 1px solid var(--color-border--dark, #3d3d3d);
    color: #cfcfcf;
    font: 12px/1.3 Inter, sans-serif;
}

.rxa-voice b {
    color: #fff;
    font-weight: 600;
}

.rxa-voice button {
    border: 1px solid var(--color-border, #595959);
    border-radius: 6px;
    background: #262626;
    color: #fff;
    padding: 3px 8px;
    font: 600 12px/1.2 Inter, sans-serif;
    cursor: pointer;
}

.rxa-voice .rxa-voice-sp {
    flex: 1;
}

.rxa-files {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px 0;
    background: #1a1a1a;
    border-top: 1px solid var(--color-border--dark, #3d3d3d);
}

.rxa-files[hidden],
.rxa-line[hidden] {
    display: none;
}

.rxa-files + .rxa-form {
    border-top: 0;
}

.rxa-fchip {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 4px 4px 4px 4px;
    border: 1px solid var(--color-border, #595959);
    border-radius: 8px;
    background: #262626;
    font-size: 12px;
}

.rxa-fchip.err {
    border-color: #b3261e;
}

.rxa-fchip img,
.rxa-fchip .rxa-ficon {
    width: 32px;
    height: 32px;
    border-radius: 5px;
    object-fit: cover;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333;
    font-size: 18px;
    color: #cfcfcf;
}

.rxa-fchip span {
    min-width: 0;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rxa-fchip small {
    display: block;
    color: #9a9a9a;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rxa-fchip.err small {
    color: #ff8a8a;
    white-space: normal;
}

.rxa-fchip button {
    border: 0;
    background: none;
    color: #bdbdbd;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    cursor: pointer;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rxa-fchip button:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.rxa-atts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    white-space: normal;
}

.rxa-att-img {
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(0, 0, 0, .25);
    overflow: hidden;
    cursor: zoom-in;
    width: 120px;
    height: 90px;
}

.rxa-att-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rxa-att-file {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 6px 10px 6px 8px;
    border: 0;
    border-radius: 8px;
    background: rgba(0, 0, 0, .25);
    color: inherit;
    font: 12px/1.3 Inter, sans-serif;
    text-align: start;
    cursor: pointer;
}

.rxa-att-file .iconify {
    font-size: 22px;
    flex: none;
}

.rxa-att-file span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rxa-att-file small {
    display: block;
    opacity: .7;
}

.rxa-line {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #1a1a1a;
    color: #b8b8b8;
    font-size: 12px;
    border-top: 1px solid var(--color-border--dark, #3d3d3d);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rxa-line .iconify {
    flex: none;
    font-size: 15px;
}

.rxa-panel.rxa-drag::after {
    content: 'Drop files to attach';
    position: absolute;
    inset: 64px 8px 8px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--color-primary, #d50c2d);
    border-radius: 12px;
    background: rgba(20, 20, 20, .85);
    color: #fff;
    font: 600 15px/1 Inter, sans-serif;
    pointer-events: none;
}

.rxa-hbtn.dot {
    position: relative;
}

.rxa-hbtn.dot::after,
.rxa-trow.unread b::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary, #ef2b4b);
}

.rxa-hbtn.dot::after {
    position: absolute;
    top: 6px;
    right: 6px;
}

.rxa-trow.unread b::before {
    margin-right: 6px;
    vertical-align: middle;
}

@media (max-width: 600px) {
    .rxa-panel {
        width: 100vw;
        border-left: 0;
    }

    .rxa-launch {
        right: 16px;
        bottom: 16px;
        padding: 0 14px;
    }

    .rxa-launch b {
        display: none;
    }
}

/* While the full page is open the panel and its launcher are hidden (one live copy of a thread). */
.rxa-onpage .rxa-launch,
.rxa-onpage .rxa-panel {
    display: none !important;
}

/* ===================== Full page: /agent[/<threadId>] (views/agent.view) ===================== */
.rxp {
    --rxp-bg: #171717;
    --rxp-side: #121212;
    --rxp-line: #2a2a2a;
    --rxp-text: #ececec;
    --rxp-muted: #9a9a9a;
    --rxp-bubble: #2b2b2b;
    --rxp-field: #1f1f1f;
    position: relative;
    display: flex;
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    overflow: hidden;
    background: var(--rxp-bg);
    color: var(--rxp-text);
    font: 14px/1.5 Inter, sans-serif;
    text-align: start;
}

body.msg-active .rxp {
    height: calc(100vh - 104px);
    height: calc(100dvh - 104px);
}

.rxp *,
.rxp *::before,
.rxp *::after {
    box-sizing: border-box;
}

.rxp-scrim {
    display: none;
}

/* Left column: chats */
.rxp-side {
    flex: none;
    width: 288px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--rxp-side);
    border-right: 1px solid var(--rxp-line);
}

.rxp-side-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 6px;
}

.rxp-side-head .rxa-avatar {
    width: 30px;
    height: 30px;
    font-size: 14px;
}

.rxp-side-head b {
    flex: 1;
    color: #fff;
    font-size: 15px;
}

.rxp-newbtn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 12px 6px;
    padding: 10px 12px;
    border: 1px solid var(--rxp-line);
    border-radius: 10px;
    background: #1e1e1e;
    color: #fff;
    font: 600 14px/1 Inter, sans-serif;
    cursor: pointer;
}

.rxp-newbtn:hover {
    background: #262626;
}

.rxp-newbtn .iconify {
    font-size: 18px;
}

.rxp-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 12px 16px;
}

.rxp-list .rxa-field {
    background: #1b1b1b;
    border-color: var(--rxp-line);
    font-size: 13px;
}

.rxp-list .rxa-tlist {
    gap: 1px !important;
}

.rxp-list .rxa-trow {
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
}

.rxp-list .rxa-trow:hover {
    background: #1f1f1f;
}

.rxp-list .rxa-trow.on {
    background: #262626;
}

.rxp-list .rxa-trow p {
    color: #8e8e8e;
}

.rxp-list .rxa-tags {
    display: none;
}

.rxa-tsec {
    padding: 12px 10px 4px;
    color: var(--rxp-muted, #9a9a9a);
    font: 600 11px/1 Inter, sans-serif;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.rxa-trow-pin {
    flex: none;
    display: inline-flex;
    color: #8a8a8a;
    font-size: 12px;
}

/* Conversation column */
.rxp-main {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.rxp-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 60px;
    padding: 0 12px 0 20px;
    border-bottom: 1px solid var(--rxp-line);
}

.rxp-head .rxa-title b {
    color: #fff;
    font-size: 15px;
}

.rxp-head .rxa-pp {
    border-color: var(--rxp-bg);
}

#rxp-chats {
    display: none;
}

.rxp-modes {
    flex: none;
    gap: 2px;
    padding: 3px;
    border: 0;
    border-radius: 10px;
    background: #222;
}

.rxp-modes .rxa-mode {
    flex: none;
    padding: 6px 11px;
    border: 0;
    border-radius: 8px;
}

.rxp-modes .rxa-mode.on {
    background: #353535;
    color: #fff;
}

.rxp-log {
    padding: 28px max(20px, calc((100% - 768px) / 2)) 16px;
    gap: 14px;
}

.rxp .rxa-log > .rxa-msg--note:only-child {
    margin: auto;
    max-width: 420px;
    color: #b5b5b5;
    font-size: 18px;
    line-height: 1.5;
}

.rxp .rxa-msg {
    font-size: 15px;
    line-height: 1.65;
}

.rxp .rxa-msg--assistant {
    max-width: 100%;
    padding: 2px 0;
    border-radius: 0;
    background: none;
}

.rxp .rxa-msg--client {
    max-width: 80%;
    padding: 10px 16px;
    border-radius: 18px;
    background: var(--rxp-bubble);
    color: #fff;
}

.rxp .rxa-msg--client a {
    color: #ff8fa3;
}

.rxp .rxa-msg--peer {
    max-width: 80%;
    border-radius: 18px;
    background: #212c36;
}

.rxp .rxa-msg--note {
    max-width: 100%;
}

.rxp .rxa-typing {
    padding: 4px 0;
    background: none;
}

.rxp .rxa-ctl {
    margin: -8px 0 0 -6px;
}

.rxp .rxa-card,
.rxp .rxa-fb {
    width: 100%;
    max-width: 560px;
}

.rxp .rxa-card {
    background: #1e1e1e;
    border-color: #383838;
}

.rxp .rxa-choices {
    max-width: 100%;
}

.rxp .rxa-att-img {
    width: 180px;
    height: 135px;
}

.rxp .rxa-msg--assistant .rxa-att-file,
.rxp .rxa-msg--assistant .rxa-att-img {
    background: #232323;
}

/* Composer */
.rxp-dock {
    flex: none;
    padding: 0 max(16px, calc((100% - 800px) / 2)) 12px;
}

.rxp .rxa-line,
.rxp .rxa-voice {
    padding: 4px 8px 8px;
    border-top: 0;
    background: none;
}

.rxp-composer {
    display: flex;
    flex-direction: column;
    padding: 8px;
    border: 1px solid #383838;
    border-radius: 18px;
    background: var(--rxp-field);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}

.rxp-composer:focus-within {
    border-color: #555;
}

.rxp-composer .rxa-files {
    padding: 2px 2px 8px;
    border-top: 0;
    background: none;
}

.rxp-composer .rxa-input {
    width: 100%;
    height: 56px;
    min-height: 56px;
    max-height: 320px;
    padding: 8px 10px;
    border: 0;
    background: none;
    font-size: 15px;
    line-height: 1.5;
}

.rxp-composer .rxa-input:focus {
    border: 0;
}

.rxp-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 2px 0;
}

.rxp-tools .rxa-clip {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: none;
    font-size: 20px;
}

.rxp-tools .rxa-clip:hover {
    background: #2b2b2b;
}

.rxp-tools .rxa-send {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 18px;
}

.rxp-sp {
    flex: 1;
}

.rxp-keys {
    margin-right: 6px;
    color: #777;
    font-size: 11px;
}

.rxp-hint {
    padding: 8px 0 0;
    background: none;
    color: #7f7f7f;
    text-align: center;
}

/* Sheet (new chat, rename, people, delete) as a dialog over the conversation; the ⋮ menu under the header */
.rxp .rxa-sheet {
    top: 72px;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(520px, calc(100% - 32px));
    max-height: calc(100% - 96px);
    overflow: hidden;
    transform: translateX(-50%);
    border: 1px solid #3a3a3a;
    border-radius: 14px;
    background: #1f1f1f;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}

.rxp .rxa-sheet[hidden] {
    display: none;
}

.rxp .rxa-menu {
    top: 54px;
    right: 12px;
}

.rxp-main.rxa-drag::after {
    content: 'Drop files to attach';
    position: absolute;
    inset: 68px 12px 12px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--color-primary, #d50c2d);
    border-radius: 14px;
    background: rgba(20, 20, 20, .85);
    color: #fff;
    font: 600 15px/1 Inter, sans-serif;
    pointer-events: none;
}

/* Image preview */
.rxp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 16px 16px;
    background: rgba(0, 0, 0, .88);
}

.rxp-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.rxp-lightbox-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 18px;
    color: #fff;
    font: 14px/1.3 Inter, sans-serif;
}

.rxp-lightbox-bar span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rxp-lightbox .rxa-btn {
    text-decoration: none;
}

/* Tablets and phones: the chat list becomes a drawer */
@media (max-width: 900px) {
    .rxp-side {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 40;
        width: min(320px, 86vw);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .2s ease, visibility .2s;
        box-shadow: 6px 0 24px rgba(0, 0, 0, .5);
    }

    .rxp.rxp-drawer .rxp-side {
        transform: none;
        visibility: visible;
    }

    .rxp.rxp-drawer .rxp-scrim {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 39;
        background: rgba(0, 0, 0, .55);
    }

    #rxp-chats {
        display: flex;
    }

    .rxp-head {
        padding: 0 8px;
    }
}

@media (max-width: 640px) {
    .rxp-head {
        flex-wrap: wrap;
        gap: 4px 6px;
        height: auto;
        padding: 6px 8px;
    }

    .rxp-head .rxa-people,
    #rxp-topanel {
        display: none;
    }

    .rxp-modes {
        order: 10;
        width: 100%;
    }

    .rxp-modes .rxa-mode {
        flex: 1;
        padding: 6px 4px;
    }

    .rxp-log {
        padding: 16px 14px 8px;
    }

    .rxp .rxa-msg--client,
    .rxp .rxa-msg--peer {
        max-width: 88%;
    }

    .rxp-dock {
        padding: 0 10px 10px;
    }

    .rxp-keys {
        display: none;
    }

    .rxp-composer .rxa-input {
        font-size: 16px;   /* no zoom on focus in iOS Safari */
    }

    .rxp .rxa-sheet {
        top: 8px;
        width: calc(100% - 16px);
        max-height: calc(100% - 16px);
    }

    .rxp .rxa-menu {
        top: 44px;
    }
}

/* Arabic chat titles keep the list and header aligned; the text itself still runs right to left (dir="auto"). */
.rxa-trow-top b,
.rxa-trow p,
.rxp-head .rxa-title b {
    text-align: left;
}

/* Chat title block: title, "Shared with N people" and the hours chip sit closer together (owner 2026-10-21). */
.rxa-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
}

.rxa-title > b {
    line-height: 17px !important;
    margin: 0;
}

.rxa-title > span:not([id$="-hours"]) {
    display: block;
    line-height: 14px;
}

#rxa-hours,
#rxp-hours {
    line-height: 13px;
    margin-top: 0 !important;
}

/* The people button in a chat's header (2026-10-25): opens who is in the chat; owners add people by email there. */
.rxa-people { cursor: pointer; }
.rxa-pp--add { margin-left: 4px; border: 0; padding: 0; color: inherit; background: transparent; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; opacity: .8; }
.rxa-pp--add:hover { opacity: 1; }
.rxa-btn--small { padding: 4px 10px; font-size: 12px; min-height: 0; }

/* Phones: the chat and the chat list scroll inside themselves; the browser's pull-to-reload stays off there. */
.rxp, .rxp-log, .rxp-list { overscroll-behavior: contain; }
.rxp-pull { display: flex; align-items: flex-end; justify-content: center; overflow: hidden; height: 0; padding: 0 0 6px; }

/* ---- Roxyon AI extras (js/agent/extras.js, 2026-10-26, D-20261026-06): empty chat, task cards, assistants, welcome
   credit, plan line. Same look in the console (page + panel) and on ai.roxyon.com, from each door's own colours. ---- */
.rxx-on, .rxx-dialog {
    --rxx-text: var(--rxp-text, var(--color-text, #ececec));
    --rxx-muted: var(--rxp-muted, #9a9a9a);
    --rxx-line: var(--rxp-line, var(--color-border--dark, #2a2a2a));
    --rxx-surface: var(--rxp-side, #1b1b1b);
    --rxx-field: var(--rxp-field, #232323);
    --rxx-accent: var(--color-primary--link, var(--color-primary, #d50c2d));
}
/* The console's own dialog look (rx-dlg in styles.css), not ai.roxyon.com's (owner 2026-10-27). */
.rxx-dialog { --rxx-surface: var(--color-card-background, #1c1c1e); --rxx-field: var(--color-input--background, #131314); --rxx-line: var(--color-border--dark, #2f2f2f); --rxx-text: var(--color-text, #e8e8e8); --rxx-muted: var(--color-text-muted, #8a8a8a); --rxx-accent: var(--color-primary, #d50c2d); }
img.rxx-avatar { object-fit: cover; background: transparent; border-radius: 9px; }
.rxx-welcome { display: flex; align-items: center; gap: 10px; margin: 8px 14px 0; padding: 10px 14px; border: 1px solid var(--rxx-accent); border-radius: 14px; background: var(--rxx-surface); color: var(--rxx-text); font-size: 14px; }
.rxx-welcome > span:not(.iconify) { flex: 1; }
.rxx-welcome .iconify { color: var(--rxx-accent); font-size: 20px; }
.rxx-empty { padding: 26px 16px 8px; text-align: center; overflow-y: auto; color: var(--rxx-text); flex: 1 1 auto; min-height: 0; }
.rxx-mark { width: 52px; height: 52px; border-radius: 13px; }
.rxx-empty h2 { margin: 14px 0 12px; font-size: 22px; font-weight: 600; color: var(--rxx-text); }
.rxx-roles { max-width: 560px; margin: 0 auto 18px; color: var(--rxx-muted); font-size: 14px; line-height: 1.5; }
.rxx-roles-link { border: 0; background: none; padding: 0; color: var(--rxx-accent); font-weight: 600; text-decoration: underline; cursor: pointer; font: inherit; }
.rxx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 20px; }
.rxx-chip { padding: 8px 14px; border: 1px solid var(--rxx-line); border-radius: 12px; background: var(--rxx-field); color: var(--rxx-text); cursor: pointer; font: inherit; font-size: 14px; }
.rxx-chip:hover { border-color: var(--rxx-accent); }
.rxx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; text-align: start; max-width: 860px; margin: 0 auto; }
.rxx-card { background: var(--rxx-surface); border: 1px solid var(--rxx-line); border-radius: 14px; padding: 12px 14px 8px; }
.rxx-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--rxx-text); }
.rxx-card-h .iconify { color: var(--rxx-accent); }
.rxx-starter { display: flex; align-items: flex-start; gap: 6px; width: 100%; padding: 5px 2px; background: none; border: 0; border-radius: 8px; color: var(--rxx-muted); font: inherit; font-size: 13.5px; text-align: start; cursor: pointer; }
.rxx-starter:hover { color: var(--rxx-text); background: var(--rxx-field); }
.rxx-starter .iconify { flex: none; margin-top: 2px; font-size: 13px; }
[dir="rtl"] .rxx-starter .iconify, .rx-rtl .rxx-starter .iconify { transform: scaleX(-1); }
.rxx-make { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 2px 2px; border: 0; border-top: 1px solid var(--rxx-line); width: 100%; background: transparent; color: var(--rxx-accent); font: inherit; font-size: 13px; text-align: start; cursor: pointer; }
.rxa-log.rxx-log-empty, .rxp-log.rxx-log-empty { flex: 0 0 auto !important; min-height: 0 !important; }
.rxx-log-empty .rxa-msg--note:not(.rxa-msg--error) { display: none; }
/* the side panel is narrow: one column, cards after the chips */
.rxa-panel .rxx-empty { padding: 16px 12px 6px; }
.rxa-panel .rxx-empty h2 { font-size: 18px; }
.rxa-panel .rxx-cards { grid-template-columns: 1fr; }
/* assistants */
.rxx-asst { padding: 6px 10px 2px; border-bottom: 1px solid var(--rxx-line); color: var(--rxx-text); }
.rxx-asst--row { border: 1px solid var(--rxx-line); border-radius: 14px; max-width: 560px; margin: 0 auto 16px; text-align: start; }
.rxx-asst-h { display: flex; align-items: center; justify-content: space-between; color: var(--rxx-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 4px 4px 6px; }
.rxx-asst-add { width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--rxx-muted); font-size: 16px; cursor: pointer; }
.rxx-asst-add:hover { background: var(--rxx-field); color: var(--rxx-text); }
.rxx-asst-row { display: flex; align-items: center; }
.rxx-asst-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 7px 6px; border: 0; border-radius: 10px; background: transparent; color: var(--rxx-text); font: inherit; font-size: 14px; text-align: start; cursor: pointer; }
.rxx-asst-item span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rxx-asst-item .iconify { color: var(--rxx-accent); flex: none; }
.rxx-asst-item:hover { background: var(--rxx-field); }
.rxx-asst-item--new { color: var(--rxx-muted); margin-bottom: 4px; }
.rxx-asst-edit { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--rxx-muted); opacity: .7; cursor: pointer; }
.rxx-asst-edit:hover { opacity: 1; background: var(--rxx-field); }
.rxx-asst-hint { color: var(--rxx-muted); font-size: 12.5px; line-height: 1.45; padding: 0 4px 6px; }
/* plan line at the bottom of the page sidebar */
.rxx-plan { display: flex; align-items: center; gap: 8px; margin: auto 10px 8px; padding: 9px 12px; border: 1px solid var(--rxx-line); border-radius: 12px; color: var(--rxx-muted); font-size: 13px; text-decoration: none; }
.rxx-plan b { color: var(--rxx-text); font-weight: 600; }
.rxx-plan .iconify { color: var(--rxx-accent); flex: none; }
.rxx-plan:hover { border-color: var(--rxx-accent); }
.ai-me ~ .rxx-plan, .rxx-plan + .ai-me { margin-top: 0; }
/* the create / edit form */
.rxx-dialog { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
/* The dialog itself is hidden with the hidden attribute: display:flex above beat it, so Close did nothing (2026-10-27). */
.rxx-dialog[hidden] { display: none !important; }
.rxx-sheet { position: relative; width: 100%; max-width: 460px; max-height: calc(100dvh - 48px); overflow-y: auto; padding: 20px; background: var(--rxx-surface); color: var(--rxx-text); border: 1px solid var(--rxx-line); border-radius: 14px; box-shadow: 0 20px 60px -12px rgba(0, 0, 0, .6); display: flex; flex-direction: column; gap: 6px; text-align: start; }
.rxx-sheet h2 { margin: 0 0 2px; font-size: 15px; font-weight: 600; }
.rxx-intro { margin: 0 0 6px; font-size: 13px; line-height: 19px; color: var(--rxx-muted); }
.rxx-sheet label { font-size: 12px; color: var(--rxx-muted); margin-top: 6px; }
.rxx-sheet input, .rxx-sheet select, .rxx-sheet textarea { box-sizing: border-box; width: 100%; min-height: 44px; padding: 12px 13px; border: 1px solid var(--color-form-border, var(--rxx-line)); border-radius: 8px; background: var(--rxx-field); color: var(--rxx-text); font: inherit; font-size: 13px; line-height: 20px; }
.rxx-sheet input::placeholder, .rxx-sheet textarea::placeholder { color: var(--rxx-muted); opacity: 1; }
.rxx-sheet input:focus, .rxx-sheet select:focus, .rxx-sheet textarea:focus { border-color: var(--rxx-accent); outline: none; }
.rxx-sheet textarea { resize: vertical; min-height: 120px; }
.rxx-row { display: flex; gap: 10px; }
.rxx-row > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
/* Close stays at the top of the sheet while its content scrolls, above everything in it (owner 2026-10-27). */
.rxx-close { position: sticky; top: 0; z-index: 5; align-self: flex-end; flex: 0 0 auto; margin: -8px -8px -30px 0; width: 34px; height: 34px; border: 0; border-radius: 8px; background: var(--rxx-surface); color: var(--rxx-muted); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rxx-close:hover { color: var(--rxx-text); }
.rxx-err { color: #f26b6b; font-size: 14px; }
.rxx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--rxx-accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.rxx-btn--small { min-height: 34px; padding: 0 14px; font-size: 14px; }
.rxx-btn:disabled { opacity: .6; }
.rxx-link { background: none; border: 0; padding: 8px; color: var(--rxx-accent); font: inherit; cursor: pointer; }
.rxx-link--danger { color: #f26b6b; }
.rxx-dialog [hidden], .rxx-on [hidden] { display: none !important; }

/* ---- Roxyon AI plans popup (js/agent/plans.js, D-20261027-05): console colours. ---- */
.ap-ov { position: fixed; inset: 0; z-index: 99980; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 16px; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.ap-sheet { position: relative; width: 100%; max-width: 1040px; margin: auto 0; background: #141414; border: 1px solid var(--color-border--dark, #2f2f2f); border-radius: 14px; box-shadow: 0 20px 60px -12px rgba(0,0,0,.6); padding: 28px; }
.ap-sheet .ap { max-width: none; }
.ap-x { position: sticky; top: 0; float: right; margin: -14px -14px 0 0; z-index: 50; width: 36px; height: 36px; border: 0; border-radius: 8px; background: #141414; color: var(--color-text-muted, #8a8a8a); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ap-x:hover { color: var(--color-text, #e8e8e8); background: rgba(255,255,255,.06); }
@media (max-width: 600px) { .ap-ov { padding: 0; } .ap-sheet { border-radius: 0; min-height: 100%; padding: 22px 16px; border: 0; } }

    /* Console colours and controls (owner 2026-10-27: the page used ai.roxyon.com's purple and its own buttons). */
    .ap { --ap-acc: var(--color-primary, #d50c2d); --ap-card: var(--color-card-background, #1c1c1e); --ap-line: var(--color-border--dark, #2f2f2f); --ap-muted: var(--color-text-muted, #8a8a8a);
          color: var(--color-text, #e8e8e8); font-size: 13px; text-align: left; max-width: 1000px; }
    .ap *, .ap-dlg * { box-sizing: border-box; }
    .ap-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
    .ap-card { border: 1px solid var(--ap-line); background: var(--ap-card); border-radius: 14px; padding: 20px; }
    .ap-muted { color: var(--ap-muted); }
    .ap-small { font-size: 12px; line-height: 18px; }
    .ap-hdr { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--ap-muted); margin-bottom: 12px; }
    .ap-bar { height: 8px; border-radius: 100px; background: rgba(255,255,255,.08); overflow: hidden; margin: 8px 0 6px; }
    .ap-bar > i { display: block; height: 100%; background: var(--ap-acc); border-radius: 100px; }
    .ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
    .ap-plan { display: flex; flex-direction: column; gap: 6px; }
    .ap-plan.cur { border-color: var(--ap-acc); }
    .ap-plan .nm { font-size: 15px; font-weight: 600; color: var(--color-text, #fff); }
    .ap-plan .pr { font-size: 24px; font-weight: 700; color: var(--color-text, #fff); }
    .ap-plan .pr span { font-size: 13px; font-weight: 400; color: var(--ap-muted); }
    .ap-plan ul { margin: 6px 0 10px; padding-left: 18px; color: #b5b9bd; font-size: 13px; line-height: 21px; flex: 1; }
    .ap-seg { display: inline-flex; border: 1px solid var(--ap-line); border-radius: 8px; padding: 3px; gap: 3px; }
    .ap-seg button { border: 0; background: none; color: #b5b9bd; padding: 6px 14px; border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer; }
    .ap-seg button.on { background: var(--ap-acc); color: #fff; }
    .ap-btn { width: 100%; min-height: 44px; border: 0; border-radius: 8px; padding: 0 14px; font: inherit; font-size: 14px; font-weight: 600; background: var(--ap-acc); color: #fff; cursor: pointer; }
    .ap-btn:hover { filter: brightness(1.08); }
    .ap-btn.sec { background: rgba(255,255,255,.07); color: var(--color-text, #e8e8e8); }
    .ap-btn[disabled] { opacity: .55; cursor: default; filter: none; }
    .ap-chip { display: inline-flex; font-size: 11px; font-weight: 600; border-radius: 100px; padding: 3px 9px; background: rgba(229,8,47,.15); color: #ff8a9c; }
    .ap-err { color: var(--ap-acc); font-size: 12px; margin-top: 8px; }
    .ap-link { color: #6aa8f0; cursor: pointer; text-decoration: none; }
    .ap-back { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 24px; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
    .ap-dlg { width: 100%; max-width: 420px; max-height: calc(100vh - 48px); overflow-y: auto; border-radius: 14px; background: var(--color-card-background, #1c1c1e); color: var(--color-text, #e8e8e8);
              border: 1px solid var(--color-border--dark, #2f2f2f); box-shadow: 0 20px 60px -12px rgba(0,0,0,.6); padding: 20px; font-size: 13px; }
    .ap-dlg h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--color-text, #fff); }
    .ap-dlg p { margin: 0 0 12px; font-size: 13px; line-height: 20px; color: #b5b9bd; }
    .ap-later { display: block; width: 100%; margin-top: 8px; border: 0; background: none; color: var(--color-text-muted, #8a8a8a); font: inherit; font-size: 13px; padding: 8px; cursor: pointer; }
    .ap-later:hover { color: var(--color-text, #e8e8e8); }

/* ---- One compact composer everywhere (owner 2026-10-27: panel, /agent page and ai.roxyon.com looked like three products).
   One rounded box: attach (+) on the left, the text, voice typing + voice note, send. Order is CSS only; ids unchanged. ---- */
.rxa-form, .rxp-composer {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 2px;
    padding: 6px; border: 1px solid #383838; border-radius: 14px; background: var(--rxp-field, #222);
    box-shadow: none;
}
.rxa-form { margin: 8px 10px 10px; border-top: 1px solid #383838; }
.rxa-form:focus-within, .rxp-composer:focus-within { border-color: #555; }
.rxp-composer .rxa-files { order: -1; flex-basis: 100%; }
.rxp-tools { display: contents; }
.rxp-sp, .rxp-keys { display: none; }
#rxa-clip, #rxp-clip { order: 0; }
.rxa-form .rxa-input, .rxp-composer .rxa-input {
    order: 1; flex: 1; width: auto; min-width: 0; height: 38px; min-height: 38px; max-height: 200px;
    padding: 9px 6px; border: 0; border-radius: 0; background: none; font-size: 15px; line-height: 20px;
}
.rxa-form .rxa-input:focus, .rxp-composer .rxa-input:focus { border: 0; }
.rxa-form .rxa-mic, .rxp-composer .rxa-mic { order: 2; }
.rxa-form .rxa-clip, .rxp-composer .rxa-clip, .rxp-tools .rxa-clip {
    width: 38px; height: 38px; border: 0; border-radius: 8px; background: none; color: #9a9a9a; font-size: 21px;
}
.rxa-form .rxa-clip:hover, .rxp-composer .rxa-clip:hover { color: #fff; background: #2b2b2b; }
.rxa-form .rxa-mic.on, .rxp-composer .rxa-mic.on { color: #fff; background: rgba(213, 12, 45, .25); }
.rxa-form .rxa-send, .rxp-composer .rxa-send, .rxp-tools .rxa-send { order: 3; width: 38px; height: 38px; border-radius: 8px; font-size: 20px; }

/* ---- Live talk with an Assistant (2026-10-28): a red waveform button beside Send + a call screen over the chat ---- */
.rxa-talk-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; margin: 0; margin-inline-end: 4px; border: 0;
    border-radius: 50%; background: var(--color-primary, #E5082F); color: #fff; cursor: pointer; flex: none; align-self: center; order: 2; }
.rxa-talk-btn .rxa-talk-lbl { display: none; }
.rxa-talk-btn .iconify { font-size: 19px; }
.rxa-talk-btn.is-on { background: var(--color-text, #1a1a1a); color: var(--color-card-background, #fff); }
.rxa-talk-btn[hidden] { display: none !important; }
.rxa-talk { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    padding: 24px 16px; text-align: center; background: var(--color-card-background, #fff); color: var(--color-text, #1a1a1a); }
.rxa-talk-orb { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--color-primary, #E5082F) 14%, transparent); }
.rxa-talk-orb span { width: 64px; height: 64px; border-radius: 50%; background: var(--color-primary, #E5082F); transition: transform .2s ease; }
.rxa-talk.is-listening .rxa-talk-orb span { animation: rxa-talk-breathe 2.2s ease-in-out infinite; }
.rxa-talk.is-speaking .rxa-talk-orb span { animation: rxa-talk-pulse .6s ease-in-out infinite alternate; }
.rxa-talk.is-working .rxa-talk-orb span, .rxa-talk.is-connecting .rxa-talk-orb span { animation: rxa-talk-breathe 1s ease-in-out infinite; opacity: .6; }
.rxa-talk.is-muted .rxa-talk-orb span { animation: none; opacity: .35; }
@keyframes rxa-talk-breathe { 0%, 100% { transform: scale(.9); } 50% { transform: scale(1.05); } }
@keyframes rxa-talk-pulse { from { transform: scale(.95); } to { transform: scale(1.25); } }
.rxa-talk-name { font-size: 18px; font-weight: 700; }
.rxa-talk-state { font-size: 14px; color: var(--color-text-muted, #6b6b6b); }
.rxa-talk-said { max-width: 520px; min-height: 2.6em; font-size: 14px; line-height: 1.4; color: var(--color-text, #1a1a1a); overflow-wrap: anywhere; }
.rxa-talk-row { display: flex; gap: 12px; margin-top: 8px; }
.rxa-talk-row button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer;
    border: 1px solid var(--color-border, #ddd); background: transparent; color: var(--color-text, #1a1a1a); }
.rxa-talk-row .rxa-talk-end { background: var(--color-primary, #E5082F); border-color: transparent; color: #fff; }
.rxa-talk-row .rxa-talk-mute[aria-pressed="true"] { background: var(--color-text, #1a1a1a); color: var(--color-card-background, #fff); }
@media (prefers-reduced-motion: reduce) { .rxa-talk-orb span { animation: none !important; } }

/* Roxyon AI is a dark product (owner 2026-10-28: "light mode on phones: dark text on a dark background"): the browser's own
   parts (text boxes, selects, autofill, scrollbars, pickers) are drawn dark too, whatever the phone's light/dark setting. */
.rxa, .rxp, .rxa-sheet, .rxa-talk, .rxx-dialog, .ap-ov { color-scheme: dark; }

/* Pulling down on a phone must not reload Roxyon AI (owner 2026-10-28): no pull-to-refresh while the page or the open
   panel is on screen; the chat's own scrolling never chains into the page. */
html:has(#rxp-root), html:has(.rxa.rxa-open), html:has(#rxp-root) body, html:has(.rxa.rxa-open) body { overscroll-behavior-y: none; }
.rxa-log, .rxp-log, .rxp-list, .rxa-sheet { overscroll-behavior: contain; }

/* The + menu (2026-10-28): opens above the composer at the start side, like Claude's */
.rxa-menu.rxa-plus { top: auto; right: auto; bottom: 78px; inset-inline-start: 12px; min-width: 170px; }
.rxp .rxa-menu.rxa-plus { bottom: 96px; }

/* Go to the latest message (2026-10-28): shown while the reader has scrolled up; a dot when something new arrived */
.rxa-down { position: absolute; left: 50%; bottom: 92px; z-index: 12; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border--dark, #3d3d3d);
    background: #2a2a2a; color: #e6e6e6; font-size: 20px; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }
.rxa-down[hidden] { display: none !important; }
.rxa-down i { display: none; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-primary, #E5082F); }
.rxa-down.is-new i { display: block; }
.rxp .rxa-down { bottom: 110px; }

/* Roxyon AI replies with formatting (A9, 2026-10-30): paragraphs, lists, bold, inline code, code blocks. */
.rxa-msg.rxa-rich {
    white-space: normal;
}
.rxa-rich p {
    margin: 0 0 8px;
}
.rxa-rich p:last-of-type,
.rxa-rich > :last-child {
    margin-bottom: 0;
}
.rxa-rich ul,
.rxa-rich ol {
    margin: 0 0 8px;
    padding-inline-start: 22px;
}
.rxa-rich li + li {
    margin-top: 3px;
}
.rxa-rich strong {
    font-weight: 700;
}
.rxa-rich code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    padding: 1px 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    unicode-bidi: isolate;
}
.rxa-code {
    margin: 4px 0 8px;
    border-radius: 10px;
    overflow: hidden;
    background: #1b1b1b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
}
.rxa-code-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px 4px 12px;
    font-size: 12px;
    color: #a8a8a8;
    background: rgba(255, 255, 255, 0.04);
}
.rxa-code-bar button {
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1;
}
.rxa-code-bar button:hover,
.rxa-code-bar button.on {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.rxa-code pre {
    margin: 0;
    padding: 10px 12px;
    overflow-x: auto;
    white-space: pre;
}
.rxa-code pre code {
    padding: 0;
    background: none;
    font-size: 12.5px;
    line-height: 1.5;
}

/* Your own message: Copy + Edit (latest only), on hover; phones use a long press (A9, 2026-10-30). */
.rxa-ctl.rxa-ctl--own {
    align-self: flex-end;
    margin: -6px 2px 0 0;
    opacity: 0;
    transition: opacity .15s;
}
.rxa-msg--client:hover + .rxa-ctl--own,
.rxa-ctl--own:hover,
.rxa-ctl--own:focus-within {
    opacity: 1;
}
.rxa-ctl--own .rxa-edit {
    display: none;
}
.rxa-ctl--own.latest .rxa-edit {
    display: flex;
}
.rxa-busy .rxa-ctl--own .rxa-edit {
    display: none;
}
@media (hover: none) {
    .rxa-ctl.rxa-ctl--own {
        display: none;
    }
}
.rxp .rxa-ctl.rxa-ctl--own {
    margin: -8px -6px 0 0;
}
.rxa-edited {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    opacity: .7;
}
.rxa-time .rxa-edited {
    display: inline;
    margin: 0;
    font-size: inherit;
    opacity: 1;
}
.rxa-time .rxa-edited::before {
    content: " · ";
}
.rxa-msg.rxa-editing {
    width: 85%;
}
.rxa-editbox textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 56px;
    resize: vertical;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(0, 0, 0, .25);
    color: #fff;
    font: inherit;
}
.rxa-editbar {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 6px;
}
.rxa-btn.rxa-btn--ghost {
    background: none;
    border-color: rgba(255, 255, 255, .4);
}
.rxa-vhide {
    display: none !important;
}
.rxa-vnav {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-inline-end: 4px;
    font-size: 12px;
    color: #a8a8a8;
}
.rxa-vnav button:disabled {
    opacity: .35;
    cursor: default;
}
.rxa-vnav button:disabled:hover {
    background: none;
    color: #8a8a8a;
}
/* Long-press menu (phones). */
.rxa-msgmenu {
    display: flex;
    flex-direction: column;
    min-width: 170px;
    margin: -4px 0 4px;
    padding: 4px;
    border-radius: 12px;
    background: #2a2a2a;
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    z-index: 5;
}
.rxa-msgmenu--end {
    align-self: flex-end;
}
.rxa-msgmenu--start {
    align-self: flex-start;
}
.rxa-msgmenu button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #ececec;
    font: 500 14px/1 inherit;
    text-align: start;
    cursor: pointer;
}
.rxa-msgmenu button:active,
.rxa-msgmenu button:hover {
    background: rgba(255, 255, 255, .08);
}
.rxa-msgmenu .iconify {
    font-size: 17px;
    color: #a8a8a8;
}
.rxa-msg.rxa-pressed {
    filter: brightness(1.15);
    -webkit-user-select: none;
    user-select: none;
}
.rxa-msg {
    -webkit-touch-callout: none;
}
.rxa-toast {
    position: absolute;
    left: 50%;
    bottom: 90px;
    transform: translateX(-50%);
    padding: 7px 14px;
    border-radius: 16px;
    background: #ececec;
    color: #171717;
    font-size: 13px;
    z-index: 20;
    pointer-events: none;
}

/* AI Assistants page (/assistants, owner 2026-10-30) and its link in the Roxyon AI sidebar. */
.rxs {
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 20px 60px;
    color: #ececec;
    color-scheme: dark;
}
.rxs-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.rxs-head-t {
    flex: 1 1 320px;
}
.rxs h1 {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.3px;
}
.rxs-head p {
    margin: 0;
    max-width: 640px;
    color: #a8a8a8;
    font-size: 14px;
    line-height: 1.55;
}
.rxs-new {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--color-primary, #d50c2d);
    color: #fff;
    font: 600 14px/1 inherit;
    cursor: pointer;
}
.rxs-h2 {
    margin: 30px 0 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #9a9a9a;
}
.rxs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}
.rxs-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 14px;
    background: #212121;
    border: 1px solid #2c2c2c;
    color: inherit;
    text-align: start;
    font: inherit;
}
.rxs-card-h {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}
.rxs-card-h .iconify {
    font-size: 20px;
    color: var(--color-primary--link, #ef2b4b);
}
.rxs-desc {
    margin: 0;
    flex: 1;
    color: #a8a8a8;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.rxs-starters {
    margin: 0;
    padding-inline-start: 18px;
    flex: 1;
    color: #a8a8a8;
    font-size: 13px;
    line-height: 1.6;
}
.rxs-row {
    display: flex;
    gap: 8px;
}
.rxs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 9px;
    border: 1px solid #3a3a3a;
    background: #2a2a2a;
    color: #ececec;
    font: 600 13px/1 inherit;
    cursor: pointer;
}
.rxs-btn:hover {
    background: #333;
}
.rxs-btn--main {
    flex: 1;
    background: var(--color-primary, #d50c2d);
    border-color: transparent;
    color: #fff;
}
.rxs-btn--main:hover {
    background: var(--color-primary, #d50c2d);
    filter: brightness(1.08);
}
.rxs-card--new {
    align-items: flex-start;
    border-style: dashed;
    cursor: pointer;
}
.rxs-card--new .iconify {
    font-size: 24px;
    color: var(--color-primary--link, #ef2b4b);
}
.rxs-card--new span {
    color: #a8a8a8;
    font-size: 13px;
}
.rxs-hint {
    color: #9a9a9a;
    font-size: 14px;
}
.rxx-asst-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 8px 8px;
    padding: 9px 10px;
    border-radius: 9px;
    color: #ececec;
    font-size: 14px;
    text-decoration: none;
}
.rxx-asst-link:hover {
    background: rgba(255, 255, 255, .06);
}
.rxx-asst-link span {
    flex: 1;
}
.rxx-asst-link .iconify:last-child {
    color: #8a8a8a;
}
@media (max-width: 600px) {
    .rxs {
        padding: 20px 16px 40px;
    }
    .rxs h1 {
        font-size: 22px;
    }
    .rxs-new {
        width: 100%;
        justify-content: center;
    }
}

/* The reply while it is written (word by word, 2026-10-30): a caret at its end; the status line steps aside. */
.rxa-draft > :last-child::after,
.rxa-draft:empty::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 1em;
    margin-inline-start: 2px;
    vertical-align: -2px;
    border-radius: 1px;
    background: currentColor;
    opacity: .6;
    animation: rxa-caret 1s steps(2, start) infinite;
}
.rxa-draft .rxa-code:last-child::after {
    display: none;
}
@keyframes rxa-caret {
    to { visibility: hidden; }
}
.rxa-typing.rxa-writing {
    display: none !important;
}

/* An assistant's starters under its greeting (2026-10-30). */
.rxa-starters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-self: flex-start;
    max-width: 100%;
}
.rxa-starter {
    padding: 8px 12px;
    border-radius: 16px;
    border: 1px solid #3a3a3a;
    background: #232323;
    color: #ececec;
    font: 500 13px/1.3 inherit;
    text-align: start;
    cursor: pointer;
}
.rxa-starter:hover {
    background: #2d2d2d;
}

/* Assistant form: personality, look, starters, daily check-in; avatars (2026-10-30). */
@media (max-width: 520px) {
    .rxx-row { flex-wrap: wrap; }
    .rxx-row > div { flex: 1 1 40%; }
}
.rxx-looks { display: flex; flex-direction: column; gap: 8px; }
.rxx-icons, .rxx-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.rxx-ic { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--rxx-border, #3a3a3a); background: none; color: var(--rxx-text, #ececec); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.rxx-ic.on { color: #fff; border-color: transparent; }
.rxx-co { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.rxx-co.on { border-color: var(--rxx-text, #fff); box-shadow: 0 0 0 2px var(--rxx-surface, #1f1f1f) inset; }
.rxx-starter-in { margin-top: -2px; }
.rxx-check { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.rxx-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--rxx-accent, #d50c2d); }
.rxx-check input[type="time"] { width: auto; min-width: 110px; }
.rxx-note { margin: -4px 0 0; font-size: 12px; color: var(--rxx-muted, #9a9a9a); }
.rxs-av { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.rxs-av .iconify { font-size: 18px; color: #fff !important; }
.rxs-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #a8a8a8; }

/* The assistant's face in live talk (2026-10-30), in its colour (--rxa-face, from its avatar). */
.rxa-talk { --rxa-face: var(--color-primary, #E5082F); }
.rxa-face { width: 168px; height: 168px; }
.rxa-face svg { width: 100%; height: 100%; overflow: visible; }
.rxa-face-skin { fill: var(--rxa-face); }
.rxa-face-cheek { fill: #fff; opacity: .16; }
.rxa-face-white { fill: #fff; }
.rxa-face-pupil { fill: #1b1b1b; }
.rxa-face-glint { fill: #fff; }
.rxa-face-brow { fill: none; stroke: rgba(0, 0, 0, .35); stroke-width: 5; stroke-linecap: round; transition: transform .3s ease; transform-box: fill-box; transform-origin: center; }
.rxa-face-mouth { fill: #3a0a12; stroke: rgba(0, 0, 0, .25); stroke-width: 1; }
.rxa-face-dots { fill: var(--rxa-face); opacity: 0; }
.rxa-talk.is-working .rxa-face-brow, .rxa-talk.is-connecting .rxa-face-brow { transform: translateY(-4px); }
.rxa-talk.is-working .rxa-face-dots circle { animation: rxa-face-dot 1.2s ease-in-out infinite; }
.rxa-talk.is-working .rxa-face-dots circle:nth-child(2) { animation-delay: .2s; }
.rxa-talk.is-working .rxa-face-dots circle:nth-child(3) { animation-delay: .4s; }
.rxa-talk.is-working .rxa-face-dots { opacity: .9; }
@keyframes rxa-face-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.rxa-talk.is-speaking .rxa-face { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--rxa-face) 45%, transparent)); }
.rxa-talk.is-muted .rxa-face { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .rxa-face-dots circle { animation: none !important; } }

/* An assistant calling (2026-10-30): a call card over the whole console, its face ringing. */
.rxa-call { --rxa-face: var(--color-primary, #E5082F); position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(0, 0, 0, .55); color-scheme: dark; animation: rxa-call-in .2s ease-out; }
.rxa-call-card { width: min(340px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 20px 22px;
    border-radius: 22px; background: #1b1b1b; color: #ececec; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); text-align: center; }
.rxa-call .rxa-face { width: 128px; height: 128px; animation: rxa-call-ring 1.2s ease-in-out infinite; }
.rxa-call-name { font-size: 22px; font-weight: 700; }
.rxa-call-sub { font-size: 14px; color: #a8a8a8; }
.rxa-call-row { display: flex; gap: 14px; margin-top: 14px; width: 100%; }
.rxa-call-row button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border: 0; border-radius: 999px;
    font: 600 15px/1 inherit; color: #fff; cursor: pointer; }
.rxa-call-row .iconify { font-size: 20px; }
.rxa-call-no { background: #c92a2a; }
.rxa-call-yes { background: #2f9e44; }
.rxa-call-yes .iconify { animation: rxa-call-shake 1.2s ease-in-out infinite; }
@keyframes rxa-call-in { from { opacity: 0; } }
@keyframes rxa-call-ring { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes rxa-call-shake { 0%, 60%, 100% { transform: rotate(0); } 10%, 30%, 50% { transform: rotate(-14deg); } 20%, 40% { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) { .rxa-call .rxa-face, .rxa-call-yes .iconify { animation: none; } }
.rxx-check select { width: auto; min-width: 140px; }
.rxa-menu-h { padding: 8px 12px 2px; font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #8a8a8a; border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 4px; }

/* A realistic portrait in live talk and calls (2026-10-30): round photo, gently breathing; while it speaks it grows a
   little and glows with the voice (--lvl 0..1 from the played audio). The drawn face stays as the fallback. */
.rxa-portrait { width: 176px; height: 176px; border-radius: 50%; overflow: hidden; flex: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--rxa-face, #E5082F) 55%, transparent), 0 0 calc(10px + var(--lvl, 0) * 40px) color-mix(in srgb, var(--rxa-face, #E5082F) 60%, transparent);
    transform: scale(calc(1 + var(--lvl, 0) * .04)); transition: box-shadow .08s linear; animation: rxa-portrait-breathe 4s ease-in-out infinite; }
.rxa-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.has-photo .rxa-face { display: none; }
.rxa-call .rxa-portrait { width: 136px; height: 136px; animation: rxa-call-ring 1.2s ease-in-out infinite; }
.rxa-talk.is-muted .rxa-portrait { filter: grayscale(.6); opacity: .75; }
.rxa-talk.is-working .rxa-portrait img { filter: brightness(.92); }
@keyframes rxa-portrait-breathe { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
@media (prefers-reduced-motion: reduce) { .rxa-portrait { animation: none; } }
.rxs-av.rxs-av--photo { background: none !important; overflow: hidden; }
.rxs-av--photo img { width: 100%; height: 100%; object-fit: cover; }
.rxx-photo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rxx-photo-pre { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: #2a2a2a; flex: none; display: flex; align-items: center; justify-content: center; color: #8a8a8a; font-size: 26px; }
.rxx-photo-pre img { width: 100%; height: 100%; object-fit: cover; }
.rxx-photo-btns { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.rxx-btn.rxx-btn--ghost { background: none; border: 1px solid var(--rxx-line, #3a3a3a); color: var(--rxx-text, #ececec); }
.rxx-photo-btns [hidden], .rxx-sheet input[hidden] { display: none !important; }
.rxx-voice { display: flex; gap: 6px; align-items: center; }
.rxx-voice select { flex: 1; min-width: 0; }
.rxx-play { width: 44px; min-height: 44px; flex: none; border-radius: 8px; border: 1px solid var(--rxx-line, #3a3a3a); background: none; color: var(--rxx-text, #ececec); font-size: 20px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rxx-play:disabled { opacity: .5; }
/* The camera in live talk (2026-10-30): a small preview in the corner; front camera mirrored. */
.rxa-talk-video { position: absolute; top: 14px; inset-inline-end: 14px; width: 112px; height: 150px; object-fit: cover; border-radius: 14px; background: #000;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35); cursor: pointer; z-index: 2; }
.rxa-talk-video.is-front { transform: scaleX(-1); }
.rxa-talk-row .rxa-talk-cam[aria-pressed="true"] { background: var(--color-text, #1a1a1a); color: var(--color-card-background, #fff); }
.rxa-talk-row button[hidden] { display: none; }
@media (max-width: 420px) { .rxa-talk-row { flex-wrap: wrap; justify-content: center; } }
.rxx-mem { display: flex; flex-direction: column; gap: 6px; }
.rxx-mem[hidden], .rxx-sheet label[hidden] { display: none !important; }
.rxx-mem-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; border: 1px solid var(--rxx-line); border-radius: 10px; }
.rxx-mem-list li { display: flex; align-items: flex-start; gap: 8px; padding: 9px 6px 9px 12px; font-size: 13.5px; line-height: 1.4; border-bottom: 1px solid var(--rxx-line); }
.rxx-mem-list li:last-child { border-bottom: 0; }
.rxx-mem-list li span { flex: 1; overflow-wrap: anywhere; }
.rxx-mem-x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--rxx-muted); font-size: 16px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.rxx-mem-x:hover { background: var(--rxx-field); color: var(--rxx-text); }

/* ---- Phone-native AI Assistants (owner 2026-10-30: "very phone native and very well designed") ----
   Phones: a large title with a round + button, assistants as an inset list (round photo, name, one line, actions at the
   end; tapping the row opens the chat), templates as a swipeable row of cards. Inputs at 16 px so iOS doesn't zoom. */
.rxs-card { cursor: pointer; }
.rxs-card button { cursor: pointer; }
@media (max-width: 600px) {
    .rxs { padding: 10px 0 calc(40px + env(safe-area-inset-bottom)); }
    .rxs-head { position: sticky; top: 0; z-index: 3; align-items: center; flex-wrap: nowrap; padding: 10px 16px 8px; background: color-mix(in srgb, #171717 88%, transparent);
        -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); }
    .rxs-head-t { flex: 1 1 auto; }
    .rxs h1 { font-size: 30px; font-weight: 800; letter-spacing: -.5px; margin: 0; }
    .rxs-head p { display: none; }
    .rxs-new { width: 40px; height: 40px; padding: 0; border-radius: 50%; justify-content: center; flex: none; }
    .rxs-new span:not(.iconify) { display: none; }
    .rxs-new .iconify { font-size: 22px; }
    .rxs-h2 { margin: 22px 20px 8px; font-size: 13px; letter-spacing: .3px; }
    .rxs-grid:first-of-type, .rxs-h2 + .rxs-grid { gap: 0; }
    .rxs-h2 + .rxs-grid:not(:last-child) { margin: 0 16px; border-radius: 14px; overflow: hidden; background: #212121; grid-template-columns: 1fr; }
    .rxs-h2 + .rxs-grid:not(:last-child) .rxs-card { display: grid; grid-template-columns: 52px 1fr auto; column-gap: 12px; row-gap: 1px; align-items: center;
        padding: 12px 10px 12px 14px; border: 0; border-radius: 0; background: none; position: relative; }
    .rxs-h2 + .rxs-grid:not(:last-child) .rxs-card + .rxs-card::before { content: ""; position: absolute; top: 0; inset-inline-start: 78px; inset-inline-end: 0; border-top: 1px solid #2e2e2e; }
    .rxs-h2 + .rxs-grid:not(:last-child) .rxs-card:active { background: #2a2a2a; }
    .rxs-card .rxs-card-h { display: contents; }
    .rxs-card .rxs-card-h .rxs-av { grid-column: 1; grid-row: 1 / span 3; width: 52px; height: 52px; border-radius: 50%; }
    .rxs-card .rxs-card-h .rxs-av .iconify { font-size: 26px; }
    .rxs-card .rxs-card-h b { grid-column: 2; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rxs-card .rxs-tag { grid-column: 2; font-size: 12.5px; }
    .rxs-card .rxs-desc { grid-column: 2; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
    .rxs-card .rxs-row { grid-column: 3; grid-row: 1 / span 3; gap: 2px; }
    .rxs-card .rxs-btn--main { display: none; }
    .rxs-card .rxs-row .rxs-btn { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: none; color: #a8a8a8; }
    .rxs-card .rxs-row .rxs-btn span:not(.iconify) { display: none; }
    .rxs-card .rxs-row .rxs-btn .iconify { font-size: 19px; }
    .rxs-card--new { margin: 0; border-radius: 0; border: 0; background: none; padding: 16px; }
    /* templates: a row to swipe */
    .rxs-h2 + .rxs-grid:last-child { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 2px 16px 8px; scrollbar-width: none; }
    .rxs-h2 + .rxs-grid:last-child::-webkit-scrollbar { display: none; }
    .rxs-card--tpl { flex: 0 0 78%; scroll-snap-align: center; cursor: default; }
}

/* The assistant form: a bottom sheet on phones (grabber, slides up, Save always in reach). */
@media (max-width: 600px) {
    .rxx-dialog { align-items: flex-end; padding: 0; }
    .rxx-sheet { max-width: none; max-height: 94dvh; border-radius: 20px 20px 0 0; border-bottom: 0; padding: 22px 16px calc(16px + env(safe-area-inset-bottom));
        animation: rxx-up .26s cubic-bezier(.2, .8, .2, 1); }
    .rxx-sheet::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: rgba(255, 255, 255, .25); }
    .rxx-sheet h2 { font-size: 20px; font-weight: 700; margin-top: 6px; }
    .rxx-sheet input, .rxx-sheet select, .rxx-sheet textarea { font-size: 16px; border-radius: 12px; min-height: 48px; }
    .rxx-sheet label { font-size: 13px; margin-top: 10px; }
    .rxx-sheet > .rxx-btn[type="submit"] { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); margin: 10px -16px calc(-16px - env(safe-area-inset-bottom)); border-radius: 0; min-height: 56px;
        padding-bottom: env(safe-area-inset-bottom); font-size: 17px; z-index: 4; }
    .rxx-ic { width: 42px; height: 42px; border-radius: 12px; }
    .rxx-co { width: 32px; height: 32px; }
}
@keyframes rxx-up { from { transform: translateY(40px); opacity: .4; } }

/* Live talk and incoming calls like the phone's own call screen: full screen, the assistant's colour fading into the
   dark, name on top, the face or photo in the middle, big round buttons with their labels below. */
.rxa-talk { box-sizing: border-box; background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--rxa-face, #E5082F) 38%, #101010) 0%, #101010 70%); color: #f2f2f2; justify-content: flex-start;
    padding: calc(28px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom)); }
.rxa-talk .rxa-talk-name { order: -2; font-size: 30px; font-weight: 700; letter-spacing: -.3px; }
.rxa-talk .rxa-talk-state { order: -1; margin-top: -6px; color: rgba(255, 255, 255, .7); font-size: 15px; }
.rxa-talk .rxa-face, .rxa-talk .rxa-portrait { margin: auto 0; }
.rxa-talk .rxa-face { width: 200px; height: 200px; }
.rxa-talk .rxa-portrait { width: 208px; height: 208px; }
.rxa-talk .rxa-talk-said { color: rgba(255, 255, 255, .85); font-size: 15px; min-height: 3em; }
.rxa-talk .rxa-talk-row { gap: 28px; margin: 6px 0 0; flex-wrap: nowrap; }
.rxa-talk .rxa-talk-row button { flex-direction: column; gap: 8px; min-height: 0; padding: 0; border: 0; background: none; color: #f2f2f2; font-size: 13px; font-weight: 500; }
.rxa-talk .rxa-talk-row button .iconify { width: 66px; height: 66px; padding: 20px; box-sizing: border-box; border-radius: 50%; background: rgba(255, 255, 255, .16); font-size: 26px;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.rxa-talk .rxa-talk-row .rxa-talk-end { background: none; }
.rxa-talk .rxa-talk-row .rxa-talk-end .iconify { background: #e5383b; }
.rxa-talk .rxa-talk-row button[aria-pressed="true"] { background: none; color: #f2f2f2; }
.rxa-talk .rxa-talk-row button[aria-pressed="true"] .iconify { background: #f2f2f2; color: #111; }
@media (max-width: 600px) {
    .rxa-talk { position: fixed; z-index: 100001; }
    .rxa-talk-video { top: calc(14px + env(safe-area-inset-top)); }
}
@media (max-width: 600px) {
    .rxa-call { padding: 0; background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--rxa-face, #E5082F) 40%, #0e0e0e) 0%, #0e0e0e 70%); }
    .rxa-call-card { width: 100%; height: 100dvh; box-sizing: border-box; border-radius: 0; background: none; box-shadow: none; justify-content: flex-start;
        padding: calc(56px + env(safe-area-inset-top)) 24px calc(48px + env(safe-area-inset-bottom)); }
    .rxa-call-card .rxa-call-name { order: -2; font-size: 34px; }
    .rxa-call-card .rxa-call-sub { order: -1; margin-top: -8px; font-size: 16px; }
    .rxa-call .rxa-face { width: 190px; height: 190px; margin: auto 0; }
    .rxa-call .rxa-portrait { width: 200px; height: 200px; margin: auto 0; }
    .rxa-call-card .rxa-call-sub { margin-top: 0; }
    .rxa-call-row { justify-content: space-around; gap: 0; }
    .rxa-call-row button { flex: 0 0 auto; flex-direction: column; gap: 10px; min-height: 0; background: none !important; font-size: 14px; font-weight: 500; }
    .rxa-call-row button .iconify { width: 74px; height: 74px; padding: 22px; box-sizing: border-box; border-radius: 50%; font-size: 30px; }
    .rxa-call-no .iconify { background: #e5383b; }
    .rxa-call-yes .iconify { background: #2fb344; }
}
.rxx-kn { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.rxx-kn[hidden] { display: none !important; }
.rxx-kn .rxx-mem-list { width: 100%; }
.rxx-kn .rxx-mem-list li { align-items: center; }
.rxx-kn .rxx-mem-list li > .iconify { color: var(--rxx-muted); font-size: 18px; flex: none; }
.rxx-kn-warn { font-style: normal; font-size: 11px; color: #f2a65a; flex: none; }
.rxx-kn .rxx-btn .iconify { margin-inline-end: 6px; }