/* ==== Demo inbox animatif (dibangkitkan oleh tools/build-inbox-demo.py) ==== */
.idm { position: relative; width: 100%; aspect-ratio: 1600 / 846; overflow: hidden; background: #fff; }
.idm-base { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.idm-ov { position: absolute; display: block; overflow: visible; will-change: transform, opacity; }
.idm-clip { position: absolute; overflow: hidden; }
.idm text { user-select: none; }

/* posisi awal (state statis / reduced motion) */
.idm-newrow, .idm-badge, .idm-aisugg, .idm-aitext, .idm-sendon, .idm-stat-new, .idm-label-panel, .idm-label-row, .idm-lead-new, .idm-resolved, .idm-ping, .idm-pingdot, .idm-cursor,
.idm-typing, .idm-dots, .idm-msgin, .idm-msgout, .idm-tick-blue, .idm-snippet, .idm-rowtime, .idm-aisummary { opacity: 0; }
.idm-lead-bar { transform: scaleX(0.34); transform-origin: left center; }
.idm-dots { position: absolute; display: flex; justify-content: space-between; align-items: center; will-change: opacity; }
.idm-dots i { display: block; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #9b9ba1; will-change: transform; }

/* kursor: layer seukuran stage, translate dalam persen = koordinat stage */
.idm-cursor { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; will-change: transform; }
.idm-cursor svg { position: absolute; left: 0; top: 0; width: 1.6%; height: auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); }
.idm-click { position: absolute; left: 0; top: 0; width: 2.2%; aspect-ratio: 1; border-radius: 50%; background: #2f6fd6; opacity: 0; transform: translate(-40%, -40%) scale(0); }

@media (prefers-reduced-motion: no-preference) {
  /* timeline 16 s */
  @keyframes idm-newrow   { 0%,4% { transform: translateY(-40%); opacity: 0; } 9%,88% { transform: none; opacity: 1; } 94%,100% { transform: translateY(-40%); opacity: 0; } }
  @keyframes idm-rows     { 0%,4% { transform: none; } 9%,88% { transform: translateY(14.286%); } 94%,100% { transform: none; } }
  @keyframes idm-rowinfo  { 0%,26% { opacity: 0; transform: translateY(490.000%); } 28%,88% { opacity: 1; transform: translateY(490.000%); } 94%,100% { opacity: 0; transform: translateY(490.000%); } }
  @keyframes idm-aisummary { 0%,31% { opacity: 0; transform: translateY(-6%); } 33%,39% { opacity: 1; transform: none; } 41%,100% { opacity: 0; transform: translateY(-6%); } }
  @keyframes idm-labelrow { 0%,64% { opacity: 0; transform: translateY(466.667%) scale(0.8); } 68%,88% { opacity: 1; transform: translateY(466.667%); } 94%,100% { opacity: 0; transform: translateY(466.667%); } }
  @keyframes idm-badge    { 0%,10% { opacity: 0; transform: scale(0.3); } 13%,79% { opacity: 1; transform: none; } 82%,100% { opacity: 0; transform: scale(0.3); } }
  @keyframes idm-ping     { 0%,5% { transform: scale(1); opacity: 0.6; } 9% { transform: scale(2.8); opacity: 0; } 10% { transform: scale(1); opacity: 0.6; } 14% { transform: scale(2.8); opacity: 0; } 15%,100% { transform: scale(1); opacity: 0; } }
  @keyframes idm-pingdot  { 0%,5% { opacity: 0; } 6%,78% { opacity: 1; } 80%,100% { opacity: 0; } }
  @keyframes idm-typing   { 0%,12% { opacity: 0; transform: translateY(-200.000%); } 14%,22% { opacity: 1; transform: translateY(-200.000%); } 24%,100% { opacity: 0; transform: translateY(-200.000%); } }
  @keyframes idm-dots     { 0%,12% { opacity: 0; transform: translateY(-400.000%); } 14%,22% { opacity: 1; transform: translateY(-400.000%); } 24%,100% { opacity: 0; transform: translateY(-400.000%); } }
  @keyframes idm-dot      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-45%); } }
  @keyframes idm-msgin    { 0%,25% { opacity: 0; transform: translate(-3%, -118.033%); } 28%,54% { opacity: 1; transform: translateY(-131.148%); } 59%,90% { opacity: 1; transform: translateY(-245.902%); } 95%,100% { opacity: 0; transform: translateY(-245.902%); } }
  @keyframes idm-chat     { 0%,9% { transform: none; } 13%,54% { transform: translateY(-11.111%); } 59%,100% { transform: translateY(-20.833%); } }
  @keyframes idm-aichip   { 0%,27% { transform: scale(1); } 30% { transform: scale(1.1); } 32% { transform: scale(1); } 34% { transform: scale(1.1); } 36%,100% { transform: scale(1); } }
  @keyframes idm-aisugg   { 0%,35% { opacity: 0; transform: translateY(60%); } 39%,51% { opacity: 1; transform: none; } 54%,100% { opacity: 0; transform: translateY(60%); } }
  @keyframes idm-aitext   { 0%,45% { opacity: 0; } 46%,57% { opacity: 1; } 58%,100% { opacity: 0; } }
  @keyframes idm-sendon   { 0%,45% { opacity: 0; } 46%,57% { opacity: 1; } 58%,100% { opacity: 0; } }
  @keyframes idm-send     { 0%,55% { transform: scale(1); } 56.5% { transform: scale(0.82); } 58%,100% { transform: scale(1); } }
  @keyframes idm-msgout   { 0%,57% { opacity: 0; transform: translate(3%, -232.787%); } 61%,90% { opacity: 1; transform: translateY(-245.902%); } 95%,100% { opacity: 0; transform: translateY(-245.902%); } }
  @keyframes idm-tickblue { 0%,67% { opacity: 0; } 69%,90% { opacity: 1; } 95%,100% { opacity: 0; } }
  @keyframes idm-tickgray { 0%,60% { opacity: 0; } 61%,67% { opacity: 1; } 69%,100% { opacity: 0; } }
  @keyframes idm-statold  { 0%,62% { opacity: 1; } 64%,88% { opacity: 0; } 94%,100% { opacity: 1; } }
  @keyframes idm-statnew  { 0%,62% { opacity: 0; } 64%,88% { opacity: 1; } 94%,100% { opacity: 0; } }
  @keyframes idm-label    { 0%,64% { opacity: 0; transform: scale(0.8); } 68%,88% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }
  @keyframes idm-leadbar  { 0%,62% { transform: scaleX(0.34); } 70%,88% { transform: scaleX(0.84); } 94%,100% { transform: scaleX(0.34); } }
  @keyframes idm-leadnew  { 0%,66% { opacity: 0; } 70%,88% { opacity: 1; } 94%,100% { opacity: 0; } }
  @keyframes idm-leadold  { 0%,66% { opacity: 1; } 70%,88% { opacity: 0; } 94%,100% { opacity: 1; } }
  @keyframes idm-resolve  { 0%,76% { transform: scale(1); } 77.5% { transform: scale(0.9); } 79%,100% { transform: scale(1); } }
  @keyframes idm-resolved { 0%,79% { opacity: 0; transform: scale(0.9); } 82%,91% { opacity: 1; transform: none; } 95%,100% { opacity: 0; } }
  @keyframes idm-cursor   {
    0%,3%   { opacity: 0; transform: translate(47%, 62%); }
    6%,22%  { opacity: 1; transform: translate(47%, 62%); }
    28%,35% { transform: translate(72.062%, 12.766%); }   /* chip Ringkasan AI */
    41%,46% { transform: translate(71.125%, 85.934%); }   /* tombol Pakai */
    51%,58% { transform: translate(75.375%, 91.608%); }   /* tombol kirim */
    72%,80% { transform: translate(69.938%, 3.901%); }    /* tombol Resolve */
    88%,100%{ opacity: 0; transform: translate(47%, 62%); }
  }
  @keyframes idm-click    {
    0%,29% { transform: translate(-40%,-40%) scale(0); opacity: 0; } 30% { transform: translate(-40%,-40%) scale(0.4); opacity: 0.5; } 33% { transform: translate(-40%,-40%) scale(1.8); opacity: 0; }
    34%,43% { transform: translate(-40%,-40%) scale(0); opacity: 0; } 44% { transform: translate(-40%,-40%) scale(0.4); opacity: 0.5; } 47% { transform: translate(-40%,-40%) scale(1.8); opacity: 0; }
    48%,55% { transform: translate(-40%,-40%) scale(0); opacity: 0; } 56% { transform: translate(-40%,-40%) scale(0.4); opacity: 0.5; } 59% { transform: translate(-40%,-40%) scale(1.8); opacity: 0; }
    60%,76% { transform: translate(-40%,-40%) scale(0); opacity: 0; } 77% { transform: translate(-40%,-40%) scale(0.4); opacity: 0.5; } 80% { transform: translate(-40%,-40%) scale(1.8); opacity: 0; }
    81%,100% { transform: translate(-40%,-40%) scale(0); opacity: 0; }
  }

  .idm-newrow    { animation: idm-newrow 16s ease-in-out infinite; }
  .idm-rows      { animation: idm-rows 16s ease-in-out infinite; }
  .idm-label-row { animation: idm-labelrow 16s ease-out infinite; }
  .idm-snippet, .idm-rowtime { animation: idm-rowinfo 16s ease-out infinite; }
  .idm-aisummary { animation: idm-aisummary 16s ease-out infinite; }
  .idm-badge     { animation: idm-badge 16s ease-out infinite; }
  .idm-ping      { animation: idm-ping 16s ease-out infinite; }
  .idm-pingdot   { animation: idm-pingdot 16s steps(1) infinite; }
  .idm-chat      { animation: idm-chat 16s ease-in-out infinite; }
  .idm-typing    { animation: idm-typing 16s steps(1) infinite; }
  .idm-dots      { animation: idm-dots 16s steps(1) infinite; }
  .idm-dots i    { animation: idm-dot 0.9s ease-in-out infinite; }
  .idm-dots i:nth-child(2) { animation-delay: 0.15s; } .idm-dots i:nth-child(3) { animation-delay: 0.3s; }
  .idm-msgin     { animation: idm-msgin 16s ease-out infinite; }
  .idm-msgout    { animation: idm-msgout 16s ease-out infinite; }
  .idm-tick-blue { animation: idm-tickblue 16s steps(1) infinite; }
  .idm-tick-gray { animation: idm-tickgray 16s steps(1) infinite; }
  .idm-tick-gray, .idm-tick-blue { transform: translateY(-937.500%); }
  .idm-aichip    { animation: idm-aichip 16s ease-in-out infinite; }
  .idm-aisugg    { animation: idm-aisugg 16s ease-out infinite; }
  .idm-aitext    { animation: idm-aitext 16s steps(1) infinite; }
  .idm-sendon    { animation: idm-sendon 16s steps(1) infinite; }
  .idm-send, .idm-sendon { animation-name: idm-send; }
  .idm-send      { animation: idm-send 16s ease-in-out infinite; }
  .idm-sendon    { animation: idm-sendon 16s steps(1) infinite, idm-send 16s ease-in-out infinite; }
  .idm-stat-old  { animation: idm-statold 16s steps(1) infinite; }
  .idm-stat-new  { animation: idm-statnew 16s steps(1) infinite; }
  .idm-label-panel { animation: idm-label 16s ease-out infinite; }
  .idm-lead-bar  { animation: idm-leadbar 16s ease-in-out infinite; }
  .idm-lead-new  { animation: idm-leadnew 16s steps(1) infinite; }
  .idm-lead-old  { animation: idm-leadold 16s steps(1) infinite; }
  .idm-resolve   { animation: idm-resolve 16s ease-in-out infinite; }
  .idm-resolved  { animation: idm-resolved 16s ease-out infinite; }
  .idm-cursor    { animation: idm-cursor 16s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
  .idm-click     { animation: idm-click 16s ease-out infinite; }
  .idm-ov { transform-origin: center; }
  .idm-lead-bar { transform-origin: left center; }
}
@media (prefers-reduced-motion: reduce) {
  /* keadaan akhir yang statis dan lengkap */
  .idm-newrow, .idm-badge, .idm-label-panel, .idm-stat-new, .idm-lead-new { opacity: 1; }
  .idm-stat-old, .idm-lead-old { opacity: 0; }
  .idm-rows { transform: translateY(14.286%); }
  .idm-label-row { opacity: 1; transform: translateY(466.667%); }
  .idm-snippet, .idm-rowtime { opacity: 1; transform: translateY(490.000%); }
  .idm-chat { transform: translateY(-20.833%); }
  .idm-msgin, .idm-msgout { opacity: 1; transform: translateY(-245.902%); }
  .idm-tick-blue { opacity: 1; transform: translateY(-937.500%); }
  .idm-lead-bar { transform: scaleX(0.84); }
}

/* ---- Kamera mobile: mengikuti aksi (shot persegi dalam ruang 1600x846) ---- */
@media (max-width: 640px) {
  .window { height: auto; aspect-ratio: 1 / 1.1; }
  .window .idm { width: 100%; margin: 0; transform-origin: 0 0; transform: scale(2.6578) translate(-40.062%, -10.638%); }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes idm-cam {
      0%,11%  { transform: scale(2.5000) translate(0.000%, 0.000%); }
      13%,27% { transform: scale(2.6578) translate(-40.062%, -10.638%); }
      29%,38% { transform: scale(2.9630) translate(-43.750%, -4.728%); }
      40%,58% { transform: scale(2.6578) translate(-40.062%, -35.461%); }
      60%,70% { transform: scale(2.6667) translate(-62.500%, -29.078%); }
      72%,85% { transform: scale(2.6667) translate(-56.250%, 0.000%); }
      89%,100%{ transform: scale(2.5000) translate(0.000%, 0.000%); }
    }
    .window .idm { animation: idm-cam 16s cubic-bezier(0.5, 0, 0.2, 1) infinite; will-change: transform; }
  }
  /* kursor & klik diperkecil relatif zoom */
  .idm-cursor svg { width: 1.1%; }
  .idm-click { width: 1.6%; }
}