/* ── Chat welcome ─────────────────────────────────────────────────────
 * The first thing in an empty chat: a small route-over-ridges drawing
 * (ridges fade out at the edges through an SVG mask),
 * one headline, one line, and three example requests that fill the
 * composer. Tokens come from style.css. */
.ts-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 360px;
    margin: auto 0;
    padding: 28px 12px 20px;
    text-align: center;
    animation: ts-welcome-in var(--motion-slow, 360ms) var(--ease-out, ease-out) both;
}

.ts-welcome-art {
    width: 100%;
    max-width: 280px;
    height: auto;
    margin-bottom: 18px;
    overflow: visible;
}

.ts-welcome-ridge-back {
    fill: rgba(255, 255, 255, 0.05);
}

.ts-welcome-ridge-front {
    fill: rgba(255, 255, 255, 0.09);
}

.ts-welcome-route {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 0.1 8;
    filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.45));
    animation: ts-welcome-ride 1.6s linear infinite;
}

.ts-welcome-start {
    fill: var(--surface-0, #0b0b0d);
    stroke: var(--accent);
    stroke-width: 2.5;
}

.ts-welcome-pin path {
    fill: var(--accent);
    stroke: #fff;
    stroke-width: 2;
    stroke-linejoin: round;
}

.ts-welcome-pin circle {
    fill: #fff;
}

.ts-welcome-title {
    margin: 0;
    color: var(--text-primary);
    font: 800 30px/1.05 'Barlow Condensed', ui-sans-serif, sans-serif;
    letter-spacing: 0.01em;
}

.ts-welcome-sub {
    margin: 8px 0 0;
    color: var(--text-secondary);
    font: 400 14px/1.45 Inter, ui-sans-serif, sans-serif;
}

.ts-welcome-tries {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.ts-welcome-try {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text-primary);
    font: 500 13px/1 Inter, ui-sans-serif, sans-serif;
    cursor: pointer;
    transition: border-color var(--motion-fast, 120ms) var(--ease-out, ease-out),
                background-color var(--motion-fast, 120ms) var(--ease-out, ease-out);
}

.ts-welcome-try:hover {
    border-color: rgba(var(--accent-rgb), 0.6);
    background: var(--surface-3);
}

.ts-welcome-try:focus-visible {
    outline: none;
    box-shadow: var(--glow-focus, 0 0 0 3px rgba(245, 98, 0, 0.8));
}

@keyframes ts-welcome-in {
    from { opacity: 0; transform: translateY(6px); }
}

/* The dotted route rolls toward the pin. */
@keyframes ts-welcome-ride {
    to { stroke-dashoffset: -8.1; }
}

@media (prefers-reduced-motion: reduce) {
    .ts-welcome,
    .ts-welcome-route {
        animation: none;
    }
}