/* A few things for the agent's desk. Keep the useful choices in the foreground. */
#modal:has(.tool-setup) {
  width: min(560px, calc(100% - 32px));
  max-width: 560px;
  max-height: calc(100svh - 40px);
  background: #fffefa;
  border: 1px solid #e9e5dc;
  border-radius: 28px;
  box-shadow: 0 24px 85px #36322925;
  scrollbar-width: thin;
  scrollbar-color: #d8d5cb transparent;
}
#modal:has(.tool-setup)::backdrop { background: #34322e40; backdrop-filter: blur(7px); }
#modal:has(.tool-setup) .modal-head { padding: 27px 30px 5px; align-items: center; }
#modal:has(.tool-setup) .modal-head h2 { font-size: 27px; line-height: 1.2; letter-spacing: -.9px; margin: 0; }
#modal:has(.tool-setup) .modal-head > .close {
  width: 38px; height: 38px; margin: 0 -6px 0 0;
  background: #f1efea; color: #76766e;
}
#modal:has(.tool-setup) .modal-head > .close:hover { background: #e8e4db; color: #363b34; }
#modal:has(.tool-setup) .modal-body { padding: 0 30px 28px; }

.tool-setup { --tool-tint: #eaf0de; --tool-shade: #d1dfb9; --tool-ink: #687e50; min-width: 0; }
.tool-setup[data-kind="phone"] { --tool-tint: #efe7f6; --tool-shade: #d6c4e7; --tool-ink: #866b9d; }
.tool-setup[data-kind="card"] { --tool-tint: #fcf0e0; --tool-shade: #f0cfab; --tool-ink: #a57c4d; }
.tool-setup[data-kind="wallet"] { --tool-tint: #e8f1f9; --tool-shade: #c7dcef; --tool-ink: #6487a6; }
.tool-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  width: min(345px, 100%);
  height: 167px;
  margin: 7px auto 16px;
  pointer-events: none;
}
.tool-hero::before {
  content: ""; position: absolute; z-index: -2;
  width: 260px; height: 133px; top: 16px; left: calc(50% - 130px);
  background: var(--tool-tint);
  border-radius: 46% 55% 40% 56% / 52% 43% 58% 48%;
  transform: rotate(-5deg);
}
.tool-hero::after {
  content: ""; position: absolute; z-index: -1;
  width: 188px; height: 15px; bottom: 9px; left: calc(50% - 98px);
  border-radius: 50%; background: color-mix(in srgb, var(--tool-ink), transparent 86%);
  filter: blur(7px);
}
.tool-object { position: relative; display: grid; place-items: center; width: 182px; height: 136px; margin: -1px 46px 0 0; }
.tool-object > .ae-envelope { scale: 1.04; transform: rotate(-13deg); }
.tool-object > .ae-handset { scale: 1.06; transform: rotate(-19deg); margin-top: -7px; }
.tool-object > .ae-credit { scale: 1.07; transform: rotate(-12deg); }
.tool-object > .ae-wallet { scale: 1.05; transform: rotate(-11deg); }
.tool-mascot { position: absolute; z-index: 2; left: calc(50% + 53px); bottom: 24px; transform: rotate(8deg); }
.tool-mascot > .bot-face, .tool-mascot > .bot-face.large {
  width: 65px; height: 65px; border-radius: 23px; gap: 10px;
  transform: rotate(4deg);
  box-shadow: inset 0 2px 3px #ffffffbc, inset -3px -5px 8px #64774a20, 3px 6px 0 #a6b29235, 4px 10px 12px #66634812;
}
.tool-mascot .bot-face i { width: 5px; height: 9px; transform: rotate(-4deg); }
.tool-mascot::before {
  content: ""; position: absolute; width: 11px; height: 23px; left: -10px; top: 22px;
  background: #cfddbc; border-radius: 10px;
  transform: rotate(-41deg); box-shadow: inset 0 1px 2px #ffffffb8, 1px 2px 0 #a6b29255;
}
.tool-mascot::after {
  content: ""; position: absolute; width: 7px; height: 7px; top: -17px; right: 0;
  background: var(--tool-shade); border-radius: 3px; transform: rotate(20deg);
  box-shadow: 16px 13px 0 -1px var(--tool-shade);
}
.tool-hero-note {
  position: absolute; left: 50%; bottom: 0; max-width: 210px;
  transform: translateX(-50%) rotate(-3deg);
  padding: 4px 11px; border: 1px solid #e9dfc9; border-radius: 5px;
  background: #fbf2dd; color: #82704d; font-size: 11px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

#modal .tool-form { margin: 0; }
.tool-form .field { display: block; color: #575c52; font-size: 13px; margin: 0 0 15px; }
.tool-form .field input:not([type="checkbox"]):not([type="radio"]),
.tool-form .field select,
.tool-form .field textarea {
  min-height: 47px;
  border: 1px solid #deded4;
  border-radius: 12px;
  background: #fff;
  color: #343b30;
  margin-top: 7px;
  padding: 11px 13px;
  font-size: 14px;
}
.tool-form .field input::placeholder { color: #a1a294; }
.tool-form .field input:focus, .tool-form .field select:focus,
.tool-form .field textarea:focus { border-color: #abb79b; }
.tool-form .fields-two { gap: 13px; }
.tool-form .fields-two > .field { min-width: 0; }
.tool-form .switch-row {
  gap: 16px; min-height: 50px; padding: 12px 0;
  border-bottom: 0; color: #555d4d; font-size: 13px; font-weight: 400;
}
.tool-form .switch-row > span { min-width: 0; line-height: 1.5; }
.tool-setup .switch-row input[type="checkbox"], .tool-setup input.tool-switch {
  appearance: none; position: relative; display: block;
  flex: none; width: 41px; min-width: 41px; height: 25px;
  border: 0; border-radius: 20px; padding: 0; margin: 0;
  background: #dedfd6; cursor: pointer;
  transition: background .18s ease;
}
.tool-setup .switch-row input[type="checkbox"]::after, .tool-setup input.tool-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 19px; height: 19px; border-radius: 50%; background: white;
  box-shadow: 0 1px 3px #3b43302b; transition: transform .18s ease;
}
.tool-setup .switch-row input[type="checkbox"]:checked, .tool-setup input.tool-switch:checked { background: #8aa572; }
.tool-setup .switch-row input[type="checkbox"]:checked::after, .tool-setup input.tool-switch:checked::after { transform: translateX(16px); }
.tool-setup .switch-row input[type="checkbox"]:disabled { opacity: .45; cursor: default; }
.tool-form .switch-row.suboption { margin: 0 0 0 16px; padding-left: 15px; border-left: 2px solid var(--tool-tint); }

.email-address-field { display: block; margin: 0 0 12px; }
.email-address-field .field-label { display: block; font-size: 13px; color: #575c52; margin-bottom: 8px; }
.email-address-input {
  display: flex; align-items: center; min-height: 52px;
  border: 1px solid #dce2d3; border-radius: 13px;
  background: #fff; overflow: hidden;
}
.email-address-input:focus-within { border-color: #a7b792; box-shadow: 0 0 0 3px #bccbaa22; }
#modal .tool-form .email-address-input input {
  flex: 1 1 96px; width: 96px; min-width: 65px; min-height: 51px;
  border: 0; border-radius: 0; outline: none; margin: 0;
  padding: 13px 0 13px 15px; background: transparent;
  color: #46553a; font-size: 15px; font-weight: 500;
}
.email-domain { flex: 0 1 auto; min-width: 0; max-width: 76%; padding: 10px 13px 10px 0; color: #6d7862; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.tool-form .budget-control { margin-bottom: 13px; }
.tool-form .budget-control input { font-size: 24px !important; letter-spacing: -.7px; font-weight: 500; min-height: 61px !important; }
.tool-form .budget-control .input-prefix { background: #fff; min-height: 61px; border-color: #deded4; border-radius: 13px; }
.tool-form .budget-control .input-prefix > span { font-size: 20px; color: #8c8b7f; }
.tool-form .budget-control .input-prefix input { min-height: 59px !important; padding-top: 9px; padding-bottom: 9px; }
#card-setup > .field:first-child input, #wallet-setup > .field:first-child input {
  min-height: 59px; padding: 11px 16px;
  font-size: 24px; font-weight: 500; letter-spacing: -.6px;
  background: #fff; border-radius: 13px;
}
.tool-balance {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 75px; padding: 15px 16px; margin: 15px 0;
  background: var(--tool-tint); border: 0; border-radius: 16px;
}
.tool-balance > div { min-width: 0; }
.tool-balance > div > span { display: block; color: #687360; font-size: 12px; line-height: 1.4; margin-bottom: 5px; }
.tool-balance strong { display: block; color: #414b37; font-size: 22px; line-height: 1.2; font-weight: 500; letter-spacing: -.5px; overflow-wrap: anywhere; }
.tool-balance small, .tool-balance .hint, .tool-balance .field-label { display: block; margin: 5px 0 0; color: #6d7762; font-size: 11px; }
.tool-balance strong > small { display: inline; margin: 0 0 0 3px; font-size: 12px; font-weight: 400; letter-spacing: 0; }
.tool-balance .button { flex: none; min-height: 37px; padding: 8px 12px; background: #fffefa; border: 1px solid #ffffff; font-size: 12px; }
.tool-balance .button:hover { background: white; box-shadow: 0 3px 8px #4e513b0a; }
.number-preview {
  display: flex; align-items: center; justify-content: center; min-height: 54px;
  margin: 0 0 16px; padding: 12px 16px; border-radius: 13px;
  background: var(--tool-tint); color: #746380; font-size: 18px;
  font-variant-numeric: tabular-nums; letter-spacing: .3px; overflow-wrap: anywhere;
}
.tool-readiness {
  display: flex; align-items: center; gap: 9px; padding: 12px 14px; margin: 12px 0;
  border: 0; border-radius: 12px; background: #f7f1e4; color: #8b7957;
  font-size: 12px; line-height: 1.55;
}
.tool-readiness.success { background: #eff3e7; color: #688052; }
.tool-setup[data-kind="wallet"] > .tool-readiness { background: var(--tool-tint); color: #5f7d96; }
.tool-readiness > span, .tool-readiness > div { min-width: 0; }
.tool-readiness p { margin: 0; }
.tool-readiness .button { margin-left: auto; flex: none; }
.tool-progress { display: flex; align-items: center; justify-content: center; gap: 17px; list-style: none; margin: 0 0 18px; padding: 0; color: #999a8e; font-size: 11px; }
.tool-progress > span, .tool-progress > li { display: flex; align-items: center; gap: 6px; position: relative; }
.tool-progress > .current { color: #726383; font-weight: 500; }
.tool-progress > .done { color: #768864; }
.tool-progress b, .tool-progress i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #efeee7; color: #898d7b; font-size: 10px; font-style: normal; font-weight: 500; }
.tool-progress .current b, .tool-progress .current i { background: #ebe1f3; color: #896c9d; }

.advanced-settings { margin-top: 15px; border-radius: 13px; background: #f5f4ee; border: 1px solid transparent; }
.advanced-settings > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 46px; padding: 13px 15px; cursor: pointer; list-style: none;
  color: #68705f; font-size: 12px; line-height: 1.5; border-radius: 12px;
  transition: background .15s ease;
}
.advanced-settings > summary::-webkit-details-marker { display: none; }
.advanced-settings > summary:hover { color: #4a5541; background: #eeeee5; }
.advanced-settings > summary > span { font-size: 18px; font-weight: 400; line-height: 1; color: #959a8a; transition: transform .18s ease; }
.advanced-settings[open] > summary > span { transform: rotate(45deg); }
.advanced-settings[open] { border-color: #eae9e1; }
.advanced-settings[open] > summary { color: #4e5846; }
.advanced-body { padding: 2px 15px 15px; }
.advanced-body .field { font-size: 12px; margin: 8px 0 13px; }
.advanced-body .field:last-child { margin-bottom: 0; }
.advanced-body .switch-row { min-height: 45px; padding: 10px 0; font-size: 12px; }
.advanced-body .fields-two:last-child .field { margin-bottom: 0; }
.advanced-body > p:last-child { margin-bottom: 0; }
.tool-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 20px; }
.tool-footer > .button { flex: 1; min-height: 47px; }
.tool-form > .button.primary { width: 100%; margin-top: 20px; min-height: 47px; }
.tool-setup .error { border-radius: 12px; margin-top: 13px; }

@media (max-width: 600px) {
  #modal:has(.tool-setup) { width: calc(100% - 24px); max-height: calc(100svh - 24px); border-radius: 24px; }
  #modal:has(.tool-setup) .modal-head {
    position: sticky; top: 0; z-index: 10; padding: 21px 21px 12px;
    background: #fffefaf5; backdrop-filter: blur(8px);
  }
  #modal:has(.tool-setup) .modal-head h2 { font-size: 24px; letter-spacing: -.7px; }
  #modal:has(.tool-setup) .modal-head > .close { margin-right: -4px; }
  #modal:has(.tool-setup) .modal-body { padding: 0 21px 22px; }
  .tool-hero { height: 149px; margin: -2px auto 14px; }
  .tool-hero::before { width: 232px; height: 122px; left: calc(50% - 116px); top: 13px; }
  .tool-object { scale: .92; margin-top: -2px; margin-right: 38px; }
  .tool-mascot { left: calc(50% + 47px); bottom: 20px; scale: .92; }
  .tool-form .field input:not([type="checkbox"]):not([type="radio"]), .tool-form .field select, .tool-form .field textarea { font-size: 16px; }
  #modal .tool-form .email-address-input input { font-size: 16px; }
  .email-domain { font-size: 12px; }
  .tool-form .switch-row { gap: 13px; }
  .tool-readiness { flex-wrap: wrap; }
  .tool-progress { gap: 11px; font-size: 10px; }
  .tool-balance { padding: 14px; gap: 10px; }
  .tool-balance strong { font-size: 21px; }
}
@media (max-width: 390px) {
  #modal:has(.tool-setup) .modal-body { padding-left: 18px; padding-right: 18px; }
  .email-address-input { align-items: stretch; flex-wrap: wrap; }
  #modal .tool-form .email-address-input input { width: 100%; flex-basis: 100%; min-height: 45px; padding: 10px 13px 6px; }
  .email-domain { max-width: 100%; flex: 1 1 100%; padding: 0 13px 11px; font-size: 12px; }
  .tool-form .fields-two { grid-template-columns: 1fr; gap: 0; }
  .tool-progress { gap: 8px; }
  .tool-progress b, .tool-progress i { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .advanced-settings > summary, .advanced-settings > summary > span,
  .tool-setup .switch-row input[type="checkbox"], .tool-setup .switch-row input[type="checkbox"]::after,
  .tool-setup input.tool-switch, .tool-setup input.tool-switch::after { transition: none; }
}