/* Shared, compact workspace controls. Apple system type follows the dashboard. */
#teamPage,#developersPage,#settingsPage{max-width:1280px}
#teamPage .access-tabs{margin-bottom:26px}
#teamPage .access-workspace{max-width:none}
#teamPage .access-intro{margin-bottom:18px}
#teamPage .access-intro p{max-width:620px}
#settingsPage .settings-security{margin-top:28px}
#settingsPage .access-security-card{max-width:760px;padding:26px;background:#f8f9fc;border:0;border-radius:14px}
#settingsPage .security-setting{padding:20px 0;border-top:1px solid #e5e8f0}
#settingsPage .access-lead{margin-bottom:24px;max-width:60ch}
#developersPage .integration-workspace-head{margin-bottom:24px;align-items:center}
#developersPage .integration-workspace-head h2{font-size:18px}
#developersPage #apiKeysList{display:grid;gap:12px}
#developersPage .integration-key{border:1px solid #e5e8ef;border-radius:12px;background:#fff;transition:border-color .18s,box-shadow .18s;min-width:0}
#developersPage .integration-key:hover{border-color:#c8d3ef;box-shadow:0 5px 18px #23345e07}
.key-row{display:flex;align-items:center;gap:16px;padding:20px}
.key-symbol{display:grid;place-items:center;flex:none;width:40px;height:40px;color:#3255df;background:#edf2ff;border:1px solid #e2e9fc;border-radius:10px;font-size:24px;box-shadow:inset 0 2px 0 #fff}
.key-identity{display:grid;gap:7px;flex:1;min-width:0}
.key-identity strong{font-size:15px;overflow-wrap:anywhere}
.key-identity code{font-size:12px;color:#7a8295;background:none;border:0;padding:0}
.key-state{display:flex;flex-wrap:wrap;gap:7px;align-items:center;max-width:260px}
.key-state small{color:#768097;font-size:11px}
.key-foot{display:flex;gap:24px;border-top:1px solid #eef0f5;padding:13px 20px;color:#81899a;font-size:12px;flex-wrap:wrap}
.key-foot b{color:#525d72;font-weight:500}
.key-hook{margin-left:auto;max-width:50%;overflow-wrap:anywhere}
.key-actions{position:relative}
.key-actions summary{list-style:none;cursor:pointer;padding:9px;color:#6d7688;border-radius:7px;letter-spacing:2px}
.key-actions summary::-webkit-details-marker{display:none}
.key-actions summary:hover{background:#f1f4fa}
.key-actions[open]>div{position:absolute;right:0;top:40px;z-index:20;display:grid;padding:6px;width:210px;background:#fff;border:1px solid #e4e8ef;border-radius:10px;box-shadow:0 12px 35px #16244b1a}
#developersPage .key-actions button{text-align:left;border:0;background:none;padding:10px;font-size:12px}
#developersPage .key-actions button:hover{background:#f2f5fb}
#developersPage .key-actions .key-danger{color:#b04444}
.key-edit-form{padding:22px;border-top:1px solid #e5e8ef;background:#fafbfe;display:grid;gap:18px;border-radius:0 0 12px 12px}
.key-edit-form label{display:grid;gap:8px;font-size:13px;max-width:650px}
.key-edit-form small{font-size:12px;color:#7b8495}
.key-edit-form h3{font-size:15px;margin:0}
.key-edit-form .modal-actions{justify-content:flex-start}
#integrationWizardBackdrop{padding:24px;align-items:center;background:#151f3d55;backdrop-filter:blur(4px)}
#integrationWizardBackdrop .key-modal{width:min(540px,100%);max-height:calc(100dvh - 48px);padding:30px;border-radius:18px;box-shadow:0 24px 80px #14234230;overflow:auto;animation:key-enter .2s ease-out}
.key-modal-heading{display:flex;align-items:center;gap:13px;margin-bottom:14px;padding-right:20px}
#integrationWizardTitle{font-size:21px;margin:0;letter-spacing:-.5px}
#integrationWizardBackdrop .key-lead{font-size:13px;line-height:1.6;color:#737e91;margin:0 0 24px}
#integrationWizardBackdrop .stack{gap:10px}
#integrationWizardBackdrop label,#integrationWizardBackdrop legend{font-size:13px;color:#374258}
#integrationWizardBackdrop input:not([type=checkbox]),#integrationWizardBackdrop select{height:42px;margin:0 0 10px;border:1px solid #dfe4ee;border-radius:8px;background:#fff;font-size:14px}
#integrationWizardBackdrop .key-permissions{border:0;padding:10px 0;margin:0;display:grid;gap:10px}
#integrationWizardBackdrop .key-permissions label{display:flex;align-items:center;gap:12px;background:#f7f9fc;border-radius:8px;padding:12px;margin:0}
.key-permissions label span{display:grid;gap:4px}
.key-permissions strong{font-size:13px;font-weight:500}
.key-permissions small{font-family:ui-monospace,monospace;font-size:11px;color:#8690a1}
#integrationWizardBackdrop input[type=checkbox]{width:16px;height:16px;accent-color:#3456f5}
.key-webhook{padding:14px 0;border-top:1px solid #e9ecf3}
.key-webhook summary{font-size:13px;cursor:pointer;color:#47546c}
.key-webhook p,.key-webhook a{font-size:12px;line-height:1.6}
.key-webhook p{color:#7a8496}
.key-webhook label{display:block;margin-bottom:8px}
.key-webhook a,.key-next{color:#3456df;text-decoration:none}
#integrationWizardBackdrop .modal-actions{margin-top:14px;border-top:1px solid #e9ecf3;padding-top:18px;display:flex;gap:10px;justify-content:flex-end}
#integrationWizardBackdrop .created-secret{margin:16px 0;padding:16px;background:#f7f9fc;border:1px solid #e5eaf5;border-radius:10px}
#integrationWizardBackdrop .created-secret code{overflow-wrap:anywhere;white-space:normal}
.key-success{font-size:14px;line-height:1.7;color:#64718a}
.key-next{display:block;font-size:13px;margin:22px 0}
@keyframes key-enter{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:700px){
 .key-row{gap:10px;padding:16px;flex-wrap:wrap}.key-identity{flex-basis:calc(100% - 60px)}.key-state{flex:1;max-width:none}.key-foot{gap:10px;padding:13px 16px}.key-hook{max-width:100%;margin-left:0;flex-basis:100%}
 #integrationWizardBackdrop{padding:12px}#integrationWizardBackdrop .key-modal{padding:22px;max-height:calc(100dvh - 24px)}
}
@media(prefers-reduced-motion:reduce){#integrationWizardBackdrop .key-modal{animation:none}.integration-key{transition:none}}

/* Keep legacy disclosure styles out of compact controls. */
.merchant-dashboard #developersPage .integration-key details.key-actions{margin:0;padding:0;border:0;background:none;border-radius:0;flex:none}
.merchant-dashboard #developersPage .integration-key details.key-actions>summary{display:grid;place-items:center;box-sizing:border-box;width:34px;height:34px;padding:0;margin:0;border:0;font-size:13px;font-weight:500;list-style:none}
.merchant-dashboard #developersPage .integration-key details.key-actions>summary:before{display:none}
.merchant-dashboard #integrationWizardBackdrop details.key-webhook{border:0;border-top:1px solid #e9ecf3;border-radius:0;margin:4px 0 0;padding:14px 0;background:none}
.merchant-dashboard #integrationWizardBackdrop details.key-webhook>summary{padding:0;font-weight:500;border:0;background:none}
.merchant-dashboard #pageDescription:empty,.merchant-dashboard .editor-heading p:empty{display:none}
.merchant-dashboard #settingsPage #mfaSetup{padding:20px;border-radius:12px;background:#f5f8ff;margin-top:18px}
.merchant-dashboard #settingsPage #mfaSetup .inline-form{display:flex;align-items:start;flex-direction:column;gap:10px}
.merchant-dashboard #settingsPage #mfaEnableCode{max-width:230px}
.merchant-dashboard #settingsPage .secret{overflow-wrap:anywhere}

/* Align toolbar controls by their actual boxes, not legacy label/link margins. */
.merchant-dashboard .page :is(#paymentFilters,.filter-bar)>label{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;min-width:0}
.merchant-dashboard .page :is(#paymentFilters,.filter-bar) :is(input,select){width:100%;max-width:none;height:40px;min-height:40px!important;margin:0;box-sizing:border-box}
.merchant-dashboard .page :is(#paymentFilters,.filter-bar)>button,
.merchant-dashboard .page :is(#paymentFilters,.filter-bar)>details>summary{height:40px;min-height:40px;box-sizing:border-box;margin:0;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;line-height:20px}
.merchant-dashboard #paymentFilters>.filter-search{flex:1 1 240px;max-width:none}
.merchant-dashboard #paymentFilters>label:not(.filter-search){flex:0 1 168px}
.merchant-dashboard #paymentFilters .simple-disclosure:not([open])>.optional-fields{display:none}
.merchant-dashboard #paymentFilters .optional-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
.merchant-dashboard #paymentFilters .optional-fields label{margin:0;display:flex;flex-direction:column;gap:8px}
.retell-dashboard .page .row-actions{align-items:center}
.retell-dashboard .page .row-actions :is(button,.button-link){display:inline-flex;align-items:center;justify-content:center;height:34px;min-height:34px;box-sizing:border-box;margin:0;line-height:20px;padding:0 11px}
@media(max-width:700px){
 .merchant-dashboard #paymentFilters>.filter-search{flex-basis:100%}
 .merchant-dashboard #paymentFilters .optional-fields{grid-template-columns:1fr}
 .merchant-dashboard #paymentFilters>label:not(.filter-search){flex:1 1 150px}
}

/* One surface for prefixed phone controls; child inputs must not inherit field chrome. */
.merchant-dashboard :is(#workspaceContent, #planCheckoutBackdrop) .phone-entry {
  display:flex;align-items:center;box-sizing:border-box;gap:0;
  width:100%;min-width:0;height:40px;min-height:40px;margin:0;
  border:1px solid #dce0e7;border-radius:8px;background:#fff;overflow:hidden;
  transition:border-color .15s,box-shadow .15s;
}
.merchant-dashboard :is(#workspaceContent, #planCheckoutBackdrop) .phone-entry > span {
  flex:none;align-self:stretch;display:flex;align-items:center;
  padding:0 0 0 12px;background:transparent;color:#505b6e;font-size:13px;font-weight:500;
}
.merchant-dashboard :is(#workspaceContent, #planCheckoutBackdrop) .phone-entry > input.form-control {
  flex:1 1 0;width:100%;min-width:0;max-width:none;box-sizing:border-box;
  height:38px;min-height:38px;margin:0;padding:0 12px 0 7px;
  border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;font-size:13px;
}
.merchant-dashboard :is(#workspaceContent, #planCheckoutBackdrop) .phone-entry:focus-within {
  border-color:#4164f5;box-shadow:0 0 0 3px #4164f51a;outline:none;
}
.merchant-dashboard :is(#workspaceContent, #planCheckoutBackdrop) .phone-entry > input:focus-visible {
  outline:none;box-shadow:none;
}
.merchant-dashboard #recurringForm label {min-width:0;display:flex;flex-direction:column;gap:8px;margin:0;}
.merchant-dashboard #recurringForm label > :is(.form-control,.form-select) {
  box-sizing:border-box;width:100%;max-width:none;height:40px;min-height:40px;margin:0;border-radius:8px;
}

/* Native details semantics, with a quiet shared disclosure affordance. Action menus stay separate. */
.merchant-dashboard :is(#workspaceContent, #integrationWizardBackdrop) details:not(.key-actions):not(.access-composer) > summary {
  display:flex;align-items:center;gap:12px;box-sizing:border-box;
  min-height:40px;padding:10px 12px;margin:0;list-style:none;
  border:0;border-radius:7px;background:transparent;color:#526078;
  font-size:13px;font-weight:500;line-height:20px;letter-spacing:normal;cursor:pointer;
  transition:color .15s,background-color .15s;
}
.merchant-dashboard :is(#workspaceContent, #integrationWizardBackdrop) details:not(.key-actions):not(.access-composer) > summary::-webkit-details-marker {display:none;}
.merchant-dashboard :is(#workspaceContent, #integrationWizardBackdrop) details:not(.key-actions):not(.access-composer) > summary::marker {content:"";}
.merchant-dashboard :is(#workspaceContent, #integrationWizardBackdrop) details:not(.key-actions):not(.access-composer) > summary::after {
  content:"";display:block;flex:none;width:6px;height:6px;margin:0 3px 3px auto;
  border:solid currentColor;border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);transition:transform .18s;
}
.merchant-dashboard :is(#workspaceContent, #integrationWizardBackdrop) details:not(.key-actions):not(.access-composer)[open] > summary::after {
  transform:rotate(225deg);margin-bottom:-3px;
}
.merchant-dashboard :is(#workspaceContent, #integrationWizardBackdrop) details:not(.key-actions):not(.access-composer) > summary:hover {
  color:#3158d8;background:#f1f5ff;
}
.merchant-dashboard #workspaceContent :is(.advanced-settings,.workspace-disclosure,.onboarding-details,.connection-help) {
  border:0;border-top:1px solid #e9ecf2;border-radius:0;background:transparent;padding:8px 0;margin:16px 0 0;
}
.merchant-dashboard #recurringForm .advanced-settings > .form-grid {padding:16px 12px 8px;margin:0;}
.merchant-dashboard #workspaceContent .workspace-disclosure > .panel {padding:16px 12px;}
.merchant-dashboard #settingsDiagnostics > :not(summary) {margin:12px 12px 16px;}
@media(prefers-reduced-motion:reduce) {
  .merchant-dashboard .phone-entry,
  .merchant-dashboard details > summary,
  .merchant-dashboard details > summary::after {transition:none;}
}

/* A distinct account area, separate from workspace navigation. */
.retell-dashboard .sidebar-bottom {
  padding:12px;margin-top:auto;border:1px solid #dce3f3;border-radius:12px;
  background:#fff;box-shadow:0 3px 12px #24396106;
}
.retell-dashboard .sidebar-bottom .topnav {
  grid-template-columns:30px minmax(0,1fr) 30px;gap:8px;padding:0 0 10px;
}
.retell-dashboard .sidebar-bottom .profile-avatar {
  width:30px;height:30px;background:#315aff;color:#fff;border-radius:8px;font-weight:550;
}
.retell-dashboard .sidebar-bottom #userLabel {color:#45516a;font-weight:500;}
.retell-dashboard .sidebar-bottom .language-button {background:#f3f5fa;color:#62718a;border-radius:6px;}
.retell-dashboard .sidebar-bottom .language-button:hover {background:#e8eeff;color:#315aff;}
.retell-dashboard .sidebar-bottom #logoutButton {color:#6d7890;min-height:28px;}
.retell-dashboard .sidebar-bottom #logoutButton:hover {color:#b44444;text-decoration:underline;text-underline-offset:3px;}
.retell-dashboard .sidebar-bottom #workModeChip {
  display:flex;width:100%;box-sizing:border-box;margin:0;padding:8px 10px;gap:7px;
  background:#edf7f2;color:#287052;border:0;border-radius:7px;font-size:11px;font-weight:500;
}
.retell-dashboard .sidebar-bottom #workModeChip.test-mode {background:#edf2ff;color:#365bc3;}

.retell-dashboard .sidebar-bottom {position:relative;}
.retell-dashboard .sidebar-bottom .app-language-menu {
  position:absolute;top:auto;bottom:calc(100% + 8px);left:0;right:0;width:auto;max-width:none;
}