:root{--purple:#6d4cc3;--purple-dark:#34245f;--purple-pale:#f1ecff;--blue:#0757b5;--blue-pale:#eaf4ff;--ink:#17213a;--muted:#657087;--line:#dfe3eb;--bg:#f7f8fb;--danger:#b42318;--success:#067647;--radius:1.2rem}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:10rem}body{margin:0;background:var(--bg);color:var(--ink);font-family:Vazirmatn,Tahoma,"Segoe UI",Arial,sans-serif;line-height:1.7;text-rendering:optimizeLegibility}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a,input,textarea,select,summary{outline:none}:focus-visible{outline:3px solid #8e6ee1;outline-offset:3px}.skip{position:fixed;right:1rem;top:-5rem;z-index:100;background:#fff;padding:.75rem 1rem;border-radius:.7rem}.skip:focus{top:1rem}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.shell{width:min(1120px,calc(100% - 2rem));margin-inline:auto}.public-header{position:sticky;top:0;z-index:30;background:#fffffffa;border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.header-row{height:4.2rem;display:flex;align-items:center;justify-content:space-between}.brand-link img{display:block;width:165px;height:48px;object-fit:contain}.icon-button{display:grid;place-items:center;min-width:44px;height:44px;border:1px solid var(--line);border-radius:.85rem;background:white;cursor:pointer}.menu-panel{position:fixed;right:max(1rem,calc((100% - 1120px)/2));top:4rem;width:250px;padding:.65rem;background:white;border:1px solid var(--line);border-radius:1rem;box-shadow:0 20px 60px #34245f24}.menu-panel a{display:block;min-height:44px;padding:.55rem .8rem;border-radius:.7rem}.menu-panel a:hover{background:var(--purple-pale)}.search-bar{display:flex;align-items:center;gap:.5rem;background:#f7f7fa;border:1px solid var(--line);border-radius:.9rem;padding:.2rem .6rem;margin-bottom:.5rem}.search-bar input{min-width:0;flex:1;height:42px;border:0;background:transparent}.search-bar button{width:42px;height:42px;border:0;background:transparent;color:var(--purple);font-size:1.5rem}.desktop-nav{display:flex;align-items:center;justify-content:center;gap:.55rem;padding:.45rem 0 .7rem;font-size:.9rem;font-weight:800;overflow-x:auto;overflow-y:hidden;white-space:nowrap;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}.desktop-nav::-webkit-scrollbar{display:none}.desktop-nav>a{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-height:44px;padding:.5rem .9rem;border:1px solid #d6c9f7;border-radius:.8rem;background:#fff;color:var(--purple-dark);white-space:nowrap;line-height:1.25}.desktop-nav>a:hover{background:var(--purple-pale);border-color:#bba9ea}.hero{padding:4rem 0 3rem;background:#fff;border-bottom:1px solid var(--line)}.hero.sal{background:linear-gradient(145deg,#fff 0,#f8f5ff 70%,#f1ecff 100%)}.hero-grid{display:grid;grid-template-columns:1.45fr .55fr;align-items:center;gap:2rem}.hero h1,.page h1{font-size:clamp(2.1rem,5vw,4.2rem);line-height:1.25;margin:.5rem 0 1rem;letter-spacing:-.04em}.hero p{font-size:1.12rem;color:#4b5369;max-width:48rem}.eyebrow{font-size:.9rem;font-weight:900;color:var(--purple)}.hero-mark{display:grid;place-items:center;text-align:center;gap:1rem;background:white;border:1px solid var(--line);border-radius:2rem;padding:2rem;box-shadow:0 20px 50px #34245f14}.hero-mark img{width:min(180px,65%)}.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.65rem 1.2rem;border-radius:.85rem;border:0;font-weight:900;cursor:pointer}.button.primary{background:var(--purple);color:white}.button.secondary{background:white;color:var(--purple);border:1px solid #bba9ea}.button.light{background:white;color:var(--purple)}.journey,.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.journey{margin-top:2rem}.journey article,.values article{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem}.journey b{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--purple-pale);color:var(--purple)}.journey h2{font-size:1.05rem;line-height:1.6}.journey p,.values p{color:var(--muted);font-size:.92rem}.values,.section,.page{padding-block:3.5rem}.values>h2,.section-heading h2{font-size:clamp(1.45rem,3vw,2rem);margin:.3rem 0 1.2rem}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}.section-heading a{color:var(--purple);font-weight:900}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.card{display:flex;flex-direction:column;background:white;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 25px #34245f0a}.card-main{display:block;padding:1.2rem}.card h3{margin:.2rem 0;font-size:1.05rem}.card p{color:var(--muted);font-size:.9rem}.card-links{display:grid;grid-template-columns:1fr 1fr}.card-links a{min-height:44px;padding:.6rem;border-top:1px solid var(--line);color:var(--purple);font-weight:800;font-size:.85rem}.card-links a+a{border-right:1px solid var(--line)}.directory{margin-top:2rem}.profile-cover{height:260px;border-radius:2rem;background:#eeeaf8;display:grid;place-items:center;color:var(--muted)}.profile-heading{display:flex;align-items:end;gap:1.2rem;margin-top:-4rem;padding:0 2rem}.profile-photo{width:120px;height:120px;display:grid;place-items:center;border-radius:50%;background:white;border:5px solid var(--bg);font-size:2rem;font-weight:900;color:var(--purple)}.verified{color:var(--purple);font-weight:900;font-size:.85rem}footer{padding:3rem 0;background:var(--purple-dark);color:white;margin-top:3rem}footer .shell{display:flex;align-items:center;justify-content:space-between;gap:1rem}footer img{width:150px;filter:brightness(0) invert(1)}.private-body{padding-bottom:1rem}.app-header{position:sticky;top:0;z-index:30;background:white;border-bottom:1px solid var(--line)}.app-header .shell{display:flex;align-items:center;justify-content:space-between;min-height:64px}.app-header nav{display:flex;align-items:center;gap:.8rem}.app-header form{display:inline}.app-header button,.app-header a{border:0;background:transparent;min-height:44px;color:var(--purple);font-weight:800}.notice{position:fixed;z-index:80;bottom:1rem;left:50%;transform:translateX(-50%);width:min(520px,calc(100% - 2rem));padding:1rem;border-radius:1rem;box-shadow:0 15px 50px #17213a2b}.notice.success{background:#ecfdf3;border:1px solid #abefc6;color:#05603a}.notice.error{background:#fff1f0;border:1px solid #fecdca;color:#912018}.notice ul{margin:.3rem 0}.auth-card{width:min(480px,calc(100% - 2rem));margin:4rem auto;padding:clamp(1.3rem,4vw,2.2rem);border:1px solid var(--line);border-radius:1.5rem;background:white;box-shadow:0 20px 60px #34245f12}.auth-card.wide{width:min(720px,calc(100% - 2rem))}.auth-card>img{width:180px}.auth-card h1{font-size:2rem}.auth-card label,.form-grid label{display:grid;gap:.4rem;font-weight:800;margin:1rem 0}.auth-card input,.auth-card textarea,.auth-card select,.form-grid input,.form-grid textarea,.form-grid select,.panel input,.panel textarea,.panel select,.sticky-search{width:100%;min-height:48px;border:1px solid #c9ced9;border-radius:.8rem;padding:.65rem .8rem;background:white}.auth-card textarea,.form-grid textarea{min-height:110px;resize:vertical}.demo-note{padding:1rem;border-radius:1rem;background:var(--purple-pale);color:var(--purple-dark)}.summary{display:grid;gap:.5rem}.summary div,.checkout-card dl div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding:.6rem 0}.chat-shell,.consult-shell{width:min(820px,100%);height:calc(100dvh - 65px);margin:auto;display:flex;flex-direction:column;background:#f7f7fa;border-inline:1px solid var(--line)}.chat-header{display:flex;align-items:center;gap:.8rem;min-height:68px;padding:.7rem 1rem;border-bottom:1px solid var(--line);background:white}.chat-header div{display:flex;flex-direction:column}.chat-header small{color:var(--muted);font-size:.75rem}.context-strip{display:flex;gap:.4rem;overflow-x:auto;padding:.6rem 1rem;border-bottom:1px solid var(--line);background:white;font-size:.78rem;white-space:nowrap}.context-strip span{padding:.25rem .55rem;border-radius:99px;background:var(--purple-pale);color:var(--purple-dark)}.messages{min-height:0;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.7rem;padding:1rem}.bubble{max-width:85%;padding:.8rem 1rem;border:1px solid var(--line);border-radius:1rem;background:white}.bubble strong{font-size:.78rem}.bubble p{margin:.25rem 0;white-space:pre-wrap;overflow-wrap:anywhere}.bubble time{display:block;color:var(--muted);font-size:.7rem}.bubble.system{align-self:flex-end;background:var(--purple-pale);border-color:#d6c9f7}.bubble.doctor{align-self:flex-end;background:var(--blue-pale);border-color:#bfdbfe;color:#06428a}.bubble.patient{align-self:flex-start;background:white}.confirmation{border-color:#98dbb8}.composer{flex-shrink:0;background:white;border-top:1px solid var(--line);padding:.7rem;padding-bottom:max(.7rem,env(safe-area-inset-bottom))}.choices{display:flex;flex-wrap:wrap;gap:.4rem;border:0;margin:0 0 .6rem;padding:0;max-height:140px;overflow:auto}.choices label{cursor:pointer}.choices input{position:absolute;opacity:0}.choices span{display:block;min-height:40px;padding:.4rem .8rem;border:1px solid #cfc5e8;border-radius:.75rem;background:white}.choices input:checked+span{background:var(--purple);color:white;border-color:var(--purple)}.composer-entry textarea{width:100%;min-height:50px;max-height:160px;resize:none;border:0;border-radius:0;padding:.7rem;background:#f7f7fa}.composer-actions{display:flex;align-items:center;gap:.45rem;margin-top:.5rem}.composer-actions button{min-width:44px;height:44px;border:1px solid var(--line);border-radius:.8rem;background:white;color:var(--purple);font-weight:900}.composer-actions .send{padding-inline:1.2rem;background:var(--purple);color:white;border-color:var(--purple)}.composer-actions .recording{background:#fff1f0;color:var(--danger);border-color:#f6aaa4}.attachment-names{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;color:var(--muted)}.checkout-card{margin:1rem;padding:1.2rem;border:1px solid #d6c9f7;border-radius:1.2rem;background:white}.checkout-card h2{margin:0}.closed-state{padding:1rem;text-align:center;background:white;border-top:1px solid var(--line)}.workspace{padding:1.5rem 0 6.5rem}.workspace-heading{display:flex;align-items:center;justify-content:space-between}.workspace-heading small,.section-title small{color:var(--purple);font-weight:800}.workspace-heading h1,.section-title h1{margin:.15rem 0;font-size:clamp(1.8rem,5vw,2.6rem)}.avatar,.round{display:grid;place-items:center;border-radius:50%;background:var(--purple-pale);color:var(--purple);font-weight:900}.avatar{width:48px;height:48px}.attention{margin-top:1.5rem;padding:1.5rem;border-radius:1.5rem;background:var(--purple-dark);color:white}.attention h2{margin:.3rem 0}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin:1rem 0}.kpi{display:flex;flex-direction:column;gap:.3rem;min-height:100px;padding:1rem;border:1px solid var(--line);border-radius:1rem;background:white}.kpi small{color:var(--muted)}.kpi strong{font-size:1.3rem;color:var(--purple)}.kpi.red strong{color:var(--danger)}.kpi.blue strong{color:var(--blue)}.action-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}.action-grid a,.action-grid .disabled,.action-list>*{display:flex;align-items:center;min-height:80px;padding:1rem;border:1px solid var(--line);border-radius:1rem;background:white;font-weight:900;color:var(--purple)}.disabled{opacity:.55;cursor:not-allowed}.mobile-nav{position:fixed;z-index:40;bottom:0;inset-inline:0;display:grid;grid-template-columns:repeat(5,1fr);min-height:74px;padding:.4rem max(.25rem,env(safe-area-inset-left)) max(.4rem,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff;box-shadow:0 -8px 30px #34245f12}.mobile-nav a{display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;color:var(--muted)}.mobile-nav span{font-size:1.3rem}.mobile-nav small{white-space:nowrap;font-size:.68rem;font-weight:800}.mobile-nav .active{color:var(--purple)}.mobile-nav .central{margin-top:-1.5rem;color:var(--purple)}.mobile-nav .central span{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--purple);color:white;box-shadow:0 10px 25px #6d4cc34d}.section-title{margin-bottom:1.2rem}.message-list{display:grid;margin-top:1rem;border:1px solid var(--line);border-radius:1.2rem;overflow:hidden;background:white}.message-list>a,.message-list>article{display:flex;align-items:center;gap:.8rem;min-height:82px;padding:.8rem 1rem;border-bottom:1px solid var(--line)}.message-list>*:last-child{border-bottom:0}.message-list .round{flex:0 0 44px;height:44px}.message-list span:nth-child(2){min-width:0;flex:1}.message-list strong,.message-list small{display:block}.message-list small{color:var(--muted)}.message-list time{max-width:130px;font-size:.75rem;color:var(--muted)}.message-list time.late{color:var(--danger);font-weight:900}.message-list form{display:flex;gap:.4rem}.message-list select,.message-list button{min-height:40px;border:1px solid var(--line);border-radius:.6rem;background:white}.panel{margin:1rem 0;padding:1.2rem;border:1px solid var(--line);border-radius:1.2rem;background:white}.panel summary{min-height:44px;font-weight:900;cursor:pointer}.form-grid{display:grid;gap:.6rem}.form-inline{display:flex;gap:.6rem;margin-top:1rem}.form-inline input{min-width:0;flex:1}.chips{display:flex;flex-wrap:wrap;gap:.45rem}.chips span,.chips button{min-height:40px;padding:.4rem .7rem;border:1px solid #d6c9f7;border-radius:99px;background:var(--purple-pale);color:var(--purple-dark)}.chips .disabled{background:#f2f4f7;color:#667085}.hours-row{display:grid;grid-template-columns:1fr auto 130px 130px;align-items:center;gap:.6rem;padding:.7rem 0;border-bottom:1px solid var(--line)}.action-list{display:grid;gap:.7rem}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:1rem;background:white}table{width:100%;border-collapse:collapse;white-space:nowrap}th,td{padding:.8rem;text-align:right;border-bottom:1px solid var(--line)}pre,.report-output{direction:ltr;text-align:left;width:100%;max-height:320px;overflow:auto;padding:1rem;border:1px solid var(--line);border-radius:.8rem;background:#111827;color:#e5e7eb;white-space:pre-wrap}.report-output{min-height:180px}.consult-shell{height:calc(100dvh - 65px)}@media(max-width:760px){body{padding-bottom:5rem}.desktop-nav{justify-content:flex-start;width:100%;padding-inline:1rem;gap:.5rem;scroll-padding-inline:1rem}.hero{padding-top:2.5rem}.hero-grid{grid-template-columns:1fr}.hero-mark{display:none}.journey,.grid-3,.cards{grid-template-columns:1fr}.section-heading{align-items:start;flex-direction:column}.brand-link img{width:128px}.profile-cover{height:180px}.profile-heading{padding:0 .8rem;align-items:center}.profile-photo{width:88px;height:88px}.app-header .shell{min-height:58px}.chat-shell,.consult-shell{height:calc(100dvh - 59px);border:0}.private-body:has(.chat-shell),.private-body:has(.consult-shell){padding-bottom:0}.kpi-grid{grid-template-columns:repeat(2,1fr)}.action-grid{grid-template-columns:1fr}.message-list form{flex-direction:column}.hours-row{grid-template-columns:1fr auto}.hours-row input[type=time]{width:100%}.form-inline{flex-direction:column}footer .shell{flex-direction:column;text-align:center}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* SAL_TOAST_AND_CHAT_LABEL_FIX_2026_09_23 */

.notice.success,
.notice.error {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;

    width: max-content;
    max-width: min(90vw, 460px);

    margin: 0;
    padding: 10px 14px;

    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.35);

    color: #111827;
    font-size: .92rem;
    line-height: 1.7;

    box-shadow: 0 8px 26px rgba(0,0,0,.12);
    backdrop-filter: blur(8px);

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.notice.success {
    background: rgba(34,197,94,.50);
}

.notice.error {
    background: rgba(239,68,68,.50);
}

.notice.error strong {
    display: none;
}

.notice.error ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.notice.error li + li {
    margin-top: 4px;
}

.notice.is-hiding {
    opacity: 0;
    transform: translate(-50%, -8px);
    pointer-events: none;
}

/* Name of Salamatito / doctor / patient sticks to physical left of bubble */
.bubble > strong {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 4px;
}

/* SAL_COMPACT_TOAST_2026_09_23 */

.notice.success,
.notice.error {
    padding: 3px 10px !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.35 !important;
}

.notice.success {
    background: rgba(34, 197, 94, 0.20) !important;
}

.notice.error {
    background: rgba(239, 68, 68, 0.20) !important;
}

.notice.error ul,
.notice.error li {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.35 !important;
}


/* SAL_TOAST_FINAL_FIX_2026_09_23 */

.notice.success,
.notice.error {
    position: fixed !important;

    top: 8px !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    width: fit-content !important;
    min-width: 0 !important;
    max-width: min(90vw, 460px) !important;

    height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 2px 8px !important;

    line-height: 1.3 !important;

    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 8px !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    overflow: visible !important;

    z-index: 99999 !important;
}

.notice.success {
    background: rgba(34, 197, 94, 0.05) !important;
    border-color: rgba(34, 197, 94, 0.05) !important;
}

.notice.error {
    background: rgba(239, 68, 68, 0.05) !important;
    border-color: rgba(239, 68, 68, 0.05) !important;
}

.notice.success p,
.notice.error p,
.notice.success ul,
.notice.error ul,
.notice.success li,
.notice.error li {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.3 !important;
}

.notice.error ul {
    list-style: none !important;
}

.notice.is-hiding {
    opacity: 0 !important;
    transform: translate(-50%, -6px) !important;
    pointer-events: none !important;
}


/* SAL_TOAST_85_TRANSPARENCY_2026_09_23 */

.notice.success {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.15) !important;
}

.notice.error {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.15) !important;
}

/* Patient name stays on the RIGHT side of the patient bubble */
.bubble.patient > strong {
    display: block !important;
    width: 100% !important;
    text-align: right !important;
}


/* SAL_AUTH_NAV_DOCUMENT_UI_2026_09_24 */

/* Header */
.sal-header-shell {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .75rem !important;
    flex-wrap: nowrap !important;
}

.sal-left-cluster,
.sal-public-auth-cluster {
    display: flex !important;
    align-items: center !important;
    gap: .6rem !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    direction: ltr !important;
}

.sal-left-cluster .header-auth-entry,
.sal-public-auth-cluster .header-auth-entry {
    direction: rtl !important;
}

.brand-icon-link,
.sal-public-auth-cluster .brand-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
}

.brand-icon-link img,
.sal-public-auth-cluster .brand-link img {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
}

/* Support / Logout stay on exactly the same line */
.app-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: .85rem !important;
}

.app-actions form {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.app-actions a,
.app-actions button,
.header-auth-entry,
.public-menu-auth-entry {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

/* Header login/signup */
.header-auth-entry {
    min-height: 38px;
    padding: .45rem .8rem;
    border: 1px solid var(--purple);
    border-radius: .8rem;
    color: var(--purple-dark);
    text-decoration: none;
    font-weight: 700;
}

/* Login / signup */
.sal-auth-page {
    min-height: calc(100vh - 90px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 4rem 1rem 2rem;
}

.sal-auth-card {
    width: min(100%, 520px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 12px 35px rgba(23,33,58,.06);
}

.sal-auth-card h1 {
    margin-top: 0;
}

.sal-auth-help {
    color: var(--muted);
}

.sal-auth-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    padding: .3rem;
    margin: 1.25rem 0;
    background: var(--purple-pale);
    border-radius: .9rem;
}

.sal-auth-switch a {
    text-align: center;
    padding: .65rem;
    border-radius: .7rem;
    text-decoration: none;
    color: var(--purple-dark);
    font-weight: 700;
}

.sal-auth-switch a.active {
    background: #fff;
    box-shadow: 0 2px 8px rgba(23,33,58,.08);
}

.sal-field {
    display: grid;
    gap: .4rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.sal-field input {
    width: 100%;
    min-height: 48px;
    padding: .65rem .8rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    background: #fff;
    font: inherit;
}

.sal-auth-submit {
    width: 100%;
    min-height: 48px;
}

.sal-auth-submit[data-otp-resend] {
    margin-top: .6rem;
}

.sal-auth-back {
    display: inline-block;
    margin-top: 1rem;
}

/* Persian custom medical-document attachment */
.document-attach-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .6rem 1rem;
    border: 1px solid var(--purple);
    border-radius: .8rem;
    background: var(--purple);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.document-attach-button input[type="file"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Mobile */
@media (max-width: 760px) {

    .sal-header-shell {
        gap: .45rem !important;
    }

    .app-actions {
        gap: .55rem !important;
    }

    .app-actions a,
    .app-actions button,
    .header-auth-entry {
        font-size: .92rem !important;
    }

    .brand-icon-link img,
    .sal-public-auth-cluster .brand-link img {
        width: 40px !important;
        height: 40px !important;
    }

    .sal-auth-page {
        padding-top: 1.5rem;
    }

    .sal-auth-card {
        padding: 1rem;
    }
}


/* SAL_NAV_TOAST_REFINEMENT_2026_09_24 */

/* 20% transparent = 80% visible */
.notice.success {
    background: rgba(34, 197, 94, 0.80) !important;
    border-color: rgba(34, 197, 94, 0.80) !important;
}

.notice.error {
    background: rgba(239, 68, 68, 0.80) !important;
    border-color: rgba(239, 68, 68, 0.80) !important;
}

/*
 * Force physical navbar layout:
 * logo at far LEFT, auth immediately to its right,
 * other navigation at far RIGHT.
 */
.app-header .shell,
.sal-header-shell,
.public-header .shell {
    direction: ltr !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.sal-left-cluster,
.sal-public-auth-cluster {
    direction: ltr !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .55rem !important;

    margin-left: 0 !important;
    margin-right: auto !important;
    flex: 0 0 auto !important;
}

.sal-left-cluster > *,
.sal-public-auth-cluster > * {
    flex: 0 0 auto !important;
}

.sal-left-cluster .header-auth-entry,
.sal-public-auth-cluster .header-auth-entry {
    direction: rtl !important;
}

.app-actions,
.public-header nav {
    direction: rtl !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}


/* SAL_MEMBERSHIP_FINAL_2026_09_24 */

/* Notification: 20% transparent / 80% visible */
.notice.success {
    background: rgba(34, 197, 94, .80) !important;
    border-color: rgba(34, 197, 94, .80) !important;
}

.notice.error {
    background: rgba(239, 68, 68, .80) !important;
    border-color: rgba(239, 68, 68, .80) !important;
}

/* Always keep SAL icon physically at the left */
.sal-left-cluster,
.sal-public-auth-cluster {
    order: -100 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    direction: ltr !important;
}

.brand-icon-link,
.sal-public-auth-cluster .brand-link {
    order: -10 !important;
}

.header-auth-entry {
    order: 0 !important;
    direction: rtl !important;
}

/* Membership roles */
.membership-role-box {
    margin: 1rem 0;
    padding: .85rem 1rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: var(--bg);
}

.membership-role-box legend {
    padding: 0 .35rem;
    font-weight: 800;
}

.membership-role-option {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 42px;
    cursor: pointer;
}

.membership-role-option input[type="checkbox"],
.membership-role-option input[type="radio"] {
    width: 19px;
    height: 19px;
    margin: 0;
    accent-color: var(--purple);
    flex: 0 0 auto;
}

.membership-role-option span {
    font-weight: 700;
}

.membership-role-box small {
    display: block;
    margin-top: .45rem;
    color: var(--muted);
    line-height: 1.7;
}

.membership-role-box.invited {
    border-color: rgba(109,76,195,.35);
    background: var(--purple-pale);
}

.membership-role-option.locked {
    cursor: default;
}

.invitation-heading {
    margin: 1rem 0;
    padding: .65rem .8rem;
    border-radius: .8rem;
    background: var(--purple-pale);
    color: var(--purple-dark);
    font-weight: 800;
}

.inline-auth-error {
    margin-bottom: 1rem;
    padding: .6rem .8rem;
    border-radius: .7rem;
    background: rgba(239,68,68,.12);
    color: var(--danger);
}


/* SAL_ROLE_WORKSPACE_CSS_2026_09_24 */

.role-workspace {
    padding-top: 1rem;
    padding-bottom: 6rem;
}

.role-tabs {
    position: sticky;
    top: 0;
    z-index: 20;

    display: flex;
    align-items: center;
    gap: .45rem;

    overflow-x: auto;

    margin-bottom: 1rem;
    padding: .55rem;

    border: 1px solid var(--line);
    border-radius: 1rem;

    background: rgba(255,255,255,.96);
}

.role-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-height: 38px;
    padding: .45rem .8rem;

    border-radius: .75rem;

    white-space: nowrap;
    text-decoration: none;
}

.role-tabs a.active {
    background: var(--purple-pale);
    color: var(--purple-dark);
    font-weight: 800;
}

.workspace-card {
    margin: 0 0 1rem;
    padding: 1rem;

    border: 1px solid var(--line);
    border-radius: 1rem;

    background: #fff;
}

.workspace-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

.form-inline {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.role-table {
    display: grid;
    gap: .6rem;
}

.role-table article {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    align-items: center;
    gap: .65rem;

    padding: .7rem 0;

    border-bottom: 1px solid var(--line);
}

.invite-url {
    direction: ltr;
    text-align: left;
    overflow-wrap: anywhere;

    margin-top: .5rem;

    font-family: monospace;
    font-size: .8rem;
}

.review-note {
    margin: .75rem 0;
    padding: .75rem;

    border-radius: .8rem;

    background: rgba(109,76,195,.08);
}

.content-review-body {
    margin: .75rem 0;
    padding: .75rem;

    border: 1px solid var(--line);
    border-radius: .8rem;

    white-space: pre-wrap;
}

@media (max-width: 680px) {

    .role-table article {
        grid-template-columns: 1fr;
    }

    .workspace-actions,
    .form-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .workspace-actions > *,
    .form-inline > * {
        width: 100%;
    }
}

/* ================================================================
   SAL_GLOBAL_FILE_PICKER_CSS_2026_09_24
   ================================================================ */

.sal-file-picker {
    position: relative;

    display: flex;
    align-items: center;
    gap: .7rem;

    width: 100%;

    min-height: 48px;
    padding: .45rem;

    border: 1px solid rgba(109,76,195,.22);
    border-radius: .9rem;

    background: rgba(109,76,195,.045);

    direction: rtl;
}

.sal-file-native {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    opacity: 0 !important;

    overflow: hidden !important;

    inset-inline-start: 0;
    bottom: 0;
}

.sal-file-picker-button {
    appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;

    flex: 0 0 auto;

    min-height: 38px;
    padding: .48rem .85rem;

    border: 0;
    border-radius: .72rem;

    background:
        linear-gradient(
            135deg,
            #7654d8,
            #9b6be8
        );

    color: #fff;

    font: inherit;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 5px 14px
        rgba(109,76,195,.16);
}

.sal-file-picker-button:hover {
    filter: brightness(1.03);
}

.sal-file-picker-button:focus-visible {
    outline: 3px solid rgba(118,84,216,.24);
    outline-offset: 2px;
}

.sal-file-picker-status {
    min-width: 0;

    overflow: hidden;

    color: var(--muted, #6b7280);

    font-size: .86rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.sal-file-picker.has-file {
    border-color:
        rgba(109,76,195,.42);

    background:
        rgba(109,76,195,.075);
}

.sal-file-picker.has-file
.sal-file-picker-status {
    color:
        var(--text, #25222c);

    font-weight: 700;
}


/* Global validation/error panel */

.sal-global-errors {
    margin-top: .85rem;
    margin-bottom: .85rem;

    padding: .9rem 1rem;

    border:
        1px solid
        rgba(239,68,68,.80);

    border-radius: .9rem;

    background:
        rgba(239,68,68,.80);

    color: #fff;

    direction: rtl;
    text-align: right;
}

.sal-global-errors strong {
    display: block;

    margin-bottom: .4rem;
}

.sal-global-errors ul {
    margin: 0;
    padding-inline-start: 1.25rem;
}

.sal-global-errors li {
    margin: .22rem 0;
}


/* Admin explanation for manager-invited doctors */

.invited-doctor-optional-note {
    margin: .75rem 0;
    padding: .75rem .85rem;

    border:
        1px solid
        rgba(109,76,195,.18);

    border-radius: .8rem;

    background:
        rgba(109,76,195,.07);
}

.invited-doctor-optional-note strong {
    display: block;

    margin-bottom: .25rem;
}

.invited-doctor-optional-note p {
    margin: 0;

    font-size: .86rem;
    line-height: 1.85;
}


/* Mobile */

@media (max-width: 680px) {

    .sal-file-picker {
        align-items: stretch;
        flex-direction: column;
    }

    .sal-file-picker-button {
        width: 100%;
    }

    .sal-file-picker-status {
        width: 100%;
        padding-inline: .25rem;

        text-align: right;
    }
}

/* SAL_CHAT_MIC_ICON_FIX_2026_09_24 */

.composer-actions .record svg {
    display: block;
    width: 21px;
    height: 21px;
}

.chat-mic-icon,
.chat-stop-icon {
    display: grid;
    place-items: center;
}

.chat-stop-icon {
    display: none;
}

.composer-actions .record.recording .chat-mic-icon {
    display: none;
}

.composer-actions .record.recording .chat-stop-icon {
    display: grid;
}

.composer-actions .record.recording {
    background: #fff1f0;
    color: var(--danger);
    border-color: #f6aaa4;
}

/* SAL_CONSULTATION_ATTACHMENT_DISPLAY_2026_09_24 */

.consult-image-attachment {
    display: block;
    margin-top: .5rem;
}

.consult-image-attachment img {
    display: block;

    max-width: min(340px, 100%);
    max-height: 300px;

    object-fit: contain;

    border: 1px solid var(--line);
    border-radius: .75rem;

    background: #fff;
}

.consult-audio-attachment {
    display: block;

    width: min(360px, 100%);

    margin-top: .55rem;
}

.consult-file-attachment {
    display: inline-flex;

    margin-top: .5rem;
    padding: .45rem .65rem;

    border: 1px solid var(--line);
    border-radius: .7rem;

    background: #fff;

    color: var(--purple);
    font-weight: 800;
}

/* SAL_CONSULTATION_REFERRAL_CSS_2026_09_24 */

.composer-actions .referral-trigger svg {
    display: block;
    width: 21px;
    height: 21px;
}


.referral-panel {
    margin: .65rem;
    padding: .85rem;

    border: 1px solid #d6c9f7;
    border-radius: 1rem;

    background: #fff;

    box-shadow:
        0 -8px 28px
        rgba(52,36,95,.08);
}


.referral-panel[hidden] {
    display: none !important;
}


.referral-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: .6rem;

    margin-bottom: .7rem;
}


.referral-heading > button {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    border: 1px solid var(--line);
    border-radius: .7rem;

    background: white;

    color: var(--purple);

    cursor: pointer;
}


.referral-panel label {
    display: grid;
    gap: .35rem;

    margin-top: .65rem;

    font-size: .82rem;
    font-weight: 800;
}


.referral-panel input[type="search"],
.referral-panel select {
    width: 100%;

    min-height: 44px;

    padding: .55rem .7rem;

    border: 1px solid #c9ced9;
    border-radius: .75rem;

    background: white;
}


.referral-results {
    display: grid;
    gap: .4rem;

    max-height: 220px;

    margin-top: .55rem;

    overflow-y: auto;
}


.referral-target {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;

    min-height: 55px;

    padding: .55rem .7rem;

    border: 1px solid var(--line);
    border-radius: .75rem;

    background: white;

    color: var(--ink);

    text-align: right;

    cursor: pointer;
}


.referral-target small {
    color: var(--muted);
}


.referral-target.selected {
    border-color: var(--purple);
    background: var(--purple-pale);
}


.referral-empty {
    margin: .6rem 0;

    color: var(--muted);

    font-size: .82rem;
}


.referral-panel .button {
    width: 100%;

    margin-top: .7rem;
}


.referral-panel .button:disabled {
    opacity: .45;

    cursor: not-allowed;
}


/* Patient recommendation card */

.recommendation-card {
    width: min(92%, 520px);

    padding: 1rem;

    border-color: #b9d6fb;

    box-shadow:
        0 8px 25px
        rgba(7,87,181,.08);
}


.recommendation-intro {
    margin-bottom: .4rem;

    color: #06428a;

    font-weight: 800;
}


.recommendation-procedure {
    margin: .6rem 0;
    padding: .75rem;

    border: 1px solid #bfdbfe;
    border-radius: .8rem;

    background: white;

    color: var(--ink);

    font-size: 1.03rem;
    font-weight: 900;
}


.recommendation-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: .75rem;

    padding: .45rem 0;

    border-bottom: 1px solid #dbeafe;
}


.recommendation-row small {
    color: var(--muted);
}


.recommendation-actions {
    display: grid;
    gap: .45rem;

    margin-top: .8rem;
}


.recommendation-actions .button {
    width: 100%;

    min-height: 44px;

    text-align: center;
}


.recommendation-actions .secondary {
    border: 1px solid #bba9ea;

    background: white;

    color: var(--purple);
}


.recommendation-info-page {
    max-width: 720px;

    margin-inline: auto;
}


.recommendation-service-summary {
    margin: 1rem 0;
    padding: 1rem;

    border-radius: 1rem;

    background: var(--purple-pale);
}


.recommendation-safety-note {
    color: var(--muted);

    font-size: .84rem;
}


@media (max-width: 600px) {

    .recommendation-card {
        width: 94%;
    }
}

/* ==========================================================
   SAL_PROFILE_HEADER_MENU_2026_09_25
   ========================================================== */

.sal-header-shell {
    direction: ltr !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .75rem !important;
    position: relative;
}

.sal-left-cluster {
    direction: ltr !important;
    display: flex !important;
    align-items: center !important;
    gap: .35rem !important;
    flex: 0 0 auto !important;
}

.sal-support-icon {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: var(--purple) !important;
}

.sal-support-icon:hover {
    background: var(--purple-pale) !important;
}

.sal-account-menu {
    position: relative;
    margin-left: auto;
    direction: rtl;
}

.sal-account-menu > summary {
    list-style: none;
}

.sal-account-menu > summary::-webkit-details-marker {
    display: none;
}

.sal-account-menu-trigger {
    min-height: 44px;
    min-width: 58px;
    padding: .35rem .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    border-radius: .8rem;
    color: var(--purple);
    font-weight: 900;
    cursor: pointer;
    user-select: none;
}

.sal-account-menu-trigger:hover,
.sal-account-menu[open] .sal-account-menu-trigger {
    background: var(--purple-pale);
}

.sal-account-menu-panel {
    position: absolute;
    z-index: 100;
    top: calc(100% + .45rem);
    right: 0;
    width: min(270px, calc(100vw - 2rem));
    padding: .55rem;
    display: grid !important;
    gap: .15rem !important;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 20px 60px #34245f24;
    direction: rtl !important;
}

.sal-account-menu-panel a,
.sal-account-menu-panel button {
    width: 100%;
    min-height: 44px !important;
    padding: .55rem .75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border: 0 !important;
    border-radius: .7rem !important;
    background: transparent !important;
    color: var(--ink) !important;
    font-weight: 800 !important;
    text-align: right !important;
    cursor: pointer;
}

.sal-account-menu-panel a:hover,
.sal-account-menu-panel button:hover {
    background: var(--purple-pale) !important;
    color: var(--purple-dark) !important;
}

.sal-account-menu-panel form {
    display: block !important;
    width: 100%;
    margin: 0 !important;
}

.sal-account-menu-panel .sal-account-logout {
    color: var(--danger) !important;
}

.sal-home-greeting {
    padding-top: 1.25rem;
    padding-bottom: 0;
}

.sal-home-greeting h1 {
    margin: 0;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    line-height: 1.4;
}

.account-page {
    padding-top: 2rem;
    padding-bottom: 5rem;
}

.account-profile-form {
    max-width: 640px;
}

.field-help {
    color: var(--muted);
    font-weight: 500;
}

@media (max-width: 760px) {

    .sal-header-shell {
        gap: .4rem !important;
    }

    .sal-support-icon {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    .sal-account-menu-trigger {
        min-width: 52px;
        padding-inline: .4rem;
    }

    .sal-account-menu-panel {
        position: fixed;
        top: 60px;
        right: 1rem;
        left: 1rem;
        width: auto;
    }

    .sal-home-greeting {
        padding-top: 1rem;
    }
}

/* ==========================================================
   SAL_PATIENT_SETTINGS_UI_2026_09_25
   ========================================================== */

.account-toggle {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: .8rem !important;
    padding: 1rem;
    margin: 0 !important;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: #fff;
    cursor: pointer;
}

.account-toggle input[type="checkbox"] {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    margin-top: .15rem;
    accent-color: var(--purple);
}

.account-toggle span {
    min-width: 0;
    flex: 1;
}

.account-toggle strong,
.account-toggle small {
    display: block;
}

.account-toggle small {
    margin-top: .2rem;
    color: var(--muted);
    font-weight: 500;
}


/* SAL_SECRETARY_BOOKING_CARD_MOBILE_2026_09_26
   Mobile-first secretary booking cards.
   Scoped so patient/doctor/manager components are unaffected.
*/

.message-list .secretary-booking-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
        "avatar main"
        "status status"
        "action action"
        "panel panel";
    align-items: start;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    gap: 12px 14px;
    padding: 16px;
    margin: 0 0 14px;
    overflow: hidden;
    border-radius: 20px;
}

.message-list .secretary-booking-avatar {
    grid-area: avatar;
    width: 42px;
    min-width: 42px;
    height: 42px;
    margin: 0;
    align-self: start;
    justify-self: start;
}

.message-list .secretary-booking-main {
    grid-area: main;
    display: grid;
    min-width: 0;
    width: 100%;
    gap: 3px;
    margin: 0;
    padding: 0;
}

.message-list .secretary-booking-main strong {
    display: block;
    min-width: 0;
    margin: 0 0 2px;
    font-size: 1.05rem;
    line-height: 1.65;
    font-weight: 800;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

.message-list .secretary-booking-main small {
    display: block;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 1.75;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

.message-list .secretary-booking-main small:nth-of-type(1) {
    font-weight: 700;
}

.message-list .secretary-booking-main small:nth-of-type(2) {
    margin-top: 2px;
}

.message-list .secretary-booking-main small:nth-of-type(3) {
    margin-top: 3px;
    opacity: .82;
}

.message-list .secretary-booking-main small:nth-of-type(4),
.message-list .secretary-booking-main small:nth-of-type(5) {
    margin-top: 2px;
    font-size: .84rem;
    opacity: .82;
}

.message-list .secretary-booking-status {
    grid-area: status;
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 6px 11px;
    justify-self: start;
    align-items: center;
    border: 1px solid rgba(118, 75, 162, .16);
    border-radius: 999px;
    background: rgba(118, 75, 162, .07);
    line-height: 1.45;
    white-space: nowrap;
}

.message-list .secretary-booking-status strong {
    margin: 0;
    font-size: .84rem;
    font-weight: 800;
}

.message-list .secretary-future-booking-button {
    grid-area: action;
    display: inline-flex;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding-inline: 16px;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.5;
    border-radius: 14px;
}

.message-list .secretary-future-booking-button:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.message-list .secretary-future-booking-panel {
    grid-area: panel;
    display: grid;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    gap: 10px;
    margin: 0;
    padding: 12px;
    border-radius: 16px;
}

.message-list .secretary-future-booking-panel[hidden] {
    display: none !important;
}

.message-list .secretary-future-booking-panel select {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 46px;
    box-sizing: border-box;
    margin: 0;
}

.message-list .secretary-future-booking-panel small {
    display: block;
    width: 100%;
    margin: 0;
    line-height: 1.7;
}


/*
 * Small phones.
 */
@media (max-width: 420px) {

    .message-list .secretary-booking-card {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px 12px;
        padding: 14px;
        border-radius: 18px;
    }

    .message-list .secretary-booking-avatar {
        width: 38px;
        min-width: 38px;
        height: 38px;
    }

    .message-list .secretary-booking-main strong {
        font-size: 1rem;
    }

    .message-list .secretary-booking-main small {
        font-size: .88rem;
    }

    .message-list .secretary-booking-status {
        padding: 5px 10px;
    }

    .message-list .secretary-future-booking-button {
        min-height: 44px;
    }
}


/*
 * Tablet / desktop:
 * use the extra horizontal space without changing the
 * mobile-first reading order.
 */
@media (min-width: 760px) {

    .message-list .secretary-booking-card {
        grid-template-columns:
            44px
            minmax(0, 1fr)
            auto;
        grid-template-areas:
            "avatar main status"
            ". action action"
            "panel panel panel";
        gap: 12px 16px;
        padding: 18px;
    }

    .message-list .secretary-booking-avatar {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    .message-list .secretary-booking-status {
        justify-self: end;
        align-self: start;
    }

    .message-list .secretary-future-booking-button {
        width: auto;
        min-width: 180px;
        justify-self: end;
    }

    .message-list .secretary-future-booking-panel {
        max-width: 620px;
        justify-self: end;
    }
}


/* SAL_SECRETARY_FUTURE_BOOKING_SELECTS_2026_09_26 */

.message-list
.secretary-future-booking-panel
select {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    margin: 0;
    border: 1px solid rgba(118, 75, 162, .24);
    border-radius: 14px;
    background-color: #fff;
    color: #1f2937;
    font: inherit;
    font-size: .94rem;
    font-weight: 600;
    line-height: 1.5;
    direction: rtl;
    text-align: right;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .03),
        0 5px 18px rgba(118, 75, 162, .04);
    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background-color .16s ease;
}

.message-list
.secretary-future-booking-panel
select:hover:not(:disabled) {
    border-color: rgba(118, 75, 162, .46);
}

.message-list
.secretary-future-booking-panel
select:focus {
    outline: none;
    border-color: rgba(118, 75, 162, .72);
    box-shadow:
        0 0 0 3px rgba(118, 75, 162, .10),
        0 6px 20px rgba(118, 75, 162, .06);
}

.message-list
.secretary-future-booking-panel
select:disabled {
    color: #8b8f99;
    background-color: #f7f7fa;
    border-color: rgba(148, 163, 184, .22);
    box-shadow: none;
    cursor: not-allowed;
    opacity: .78;
}

.message-list
.secretary-future-booking-panel
select option {
    background: #fff;
    color: #1f2937;
    font: inherit;
    padding: 10px 12px;
}

.message-list
.secretary-future-booking-panel
select option:checked {
    background: #f3edfb;
    color: #6941a5;
    font-weight: 700;
}

.message-list
.secretary-future-booking-panel
select option:disabled {
    color: #999eaa;
}

.message-list
.secretary-future-booking-panel
select[data-future-doctor]:valid,
.message-list
.secretary-future-booking-panel
select[data-future-procedure]:valid {
    background-color: #fff;
}

.message-list
.secretary-future-booking-panel {
    background:
        linear-gradient(
            180deg,
            rgba(250, 248, 253, .98),
            rgba(255, 255, 255, .98)
        );
    border: 1px solid rgba(118, 75, 162, .12);
}

@media (max-width: 420px) {

    .message-list
    .secretary-future-booking-panel
    select {
        min-height: 48px;
        padding-inline: 12px;
        border-radius: 13px;
        font-size: .91rem;
    }
}


/* SAL_SECRETARY_FUTURE_BOOKING_SELECTS_V2_2026_09_26
   Stronger SAL visual treatment for the native doctor/procedure
   controls. Native popup rendering may still vary by operating system.
*/

.role-workspace
.message-list
.secretary-booking-card
.secretary-future-booking-panel
select[data-future-doctor],
.role-workspace
.message-list
.secretary-booking-card
.secretary-future-booking-panel
select[data-future-procedure] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 52px;
    box-sizing: border-box;

    margin: 0;
    padding: 0 15px;

    border:
        1.5px solid
        rgba(111, 70, 160, .28);

    border-radius: 14px;

    background-color: #ffffff;

    color: #25212d;

    font-family: inherit;
    font-size: .94rem;
    font-weight: 650;
    line-height: 1.5;

    direction: rtl;
    text-align: right;

    box-shadow:
        0 1px 2px rgba(31, 20, 44, .03),
        0 5px 16px rgba(90, 54, 126, .045);

    cursor: pointer;

    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background-color .16s ease,
        transform .16s ease;
}


.role-workspace
.message-list
.secretary-booking-card
.secretary-future-booking-panel
select[data-future-doctor]:hover:not(:disabled),
.role-workspace
.message-list
.secretary-booking-card
.secretary-future-booking-panel
select[data-future-procedure]:hover:not(:disabled) {
    border-color:
        rgba(111, 70, 160, .55);

    background-color:
        #fdfcff;
}


.role-workspace
.message-list
.secretary-booking-card
.secretary-future-booking-panel
select[data-future-doctor]:focus,
.role-workspace
.message-list
.secretary-booking-card
.secretary-future-booking-panel
select[data-future-procedure]:focus {
    outline: none;

    border-color:
        rgba(111, 70, 160, .82);

    box-shadow:
        0 0 0 3px rgba(111, 70, 160, .10),
        0 6px 18px rgba(77, 46, 108, .07);
}


.role-workspace
.message-list
.secretary-booking-card
.secretary-future-booking-panel
select[data-future-doctor]:disabled,
.role-workspace
.message-list
.secretary-booking-card
.secretary-future-booking-panel
select[data-future-procedure]:disabled {
    color: #94909b;

    border-color:
        rgba(140, 140, 155, .18);

    background-color:
        #f6f5f8;

    box-shadow: none;

    cursor: not-allowed;

    opacity: .76;
}


.role-workspace
.message-list
.secretary-booking-card
.secretary-future-booking-panel
select[data-future-doctor]
option,
.role-workspace
.message-list
.secretary-booking-card
.secretary-future-booking-panel
select[data-future-procedure]
option {
    padding: 12px 14px;

    background-color: #ffffff;

    color: #25212d;

    font-family: inherit;
    font-size: .94rem;
    font-weight: 500;

    direction: rtl;
}


.role-workspace
.message-list
.secretary-booking-card
.secretary-future-booking-panel
select[data-future-doctor]
option:checked,
.role-workspace
.message-list
.secretary-booking-card
.secretary-future-booking-panel
select[data-future-procedure]
option:checked {
    background-color: #f1eafb;
    color: #6940a0;
    font-weight: 750;
}


.role-workspace
.message-list
.secretary-booking-card
.secretary-future-booking-panel
select[data-future-doctor]
option[value=""],
.role-workspace
.message-list
.secretary-booking-card
.secretary-future-booking-panel
select[data-future-procedure]
option[value=""] {
    color: #77727f;
}


.role-workspace
.message-list
.secretary-booking-card
.secretary-future-booking-panel {
    gap: 11px;

    padding: 13px;

    border:
        1px solid
        rgba(111, 70, 160, .11);

    background:
        linear-gradient(
            180deg,
            rgba(250, 248, 253, .98),
            rgba(255, 255, 255, .99)
        );

    box-shadow:
        0 5px 20px rgba(54, 37, 74, .035);
}


@media (max-width: 420px) {

    .role-workspace
    .message-list
    .secretary-booking-card
    .secretary-future-booking-panel
    select[data-future-doctor],
    .role-workspace
    .message-list
    .secretary-booking-card
    .secretary-future-booking-panel
    select[data-future-procedure] {
        min-height: 50px;
        padding-inline: 13px;
        border-radius: 13px;
        font-size: .92rem;
    }

}


/* SAL_CUSTOM_SELECT_UI_2026_09_26 */

.secretary-future-booking-panel
.sal-native-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 1px !important;
    min-height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


.secretary-future-booking-panel
.sal-select {
    position: relative;
    width: 100%;
    min-width: 0;
}


.secretary-future-booking-panel
.sal-select-trigger {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    box-sizing: border-box;

    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin: 0;
    padding: 10px 14px;

    border: 1px solid rgba(111, 70, 160, .24);
    border-radius: 14px;

    background: #fff;

    color: #292431;

    font: inherit;
    font-size: .94rem;
    font-weight: 650;

    direction: rtl;
    text-align: right;

    cursor: pointer;

    box-shadow:
        0 2px 8px rgba(57, 35, 78, .04);

    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background-color .16s ease;
}


.secretary-future-booking-panel
.sal-select-trigger:hover:not(:disabled) {
    border-color:
        rgba(111, 70, 160, .5);

    background:
        #fdfcff;
}


.secretary-future-booking-panel
.sal-select-trigger:focus-visible {
    outline: none;

    border-color:
        rgba(111, 70, 160, .82);

    box-shadow:
        0 0 0 3px rgba(111, 70, 160, .11),
        0 4px 14px rgba(57, 35, 78, .05);
}


.secretary-future-booking-panel
.sal-select-trigger:disabled {
    border-color:
        rgba(130, 130, 145, .16);

    background:
        #f5f4f7;

    color:
        #9b97a0;

    cursor:
        not-allowed;

    box-shadow:
        none;
}


.secretary-future-booking-panel
.sal-select-trigger.is-placeholder
.sal-select-value {
    color:
        #77727f;

    font-weight:
        550;
}


.secretary-future-booking-panel
.sal-select-value {
    display: block;
    min-width: 0;
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.secretary-future-booking-panel
.sal-select-chevron {
    display: inline-flex;
    flex: 0 0 auto;

    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    color:
        #744bad;

    font-size:
        1.15rem;

    line-height:
        1;

    transform:
        translateY(-1px);

    transition:
        transform .16s ease;
}


.secretary-future-booking-panel
.sal-select.is-open
.sal-select-chevron {
    transform:
        rotate(180deg)
        translateY(1px);
}


.secretary-future-booking-panel
.sal-select-list {
    position: absolute;

    z-index: 60;

    top: calc(100% + 7px);
    right: 0;
    left: 0;

    width: 100%;
    max-height: 240px;

    box-sizing: border-box;

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

    padding: 6px;

    border:
        1px solid
        rgba(111, 70, 160, .16);

    border-radius:
        14px;

    background:
        #fff;

    box-shadow:
        0 16px 40px rgba(35, 20, 49, .15),
        0 3px 10px rgba(35, 20, 49, .06);

    direction:
        rtl;
}


.secretary-future-booking-panel
.sal-select-list[hidden] {
    display: none !important;
}


.secretary-future-booking-panel
.sal-select-option {
    display: flex;

    width: 100%;
    min-height: 44px;

    align-items: center;

    padding:
        9px 11px;

    border:
        0;

    border-radius:
        10px;

    background:
        transparent;

    color:
        #292431;

    font:
        inherit;

    font-size:
        .92rem;

    font-weight:
        550;

    direction:
        rtl;

    text-align:
        right;

    cursor:
        pointer;
}


.secretary-future-booking-panel
.sal-select-option:hover,
.secretary-future-booking-panel
.sal-select-option:focus-visible {
    outline:
        none;

    background:
        #f5effb;

    color:
        #68409b;
}


.secretary-future-booking-panel
.sal-select-option.is-selected {
    background:
        #efe5fa;

    color:
        #654096;

    font-weight:
        800;
}


.secretary-future-booking-panel
.sal-select-empty {
    padding:
        12px;

    color:
        #88828f;

    font-size:
        .87rem;

    text-align:
        center;
}


@media (max-width: 420px) {

    .secretary-future-booking-panel
    .sal-select-trigger {
        min-height:
            48px;

        padding-inline:
            12px;

        border-radius:
            13px;
    }


    .secretary-future-booking-panel
    .sal-select-list {
        max-height:
            220px;

        border-radius:
            13px;
    }


    .secretary-future-booking-panel
    .sal-select-option {
        min-height:
            46px;
    }

}


/* SAL_SECRETARY_FUTURE_CALENDAR_UI_2026_09_26 */

.message-list .secretary-future-booking-slots {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 12px;
    direction: rtl;
}

.message-list .secretary-future-booking-slots[hidden] {
    display: none !important;
}

.message-list [data-future-booking-ready].is-error {
    color: #a61b36;
    font-weight: 700;
}

.message-list .secretary-future-nearest-title,
.message-list .secretary-future-times-title {
    display: block;
    margin: 0;
    line-height: 1.7;
}

.message-list .secretary-future-nearest,
.message-list .secretary-future-times-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.message-list .secretary-future-slot-button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 8px 10px;
    white-space: normal;
    line-height: 1.55;
    border-radius: 12px;
}

.message-list .secretary-future-slot-button.is-selected {
    border-color: rgba(118, 75, 162, .72);
    background: rgba(118, 75, 162, .13);
    box-shadow: 0 0 0 2px rgba(118, 75, 162, .08);
}

.message-list .secretary-future-selected-preview {
    padding: 10px 12px;
    border: 1px solid rgba(118, 75, 162, .18);
    border-radius: 12px;
    background: rgba(118, 75, 162, .06);
    font-weight: 800;
    line-height: 1.7;
}

.message-list .secretary-future-full-calendar {
    width: fit-content;
    max-width: 100%;
    margin: 0;
    justify-self: start;
}

.message-list .secretary-future-calendar {
    width: 100%;
    min-width: 0;
}

.message-list .secretary-future-calendar[hidden] {
    display: none !important;
}

.message-list .secretary-future-calendar-card {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid rgba(120, 90, 180, .24);
    border-radius: 14px;
    direction: rtl;
}

.message-list .secretary-future-calendar-header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 6px;
}

.message-list .secretary-future-calendar-header strong {
    text-align: center;
    line-height: 1.5;
}

.message-list .secretary-future-calendar-nav {
    width: 42px;
    min-width: 42px;
    min-height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 11px;
}

.message-list .secretary-future-calendar-weekdays,
.message-list .secretary-future-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.message-list .secretary-future-calendar-weekdays span {
    padding-block: 3px;
    text-align: center;
    font-size: .78rem;
    font-weight: 800;
    opacity: .72;
}

.message-list .secretary-future-calendar-spacer {
    min-height: 39px;
}

.message-list .secretary-future-calendar-day {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    min-height: 39px;
    margin: 0;
    padding: 4px 2px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(118, 75, 162, .16);
    border-radius: 10px;
    background: rgba(255, 255, 255, .82);
    color: inherit;
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
}

.message-list .secretary-future-calendar-day:disabled {
    opacity: .27;
    cursor: default;
}

.message-list .secretary-future-calendar-day.is-available {
    font-weight: 800;
}

.message-list .secretary-future-calendar-day.is-active-day {
    border-color: rgba(118, 75, 162, .72);
    background: rgba(118, 75, 162, .13);
}

.message-list .secretary-future-calendar-hint {
    display: block;
    margin: 0;
    opacity: .7;
}

.message-list .secretary-future-times {
    display: grid;
    gap: 9px;
    width: 100%;
    min-width: 0;
}


@media (max-width: 420px) {

    .message-list .secretary-future-booking-panel {
        padding: 10px;
    }

    .message-list .secretary-future-nearest,
    .message-list .secretary-future-times-grid {
        grid-template-columns: 1fr;
    }

    .message-list .secretary-future-calendar-card {
        padding: 8px;
    }

    .message-list .secretary-future-calendar-weekdays,
    .message-list .secretary-future-calendar-grid {
        gap: 3px;
    }

    .message-list .secretary-future-calendar-day {
        min-height: 37px;
        font-size: .78rem;
    }
}


/* SAL_SECRETARY_FUTURE_CONFIRM_HOLD_UI_2026_09_26 */

.message-list .secretary-future-hold-confirmation {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 9px;
    padding: 11px;
    box-sizing: border-box;
    border: 1px solid rgba(118, 75, 162, .18);
    border-radius: 14px;
    background: rgba(118, 75, 162, .05);
    direction: rtl;
}

.message-list .secretary-future-hold-confirmation small {
    display: block;
    width: 100%;
    margin: 0;
    line-height: 1.7;
}

.message-list .secretary-future-confirm-button {
    width: 100%;
    min-width: 0;
    min-height: 45px;
    margin: 0;
    border-radius: 13px;
}

.message-list .secretary-future-awaiting-payment {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 6px 11px;
    align-items: center;
    border: 1px solid rgba(118, 75, 162, .24);
    border-radius: 999px;
    background: rgba(118, 75, 162, .11);
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.5;
}

.message-list .secretary-future-hold-error {
    min-height: 0;
    color: #a61b36;
    font-weight: 700;
}

.message-list .secretary-future-hold-error:empty {
    display: none;
}
/* SAL_PUBLIC_NAV_DESKTOP_ALIGNMENT_2026_10_04 */
@media (min-width: 761px) {
    .public-header nav.desktop-nav.shell {
        direction: rtl !important;
        justify-content: flex-start !important;
        gap: .6rem !important;
    }
}