/* ==========================================================================
   Mac OS X Tiger (10.4) desktop — main page skin
   Self-contained. Does not share tokens with the rest of the site (styles.css).
   ========================================================================== */

:root {
    --menubar-h: 22px;
    --dock-h: 70px;
    --aqua-blue: #3b7dde;
    --aqua-blue-dark: #1c5bc4;
    --window-radius: 6px;
    --font-mac: 'Lucida Grande', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
    --text: #1d1d1d;
    --selection: #3b7dde;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: var(--font-mac);
    font-size: 13px;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    user-select: none;
    cursor: default;
}

/* --------------------------------------------------------------------------
   Desktop & the Tiger "Aqua Blue" wallpaper (recreated with CSS gradients)
   -------------------------------------------------------------------------- */
#desktop {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 78% -10%, rgba(150, 210, 255, 0.55) 0%, rgba(150, 210, 255, 0) 45%),
        radial-gradient(90% 70% at 12% 110%, rgba(20, 70, 160, 0.55) 0%, rgba(20, 70, 160, 0) 55%),
        radial-gradient(140% 120% at 30% 20%, rgba(90, 170, 240, 0.5) 0%, rgba(90, 170, 240, 0) 50%),
        linear-gradient(160deg, #1b54b0 0%, #2f73cf 30%, #3f8ee0 52%, #2566c2 78%, #173f94 100%);
}

/* the signature Tiger light "swoosh" arcs */
#desktop::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 120% at 90% 0%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 38%),
        radial-gradient(80% 60% at 110% 60%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 40%),
        radial-gradient(70% 80% at -10% 90%, rgba(10,40,110,0.4) 0%, rgba(10,40,110,0) 45%);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Menu bar
   -------------------------------------------------------------------------- */
#menubar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--menubar-h);
    display: flex;
    align-items: stretch;
    z-index: 100000;
    background: linear-gradient(to bottom, #fefefe 0%, #f3f3f3 55%, #e6e6e6 100%);
    border-bottom: 1px solid #9d9d9d;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
    padding: 0 6px;
    font-size: 13px;
}

.menu-left { display: flex; align-items: stretch; }
.menu-right { margin-left: auto; display: flex; align-items: stretch; }

.menu-item {
    display: flex;
    align-items: center;
    padding: 0 9px;
    height: 100%;
    cursor: default;
    border-radius: 0;
    color: #111;
    white-space: nowrap;
}
.menu-item.app-name { font-weight: 700; }
.menu-item:hover,
.menu-item.open { background: var(--aqua-blue); color: #fff; }

.menu-apple { padding: 0 10px; font-size: 15px; }
.menu-apple svg { width: 14px; height: 16px; display: block; }
.menu-apple:hover svg path,
.menu-apple.open svg path { fill: #fff; }

.menu-clock { font-size: 12px; padding: 0 10px; }
.menu-spotlight { padding: 0 8px; display: flex; align-items: center; }
.menu-spotlight svg { width: 14px; height: 14px; }

/* Dropdown menus */
.menu-dropdown {
    position: fixed;
    top: var(--menubar-h);
    min-width: 200px;
    background: rgba(255,255,255,0.96);
    border: 1px solid #9b9b9b;
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.28);
    padding: 4px;
    z-index: 100001;
    display: none;
    backdrop-filter: blur(8px);
}
.menu-dropdown.show { display: block; }
.menu-dropdown-item {
    padding: 4px 22px 4px 20px;
    border-radius: 4px;
    font-size: 13px;
    white-space: nowrap;
    cursor: default;
}
.menu-dropdown-item:hover { background: var(--aqua-blue); color: #fff; }
.menu-dropdown-item.disabled { color: #b3b3b3; }
.menu-dropdown-item.disabled:hover { background: transparent; color: #b3b3b3; }
.menu-dropdown-sep { height: 1px; background: #d3d3d3; margin: 4px 8px; }

/* --------------------------------------------------------------------------
   Desktop icons
   -------------------------------------------------------------------------- */
.desktop-icons {
    position: absolute;
    top: calc(var(--menubar-h) + 12px);
    right: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    z-index: 1;
}
.desktop-icon {
    width: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px;
    border-radius: 5px;
    cursor: default;
}
.desktop-icon .icon-glyph { width: 48px; height: 48px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); }
.desktop-icon .icon-label {
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 1.2;
    padding: 0 3px;
    border-radius: 3px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    max-width: 84px;
    word-wrap: break-word;
}
.desktop-icon.selected { background: rgba(40, 100, 200, 0.32); }
.desktop-icon.selected .icon-label { background: var(--selection); text-shadow: none; }

/* --------------------------------------------------------------------------
   Windows
   -------------------------------------------------------------------------- */
.win {
    position: absolute;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 160px;
    border-radius: var(--window-radius) var(--window-radius) 5px 5px;
    box-shadow: 0 16px 44px rgba(0,0,0,0.40), 0 2px 8px rgba(0,0,0,0.28);
    background: #ededed;
    overflow: hidden;
}
.win.inactive { box-shadow: 0 10px 30px rgba(0,0,0,0.28); }

/* Title bars — pinstripe (default) */
.win-titlebar {
    height: 22px;
    flex: 0 0 22px;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 8px;
    background:
        repeating-linear-gradient(to bottom, rgba(0,0,0,0.035) 0 1px, rgba(255,255,255,0) 1px 2px),
        linear-gradient(to bottom, #f6f6f6 0%, #e3e3e3 100%);
    border-bottom: 1px solid #b9b9b9;
    cursor: default;
}
.win.inactive .win-titlebar {
    background: linear-gradient(to bottom, #f2f2f2 0%, #e8e8e8 100%);
}

/* Brushed-metal title bars (Finder, Safari, iframe apps) */
.win.metal .win-titlebar,
.win.metal .win-toolbar,
.win.metal {
    background-color: #c8c8c8;
}
.win.metal .win-titlebar {
    background:
        repeating-linear-gradient(to bottom, rgba(255,255,255,0.10) 0 1px, rgba(0,0,0,0.02) 1px 2px),
        linear-gradient(to bottom, #d6d6d6 0%, #b6b6b6 100%);
    border-bottom: 1px solid #8f8f8f;
}
.win.metal.inactive .win-titlebar {
    background: linear-gradient(to bottom, #e0e0e0 0%, #cfcfcf 100%);
}

/* Traffic lights */
.traffic {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-right: 8px;
}
.traffic button {
    width: 13px; height: 13px;
    border-radius: 50%;
    border: 0.5px solid rgba(0,0,0,0.45);
    padding: 0;
    margin: 0;
    position: relative;
    cursor: default;
    background-position: center;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.7);
    font-size: 9px;
    line-height: 1;
    color: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}
.traffic .tl-close  { background: radial-gradient(circle at 50% 30%, #ff9d97, #fb5b52 70%); }
.traffic .tl-min    { background: radial-gradient(circle at 50% 30%, #ffd479, #f7ae2e 70%); }
.traffic .tl-max    { background: radial-gradient(circle at 50% 30%, #7ee08a, #28c33f 70%); }
.traffic button::after { content: ""; opacity: 0; font-weight: 700; }
.win-titlebar:hover .tl-close::after  { content: "\00D7"; opacity: 1; }
.win-titlebar:hover .tl-min::after    { content: "\2212"; opacity: 1; }
.win-titlebar:hover .tl-max::after    { content: "+"; opacity: 1; }
.win.inactive .traffic button {
    background: radial-gradient(circle at 50% 30%, #e2e2e2, #c2c2c2 70%);
    border-color: rgba(0,0,0,0.25);
}

.win-title {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #4c4c4c;
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.win.inactive .win-title { color: #a0a0a0; }
.win-title-icon { width: 15px; height: 15px; margin-right: 5px; vertical-align: -3px; }

/* Window body */
.win-body {
    flex: 1;
    background: #fff;
    overflow: auto;
    position: relative;
}
.win-body.metal-body { background: #ededed; }

/* Resize handle */
.win-resize {
    position: absolute;
    right: 0; bottom: 0;
    width: 16px; height: 16px;
    cursor: nwse-resize;
    z-index: 5;
    background:
        linear-gradient(135deg, transparent 0 45%, rgba(0,0,0,0.28) 45% 52%, transparent 52% 62%, rgba(0,0,0,0.28) 62% 70%, transparent 70%);
}

.win.maximized { border-radius: 0; }
.win.minimized { display: none; }

/* --------------------------------------------------------------------------
   Finder window: toolbar + sidebar + icon grid
   -------------------------------------------------------------------------- */
.finder { display: flex; flex-direction: column; height: 100%; }
.finder-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background:
        repeating-linear-gradient(to bottom, rgba(255,255,255,0.10) 0 1px, rgba(0,0,0,0.02) 1px 2px),
        linear-gradient(to bottom, #d2d2d2 0%, #bcbcbc 100%);
    border-bottom: 1px solid #8f8f8f;
}
.finder-nav-btns { display: flex; gap: 0; }
.finder-nav-btns button {
    width: 30px; height: 22px;
    border: 1px solid #9a9a9a;
    background: linear-gradient(to bottom, #fcfcfc, #dcdcdc);
    color: #555;
    cursor: default;
    font-size: 12px;
}
.finder-nav-btns button:first-child { border-radius: 13px 0 0 13px; }
.finder-nav-btns button:last-child { border-radius: 0 13px 13px 0; border-left: none; }
.finder-toolbar-title { font-weight: 600; color: #3a3a3a; font-size: 13px; }
.finder-toolbar-spacer { flex: 1; }

.finder-main { flex: 1; display: flex; min-height: 0; }

.finder-sidebar {
    flex: 0 0 150px;
    background: linear-gradient(to right, #d8e0ec, #cdd7e6);
    border-right: 1px solid #a9b3c5;
    padding: 10px 0;
    overflow-y: auto;
    font-size: 12px;
}
.finder-sidebar-group {
    padding: 2px 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6f7c93;
    margin-top: 6px;
}
.finder-sidebar-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    color: #2c3956;
    cursor: default;
}
.finder-sidebar-item svg { width: 16px; height: 16px; flex: 0 0 16px; }
.finder-sidebar-item.active {
    background: linear-gradient(to bottom, #7aa0e0, #3f6ec9);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}
.finder-sidebar-item.active svg path { fill: #fff !important; stroke: #fff !important; }

.finder-content {
    flex: 1;
    background: #fff;
    overflow-y: auto;
    padding: 16px;
    align-content: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.finder-status {
    flex: 0 0 auto;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #5a5a5a;
    background: linear-gradient(to bottom, #f0f0f0, #e3e3e3);
    border-top: 1px solid #c4c4c4;
}

/* file/folder items inside finder */
.fitem {
    width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    border-radius: 5px;
    cursor: default;
    text-align: center;
}
.fitem .icon-glyph { width: 48px; height: 48px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18)); }
.fitem .fitem-label {
    font-size: 12px;
    line-height: 1.2;
    color: #1d1d1d;
    padding: 1px 4px;
    border-radius: 3px;
    word-break: break-word;
}
.fitem.selected .fitem-label { background: var(--selection); color: #fff; }
.fitem:active .fitem-label { background: var(--selection); color: #fff; }

/* --------------------------------------------------------------------------
   Document / TextEdit window content
   -------------------------------------------------------------------------- */
.doc {
    max-width: 100%;
    padding: 34px 46px 60px;
    background: #fff;
    font-family: 'Helvetica Neue', 'Lucida Grande', Helvetica, Arial, sans-serif;
    color: #1a1a1a;
    line-height: 1.62;
    user-select: text;
    cursor: auto;
}
.doc .doc-kicker {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #8a8a8a;
    margin-bottom: 6px;
}
.doc h1 {
    font-size: 27px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.doc .doc-subtitle {
    font-size: 16px;
    color: #5a5a5a;
    margin: 0 0 18px;
    font-weight: 400;
}
.doc .doc-meta {
    font-size: 12px;
    color: #777;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    padding: 10px 0;
    margin-bottom: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
.doc h2 { font-size: 19px; font-weight: 600; margin: 30px 0 10px; }
.doc h3 { font-size: 15px; font-weight: 600; margin: 22px 0 6px; }
.doc p { margin: 0 0 14px; font-size: 15px; }
.doc ul { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin-bottom: 6px; font-size: 15px; }
.doc blockquote {
    margin: 18px 0;
    padding: 14px 18px;
    background: #f5f8fd;
    border-left: 3px solid var(--aqua-blue);
    color: #34465f;
    font-style: italic;
    border-radius: 0 5px 5px 0;
}
.doc .doc-paperlink {
    display: inline-block;
    margin-top: 14px;
    padding: 7px 18px;
    border-radius: 16px;
    background: linear-gradient(to bottom, #fbfcff, #c3d6f5);
    border: 1px solid #8aa6d8;
    color: #1b3f7e;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.doc .doc-paperlink:hover { background: linear-gradient(to bottom, #ffffff, #b3cbf2); }

/* iframe app windows */
.win-iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.iframe-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 13px;
    background: #fafafa;
}

/* --------------------------------------------------------------------------
   The Dock
   -------------------------------------------------------------------------- */
#dock-wrap {
    position: fixed;
    bottom: 4px;
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    z-index: 99999;
    pointer-events: none;
}
#dock {
    pointer-events: auto;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 6px 10px 8px;
    border-radius: 18px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.42), rgba(220,228,240,0.30));
    border: 1px solid rgba(255,255,255,0.55);
    box-shadow: 0 8px 28px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.6);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.dock-item {
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: default;
    transition: transform 140ms cubic-bezier(0.25,0.1,0.25,1), margin 140ms cubic-bezier(0.25,0.1,0.25,1);
    transform-origin: bottom center;
}
.dock-item img, .dock-item svg { width: 52px; height: 52px; display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.32)); }
.dock-item:hover { transform: scale(1.55) translateY(-6px); margin: 0 12px; }
.dock-item:hover + .dock-item { transform: scale(1.25) translateY(-3px); }
.dock-tooltip {
    position: absolute;
    bottom: 64px;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: rgba(30,30,30,0.85);
    color: #fff;
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
}
.dock-tooltip::after {
    content: "";
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(30,30,30,0.85);
}
.dock-item:hover .dock-tooltip { opacity: 1; }
.dock-item.running::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 0 3px rgba(255,255,255,0.9);
}
.dock-sep {
    width: 1px;
    height: 48px;
    margin: 0 4px;
    align-self: center;
    background: linear-gradient(to bottom, rgba(255,255,255,0) , rgba(255,255,255,0.5), rgba(255,255,255,0));
    border-left: 1px solid rgba(0,0,0,0.12);
}

/* --------------------------------------------------------------------------
   Taskbar/window list lives in the Dock minimized area (right of separator)
   -------------------------------------------------------------------------- */
.dock-min {
    position: relative;
    width: 46px; height: 46px;
    align-self: flex-end;
    display: flex; align-items: center; justify-content: center;
    cursor: default;
    transition: transform 140ms ease;
    border-radius: 7px;
    overflow: hidden;
    background: #cdd6e6;
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    font-size: 9px;
    color: #2c3956;
    text-align: center;
    padding: 3px;
}
.dock-min:hover { transform: scale(1.35) translateY(-6px); }

/* Aqua scrollbars (webkit) */
.win-body::-webkit-scrollbar, .finder-content::-webkit-scrollbar, .finder-sidebar::-webkit-scrollbar { width: 15px; height: 15px; }
.win-body::-webkit-scrollbar-track, .finder-content::-webkit-scrollbar-track { background: #f0f0f0; border-left: 1px solid #d4d4d4; }
.win-body::-webkit-scrollbar-thumb, .finder-content::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 3px solid #f0f0f0;
    background: linear-gradient(to right, #aacbf5, #5b8fe0);
    min-height: 30px;
}
.win-body::-webkit-scrollbar-thumb:hover, .finder-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to right, #8fb8f0, #4079d4);
}

/* context-ish welcome bubble */
#welcome {
    position: absolute;
    top: 60px;
    left: 30px;
    width: 280px;
    z-index: 2;
    background: linear-gradient(to bottom, #fffef4, #fdf6cf);
    border: 1px solid #d8cf91;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    padding: 14px 16px 16px;
    font-size: 13px;
    color: #4a430f;
    line-height: 1.5;
}
#welcome h3 { margin: 0 0 6px; font-size: 14px; }
#welcome .welcome-close {
    position: absolute; top: 6px; right: 8px;
    cursor: default; color: #8a7f3a; font-weight: 700;
}

/* --------------------------------------------------------------------------
   Sketch (Paint) app
   -------------------------------------------------------------------------- */
.sketch { display: flex; flex-direction: column; height: 100%; background: #d6d6d6; }
.sketch-toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 7px 10px;
    background: linear-gradient(to bottom, #ededed, #d2d2d2);
    border-bottom: 1px solid #a7a7a7;
}
.sketch-swatches { display: flex; gap: 4px; }
.sketch-swatches .sw {
    width: 18px; height: 18px; border-radius: 3px; padding: 0;
    border: 1px solid rgba(0,0,0,0.35); cursor: default;
}
.sketch-swatches .sw.active { outline: 2px solid var(--aqua-blue); outline-offset: 1px; }
.sketch-sep { width: 1px; height: 20px; background: #b0b0b0; }
.sketch-sizes { display: flex; gap: 3px; }
.sketch-sizes button, .sketch-btn {
    border: 1px solid #9a9a9a; border-radius: 5px; padding: 2px 9px; cursor: default;
    font-size: 12px; min-width: 26px; color: #2d2d2d;
    background: linear-gradient(to bottom, #ffffff, #dcdcdc);
}
.sketch-sizes button.active, .sketch-btn.active {
    background: linear-gradient(to bottom, #bcd6f5, #7fb0ec); border-color: #5b87c9; color: #16315e;
}
.sketch-canvas-wrap {
    flex: 1; overflow: auto; padding: 12px;
    display: flex; align-items: center; justify-content: center; background: #b6b6b6;
}
.sketch-canvas {
    background: #fff; border: 1px solid #888; max-width: 100%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3); cursor: crosshair; touch-action: none;
}

/* --------------------------------------------------------------------------
   Agent (Ask Luis) chat app
   -------------------------------------------------------------------------- */
.agent { display: flex; flex-direction: column; height: 100%; background: #eef1f5; }
.agent-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.agent-msg { display: flex; }
.agent-msg.user { justify-content: flex-end; }
.agent-bubble {
    max-width: 80%; padding: 8px 12px; border-radius: 14px;
    font-size: 13px; line-height: 1.45; user-select: text;
}
.agent-msg.bot .agent-bubble { background: #fff; border: 1px solid #dfe3e8; border-bottom-left-radius: 4px; color: #1d1d1d; }
.agent-msg.user .agent-bubble { background: linear-gradient(to bottom, #5fa0ef, #3b7dde); color: #fff; border-bottom-right-radius: 4px; }
.agent-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #cfd4da; background: #e4e8ee; }
.agent-input input {
    flex: 1; border: 1px solid #aab2bd; border-radius: 15px; padding: 6px 13px;
    font-size: 13px; font-family: inherit; outline: none; background: #fff;
}
.agent-input input:focus { border-color: var(--aqua-blue); box-shadow: 0 0 0 2px rgba(59,125,222,0.3); }
.agent-input button {
    border: 1px solid #5b87c9; border-radius: 15px; padding: 6px 16px; cursor: default;
    font-size: 13px; font-weight: 600; color: #16315e;
    background: linear-gradient(to bottom, #bcd6f5, #7fb0ec);
}
.agent-typing { letter-spacing: 2px; animation: agentblink 1s infinite; }
@keyframes agentblink { 50% { opacity: 0.3; } }

/* --------------------------------------------------------------------------
   Terminal app
   -------------------------------------------------------------------------- */
.term { height: 100%; background: #14121a; }
.term-screen {
    height: 100%; padding: 10px 12px; overflow-y: auto; cursor: text;
    background: rgba(20, 18, 26, 0.97); color: #e8e8e8; user-select: text;
    font-family: 'Monaco', 'Menlo', 'SF Mono', 'Cascadia Mono', Consolas, monospace;
    font-size: 12.5px; line-height: 1.5;
}
.term-out { white-space: pre-wrap; word-break: break-word; }
.term-out > div { margin-bottom: 2px; }
.term-line { display: flex; }
.term-prompt { color: #4fd14f; white-space: pre; }
.term-input { flex: 1; outline: none; white-space: pre-wrap; word-break: break-word; caret-color: #e8e8e8; }

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
    .desktop-icons { right: 6px; gap: 6px; }
    .desktop-icon { width: 68px; }
    .desktop-icon .icon-glyph { width: 40px; height: 40px; }
    .win:not(.maximized) {
        left: 4px !important;
        top: calc(var(--menubar-h) + 6px) !important;
        width: calc(100vw - 8px) !important;
        height: calc(100vh - var(--menubar-h) - var(--dock-h) - 16px) !important;
    }
    .finder-sidebar { flex-basis: 110px; }
    .win-resize { display: none; }
    .doc { padding: 22px 20px 50px; }
    #dock-wrap { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding: 0 6px; }
    #dock-wrap::-webkit-scrollbar { display: none; }
    #dock { gap: 0; padding: 4px 5px 5px; border-radius: 12px; margin: 0 auto; flex: 0 0 auto; }
    .dock-item { width: 29px; height: 29px; }
    .dock-item img, .dock-item svg { width: 29px; height: 29px; }
    .dock-item:hover { transform: scale(1.25) translateY(-3px); margin: 0 3px; }
    .dock-item:hover + .dock-item { transform: none; }
    .dock-sep { height: 26px; margin: 0 2px; }
    .menu-item:not(.app-name):not(.menu-apple) { display: none; }
    #welcome { left: 8px; right: 8px; width: auto; }
}