/* P13 (2026-08-22): premium AI interaction surface for the dashboard
   welcome/AI row. Previously .ds-welcome-banner/.ds-welcome-ai-row/
   .ds-ai-assistant-card had ZERO dedicated CSS anywhere in the frontend --
   confirmed by inspection -- rendering as unstyled blocks. This is the
   first real styling pass for that section. */
.ds-welcome-ai-row { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-3, 16px); margin-bottom: var(--space-3, 16px); }
@media (max-width: 900px) { .ds-welcome-ai-row { grid-template-columns: 1fr; } }

.ds-welcome-banner { background: linear-gradient(135deg, var(--ds-brand-start, #0b5ea8), var(--ds-brand-end, #06325c)); border-radius: 18px; padding: 22px 26px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ds-welcome-banner-copy h2 { margin: 0 0 6px; font-size: 19px; }
.ds-welcome-banner-copy p { margin: 0; color: rgba(255,255,255,.82); font-size: 13px; }

.ds-ai-assistant-card {
  position: relative; overflow: hidden; border-radius: 18px; padding: 20px;
  background: linear-gradient(160deg, #0c2b52, #0b5ea8 55%, #12a3c0);
  color: #fff; display: flex; flex-direction: column; gap: 8px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 34px rgba(6,40,80,.28);
}
.ds-ai-assistant-card--active { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.ds-ai-assistant-card--active:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(6,40,80,.36); }
.ds-ai-assistant-card--active:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ds-ai-assistant-card h3 { margin: 4px 0 2px; font-size: 15px; position: relative; z-index: 1; }
.ds-ai-assistant-card p { margin: 0 0 8px; font-size: 12.5px; color: rgba(255,255,255,.85); position: relative; z-index: 1; }
.ds-ai-assistant-card .ds-btn-primary { background: #fff; color: #0b5ea8; position: relative; z-index: 1; pointer-events: none; }

.ds-ai-assistant-icon {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255,255,255,.16); position: relative; z-index: 1;
}
.ds-ai-assistant-card--active .ds-ai-assistant-icon { animation: ds-ai-icon-pulse 2.6s ease-in-out infinite; }
@keyframes ds-ai-icon-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.35); } 50% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } }

/* Ambient glow -- subtle, single animated layer, not excessive per the
   round's own "avoid excessive animations" instruction. */
.ds-ai-assistant-glow {
  position: absolute; inset: -40%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 55%);
  animation: ds-ai-glow-drift 9s ease-in-out infinite alternate;
}
@keyframes ds-ai-glow-drift { from { transform: translate(-4%, -3%) scale(1); } to { transform: translate(4%, 3%) scale(1.08); } }

/* P16.1 -- signature robot illustration: a large, mostly-transparent line-art
   mark anchored to the card's end corner, sitting behind the real content
   (z-index:0, same layer as the glow). Doubles as a state indicator instead
   of pure decoration: eyes glow and pulse while the assistant is actually
   usable, sit flat/dim while unavailable -- so the one illustration reads
   correctly in both states without two different assets. */
.ds-ai-assistant-robot {
  position: absolute; z-index: 0; pointer-events: none;
  inset-inline-end: -22px; inset-block-end: -26px;
  width: 168px; height: 168px; color: #fff; opacity: .16;
}
.ds-ai-assistant-card--active .ds-ai-assistant-robot { opacity: .22; }
.ds-ai-robot-node { fill: currentColor; stroke: none; }
.ds-ai-robot-eye { fill: rgba(255,255,255,.55); stroke: none; }
.ds-ai-assistant-card--active .ds-ai-robot-eye { fill: #fff; animation: ds-ai-eye-glow 2.6s ease-in-out infinite; }
@keyframes ds-ai-eye-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50% { filter: drop-shadow(0 0 6px rgba(255,255,255,.9)); }
}
/* Dormant (unavailable/loading) state: same surface, quieter -- no glow
   layer, robot sits still and dim, communicating "asleep" rather than
   "broken". Loading vs. genuinely-unavailable still differ only in copy
   (see masar360-r1-overrides.js), matching the required loading/empty
   state distinction without a third visual variant. */
.ds-ai-assistant-card--dormant { background: linear-gradient(160deg, #14335a, #1c4a76 60%, #1f5f77); }
.ds-ai-assistant-card--dormant p { color: rgba(255,255,255,.72); }

@media (prefers-reduced-motion: reduce) {
  .ds-ai-assistant-card--active .ds-ai-assistant-icon, .ds-ai-assistant-glow, .ds-ai-assistant-card--active .ds-ai-robot-eye { animation: none; }
  .ds-ai-assistant-card--active:hover { transform: none; }
}