/* Shared feature pieces used by more than one page. Tokens, controls and the shell
   live in portal.css; anything used by a single page belongs in that page's
   stylesheet (retail_page_start 'styles'). */

/* Feature cards: plans, packages, endpoints, rate cards, uploads */
.package-card,.shop-package,.shop-package-panel,.endpoint-card,.api-guide-card,.payg-card,.greeting-upload-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-xs);transition:border-color var(--t-fast),box-shadow var(--t-med) var(--ease),transform var(--t-med) var(--ease)}
.package-card:hover,.shop-package:hover,.endpoint-card:hover,.api-guide-card:hover,.payg-card:hover{border-color:var(--accent-line);box-shadow:var(--shadow-sm)}
.package-card.featured,.shop-package.featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow-sm)}
.package-mark,.package-choice-icon,.api-guide-icon,.greeting-list-icon{display:grid;place-items:center;flex:none;border:0;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent-text);box-shadow:none}
.app-page :is(.assistant-discovery,.credit-summary.billing-surface,.assistant-plan-card.billing-surface.active){border:1px solid var(--accent-line);background:color-mix(in srgb,var(--accent-soft) 55%,var(--surface));box-shadow:none}
.app-page .billing-surface .billing-surface{border:0;border-radius:0;background:transparent;box-shadow:none}
.app-page .billing-surface details:not(.panel):not(.user-menu)>summary{border-radius:var(--r-sm)}
.app-page .billing-facts{border-color:var(--line)}

/* Plan management disclosure (calls, number settings, assistant) */
.package-manage{margin-top:14px;border-top:1px solid var(--line)}
.package-manage>summary{width:fit-content;padding:12px 0 2px;color:var(--muted);font-size:.875rem;font-weight:650;list-style:none;cursor:pointer}
.package-manage>summary:hover{color:var(--text)}
.package-manage>summary::-webkit-details-marker{display:none}
.package-manage>summary::after{content:'';display:inline-block;width:6px;height:6px;margin:0 0 2px 8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform var(--t-fast) var(--ease)}
.package-manage[open]>summary::after{transform:rotate(45deg)}
.package-manage-body{display:grid;justify-items:start;gap:8px;margin-top:10px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.package-manage-body>strong{font-size:.875rem}
.package-manage-body>p{max-width:600px;margin:0;color:var(--muted);font-size:.875rem;line-height:1.55}
.package-cancel-action{padding-left:0;color:var(--bad)}
.package-cancel-action:hover{color:var(--bad)}
.package-manage-prominent{margin-top:16px}
.package-manage-prominent>summary{color:var(--bad)}
.package-manage-prominent>summary .bx{margin-right:4px}
.package-ending{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:14px;padding:12px 14px;border:1px solid var(--warn-line);border-radius:var(--r-md);background:var(--warn-soft)}
.package-ending strong{display:block;color:var(--text);font-size:.875rem}
.package-ending strong .bx{margin-right:4px;color:var(--warn)}
.package-ending p{margin:4px 0 0;color:var(--text-2);font-size:.875rem;line-height:1.45}

/* "More options" disclosures (calls plans, setup purposes) */
.secondary-plans,.specialist-purpose{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.secondary-plans>summary,.specialist-purpose>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:inherit;list-style:none;cursor:pointer;transition:background-color var(--t-fast)}
.secondary-plans>summary:hover,.specialist-purpose>summary:hover{background:var(--surface-3)}
.secondary-plans>summary::-webkit-details-marker,.specialist-purpose>summary::-webkit-details-marker{display:none}
.secondary-plans>summary>span,.specialist-purpose>summary>span{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;align-items:center}
.secondary-plans>summary>span>i,.specialist-purpose>summary>span>i{grid-row:1/3;color:var(--accent);font-size:1.25rem}
.secondary-plans summary strong,.secondary-plans summary small,.specialist-purpose summary strong,.specialist-purpose summary small{display:block}
.secondary-plans summary strong,.specialist-purpose summary strong{font-size:.875rem}
.secondary-plans summary small,.specialist-purpose summary small{margin-top:2px;color:var(--muted);font-size:.8125rem}
.secondary-plans>summary>i,.specialist-purpose>summary>i{color:var(--muted);transition:transform var(--t-med) var(--ease)}
.secondary-plans[open]>summary>i,.specialist-purpose[open]>summary>i{transform:rotate(180deg)}
.secondary-plans>.secondary-plans-body,.specialist-purpose>.purpose-grid{animation:disclosure-in var(--t-med) var(--ease)}

/* Money summaries (credit, shop) */
.credit-breakdown{margin:18px 0;padding:14px 0;border-block:1px solid var(--line)}
.credit-breakdown>div{display:flex;justify-content:space-between;gap:18px;margin:8px 0;font-size:.875rem}
.credit-breakdown dt{color:var(--text-2)}
.credit-breakdown dd{flex:none;margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.credit-secure-note{display:flex;align-items:flex-start;gap:6px;margin:12px 0 0;color:var(--muted);font-size:.8125rem;line-height:1.5}
.credit-row-icon{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent-text);font-size:1.125rem}

/* Account disclosures (insights, credit, settings) and statement rows */
.app-page .account-disclosure{margin-top:12px}
.app-page .account-disclosure>summary{min-height:60px;padding:16px var(--card-pad);font-size:1rem}
.app-page .account-overview+.account-disclosure,.app-page .account-disclosure+.account-links,.app-page .account-disclosure+.account-disclosure{margin-top:16px}
.app-page :is(.statement-entry,.recent-call)>summary{min-height:64px}

/* Automatic renewal payments (credit page and the home prompt) */
.credit-autopay .alert{margin:0 0 16px}
.autopay-lead{margin:0;color:var(--text);font-size:1rem;font-weight:650;line-height:1.5}
.autopay-note{margin:8px 0 0;color:var(--muted);font-size:.9375rem;line-height:1.6}
.autopay-card{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.autopay-card+.autopay-note{margin-top:16px}
.autopay-card>div{flex:1;min-width:0}
.autopay-card strong{display:block;font-size:.9375rem;overflow-wrap:anywhere}
.autopay-card small{display:block;color:var(--muted);font-size:.8125rem;font-variant-numeric:tabular-nums}
.autopay-status{flex:none;padding:3px 10px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--muted);font-size:.75rem;font-weight:700;line-height:1.4}
.autopay-status.on{background:var(--ok-soft);color:var(--ok)}
.autopay-actions{display:grid;gap:6px;margin-top:20px}
.autopay-actions form{margin:0}
.autopay-card-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px}
.app-page .autopay-card-actions .btn{min-height:44px;padding:10px 14px}
.credit-autopay .credit-secure-note{margin-top:16px}

/* Holiday preview chips (call handling; built by retail.js) */
.holiday-preview-empty{color:var(--muted);font-size:.875rem}
.holiday-preview-count{flex:0 0 100%;margin-bottom:2px;color:var(--text-2);font-size:.875rem;font-weight:650}
.holiday-date-chip,.holiday-date-more{padding:4px 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--text-2);font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums;animation:holidayChipIn var(--t-med) var(--ease) both;animation-delay:calc(var(--chip-order,0) * 18ms)}
.holiday-date-more{border-style:dashed;background:transparent;color:var(--accent-text);animation:none}

/* Integration dialogs (integrations page and assistant) */
.connect-dialog{width:min(520px,calc(100vw - 32px));padding:0;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg)}
.connect-dialog::backdrop{background:var(--overlay);backdrop-filter:blur(3px)}
.connect-dialog form{display:grid;gap:16px;padding:26px}
.connect-dialog h2{margin:0;font-size:1.25rem;letter-spacing:-.02em}
.connect-dialog label>span{display:block;margin-bottom:7px;color:var(--text-2);font-size:.875rem;font-weight:650}
.connect-dialog-actions{display:flex;justify-content:flex-end;gap:10px}

/* AI data permission: dialog on every page and its own page */
.ai-permission-dialog{width:min(560px,calc(100vw - 28px));max-height:88dvh;padding:0;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg)}
.ai-permission-dialog::backdrop{background:var(--overlay);backdrop-filter:blur(3px)}
.ai-permission-body{padding:26px 24px 12px;font-size:1rem;line-height:1.55}
.ai-permission-body h2,.ai-permission-page h1{margin:8px 0 12px;font-size:1.625rem;font-weight:650;letter-spacing:-.035em;line-height:1.15}
.ai-permission-body>p,.ai-permission-page>p{margin:0 0 12px}
.ai-recipients{display:grid;gap:10px;margin:4px 0 16px}
.ai-recipients>section{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.ai-recipients h3{font-size:.9375rem}
.ai-recipients p{margin-top:4px;font-size:.875rem;line-height:1.55;color:var(--text-2)}
.ai-recipients p strong{font-weight:650;color:var(--text)}
.ai-permission-detail{color:var(--muted);font-size:.875rem;line-height:1.6}
.ai-permission-actions{position:sticky;bottom:0;display:grid;gap:8px;padding:16px 24px max(20px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface)}
.ai-permission-actions .btn{width:100%;min-height:48px;white-space:normal}
.ai-permission-page{max-width:650px;margin:0 auto;padding:4px 0 30px;font-size:1rem;line-height:1.6}
.ai-permission-page form{margin:22px 0}
.ai-permission-status{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--accent-line);border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent-text);font-weight:650}
[data-ai-error]{padding:12px 14px;border:1px solid var(--bad-line);border-radius:var(--r-md);background:var(--bad-soft);color:var(--bad)}

/* Confirmations (retail.js confirmAction) and one-time secrets */
.confirm-dialog{width:min(440px,calc(100vw - 32px));padding:0}
.confirm-dialog form{display:grid;gap:20px;padding:24px}
.confirm-dialog-body{display:grid;justify-items:start;gap:8px}
.confirm-dialog-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:4px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent-text);font-size:1.35rem}
.confirm-dialog.is-danger .confirm-dialog-icon{background:var(--bad-soft);color:var(--bad)}
.confirm-dialog h2{margin:0;font-size:1.15rem;font-weight:650;letter-spacing:-.02em;line-height:1.3}
.confirm-dialog p{margin:0;color:var(--text-2);font-size:.9375rem;line-height:1.55}
.confirm-dialog-actions{display:flex;justify-content:flex-end;gap:10px}
.confirm-dialog-accept{position:relative;overflow:hidden;isolation:isolate}
.confirm-dialog.is-danger .confirm-dialog-accept{border-color:var(--bad);background:var(--bad);color:#fff}
.confirm-hold-fill{position:absolute;inset:0;z-index:-1;background:rgb(0 0 0 / 22%);transform:scaleX(0);transform-origin:left}
.confirm-dialog.is-hold .confirm-dialog-accept{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.confirm-dialog.is-holding .confirm-hold-fill{transform:scaleX(1);transition:transform 900ms linear}
.secret-reveal{display:grid;gap:12px;margin-bottom:18px;padding:16px;border:1px solid var(--accent-line);border-radius:var(--r-lg);background:var(--accent-soft)}
.secret-reveal-head{display:flex;align-items:center;gap:12px}
.secret-reveal-head strong{display:block;font-size:.9375rem}
.secret-reveal-head span:not(.ui-icon-tile){display:block;color:var(--text-2);font-size:.8125rem}
.secret-reveal-value{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.secret-reveal-value code{flex:1 1 260px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font-size:.875rem;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}
.secret-reveal-value code.is-masked{-webkit-user-select:none;user-select:none;letter-spacing:.06em;color:var(--text-2)}
.secret-reveal-done{justify-self:start}
.secret-reveal.is-leaving{opacity:0;transform:translateY(-4px)}

/* Behaviour hooks */
[data-routing-panel][hidden]{display:none!important}
[data-preview-voice].is-playing i,[data-play-greeting].is-playing i{animation:sa-voice-pulse .85s ease-in-out infinite alternate}

@media(max-width:720px){
 .holiday-date-chip{max-width:100%}
}
@media(max-width:620px){
 .package-ending{flex-direction:column;align-items:stretch}
 .package-ending .btn{width:100%}
}
@media(prefers-reduced-motion:no-preference){
 .connect-dialog[open]{animation:sa-rise 280ms var(--ease)}
 .confirm-dialog.is-danger .confirm-dialog-icon{animation:sa-confirm-nudge 420ms var(--spring) 120ms}
 [data-secret-copy].is-copied i{animation:sa-copied 380ms var(--spring)}
 .secret-reveal{animation:sa-rise 320ms var(--ease)}
 .secret-reveal.is-leaving{transition:opacity 220ms ease,transform 260ms var(--ease)}
 .ai-permission-dialog[open]{animation:ai-permission-in var(--t-med) var(--ease)}
}
@media(prefers-reduced-motion:reduce){
 .holiday-date-chip,.secondary-plans>.secondary-plans-body,.specialist-purpose>.purpose-grid{animation:none}
}

/* Shared animations used by page stylesheets */
@keyframes sa-voice-pulse{to{transform:scale(1.28);opacity:.55}}
@keyframes chart-rise{from{transform:scaleY(0)}}
@keyframes hour-grow{from{transform:scaleX(0)}}
@keyframes setup-fields-in{from{opacity:0;transform:translateY(-4px)}}
@keyframes holidayChipIn{from{opacity:0;transform:translateY(3px)}}
@keyframes disclosure-in{from{opacity:0;transform:translateY(-3px)}}
@keyframes popover-in{from{opacity:0;transform:translateY(-4px) scale(.99)}}
@keyframes sa-rise{from{opacity:0;transform:translateY(14px) scale(.985)}}
@keyframes sa-ring-fill{from{stroke-dashoffset:289}}
@keyframes sa-confirm-nudge{30%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}}
@keyframes sa-copied{from{transform:scale(.4)}}
@keyframes ai-permission-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}