/* Scene 7 - the assistant that only proposes.
 * The real desktop layout: the week on the left, the AI side pane on the right. The pane holds the
 * empty state (badge + suggestions), the chat and the bulk proposal card (Approve / Reject); the
 * proposals show up in the week as dashed previews and turn solid when approved.
 * Reference: lib/screens/ai_chat.dart (empty state, proposal card, "Applied.", Undo toast), D-129 blocks. */
.ai-slot { left: max(33%, calc(var(--gutter) + min(24rem, 32vw) + 24px)); right: 108px; top: 70px; bottom: 22px; z-index: 3; }
.ai-copy { width: min(24rem, 32vw); }
.ai-copy .ticks li { --on: 0; transition: none;
  background: color-mix(in srgb, var(--accent-soft) calc(var(--on) * 100%), color-mix(in srgb, var(--surface) 70%, transparent));
  color: color-mix(in srgb, var(--accent-ink) calc(var(--on) * 100%), var(--ink-muted)); }
.ai-copy .ticks li::before { background: color-mix(in srgb, var(--accent-ink) calc(30% + var(--on) * 70%), var(--ink4)); }

/* ---- the window: week (left) + pane (right) ---- */
.appwin .win-main.ai-main { padding: 18px 18px 16px 4px; }
.ai-grid { position: relative; display: grid; grid-template-columns: 1fr 296px; gap: 14px; height: 100%; }
.ai-cal { min-width: 0; display: flex; flex-direction: column; }
.ai-cal .cal-month { font-size: 25px; }
.ai-cal .wk { --hr: 39px; --gut: 28px; }
.ai-cal .wk-body { height: calc(var(--hr) * 13); }
.ai-cal .wk-dh { font-size: 10px; }

/* a proposed change: dashed preview that becomes a solid block (--ap 0..1) */
.blk.pz { --ap: 0;
  background: color-mix(in srgb, var(--hs) calc(var(--ap) * 92%), color-mix(in srgb, var(--h) 9%, transparent));
  box-shadow: 0 2px 6px color-mix(in srgb, var(--shadow-c) calc(var(--ap) * 10%), transparent); }
.blk.pz::before { opacity: var(--ap); }
.blk.pz::after { content: ''; position: absolute; inset: 0; border-radius: 11px; pointer-events: none;
  border: 2px dashed color-mix(in srgb, var(--h) 78%, transparent); opacity: calc(1 - var(--ap)); }
.pz-tag { position: absolute; right: 3px; top: 3px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent2); color: var(--surface); opacity: calc(1 - var(--ap) * 1.4); }
.pz-tag .ms { font-size: 10px; font-variation-settings: 'FILL' 1; }
.blk.pz .blk-t { padding-right: 10px; }
.blk.pz.tiny .ms, .blk.pz.tiny .pz-tag { display: none; }
.blk.pz.tiny .blk-t { padding-right: 0; }
.ai-cal .blk { padding-left: 8px; }

/* ---- the AI pane ---- */
.ap { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 14px 14px 14px; border-radius: 28px; background: var(--surface);
  box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--line); z-index: 2; }
.ap-h { flex: none; display: flex; align-items: flex-start; justify-content: space-between; }
.ap-h h3 { font-size: 30px; line-height: 1.05; font-weight: 600; font-variation-settings: 'ROND' 100; }
.ap-sub { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 10px; white-space: nowrap; font-weight: 700; letter-spacing: 0.1px; color: var(--ink2); }
.ap-sub .ms { font-size: 13px; color: var(--accent2-ink); font-variation-settings: 'FILL' 1; }
.ap-hi { display: flex; gap: 2px; }
.ap-hi .ms { display: grid; place-items: center; width: 34px; height: 34px; font-size: 21px; color: var(--ink2); }
.ap-body { position: relative; flex: 1; min-height: 0; overflow: hidden; margin: 10px -2px 0; padding: 0 2px; }

.ap-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 14px; text-align: center; will-change: transform, opacity; }
.ap-badge { position: relative; display: grid; place-items: center; width: 74px; height: 74px; }
.ap-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ap-badge path { fill: var(--accent2); }
.ap-badge .ms { position: relative; font-size: 34px; color: var(--surface); font-variation-settings: 'FILL' 1; }
.ap-empty h4 { margin: 14px 0 0; font-size: 22px; line-height: 1.1; font-weight: 600; font-variation-settings: 'ROND' 100; }
.ap-empty p { margin-top: 8px; max-width: 25ch; font-size: 11.5px; line-height: 1.4; color: var(--ink2); }
.ap-chips { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-top: 14px; }
.ap-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px 0 10px; border-radius: 16px; background: color-mix(in srgb, var(--inset) 70%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--line2); font-size: 11.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.ap-chip .ms { font-size: 16px; color: var(--ink2); }

.ap-msgs { position: absolute; left: 2px; right: 2px; top: 0; display: flex; flex-direction: column; gap: 10px; will-change: transform; }
.ap-user { align-self: flex-end; max-width: 88%; padding: 9px 14px; border-radius: 20px 20px 6px 20px; background: var(--accent); color: var(--on-accent);
  font-size: 12.5px; line-height: 1.3; font-weight: 600; transform-origin: 100% 100%; opacity: 0; will-change: transform, opacity; }
.ap-bot { display: flex; align-items: flex-start; gap: 8px; opacity: 0; will-change: opacity; }
.ap-av { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--accent2) 22%, var(--surface)); color: var(--accent2-ink); }
.ap-av .ms { font-size: 15px; font-variation-settings: 'FILL' 1; }
.ap-bt { position: relative; min-width: 0; flex: 1; padding-top: 3px; }
.ap-txt { font-size: 12.5px; line-height: 1.42; color: var(--ink); }
.ap-txt .wd { display: inline-block; opacity: 0; will-change: opacity, transform; white-space: pre; }
.ap-dots { position: absolute; left: 0; top: 7px; display: flex; gap: 5px; opacity: 0; }
.ap-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent2); will-change: transform; }

.ap-card { --ap: 0; position: relative; padding: 13px 13px 11px; border-radius: 24px; background: var(--surface); opacity: 0; will-change: transform, opacity;
  box-shadow: var(--shadow-soft), inset 0 0 0 1.5px color-mix(in srgb, color-mix(in srgb, var(--health) calc(var(--ap) * 100%), var(--career)) 60%, transparent); }
.ap-ch { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; }
.ap-ch .tile { width: 34px; height: 34px; background: color-mix(in srgb, var(--health-soft) calc(var(--ap) * 100%), var(--career-soft));
  color: color-mix(in srgb, var(--health-ink) calc(var(--ap) * 100%), var(--career-ink)); }
.ap-ch .tile .ms { font-size: 20px; }
.ap-ct { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.ap-cs { margin-top: 2px; font-size: 10.5px; font-weight: 500; color: var(--ink2); }
.ap-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); will-change: transform, opacity; }
.ap-row .tile { width: 30px; height: 30px; border-radius: 11px; }
.ap-row .tile .ms { font-size: 18px; }
.ap-rt { min-width: 0; flex: 1; }
.ap-rn { font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-rw { margin-top: 1px; font-size: 10.5px; font-weight: 500; color: var(--ink2); white-space: nowrap; }
.ap-tk { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: color-mix(in srgb, var(--health) calc(var(--ap) * 100%), var(--accent)); color: var(--on-accent); }
[data-theme="dark"] .ap-tk { color: var(--bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ap-tk { color: var(--bg); } }
.ap-tk .ms { font-size: 14px; font-variation-settings: 'wght' 700; }
.ap-act { position: relative; height: 44px; margin-top: 8px; }
.ap-btns { display: flex; align-items: center; gap: 8px; will-change: opacity; }
.ap-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 20px; font-size: 13px; font-weight: 700;
  transition: transform var(--dur-spatial-fast) var(--ease-spatial-fast), border-radius var(--dur-spatial-fast) var(--ease-spatial-fast); }
.ap-approve { background: var(--accent); color: var(--on-accent); }
.ap-approve .ms { font-size: 18px; font-variation-settings: 'wght' 700; }
.ap-reject { color: var(--accent-ink); }
.ap-btn.is-press { transform: scale(0.94); border-radius: 14px; }
.ap-done { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding-left: 4px; font-size: 13px; font-weight: 700; color: var(--health-ink); opacity: 0; will-change: opacity, transform; }
.ap-done .ms { font-size: 22px; font-variation-settings: 'FILL' 1; }

.ap-in { flex: none; display: flex; align-items: center; gap: 8px; height: 46px; margin-top: 10px; padding: 0 5px 0 16px; border-radius: 23px; background: var(--inset); }
.ap-field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; height: 100%; overflow: hidden; white-space: nowrap; font-size: 12.5px; font-weight: 600; }
.ap-ph { position: absolute; left: 0; color: var(--ink3); font-weight: 500; }
.ap-typed { color: var(--ink); }
.ap-caret { flex: none; width: 1.5px; height: 16px; margin-left: 1px; background: var(--accent); opacity: 0; }
.ap-send { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--ink4) 60%, transparent); color: var(--surface);
  transition: background var(--dur-effects) var(--ease-effects), transform var(--dur-spatial-fast) var(--ease-spatial-fast); }
.ap-send .ms { font-size: 20px; font-variation-settings: 'wght' 600; }
.ap-send.on { background: var(--accent); color: var(--on-accent); }
.ap-send.is-press { transform: scale(0.88); }

.ai-main .toast { left: calc(4px + (100% - 4px - 18px - 310px) / 2); z-index: 30; }
.ai-main .toast b { transition: transform var(--dur-spatial-fast) var(--ease-spatial-fast); }
.ai-main .toast b.is-press { transform: scale(0.9); }

/* ---- mobile: the week on top, the pane as a sheet underneath ---- */
.appwin.is-m .win-main.ai-main { padding: 12px 12px 0; }
.appwin.is-m .ai-grid { display: block; }
.appwin.is-m .ai-cal .cal-head { height: 34px; }
.appwin.is-m .ai-cal .cal-month { font-size: 21px; }
.appwin.is-m .ai-cal .cal-seg { display: none; }
.appwin.is-m .ai-cal .wk { --gut: 24px; --hr: 13.5px; }
.appwin.is-m .ai-cal .wk-days { height: 36px; }
.appwin.is-m .ai-cal .wk-dh { font-size: 8.5px; }
.appwin.is-m .ai-cal .wk-dh b { width: 20px; height: 20px; font-size: 11px; }
.appwin.is-m .ai-cal .wk-body { height: calc(var(--hr) * 13); border-radius: 14px; }
.appwin.is-m .ai-cal .wk-hr { display: none; }
.appwin.is-m .ai-cal .blk { padding: 0; border-radius: 6px; }
.appwin.is-m .ai-cal .blk-t, .appwin.is-m .ai-cal .blk-m, .appwin.is-m .pz-tag { display: none; }
.appwin.is-m .ai-cal .blk::before { width: 2.5px; }
.appwin.is-m .blk.pz::after { border-width: 1.5px; border-radius: 6px; }
.appwin.is-m .ap { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 322px; padding: 11px 11px 10px; border-radius: 26px; }
.appwin.is-m .ap-h h3 { font-size: 22px; }
.appwin.is-m .ap-sub { margin-top: 2px; font-size: 9.5px; }
.appwin.is-m .ap-hi .ms { width: 26px; height: 26px; font-size: 18px; }
.appwin.is-m .ap-body { margin-top: 6px; }
.appwin.is-m .ap-badge { width: 52px; height: 52px; }
.appwin.is-m .ap-badge .ms { font-size: 25px; }
.appwin.is-m .ap-empty { padding-top: 4px; }
.appwin.is-m .ap-empty h4 { margin-top: 8px; font-size: 18px; }
.appwin.is-m .ap-empty p { margin-top: 4px; font-size: 10.5px; }
.appwin.is-m .ap-chips { gap: 5px; margin-top: 8px; }
.appwin.is-m .ap-chip { height: 27px; font-size: 10.5px; }
.appwin.is-m .ap-chip:nth-child(3) { display: none; }
.appwin.is-m .ap-msgs { gap: 7px; }
.appwin.is-m .ap-user { padding: 7px 12px; font-size: 11.5px; }
.appwin.is-m .ap-av { width: 22px; height: 22px; }
.appwin.is-m .ap-av .ms { font-size: 13px; }
.appwin.is-m .ap-txt { font-size: 11.5px; line-height: 1.38; }
.appwin.is-m .ap-card { padding: 10px 11px 8px; border-radius: 20px; }
.appwin.is-m .ap-ch { padding-bottom: 5px; }
.appwin.is-m .ap-ch .tile { width: 28px; height: 28px; }
.appwin.is-m .ap-ct { font-size: 12.5px; }
.appwin.is-m .ap-row { padding: 5px 0; }
.appwin.is-m .ap-row .tile { width: 26px; height: 26px; border-radius: 9px; }
.appwin.is-m .ap-row .tile .ms { font-size: 16px; }
.appwin.is-m .ap-rn { font-size: 11.5px; }
.appwin.is-m .ap-act { height: 38px; margin-top: 5px; }
.appwin.is-m .ap-btn { height: 34px; font-size: 12px; padding: 0 14px; }
.appwin.is-m .ap-in { height: 40px; margin-top: 7px; padding-left: 14px; }
.appwin.is-m .ap-send { width: 32px; height: 32px; }
.appwin.is-m .ap-field { font-size: 11.5px; }
.appwin.is-m .toast { left: 50%; bottom: auto; top: 98px; height: 32px; font-size: 11px; }

@media (max-width: 759px) {
  .ai-slot { left: 0; right: 0; top: 150px; bottom: 56px; }
  .ai-copy { width: auto; }
  .ai-copy .lead, .ai-copy .ticks { display: none; }
  .static .ai-copy .lead, .static .ai-copy .ticks { display: block; }
  .static .ai-copy .ticks { display: flex; }
  .static #ai .stage { min-height: 1120px; }
  .static #ai .ai-slot { top: 470px; bottom: 24px; }
}