/* SMAU FILE
 * Path: css/smau-catchup.css
 * Owns: the "While you were away" card (js/smau.catchup.js) — a read of what
 * really happened while the phone was out of your hand. OS chrome, above app
 * views, below calls.
 */

#smau-catchup {
  position: absolute;
  inset: 0;
  z-index: 288;
  display: none;
}
#smau-catchup[data-state="open"] { display: block; }

#smau-catchup .catchup-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 12, 0.5);
}

#smau-catchup .catchup-card {
  position: absolute;
  left: 12px; right: 12px; top: 56px;
  max-height: 68%;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: rgba(20, 24, 34, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  color: #fff;
  overflow: hidden;
  animation: catchupIn 220ms ease-out;
}
@keyframes catchupIn {
  from { transform: translateY(-14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #smau-catchup .catchup-card { animation: none; }
}

#smau-catchup .catchup-head {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 14px 4px;
}
#smau-catchup .catchup-title { flex: 1; font-size: 15px; font-weight: 800; }
#smau-catchup .catchup-close {
  width: 28px; height: 28px; border: none; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.8);
}
#smau-catchup .catchup-sub {
  padding: 0 14px 10px;
  font-size: 11.5px;
  opacity: 0.6;
}

#smau-catchup .catchup-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 12px;
  -webkit-overflow-scrolling: touch;
}

#smau-catchup .catchup-empty {
  font-size: 12.5px; line-height: 1.55; opacity: 0.65; padding: 10px 2px 16px;
}

#smau-catchup .catchup-group-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
  font-weight: 800; opacity: 0.5; margin: 10px 2px 5px;
}

#smau-catchup .catchup-item {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; box-sizing: border-box; text-align: left;
  padding: 8px 10px; margin-bottom: 5px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #fff;
}
#smau-catchup button.catchup-item { cursor: pointer; }
#smau-catchup .catchup-when {
  flex: 0 0 auto; font-size: 10.5px; opacity: 0.5;
  font-variant-numeric: tabular-nums; padding-top: 2px; min-width: 42px;
}
#smau-catchup .catchup-what { flex: 1; min-width: 0; }
#smau-catchup .catchup-what b { display: block; font-size: 12.5px; font-weight: 700; }
#smau-catchup .catchup-what span {
  display: block; font-size: 11px; opacity: 0.6; margin-top: 2px; line-height: 1.4;
}