/* ============================================================
   Moqawil (مقاول) – Clean Green Theme (Mobile-first & Responsive)
   Keep class names as-is. This file replaces the old app.css.
   ============================================================ */

/* ---------------- THEME TOKENS (mobile defaults) ---------------- */
:root {
    /* brand */
    --primary: #177E65;
    --primary-600: #0F5E4D;
    --primary-100: #E8F3F0;
    --bg: #fff;
    --text: #1D232A;
    --muted: #F6F8F7;
    --border: #DCE4E1;
    --border-strong: #C8D6D1;
    --shadow: 0 2px 10px rgba(0,0,0,.06);
    --logo-url: url('/images/1.png');
    /* fluid sizing tokens */
    --fs-base: 16px; /* ⤷ body font size (mobile) */
    --fs-sm: .9rem; /* small meta */
    --fs-md: 1rem; /* body / inputs */
    --fs-lg: clamp(18px,3.4vw,24px); /* section titles on phones → desktop */
    --fs-xl: clamp(20px,4vw,28px); /* brand titles */

    --radius: 10px; /* general radius (mobile) */
    --card-radius: 12px;
    --control-h: 44px; /* input/button height (mobile) */
    --space-1: 6px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --card-pad: 12px;
    /* containers */
    --container-pad: 16px;
    --container-max: 1320px;
}

/* ≥480 (small phones/portrait tablets) */
@media (min-width:480px) {
    :root {
        --fs-base: 16.5px;
        --control-h: 44px;
    }
}

/* ≥768 (tablets / small laptops) */
@media (min-width:768px) {
    :root {
        --fs-base: 17px;
        --radius: 11px;
        --card-radius: 13px;
        --control-h: 46px;
        --card-pad: 14px;
    }
}

/* ≥1024 (desktop) */
@media (min-width:1024px) {
    :root {
        --fs-base: 18px;
        --radius: 12px;
        --card-radius: 14px;
        --control-h: 48px;
        --card-pad: 16px;
    }
}

/* ---------------- RESET / BASE ---------------- */
html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%
}

*, *::before, *::after {
    box-sizing: inherit;
    min-width: 0
}

html, body {
    height: 100%
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: var(--fs-base);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto
}

input, select, textarea, button {
    font: inherit
}

* {
    -webkit-tap-highlight-color: transparent
}

:focus {
    outline: none
}

:focus-visible {
    outline: 3px solid rgba(23,126,101,.35);
    outline-offset: 2px
}

a:focus-visible, button:focus-visible {
    box-shadow: 0 0 0 3px rgba(23,126,101,.18)
}

/* ---------------- CONTAINERS ---------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad)
}

.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

.main-content {
    flex-grow: 1;
    padding: var(--space-4)
}

.feed-wrap, .applicants-grid {
    max-width: 1080px;
    margin-inline: auto
}

.tender-grid, .page-shell {
    max-width: var(--container-max);
    margin-inline: auto
}

/* ---------------- HEADER ---------------- */
.header-bar {
    background: var(--bg);
    color: var(--text);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

    .header-bar a {
        color: var(--primary);
        text-decoration: none;
        font-weight: 700;
        opacity: .9
    }

        .header-bar a:hover {
            opacity: 1;
            color: var(--primary-600)
        }

.app-title {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--primary);
    margin-inline-start: auto
}

/* Nav links → horizontal scroll on mobile (prevents wrapping to 2 rows) */
.nav-links-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    overflow: auto;
    white-space: nowrap;
    padding-block: 2px;
    scrollbar-width: none;
}

    .nav-links-wrapper::-webkit-scrollbar {
        display: none
    }

.nav-link-header {
    color: var(--primary);
    font-weight: 700;
    font-size: .9rem;
    opacity: .9
}

    .nav-link-header:hover {
        opacity: 1;
        color: var(--primary-600)
    }

/* ---------------- LANGUAGE DROPDOWN ---------------- */
.language-dropdown {
    position: relative;
    display: flex;
    align-items: center
}

    .language-dropdown button {
        background: transparent;
        border: 0;
        color: var(--primary);
        font-size: .9rem;
        font-weight: 800;
        padding: 6px 10px;
        border-radius: 8px
    }

.language-dropdown-content {
    position: absolute;
    top: 36px;
    inset-inline-end: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 8px 10px;
    border-radius: 10px;
    min-width: 160px;
    z-index: 1000;
    box-shadow: var(--shadow)
}

    .language-dropdown-content a {
        display: block;
        color: var(--text);
        text-decoration: none;
        padding: 6px 2px
    }

        .language-dropdown-content a:hover {
            color: var(--primary)
        }

    .language-dropdown-content .dropdown-item-header {
        padding: 6px 0
    }

/* ---------------- HOME / WATERMARK ---------------- */
.home-container, .welcome-hero {
    position: relative;
    min-height: 100vh;
    padding: 24px;
    background: #fff;
    overflow: hidden;
    display: block
}

    .home-container > *, .welcome-box {
        position: relative;
        z-index: 1
    }

    .home-container::before, .welcome-hero::before {
        content: "";
        position: fixed;
        inset: 0;
        background-image: var(--logo-url);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: min(70vmin,92vw);
        opacity: .05;
        pointer-events: none;
        z-index: 0
    }

.welcome-hero {
    display: flex;
    align-items: center;
    justify-content: center
}

.welcome-box {
    text-align: center;
    padding: 24px
}

.brand-mark {
    width: 110px;
    max-width: 28vw;
    margin-bottom: 14px
}

/* ---------------- TITLES ---------------- */
.welcome-title {
    margin: 0 0 16px;
    color: var(--primary);
    font-weight: 800;
    font-size: clamp(22px,3.2vw,30px)
}

.brand-title {
    color: #146C43;
    font-weight: 800;
    margin: 0;
    font-size: var(--fs-xl)
}

.home-title {
    text-align: center;
    font-size: 26px;
    margin: 28px 0 18px;
    color: var(--text)
}

.page-title-green {
    color: var(--primary);
    font-size: var(--fs-lg)
}

.post-subject, .panel-title, .tender-title {
    font-size: clamp(16px,2.6vw,20px);
    margin: 0
}

/* ---------------- BUTTONS ---------------- */
button, .main-button, .btn-ghost, .btn-primary-green {
    cursor: pointer
}

.main-button {
    width: 100%;
    height: var(--control-h);
    padding: 0 var(--space-4);
    font-size: var(--fs-md);
    font-weight: 800;
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    color: #fff;
    background: var(--primary);
    transition: transform .08s,box-shadow .18s,background-color .18s,border-color .18s;
    margin-bottom: 14px;
    box-shadow: var(--shadow)
}

    .main-button:hover {
        background: var(--primary-600);
        border-color: var(--primary-600)
    }

    .main-button:active {
        transform: translateY(1px)
    }

    .main-button.transparent {
        color: var(--primary-600);
        background: #fff;
        border: 1px solid var(--border);
        box-shadow: var(--shadow)
    }

        .main-button.transparent:hover {
            background: var(--primary-100);
            border-color: var(--border-strong)
        }

.btn-compact {
    padding: 8px 12px;
    font-size: .9rem;
    width: auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px
}

.main-button.btn-compact {
    width: auto !important;
    margin-bottom: 0
}

.btn-group-inline {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

@media (max-width:480px) {
    .btn-group-inline > * {
        flex: 1 1 auto
    }

    .main-button.btn-compact {
        width: 100% !important
    }

    .btn-compact {
        padding: 7px 10px;
        font-size: .85rem
    }
}

.btn-ghost {
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 12px 14px;
    transition: .15s
}

    .btn-ghost:hover {
        background: var(--primary-100);
        transform: translateY(-1px)
    }

.btn-ghost-green {
    background: #fff;
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 800;
    box-shadow: var(--shadow)
}

    .btn-ghost-green:hover {
        background: var(--primary-100);
        transform: translateY(-1px)
    }

.btn-primary-green {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: .95rem;
    font-weight: 800;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 10px;
    box-shadow: var(--shadow);
    text-decoration: none
}

    .btn-primary-green:hover {
        background: var(--primary-600);
        border-color: var(--primary-600);
        color: #fff
    }

    .btn-primary-green:disabled, .main-button:disabled, .btn-ghost:disabled {
        opacity: .6;
        cursor: not-allowed
    }

/* ---------------- INPUTS & FORMS ---------------- */
.main-input, .custom-input, select.main-input, input[type="file"].main-input, textarea.main-input {
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius);
    width: 100%;
    font-size: var(--fs-md);
    line-height: 1.35;
    height: var(--control-h);
    padding-inline: 14px;
    transition: border-color .15s,box-shadow .15s;
    text-align: start !important
}

textarea {
    width: 100%;
    max-width: 100%;
    resize: vertical;
    min-height: 130px;
    height: auto
}

.main-input::placeholder {
    color: #74847e
}

.main-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23,126,101,.12)
}

input, select, textarea, .main-input {
    max-width: 100%;
    min-width: 0;
    -webkit-appearance: none
}

    input[type="file"] {
        width: 100%;
        max-width: 100%
    }

/* Select chevron */
.select-wrap {
    position: relative;
    display: block
}

    .select-wrap::after {
        content: "▾";
        position: absolute;
        inset-inline-end: 12px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        opacity: .7;
        font-size: .9rem
    }

select.main-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-inline-end: 40px;
    background-color: #fff;
    height: var(--control-h);
    color: var(--text)
}

/* Inline input actions */
.input-stack, .input-with-toggle {
    position: relative
}

    .input-with-toggle > .main-input {
        padding-inline-end: 96px
    }

[dir="rtl"] .input-with-toggle > .main-input {
    padding-inline-start: 96px;
    padding-inline-end: 14px
}

@media (max-width:480px) {
    .main-input, select.main-input {
        height: 44px;
        padding-inline: 12px
    }

    .input-with-toggle > .main-input {
        padding-inline-end: 84px
    }

    [dir="rtl"] .input-with-toggle > .main-input {
        padding-inline-start: 84px;
        padding-inline-end: 12px
    }
}

.inline-btn, .reveal-btn, .toggle-btn {
    position: absolute;
    inset-inline-end: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: 32px;
    line-height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,.03)
}

.inline-btn {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary)
}

/* Checkboxes */
input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: auto;
    accent-color: var(--primary)
}

.remember-row, .checkbox-row, .checkline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    user-select: none
}

    .remember-row input[type="checkbox"], .checkline input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin: 0
    }

    .remember-row label, .checkline label, .remember-row span {
        font-size: .9rem;
        color: #5b6b64
    }

/* File upload */
input[type="file"].main-input::file-selector-button,
input[type="file"]::file-selector-button {
    border: 1px solid var(--primary);
    background: #fff;
    color: var(--primary);
    border-radius: 10px;
    padding: 10px 14px;
    margin-inline-end: 8px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: var(--shadow)
}

    input[type="file"].main-input::file-selector-button:hover,
    input[type="file"]::file-selector-button:hover {
        background: var(--primary-100);
        border-color: var(--primary-600)
    }

.upload-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: 1px solid var(--primary);
    background: #fff;
    color: var(--primary);
    border-radius: 10px;
    font-weight: 800;
    box-shadow: var(--shadow);
    cursor: pointer
}

    .upload-chip:hover {
        background: var(--primary-100);
        border-color: var(--primary-600)
    }

/* ---------------- CARDS / META ---------------- */
.brand-card, .card-box, .card-compact {
    background: #fff;
    border: 1px solid #E6E8EA;
    border-radius: var(--card-radius);
    box-shadow: 0 2px 6px rgba(16,24,40,.06);
    color: #344054;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: var(--card-pad)
}

.card-compact {
    padding: calc(var(--card-pad) - 2px)
}

.meta {
    opacity: .75;
    font-size: var(--fs-sm)
}

/* ---------------- FEED / REPLIES / GALLERY ---------------- */
.post-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.post-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px
}

.img-thumb {
    max-width: 260px;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    box-shadow: var(--shadow)
}

@media (max-width:640px) {
    .img-thumb {
        max-width: 100%
    }
}

.replies-box {
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid #E6E8EA;
    border-radius: 10px;
    background: #FAFAFA;
    display: grid;
    gap: 10px
}

@media (max-width:640px) {
    .replies-box {
        padding: 8px 10px
    }
}

.reply-item {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #E6E8EA
}

    .reply-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0
    }

.reply-head {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap
}

.reply-text {
    margin-top: 4px;
    white-space: pre-wrap
}

.reply-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    background: #fff;
    box-shadow: var(--shadow)
}

.brand-spinner {
    color: var(--primary);
    width: 3rem;
    height: 3rem;
    border-width: .35rem
}

/* ---------------- COMPANIES / BADGES ---------------- */
.company-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(0,0,0,.08)
}

.company-title {
    margin: 0 0 6px;
    color: var(--primary);
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.page-title-green {
    color: var(--primary)
}

.company-thumb {
    width: 92px;
    height: 92px;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #fff;
    padding: 6px;
    box-shadow: var(--shadow)
}

.badge-guaranteed {
    display: inline-block;
    border: 1px solid var(--primary);
    color: var(--primary);
    background: var(--primary-100);
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: .75rem
}

.badge {
    display: inline-block;
    min-width: 20px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #155EEF;
    color: #fff;
    text-align: center;
    font-size: .75rem;
    font-weight: 800
}

/* ---------------- GALLERY ---------------- */
.gallery-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow)
}

.gallery-img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow)
}

.gallery-caption {
    padding: 8px 10px;
    font-size: .9rem;
    color: var(--text);
    text-align: center
}

/* ---------------- FIELD ROWS / TOOLBARS ---------------- */
.field-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: baseline;
    margin: 0 0 6px
}

.field-label {
    color: #146C43;
    font-weight: 900
}

.field-value {
    color: #344054
}

.toolbar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap
}

.hr-soft {
    border: none;
    border-top: 1px solid #E6E8EA;
    margin: 12px 0 16px
}

/* ---------------- TENDERS ---------------- */
.tender-grid {
    display: grid;
    gap: 14px
}

.tender-card {
    padding: var(--card-pad)
}

.tender-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap
}

.tender-badges {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap
}

.badge-outline-red {
    border: 1px solid #F04438;
    color: #B42318;
    background: #FEF3F2;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: .75rem;
    font-weight: 800
}

.tender-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 6px
}

.tender-attachments {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px
}

.attach-thumb {
    max-height: 110px;
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid #E6E8EA;
    cursor: zoom-in;
    object-fit: cover
}

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999
}

.lightbox__img {
    max-width: 92%;
    max-height: 92%;
    border-radius: 8px;
    border: 4px solid #fff
}

/* ---------------- APPLICANTS ---------------- */
.applicants-grid {
    display: grid;
    gap: 14px
}

.applicant-card {
    padding: var(--card-pad)
}

.applicant-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.applicant-actor {
    display: flex;
    gap: 8px;
    align-items: center
}

.applicant-body {
    display: grid;
    gap: 8px;
    margin-top: 6px
}

.pre-wrap {
    white-space: pre-wrap
}

.status-badge {
    border-radius: 999px;
    padding: 2px 10px;
    font-size: .75rem;
    font-weight: 800;
    border: 1px solid #E6E8EA;
    background: #fff;
    color: #475467
}

.status-accepted {
    border-color: #12B76A;
    color: #027A48;
    background: #ECFDF3
}

.status-declined {
    border-color: #F04438;
    color: #B42318;
    background: #FEF3F2
}

.status-pending {
    border-color: #E6E8EA;
    color: #475467;
    background: #fff
}

/* ---------------- FORM GRIDS ---------------- */
.form-grid {
    display: grid;
    gap: 12px
}

.form-row {
    display: grid;
    gap: 6px;
    margin-block: 10px
}

.value-box {
    background: #fff;
    border: 1px solid #E6E8EA;
    border-radius: var(--radius);
    padding: 10px 12px
}

@media (max-width:640px) {
    .brand-card, .card-box, .card-compact, .panel {
        padding: 12px;
        border-radius: 12px
    }

    .toolbar-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px
    }

    .form-row {
        margin-block: 6px;
        gap: 6px
    }

    .main-button {
        height: 44px
    }
    /* value rows (phone/address) read better as simple rows on phones */
    .value-box {
        display: flex;
        align-items: center;
        gap: 8px;
        border-radius: 10px
    }
}

/* ---------------- HUBS / BUTTON SECTIONS ---------------- */
.service-grid, .button-section {
    display: grid;
    gap: 12px;
    max-width: 520px;
    margin-inline: auto;
    grid-template-columns: 1fr
}

@media (min-width:480px) {
    .service-grid, .button-section {
        grid-template-columns: 1fr 1fr
    }
}

@media (min-width:992px) {
    .page-shell {
        display: grid;
        grid-template-columns: 1fr 360px;
        align-items: start;
        gap: 16px
    }

    .button-section {
        grid-template-columns: repeat(3,1fr);
        max-width: 100%
    }
}

/* ---------------- PANELS ---------------- */
.panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: var(--card-pad);
    box-shadow: var(--shadow)
}

.panel-title {
    margin: 0 0 8px;
    color: var(--primary);
    font-weight: 900;
    font-size: 1rem
}

.quick-link {
    display: block;
    text-decoration: none;
    color: var(--text);
    padding: 8px 0
}

    .quick-link:hover {
        color: var(--primary)
    }

.home-subtitle {
    text-align: center;
    color: #475467;
    margin-top: -8px;
    margin-bottom: 16px
}

/* chips & tos */
.name-with-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.type-chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
    background: #ECFDF3;
    color: #027A48;
    border: 1px solid #D1FADF
}

.tos-scroll {
    max-height: 180px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    background: #fafafa
}

.agree-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px
}

/* validation */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050
}

.invalid {
    outline: 1px solid #d93025
}

.validation-message {
    color: #d93025
}

/* ---------------- Blazor error UI ---------------- */
#blazor-error-ui {
    background: #fff8e1;
    color: #8a6d3b;
    bottom: 0;
    left: 0;
    width: 100%;
    position: fixed;
    z-index: 1000;
    display: none;
    box-shadow: 0 -1px 6px rgba(0,0,0,.15);
    padding: .65rem 1rem
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: .75rem;
        top: .5rem
    }

.blazor-error-boundary::after {
    content: "An error has occurred.";
    background: #b32121;
    color: #fff
}

/* ---------------- SAFE AREAS ---------------- */
.status-bar-safe-area {
    display: none
}

@supports (-webkit-touch-callout:none) {
    .status-bar-safe-area {
        display: flex;
        position: sticky;
        top: 0;
        height: env(safe-area-inset-top);
        background: var(--bg);
        width: 100%;
        z-index: 1
    }
}

/* ---------------- VISIBILITY HELPERS ---------------- */
.hidden-mobile {
    display: none !important
}

@media (min-width:768px) {
    .hidden-mobile {
        display: initial !important
    }

    .hidden-desktop {
        display: none !important
    }
}

/* ---------------- SPLASH ---------------- */
#app-splash {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--splash-bg,#0b1215);
    z-index: 99999
}

.splash-card {
    width: min(520px,92vw);
    padding: 28px 24px;
    border-radius: 16px;
    background: #0f1a1f;
    color: #e6f1f5;
    box-shadow: 0 10px 30px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.06)
}

.splash-title {
    font-weight: 900;
    letter-spacing: .3px;
    margin-bottom: 6px;
    font-size: 1rem
}

.splash-sub {
    opacity: .8;
    font-size: .9rem;
    margin-bottom: 14px
}

.splash-progress {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden
}

.splash-bar {
    height: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    background: linear-gradient(90deg,#22d3ee,#14b8a6);
    transition: transform .1s linear
}

/* ---------------- AUTH PAGES (scoped widths only) ---------------- */
.signup-page .brand-card, .signin-page .brand-card,
.signup-page .card-box, .signin-page .card-box {
    max-width: 620px;
    margin-inline: auto
}

/* Lower watermark opacity on content-heavy pages */
.page-watermark, .hero-watermark {
    opacity: .04 !important
}

/* Submit button alias */
button[type="submit"].main-button, button.main-submit {
    width: 100%;
    height: var(--control-h);
    border-radius: 10px;
    border: none;
    background: var(--primary);
    color: #fff;
    font-weight: 800
}

/* ---------------- UTILITIES ---------------- */
.clamp-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.dir-ltr {
    direction: ltr;
    unicode-bidi: plaintext
}

.no-wrap {
    white-space: nowrap
}

/* ---------------- OPTIONAL CHAT LAYOUT HOOKS (no HTML change needed if classes exist) ----------------
   If your chat uses .chat-shell/.chat-sidebar/.chat-main/.chat-composer these will stack on phones. */
.chat-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px
}

.chat-sidebar {
    display: block
}

@media (min-width:992px) {
    .chat-shell {
        grid-template-columns: 320px 1fr
    }
}

.chat-composer {
    position: sticky;
    bottom: 0;
    background: var(--bg);
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border)
}