/*
 * AppShell header owner.
 * The global topbar and its desktop account/tools menus live here. Inner legacy
 * screen headers only receive a neutral compatibility treatment below.
 */

#portrait-lock-overlay,
#landscape-lock-overlay-new { display: none !important; }

/* Compatibility header for unchanged inner screens. */
.sm-page-header {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 64px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    background: var(--tp-color-surface, #1a1915);
    border-bottom: 1px solid var(--tp-color-border, rgba(244, 241, 232, 0.11));
    box-shadow: none;
}

.sm-page-header .logo-text {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--tp-color-text, #f4f1e8);
    font-family: var(--tp-font-display, 'Unbounded', sans-serif);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sm-page-header .logo-text .kumalak-icon,
.sm-page-header .logo-text i { color: var(--tp-color-primary, #d7a33f); font-size: 14px; }

.sm-page-header .sub-screen-title,
.sm-page-header .lobby-title {
    min-width: 0;
    overflow: hidden;
    color: var(--tp-color-text, #f4f1e8);
    font-family: var(--tp-font-display, 'Unbounded', sans-serif);
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sm-page-header .sub-screen-title { flex: 1; }
.sm-page-header .lobby-title-block { flex: 1; min-width: 0; }

.sm-page-header .sub-screen-back,
.sm-page-header .lobby-back-btn,
.sm-page-header .lobby-refresh-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--tp-color-border, rgba(244, 241, 232, 0.11));
    border-radius: var(--tp-radius-sm, 12px);
    background: transparent;
    color: var(--tp-color-primary, #d7a33f);
    cursor: pointer;
}

.sm-page-header .sub-screen-back:hover,
.sm-page-header .lobby-back-btn:hover,
.sm-page-header .lobby-refresh-btn:hover { background: var(--tp-color-surface-soft, #292720); }

.sm-page-header [style*="font-size:11px"],
.sm-page-header .header-tag {
    padding: 3px 8px;
    border: 1px solid var(--tp-color-border, rgba(244, 241, 232, 0.11));
    border-radius: var(--tp-radius-xs, 8px);
    color: var(--tp-color-text-muted, #aaa394) !important;
    background: transparent;
    font-family: var(--tp-font-sans, sans-serif);
    font-size: 10px !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.sm-page-header .chat-header-name { color: var(--tp-color-text, #f4f1e8); font-size: 14px; font-weight: 800; }
.sm-page-header .chat-header-sub { color: var(--tp-color-primary, #d7a33f); font-size: 11px; font-weight: 700; }

/* Normative AppShell topbar. */
.tp-topbar {
    position: sticky;
    top: 0;
    z-index: 90;
    min-height: 64px;
    background: var(--tp-color-header);
    border-bottom: 1px solid var(--tp-color-border);
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

.tp-topbar__inner {
    width: min(100%, var(--tp-shell-max));
    min-height: 64px;
    margin: 0 auto;
    padding: 0 var(--tp-space-6);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--tp-space-6);
}

.tp-brand,
.tp-desktop-nav__item,
.tp-profile-trigger,
.tp-profile-menu button,
.tp-tools-menu button { font: inherit; }

.tp-brand {
    min-height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    color: var(--tp-color-text);
    cursor: pointer;
}

.tp-brand__logo {
    display: block;
    width: 142px;
    height: 44px;
    object-fit: contain;
    border-radius: 6px;
    flex: 0 0 auto;
}

.tp-desktop-nav {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tp-tools-menu-wrap,
.tp-profile-menu-wrap { position: relative; }

.tp-desktop-nav__item {
    min-height: 44px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: var(--tp-radius-sm);
    background: transparent;
    color: var(--tp-color-text-muted);
    font-size: var(--tp-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--tp-motion-fast) var(--tp-ease-standard), background var(--tp-motion-fast) var(--tp-ease-standard), border-color var(--tp-motion-fast) var(--tp-ease-standard), transform var(--tp-motion-fast) var(--tp-ease-standard);
}

.tp-desktop-nav__item:hover,
.tp-desktop-nav__item[aria-expanded="true"] {
    background: color-mix(in srgb, var(--tp-color-primary) 10%, transparent);
    color: var(--tp-color-primary-hover);
}

.tp-desktop-nav__item.is-active {
    border-radius: 0;
    background: transparent;
    color: var(--tp-color-primary-hover);
    box-shadow: inset 0 -2px 0 var(--tp-color-primary);
}

.tp-desktop-nav__item > i { font-size: 10px; }
.tp-desktop-nav__item:active,
.tp-brand:active,
.tp-profile-trigger:active { transform: scale(0.98); }

.tp-topbar__account {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--tp-space-3);
}

.tp-shell-icon-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--tp-color-border);
    border-radius: 50%;
    background: var(--tp-color-surface-raised);
    color: var(--tp-color-text-muted);
    cursor: pointer;
    transition: background var(--tp-motion-fast) var(--tp-ease-standard), border-color var(--tp-motion-fast) var(--tp-ease-standard), color var(--tp-motion-fast) var(--tp-ease-standard), transform var(--tp-motion-fast) var(--tp-ease-standard);
}

.tp-shell-icon-button:hover { border-color: color-mix(in srgb, var(--tp-color-primary) 42%, var(--tp-color-border)); background: var(--tp-color-interactive); color: var(--tp-color-primary-hover); }
.tp-shell-icon-button:active { transform: scale(0.96); }
.tp-shell-icon-button:focus-visible { outline: 2px solid var(--tp-color-focus); outline-offset: 2px; box-shadow: var(--tp-focus-ring); }
.tp-notification-trigger > i { font-size: 16px; }

.tp-online-status {
    min-height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--tp-color-border);
    border-radius: var(--tp-radius-pill);
    background: var(--tp-color-surface-raised);
    color: var(--tp-color-text-muted);
    font-size: var(--tp-text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.tp-online-status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tp-color-text-subtle); }
.tp-online-status[data-online-status="ready"] .tp-online-status__dot { background: var(--tp-color-success); }
.tp-online-status[data-online-status="connecting"] .tp-online-status__dot { background: var(--tp-color-primary); }
.tp-online-status[data-online-status="unavailable"] .tp-online-status__dot { background: var(--tp-color-danger); }

.tp-profile-trigger {
    min-height: 44px;
    padding: 3px 7px 3px 10px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--tp-color-border);
    border-radius: var(--tp-radius-pill);
    background: var(--tp-color-surface-raised);
    color: var(--tp-color-text);
    cursor: pointer;
    transition: background var(--tp-motion-fast) var(--tp-ease-standard), border-color var(--tp-motion-fast) var(--tp-ease-standard), transform var(--tp-motion-fast) var(--tp-ease-standard);
}

.tp-profile-trigger:hover,
.tp-profile-trigger[aria-expanded="true"] { background: var(--tp-color-interactive); border-color: var(--tp-color-border-strong); }
.tp-profile-trigger__meta { display: grid; gap: 1px; text-align: right; }
.tp-profile-trigger__name { max-width: 116px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--tp-text-xs); font-weight: 600; }
.tp-rating-badge { color: var(--tp-color-primary); font-size: 11px; font-weight: 650; }
.tp-profile-trigger__avatar { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 36px; border-radius: 50%; background: var(--tp-color-surface-soft); font-size: 18px; overflow: hidden; }
.tp-profile-trigger__avatar .profile-avatar-image { width: 100%; height: 100%; object-fit: cover; }
.tp-profile-trigger__chevron { margin-right: 2px; color: var(--tp-color-text-subtle); font-size: 10px; transition: transform var(--tp-motion-fast) var(--tp-ease-standard); }
.tp-profile-trigger[aria-expanded="true"] .tp-profile-trigger__chevron { transform: rotate(180deg); }

.tp-profile-menu,
.tp-tools-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 110;
    border: 1px solid var(--tp-color-border-strong);
    border-radius: var(--tp-radius-md);
    background: var(--tp-color-surface-raised);
    box-shadow: var(--tp-shadow-md);
}

.tp-profile-menu { width: 210px; padding: 7px; display: grid; gap: 2px; }
.tp-profile-menu[hidden],
.tp-tools-menu[hidden] { display: none; }

.tp-profile-menu button,
.tp-tools-menu button {
    min-height: 40px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: var(--tp-radius-xs);
    background: transparent;
    color: var(--tp-color-text);
    font-size: var(--tp-text-xs);
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.tp-profile-menu button:hover,
.tp-tools-menu button:hover { background: var(--tp-color-surface-soft); }
.tp-profile-menu button:last-child { color: var(--tp-color-danger); }

.tp-tools-menu {
    width: 430px;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.tp-tools-menu__group { min-width: 0; padding: 2px; }
.tp-tools-menu__label { margin: 0 0 5px; padding: 0 8px; color: var(--tp-color-text-subtle); font-size: 10px; font-weight: 800; letter-spacing: 0.05em; }
.tp-tools-menu__group:first-child button:last-child { color: var(--tp-color-danger); }

.tp-brand:focus-visible,
.tp-desktop-nav__item:focus-visible,
.tp-profile-trigger:focus-visible,
.tp-profile-menu button:focus-visible,
.tp-tools-menu button:focus-visible { outline: 2px solid var(--tp-color-focus); outline-offset: 2px; box-shadow: var(--tp-focus-ring); }

body.global-nav-hidden .tp-topbar { display: none; }

@media (max-width: 1150px) {
    .tp-topbar__inner { gap: var(--tp-space-4); }
    .tp-desktop-nav__item { padding-inline: 9px; }
    .tp-online-status #online-count-label { display: none; }
}

@media (max-width: 1023px) {
    .tp-topbar__inner { grid-template-columns: auto 1fr; padding-inline: var(--tp-space-5); }
    .tp-desktop-nav,
    .tp-tools-menu-wrap { display: none; }
}

@media (max-width: 767px) {
    .tp-topbar,
    .tp-topbar__inner { min-height: 60px; }
    .tp-topbar__inner { padding: max(0px, env(safe-area-inset-top)) var(--tp-space-4) 0; gap: var(--tp-space-3); }
    .tp-brand__logo { width: 112px; height: 36px; }
    .tp-profile-trigger { min-width: 44px; min-height: 44px; padding: 2px; border: 0; background: transparent; }
    .tp-profile-trigger__meta,
    .tp-profile-trigger__chevron { display: none; }
    .tp-profile-trigger__avatar { width: 40px; height: 40px; flex-basis: 40px; }
    .tp-online-status { display: none; }
    .tp-shell-icon-button { width: 44px; height: 44px; min-width: 44px; border: 0; background: transparent; }
    .tp-profile-menu { position: fixed; top: calc(60px + env(safe-area-inset-top)); right: var(--tp-space-4); }
    .sm-page-header { min-height: 60px; padding-inline: var(--tp-space-4); }
}

@media (max-width: 430px) {
    .tp-topbar__inner { padding-inline: 12px; }
    .tp-brand { gap: 7px; }
    .tp-online-status { padding-inline: 7px; }
    .tp-profile-menu { right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .tp-desktop-nav__item,
    .tp-profile-trigger,
    .tp-profile-trigger__chevron { transition: none; }
}