/* ---------- Hero demo: a small browser window that plays the Gramai flow ---------- */

.demo {
  --demo-w: 600px;
  --demo-h: 340px;
  --demo-bg: #ffffff;
  --demo-chrome: #f1f3f4;
  --demo-ink: #202124;
  --demo-ink-soft: #5f6368;
  --demo-line: #dadce0;
  --demo-select: rgba(37, 99, 235, 0.18);
  --demo-fixed: rgba(21, 128, 61, 0.16);
  --demo-menu-bg: rgba(246, 246, 246, 0.96);
  --demo-menu-ink: #1d1d1f;
  --demo-menu-hover: #3478f6;
  --demo-toast-bg: #1f2328;
  --demo-toast-ink: #f6f8fa;

  position: relative;
  width: min(var(--demo-w), 100%);
  height: var(--demo-h);
  margin: 1.75rem auto 0;
  border-radius: 14px;
  background: var(--demo-bg);
  border: 1px solid var(--demo-line);
  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.16),
    0 2px 6px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  text-align: start;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--demo-ink);
  user-select: none;
}

/* Window chrome */
.demo-bar {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--demo-chrome);
  border-bottom: 1px solid var(--demo-line);
}
.demo-dots {
  display: flex;
  gap: 6px;
}
.demo-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d6d8db;
}
.demo-dots i:nth-child(1) {
  background: #ff5f57;
}
.demo-dots i:nth-child(2) {
  background: #febc2e;
}
.demo-dots i:nth-child(3) {
  background: #28c840;
}
.demo-url {
  flex: 1;
  max-width: 320px;
  margin: 0 auto;
  height: 24px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--demo-line);
  font-size: 12px;
  color: var(--demo-ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The compose area */
.demo-page {
  position: absolute;
  inset: 40px 0 0 0;
  padding: 18px 22px;
}
.demo-field {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--demo-ink-soft);
  padding: 6px 0;
  border-bottom: 1px solid var(--demo-line);
}
.demo-field b {
  color: var(--demo-ink);
  font-weight: 500;
}
.demo-body {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.55;
  min-height: 4.6em;
}
/* Only the typed text keeps its spaces as they are. On the body it also kept the markup's own
   newline and indentation before the first span, so the email began with a blank line and an
   indented caret. */
.demo-text {
  white-space: pre-wrap;
  background-image: linear-gradient(var(--demo-select), var(--demo-select));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.45s ease;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.demo.is-selected .demo-text {
  background-size: 100% 100%;
}
.demo.is-fixed .demo-text {
  background-image: linear-gradient(var(--demo-fixed), var(--demo-fixed));
  background-size: 100% 100%;
  transition: background-size 0.3s ease;
}
.demo.is-fixed.is-settled .demo-text {
  background-size: 0% 100%;
  transition: background-size 1.2s ease 0.6s;
}
.demo-caret {
  display: inline-block;
  width: 1px;
  height: 1.05em;
  vertical-align: -0.15em;
  background: var(--demo-ink);
  margin-inline-start: 1px;
  animation: demo-blink 1s steps(1) infinite;
}
.demo:not(.is-typing) .demo-caret {
  display: none;
}
@keyframes demo-blink {
  50% {
    opacity: 0;
  }
}

/* Cursor */
.demo-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 22px;
  transform: translate(420px, 300px);
  transition: transform 0.55s cubic-bezier(0.3, 0.7, 0.3, 1);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  z-index: 5;
  pointer-events: none;
}
.demo-cursor.is-clicking {
  animation: demo-click 0.22s ease;
}
@keyframes demo-click {
  50% {
    scale: 0.85;
  }
}

/* Context menu, macOS style */
.demo-menu {
  position: absolute;
  z-index: 4;
  min-width: 190px;
  padding: 5px;
  border-radius: 10px;
  background: var(--demo-menu-bg);
  color: var(--demo-menu-ink);
  font-size: 13px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.22),
    0 0 0 0.5px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(20px);
  opacity: 0;
  transform: scale(0.96);
  transform-origin: top left;
  transition:
    opacity 0.14s ease,
    transform 0.14s ease;
  pointer-events: none;
}
.demo-menu.is-open {
  opacity: 1;
  transform: none;
}
.demo-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.demo-menu-item.is-muted {
  color: #8e8e93;
}
.demo-menu-item.is-hot {
  background: var(--demo-menu-hover);
  color: #fff;
}
.demo-menu-item .chev {
  font-size: 11px;
  opacity: 0.7;
}
.demo-menu-sep {
  height: 1px;
  margin: 4px 8px;
  background: rgba(0, 0, 0, 0.12);
}

/* Toast: the real extension's look */
.demo-toast {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 6;
  max-width: 300px;
  min-width: 240px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--demo-toast-bg);
  color: var(--demo-toast-ink);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  pointer-events: none;
}
.demo-toast.is-open {
  opacity: 1;
  transform: none;
}
.demo-toast .row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.demo-toast .title {
  font-weight: 600;
  flex: 1;
}
.demo-toast .muted {
  opacity: 0.75;
}
.demo-toast .btn {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 5px 10px;
}
.demo-toast .footer {
  font-size: 12px;
  opacity: 0.8;
}
.demo-toast .footer u {
  text-decoration: underline;
}
.demo-toast .spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: demo-spin 0.8s linear infinite;
}
@keyframes demo-spin {
  to {
    transform: rotate(360deg);
  }
}
.demo-toast [data-when] {
  display: none;
}
.demo-toast[data-state='loading'] [data-when='loading'],
.demo-toast[data-state='done'] [data-when='done'] {
  display: flex;
}

.demo-caption {
  margin: 0.85rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft, #55606b);
}

@media (max-width: 560px) {
  .demo {
    --demo-h: 380px;
  }
  .demo-page {
    padding: 14px 16px;
  }
  .demo-body {
    font-size: 14px;
  }
  .demo-toast {
    max-width: calc(100% - 28px);
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo *,
  .demo *::before,
  .demo *::after {
    animation: none !important;
    transition: none !important;
  }
}