/* ============================================================
   RC UI 3.0 — CENTERED CONTEXT BAR + INTERACTION SYSTEM
   The toolbar belongs to Workspace; popovers float over the shell.
   ============================================================ */

body.rc-editor-open #rc-editor-modal{
    --rc-smartbar-control-height:34px;
    --rc-smartbar-control-radius:8px;
    --rc-smartbar-control-gap:5px;
    --rc-smartbar-group-gap:7px;
    --rc-popover-z:70;
}

body.rc-editor-open #rc-editor-modal #rc-context-toolbar{
    position:absolute !important;
    top:16px !important;
    right:0 !important;
    left:0 !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 24px !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    z-index:30 !important;
    pointer-events:none !important;
}

body.rc-editor-open #rc-editor-modal[data-rc-smartbar-visible="false"] #rc-context-toolbar{
    display:none !important;
}

body.rc-editor-open #rc-editor-modal .rc-context-toolbar-inner{
    width:max-content !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
    padding:5px 7px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:var(--rc-smartbar-group-gap) !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    border:1px solid var(--rc-border) !important;
    border-radius:11px !important;
    background:rgba(255,255,255,.98) !important;
    box-shadow:0 8px 24px rgba(15,23,42,.12) !important;
    pointer-events:auto !important;
    scrollbar-width:none;
}

body.rc-editor-open #rc-editor-modal .rc-context-toolbar-inner::-webkit-scrollbar{
    display:none;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-section{
    width:auto;
    min-width:0;
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:var(--rc-smartbar-control-gap);
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-control,
body.rc-editor-open #rc-editor-modal .rc-smartbar-secondary{
    height:var(--rc-smartbar-control-height) !important;
    min-height:var(--rc-smartbar-control-height) !important;
    margin:0 !important;
    padding:0 9px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    border:1px solid var(--rc-border) !important;
    border-radius:var(--rc-smartbar-control-radius) !important;
    background:var(--rc-surface-1) !important;
    color:var(--rc-text-secondary) !important;
    box-shadow:none !important;
    font-family:var(--rcx-font-family) !important;
    font-size:12px !important;
    font-weight:600 !important;
    line-height:1 !important;
    white-space:nowrap !important;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-control > span{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(0 0 0 0) !important;
    white-space:nowrap !important;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-control :is(input, select){
    height:28px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:var(--rc-text-primary) !important;
    box-shadow:none !important;
    outline:0 !important;
    font:inherit !important;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-text-font{
    width:clamp(190px, 17vw, 260px);
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-text-font select{
    width:100%;
    min-width:0;
    padding-inline:10px 26px !important;
    font-size:14px !important;
    line-height:1.35 !important;
    text-align:left;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-text-font select option{
    padding:8px 10px;
    font-size:14px;
    line-height:1.65;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-size{
    width:104px;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-size input{
    width:44px;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-color{
    width:70px;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-color input[type="color"]{
    width:26px !important;
    min-width:26px !important;
    height:24px !important;
    border:1px solid var(--rc-border) !important;
    border-radius:6px !important;
    cursor:pointer !important;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-button-group{
    height:var(--rc-smartbar-control-height) !important;
    min-height:var(--rc-smartbar-control-height) !important;
    padding:3px !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:2px !important;
    border:1px solid var(--rc-border) !important;
    border-radius:var(--rc-smartbar-control-radius) !important;
    background:var(--rc-surface-1) !important;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-button-group button{
    min-width:28px !important;
    height:28px !important;
    min-height:28px !important;
    margin:0 !important;
    padding:0 7px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid transparent !important;
    border-radius:6px !important;
    background:transparent !important;
    color:var(--rc-text-secondary) !important;
    box-shadow:none !important;
    font-size:12px !important;
    font-weight:650 !important;
    line-height:1 !important;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-image-mirror{
    flex:0 0 auto;
    white-space:nowrap;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-image-mirror button{
    min-width:78px;
    white-space:nowrap;
}

body.rc-editor-open #rc-editor-modal :is(.rc-smartbar-button-group button, .rc-smartbar-secondary):hover{
    border-color:var(--rc-control-selected-border) !important;
    background:var(--rc-control-hover-bg) !important;
    color:var(--rc-text-primary) !important;
}

body.rc-editor-open #rc-editor-modal :is(.rc-smartbar-button-group button, .rc-smartbar-secondary).is-active,
body.rc-editor-open #rc-editor-modal .rc-smartbar-button-group button[aria-pressed="true"]{
    border-color:var(--rc-control-selected-border) !important;
    background:var(--rc-control-selected-bg) !important;
    color:var(--rc-control-selected-fg) !important;
}

body.rc-editor-open #rc-editor-modal #rc-context-toolbar :is(button, input, select):focus-visible{
    outline:2px solid var(--rc-control-focus-ring);
    outline-offset:1px;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-secondary.is-danger{
    color:#b91c1c;
}

body.rc-editor-open #rc-editor-modal #rc-context-toolbar .rc-icon{
    width:16px;
    height:16px;
    flex:0 0 auto;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-icon-trigger{
    width:42px;
    padding-inline:7px;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-popover-wrap,
body.rc-editor-open #rc-editor-modal .rc-smartbar-position-wrap{
    position:relative;
    min-width:0;
    display:inline-flex;
    align-items:center;
}

body.rc-editor-open #rc-editor-modal :is(.rcsd-popover, .rc-smartbar-popover, .rc-smartbar-position-menu){
    position:fixed !important;
    width:max-content !important;
    min-width:190px !important;
    max-width:min(280px, calc(100vw - 24px)) !important;
    max-height:min(420px, calc(100vh - 24px)) !important;
    padding:6px !important;
    overflow:auto !important;
    border:1px solid var(--rc-border) !important;
    border-radius:11px !important;
    background:#fff !important;
    color:var(--rc-text-primary) !important;
    box-shadow:0 14px 34px rgba(15,23,42,.18) !important;
    z-index:var(--rc-popover-z) !important;
}

body.rc-editor-open #rc-editor-modal :is(.rcsd-popover, .rc-smartbar-popover, .rc-smartbar-position-menu)[hidden]{
    display:none !important;
}

body.rc-editor-open #rc-editor-modal :is(.rcsd-popover-item, .rc-smartbar-popover > button, .rc-smartbar-position-menu > button){
    width:100% !important;
    min-height:36px !important;
    margin:0 !important;
    padding:8px 10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    border:1px solid transparent !important;
    border-radius:8px !important;
    background:transparent !important;
    color:var(--rc-text-secondary) !important;
    box-shadow:none !important;
    font-size:12px !important;
    font-weight:600 !important;
    line-height:1.25 !important;
    text-align:left !important;
    white-space:nowrap !important;
}

body.rc-editor-open #rc-editor-modal :is(.rcsd-popover-item, .rc-smartbar-popover > button, .rc-smartbar-position-menu > button):hover,
body.rc-editor-open #rc-editor-modal :is(.rcsd-popover-item, .rc-smartbar-popover > button, .rc-smartbar-position-menu > button).is-active{
    border-color:#dbeafe !important;
    background:#eaf2ff !important;
    color:var(--rc-blue) !important;
}

body.rc-editor-open #rc-editor-modal :is(.rc-smartbar-popover > button, .rc-smartbar-position-menu > button).is-danger{
    color:#b91c1c !important;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-position-separator{
    display:block !important;
    height:1px;
    margin:5px 4px;
    background:var(--rc-border-soft);
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-menu-group-title{
    padding:6px 10px 4px;
    color:var(--rc-text-secondary);
    font-size:10px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-text-adjustments{
    width:260px;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-text-adjustments label{
    padding:7px 8px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 74px auto;
    align-items:center;
    gap:8px;
    color:var(--rc-text-secondary);
    font-size:11px;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile #rc-context-toolbar{
    top:10px;
    padding-inline:10px;
}

@media (max-width:1280px){
    body.rc-editor-open #rc-editor-modal .rc-smartbar-text-font{
        width:164px;
    }

    body.rc-editor-open #rc-editor-modal .rc-context-toolbar-inner{
        justify-content:flex-start;
    }
}

/* ============================================================
   RC UI 3.0 — SMART BAR CONTROL POLISH
   ============================================================ */

/*
 * Selected text formatting / alignment state.
 * Calm editorial selection instead of saturated application blue.
 */
body.rc-editor-open #rc-editor-modal #rc-context-toolbar
.rc-smartbar-button-group button.is-active,
body.rc-editor-open #rc-editor-modal #rc-context-toolbar
.rc-smartbar-button-group button[aria-pressed="true"]{
    border-color:var(--rc-control-selected-border) !important;
    background:var(--rc-control-selected-bg) !important;
    color:var(--rc-control-selected-fg) !important;
    box-shadow:none !important;
}

body.rc-editor-open #rc-editor-modal #rc-context-toolbar
.rc-smartbar-button-group button:hover:not(.is-active):not([aria-pressed="true"]){
    border-color:transparent !important;
    background:var(--rc-control-hover-bg) !important;
    color:#334155 !important;
}

/*
 * Font-size field.
 * Remove the browser-native dark spinner treatment.
 */
body.rc-editor-open #rc-editor-modal #rc-context-toolbar
.rc-smartbar-size input[type="number"]{
    appearance:textfield !important;
    -moz-appearance:textfield !important;
    background:transparent !important;
    color:#334155 !important;
}

body.rc-editor-open #rc-editor-modal #rc-context-toolbar
.rc-smartbar-size input[type="number"]::-webkit-inner-spin-button,
body.rc-editor-open #rc-editor-modal #rc-context-toolbar
.rc-smartbar-size input[type="number"]::-webkit-outer-spin-button{
    -webkit-appearance:none !important;
    appearance:none !important;
    margin:0 !important;
}

/* RC UI 3.0 - FONT SIZE STEPPER */
body.rc-editor-open #rc-editor-modal .rc-smartbar-size{
    width:132px;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-size .rc-smartbar-font-size-stepper{
    position:static !important;
    inset:auto !important;

    width:98px !important;
    min-width:98px !important;
    max-width:98px !important;
    height:30px !important;
    min-height:30px !important;

    flex:0 0 98px !important;
    display:inline-flex !important;
    align-items:stretch !important;

    margin:0 !important;
    padding:0 !important;

    clip:auto !important;
    clip-path:none !important;
    white-space:normal !important;

    overflow:hidden !important;

    border:1px solid var(--rc-border) !important;
    border-radius:7px !important;
    background:var(--rc-surface-1) !important;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-font-size-stepper button{
    width:27px;
    min-width:27px;
    height:28px;
    margin:0;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:0;
    background:transparent;
    color:#475569;
    font-size:16px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-font-size-stepper button:hover{
    background:var(--rc-control-hover-bg);
    color:#1e293b;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-font-size-stepper button:focus-visible{
    outline:2px solid #94cce8;
    outline-offset:-2px;
}

body.rc-editor-open #rc-editor-modal .rc-smartbar-font-size-stepper input[type="number"]{
    width:42px !important;
    min-width:42px !important;
    height:28px !important;
    margin:0 !important;
    padding:0 3px !important;
    border:0 !important;
    border-left:1px solid var(--rc-border) !important;
    border-right:1px solid var(--rc-border) !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#334155 !important;
    text-align:center !important;
    font:inherit !important;
    outline:0 !important;
}

/* ============================================================
   RC UI 3.0 — TABLET SMART BAR CONTRACT
   Keep contextual controls on one horizontal scrollable row.
   ============================================================ */

body.rc-editor-open #rc-editor-modal.rcsd-device-tablet #rc-context-toolbar{
    padding-inline:10px;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-tablet
.rc-context-toolbar-inner{
    width:100% !important;
    max-width:100% !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-tablet
.rc-smartbar-section{
    flex:0 0 auto;
    flex-wrap:nowrap;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-tablet
.rc-smartbar-control,
body.rc-editor-open #rc-editor-modal.rcsd-device-tablet
.rc-smartbar-secondary,
body.rc-editor-open #rc-editor-modal.rcsd-device-tablet
.rc-smartbar-button-group{
    flex-shrink:0 !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-tablet
.rc-smartbar-text-font{
    width:190px;
    flex:0 0 190px;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-tablet
.rc-smartbar-size{
    flex:0 0 132px;
}

/* ============================================================
 * RC UI 3.0 — MOBILE SMART BAR OVERFLOW CONTRACT
 * Horizontal overflow must start at the first control.
 * ============================================================ */

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
#rc-context-toolbar .rc-context-toolbar-inner{
    width:100% !important;
    max-width:100% !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    flex-wrap:nowrap !important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
#rc-context-toolbar .rc-smartbar-section,
body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
#rc-context-toolbar .rc-smartbar-control,
body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
#rc-context-toolbar .rc-smartbar-secondary,
body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
#rc-context-toolbar .rc-smartbar-button-group{
    flex-shrink:0 !important;
}


/* ============================================================
 * RC UI 3.0 — MOBILE SMARTBAR VISUAL CLEARANCE FINAL
 *
 * Preserve horizontal scrolling.
 * Fix only vertical box geometry / clipping.
 * ============================================================ */

@media (max-width:719px) and (orientation:portrait){

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-context-toolbar{
        box-sizing:border-box !important;

        overflow:visible !important;

        min-height:52px !important;
        height:52px !important;

        padding:0 8px 6px !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-context-toolbar
    .rc-context-toolbar-inner{
        box-sizing:border-box !important;

        width:100% !important;
        max-width:100% !important;

        min-height:46px !important;
        height:46px !important;

        margin:0 !important;
        padding:4px 7px !important;

        display:flex !important;
        align-items:center !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        flex-wrap:nowrap !important;

        border:1px solid #dce4ed !important;
        border-radius:11px !important;

        background:#ffffff !important;

        box-shadow:0 6px 16px rgba(15,23,42,.09) !important;

        scrollbar-width:none !important;
        -ms-overflow-style:none !important;

        overscroll-behavior-x:contain !important;
        -webkit-overflow-scrolling:touch !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-context-toolbar
    .rc-context-toolbar-inner::-webkit-scrollbar{
        display:none !important;
        width:0 !important;
        height:0 !important;
    }

    body.rc-editor-open
    #rc-editor-modal.rcsd-device-mobile
    #rc-context-toolbar
    .rc-context-toolbar-inner
    > *{
        flex-shrink:0 !important;
    }
}