.client-update-notice {
  position: fixed;
  right: var(--wds-space-5);
  bottom: calc(var(--wds-space-24) + var(--wds-space-5) + var(--wizon-safe-bottom));
  z-index: var(--wds-z-toast);
  display: grid;
  width: min(19rem, calc(100vw - (var(--wds-space-4) * 2)));
  padding: var(--wds-space-4);
  border: 1px solid var(--wizon-ai-popover-border);
  border-radius: var(--wizon-ai-radius-popover);
  background: var(--wizon-ai-popover-bg);
  box-shadow: var(--wizon-ai-popover-shadow);
  color: var(--wizon-ai-text-primary);
  font-family: var(--wizon-ai-font-family);
  animation: client-update-notice-enter var(--wizon-ai-motion-surface-duration) var(--wizon-ai-ease-enter);
}

.client-update-notice[hidden],
.client-update-notice__secondary[hidden],
.client-update-notice__highlights[hidden] {
  display: none;
}

.client-update-notice__summary {
  display: grid;
  grid-template-columns: var(--wds-space-12) minmax(0, 1fr);
  gap: var(--wds-space-3);
  align-items: start;
}

.client-update-notice__visual {
  display: grid;
  width: var(--wds-space-12);
  height: var(--wds-space-12);
  place-items: center;
  border: 1px solid var(--wizon-ai-popover-border);
  border-radius: var(--wizon-ai-radius-pill);
  background: var(--wizon-ai-account-avatar-bg);
  color: var(--wizon-ai-account-avatar-fg);
}

.client-update-notice__visual .wds-inline-icon {
  width: var(--wds-space-5);
  height: var(--wds-space-5);
}

.client-update-notice__heading {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding-block-start: 1px;
}

.client-update-notice__heading strong {
  font-size: var(--wds-font-size-body-1);
  font-weight: var(--wds-font-weight-semibold);
  line-height: var(--wds-line-height-tight);
  letter-spacing: -0.01em;
}

.client-update-notice__badge {
  color: var(--wizon-ai-account-avatar-fg);
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-semibold);
  line-height: var(--wds-line-height-label);
}

.client-update-notice__description {
  margin: 2px 0 0;
  color: var(--wizon-ai-text-muted);
  font-size: var(--wds-font-size-caption);
  line-height: var(--wds-line-height-normal);
}

.client-update-notice__actions {
  display: grid;
  margin-block-start: var(--wds-space-4);
}

.client-update-notice__primary,
.client-update-notice__secondary {
  min-height: var(--wizon-ai-action-target-touch);
  border-radius: var(--wizon-ai-radius-control);
  font: inherit;
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-semibold);
  cursor: pointer;
}

.client-update-notice__primary {
  border: 0;
  background: var(--wizon-ai-action-primary-bg);
  color: var(--wizon-ai-action-primary-fg);
}

.client-update-notice__primary:disabled {
  background: var(--wizon-ai-disabled-bg);
  color: var(--wizon-ai-text-muted);
  cursor: wait;
}

.client-update-notice__secondary {
  border: 0;
  background: transparent;
  color: var(--wizon-ai-text-secondary);
}

.client-update-notice__notes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: var(--wds-space-1);
  padding: var(--wds-space-2) 0 0;
  border-block-start: 1px solid var(--wizon-ai-sidebar-border);
  border-radius: 0;
  color: var(--wizon-ai-text-muted);
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-medium);
  text-align: start;
}

.client-update-notice__notes .wds-inline-icon {
  width: var(--wds-space-4);
  height: var(--wds-space-4);
  transition: transform var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-effect-ease);
}

.client-update-notice__notes[aria-expanded="true"] .wds-inline-icon {
  transform: rotate(90deg);
}

.client-update-notice__highlights {
  display: grid;
  gap: 0;
  margin: var(--wds-space-2) 0 0;
  padding: 0;
  border-block-start: 1px solid var(--wizon-ai-sidebar-border);
  list-style: none;
}

.client-update-notice__highlights li {
  display: grid;
  gap: var(--wds-space-1);
  padding-block: var(--wds-space-3);
}

.client-update-notice__highlights li + li {
  border-block-start: 1px solid var(--wizon-ai-sidebar-border);
}

.client-update-notice__highlights strong {
  font-size: var(--wds-font-size-body-2);
  line-height: var(--wds-line-height-tight);
}

.client-update-notice__highlights span {
  color: var(--wizon-ai-text-muted);
  font-size: var(--wds-font-size-caption);
  line-height: var(--wds-line-height-normal);
}

.client-update-notice__primary:focus-visible,
.client-update-notice__secondary:focus-visible,
.client-update-notice__notes:focus-visible {
  outline: 2px solid var(--wizon-ai-focus-visible-ring);
  outline-offset: 2px;
}

html[data-chat-state="empty"]:not([data-wizon-viewport="compact"]) .client-update-notice {
  bottom: var(--wds-space-5);
}

@media (hover: hover) {
  .client-update-notice__primary:not(:disabled):hover {
    background: var(--wizon-ai-action-primary-bg-hover);
  }

  .client-update-notice__secondary:hover {
    background: var(--wizon-ai-hover-soft-bg);
  }

  .client-update-notice__notes:hover {
    background: transparent;
    color: var(--wizon-ai-text-primary);
  }
}

html[data-wizon-viewport="compact"] .client-update-notice {
  right: var(--wds-space-4);
  bottom: var(
    --client-update-compact-bottom,
    calc(var(--wds-space-24) + var(--wds-space-4) + var(--wds-space-3) + var(--wizon-safe-bottom))
  );
  width: calc(100vw - (var(--wds-space-4) * 2));
}

@keyframes client-update-notice-enter {
  from {
    opacity: 0;
    transform: translateY(var(--wds-space-2));
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-update-notice,
  .client-update-notice__notes .wds-inline-icon {
    animation: none;
    transition: none;
  }
}