/*
 * Application shell only: navigation and the placeholder Friends drawer.
 * Values retain the existing geometry, colors and 992px breakpoint.
 * View CSS and shared confirmation/wait overlays remain owned by their existing layers.
 */
.app-shell-page {
    box-sizing: border-box;
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
    margin-right: auto;
    margin-left: auto;
    background: #fff;
}
.app-nav, .app-friends {
    box-sizing: border-box;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
}
.app-nav *, .app-nav *::before, .app-nav *::after,
.app-friends *, .app-friends *::before, .app-friends *::after { box-sizing: border-box; }
.app-nav [hidden] { display: none !important; }
.app-nav img, .app-friends img { vertical-align: middle; }
.app-nav button, .app-friends button { margin: 0; font: inherit; text-transform: none; }
.app-nav { position: relative; padding: .5rem 0; background: #f8f9fa; }
.app-nav-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; padding: 0 12px; margin: 0 auto; }
.app-nav .app-brand { display: inline-block; padding: .3125rem 0; margin-right: 1rem; font-size: 1.25rem; color: #000; text-decoration: none; white-space: nowrap; }
.app-nav .app-brand:hover, .app-nav .app-brand:focus { color: #000; }
.app-nav .app-nav-toggle { padding: .25rem .75rem; font-size: 1.25rem; line-height: 1; color: rgba(0,0,0,.65); background: transparent; border: 1px solid rgba(0,0,0,.15); border-radius: .375rem; cursor: pointer; transition: box-shadow .15s ease-in-out; }
.app-nav-toggle:focus { outline: 0; box-shadow: 0 0 0 .25rem; }
.app-nav-toggle-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center/100% no-repeat; }
.app-nav-links-host { flex-basis: 100%; flex-grow: 1; align-items: center; }
.app-nav .app-nav-links { display: flex; flex-direction: column; padding: 0; margin: 0; list-style: none; }
.app-nav .app-nav-link { display: block; padding: .5rem 0; font: inherit; color: rgba(0,0,0,.65); text-decoration: none; text-align: inherit; background: transparent; border: 0; cursor: pointer; transition: color .15s ease-in-out; }
.app-nav .app-nav-link:hover, .app-nav .app-nav-link:focus { color: rgba(0,0,0,.8); }
.app-nav .app-nav-link.app-nav-active { color: #000; }
.app-nav-link:focus-visible { outline: 0; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }
.app-nav-icon { vertical-align: top !important; }
.app-icon-spaced { margin-left: .5rem; }
.app-message-count { display: inline-block; padding: .35em .65em; font-size: 12px; font-weight: 700; line-height: 1; color: #fff; background: #6c757d; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,.2); }

/* Static below the breakpoint, anchored under Settings on desktop. */
.app-settings { position: relative; }
.app-settings-toggle::after { display: inline-block; margin-left: .255em; vertical-align: .255em; content: ""; border-top: .3em solid; border-right: .3em solid transparent; border-left: .3em solid transparent; }
.app-nav .app-settings-menu { position: static; z-index: 1000; min-width: 10rem; padding: .5rem 0; margin: 0; font-size: 1rem; color: #212529; list-style: none; background: #fff; border: 1px solid rgba(0,0,0,.175); border-radius: .375rem; }
.app-nav .app-settings-item { display: block; width: 100%; padding: .25rem 1rem; color: #212529; text-align: inherit; text-decoration: none; white-space: nowrap; background: transparent; border: 0; }
.app-nav .app-settings-item:hover, .app-nav .app-settings-item:focus { color: #212529; background: #f8f9fa; }
.app-nav .app-settings-item:active { color: #fff; background: #0d6efd; }
.app-settings-divider { height: 0; margin: .5rem 0; overflow: hidden; border-top: 1px solid rgba(0,0,0,.175); }

/*
 * Like the previous offcanvas, the drawer is outside the native top layer.
 * Its backdrop/drawer (1040/1045) remain below shared confirmation/wait layers (1060/1080).
 * Closed content is inert/aria-hidden; CSS owns the slide/fade, with no pending timers.
 */
.app-friends-backdrop { position: fixed; inset: 0; z-index: 1040; visibility: hidden; opacity: 0; background: #000; pointer-events: none; transition: opacity .15s linear, visibility .15s; }
.app-friends-backdrop.app-friends-open { visibility: visible; opacity: .5; pointer-events: auto; }
.app-friends { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1045; display: flex; flex-direction: column; width: 400px; max-width: 100%; padding: 0; visibility: hidden; background: #fff; border-right: 1px solid rgba(0,0,0,.175); outline: 0; transform: translateX(-100%); pointer-events: none; transition: transform .3s ease-in-out, visibility .3s; }
.app-friends.app-friends-open { visibility: visible; transform: none; pointer-events: auto; }
.app-friends-header { display: flex; flex-shrink: 0; align-items: center; padding: 1rem; }
.app-friends .app-friends-title { margin: 0; font-size: 1.25rem; font-weight: 500; line-height: 1.5; }
.app-friends .app-friends-close { box-sizing: content-box; flex: 0 0 auto; width: 1em; height: 1em; padding: .5rem; margin: -.5rem -.5rem -.5rem auto; color: #000; background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; border: 0; border-radius: .375rem; opacity: .5; cursor: pointer; }
.app-friends-close:hover { opacity: .75; }
.app-friends-close:focus { outline: 0; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); opacity: 1; }
.app-friends-body { flex: 1 1 auto; min-height: 0; padding: 1rem; overflow-y: auto; }
.app-friends-list { display: flex; flex-direction: column; padding: 0; margin: 0; border-radius: .375rem; }
.app-friend-row { display: flex; justify-content: space-between; align-items: flex-start; padding: .5rem 1rem; background: #fff; border: 1px solid #dee2e6; }
.app-friend-row + .app-friend-row { border-top-width: 0; }
.app-friend-row:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.app-friend-row:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.app-friend-name { margin-left: .25rem; text-decoration: underline; color: blue; }
.app-friend-chat { margin-left: .5rem; }
.app-friend-mail { margin-left: 1rem; }

@media (min-width: 992px) {
    .app-nav-content { flex-wrap: nowrap; justify-content: flex-start; }
    .app-nav-links-host { display: flex; flex-basis: auto; }
    .app-nav .app-nav-links { flex-direction: row; }
    .app-nav .app-nav-link { padding-right: .5rem; padding-left: .5rem; }
    .app-nav .app-settings-menu { position: absolute; top: 100%; left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .app-nav .app-nav-toggle, .app-nav .app-nav-link, .app-friends, .app-friends-backdrop { transition: none; }
}