/* Styles for Almagest/Components/Shared/ChatLayout.razor.
 *
 * Previously this lived inside an inline <style> block at the BOTTOM of the
 * ChatLayout razor file. That caused FOUC on desktop reload: the browser
 * rendered <MudAppBar class="sg-appbar">, <img class="app-logo">, the credits
 * badge, etc. with default styling first, then re-painted once it parsed the
 * trailing <style> block. After defer'ing MudBlazor.min.js the parser raced
 * to the body even faster, so FOUC became visible on every reload.
 *
 * Hoisting these rules into a CSS file linked from <head> in App.razor makes
 * them render-blocking — the browser fully resolves them before painting any
 * body content, eliminating the white-header / oversized-logo flash.
 */

:root { --appbar-h: var(--mud-appbar-height, 64px); }

.sg-appbar {
    background: rgba(10, 14, 20, .72) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(120, 140, 255, .18);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    color: rgba(255,255,255,.92);
}

/* Burger button. The same .sg-burger class is styled in
   MainLayout.razor.css, but that file is scoped to MainLayout and not
   visible here, so without these rules the button falls back to default
   button styling and gets squeezed into a thin "sausage" shape by the
   dense MudAppBar's flex layout. flex-shrink: 0 prevents the appbar from
   compressing it further when space is tight on mobile. */
.sg-burger {
    width: 40px;
    height: 40px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    flex-shrink: 0;
}
.sg-burger span {
    display: block;
    width: 16px;
    height: 2px;
    background: rgba(255,255,255,0.85);
    border-radius: 99px;
    flex-shrink: 0;
}
.sg-burger:hover {
    background: rgba(120, 140, 255, 0.10);
    border-color: rgba(120, 140, 255, 0.30);
}

.sg-credits-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.75);
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease;
}
.sg-credits-badge.cursor-pointer:hover {
    background: rgba(120, 140, 255, .12);
    border-color: rgba(120, 140, 255, .45);
    color: rgba(255,255,255,.95);
}
.sg-credits-badge .bi { font-size: 13px; color: #f0c040; }

.cursor-pointer { cursor: pointer; }

.layout-root {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: radial-gradient(1200px 800px at 80% 10%, rgba(92, 77, 255, .18), transparent 60%),
    radial-gradient(900px 650px at 20% 10%, rgba(0, 170, 255, .10), transparent 55%),
    #0b0f14;
}
.appbar-spacer { height: var(--appbar-h); flex: 0 0 auto; }

.workspace {
    display: flex;
    flex: 1 1 auto;
    min-height: calc(100dvh - var(--appbar-h));
    min-width: 0;
}

.app-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
    margin-left: 6px;
    opacity: .95;
}

.sg-appbar .mud-typography { color: rgba(255,255,255,.82) !important; }


.chat-drawer {
    width: 280px;
    flex: 0 0 auto;
    border-right: 1px solid rgba(120, 140, 255, .14);
    background: rgba(12, 16, 22, .55) !important;
    backdrop-filter: blur(10px);
    box-shadow: 10px 0 30px rgba(0,0,0,.25);
}

.chat-drawer .mud-list {
    padding: 12px 10px !important;
}

.maincontent-dark {
    background-color: #181c20 !important;
    color: #fff !important;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
    display: flex;
}

.sg-newchat {
    width: 100%;
    justify-content: flex-start;
    border-radius: 14px !important;
    border: 1px solid rgba(56, 255, 196, .28) !important;
    color: rgba(56, 255, 196, .9) !important;
    background: rgba(56, 255, 196, .06) !important;
    text-transform: none !important;
    padding: 10px 12px !important;
}
.sg-newchat:hover {
    background: rgba(56, 255, 196, .10) !important;
    border-color: rgba(56, 255, 196, .42) !important;
}

.sg-chat-item {
    border-radius: 14px !important;
    margin: 6px 0 !important;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    transition: background-color .15s ease, border-color .15s ease;
    overflow: hidden;
}
.sg-chat-item:hover {
    background: rgba(120, 140, 255, .08);
    border-color: rgba(120, 140, 255, .18);
}
.sg-chat-item.is-active {
    background: rgba(120, 140, 255, .14);
    border-color: rgba(120, 140, 255, .35);
}

.sg-chat-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    padding: 10px 10px;
}

.sg-chat-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    cursor: pointer;
    flex: 1 1 auto;
}

.sg-chat-ico {
    color: rgba(120, 200, 255, .9) !important;
    flex: 0 0 auto;
}

.sg-chat-title {
    color: rgba(255,255,255,.86) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* menu button (three dots) зробити "тихішим" */
.sg-chat-menu button,
.sg-chat-menu .mud-button-root {
    color: rgba(255,255,255,.65) !important;
}

/* Main content background transparent to show gradient */
.maincontent-dark {
    background: transparent !important;
    color: #fff !important;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
    display: flex;
}

.logout-button {
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.9);
    border: 1px solid rgba(120, 140, 255, .22);
    border-radius: 12px;
    height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}
.logout-button:hover {
    background: rgba(120, 140, 255, .12);
    border-color: rgba(120, 140, 255, .45);
}

/* On narrow mobile (≤ 600px) drop the "Logout" word — the icon alone is
   still unambiguous and recovers ~50px of header width so the button no
   longer clips off the right edge. */
@media (max-width: 600px) {
    .logout-text { display: none; }
    .logout-form { margin-left: 8px !important; }
    .logout-button { padding: 0 10px; }
    .logout-button .material-icons { margin-right: 0 !important; }
}
</content>
</invoke>