/* CNP Assurances "Alix" — Customer App · component classes */
* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body { background: var(--surface-1); font-family: var(--font-sans); color: var(--ink); }
a { text-decoration: none; }

.aly-grid { display: grid; grid-template-columns: 0.62fr 1.38fr; gap: 48px; align-items: start; }
@media (max-width: 1080px) { .aly-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 760px) { .nav-links { display: none !important; } }

.aly-btn-primary { display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 15px; padding: 12px 22px; border-radius: 999px;
  background: var(--aig-blue); color: #fff; box-shadow: var(--shadow-soft);
  transition: background .28s var(--ease-out), box-shadow .28s var(--ease-out), transform .12s; white-space: nowrap; }
.aly-btn-primary:hover { background: var(--navy-700); box-shadow: var(--shadow-glow); }
.aly-btn-primary:active { transform: scale(0.98); }
.aly-btn-ghost { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ink-line);
  cursor: pointer; font-family: inherit; font-weight: 600; font-size: 15px; padding: 12px 20px; border-radius: 999px;
  background: #fff; color: var(--ink-soft); transition: all .2s; white-space: nowrap; }
.aly-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.aly-chip { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-weight: 500; font-size: 14.5px; padding: 10px 16px; border: 1px solid var(--ink-line);
  background: rgba(255,255,255,0.8); color: var(--ink-soft); transition: all .2s; }
.aly-chip:hover { border-color: var(--aig-blue); color: var(--aig-blue); background: #fff; box-shadow: var(--shadow-soft); }
.aly-chip-static { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
  font-size: 12px; font-weight: 600; padding: 5px 11px; background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--ink-line); white-space: nowrap; }

.aly-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 10px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
.aly-pill-blue { background: var(--blue-mist); color: var(--aig-blue); }
.aly-pill-mint { background: var(--mint-tint); color: var(--success-fg); }

.aly-glass { background: rgba(255,255,255,0.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.6); box-shadow: var(--shadow-glass); }
.aly-card { background: #fff; border: 1px solid var(--ink-line); border-radius: 18px; box-shadow: var(--shadow-card); }
.aly-note { display: flex; align-items: flex-start; gap: 9px; padding: 12px 15px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(0,24,113,.04), rgba(0,155,166,.04)); border: 1px solid rgba(0,24,113,.12);
  font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.aly-icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--ink-line); background: rgba(255,255,255,.7); color: var(--ink-muted); cursor: pointer; transition: all .2s; }
.aly-icon-btn:hover { color: var(--aig-blue); border-color: var(--aig-blue); }

.aly-chat-scroll::-webkit-scrollbar { width: 8px; }
.aly-chat-scroll::-webkit-scrollbar-thumb { background: rgba(0,24,113,.14); border-radius: 999px; }
.aly-chat-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,24,113,.26); }

@keyframes aly-spin { to { transform: rotate(360deg); } }
.aly-spin { animation: aly-spin 1s linear infinite; }
@keyframes aly-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.aly-pulse { animation: aly-pulse 1.8s ease-in-out infinite; }
@keyframes aly-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.aly-float { animation: aly-float 8s ease-in-out infinite; }
@keyframes aly-scan { 0% { top: 4%; } 100% { top: 92%; } }
.aly-scan { animation: aly-scan 1.15s ease-in-out infinite alternate; }
@keyframes aly-ring { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(2.5); opacity: 0; } }
.aly-ring { animation: aly-ring 2.8s ease-out infinite; }
.aly-hscroll { scrollbar-width: none; -ms-overflow-style: none; }
.aly-hscroll::-webkit-scrollbar { display: none; }
.aly-garage { transition: transform .18s var(--ease-out), box-shadow .2s, border-color .2s; }
.aly-garage:hover { transform: translateY(-2px); box-shadow: var(--shadow-card) !important; border-color: var(--aig-blue) !important; }
.aly-garage:hover .aly-garage-ic { transform: scale(1.07); }
.aly-garage-ic { transition: transform .18s var(--ease-out); }

/* gold "optional upgrade" button */
.aly-btn-gold { display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 15px; padding: 12px 22px; border-radius: 999px;
  background: linear-gradient(135deg, var(--upgrade), var(--upgrade-700)); color: #fff; box-shadow: 0 10px 26px rgba(184,132,26,.34);
  transition: filter .2s, box-shadow .25s, transform .12s; white-space: nowrap; }
.aly-btn-gold:hover { filter: brightness(1.06); box-shadow: 0 16px 38px rgba(184,132,26,.42); }
.aly-btn-gold:active { transform: scale(0.98); }

/* generic hover-lift for widget cards */
.aly-lift { transition: transform .22s var(--ease-out), box-shadow .26s var(--ease-out); }
.aly-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

/* carousel media: gentle ken-burns zoom on hover */
.aly-vcard-media img { transition: transform .5s var(--ease-out); }
.aly-vcard:hover .aly-vcard-media img { transform: scale(1.045); }
.aly-carousel-arrow:hover { transform: translateY(-50%) scale(1.08); box-shadow: var(--shadow-glow) !important; }

/* soft cross-fade for swapped reasoning text */
@keyframes aly-fade-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.aly-fade { animation: aly-fade-in .4s var(--ease-out); }

/* damage detected-row hover */
.aly-dmg-row { transition: transform .16s var(--ease-out), box-shadow .2s, border-color .2s, background .2s; }
.aly-dmg-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); border-color: var(--aig-blue) !important; }

/* photo tiles + dropzones */
.aly-photo { transition: transform .2s var(--ease-out), box-shadow .22s; }
.aly-photo:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.aly-dropzone:hover:not(:disabled) { border-color: var(--aig-blue) !important; background: #fff !important; box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.aly-dropzone { transition: transform .18s var(--ease-out), box-shadow .2s, border-color .2s, background .2s; }

/* selectable option cards (consistency-check resolution) */
.aly-option { display: flex; align-items: center; gap: 13px; width: 100%; cursor: pointer; font-family: inherit;
  padding: 13px 15px; border-radius: 16px; background: #fff; border: 1.5px solid var(--ink-line);
  box-shadow: var(--shadow-xs); transition: transform .16s var(--ease-out), box-shadow .22s, border-color .2s, background .2s; }
.aly-option:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--aig-blue); }
.aly-option:active { transform: translateY(0) scale(.995); }
.aly-option-rec { border-color: rgba(0,163,231,.45); background: linear-gradient(180deg,#ffffff,#f1f7fe); }
.aly-option-rec:hover { box-shadow: var(--shadow-glow); }
.aly-option-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; transition: transform .18s var(--ease-out); }
.aly-option:hover .aly-option-ic { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .aly-float, .aly-pulse, .aly-spin, .aly-scan, .aly-fade { animation: none; } .aly-lift:hover, .aly-vcard:hover .aly-vcard-media img, .aly-photo:hover, .aly-dropzone:hover { transform: none; } }