/* Sample app surroundings use their own visual identities, outside native Console. */
.experience-shell {
 --xp-accent: light-dark(#6650a8,#c5b4f4); --xp-soft: light-dark(#efeaf9,#342b47);
 --xp-border: light-dark(#e1dee8,#423d4b); --xp-surface: light-dark(#fff,#242229);
 --xp-bg: light-dark(#f7f6fa,#1d1b22); --xp-muted: light-dark(#6d657b,#bfb7cd);
 display: grid; grid-template-columns: 190px minmax(0,1fr); height: calc(100dvh - var(--sample-bar-height,77px));
 background: var(--xp-bg); color: light-dark(#302b3a,#f0ecf6); min-height: 0; overflow: hidden;
}
.experience-shell--crm { --xp-accent: light-dark(#26695c,#a1d6c7); --xp-soft: light-dark(#e7f1ed,#293d36); --xp-border: light-dark(#dce5df,#3a4841); --xp-surface: light-dark(#fff,#232b26); --xp-bg: light-dark(#f5f8f5,#1c231f); --xp-muted: light-dark(#617268,#b3c5b8); color: light-dark(#2a3a30,#e9f1eb); }
.experience-shell--chatbot { --xp-accent: light-dark(#9a5225,#f2bc94); --xp-soft: light-dark(#f8ebdf,#453426); --xp-border: light-dark(#eadfd4,#4b4035); --xp-surface: light-dark(#fffcf8,#2b2520); --xp-bg: light-dark(#faf6f0,#231e1a); --xp-muted: light-dark(#786958,#cabcaa); color: light-dark(#3a3027,#f3ece2); }
.experience-shell button,.experience-login button,.experience-shell textarea { font: inherit; }
.experience-shell button:focus-visible,.experience-login button:focus-visible,.experience-shell textarea:focus-visible { outline: 3px solid var(--xp-accent,#be7d48); outline-offset: 3px; }
.experience-shell svg { flex: none; width: 18px; height: 18px; }
.experience-sidebar { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; padding: 26px 16px 18px; border-inline-end: 1px solid var(--xp-border); background: var(--xp-surface); }
.experience-sidebar > p { margin: 12px 10px 4px; color: var(--xp-muted); font-size: 10px; font-weight: 600; }
.experience-sidebar nav,.experience-history { display: grid; gap: 7px; }
.experience-sidebar button { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 10px 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--xp-muted); text-align: start; font-size: 12px; }
.experience-sidebar button:hover,.experience-sidebar [aria-current] { color: var(--xp-accent); background: var(--xp-soft); }
.experience-sidebar .experience-new { border-color: var(--xp-border); color: inherit; font-weight: 600; }
.experience-history button { align-items: flex-start; font-size: 11px; line-height: 1.65; }
.experience-history svg { width: 15px; height: 15px; margin-top: 2px; }
.experience-sidebar-footer { display: flex; gap: 9px; align-items: center; margin-top: auto; padding: 18px 6px 0; font-size: 11px; font-weight: 600; }
.experience-sidebar-footer img { border-radius: 8px; }
.experience-sidebar-footer small { display: block; color: var(--xp-muted); font-size: 9px; font-weight: 400; }
.experience-workspace { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 0 32px 20px; }
.experience-content { flex: 1; min-height: 0; padding: 26px 2px 24px; overflow: auto; scrollbar-width: thin; }
.experience-heading,.experience-stats,.experience-dashboard { width: min(100%,1040px); margin-inline: auto; }
.experience-kicker { margin: 0 0 8px; color: var(--xp-accent); font-size: 10px; font-weight: 600; }
.experience-heading h1 { margin: 0; font-size: clamp(24px,2.3vw,34px); line-height: 1.2; letter-spacing: -.04em; }
.experience-heading > p:last-child { margin: 10px 0 22px; color: var(--xp-muted); font-size: 12px; }
.experience-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 20px; }
.experience-stats > div { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--xp-border); border-radius: 12px; background: var(--xp-surface); }
.experience-stats svg { color: var(--xp-accent); width: 24px; height: 24px; padding: 0; }
.experience-stats span { display: block; color: var(--xp-muted); font-size: 11px; }
.experience-stats strong { display: block; margin-top: 3px; font-size: 25px; line-height: 1.2; letter-spacing: -.04em; }
.experience-dashboard { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 18px; }
.experience-customers,.experience-activity { min-width: 0; padding: 18px 20px; border: 1px solid var(--xp-border); border-radius: 12px; background: var(--xp-surface); }
.experience-dashboard h2 { margin: 0 0 18px; font-size: 13px; letter-spacing: -.02em; }
.experience-table-heading { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--xp-border); color: var(--xp-muted); font-size: 9px; }
.experience-customer { display: flex; align-items: center; gap: 10px; padding: 13px 0; }
.experience-customer + .experience-customer { border-top: 1px solid var(--xp-border); }
.experience-initials { display: grid; flex: none; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: var(--xp-soft); color: var(--xp-accent); font-size: 9px; font-weight: 650; }
.experience-customer strong { display: block; font-size: 11px; }
.experience-customer small { display: block; margin-top: 2px; font-size: 9px; color: var(--xp-muted); }
.experience-customer-status { margin-inline-start: auto; max-width: 100px; padding-inline-start: 8px; font-size: 9px; color: var(--xp-accent); text-align: end; }
.experience-activity > div { display: flex; align-items: center; gap: 10px; margin: 20px 0; font-size: 11px; line-height: 1.7; }
.experience-activity > div > span:first-child { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1px solid var(--xp-border); border-radius: 50%; font-size: 9px; color: var(--xp-muted); }
.experience-welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 780px; min-height: 100%; margin: auto; padding: 28px 20px; text-align: center; }
.experience-welcome[hidden] { display: none; }
.experience-welcome-mark { margin-bottom: 22px; }
.experience-welcome-mark img { border-radius: 17px; box-shadow: 0 0 0 9px var(--xp-soft); }
.experience-welcome h1 { max-width: 600px; margin: 0; font-size: clamp(28px,3vw,44px); letter-spacing: -.05em; line-height: 1.15; text-wrap: balance; }
.experience-welcome > p { max-width: 450px; margin: 16px 0 24px; font-size: 13px; line-height: 1.8; color: var(--xp-muted); }
.experience-ideas { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; width: 100%; margin-top: 12px; }
.experience-ideas button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 66px; padding: 16px; border: 1px solid var(--xp-border); border-radius: 12px; background: var(--xp-surface); color: inherit; text-align: start; font-size: 12px; }
.experience-ideas button:hover { border-color: var(--xp-accent); }
.experience-ideas button > span:last-child { color: var(--xp-accent); }
.experience-greeting { display: flex; align-items: center; gap: 12px; align-self: flex-start; padding: 14px 18px; border-radius: 16px 16px 16px 4px; background: var(--xp-soft); text-align: start; }
.experience-greeting p { margin: 0; font-size: 12px; line-height: 1.8; }
.experience-assistant { flex: none; align-self: center; width: min(100%,800px); padding: 18px 20px 12px; border: 1px solid var(--xp-border); border-radius: 16px; background: var(--xp-surface); box-shadow: 0 8px 24px #00000006; }
.experience-assistant-heading { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; letter-spacing: -.02em; }
.experience-assistant-heading svg { color: var(--xp-accent); }
.experience-helper { margin: 8px 0 14px; font-size: 11px; line-height: 1.7; color: var(--xp-muted); }
.experience-suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.experience-suggestions button { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--xp-border); border-radius: 7px; background: var(--xp-bg); color: var(--xp-accent); font-size: 10px; text-align: start; }
.experience-question { display: flex; align-items: center; gap: 10px; padding: 8px 9px 8px 14px; border: 1px solid var(--xp-border); border-radius: 10px; background: var(--xp-bg); }
.experience-question:focus-within { border-color: var(--xp-accent); }
.experience-question textarea { flex: 1; min-width: 0; height: 60px; resize: none; padding: 10px 0; border: 0; border-radius: 3px; background: transparent; color: inherit; font-size: 12px; line-height: 20px; }
.experience-question textarea::placeholder { color: var(--xp-muted); opacity: 1; }
.experience-question textarea[readonly] { cursor: pointer; }
.experience-question button { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; background: var(--xp-accent); color: var(--xp-surface); }
.experience-question-help { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 10px 0 0; color: var(--xp-muted); font-size: 10px; line-height: 1.6; text-align: center; }
.experience-question-help svg { width: 13px; height: 13px; }
.experience-messages { width: min(100%,740px); margin: auto; }
.experience-exchange { margin-bottom: 24px; font-size: 13px; line-height: 1.9; }
.experience-user-message { width: fit-content; max-width: 90%; margin-inline-start: auto; padding: 12px 18px; border-radius: 14px 14px 3px 14px; background: var(--xp-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.experience-exchange small { color: var(--xp-muted); font-size: 10px; }
.experience-answer { margin: 6px 0 0; padding: 14px 18px; border: 1px solid var(--xp-border); border-radius: 3px 14px 14px; background: var(--xp-surface); }
.experience-wallet-next { margin: 14px 0 0; padding: 18px; border: 1px solid var(--xp-border); border-inline-start: 3px solid var(--xp-accent); border-radius: 12px; background: var(--xp-surface); }
.experience-wallet-next-heading { display: flex; align-items: center; gap: 9px; color: var(--xp-accent); }
.experience-wallet-next h2 { margin: 0; font-size: 12px; font-weight: 650; line-height: 1.5; }
.experience-wallet-next p { margin: 10px 0 16px; font-size: 13px; line-height: 1.8; }
.experience-wallet-next button { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 100%; min-height: 42px; padding: 11px 14px; border: 1px solid #ffb07a; border-radius: 8px; background: #ffb07a; color: #2a1b10; font-size: 12px; font-weight: 650; text-align: start; }
.experience-wallet-next button:hover { background: #ffc496; }
@media(max-width:600px){.experience-wallet-next{padding:15px}.experience-wallet-next p{font-size:12px}.experience-wallet-next button{width:100%;font-size:11px}}
@media(max-width:700px),(max-height:600px){
 .has-wallet-next .experience-assistant{padding:10px 12px}
 .has-wallet-next .experience-assistant-heading{font-size:12px;margin-bottom:6px}
 .has-wallet-next .experience-helper,.has-wallet-next .experience-suggestions,.has-wallet-next .experience-question-help{display:none}
 .has-wallet-next .experience-question{padding:5px 8px 5px 12px}
 .has-wallet-next .experience-question textarea{height:42px;padding-block:5px}
}
.experience-login { width: min(460px,calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; border: 1px solid light-dark(#e2d7cd,#5b4c3e); border-radius: 20px; background: light-dark(#fffdfa,#27231e); color: light-dark(#312b25,#f1e9df); box-shadow: 0 24px 80px #0004; }
.experience-login::backdrop { background: #14141c88; backdrop-filter: blur(5px); }
.experience-login[open] { display: flex; flex-direction: column; }
.experience-login-top { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px 0 24px; font-size: 11px; font-weight: 600; }
.experience-login-top button { width: 32px; height: 32px; border: 1px solid light-dark(#e9dfd4,#54483b); border-radius: 9px; background: transparent; color: inherit; font-size: 22px; }
.experience-login-body { min-height: 0; overflow: auto; padding: 20px 28px 8px; text-align: center; }
.experience-login-mark { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 24px; color: light-dark(#94602d,#e9b585); }
.experience-login-mark > svg { width: 42px; height: 42px; padding: 8px; background: light-dark(#f7e7d4,#493827); border-radius: 12px; }
.experience-login-mark img { border-radius: 11px; }
.experience-login h2 { margin: 0; font-size: 25px; line-height: 1.2; letter-spacing: -.04em; text-wrap: balance; }
.experience-login h2:focus { outline: none; }
.experience-login-body p { margin: 16px auto 0; font-size: 13px; line-height: 1.8; color: light-dark(#756351,#cabcaa); }
.experience-login-body .experience-login-note { max-width: 330px; font-size: 11px; }
.experience-login-actions { display: grid; flex: none; gap: 8px; padding: 20px 28px; }
.experience-login-actions > button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 11px 14px; border: 0; border-radius: 9px; background: transparent; color: inherit; font-size: 12px; font-weight: 600; }
.experience-login-actions > [data-pay] { background: #ffb07a; color: #2a1b10; }
.experience-login-actions svg { width: 19px; height: 19px; }
.experience-login-actions > [data-pay] > span:last-child { margin-inline-start: auto; }
@media(max-width:1000px){.experience-shell{grid-template-columns:160px minmax(0,1fr)}.experience-workspace{padding-inline:22px}.experience-dashboard{grid-template-columns:1fr}.experience-activity{display:none}.experience-ideas{grid-template-columns:1fr;gap:8px}.experience-ideas button{min-height:44px;padding:12px 16px}}
@media(max-width:700px){
 .experience-shell{grid-template-columns:minmax(0,1fr)}.experience-sidebar{display:none}.experience-workspace{padding:0 16px 12px}.experience-content{padding-block:20px 18px}
 .experience-heading h1{font-size:27px}.experience-heading>p:last-child{margin-bottom:16px;font-size:11px}.experience-kicker{font-size:9px}
 .experience-stats{gap:8px;margin-bottom:14px}.experience-stats>div{padding:11px 12px;gap:0}.experience-stats svg{display:none}.experience-stats span{font-size:10px}.experience-stats strong{font-size:23px}
 .experience-customers{padding:16px}.experience-dashboard h2{margin-bottom:13px}.experience-customer{padding-block:10px}.experience-customer:last-child{display:none}
 .experience-assistant{padding:14px 14px 10px;border-radius:13px}.experience-assistant-heading{font-size:12px;gap:7px}.experience-helper{font-size:10px;margin:7px 0 12px}
 .experience-suggestions{gap:6px;flex-wrap:nowrap;overflow:auto;padding:2px 2px 7px;margin-bottom:6px;scrollbar-width:thin}.experience-suggestions button{white-space:nowrap;padding:6px 9px;font-size:9px}
 .experience-question{padding-inline-start:10px;gap:7px}.experience-question textarea{font-size:11px}.experience-question-help{font-size:9px;gap:5px}
 .experience-welcome{padding:24px 8px}.experience-welcome h1{font-size:31px}.experience-welcome>p{font-size:12px;margin-block:14px 18px}.experience-welcome-mark{margin-bottom:20px}.experience-welcome-mark img{width:44px;height:44px;border-radius:13px}
 .experience-ideas button{font-size:11px;min-height:43px}.experience-greeting{padding:10px 14px}.experience-greeting p{font-size:11px}
 .experience-login-body{padding-inline:22px}.experience-login h2{font-size:23px}.experience-login-actions{padding:16px 22px}
}
@media(max-height:600px){
 .experience-content{padding-top:18px}.experience-assistant{padding:12px 14px 10px}.experience-helper{display:none}.experience-assistant-heading{font-size:12px;margin-bottom:10px}.experience-suggestions{margin-bottom:9px}.experience-question-help{margin-top:8px}.experience-welcome{justify-content:flex-start;padding-block:22px}
}
@media(max-height:360px){
 .experience-assistant{padding:9px 10px 8px}.experience-assistant-heading,.experience-suggestions,.experience-question-help{display:none}.experience-workspace{padding-bottom:8px}
 .experience-login-top{padding-block-start:8px}.experience-login-body{padding:12px 20px}.experience-login-actions{padding:10px 20px;gap:4px}.experience-login-actions>button{min-height:34px;padding-block:8px}.experience-login-mark{display:none}
}

@media(max-width:700px) and (max-height:600px){.experience-shell--crm .experience-heading>p:last-child{display:none}.experience-shell--crm .experience-heading{margin-bottom:16px}.experience-shell--crm .experience-heading h1{font-size:24px}}

.experience-content:focus-visible{outline:2px solid var(--xp-accent);outline-offset:-2px;border-radius:8px}

.experience-wallet{display:flex;flex:none;align-items:center;gap:18px;width:min(100%,1040px);margin:18px auto 0;padding:13px 16px;border:1px solid var(--xp-border);border-radius:12px;background:var(--xp-surface)}
.experience-wallet-heading{display:flex;align-items:center;gap:10px;min-width:0;margin-inline-end:auto;color:var(--xp-accent)}
.experience-wallet-heading>svg{width:24px;height:24px}
.experience-wallet strong{display:block;font-size:11px;line-height:1.6}
.experience-wallet small{display:block;max-width:280px;font-size:9px;line-height:1.6;color:var(--xp-muted)}
.experience-wallet-account{display:flex;align-items:center;gap:9px;text-align:start}
.experience-wallet-account img{border-radius:50%;object-fit:cover;flex:none}
.experience-wallet-account strong{display:block;font-size:11px;line-height:1.6}
.experience-wallet-account small{display:block;font-size:9px;line-height:1.6;color:var(--xp-muted)}
.experience-wallet-balance{flex:none;text-align:end}
.experience-wallet-balance strong{font-size:16px;font-weight:600;white-space:nowrap}
.experience-wallet-balance small{font-size:9px;color:var(--xp-muted);display:block}
.experience-wallet>button{display:flex;align-items:center;gap:10px;flex:none;min-height:36px;padding:8px 11px;border:1px solid var(--xp-border);border-radius:8px;background:var(--xp-soft);color:var(--xp-accent);font-size:10px;font-weight:600}
.experience-tour-account{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:20px 0 0;padding:16px;border:1px solid light-dark(#e5d8ca,#5b4b3b);border-radius:12px;background:light-dark(#faf5ed,#30291f)}
.experience-tour-account small{color:light-dark(#776352,#cabcaa)}
.experience-wallet-tour [data-explore-wallet]{background:#ffb07a;color:#2a1b10}
.experience-wallet-tour [data-explore-wallet] svg{width:19px;height:19px}
.experience-wallet-tour [data-explore-wallet]>span:last-child{margin-inline-start:auto}
.experience-wallet-tour .experience-login-mark{margin-bottom:20px}
@media(max-width:850px){.experience-wallet{flex-wrap:wrap;gap:12px;padding:12px}.experience-wallet-heading{flex-basis:100%}.experience-wallet-account{margin-inline-end:auto}.experience-wallet-balance strong{font-size:14px}.experience-wallet>button{padding:7px 9px;font-size:9px}.experience-wallet small{max-width:none}}
@media(max-height:450px){.experience-wallet{padding:8px 12px;margin-top:10px;gap:8px 12px}.experience-wallet-heading{flex-basis:auto}.experience-wallet-heading small,.experience-wallet-account small{display:none}.experience-wallet-heading strong{font-size:10px}.experience-wallet-account img{width:24px;height:24px}}
@media(max-height:360px){.experience-login-body .experience-login-note{display:none}.experience-wallet-tour .experience-tour-account{padding:10px;margin-top:12px}}

/* The next chapter is available as soon as authorization/payment completes. */
.experience-workspace>.experience-wallet-next{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 22px;flex-shrink:0;padding:12px 16px;margin:12px 0 0}
.experience-workspace>.experience-wallet-next p{margin:0;font-size:12px;line-height:1.65;grid-column:1}
.experience-workspace>.experience-wallet-next button{grid-column:2;grid-row:1/3;align-self:center}
@media(max-width:650px){.experience-workspace>.experience-wallet-next{grid-template-columns:minmax(0,1fr);padding:12px;gap:7px}.experience-workspace>.experience-wallet-next button{grid-column:1;grid-row:auto;min-height:38px;padding:8px 11px}.experience-workspace>.experience-wallet-next p{font-size:11px}}
@media(max-height:450px){.experience-workspace>.experience-wallet-next{padding:8px 12px;gap:3px 14px}.experience-workspace>.experience-wallet-next p{font-size:10px}.experience-workspace>.experience-wallet-next button{font-size:10px;min-height:36px;padding:8px 10px}.experience-workspace{overflow-y:auto}.experience-wallet{flex-shrink:0}}

.experience-wallet-next-heading .experience-wallet-repeat{width:auto;flex:0 1 auto;min-width:0;max-width:65%;margin-inline-start:auto;min-height:28px;padding:4px 0;border:0;background:transparent;color:var(--xp-accent);font-size:10px;line-height:1.5;text-decoration:underline;text-underline-offset:3px}
.experience-wallet-next-heading .experience-wallet-repeat:hover{background:transparent}
.experience-login-step{margin:0 0 12px!important;color:light-dark(#924410,#ffb47e);font-size:10px!important;font-weight:650}