/* ═══════════════════════════════════════════════════════════════════════════
   wit-windows.css — Windows-style taskbar + shell panel kebabs
   ---------------------------------------------------------------------------
   Faithful Windows 11 taskbar layout: Start (four-pane mark) on the left, app
   search beside it, app icons centred, system tray + clock on the right.
   Theme-agnostic: it reads the canonical tokens, so it adapts to light/dark.
   Loaded last so it owns the taskbar.
   ═══════════════════════════════════════════════════════════════════════════ */

.task-bar.windows {
    position: fixed !important;
    left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex !important;
    align-items: center;
    gap: 6px;
    height: 48px !important;
    min-height: 48px;
    padding: 0 8px !important;
    justify-content: flex-start !important;
    background: color-mix(in srgb, var(--holo-surface) 90%, transparent) !important;
    border-top: 1px solid var(--holo-border-subtle) !important;
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.06) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    backdrop-filter: blur(24px) !important;
}

/* ── Start (Windows four-pane mark) ── */
.tb-start {
    width: 40px; height: 40px; flex: none;
    border: none; background: transparent; border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.tb-start:hover { background: rgba(127, 127, 127, 0.14); }

/* Witline mark: three leaves (triskelion) in our own style — the Start glyph.
   Not a copy of any third-party logo. */
.wit-mark { position: relative; width: 22px; height: 22px; display: inline-block; }
.wit-mark i {
    position: absolute; width: 9px; height: 9px;
    background: linear-gradient(140deg, var(--wa-accent, #1f6feb), #4f8ff7);
    transform: rotate(45deg); border-radius: 2px; display: block;
}
.wit-mark i:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%) rotate(45deg); }
.wit-mark i:nth-child(2) { bottom: 0; left: 0; }
.wit-mark i:nth-child(3) { bottom: 0; right: 0; }
.tb-start:hover .wit-mark i { filter: brightness(1.12); }

/* Witline mark asset (used on the Start button and as the favicon). */
.wit-mark-img { width: 22px; height: 22px; display: block; }
.tb-start:hover .wit-mark-img { filter: brightness(1.12); }

/* Home logotype: the Witline mark above "WIT" with "Blockchain" wrapped beneath. */
.ds-logo { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ds-logo-mark { width: 56px; height: 56px; display: block; }
.ds-logo-text {
    display: flex; flex-direction: column; align-items: center;
    font-weight: 700; letter-spacing: 0.14em; line-height: 1; text-align: center;
    color: var(--text-primary);
}
.ds-logo-sub {
    display: block; margin-top: 8px;
    font-size: 0.30em; font-weight: 600; letter-spacing: 0.42em;
    text-transform: uppercase; color: var(--text-secondary);
    padding-left: 0.42em; /* balance the trailing letter-spacing */
}

/* Home composer: ChatGPT-style attach control (home plan H1). */
.ds-attach-btn {
    flex: none; width: 32px; height: 32px; border: none; background: transparent; cursor: pointer;
    border-radius: 999px; color: var(--text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
}
.ds-attach-btn:hover { background: rgba(127, 127, 127, 0.14); color: var(--text-primary); }

/* Composer input grows with content (ChatGPT behaviour) and wraps on Shift+Enter. */
.ds-search-input {
    field-sizing: content;
    min-height: 24px;
    max-height: 200px;
    resize: none;
    overflow-y: auto;
    font: inherit;
    line-height: 1.4;
}

/* ── Home results view (home plan H4): answer first, then Source rows, in the
   home language. Theme-agnostic via tokens; the dropdown borrows the popup layer. ── */
.ds-results-body { color: var(--text-primary); }
.ds-entity-inline,
.ds-entity-header-inline {
    background: var(--holo-surface);
    border: 1px solid var(--holo-border-subtle);
    border-radius: 12px;
}
.ds-entity-title-inline { color: var(--text-primary); font-weight: 600; }
.ds-back-btn {
    background: transparent; border: none; cursor: pointer;
    color: var(--neon-primary); font-weight: 600;
}
.ds-section-header {
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-secondary) !important; padding: 8px 10px 4px;
}
.ds-result-item {
    display: flex; align-items: center; gap: 10px; min-height: 40px;
    padding: 8px 10px; border-radius: 6px; color: var(--text-primary); cursor: pointer;
}
.ds-result-item:hover,
.ds-result-item.selected { background: rgba(127, 127, 127, 0.12) !important; }
.ds-result-icon { color: var(--text-secondary); flex: none; }
.ds-result-title { color: var(--text-primary); font-weight: 600; }
.ds-result-line2 { color: var(--text-secondary) !important; font-size: 12.5px; }

/* ── Windows 11 popup layer ───────────────────────────────────────────────
   Flyouts, menus and dropdowns: acrylic surface, 8px radius, 1px hairline,
   soft shadow, Windows row metrics, subtle pop-in. Dismissal (outside click,
   Esc) stays with each popup's existing logic. */
.topbar-menu, .dropdown-menu, .hat-dropdown-menu,
.top-bar .dropdown-menu, .panel-menu, .context-menu, .win-start {
    background: color-mix(in srgb, var(--holo-surface) 92%, transparent) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    backdrop-filter: blur(30px) !important;
    border: 1px solid var(--holo-border-subtle) !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28) !important;
    padding: 6px !important;
    color: var(--text-primary) !important;
    transform-origin: top center;
    animation: winPopupIn 140ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.dropdown-item, .hat-dropdown-item, .topbar-menu-item {
    border-radius: 4px !important;
    min-height: 34px;
    padding: 7px 10px !important;
    color: var(--text-primary) !important;
    background: transparent !important;
}
.dropdown-item:hover, .hat-dropdown-item:hover, .topbar-menu-item:hover {
    background: rgba(127, 127, 127, 0.14) !important;
}
.dropdown-item.active, .hat-dropdown-item.active { background: rgba(127, 127, 127, 0.10) !important; }

@keyframes winPopupIn {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .topbar-menu, .dropdown-menu, .hat-dropdown-menu, .panel-menu, .context-menu, .win-start { animation: none !important; }
}
.win-logo { display: grid; grid-template-columns: 9px 9px; grid-template-rows: 9px 9px; gap: 2px; }
.win-logo i { display: block; background: #0078d4; border-radius: 1px; }
.tb-start:hover .win-logo i { background: #106ebe; }

/* ── App search beside Start ── */
.tb-search {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
    width: 240px; height: 32px; padding: 0 12px; border-radius: 999px;
    background: rgba(127, 127, 127, 0.14);
}
.tb-search i { color: var(--text-secondary); font-size: 13px; }
.tb-search input {
    flex: 1; min-height: 0 !important; height: auto;
    border: none !important; background: transparent !important; box-shadow: none !important;
    color: var(--text-primary) !important; font-size: 13px; outline: none;
}
.tb-search input::placeholder { color: var(--text-dim); }

/* ── Centred app icons ── */
.tb-center { display: inline-flex; align-items: center; gap: 4px; margin: 0 auto; }

.task-bar.windows .task-bar-btn {
    position: relative;
    flex-direction: column; align-items: center; justify-content: center;
    min-width: 44px; min-height: 40px; padding: 4px 6px; border-radius: 6px;
    background: transparent !important; box-shadow: none !important;
    color: var(--text-primary) !important;
}
.task-bar.windows .task-bar-btn:hover { background: rgba(127, 127, 127, 0.14) !important; }
.task-bar.windows .task-bar-btn .task-btn-icon { font-size: 18px; line-height: 1; }
.task-bar.windows .task-bar-btn .task-btn-icon i,
.task-bar.windows .task-bar-btn .task-btn-icon .fa-solid { color: var(--text-primary) !important; }
.task-bar.windows .task-bar-btn .task-btn-label { display: none; }
.task-bar.windows .task-bar-btn.primary { background: transparent !important; box-shadow: none !important; }

/* Windows running/active indicator: a short underline under the icon. */
.task-bar.windows .task-bar-btn.primary::after,
.task-bar.windows .task-bar-btn.active::after {
    content: "";
    position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
    width: 16px; height: 3px; border-radius: 2px;
    background: var(--text-secondary); opacity: 0.8;
}

/* ── System tray + clock ── */
.tb-tray {
    display: inline-flex; align-items: center; gap: 10px; flex: none;
    color: var(--text-secondary); font-size: 12px;
}
.tb-tray > i { font-size: 12px; }
.tb-clock {
    display: inline-flex; flex-direction: column; align-items: flex-end;
    line-height: 1.2; color: var(--text-primary); font-size: 11.5px;
}

/* ── Panel kebabs ("three dots") in the top corner of each drawer ── */
.panel-kebab {
    margin-left: auto; border: none; background: transparent; cursor: pointer;
    color: var(--text-secondary); padding: 4px 8px; border-radius: 6px; line-height: 1;
    font-size: 15px; flex: none;
}
.panel-kebab:hover { background: rgba(127, 127, 127, 0.14); color: var(--text-primary); }

/* ── Home favourites (Android-style): layout is theme-agnostic so dark looks right ── */
.ds-favourites {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin: 20px 0 8px;
}
.ds-fav {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: transparent; border: none; cursor: pointer; padding: 0;
}
.ds-fav-icon {
    width: 54px; height: 54px; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; transition: transform 0.15s ease;
}
.ds-fav-label { font-size: 11px; color: var(--text-secondary); }
.ds-fav:hover .ds-fav-icon { transform: translateY(-2px); }

/* Dark theme: the pastel tiles read as garish on dark. Use a subtle surface. */
[data-theme="dark"] .ds-fav-icon {
    background: var(--holo-border-subtle) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .ds-fav-icon i { color: var(--neon-primary) !important; }
[data-theme="dark"] .ds-fav-label { color: var(--text-secondary); }

/* ── Start flyout (Windows 11): pods and their services ── */
.win-start-backdrop { position: fixed; inset: 0; z-index: 70; }
.win-start {
    position: fixed; left: 8px; bottom: 56px; z-index: 71;
    width: 460px; max-height: 62vh; display: flex; flex-direction: column;
    background: color-mix(in srgb, var(--holo-surface) 92%, transparent);
    -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
    border: 1px solid var(--holo-border-subtle);
    border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
    overflow: hidden; color: var(--text-primary);
}
.win-start-search { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.win-start-search i { color: var(--text-secondary); }
.win-start-search input {
    flex: 1; min-height: 0; border: none !important; background: transparent !important;
    outline: none; color: var(--text-primary) !important; font-size: 14px; box-shadow: none !important;
}
.win-start-search input::placeholder { color: var(--text-dim); }
.win-start-section { padding: 4px 16px 8px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }

/* Pinned: Windows 11 Start tile grid (pods). */
.win-start-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 4px 12px 10px; }
.win-start-tile {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 6px; border: none; background: transparent; cursor: pointer;
    border-radius: 6px; color: var(--text-primary); font-size: 11.5px; text-align: center;
}
.win-start-tile:hover { background: rgba(127, 127, 127, 0.14); }
.win-start-tile-glyph {
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--neon-primary); font-size: 18px;
}
.win-start-tile-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-start-list { overflow-y: auto; padding: 0 8px 10px; }
.win-start-row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 9px 10px; border: none; background: transparent; cursor: pointer;
    border-radius: 6px; color: var(--text-primary); font-size: 13.5px; text-align: left;
}
.win-start-row:hover, .win-start-row.open { background: rgba(127, 127, 127, 0.14); }
.win-start-glyph { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: var(--neon-primary); }
.win-start-name { flex: 1; }
.win-start-count { color: var(--text-secondary); font-size: 11.5px; }
.win-start-caret { color: var(--text-secondary); font-size: 11px; }
.win-start-services { display: flex; flex-direction: column; padding: 2px 0 4px 38px; }
.win-start-service {
    display: flex; align-items: center; gap: 10px; padding: 7px 10px;
    border: none; background: transparent; cursor: pointer; border-radius: 6px;
    color: var(--text-secondary); font-size: 12.5px; text-align: left;
}
.win-start-service:hover { background: rgba(127, 127, 127, 0.12); color: var(--text-primary); }
.win-start-empty { padding: 10px 16px; color: var(--text-secondary); font-size: 12.5px; }

/* ── Start: section headers with the "Show all" affordance ── */
.win-start-head { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 16px 6px; }
.win-start-section-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.win-start-showall {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: none; cursor: pointer;
    background: rgba(127, 127, 127, 0.12); border-radius: 5px; color: var(--text-secondary); font-size: 11.5px;
}
.win-start-showall:hover { background: rgba(127, 127, 127, 0.2); color: var(--text-primary); }
.win-start-grid.expanded { grid-template-columns: repeat(6, minmax(0, 1fr)); max-height: 30vh; overflow-y: auto; }

/* ── Recommended rows (Windows 11 "Recommended") ── */
.win-start-rec { display: flex; flex-direction: column; padding: 0 8px 8px; overflow-y: auto; }
.win-start-rec-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: none; cursor: pointer;
    background: transparent; border-radius: 6px; color: var(--text-primary); text-align: left;
}
.win-start-rec-row:hover { background: rgba(127, 127, 127, 0.14); }
.win-start-rec-glyph { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: var(--neon-primary); }
.win-start-rec-text { display: flex; flex-direction: column; min-width: 0; }
.win-start-rec-title { font-size: 13px; }
.win-start-rec-sub { font-size: 11px; color: var(--text-secondary); }

/* ── All: domain-grouped cards ── */
.win-start-cards { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 12px 10px; align-content: start; }
.win-start-card { border: 1px solid var(--holo-border-subtle); border-radius: 8px; overflow: hidden; }
.win-start-card-head { padding: 6px 10px; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); background: rgba(127, 127, 127, 0.08); }
.win-start-card-body { padding: 4px; }

/* ── Start footer: account + power ── */
.win-start-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 12px; border-top: 1px solid var(--holo-border-subtle); background: rgba(127, 127, 127, 0.06);
}
.win-start-user { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.win-start-avatar {
    width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--neon-primary); color: #fff; font-size: 11.5px; font-weight: 600;
}
.win-start-username { font-size: 12.5px; color: var(--text-primary); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-start-power {
    width: 32px; height: 32px; border: none; border-radius: 6px; background: transparent; cursor: pointer;
    color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center;
}
.win-start-power[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ── Search popup (Windows Search): Recent | Quick searches + Top apps ── */
.win-search-backdrop { position: fixed; inset: 0; z-index: 70; }
.win-search {
    position: fixed; left: 8px; bottom: 56px; z-index: 71; width: 620px; max-height: 62vh;
    display: flex; flex-direction: column; color: var(--text-primary);
    background: color-mix(in srgb, var(--holo-surface) 92%, transparent);
    -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
    border: 1px solid var(--holo-border-subtle); border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); overflow: hidden;
}
.win-search-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px 8px; }
.win-search-field { flex: 1; display: flex; align-items: center; gap: 10px; border-radius: 6px; padding: 8px 10px; background: rgba(127, 127, 127, 0.12); }
.win-search-field i { color: var(--text-secondary); }
.win-search-field input { flex: 1; min-height: 0; border: none !important; background: transparent !important; outline: none; color: var(--text-primary) !important; font-size: 14px; box-shadow: none !important; }
.win-search-field input::placeholder { color: var(--text-dim); }
.win-search-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--neon-primary); color: #fff; font-size: 12px; font-weight: 600; }
.win-search-cols { flex: 1; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; overflow: hidden; padding: 4px 12px 12px; }
.win-search-col { display: flex; flex-direction: column; min-width: 0; overflow-y: auto; }
.win-search-col-title { padding: 6px 8px; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.win-search-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: none; background: transparent; cursor: pointer; border-radius: 6px; color: var(--text-primary); text-align: left; font-size: 12.5px; }
.win-search-row:hover { background: rgba(127, 127, 127, 0.14); }
.win-search-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 8px 8px; }
.win-search-chip { padding: 5px 12px; border: 1px solid var(--holo-border-subtle); border-radius: 14px; background: transparent; cursor: pointer; color: var(--text-primary); font-size: 12px; }
.win-search-chip:hover { background: rgba(127, 127, 127, 0.14); }
.win-search-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 8px 4px; }
.win-search-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border: none; background: transparent; cursor: pointer; border-radius: 6px; color: var(--text-primary); font-size: 11px; text-align: center; }
.win-search-tile:hover { background: rgba(127, 127, 127, 0.14); }
.win-search-tile-glyph { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: var(--neon-primary); }
.win-search-tile-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .win-search { animation: none !important; } }