body{
    overflow-y: hidden !important;
}
.login-form-position {
    position: absolute;
    width: 100%;
    height: 100vh;
}
/*   z-index    */
.z-index-4{
    position: relative;
    z-index: 4;
}
.z-index-5{
    position: relative;
    z-index: 5;
}
.z-index-9{
    position: relative;
    z-index: 9;
}
.z-index-94{
    position: relative;
    z-index: 94;
}
.z-index-98{
    position: relative;
    z-index: 98 !important;
}
.z-index-99{
    position: relative;
    z-index: 99 !important;
}
.z-index-999{
    position: relative;
    z-index: 999 !important;
}
.z-index-9999{
    position: relative;
    z-index: 9999 !important;
}
/*   positions    */
.left-0{
    left: 0 !important;
}

/*   paddings    */
.padding-all-5{
    padding: 5px;
}
.padding-all-8{
    padding: 8px;
}
.padding-all-10{
    padding: 10px;
}
.padding-top-1{
    padding-top: 1px !important;
}
.padding-top-2{
    padding-top: 2px !important;
}
.padding-top-3{
    padding-top: 3px !important;
}
.padding-top-4{
    padding-top: 4px;
}
.padding-top-5{
    padding-top: 5px;
}
.padding-top-7{
    padding-top: 7px;
}
.padding-top-10{
    padding-top: 10px;
}
.padding-top-30{
    padding-top: 30px;
}
.padding-right-10{
    padding-right: 10px;
}
.padding-bottom-2{
    padding-bottom: 2px;
}
.padding-bottom-3{
    padding-bottom: 3px;
}
.padding-bottom-5{
    padding-bottom: 5px;
}
.padding-bottom-10{
    padding-bottom: 10px;
}
.padding-left-4{
    padding-left: 4px;
}
.padding-left-5{
    padding-left: 5px;
}
.padding-left-10{
    padding-left: 10px;
}
.padding-left-right-5{
    padding-left: 5px !important;
    padding-right: 5px !important;
}
.padding-right-5{
    padding-right: 5px !important;
}

.padding-all-5{
    padding: 5px;
}
.padding-all-0{
    padding: 0 !important;
}
.padding-all-3{
    padding: 3px;
}
.padding-all-20{
    padding: 20px !important;
}
.padding-top-20{
    padding-top: 20px;
}
.padding-right-20{
    padding-right: 20px;
}
.padding-bottom-20{
    padding-bottom: 20px;
}
.padding-left-20{
    padding-left: 20px;
}
.padding-left-50{
    padding-left: 50px;
}
.
padding-left-7{
    padding-left: 7px;
}

.padding-top-bottom-5{
    padding-top: 5px;
    padding-bottom: 5px;
}
.padding-left-right-5{
    padding-left: 5px;
    padding-right: 5px;
}
.padding-top-bottom-10{
    padding-top: 10px;
    padding-bottom: 10px;
}
.padding-left-right-10{
    padding-left: 10px;
    padding-right: 10px;
}
.padding-left-right-20{
    padding-left: 20px;
    padding-right: 20px;
}

/*   width    */
.w-70{
    width: 70px !important;
}
.w-30{
    width: 30px !important;
}
.w-150{
    width: 150px !important;
}
.w-200{
    width: 200px !important;
}
.w-300{
    width: 300px !important;
}
/*   height    */
.h-60{
    height: 60px !important;
}
.h-80{
    height: 80px !important;
}
.h-100{
    height: 100px !important;
}
.h-300{
    height: 300px !important;
}
.h-100-vh{
    height: 100vh !important;
}
.h-160{
    max-height: 160px !important;
}
.h-10-px{
    height: 10px;
}
.h-38-px{
    height: 38px;
}

/*   cursors    */
.cursor-pointer{
    cursor: pointer;
}

.cursor-pointer button{
    padding: 0;
    border: none;
    background: transparent;
}
.cursor-no-drop{
    cursor: no-drop !important;
}
.cursor-not-allowed{
    cursor: not-allowed !important;
}
/*   margins    */
.minus-margin-top-1{
    margin-top: -1px !important;
}
.minus-margin-top-10{
    margin-top: -10px !important;
}
.minus-margin-right-200{
    margin-right: -200px !important;
}
.margin-right-200{
    margin-right: 200px !important;
}
.margin-top-2{
    margin-top: 2px !important;
}
.margin-top-3{
    margin-top: 3px !important;
}
.margin-top-24{
    margin-top: 24px !important;
}
.margin-top-35{
    margin-top: 35px !important;
}
.margin-top-4{
    margin-top: 4px !important;
}
.margin-top-5{
    margin-top: 5px !important;
}
.margin-top-6{
    margin-top: 6px !important;
}
.margin-top-8{
    margin-top: 8px !important;
}
.margin-top-10{
    margin-top: 10px !important;
}
.margin-top-15{
    margin-top: 15px !important;
}
.margin-bottom-0{
    margin-bottom: 0px !important;
}
.margin-bottom-4{
    margin-bottom: 4px !important;
}
.margin-bottom-7{
    margin-bottom: 7px !important;
}
.margin-all-10{
    margin: 10px;
}
.margin-top-10{
    margin-top: 10px;
}
.margin-top-30{
    margin-top: 30px;
}
.margin-right-1{
    margin-right: 1px !important;
}
.margin-right-2{
    margin-right: 2px !important;
}
.margin-right-5{
    margin-right: 5px !important;
}
.margin-right-10{
    margin-right: 10px !important;
}
.margin-bottom-10{
    margin-bottom: 10px;
}
.margin-left-auto{
    margin-left: auto !important;
}
.margin-left-5{
    margin-left: 5px;
}
.margin-left-7{
    margin-left: 7px;
}
.margin-left-10{
    margin-left: 10px;
}
.margin-left-50-percent{
    margin-left: -50% !important;
}
.minus-margin-left-50-percent{
    margin-left: -50% !important;
}
.minus-margin-left-20{
    margin-left: -20px !important;
}

.margin-bottom-2{
    margin-bottom: 2px;
}
.margin-bottom-5{
    margin-bottom: 5px;
}
.margin-all-20{
    margin: 20px;
}
.margin-top-minus-20{
    margin-top: -20px !important;
}
.margin-top-10{
    margin-top: 10px;
}
.margin-top-16{
    margin-top: 16px;
}
.margin-top-20{
    margin-top: 20px;
}
.margin-right-20{
    margin-right: 20px;
}
.margin-bottom-20{
    margin-bottom: 20px;
}
.margin-left-20{
    margin-left: 20px;
}
.margin-left-minus-17{
    margin-left: -17px;
}
.margin-left-minus-25{
    margin-top: 25px;
}

.margin-right-auto{
    margin-right: auto !important;
}
.margin-top-bottom-5{
    margin-top: 5px;
    margin-bottom: 5px;
}
.margin-left-right-5{
    margin-left: 5px;
    margin-right: 5px;
}
.margin-top-bottom-10{
    margin-top: 10px;
    margin-bottom: 10px;
}
.margin-left-right-10{
    margin-left: 10px;
    margin-right: 10px;
}

.input-extra-padding{
    padding-top: 4px !important;
    padding-bottom: 1px !important;
}

.gap-10{
    gap: 10px !important;
}
.gap-20{
    gap: 20px !important;
}

.font-size-12{
    font-size: 12px !important;
}
.font-size-14{
    font-size: 14px !important;
}
.font-size-16{
    font-size: 16px !important;
}
.font-size-18{
    font-size: 18px !important;
}
.font-size-20{
    font-size: 20px !important;
}
.font-size-22{
    font-size: 22px !important;
}
.font-size-24{
    font-size: 24px !important;
}
.font-size-28{
    font-size: 28px !important;
}
.font-size-40{
    font-size: 40px !important;
}

.font-weight-600{
    font-weight: 600 !important;
}
.font-weight-700{
    font-weight: 700 !important;
}
.font-weight-800{
    font-weight: 800 !important;
}
.font-weight-900{
    font-weight: 900 !important;
}
.font-weight-1000{
    font-weight: 1000 !important;
}


button{
    background: transparent;
    border: none;
    /*!*padding: 5px 15px;*! this will effect table arrow design*/
}
.no-white-space {
    white-space: nowrap !important;
}
.text-decoration-underlined{
    text-decoration: underline;
}

.inner-button-shadow {
    box-shadow: inset 1px 1px 5px #00000070, 0px 1px 1px #333;
}
/*   cards    */
.border-radius-all-5{
    border-radius: 5px;
}
.card.no-top-left-border-radius{
    border-top-left-radius: 0 !important;
}
.card.no-top-right-border-radius{
    border-top-right-radius: 0 !important;
}

/*   overflow    */
.overflow-y-scroll{
    overflow-y: auto !important;
}
.overflow-x-scroll{
    overflow-x: auto !important;
}
.overflow-x-hidden{
    overflow-x: hidden !important;
}
.modal{
    z-index: 9999 !important;
}
.modal-backdrop{
    display: none !important;
}
.display-none{
    display: none !important;
}
.display-block{
    display: block !important;
}
/*.modal-backdrop.show {*/
/*    opacity: 0 !important;*/
/*}*/
/*   border radius    */
.no-border-top{
    border-top: 0 !important;
}
/*   border radius    */
.no-all-border{
    border: 0 !important;
}
.no-border-bottom{
    border-bottom: 0 !important;
}
.no-border-left{
    border-left: 0 !important;
}
.no-border-right{
    border-right: 0 !important;
}
.border-radius-025{
    border-radius: 0.25rem !important;
}
.border-radius-8{
    border-radius: 8px;
}
.border-radius-right-8{
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* Shared open-arrow chrome for CombinateSelector / CategorySelector / CustomDatePicker */
.selector-open-arrow {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.selector-open-arrow-icon {
    font-size: 20px !important;
    padding: 10px 13px !important;
    margin: 0 !important;
    line-height: 1;
}

/* Compact line-item controls (invoice create/update tables) — same theme tokens */
.ams-items-table-wrap {
    overflow: visible !important;
}

.ams-items-table-wrap table,
.ams-items-table-wrap thead,
.ams-items-table-wrap tbody,
.ams-items-table-wrap tr,
.ams-items-table-wrap th,
.ams-items-table-wrap td {
    overflow: visible;
}

.ams-items-table-wrap td {
    vertical-align: middle;
    padding: 6px 8px;
}

.ams-items-row-num-col {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    text-align: center !important;
    padding: 6px 4px !important;
}

.ams-items-row-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
}

.ams-line-selector,
.ams-line-field {
    box-sizing: border-box;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
}

.ams-line-selector {
    /* Must stay visible so open menus are not clipped */
    overflow: visible;
}

.ams-line-selector__field,
input.ams-line-field {
    box-sizing: border-box;
    width: 100%;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border: none !important;
    outline: none;
    font-size: 14px;
    line-height: 1.2;
    padding: 0 12px !important;
}

.ams-line-selector__field {
    background: transparent !important;
}

input.ams-line-field {
    display: block;
}

.ams-line-selector .selector-open-arrow {
    height: 40px;
}

.ams-line-selector .selector-open-arrow-icon {
    font-size: 16px !important;
    padding: 0 12px !important;
    height: 40px;
    display: inline-flex;
    align-items: center;
}

.ams-line-selector__menu {
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 1050;
    margin: 0;
    padding: 5px;
    list-style: none;
    max-height: 12rem;
    overflow-y: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.46);
}

.ams-line-selector__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.ams-line-selector__option {
    border: none;
    border-radius: 0.25rem;
    background: transparent;
    cursor: pointer;
}

.ams-line-selector__option:hover,
.ams-line-selector__option.selectedValue {
    filter: brightness(1.08);
}

/* Shared AI affordances (match TopMenu auto_awesome gradient) */
.ams-ai-detect-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid rgba(139, 92, 246, 0.45);
    background: rgba(139, 92, 246, 0.12);
    color: #c4b5fd;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ams-ai-detect-btn:hover:not(:disabled) {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(236, 72, 153, 0.55);
}

.ams-ai-detect-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ams-ai-detect-btn__icon {
    font-size: 16px !important;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ams-ai-confidence-badge {
    position: absolute;
    top: -7px;
    right: 34px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    cursor: help;
}

.ams-ai-confidence-badge .material-icons-outlined {
    font-size: 11px !important;
}

.ams-ai-confidence-badge[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #fff;
    background: #1f2937;
    border: 1px solid rgba(139, 92, 246, 0.45);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    z-index: 20;
}

.ams-ai-confidence-badge[data-tooltip]:hover::after,
.ams-ai-confidence-badge[data-tooltip]:focus-visible::after {
    opacity: 1;
}

.ams-items-col-desc {
    min-width: 180px;
    width: 22%;
}

.ams-items-col-narrow {
    width: 90px !important;
    min-width: 80px !important;
    max-width: 100px !important;
}

.ams-items-col-money {
    width: 120px !important;
    min-width: 110px !important;
    max-width: 132px !important;
}

/* Discount includes value + % / currency control */
.ams-items-col-discount {
    width: 148px !important;
    min-width: 136px !important;
    max-width: 160px !important;
}

.form-label-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(139, 92, 246, 0.45);
    background: rgba(139, 92, 246, 0.12);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.form-label-help-btn:hover {
    background: rgba(139, 92, 246, 0.22);
    border-color: rgba(236, 72, 153, 0.55);
}

.form-label-help-btn__icon {
    font-size: 15px !important;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.form-label-help-panel {
    position: fixed;
    min-width: 240px;
    max-width: 380px;
    padding: 12px 14px;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    z-index: 100000;
}

.form-label-help-panel p {
    white-space: normal;
}
.border-radius-left-8{
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}
.border-radius-8{
    border-radius: 8px !important;
}
.border-radius-12{
    border-radius: 12px !important;
}
.border-radius-16{
    border-radius: 16px !important;
}
.border-radius-top-16{
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
}
.border-radius-bottom-16{
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}
.border-radius-50{
    border-radius: 50% !important;
}
.border-top-radius-025{
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
}
.border-radius-left-025{
    border-top-left-radius: 0.25rem !important;
    border-bottom-left-radius: 0.25rem !important;
}
.border-radius-right-025{
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
}

.no-border-radius-left{
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.no-border-radius-right{
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.border-radius-top-right{
    border-top-right-radius: 0.25rem !important;
}
.border-radius-bottom-right{
    border-bottom-right-radius: 0.25rem !important;
}

.border-radius-top-left{
    border-top-left-radius: 0.25rem !important;
}
.border-radius-bottom-left{
    border-bottom-left-radius: 0.25rem !important;
}

.border-top-left-radius-12px{
    border-top-left-radius: 12px !important;
}
.border-top-right-radius-12px{
    border-top-right-radius: 12px !important;
}
.border-bottom-right-radius-12px{
    border-bottom-right-radius: 12px !important;
}
.border-bottom-left-radius-12px{
    border-bottom-left-radius: 12px !important;
}

.border-top-left-radius-16px{
    border-top-left-radius: 16px !important;
}
.border-top-right-radius-16px{
    border-top-right-radius: 16px !important;
}
.border-bottom-right-radius-16px{
    border-bottom-right-radius: 16px !important;
}
.border-bottom-left-radius-16px{
    border-bottom-left-radius: 16px !important;
}
/*   transitions    */
.transition-3sec-ease{
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.quickgrid .col-header-content {
    padding-right: 0 !important;
}
.form-control:focus {
    box-shadow: none !important;
    outline: none !important;

}

.form-control {
    padding: 0.2rem 0.75rem !important;
}
input[type=number] {
    -moz-appearance: textfield;
}
.main-button button.greyOut,
.main-button a.greyOut,
.main-button button:disabled,
.grey-out-button{
    color: #b8b3b3 !important;
    box-shadow: inset 1px 1px 5px #00000070, 0px 1px 1px #333;
    border: 1px solid #00000070 !important;
}
.main-button button.greyOut:hover{
    color: #b8b3b3 !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.5) !important;
}
sup.required{
    font-size: 17px;
    color: red;
    margin-left: 2px;
}

/*.row {*/
/*    margin-right: 0 !important;*/
/*    margin-left: 0 !important;*/
/*}*/
/*.row > * {*/
/*    padding-right: 0 !important;*/
/*    padding-left: 0 !important;*/
/*}*/
input{
    margin: 0 !important;
}
/*.form-control {*/
/*    padding: 1px 10px 0 10px !important;*/
/*}*/
.position-absolute{
    position: absolute !important;
}
.position-inherit{
    position: inherit;
}

/*   rotate text    */
.rotate-minus-90,
.rotate-minus-90:hover{
    transform: rotate(-90deg) !important;
}
.go-first,
.go-last{
    display: none !important;
}

/* table, quickgrid component */
.quickgrid[theme="default"] {
    --col-gap: 0 !important;
}
table {
    width: 100%;
}
table thead th .headerStick{
    white-space: nowrap !important;
    padding: 5px 5px !important;
}
table thead tr{
    position: sticky;
    top: -1px;
    left: 0;
    z-index: 999999;
}
table.custom-data-table tbody td{
    padding-left: 10px !important;
    padding-right: 10px !important;
    white-space: nowrap !important;
}
table tbody td:last-child{
    padding-left: 0px !important;
    padding-right: 0px !important;
    white-space: nowrap !important;
}

/* Card transition animations */
.card-show {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    visibility: visible;
    display: block;
}

.card-hide {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
    transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    visibility: hidden;
    pointer-events: none;
}

.card-fade-in {
    animation: slideInFromBottom 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.card-fade-out {
    animation: slideOutToTop 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes slideInFromBottom {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.8);
        filter: blur(4px);
    }
    50% {
        opacity: 0.7;
        transform: translateY(20px) scale(0.9);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes slideOutToTop {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
    50% {
        opacity: 0.5;
        transform: translateY(-20px) scale(0.95);
        filter: blur(2px);
    }
    100% {
        opacity: 0;
        transform: translateY(-40px) scale(0.8);
        filter: blur(4px);
        display: none;
    }
}

/* Cards visible by default with animations */
.individual-service-card {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.group-service-card {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* SIMPLE - NO SPACE, NO OPACITY BULLSHIT */
[data-service-type="group"] .individual-service-card {
    display: none !important;
}

[data-service-type="individual"] .group-service-card {
    display: none !important;
}

/* Smooth transitions for all cards */
.card-transition {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Scale effect for the Service Type card when active */
.service-type-active {
    transform: scale(1.03) !important;
    box-shadow: 0 12px 35px rgba(0, 123, 255, 0.2) !important;
    border-color: rgba(0, 123, 255, 0.4) !important;
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.05), rgba(0, 123, 255, 0.02)) !important;
}

/* Group items section special animation */
.group-items-show {
    animation: expandIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}


/* Service type card special styling */
.service-type-card {
    transition: all 0.4s ease;
}

[data-service-type="group"] .service-type-card {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.15);
    border-color: rgba(0, 123, 255, 0.3);
}
table.custom-data-table.sticky-edge-columns {
    overflow: visible;
}

table.custom-data-table.sticky-edge-columns thead th:first-child,
table.custom-data-table.sticky-edge-columns tfoot th:first-child,
table.custom-data-table.sticky-edge-columns tbody td:first-child {
    position: sticky !important;
    left: -1px;
    z-index: 3;
}

table.custom-data-table.sticky-edge-columns thead th:last-child.actions,
table.custom-data-table.sticky-edge-columns tfoot th:last-child.actions,
table.custom-data-table.sticky-edge-columns tbody td:last-child.actions {
    position: sticky !important;
    right: -1px;
    z-index: 3;
}

table.custom-data-table.sticky-edge-columns thead th:first-child,
table.custom-data-table.sticky-edge-columns thead th:last-child.actions {
    z-index: 2000 !important;
}

table.custom-data-table.sticky-edge-columns tbody td:first-child,
table.custom-data-table.sticky-edge-columns tbody td:last-child.actions {
    z-index: 2000 !important;
}

table.custom-data-table.sticky-edge-columns.sticky-last-data-column thead th:last-child,
table.custom-data-table.sticky-edge-columns.sticky-last-data-column tfoot th:last-child,
table.custom-data-table.sticky-edge-columns.sticky-last-data-column tbody td:last-child {
    position: sticky !important;
    right: -1px;
    z-index: 3;
}

table.custom-data-table.sticky-edge-columns.sticky-last-data-column thead th:last-child {
    z-index: 2000 !important;
}

table.custom-data-table.sticky-edge-columns.sticky-last-data-column tbody td:last-child {
    z-index: 2000 !important;
    box-shadow: inset 2px 0 0 #E2E8F0 !important;
}

table.custom-data-table.sticky-second-column thead th:nth-child(2),
table.custom-data-table.sticky-second-column tfoot th:nth-child(2),
table.custom-data-table.sticky-second-column tbody td:nth-child(2) {
    position: sticky !important;
    z-index: 2;
}

table.custom-data-table.sticky-second-column thead th:nth-child(2),
table.custom-data-table.sticky-second-column tbody td:nth-child(2) {
    z-index: 998 !important;
}

table.custom-data-table tbody td p{
    padding-right: 10px !important;
    padding-left: 10px !important;
    margin-bottom: 0 !important;
}
.lines{
    padding-left: 3px !important;
}
/* forms */
.form-error-message{
    color: red !important;
    font-size: 12px;
}
.form-error-message-border{
    border: 1px solid red !important;
}

/*   toast notification    */


.custom-toast-notification {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 300px;
    height: auto;
    top: 10px;
    right: 10px;
    z-index: 99999999999;
}

.custom-toast-notification-title i{
    color: #4CAF50;
    font-size: 18px;
}
.custom-toast-notification-line {
    width: 100%;
    height: 2px;
    background-color: #4CAF50;
    position: absolute;
    left: 0;
    bottom: 0;
    animation: shrinkLine 6s linear forwards;
}

@keyframes shrinkLine {
    0% {
        width: 100%;
    }
    100% {
        width: 0%;
    }
}


.small-text-size{
    font-size: 12px;
}
.medium-text-size{
    font-size: 14px;
}
.large-text-size{
    font-size: 16px;
}

.small-title-size{
    font-size: 14px;
    font-weight: 900;
}
.medium-title-size{
    font-size: 18px;
    font-weight: 900;
}
.large-title-size{
    font-size: 22px;
    font-weight: 900;
}




.custom-modal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: #000;
    opacity: 0.5;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.custom-modal-extra-small{
    width: 100%;
    max-width: 320px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9999999999;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.custom-modal-small{
    width: 500px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9999999999;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.custom-modal-medium{
    width: 70%;
    max-width: 800px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9999999999;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.custom-modal-large{
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9999999999;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
@media (max-width: 880px) {
    .custom-modal-large {
        width: 100%;
        height: 100vh;
        overflow-y: scroll;
        position: fixed;
        top: 0;
        left: 0;
    }
    .task-management-buttons{
        display: grid;
        width: 100%;
        text-align: center;
    }
    .task-management-buttons button{
        width: 250px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}
@media (min-width: 881px) {
    .custom-modal-large {
        width: 80%;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .task-management-buttons{
        display: flex;
        width: 100%;
        justify-content: left;
    }
}
.custom-modal-extra-large{
    width: 95%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0.25rem !important;
    z-index: 99999;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.card{
    -webkit-transition: all .3s ease !important;
    -moz-transition: all .3s ease !important;
    -ms-transition: all .3s ease !important;
    -o-transition: all .3s ease !important;
    transition: all .3s ease !important;
}
.transition-3sec-ease{
    -webkit-transition: all .3s ease !important;
    -moz-transition: all .3s ease !important;
    -ms-transition: all .3s ease !important;
    -o-transition: all .3s ease !important;
    transition: all .3s ease !important;
}




.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown:hover .dropdown-title{
    background-color: #1f2940 !important;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 9 !important;
}

.dropdown {
    z-index: 999;
}
.dropdown-content .action-button:hover{
    background-color: #141B2D !important;
    border-radius: 12px !important;
}
.dropdown-content .action-button{
    border-radius: 12px !important;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {display: block;}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    gap: 5px;
}

.flex-container .item {
    flex: 0 0 23%; /* This ensures each item takes exactly 25% of the container width */
    height: 50px; /* Fixed height, adjust as needed */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
.colourActive{
    border: 2px solid #FFFFFF;
}


/* Media query for smaller screens */
@media (max-width: 600px) {
    .flex-container .item {
        flex: 0 0 50%; /* On smaller screens, each item takes 50% width */
    }
}

/* Media query for even smaller screens */
@media (max-width: 400px) {
    .flex-container .item {
        flex: 0 0 100%; /* On very small screens, each item takes full width */
    }
}


.draggable-item {
    transition: all 0.2s ease;
}

.dragging-active:not(.dragged):hover {
    background-color: #f0f0f0;
    margin-top: 2rem;
}

.dragged {
    padding-bottom: 40px;
}


.tabs {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.tabs nav {
    display: flex;
    background-color: #f1f1f1;
}

.tabs nav a {
    flex: 1;
    padding: 10px;
    text-align: center;
    background-color: #e0e0e0;
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s;
}

.tabs nav a:hover {
    background-color: #d0d0d0;
}

.tab-content {
    display: none;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
}

.tab-content:target {
    display: block;
}

.empty-state {
    width: 750px;
    margin: 0 auto;
}
.empty-state__content {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.empty-state__content .empty-state__icon {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    border-radius: 200px;
    text-align: center;
    box-shadow: 0px 2px 1px #e1e3ec;
}
.empty-state__content .empty-state__icon img {
    width: 170px;
}
.empty-state__content .empty-state__message {
    color: #38a169;
    font-size: 1.5rem;
    font-weight: 500;
    margin-top: 0.85rem;
}
.empty-state__content .empty-state__help {
    color: #a2a5b9;
    font-size: 0.875rem;
}

.credit {
    color: #A2A5B9;
    font-size: 0.75rem;
    text-align: center;
}
.credit a {
    color: #444;
}


/* Keyframe for spinning the ring */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Keyframe for the dots animation */
@keyframes loadingAnimation {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}



.login-buttons-dark{
    margin-top: 10px;
    border: 1px solid #000000;
    color: #000000;
    border-radius: 10px;
}
.login-buttons-light{
    margin-top: 10px;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    border-radius: 10px;
}

/* This file is now scoped to WeeklyScheduler.razor */

.scheduler-container {
    font-family: Arial, sans-serif;
    padding: 1rem;
}

.scheduler-table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #ccc;
    table-layout: fixed;
}

.scheduler-table th, .scheduler-table td {
    border: 1px solid #ddd;
    text-align: center;
    padding: 8px;
}

.scheduler-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.time-slot {
    height: 25px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.time-slot:hover {
    background-color: #e0e0e0;
}

/* 
  This selector is now scoped by Blazor.
  It will be rewritten to something like .highlighted[b-c1x2y3z4]
  which makes it extremely specific and guarantees it will apply.
*/
.scheduler-table td.highlighted {
    background-color: #0d6efd !important; /* Blue */
    color: white !important;
}

.time-header {
    font-weight: bold;
    background-color: #f8f9fa;
    min-width: 70px;
}



.services_builder .item-title {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.services_builder .item-price,
.service-card .item-price {
    font-size: 18px;
    font-weight: 700;
    color: #28a745;
    text-shadow: 0 1px 2px rgba(40, 167, 69, 0.2);
}

.services_builder .edit-btn,
.service-card .edit-btn {
    position: absolute;
    top: 12px;
    right: 48px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(40, 167, 69, 0.2);
    border: 1px solid rgba(40, 167, 69, 0.2);
    color: #28a745;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    font-size: 14px;
}
.services_builder .edit-btn:hover,
.service-card .edit-btn:hover {
    background: #28a745;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.2);
}
.services_builder .remove-btn,
.service-card .remove-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.2);
    color: #dc3545;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    font-size: 14px;
}
.services_builder .action-buttons-card,
.service-card .action-buttons-card {
    height: 40px; width: 100px; position: absolute; top: 4px; right: 0;
    opacity: 0;
}

.services_builder .menu-item-card:hover .remove-btn,
.services_builder .menu-item-card:hover .edit-btn,
.services_builder .menu-item-card:hover .action-buttons-card,
.service-card:hover .action-buttons-card,
.service-card:hover .remove-btn,
.service-card:hover .edit-btn{
    opacity: 1;
}

.services_builder .remove-btn:hover,
.service-card .remove-btn:hover {
    background: #dc3545;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

.services_builder .item-content {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.services_builder .item-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
}

.services_builder .item-info {
    flex: 1;
    min-width: 0;
}

.services_builder .item-meta {
    display: flex;
    align-items: center;
    margin-top: auto;
}

.services_builder .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.services_builder .empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.services_builder .empty-state h5 {
    margin-bottom: 8px;
    color: #495057;
}

.services_builder .empty-state p {
    margin: 0;
    font-size: 14px;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .services_builder .menu-item-card {
        min-height: 120px;
    }

    .services_builder .item-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
        margin-right: 12px;
    }

    .services_builder .item-title {
        font-size: 14px;
    }

    .services_builder .item-price {
        font-size: 16px;
    }
}


/* Enhanced Menu Item Cards */
.services_builder .menu-item-card {
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    min-height: 90px;
}

.services_builder .menu-item-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    border-color: #dee2e6;
}

.services_builder .menu-item-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #007bff, #6f42c1);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.services_builder .menu-item-card:hover::before {
    opacity: 1;
}

.services_builder .menu-item-card.category-card::before {
    background: linear-gradient(90deg, #ffc107, #fd7e14);
}

.services_builder .menu-item-card.group-card::before {
    background: linear-gradient(90deg, #28a745, #20c997);
}

.services_builder .menu-item-card.item-card::before {
    background: linear-gradient(90deg, #007bff, #17a2b8);
}

.services_builder .item-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 16px;
    transition: all 0.3s ease;
}

.services_builder .category-icon {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    color: #856404;
    border: 2px solid #ffeaa7;
}

.services_builder .group-icon {
    background: linear-gradient(135deg, #d1f2eb, #a3e9d0);
    color: #155724;
    border: 2px solid #a3e9d0;
}

.services_builder .item-icon-style {
    background: linear-gradient(135deg, #cce7ff, #99d6ff);
    color: #004085;
    border: 2px solid #99d6ff;
}

.services_builder .menu-item-card:hover .item-icon {
    transform: scale(1.1);
}

.services_builder .item-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px;
    transition: all 0.3s ease;
}

.services_builder .badge-category {
    background: linear-gradient(135deg, #ffc107, #fd7e14);
    color: #212529;
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
}

.services_builder .badge-group {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

.services_builder .badge-item {
    background: linear-gradient(135deg, #007bff, #17a2b8);
    color: white;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}


/*dropArea*/

.dropArea {
    border: 2px dashed #5988ff;
    position: relative;
    height: 65px;
    width: 293px;
    padding: 20px;
    text-align: center;
    color: #5988ff;
    overflow: hidden;
}

.dropAreaHover {
    background-color: #e1f0ff;
    border-color: #ff7e67;
}

.dropArea input[type="file"] {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    top: 0;
    left: 0;
}

.dropArea-button {
    border: 2px dashed #5988ff;
    border-left: none;
    position: relative;
    height: 65px;
    width: 100px;
    padding: 20px;
    text-align: center;
    color: #5988ff;
    overflow: hidden;
}

/* Full-modal drop overlay */
.modal-drop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(241, 245, 249, 0.85);
    border: 3px dashed #5988ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    pointer-events: auto;
}

.modal-drop-overlay .hint {
    text-align: center;
    color: #3b82f6;
}

.modal-drop-overlay .hint .icon {
    font-size: 64px;
    margin-bottom: 8px;
}

.modal-drop-overlay header {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.form-check-input {
    padding: 10px 10px !important;
}

/* Chart container - position toolbar and legend on same line as title */
.chart-with-header {
    position: relative;
}

.chart-with-header .menu-item-card {
    margin-bottom: 10px;
}

.chart-with-header .apexcharts-toolbar {
    position: absolute !important;
    z-index: 100 !important;
}

/* Legacy menu-item-card chart headers */
.chart-with-header:not(:has(.responsive-modal-header)) .apexcharts-toolbar {
    top: -100px !important;
    right: 16px !important;
}

/* ResponsiveModalHeader chart cards — toolbar in header top-right */
.chart-with-header:has(.responsive-modal-header) .apexcharts-toolbar {
    top: -108px !important;
    right: 20px !important;
}

.chart-with-header:has(.responsive-modal-header) .responsive-modal-header__title {
    padding-right: 140px;
}

.chart-with-header .apexcharts-legend.apx-legend-position-top {
    position: absolute !important;
    top: 20px !important;
    left: 250px !important;
    right: 150px !important;
}
.apexcharts-legend-group-vertical {
    flex-direction: inherit !important;
}

.bank-cards-carousel {
    display: flex;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    position: relative;
    z-index: 99 !important;
}

.bank-cards-track-outer {
    flex: 1;
    min-width: 0;
    overflow: visible;
}

.bank-cards-track {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: 16px;
    flex-wrap: nowrap;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.bank-cards-track::-webkit-scrollbar {
    display: none;
}

.bank-cards-carousel .dropdown-content {
    z-index: 9999;
}

.bank-cards-track > * {
    flex: 0 0 auto;
}

.bank-cards-track::-webkit-scrollbar {
    height: 8px;
}

.bank-cards-track::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

.bank-account-card {
    flex: 0 0 auto;
    width: 300px;
}

.bank-cards-fixed-right {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex: 0 0 auto;
}

.bank-add-card {
    width: 80px;
    flex: 0 0 auto;
}

.bank-cards-arrow {
    width: 56px;
    flex: 0 0 56px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bank-cards-arrow span {
    font-size: 32px;
    color: var(--main-text-color);
}

.dark .bank-cards-arrow,
.black .bank-cards-arrow {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.bank-cards-arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .bank-account-card,
    .bank-add-card {
        width: 260px;
    }
    .bank-cards-arrow {
        width: 44px;
        flex-basis: 44px;
        border-radius: 14px;
    }
    .bank-cards-arrow span {
        font-size: 28px;
    }
}
.view-switcher {
    display: flex;
    gap: 4px;
    background: rgba(15, 23, 42, 0.3);
    padding: 4px;
    border-radius: 12px;
}

.view-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    font-weight: 500;
}

.view-btn:hover {
    color: var(--text-color, #e2e8f0);
    background: rgba(148, 163, 184, 0.1);
}

.view-btn.active {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.view-btn .material-icons-outlined {
    font-size: 18px;
}

.category-breadcrumb-nav {
    flex: 1;
    min-width: 0;
}

.category-breadcrumb-track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px 8px 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.category-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.category-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.category-breadcrumb-chevron {
    font-size: 18px;
    flex-shrink: 0;
}

.category-breadcrumb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 220px;
}

button.category-breadcrumb-chip:hover {
    transform: translateY(-1px);
}

.category-breadcrumb-chip.category-breadcrumb-chip-active {
    color: white;
    font-weight: 600;
    cursor: default;
}

.category-breadcrumb-chip.category-breadcrumb-chip-active.create-workspace-btn {
    padding: 7px 14px;
}

.category-breadcrumb-chip .material-icons-outlined {
    font-size: 18px;
    flex-shrink: 0;
}

.category-breadcrumb-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

span.category-breadcrumb-chip {
    cursor: default;
}

.category-breadcrumb-level-badge {
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.category-level-badge {
    background: linear-gradient(135deg, #0D5EA3 0%, #1177CC 100%) !important;
    color: white !important;
}

.category-create-content {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-top: 4px;
}

.category-create-grid {
    padding-top: 0;
}

.category-create-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 0;
}

.nav-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    transform: translateY(-1px);
}

.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.3);
    color: var(--text-color, #94a3b8);
    cursor: pointer;
    transition: all 0.2s ease;
}

.back-btn:hover {
    background: rgba(148, 163, 184, 0.2);
    color: var(--text-color, #e2e8f0);
}

.back-btn .material-icons-outlined {
    font-size: 20px;
}

.add-level-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #e3945e 0%, #ea580c 100%);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.randform-iframe body {
    margin: 0;
    padding: 0;
    font-weight: 400;
    color: #333;
    background: transparent !important;
    position: relative
}

/* More specific rules to override form preview inline styles */
.randform-iframe html,
.randform-iframe .form-preview-page,
.randform-iframe .form-preview-page.theme-light,
.randform-iframe .form-preview-page.theme-dark {
    background: transparent !important;
}

/* Override any element that might have background */
.randform-iframe * {
    background-color: transparent !important;
}

/* But preserve form card background — inline styles on .form-card take precedence */
.randform-iframe .form-body-section,
.randform-iframe .form-header-section {
    background-color: var(--form-bg-sample, #ffffff) !important;
}
.randform-iframe body {
    margin: 0;
    padding: 0;
    font-weight: 400;
    color: #333;
    background: #f8f4ee00 !important;
    position: relative
}
.ceo-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.ceo-save-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.ceo-schema-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    color: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ceo-schema-btn:hover {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
}

.ceo-page-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.ceo-page-item:hover {
    transform: translateX(4px);
    border-color: rgba(59, 130, 246, 0.3);
}

.ceo-page-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ceo-page-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.ceo-page-expand {
    margin-top: -5px;
    padding: 16px 20px;
    font-size: 13px;
    opacity: 0.8;
}
.ai-nav-search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--icon-highlight-bg);
}
.ai-nav-search input.main-text-color,
.ai-nav-search input {
    color: inherit;
}
.ai-nav-search input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 12px;
}

/* ===== AI sidebar tabs (Chats / Projects) ===== */
.ai-nav-tabs-wrapper {
    display: flex;
    gap: 4px;
}

.ai-nav-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.ai-nav-tab .material-icons-outlined {
    font-size: 16px;
}

.ai-nav-tab:hover:not(.active) {
    background: var(--icon-highlight-bg);
}

.ai-nav-tab.active {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.ai-nav-tab.active .material-icons-outlined {
    color: inherit;
}

.ai-nav-list {
    overflow-y: auto;
    max-height: calc(100vh - 380px);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ai-conv-group-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 4px 4px;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ai-conv-group-header:first-child { margin-top: 0; }
.ai-conv-group-label { text-transform: uppercase; letter-spacing: 0.05em; }

.ai-text-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    padding: 6px 4px;
    margin-top: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: color 0.15s;
    text-decoration: none;
}
.ai-text-link:hover {
    color: #8b5cf6 !important;
}

.menu-items.ai-nav-list .menu-item.ai-conv-item {
    gap: 8px;
}
.ai-nav-list .ai-conv-item,
.ai-project-conversations .ai-conv-item,
.menu-items.ai-nav-list .menu-item.ai-conv-item,
.ai-project-container .menu-item.ai-conv-item,
div.ai-conv-item {
    position: relative;
    padding: 10px 12px !important;
    border-radius: 12px;
    transition: background 0.15s ease, border-color 0.15s ease;
    border: 1px solid transparent;
}
.ai-nav-list .ai-conv-item:hover,
.ai-project-conversations .ai-conv-item:hover,
.menu-items.ai-nav-list .menu-item.ai-conv-item:hover,
.ai-project-container .menu-item.ai-conv-item:hover,
div.ai-conv-item:hover {
    background: var(--icon-highlight-bg);
    border-color: var(--border-color);
}
.ai-nav-list .ai-conv-item.active,
.ai-project-conversations .ai-conv-item.active,
.menu-items.ai-nav-list .menu-item.ai-conv-item.active,
.ai-project-container .menu-item.ai-conv-item.active,
div.ai-conv-item.active {
    background: var(--icon-highlight-bg);
    border-color: rgba(139, 92, 246, 0.35);
    border-left: 3px solid #8b5cf6;
    padding-left: 9px !important;
}

.ai-conv-info { display: flex; flex-direction: column; gap: 2px; overflow: hidden; flex: 1; min-width: 0; }
.ai-conv-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
    min-width: 0;
}
.ai-conv-rename-input {
    width: 100%;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    outline: none;
}
.ai-conv-title {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}
.ai-conv-item.active .ai-conv-title {
    font-weight: 600;
}
.ai-conv-item.active .ai-conv-title.main-text-color {
    color: #8b5cf6 !important;
}
.ai-conv-time {
    font-size: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}
.ai-conv-project {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    color: white;
    padding: 0 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    align-self: flex-start;
}
.ai-menu-trigger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    color: var(--secondary-text-color);
    opacity: 0;
    transition: all 0.15s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-menu-trigger-icon {
    fill: currentColor;
    display: block;
}
.ai-nav-list .ai-conv-item:hover .ai-menu-trigger,
.ai-project-conversations .ai-conv-item:hover .ai-menu-trigger,
.ai-project-container .ai-conv-item:hover .ai-menu-trigger,
.all-conv-item:hover .ai-menu-trigger { opacity: 1; }
.ai-menu-trigger:hover,
.ai-menu-trigger.active {
    color: var(--main-text-color);
    background: rgba(139, 92, 246, 0.15);
    opacity: 1;
}

.all-conv-item .ai-menu-trigger {
    opacity: 1 !important;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    min-width: 28px;
    min-height: 28px;
}

.all-conv-item .ai-menu-trigger .ai-menu-trigger-icon {
    fill: #e2e8f0;
}

.all-conv-item .ai-menu-trigger:hover,
.all-conv-item .ai-menu-trigger.active {
    color: #ffffff;
    background: rgba(139, 92, 246, 0.28);
    border-color: rgba(139, 92, 246, 0.55);
}

.all-conv-item .ai-menu-trigger:hover .ai-menu-trigger-icon,
.all-conv-item .ai-menu-trigger.active .ai-menu-trigger-icon {
    fill: #ffffff;
}

.conversation-context-menu {
    display: inline-flex;
    align-items: flex-start;
    flex-shrink: 0;
}

.conversation-context-menu--anchored {
    position: relative;
}

.conversation-context-menu--anchored .ai-context-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: auto;
    margin-top: 0;
}

.nav-context-menu {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    flex-shrink: 0;
}

.ai-context-menu {
    position: fixed;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 152px;
    z-index: 100001;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.conversation-context-menu--anchored .ai-context-menu {
    position: absolute;
}

.ai-context-item {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ai-context-item.main-text-color:hover {
    background: var(--icon-highlight-bg);
}
.ai-context-item.danger {
    color: #ef4444;
}
.ai-context-item.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}
.ai-context-divider {
    height: 1px;
    margin: 4px 0;
    background: var(--border-color);
}
.ai-context-submenu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
}
.ai-context-empty {
    font-size: 11px;
    color: var(--secondary-text-color);
    padding: 2px 4px;
}

.ai-nav-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 12px;
}

/* Project-specific styles */
.ai-nav-list .ai-project-container,
.menu-items .ai-project-container {
    display: flex;
    flex-direction: column;
}

.ai-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-right: 4px;
    background: none;
    border: none;
    color: var(--secondary-text-color);
    cursor: pointer;
    transition: all 0.2s;
}
.ai-expand-btn:hover {
    color: var(--main-text-color);
}

.ai-project-conversations {
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    margin-top: 4px;
    gap: 2px;
    padding-bottom: 4px;
}

.ai-project-conv-item,
.menu-items.ai-nav-list .ai-project-conversations .menu-item.ai-project-conv-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-conv-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 400;
}

.ai-create-project-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 4px;
}
.ai-project-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--icon-highlight-bg);
    color: var(--main-text-color);
    font-size: 12px;
    outline: none;
}
.ai-project-input:focus {
    border-color: #8b5cf6;
}
.ai-form-btn {
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.ai-form-btn.save {
    background: #8b5cf6;
    color: white;
}
.ai-form-btn.save:hover {
    background: #7c3aed;
}
.ai-form-btn.cancel {
    background: var(--icon-highlight-bg);
    color: var(--secondary-text-color);
}
.ai-form-btn.cancel:hover {
    background: var(--border-color);
}

.all-conv-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 999999999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease-out;
}

.all-conv-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.all-conv-modal-container {
    background: var(--main-bg, #1a1a2e);
    border-radius: 20px;
    width: 1200px;
    max-width: 95%;
    max-height: calc(100vh - 40px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: slideUp 0.3s ease-out;
}

.all-conv-search-container {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px 16px;
    transition: all 0.2s ease;
    flex: 1;
    max-width: 400px;
}

.all-conv-search-container:focus-within {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.all-conv-search-input {
    background: none;
    border: none;
    color: var(--main-text-color, #fff);
    font-size: 14px;
    outline: none;
    flex: 1;
    margin-left: 12px;
}

.all-conv-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.all-conv-search-clear {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
    margin-left: 8px;
}

.all-conv-search-clear:hover {
    color: var(--main-text-color, #fff);
    background: rgba(255, 255, 255, 0.1);
}

.all-conv-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.all-conv-list-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--main-text-color, #fff);
}

.all-conv-count {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
}

.all-conv-group-header {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.all-conv-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: visible;
}

.all-conv-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: transparent;
    transition: background 0.2s ease;
}

.all-conv-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.all-conv-item:hover::before {
    background: rgba(59, 130, 246, 0.5);
}

.all-conv-item.active {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.all-conv-item.active::before {
    background: #3b82f6;
}

.all-conv-item-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(147, 51, 234, 0.2) 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.all-conv-item:hover .all-conv-item-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(147, 51, 234, 0.3) 100%);
    border-color: rgba(59, 130, 246, 0.5);
}

.all-conv-item.active .all-conv-item-icon {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.all-conv-item-icon span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    transition: color 0.2s ease;
}

.all-conv-item.active .all-conv-item-icon span {
    color: white;
}

.all-conv-item-info {
    flex: 1;
    min-width: 0;
}

.all-conv-item-actions {
    flex-shrink: 0;
    align-self: flex-start;
    position: relative;
    z-index: 2;
}

.all-conv-item-title {
    color: var(--main-text-color, #fff);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.light .all-conv-item-title {
    color: #4a6386;
}

.light .all-conv-item-meta,
.light .all-conv-item-meta .meta-item,
.light .all-conv-item-meta .meta-separator,
.light .all-conv-item-arrow {
    color: #94a3b8;
}

.all-conv-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    margin-bottom: 8px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.meta-separator {
    color: rgba(255, 255, 255, 0.3);
    font-size: 10px;
    margin: 0 2px;
}

.all-conv-item-meta span {
    display: flex;
    align-items: center;
}

.all-conv-item-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 18px;
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateX(-4px);
}

.all-conv-item:hover .all-conv-item-arrow {
    opacity: 1;
    transform: translateX(0);
    color: rgba(59, 130, 246, 0.7);
}

.all-conv-item.active .all-conv-item-arrow {
    opacity: 1;
    transform: translateX(0);
    color: #3b82f6;
}

.all-conv-match-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(251, 146, 60, 0.2) 100%);
    color: #f59e0b;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid rgba(245, 158, 11, 0.3);
    animation: pulse 2s infinite;
}

.all-conv-empty {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.4);
}

.all-conv-empty span {
    font-size: 64px;
    margin-bottom: 16px;
    display: block;
    opacity: 0.3;
}

.all-conv-empty p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

.all-conv-preview-panel {
    position: relative;
    width: calc(100% - 500px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.all-conv-preview-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
}

.all-conv-preview-empty span {
    font-size: 80px;
    margin-bottom: 20px;
    opacity: 0.2;
}

.all-conv-preview-empty p {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
}

.all-conv-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.all-conv-preview-title-section h3 {
    margin: 0 0 8px 0;
    color: var(--main-text-color, #fff);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.all-conv-project-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.all-conv-open-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    color: white;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.all-conv-open-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
}

.all-conv-preview-messages {
    flex: 1;
    overflow-y: auto;
    padding-right: 8px;
}

.all-conv-message {
    margin-bottom: 20px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.all-conv-message.user {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
}

.all-conv-message.assistant {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.all-conv-message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.all-conv-message-role {
    font-weight: 600;
    font-size: 13px;
    color: var(--main-text-color, #fff);
}

.all-conv-message-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-left: auto;
}

.all-conv-message-content {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.all-conv-message-content mark {
    background: rgba(139, 92, 246, 0.3);
    color: #e2e8f0;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 500;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* Scrollbar styling */
.all-conv-list-scroll::-webkit-scrollbar,
.all-conv-preview-messages::-webkit-scrollbar {
    width: 6px;
}

.all-conv-list-scroll::-webkit-scrollbar-track,
.all-conv-preview-messages::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.all-conv-list-scroll::-webkit-scrollbar-thumb,
.all-conv-preview-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.all-conv-list-scroll::-webkit-scrollbar-thumb:hover,
.all-conv-preview-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .all-conv-modal-container {
        width: 95%;
        max-height: calc(100vh - 20px);
    }

    .all-conv-preview-panel {
        width: calc(100% - 400px);
    }
}

@media (max-width: 768px) {
    .all-conv-modal-container {
        width: 98%;
        border-radius: 16px;
    }

    .menu-editor-body {
        flex-direction: column;
    }

    .all-conv-preview-panel {
        width: 100%;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 20px;
    }
}
/* ===== AI Dashboard (IMS / TMS layout) ===== */
.ai-chat-layout,
.ai-project-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.ai-welcome-center {
    text-align: center;
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
}

.ai-welcome-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.ai-welcome-icon .material-icons-outlined {
    font-size: 28px;
    color: #fff;
}

.ai-welcome-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.ai-welcome-subtitle {
    line-height: 1.55;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== Main Layout ===== */
.ai-chat-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
}

.ai-nav-new-project {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ai-nav-new-project:hover {
    background: var(--icon-highlight-bg);
}

/* ===== Header ===== */
.chat-header-left { display: flex; align-items: center; gap: 12px; }
.chat-title { font-size: 15px; font-weight: 700; margin: 0; }
.chat-project-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.15));
    color: #a78bfa;
    font-size: 11px;
    font-weight: 600;
}
.chat-project-badge .material-icons-outlined { font-size: 13px; }
.chat-header-right { display: flex; align-items: center; gap: 6px; }
.token-info { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.token-info .material-icons-outlined { font-size: 14px; }

/* ===== Messages Area ===== */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 24px 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.messages-zoomable {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
}

.loading-state, .welcome-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 16px;
}
.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top: 3px solid #8b5cf6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@@keyframes spin { to { transform: rotate(360deg); } }

.suggestion-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 520px;
    width: calc(100% - 32px);
    padding: 0;
    margin: 0 auto;
}

.suggestion-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    text-align: left;
}

.suggestion-card:hover {
    border-color: rgba(139, 92, 246, 0.45) !important;
    background: var(--icon-highlight-bg);
}

.ai-suggestion-icon,
.suggestion-card .material-icons-outlined {
    font-size: 20px;
    color: #8b5cf6;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .suggestion-cards {
        grid-template-columns: 1fr;
    }
}

/* ===== Messages ===== */
.message {
    display: flex;
    gap: 14px;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
}

.user-message .message-content {
    background: rgba(59, 130, 246, 0.15);
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.message-avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-highlight-bg);
    flex-shrink: 0;
    margin-top: 2px;
}
.message-avatar .material-icons-outlined { font-size: 16px; color: var(--secondary-text-color); }
.ai-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
}
.ai-avatar .material-icons-outlined { font-size: 16px; color: white; }
.message-content { flex: 1; min-width: 0; }
.message-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.message-role { font-size: 13px; font-weight: 700; }
.reasoning-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    font-size: 10px;
    font-weight: 600;
}
.reasoning-badge .material-icons-outlined { font-size: 11px; }
.model-badge {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--icon-highlight-bg);
    color: var(--secondary-text-color);
    font-size: 10px;
    font-weight: 600;
}

/* ===== Message Text - Readable ===== */
.message-text {
    font-size: 15px;
    line-height: 1.75;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.message-text p { margin: 0 0 10px 0; }
.message-text p:last-child { margin-bottom: 0; }
.message-text.main-text-color,
.message-text.main-text-color p,
.message-text.main-text-color strong,
.message-text.main-text-color .ai-h2,
.message-text.main-text-color .ai-h3,
.message-text.main-text-color .ai-h4,
.message-text.main-text-color .ai-table th,
.message-text.main-text-color .ai-table td {
    color: inherit;
}
.message-text strong { font-weight: 700; }
.message-text code {
    background: rgba(139, 92, 246, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    color: #c4b5fd;
}
.message-text pre {
    background: rgba(0, 0, 0, 0.3);
    padding: 14px 18px;
    border-radius: 10px;
    overflow-x: auto;
    margin: 10px 0;
    border: 1px solid var(--border-color);
}
.message-text pre code { background: none; padding: 0; color: #e2e8f0; }
.message-text ul, .message-text ol { padding-left: 20px; margin: 8px 0; }
.message-text li { margin-bottom: 4px; }

/* ===== Enhanced Markdown Formatting ===== */
.message-text .ai-h2 { font-size: 20px; font-weight: 700; margin: 16px 0 10px; border-bottom: 1px solid var(--border-color); padding-bottom: 6px; }
.message-text .ai-h3 { font-size: 17px; font-weight: 700; margin: 14px 0 8px; }
.message-text .ai-h4 { font-size: 15px; font-weight: 700; margin: 12px 0 6px; }
.message-text .ai-link { color: #8b5cf6; text-decoration: none; border-bottom: 1px solid rgba(139, 92, 246, 0.3); }
.message-text .ai-link:hover { color: #a78bfa; border-bottom-color: #a78bfa; }
.message-text .inline-code { background: rgba(139, 92, 246, 0.15); padding: 2px 6px; border-radius: 4px; font-size: 13px; color: #c4b5fd; font-family: monospace; }
.message-text .ai-list-item { list-style: none; position: relative; padding-left: 16px; margin-bottom: 6px; }
.message-text .ai-list-item::before { content: "•"; position: absolute; left: 0; color: #8b5cf6; font-weight: bold; }
.message-text .ai-hr { border: none; border-top: 1px solid var(--border-color); margin: 16px 0; }
.message-text .citation-ref { color: #8b5cf6; font-size: 11px; font-weight: 600; cursor: default; }
.message-text .check-mark { color: #22c55e; }
.message-text .x-mark { color: #ef4444; }

/* ===== Tables ===== */
.message-text .table-wrapper { width: 100%; overflow-x: auto; margin: 12px 0; -webkit-overflow-scrolling: touch; }
.message-text .ai-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; word-wrap: break-word; }
.message-text .ai-table th,
.message-text .ai-table td {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    hyphens: auto;
    max-width: 0;
    overflow: hidden;
}
.message-text .ai-table th { background: rgba(139, 92, 246, 0.15); font-weight: 600; }
.message-text .ai-table tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }

/* ===== Sources Section ===== */
.sources-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.sources-header { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #8b5cf6; margin-bottom: 10px; }
.sources-header .material-icons-outlined { font-size: 16px; }
.sources-list { display: flex; flex-direction: column; gap: 6px; }
.source-link { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #94a3b8; text-decoration: none; padding: 6px 10px; border-radius: 6px; background: rgba(139, 92, 246, 0.08); transition: all 0.2s; }
.source-link:hover { background: rgba(139, 92, 246, 0.15); color: #cbd5e1; }
.source-num { color: #8b5cf6; font-weight: 600; min-width: 24px; }

/* ===== Message Attachments ===== */
.message-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.message-attachment-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--icon-highlight-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 12px;
    color: var(--secondary-text-color);
}

.message-attachment-chip.reference-chip {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
    color: #a78bfa;
}

.message-attachment-chip .material-icons-outlined {
    font-size: 14px;
}

.message-attachment-chip .file-name {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-attachment-chip.reference-chip .material-icons-outlined {
    color: #8b5cf6;
}

.message-image-preview {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s;
}

.message-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.message-image-preview:hover {
    border-color: #8b5cf6;
    transform: scale(1.04);
}

/* ===== Message Footer & Actions ===== */
.message-footer { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.message-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.message-actions { display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity 0.2s; }
.message:hover .message-actions { opacity: 1; }
.message-footer .action-btn { background: none; border: none; padding: 6px; border-radius: 6px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.action-btn:hover { background: var(--icon-highlight-bg); color: #8b5cf6; }
.action-btn-danger:hover { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.action-btn .material-icons-outlined { font-size: 16px; }

/* ===== Typing Indicator ===== */
.typing-indicator { display: flex; gap: 4px; padding: 8px 0; }
.typing-indicator span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8b5cf6;
    animation: typing 1.4s infinite ease-in-out;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@@keyframes typing {
     0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
     40% { transform: scale(1); opacity: 1; }
 }

/* ===== Input Area - Sticky Bottom, Centered ===== */
.chat-input-area {
    flex-shrink: 0;
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    border-top: 1px solid var(--border-color);
    background: var(--main-bg);
}

/* ===== Mention Autocomplete ===== */
.mention-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    max-height: 320px;
    overflow-y: auto;
    background: #1e293b;
    border: 2px solid #8b5cf6;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.2);
    z-index: 1000;
}

.mention-header {
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 700;
    color: #8b5cf6;
    border-bottom: 2px solid rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mention-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 1px solid rgba(139, 92, 246, 0.1);
    background: transparent;
}

.mention-item:last-child {
    border-bottom: none;
}

.mention-item:hover {
    background: rgba(139, 92, 246, 0.15);
}

.mention-item.selected {
    background: rgba(139, 92, 246, 0.25);
    border-left: 3px solid #8b5cf6;
    padding-left: 13px;
}

.mention-item .material-icons-outlined {
    font-size: 20px;
    color: #8b5cf6;
}

.mention-app-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.mention-app-name {
    font-size: 14px;
    font-weight: 600;
    color: #e2e8f0;
}

.mention-conv-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}

.mention-conv-title {
    font-size: 14px;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mention-conv-date {
    font-size: 11px;
    color: #94a3b8;
}

.mention-empty {
    padding: 24px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}

.attachments-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    max-width: 720px;
    width: 100%;
}
.attachment-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--icon-highlight-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 13px;
    color: var(--main-text-color);
}

.attachment-chip .file-name {
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.reference-chip {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
}
.reference-chip .material-icons-outlined {
    color: #8b5cf6;
}
.attachment-chip .material-icons-outlined { font-size: 16px; color: #8b5cf6; }
.attachment-chip button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    color: var(--secondary-text-color);
    display: flex;
}
.attachment-chip button:hover { background: rgba(255, 255, 255, 0.1); color: #ef4444; }
.attachment-chip button .material-icons-outlined { font-size: 14px; }

/* ===== Image Preview Thumbnails ===== */
.image-preview-container {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--border-color);
    transition: all 0.2s;
}

.image-preview-container:hover {
    border-color: #8b5cf6;
    transform: scale(1.05);
}

.image-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    display: block;
}

.image-remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
    color: white;
}

.image-preview-container:hover .image-remove-btn {
    opacity: 1;
}

.image-remove-btn:hover {
    background: #ef4444;
}

.image-remove-btn .material-icons-outlined {
    font-size: 16px;
}

/* ===== Image Preview Modal ===== */
.image-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s;
}

.image-preview-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-preview-full {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
}

.image-preview-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: all 0.2s;
}

.image-preview-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.image-preview-close .material-icons-outlined {
    font-size: 24px;
}

/* ===== File Preview Modal ===== */
.file-preview-content {
    background: var(--card-bg, #1e1e2e);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: min(800px, 90vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.file-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.file-preview-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--main-text-color);
    overflow: hidden;
}

.file-preview-title span:last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
}

.file-preview-title .material-icons-outlined { color: #8b5cf6; font-size: 20px; }

.file-preview-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.file-preview-download {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    color: #a78bfa;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
}

.file-preview-download:hover { background: rgba(139, 92, 246, 0.25); color: #c4b5fd; }
.file-preview-download .material-icons-outlined { font-size: 16px; }

.file-preview-iframe {
    width: 100%;
    flex: 1;
    min-height: 500px;
    border: none;
}

.file-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 40px;
    color: var(--secondary-text-color);
    text-align: center;
}

.file-preview-icon { font-size: 56px !important; color: #8b5cf6; opacity: 0.7; }
.file-preview-placeholder p { margin: 0; font-size: 15px; color: var(--main-text-color); }
.file-preview-type { font-size: 12px !important; color: var(--secondary-text-color) !important; }

.file-preview-download-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 10px;
    color: #a78bfa;
    font-size: 14px;
    text-decoration: none;
    margin-top: 8px;
    transition: all 0.2s;
}

.file-preview-download-btn:hover { background: rgba(139, 92, 246, 0.35); color: #c4b5fd; }
.file-preview-download-btn .material-icons-outlined { font-size: 18px; }

.clickable-chip { cursor: pointer; }
.clickable-chip:hover { border-color: rgba(139, 92, 246, 0.5); background: rgba(139, 92, 246, 0.1); }

/* file-preview-header close button override */
.file-preview-header .image-preview-close {
    position: static;
    background: rgba(255,255,255,0.07);
    width: 32px;
    height: 32px;
}

@@keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }
 }

/* ===== Message Timeline Bar (Header) ===== */
.message-timeline-header {
    display: flex;
    gap: 1px;
    height: 14px;
    margin-top: -1px;
    flex: 1;
    border-radius: 8px;
    overflow: hidden;
}

.timeline-bar {
    flex: 1;
    min-width: 3px;
    height: 100%;
    cursor: pointer;
    transition: all 0.1s;
    position: relative;
}

.timeline-bar:hover {
    opacity: 0.8;
    transform: scaleY(1.3);
}

.user-bar {
    background: #3b82f6;
}

.assistant-bar {
    background: #8b5cf6;
}

/* ===== Input Container ===== */
.input-container {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--border-color);
    background: var(--icon-highlight-bg);
    transition: border-color 0.2s;
    max-width: 720px;
    width: 100%;
}
.input-container:focus-within { border-color: rgba(139, 92, 246, 0.5); }
.input-container:hover { border-color: var(--border-color); }

.input-actions-left, .input-actions-right { display: flex; align-items: center; gap: 2px; }
.attach-btn {
    padding: 6px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
}
.attach-btn:hover { background: var(--border-color); }
.attach-btn.disabled {
    cursor: not-allowed;
    opacity: 0.3;
    pointer-events: none;
}
.attach-btn .material-icons-outlined { font-size: 20px; }

.input-actions-left .action-btn,
.input-actions-right .action-btn {
    padding: 6px;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.input-actions-left .action-btn:hover,
.input-actions-right .action-btn:hover { background: var(--border-color); color: #8b5cf6; }
.input-actions-left .action-btn.active,
.input-actions-right .action-btn.active { color: #8b5cf6; background: rgba(139, 92, 246, 0.15); }
.input-actions-left .action-btn .material-icons-outlined,
.input-actions-right .action-btn .material-icons-outlined { font-size: 20px; }

.action-picker-popover {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    max-width: 720px;
    margin: 0 auto;
    border-radius: 14px;
    padding: 14px;
    z-index: 100;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.action-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.action-picker-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.action-picker-close {
    padding: 2px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    transition: color 0.2s;
}
.action-picker-close:hover { color: var(--main-text-color); }
.action-picker-close .material-icons-outlined { font-size: 16px; }
.action-picker-category { display: flex; flex-direction: column; gap: 6px; }
.action-picker-category-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 2px;
}
.action-picker-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.action-picker-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--icon-highlight-bg);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}
.action-picker-item:hover {
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(139, 92, 246, 0.1);
}
.action-picker-icon { font-size: 16px; color: #8b5cf6; }
.action-picker-label { font-weight: 500; }

.chat-input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    resize: none;
    font-size: 14px;
    line-height: 1.5;
    max-height: 288px; /* 12 rows * 24px line height */
    min-height: 24px;
    padding: 4px 0;
    overflow-y: auto;
}
.chat-input.main-text-color::placeholder,
.chat-input.main-text-color::-webkit-input-placeholder,
.chat-input.main-text-color::-moz-placeholder {
    color: var(--secondary-text-color);
}
.chat-input.limit-reached {
    cursor: not-allowed;
    opacity: 0.6;
}
.chat-input.limit-reached::placeholder {
    color: #f59e0b;
    font-weight: 500;
}

.reasoning-toggle {
    padding: 6px;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
}
.reasoning-toggle:hover { background: var(--border-color); }
.reasoning-toggle.active {
    color: var(--ai-main-color);
    animation: pulse 2s infinite;
}
.reasoning-toggle .material-icons-outlined { font-size: 20px; }

.send-btn {
    padding: 6px;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
}
.send-btn.active { color: var(--ai-main-color) !important; background: #ffffff !important; }
.send-btn.active:hover { background: #ffffff !important; }
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.send-btn .material-icons-outlined { font-size: 20px; }

.spinning { animation: spin 1s linear infinite; }

/* ===== Footer - Centered, Sticky ===== */
.input-footer {
    text-align: center;
    padding: 8px 0 10px;
    max-width: 720px;
    width: 100%;
}

/* ===== Settings Button ===== */
.settings-header-btn {
    padding: 6px;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
}
.settings-header-btn:hover { background: var(--icon-highlight-bg); }
.settings-header-btn .material-icons-outlined { font-size: 20px; }

/* ===== Bottom Controls (Memory & Zoom) ===== */
.bottom-controls {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1000;
}

.memory-scope-btn {
    padding: 10px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.memory-scope-btn:hover {
    background: var(--icon-highlight-bg);
    border-color: #8b5cf6 !important;
}

.memory-scope-btn.global {
    border-color: rgba(16, 185, 129, 0.35) !important;
}

.memory-scope-btn.global .material-icons-outlined {
    color: #10b981;
}

.memory-scope-btn.global:hover {
    background: rgba(16, 185, 129, 0.08);
    border-color: #10b981 !important;
}

.memory-scope-btn.conversation {
    border-color: rgba(59, 130, 246, 0.35) !important;
}

.memory-scope-btn.conversation .material-icons-outlined {
    color: #3b82f6;
}

.memory-scope-btn.conversation:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: #3b82f6 !important;
}

.memory-scope-btn .material-icons-outlined {
    font-size: 20px;
}

.zoom-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
}

.zoom-btn {
    padding: 6px;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zoom-btn:hover {
    background: var(--icon-highlight-bg);
    color: #8b5cf6 !important;
}

.zoom-btn .material-icons-outlined {
    font-size: 20px;
}

.zoom-level {
    font-size: 12px;
    font-weight: 600;
    min-width: 40px;
    text-align: center;
}

/* ─── Icon Action Button - zoom & flash hover effect ───────────────────────── */
/* Usage: add class "icon-action-btn" plus a colour modifier:                   */
/*   icon-action-btn-indigo  (drag / move)                                      */
/*   icon-action-btn-emerald (edit / confirm)                                   */
/*   icon-action-btn-rose    (delete / danger)                                  */

.icon-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-action-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    filter: brightness(1.15);
}

.icon-action-btn:active {
    transform: scale(0.96);
}

.icon-action-btn span,
.icon-action-btn i {
    color: white;
    font-size: 18px;
}

/* Colour modifiers */
.icon-action-btn-indigo {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}
.icon-action-btn-indigo:hover {
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
}

.icon-action-btn-emerald {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.icon-action-btn-emerald:hover {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
}

.icon-action-btn-rose {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
}
.icon-action-btn-rose:hover {
    background: linear-gradient(135deg, #fb7185 0%, #f43f5e 100%);
}

/* ─── appbuttonhover - zoom & flash effect for SmallIconButton and any button ── */
.appbuttonhover {
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.appbuttonhover:hover {
    transform: scale(1.12) translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
    filter: brightness(1.15) !important;
}

.appbuttonhover:active {
    transform: scale(0.96) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Panel Header Utility Classes
   Two variants per colour:
     .panel-header-{colour}      — top-level panel header (rounded top corners)
     .panel-header-{colour}-sub  — nested sub-panel header (flat, space-between)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared base ── */
.panel-header-amber,
.panel-header-amber-sub,
.panel-header-green,
.panel-header-green-sub,
.panel-header-blue,
.panel-header-blue-sub,
.panel-header-purple,
.panel-header-purple-sub,
.panel-header-rose,
.panel-header-rose-sub,
.panel-header-sky,
.panel-header-sky-sub,
.panel-header-indigo,
.panel-header-indigo-sub {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* top-level: rounded top corners */
.panel-header-amber,
.panel-header-green,
.panel-header-blue,
.panel-header-purple,
.panel-header-rose,
.panel-header-sky,
.panel-header-indigo {
    border-radius: 12px 12px 0 0;
}

/* sub-panel: flat, label left / control right */
.panel-header-amber-sub,
.panel-header-green-sub,
.panel-header-blue-sub,
.panel-header-purple-sub,
.panel-header-rose-sub,
.panel-header-sky-sub,
.panel-header-indigo-sub {
    padding: 10px 12px;
    justify-content: space-between;
}

/* ── Amber (warm orange-yellow) ── */
.panel-header-amber {
    background: linear-gradient(135deg, rgba(245,158,11,0.22), rgba(217,119,6,0.14));
    border-bottom: 1px solid rgba(245,158,11,0.18);
}
.panel-header-amber-sub {
    background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(217,119,6,0.10));
    border-bottom: 1px solid rgba(245,158,11,0.18);
}

/* ── Green (emerald) ── */
.panel-header-green {
    background: linear-gradient(135deg, rgba(16,185,129,0.22), rgba(5,150,105,0.14));
    border-bottom: 1px solid rgba(16,185,129,0.18);
}
.panel-header-green-sub {
    background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(5,150,105,0.10));
    border-bottom: 1px solid rgba(16,185,129,0.18);
}

/* ── Blue (royal blue) ── */
.panel-header-blue {
    background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(37,99,235,0.14));
    border-bottom: 1px solid rgba(59,130,246,0.18);
}
.panel-header-blue-sub {
    background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(37,99,235,0.10));
    border-bottom: 1px solid rgba(59,130,246,0.18);
}

/* ── Purple (violet) ── */
.panel-header-purple {
    background: linear-gradient(135deg, rgba(139,92,246,0.22), rgba(109,40,217,0.14));
    border-bottom: 1px solid rgba(139,92,246,0.18);
}
.panel-header-purple-sub {
    background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(109,40,217,0.10));
    border-bottom: 1px solid rgba(139,92,246,0.18);
}

/* ── Rose (pink-red) ── */
.panel-header-rose {
    background: linear-gradient(135deg, rgba(244,63,94,0.22), rgba(225,29,72,0.14));
    border-bottom: 1px solid rgba(244,63,94,0.18);
}
.panel-header-rose-sub {
    background: linear-gradient(135deg, rgba(244,63,94,0.18), rgba(225,29,72,0.10));
    border-bottom: 1px solid rgba(244,63,94,0.18);
}

/* ── Sky (light cyan-blue) ── */
.panel-header-sky {
    background: linear-gradient(135deg, rgba(14,165,233,0.22), rgba(2,132,199,0.14));
    border-bottom: 1px solid rgba(14,165,233,0.18);
}
.panel-header-sky-sub {
    background: linear-gradient(135deg, rgba(14,165,233,0.18), rgba(2,132,199,0.10));
    border-bottom: 1px solid rgba(14,165,233,0.18);
}

/* ── Indigo (deep blue-purple) ── */
.panel-header-indigo {
    background: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(79,70,229,0.14));
    border-bottom: 1px solid rgba(99,102,241,0.18);
}
.panel-header-indigo-sub {
    background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(79,70,229,0.10));
    border-bottom: 1px solid rgba(99,102,241,0.18);
}

/* ── Shared dashboard toolbar (Workspaces, CAB apps, etc.) ── */
.ws-toolbar {
    gap: 16px;
    padding: 12px 16px;
}

.ws-filter-selector {
    flex-shrink: 0;
    width: 260px;
    min-width: 220px;
}

.ws-filter-selector .combinate-component {
    width: 100%;
}

.ws-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 260px;
    min-width: 220px;
    max-width: 420px;
}

.ws-search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #64748b;
    pointer-events: none;
    z-index: 1;
    line-height: 1;
}

.ws-search__input {
    width: 100%;
    height: 44px;
    padding: 0 40px 0 44px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 44px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.ws-search__input::placeholder {
    color: #64748b;
}

.ws-search__input:focus {
    outline: none;
    border-color: #1177CC;
    box-shadow: 0 0 0 3px rgba(17, 119, 204, 0.15);
}

.ws-search__clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    z-index: 1;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.ws-search__clear:hover {
    color: var(--main-text-color, #fff);
    background: rgba(255, 255, 255, 0.1);
}

.ws-search__clear .material-icons-outlined {
    font-size: 18px;
    line-height: 1;
}

.ws-view-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
}

.ws-view-toggle__label {
    white-space: nowrap;
}

@media (max-width: 992px) {
    .ws-toolbar {
        align-items: stretch;
    }

    .ws-search {
        order: 2;
        flex: 1 1 100%;
        max-width: none;
    }

    .ws-view-toggle {
        order: 3;
        margin-left: auto;
    }
}

/* ── Shared dashboard list rows & open button ── */
.ws-open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.08);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.ws-open-btn__icon {
    font-size: 16px;
    line-height: 1;
    color: inherit;
    transition: transform 0.18s ease;
}

.ws-open-btn.default-header-color-hover:hover {
    transform: translateY(-1px);
}

.workspace-card:hover .ws-open-btn__icon,
.ws-list-row:hover .ws-open-btn__icon {
    transform: translateX(4px);
}

.ws-list-row__info {
    flex: 1;
    min-width: 0;
}

.ws-list-row__meta {
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.ws-list-row:not(.ws-list-row--wide) .ws-list-row__main {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

@media (min-width: 741px) {
    .ws-list-row:not(.ws-list-row--wide) .ws-list-row__main {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.ws-list-row:not(.ws-list-row--wide) .ws-list-row__aside {
    margin-top: 12px;
}

.ws-list-row--wide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.ws-list-row--wide .ws-list-row__main {
    flex: 1;
    min-width: 0;
    align-items: center;
    gap: 28px;
}

.ws-list-row--wide .ws-list-row__meta {
    gap: 20px;
}

.ws-list-row--wide .ws-list-row__aside {
    flex-shrink: 0;
    margin-top: 0;
}

/* ── CAB Meta connect wizard ── */
.cab-meta-stepper {
    display: flex;
    align-items: flex-start;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.cab-meta-stepper__step {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    text-align: center;
}

.cab-meta-stepper__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 17px;
    left: calc(50% + 18px);
    width: calc(100% - 36px);
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 0;
    transition: background-color 0.2s ease;
}

.cab-meta-stepper__step.is-complete:not(:last-child)::after {
    background: linear-gradient(90deg, var(--cab-main-color) 0%, rgba(240, 33, 6, 0.55) 100%);
}

.cab-meta-stepper__badge {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.cab-meta-stepper__badge .material-icons-outlined {
    font-size: 18px;
    line-height: 1;
}

.cab-meta-stepper__step.is-active .cab-meta-stepper__badge {
    border-color: var(--cab-main-color);
    background: linear-gradient(135deg, var(--cab-main-color) 0%, #b51504 100%);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(240, 33, 6, 0.16);
}

.cab-meta-stepper__step.is-complete .cab-meta-stepper__badge {
    border-color: var(--cab-main-color);
    background: var(--cab-main-color);
    color: #fff;
}

.cab-meta-stepper__label {
    margin-top: 0.55rem;
    max-width: 100%;
    padding: 0 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.2s ease;
}

.cab-meta-stepper__step.is-active .cab-meta-stepper__label {
    color: var(--main-text-color, #fff);
    font-weight: 700;
}

.cab-meta-stepper__step.is-complete .cab-meta-stepper__label {
    color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 720px) {
    .cab-meta-stepper__badge {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .cab-meta-stepper__step:not(:last-child)::after {
        top: 15px;
        left: calc(50% + 16px);
        width: calc(100% - 32px);
    }

    .cab-meta-stepper__label {
        font-size: 0.68rem;
    }
}

@media (max-width: 520px) {
    .cab-meta-stepper__label {
        display: none;
    }

    .cab-meta-stepper__step.is-active .cab-meta-stepper__label {
        display: block;
    }
}

.cab-meta-error {
    color: #ef4444;
    font-size: 0.9rem;
}

.cab-meta-page-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cab-meta-page-option {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
}

.cab-meta-auth-panel {
    border-color: rgba(255, 255, 255, 0.1);
}

.cab-meta-data-flow {
    overflow: hidden;
    border-radius: 16px;
}

.cab-meta-data-flow__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    color: var(--main-text-color, #fff);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.cab-meta-data-flow__header .material-icons-outlined {
    font-size: 18px;
    color: #60a5fa;
}

.cab-meta-realtime-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(96, 165, 250, 0.22);
    background: linear-gradient(135deg, rgba(24, 119, 242, 0.1) 0%, rgba(240, 33, 6, 0.06) 100%);
}

.cab-meta-realtime-notice .material-icons-outlined {
    flex-shrink: 0;
    font-size: 20px;
    color: #60a5fa;
    margin-top: 1px;
}

.cab-meta-terms-acceptance {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.cab-meta-terms-acceptance a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cab-meta-terms-acceptance a:hover {
    color: #60a5fa;
}

.cab-meta-data-flow__connector-badge--live {
    border-color: rgba(96, 165, 250, 0.35);
    background: rgba(24, 119, 242, 0.12);
    box-shadow: 0 0 0 4px rgba(24, 119, 242, 0.08);
}

.cab-meta-data-flow__connector-badge--live .material-icons-outlined {
    color: #60a5fa;
}

.cab-meta-data-flow__body {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    padding: 18px;
}

.cab-meta-data-flow__route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.cab-meta-data-flow__endpoint {
    min-width: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.cab-meta-data-flow__endpoint--source {
    box-shadow: inset 0 3px 0 #1877f2;
}

.cab-meta-data-flow__endpoint--destination {
    box-shadow: inset 0 3px 0 var(--cab-main-color);
}

.cab-meta-data-flow__endpoint-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cab-meta-data-flow__endpoint-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cab-meta-data-flow__endpoint-name {
    color: var(--main-text-color, #fff);
    font-size: 0.92rem;
    font-weight: 700;
}

.cab-meta-data-flow__endpoint-body {
    padding: 12px;
}

.cab-meta-data-flow__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 10px;
}

.cab-meta-data-flow__item--last {
    margin-bottom: 0;
}

.cab-meta-data-flow__item-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
}

.cab-meta-data-flow__item-icon--facebook {
    background: linear-gradient(135deg, rgba(24, 119, 242, 0.24) 0%, rgba(24, 119, 242, 0.1) 100%);
    color: #1877f2;
}

.cab-meta-data-flow__item-icon--instagram {
    background: linear-gradient(135deg, rgba(225, 48, 108, 0.24) 0%, rgba(131, 58, 180, 0.18) 100%);
    color: #e1306c;
}

.cab-meta-data-flow__item-icon--destination {
    background: linear-gradient(135deg, rgba(240, 33, 6, 0.24) 0%, rgba(181, 21, 4, 0.14) 100%);
    color: var(--cab-main-color);
}

.cab-meta-data-flow__item-copy {
    min-width: 0;
}

.cab-meta-data-flow__connector {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 92px;
    align-self: center;
}

.cab-meta-data-flow__connector-line {
    flex: 1 1 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(24, 119, 242, 0.28) 0%, rgba(96, 165, 250, 0.55) 50%, rgba(240, 33, 6, 0.35) 100%);
}

.cab-meta-data-flow__connector-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 72px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(240, 33, 6, 0.28);
    background: rgba(240, 33, 6, 0.1);
    color: var(--main-text-color, #fff);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 0 0 4px rgba(240, 33, 6, 0.06);
}

.cab-meta-data-flow__connector-badge .material-icons-outlined {
    font-size: 18px;
    color: var(--cab-main-color);
}

.cab-meta-data-flow__permissions {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cab-meta-data-flow__page-list {
    display: flex;
    flex-direction: column;
}

.cab-meta-data-flow__permissions-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cab-meta-data-flow__permissions-head .material-icons-outlined {
    font-size: 17px;
    color: #94a3b8;
}

.cab-meta-data-flow__empty {
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.cab-meta-data-flow__permission-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px;
}

.cab-meta-data-flow__permission-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--main-text-color, #fff);
    font-size: 0.82rem;
    line-height: 1.25;
}

.cab-meta-data-flow__permission-chip--facebook {
    box-shadow: inset 3px 0 0 #1877f2;
}

.cab-meta-data-flow__permission-chip--instagram {
    box-shadow: inset 3px 0 0 #e1306c;
}

.cab-meta-data-flow__permission-chip .material-icons-outlined {
    flex-shrink: 0;
    font-size: 16px;
    opacity: 0.9;
}

@media (max-width: 820px) {
    .cab-meta-data-flow__route {
        grid-template-columns: 1fr;
    }

    .cab-meta-data-flow__connector {
        min-width: 0;
        padding: 4px 0;
    }

    .cab-meta-data-flow__connector-line:first-child {
        display: none;
    }

    .cab-meta-data-flow__connector-badge {
        width: 100%;
        flex-direction: row;
        gap: 6px;
        border-radius: 12px;
    }

    .cab-meta-data-flow__connector-line:last-child {
        display: none;
    }

    .cab-meta-data-flow__connector-badge .material-icons-outlined {
        transform: rotate(90deg);
    }
}

.cab-meta-page-option.selected {
    border-color: var(--cab-main-color) !important;
    background: rgba(240, 33, 6, 0.08);
}

.cab-meta-page-option--disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.cab-meta-choice-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
    margin-bottom: 0.85rem;
}

.cab-meta-choice-row--center {
    align-items: flex-start;
}

.menu-editor-modal.cab .cab-meta-choice-input {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    min-height: 16px;
    margin-top: 2px !important;
    padding: 0 !important;
    flex-shrink: 0;
    accent-color: var(--cab-main-color);
    cursor: pointer;
}

.menu-editor-modal.cab .cab-meta-choice-input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
}

.menu-editor-modal.cab .cab-meta-choice-input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: radio !important;
}

.cab-meta-auth-icon {
    font-size: 40px;
    color: #1877f2;
}

.cab-meta-wizard--oauth-active .menu-editor-body {
    min-height: 620px;
}

.cab-meta-wizard--oauth-active .menu-editor-right {
    flex: 1.1;
    min-width: 420px;
    border-right: none !important;
}

.cab-meta-oauth-frame {
    display: block;
    width: 100%;
    height: 560px;
    border: none;
    border-radius: 12px;
    background: #fff;
}

.cab-meta-test-success-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cab-meta-test-success-panel__hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem 1.35rem;
    border-color: rgba(22, 163, 74, 0.28) !important;
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.12) 0%, rgba(22, 163, 74, 0.04) 100%);
    box-shadow: inset 0 1px 0 rgba(22, 163, 74, 0.15);
}

.cab-meta-test-success-panel__hero-main {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
    flex: 1;
}

.cab-meta-test-success-panel__icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #16a34a;
    background: rgba(22, 163, 74, 0.16);
    border: 1px solid rgba(22, 163, 74, 0.28);
}

.cab-meta-test-success-panel__icon .material-icons-outlined {
    font-size: 1.85rem;
}

.cab-meta-test-success-panel__copy {
    min-width: 0;
}

.cab-meta-test-success-panel__eyebrow {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #16a34a;
    margin-bottom: 0.35rem;
}

.cab-meta-test-success-panel__title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0.45rem;
}

.cab-meta-test-success-panel__summary {
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 0.85rem !important;
}

.cab-meta-test-success-panel__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cab-meta-test-success-panel__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.cab-meta-test-success-panel__chip .material-icons-outlined {
    font-size: 0.95rem;
}

.cab-meta-test-success-panel__chip--live {
    color: #60a5fa;
    border-color: rgba(96, 165, 250, 0.35);
    background: rgba(96, 165, 250, 0.12);
}

.cab-meta-test-success-panel__proof {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
}

.cab-meta-test-success-panel__stat {
    text-align: right;
    padding: 0.75rem 1rem;
    min-width: 7rem;
    border-radius: 14px;
    border: 1px solid rgba(22, 163, 74, 0.24);
    background: rgba(22, 163, 74, 0.1);
}

.cab-meta-test-success-panel__stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: #16a34a;
}

.cab-meta-test-success-panel__stat-label {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cab-meta-test-success-panel__route {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.cab-meta-test-success-panel__route-node {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.cab-meta-test-success-panel__route-node--ok {
    color: #16a34a;
}

.cab-meta-test-success-panel__route-line {
    width: 1.35rem;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.cab-meta-test-success-panel__route-live {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.14);
    border: 1px solid rgba(96, 165, 250, 0.35);
}

.cab-meta-test-success-panel__route-live .material-icons-outlined {
    font-size: 0.95rem;
}

.cab-meta-test-success-panel__section {
    padding: 1rem 1.15rem 1.15rem;
}

.cab-meta-test-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.cab-meta-test-media-card {
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.cab-meta-test-media-card__media {
    position: relative;
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.04);
}

.cab-meta-test-media-card__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cab-meta-test-media-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.35);
}

.cab-meta-test-media-card__placeholder .material-icons-outlined {
    font-size: 2.5rem;
}

.cab-meta-test-media-card__type {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
}

.cab-meta-test-media-card__body {
    padding: 0.85rem 0.95rem 1rem;
}

.cab-meta-test-media-card__caption {
    margin: 0 0 0.65rem;
    font-size: 0.875rem;
    line-height: 1.45;
    min-height: 2.6rem;
}

.cab-meta-test-media-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    margin-bottom: 0.75rem;
}

.cab-meta-test-media-card__meta .material-icons-outlined {
    font-size: 0.95rem;
}

.cab-meta-test-media-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.cab-meta-test-media-card__link .material-icons-outlined {
    font-size: 0.95rem;
}

.cab-meta-test-details {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.cab-meta-test-detail-row {
    margin: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.cab-meta-test-detail-value {
    word-break: break-word;
}

.cab-meta-test-table-wrap {
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cab-meta-test-table-wrap .table thead th {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.cab-meta-test-table-wrap .table tbody td {
    vertical-align: middle;
}

@media (max-width: 900px) {
    .cab-meta-test-success-panel__hero {
        flex-direction: column;
    }

    .cab-meta-test-success-panel__proof {
        width: 100%;
        flex-direction: row;
        align-items: center;
    }

    .cab-meta-test-success-panel__stat {
        text-align: left;
    }
}

/* SPM element layout masonry: items flow in CSS columns inside .elementLayout */
.elementLayout[style*="column-count"] > .element-list,
.element-layout[style*="column-count"] > .element-list,
[data-elements-layout="true"][style*="column-count"] > .element-list {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: var(--masonry-item-gap, 20px);
}

.elementLayout[style*="column-count"] > .element-list:last-child,
.element-layout[style*="column-count"] > .element-list:last-child,
[data-elements-layout="true"][style*="column-count"] > .element-list:last-child {
    margin-bottom: 0;
}

/* ── SPM mobile nav (gallery layers, floated above all content when open) ── */
.cards-layout-group:has(.spm-mobile-nav-details),
.cardLayoutGroup:has(.spm-mobile-nav-details),
[data-gallery-style-scope]:has(.spm-mobile-nav-details),
.cards-layout-group:has(.spm-mobile-nav-details) .cardLayout,
.cardLayoutGroup:has(.spm-mobile-nav-details) [class*="cardLayout-"],
[data-gallery-style-scope]:has(.spm-mobile-nav-details) .gallery-card-editor,
[data-gallery-style-scope]:has(.spm-mobile-nav-details) [data-elements-layout="true"],
[data-gallery-style-scope]:has(.spm-mobile-nav-details) .element-list,
[data-gallery-style-scope]:has(.spm-mobile-nav-details) .elementList {
    overflow: visible !important;
}

.cards-layout-group:has(.spm-mobile-nav-details[open]),
.cardLayoutGroup:has(.spm-mobile-nav-details[open]),
[data-gallery-style-scope]:has(.spm-mobile-nav-details[open]) {
    position: relative !important;
    z-index: 2147483000 !important;
    overflow: visible !important;
}

details.spm-mobile-nav-details {
    position: relative;
    overflow: visible !important;
}

details.spm-mobile-nav-details[open] {
    overflow: visible !important;
    z-index: 2147483645 !important;
}

details.spm-mobile-nav-details .spm-mobile-nav-dropdown,
body > .spm-mobile-nav-dropdown.spm-mobile-nav-dropdown--floating {
    pointer-events: auto !important;
    min-width: 220px;
    background: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
    padding: 8px !important;
    flex-direction: column !important;
    gap: 4px !important;
}

body > .spm-mobile-nav-dropdown.spm-mobile-nav-dropdown--floating {
    position: fixed !important;
    z-index: 2147483646 !important;
    display: flex !important;
}

details.spm-mobile-nav-details:not([open]) > .spm-mobile-nav-dropdown:not(.spm-mobile-nav-dropdown--overlay),
details.spm-mobile-nav-details:not([open]) .spm-mobile-nav-dropdown:not(.spm-mobile-nav-dropdown--overlay) {
    display: none !important;
}

details.spm-mobile-nav-details .spm-mobile-nav-dropdown .element.spm-button,
body > .spm-mobile-nav-dropdown.spm-mobile-nav-dropdown--floating .element.spm-button {
    pointer-events: auto !important;
}

.spm-editor-device-canvas:has(.spm-mobile-nav-details[open]),
.spm-editor-canvas-viewport:has(.spm-mobile-nav-details[open]),
.spm-editor-canvas-scroll:has(.spm-mobile-nav-details[open]) {
    overflow: visible !important;
}

.spm-mobile-nav-menu {
    position: fixed !important;
    z-index: 2147483646 !important;
    pointer-events: auto !important;
    min-width: 240px;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28) !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.spm-mobile-nav-menu .spm-mobile-nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 45px !important;
    padding: 0 16px !important;
    color: rgb(255, 255, 255) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, rgb(59, 130, 246) 0%, rgb(48, 106, 201) 100%) !important;
    pointer-events: auto !important;
}

.spm-mobile-nav-toggle,
details.spm-mobile-nav-details > summary {
    list-style: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(48, 106, 201, 0.18) 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.45) !important;
    box-shadow: 0 2px 8px rgba(48, 106, 201, 0.2) !important;
}

.spm-mobile-nav-toggle span,
details.spm-mobile-nav-details > summary span {
    display: block !important;
    width: 26px !important;
    height: 3px !important;
    background: rgb(48, 106, 201) !important;
    border-radius: 2px !important;
}

.spm-mobile-nav-toggle::-webkit-details-marker,
details.spm-mobile-nav-details > summary::-webkit-details-marker {
    display: none !important;
}