/* ==========================================================================
   REESPONDER UI REFERENCE — VARIANT 1
   04 / APPLICATION LAYOUTS
   ========================================================================== */

/* ==========================================================================
   APP SHELL
   ========================================================================== */

.ui-app {
    display:
        grid;

    grid-template-columns:
        var(--ui-sidebar-width)
        minmax(0, 1fr);

    min-height:
        100vh;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.ui-sidebar {
    position:
        sticky;

    top:
        0;

    display:
        flex;

    flex-direction:
        column;

    height:
        100vh;

    background:
        var(--ui-sidebar);

    color:
        var(--ui-sidebar-text);

    overflow:
        hidden;
}

.ui-sidebar-head {
    display:
        flex;

    align-items:
        center;

    min-height:
        62px;

    padding:
        0
        18px;

    border-bottom:
        1px
        solid
        var(--ui-sidebar-border);
}

.ui-product-mark {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--ui-sidebar-text);

    font-size:
        var(--ui-size-14);

    font-weight:
        var(--ui-weight-semibold);

    letter-spacing:
        -0.015em;
}

.ui-product-mark-box {
    display:
        grid;

    width:
        27px;

    height:
        27px;

    place-items:
        center;

    border:
        1px
        solid
        #434940;

    border-radius:
        4px;

    background:
        #1d201c;

    font-size:
        var(--ui-size-11);

    font-weight:
        var(--ui-weight-bold);
}

.ui-sidebar-body {
    flex:
        1;

    padding:
        14px
        10px;

    overflow-y:
        auto;
}

.ui-sidebar-section {
    margin-bottom:
        22px;
}

.ui-sidebar-section-title {
    padding:
        0
        10px
        7px;

    color:
        var(--ui-sidebar-text-muted);

    font-size:
        10px;

    font-weight:
        var(--ui-weight-semibold);

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;
}

.ui-sidebar-nav {
    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}

.ui-sidebar-link {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-height:
        36px;

    padding:
        0
        10px;

    border-radius:
        4px;

    color:
        var(--ui-sidebar-text-soft);

    font-size:
        var(--ui-size-13);

    font-weight:
        var(--ui-weight-medium);

    text-decoration:
        none;
}

.ui-sidebar-link:hover {
    background:
        var(--ui-sidebar-hover);

    color:
        var(--ui-sidebar-text);
}

.ui-sidebar-link-active {
    background:
        var(--ui-sidebar-active);

    color:
        var(--ui-sidebar-text);
}

.ui-sidebar-icon {
    display:
        inline-flex;

    width:
        18px;

    flex:
        0
        0
        18px;

    align-items:
        center;

    justify-content:
        center;

    color:
        inherit;

    opacity:
        0.85;
}

.ui-sidebar-count {
    min-width:
        22px;

    margin-left:
        auto;

    padding:
        1px
        5px;

    border:
        1px
        solid
        #424740;

    border-radius:
        3px;

    color:
        var(--ui-sidebar-text-muted);

    font-size:
        10px;

    text-align:
        center;
}

.ui-sidebar-foot {
    padding:
        12px;

    border-top:
        1px
        solid
        var(--ui-sidebar-border);
}

.ui-sidebar-account {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        8px;

    border-radius:
        4px;

    cursor:
        pointer;
}

.ui-sidebar-account:hover {
    background:
        var(--ui-sidebar-hover);
}

.ui-sidebar-account-avatar {
    display:
        grid;

    width:
        30px;

    height:
        30px;

    place-items:
        center;

    border:
        1px
        solid
        #3c413a;

    border-radius:
        50%;

    background:
        #232622;

    color:
        var(--ui-sidebar-text);

    font-size:
        10px;

    font-weight:
        var(--ui-weight-semibold);
}

.ui-sidebar-account-copy {
    min-width:
        0;
}

.ui-sidebar-account-name {
    color:
        var(--ui-sidebar-text);

    font-size:
        var(--ui-size-12);

    font-weight:
        var(--ui-weight-medium);

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}

.ui-sidebar-account-plan {
    color:
        var(--ui-sidebar-text-muted);

    font-size:
        10px;
}

/* ==========================================================================
   MAIN APPLICATION AREA
   ========================================================================== */

.ui-main {
    min-width:
        0;
}

.ui-topbar {
    position:
        sticky;

    top:
        0;

    z-index:
        20;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        var(--ui-topbar-height);

    padding:
        0
        24px;

    border-bottom:
        1px
        solid
        var(--ui-border);

    background:
        rgba(255, 255, 255, 0.96);

    backdrop-filter:
        blur(6px);
}

.ui-topbar-left,
.ui-topbar-right {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}

.ui-topbar-title {
    color:
        var(--ui-text);

    font-size:
        var(--ui-size-13);

    font-weight:
        var(--ui-weight-semibold);
}

.ui-topbar-crumb {
    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-12);
}

.ui-page {
    width:
        min(
            calc(100% - 48px),
            var(--ui-page-max)
        );

    margin:
        0
        auto;

    padding:
        34px
        0
        64px;
}

/* ==========================================================================
   PAGE HEADER
   ========================================================================== */

.ui-page-header {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        28px;

    margin-bottom:
        28px;
}

.ui-page-header-copy {
    min-width:
        0;
}

.ui-page-header h1 {
    margin-bottom:
        6px;
}

.ui-page-header p {
    max-width:
        700px;

    margin:
        0;

    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-13);
}

.ui-page-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;

    flex:
        0
        0
        auto;
}

/* ==========================================================================
   SECTION
   ========================================================================== */

.ui-section {
    margin-top:
        36px;
}

.ui-section:first-child {
    margin-top:
        0;
}

.ui-section-head {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        14px;
}

.ui-section-head h2 {
    margin:
        0;

    font-size:
        var(--ui-size-16);
}

.ui-section-description {
    margin:
        4px
        0
        0;

    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-12);
}

/* ==========================================================================
   GRID LAYOUTS
   ========================================================================== */

.ui-grid-2 {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        18px;
}

.ui-grid-3 {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        18px;
}

.ui-grid-sidebar {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        320px;

    gap:
        22px;

    align-items:
        start;
}

.ui-grid-sidebar-left {
    grid-template-columns:
        260px
        minmax(0, 1fr);
}

/* ==========================================================================
   SETTINGS LAYOUT
   ========================================================================== */

.ui-settings-layout {
    display:
        grid;

    grid-template-columns:
        210px
        minmax(0, 1fr);

    gap:
        42px;

    max-width:
        var(--ui-settings-max);
}

.ui-settings-nav {
    position:
        sticky;

    top:
        calc(
            var(--ui-topbar-height) +
            24px
        );

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}

.ui-settings-nav-link {
    display:
        flex;

    align-items:
        center;

    min-height:
        34px;

    padding:
        0
        10px;

    border-radius:
        4px;

    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-13);

    font-weight:
        var(--ui-weight-medium);

    text-decoration:
        none;
}

.ui-settings-nav-link:hover {
    background:
        var(--ui-surface-strong);

    color:
        var(--ui-text);
}

.ui-settings-nav-link-active {
    background:
        var(--ui-surface-strong);

    color:
        var(--ui-text);
}

.ui-settings-content {
    min-width:
        0;
}

/* ==========================================================================
   DETAIL PAGE
   ========================================================================== */

.ui-detail-layout {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        300px;

    gap:
        24px;

    align-items:
        start;
}

.ui-detail-side {
    position:
        sticky;

    top:
        calc(
            var(--ui-topbar-height) +
            24px
        );
}

/* ==========================================================================
   CONVERSATION LAYOUT
   ========================================================================== */

.ui-conversations {
    display:
        grid;

    grid-template-columns:
        320px
        minmax(0, 1fr);

    height:
        calc(
            100vh -
            var(--ui-topbar-height)
        );

    margin:
        -34px
        -24px
        -64px;

    border-top:
        0;
}

.ui-conversation-list {
    border-right:
        1px
        solid
        var(--ui-border);

    background:
        var(--ui-surface);
}

.ui-conversation-list-head {
    padding:
        14px;

    border-bottom:
        1px
        solid
        var(--ui-border);
}

.ui-conversation-item {
    padding:
        13px
        14px;

    border-bottom:
        1px
        solid
        var(--ui-border-soft);

    cursor:
        pointer;
}

.ui-conversation-item:hover {
    background:
        var(--ui-surface-muted);
}

.ui-conversation-item-active {
    background:
        var(--ui-accent-softer);
}

.ui-conversation-customer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;
}

.ui-conversation-customer strong {
    font-size:
        var(--ui-size-13);
}

.ui-conversation-time {
    color:
        var(--ui-text-faint);

    font-size:
        10px;
}

.ui-conversation-preview {
    margin-top:
        4px;

    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-11);

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}

.ui-conversation-pane {
    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    background:
        #f8f9f6;
}

.ui-conversation-head {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        58px;

    padding:
        0
        18px;

    border-bottom:
        1px
        solid
        var(--ui-border);

    background:
        var(--ui-surface);
}

.ui-message-stream {
    flex:
        1;

    padding:
        24px;

    overflow-y:
        auto;
}

.ui-message {
    max-width:
        680px;

    margin-bottom:
        18px;
}

.ui-message-meta {
    margin-bottom:
        5px;

    color:
        var(--ui-text-faint);

    font-size:
        10px;
}

.ui-message-bubble {
    display:
        inline-block;

    padding:
        10px
        12px;

    border:
        1px
        solid
        var(--ui-border);

    border-radius:
        var(--ui-radius-sm);

    background:
        var(--ui-surface);

    color:
        var(--ui-text-soft);

    font-size:
        var(--ui-size-13);

    line-height:
        1.55;
}

.ui-message-agent {
    margin-left:
        auto;

    text-align:
        right;
}

.ui-message-agent .ui-message-bubble {
    background:
        #eef4ff;

    border-color:
        #c8d8fb;

    color:
        #22385f;

    text-align:
        left;
}

.ui-message-composer {
    padding:
        14px
        18px;

    border-top:
        1px
        solid
        var(--ui-border);

    background:
        var(--ui-surface);
}

.ui-message-composer-box {
    display:
        flex;

    align-items:
        flex-end;

    gap:
        10px;

    padding:
        8px;

    border:
        1px
        solid
        var(--ui-border-strong);

    border-radius:
        var(--ui-radius-md);

    background:
        var(--ui-surface);
}

.ui-message-composer textarea {
    min-height:
        38px;

    max-height:
        140px;

    flex:
        1;

    padding:
        8px;

    border:
        0;

    resize:
        none;
}

.ui-message-composer textarea:focus {
    outline:
        none;
}

/* ==========================================================================
   AUTH LAYOUT
   ========================================================================== */

.ui-auth-shell {
    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        430px;

    min-height:
        100vh;

    background:
        var(--ui-surface);
}

.ui-auth-context {
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    padding:
        44px;

    background:
        var(--ui-sidebar);

    color:
        var(--ui-text-inverse);
}

.ui-auth-context-copy {
    max-width:
        600px;

    margin-top:
        auto;

    margin-bottom:
        auto;
}

.ui-auth-context h1 {
    max-width:
        540px;

    color:
        var(--ui-text-inverse);

    font-size:
        34px;

    line-height:
        1.15;
}

.ui-auth-context p {
    max-width:
        540px;

    color:
        var(--ui-sidebar-text-muted);

    font-size:
        var(--ui-size-14);
}

.ui-auth-panel {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        40px;
}

.ui-auth-form {
    width:
        100%;

    max-width:
        330px;
}

.ui-auth-form-head {
    margin-bottom:
        28px;
}

.ui-auth-form-head h2 {
    margin-bottom:
        6px;

    font-size:
        var(--ui-size-24);
}

.ui-auth-form-head p {
    margin:
        0;

    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-13);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
    .ui-grid-sidebar,
    .ui-detail-layout {
        grid-template-columns:
            1fr;
    }

    .ui-detail-side {
        position:
            static;
    }

    .ui-grid-3 {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 900px) {
    .ui-app {
        grid-template-columns:
            1fr;
    }

    .ui-sidebar {
        display:
            none;
    }

    .ui-settings-layout {
        grid-template-columns:
            1fr;
    }

    .ui-settings-nav {
        position:
            static;

        flex-direction:
            row;

        overflow-x:
            auto;

        padding-bottom:
            4px;
    }

    .ui-settings-nav-link {
        flex:
            0
            0
            auto;
    }

    .ui-auth-shell {
        grid-template-columns:
            1fr;
    }

    .ui-auth-context {
        display:
            none;
    }

    .ui-auth-panel {
        min-height:
            100vh;
    }
}

@media (max-width: 720px) {
    .ui-page {
        width:
            calc(
                100% -
                24px
            );

        padding-top:
            24px;
    }

    .ui-page-header {
        flex-direction:
            column;
    }

    .ui-page-actions {
        width:
            100%;

        justify-content:
            flex-start;
    }

    .ui-grid-2,
    .ui-grid-3 {
        grid-template-columns:
            1fr;
    }

    .ui-conversations {
        grid-template-columns:
            1fr;

        margin-inline:
            -12px;
    }

    .ui-conversation-list {
        display:
            none;
    }

    .ui-topbar {
        padding-inline:
            12px;
    }
}