@font-face {
    font-family: 'Inter Thin';
    src: url('../fonts/inter/Inter-Thin-BETA.otf') format('opentype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Thin';
    src: url('../fonts/inter/Inter-ThinItalic-BETA.otf') format('opentype');
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Extra Light';
    src: url('../fonts/inter/Inter-ExtraLight-BETA.otf') format('opentype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Extra Light';
    src: url('../fonts/inter/Inter-ExtraLightItalic-BETA.otf') format('opentype');
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Light';
    src: url('../fonts/inter/Inter-Light-BETA.otf') format('opentype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Light';
    src: url('../fonts/inter/Inter-LightItalic-BETA.otf') format('opentype');
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-Thin-BETA.otf') format('opentype');
    font-style: normal;
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-ThinItalic-BETA.otf') format('opentype');
    font-style: italic;
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-ExtraLight-BETA.otf') format('opentype');
    font-style: normal;
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-ExtraLightItalic-BETA.otf') format('opentype');
    font-style: italic;
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-Light-BETA.otf') format('opentype');
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-LightItalic-BETA.otf') format('opentype');
    font-style: italic;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-Regular.otf') format('opentype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-Italic.otf') format('opentype');
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Medium';
    src: url('../fonts/inter/Inter-Medium.otf') format('opentype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Medium';
    src: url('../fonts/inter/Inter-MediumItalic.otf') format('opentype');
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Inter SemiBold';
    src: url('../fonts/inter/Inter-SemiBold.otf') format('opentype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Inter SemiBold';
    src: url('../fonts/inter/Inter-SemiBoldItalic.otf') format('opentype');
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Bold';
    src: url('../fonts/inter/Inter-Bold.otf') format('opentype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Bold';
    src: url('../fonts/inter/Inter-BoldItalic.otf') format('opentype');
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Inter ExtraBold';
    src: url('../fonts/inter/Inter-ExtraBold.otf') format('opentype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Inter ExtraBold';
    src: url('../fonts/inter/Inter-ExtraBoldItalic.otf') format('opentype');
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Black';
    src: url('../fonts/inter/Inter-Black.otf') format('opentype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Black';
    src: url('../fonts/inter/Inter-BlackItalic.otf') format('opentype');
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-Medium.otf') format('opentype');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-MediumItalic.otf') format('opentype');
    font-style: italic;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-SemiBold.otf') format('opentype');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-SemiBoldItalic.otf') format('opentype');
    font-style: italic;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-Bold.otf') format('opentype');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-BoldItalic.otf') format('opentype');
    font-style: italic;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-ExtraBold.otf') format('opentype');
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-ExtraBoldItalic.otf') format('opentype');
    font-style: italic;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-Black.otf') format('opentype');
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-BlackItalic.otf') format('opentype');
    font-style: italic;
    font-weight: 900;
    font-display: swap;
}

body {
    /* Reference theme: indigo/sky base; orange gradient (video-agency) for selected/hover emphasis */
    --ref-primary: #4f46e5;
    --ref-primary-hover: #4338ca;
    --ref-secondary: #0ea5e9;
    --ref-indigo: #3730a3;
    --ref-bg: #f8fafc;
    --ref-bg-light: #eef2ff;
    --ref-text: #0f172a;
    --ref-muted: #64748b;
    --ref-border: #e2e8f0;
    --ref-danger: #dc2626;
    --ref-danger-soft: #fef2f2;
    --ref-success: #16a34a;
    --ref-success-soft: #ecfdf3;
    --ref-orange-400: #fb923c;
    --ref-orange-500: #f97316;
    --ref-orange-600: #ea580c;
    --ref-orange-soft: #fff7ed;
    --ref-orange-border: #fdba74;
    --portal-orange-gradient: linear-gradient(140deg, #fb923c, #f97316);
    --portal-orange-glow: 0 14px 32px rgb(249 115 22 / 0.28);
    --portal-sidebar-start: #312e81;
    --portal-sidebar-end: #1e1b4b;
    --portal-accent: #4f46e5;
    --portal-accent-dark: #4338ca;
    --portal-accent-soft: #eef2ff;
    --portal-font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --portal-font-size: 16px;
    font-family: var(--portal-font-family);
    font-size: var(--portal-font-size);
    font-weight: 400;
}

body.clientflow-shell {
    --clientflow-bg: #f8fafc;
    --clientflow-surface: #ffffff;
    --clientflow-panel: #ffffff;
    --clientflow-border: rgb(79 70 229 / 0.12);
    --clientflow-text: #0f172a;
    --clientflow-muted: #64748b;
    --clientflow-accent: #4f46e5;
    --clientflow-accent-dark: #4338ca;
    --clientflow-accent-soft: #eef2ff;
    --clientflow-pill: #eef2ff;
}

body {
    background: var(--ref-bg);
    color: var(--ref-text);
}

body.clientflow-shell {
    background: var(--clientflow-bg);
    color: var(--clientflow-text);
    padding-top: 0;
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

body {
    padding-top: 78px;
}

body.clientflow-shell .alert {
    border-radius: 1rem;
    border: 1px solid var(--clientflow-border);
}

.clientflow-app-shell {
    min-height: 100vh;
    height: 100vh;
    max-height: 100vh;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
}

.clientflow-sidebar {
    background: #fff;
    border-right: 1px solid rgb(15 23 42 / 0.08);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 1.1rem 1rem;
    gap: 1.125rem;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.clientflow-sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
    overflow-x: hidden;
    overflow-y: auto;
}

.clientflow-sidebar-quicklinks {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 4px;
    padding-top: .75rem;
    border-top: 1px solid rgb(15 23 42 / 0.08);
}

.clientflow-quicklink {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 2px;
    border-radius: .6rem;
    text-decoration: none;
    color: var(--clientflow-muted);
    transition: background-color .18s ease, color .18s ease;
}

.clientflow-quicklink:hover {
    background: var(--ref-orange-soft, #fff7ed);
    color: var(--clientflow-text);
}

.clientflow-quicklink-icon {
    width: 32px;
    height: 32px;
    border-radius: .55rem;
    background: var(--clientflow-accent-soft, #eeecff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    color: var(--portal-accent, #4f46e5);
}

.clientflow-quicklink.active .clientflow-quicklink-icon {
    background: var(--portal-accent, #4f46e5);
    color: #fff;
}

.clientflow-quicklink.active {
    color: var(--portal-accent, #4f46e5);
}

.clientflow-quicklink-label {
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.clientflow-sidebar-head {
    padding: .15rem .2rem .25rem;
}

.clientflow-brand-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    color: inherit;
}

.clientflow-brand-logo {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    object-fit: contain;
    background: #fff;
    padding: 3px;
    box-shadow: 0 8px 18px rgba(43, 41, 31, 0.08);
}

.clientflow-brand-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.clientflow-brand-subtitle {
    color: var(--clientflow-muted);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.clientflow-nav {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.clientflow-nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    padding: .95rem 1rem;
    border-radius: .75rem;
    text-decoration: none;
    color: var(--clientflow-text);
    font-size: .95rem;
    font-weight: 600;
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.clientflow-nav-link:hover {
    background: var(--ref-orange-soft);
    color: var(--clientflow-text);
}

.clientflow-nav-link.active {
    background: var(--portal-orange-gradient);
    color: #fff;
    box-shadow: var(--portal-orange-glow);
}

.clientflow-nav-link:not(.active) {
    background: transparent;
}

.clientflow-nav-cta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    padding: .95rem 1rem;
    border-radius: .75rem;
    text-decoration: none;
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    background: var(--cf-primary, #5b4bff);
    box-shadow: 0 8px 18px rgba(91, 75, 255, .28);
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
    margin-bottom: .2rem;
}

.clientflow-nav-cta:hover {
    background: var(--cf-primary-light, #786dff);
    color: #fff;
}

.clientflow-nav-icon {
    width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
}

.clientflow-nav-icon i {
    font-size: .95rem;
    line-height: 1;
}

.clientflow-nav-badge {
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
}

.clientflow-sidebar-foot {
    margin-top: auto;
}

.clientflow-sidebar-block {
    margin-top: .35rem;
}

.clientflow-sidebar-title {
    color: #5f7c82;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: .65rem;
    padding: 0 .2rem;
}

.clientflow-sidebar-order-list {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.clientflow-sidebar-order {
    display: block;
    padding: 11px 13px;
    border-radius: 13px;
    background: #fff;
    border: 1px solid rgb(15 23 42 / 0.08);
    text-decoration: none;
    color: inherit;
}

.clientflow-sidebar-order:hover {
    color: inherit;
    border-color: rgb(79 70 229 / 0.24);
}

.clientflow-sidebar-order-code {
    font-size: .656rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--portal-accent);
    margin-bottom: .3rem;
}

.clientflow-sidebar-order-name {
    font-weight: 700;
    font-size: .78rem;
    line-height: 1.35;
}

.clientflow-sidebar-order-status {
    margin-top: .35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 700;
    border: none;
    white-space: nowrap;
}

.clientflow-sidebar-order-status.status-in-progress {
    background-color: #FFF4E0;
    color: #92600B;
}

.clientflow-sidebar-order-status.status-pending {
    background-color: #EEF0F4;
    color: #43485A;
}

.clientflow-sidebar-order-status.status-assigned {
    background-color: #EEF0F4;
    color: #43485A;
}

.clientflow-sidebar-order-status.status-paused {
    background-color: #EEF0F4;
    color: #43485A;
}

.clientflow-sidebar-order-status.status-waiting {
    background-color: #EEF0F4;
    color: #43485A;
}

.clientflow-sidebar-order-status.status-quality-check {
    background-color: #E3F5F4;
    color: #0F6E6E;
}

.clientflow-sidebar-order-status.status-delivered {
    background-color: #F1F2FE;
    color: #4B3CE8;
}

.clientflow-sidebar-order-status.status-completed {
    background-color: #E7F7EE;
    color: #157F45;
}

.clientflow-sidebar-order-status.status-archived,
.clientflow-sidebar-order-status.status-archive {
    background-color: #EEF0F4;
    color: #6B6E85;
}

.clientflow-sidebar-order-status.status-revision-requested,
.clientflow-sidebar-order-status.status-revision {
    background-color: #FDECEA;
    color: #B3261E;
}

.clientflow-user-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    padding: .2rem 0;
    border-radius: 0;
    background: transparent;
    border: 0;
}

.clientflow-user-avatar {
    width: 42px;
    height: 42px;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, #f9f6ef 0%, #ebe6d8 100%);
    border: 1px solid rgba(95, 88, 58, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
}

.clientflow-user-name {
    font-weight: 700;
    font-size: .9rem;
}

.clientflow-user-role {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--clientflow-muted);
}

.clientflow-user-logout {
    text-decoration: none;
    color: var(--clientflow-muted);
    font-size: .8rem;
    font-weight: 700;
}

.clientflow-main {
    padding: 1rem 1.35rem 1.35rem;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.clientflow-topbar {
    position: static;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0 1rem;
    background: transparent;
    backdrop-filter: none;
    flex-shrink: 0;
}

.clientflow-topbar-brand,
.clientflow-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.clientflow-topbar-actions-end {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.clientflow-topbar-spacer {
    flex: 1 1 auto;
    min-height: 1px;
}

.clientflow-content {
    min-width: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

.clientflow-header-menu {
    position: relative;
}

.clientflow-icon-button {
    width: calc(54px * 0.6);
    height: calc(54px * 0.6);
    border-radius: 999px;
    border: 1px solid rgb(15 23 42 / 0.18);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #0f172a;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    padding: 0;
}

.clientflow-header-icon {
    width: calc(1.2rem * 0.6);
    height: calc(1.2rem * 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: calc(1.2rem * 0.6);
    line-height: 1;
    color: #23434a;
}

.clientflow-icon-button:hover,
.clientflow-link-icon:hover,
.portal-notification-bell:hover,
.project-support-launcher:hover {
    transform: translateY(-1px);
    border-color: rgb(79 70 229 / 0.34);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
    background: #f9feff;
}

.clientflow-link-icon {
    position: relative;
    text-decoration: none;
    color: #0f172a;
}

.portal-notification-bell,
.project-support-launcher {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
    overflow: visible;
    padding: 0;
}

.clientflow-icon-button .portal-user-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.clientflow-icon-button .portal-user-avatar-fallback {
    font-size: calc(.85rem * 0.6);
    font-weight: 700;
    color: #3730a3;
}

.clientflow-logout-glyph {
    position: relative;
    width: 16px;
    height: 16px;
    display: block;
}

.clientflow-logout-glyph::before {
    content: '';
    position: absolute;
    left: 1px;
    top: 2px;
    width: 8px;
    height: 10px;
    border: 2px solid currentColor;
    border-right: 0;
    border-radius: 8px 0 0 8px;
}

.clientflow-logout-glyph::after {
    content: '';
    position: absolute;
    right: 0;
    top: 6px;
    width: 9px;
    height: 2px;
    background: currentColor;
    transform: translateX(-1px);
}

.clientflow-header-dropdown {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    min-width: 180px;
    padding: .85rem;
    border-radius: .85rem;
    background: #fff;
    border: 1px solid rgb(15 23 42 / 0.10);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.clientflow-notification-dropdown {
    width: min(360px, calc(100vw - 2rem));
    padding: .8rem;
}

.clientflow-header-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .65rem;
}

.clientflow-header-dropdown-title {
    font-weight: 700;
    color: #0f172a;
}

.clientflow-header-dropdown-text {
    color: #5f7c82;
    font-size: .85rem;
    margin-top: .2rem;
}

.clientflow-header-dropdown-link {
    display: block;
    text-decoration: none;
    color: #0f172a;
    font-weight: 600;
}

.clientflow-header-dropdown-link-inline {
    font-size: .82rem;
    color: var(--clientflow-accent-dark);
}

.clientflow-notification-list {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    max-height: 350px;
    overflow-y: auto;
}

.clientflow-notification-item {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: .75rem .8rem;
    border-radius: .9rem;
    border: 1px solid rgb(15 23 42 / 0.08);
    background: #fbfdff;
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.clientflow-notification-item:hover {
    color: inherit;
    transform: translateY(-1px);
    border-color: rgb(79 70 229 / 0.24);
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.clientflow-notification-item.is-unread {
    border-color: rgb(79 70 229 / 0.24);
    background: linear-gradient(180deg, #f7fefe 0%, #ffffff 100%);
}

.clientflow-notification-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .3rem;
}

.clientflow-notification-item-title {
    font-weight: 700;
    color: #0f172a;
}

.clientflow-notification-item-message {
    font-size: .88rem;
    line-height: 1.45;
    color: #5f7c82;
}

.clientflow-notification-item-time {
    margin-top: .35rem;
    font-size: .76rem;
    color: #7b9197;
}

.clientflow-notification-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 999px;
    background: var(--ref-danger);
}

.clientflow-notification-empty {
    padding: .8rem;
    border-radius: .85rem;
    background: #fbfdff;
    color: #6b7f86;
    font-size: .9rem;
}

.clientflow-header-dropdown-link.is-danger {
    color: var(--ref-danger);
}

.clientflow-logout-link {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid rgb(15 23 42 / 0.10);
    display: flex;
    align-items: center;
    gap: .6rem;
}

.clientflow-dropdown-icon {
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
}

.clientflow-alert {
    margin-bottom: 1rem;
}

.clientflow-invoice-download {
    white-space: nowrap;
    border-radius: 999px;
}

.clientflow-invoice-search {
    position: relative;
    min-width: min(320px, 100%);
}

.clientflow-invoice-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7f86;
    pointer-events: none;
}

.clientflow-invoice-search .form-control {
    padding-left: 2.5rem;
    border-radius: 999px;
}

.clientflow-orders-head {
    gap: 1rem;
}

.clientflow-order-search {
    min-width: min(320px, 100%);
}

.clientflow-order-item {
    align-items: flex-start;
}

.clientflow-order-topline {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.clientflow-order-description {
    max-width: 760px;
}

.clientflow-order-archive-item {
    align-items: center;
}

.clientflow-order-archive-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: nowrap;
}

.clientflow-order-archive-main {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
}

.clientflow-order-archive-title {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clientflow-order-archive-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}

.clientflow-order-archive-info {
    padding: .2rem .45rem;
    line-height: 1;
    color: var(--clientflow-muted, #6c757d);
    text-decoration: none;
}

.clientflow-order-archive-info:hover,
.clientflow-order-archive-info:focus {
    color: var(--clientflow-primary, #0d6efd);
}

.clientflow-order-downloads {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.clientflow-order-download-btn {
    max-width: 100%;
    border-radius: 999px;
    white-space: nowrap;
}

.clientflow-page {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Gemini order view: lock layout to main column height so chat compose stays in viewport */
.clientflow-content:has(.clientflow-project-layout--gemini) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
}

.clientflow-page:has(.clientflow-project-layout--gemini) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.clientflow-page:has(.clientflow-project-layout--gemini) > .clientflow-project-layout--gemini {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
    grid-template-rows: minmax(0, 1fr);
}

.clientflow-app-shell .clientflow-project-main--gemini {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.clientflow-page-header {
    margin-bottom: 1.6rem;
    margin-top: .15rem;
    text-align: center;
}

.clientflow-page-header .clientflow-kicker {
    display: inline-flex;
    align-items: center;
    color: var(--portal-accent, #4f46e5);
    background: var(--clientflow-accent-soft, #eeecff);
    padding: .3rem .8rem;
    border-radius: 999px;
    margin-bottom: .7rem;
}

.clientflow-page-title {
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.08;
    margin: 0;
    letter-spacing: -.04em;
    font-weight: 800;
    font-family: var(--portal-font-family);
    color: var(--clientflow-text);
}

.clientflow-page-header--compact {
    text-align: left;
    margin-bottom: 1.1rem;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.clientflow-page-title--compact {
    font-size: 21px;
    letter-spacing: -.01em;
}

.clientflow-page-title-meta {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--clientflow-muted);
}

.clientflow-page-subtitle {
    margin: .6rem auto 0;
    color: var(--clientflow-muted);
    font-size: 1.05rem;
    line-height: 1.55;
    max-width: 48ch;
}

.clientflow-card,
.clientflow-stat-card,
.clientflow-list-card,
.clientflow-stage-card {
    background: #fff;
    border: 1px solid rgb(15 23 42 / 0.10);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.clientflow-dashboard-grid {
    display: block;
    width: 100%;
}

.clientflow-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    width: 70%;
    margin: 0 auto;
}

.clientflow-stat-card {
    padding: 1.25rem;
    min-height: 142px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.clientflow-stat-link {
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.clientflow-stat-link:hover {
    color: inherit;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
    border-color: rgb(79 70 229 / 0.24);
}

.clientflow-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef9fa;
    color: #3730a3;
    margin-bottom: .9rem;
}

.clientflow-stat-icon-image {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

.clientflow-stat-label {
    color: var(--clientflow-muted);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
}

.clientflow-stat-value {
    margin-top: .65rem;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
}

.clientflow-stat-foot {
    display: none;
}

.clientflow-split-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.clientflow-dashboard-main {
    width: 100%;
}

.clientflow-dashboard-bottom .clientflow-list-card {
    min-height: 228px;
}

.clientflow-dashboard-bottom {
    width: 100%;
}

.clientflow-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}

.clientflow-panel-title {
    font-size: 1.35rem;
    margin: 0;
}

.clientflow-text-link {
    text-decoration: none;
    color: var(--clientflow-accent-dark);
    font-weight: 700;
    font-size: .88rem;
}

.clientflow-list-card {
    padding: 1rem;
}

.clientflow-list-card .text-muted {
    color: var(--clientflow-muted) !important;
}

.clientflow-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    padding: 1rem 1.05rem;
    border-radius: .85rem;
    background: #fff;
    border: 1px solid rgb(15 23 42 / 0.08);
    text-decoration: none;
    color: inherit;
}

.clientflow-list-item + .clientflow-list-item {
    margin-top: .75rem;
}

.clientflow-list-card .clientflow-list-item:first-of-type {
    margin-top: .15rem;
}

.clientflow-archive-status {
    margin-top: .2rem;
    font-size: .72rem;
    color: #5f7c82;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}

.clientflow-list-item:hover {
    color: inherit;
    border-color: rgb(79 70 229 / 0.24);
    transform: translateY(-1px);
}

.clientflow-list-meta {
    font-size: .75rem;
    color: var(--clientflow-muted);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
}

.clientflow-sidebar-panel {
    padding: 1rem;
}

.clientflow-sidebar-panel + .clientflow-sidebar-panel {
    margin-top: 1rem;
}

.clientflow-group-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.clientflow-chip-card {
    padding: .9rem 1rem;
    border-radius: .85rem;
    background: #fff;
    border: 1px solid rgb(15 23 42 / 0.08);
    min-height: 94px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.clientflow-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f5ae2d;
    display: inline-block;
    margin-right: .55rem;
}

.clientflow-order-rail {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.clientflow-order-card {
    display: block;
    padding: 1rem 1.05rem;
    border-radius: .85rem;
    text-decoration: none;
    color: inherit;
    background: var(--clientflow-accent);
    color: #fff;
    box-shadow: 0 14px 28px rgb(79 70 229 / 0.18);
}

.clientflow-order-card.is-muted {
    background: #fff;
    color: inherit;
    border: 1px solid rgb(15 23 42 / 0.08);
    box-shadow: none;
}

.clientflow-order-card:hover {
    color: inherit;
}

.clientflow-order-status {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    opacity: .72;
    font-weight: 700;
}

.clientflow-order-card .small.text-muted,
.clientflow-chip-card .small.text-muted {
    color: var(--clientflow-muted) !important;
}

.clientflow-order-title {
    font-weight: 700;
    margin-top: .35rem;
}

.clientflow-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.clientflow-checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.clientflow-check {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem .95rem;
    border-radius: 1rem;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--clientflow-border);
    font-weight: 600;
    color: var(--clientflow-text);
}

.clientflow-modal[hidden] {
    display: none !important;
}

.clientflow-modal {
    position: fixed;
    inset: 0;
    z-index: 1400;
}

.clientflow-modal.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2rem);
    overflow-y: auto;
}

.clientflow-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(6px);
}

.clientflow-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(760px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    margin: 1rem auto;
    background: #fff;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.24);
    display: flex;
    flex-direction: column;
}

.clientflow-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid rgb(15 23 42 / 0.08);
}

.clientflow-modal-close {
    width: 40px;
    height: 40px;
    border: 1px solid rgb(15 23 42 / 0.18);
    border-radius: 999px;
    background: #fff;
    color: #4b6470;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    line-height: 1;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.clientflow-modal-close:hover,
.clientflow-modal-close:focus {
    background: #f4fbfb;
    border-color: rgb(79 70 229 / 0.35);
    color: var(--clientflow-accent-dark);
    transform: translateY(-1px);
}

.clientflow-modal-body {
    padding: 1.25rem 1.5rem 1.5rem;
    overflow: auto;
}

.clientflow-form-shell,
.clientflow-table-shell,
.clientflow-invoice-grid {
    padding: 1.35rem;
}

.clientflow-kicker {
    color: var(--clientflow-muted);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 700;
}

.clientflow-project-switch {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .55rem;
    padding: .45rem;
    background: rgba(255,255,255,.72);
    border: 1px solid var(--clientflow-border);
    border-radius: .85rem;
}

.clientflow-project-switch .client-projects-switch-btn {
    border: 0;
    background: transparent;
    color: var(--clientflow-muted);
    border-radius: .65rem;
    padding: .8rem 1.15rem;
    box-shadow: none;
}

.clientflow-project-switch .client-projects-switch-btn.active {
    background: var(--clientflow-accent);
    color: #fff;
    box-shadow: none;
}

.clientflow-table-shell .table,
.clientflow-invoice-grid .table {
    margin-bottom: 0;
}

.clientflow-project-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1rem;
}

.clientflow-project-layout {
    position: relative;
    display: block;
    overflow-x: clip;
}

.clientflow-project-main,
.clientflow-project-side {
    min-width: 0;
}

.clientflow-project-main {
    width: 100%;
}

.clientflow-project-side .project-chat-card,
.clientflow-project-side .card-soft,
.clientflow-project-main .card-soft,
.clientflow-project-main .review-sections-shell {
    border-radius: 1rem;
    border: 1px solid rgb(15 23 42 / 0.10);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.clientflow-shell .review-sections-shell {
    background: #fff;
}

.clientflow-project-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    z-index: 8;
    overflow: visible;
}

.clientflow-project-hero-main {
    min-width: 0;
    position: relative;
    z-index: 1;
}

.clientflow-project-hero-topline {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    margin-bottom: .3rem;
}

.clientflow-project-hero {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.clientflow-project-hero-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    row-gap: .45rem;
}

.clientflow-project-title {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.1;
    font-weight: 800;
    color: #183a4a;
    flex: 0 0 auto;
    white-space: nowrap;
}

.clientflow-project-hero .clientflow-kicker {
    margin: 0;
    line-height: 1;
    white-space: nowrap;
    flex: 0 0 auto;
}

.clientflow-requirement-chip {
    position: relative;
    flex: 0 0 auto;
    z-index: 20;
}

.clientflow-requirement-chip-button {
    border: 1px solid rgb(79 70 229 / 0.12);
    background: #f6fbfb;
    color: #29525d;
    border-radius: 999px;
    padding: .45rem .85rem;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.clientflow-project-hero-row .badge {
    flex: 0 0 auto;
}

.clientflow-requirement-popover {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 60;
    width: min(440px, 72vw);
    padding: .9rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgb(79 70 229 / 0.1);
    background: rgba(255,255,255,.98);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
    color: #47656e;
    font-size: .88rem;
    line-height: 1.6;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    pointer-events: none;
}

.clientflow-requirement-chip:hover .clientflow-requirement-popover,
.clientflow-requirement-chip:focus-within .clientflow-requirement-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.clientflow-requirement-popover-title {
    margin-bottom: .4rem;
    font-weight: 700;
    color: #0f172a;
}

.clientflow-project-support {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.clientflow-shell .review-section-tabs .nav-link,
.clientflow-shell .review-panel-tabs .nav-link,
.clientflow-shell .file-stage-view-btn,
.clientflow-shell .btn-outline-primary,
.clientflow-shell .btn-outline-warning,
.clientflow-shell .btn-outline-secondary {
    border-radius: 999px;
}

.clientflow-shell .btn-primary {
    background-color: var(--clientflow-accent);
    background-image: none;
    border-color: var(--clientflow-accent);
}

.clientflow-shell .btn-primary:hover,
.clientflow-shell .btn-primary:focus {
    background-color: transparent;
    background-image: var(--portal-orange-gradient);
    border-color: var(--ref-orange-600);
    color: #fff;
}

.clientflow-shell .review-section-tabs .nav-link.active,
.clientflow-shell .review-panel-tabs .nav-link.active,
.clientflow-shell .file-stage-view-btn.active {
    background: var(--portal-orange-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--portal-orange-glow);
}

.clientflow-shell .project-chat-stream,
.clientflow-shell .file-stage-list,
.clientflow-shell .review-comment-panel,
.clientflow-shell .file-preview-toolbar,
.clientflow-shell .portal-review-dialog,
.clientflow-shell .portal-review-dialog-head {
    background: #fff;
}

.clientflow-shell .project-chat-bubble {
    border-radius: 16px;
}

.clientflow-shell .project-chat-message.is-own .project-chat-bubble {
    background: linear-gradient(135deg, #635bff, #7c6cf5);
}

.clientflow-shell .portal-review-dialog {
    background: #fff;
}

.clientflow-shell .file-stage-list-item {
    border-radius: 1.15rem;
}

.clientflow-shell .table thead th {
    background: var(--ref-bg-light);
    color: var(--ref-text);
}

.clientflow-shell .form-control,
.clientflow-shell .form-select,
.clientflow-shell textarea.form-control {
    border-radius: .75rem;
    border-color: rgb(15 23 42 / 0.15);
    background: rgba(255,255,255,.94);
    font-family: var(--portal-font-family);
    font-size: var(--portal-font-size);
    line-height: 1.45;
}

.clientflow-shell .order-type-summary,
.clientflow-shell .order-requirements-card,
.clientflow-shell .order-upload-summary,
.clientflow-shell .order-upload-item {
    border-radius: .85rem;
}

body.portal-modal-open {
    overflow: hidden;
}

body.admin-portal-v2 {
    padding-top: 96px;
}

body.admin-portal-v2 .portal-shell.admin-portal-shell {
    display: grid;
    grid-template-columns: minmax(220px, 252px) minmax(0, 1fr);
    gap: 0;
    min-height: calc(100vh - 84px);
}

body.admin-portal-v2 .portal-content.admin-portal-main {
    min-width: 0;
}

body.team-portal-v2 {
    padding-top: 96px;
}

body.team-portal-v2 .portal-shell.team-portal-shell {
    display: grid;
    grid-template-columns: minmax(220px, 252px) minmax(0, 1fr);
    gap: 0;
    min-height: calc(100vh - 84px);
}

body.team-portal-v2 .portal-content.team-portal-main {
    min-width: 0;
}

.portal-auth {
    background: var(--ref-bg-light);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portal-auth > .container {
    width: 100%;
}

.portal-shell {
    min-height: calc(100vh - 78px);
    display: grid;
    grid-template-columns: 280px 1fr;
    transition: grid-template-columns .24s ease;
}

.portal-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(203, 213, 225, 0.75);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.portal-topbar-brand,
.portal-topbar-actions {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.portal-sidebar-toggle {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex: 0 0 auto;
}

.portal-sidebar-toggle-icon,
.portal-sidebar-toggle-icon::before,
.portal-sidebar-toggle-icon::after {
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: #0f172a;
    display: block;
    transition: transform .2s ease, opacity .2s ease;
    content: '';
}

.portal-sidebar-toggle-icon {
    position: relative;
}

.portal-sidebar-toggle-icon::before {
    position: absolute;
    top: -5px;
}

.portal-sidebar-toggle-icon::after {
    position: absolute;
    top: 5px;
}

.portal-user-meta {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}

.portal-notification-bell {
    position: relative;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: #fff;
    color: #0f172a;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.portal-notification-bell:hover {
    color: var(--portal-accent-dark);
    border-color: rgb(79 70 229 / 0.45);
    background: #f6fffe;
}

.portal-notification-bell-icon {
    position: relative;
    width: 16px;
    height: 18px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}

.portal-notification-bell-icon::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 22px;
    height: 8px;
    border: 2px solid currentColor;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    transform: translateX(-50%);
}

.portal-notification-bell-icon::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    transform: translateX(-50%);
}

.portal-notification-bell-count {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--ref-danger);
    color: transparent;
    font-size: 0;
    line-height: 0;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 0 0 5px rgb(220 38 38 / 0.2);
}

.portal-notification-bell.has-unread {
    animation: bellPulse 1.8s ease-in-out infinite;
}

.portal-notification-bell.has-unread::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 999px;
    border: 2px solid rgb(220 38 38 / 0.25);
    animation: bellRing 1.8s ease-in-out infinite;
}

.portal-notification-bell.has-chat-unread .portal-notification-bell-icon::after {
    background: var(--ref-success);
    box-shadow: 0 0 0 4px rgb(22 163 74 / 0.22);
}

.portal-user-meta .small {
    white-space: nowrap;
}

.portal-user-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
}

.portal-user-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.portal-user-avatar-fallback {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--portal-sidebar-start);
}

.portal-sidebar {
    background: linear-gradient(180deg, var(--portal-sidebar-start) 0%, var(--portal-sidebar-end) 100%);
    color: #fff;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 94px;
    height: calc(100vh - 110px);
    overflow-y: auto;
}

.portal-brand-wrap {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: .5rem;
}

.portal-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: #fff;
    border-radius: 12px;
    padding: 4px;
}

.portal-brand {
    font-size: 1.35rem;
    font-weight: 700;
}

.portal-sidebar .nav-link {
    color: rgba(255,255,255,.82);
    border-radius: .75rem;
    padding: .7rem .9rem;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: .75rem;
    font-weight: 600;
}

.portal-sidebar .nav-link .nav-icon {
    width: 1.15rem;
    flex: 0 0 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.portal-sidebar .nav-link:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
}

.portal-sidebar .nav-link.active {
    color: #fff;
    background: rgba(255,255,255,.16);
    box-shadow: 0 10px 24px rgba(6, 37, 39, .18);
    transform: translateX(6px);
}

.portal-sidebar .nav-link.active::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--portal-orange-gradient);
    box-shadow: 0 0 14px rgb(251 146 60 / 0.55);
}

.portal-sidebar .nav-link.active::after {
    display: none;
}

.portal-content {
    --portal-content-padding-x: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: var(--portal-content-padding-x);
    padding-right: var(--portal-content-padding-x);
    overflow-x: clip;
}

body.role-team .portal-content {
    --portal-content-padding-x: clamp(1rem, 2vw, 1.75rem);
    padding-top: clamp(0.85rem, 1.8vw, 1.35rem);
    padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.settings-shell {
    max-width: clamp(1100px, 82vw, 1560px);
}

.settings-card {
    border: 1px solid rgb(15 23 42 / 0.10);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.settings-card .card-title {
    font-weight: 700;
}

.settings-hint {
    color: #5f7c82;
    font-size: .92rem;
}

.client-projects-shell {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.client-projects-switch {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.client-projects-switch-btn {
    border: 1px solid #d9e8f2;
    background: #fff;
    color: #33556b;
    border-radius: 999px;
    padding: .7rem 1rem;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.client-projects-switch-btn.active {
    background: var(--portal-orange-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--portal-orange-glow);
}

.client-projects-panel {
    display: none;
}

.client-projects-panel.active {
    display: block;
}

.client-projects-card {
    max-width: 980px;
}

body.sidebar-collapsed .portal-shell {
    grid-template-columns: 88px 1fr;
}

body.sidebar-collapsed .portal-sidebar {
    padding-inline: .85rem;
}

body.sidebar-collapsed .portal-sidebar .text-white-50 {
    display: none;
}

body.sidebar-collapsed .portal-sidebar .nav-link {
    justify-content: center;
    gap: 0;
    padding-inline: .55rem;
}

body.sidebar-collapsed .portal-sidebar .nav-link > span:not(.nav-icon) {
    display: none;
}

body.sidebar-collapsed .portal-sidebar .nav-link.active {
    transform: none;
}

body.sidebar-collapsed .portal-brand-copy {
    display: none;
}

.btn-primary {
    background-color: var(--portal-accent);
    background-image: none;
    border-color: var(--portal-accent);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: transparent;
    background-image: var(--portal-orange-gradient);
    border-color: var(--ref-orange-600);
    color: #fff;
}

.btn-warning {
    background-color: #f2b705;
    border-color: #f2b705;
}

.badge.status-badge,
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 7px;
    text-align: center;
    border: 1px solid;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

.status-badge--request {
    background-color: #f8f9fa;
    border-color: #ced4da;
    color: #495057;
}

.status-badge--pending {
    background-color: #fff9db;
    border-color: #fcc419;
    color: #856404;
}

.status-badge--assigned {
    background-color: #3EA5D9;
    border-color: #3EA5D9;
    color: #ffffff;
}

.status-badge--quality-check {
    background-color: #FF7E53;
    border-color: #FF7E53;
    color: #ffffff;
}

.status-badge--revision {
    background-color: #858A9A;
    border-color: #858A9A;
    color: #ffffff;
}

.status-badge--in-progress {
    background-color: #FFB85F;
    border-color: #FFB85F;
    color: #4a3500;
}

.status-badge--approved {
    background-color: #2BA067;
    border-color: #2BA067;
    color: #ffffff;
}

.status-badge--delivered {
    background-color: #A2DF53;
    border-color: #A2DF53;
    color: #ffffff;
}

.status-badge--archived {
    background-color: #4A4E5A;
    border-color: #4A4E5A;
    color: #ffffff;
}

.dashboard-card,
.card-soft {
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.dashboard-link {
    color: inherit;
    display: block;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.dashboard-link:hover {
    color: inherit;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

.admin-invoice-form .form-control[readonly] {
    background: #f7fbfc;
}

.admin-invoice-form .form-label {
    margin-bottom: .35rem;
    font-weight: 600;
}

.card-soft,
.dashboard-card,
.file-stage-tab,
.marker-slide,
.video-pin-chip,
.review-panel-tabs .nav-link,
.review-section-tabs .nav-link {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}

.dashboard-list-link {
    color: inherit;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease;
}

.dashboard-list-link:hover {
    background: #f8fbff;
    border-color: #bfd8ff !important;
    color: inherit;
}

.project-grid {
    margin-top: 0.1rem;
}

.project-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e0e6ed;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.project-card .card-body {
    padding: 1.2rem;
}

.card-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 15px;
}

.status-pill-gray {
    background: #f3f4f6;
    color: #4b5563;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid #d1d5db;
}

.due-date-display {
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
}

.project-card-title {
    font-size: 20px;
    margin: 0 0 10px;
    color: #1e293b;
    font-weight: 700;
}

.project-status-chip {
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}

.details-box {
    background: #f8fafc;
    border-radius: 10px;
    padding: 18px;
    border: 1px solid #edf2f7;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #334155;
}

.details-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.task-instruction-box {
    min-height: 118px;
    max-height: 120px;
    overflow-y: auto;
    white-space: pre-wrap;
    font-size: 14px;
}

.delivery-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #eee;
}

.btn-drive-upload {
    background: #4285F4;
    color: #fff;
    border: none !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-drive-upload:hover,
.btn-drive-upload:focus {
    background: #3a78db;
    color: #fff;
}

.admin-orders-table .admin-order-details-cell,
.admin-orders-table .admin-order-details-cell * {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.admin-orders-table .admin-order-description {
    max-height: 6.5rem;
    overflow-y: auto;
    white-space: pre-wrap;
}

.admin-orders-table .admin-order-actions-cell {
    min-width: 280px;
}

.admin-order-due-pill {
    display: inline-block;
    padding: 0.28rem 0.55rem;
    border-radius: 0.45rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.admin-order-due-pill--ok {
    background: rgb(79 70 229 / 0.22);
    color: #0a4a4c;
    border: 1px solid rgb(15 23 42 / 0.2);
}

.admin-order-due-pill--soon {
    background: rgba(250, 204, 21, 0.35);
    color: #713f12;
    border: 1px solid rgba(161, 98, 7, 0.25);
}

.admin-order-due-pill--past {
    background: rgba(248, 113, 113, 0.35);
    color: #7f1d1d;
    border: 1px solid rgba(185, 28, 28, 0.3);
}

.admin-projects-top-panels .admin-panel-collapse-header {
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease;
}

.admin-projects-top-panels .admin-panel-collapse-header:hover {
    background: rgb(15 23 42 / 0.06);
}

.admin-projects-top-panels .admin-panel-collapse-inner {
    font-size: 0.8em;
}

.admin-projects-top-panels .admin-panel-collapse-chevron {
    transition: transform .2s ease;
    flex-shrink: 0;
}
.admin-projects-top-panels .admin-panel-collapse-header[aria-expanded="true"] .admin-panel-collapse-chevron {
    transform: rotate(180deg);
}

.notification-panel {
    max-height: 31rem;
    overflow-y: auto;
    padding-right: .35rem;
}

.notification-panel::-webkit-scrollbar {
    width: 8px;
}

.notification-panel::-webkit-scrollbar-thumb {
    background: rgb(15 23 42 / .25);
    border-radius: 999px;
}

.notification-panel .dashboard-list-link,
.notification-panel .notification-card {
    min-height: 112px;
}

.notification-card {
    background: #fff;
}

.notification-card.is-unread {
    border-color: #9ddfdd !important;
    box-shadow: inset 0 0 0 1px rgb(79 70 229 / .12);
}

.notification-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .35rem;
}

.notification-card-titlewrap {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    min-width: 0;
}

.notification-state-icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: .35rem;
    flex: 0 0 12px;
    border: 2px solid #99a8b7;
    background: transparent;
}

.notification-card.is-unread .notification-state-icon {
    background: var(--portal-accent);
    border-color: var(--portal-accent);
    box-shadow: 0 0 0 4px rgb(79 70 229 / .12);
}

.notification-project-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .6rem;
    border-radius: 999px;
    background: #edf6ff;
    color: #36546b;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.notification-project-chip::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}

.notification-card-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.notification-card-message {
    color: #5f6f7c;
}

@keyframes activeNavPulse {
    0%, 100% { opacity: .45; }
    50% { opacity: .9; }
}

@keyframes bellPulse {
    0%, 100% { transform: translateY(0); }
    20% { transform: translateY(-1px) rotate(-7deg); }
    40% { transform: translateY(0) rotate(7deg); }
    60% { transform: translateY(-1px) rotate(-4deg); }
    80% { transform: translateY(0) rotate(4deg); }
}

@keyframes bellRing {
    0% { transform: scale(.85); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: scale(1.14); opacity: 0; }
}

body.theme-ocean-blue {
    --portal-sidebar-start: #1e3a8a;
    --portal-sidebar-end: #172554;
    --portal-accent: #2563eb;
    --portal-accent-dark: #1d4ed8;
    --portal-accent-soft: #dbeafe;
}

body.theme-forest-green {
    --portal-sidebar-start: #3730a3;
    --portal-sidebar-end: #1e1b4b;
    --portal-accent: #4f46e5;
    --portal-accent-dark: #047857;
    --portal-accent-soft: #ecfdf5;
}

body.theme-midnight-slate {
    --portal-sidebar-start: #1e293b;
    --portal-sidebar-end: #0f172a;
    --portal-accent: #0ea5e9;
    --portal-accent-dark: #0284c7;
    --portal-accent-soft: #e0f2fe;
}

.clickable-row {
    cursor: pointer;
}

.table-link {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.table-link:hover {
    color: var(--portal-accent-dark);
}

.progress-bar {
    background-color: var(--portal-accent);
}

.project-progress-wrap {
    max-width: 320px;
}

.chat-upload-status {
    border: 1px solid #d9e8f2;
    background: linear-gradient(180deg, #f7fbfd 0%, #eef7f8 100%);
    border-radius: .9rem;
    padding: .75rem .85rem;
}

.chat-upload-status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .45rem;
}

.chat-upload-status-title,
.chat-upload-status-percent {
    font-size: .85rem;
    font-weight: 700;
    color: #3730a3;
}

.chat-upload-progress {
    height: 8px;
    background: #dceff1;
    margin-bottom: .45rem;
}

.chat-upload-status-meta {
    font-size: .8rem;
    color: #45636a;
}

.project-chat-card.is-sending {
    opacity: .96;
}

.file-preview-frame {
    width: 100%;
    min-height: 420px;
    border: 1px solid #dbe5f4;
    border-radius: .9rem;
    background: #fff;
}

.file-preview-frame-pdf {
    min-height: 780px;
    height: 78vh;
    background: #f8fbff;
}

.review-workspace {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.review-workspace-split {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .72fr);
    gap: 1rem;
    align-items: start;
}

.review-workspace-single {
    display: block;
    min-width: 0;
}

.review-workspace-single .review-preview-block {
    width: 100%;
    min-width: 0;
}

.review-sections-shell {
    background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(246,249,252,.96) 100%);
    border: 1px solid #e4edf5;
    border-radius: 1.25rem;
    padding: 1.25rem;
}

.review-section-tabs {
    gap: .75rem;
    flex-wrap: wrap;
}

.review-section-tabs .nav-link {
    border-radius: 999px;
    color: #33556b;
    background: #f1f7fb;
    border: 1px solid #d9e8f2;
    font-weight: 700;
    padding: .65rem 1rem;
}

.review-section-tabs .nav-link:hover:not(.disabled):not(:disabled) {
    background: var(--ref-orange-soft);
    border-color: var(--ref-orange-border);
    color: #0f172a;
}

.review-section-tabs .nav-link.active {
    background: var(--portal-orange-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--portal-orange-glow);
}

.review-section-tabs .nav-link.disabled,
.review-section-tabs .nav-link:disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

.is-locked-section {
    opacity: .88;
}

.is-locked-section form .form-control[disabled],
.is-locked-section form .form-select[disabled],
.is-locked-section form .btn[disabled] {
    cursor: not-allowed;
}

.review-section-panel {
    display: none;
}

.review-section-panel.active {
    display: block;
}

.file-stage .review-workspace {
    padding: 1.15rem;
}

.review-preview-block,
.review-comment-block {
    width: 100%;
}

.file-preview-image {
    display: block;
    width: 100%;
    border-radius: .9rem;
}

.pin-surface {
    display: inline-block;
    width: 100%;
}

.pin-dot {
    position: absolute;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: #f43f5e;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px rgba(255,255,255,.8);
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.pin-dot-draft {
    background: var(--portal-accent-dark);
    box-shadow: 0 0 0 3px rgba(36,190,188,.22);
}

.pin-dot.active {
    background: var(--portal-accent-dark);
    box-shadow: 0 0 0 4px rgba(36,190,188,.28);
    transform: translate(-50%, -50%) scale(1.08);
}

.file-thread {
    border-top: 1px solid #e5edf7;
    padding-top: .75rem;
}

.review-comment-panel {
    border: 1px solid #deebf4;
    border-radius: 1rem;
    background: #fff;
    padding: 1rem;
    overflow: hidden;
}

.review-comment-block-side .review-comment-panel {
    position: sticky;
    top: 1rem;
    max-height: calc(88vh - 7rem);
    overflow: auto;
}

.review-comment-head {
    margin-bottom: .85rem;
}

.review-panel-tabs {
    gap: .5rem;
    flex-wrap: wrap;
}

.review-panel-tabs .nav-link {
    border-radius: 999px;
    font-weight: 700;
    color: #33556b;
    background: #f1f7fb;
    border: 1px solid #d9e8f2;
    padding: .5rem .8rem;
}

.review-panel-tabs .nav-link:hover:not(.disabled):not(:disabled) {
    background: var(--ref-orange-soft);
    border-color: var(--ref-orange-border);
    color: #0f172a;
}

.review-panel-tabs .nav-link.active {
    background: var(--portal-orange-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--portal-orange-glow);
}

.review-pane-panel {
    display: none;
}

.review-pane-panel.active {
    display: block;
}

.review-thread-wrap {
    max-height: 360px;
    overflow-y: auto;
    padding-right: .2rem;
}

.project-chat-card {
    position: sticky;
    top: 96px;
}

.project-chat-card--embedded {
    position: static;
    top: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.project-chat-embedded-body {
    padding: 0;
}

.project-chat-card--dropdown {
    position: static;
    top: auto;
}

.project-header-actions {
    position: relative;
}

.project-chat-dropdown-wrap {
    position: relative;
}

.project-support-launcher {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid #d5e4ef;
    background: #fff;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.project-support-launcher-icon {
    position: relative;
    width: 18px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 8px;
}

.project-support-launcher-icon::after {
    content: '';
    position: absolute;
    left: 3px;
    bottom: -6px;
    width: 8px;
    height: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: skewY(-30deg);
}

.project-support-launcher-count {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #ef4444;
    color: transparent;
    font-size: 0;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 0 0 5px rgba(239, 68, 68, 0.16);
}

.clientflow-topbar-actions .portal-notification-bell,
.clientflow-topbar-actions .project-support-launcher,
.clientflow-topbar-actions .clientflow-icon-button {
    width: calc(54px * 0.6);
    height: calc(54px * 0.6);
    flex: 0 0 calc(54px * 0.6);
}

.clientflow-topbar-actions .portal-notification-bell .clientflow-header-icon,
.clientflow-topbar-actions .project-support-launcher .clientflow-header-icon,
.clientflow-topbar-actions .clientflow-icon-button .clientflow-header-icon {
    font-size: calc(1.2rem * 0.6);
    width: calc(1.2rem * 0.6);
    height: calc(1.2rem * 0.6);
}

.clientflow-topbar-actions .portal-notification-bell-count {
    top: calc(-5px * 0.6);
    right: calc(-5px * 0.6);
    width: calc(12px * 0.6);
    height: calc(12px * 0.6);
}

.clientflow-topbar-actions .project-support-launcher-count {
    top: calc(-5px * 0.6);
    right: calc(-5px * 0.6);
    width: calc(12px * 0.6);
    height: calc(12px * 0.6);
}

.project-support-launcher.has-unread {
    animation: bellPulse 1.8s ease-in-out infinite;
}

.project-chat-dropdown {
    position: absolute;
    top: 0;
    right: 0;
    width: min(460px, 100%);
    z-index: 20;
}

.project-chat-dropdown .project-chat-card {
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
}

.project-chat-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.project-chat-stream {
    height: 520px;
    max-height: 520px;
    overflow-y: auto;
    padding-right: .2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: .85rem;
    background: #f8faff;
    border: 1px solid #dce4f3;
    border-radius: 1rem;
    padding: 1rem;
}

.project-chat-card--embedded .project-chat-stream {
    height: clamp(260px, 46vh, 560px);
    max-height: clamp(260px, 46vh, 560px);
    border-radius: 1.15rem;
}

.project-chat-reply-ref {
    display: block;
    width: 100%;
    margin: 0 0 4px;
    padding: 3px 8px;
    border: 0;
    border-left: 3px solid #635bff;
    background: rgba(99, 91, 255, 0.1);
    border-radius: 8px;
    color: #475569;
    font-size: 11px;
    line-height: 1.35;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.project-chat-reply-ref:hover {
    background: rgba(99, 91, 255, 0.16);
}

.project-chat-message.is-own .project-chat-reply-ref {
    border-left-color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.95);
}

.project-chat-message.is-own .project-chat-reply-ref:hover {
    background: rgba(255, 255, 255, 0.28);
}

.project-chat-message.is-chat-highlight .project-chat-bubble {
    box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.42);
}

.project-chat-card--embedded .project-chat-compose {
    border-top: 0;
    padding-top: 0;
}

.project-collab-card .project-side-panel {
    display: none;
}

.project-collab-card .project-side-panel.active {
    display: block;
}

.project-collab-card .project-chat-card--embedded .project-chat-stream {
    height: 420px;
    max-height: 420px;
}

.project-comment-empty {
    border: 1px dashed #d6e3ed;
    border-radius: 1rem;
    background: #fbfdff;
    color: #6a7f86;
    padding: 1rem;
    margin-bottom: .85rem;
}

.project-collab-shell {
    position: absolute;
    top: 168px;
    right: 0;
    display: flex;
    justify-content: flex-end;
    width: min(100%, 388px);
    min-height: 0;
    z-index: 4;
    transform: translateX(calc(100% - 48px));
    transition: transform .28s ease;
    overflow: visible;
}

.project-collab-trigger {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-width: 54px;
    height: 46px;
    padding: 0 .9rem;
    border: 1px solid rgb(79 70 229 / 0.12);
    border-radius: 1rem 0 0 1rem;
    background: var(--portal-orange-gradient);
    color: #fff;
    box-shadow: 0 16px 34px rgb(79 70 229 / 0.24);
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.project-collab-trigger i {
    font-size: 1rem;
    line-height: 1;
    pointer-events: none;
}

.project-collab-trigger-label {
    font-size: .76rem;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
}

.project-collab-trigger:hover,
.project-collab-trigger:focus-visible,
.project-collab-trigger.is-active {
    transform: translateX(-2px);
    box-shadow: 0 18px 36px rgb(79 70 229 / 0.26);
    background: linear-gradient(135deg, #1ec8c5 0%, #0d6668 100%);
}

.project-collab-card {
    width: min(100%, 340px);
    margin-left: auto;
    transition: box-shadow .28s ease;
    overflow: hidden;
}

.project-collab-shell:hover,
.project-collab-shell:focus-within,
.project-collab-shell.is-open {
    transform: translateX(0);
}

.project-collab-shell:hover .project-collab-card,
.project-collab-shell:focus-within .project-collab-card,
.project-collab-shell.is-open .project-collab-card {
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.12);
}

.project-collab-card .card-body,
.project-collab-card-body {
    padding: 1rem;
}

.project-collab-tabs {
    display: flex;
    gap: .55rem;
    margin-bottom: .9rem !important;
}

.project-collab-tabs .nav-link {
    flex: 1 1 0;
    justify-content: center;
    padding: .62rem .8rem;
    font-size: .88rem;
    font-weight: 600;
    background: #f2f8fb;
    color: #4d6772;
    border: 1px solid rgb(79 70 229 / 0.1);
    box-shadow: none;
}

.project-collab-tabs .nav-link.active {
    background: var(--portal-orange-gradient);
    color: #fff;
    box-shadow: 0 12px 22px rgb(79 70 229 / 0.18);
}

.project-collab-card .project-side-panel {
    min-height: 520px;
}

.project-collab-card .project-chat-card--embedded {
    border: 0;
    box-shadow: none;
    background: transparent;
}

.project-collab-card .project-chat-card--embedded .project-chat-stream {
    height: clamp(240px, 42vh, 500px);
    max-height: clamp(240px, 42vh, 500px);
    padding: .85rem;
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at top right, rgb(79 70 229 / 0.08), transparent 30%),
        linear-gradient(180deg, #fbffff 0%, #f3fbfb 100%);
}

.project-collab-card .project-chat-compose-shell {
    padding: .55rem .6rem;
    border-radius: 999px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .45rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.project-collab-card .project-chat-input {
    min-height: 42px;
    max-height: 98px;
    padding: .65rem .85rem;
    border-radius: 999px;
    font-size: .92rem;
}

.project-collab-card .project-chat-icon-button {
    width: 38px;
    height: 38px;
}

.project-collab-card .project-chat-icon-button svg {
    width: 18px;
    height: 18px;
}

.project-collab-card .project-chat-file-summary {
    font-size: .72rem;
    padding-left: .55rem;
}

.project-collab-card .project-chat-message-wrapper {
    max-width: 88%;
}

.project-collab-card .project-chat-bubble {
    max-width: 100%;
}

.project-collab-card .project-comment-empty {
    margin-bottom: 0;
    padding: .85rem 1rem;
    border-style: solid;
    background: linear-gradient(180deg, #fbffff 0%, #f5fbfb 100%);
    font-size: .82rem;
}

.project-collab-card .project-comment-file-panel .review-comment-panel {
    border: 0;
    padding: 0;
    box-shadow: none;
    background: transparent;
    min-height: 0;
}

.project-collab-card .review-panel-tabs {
    margin-bottom: .75rem !important;
}

.project-collab-card .review-pane-panel.active {
    animation: chat-panel-fade .2s ease;
}

.project-collab-card .pin-comment-form .btn,
.project-collab-card .review-thread-wrap .btn {
    border-radius: .9rem;
}

@keyframes chat-panel-fade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.project-comment-file-panel[hidden] {
    display: none !important;
}

.project-comment-file-panel .review-comment-panel {
    position: static;
    max-height: none;
    min-height: 420px;
}

.project-comment-file-panel .review-thread-wrap {
    max-height: 260px;
}

.project-chat-message {
    display: flex;
    width: 100%;
    margin-bottom: .15rem;
}

.project-chat-message.is-own {
    justify-content: flex-end;
}

.project-chat-message.is-other {
    justify-content: flex-start;
}

.project-chat-message-wrapper {
    max-width: 82%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.project-chat-user-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.project-chat-message.is-own .project-chat-user-row {
    justify-content: flex-end;
}

.project-chat-username {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.project-chat-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    font-size: 12px;
    font-weight: 700;
    background: #e8e9ff;
    color: #635bff;
}

.project-chat-message.is-own .project-chat-avatar {
    background: linear-gradient(135deg, #635bff, #7c6cf5);
    color: #fff;
}

.project-chat-bubble {
    width: 100%;
    padding: 8px 11px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e5eaf4;
    color: #111827;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.project-chat-message.is-other .project-chat-bubble {
    border-top-left-radius: 6px;
}

.project-chat-message.is-own .project-chat-bubble {
    background: linear-gradient(135deg, #635bff, #7c6cf5);
    color: #fff;
    border-color: transparent;
    border-top-right-radius: 6px;
}

.project-chat-text {
    margin: 0;
    line-height: 1.5;
    word-break: break-word;
    font-size: 14px;
    white-space: pre-wrap;
}

.project-chat-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.project-chat-meta {
    font-size: 11px;
    opacity: 0.85;
    color: #64748b;
}

.project-chat-message.is-own .project-chat-meta {
    color: #fff;
}

.project-chat-empty {
    padding: 1rem;
    text-align: center;
}

.project-chat-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.project-chat-attachment {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .7rem;
    border-radius: 999px;
    border: 1px solid #cfe3ef;
    background: #fff;
    color: var(--portal-accent-dark);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 600;
}

.project-chat-attachment:hover {
    background: #ecfbfb;
    border-color: var(--portal-accent);
    color: var(--portal-accent-dark);
}

.project-chat-input {
    min-height: 86px;
    max-height: 86px;
    resize: none;
}

.project-chat-compose {
    border-top: 1px solid #e6eef5;
    padding-top: .9rem;
}

.project-chat-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fffe 100%);
}

.project-chat-card--embedded .project-chat-stream {
    height: auto;
    max-height: none;
    padding: 1.1rem;
    background: #f8faff;
    border: 1px solid #dce4f3;
}

.project-chat-stream {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
    scroll-behavior: smooth;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.project-chat-message {
    animation: chat-message-in .28s ease;
}

.project-chat-message-shell,
.project-chat-content,
.project-chat-bubble-wrap {
    display: contents;
}

.project-chat-avatar--typing {
    font-size: .7rem;
    letter-spacing: .08em;
}

.project-chat-bubble--typing {
    background: #fff;
    min-width: 150px;
    border: 1px solid #e5eaf4;
}

.project-chat-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.project-chat-attachment {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    padding: .42rem .75rem;
    border-radius: 999px;
    border: 1px solid rgb(79 70 229 / 0.16);
    background: rgba(255,255,255,0.92);
    color: var(--portal-accent-dark);
    text-decoration: none;
    font-size: .79rem;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
}

.project-chat-message.is-own .project-chat-attachment {
    color: var(--portal-accent-dark);
}

.project-chat-compose {
    border-top: 0;
    padding-top: .4rem;
}

.project-chat-compose-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    gap: .7rem;
    padding: .8rem;
    border-radius: .95rem;
    border: 1px solid rgb(79 70 229 / 0.12);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(242,251,251,0.98));
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.project-chat-icon-button {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgb(79 70 229 / 0.16);
    background: #fff;
    color: var(--portal-accent-dark);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.project-chat-icon-button svg {
    width: 18px;
    height: 18px;
}

.project-chat-icon-button:hover,
.project-chat-icon-button:focus-visible {
    transform: translateY(-1px);
    background: #ecfbfb;
    box-shadow: 0 10px 24px rgb(79 70 229 / 0.14);
}

.project-chat-send-button {
    color: #fff;
    border-color: transparent;
    background: var(--portal-orange-gradient);
    box-shadow: 0 12px 24px rgb(79 70 229 / 0.24);
}

.project-chat-send-button:hover,
.project-chat-send-button:focus-visible {
    background: linear-gradient(135deg, #34cfc9 0%, #0a6466 100%);
    color: #fff;
}

.project-chat-send-button.is-loading {
    animation: chat-send-pulse 1.15s ease-in-out infinite;
}

.project-chat-input-wrap {
    min-width: 0;
}

.project-chat-input {
    min-height: 52px;
    max-height: 92px;
    border: 1px solid transparent;
    border-radius: .7rem;
    background: #f3fbfb;
    padding: .95rem 1rem;
    font-size: .95rem;
    line-height: 1.55;
    box-shadow: inset 0 0 0 1px rgb(79 70 229 / 0.08);
    transition: box-shadow .2s ease, background .2s ease, transform .2s ease;
    resize: none;
    overflow-y: auto;
}

.project-chat-input:focus,
.project-chat-input.is-active {
    background: #fff;
    box-shadow: 0 0 0 4px rgb(79 70 229 / 0.14), inset 0 0 0 1px rgb(79 70 229 / 0.2);
}

.project-chat-file-summary {
    margin-top: .45rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding-left: .1rem;
}

.project-chat-file-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: #eef8fb;
    border: 1px solid rgb(79 70 229 / 0.12);
    color: #3f6670;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.project-chat-attach-button.is-disabled {
    opacity: .55;
    pointer-events: none;
}

.project-chat-typing-label {
    margin-bottom: .28rem;
    color: #45676f;
    font-size: .78rem;
}

.project-chat-dots {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.project-chat-dots span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--portal-accent);
    animation: chat-typing-bounce 1.1s infinite ease-in-out;
}

.project-chat-dots span:nth-child(2) {
    animation-delay: .15s;
}

.project-chat-dots span:nth-child(3) {
    animation-delay: .3s;
}

.project-chat-empty {
    padding: 1.4rem;
    border: 1px dashed rgb(79 70 229 / 0.16);
    border-radius: 1rem;
    background: rgba(255,255,255,0.8);
}

.chat-upload-status {
    border-radius: 1rem;
    border: 1px solid rgb(79 70 229 / 0.12);
    background: linear-gradient(180deg, #f7ffff 0%, #eefbfb 100%);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
}

@keyframes chat-message-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes chat-typing-bounce {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: .35;
    }
    40% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

@keyframes chat-send-pulse {
    0%, 100% {
        box-shadow: 0 12px 24px rgb(79 70 229 / 0.24);
    }
    50% {
        box-shadow: 0 16px 30px rgb(79 70 229 / 0.36);
    }
}

@media (max-width: 767.98px) {
    .project-chat-message-wrapper {
        max-width: 90%;
    }

    .project-chat-bubble {
        max-width: calc(100vw - 140px);
    }

    .project-chat-compose-shell {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: .65rem;
        gap: .55rem;
    }

    .project-collab-shell {
        position: static;
        width: 100%;
        margin-top: 1rem;
    }

    .project-collab-trigger {
        display: none;
    }

    .project-collab-card {
        width: 100%;
        transform: none;
    }
}

.thread-pin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    height: 1.7rem;
    padding: 0 .45rem;
    border-radius: 999px;
    background: var(--portal-accent-dark);
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
    margin-right: .45rem;
}

.file-thread {
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.file-thread.active {
    border-top-color: var(--portal-accent);
    background: #f4ffff;
    box-shadow: inset 3px 0 0 var(--portal-accent);
}

.review-video {
    background: #06080c;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: none;
    object-fit: contain;
}

.review-audio-wrap {
    padding: 1.2rem;
    border: 1px solid #e0e8f4;
    border-radius: .9rem;
    background: #fff;
}

.preview-watermark-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    z-index: 3;
    overflow: hidden;
}

.watermark-tile {
    width: 58%;
    height: 94%;
    background-image: url('../images/watermark-maximasolution.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .42;
    filter: drop-shadow(0 10px 40px rgba(255,255,255,.18));
}

.watermark-tile-left {
    display: none;
}

.watermark-tile-center {
    transform: rotate(-10deg) scale(1.35);
}

.watermark-tile-right {
    display: none;
}

.video-pin-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: .55rem;
    margin-top: .9rem;
    overflow-x: auto;
    padding-bottom: .2rem;
}

.video-pin-chip {
    border: 1px solid #cfe3ef;
    background: #fff;
    color: #0f172a;
    border-radius: .85rem;
    padding: .55rem .9rem;
    font-size: .84rem;
    font-weight: 700;
    text-align: left;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.video-pin-chip:hover {
    border-color: var(--portal-accent);
    background: #ecfbfb;
}

.video-pin-chip.active {
    border-color: var(--portal-accent);
    background: #ddfbfb;
    box-shadow: 0 10px 24px rgba(36,190,188,.18);
}

.marker-slider {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding-bottom: .35rem;
}

.marker-slide {
    min-width: 220px;
    max-width: 220px;
    border: 1px solid #d9e6f2;
    border-radius: 1rem;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f9fc 100%);
    padding: .85rem;
    text-align: left;
    box-shadow: 0 8px 20px rgba(15,23,42,.06);
}

.marker-slide.active,
.marker-slide:hover {
    border-color: var(--portal-accent);
    background: #ecfbfb;
}

.marker-slide-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--portal-accent-dark);
    color: #fff;
    font-weight: 800;
    margin-bottom: .65rem;
}

.marker-slide-title {
    display: block;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: .25rem;
}

.marker-slide-text {
    display: block;
    color: #5b7088;
    font-size: .9rem;
    line-height: 1.45;
}

.upload-progress-box {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #d8e6f2;
    border-radius: 1rem;
    background: linear-gradient(180deg, #f8fcff 0%, #eef7fb 100%);
}

.upload-progress-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: .75rem;
}

.upload-progress-title {
    font-weight: 700;
    color: #0f172a;
}

.upload-progress-meta,
.upload-progress-status {
    color: #5b7088;
    font-size: .92rem;
}

.upload-progress-percent {
    font-weight: 700;
    color: var(--portal-accent-dark);
}

.upload-progress-bar {
    height: 12px;
    overflow: hidden;
    background: #dcecf1;
    border-radius: 999px;
    margin-bottom: .65rem;
}

.upload-progress-warning {
    border-color: #f2b705;
    background: #fff9e7;
}

.upload-progress-error {
    border-color: #ef4444;
    background: #fff1f2;
}

.order-upload-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.order-form-pro {
    gap: .7rem;
}

.order-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.order-form-grid > * {
    width: 100%;
    max-width: 100%;
}

.order-form-grid .order-grid-full {
    grid-column: 1 / -1;
}

.order-form-grid .order-grid-half {
    grid-column: span 1;
}

.order-form-grid .form-label {
    margin-bottom: .35rem;
    font-weight: 600;
}

.order-form-grid .form-control,
.order-form-grid .form-select {
    min-height: 42px;
}

.order-form-grid .order-form-field {
    margin-bottom: .15rem;
}

.order-form-grid input[type="file"] {
    width: 100%;
}

.order-form-grid input[readonly] {
    background: #f6fbfc;
    color: #587082;
    cursor: not-allowed;
}

.order-type-summary {
    padding: .95rem 1rem;
    border: 1px solid #d9e8f2;
    border-radius: 1rem;
    background: linear-gradient(135deg, #f7fcff 0%, #eefcfb 100%);
    color: #33556b;
    font-size: .94rem;
}

.order-requirements-card {
    border: 1px solid #dbe7f2;
    border-radius: 1rem;
    background: #fff;
    padding: 1rem;
}

.order-requirements-title {
    font-size: .9rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: .65rem;
}

.order-requirements-list {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.order-requirements-chip {
    display: inline-flex;
    align-items: center;
    padding: .42rem .7rem;
    border-radius: 999px;
    background: #edf7fb;
    color: #33556b;
    font-size: .8rem;
    font-weight: 700;
}

.order-description-field {
    min-height: 178px;
}

.order-upload-summary {
    border: 1px dashed #c7dbe8;
    border-radius: .95rem;
    background: #fbfdff;
    color: #587082;
    padding: .7rem .9rem;
    font-size: .88rem;
}

@media (max-width: 767.98px) {
    .order-form-grid {
        grid-template-columns: 1fr;
    }

    .order-form-grid .order-grid-half,
    .order-form-grid .order-grid-full {
        grid-column: 1 / -1;
    }
}

.order-upload-item {
    border: 1px solid #d8e6f2;
    border-radius: 1rem;
    background: linear-gradient(180deg, #f8fcff 0%, #eef7fb 100%);
    padding: .55rem .75rem;
}

.order-upload-item.is-error {
    border-color: #ef4444;
    background: #fff1f2;
}

.order-upload-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .65rem;
}

.order-upload-item-head-compact {
    align-items: center;
    gap: .5rem;
    margin-bottom: 0;
}

.order-upload-item-line {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
    flex: 1 1 auto;
}

.order-upload-item-name {
    font-weight: 700;
    color: #0f172a;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-upload-item-meta,
.order-upload-status {
    color: #5b7088;
    font-size: .88rem;
}

.order-upload-item-meta {
    flex: 0 0 auto;
    white-space: nowrap;
}

.order-upload-remove {
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: .8rem;
}

.btn.is-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    pointer-events: none;
}

.btn-loading-spinner {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.38);
    border-top-color: #ffffff;
    animation: btnSpin .7s linear infinite;
}

.btn-outline-secondary.is-loading .btn-loading-spinner,
.btn-outline-primary.is-loading .btn-loading-spinner,
.btn-outline-danger.is-loading .btn-loading-spinner,
.btn-outline-warning.is-loading .btn-loading-spinner,
.btn-outline-success.is-loading .btn-loading-spinner {
    border-color: rgb(55 48 163 / 0.18);
    border-top-color: currentColor;
}

@keyframes btnSpin {
    to {
        transform: rotate(360deg);
    }
}

[data-drive-open].is-drive-opening,
[data-order-drive-folder].is-drive-opening {
    pointer-events: none;
    cursor: wait;
    opacity: 0.72;
}

.drive-opening-spinner {
    width: 1em;
    height: 1em;
    flex: 0 0 1em;
    display: inline-block;
    border-radius: 999px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: btnSpin 0.7s linear infinite;
}

.file-stage {
    min-height: 100%;
}

.file-stage-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: start;
}

.file-stage-preview-wrap {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.file-stage-carousel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-bottom: .1rem;
}

.file-stage-nav-btn {
    width: 42px;
    height: 42px;
    border: 1px solid #dde7ef;
    border-radius: 999px;
    background: #fff;
    color: #0f172a;
    font-size: 1.55rem;
    line-height: 1;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.file-stage-nav-btn[data-stage-prev] {
    justify-self: start;
}

.file-stage-nav-btn[data-stage-next] {
    justify-self: end;
}

.portal-review-modal[hidden] {
    display: none !important;
}

.portal-review-modal {
    position: fixed;
    inset: 0;
    z-index: 1400;
}

.portal-review-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.56);
    backdrop-filter: blur(6px);
}

.portal-review-dialog {
    position: relative;
    z-index: 1;
    width: min(1320px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    margin: 1rem auto;
    border-radius: 1.35rem;
    overflow: hidden;
    background: #f8fbff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    display: flex;
    flex-direction: column;
}

.portal-review-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2ebf3;
    background: rgba(255,255,255,.94);
}

.portal-review-dialog-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
}

.portal-review-dialog-subtitle {
    font-size: .84rem;
    color: #5b7088;
    margin-top: .15rem;
}

.portal-review-dialog-body {
    padding: 1.1rem;
    overflow: auto;
}

.file-stage-empty-state {
    display: block;
}

.file-stage-empty-state.is-hidden {
    display: none;
}

.file-stage-empty-card {
    border: 1px dashed #c8dced;
    border-radius: 1.35rem;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f9fc 100%);
    padding: 3.2rem 1.8rem;
    text-align: center;
    min-height: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.file-stage-empty-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: .45rem;
}

.file-stage-empty-text {
    color: #5b7088;
    max-width: 540px;
    margin: 0 auto;
}

.file-stage-panel {
    display: none;
}

.file-stage-panel.active {
    display: block;
}

.file-stage-actions {
    border-top: 1px solid #e5edf7;
    margin-top: 1rem;
    padding-top: 1rem;
}

.file-stage .file-preview-card {
    margin-bottom: 0;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.file-stage .file-preview-card > .card-body {
    padding: 0;
}

.file-stage-filmstrip {
    display: none;
    gap: .75rem;
    overflow-x: auto;
    padding-bottom: .15rem;
}

.file-stage-filmstrip-item {
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem .95rem;
    border: 1px solid #dbe6ee;
    border-radius: 1rem;
    background: #fff;
    text-align: left;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.file-stage-filmstrip-item:hover {
    border-color: var(--ref-orange-border);
    background: var(--ref-orange-soft);
}

.file-stage-filmstrip-item.active {
    border-color: rgb(234 88 12 / 0.45);
    background: linear-gradient(135deg, var(--ref-orange-soft) 0%, #ffffff 100%);
}

.file-stage-filmstrip-index {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2rem;
}

.file-stage-filmstrip-name {
    font-weight: 700;
    color: #0f172a;
    word-break: break-word;
}

.file-stage-list-below {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

.file-stage-list-below-row {
    display: flex;
    align-items: stretch;
    gap: 0.45rem;
    min-width: 0;
}

.file-stage-list-below-item {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    text-align: left;
    border: 1px solid rgb(15 23 42 / 0.08);
    border-radius: 0.9rem;
    background: #fff;
    padding: 0.65rem 0.85rem;
    color: #0f172a;
    font-weight: 600;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

button.file-stage-list-below-item {
    cursor: pointer;
    font: inherit;
}

.file-stage-list-below-item:hover {
    background: var(--ref-orange-soft);
    border-color: var(--ref-orange-border);
}

.file-stage-list-below-item.active {
    background: var(--portal-orange-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--portal-orange-glow);
}

.file-stage-list-below-item.active .file-stage-list-below-meta,
.file-stage-list-below-item.active .text-muted {
    color: rgb(255 255 255 / 0.88) !important;
}

.file-stage-list-below-name {
    font-weight: 700;
    word-break: break-word;
    width: 100%;
}

.file-stage-list-below-meta {
    font-weight: 500;
}

.portal-review-modal .file-preview-card {
    margin-bottom: 0;
    box-shadow: none;
    background: transparent;
}

.portal-review-modal .file-preview-card > .card-body {
    padding: 0;
}

.file-preview-toolbar-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: .45rem;
    overflow-x: auto;
    padding-bottom: .1rem;
    width: 100%;
}

.file-preview-toolbar-actions .btn.active {
    background: var(--portal-orange-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--portal-orange-glow);
}

.file-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .8rem;
    padding: .9rem 1rem;
    border: 1px solid #dfeaf3;
    border-radius: 1.1rem;
    background: linear-gradient(180deg, #fbfffe 0%, #f4fbfb 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.file-stage-nav-btn--inline {
    flex: 0 0 42px;
}

.file-preview-tool {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
}

.file-preview-tool i {
    pointer-events: none;
}

.file-preview-viewport {
    overflow: auto;
    border-radius: 1rem;
}

[data-preview-zoomable] {
    transform-origin: top left;
    transition: transform .18s ease;
}

.file-stage .review-video,
.file-stage .file-preview-frame,
.file-stage .file-preview-image {
    width: 100%;
    min-height: 0;
    background: #071017;
}

.file-stage .file-preview-surface {
    border-radius: 1rem;
    border: 0;
    background: #f8fbfd;
    padding: 0;
    height: 420px;
    min-height: 420px;
    max-height: 420px;
    overflow: auto;
}

.file-stage .file-preview-viewport {
    height: 100%;
    max-height: 100%;
    overflow: auto;
    min-width: 0;
    min-height: 0;
    cursor: grab;
    padding: 0;
    border-radius: .8rem;
    background: #fff;
    border: 0;
}

.file-stage .file-preview-frame-pdf {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 960px;
    min-height: 960px;
    background: #fff;
    border: 0;
}

.file-stage .review-comment-panel {
    min-height: 0;
    border-radius: 1.35rem;
    min-height: 360px;
}

.file-stage .file-preview-surface--pdf {
    overflow: hidden;
}

.file-stage .file-preview-viewport--pdf {
    overflow: auto;
}

.file-stage .review-workspace .file-preview-surface {
    margin-bottom: 0 !important;
}

.file-stage .file-preview-image,
.file-stage .review-video,
.file-stage .file-preview-frame {
    max-width: none;
}

.file-stage .pin-surface {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: block;
    cursor: crosshair;
    transform-origin: top left;
    overflow: visible;
}

.comment-hit-layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: transparent;
    cursor: crosshair;
}

.file-stage .file-preview-image {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
    display: block;
    background: #fff;
}

.file-stage .review-video {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    display: block;
}

.file-stage .file-preview-frame {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: block;
}

.file-preview-hover-hint {
    position: absolute;
    top: .75rem;
    left: 50%;
    transform: translateX(-50%);
    padding: .45rem .7rem;
    border-radius: 999px;
    background: rgba(18, 52, 59, 0.78);
    color: #fff;
    font-size: .76rem;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 6;
}

.pin-surface:hover .file-preview-hover-hint {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.selection-box {
    position: absolute;
    border: 2px solid rgb(79 70 229 / 0.95);
    background: rgb(79 70 229 / 0.12);
    border-radius: .35rem;
    z-index: 4;
    pointer-events: none;
}

.file-preview-viewport.is-panning {
    cursor: grabbing;
}

.file-stage .review-comment-block-side .review-comment-panel {
    top: 5.5rem;
    max-height: calc(100vh - 7rem);
}

.file-stage .review-panel-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.file-stage .review-panel-tabs .nav-link {
    border-radius: .8rem;
    padding: .58rem .9rem;
    font-weight: 700;
}

.file-stage [data-review-pane-scope] + [data-review-pane-scope] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e7eef5;
}

.file-stage .pin-comment-form textarea,
.file-stage .file-thread textarea {
    min-height: 80px;
}

.file-stage .review-comment-head,
.file-stage .review-thread-wrap,
.file-stage .pin-comment-form,
.file-stage .file-thread {
    word-break: break-word;
}

.thread-root-comment {
    background: #f8fbff;
}

@media (max-width: 1199px) {
    .review-comment-panel {
        position: static;
    }
}

@media (max-width: 991px) {
    .client-projects-card {
        max-width: none;
    }

    .review-workspace-split {
        grid-template-columns: 1fr;
    }

    .review-comment-block-side .review-comment-panel {
        position: static;
        max-height: none;
    }

    .file-stage-list {
        grid-template-columns: 1fr;
    }

    .file-preview-toolbar {
        justify-content: flex-start;
    }

    .file-preview-toolbar-actions {
        justify-content: flex-start;
    }

    .file-preview-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .file-stage .review-video,
    .file-stage .file-preview-frame,
    .file-stage .file-preview-image,
    .file-stage .review-comment-panel {
        min-height: auto;
    }

    .portal-review-dialog {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
        margin: .5rem auto;
    }

    .portal-review-dialog-head {
        padding: .85rem 1rem;
    }

    .portal-review-dialog-body {
        padding: .85rem;
    }

    .file-preview-frame-pdf,
    .file-stage .file-preview-frame-pdf {
        height: 72vh;
        min-height: 560px;
    }

    .file-stage-empty-card {
        min-height: 320px;
    }
}

.section-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.table thead th {
    background: #eef3ff;
    color: #334155;
    font-weight: 600;
}

@media (max-width: 991px) {
    body.clientflow-shell {
        padding-top: 0;
    }

    .clientflow-app-shell {
        grid-template-columns: 1fr;
        height: auto;
        max-height: none;
        min-height: 100vh;
        overflow: visible;
    }

    .clientflow-sidebar {
        min-height: auto;
        max-height: none;
        position: static;
        overflow: visible;
    }

    .clientflow-sidebar-scroll {
        flex: 0 0 auto;
        overflow: visible;
    }

    .clientflow-main {
        padding: 1rem;
        overflow: visible;
        max-height: none;
    }

    .clientflow-content {
        overflow: visible;
    }

    .clientflow-content:has(.clientflow-project-layout--gemini) {
        display: block;
        overflow: visible;
        min-height: auto;
    }

    .clientflow-page:has(.clientflow-project-layout--gemini) {
        display: block;
        min-height: auto;
        overflow: visible;
    }

    .clientflow-topbar {
        position: static;
        flex-wrap: wrap;
    }

    .clientflow-topbar-actions {
        width: 100%;
        justify-content: space-between;
    }

    .clientflow-modal-dialog {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
        margin: .5rem auto;
        border-radius: 1.35rem;
    }

    .clientflow-dashboard-grid,
    .clientflow-project-layout,
    .clientflow-split-panels {
        grid-template-columns: 1fr;
    }

    .clientflow-stats {
        grid-template-columns: 1fr;
        width: 100%;
    }

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

    body {
        padding-top: 72px;
    }

    .portal-topbar {
        height: auto;
        padding: .85rem 1rem;
        flex-wrap: wrap;
    }

    .portal-sidebar {
        position: static;
        height: auto;
        top: auto;
        border-radius: 0;
    }

    .project-chat-card {
        position: static;
        top: auto;
    }

    .project-chat-dropdown {
        position: static;
        width: 100%;
        margin-top: 1rem;
    }
}

.clientflow-project-layout--gemini {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1rem;
    align-items: stretch;
    transition: grid-template-columns .22s ease;
}

.clientflow-project-layout--gemini.is-collab-collapsed {
    grid-template-columns: minmax(0, 1fr) 72px;
}

.clientflow-project-main--gemini {
    min-width: 0;
}

.clientflow-project-hero-actions {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
}

.clientflow-hero-action-form {
    margin: 0;
}

.clientflow-hero-action {
    border-radius: 999px;
    padding: .72rem 1.15rem;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    border: 0;
}

.clientflow-hero-action--ghost {
    background: #fff7ee;
    color: #ef7d2d;
    box-shadow: 0 10px 24px rgba(239, 125, 45, .12);
}

.clientflow-hero-action--primary {
    background: var(--portal-orange-gradient);
    color: #fff;
    box-shadow: 0 16px 30px rgb(79 70 229 / .2);
}

.clientflow-hero-action.is-disabled,
.clientflow-hero-action:disabled {
    opacity: .48;
    cursor: not-allowed;
    box-shadow: none;
    filter: saturate(.65);
}

.review-sections-shell--gemini {
    min-width: 0;
}

.file-stage--gemini {
    border-radius: 1.8rem;
    border: 1px solid rgb(15 23 42 / 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 251, 253, 0.99) 100%);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.file-stage--gemini > .card-body {
    padding: 1.15rem;
}

.file-stage--gemini .file-stage-shell {
    gap: .9rem;
}

.file-stage-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: .55rem;
    align-items: center;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: .2rem;
    scrollbar-width: thin;
}

.file-stage-tab {
    flex: 0 0 auto;
    border: 1px solid rgb(15 23 42 / 0.08);
    background: #f3f6fb;
    color: #6d7f8e;
    border-radius: 999px;
    min-width: 3rem;
    height: 3rem;
    padding: 0 .85rem;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: all .18s ease;
}

.file-stage-tab:hover {
    color: #0f172a;
    background: var(--ref-orange-soft);
    border-color: var(--ref-orange-border);
}

.file-stage-tab.active {
    background: var(--portal-orange-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--portal-orange-glow);
}

.file-stage--gemini .file-preview-card {
    border-radius: 1.7rem;
    background: transparent;
    box-shadow: none;
    border: 0;
}

.file-stage--gemini .file-preview-toolbar {
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    background: #fff;
    border: 1px solid rgb(15 23 42 / 0.08);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}

.file-stage--gemini .file-preview-toolbar-actions {
    width: auto;
    flex: 1 1 auto;
    justify-content: center;
}

.file-stage--gemini .file-preview-toolbar-meta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
}

.file-stage--gemini .file-preview-fit-btn {
    border: 0;
    background: transparent;
    color: #6d7f8e;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .35rem .2rem;
}

.file-stage--gemini .file-preview-zoom-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.15rem;
    height: 2.1rem;
    padding: 0 .8rem;
    border-radius: 999px;
    background: #f5f7fb;
    color: #526674;
    font-size: .76rem;
    font-weight: 800;
}

.file-stage--gemini .file-preview-surface {
    height: clamp(360px, 64vh, 760px);
    min-height: clamp(360px, 64vh, 760px);
    max-height: clamp(360px, 64vh, 760px);
    border-radius: 1.45rem;
    background: #eef3f8;
    box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.05);
}

.file-stage--gemini .file-preview-viewport {
    border-radius: 1.2rem;
    background: #fff;
    padding: 0;
}

.file-stage--gemini .file-preview-frame-pdf {
    min-height: 1200px;
    height: 1200px;
}

.file-stage--gemini .pin-surface,
.file-stage--gemini .file-preview-image,
.file-stage--gemini .review-video,
.file-stage--gemini .file-preview-frame {
    border-radius: 1rem;
}

.project-collab-shell--static {
    position: sticky;
    top: 1rem;
    right: auto;
    width: 100%;
    min-width: 0;
    z-index: 2;
    transform: none;
}

.project-collab-shell--static .project-collab-trigger--rail {
    position: absolute;
    top: 1rem;
    left: 50%;
    right: auto;
    width: min(100%, 100%);
    min-width: 280px;
    height: 42px;
    display: inline-flex !important;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    padding: .24rem 2.05rem .24rem .24rem;
    background: #f7fbfc;
    color: #fff;
    box-shadow: none;
    transform: translateX(-50%);
    border: 1px solid rgb(15 23 42 / 0.08);
    border-radius: 12px;
    z-index: 5;
    overflow: hidden;
    isolation: isolate;
}

.project-collab-shell--static .project-collab-trigger--rail::before {
    content: '';
    position: absolute;
    inset: .24rem auto .24rem .24rem;
    width: calc(50% - .24rem);
    border-radius: 9px;
    background: linear-gradient(135deg, #24d2cf 0%, #0f7f80 100%);
    box-shadow: none;
    transition: transform .24s ease, background .24s ease, box-shadow .24s ease;
    z-index: 0;
}

.project-collab-shell--static .project-collab-trigger--rail::after {
    content: none;
}

.project-collab-shell--static .project-collab-trigger--rail[data-active-tab="project-side-comments"]::before {
    transform: translateX(100%);
    background: linear-gradient(135deg, #24d2cf 0%, #0f7f80 100%);
}

.project-collab-trigger-segment {
    border: 0;
    background: transparent;
    color: #5d7280;
    border-radius: 8px;
    flex: 1 1 50%;
    min-width: 0;
    padding: 0 .62rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .32rem;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    position: relative;
    height: 100%;
    z-index: 3;
}

.project-collab-trigger-segment + .project-collab-trigger-segment {
    position: relative;
}

.project-collab-trigger-segment + .project-collab-trigger-segment::before {
    content: '';
    position: absolute;
    left: -.08rem;
    top: 18%;
    width: 1px;
    height: 64%;
    background: linear-gradient(180deg, rgb(15 23 42 / 0.02), rgb(15 23 42 / 0.16), rgb(15 23 42 / 0.02));
}

.project-collab-trigger-segment .project-collab-trigger-icon {
    font-size: .82rem;
}

.project-collab-trigger-segment.is-chat.is-active,
.project-collab-trigger-segment.is-chat:hover {
    color: #fff;
    text-shadow: none;
}

.project-collab-trigger-segment.is-comments.is-active,
.project-collab-trigger-segment.is-comments:hover {
    color: #fff;
}

.project-collab-trigger-segment.is-active + .project-collab-trigger-segment::before,
.project-collab-trigger-segment:hover + .project-collab-trigger-segment::before {
    opacity: 0;
}

.project-collab-trigger--rail[data-active-tab="project-side-chat"] .project-collab-trigger-segment.is-chat,
.project-collab-trigger--rail[data-active-tab="project-side-comments"] .project-collab-trigger-segment.is-comments {
    color: #fff;
    text-shadow: none;
}

.project-collab-trigger--rail[data-active-tab="project-side-chat"] .project-collab-trigger-segment.is-comments,
.project-collab-trigger--rail[data-active-tab="project-side-comments"] .project-collab-trigger-segment.is-chat {
    color: #5e7381;
}

.project-collab-trigger-segment:active {
    transform: scale(.985);
}

.project-collab-rail-close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 1px solid rgb(15 23 42 / 0.16);
    border-radius: 6px;
    background: #fff;
    color: #5a6f7d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    line-height: 1;
    padding: 0;
    z-index: 4;
}

.project-collab-rail-close:hover {
    color: #243f47;
    border-color: rgb(15 23 42 / 0.28);
}

.project-collab-comments-close {
    display: none !important;
    margin-left: .16rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    line-height: 1;
    color: #486773;
    background: rgba(255, 255, 255, .72);
}

.project-collab-trigger--rail[data-active-tab="project-side-comments"] .project-collab-trigger-segment.is-comments .project-collab-comments-close {
    display: none !important;
}

.project-collab-trigger--rail[data-active-tab="project-side-comments"] .project-collab-trigger-segment.is-comments .project-collab-comments-close:hover {
    background: #fff;
    color: #1b4953;
}

.project-collab-shell--static .project-collab-card {
    width: 100%;
    transform: none;
    box-shadow: none;
    border-radius: 1rem;
    transition: opacity .22s ease, transform .22s ease;
}

.project-collab-shell--static.is-collapsed .project-collab-card {
    opacity: 0;
    pointer-events: none;
    transform: translateX(14px);
}

.project-collab-card--gemini .project-chat-card--embedded .project-chat-stream,
.project-collab-card--gemini .project-comment-file-panel .review-comment-panel {
    min-height: clamp(280px, 50vh, 620px);
    max-height: clamp(280px, 50vh, 620px);
}

.project-collab-card--gemini .project-chat-card--embedded .project-chat-stream {
    height: clamp(240px, 42vh, 500px);
    max-height: clamp(240px, 42vh, 500px);
    background: #fff;
    border: 1px solid rgb(15 23 42 / 0.08);
}

.project-collab-card--gemini .project-comment-file-panel .review-comment-panel {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.project-collab-card--gemini .review-panel-tabs {
    margin-bottom: .9rem !important;
}

.project-collab-card--gemini .review-panel-tabs .nav-link,
.project-collab-card--gemini .project-collab-tabs .nav-link {
    border-radius: 999px;
    min-width: 92px;
    padding: .6rem .9rem;
    font-size: .8rem;
    font-weight: 800;
    background: transparent;
    border: 0;
    color: #5d7280;
}

.project-collab-card--gemini .review-panel-tabs .nav-link.active,
.project-collab-card--gemini .project-collab-tabs .nav-link.active {
    background: var(--portal-orange-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--portal-orange-glow);
}

.project-collab-card--gemini .project-comment-empty {
    min-height: 160px;
}

.project-collab-topbar {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .85rem;
}

.project-collab-topbar .project-collab-tabs {
    flex: 1 1 auto;
}

.project-collab-card--gemini .project-collab-tabs {
    display: none;
    align-items: center;
    gap: .35rem;
    padding: .3rem;
    background: #f6f8fb;
    border: 1px solid rgb(15 23 42 / 0.08);
    border-radius: 999px;
}

.project-collab-close {
    width: 32px;
    height: 32px;
    border: 1px solid rgb(15 23 42 / 0.1);
    background: #fff;
    color: #6d7f8e;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
}

.project-collab-topbar {
    justify-content: flex-end;
    min-height: 2rem;
}

@media (max-width: 1199px) {
    .clientflow-project-layout--gemini {
        grid-template-columns: 1fr;
    }

    .clientflow-content:has(.clientflow-project-layout--gemini) {
        display: block;
        overflow: visible;
        min-height: auto;
    }

    .clientflow-page:has(.clientflow-project-layout--gemini) {
        display: block;
        overflow: visible;
        min-height: auto;
    }

    .clientflow-page:has(.clientflow-project-layout--gemini) > .clientflow-project-layout--gemini {
        overflow: visible;
        min-height: auto;
    }

    .clientflow-app-shell .clientflow-project-main--gemini {
        overflow: visible;
    }

    .clientflow-app-shell .clientflow-project-layout--gemini .chat-sidebar.project-collab-shell--static {
        height: auto;
        max-height: none;
    }

    .project-collab-shell--static {
        position: static;
    }

    .project-collab-shell--static .project-collab-trigger--rail {
        display: none !important;
    }

    .project-collab-shell--static.is-collapsed .project-collab-card {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
}

@media (max-width: 640px) {
    .project-collab-shell--static .project-collab-trigger--rail {
        width: 100%;
        min-width: 210px;
        height: 40px;
        padding-right: 1.9rem;
    }

    .project-collab-trigger-segment {
        font-size: .6rem;
        letter-spacing: .04em;
        padding: 0 .5rem;
    }

    .project-collab-trigger-segment .project-collab-trigger-icon {
        font-size: .8rem;
    }
}

@media (max-width: 991px) {
    .clientflow-project-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .clientflow-project-hero-actions {
        width: 100%;
    }

    .file-stage--gemini .file-preview-toolbar {
        flex-wrap: wrap;
        justify-content: center;
    }

    .file-stage--gemini .file-preview-toolbar-actions {
        order: 2;
        width: 100%;
    }

    .file-stage--gemini .file-preview-toolbar-meta {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .file-stage--gemini .file-preview-surface {
        height: 64vh;
        min-height: 64vh;
        max-height: 64vh;
    }
}

/* Chat/comment panel refresh based on supplied structure */
.chat-sidebar.project-collab-shell--static {
    position: sticky;
    top: 1rem;
    width: 340px;
    max-width: 100%;
    height: 100vh;
    overflow: hidden;
    min-height: 0;
    align-self: stretch;
    transition: width .3s ease, opacity .3s ease;
}

.chat-sidebar .chat-panel-container {
    height: 100%;
    flex: 1 1 auto;
    min-height: 400px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.chat-sidebar .chat-panel-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem;
    border-bottom: 1px solid #f8fafc;
}

.chat-sidebar .chat-floating-toggle {
    position: absolute;
    left: -50px;
    top: 80px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #334155;
    border: 1px solid rgba(0, 0, 0, 0.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 20;
}

.chat-sidebar .project-collab-trigger--rail {
    position: static;
    transform: none;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: .18rem;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    box-shadow: none;
    overflow: visible;
}

.chat-sidebar .project-collab-trigger--rail::before,
.chat-sidebar .project-collab-trigger--rail::after {
    content: none;
}

.chat-sidebar .chat-tab-pill {
    flex: 1;
    padding: .42rem .64rem;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 700;
    color: #94a3b8;
    border: 0;
    background: transparent;
    transition: all .2s;
}

.chat-sidebar .chat-tab-pill.active {
    background: var(--portal-accent);
    color: #fff;
    box-shadow: 0 2px 8px rgb(79 70 229 / 0.22);
}

.chat-sidebar .chat-tab-pill.inactive,
.chat-sidebar .chat-tab-pill:not(.active) {
    background: #f1f7f9;
    color: #5e7e88;
    box-shadow: none;
}

.chat-sidebar .project-collab-rail-close {
    position: static;
    transform: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: #94a3b8;
}

.chat-sidebar .project-collab-card-body {
    padding: .85rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chat-sidebar .project-side-panel {
    height: 100%;
    min-height: 0;
}

.chat-sidebar .project-chat-card--embedded .project-chat-stream {
    border-radius: 10px;
}

.chat-sidebar .project-chat-message-wrapper {
    max-width: 88%;
}

.chat-sidebar .project-chat-avatar {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    font-size: 11px;
}

.chat-sidebar .project-chat-username {
    font-size: 12px;
}

.chat-sidebar .project-chat-bubble {
    padding: 9px 11px;
    box-shadow: none;
}

.chat-sidebar .project-chat-text {
    font-size: 13px;
    line-height: 1.45;
}

.chat-sidebar .project-chat-footer {
    margin-top: 6px;
}

.chat-sidebar .project-chat-meta {
    font-size: 10px;
    opacity: 1;
}

.chat-sidebar #project-side-chat.active,
.chat-sidebar #project-side-comments.active {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.chat-sidebar #project-side-chat .project-chat-card--embedded {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.chat-sidebar #project-side-chat .project-chat-embedded-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.chat-sidebar #project-side-chat .project-chat-stream {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: .45rem;
    justify-content: flex-start;
    align-items: stretch;
}

.chat-sidebar #project-side-chat .project-chat-compose {
    margin-top: auto;
    flex: 0 0 auto;
    position: static;
    z-index: 3;
    background: transparent;
}

.chat-sidebar #project-side-comments .project-comment-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

@media (max-width: 1199px) {
    .chat-sidebar .chat-panel-container {
        height: 100%;
        min-height: 400px;
    }
}

@media (max-width: 991px) {
    .chat-sidebar .chat-panel-container {
        height: 100%;
        min-height: 400px;
    }
}

@media (max-width: 1023px) {
    #chat-sidebar.chat-sidebar {
        width: 100%;
        height: 100%;
    }
}

/* Visual mapping to provided complete order page */
.clientflow-project-hero {
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(10px);
    border: 1px solid #f1f5f9;
    border-radius: 14px;
}

.clientflow-project-hero .clientflow-kicker {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
    color: var(--portal-accent);
}

.clientflow-project-title {
    font-size: 14px;
    font-weight: 900;
    color: #1e293b;
}

.clientflow-hero-action--ghost {
    background: #fff7ed;
    color: #ea580c;
    box-shadow: none;
}

.clientflow-hero-action--primary {
    background: var(--portal-accent);
    box-shadow: 0 10px 20px rgb(79 70 229 / .2);
}

.file-stage--gemini {
    border-radius: 20px;
    border: 1px solid #f1f5f9;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.file-stage--gemini .file-preview-toolbar {
    border: 1px solid #f1f5f9;
    box-shadow: none;
    border-radius: 999px;
    background: #fff;
}

.file-stage--gemini .file-preview-surface {
    border-radius: 14px;
    background: rgba(226, 232, 240, .45);
    box-shadow: none;
}

.file-stage-tab {
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
}

.file-stage-tab.active {
    background: var(--portal-accent);
    color: #fff;
    box-shadow: none;
}

.chat-sidebar .chat-body-area {
    background: #f1fbfc;
    border-radius: 12px;
    border: 1px solid rgb(79 70 229 / 0.1);
    padding: .7rem;
    min-height: 0;
    overflow: hidden;
}

.chat-sidebar .chat-body-area .project-chat-stream,
.chat-sidebar .chat-body-area .project-comment-panels {
    height: 100%;
    min-height: 0;
}

.chat-sidebar .project-comment-empty {
    border: 1px dashed rgb(79 70 229 / .3);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    color: #5e7e88;
    background: #fff;
}

.chat-sidebar .project-chat-compose-shell {
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    background: #fff;
    box-shadow: none;
    grid-template-columns: 18px minmax(0, 1fr) 18px;
    gap: .45rem;
    padding: .35rem .45rem;
}

.chat-sidebar .project-chat-attach-button,
.chat-sidebar .project-chat-send-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 999px;
}

.chat-sidebar .project-chat-send-button {
    background: var(--portal-accent);
    color: #fff;
}

.chat-sidebar .project-chat-input {
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
    padding: .45rem .85rem;
    min-height: 42px;
    width: 100%;
    font-size: .66rem;
    line-height: 1.2;
}

.chat-sidebar .project-chat-icon-button {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    border-width: 1px;
    box-shadow: none;
}

.chat-sidebar .project-chat-icon-button svg {
    width: 10px;
    height: 10px;
}

.file-preview-toolbar-actions .file-preview-tool {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.file-preview-toolbar-actions .file-preview-tool.active {
    background: var(--portal-accent);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgb(79 70 229 / 0.3);
}

.collapsed-chat-tab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    display: none;
}

.collapsed-chat-tab-btn {
    background: var(--portal-accent);
    color: #fff;
    border: 0;
    border-radius: 14px 0 0 14px;
    padding: .55rem .4rem;
    min-width: 40px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    box-shadow: -4px 0 15px rgb(79 70 229 / 0.3);
}

.collapsed-chat-tab-btn i {
    font-size: 1rem;
}

.collapsed-chat-tab-btn span {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.project-collab-shell--static.is-collapsed .collapsed-chat-tab {
    display: block;
}

/* Client project view (gemini): image fits stage; chat column fills row so compose stays visible */
.clientflow-app-shell .clientflow-project-layout--gemini {
    min-height: 0;
}

.clientflow-app-shell .clientflow-project-layout--gemini .chat-sidebar.project-collab-shell--static {
    position: relative;
    top: auto;
    align-self: stretch;
    width: 340px;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.clientflow-app-shell .clientflow-project-layout--gemini .chat-sidebar .chat-panel-container {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    height: auto;
}

.clientflow-app-shell .clientflow-project-layout--gemini .project-collab-card .project-side-panel {
    min-height: 0 !important;
}

.clientflow-app-shell .clientflow-project-layout--gemini .chat-sidebar .project-collab-card--gemini {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Inactive tab must stay hidden — do not set display:flex on all .project-side-panel (overrides display:none) */
.clientflow-app-shell .clientflow-project-layout--gemini .project-side-panel:not(.active) {
    display: none !important;
}

.clientflow-app-shell .clientflow-project-layout--gemini .project-side-panel.active {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.clientflow-app-shell .clientflow-project-layout--gemini .project-chat-stream {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    justify-content: flex-start;
    align-items: stretch;
}

.clientflow-app-shell .clientflow-project-layout--gemini .project-chat-compose {
    flex-shrink: 0;
}

.clientflow-app-shell .clientflow-project-layout--gemini .file-stage--gemini .file-preview-surface--image {
    position: relative;
    overflow: hidden;
}

.clientflow-app-shell .clientflow-project-layout--gemini .file-stage--gemini .file-preview-viewport--image {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clientflow-app-shell .clientflow-project-layout--gemini .file-stage--gemini .pin-surface[data-preview-zoomable] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clientflow-app-shell .clientflow-project-layout--gemini .file-stage--gemini .pin-surface[data-preview-zoomable] .file-preview-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.clientflow-app-shell .clientflow-project-layout--gemini .file-stage--gemini .file-preview-surface--pdf {
    position: relative;
    overflow: hidden;
}

.clientflow-app-shell .clientflow-project-layout--gemini .file-stage--gemini .file-preview-viewport--pdf {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: auto;
}

.clientflow-app-shell .clientflow-project-layout--gemini .file-stage--gemini .file-preview-frame-pdf {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.clientflow-list-item--button {
    width: 100%;
    border: 1px solid rgba(21, 71, 89, 0.08);
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.clientflow-list-item--button:hover {
    border-color: rgba(35, 191, 187, 0.28);
    box-shadow: 0 14px 28px rgba(19, 69, 88, 0.08);
}

.clientflow-modal-dialog--archive {
    width: min(760px, calc(100vw - 2rem));
    max-width: 760px;
    margin: auto;
}

.clientflow-archive-modal-lead {
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.45;
}

.clientflow-archive-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.clientflow-archive-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.15rem;
}

.clientflow-archive-updated {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.clientflow-archive-details {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.clientflow-archive-details-instructions {
    padding: 1rem 1.1rem;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fbff 0%, #f1f6ff 100%);
    border: 1px solid #dbeafe;
}

.clientflow-archive-details-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1d4ed8;
    margin-bottom: 0.45rem;
}

.clientflow-archive-details-copy {
    margin: 0;
    color: #334155;
    font-size: 0.92rem;
    line-height: 1.6;
}

.clientflow-archive-details-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.clientflow-archive-details-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.clientflow-archive-details-tag--blue {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.clientflow-archive-details-tag--green {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.clientflow-archive-details-tag--purple {
    background: #faf5ff;
    color: #7c3aed;
    border-color: #ddd6fe;
}

.clientflow-archive-details-tag--orange {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fdba74;
}

.clientflow-archive-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.clientflow-archive-details-card {
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.clientflow-archive-details-card--wide {
    grid-column: 1 / -1;
}

.clientflow-archive-details-card-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.35rem;
}

.clientflow-archive-details-card-value {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
    word-break: break-word;
}

.clientflow-archive-details-link {
    color: #2563eb;
    text-decoration: none;
}

.clientflow-archive-details-link:hover {
    text-decoration: underline;
}

.clientflow-archive-files-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.15rem;
}

.clientflow-archive-files-title {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #475569;
}

.clientflow-archive-files {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.clientflow-archive-file {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0.95rem;
    border-radius: 16px;
    background: #fbfdff;
    border: 1px solid rgba(21, 71, 89, 0.08);
}

.clientflow-archive-file__icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #eef2ff;
    color: #4f46e5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.clientflow-archive-file__body {
    min-width: 0;
    flex: 1 1 auto;
}

.clientflow-archive-file__name {
    font-weight: 700;
    color: #12314a;
    word-break: break-word;
}

.clientflow-archive-file__meta {
    margin-top: 0.3rem;
    color: #6f8092;
    font-size: 0.84rem;
    word-break: break-word;
}

.clientflow-archive-empty {
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    font-size: 0.9rem;
}

.clientflow-archive-download-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgb(15 23 42 / 0.08);
    margin-top: 0.15rem;
}

.clientflow-archive-download-btn {
    min-width: 220px;
    border-radius: 12px;
    font-weight: 700;
    padding: 0.7rem 1.25rem;
}

.clientflow-archive-drive-hint {
    margin: 0;
    color: #64748b;
    font-size: 0.82rem;
    text-align: center;
    line-height: 1.45;
}

@media (max-width: 767.98px) {
    .clientflow-archive-details-grid {
        grid-template-columns: 1fr;
    }

    .clientflow-archive-download-btn {
        width: 100%;
    }
}

@media (max-width: 991px) {
    .portal-topbar-brand,
    .portal-topbar-actions {
        width: 100%;
        justify-content: space-between;
    }

    .portal-user-meta .small {
        display: none;
    }

    .portal-content {
        --portal-content-padding-x: 0.8rem;
    }

    .clientflow-sidebar {
        padding: 1rem 0.9rem;
        gap: 0.8rem;
    }

    .clientflow-sidebar-head {
        padding: 0;
    }

    .clientflow-main {
        padding: 0.95rem;
    }

    .clientflow-content {
        padding-bottom: 1rem;
    }

    .clientflow-page-header,
    .clientflow-orders-head,
    .clientflow-panel-head {
        gap: 0.8rem;
    }

    .clientflow-card,
    .clientflow-stat-card,
    .clientflow-list-card,
    .clientflow-stage-card,
    .clientflow-order-card,
    .clientflow-chip-card {
        border-radius: 1rem;
    }

    .clientflow-table-shell,
    .clientflow-invoice-grid,
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .clientflow-table-shell .table,
    .clientflow-invoice-grid .table,
    .admin-orders-table,
    .table {
        min-width: 680px;
    }

    .file-stage .file-preview-surface {
        height: 360px;
        min-height: 360px;
        max-height: 360px;
    }
}

@media (max-width: 767.98px) {
    .portal-topbar {
        gap: 0.75rem;
        padding: 0.75rem 0.85rem;
    }

    .portal-sidebar {
        padding: 1rem 0.85rem;
    }

    .portal-brand {
        font-size: 1.1rem;
    }

    .portal-logo {
        width: 40px;
        height: 40px;
    }

    .portal-sidebar .nav-link {
        padding: 0.72rem 0.8rem;
        font-size: 0.92rem;
    }

    .portal-content {
        --portal-content-padding-x: 0.65rem;
        padding-top: 0.35rem;
        padding-bottom: 0.75rem;
    }

    .clientflow-brand-title {
        font-size: 1rem;
    }

    .clientflow-brand-subtitle {
        font-size: 0.64rem;
        letter-spacing: 0.1em;
    }

    .clientflow-topbar {
        gap: 0.7rem;
        padding: 0 0 0.8rem;
    }

    .clientflow-topbar-actions {
        gap: 0.45rem;
        flex-wrap: wrap;
    }

    .clientflow-page-title {
        font-size: 1.6rem;
    }

    .clientflow-page-subtitle,
    .clientflow-order-description,
    .clientflow-list-meta {
        font-size: 0.92rem;
    }

    .clientflow-stat-card,
    .clientflow-card,
    .clientflow-list-card,
    .clientflow-stage-card {
        padding: 1rem;
    }

    .clientflow-list-item,
    .clientflow-order-item {
        padding: 0.95rem;
    }

    .clientflow-modal-dialog,
    .portal-review-dialog,
    .portal-review-modal .portal-review-dialog {
        width: calc(100vw - 0.75rem);
        margin: 0.375rem auto;
        border-radius: 1.1rem;
    }

    .file-stage .file-preview-surface {
        height: 300px;
        min-height: 300px;
        max-height: 300px;
    }

    .file-preview-toolbar {
        padding: 0.75rem 0.8rem;
        gap: 0.6rem;
        border-radius: 0.95rem;
    }

    .file-preview-toolbar-actions {
        gap: 0.35rem;
    }
}

@media (max-width: 575.98px) {
    .portal-topbar-brand {
        gap: 0.6rem;
    }

    .portal-sidebar-toggle {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .portal-notification-bell,
    .project-support-launcher {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .portal-user-avatar {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .clientflow-app-shell,
    .portal-shell {
        min-width: 0;
    }

    .clientflow-sidebar-order {
        padding: 0.75rem 0.8rem;
    }

    .clientflow-sidebar-order-name {
        font-size: 0.82rem;
    }

    .clientflow-sidebar-order-status {
        font-size: 10px;
        padding: 3px 6px;
    }

    .clientflow-main,
    .portal-content {
        padding-left: 0.55rem;
        padding-right: 0.55rem;
    }

    .clientflow-page-title {
        font-size: 1.38rem;
        line-height: 1.08;
    }

    .clientflow-stat-value {
        font-size: 1.8rem;
    }

    .clientflow-table-shell .table,
    .clientflow-invoice-grid .table,
    .admin-orders-table,
    .table {
        min-width: 620px;
    }
}
.account-shell {
    padding: 0 0 1.5rem;
}

.account-card {
    background: #fff;
    border: 1px solid #dfe9ef;
    border-radius: 28px;
    box-shadow: 0 22px 55px rgba(25, 52, 75, 0.08);
    padding: 1.5rem;
}

.account-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.account-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #17324a;
}

.account-subtitle {
    margin: 0.5rem 0 0;
    color: #5f7389;
    font-size: 1rem;
}

.account-side-stack {
    display: grid;
    gap: 1rem;
}

.account-avatar-frame {
    width: 110px;
    height: 110px;
    margin: 0 auto 1rem;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(38, 184, 186, 0.15), rgba(9, 95, 102, 0.12));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(38, 184, 186, 0.22);
}

.account-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2rem;
    font-weight: 700;
    color: #0f7b75;
}

.account-avatar-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #17324a;
}

.account-avatar-role {
    margin-top: 0.25rem;
    color: #678097;
    font-size: 0.95rem;
}

@media (max-width: 991.98px) {
    .account-card {
        padding: 1rem;
        border-radius: 22px;
    }

    .account-title {
        font-size: 1.6rem;
    }
}

.outreach-scroll-table {
    max-height: 620px;
    overflow: auto;
}

.outreach-scroll-list {
    max-height: 620px;
    overflow-y: auto;
    padding-right: 0.35rem;
}

.outreach-scroll-table .table,
.outreach-scroll-list .table {
    margin-bottom: 0;
}

.outreach-admin-card {
    border-radius: 1.15rem;
}

.outreach-admin-card .card-body {
    padding: 1.25rem;
}

.outreach-admin-stat .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 136px;
}

.outreach-admin-table th,
.outreach-admin-table td {
    vertical-align: middle;
}

.outreach-admin-score {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 170px;
}

.outreach-admin-scorebar {
    position: relative;
    flex: 1 1 120px;
    height: 0.55rem;
    border-radius: 999px;
    background: #e3eef1;
    overflow: hidden;
}

.outreach-admin-scorebar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--portal-accent);
}

.outreach-admin-scorevalue {
    min-width: 3rem;
    text-align: right;
    font-weight: 700;
    color: #0f172a;
    font-size: 0.88rem;
}

.outreach-hero-card .card-body,
.outreach-section-card .card-body {
    padding: 1.35rem;
}

.outreach-section-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.outreach-section-switch .btn {
    min-width: 132px;
}

.outreach-action-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.outreach-kpi-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.outreach-kpi-link .card {
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.outreach-kpi-link:hover .card,
.outreach-kpi-link:focus .card {
    transform: translateY(-2px);
    box-shadow: 0 18px 35px rgb(79 70 229 / 0.12);
    border-color: rgb(79 70 229 / 0.24);
}

.outreach-form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.outreach-form-span-3 { grid-column: span 3; }
.outreach-form-span-4 { grid-column: span 4; }
.outreach-form-span-6 { grid-column: span 6; }
.outreach-form-span-8 { grid-column: span 8; }
.outreach-form-span-12 { grid-column: span 12; }

.outreach-card-divider {
    border-top: 1px solid #e4edf2;
    margin: 1.25rem 0;
}

.outreach-bucket-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.outreach-bucket-grid .btn {
    justify-content: space-between;
    display: inline-flex;
    align-items: center;
}

.outreach-pane {
    border: 1px solid #dfebf1;
    border-radius: 1.15rem;
    background: #f8fbfd;
    padding: 1rem;
}

.outreach-pane-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.outreach-channel-status-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.outreach-channel-status-card {
    border: 1px solid #dbe8ee;
    border-radius: 1rem;
    background: #fff;
    padding: 0.95rem;
}

.outreach-channel-status-card.is-connected {
    border-color: rgb(79 70 229 / 0.25);
    box-shadow: 0 12px 28px rgb(79 70 229 / 0.08);
}

.outreach-channel-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    border: 1px solid #d8e4ea;
    background: #fff;
    color: #55707b;
}

.outreach-channel-status-badge.is-live {
    border-color: rgb(79 70 229 / 0.24);
    color: #0f7b75;
    background: rgb(79 70 229 / 0.08);
}

.outreach-conversation-list-item {
    text-decoration: none;
    color: inherit;
    display: block;
}

.outreach-conversation-list-item .outreach-pane {
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.outreach-conversation-list-item:hover .outreach-pane,
.outreach-conversation-list-item.is-active .outreach-pane {
    border-color: rgb(79 70 229 / 0.28);
    box-shadow: 0 16px 32px rgb(79 70 229 / 0.08);
    transform: translateY(-1px);
}

.outreach-thread-list {
    max-height: min(52vh, 520px);
    overflow-y: auto;
    padding-right: 4px;
    -webkit-overflow-scrolling: touch;
}

.outreach-score-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 150px;
}

.outreach-score-chip-bar {
    flex: 1 1 auto;
    height: 0.45rem;
    border-radius: 999px;
    overflow: hidden;
    background: #ddebf0;
}

.outreach-score-chip-bar > span {
    display: block;
    height: 100%;
    background: var(--portal-accent);
}

.outreach-report-bar {
    min-width: 190px;
}

.outreach-report-bar .progress {
    height: 0.5rem;
}

@media (max-width: 991.98px) {
    .outreach-scroll-table,
    .outreach-scroll-list {
        max-height: 480px;
    }

    .outreach-admin-card .card-body {
        padding: 1rem;
    }

    .outreach-admin-score {
        min-width: 150px;
        gap: 0.55rem;
    }

    .outreach-form-span-3,
    .outreach-form-span-4,
    .outreach-form-span-6,
    .outreach-form-span-8 {
        grid-column: span 12;
    }
}

/* Clickable client/team name -> summary popup (shared across admin pages) */
.ai-client-name-btn {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--bs-link-color, #f97316);
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}

.ai-client-name-btn:hover,
.ai-client-name-btn:focus-visible {
    text-decoration: underline;
}

.ai-client-name-btn--stacked {
    display: block;
    width: 100%;
}

.ai-client-name-btn--stacked .small.text-muted {
    color: #64748b !important;
    font-weight: 400;
    text-decoration: none;
}

.client-summary-modal-dialog {
    width: min(80vw, 960px);
    max-width: 80vw;
    height: 80vh;
}

.client-summary-modal-dialog .modal-content {
    height: 80vh;
    border-radius: 18px;
    overflow: hidden;
}

.client-summary-modal-dialog .modal-body {
    overflow-y: auto;
}

.csp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.csp-name {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
    margin: 0;
}

.csp-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: capitalize;
}

.csp-pill--green {
    background: rgb(34 197 94 / 0.14);
    color: #15803d;
}

.csp-pill--gray {
    background: rgb(100 116 139 / 0.14);
    color: #475569;
}

.csp-contact {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

.csp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.csp-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1rem 1.15rem;
}

.csp-card h3 {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin: 0 0 0.75rem;
}

.csp-field {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px dashed #e2e8f0;
    font-size: 0.88rem;
}

.csp-field:last-child {
    border-bottom: 0;
}

.csp-lbl {
    color: #64748b;
}

.csp-val {
    color: #0f172a;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

.csp-muted {
    color: #94a3b8;
    font-size: 0.88rem;
    margin: 0;
}

.csp-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.csp-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.85rem;
}

.csp-usage-label {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.5rem;
}

.csp-usage-bar {
    display: block;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
    margin-top: 0.25rem;
}

.csp-usage-bar span {
    display: block;
    height: 100%;
    background: var(--portal-orange-gradient);
    border-radius: 999px;
}

@media (max-width: 767.98px) {
    .client-summary-modal-dialog {
        width: 94vw;
        max-width: 94vw;
        height: 88vh;
    }

    .client-summary-modal-dialog .modal-content {
        height: 88vh;
    }
}