/* Mobile: FundsConversation and RechargeContinuationConversation. */
.dui-funds-chat { background:#f2f6f1; }
.dui-chat-header { flex:none; display:flex; align-items:center; gap:.625em; padding:.875em 1em; min-height:4.75em; background:var(--dui-paper); border-bottom:1px solid var(--dui-line); }
.dui-chat-header>div { flex:1; min-width:0; }
.dui-chat-header h2 { font-size:1.1875em; line-height:1.25; }
.dui-chat-header small { display:block; font-size:.75em; color:var(--dui-muted); margin-top:.15em; }
.dui-chat-avatar { display:grid; place-items:center; flex:none; width:1.625em; height:1.625em; border-radius:50%; background:var(--dui-soft); color:var(--dui-ink); }
.dui-chat-avatar>.dui-mark { width:66%; height:66%; }
.dui-chat-header>.dui-chat-avatar { width:2.375em; height:2.375em; }
.dui-chat-transcript { flex:1; min-height:0; overflow:hidden; padding:1.125em 1em; }
.dui-chat-transcript.is-at-bottom { display:flex; flex-direction:column; justify-content:flex-end; }
.dui-chat-message { display:flex; align-items:flex-end; flex:none; gap:.5em; padding-right:1.625em; margin-bottom:.875em; }
.dui-chat-bubble { min-width:0; flex:1; background:white; border-radius:1.25em 1.25em 1.25em .25em; padding:.8125em 1em; line-height:1.4; }
.dui-chat-bubble .dui-chat-description { font-size:.875em; color:var(--dui-muted); margin-top:.5em; }
.dui-chat-bubble .dui-chat-identity-question { font-size:1.125em; line-height:1.45; }
.dui-chat-copy { display:flex; align-items:center; gap:.3em; margin-top:1em; }
.dui-chat-copy>strong { flex:1; font-size:1.125em; overflow-wrap:anywhere; }
.dui-chat-copy>.dui-icon { width:1.3125em; height:1.3125em; }
.dui-chat-reply { display:flex; align-items:center; gap:1em; width:fit-content; max-width:calc(100% - 3.375em); padding:.75em .875em .75em 1.125em; margin:0 0 1.125em auto; background:var(--dui-ink); color:white; border-radius:1.375em 1.375em .25em 1.375em; }
.dui-chat-reply strong { font-size:1.0625em; font-weight:600; }
.dui-chat-reply small { display:block; color:#c2d9c9; font-size:.75em; margin-bottom:.125em; }
.dui-chat-reply>.dui-icon { width:1.1875em; height:1.1875em; }
.dui-chat-balance { display:flex; flex-wrap:wrap; gap:.5em; margin:0 0 1.375em; }
.dui-chat-balance>span { color:var(--dui-muted); }
.dui-chat-dock { flex:none; padding:.75em 1em; background:var(--dui-paper); border-top:1px solid var(--dui-line); }
.dui-chat-input-row { display:flex; align-items:center; gap:.5em; }
.dui-chat-input { flex:1; min-width:0; padding:.875em 1em; border-radius:1.5em; background:white; }
.dui-chat-input>span { display:block; overflow-wrap:anywhere; }
.dui-chat-input .is-placeholder { color:var(--dui-muted); }
.dui-chat-input.is-amount { position:relative; border:1px solid var(--dui-line); font-size:1.5em; padding:.65em .6em; }
.dui-chat-input.is-amount>small { position:absolute; top:-.65em; left:1em; padding:0 .2em; background:white; color:var(--dui-muted); font-size:.5em; }
.dui-chat-send { display:grid; place-items:center; flex:none; width:3em; height:3em; border-radius:50%; background:var(--dui-ink); color:white; }
.dui-chat-send>.dui-icon { width:1.5em; height:1.5em; }
.dui-chat-helper { display:block; font-size:.75em; color:var(--dui-muted); margin-top:.65em; }
.dui-chat-action { display:flex; align-items:center; justify-content:center; min-height:3.7em; padding:1em 1.28em; border-radius:1.28em; color:white; background:var(--dui-ink); text-align:center; font-weight:600; font-size:.875em; }
.dui-chat-action.is-secondary { color:var(--dui-ink); background:white; border:1px solid var(--dui-line); font-weight:400; }
.dui-chat-text-action { text-align:center; padding:.8em; font-size:.875em; }
.dui-chat-quick-replies { display:flex; justify-content:center; gap:.5em; margin-bottom:.5em; }
.dui-chat-quick-replies>.dui-chat-action { padding:.65em .9em; min-height:2.75em; white-space:nowrap; font-size:.8125em; }
.dui-chat-options { padding-left:2.125em; }
.dui-chat-method { display:flex; align-items:center; gap:.75em; padding:1em; margin-bottom:.625em; border:1px solid var(--dui-ink); border-radius:1em; }
.dui-chat-method small { display:block; color:var(--dui-muted); margin-top:.2em; }
.dui-chat-banks { display:flex; gap:.5em; }
.dui-chat-banks>span { display:flex; align-items:center; gap:.4em; padding:.55em .7em; border:1px solid var(--dui-line); border-radius:.5em; }
.dui-chat-banks>.is-selected { background:var(--dui-soft); border-color:var(--dui-ink); }
.dui-chat-banks .dui-icon { width:1.1em; height:1.1em; }
.dui-chat-options .dui-chat-fee { margin:1.125em 0; }
.dui-chat-options .dui-chat-muted { color:var(--dui-muted); margin:.75em 0 1.25em; }
.dui-chat-companion { flex:none; padding:.5em 1em .625em; background:var(--dui-soft); border-bottom:1px solid var(--dui-line); }
.dui-chat-companion>div { display:flex; align-items:center; gap:.5em; }
.dui-chat-companion b { flex:1; font-size:.875em; }
.dui-chat-companion small { display:block; color:var(--dui-muted); font-size:.75em; margin-top:.4em; }
.dui-chat-companion .dui-icon { width:1.25em; height:1.25em; }
.dui-chat-toggle { display:block; position:relative; flex:none; width:3.125em; height:2em; border-radius:1.5em; background:var(--dui-line); border:2px solid var(--dui-muted); }
.dui-chat-toggle::after { content:''; position:absolute; top:.35em; left:.35em; height:1em; width:1em; border-radius:50%; background:var(--dui-muted); }
.dui-chat-toggle.is-on { border-color:var(--dui-ink); background:var(--dui-ink); }
.dui-chat-toggle.is-on::after { width:1.5em; height:1.5em; top:.1em; left:1.2em; background:white; }
.dui-chat-history-heading { display:flex; align-items:center; gap:.75em; margin:1.5em 0 .75em; }
.dui-chat-history-heading>span { flex:1; }
.dui-chat-history-heading .dui-icon { width:1.2em; height:1.2em; }
.dui-recharge-history { padding:.75em; border:1px solid var(--dui-line); border-radius:1em; background:var(--dui-paper); }
.dui-recharge-history h3 { font-size:1em; margin:0 0 .75em; }
.dui-recharge-history-item { display:flex; align-items:flex-start; gap:.65em; padding:.6em; border-radius:.75em; background:white; }
.dui-recharge-history-item>div { flex:1; min-width:0; }
.dui-recharge-history-item :is(small,strong) { display:block; }
.dui-recharge-history-item small { color:var(--dui-muted); overflow-wrap:anywhere; }
.dui-recharge-history-item strong { margin:.4em 0; }
.dui-recharge-history-icon,.dui-notification-icon { display:grid; place-items:center; flex:none; width:2.5em; height:2.5em; border-radius:50%; background:var(--dui-soft); }
.dui-recharge-status { display:flex; align-items:center; gap:.25em; width:fit-content; padding:.3em .5em; margin-bottom:.4em; border:1px solid var(--dui-line); border-radius:.5em; font-size:.8125em; }
.dui-recharge-status .dui-icon { width:1em; height:1em; }
.dui-recharge-notifications { padding:.875em 1.25em; }
.dui-recharge-notifications>h3 { margin:.8em 0 .4em; font-size:1.625em; }
.dui-recharge-notifications>p { color:var(--dui-muted); font-size:.875em; }
.dui-notification-filters { display:flex; flex-wrap:wrap; gap:.5em; margin:1.25em 0; }
.dui-notification-filters>span { padding:.5em .6em; border:1px solid var(--dui-line); border-radius:2em; font-size:.75em; }
.dui-notifications-intro-icon { color:var(--dui-accent); }
.dui-notification-tile { padding:.75em 1em 1em; border:1px solid var(--dui-line); border-radius:1.375em; background:var(--dui-soft); }
.dui-notification-tile-header { display:flex; align-items:center; gap:.625em; }
.dui-notification-tile-header>small { flex:1; font-weight:700; }
.dui-notification-tile-header .dui-notification-icon { background:white; border-radius:.875em; }
.dui-notification-tile h3 { font-size:1.125em; margin:.5em 0; }
.dui-notification-tile p,.dui-notification-tile small { color:var(--dui-muted); font-size:.8125em; }
.dui-notification-details { display:grid; gap:.6em; border-top:1px solid var(--dui-line); margin-top:1em; padding-top:1em; font-size:.8125em; }
.dui-notification-details>span { display:flex; justify-content:space-between; gap:.5em; }

/* Neutral bank demo: same editable canvas, visually separate from Danta. */
.dui-bank { background:#f6f9fc; color:#173350; }
.dui-bank-header { display:flex; align-items:center; gap:.75em; flex:none; background:#183a5b; color:white; padding:1.2em 1em; }
.dui-bank-header>span { display:grid; place-items:center; width:2.5em; height:2.5em; border:1px solid #ffffff4d; border-radius:.7em; }
.dui-bank-header>div { flex:1; }
.dui-bank-header small { display:block; color:#cfdeea; }
.dui-bank-content { flex:1; min-height:0; overflow:hidden; padding:1.35em 1em; }
.dui-bank-content>h2 { font-size:1.35em; margin-bottom:1.25em; }
.dui-bank-content>h3 { font-size:1em; margin:1.5em 0 .8em; }
.dui-bank-balance { display:grid; gap:.5em; padding:1.5em; background:#e5edf5; border-radius:1.25em; }
.dui-bank-balance>strong { font-size:2em; }
.dui-bank-option { display:flex; align-items:center; gap:.75em; padding:1.1em 1em; margin:.75em 0; border:1px solid #cedbe7; border-radius:1em; background:white; }
.dui-bank-option>div,.dui-bank-option>b { flex:1; }
.dui-bank-option small { display:block; color:#566b80; }
.dui-bank-field { display:grid; gap:.5em; padding:1em; border:1px solid #cedbe7; border-radius:.8em; margin:.9em 0; background:white; overflow-wrap:anywhere; }
.dui-bank-field small { color:#566b80; }
.dui-bank-field.is-empty>strong { font-weight:400; color:#738393; }
.dui-bank-recipient { display:flex; align-items:center; gap:.75em; padding:1em; background:#e5edf5; border-radius:1em; }
.dui-bank-recipient small { display:block; margin-top:.4em; color:#566b80; }
.dui-bank-content .dui-bank-note { color:#566b80; margin:1.2em 0; font-size:.875em; }
.dui-bank-summary { display:grid; gap:.4em; margin:1em 0 1.5em; }
.dui-bank-summary small { color:#566b80; }
.dui-bank-review .dui-bank-field { border-width:0 0 1px; border-radius:0; margin:0; padding:.9em 0; background:transparent; }
.dui-bank-footer { flex:none; padding:.5em 1em 1em; }
.dui-bank-action { display:flex; align-items:center; justify-content:center; padding:1em; min-height:3em; background:#183a5b; color:white; border-radius:2em; font-weight:700; font-size:.875em; }
.dui-bank-success { display:grid; place-items:center; width:4em; height:4em; border-radius:50%; color:#25704d; background:#e2f0e7; margin:1em auto 2em; }
.dui-bank-success>.dui-icon { width:2em; height:2em; }
.dui-bank-receipt { display:grid; gap:1em; padding:1.3em; background:white; border:1px solid #cedbe7; border-radius:1.25em; text-align:center; }
.dui-bank-receipt strong { font-size:1.5em; letter-spacing:.03em; }
.dui-bank-receipt>span { display:flex; justify-content:center; align-items:center; gap:.5em; font-size:.875em; }

/* Horizontal recent-app switch. The destination grows into the actual screen. */
.dui-app-switch { position:relative; background:linear-gradient(150deg,#a6b9aa,#dce6e0 70%); overflow:hidden; }
.dui-switch-title { position:absolute; top:5%; left:8%; color:#173f31; font-size:.9em; }
.dui-switch-card { position:absolute; left:3%; top:20%; width:45%; height:58%; transition:top .8s ease,left .8s ease,width .8s ease,height .8s ease,transform .8s ease,opacity .5s ease; }
.dui-switch-card.is-bank { left:52%; }
.dui-switch-card-window { position:relative; width:100%; height:100%; border-radius:1.2em; overflow:hidden; box-shadow:0 1em 2em #122c3440; background:var(--dui-paper); }
.dui-switch-card-content { width:222.222%; height:222.222%; transform:scale(.45); transform-origin:top left; transition:width .8s ease,height .8s ease,transform .8s ease; }
.dui-switch-card-label { display:flex; align-items:center; justify-content:center; gap:.35em; margin-top:.75em; font-size:.75em; }
.dui-switch-card-label .dui-mark,.dui-switch-card-label .dui-icon { width:1.5em; height:1.5em; }
.dui-switch-hint { position:absolute; bottom:6%; left:0; width:100%; text-align:center; font-size:.875em; }
.tutorial-player-root[data-active-phase="detail"] .dui-tutorial-screen.is-active .dui-switch-card.is-target { left:0; top:0; width:100%; height:100%; }
.tutorial-player-root[data-active-phase="detail"] .dui-tutorial-screen.is-active .dui-switch-card.is-source { transform:translateX(-130%); opacity:0; }
.tutorial-player-root[data-active-phase="detail"] .dui-tutorial-screen.is-active [data-switch-destination="danta"] .dui-switch-card.is-source { transform:translateX(130%); }
.tutorial-player-root[data-active-phase="detail"] .dui-tutorial-screen.is-active .is-target .dui-switch-card-content { width:100%; height:100%; transform:scale(1); }
.tutorial-player-root[data-active-phase="detail"] .dui-tutorial-screen.is-active .is-target .dui-switch-card-window { border-radius:0; }
.tutorial-player-root[data-active-phase="detail"] .dui-tutorial-screen.is-active :is(.dui-switch-card-label,.dui-switch-title,.dui-switch-hint) { opacity:0; }
@media(prefers-reduced-motion:reduce) { .dui-switch-card,.dui-switch-card-content { transition:none; } }