/* ============================================================================
   work-live-preview.css — the workProcess card and the live preview panel
   (assets/js/work-live-preview.js).

   The panel takes the Canvas's place as the right-hand column: same width
   tokens (--dc-panel-w, defined in canvas-panel.css), same three-column rules,
   full screen on phones. Colours come from the theme tokens only.
   ========================================================================== */

/* ── staying out of a folded activity group ─────────────────────────────────
   A finished group folds its steps behind one summary line. A card that can
   still open a running app stays visible under that line; the other steps
   remain folded until the summary is expanded. */
.act-group.is-done.has-kept:not(.is-expanded):not(.act-solo) .act-rows { display: flex; margin-top: 4px; }
/* !important: chat-stream.css pins .tool-block's display with !important too. */
.act-group.is-done.has-kept:not(.is-expanded):not(.act-solo) .act-rows > .act-row:not(.act-keep) { display: none !important; }

/* ── the chat card (extends .ssh-result-card from ssh-runner.css) ─────────── */
.wlp-card .ssh-note { display: flex; align-items: flex-start; gap: 6px; padding: 8px 12px 0; font-size: 12.5px; line-height: 1.45; color: var(--subheading-color, #aaa39b); }
.wlp-card .ssh-note .material-symbols-rounded { font-size: 15px; line-height: 18px; }
.wlp-card .ssh-note-err { color: #f87171; }
body.light_mode .wlp-card .ssh-note-err { color: #c42b31; }

.wlp-state-live {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.28);
}
body.light_mode .wlp-state-live { color: #047857; }
.wlp-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
    animation: wlp-pulse 1.8s ease-out infinite;
}
@keyframes wlp-pulse {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
    70% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
@media (prefers-reduced-motion: reduce) { .wlp-dot { animation: none; } }

.wlp-out { border-top: 1px solid var(--term-line, var(--border-color)); }
.wlp-out > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--subheading-color, #aaa39b);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.wlp-out > summary::-webkit-details-marker { display: none; }
.wlp-out > summary .material-symbols-rounded { font-size: 15px; }
.wlp-out > summary::after { content: 'expand_more'; font-family: 'Material Symbols Rounded'; margin-left: auto; font-size: 18px; transition: transform 0.15s ease; }
.wlp-out[open] > summary::after { transform: rotate(180deg); }
.wlp-out > summary:hover { color: var(--text-color); }
.wlp-out > summary:focus-visible { outline: 2px solid var(--accent-ring, rgba(183, 121, 92, 0.4)); outline-offset: -2px; }
.wlp-out .ssh-output { margin: 0; max-height: 260px; overflow: auto; padding: 10px 12px; background: var(--term-bg); font-size: 12px; line-height: 1.55; }

.wlp-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 10px 8px 12px;
    border-top: 1px solid var(--term-line, var(--border-color));
}
.wlp-where {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    flex: 1 1 160px;
    font-size: 12px;
    color: var(--subheading-color, #aaa39b);
}
.wlp-where .material-symbols-rounded { font-size: 15px; flex: none; }
.wlp-where > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlp-acts { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }

.wlp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color, rgba(245, 238, 230, 0.12));
    background: transparent;
    color: var(--text-color, #eeeae5);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.06s ease;
}
.wlp-btn .material-symbols-rounded { font-size: 17px; margin-left: -2px; }
.wlp-btn:hover:not(:disabled) { background: var(--hover-bg, rgba(255, 255, 255, 0.06)); }
.wlp-btn:active:not(:disabled) { transform: translateY(1px); }
.wlp-btn:focus-visible { outline: 2px solid var(--accent-ring, rgba(183, 121, 92, 0.4)); outline-offset: 2px; }
.wlp-btn:disabled { opacity: 0.55; cursor: default; }
.wlp-btn-primary { background: var(--accent, #b7795c); border-color: var(--accent, #b7795c); color: var(--accent-contrast, #fff); }
.wlp-btn-primary:hover:not(:disabled) { background: var(--accent-strong, #975d46); border-color: var(--accent-strong, #975d46); }
.wlp-btn-quiet { color: var(--subheading-color, #aaa39b); }
.wlp-port { font-weight: 500; opacity: 0.8; margin-left: 2px; }

.wlp-list-head { display: flex; align-items: center; gap: 7px; padding: 9px 12px; font-size: 12.5px; font-weight: 600; color: var(--subheading-color, #aaa39b); }
.wlp-list-head .material-symbols-rounded { font-size: 16px; }
.wlp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px 8px 12px; border-top: 1px solid var(--term-line, var(--border-color)); }
.wlp-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; }
.wlp-row-main .ssh-cmd-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; }
.wlp-row-meta { font-size: 11.5px; color: var(--subheading-color, #aaa39b); }
.wlp-row-side { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.wlp-empty { font-size: 13px; color: var(--subheading-color, #aaa39b); line-height: 20px; }

/* ── the panel ─────────────────────────────────────────────────────────────── */
.wlp-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--dc-panel-w, clamp(420px, 47vw, 900px));
    display: flex;
    flex-direction: column;
    background: var(--chat-area-background, var(--primary-color, #1f1e1c));
    border-left: 1px solid var(--border-color, rgba(245, 238, 230, 0.1));
    color: var(--text-color, #eeeae5);
    transform: translateX(102%);
    opacity: 0.6;
    transition: transform var(--dc-anim, 0.34s cubic-bezier(.22, 1, .36, 1)), opacity var(--dc-anim, 0.34s ease);
    z-index: 9995;
    pointer-events: none;
    visibility: hidden;
}
body.wlp-open .wlp-panel { transform: translateX(0); opacity: 1; pointer-events: auto; visibility: visible; }
body.dc-resizing .wlp-panel { transition: none; }
body.dc-resizing .wlp-frame { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .wlp-panel { transition: none; } }

.wlp-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -4px;
    width: 10px;
    cursor: col-resize;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
}
.wlp-resizer > span { width: 3px; height: 44px; border-radius: 3px; background: transparent; transition: background 0.15s ease, height 0.15s ease; }
.wlp-resizer:hover > span, .wlp-resizer:focus-visible > span, body.dc-resizing .wlp-resizer > span { background: var(--accent, #b7795c); height: 72px; }
.wlp-resizer:focus-visible { outline: none; }

.wlp-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 52px;
    padding: 0 8px 0 14px;
    flex: none;
    border-bottom: 1px solid var(--border-color, rgba(245, 238, 230, 0.1));
}
.wlp-title { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.wlp-title-ic { display: inline-flex; color: #34d399; }
body.light_mode .wlp-title-ic { color: #047857; }
.wlp-title-ic .material-symbols-rounded { font-size: 20px; }
.wlp-title-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.wlp-title-txt b { font-size: 13.5px; font-weight: 650; font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlp-title-txt small { font-size: 11.5px; color: var(--subheading-color, #aaa39b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wlp-sizes { display: inline-flex; gap: 2px; padding: 2px; margin-right: 4px; border-radius: 9px; background: var(--hover-bg, rgba(245, 238, 230, 0.06)); }
.wlp-sizes .wlp-ic { width: 30px; height: 28px; border-radius: 7px; }
.wlp-sizes .wlp-ic[aria-checked="true"] { background: var(--secondary-color, rgba(245, 238, 230, 0.14)); color: var(--text-color); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }

.wlp-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--subheading-color, #aaa39b);
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
}
.wlp-ic .material-symbols-rounded { font-size: 19px; }
.wlp-ic:hover { background: var(--hover-bg-strong, rgba(245, 238, 230, 0.1)); color: var(--text-color); }
.wlp-ic:focus-visible { outline: 2px solid var(--accent-ring, rgba(183, 121, 92, 0.4)); outline-offset: 1px; }
.wlp-ic[aria-pressed="true"] { background: var(--accent-soft, rgba(183, 121, 92, 0.14)); color: var(--accent, #b7795c); }
.wlp-ic-stop:hover { color: #f87171; }

.wlp-addr { display: flex; align-items: center; gap: 6px; padding: 8px 10px; flex: none; border-bottom: 1px solid var(--border-color, rgba(245, 238, 230, 0.1)); }
.wlp-url {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 4px 0 4px;
    border: 1px solid var(--border-color, rgba(245, 238, 230, 0.12));
    border-radius: 10px;
    background: var(--light-dark-background, rgba(0, 0, 0, 0.18));
}
.wlp-url:focus-within { border-color: var(--accent, #b7795c); box-shadow: 0 0 0 3px var(--accent-ring, rgba(183, 121, 92, 0.25)); }
.wlp-mode {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 8px;
    flex: none;
    border: 0;
    border-radius: 7px;
    background: var(--hover-bg, rgba(245, 238, 230, 0.07));
    color: var(--subheading-color, #aaa39b);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.wlp-mode .material-symbols-rounded { font-size: 15px; }
.wlp-mode.is-direct { background: rgba(16, 185, 129, 0.12); color: #34d399; }
body.light_mode .wlp-mode.is-direct { color: #047857; }
.wlp-mode:focus-visible { outline: 2px solid var(--accent-ring, rgba(183, 121, 92, 0.4)); }
.wlp-host { flex: none; max-width: 42%; font-size: 12.5px; color: var(--subheading-color, #aaa39b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace; }
.wlp-url input {
    flex: 1;
    min-width: 40px;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-color, #eeeae5);
    font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
    font-size: 12.5px;
    padding: 0 6px 0 0;
}

.wlp-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    justify-content: center;
    overflow: auto;
    background: color-mix(in srgb, var(--chat-area-background, #1f1e1c) 88%, #000 12%);
}
body.light_mode .wlp-stage { background: color-mix(in srgb, var(--chat-area-background, #fff) 94%, #000 6%); }
.wlp-frame-wrap {
    --wlp-w: 100%;
    width: var(--wlp-w);
    max-width: 100%;
    height: 100%;
    flex: none;
    transition: width 0.24s cubic-bezier(.22, 1, .36, 1);
}
.wlp-frame-wrap[data-size="phone"], .wlp-frame-wrap[data-size="tablet"] {
    height: calc(100% - 28px);
    margin: 14px 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-color, rgba(245, 238, 230, 0.12));
    box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.5);
}
.wlp-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }

.wlp-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; }
.wlp-msg[hidden] { display: none; }
.wlp-msg-card { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 360px; text-align: center; }
.wlp-msg-card > .material-symbols-rounded { font-size: 30px; color: var(--subheading-color, #aaa39b); }
.wlp-msg-card b { font-size: 14.5px; font-weight: 650; }
.wlp-msg-card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--subheading-color, #aaa39b); }
.wlp-spin {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border-color, rgba(245, 238, 230, 0.15));
    border-top-color: var(--accent, #b7795c);
    animation: wlp-spin 0.8s linear infinite;
}
@keyframes wlp-spin { to { transform: rotate(360deg); } }

.wlp-logs { flex: none; height: 34%; min-height: 140px; display: flex; flex-direction: column; border-top: 1px solid var(--border-color, rgba(245, 238, 230, 0.1)); background: color-mix(in srgb, var(--primary-color, #1f1e1c) 72%, #000 28%); }
body.light_mode .wlp-logs { background: color-mix(in srgb, var(--primary-color, #fff) 97%, #000 3%); }
.wlp-logs[hidden] { display: none; }
.wlp-logs-head { display: flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 12px; font-weight: 600; color: var(--subheading-color, #aaa39b); }
.wlp-logs-head .material-symbols-rounded { font-size: 15px; }
.wlp-logs-head small { margin-left: auto; font-weight: 500; }
.wlp-logs pre { flex: 1; margin: 0; padding: 4px 12px 12px; overflow: auto; font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace; font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-color, #eeeae5); }

/* ── three columns on desktop, full screen on phones (as the Canvas) ─────── */
@media (min-width: 1001px) {
    body.wlp-open .nav-menu ~ .chat-container,
    body.wlp-open .nav-menu ~ .typing-area {
        width: calc(100% - var(--dc-sidebar-current-w, 56px) - var(--dc-panel-w, 47vw)) !important;
        margin-left: var(--dc-sidebar-current-w, 56px) !important;
        transition:
            width var(--sidebar-motion-duration, 320ms) var(--sidebar-motion-ease, ease),
            margin-left var(--sidebar-motion-duration, 320ms) var(--sidebar-motion-ease, ease) !important;
    }
    body.wlp-open .chat-list { width: min(92%, 760px); max-width: 760px; }
    body.wlp-open .nav { right: var(--dc-panel-w, 47vw); transition: right var(--dc-anim, 0.34s ease); }
}
@media (max-width: 1000px) {
    .wlp-panel { width: 100%; border-left: 0; }
    .wlp-resizer { display: none; }
    body.wlp-open { overflow: hidden; }
    body.wlp-open .nav { display: none; }
    body.wlp-open .typing-area { display: none; }
}
@media (max-width: 560px) {
    .wlp-bar { padding: 0 4px 0 10px; }
    .wlp-sizes { display: none; }
    .wlp-host { display: none; }
    .wlp-foot .wlp-acts { margin-left: 0; width: 100%; }
    .wlp-foot .wlp-btn-primary { flex: 1; }
}