/* SERWISAI product shell - shared navigation for end users */
.serwisai-product-shell {
    position: sticky;
    top: 0;
    z-index: 10000;
    width: 100%;
    border-bottom: 1px solid rgba(113, 146, 184, .24);
    background: rgba(7, 17, 31, .96);
    backdrop-filter: blur(18px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, .18);
}
.product-shell-inner {
    width: min(1600px, 100%);
    min-height: 62px;
    margin: 0 auto;
    padding: 0 clamp(12px, 2vw, 28px);
    display: flex;
    align-items: center;
    gap: 18px;
}
.product-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    color: #f7fbff !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: .04em;
}
.product-brand-mark {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(119, 181, 255, .44);
    border-radius: 10px;
    background: linear-gradient(145deg, #2563eb, #0f4fb6);
    box-shadow: 0 7px 20px rgba(37, 99, 235, .25);
    color: #fff;
    font-size: 15px;
}
.product-nav {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 1 1 auto;
}
.product-nav > a,
.product-more > summary {
    min-height: 38px;
    padding: 8px 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #b8c8db !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 720;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
}
.product-more > summary::-webkit-details-marker { display: none; }
.product-nav > a:hover,
.product-more > summary:hover,
.product-nav > a.is-active {
    border-color: rgba(96, 165, 250, .26);
    background: rgba(59, 130, 246, .12);
    color: #f2f8ff !important;
}
.product-nav > a.is-active { color: #9ccbff !important; }
.product-more { position: relative; }
.product-more[open] > summary {
    border-color: rgba(96, 165, 250, .36);
    background: rgba(59, 130, 246, .14);
    color: #fff !important;
}
.product-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(680px, calc(100vw - 28px));
    padding: 13px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    border: 1px solid #355071;
    border-radius: 15px;
    background: #0d1a2c;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .42);
}
.product-menu-group {
    min-width: 0;
    padding: 9px;
    border-radius: 11px;
    background: rgba(255,255,255,.018);
}
.product-menu-group > b {
    display: block;
    margin: 0 0 6px;
    color: #8fbfff;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.product-menu-group a {
    display: block;
    padding: 8px 7px;
    border-radius: 7px;
    color: #d6e2ef !important;
    text-decoration: none !important;
    font-size: 13px;
}
.product-menu-group a:hover {
    background: rgba(59, 130, 246, .13);
    color: #fff !important;
}
.product-assistant {
    min-height: 39px;
    padding: 8px 13px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    border: 1px solid #4c80c5;
    border-radius: 10px;
    background: linear-gradient(135deg, #1e5fc6, #174693);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 780;
    box-shadow: 0 8px 24px rgba(29, 78, 216, .2);
}
.product-assistant:hover { background: linear-gradient(135deg, #2871df, #1a52a8); }
.assistant-spark { color: #bcd8ff; font-size: 17px; line-height: 1; }

@media (max-width: 980px) {
    .product-shell-inner { gap: 10px; }
    .product-nav { overflow-x: auto; scrollbar-width: none; }
    .product-nav::-webkit-scrollbar { display: none; }
    .product-nav > a[data-nav="knowledge"] { display: none; }
    .product-menu { right: -86px; }
}
@media (max-width: 720px) {
    .product-shell-inner { min-height: 56px; padding: 0 9px; }
    .product-brand span:last-child { display: none; }
    .product-brand-mark { width: 30px; height: 30px; }
    .product-nav { gap: 1px; }
    .product-nav > a,
    .product-more > summary { min-height: 35px; padding: 7px 8px; font-size: 12px; }
    .product-nav > a:nth-of-type(4),
    .product-nav > a:nth-of-type(5),
    .product-nav > a[data-nav="knowledge"] { display: none; }
    .product-assistant { padding: 7px 9px; font-size: 12px; }
    .product-menu { position: fixed; top: 61px; left: 8px; right: 8px; width: auto; grid-template-columns: 1fr; max-height: calc(100vh - 76px); overflow: auto; }
}

/* Context navigation for client/object/case detail pages */
.serwisai-context-nav {
    position: sticky;
    top: 62px;
    z-index: 9990;
    width: 100%;
    border-bottom: 1px solid rgba(113, 146, 184, .18);
    background: rgba(10, 24, 41, .96);
    backdrop-filter: blur(14px);
}
.context-nav-inner {
    width: min(1600px, 100%);
    min-height: 48px;
    margin: 0 auto;
    padding: 5px clamp(12px, 2vw, 28px);
    display: flex;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
}
.context-nav-inner::-webkit-scrollbar { display: none; }
.context-nav-inner a,
.context-label {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    white-space: nowrap;
    font-size: 13px;
}
.context-label {
    margin-right: 3px;
    color: #7f96b1;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.context-nav-inner a {
    color: #cfdeee !important;
    text-decoration: none !important;
    font-weight: 680;
}
.context-nav-inner a:hover,
.context-nav-inner a[data-context="overview"] {
    background: rgba(59, 130, 246, .12);
    color: #fff !important;
}
.context-nav-inner a.context-action {
    border: 1px solid rgba(96, 165, 250, .3);
    background: rgba(59, 130, 246, .11);
    color: #a9d0ff !important;
}

@media (max-width: 980px) {
    .product-nav > a[data-nav="knowledge"] { display: none; }
}
@media (max-width: 720px) {
    .serwisai-context-nav { top: 56px; }
    .context-nav-inner { min-height: 44px; padding: 4px 9px; }
    .context-nav-inner a, .context-label { min-height: 32px; padding: 6px 8px; font-size: 12px; }
    .product-nav > a[data-nav="tasks"],
    .product-nav > a[data-nav="knowledge"] { display: none; }
}