html {
    height: 100%;
    color-scheme: light dark;
}

:root {
    --input-height: 48px;
    --clear-size: 28px;
}

/* prevent horizontal scroll from button appearance */
html,
body {
    overflow-x: hidden;
}

.flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

body,
input {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

.logo {
    width: 40px;
    height: 40px;
}

h1 {
    margin-top: 30vh;
}

.input-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    position: relative;
}

.input-wrap {
    position: relative;
    /* width is set dynamically via JS based on screen width for flexibility */
    max-width: 96vw;
    z-index: 3;
    /* keep input above the Go button to avoid overlap */
}

.url {
    position: relative;
    width: 100%;
    height: var(--input-height);
    line-height: 48px;
    font-size: 16px;
    border-radius: 24px;
    padding: 0 12px;
    transition: border-radius 0.35s cubic-bezier(.2, .8, .2, 1), padding 0.25s, background-color 0.3s, color 0.3s, border-color 0.3s;
    box-sizing: border-box;
}

input {
    padding: 0 10px;
}

input:focus {
    outline: none;
}

/* placeholder styling for the URL input (italic) */
.url::placeholder {
    font-style: italic;
    opacity: 1;
}

.url::-webkit-input-placeholder {
    font-style: italic;
}

.url::-moz-placeholder {
    font-style: italic;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--input-height);
    width: var(--input-height);
    /* fixed width, animate transform instead of width */
    padding: 0;
    margin-left: -48px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    opacity: 0;
    z-index: 2;
    transform-origin: center;
    transform: translateX(-10px) scale(0.0);
    /* Apple-like springy curve: gentle overshoot */
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 160ms ease,
        margin 360ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.3s,
        color 0.3s;
}

.btn .arrow {
    width: 18px;
    height: 18px;
    opacity: 0;
    transition: opacity 0.2s 0.15s;
}

.input-row.show .btn {
    /* appear by scaling up and sliding slightly to the right */
    transform: translateX(0) scale(1);
    margin-left: 12px;
    opacity: 1;
    transition-delay: 0.18s;
    /* slight delay to follow droplet */
}

/* when hiding, prefer opacity fade first; JS will add .hiding to trigger fast fade */
.input-row.hiding .btn {
    /* fade and slightly scale down while sliding a bit to avoid overlap */
    opacity: 0;
    transform: translateX(6px) scale(0.92);
    box-shadow: none;
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), opacity 120ms ease;
}

.input-row.show .btn .arrow {
    opacity: 1;
}

.input-row.show .url {
    /* make left and right radii consistent */
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
}

/* Droplet pseudo-element starts at input right edge and flies to button */

.url::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    /* near input padding */
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 12px;
    pointer-events: none;
    opacity: 0;
}

.input-row.show .url::after {
    opacity: 1;
    animation: droplet 0.45s cubic-bezier(.2, .8, .2, 1) forwards;
}

@keyframes droplet {
    0% {
        transform: translateY(-50%) translateX(0) scaleX(1);
        width: 12px;
        border-radius: 12px;
        opacity: 1;
    }

    30% {
        transform: translateY(-50%) translateX(18px) scaleX(2.2);
        width: 26px;
        border-radius: 14px 22px 22px 14px;
    }

    60% {
        transform: translateY(-50%) translateX(38px) scaleX(1.05);
        width: 18px;
        border-radius: 12px;
    }

    100% {
        transform: translateY(-50%) translateX(56px) scaleX(1);
        width: 12px;
        border-radius: 50%;
        opacity: 0;
        /* fade into the final circular button */
    }
}

/* arrow appears after button expansion */
.input-row.show .btn .arrow {
    transition-delay: 0.55s;
}

.footer {
    position: fixed;
    bottom: 10px;
    text-decoration: none;
    font-size: 11px;
    font-style: italic;
    transition: color 0.3s;
}


@media (max-width: 350px) {
    /* Small phone layout: centered input, compact heights, touch-friendly targets */
    :root {
        --input-height: 40px;
    }

    .input-row {
        padding: 0 10px;
        box-sizing: border-box;
        justify-content: center;
    }

    .input-wrap {
        position: relative;
        flex: 0 0 auto;
        width: 92vw;
        max-width: 320px;
        margin: 0 auto;
        z-index: 3;
    }

    .url {
        width: 100%;
        height: var(--input-height);
        font-size: 14px;
        padding: 0 12px;
    }

    /* On very small screens, Go button should not push layout when hidden.
       Keep width 0 and expand to the same height as input when shown. */
    .btn {
        width: 0 !important;
        margin-left: 0 !important;
        transform: translateX(0) scale(0);
        opacity: 0;
        transition: width 200ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 140ms ease;
    }

    .input-row.show .btn {
        width: var(--input-height) !important;
        margin-left: 8px !important;
        transform: translateX(0) scale(1);
        opacity: 1
    }

    /* enlarge clear for touch and keep it at input tail */
    .clear {
        width: 34px;
        height: 34px;
        right: 8px;
    }

    /* disable droplet animation on very small screens for performance and stability */
    .url::after,
    .input-row.show .url::after {
        display: none;
    }
}

/* clear button inside the input row */
.clear {
    position: absolute;
    /* position relative to input-wrap; fixed at input tail */
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: var(--clear-size);
    height: var(--clear-size);
    border-radius: 6px;
    background: transparent;
    border: none;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.18s, background-color 0.12s, color 0.12s, border-radius 0.18s;
    z-index: 4;
    pointer-events: auto;
}

.clear:hover {
    border-radius: 50%;
}

.input-row.has-value .clear {
    opacity: 1;
}

/* when the circular submit button is visible, move clear to sit between input and button */
/* clear stays fixed at the input tail and does not move with the Go button */

/* When there's a value, or the input is focused, give space on the right so text doesn't flow under controls */
.input-row.has-value .url,
.input-row.show .url,
.url:focus {
    padding-right: calc(var(--clear-size) + 12px);
}