/* Theme tokens copied from the app (apps/linows/src/css/theme.css). */
.launcher-window {
    --bg-tint: rgba(30, 30, 46, 0.85);
    --font-color: #dce0f5;
    --font-secondary: #c8cee0;
    --font-muted: rgba(180, 187, 210, 0.82);
    --border-color: rgba(88, 91, 112, 0.28);
    --border-thickness: 1px;
    --panel-fill: rgba(49, 50, 68, 0.5);
    --control-fill: rgba(69, 71, 90, 0.5);
    --divider-color: rgba(88, 91, 112, 0.32);
    --selection-fill: rgba(88, 91, 112, 0.5);
    --accent-color: #89b4fa;
    --on-accent-color: #1e1e2e;
    --color-success: #a6e3a1;
    --color-warning: #fab387;
    --color-info: #89b4fa;
    --font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
    --font-mono: "SF Mono", "Cascadia Code", "JetBrains Mono", monospace;
    --font-size: 12px;
    --content-padding: 14px;
    --row-height: 38px;
    --row-spacing: 4px;
    --icon-size: 22px;
    --corner-radius: 16px;
    --blur-radius: 30px;
    --inner-gap: 0px;
    --control-radius: 8px;
    --input-padding-x: 12px;
    --input-padding-y: 8px;
}
.launcher-window[data-theme="tokyo-night"] {
    --bg-tint: rgba(26, 27, 38, 0.86);
    --font-color: rgba(214, 222, 245, 0.98);
    --font-secondary: rgba(189, 204, 230, 1);
    --font-muted: rgba(143, 163, 199, 0.78);
    --panel-fill: rgba(15, 23, 46, 0.5);
    --control-fill: rgba(36, 43, 71, 0.5);
    --divider-color: rgba(102, 102, 112, 0.32);
    --selection-fill: rgba(97, 120, 184, 0.42);
    --accent-color: rgba(133, 184, 250, 1);
    --on-accent-color: #16161e;
    --border-color: rgba(169, 177, 214, 0.14);
}
.launcher-window[data-theme="rose-pine"] {
    --bg-tint: rgba(25, 23, 36, 0.86);
    --font-color: rgba(242, 237, 232, 0.98);
    --font-secondary: rgba(224, 214, 207, 1);
    --font-muted: rgba(189, 178, 168, 0.78);
    --panel-fill: rgba(33, 28, 43, 0.5);
    --control-fill: rgba(51, 46, 64, 0.5);
    --divider-color: rgba(102, 102, 112, 0.32);
    --selection-fill: rgba(148, 133, 168, 0.42);
    --accent-color: rgba(196, 167, 231, 1);
    --on-accent-color: #191724;
    --color-success: rgba(156, 207, 216, 1);
    --color-warning: rgba(246, 193, 119, 1);
    --border-color: rgba(224, 222, 244, 0.14);
}
.launcher-window[data-theme="gruvbox"] {
    --bg-tint: rgba(40, 40, 40, 0.88);
    --font-color: rgba(237, 227, 201, 0.98);
    --font-secondary: rgba(222, 204, 163, 1);
    --font-muted: rgba(184, 163, 122, 0.78);
    --panel-fill: rgba(36, 28, 23, 0.5);
    --control-fill: rgba(54, 43, 33, 0.5);
    --divider-color: rgba(102, 102, 112, 0.32);
    --selection-fill: rgba(189, 138, 66, 0.42);
    --accent-color: rgba(219, 184, 102, 1);
    --on-accent-color: #282828;
    --color-success: rgba(184, 187, 38, 1);
    --color-warning: rgba(254, 128, 25, 1);
    --border-color: rgba(235, 219, 178, 0.14);
}
.launcher-window[data-theme="dracula"] {
    --bg-tint: rgba(40, 42, 54, 0.86);
    --font-color: rgba(248, 248, 250, 0.98);
    --font-secondary: rgba(235, 222, 250, 1);
    --font-muted: rgba(196, 189, 217, 0.78);
    --panel-fill: rgba(28, 25, 46, 0.5);
    --control-fill: rgba(54, 51, 77, 0.5);
    --divider-color: rgba(102, 102, 112, 0.32);
    --selection-fill: rgba(158, 133, 201, 0.42);
    --accent-color: rgba(189, 147, 249, 1);
    --on-accent-color: #282a36;
    --color-success: rgba(80, 250, 123, 1);
    --color-warning: rgba(255, 184, 108, 1);
    --border-color: rgba(248, 248, 242, 0.14);
}
.launcher-window[data-theme="kanagawa"] {
    --bg-tint: rgba(22, 22, 29, 0.88);
    --font-color: rgba(222, 219, 201, 0.98);
    --font-secondary: rgba(204, 199, 168, 1);
    --font-muted: rgba(168, 161, 128, 0.78);
    --panel-fill: rgba(25, 31, 36, 0.5);
    --control-fill: rgba(46, 51, 61, 0.5);
    --divider-color: rgba(102, 102, 112, 0.32);
    --selection-fill: rgba(128, 122, 97, 0.42);
    --accent-color: rgba(126, 156, 216, 1);
    --on-accent-color: #16161d;
    --color-success: rgba(152, 187, 108, 1);
    --color-warning: rgba(255, 160, 102, 1);
    --border-color: rgba(220, 215, 186, 0.14);
}

* {
    box-sizing: border-box;
}
html,
body {
    margin: 0;
    height: 100%;
}
body {
    font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
    /* Quiet wallpaper so the frosted panel reads as glass. */
    background:
        radial-gradient(120% 90% at 15% 12%, #4a3f7a 0%, transparent 55%),
        radial-gradient(130% 100% at 85% 20%, #2a5470 0%, transparent 50%),
        radial-gradient(140% 120% at 50% 100%, #1a2140 0%, transparent 60%),
        linear-gradient(160deg, #14131f 0%, #191a2b 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 18px 26px;
    gap: 14px;
    overflow: hidden;
}

/* Theme picker (demo chrome, not part of the app) */
.themebar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.themebar button {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72);
    font: inherit;
    font-size: 12px;
    padding: 5px 11px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.themebar button:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.themebar button.active {
    background: rgba(255, 255, 255, 0.92);
    color: #16161e;
    border-color: transparent;
}

/* --- Launcher window (mirrors layout.css .launcher-window) --- */
.launcher-window {
    /* Exact real proportions: BASE_W 860 x BASE_H 600 (main.rs),
     * so width/height ratio and text scale match the app. Empty query
     * drops to .resting (just the search bar). */
    width: min(860px, 100%);
    aspect-ratio: 860 / 600;
    display: flex;
    flex-direction: column;
    background: var(--bg-tint);
    border: var(--border-thickness) solid var(--border-color);
    border-radius: var(--corner-radius);
    overflow: hidden;
    font-family: var(--font-family);
    font-size: var(--font-size);
    color: var(--font-color);
    -webkit-backdrop-filter: blur(var(--blur-radius, 30px)) saturate(1.4);
    backdrop-filter: blur(var(--blur-radius, 30px)) saturate(1.4);
    box-shadow:
        0 24px 60px -18px rgba(0, 0, 0, 0.65),
        0 2px 8px rgba(0, 0, 0, 0.3);
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

/* Resting: empty query drops the whole window chrome (linows
 * .bar-free) so only the search bar floats on the desktop. */
.launcher-window.resting {
    aspect-ratio: auto;
    height: auto;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    overflow: visible;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.launcher-window.resting .results-row,
.launcher-window.resting .hint-bar {
    display: none;
}
/* The lone bar becomes a self-contained frosted pill (linows
 * .top-bar.pane-tile in .bar-free): control-fill stacked over the tint,
 * its own blur, border, and the same 0 3px 7px tile shadow. */
.launcher-window.resting .top-bar {
    margin: var(--content-padding);
    background-color: transparent;
    background-image:
        linear-gradient(var(--control-fill), var(--control-fill)),
        linear-gradient(var(--bg-tint), var(--bg-tint));
    border: var(--border-thickness) solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.25);
    -webkit-backdrop-filter: blur(var(--blur-radius, 30px)) saturate(1.4);
    backdrop-filter: blur(var(--blur-radius, 30px)) saturate(1.4);
}

.top-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin: var(--content-padding) var(--content-padding) 12px;
    padding: var(--input-padding-y) var(--input-padding-x);
    background-color: var(--control-fill);
    border-radius: 10px;
}
.search-bar {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.search-icon {
    width: 16px;
    height: 16px;
    color: var(--font-muted);
    flex-shrink: 0;
}
#query {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: calc(var(--font-size) + 1px);
    font-weight: 500;
    color: var(--font-color);
    caret-color: var(--accent-color);
}
#query::placeholder {
    color: var(--font-muted);
}

/* Results row: list + preview (mirrors layout.css .results-row).
 * flex:1 makes it fill the fixed-height window; columns scroll
 * internally instead of resizing the window. */
.results-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 1;
    min-height: 0;
}
.results-row.one-col {
    grid-template-columns: 1fr;
}
.results-row.one-col .preview-col {
    display: none;
}

.results-list {
    min-width: 0;
    overflow-y: auto;
    padding: var(--row-spacing) 0;
    scrollbar-width: none;
}
.results-list::-webkit-scrollbar {
    display: none;
}

.result-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px var(--input-padding-x);
    min-height: var(--row-height);
    cursor: default;
    border-radius: var(--control-radius);
    margin: 0 var(--content-padding) 4px;
    transition: background 120ms ease-out;
}
.result-row::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: -2px;
    height: 1px;
    background: var(--divider-color);
    opacity: 0.8;
}
.result-row:last-child::after {
    display: none;
}
.result-row.selected {
    background: var(--selection-fill);
}
.result-icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
}
.result-icon svg {
    width: 72%;
    height: 72%;
}
.result-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.result-title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--font-color);
}
.result-path {
    font-size: calc(var(--font-size) - 2px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--accent-color);
    opacity: 0.8;
}

.empty-state {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 24px;
    text-align: center;
    color: var(--font-muted);
    font-size: calc(var(--font-size) - 1px);
    line-height: 1.5;
}

/* Preview panel (mirrors preview.css) */
.preview-col {
    border-left: 1px solid var(--divider-color);
    padding: var(--content-padding);
    overflow-y: auto;
    min-width: 0;
    scrollbar-width: none;
}
.preview-col::-webkit-scrollbar {
    display: none;
}
.preview-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.preview-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 5px rgba(0, 0, 0, 0.3);
}
.preview-icon svg {
    width: 56%;
    height: 56%;
}
.preview-header-text {
    min-width: 0;
}
.preview-title {
    font-weight: 600;
    word-break: break-word;
    color: var(--font-color);
    margin-bottom: 4px;
}
.preview-badge {
    display: inline-block;
    font-size: calc(var(--font-size) - 4px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--panel-fill);
}
.preview-badge.kind-app {
    color: var(--accent-color);
}
.preview-badge.kind-file {
    color: var(--color-success);
}
.preview-badge.kind-folder {
    color: var(--color-warning);
}
.preview-badge.kind-calc {
    color: var(--color-success);
}
.preview-info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px 0;
    gap: 12px;
}
.preview-info-label {
    font-size: calc(var(--font-size) - 1px);
    color: var(--font-muted);
    flex-shrink: 0;
}
.preview-info-value {
    font-size: calc(var(--font-size) - 1px);
    color: var(--font-secondary);
    text-align: right;
    word-break: break-all;
    min-width: 0;
}
.preview-value-big {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 700;
    color: var(--font-color);
    margin: 6px 0 14px;
}

/* Hint bar (mirrors layout.css .hint-bar) */
.hint-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px var(--content-padding);
    flex-shrink: 0;
}
.hint-bar span {
    font-size: calc(var(--font-size) - 1px);
    color: var(--font-muted);
}
.hint-sep {
    color: var(--accent-color);
    font-weight: 700;
    font-size: 1.25em;
    line-height: 1;
    vertical-align: middle;
    margin: 0 3px;
}
.hint-bar-copy {
    font-size: 10px;
    color: var(--font-muted);
    opacity: 0.6;
    flex-shrink: 0;
}

/* Demo scaffolding beneath the window */
.try {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    max-width: 640px;
}
.try .label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}
.try button {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.78);
    font-family: "SF Mono", "Cascadia Code", "JetBrains Mono", monospace;
    font-size: 12px;
    padding: 4px 9px;
    border-radius: 6px;
    cursor: pointer;
}
.try button:hover {
    border-color: rgba(137, 180, 250, 0.7);
    color: #fff;
}

/* Simulated "open" toast */
.toast {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, 20px);
    background: rgba(20, 20, 30, 0.94);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}
.toast b {
    color: var(--accent-color, #89b4fa);
}

/* ===================================================================
   Command mode (mirrors apps/linows/src/css/components/commands.css)
   =================================================================== */

/* View switching: search-view (column) and command-view (row) each fill
   the fixed launcher window. */
.view {
    display: flex;
    flex: 1;
    min-height: 0;
}
.view[hidden] {
    display: none;
}
#search-view {
    flex-direction: column;
}

/* Sidebar */
.cmd-sidebar {
    width: 180px;
    flex-shrink: 0;
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cmd-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 6px;
}
.cmd-row-active {
    background: var(--selection-fill);
}
.cmd-row-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
}
.cmd-row-icon svg {
    width: 16px;
    height: 16px;
}
.cmd-row-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.cmd-row-label {
    font-size: calc(var(--font-size) - 1px);
    font-weight: 600;
    color: var(--font-color);
}
.cmd-row-shortcut {
    font-weight: 400;
    color: var(--font-secondary);
    font-size: calc(var(--font-size) - 2px);
}
.cmd-row-detail {
    font-size: calc(var(--font-size) - 2px);
    color: var(--font-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmd-divider {
    width: 1px;
    background: var(--divider-color);
    margin: 2px 0;
    flex-shrink: 0;
}

.cmd-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.cmd-panel {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.cmd-panel[hidden] {
    display: none !important;
}

/* Input / header bars */
.cmd-input-bar,
.cmd-header-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--control-fill);
    border-radius: 10px;
    margin: 8px 18px 0;
}
.cmd-input-bar-icon {
    color: var(--accent-color);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.cmd-input-bar-icon svg {
    width: 14px;
    height: 14px;
}
.cmd-input-bar input {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size);
    color: var(--font-color);
    caret-color: var(--accent-color);
    background: none;
    border: none;
    outline: none;
    font-family: inherit;
}
.cmd-input-bar input::placeholder {
    color: var(--font-muted);
}
.cmd-header-bar .cmd-subtitle {
    flex: 1;
    font-size: var(--font-size);
    color: var(--font-secondary);
}
.cmd-pill {
    font-family: var(--font-mono);
    font-size: calc(var(--font-size) - 1px);
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--selection-fill);
    color: var(--font-color);
    flex-shrink: 0;
}

/* Content / feedback */
.cmd-content {
    flex: 1;
    padding: 10px;
    margin: 0 8px 8px;
    overflow-y: auto;
    scrollbar-width: none;
}
.cmd-content::-webkit-scrollbar {
    display: none;
}
.cmd-feedback {
    font-family: var(--font-mono);
    font-size: calc(var(--font-size) + 4px);
    font-weight: 600;
    color: var(--font-color);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
}
.cmd-feedback-error {
    color: var(--color-danger);
}
.cmd-feedback-muted {
    color: var(--font-muted);
    font-weight: 500;
}

/* Bottom hint line */
.cmd-hint {
    padding: 6px 18px 10px;
    font-size: calc(var(--font-size) - 1px);
    color: var(--font-muted);
    flex-shrink: 0;
}
.cmd-hint .hint-sep {
    color: var(--accent-color);
    font-weight: 700;
    font-size: 1.25em;
    vertical-align: middle;
    margin: 0 3px;
}

/* Process list (kill) */
.cmd-process-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.cmd-proc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size);
}
.cmd-proc-row-active {
    background: var(--selection-fill);
}
.cmd-proc-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.cmd-proc-icon svg {
    width: 68%;
    height: 68%;
}
.cmd-proc-name {
    flex: 1;
    font-weight: 600;
    color: var(--font-color);
}
.cmd-proc-pid {
    font-family: var(--font-mono);
    font-size: calc(var(--font-size) - 1px);
    color: var(--font-secondary);
}
.cmd-proc-enter {
    color: var(--accent-color);
    font-weight: 600;
    font-size: calc(var(--font-size) - 2px);
}

/* Kill confirm bar */
.cmd-confirm-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    margin-top: auto;
    border-top: 1px solid var(--divider-color);
    flex-shrink: 0;
}
.cmd-confirm-bar[hidden] {
    display: none;
}
.cmd-confirm-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cmd-confirm-title {
    font-size: var(--font-size);
    font-weight: 600;
    color: var(--font-color);
}
.cmd-confirm-pid {
    font-family: var(--font-mono);
    font-size: calc(var(--font-size) - 2px);
    color: var(--font-secondary);
}
.cmd-confirm-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cmd-confirm-yes {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: calc(var(--font-size) - 1px);
    padding: 4px 12px;
    border-radius: 6px;
    background: var(--color-danger);
    color: #fff;
}
.cmd-confirm-no {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: calc(var(--font-size) - 1px);
    color: var(--font-secondary);
}

/* System info table */
.cmd-sys-table {
    display: flex;
    flex-direction: column;
}
.cmd-sys-row {
    display: flex;
    align-items: baseline;
    padding: 3px 0;
    font-size: var(--font-size);
}
.cmd-sys-label {
    width: 96px;
    flex-shrink: 0;
    color: var(--font-secondary);
    font-size: calc(var(--font-size) - 1px);
}
.cmd-sys-value {
    color: var(--font-color);
    font-weight: 600;
    font-family: var(--font-mono);
}

/* Todo */
.cmd-todo-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 18px 0;
}
.cmd-todo-count {
    font-size: calc(var(--font-size) - 1px);
    color: var(--font-secondary);
}
.cmd-todo-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cmd-todo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
}
.cmd-todo-item:hover {
    background: var(--selection-fill);
}
.cmd-todo-check {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 5px;
    border: 1.5px solid var(--font-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-accent-color);
}
.cmd-todo-item.done .cmd-todo-check {
    background: var(--accent-color);
    border-color: var(--accent-color);
}
.cmd-todo-check svg {
    width: 12px;
    height: 12px;
}
.cmd-todo-label {
    flex: 1;
    color: var(--font-color);
}
.cmd-todo-item.done .cmd-todo-label {
    color: var(--font-muted);
    text-decoration: line-through;
}

/* Pomo */
.cmd-pomo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 0 6px;
    gap: 8px;
}
.cmd-pomo-session-name {
    font-size: var(--font-size);
    font-weight: 600;
    color: var(--font-color);
    min-height: 1.2em;
}
.cmd-pomo-ring {
    width: 172px;
    height: 172px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cmd-pomo-ring-inner {
    width: 138px;
    height: 138px;
    border-radius: 50%;
    background: var(--bg-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 34px;
    font-weight: 700;
    color: var(--font-color);
}
.cmd-pomo-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 12px 10px;
}
.cmd-pomo-btn {
    font-size: calc(var(--font-size) - 1px);
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    color: #fff;
    background: var(--accent-color);
    font-family: inherit;
}
.cmd-pomo-btn:hover {
    filter: brightness(1.1);
}
.cmd-pomo-btn.pomo-running {
    background: var(--color-warning);
    color: #1a1a1a;
}
.cmd-pomo-btn-reset {
    background: var(--control-fill);
    color: var(--font-color);
}

/* ===================================================================
   Settings view (mirrors apps/linows/src/css/components/settings.css)
   =================================================================== */
.hint-bar-link {
    color: var(--font-muted);
    text-decoration: none;
    cursor: pointer;
}
.hint-bar-link:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.settings-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.settings-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 8px;
    flex-shrink: 0;
}
.settings-title {
    font-size: calc(var(--font-size) + 2px);
    font-weight: 600;
    color: var(--font-color);
    margin-right: auto;
}
.settings-header-hint {
    font-size: calc(var(--font-size) - 1px);
    color: var(--font-muted);
}
.settings-header-btn {
    font-size: calc(var(--font-size) - 1px);
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--divider-color);
    background: var(--control-fill);
    color: var(--font-color);
    cursor: pointer;
    font-family: inherit;
}
.settings-header-btn:hover {
    background: var(--selection-fill);
}
.settings-tabs {
    display: flex;
    gap: 4px;
    padding: 0 14px 6px;
    flex-shrink: 0;
}
.settings-tab {
    flex: 1;
    text-align: center;
    font-size: calc(var(--font-size) - 1px);
    font-weight: 500;
    padding: 7px 0;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.06);
    color: var(--font-secondary);
    font-family: inherit;
}
.settings-tab-active {
    color: var(--font-color);
    background: rgba(255, 255, 255, 0.16);
}
.settings-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 14px 14px;
    scrollbar-width: none;
}
.settings-body::-webkit-scrollbar {
    display: none;
}
.settings-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    padding: 10px 0 4px;
    font-size: calc(var(--font-size) - 1px);
    font-weight: 600;
    color: var(--font-secondary);
}
.settings-section {
    display: flex;
    flex-direction: column;
    padding: 0 0 2px;
}
.settings-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}
.settings-label {
    width: 140px;
    flex-shrink: 0;
    font-size: calc(var(--font-size) - 1px);
    color: var(--font-secondary);
}
.settings-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 3px;
    border-radius: 2px;
    background: var(--divider-color);
    outline: none;
    min-width: 0;
}
.settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--accent-color);
    cursor: pointer;
}
.settings-slider::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: none;
    border-radius: 50%;
    background: var(--accent-color);
    cursor: pointer;
}
.settings-slider-value {
    font-family: var(--font-mono);
    font-size: calc(var(--font-size) - 1px);
    color: var(--font-muted);
    min-width: 46px;
    text-align: right;
    flex-shrink: 0;
}
.settings-color {
    width: 36px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--divider-color);
    border-radius: 6px;
    background: none;
    cursor: pointer;
}
.settings-color::-webkit-color-swatch-wrapper {
    padding: 2px;
}
.settings-color::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}
/* Theme dropdown (mirrors the app's .settings-dropdown) */
.settings-dropdown {
    position: relative;
    margin-left: 4px;
}
.settings-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: calc(var(--font-size) - 1px);
    font-family: inherit;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--divider-color);
    background: rgba(255, 255, 255, 0.06);
    color: var(--font-color);
    cursor: pointer;
    outline: none;
}
.settings-dropdown-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}
.settings-dropdown-arrow {
    margin-left: auto;
    font-size: calc(var(--font-size) - 3px);
    color: var(--font-muted);
}
.settings-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    background: #2a2a3a;
    border: 1px solid var(--divider-color);
    border-radius: 8px;
    padding: 4px 0;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.settings-dropdown-menu[hidden] {
    display: none;
}
.settings-dropdown-item {
    padding: 6px 12px;
    font-size: calc(var(--font-size) - 1px);
    color: var(--font-color);
    cursor: pointer;
    white-space: nowrap;
}
.settings-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
}
.settings-dropdown-item.settings-dropdown-active {
    color: var(--accent-color);
    font-weight: 600;
}

.settings-text-input {
    flex: 1;
    min-width: 0;
    font-size: calc(var(--font-size) - 1px);
    color: var(--font-color);
    background: var(--control-fill);
    border: 1px solid var(--divider-color);
    border-radius: 6px;
    padding: 5px 8px;
    outline: none;
    font-family: inherit;
}
.settings-note {
    margin-top: 12px;
    font-size: calc(var(--font-size) - 2px);
    color: var(--font-muted);
    font-style: italic;
}

/* Demo scaffolding: prominent "this is a simplified demo" banner, always
   pinned to the bottom of the demo viewport (auto top margin absorbs the
   free space below the resting search bar). */
.demo-note {
    margin-top: auto;
    max-width: 600px;
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 10px 4px 0;
}
.demo-note-badge {
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
.demo-note-text {
    font-size: 12px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.5);
}
.demo-note-text strong {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 600;
}
.demo-note a {
    color: rgba(137, 180, 250, 0.85);
    text-decoration: none;
    white-space: nowrap;
}
.demo-note a:hover {
    text-decoration: underline;
}

/* ===================================================================
   Preview content (mirrors apps/linows/src/css/components/preview.css)
   =================================================================== */
.preview-badge.kind-setting {
    color: var(--color-info);
}
.preview-badge.kind-web {
    color: var(--accent-color);
}

.preview-code {
    margin-top: 12px;
    background: var(--control-fill);
    border-radius: 8px;
    overflow: hidden;
}
.preview-code-text {
    font-family: var(--font-mono);
    font-size: calc(var(--font-size) - 1px);
    color: var(--font-secondary);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    padding: 10px;
    line-height: 1.5;
    user-select: text;
}

.preview-image {
    margin-top: 12px;
    text-align: center;
}
.preview-image img {
    max-width: 100%;
    max-height: 160px;
    border-radius: 8px;
    object-fit: contain;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.preview-folder {
    margin-top: 12px;
}
.preview-folder-list {
    background: var(--control-fill);
    border-radius: 8px;
    padding: 4px;
}
.preview-folder-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: calc(var(--font-size) - 1px);
    color: var(--font-color);
}
.preview-folder-item:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}
.preview-folder-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
}
.preview-folder-icon svg {
    width: 100%;
    height: 100%;
}
.preview-folder-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===================================================================
   Floating inner-gap layout (mirrors linows .floating / .bar-free)
   When Inner Gap > 0 the window chrome drops and the bar, results list
   and preview become separate frosted tiles with transparent gaps.
   =================================================================== */
.launcher-window.floating {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* Shared frosted-tile recipe: control-fill over the tint, own blur + border. */
.launcher-window.floating .top-bar,
.launcher-window.floating .results-list,
.launcher-window.floating .preview-col {
    background-color: transparent;
    background-image:
        linear-gradient(var(--control-fill), var(--control-fill)),
        linear-gradient(var(--bg-tint), var(--bg-tint));
    border: var(--border-thickness) solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.25);
    -webkit-backdrop-filter: blur(var(--blur-radius, 30px)) saturate(1.4);
    backdrop-filter: blur(var(--blur-radius, 30px)) saturate(1.4);
}
/* Uniform gaps: bar-to-columns and column-to-column both equal --inner-gap;
   an outer content-padding inset keeps tiles off the (invisible) window edge. */
.launcher-window.floating .top-bar {
    margin-bottom: var(--inner-gap);
}
.launcher-window.floating .results-row {
    margin: 0 var(--content-padding) var(--content-padding);
    column-gap: var(--inner-gap);
}
.launcher-window.floating .results-list {
    padding: var(--row-spacing) 0;
}
/* The column divider belongs to the framed layout; tiles stand on their own. */
.launcher-window.floating .preview-col {
    border-left: var(--border-thickness) solid var(--border-color);
}

/* ===================================================================
   Running apps strip (mirrors running-apps.css) + settings toggle
   =================================================================== */
.running-apps-strip {
    display: flex;
    min-width: 0;
    max-width: 50%;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-right: 4px;
    overflow: hidden;
}
.running-apps-strip[hidden] {
    display: none;
}
.running-app-item {
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 120ms ease;
}
.running-app-item:hover {
    transform: scale(1.12);
}
.running-app-icon {
    width: 20px;
    height: 20px;
    border-radius: 24%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0.9;
    color: #fff;
}
.running-app-icon svg {
    width: 62%;
    height: 62%;
}
.running-app-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 12px;
    height: 12px;
    line-height: 12px;
    text-align: center;
    font-size: 8px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: #fff;
    background: rgba(0, 0, 0, 0.72);
    border: 0.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 0 2px;
    pointer-events: none;
}

/* Settings toggle (Running Apps) */
.settings-running-label {
    margin-left: 24px;
    font-weight: 400;
    color: var(--font-secondary);
}
.settings-toggle {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
}
.settings-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.settings-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: var(--divider-color);
    transition: background 0.2s;
}
.settings-toggle-track::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--font-color);
    transition: transform 0.2s;
}
.settings-toggle input:checked + .settings-toggle-track {
    background: var(--accent-color);
}
.settings-toggle input:checked + .settings-toggle-track::after {
    transform: translateX(16px);
}

/* Advanced / Shortcuts tabs: present but not wired in the demo. Keep the
   real hover, but they don't switch - a tooltip explains why. */
.settings-tab-off {
    position: relative;
    color: var(--font-muted);
    cursor: default;
}
.settings-tab-off::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    white-space: nowrap;
    font-size: calc(var(--font-size) - 2px);
    font-weight: 400;
    color: var(--font-color);
    background: #2a2a3a;
    border: 1px solid var(--divider-color);
    padding: 5px 10px;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -3px);
    transition: opacity 120ms ease, transform 120ms ease;
    pointer-events: none;
    z-index: 200;
}
.settings-tab-off::before {
    content: "";
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    width: 8px;
    height: 8px;
    background: #2a2a3a;
    border-left: 1px solid var(--divider-color);
    border-top: 1px solid var(--divider-color);
    transform: translate(-50%, 0) rotate(45deg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease;
    pointer-events: none;
    z-index: 200;
}
.settings-tab-off:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.settings-tab-off:hover::before {
    opacity: 1;
    visibility: visible;
}