/* Page-aware assistant and page lens for zelephony.com (see ask.js). */
:root {
    --ask-w: 384px;
    --ask-ink: #1a1a1a;
    --ask-muted: #6b6257;
    --ask-line: #e4d9c6;
    --ask-paper: #fffdf9;
    --ask-violet: #5b46b8;
    --ask-violet-soft: #ece8fb;
    --ask-amber: #d4a574;
    --ask-amber-soft: rgba(212, 165, 116, 0.22);
}

section[id] { scroll-margin-top: 5.5rem; }

/* ---------- Ask marks on page elements ---------- */
[data-ask] { position: relative; }
.ask-mark {
    position: absolute; top: 0.6rem; right: 0.6rem; z-index: 5;
    width: 30px; height: 30px; border-radius: 999px;
    display: grid; place-items: center;
    border: 1px solid var(--ask-line); background: var(--ask-paper); color: var(--ask-violet);
    font-size: 15px; line-height: 1; cursor: pointer;
    opacity: 0; transform: scale(0.9);
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
[data-ask]:hover > .ask-mark, .ask-mark:focus-visible, [data-ask].has-thread > .ask-mark { opacity: 1; transform: none; }
.ask-mark:hover { background: var(--ask-violet-soft); }
.ask-mark:focus-visible { outline: 2px solid var(--ask-violet); outline-offset: 2px; }
[data-ask].has-thread > .ask-mark { background: var(--ask-violet); color: #fff; border-color: var(--ask-violet); }
@media (hover: none) { .ask-mark { opacity: 0.7; transform: none; } }
#contact [data-ask] > .ask-mark { top: -2.6rem; right: 0; }
@media (min-width: 1024px) { #contact [data-ask] > .ask-mark { top: -0.4rem; right: -2.4rem; } }

[data-ask].ask-linked { outline: 2px solid var(--ask-violet); outline-offset: 6px; border-radius: 1rem; }
@keyframes ask-flash { 0% { box-shadow: 0 0 0 0 rgba(91, 70, 184, 0.45); } 100% { box-shadow: 0 0 0 18px rgba(91, 70, 184, 0); } }
[data-ask].ask-flash { animation: ask-flash 0.9s ease-out 2; border-radius: 1rem; }

.ask-sel-chip {
    position: absolute; z-index: 70; display: none;
    padding: 0.4rem 0.75rem; border-radius: 999px; border: 0;
    background: var(--ask-ink); color: #fff; font: 600 13px/1 Inter, sans-serif;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); cursor: pointer;
}
.ask-sel-chip.show { display: block; }

/* ---------- Nav button and closed-state edge tab ---------- */
.ask-nav {
    margin-left: 1rem; padding: 0.45rem 0.95rem; border-radius: 999px;
    border: 1px solid var(--ask-ink); font-weight: 600; font-size: 0.9rem; background: transparent;
}
.ask-nav:hover { background: var(--ask-ink); color: #fff; }
.ask-edge {
    position: fixed; right: 0; top: 50%; z-index: 55; transform: translateY(-50%);
    writing-mode: vertical-rl; padding: 1rem 0.55rem; border-radius: 0.75rem 0 0 0.75rem;
    background: var(--ask-ink); color: #fff; font-weight: 600; letter-spacing: 0.04em; border: 0; cursor: pointer;
}
html.ask-open .ask-edge { display: none; }

/* ---------- Panel: right rail on desktop ---------- */
.ask-panel {
    position: fixed; z-index: 60; background: var(--ask-paper); color: var(--ask-ink);
    display: flex; flex-direction: column; font-family: Inter, sans-serif;
}
@media (min-width: 1024px) {
    .ask-panel {
        top: 0; right: 0; bottom: 0; width: var(--ask-w);
        border-left: 1px solid var(--ask-line);
        transform: translateX(100%); transition: transform 0.28s cubic-bezier(.2, .7, .2, 1);
    }
    html.ask-open .ask-panel { transform: none; box-shadow: -12px 0 40px rgba(26, 26, 26, 0.06); }
    body { transition: margin-right 0.28s cubic-bezier(.2, .7, .2, 1); }
    html.ask-open body { margin-right: var(--ask-w); }
    html.ask-open nav.fixed, html.ask-open .lens-bar { width: calc(100% - var(--ask-w)); }
    .ask-handle { display: none; }
}

/* ---------- Panel: bottom sheet on phones and tablets ---------- */
@media (max-width: 1023.98px) {
    .ask-panel {
        left: 0; right: 0; bottom: 0; height: 88vh; height: 88dvh;
        border-radius: 1.25rem 1.25rem 0 0; border-top: 1px solid var(--ask-line);
        box-shadow: 0 -10px 40px rgba(26, 26, 26, 0.14);
        transform: translateY(calc(100% - 3.75rem));
        transition: transform 0.28s cubic-bezier(.2, .7, .2, 1);
    }
    .ask-panel[data-state="half"] { transform: translateY(44%); }
    .ask-panel[data-state="full"] { transform: none; }
    .ask-panel.dragging { transition: none; }
    .ask-edge { display: none; }
    .ask-head { display: none; }
    .ask-panel[data-state="peek"] .ask-body, .ask-panel[data-state="peek"] .ask-compose,
    .ask-panel[data-state="peek"] .ask-private { visibility: hidden; }
    body { padding-bottom: 4rem; }
}
.ask-handle { touch-action: none; padding: 0.45rem 1rem 0.5rem; cursor: grab; }
.ask-grip { display: block; width: 40px; height: 4px; border-radius: 4px; background: #cfc3ae; margin: 0 auto 0.45rem; }
.ask-peek {
    width: 100%; text-align: left; border: 0; background: transparent;
    font: 600 0.95rem/1.3 Inter, sans-serif; color: var(--ask-ink);
}
.ask-peek span { color: var(--ask-violet); }

.ask-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.1rem 1.25rem 0.8rem; border-bottom: 1px solid var(--ask-line); }
.ask-title { font-weight: 700; font-size: 1.05rem; }
.ask-sub { font-size: 0.82rem; color: var(--ask-muted); margin-top: 0.15rem; }
.ask-close { border: 0; background: transparent; font-size: 1.4rem; line-height: 1; color: var(--ask-muted); cursor: pointer; padding: 0 0.25rem; }

.ask-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; overscroll-behavior: contain; }
.ask-intro { font-size: 0.92rem; color: var(--ask-muted); line-height: 1.55; }
.ask-intro b { color: var(--ask-violet); }

.ask-thread { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--ask-line); }
.ask-thread:last-child { border-bottom: 0; }
.ask-thread.active .ask-quote { border-left-color: var(--ask-violet); }
.ask-quote {
    display: block; width: 100%; text-align: left; cursor: pointer;
    border: 0; border-left: 3px solid var(--ask-amber); background: transparent;
    padding: 0.15rem 0 0.15rem 0.7rem; margin-bottom: 0.65rem;
    font-size: 0.8rem; color: var(--ask-muted); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ask-quote b { color: var(--ask-ink); font-weight: 600; }
.ask-msg { font-size: 0.92rem; line-height: 1.55; margin: 0.5rem 0; white-space: pre-line; }
.ask-msg.user { margin-left: 2.5rem; padding: 0.55rem 0.8rem; border-radius: 0.9rem 0.9rem 0.25rem 0.9rem; background: var(--ask-ink); color: #fff; }
.ask-msg.bot { color: var(--ask-ink); }
.ask-msg.bot.fresh { animation: ask-rise 0.3s ease both; }
@keyframes ask-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ask-typing { display: inline-flex; gap: 4px; padding: 0.4rem 0; }
.ask-typing i { width: 6px; height: 6px; border-radius: 50%; background: #b9ab93; animation: ask-dot 1s infinite ease-in-out; }
.ask-typing i:nth-child(2) { animation-delay: 0.15s; } .ask-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ask-dot { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ask-suggest { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.ask-suggest button {
    border: 1px solid var(--ask-line); background: #fff; border-radius: 999px;
    padding: 0.35rem 0.7rem; font-size: 0.8rem; color: var(--ask-ink); cursor: pointer;
}
.ask-suggest button:hover { border-color: var(--ask-violet); color: var(--ask-violet); }

.ask-compose { padding: 0.75rem 1.25rem 0.5rem; border-top: 1px solid var(--ask-line); }
.ask-about { display: none; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--ask-muted); margin-bottom: 0.4rem; }
.ask-about.show { display: flex; }
.ask-about span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ask-about button { border: 0; background: transparent; color: var(--ask-muted); cursor: pointer; font-size: 0.75rem; text-decoration: underline; }
.ask-row { display: flex; gap: 0.5rem; align-items: flex-end; }
.ask-row textarea {
    flex: 1; resize: none; max-height: 8rem; border: 1px solid var(--ask-line); border-radius: 0.75rem;
    padding: 0.6rem 0.75rem; font: 0.92rem/1.4 Inter, sans-serif; background: #fff;
}
.ask-row textarea:focus { outline: 2px solid var(--ask-violet); outline-offset: 0; border-color: transparent; }
.ask-row button { border: 0; border-radius: 0.75rem; padding: 0.6rem 0.95rem; background: var(--ask-ink); color: #fff; font-weight: 600; cursor: pointer; }
.ask-row button:disabled { opacity: 0.5; cursor: default; }

/* The route a question takes: shown, not claimed. */
.ask-private { padding: 0.35rem 1.25rem 0.9rem; font-size: 0.72rem; color: var(--ask-muted); }
.ask-route { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.2rem; color: var(--ask-ink); font-weight: 600; }
.ask-route i { flex: 0 0 18px; height: 1px; background: repeating-linear-gradient(90deg, var(--ask-violet) 0 3px, transparent 3px 6px); }
.ask-route .live i { animation: ask-route 0.9s linear infinite; }
@keyframes ask-route { to { background-position: 6px 0; } }

/* ---------- Page lens ---------- */
.lens-card {
    background: var(--ask-paper); border: 1px solid var(--ask-line); border-radius: 1.5rem;
    padding: 2rem; box-shadow: 0 24px 60px rgba(26, 26, 26, 0.08); align-self: center; width: 100%;
}
.lens-kicker { font-size: 0.85rem; font-weight: 600; color: var(--ask-violet); }
.lens-title { font-size: 1.9rem; font-weight: 700; margin: 0.2rem 0 1rem; letter-spacing: -0.01em; }
.lens-form { display: flex; gap: 0.5rem; }
.lens-form input {
    flex: 1; min-width: 0; border: 1px solid var(--ask-line); border-radius: 0.8rem;
    padding: 0.8rem 0.95rem; font: 1rem Inter, sans-serif; background: #fff;
}
.lens-form input:focus { outline: 2px solid var(--ask-violet); border-color: transparent; }
.lens-form button { border: 0; border-radius: 0.8rem; padding: 0 1.25rem; background: var(--ask-ink); color: #fff; font-weight: 600; cursor: pointer; }
.lens-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.9rem; }
.lens-chips button {
    border: 1px solid var(--ask-line); background: #fff; border-radius: 999px; padding: 0.4rem 0.8rem;
    font-size: 0.85rem; cursor: pointer;
}
.lens-chips button:hover, .lens-chips button[aria-pressed="true"] { border-color: var(--ask-violet); color: var(--ask-violet); background: var(--ask-violet-soft); }
.lens-note { margin-top: 1rem; font-size: 0.85rem; color: var(--ask-muted); }
.lens-note.warn { color: #9a3b1b; }

.lens-bar {
    position: fixed; top: 4rem; left: 0; width: 100%; z-index: 45; display: none;
    background: var(--ask-ink); color: #f4ede1; font-size: 0.88rem;
}
.lens-bar.show { display: block; }
.lens-bar-in { max-width: 80rem; margin: 0 auto; padding: 0.55rem 1.25rem; display: flex; gap: 0.9rem; align-items: center; flex-wrap: wrap; }
.lens-bar b { color: #fff; }
.lens-bar button { border: 0; background: transparent; color: var(--ask-amber); font-weight: 600; cursor: pointer; padding: 0; }
.lens-bar .lens-status { color: #b9ab93; }

/* Rewritten text is marked line by line, so it's always clear the AI wrote it. */
[data-lens].lens-on {
    text-decoration: underline dotted rgba(184, 128, 70, 0.75);
    text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.lens-swap {
    display: inline-block; margin-left: 0.35rem; border: 0; background: transparent; cursor: pointer;
    color: var(--ask-violet); font-size: 0.75rem; font-weight: 600; vertical-align: 0.1em;
}
.lens-swap:hover { text-decoration: underline; }

@keyframes lens-shimmer { to { background-position: -200% 0; } }
[data-lens].lens-busy {
    color: transparent;
    background-image: linear-gradient(90deg, #a79a86 0%, #a79a86 40%, #e9dfcf 50%, #a79a86 60%, #a79a86 100%);
    background-size: 200% 100%; background-repeat: repeat; -webkit-background-clip: text; background-clip: text;
    text-decoration: none;
    animation: lens-shimmer 1.4s linear infinite;
}
[data-lens].lens-out { opacity: 0; filter: blur(2px); transition: opacity 0.16s ease, filter 0.16s ease; }
.lens-w { display: inline-block; opacity: 0; filter: blur(3px); transform: translateY(0.25em);
    animation: lens-in 0.42s ease forwards; animation-delay: calc(var(--i) * 16ms); }
@keyframes lens-in { to { opacity: 1; filter: none; transform: none; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    .ask-panel, body, .ask-mark { transition: none !important; }
    [data-lens].lens-busy { animation: none; color: #a79a86; background: none; }
    .lens-w { animation: none; opacity: 1; filter: none; transform: none; }
    [data-ask].ask-flash, .ask-msg.bot.fresh, .ask-route .live i { animation: none; }
}

@media (max-width: 1023.98px) {
    .ask-head { display: none; }
    .lens-bar { font-size: 0.8rem; }
    .lens-bar-in { flex-wrap: nowrap; gap: 0.75rem; padding: 0.5rem 1rem; }
    .lens-bar-in > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lens-bar .lens-status { display: none; }
    .lens-card { padding: 1.5rem; }
    .lens-title { font-size: 1.6rem; }
}