@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&display=swap');

:root {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #343849;
    background: #f8f9fc;
    font-synthesis: none
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    min-height: 100svh;
    background: radial-gradient(ellipse at 50% 42%, #fff 0%, #fafbfe 38%, #f4f6fa 100%)
}

button,
input,
select {
    font: inherit
}

button,
a,
summary {
    -webkit-tap-highlight-color: transparent
}

button {
    cursor: pointer
}

button:disabled {
    cursor: not-allowed;
    opacity: .45
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid #9a91e3;
    outline-offset: 5px
}

button,
a {
    color: inherit
}

a {
    text-decoration: none
}

.topbar {
    height: 105px;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 23px;
    letter-spacing: 2px
}

.brand-symbol {
    font-size: 34px;
    color: #7972b6;
    line-height: 1
}

.ai-label {
    font-size: 10px;
    font-weight: 550;
    letter-spacing: 1px;
    border: 1px solid #dcdce6;
    border-radius: 5px;
    padding: 4px 5px;
    margin-left: 0
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 12px
}

.quiet-button {
    background: none;
    border: 0;
    color: #777b8c;
    padding: 10px
}

.workspace-link {
    border: 1px solid #e0e2eb;
    background: #ffffff75;
    padding: 10px 15px;
    border-radius: 22px
}

.workspace-link span {
    margin-left: 12px;
    color: #9b9baa
}

main {
    min-height: calc(100svh - 187px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 24px 40px
}

.intro {
    text-align: center
}

.eyebrow {
    font-size: 10px;
    letter-spacing: 3px;
    font-weight: 600;
    color: #9898ac
}

h1 {
    font-size: clamp(27px, 3.2vw, 40px);
    font-weight: 450;
    letter-spacing: -1.5px;
    line-height: 1.3;
    margin: 19px 0 5px
}

.orb-button {
    position: relative;
    flex-shrink: 0;
    width: 310px;
    height: 310px;
    margin: 12px 0 0;
    border: none;
    background: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    isolation: isolate
}

.orb-halo {
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    background: radial-gradient(ellipse, #c4b4f640, #b8e5ff20 48%, transparent 70%);
    filter: blur(18px);
    transform: scale(1.35)
}

.orb {
    display: block;
    position: relative;
    width: 210px;
    height: 210px;
    overflow: hidden;
    border-radius: 46% 54% 52% 48% / 48% 45% 55% 52%;
    background: #ccdcff;
    box-shadow: inset 1px 3px 14px #ffffffeb, inset -7px -9px 19px #8888d870, 0 15px 35px #a5a2dc29;
    animation: jelly 8s ease-in-out infinite;
    transform: translateY(-2px)
}

.orb-color {
    position: absolute;
    inset: -40%;
    background: conic-gradient(from 20deg, #c8b9ff, #e9bded, #f0d6f4, #b5d9fc, #79cddd, #aaa0f0, #c8b9ff);
    filter: blur(13px);
    animation: color-flow 15s linear infinite
}

.orb-wave {
    position: absolute;
    width: 160%;
    height: 95%;
    left: -30%;
    border-radius: 43%;
    border: 2px solid #ffffff90;
    box-shadow: 0 -10px 24px #ffffff6b, inset 0 10px 20px #98b5ff80;
    mix-blend-mode: soft-light
}

.wave-one {
    top: 43%;
    background: linear-gradient(160deg, #98bcfc60, #b0c0ffb0);
    animation: wave 7s ease-in-out infinite
}

.wave-two {
    top: 53%;
    transform: rotate(25deg);
    background: linear-gradient(10deg, #8eddfab0, #d7c7ff70);
    animation: wave 9s ease-in-out infinite reverse
}

.wave-three {
    top: 62%;
    transform: rotate(-20deg);
    background: #b1a5ed80;
    animation: wave 6s ease-in-out -3s infinite
}

.orb-shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse at 28% 17%, #ffffffdc, transparent 38%), radial-gradient(ellipse at 73% 80%, #e9e9ff95, transparent 42%);
    box-shadow: inset 0 0 13px #ffffffa0
}

.orb-shadow {
    position: absolute;
    bottom: 15px;
    width: 112px;
    height: 11px;
    border-radius: 50%;
    background: #a9a6cb25;
    filter: blur(7px)
}

.voice-caption {
    text-align: center;
    min-height: 68px
}

.state-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.state-dot {
    width: 5px;
    height: 5px;
    background: #9b91c1;
    border-radius: 50%
}

#status {
    margin: 0;
    font-size: 15px;
    font-weight: 500
}

#hint {
    font-size: 12px;
    color: #8a8c9c;
    line-height: 1.7;
    margin: 10px 0 0;
    max-width: 420px
}

.input-area {
    margin-top: 33px;
    width: min(100%, 510px)
}

.composer {
    display: flex;
    align-items: center;
    border: 1px solid #e2e3ee;
    border-radius: 18px;
    padding: 8px 9px 8px 21px;
    background: #ffffffb0;
    box-shadow: 0 5px 20px #42457004
}

.composer input {
    min-width: 0;
    width: 100%;
    border: 0;
    background: none;
    outline: none;
    padding: 10px 8px 10px 0;
    color: #47495b;
    font-size: 13px
}

.composer input::placeholder {
    color: #9a9aac
}

.composer button {
    border: 0;
    border-radius: 12px;
    background: #eeecf7;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #80739e
}

.composer svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round
}

.input-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 13px;
    font-size: 10px;
    color: #989ba9
}

.text-button {
    background: none;
    border: none;
    padding: 2px 0;
    color: #8b839f;
    font-size: 11px
}

.conversation {
    width: min(100%, 540px);
    text-align: center;
    margin-top: 15px;
    max-height: 230px;
    overflow: auto;
    padding: 0 10px
}

.transcript {
    color: #9593a3;
    font-size: 13px;
    line-height: 1.6
}

.answer {
    font-size: 15px;
    line-height: 1.8;
    white-space: pre-wrap
}

.conversation[hidden] {
    display: none
}

footer {
    min-height: 82px;
    padding: 22px 5%;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 15px;
    font-size: 10px;
    color: #a0a2b0;
    letter-spacing: .2px
}

details {
    position: relative
}

summary {
    cursor: pointer;
    list-style: none
}

summary::-webkit-details-marker {
    display: none
}

.settings {
    position: absolute;
    bottom: 28px;
    right: 0;
    width: 290px;
    padding: 18px;
    background: white;
    border: 1px solid #e4e4ee;
    border-radius: 16px;
    box-shadow: 0 12px 40px #32325214;
    color: #6e7084;
    z-index: 2
}

.settings label {
    display: block;
    margin-bottom: 10px
}

.settings select {
    width: 100%;
    padding: 9px;
    border: 1px solid #dedee8;
    background: #fafafe;
    border-radius: 7px;
    font-size: 12px
}

.settings input[type=text] {
    width: 100%;
    padding: 9px;
    border: 1px solid #dedee8;
    background: #fafafe;
    border-radius: 7px;
    font-size: 12px
}

.employee-combobox {
    position: relative;
    margin-bottom: 10px
}

.employee-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dedee8;
    border-radius: 7px;
    box-shadow: 0 12px 30px #32325222;
    z-index: 5
}

.employee-results button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    background: none;
    font-size: 12px;
    color: #47495b;
    border-bottom: 1px solid #f0f0f5
}

.employee-results button:last-child {
    border-bottom: 0
}

.employee-results button:hover,
.employee-results button.active {
    background: #f2f0fb
}

.employee-results .no-match {
    padding: 8px 10px;
    font-size: 12px;
    color: #9a9aac
}

.settings p {
    line-height: 1.5
}

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

body[data-state="listening"] .orb {
    animation-duration: 2s;
    box-shadow: 0 0 50px #acb5ed60, inset 0 0 20px #fff
}

body[data-state="listening"] .orb-wave {
    animation-duration: 2s
}

body[data-state="thinking"] .orb-color {
    animation-duration: 2s
}

body[data-state="thinking"] .state-dot {
    animation: pulse 1s infinite
}

body[data-state="speaking"] .orb {
    animation-duration: 1.5s
}

body[data-state="speaking"] .orb-wave {
    animation-duration: 1.3s
}

body[data-state="error"] .state-dot {
    background: #c08187
}

@keyframes jelly {

    0%,
    100% {
        border-radius: 46% 54% 52% 48% / 48% 45% 55% 52%;
        transform: translateY(-2px) rotate(-5deg)
    }

    50% {
        border-radius: 54% 46% 46% 54% / 53% 54% 46% 47%;
        transform: translateY(-10px) rotate(5deg)
    }
}

@keyframes color-flow {
    to {
        transform: rotate(360deg)
    }
}

@keyframes wave {

    0%,
    100% {
        transform: translateY(8px) rotate(-15deg)
    }

    50% {
        transform: translateY(-13px) rotate(20deg)
    }
}

@keyframes pulse {
    50% {
        opacity: .3
    }
}

@media(min-height:900px) {
    main {
        padding-top: 65px
    }

    .orb-button {
        margin-top: 30px;
        margin-bottom: 15px
    }

    .input-area {
        margin-top: 40px
    }
}

@media(max-width:600px) {
    .topbar {
        height: 84px;
        padding: 0 24px
    }

    .header-actions {
        gap: 8px
    }

    .workspace-link {
        padding: 9px 11px
    }

    main {
        min-height: calc(100svh - 166px);
        padding-top: 24px
    }

    h1 {
        letter-spacing: -1px
    }

    .orb-button {
        width: 270px;
        height: 270px
    }

    .orb {
        width: 190px;
        height: 190px
    }

    .input-meta {
        font-size: 9px
    }

    .input-area {
        margin-top: 24px
    }

    footer {
        padding: 18px 24px;
        align-items: center
    }

    .footer-note {
        max-width: 160px;
        line-height: 1.7
    }

    summary {
        font-size: 9px
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        scroll-behavior: auto !important
    }
}

/* Stable mobile and Safari orb rendering. */
.orb-button {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation
}

.orb {
    flex: 0 0 auto;
    aspect-ratio: 1;
    border-radius: 50%;
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
    animation: jelly-safe 8s ease-in-out infinite;
    will-change: transform
}

.orb-color {
    inset: 0;
    background: radial-gradient(circle at 28% 24%, #f3d9fa 0%, #c8b9ff 27%, #a9d9f3 64%, #8f9ee4 100%);
    filter: none;
    animation: color-flow 15s linear infinite
}

.orb-wave {
    mix-blend-mode: normal
}

@keyframes jelly-safe {

    0%,
    100% {
        transform: translateY(-2px) rotate(-4deg) scale(1)
    }

    50% {
        transform: translateY(-8px) rotate(4deg) scale(1.035)
    }
}

@media(max-width:600px) {
    .orb-button {
        width: min(270px, 82vw);
        height: auto;
        aspect-ratio: 1
    }

    .orb {
        width: 70%;
        height: auto
    }

    .orb-halo {
        inset: 12%
    }

    .orb-shadow {
        bottom: 5%
    }
}

@media(prefers-reduced-motion:reduce) {
    .orb {
        animation: none !important;
        will-change: auto
    }
}

.nav-guidance {
    display: grid;
    gap: 10px;
    justify-items: center;
    padding: 6px 0
}

.nav-dest {
    font-size: 16px;
    font-weight: 700;
    color: #2d3436;
    letter-spacing: -.01em
}

.nav-route {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
    color: #2563eb;
    word-break: break-all;
    text-align: center
}

.nav-path {
    font-size: 13px;
    color: #636e72;
    line-height: 1.4;
    text-align: center
}

.nav-path-label {
    font-weight: 600;
    color: #2d3436;
    margin-right: 4px
}

.nav-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 8px 16px;
    border: 1px solid #dfe6e9;
    border-radius: 10px;
    background: #fff;
    color: #2d3436;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: .18s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04)
}

.nav-action:hover {
    background: #f8f9fa;
    border-color: #b2bec3
}

.answer-feedback {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px
}

.answer-feedback[hidden] {
    display: none
}

.thumb {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #8a8c9c;
    cursor: pointer
}

.thumb svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.thumb:hover {
    background: #f0eff7;
    color: #47495b
}

.thumb[aria-pressed="true"] {
    color: #1767bd;
    background: #e3f1ff
}

.thumb[aria-pressed="true"] svg {
    fill: #1767bd33
}

.confidence {
    margin-left: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #9a9ca3;
    letter-spacing: .2px
}