/*
 * WPPaza custom styles layered on top of Tailwind (CDN).
 * Brand colours come from the per-request CSS variables defined in
 * partials/branding_styles.php (--primary / --accent, with the
 * --brand-primary / --brand-accent aliases used by some views).
 */

:root {
    --primary: #2563eb;
    --accent: #1e40af;
    --brand-primary: var(--primary);
    --brand-accent: var(--accent);
}

/* ── Diff viewer ───────────────────────────────────────────── */
.diff {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre;
    overflow-x: auto;
    tab-size: 4;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    background: #ffffff;
}
.diff-line {
    display: flex;
    padding: 0 0.5rem;
}
.diff-gutter {
    user-select: none;
    width: 3.5rem;
    flex: none;
    text-align: right;
    padding-right: 0.75rem;
    color: #9ca3af;
}
.diff-add {
    background-color: #e6ffed;
    color: #03543f;
}
.diff-add .diff-gutter { background-color: #cdfbe1; }
.diff-del {
    background-color: #ffeef0;
    color: #9b1c1c;
}
.diff-del .diff-gutter { background-color: #fbd5d5; }
.diff-hunk {
    background-color: #f3f4f6;
    color: #6b7280;
}
.diff-context { color: #374151; }

/* ── File tree ─────────────────────────────────────────────── */
.file-tree { font-size: 13px; line-height: 1.6; }
.file-tree ul { list-style: none; margin: 0; padding-left: 0.85rem; }
.file-tree li { position: relative; }
.file-tree-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.375rem;
    color: #374151;
    cursor: pointer;
    user-select: none;
}
.file-tree-item:hover { background-color: #f3f4f6; }
.file-tree-item.is-active {
    background-color: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    font-weight: 600;
}
.file-tree-item .icon { flex: none; width: 1rem; height: 1rem; color: #9ca3af; }
.file-tree-item.is-active .icon { color: var(--primary); }
.file-tree-dir > .file-tree-item .chevron { transition: transform 0.15s ease; }
.file-tree-dir.is-open > .file-tree-item .chevron { transform: rotate(90deg); }
.file-tree-dir:not(.is-open) > ul { display: none; }

/* ── Chat bubbles ──────────────────────────────────────────── */
.chat-thread { display: flex; flex-direction: column; gap: 0.85rem; }
.chat-msg { display: flex; gap: 0.6rem; max-width: 100%; }
.chat-msg-user { flex-direction: row-reverse; }
.chat-bubble {
    max-width: min(42rem, 85%);
    padding: 0.65rem 0.9rem;
    border-radius: 1rem;
    font-size: 14px;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.chat-msg-user .chat-bubble {
    background-color: var(--primary);
    color: #ffffff;
    border-bottom-right-radius: 0.3rem;
}
.chat-msg-ai .chat-bubble {
    background-color: #f3f4f6;
    color: #111827;
    border-bottom-left-radius: 0.3rem;
}
.chat-bubble pre {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    overflow-x: auto;
    font-size: 12.5px;
    margin: 0.5rem 0 0;
}
.chat-msg-user .chat-bubble pre { background: rgba(255, 255, 255, 0.18); }
.chat-avatar {
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
}
.chat-avatar-ai { background-color: var(--accent); }
.chat-avatar-user { background-color: #6b7280; }

/* Typing indicator */
.chat-typing { display: inline-flex; gap: 4px; align-items: center; }
.chat-typing span {
    width: 6px; height: 6px; border-radius: 9999px;
    background-color: #9ca3af; opacity: 0.5;
    animation: chat-blink 1.2s infinite ease-in-out both;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-blink {
    0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-2px); }
}

/* ── Toasts ────────────────────────────────────────────────── */
.toast {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.625rem;
    background: #111827;
    color: #f9fafb;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
    font-size: 13.5px;
    line-height: 1.45;
    transform: translateY(8px);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast-success { background: #065f46; }
.toast-error { background: #991b1b; }
.toast-warning { background: #92400e; }
.toast-info { background: #1e3a5f; }
.toast .toast-close {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    background: none;
    border: 0;
    font-size: 16px;
    line-height: 1;
}
.toast .toast-close:hover { color: #ffffff; }

/* ── Notifications panel ───────────────────────────────────── */
.notif-item { display: block; padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6; }
.notif-item:hover { background-color: #f9fafb; }
.notif-item.is-unread { background-color: color-mix(in srgb, var(--primary) 6%, transparent); }
.notif-dot { width: 8px; height: 8px; border-radius: 9999px; background-color: var(--primary); flex: none; }

/* ════════════════════════════════════════════════════════════
   Marketing site: animations, hero, workflow, pricing, Depaza
   ════════════════════════════════════════════════════════════ */

/* Scroll-reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-2 { transition-delay: .08s; }
.reveal-3 { transition-delay: .16s; }
.reveal-4 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .wf-scene, .mk-blob, .mk-grad { animation: none !important; }
}

/* Animated gradient hero background */
.mk-hero { position: relative; overflow: hidden; background:
    radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 60%),
    radial-gradient(900px 500px at 0% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
    #0b1020; }
.mk-hero, .mk-hero * { color-scheme: dark; }
.mk-grad {
    background: linear-gradient(110deg, #fff 10%, color-mix(in srgb, var(--primary) 70%, #fff) 45%, color-mix(in srgb, var(--accent) 80%, #fff) 70%, #fff 95%);
    background-size: 250% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: mk-shimmer 6s linear infinite;
}
@keyframes mk-shimmer { to { background-position: 250% center; } }
.mk-blob { position: absolute; border-radius: 9999px; filter: blur(60px); opacity: .5; pointer-events: none; }
.mk-blob-1 { width: 460px; height: 460px; right: -120px; top: -160px; background: var(--primary); animation: mk-float 14s ease-in-out infinite; }
.mk-blob-2 { width: 380px; height: 380px; left: -120px; bottom: -180px; background: var(--accent); animation: mk-float 18s ease-in-out infinite reverse; }
@keyframes mk-float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,30px) scale(1.08); } }

/* "Powered by Depaza" pill */
.depaza-pill {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .35rem .8rem; border-radius: 9999px; font-weight: 600; font-size: .8rem;
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
    color: #dbeafe; backdrop-filter: blur(4px);
}
.depaza-pill .spark { animation: mk-pulse 2.2s ease-in-out infinite; }
@keyframes mk-pulse { 0%,100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }

/* Glow CTA */
.btn-glow { position: relative; transition: transform .15s ease, box-shadow .15s ease; box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--primary) 70%, transparent); }
.btn-glow:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px color-mix(in srgb, var(--primary) 85%, transparent); }

/* ── Workflow animation: watch a live site get edited ──────── */
.wf { width: 100%; max-width: 600px; margin: 0 auto; border-radius: 14px; overflow: hidden;
    background: #0f1629; border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); }
.wf-bar { display: flex; align-items: center; gap: .4rem; padding: .55rem .75rem; background: #0b1326; border-bottom: 1px solid rgba(255,255,255,.06); }
.wf-bar i { width: 11px; height: 11px; border-radius: 9999px; display: inline-block; }
.wf-bar .r{background:#ff5f57}.wf-bar .y{background:#febc2e}.wf-bar .g{background:#28c840}
.wf-omni { margin-left:.55rem; flex:1; display:flex; align-items:center; gap:.45rem; background:#1b2540; border-radius:7px; padding:.28rem .6rem; font:12px ui-monospace,monospace; color:#9fb0d0; }
.wf-omni .lock { color:#5fb98b; }
.wf-reload { width:13px;height:13px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:9999px; margin-left:auto; opacity:0; animation: wf-reload 12s linear infinite; }
@keyframes wf-reload {0%,52%{opacity:0;transform:rotate(0)} 54%{opacity:.9} 64%{opacity:.9;transform:rotate(540deg)} 68%,100%{opacity:0;transform:rotate(540deg)}}
@keyframes wf-rot { to { transform: rotate(360deg); } }

.wf-screen { position: relative; height: 360px; background: #f1f5f9; overflow: hidden; }

/* the mock website being edited */
.wfs { position:absolute; inset:0; display:flex; flex-direction:column; }
.wfs-header { display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem; background:#fff; color:#0f172a; border-bottom:1px solid #e8edf3; z-index:3; animation: wf-hdr 12s ease infinite; }
.wfs-logo { display:flex; align-items:center; gap:.4rem; font-weight:800; font-size:14px; }
.wfs-logo .dot{ width:16px;height:16px;border-radius:5px;background:linear-gradient(135deg,var(--primary),var(--accent)); }
.wfs-nav { display:flex; gap:.85rem; margin-left:.5rem; font-size:11.5px; opacity:.8; }
.wfs-cta { margin-left:auto; font-size:11.5px; font-weight:700; padding:.32rem .7rem; background:#e2e8f0; color:#0f172a; border-radius:6px; animation: wf-cta 12s ease infinite; }
@keyframes wf-hdr {
  0%,57% { background:#fff; color:#0f172a; box-shadow:none; }
  63%,95% { background:#001f54; color:#fff; box-shadow:0 10px 22px -10px rgba(0,0,0,.55); }
  100% { background:#fff; color:#0f172a; box-shadow:none; }
}
@keyframes wf-cta {
  0%,57% { background:#e2e8f0; color:#0f172a; border-radius:6px; }
  63%,95% { background:var(--primary); color:#fff; border-radius:9999px; }
  100% { background:#e2e8f0; color:#0f172a; border-radius:6px; }
}
.wfs-body { flex:1; padding:1rem 1.1rem .9rem; }
.wfs-eyebrow { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--primary); }
.wfs-h { margin-top:.3rem; font-size:21px; font-weight:800; color:#0f172a; line-height:1.12; }
.wfs-p { margin-top:.35rem; font-size:11.5px; color:#64748b; max-width:24rem; }
.wfs-btn { margin-top:.65rem; display:inline-block; font-size:11.5px; font-weight:700; color:#fff; padding:.4rem .85rem; border-radius:8px; background:var(--primary); }
.wfs-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; margin-top:.9rem; }
.wfs-card { background:#fff; border:1px solid #e8edf3; border-radius:10px; padding:.55rem; }
.wfs-card .ph { height:48px; border-radius:6px; background:linear-gradient(135deg,#e2e8f0,#f1f5f9); background-size:cover; background-position:center; }
.wfs-card .l1 { height:6px; width:80%; border-radius:9999px; background:#e5eaf1; margin-top:.45rem; }
.wfs-card .l2 { height:6px; width:55%; border-radius:9999px; background:#eef2f7; margin-top:.3rem; }

/* dim while connecting */
.wfs-veil { position:absolute; inset:0; background:rgba(8,12,24,.5); z-index:4; animation: wf-veil 12s ease infinite; }
@keyframes wf-veil { 0%,24%{opacity:1} 30%,100%{opacity:0} }

/* "Applied live" toast on the site */
.wfs-toast { position:absolute; top:.7rem; right:.7rem; z-index:6; display:inline-flex; align-items:center; gap:.35rem; padding:.32rem .65rem; border-radius:9999px; font-size:11px; font-weight:700; background:#059669; color:#fff; box-shadow:0 10px 22px -8px rgba(0,0,0,.45); opacity:0; animation: wf-toast 12s ease infinite; }
@keyframes wf-toast { 0%,58%{opacity:0;transform:translateY(-6px) scale(.9)} 63%{opacity:1;transform:none} 93%{opacity:1} 97%,100%{opacity:0} }

/* chat dock floating over the site */
.wfd { position:absolute; left:.8rem; right:.8rem; bottom:.8rem; z-index:5; display:flex; align-items:center; gap:.55rem;
    background:rgba(13,19,38,.94); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:.55rem .65rem;
    color:#dbe4f7; backdrop-filter:blur(6px); box-shadow:0 18px 44px -16px rgba(0,0,0,.65); min-height:46px; }
.wfd-av { flex:none; width:28px;height:28px;border-radius:8px; display:flex;align-items:center;justify-content:center; font-size:14px; background:linear-gradient(135deg,var(--primary),var(--accent)); }
.wfd-msg { position:relative; flex:1; font-size:12.5px; min-height:1.25em; line-height:1.25em; }
.wfd-line { position:absolute; inset:0; display:flex; align-items:center; gap:.4rem; opacity:0; }
.wfd-1 { animation: wf-l1 12s ease infinite; }
.wfd-2 { animation: wf-l2 12s ease infinite; }
.wfd-3 { animation: wf-l3 12s ease infinite; color:#6ee7b7; font-weight:600; }
@keyframes wf-l1 { 0%{opacity:0} 3%{opacity:1} 23%{opacity:1} 27%,100%{opacity:0} }
@keyframes wf-l2 { 0%,27%{opacity:0} 30%{opacity:1} 53%{opacity:1} 57%,100%{opacity:0} }
@keyframes wf-l3 { 0%,57%{opacity:0} 61%,100%{opacity:1} }
.wfd-dot { flex:none; width:14px;height:14px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:9999px; animation: wf-rot .8s linear infinite; }
.wfd-type { display:inline-block; overflow:hidden; white-space:nowrap; border-right:2px solid var(--primary); width:0; animation: wf-type 12s steps(22,end) infinite, wf-caret .7s steps(1,end) infinite; }
@keyframes wf-type { 0%,30%{width:0} 50%,100%{width:22ch} }
@keyframes wf-caret { 50%{border-color:transparent} }

/* step rail (CSS-synced to the 12s loop) */
.wf-steps { display: flex; justify-content: center; gap: 1.1rem; margin-top: 1.25rem; flex-wrap: wrap; }
.wf-stepi { display:flex; align-items:center; gap:.45rem; font-size:13px; font-weight:600; color:#94a3b8; }
.wf-stepi .n { width:24px;height:24px;border-radius:9999px; display:inline-flex;align-items:center;justify-content:center; font-size:12px; background:rgba(148,163,184,.18); color:#cbd5e1; }
.wf-stepi.s1 { animation: wf-st1 12s ease infinite; } .wf-stepi.s1 .n { animation: wf-stn1 12s ease infinite; }
.wf-stepi.s2 { animation: wf-st2 12s ease infinite; } .wf-stepi.s2 .n { animation: wf-stn2 12s ease infinite; }
.wf-stepi.s3 { animation: wf-st3 12s ease infinite; } .wf-stepi.s3 .n { animation: wf-stn3 12s ease infinite; }
@keyframes wf-st1 { 0%,26%{color:#fff} 30%,100%{color:#94a3b8} }
@keyframes wf-st2 { 0%,26%{color:#94a3b8} 30%,54%{color:#fff} 58%,100%{color:#94a3b8} }
@keyframes wf-st3 { 0%,57%{color:#94a3b8} 61%,100%{color:#fff} }
@keyframes wf-stn1 { 0%,26%{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 22%,transparent)} 30%,100%{background:rgba(148,163,184,.18);color:#cbd5e1;box-shadow:none} }
@keyframes wf-stn2 { 0%,26%{background:rgba(148,163,184,.18);color:#cbd5e1;box-shadow:none} 30%,54%{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 22%,transparent)} 58%,100%{background:rgba(148,163,184,.18);color:#cbd5e1;box-shadow:none} }
@keyframes wf-stn3 { 0%,57%{background:rgba(148,163,184,.18);color:#cbd5e1;box-shadow:none} 61%,100%{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 22%,transparent)} }

/* pricing cards */
.mk-price { transition: transform .2s ease, box-shadow .2s ease; }
.mk-price:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -20px rgba(2,6,23,.25); }
.mk-price-pop { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, #fff), #fff); }

/* Utility */
.brand-bg { background-color: var(--primary); }
.brand-text { color: var(--primary); }
[data-mobile-menu].is-open,
[data-notifications-panel].is-open,
[data-user-menu-panel].is-open { display: block; }