.permission-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;background:#161616;border:1px solid #292929;padding:14px;border-radius:8px;max-height:250px;overflow:auto}.permission-grid label{margin:0;padding:4px;font-size:11px}.permission-grid input{accent-color:#10b981}.color-tag{color:var(--tag-color);background:color-mix(in srgb,var(--tag-color) 14%,transparent);padding:4px 9px;border-radius:7px;font-size:11px}.color-dot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle;margin-right:6px}.sso-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}.provider-card{display:flex;align-items:center;gap:15px;border:1px solid #292929;background:#151515;border-radius:10px;padding:20px}.provider-card h3{margin:0;font-size:14px}.provider-card p{font-size:11px;margin:6px 0}.provider-card button{margin-left:auto;font-size:11px;white-space:nowrap}.provider-badge{width:38px;height:38px;border-radius:9px;background:#242b3b;color:#91baff;display:grid;place-items:center;font-size:20px}.code-box{background:#181818;border:1px solid #303030;border-radius:8px;padding:15px;color:#a5d6bc;font:11px/1.7 Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.api-endpoints{display:grid;gap:12px;margin:20px 0}.api-endpoints>div{display:flex;align-items:center;gap:13px;flex-wrap:wrap}.api-endpoints code{font-size:12px;color:#bebebe;overflow-wrap:anywhere}.api-endpoints .hint{margin-left:auto}.provider-card .pill{margin-top:4px}.table-wrap td .pill{margin:2px}input[type=color]{height:40px;padding:5px}.table-wrap td{max-width:320px}#generated-key{font-family:Consolas,monospace}
@media(max-width:1050px){.sso-grid{grid-template-columns:1fr}.provider-card{padding:16px}}
@media(max-width:760px){.permission-grid{grid-template-columns:1fr}.api-endpoints .hint{margin-left:0}.provider-card{gap:10px}.provider-card button{padding:8px}.provider-badge{width:30px;height:30px}.code-box{font-size:10px}}

[hidden]{display:none!important}
.profile #sign-out{margin-left:auto;font-size:11px}
@media(max-width:760px){.sidebar nav .settings-nav{display:contents}.sidebar nav .settings-subnav.show{display:contents}.sidebar nav{align-items:center;max-height:52px;overflow-x:auto;overflow-y:hidden}.sidebar nav .settings-nav>button{width:auto}.profile:has(#sign-out){display:flex;padding:8px 6px}.settings-mode .settings-nav{padding:0}}
.attachment-button{display:block;max-width:100%;overflow-wrap:anywhere;margin-bottom:8px;text-align:left}.message-search{padding:8px 12px;margin:0;border-bottom:1px solid #242424}.message-search input{min-width:0;flex:1}.compose-top{flex-wrap:wrap}.chat:has(.message-search) .messages{height:calc(100vh - 260px)}

#notification-bell.deadline-alarm { color:#ff7979; border:1px solid #bc5050; }
.notification-list { display:grid; gap:8px; margin-top:20px; max-height:380px; overflow:auto; }
.notification-item { display:grid; text-align:left; gap:4px; padding:12px; width:100%; }
.notification-item.unread { border-left:3px solid #08b589; }
.notification-item.deadline-alarm { border-left:3px solid #ff6b6b; background:#371919; }
.notification-item small { color:#999; }
#deadline-form { display:grid; gap:12px; margin-top:18px; }

#notification-banner { display:flex; align-items:center; gap:10px; padding:8px 18px; min-height:48px; background:#250b3d; border-bottom:1px solid #48205f; color:#f0e8ff; font-size:12px; }
.notification-banner-icon { width:18px; height:18px; color:#ce8aff; flex-shrink:0; }
#notification-banner-message { flex:1; line-height:1.5; }
#notification-banner-enable { padding:7px 12px; white-space:nowrap; font-size:12px; border-radius:4px; }
#notification-banner-close { background:transparent; border:0; color:#d6b1ef; font-size:22px; padding:0 6px; line-height:1; }
@media(max-width:760px){#notification-banner { flex-wrap:wrap; padding:10px 12px; }#notification-banner-message { flex-basis:calc(100% - 60px); }#notification-banner-enable { margin-left:28px; }#notification-banner-close { margin-left:auto; }}

#notification-cards { position:fixed; top:76px; right:20px; z-index:120; display:grid; gap:10px; width:min(445px,calc(100vw - 32px)); pointer-events:none; }
.incoming-alert { pointer-events:auto; position:relative; display:flex; align-items:center; gap:11px; padding:23px 20px 19px 16px; border:1px solid #544500; border-radius:11px; box-shadow:0 8px 24px #0005; }
.incoming-alert.sla-critical { background:#242300; color:#ffd747; }
.incoming-alert.message-alert { background:#082c25; color:#8de6c8; border-color:#1f6956; }
.alert-symbol { font-size:24px; flex-shrink:0; }
.alert-copy { flex:1; min-width:0; display:grid; gap:4px; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.alert-copy strong { font-size:14px; font-weight:700; }
.alert-view { background:#fafafa; color:#111; border:0; padding:7px 12px; border-radius:5px; flex-shrink:0; }
.alert-view:hover { background:#e5e5e5; }
.alert-dismiss { position:absolute; top:3px; right:6px; padding:1px 4px; border:0; background:transparent; color:inherit; font-size:17px; }
@media(max-width:760px){#notification-cards { top:120px; right:12px; width:calc(100vw - 24px); }.incoming-alert { padding:19px 14px 15px; }}

.inbox-account-bar { display:flex; gap:12px; align-items:center; padding:12px 18px; border-bottom:1px solid #262626; background:#111; }
.inbox-account-bar>div { flex:1; }.inbox-account-bar small { display:block; color:#999; margin-top:4px; }.inbox-source-number { color:#9adac6; margin-left:10px; }
#number-inboxes .number-inbox-link { padding-left:22px; height:auto; min-height:45px; }#number-inboxes .number-inbox-link>svg { width:16px; height:16px; flex-shrink:0; }#number-inboxes .number-inbox-link span { display:block; text-align:left; min-width:0; overflow-wrap:anywhere; }#number-inboxes small { display:block; font-size:10px; color:#8e9c97; }
@media(max-width:760px){.inbox-account-bar { flex-wrap:wrap; }.inbox-account-bar>div{flex-basis:100%;}#number-inboxes{display:contents;}#number-inboxes .number-inbox-link{padding:8px;}}

.inbox-account-bar { display:grid; grid-template-columns:minmax(220px,1fr) minmax(240px,420px) auto auto; gap:12px; min-height:82px; }
.inbox-account-bar>div { min-width:0; }.inbox-account-bar strong { display:block; white-space:nowrap; font-size:16px; }.inbox-account-bar small { line-height:1.5; font-size:12px; }
.inbox-account-bar select { width:100%; min-width:0; }.inbox-account-bar>button { white-space:nowrap; min-height:40px; }
@media(max-width:1200px){.inbox-account-bar { grid-template-columns:minmax(200px,1fr) minmax(210px,1fr); }.inbox-account-bar>button { justify-self:start; }}
@media(max-width:760px){.inbox-account-bar { grid-template-columns:1fr 1fr; padding:12px; }.inbox-account-bar>div,.inbox-account-bar select { grid-column:1/-1; }.inbox-account-bar>button { width:100%; font-size:11px; }.inbox-account-bar strong { white-space:normal; }}

#custom-widget-form .field { margin-top:16px; }#custom-widget-form textarea { min-height:90px; }#custom-widget-form label { font-weight:600; }
.widget-filter-heading,.widget-switches { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0; }.widget-filter-heading strong { color:#bbb; }.widget-filter-row { display:grid; grid-template-columns:1fr auto 1fr auto; align-items:center; gap:8px; margin-bottom:8px; }.widget-filter-row select{min-width:0;}.widget-switches input{accent-color:#0eaa78;}.custom-widget-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-bottom:22px}.custom-widget-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.custom-widget-heading strong{font-size:15px!important}.custom-widget-heading button{padding:3px 7px}.custom-widget-card{border-top:3px solid var(--widget-color)}.custom-widget-card p{font-size:12px;color:#999}.custom-widget-card .custom-widget-value{color:var(--widget-color);font-size:32px}.custom-widget-card small{display:block;margin-top:8px}.custom-widget-chart{width:100%;height:110px}#widget-error{color:#ff8d8d;font-size:12px}
@media(max-width:760px){.widget-switches{flex-wrap:wrap}.widget-filter-row{grid-template-columns:1fr auto 1fr auto;}}

#modal:has(#custom-widget-form) { width:min(620px,calc(100vw - 32px)); }#custom-widget-form .field { margin:10px 0; }#custom-widget-form textarea { min-height:68px; }#custom-widget-form>.hint { margin:8px 0; font-size:11px; }#custom-widget-form .form-actions { margin-top:12px; }
.general-settings-page{max-width:760px;margin:0 auto;padding-bottom:28px}.general-tabbar{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:#131313;border:1px solid #292929;border-radius:11px;margin-bottom:22px}.general-tabbar button{border:0;background:transparent;color:#939393;min-height:34px;font-weight:600}.general-tabbar button.active{background:#262626;color:#fff}.general-settings-page .panel{padding:24px;margin-bottom:20px;border-radius:12px}.general-settings-page .panel>p{margin:5px 0 22px;color:#8c8c8c;font-size:13px}.general-settings-page h2{font-size:18px;margin:0}.general-settings-page .field{margin-top:20px}.general-settings-page .form-grid .field{min-width:0}.general-settings-page fieldset{border:0;padding:0;margin:0;min-width:0}.general-settings-page fieldset:disabled{opacity:.55}.general-settings-page .field select{width:100%}.general-settings-page textarea{min-height:100px}.general-toggle{display:flex;align-items:center;gap:12px;border-top:1px solid #272727;padding:20px 0;cursor:pointer;position:relative}.general-toggle>span:first-child{flex:1}.general-toggle strong{display:block;font-size:14px}.general-toggle small{display:block;color:#8b8b8b;font-size:12px;line-height:1.5;margin-top:4px}.general-toggle input{position:absolute;right:0;opacity:0;width:36px;height:24px}.general-switch{width:32px;height:18px;border-radius:20px;background:#292929;position:relative;flex-shrink:0}.general-switch:after{content:'';position:absolute;width:14px;height:14px;top:2px;left:2px;border-radius:50%;background:#090909;transition:transform .15s}.general-toggle input:checked+.general-switch{background:#0cbb86}.general-toggle input:checked+.general-switch:after{transform:translateX(14px)}.general-toggle input:focus-visible+.general-switch{outline:2px solid #fff;outline-offset:3px}.general-toggle:has(input:disabled){opacity:.55;cursor:default}.general-activity{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid #252525}.general-activity small{display:block;color:#8b8b8b;margin-top:4px}.general-back{margin-bottom:20px}@media(max-width:650px){.general-settings-page .form-grid{grid-template-columns:1fr}.general-settings-page .panel{padding:18px}.general-tabbar button{font-size:12px}.general-activity{align-items:flex-start;flex-wrap:wrap}}
.chatbot-settings-page .general-tabbar{grid-template-columns:repeat(5,1fr)}.chatbot-settings-page textarea{background:#0a0a0a;min-height:100px}.chatbot-button-head{margin:10px 0;font-size:12px}.chatbot-button-head button{font-size:12px;padding:4px 10px}.chatbot-button-row{display:flex;align-items:center;gap:8px;border:1px solid #272727;border-radius:9px;padding:8px;margin:8px 0}.chatbot-button-row input{min-width:0;flex:1}.chatbot-button-row button{padding:4px 8px;border:0;background:transparent}.chatbot-save-error{color:#fb7185}@media(max-width:600px){.chatbot-settings-page .general-tabbar{gap:0}.chatbot-settings-page .general-tabbar button{font-size:11px;padding:8px 2px}.chatbot-button-row{flex-wrap:wrap}.chatbot-button-row [data-url]{flex-basis:100%}}
.account-facebook{background:#0bac78;border:1px solid #0bac78;color:white;font-size:12px!important;white-space:nowrap}.account-facebook.page-facebook{background:#1877f2;border-color:#1877f2}.accounts-panel .table-wrap{margin-top:20px}.accounts-panel td code{font-size:11px;overflow-wrap:anywhere}.accounts-panel .person{min-width:180px}.accounts-panel .hint{margin-top:22px}.accounts-panel h2{font-size:24px}.accounts-panel th{white-space:nowrap}
#number-inboxes .number-inbox-link>span{width:auto!important;flex:1;font-size:12px;line-height:1.4;color:inherit;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#number-inboxes .number-inbox-link small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#header-actions button.account-facebook{background:#0bac78!important;border-color:#0bac78!important;color:#fff!important}#header-actions button.page-facebook{background:#1877f2!important;border-color:#1877f2!important}.accounts-panel table{min-width:1100px}.accounts-panel td code{white-space:nowrap;overflow-wrap:normal}
/* Wasel joyful palette: shared surfaces, readable controls, colorful navigation. */
:root{--green:#0d9b83;--muted:#64748b;--border:#dfe7ef;--mint:#e5f8f2;color-scheme:light;color:#26344c;background:#f5f8fc}body{background:radial-gradient(ellipse at 95% 5%,#e8e9ff 0,transparent 40%),radial-gradient(ellipse at 35% 90%,#ddf7ee 0,transparent 45%),#f5f8fc;color:#26344c}main{background:transparent}.sidebar{background:#fff;border-color:#e2eaf2;box-shadow:5px 0 24px #53638108}.brand,.brand-label{color:#203752}.brand-icon{background:linear-gradient(135deg,#11bd99,#369ddc);box-shadow:0 5px 12px #12ac9230}.nav-label{color:#8996ac}.sidebar nav button{color:#586b83;background:transparent;border-radius:10px}.sidebar nav button:hover{background:#f0f6fc;color:#245682}.sidebar nav button.active{background:linear-gradient(110deg,#dff8ee,#e8f5ff);color:#087e68;font-weight:650}.sidebar nav button span{color:inherit}.sidebar nav button[data-page=dashboard] .icon{color:#7c5bd6}.sidebar nav button[data-page=inbox] .icon,.sidebar nav button[data-page=accounts] .icon{color:#0ca888}.sidebar nav button[data-page=campaigns] .icon{color:#e46b8b}.sidebar nav button[data-page=bot] .icon,.sidebar nav button[data-page=bot-settings] .icon{color:#9263df}.sidebar nav button[data-page=templates] .icon,.sidebar nav button[data-page=contacts] .icon{color:#439be1}.sidebar nav button[data-page=departments] .icon,.sidebar nav button[data-page=team] .icon{color:#d99029}.sidebar nav button[data-page=roles] .icon,.sidebar nav button[data-page=sso] .icon{color:#7480d9}.sidebar nav button[data-page=tags] .icon{color:#e47791}.sidebar nav button[data-page=webhooks] .icon{color:#159cbb}.sidebar nav button[data-page=flows] .icon{color:#8a66d6}nav i{background:#e0f6ef;color:#087e68}.profile{border-color:#e4ebf3;color:#26344c}.profile small,#number-inboxes small{color:#64748b}.collapse-button{color:#7a8aa1}.page-header,.topbar{background:#ffffffcc;border-color:#e0e8f1;backdrop-filter:blur(12px)}h1,h2,h3,.page-header h1,.panel h2,.stat strong,.person strong,.list-heading h2,.modal-head h2{color:#253550}.page-header p,.hint,.panel>p,.connection-notice,.config-grid h3,.config-grid p,.general-settings-page .panel>p,.general-toggle small,.general-activity small,.detail-name p,.details label{color:#64748b}.header-icon{border-radius:12px;box-shadow:0 5px 12px #0aab7720}.panel,.stat,.editor-panel,.feature-grid button,.provider-card{background:#fff;border:1px solid #e2eaf2;box-shadow:0 6px 22px #39567b07;border-radius:15px}.stats .stat:nth-child(4n+1){background:linear-gradient(135deg,#f5efff,#fff);border-color:#e9dcfc}.stats .stat:nth-child(4n+2){background:linear-gradient(135deg,#e8faf3,#fff);border-color:#cfeee2}.stats .stat:nth-child(4n+3){background:linear-gradient(135deg,#eaf5ff,#fff);border-color:#d8eafb}.stats .stat:nth-child(4n+4){background:linear-gradient(135deg,#fff3e3,#fff);border-color:#f7e4c8}.stat-top,.stat small,.recent-body small,.table-secondary{color:#64748b}.stat-icon{background:#e9f8f2;color:#08997d}.avatar{background:linear-gradient(135deg,#12bca0,#36a8c1);color:#fff}.pill{background:#edf2fb;color:#526b91}.pill.open,.pill.Active,.pill.Available{background:#dcf7eb;color:#087a57}.pill.closed{background:#eff2f7;color:#66768d}.pill.Draft{background:#efe7ff;color:#7d50b0}.pill.High,.pill.Urgent{background:#fff0d6;color:#946011}button,input,select,textarea,#header-actions button,#header-actions select{background:#fff;color:#334761;border-color:#dbe5ef}button:hover,#header-actions button:hover{background:#edf6fc;border-color:#bfd9eb}.primary,#header-actions button.primary{background:linear-gradient(135deg,#09ac8a,#119a91);border-color:#0b9b82;color:#fff;box-shadow:0 4px 10px #0b9b8220}.primary:hover{background:#078d77;color:#fff}input,select,textarea{background:#f8fafc;color:#26344c;border-radius:10px}input::placeholder,textarea::placeholder{color:#8998ab}input:focus,textarea:focus,select:focus{outline:2px solid #26b99c66;border-color:#16a98c}input[type=checkbox]{accent-color:#0cab8b}label,.field label{color:#41536b}.table-wrap{border-color:#e3ebf3}th{background:#f7f9fd;color:#71819a;border-color:#e4ebf3}td{color:#334761;border-color:#e9eff5}tbody tr:nth-child(even){background:#fafcff}tbody tr:hover{background:#eff8fc}.link-button{background:transparent;color:#3187b1}.danger-text,.error{color:#d3536e}.recent-row,.detail-name,.chat-head,.compose-wrap,.general-activity,.general-toggle{border-color:#e4ebf3}.general-tabbar,.tabs{background:#edf2f9;border-color:#e0e7f0}.general-tabbar button,.tabs button{color:#6c7b91}.general-tabbar button.active,.tabs button.active{background:#fff;color:#0b937b;box-shadow:0 2px 8px #2946600d}.general-tabbar button{display:flex;align-items:center;justify-content:center;gap:7px}.general-tabbar .icon{width:17px;height:17px;flex-shrink:0}.general-switch{background:#dce4ef}.general-switch:after{background:#fff;box-shadow:0 1px 4px #223b5520}.general-toggle input:checked+.general-switch{background:#12b997}.general-toggle input:focus-visible+.general-switch{outline-color:#178cb1}.chatbot-settings-page textarea{background:#f7fafc}.chatbot-button-row{background:#f8fbff;border-color:#e0e8f2}.chatbot-save-error{color:#ce4567}.chat,.chat-head,.compose-wrap,.inbox-list,.details,.inbox-account-bar{background:#fff;color:#26344c;border-color:#e0e8f1}.messages{background:radial-gradient(#6ea49919 1px,transparent 1px),#f1f8f6;background-size:18px 18px}.bubble{background:#fff;color:#334761;border-color:#dbe8e4;box-shadow:0 2px 6px #314c4708}.bubble.out{background:#dff8ed;color:#23564a;border-color:#bde8d8}.bubble small{color:#65897e}.contact{background:#fff;color:#334761;border-color:#e6edf3}.contact:hover,.contact.selected{background:#e8f8f1}.contact p,.contact small,.inbox-source-number{color:#6b7d92}.note{background:#fff5dc;border-color:#f2e0b9;color:#7f652f}.note small{color:#a18754}.inbox-account-bar strong{color:#253550}.rule-card,.switch-row,.test-chat,.offline-box,.day-picker label{background:#f5f9fc;border-color:#e0e8f1;color:#334761}.test-chat p{background:#dff8ee;color:#215d4d}.progress{background:#e8edf5}.progress i{background:linear-gradient(90deg,#15bc99,#64badf)}.step-number{background:#e0f7ee;color:#099579}.empty,.empty strong{color:#71839b}.empty-icon{color:#7fbcb4;background:#eef9f5}.feature-grid h2,.editor-panel h2,.node-list strong,.flow-node p{color:#334761}.feature-grid p,.node-list small{color:#72839b}.flow-canvas{background-color:#f5f8fd;background-image:radial-gradient(#bdcadb 1px,transparent 1px)}.flow-node{background:white;border-color:#dce6f1}.flow-node.active{border-color:#14ac8e}.node-list button.active{background:#e5f8f0;border-color:#12af8d}.editor-test .test-message{background:#e0f6ec;color:#285c4c}.code-box,pre{background:#f3f7fc!important;color:#405b79!important;border-color:#dce7f1!important}dialog{background:#fff;color:#334761;border-color:#dce7f0;box-shadow:0 24px 80px #233f5730}dialog::backdrop{background:#16314855;backdrop-filter:blur(3px)}#toast{background:#fff;border-color:#b8e7d7;color:#176b55;box-shadow:0 8px 25px #183f5320}#notification-banner{background:#eee6fc;color:#6945a2;border-color:#ded0f3}.incoming-alert{background:#fff;color:#334761;border-color:#dce7f1;box-shadow:0 10px 30px #284b631a}.incoming-alert.sla-critical{background:#fff5d7;color:#8d650b;border-color:#f0d98d}.incoming-alert .alert-view{background:#fff;color:#5c563e;border-color:#e7d9b5}.notification-item{background:#f8fbff;color:#334761;border-color:#e0e9f3}.notification-item.unread{background:#e8f8f0}.deadline-alarm{color:#be5b39!important;background:#fff1df!important;border-color:#efc79b!important}.column{background:linear-gradient(#68c5dc,#0fb897)}.legend{color:#71839b}.custom-widget-card .custom-widget-value{color:#253550}a{color:#118e9d}@media(prefers-reduced-motion:no-preference){button,.panel,.stat{transition:background .18s,border-color .18s,box-shadow .18s}button:hover{box-shadow:0 3px 10px #365b7410}}
#content h2,.contact strong,.contact-content strong,.recent-body strong{color:#283c58!important}.quick-grid button{background:#eefaf5;color:#236552;border-color:#d8eee4}.quick-grid button:nth-child(2){background:#fff4e4;color:#986325;border-color:#f1dfc4}.quick-grid button:nth-child(3){background:#ebf5ff;color:#376998;border-color:#d3e6f6}.quick-grid button:nth-child(4){background:#f4edff;color:#7c54aa;border-color:#e5d9f7}.quick-grid button:hover{filter:brightness(.98)}.stats .stat:nth-child(2) .stat-icon{background:#d6f3e5!important;color:#078965!important}.stats .stat:nth-child(3) .stat-icon{background:#eadefa!important;color:#8755bd!important}.stats .stat:nth-child(4) .stat-icon{background:#ffe5bc!important;color:#bb791d!important}.brand,.settings-nav,.settings-subnav,.sidebar nav,.message-search{border-color:#e0e8f1!important}.chat-head,.inbox-account-bar,.message-search{border-color:#e0e8f1!important}.quick-grid .icon{width:24px;height:24px}.quick-grid button>svg{border-radius:12px}.contact.selected strong{color:#166d59!important}
.quick-grid button .icon{width:42px!important;height:42px!important;padding:9px!important;stroke:#fff!important;color:#fff!important;border-radius:12px!important}
/* Keep primary table text readable on the light theme. */
.table-wrap td strong,table td strong,table td b,.kanban-card strong{color:#263c58!important;font-weight:650}.table-wrap td .table-secondary{color:#60738c!important}.table-wrap th{color:#5c708c!important}
/* Settings directories share the light workspace palette. */
.settings-directory .table-wrap,#audit-records,.sso-provider-grid{margin-top:22px}.narrow-directory,.sso-directory{max-width:1000px;margin:0 auto}.sso-information{display:flex;gap:14px;padding:22px;border:1px solid #b8d5ff;border-radius:12px;background:#eef5ff;color:#315d92}.sso-information>.icon{width:24px;height:24px;flex-shrink:0}.sso-information p{margin:7px 0 0;line-height:1.6}.sso-provider-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.sso-provider{padding:22px!important}.sso-provider-heading{display:flex;gap:13px;align-items:center}.sso-provider-heading h3{margin:0 0 5px;color:#263c58}.sso-provider-heading p{margin:0;font-size:12px;line-height:1.5}.sso-provider-logo{width:42px;height:42px;display:grid;place-items:center;flex-shrink:0;border-radius:12px;background:#e8f1ff;color:#3d75cb;font-weight:700}.sso-provider:nth-child(2) .sso-provider-logo{background:#fff0df;color:#e68c31}.sso-provider:nth-child(3) .sso-provider-logo{background:#eee8ff;color:#8458c8}.sso-provider:nth-child(4) .sso-provider-logo{background:#e4f1ff;color:#1877f2}.sso-provider:nth-child(5) .sso-provider-logo{background:#def8ef;color:#0b9b79}.sso-provider>button{width:100%;margin-top:20px;display:flex;justify-content:center;gap:8px}.sso-provider button .icon,.settings-directory button .icon{width:16px;height:16px}.response-preview{max-width:500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#audit-search{max-width:320px;margin:15px 0 0}@media(max-width:1000px){.sso-provider-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.sso-provider-grid{grid-template-columns:1fr}}
.action-icon-picker{display:flex;flex-wrap:wrap;gap:8px}.action-icon-picker label{position:relative;display:grid;place-items:center;width:40px;height:40px;border:1px solid #dce5ef;border-radius:10px;cursor:pointer}.action-icon-picker input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer}.action-icon-picker label:has(input:checked){border-color:#08a784;background:#def8ef;color:#078b72}.action-icon-picker .icon{width:20px;height:20px}.webhook-event-groups fieldset{border:1px solid #e0e8f0;border-radius:12px;padding:18px;margin:15px 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}.webhook-event-groups legend{font-weight:650;padding:0 8px;color:#354d6b}.webhook-event-groups .check-label{align-items:flex-start}.webhook-event-groups small{display:block;font-size:12px;color:#697b92;line-height:1.5;margin-top:5px}.webhook-event-groups input{width:16px;flex-shrink:0}@media(max-width:600px){.webhook-event-groups fieldset{grid-template-columns:1fr}}
.permission-grid{background:#f5f8fc!important;border-color:#dce6f0!important;color:#263c58!important}.permission-grid .check-label{color:#354d6b!important;border-radius:8px;padding:8px;line-height:1.5}.permission-grid .check-label:hover{background:#eaf4ff}.permission-grid .check-label:has(input:checked){background:#def7ee;color:#087d66!important}.permission-grid input[type=checkbox]{accent-color:#0d9b83;flex-shrink:0}

/* Shared inbox count matches the light mint navigation. */
.sidebar nav #inbox-count{background:#c8f1e1!important;color:#087b60!important;border:1px solid #a6e5cd;border-radius:7px;font-weight:700;min-width:22px;text-align:center}

/* Remove legacy dark backgrounds from shared tab controls. */
.tabs button{background:#edf2f9!important;color:#526780!important;border-color:transparent!important}.tabs button:hover{background:#e0edf8!important;color:#285c85!important}.tabs button.active{background:#fff!important;color:#078a72!important;border-color:#c9e8de!important;box-shadow:0 2px 8px #2946600d}.tabs button:focus-visible{outline:2px solid #0d9b83;outline-offset:2px}

/* Keep the desktop inbox inside the viewport with independent scrolling. */
@media(min-width:761px){
.sidebar .settings-nav,.sidebar-collapsed .settings-nav{margin-top:12px!important}
.page-inbox main{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.page-inbox main>.page-header,.page-inbox main>footer{display:none!important}
.page-inbox #notification-banner{flex-shrink:0}
.page-inbox #content{flex:1;min-height:0;display:flex;flex-direction:column;padding:0;overflow:hidden}
.page-inbox .inbox-account-bar{flex-shrink:0;min-height:82px;border-color:#dce6ef}
.page-inbox .inbox{flex:1;min-height:0!important;height:auto;overflow:hidden;border-color:#dce6ef;grid-template-columns:300px minmax(0,1fr) 280px}
.page-inbox .inbox-list{min-height:0;max-height:none;height:100%;overflow-y:auto}
.page-inbox .chat{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.page-inbox .chat-head{flex-shrink:0;flex-wrap:wrap;padding:16px;gap:12px}
.page-inbox .message-search{flex-shrink:0}
.page-inbox .messages,.page-inbox .chat:has(.message-search) .messages{height:auto!important;min-height:0;flex:1;overflow-y:auto}
.page-inbox #reply{flex-shrink:0;background:#fff;border-top:1px solid #dce6ef}
.page-inbox .details{min-height:0;overflow-y:auto;height:100%}
}
@media(min-width:761px) and (max-width:1200px){.page-inbox .inbox{grid-template-columns:250px minmax(0,1fr)}.page-inbox .details{display:none}}

@media(min-width:761px){.page-inbox .compose-wrap{flex-shrink:0;min-width:0}.page-inbox .chat-head .inbox-source-number{font-size:11px;margin-left:auto}.page-inbox .details{border-color:#dce6ef}}

/* The reply input yields space to a full-width, single-line send button. */
.page-inbox .compose-wrap{padding:16px 20px 20px;overflow:visible}
.page-inbox .compose-top{gap:12px;align-items:center}
.page-inbox .compose-top select{min-width:0;max-width:100%;width:225px}
.page-inbox #reply.composer{display:flex;align-items:stretch;gap:12px;border:0;min-width:0;width:100%;padding:0}
.page-inbox #reply textarea{flex:1 1 0%;width:0;min-width:0;min-height:80px;margin:0;padding:14px;line-height:1.5}
.page-inbox #reply>.primary{flex:0 0 100px;min-width:100px;min-height:48px;align-self:stretch;white-space:nowrap;font-size:13px;padding:12px 16px;margin:0}
@media(max-width:760px){.page-inbox .compose-wrap{padding:12px}.page-inbox #reply>.primary{flex-basis:84px;min-width:84px;padding:10px}.page-inbox .compose-top .hint{flex-basis:100%;order:3}}

.page-inbox #reply.compact-composer{border:1px solid #dce6ef;border-radius:14px;background:#f5f8fc;padding:8px;align-items:center;gap:10px}
.page-inbox #reply.compact-composer textarea{min-height:42px;height:42px;max-height:120px;border:0;background:transparent;padding:10px 4px;box-shadow:none;resize:vertical}
.page-inbox #reply.compact-composer>.primary{flex:0 0 42px;min-width:42px;width:42px;height:42px;min-height:42px;border-radius:50%;padding:10px;align-self:center}
.composer-tools{display:flex;gap:3px;align-items:center;flex-shrink:0}.composer-tool{width:34px;height:36px;padding:7px;border:0;background:transparent!important;color:#627890;display:grid;place-items:center;font-size:24px}.composer-tool .icon{width:20px;height:20px}.composer-tool:hover{color:#079b7d;background:#e0f4ee!important}.emoji-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.emoji-picker button{font-size:25px;padding:10px}
@media(max-width:600px){.composer-tools{gap:0}.composer-tool{width:28px;padding:4px}.page-inbox #reply.compact-composer{gap:5px}.emoji-picker{grid-template-columns:repeat(4,1fr)}}

.student-group-card{padding:18px 0;border-bottom:1px solid #e0e8f1;margin-bottom:20px}.student-group-card h3{font-size:15px;color:#087e68;margin:0 0 18px}.student-group-card .field{margin-bottom:14px}.student-group-card input{width:100%;min-width:0}.student-group-card button{width:100%;margin-top:4px}

/* Choice steps present options as distinct buttons in the builder and chat. */
.flow-node .branch{display:block;margin-top:8px;padding:10px 12px;border:1px solid #b8e5d7!important;border-radius:9px;background:#e9f8f2!important;color:#087e68!important;white-space:normal;text-align:center;font-weight:600}
.flow-choice-buttons{display:flex;flex-direction:column;gap:8px;margin-top:12px;min-width:180px}.flow-choice-buttons button{background:#f0fbf7!important;border:1px solid #a9dfcc!important;color:#078b70!important;border-radius:9px;padding:10px 14px;text-align:center;white-space:normal}.flow-choice-buttons button:hover{background:#d9f4e9!important}.flow-choice-buttons button:disabled{cursor:default;opacity:.65}

/* Notification actions keep readable labels inside narrow dialogs. */
#modal .notification-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;align-items:stretch}
#modal .notification-controls button{min-width:0;min-height:44px;padding:10px 12px;font-size:13px;line-height:1.4;white-space:normal;overflow-wrap:normal;word-break:normal;margin:0}
@media(max-width:480px){#modal .notification-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#modal .notification-controls button{padding:10px 8px}#modal .notification-controls button:last-child:nth-child(odd){grid-column:1 / -1}}

.composer-mic{flex:0 0 42px!important;width:42px!important;height:42px!important;border-radius:50%!important;padding:10px!important}.composer-mic.recording{background:#ef5261!important}.compact-composer [hidden]{display:none!important}.bubble[dir=rtl]{text-align:right}.bubble small{direction:ltr;text-align:start}.emoji-categories{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px}.emoji-categories button{white-space:nowrap;min-height:36px}.emoji-picker{max-height:300px;overflow-y:auto}.emoji-picker button{border:0;background:transparent;min-height:44px}.node-list button span{display:block;white-space:pre-wrap;text-align:start;font-size:13px;margin-top:6px}@media(max-width:600px){.page-inbox #reply.compact-composer{flex-wrap:wrap}.composer-tools{order:0}.page-inbox #reply.compact-composer textarea{order:1;flex:1 1 calc(100% - 60px)}.page-inbox #reply.compact-composer>.primary{order:2}}

.composer-tools button[title="Emoji"]{font-size:24px;min-width:36px;min-height:36px;line-height:1}.composer-tools button[title="Emoji"] svg{width:24px;height:24px}.message-reactions{display:flex;gap:5px;margin-top:7px}.reaction-chip{font-size:19px;border:1px solid #cee7df;background:#fff;border-radius:16px;padding:2px 8px}.bubble{position:relative}.message-react{font-size:20px;padding:1px 6px;border:0;background:transparent;color:#63817c;margin-top:5px;opacity:.65}.message-react:hover,.message-react:focus{opacity:1}.reaction-picker{display:flex;gap:8px;flex-wrap:wrap}.reaction-picker button{font-size:25px;padding:8px 12px}.internal-note{align-self:center;background:#fff6d6!important;border:1px solid #ead794!important;max-width:90%;color:#6d5414}.internal-note strong{display:block;font-size:12px;margin-bottom:7px}.note-tool{font-size:23px;color:#997412}.unread-count{margin-inline-start:7px;min-width:22px;text-align:center}#flow-answer-filter{width:100%;margin:8px 0}.chat-incoming-hint{font-size:12px;padding:4px 9px;background:#ddf7ee;color:#08775c;border-radius:15px}

/* Reactions sit beside the message without expanding its bubble. */
.messages .bubble:not(.internal-note){margin-inline:22px}.messages .bubble .message-react{position:absolute;inset-inline-end:-37px;top:50%;transform:translateY(-50%);width:30px;height:30px;padding:0;margin:0;display:grid;place-items:center;border-radius:50%;background:#fff;color:#607e78;border:1px solid #dce9e5;font-size:24px;line-height:1;opacity:.8}.messages .bubble .message-react.has-reaction{font-size:20px;opacity:1}.messages .bubble .message-react:hover{opacity:1;background:#e8f7f1}.messages .bubble .message-reactions{position:absolute;bottom:-14px;inset-inline-start:10px;margin:0}.messages .bubble:has(.message-reactions){margin-bottom:22px}.messages .reaction-chip{font-size:17px;padding:1px 6px}

/* Shared typography and spacing across workspace pages. */
:root{--ui-text:#263b50;--ui-muted:#718096;--ui-line:#e1e8ef;font-size:13px;color:var(--ui-text)}
body{line-height:1.5}
.page-header h1{font-size:20px;font-weight:600;letter-spacing:-.3px;line-height:1.3}
.page-header p{font-size:12px;line-height:1.5;color:var(--ui-muted)}
#content .panel h2,#modal h2{font-size:17px;line-height:1.4;font-weight:600;letter-spacing:-.2px}
#content h3{font-size:14px;line-height:1.4;font-weight:600}
#content .panel p,#modal p{font-size:12px;line-height:1.6;color:var(--ui-muted)}
#content label,#modal label,#content .field>label,#modal .field>label{font-size:11.5px;font-weight:500;line-height:1.4;color:#526479;letter-spacing:0;margin-bottom:6px}
#content .field,#modal .field{margin-bottom:12px}
#content input:not([type=checkbox]):not([type=radio]):not([type=color]),#content select,#modal input:not([type=checkbox]):not([type=radio]):not([type=color]),#modal select{font-size:12px;min-height:36px;padding:8px 11px;border-radius:8px;border-color:var(--ui-line)}
#content textarea,#modal textarea{font-size:13px;line-height:1.6;border-radius:8px;border-color:var(--ui-line)}
#content input::placeholder,#content textarea::placeholder,#modal input::placeholder,#modal textarea::placeholder{color:#99a5b4;font-size:12px}
#content button:not(.composer-tool):not(.message-react):not(.composer-mic):not(.icon-button),#modal .form-actions button{font-size:12px;line-height:1.4;font-weight:500;border-radius:8px}
#content .panel{border-radius:12px;border-color:var(--ui-line);box-shadow:0 3px 14px #263b5004}
#content .panel-head{margin-bottom:16px;gap:12px}
#content .table-wrap th{font-size:11px;font-weight:600;color:#718096;padding:10px 12px}
#content .table-wrap td{font-size:12px;padding:10px 12px}
.sidebar nav button{font-size:12px;font-weight:500;line-height:1.4;min-height:34px}
.sidebar nav .subnav button{font-size:11.5px;min-height:30px}
.sidebar .nav-label{font-size:9px;letter-spacing:.7px}
.details .field>label,.details>label{font-size:11px!important;margin-bottom:5px!important}
.details .student-group-card{padding:16px 0;margin-bottom:16px}
.details .student-group-card h3{font-size:13px;margin-bottom:14px}
.details .field{margin-bottom:11px!important}
.details h2{font-size:15px!important}
.chat-head strong{font-size:13px;font-weight:600}
.inbox-account-bar strong{font-size:17px;font-weight:600}
.inbox-list h2{font-size:13px;font-weight:600}
.contact strong{font-size:12px;font-weight:600}.contact p{font-size:11.5px;line-height:1.5}.contact small{font-size:10.5px;line-height:1.5}
.bubble{font-size:13px;line-height:1.6}.bubble small{font-size:10px}
#content .stat-top{font-size:12px}#content .stat strong{font-size:28px;font-weight:600}#content .stat small{font-size:11px}
#content .settings-tabs button{font-size:12px;padding:8px 13px}
#modal .modal-head{padding-bottom:14px}#modal .hint,#content .hint{font-size:11px;line-height:1.5}
@media(max-width:760px){.page-header h1{font-size:18px}#content .panel h2,#modal h2{font-size:16px}#content input:not([type=checkbox]):not([type=radio]),#content select,#modal input:not([type=checkbox]):not([type=radio]),#modal select{min-height:40px}}
.message-quote,.reply-preview{background:#eaf3f0;border-inline-start:3px solid #0caa88;border-radius:7px;padding:8px 10px;text-align:start}.message-quote{display:block;width:100%;margin-bottom:8px;max-width:340px;border-top:0;border-bottom:0;border-inline-end:0}.message-quote strong,.reply-preview strong{display:block;font-size:11px;color:#07846c}.message-quote span,.reply-preview span{display:block;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}.reply-preview{display:flex;gap:12px;align-items:center;margin:8px 20px 0;flex-shrink:0}.reply-preview>div{flex:1;min-width:0}.reply-preview button{border:0;background:transparent;font-size:22px}.message-reply{position:absolute;inset-inline-end:-36px;top:calc(50% + 32px);width:28px;height:28px;padding:0;border:0;border-radius:50%;background:#fff;color:#65837a;font-size:19px}.quoted-highlight{outline:2px solid #10b991;outline-offset:3px}

/* Compact message actions appear together on hover, outside the bubble. */
.messages .bubble:not(.internal-note){margin-inline:52px;margin-bottom:14px}
.messages .bubble .message-react,.messages .bubble .message-reply{position:absolute;top:50%;transform:translateY(-50%);width:25px;height:25px;min-height:25px;padding:0;margin:0;display:grid;place-items:center;border:0;border-radius:6px;background:#ffffffd9;box-shadow:0 1px 5px #274b3b0a;color:#799088;opacity:0;pointer-events:none;transition:opacity .12s,background .12s}
.messages .bubble .message-react{inset-inline-end:-31px;font-size:19px}
.messages .bubble .message-reply{inset-inline-end:-59px;font-size:17px}
.messages .bubble:hover .message-react,.messages .bubble:hover .message-reply,.messages .bubble:focus-within .message-react,.messages .bubble:focus-within .message-reply{opacity:1;pointer-events:auto}
.messages .bubble .message-react.has-reaction{opacity:1;pointer-events:auto;background:#fff;border:1px solid #e2ece7;border-radius:13px;font-size:17px}
.messages .bubble .message-react:hover,.messages .bubble .message-reply:hover{background:#e0f2ea;color:#12866c}
.messages .bubble:has(.message-reactions){margin-bottom:20px}
.messages .message-quote{padding:7px 9px;border-radius:6px;border-inline-start-width:3px;background:#dceee74d;box-shadow:none;line-height:1.4}
.messages .message-quote strong{font-size:10px;font-weight:600;margin-bottom:3px}.messages .message-quote span{font-size:11px;max-height:45px;overflow:hidden}
@media(hover:none){.messages .bubble .message-react,.messages .bubble .message-reply{opacity:.7;pointer-events:auto}}

/* Message tools face the center of the chat, in one compact row. */
.messages .bubble:not(.internal-note){margin-inline:8px;max-width:min(78%,600px);padding:10px 13px;border-radius:15px;border:1px solid #e2eae6;box-shadow:0 2px 5px #26463b05;margin-bottom:11px}
.messages .bubble:not(.out):not(.internal-note){border-bottom-left-radius:4px}
.messages .bubble.out{border-bottom-right-radius:4px;background:#ddf5e9;border-color:#cdebdc}
.messages .bubble .message-react{inset-inline-start:auto;inset-inline-end:-32px}
.messages .bubble .message-reply{inset-inline-start:auto;inset-inline-end:-60px}
.messages .bubble[dir=rtl] .message-react{inset-inline-start:-32px;inset-inline-end:auto}.messages .bubble[dir=rtl] .message-reply{inset-inline-start:-60px;inset-inline-end:auto}
.messages .bubble.out .message-react{inset-inline-start:-32px;inset-inline-end:auto}.messages .bubble.out .message-reply{inset-inline-start:-60px;inset-inline-end:auto}
.messages .bubble.out[dir=rtl] .message-react{inset-inline-end:-32px;inset-inline-start:auto}.messages .bubble.out[dir=rtl] .message-reply{inset-inline-end:-60px;inset-inline-start:auto}
.page-inbox .compose-wrap{padding:9px 12px 11px}
.page-inbox #reply.compact-composer{padding:4px 7px;gap:5px;border-radius:12px;min-height:44px;flex-wrap:nowrap;background:#fff}
.page-inbox #reply.compact-composer textarea{min-height:34px;height:34px;max-height:90px;padding:7px 5px;font-size:13px;resize:none;line-height:20px}
.page-inbox #reply.compact-composer>.primary,.page-inbox #reply.compact-composer>.composer-mic{flex:0 0 32px!important;width:32px!important;min-width:32px!important;height:32px!important;min-height:32px!important;padding:7px!important;border-radius:9px!important}
.page-inbox #reply.compact-composer>.primary .icon{width:17px;height:17px}.page-inbox .composer-tools{gap:0}.page-inbox .composer-tool{width:29px;min-width:29px!important;height:32px;min-height:32px!important;padding:5px;font-size:21px}.page-inbox .composer-tool .icon{width:18px;height:18px}
.page-inbox .reply-preview{margin:5px 12px 0;padding:6px 9px}
@media(max-width:600px){.page-inbox #reply.compact-composer{flex-wrap:wrap}.page-inbox .composer-tools{flex-basis:100%}.page-inbox #reply.compact-composer textarea{flex:1 1 0%;order:1}.page-inbox #reply.compact-composer>.primary{order:2}}
.page-inbox .messages{overflow-x:hidden!important}.page-inbox .bubble{overflow-wrap:anywhere;min-width:0}.page-reports .table-wrap table{min-width:1180px}.page-reports .table-wrap th{white-space:nowrap}.page-reports .table-wrap td{vertical-align:top;min-width:90px;max-width:220px}.page-reports .table-wrap td:first-child{min-width:150px}

/* The workspace shell is visible only after authentication succeeds. */
body.auth-screen .sidebar,body.auth-screen .topbar,body.auth-screen .page-header,body.auth-screen footer{display:none!important}
body.auth-screen main{margin:0!important;margin-left:0!important;margin-inline-start:0!important;width:100%;min-height:100dvh}
body.auth-screen #content{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}
body.auth-screen #auth{width:100%;max-width:460px;margin:0;padding:32px;border-radius:18px;box-sizing:border-box}
body.auth-screen #auth::before{content:'Wasel';display:block;color:#009b83;font-weight:700;font-size:24px;margin-bottom:24px}
@media(max-width:480px){body.auth-screen #content{padding:16px}body.auth-screen #auth{padding:24px}}