/* Topbar + breadcrumbs, in the workspace / home visual language. Loaded after
   head_part's inline styles so these rules win. */

.app-topbar {
    height: 3.75rem;
    gap: 0.6rem;
    padding: 0 1.25rem;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(160%) blur(8px);
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid #e3e8ef;
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);
}
.topbar-icon-btn, .topbar-home {
    width: 2.25rem; height: 2.25rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 9px; background: transparent;
    color: #4a5768; text-decoration: none; transition: background .12s, color .12s, border-color .12s;
}
.topbar-icon-btn:hover, .topbar-home:hover { background: #eef1f6; color: #182230; }
.topbar-home { border-color: #e3e8ef; }
.topbar-icon-btn:focus-visible, .topbar-home:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 1px; }

.topbar-search { max-width: 620px; margin-left: 0.25rem; }
.topbar-search i { left: 0.95rem; color: #7b8796; }
.topbar-search input {
    height: 2.5rem; padding: 0 2.6rem 0 2.4rem;
    border: 1px solid #dbe1ea; border-radius: 10px; background: #f3f5f8;
    font-size: 0.9rem; color: #182230;
}
.topbar-search input::placeholder { color: #7b8796; }
.topbar-search input:focus { background: #fff; border-color: var(--app-accent); box-shadow: 0 0 0 3px var(--app-accent-soft); }
.topbar-kbd {
    position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; line-height: 1;
    padding: 3px 7px; border-radius: 5px; border: 1px solid #c6cfdb; border-bottom-width: 2px;
    background: #fff; color: #4a5768; pointer-events: none;
}
.topbar-search input:focus + .topbar-kbd { opacity: 0; }

.topbar-right { gap: 0.6rem; }
.topbar-sep { width: 1px; height: 1.75rem; background: #e3e8ef; }

.topbar-new {
    display: inline-flex; align-items: center; gap: 0.5rem; height: 2.4rem; padding: 0 0.9rem;
    border: 0; border-radius: 10px; background: var(--app-accent); color: #fff; font-weight: 600; font-size: 0.875rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .12), inset 0 -1px 0 rgba(0, 0, 0, .12);
    transition: filter .12s;
}
.topbar-new:hover { filter: brightness(1.06); }
.topbar-new:focus-visible { outline: 3px solid var(--app-accent-soft); outline-offset: 1px; }
.topbar-new__chev { font-size: 0.6rem; opacity: .75; }

.topbar-menu {
    min-width: 290px; padding: 6px; border: 1px solid #dbe1ea; border-radius: 12px;
    box-shadow: 0 14px 34px rgba(16, 24, 40, .16);
}
.topbar-menu__head { list-style: none; padding: 6px 10px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #7b8796; }
.topbar-menu__item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: #182230; text-decoration: none; }
.topbar-menu__item:hover, .topbar-menu__item:focus { background: #f3f5f8; color: #182230; outline: none; }
.topbar-menu__item b { display: block; font-size: 13.5px; }
.topbar-menu__item small { display: block; font-size: 11.5px; color: #7b8796; }
.topbar-menu__icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; font-size: 14px; }
.topbar-menu__icon.is-im { background: rgba(79, 110, 247, .12); color: var(--app-accent); }
.topbar-menu__icon.is-ex { background: #e2f3f5; color: #0f7b8a; }
.topbar-menu__icon.is-tr { background: #fbeedd; color: #b25e09; }
.topbar-menu__icon.is-wh { background: #eceff4; color: #4a5768; }
.topbar-menu__icon.is-exc { background: #f8e6ee; color: #9b2f5e; }
.topbar-menu__icon.is-ai { background: #eee9f8; color: #6a4fb0; }
.topbar-menu__foot { display: flex; gap: 14px; padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid #e3e8ef; font-size: 12px; }
.topbar-menu__foot a { color: var(--app-accent); text-decoration: none; }
.topbar-menu__foot a:hover { text-decoration: underline; }
.topbar-menu .dropdown-item { border-radius: 8px; padding: 7px 10px; font-size: 13.5px; }

.topbar-user { padding: 0.2rem 0.5rem 0.2rem 0.2rem; border-radius: 12px; gap: 0.6rem; }
.topbar-user:hover { background: #eef1f6; }
.topbar-avatar {
    width: 2.25rem; height: 2.25rem; border-radius: 10px; font-size: 0.8rem;
    background: linear-gradient(135deg, var(--app-accent), #6a4fb0);
}
.topbar-user__name { flex-direction: column; align-items: flex-start; line-height: 1.15; }
.topbar-user__name b { font-size: 0.85rem; color: #182230; }
.topbar-user__name small { font-size: 0.72rem; color: #7b8796; font-weight: 400; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-user__chev { font-size: 0.6rem; opacity: .55; }

/* breadcrumbs */
.breadcrumb { font-size: 0.85rem; margin-bottom: 0; --bs-breadcrumb-divider: "›"; }
.breadcrumb-item a { color: #4a5768; text-decoration: none; }
.breadcrumb-item a:hover { color: var(--app-accent); text-decoration: underline; }
.breadcrumb-item + .breadcrumb-item::before { color: #c6cfdb; }
.breadcrumb-item.active { color: #182230; font-weight: 600; }
.bc-ref { font-weight: 600; color: #182230; }
.bc-lrn {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: #0d5160;
    background: #e7f3f6; border: 0; border-radius: 5px; padding: 1px 6px; margin-left: 6px; cursor: copy;
}
.bc-lrn:hover { background: #d6edf2; }

@media (prefers-reduced-motion: reduce) { .topbar-new, .topbar-icon-btn, .topbar-home { transition: none; } }