/* plugins/joinery_ai/assets/css/joinery_ai.css */
/* joinery_ai plugin styles. Distinctive .joai-* prefix.
   Public dashboard rules are scoped under .jy-ui (the view opts in);
   admin run-detail utilities are plain .joai-* (admin theme, not .jy-ui)
   and carry the exact values lifted from former inline styles. */

/* --- Admin recipe edit: built-in prompt display ---
   A pipeline job ships its own instructions and rcp_prompt only overrides them,
   so the edit form shows the real text rather than an empty box. Reads as prose,
   not as a disabled input, because it is not a field. */
.joai-prompt-builtin { white-space: pre-wrap; word-break: break-word; font-family: inherit;
    font-size: 0.9rem; line-height: 1.5; margin: 0; padding: 0.85rem 1rem; max-height: 22rem;
    overflow-y: auto; background: #f7f8fa; border: 1px solid #dfe3e8; border-radius: 6px;
    color: #33393f; }

/* --- Public dashboard (/joinery_ai) --- */
.jy-ui .joai-wrap { max-width: 900px; margin: 2rem auto; padding: 0 1rem; }
.jy-ui .joai-wrap h1 { margin-bottom: 0.5rem; }
.jy-ui .joai-card { border: 1px solid #ddd; border-radius: 8px; margin-bottom: 1.5rem;
              background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.jy-ui .joai-card-header { padding: 1rem 1.25rem; border-bottom: 1px solid #eee;
                    display: flex; justify-content: space-between; align-items: center; }
.jy-ui .joai-card-header h2 { margin: 0; font-size: 1.25rem; }
.jy-ui .joai-card-header .joai-meta { font-size: 0.85rem; color: #666; }
.jy-ui .joai-card-body { padding: 1.25rem; }
.jy-ui .joai-empty { padding: 1.25rem; color: #888; font-style: italic; }
.jy-ui .joai-actions a { font-size: 0.85rem; margin-left: 0.5rem; }
.jy-ui .joai-intro { color: #666; margin-bottom: 2rem; }

/* --- Admin run detail (/admin/joinery_ai/run) --- */
.joai-pre-wrap { white-space: pre-wrap; }
.joai-trace { font-size: 0.85em; }
.joai-trace-wrap { font-size: 0.85em; white-space: pre-wrap; }
.joai-toolcall { border-color: #0d6efd !important; }
.joai-toolcall.is-error { border-color: #dc3545 !important; }

/* --- Admin chat (/admin/joinery_ai/chat) --- */
.joai-chat-wrap { display: flex; gap: 1rem; height: calc(100vh - 220px); min-height: 420px; }
.joai-chat-list { flex: 0 0 240px; display: flex; flex-direction: column; gap: 0.5rem;
                  border: 1px solid #ddd; border-radius: 8px; background: #fff; padding: 0.75rem; overflow-y: auto; }
.joai-chat-newbtn { width: 100%; }
.joai-chat-search { width: 100%; box-sizing: border-box; padding: 0.4rem 0.6rem; font: inherit;
                    font-size: 0.85rem; border: 1px solid #ddd; border-radius: 6px; }
.joai-chat-search:focus { outline: none; border-color: #0d6efd; box-shadow: 0 0 0 2px rgba(13,110,253,0.15); }
.joai-chat-threads { display: flex; flex-direction: column; gap: 0.25rem; }
.joai-chat-item { position: relative; }
.joai-chat-list-item { display: flex; align-items: center; gap: 0.35rem;
                       padding: 0.5rem 1.7rem 0.5rem 0.6rem; border-radius: 6px; color: #222;
                       text-decoration: none; font-size: 0.9rem; }
.joai-chat-list-item:hover { background: #f1f3f5; }
.joai-chat-list-item.is-active { background: #e7f1ff; font-weight: 600; }
.joai-chat-item-title { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.joai-chat-pin { display: none; flex: 0 0 auto; color: #6c757d; line-height: 0; }
.joai-chat-item.is-pinned .joai-chat-pin { display: inline-flex; }

/* Three-dots trigger: hidden until row hover or menu open. */
.joai-chat-item-menu-btn { position: absolute; top: 50%; right: 0.2rem; transform: translateY(-50%);
                           border: 0; background: transparent; color: #888; cursor: pointer;
                           font-size: 1.15rem; line-height: 1; padding: 0.05rem 0.35rem; border-radius: 4px;
                           opacity: 0; }
.joai-chat-item:hover .joai-chat-item-menu-btn,
.joai-chat-item-menu-btn[aria-expanded="true"] { opacity: 1; }
.joai-chat-item-menu-btn:hover { background: rgba(0,0,0,0.08); color: #333; }

.joai-chat-item-menu { position: absolute; top: 100%; right: 0.2rem; z-index: 30; min-width: 130px;
                       background: #fff; border: 1px solid #ddd; border-radius: 6px;
                       box-shadow: 0 4px 14px rgba(0,0,0,0.14); padding: 0.25rem; }
.joai-chat-item-menu.open-up { top: auto; bottom: 100%; }
.joai-chat-item-menu button { display: block; width: 100%; text-align: left; border: 0;
                              background: transparent; padding: 0.4rem 0.6rem; border-radius: 4px;
                              font: inherit; font-size: 0.85rem; color: #222; cursor: pointer; }
.joai-chat-item-menu button:hover { background: #f1f3f5; }
.joai-chat-menu-danger { color: #dc3545; }
.joai-chat-menu-danger:hover { background: #fdecea; }

.joai-chat-rename { width: 100%; box-sizing: border-box; padding: 0.45rem 0.5rem; font: inherit;
                    font-size: 0.9rem; border: 1px solid #0d6efd; border-radius: 6px; }

/* Export dialog (rendered inside the system JoineryModal). */
.joai-export-title { margin: 0 0 0.75rem; font-weight: 600; font-size: 1rem; }
.joai-export-formats { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.joai-export-formats label { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.9rem; cursor: pointer; }
.joai-export-hint { color: #6c757d; font-size: 0.8rem; }
.joai-chat-main { flex: 1 1 auto; display: flex; flex-direction: column; border: 1px solid #ddd;
                  border-radius: 8px; background: #fff; overflow: hidden; }
/* Control strip above the transcript: a single line summarizing the active
   settings, with every control tucked behind the ⚙ Settings disclosure. Same
   on desktop and mobile. */
.joai-chat-status { display: flex; align-items: stretch; position: relative;
                    border-bottom: 1px solid #e6e8eb; background: #f7f8fa;
                    font-size: 0.8rem; color: #555; }

/* Selects + inputs in the settings panel share one look. */
.joai-chat-control { padding: 0.32rem 0.5rem; border: 1px solid #cdd3da; border-radius: 6px;
                     background: #fff; color: #222; font: inherit; font-size: 0.8rem; }
.joai-chat-control:focus { outline: none; border-color: #0d6efd;
                           box-shadow: 0 0 0 2px rgba(13,110,253,0.15); }
select.joai-chat-control { cursor: pointer; }

/* Settings disclosure. The summary IS the one-line control bar: a live summary
   of the active settings on the left, the gear affordance on the right.
   Clicking it drops the full-width settings drawer over the top of the chat. */
.joai-chat-settings { flex: 1 1 auto; min-width: 0; }
.joai-chat-settings > summary { list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.85rem; }
.joai-chat-settings > summary::-webkit-details-marker { display: none; }
.joai-chat-settings > summary::marker { content: ''; }
.joai-chat-settings > summary:hover { background: #eef1f5; }
.joai-chat-settings[open] > summary { background: #eef1f5; }
.joai-chat-settings-summary { flex: 1 1 auto; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; color: #333; font-weight: 500; }
.joai-chat-settings-gear { flex: none; color: #0d6efd; font-weight: 600; white-space: nowrap; }

/* The panel: a full-width drawer that slides down under the summary line and
   overlays the top of the chat. */
.joai-chat-settings-body { position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    background: #fff; border: 1px solid #d8dde3; border-top: none;
    border-radius: 0 0 10px 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.16); padding: 0.95rem 1rem;
    display: flex; flex-direction: column; gap: 0.85rem;
    transform-origin: top center; animation: joai-settings-in 0.16s ease-out; }
@keyframes joai-settings-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.joai-chat-settings-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: #99a1ab; margin-top: 0.15rem; }
.joai-chat-settings-body label { display: flex; flex-direction: column; gap: 0.3rem;
    font-size: 0.76rem; font-weight: 600; color: #555; }
.joai-chat-settings-body .joai-chat-control { width: 100%; box-sizing: border-box; font-weight: 400; }
.joai-chat-settings-body textarea.joai-chat-control { resize: vertical; min-height: 60px; }
.joai-chat-settings-row { display: flex; gap: 0.7rem; }
.joai-chat-settings-row label { flex: 1; min-width: 0; }
/* Capability toggles read as a horizontal row inside the column-stacked panel. */
.joai-chat-settings-toggles { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.joai-chat-settings-body .joai-chat-toggle { flex-direction: row; align-items: center;
    font-weight: 500; }
/* Extra protection: the add-on switches shown under the Private level. */
.joai-chat-addons { display: flex; flex-direction: column; gap: 0.3rem;
    padding: 0.55rem 0.7rem; border-left: 3px solid #d8dde3; background: #f7f8fa; border-radius: 4px; }
.joai-chat-addons[hidden] { display: none; }
.joai-chat-addons-heading { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: #99a1ab; }
.joai-chat-addon-note { margin: 0; font-size: 0.74rem; color: #666; line-height: 1.4; }
.joai-chat-transcript { flex: 1 1 auto; overflow-y: auto; padding: 1.25rem 1.5rem; display: flex;
                        flex-direction: column; gap: 1rem; }
/* Send button morphs into an active Cancel while a turn streams (setBusy). */
.joai-btn.joai-chat-cancel-active { background: #dc3545; border-color: #dc3545; color: #fff; }
.joai-btn.joai-chat-cancel-active:hover { background: #c0392b; }
/* Waiting-for-you cards: this conversation's pending queued actions. The
   facts are the card's substance; the model's note renders as collapsed
   quotation, visibly its voice. */
.joai-chat-queued { padding: 0 1rem 0.5rem; }
.joai-queued-card { margin-top: 0.6rem; padding: 0.7rem 0.85rem 0.8rem; border: 1px solid #dfe3e8;
                    border-left: 3px solid #1d63d1; background: #fff; border-radius: 8px;
                    min-width: 0; overflow-wrap: anywhere; }
.joai-queued-head { font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
                    letter-spacing: 0.05em; color: #1d63d1; margin-bottom: 0.35rem; }
.joai-queued-fact { font-size: 0.9rem; margin: 0 0 0.25rem; color: #1f2933; }
.joai-queued-headline { font-weight: 600; }
.joai-queued-kicker { font-size: 0.75rem; font-weight: 600; margin: 0 0 0.1rem; color: #667085; }
/* Labelled fields: a muted label column beside the values. A link stays on
   one line until clicked; a note shows three lines, then 'more'. */
.joai-queued-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr);
                      column-gap: 0.75rem; row-gap: 0.3rem; margin: 0.4rem 0 0; }
.joai-queued-field { display: contents; }
.joai-queued-label { margin: 0; padding-top: 0.1rem; font-size: 0.75rem; font-weight: 600; color: #667085; }
.joai-queued-value { margin: 0; min-width: 0; font-size: 0.9rem; line-height: 1.4; color: #1f2933; }
.joai-queued-line { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit;
                    text-align: left; color: inherit; cursor: pointer; white-space: nowrap;
                    overflow: hidden; text-overflow: ellipsis; }
.joai-queued-line.is-open { white-space: normal; overflow-wrap: anywhere; }
.joai-queued-clamp { white-space: pre-line; display: -webkit-box; -webkit-box-orient: vertical;
                     -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.joai-queued-clamp.is-open { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
.joai-queued-more { padding: 0; border: 0; background: none; font: inherit; font-size: 0.8rem;
                    color: #2563eb; cursor: pointer; }
.joai-queued-more[hidden] { display: none; }
.joai-queued-note { margin: 0.4rem 0 0; font-size: 0.82rem; color: #667085; }
.joai-queued-note blockquote { margin: 0.3rem 0 0 0.25rem; padding-left: 0.6rem;
                               border-left: 3px solid #dfe3e8; font-style: italic; }
.joai-queued-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
/* Event chips: platform-written transcript facts (a queued action's
   resolution) — neutral, centered, neither voice. */
.joai-chat-event { margin: 0.75rem auto; max-width: 85%; text-align: center;
                   font-size: 0.8rem; color: #777; }
.joai-chat-event-time { margin-left: 0.5rem; color: #aaa; font-size: 0.72rem; }
/* Long event content (an approved fetch carries its whole result): head shown
   inline, the rest behind a toggle, scrolling in place. */
.joai-chat-event-more { margin-top: 0.35rem; text-align: left; }
.joai-chat-event-more summary { cursor: pointer; color: #999; font-size: 0.75rem;
                                text-align: center; }
.joai-chat-event-more pre { max-height: 20rem; overflow: auto; margin: 0.35rem 0 0;
                            padding: 0.5rem; background: #f7f7f7; border-radius: 6px;
                            font-size: 0.75rem; white-space: pre-wrap;
                            word-break: break-word; color: #555; }
.joai-chat-thinking { padding: 0 1rem 0.5rem; font-size: 0.82rem; color: #888; font-style: italic; }
.joai-chat-composer { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid #eee;
                      align-items: flex-end; }
.joai-chat-composer textarea { flex: 1 1 auto; resize: none; border: 1px solid #ccc; border-radius: 8px;
                               padding: 0.5rem 0.7rem; font: inherit; }
.joai-chat-composer.joai-chat-dragover { outline: 2px dashed #0d6efd; outline-offset: -4px; }
.joai-chat-empty { color: #888; font-style: italic; padding: 0.5rem; }

/* Attachments: the file input is hidden (the attach button proxies it); the button
   centers its upload glyph and matches the composer button height. */
.joai-chat-file-input { display: none; }
.joai-chat-attach-btn { flex: 0 0 auto; display: inline-flex; align-items: center;
                        justify-content: center; line-height: 1; padding: 0.4rem 0.55rem; }
.joai-chat-attach-btn svg { width: 22px; height: 22px; display: block; }

/* Pending-file strip above the composer, and rendered attachment chips inside a
   sent user bubble. */
.joai-chat-attach-strip { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.4rem 0.75rem 0; }
.joai-chat-attachments { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.joai-chat-attach { display: inline-flex; align-items: center; gap: 0.3rem; max-width: 220px;
                    padding: 0.25rem 0.5rem; border-radius: 6px; background: rgba(0,0,0,0.06);
                    font-size: 0.78rem; }
.joai-chat-mine .joai-chat-attach { background: rgba(255,255,255,0.2); color: #fff; }
.joai-chat-attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.joai-chat-attach-icon { flex: 0 0 auto; }
.joai-chat-attach-image { padding: 0; background: none; }
.joai-chat-attach-image img { max-width: 120px; max-height: 120px; border-radius: 6px; display: block; }
.joai-chat-attach-remove { border: none; background: none; cursor: pointer; font-size: 1rem;
                           line-height: 1; color: inherit; padding: 0 0.1rem; }
.joai-chat-attach-remove:hover { color: #dc3545; }

/* Conversation meta bar under the composer — the toolbar strip. Holds the
   running token/cost total today; room for more controls later. */
.joai-chat-meta { display: flex; justify-content: flex-end; align-items: center;
                  padding: 0.2rem 0.75rem 0.5rem; font-size: 0.72rem; color: #999; }
.joai-chat-meta-usage { white-space: nowrap; }
.joai-btn { display: inline-block; padding: 0.45rem 0.9rem; border: 1px solid #ccc; border-radius: 8px;
            background: #fff; color: #222; cursor: pointer; font: inherit; }
.joai-btn:hover { background: #f1f3f5; }
.joai-btn:disabled { opacity: 0.6; cursor: default; }
.joai-btn-primary { background: #0d6efd; border-color: #0d6efd; color: #fff; }
.joai-btn-primary:hover { background: #0b5ed7; }

/* chat capability toggles in the status strip */
.joai-chat-toggle { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem;
                    color: #444; cursor: pointer; user-select: none; }
.joai-chat-toggle input { margin: 0; cursor: pointer; }
.joai-chat-toggle.is-disabled { color: #aaa; cursor: not-allowed; }
.joai-chat-toggle.is-disabled input { cursor: not-allowed; }

/* --- Mobile: a bar atop the chat pane with the Conversations drawer toggle and
   the maximize/minimize control. The whole bar is hidden on desktop. --- */
.joai-chat-mobilebar { display: none; }
.joai-chat-list-toggle { display: flex; align-items: center; gap: 0.4rem; flex: 1 1 auto; min-width: 0;
    padding: 0.55rem 0.85rem; border: 0; border-bottom: 1px solid #e6e8eb; background: #f7f8fa;
    color: #0d6efd; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
/* Maximize/minimize control, pinned to the right of the ⚙ Settings summary.
   Mobile-only (desktop has the room); shows the Minimize label while maximized. */
.joai-chat-fullscreen-toggle { display: none; align-items: center; justify-content: center;
    flex: none; padding: 0 0.85rem; border: 0; border-left: 1px solid #e6e8eb;
    background: #f7f8fa; color: #0d6efd; font-weight: 600; cursor: pointer; }
.joai-chat-fullscreen-toggle .joai-icon-max,
.joai-chat-fullscreen-toggle .joai-icon-min { align-items: center; }
.joai-chat-fullscreen-toggle .joai-icon-max { display: inline-flex; }
.joai-chat-fullscreen-toggle .joai-icon-min { display: none; }
.joai-chat-wrap.joai-fullscreen .joai-chat-fullscreen-toggle .joai-icon-max { display: none; }
.joai-chat-wrap.joai-fullscreen .joai-chat-fullscreen-toggle .joai-icon-min { display: inline-flex; }
/* While maximized, the control reads as an explicit, labeled way back. */
.joai-chat-fullscreen-toggle .joai-fs-label { display: none; margin-left: 0.4rem; font-weight: 600; }
.joai-chat-wrap.joai-fullscreen .joai-chat-fullscreen-toggle .joai-fs-label { display: inline; }
/* Background scroll lock while maximized. */
body.joai-fullscreen-lock { overflow: hidden; }

@media (max-width: 767px) {
    .joai-chat-wrap { position: relative; gap: 0; height: calc(100vh - 175px); min-height: 360px; }
    .joai-chat-list { position: absolute; top: 0; left: 0; bottom: 0; z-index: 40; width: 82%;
        max-width: 290px; transition: transform 0.22s ease;
        /* The wrap is inset from the viewport by the page/card padding, so clear the
           element's own width plus an extra margin to push it fully off-screen. */
        transform: translateX(calc(-100% - 4rem)); }
    .joai-chat-wrap.list-open .joai-chat-list { transform: translateX(0);
        box-shadow: 4px 0 18px rgba(0,0,0,0.18); }
    .joai-chat-list-backdrop { position: absolute; inset: 0; z-index: 35; background: rgba(0,0,0,0.4); }
    .joai-chat-main { width: 100%; min-width: 0; }
    .joai-chat-mobilebar { display: flex; }
    .joai-chat-fullscreen-toggle { display: inline-flex; }
    /* Icon-only on mobile: drop the "Settings" and "Minimize" words. */
    .joai-chat-settings-gear-label,
    .joai-chat-wrap.joai-fullscreen .joai-chat-fullscreen-toggle .joai-fs-label { display: none; }

    /* Maximized: the chat fills the viewport, above the site header/footer.
       100dvh tracks the dynamic viewport so the composer clears the mobile
       browser's address bar. */
    .joai-chat-wrap.joai-fullscreen { position: fixed; inset: 0; z-index: 2000;
        height: 100vh; height: 100dvh; min-height: 0; margin: 0; border-radius: 0;
        background: #fff; }
}

/* plugins/server_manager/assets/css/server_manager.css */
/* server_manager plugin — admin UI styles. Admin theme (not .jy-ui), so
   distinctive .svm-* / .node-row / .host-accordion prefixes, unscoped.
   Values lifted verbatim from former <style> block and inline styles. */

/* --- Dashboard (index) --- */
.node-row { cursor: pointer; transition: background-color 0.12s ease; min-height: 58px; }
.node-row:hover { background-color: #f8f9fa; }
.host-accordion .accordion-button { padding: 0.6rem 1rem; }
.host-accordion .accordion-body { padding: 0; }
.svm-w90 { max-width: 90px; }

/* --- Job detail --- */
.svm-status-icon { display: inline-block; width: 1.25em; text-align: center; }
.svm-logbox { max-height: 600px; overflow-y: auto; background: #1e1e1e; color: #d4d4d4;
              padding: 1rem; border-radius: 4px; font-size: 13px; white-space: pre-wrap; }

/* --- Node detail --- */
.svm-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.svm-modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; line-height: 1; }
.svm-inline-form { display: inline; }
.svm-progress-thin { height: 4px; }
.svm-progress-bar { width: var(--svm-pct, 0%); }
.svm-w100 { width: 100px; }
/* Node overview: the facts under the name, and the tile grids (as many
   columns as fit; a wide tile spans two, one column on a phone). */
.svm-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.75rem 1.5rem; }
.svm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.svm-span-2 { grid-column: span 2; }
@media (max-width: 600px) { .svm-span-2 { grid-column: auto; } }
.svm-span-all { grid-column: 1 / -1; }
/* Health bars: a track with marks at 75% and 90%, the amber and red lines. */
.svm-gauge { position: relative; height: 10px; border-radius: 5px; background: #e9ecef; overflow: hidden; }
.svm-gauge::before, .svm-gauge::after { content: ''; position: absolute; top: 0; bottom: 0; width: 2px;
                                        background: rgba(0, 0, 0, 0.28); z-index: 1; }
.svm-gauge::before { left: 75%; }
.svm-gauge::after { left: 90%; }
.svm-gauge-fill { height: 100%; width: var(--svm-pct, 0%); border-radius: 5px 0 0 5px; }
/* Status and Details rows: one line each (dot, name, finding), opening to the
   full account. A row with nothing more to say is flat. */
.svm-status { border: 1px solid #dee2e6; border-radius: 0.375rem; }
.svm-status-row + .svm-status-row { border-top: 1px solid #dee2e6; }
.svm-status-head { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.6rem 0.9rem; }
details.svm-status-row > summary { cursor: pointer; list-style: none; }
details.svm-status-row > summary::-webkit-details-marker { display: none; }
details.svm-status-row > summary::after { content: '\203A'; margin-left: auto; padding-left: 0.5rem; color: #6c757d;
                                          transition: transform 0.12s ease; }
details.svm-status-row[open] > summary::after { transform: rotate(90deg); }
details.svm-status-row > summary:hover { background: #f8f9fa; }
.svm-status-head .svm-dot { align-self: center; }
.svm-status-title { font-weight: 600; flex: none; min-width: 9rem; }
.svm-status-summary { color: #6c757d; min-width: 0; overflow-wrap: anywhere; }
.svm-status-body { padding: 0.25rem 0.9rem 0.9rem 2.15rem; }
@media (max-width: 600px) {
	.svm-status-head { flex-wrap: wrap; }
	.svm-status-title { min-width: 0; }
	.svm-status-body { padding-left: 0.9rem; }
}

/* --- Target info --- */
.svm-mw600 { max-width: 600px; }

/* --- Publish/version list (includes/publish_upgrade.php, web mode) --- */
.svm-tag-missing { color: red; font-weight: bold; }
.svm-tag-targz { color: green; }
.svm-tag-zip { color: blue; }
.svm-delete-link { color: #dc3545; margin-left: 10px; }

/* --- Node detail (additional) --- */
.svm-relative { position: relative; }
.svm-dropdown-menu { display: none; position: absolute; right: 0; top: 100%; }
.svm-fs-075 { font-size: .75rem; }
.svm-w200 { width: 200px; }
.svm-m0 { margin: 0; }

/* --- Misc layout utilities (former inline) --- */
.svm-w40 { width: 40%; }
.svm-flex1 { min-width: 0; flex: 1; }
.svm-minw0 { min-width: 0; }

/* --- Mobile: keep the host-accordion header rows from running off a phone --- */
@media (max-width: 767px) {
    .host-accordion .accordion-button,
    .host-accordion .accordion-button .d-flex { flex-wrap: wrap; }
}

/* --- Incidents (IncidentViews) --- */
.svm-incident-pick { width: 1%; }
.svm-incident-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* --- Dashboard board (index): vanilla <details> groups, join panel, one-line node rows --- */
.svm-muted { color: var(--muted, #5a6a7e); }
.svm-ok { color: #006b3f; }
.svm-bad { color: var(--danger, #e63757); }
.svm-trunc { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svm-chev { display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.15rem; flex: none;
            border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
            transform: rotate(-45deg); transition: transform 0.12s ease; }
details[open] > summary > .svm-chev { transform: rotate(45deg); }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

/* Status strip + notes */
.svm-strip { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1.5rem;
             padding: 0 0 0.75rem; margin-bottom: 0.75rem; font-size: 0.875rem; border-bottom: 1px solid var(--border-light, rgba(108,114,147,.25)); }
.svm-strip-facts { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; align-items: center; }
.svm-strip-actions { display: flex; gap: 0.5rem; }

/* Agents asking to join: light blue, one collapsible panel */
.svm-joins-filter { width: calc(100% - 2.5rem); min-width: 0; margin: 0.5rem 1.25rem; }
.svm-joins-scroll { max-height: 420px; overflow: auto; }
.svm-join-row { padding: 0.45rem 1.25rem; border-bottom: 1px solid var(--border-light, rgba(108,114,147,.25)); font-size: 0.8125rem; }
.svm-join-row:last-child { border-bottom: 0; }
.svm-join-top { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.svm-join-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svm-join-age { flex: none; }
.svm-join-sub { margin-top: 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svm-join-actions { display: flex; gap: 0.4rem; margin-top: 0.35rem; }
.svm-inline-form { display: inline; margin: 0; }
.svm-rejected { margin-top: 0.6rem; font-size: 0.8125rem; }
.svm-rejected > summary { cursor: pointer; color: var(--muted, #5a6a7e); }
.svm-rejected ul { margin: 0.35rem 0 0; padding: 0; list-style: none; }
.svm-rejected li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.15rem 0; }

.svm-prov { padding: 0.45rem 1.25rem; border-bottom: 1px solid var(--border-light, rgba(108,114,147,.25)); font-size: 0.8125rem; }
.svm-prov:last-child { border-bottom: 0; }
.svm-prov-top { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.svm-prov-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svm-prov-detail { margin-top: 0.15rem; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Board: sites left, jobs right; stacks under 1100px */
.svm-board { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .svm-board { grid-template-columns: minmax(0, 1fr); } }
.svm-board-main, .svm-board-side { min-width: 0; }
.svm-jobs { font-size: 0.8125rem; }
.svm-job { padding: 0.45rem 1.25rem; border-bottom: 1px solid var(--border-light, rgba(108,114,147,.25)); }
.svm-job-top { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.svm-job-site { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.svm-job-sub { margin-top: 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svm-filter { padding: 0.25rem 0.6rem; font-size: 0.8125rem; border: 1px solid var(--border, #c4d3e6); border-radius: var(--radius-sm, 0.25rem);
              min-width: 200px; background: #fff; }
.svm-group { border-bottom: 1px solid var(--border-light, rgba(108,114,147,.25)); }
.svm-group > summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.75rem; cursor: pointer; background: var(--light, #edf2f9); }
.svm-group > summary:hover { background: var(--lighter, #e3eaf5); }
.svm-summary-end { margin-left: auto; display: flex; gap: 0.35rem; align-items: center; }
.svm-group-body { padding: 0; }
.svm-nodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.svm-node { display: flex; align-items: center; gap: 0.4rem; min-width: 0; padding: 0.3rem 0.75rem; cursor: pointer; font-size: 0.8125rem;
            border-bottom: 1px solid var(--border-light, rgba(108,114,147,.25)); transition: background-color 0.12s ease; }
.svm-node:hover { background-color: #f8f9fa; }
.svm-node-name { font-weight: 600; white-space: nowrap; }
.svm-node-url { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.svm-dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; flex: none; background: var(--secondary, #748194); }
.svm-dot-success { background: var(--success, #00d27a); }
.svm-dot-warning { background: var(--warning, #f5803e); }
.svm-dot-danger  { background: var(--danger, #e63757); }
.svm-dot-info    { background: var(--info, #27bcfd); }
.svm-dot-primary { background: var(--primary, #2A7BE4); }
.svm-dot-secondary { background: var(--secondary, #748194); }
.svm-group-foot { display: flex; gap: 0.5rem; padding: 0.4rem 0.75rem; background: var(--light, #edf2f9); }
.svm-empty { padding: 0.6rem 0.75rem; font-size: 0.8125rem; }
.svm-box-foot { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
@media (max-width: 767px) {
    .svm-nodes { grid-template-columns: minmax(0, 1fr); }
    .svm-node { flex-wrap: wrap; }
    .svm-node-url { margin-left: 0; }
}
.svm-node[hidden], .svm-group[hidden], .svm-join-row[hidden] { display: none !important; }

/* Actions menu on a host's header bar */
.svm-menu { position: relative; display: inline-block; }
.svm-caret { display: inline-block; width: 0.4em; height: 0.4em; margin-left: 0.2rem; vertical-align: 0.15em;
             border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.svm-menu-list { position: absolute; right: 0; top: calc(100% + 2px); z-index: 20; min-width: 150px; padding: 0.25rem 0;
                 background: #fff; border: 1px solid var(--border, #c4d3e6); border-radius: var(--radius-sm, 0.25rem);
                 box-shadow: var(--shadow, 0 0.5rem 1.5rem rgba(0,0,0,0.1)); }
.svm-menu-list[hidden] { display: none; }
.svm-menu-list a { display: block; padding: 0.4rem 0.9rem; font-size: 0.8125rem; color: var(--body-color, #222e3c); white-space: nowrap; }
.svm-menu-list a:hover { background: var(--light, #edf2f9); }
.svm-menu-form { margin: 0; }
.svm-menu-form button { display: block; width: 100%; padding: 0.4rem 0.9rem; font: inherit; font-size: 0.8125rem; text-align: left;
                        color: var(--body-color, #222e3c); background: none; border: 0; cursor: pointer; white-space: nowrap; }
.svm-menu-form button:hover { background: var(--light, #edf2f9); }

/* One card for every box: the theme's .card / .card-header / h6, made collapsible where a box can be long */
.svm-card > summary.card-header { cursor: pointer; list-style: none; justify-content: flex-start; }
.svm-card:not([open]) > summary.card-header { border-bottom: 0; }
.svm-card > summary.card-header h6 { margin: 0; }
.svm-card-count { margin-left: auto; }
.svm-card-body { padding: 0; }
.svm-joins-warn { margin: 0; padding: 0.5rem 1.25rem; font-size: 0.8125rem; color: var(--muted, #5a6a7e); border-bottom: 1px solid var(--border-light, rgba(108,114,147,.25)); }
.svm-rejected { margin: 0; padding: 0.5rem 1.25rem; }
.svm-card summary.card-header .svm-chev { margin-right: 0.35rem; }
.alert-body ul { margin: 0.35rem 0 0; padding-left: 1.2rem; }

/* Hosts & Sites header controls */
.card-header .svm-filter { min-width: 180px; }
.svm-count { font-size: 0.8125rem; white-space: nowrap; }
.svm-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; padding: 0;
                color: var(--body-color, #222e3c); background: #fff; border: 1px solid var(--border, #c4d3e6);
                border-radius: var(--radius-sm, 0.25rem); cursor: pointer; }
.svm-icon-btn:hover { background: var(--lighter, #e3eaf5); }

/* A machine: one gray bar like a host's, nothing inside to fold */
.svm-machine { background: var(--light, #edf2f9); }
.svm-machine:hover { background: var(--lighter, #e3eaf5); }
.svm-machine .svm-node { border-bottom: 0; padding: 0.45rem 0.75rem 0.45rem 1.9rem; font-size: inherit; }
.svm-machine .svm-node:hover { background: transparent; }
.svm-card-foot { padding: 0.5rem 1.25rem; font-size: 0.8125rem; }
.svm-jobs .svm-job:last-of-type { border-bottom: 0; }
.svm-host-jump { font-size: 0.75rem; }

/* Cloud-account tabs above the board */
.svm-tabs { display: flex; gap: 0.25rem; margin: 0 0 1rem; border-bottom: 1px solid var(--border, #c4d3e6); }
.svm-tab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; margin-bottom: -1px; color: var(--body-color, #222e3c);
           text-decoration: none; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-sm, 0.25rem) var(--radius-sm, 0.25rem) 0 0; }
.svm-tab:hover { background: var(--lighter, #e3eaf5); }
.svm-tab.is-active { background: #fff; border-color: var(--border, #c4d3e6); font-weight: 600; }
.svm-tab-count { font-size: 0.75rem; padding: 0 0.4rem; border-radius: 999px; background: var(--light, #edf2f9); }
.svm-tab-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #e63757; }

/* plugins/support_desk/assets/css/support_desk.css */
/* Support Desk plugin styles. Scoped to .sdk-* so they stay inert elsewhere.
   The transcript itself is the core component (assets/css/chat_transcript.css). */
.sdk-transcript { display: flex; flex-direction: column; gap: 1rem; padding: 0.5rem 0; }