/* Actual Customer (.ref-*) and Artisan (.o4-*) dashboard components. */
.shell:has(.o4-dashboard)>.topbar{display:none}
.ref-dashboard .ref-hero{min-height:0;padding:20px 22px 48px}
.ref-dashboard .ref-profile-area{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:16px 0}
.ref-dashboard .ref-portrait{position:relative;inset:auto;width:64px;height:64px;flex:none;align-items:center;overflow:visible}
.ref-dashboard .ref-portrait>img,.ref-dashboard .ref-portrait>.avatar-fallback{width:64px!important;height:64px!important;border-radius:50%!important;font-size:26px;object-fit:cover}
.ref-dashboard .ref-photo-plus{width:28px;height:28px;min-height:28px;right:-5px;bottom:-3px;font-size:20px}
.ref-dashboard .ref-copy{max-width:100%;margin-top:16px}
.ref-dashboard .ref-copy h2{font-size:clamp(27px,6vw,44px);max-width:100%;margin:0 0 12px}
.ref-dashboard .ref-copy p{font-size:15px;max-width:100%;margin:0 0 18px}
.ref-dashboard .ref-searchbar{min-height:44px;max-width:720px;padding:4px 5px 4px 12px;gap:6px}
.ref-dashboard .ref-searchbar input{height:36px;font-size:14px!important;width:0;min-width:0;padding:4px!important}
.ref-dashboard .ref-search-icon{font-size:23px;line-height:1}
.ref-dashboard .ref-search-go{width:36px;min-width:36px;height:36px;min-height:36px;font-size:25px}
.ref-dashboard .ref-agent{margin:0;max-width:100%;gap:7px;font-size:13px}
.ref-dashboard .ref-agent .agent-code-tap{overflow-wrap:anywhere}
.ref-dashboard .ref-agent .agent-copy-feedback:empty{display:none}
.ref-dashboard .ref-profile{min-width:0;min-height:40px}
.ref-dashboard .ref-top .brand{font-size:24px;gap:6px}
.ref-dashboard .ref-top .brand img{height:36px;width:36px}
.ref-dashboard .ref-category-icon{width:64px;height:64px;min-height:64px;aspect-ratio:1;font-size:27px;line-height:1;flex:none}
.ref-dashboard .ref-category-label{font-size:13px;overflow-wrap:anywhere}
.ref-dashboard .ref-categories{gap:18px 8px}
.ref-dashboard .ref-lower{padding-top:26px}
.o4-dashboard .profile-photo-editor{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px}
.o4-dashboard .dashboard-avatar{width:auto;height:auto;margin:0}
.o4-dashboard .dashboard-avatar img,.o4-dashboard .avatar-fallback{width:52px;height:52px;min-width:52px;font-size:24px;object-fit:cover}
.o4-dashboard .profile-photo-editor>button{width:28px;min-width:28px;height:28px;min-height:28px;padding:0;border-radius:50%}
.o4-dashboard .o4-heading .brand{font-size:25px;color:#086c45}
.o4-dashboard .o4-heading .brand img{width:38px;height:38px;object-fit:contain}
.o4-dashboard .agent-code-display{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 20px;font-size:13px;overflow-wrap:anywhere}
.o4-dashboard .agent-code-display button{min-height:36px;padding:5px 10px}
.o4-dashboard .o4-card-icon{flex:none;max-width:100%;line-height:1;overflow:hidden}
.dashboard-more-services{margin-top:28px;border-top:1px solid #e3ebe7;padding-top:18px}
.dashboard-more-services h3{font-size:18px;margin:0 0 14px}
.ohelp-more-services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ohelp-more-services-grid .ohelp-service-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:98px;padding:12px 6px;background:#eaf4ed;color:#174f3e;border:1px solid #d7e8dd;border-radius:16px;font-size:12px;line-height:1.35;text-align:center;white-space:normal;overflow-wrap:anywhere}
.ohelp-service-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#fff;font-size:22px;line-height:1}
.ohelp-service-label{max-width:100%}
.dashboard-home .ohelp-option4-tabs{max-width:900px;margin:auto}
@media(max-width:700px){.ref-dashboard .ref-hero{padding:16px 16px 44px}.ref-dashboard .ref-topright{gap:4px}.ref-dashboard .ref-profile{font-size:12px}.ref-dashboard .ref-profile img,.ref-dashboard .ref-profile .avatar-fallback{width:28px!important;height:28px!important}.ref-dashboard .ref-top .brand{font-size:21px}.ref-dashboard .ref-top .brand img{width:30px;height:30px}.ref-dashboard .ref-categories{grid-template-columns:repeat(3,minmax(0,1fr))}.ref-dashboard .ref-lower{padding:24px 12px}.ref-dashboard .ref-action-icon{width:44px;height:44px;font-size:26px}.o4-dashboard{padding:14px 4px 100px}.o4-welcome{padding:16px;gap:10px}.o4-heading{margin-bottom:16px}}
@media(max-width:350px){.ohelp-more-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ref-dashboard .ref-top .brand{font-size:18px}.ref-dashboard .ref-topright{gap:0}}

.ref-dashboard .ref-profile .avatar-fallback{font-size:14px;line-height:1;margin:0;flex:none;box-shadow:none;border:0}
.ref-dashboard .ref-profile img{flex:none}

.notification-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;min-width:42px;height:42px;min-height:42px;padding:6px;font-size:22px;line-height:1;flex:none}
.notification-bell-icon{display:block;width:24px;height:24px;font-size:22px;line-height:24px}
.notification-badge{position:absolute;right:-2px;top:-2px;border-radius:12px;background:#b92525;color:#fff;font-size:10px;line-height:16px;min-width:16px;padding:0 3px;text-align:center}
.notification-badge[hidden]{display:none}
.dashboard-live-search{max-width:720px}.dashboard-search-panel{margin-top:10px;border-radius:14px;background:#fff;color:#18352f;padding:12px;max-height:420px;overflow-y:auto;overscroll-behavior:contain}.dashboard-search-panel[hidden],.dashboard-category-panel[hidden]{display:none}.ref-dashboard .dashboard-search-panel p{color:#18352f;font-size:13px;margin:8px 0}.dashboard-search-results .card{margin:8px 0;padding:12px}.dashboard-search-results img{width:42px;height:42px;object-fit:cover;border-radius:50%}.dashboard-profession-choices,.dashboard-category-panel{display:flex;flex-wrap:wrap;gap:8px}.dashboard-profession-choices button,.dashboard-category-panel button{font-size:13px;min-height:36px;padding:6px 10px}.dashboard-category-panel{margin-bottom:18px}.dashboard-category-panel h3{width:100%}.ref-categories:empty{display:none}.ref-category-label{white-space:normal;word-break:normal}.ref-dashboard .ref-bell.notification-bell{font-size:22px;padding:6px!important}

/* OHELP_TWO_ROW_CATEGORIES_V1 */

.ref-dashboard .ref-categories {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px 8px !important;
    align-items: start;
}

.ref-dashboard .ref-category {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ref-dashboard .ref-category-icon {
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    font-size: 26px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ref-dashboard .ref-category-label {
    font-size: 12px !important;
    line-height: 1.25;
    text-align: center;
}

.ref-dashboard .ref-categories:not(.ohelp-expanded)
.ref-category:nth-child(n+9) {
    display: none !important;
}

.ohelp-category-more {
    display: block;
    margin: 12px 0 20px auto;
    padding: 8px 14px;
    border: 0;
    border-radius: 10px;
    background: #e6f3ed;
    color: #087f72;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

@media (min-width: 701px) {
    .ref-dashboard .ref-categories {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    .ref-dashboard .ref-categories:not(.ohelp-expanded)
    .ref-category:nth-child(n+13) {
        display: none !important;
    }
}


/* OHELP MOBILE SCREEN STABILITY V1 */

html {
    width: 100%;
    min-width: 0;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

#app,
.ref-dashboard,
.ref-dashboard > *,
.ref-hero,
.ref-lower,
.dashboard-live-search,
.ref-searchbar,
.dashboard-search-panel,
.dashboard-search-results {
    min-width: 0;
    max-width: 100%;
}

.ref-dashboard {
    width: 100%;
    overflow-x: clip;
}

.ref-dashboard img,
.ref-dashboard svg {
    max-width: 100%;
}

.ref-dashboard input,
.ref-dashboard textarea,
.ref-dashboard select {
    max-width: 100%;
    min-width: 0;
    font-size: 16px;
}

.ref-searchbar {
    width: 100%;
    min-width: 0;
}

.ref-searchbar input {
    width: 100%;
    min-width: 0;
    font-size: 16px;
}

.dashboard-search-panel {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.dashboard-profession-choices button {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.ref-dashboard button,
.ref-dashboard a {
    touch-action: manipulation;
}

.ref-dashboard .ref-categories,
.ref-dashboard .ref-services,
.ref-dashboard .ref-grid {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 600px) {
    .ref-dashboard {
        width: 100%;
        max-width: 100vw;
    }

    .ref-hero,
    .ref-lower {
        width: 100%;
        min-width: 0;
    }

    .dashboard-live-search {
        width: 100%;
        max-width: 100%;
    }
}

/* OHELP DASHBOARD MODE DROPDOWN V2 */
.ohelp-mode-dropdown-container {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    max-width: 100%;
    z-index: 40;
}

.ohelp-mode-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    cursor: pointer;
}

.ohelp-mode-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    max-width: min(280px, 90vw);
    padding: 8px;
    background: #ffffff;
    border: 1px solid #e3eae6;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,.16);
    z-index: 100;
}

.ohelp-mode-dropdown-menu[hidden] {
    display: none !important;
}

.ohelp-mode-option {
    display: block;
    width: 100%;
    padding: 12px 14px;
    margin: 2px 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #173d31;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
}

.ohelp-mode-option:hover,
.ohelp-mode-option:focus-visible {
    background: #eaf7ee;
}

.ohelp-mode-option.active {
    background: #e0f4e6;
    color: #087a3b;
    font-weight: 700;
}
/* OHELP MODE SWITCH NAVIGATION FIX V3 */

.ohelp-mode-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: max(80px, env(safe-area-inset-top)) 16px 16px;
    background: rgba(0,0,0,.20);
}

.ohelp-mode-panel {
    width: min(340px, 100%);
    padding: 14px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(0,0,0,.20);
}

.ohelp-mode-panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.ohelp-mode-panel-title {
    font-size: 17px;
    font-weight: 700;
    color: #153d2b;
}

.ohelp-mode-panel-close {
    border: 0;
    background: transparent;
    color: #444;
    font-size: 26px;
    cursor: pointer;
}

.ohelp-mode-panel-option {
    display: block;
    width: 100%;
    margin: 5px 0;
    padding: 14px;
    border: 1px solid #e1e8e3;
    border-radius: 12px;
    background: #ffffff;
    color: #183d2c;
    text-align: left;
    font-size: 15px;
    cursor: pointer;
}

.ohelp-mode-panel-option.active {
    background: #e6f6eb;
    border-color: #83c79b;
    color: #08763a;
    font-weight: 700;
}
/* OHELP RESPONSIVE SCREEN FIT V2 */

html {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    overflow-x: clip;
}

*, *::before, *::after {
    box-sizing: border-box;
}

.shell,
#app,
#content,
.dashboard-home,
.ref-dashboard,
.ref-hero,
.ref-lower {
    min-width: 0;
    max-width: 100%;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

input,
textarea,
select {
    min-width: 0;
    max-width: 100%;
    font-size: max(16px, 1em);
}

.ref-dashboard,
.dashboard-home {
    width: 100%;
    overflow-x: clip;
}

.ref-dashboard button,
.dashboard-home button {
    touch-action: manipulation;
}

.ref-dashboard .ref-searchbar,
.ref-dashboard .dashboard-live-search {
    min-width: 0;
    max-width: 100%;
}

.ref-dashboard .ref-grid,
.ref-dashboard .ref-services,
.ref-dashboard .ref-categories {
    min-width: 0;
    max-width: 100%;
}

.ohelp-mode-overlay {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.ohelp-mode-panel {
    min-width: 0;
    max-width: calc(100vw - 32px);
}

@media (max-width: 600px) {
    .shell,
    #content,
    .dashboard-home,
    .ref-dashboard {
        width: 100%;
        max-width: 100%;
    }

    .ref-dashboard input,
    .dashboard-home input,
    .ref-dashboard select,
    .dashboard-home select {
        font-size: 16px;
    }
}
@media(max-width:768px){input,select,textarea,.ref-dashboard .ref-searchbar input{font-size:16px!important}dialog{max-width:calc(100vw - 24px);max-height:90dvh;overflow:auto}dialog audio,dialog video{max-width:100%}.ohelp-chat-header{min-width:0;flex-wrap:wrap}.ohelp-chat-header strong{overflow-wrap:anywhere}.ohelp-chat-composer textarea{font-size:16px}.o4-dashboard .profile-photo-editor{position:relative}.o4-dashboard .profile-photo-editor>button{position:absolute;right:-5px;bottom:-4px}}