.djelatnik-ai-trigger {
    position: fixed;
    left: 22px;
    bottom: max(22px, env(safe-area-inset-bottom));
    z-index: 850;
    display: inline-grid;
    width: 58px;
    min-width: 58px;
    height: 58px;
    min-height: 58px;
    padding: 0;
    place-items: center;
    border-radius: 50%;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--uis-accent) 26%, transparent);
    white-space: nowrap
}

.djelatnik-ai-trigger[hidden] {
    display: none
}

.djelatnik-ai-trigger>span:first-child {
    font-size: 1.45rem;
    line-height: 1
}

.djelatnik-ai-trigger>span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.djelatnik-ai-modal {
    width: min(920px, calc(100vw - 36px))
}

.djelatnik-ai-panel {
    display: grid;
    gap: 18px;
    min-width: 0
}

.djelatnik-ai-heading {
    display: flex;
    align-items: center;
    gap: 14px
}

.djelatnik-ai-heading h3,
.djelatnik-ai-heading p {
    margin: 0
}

.djelatnik-ai-heading>div>p:last-child {
    margin-top: 5px;
    color: var(--uis-muted)
}

.djelatnik-ai-mark {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid var(--uis-line-strong);
    border-radius: 14px;
    background: var(--uis-accent-soft);
    color: var(--uis-accent);
    font-size: 1.55rem
}

.djelatnik-ai-quick {
    display: grid;
    gap: 9px
}

.djelatnik-ai-quick>small,
.djelatnik-ai-message>small {
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--uis-muted)
}

.djelatnik-ai-quick>div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.djelatnik-ai-quick button {
    min-height: 42px
}

.djelatnik-ai-transcript {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 210px;
    max-height: min(42vh, 380px);
    padding: 14px;
    overflow: auto;
    border: 1px solid var(--uis-line);
    border-radius: 14px;
    background: var(--uis-inset)
}

.djelatnik-ai-message {
    display: grid;
    gap: 5px;
    width: min(88%, 700px);
    padding: 12px 14px;
    border: 1px solid var(--uis-line);
    border-radius: 12px;
    background: var(--uis-card);
    color: var(--uis-text)
}

.djelatnik-ai-message.is-user {
    justify-self: end;
    background: var(--uis-accent-soft);
    border-color: var(--uis-line-strong)
}

.djelatnik-ai-message p {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.55
}

.djelatnik-ai-message.is-loading p {
    color: var(--uis-muted)
}

.djelatnik-ai-message.is-error {
    border-color: var(--uis-line-strong)
}

.djelatnik-ai-answer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 7px
}

.djelatnik-ai-form {
    display: grid;
    gap: 8px
}

.djelatnik-ai-form>label {
    font-weight: 750
}

.djelatnik-ai-form>div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: stretch
}

.djelatnik-ai-form textarea {
    min-height: 66px;
    max-height: 150px;
    resize: vertical
}

.djelatnik-ai-form button[type="submit"] {
    min-width: 112px
}

.djelatnik-ai-form>small,
.djelatnik-ai-form>footer {
    color: var(--uis-muted)
}

.djelatnik-ai-form>footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .72rem
}

.djelatnik-ai-form>footer output {
    flex: 0 0 auto;
    font: inherit;
    font-weight: 750;
    font-variant-numeric: tabular-nums
}

body[data-interface-surface="glass"] .djelatnik-ai-heading>div>p:last-child,
body[data-interface-surface="glass"] .djelatnik-ai-quick>small,
body[data-interface-surface="glass"] .djelatnik-ai-message>small,
body[data-interface-surface="glass"] .djelatnik-ai-form>small {
    color: var(--uig-muted)
}

body[data-interface-surface="glass"] .djelatnik-ai-form>footer {
    color: var(--uig-muted)
}

body[data-interface-surface="glass"] .djelatnik-ai-mark {
    border-color: var(--uig-line);
    background: var(--uig-inset)
}

body[data-interface-surface="glass"] .djelatnik-ai-transcript {
    border-color: var(--uig-line);
    background: var(--uig-inset)
}

body[data-interface-surface="glass"] .djelatnik-ai-message {
    border-color: var(--uig-line);
    background: var(--uig-bg);
    color: var(--uig-text)
}

body[data-interface-surface="glass"] .djelatnik-ai-message.is-user {
    background: var(--uig-bg-alt)
}

@media(max-width:760px) {
    .djelatnik-ai-trigger {
        left: 14px;
        bottom: max(82px, calc(14px + env(safe-area-inset-bottom)));
        width: 54px;
        min-width: 54px;
        height: 54px;
        min-height: 54px
    }

    .djelatnik-ai-modal {
        width: calc(100vw - 20px)
    }

    .djelatnik-ai-panel {
        gap: 14px
    }

    .djelatnik-ai-heading {
        padding-right: 42px
    }

    .djelatnik-ai-quick>div {
        display: grid;
        grid-template-columns: 1fr 1fr
    }

    .djelatnik-ai-quick button {
        width: 100%;
        height: auto;
        min-height: 44px;
        padding: 9px
    }

    .djelatnik-ai-transcript {
        min-height: 190px;
        max-height: 38vh;
        padding: 10px
    }

    .djelatnik-ai-message {
        width: 94%
    }

    .djelatnik-ai-form>div {
        grid-template-columns: 1fr
    }

    .djelatnik-ai-form button[type="submit"] {
        width: 100%
    }
}

@media(max-width:430px) {
    .djelatnik-ai-quick>div {
        grid-template-columns: 1fr
    }

    .djelatnik-ai-transcript {
        max-height: 34vh
    }
}

.djelatnik-ai-chat {
    position: fixed;
    left: 22px;
    bottom: max(94px, calc(94px + env(safe-area-inset-bottom)));
    z-index: 849;
    display: grid;
    width: min(390px, calc(100vw - 32px));
    max-height: min(680px, calc(100vh - 126px));
    gap: 13px;
    padding: 16px;
    border: 1px solid var(--uis-line-strong);
    border-radius: 20px;
    background: var(--uis-panel);
    color: var(--uis-text);
    box-shadow: 0 24px 64px color-mix(in srgb, var(--uis-text) 24%, transparent);
    opacity: 0;
    overflow: hidden;
    transform: translateY(14px) scale(.96);
    transform-origin: bottom left;
    transition: opacity .18s ease, transform .18s ease
}

.djelatnik-ai-chat[hidden] {
    display: none
}

.djelatnik-ai-chat.is-open {
    opacity: 1;
    transform: translateY(0) scale(1)
}

.djelatnik-ai-chat .djelatnik-ai-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px
}

.djelatnik-ai-chat .djelatnik-ai-heading h3 {
    font-size: 1.05rem;
    line-height: 1.25
}

.djelatnik-ai-chat .djelatnik-ai-heading small {
    display: block;
    margin-bottom: 3px;
    color: var(--uis-accent);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .1em
}

.djelatnik-ai-chat .djelatnik-ai-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 1.2rem
}

.djelatnik-ai-close {
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--uis-line);
    border-radius: 11px;
    background: var(--uis-inset);
    color: var(--uis-text);
    font: inherit;
    font-size: 1.3rem;
    cursor: pointer
}

.djelatnik-ai-close:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--uis-accent) 28%, transparent);
    outline-offset: 2px
}

.djelatnik-ai-chat .djelatnik-ai-quick>div {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px
}

.djelatnik-ai-chat .djelatnik-ai-quick button {
    min-height: 36px;
    padding: 0 10px;
    font-size: .7rem;
    flex: 0 0 auto
}

.djelatnik-ai-chat .djelatnik-ai-transcript {
    min-height: 180px;
    max-height: min(350px, 38vh);
    padding: 10px;
    border-radius: 13px
}

.djelatnik-ai-chat .djelatnik-ai-message {
    width: 92%;
    padding: 10px 11px;
    font-size: .78rem
}

.djelatnik-ai-chat .djelatnik-ai-message>small {
    font-size: .58rem
}

.djelatnik-ai-chat .djelatnik-ai-form {
    gap: 6px
}

.djelatnik-ai-chat .djelatnik-ai-form>div {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px
}

.djelatnik-ai-chat .djelatnik-ai-form textarea {
    min-height: 46px;
    max-height: 110px;
    padding: 12px;
    border: 1px solid var(--uis-line);
    border-radius: 12px;
    background: var(--uis-inset);
    color: var(--uis-text);
    font: inherit;
    resize: none
}

.djelatnik-ai-chat .djelatnik-ai-form textarea:focus {
    border-color: var(--uis-accent);
    outline: 3px solid color-mix(in srgb, var(--uis-accent) 22%, transparent);
    outline-offset: 1px
}

.djelatnik-ai-chat .djelatnik-ai-form button[type="submit"] {
    min-width: 82px;
    min-height: 46px;
    padding: 0 13px
}

.djelatnik-ai-chat .djelatnik-ai-form>small,
.djelatnik-ai-chat .djelatnik-ai-form>footer {
    font-size: .66rem
}

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

body[data-interface-surface="glass"] .djelatnik-ai-chat {
    border-color: var(--uig-line);
    background: var(--uig-panel);
    color: var(--uig-text);
    backdrop-filter: blur(18px) saturate(1.1)
}

body[data-interface-surface="glass"] .djelatnik-ai-chat .djelatnik-ai-close,
body[data-interface-surface="glass"] .djelatnik-ai-chat .djelatnik-ai-form textarea {
    border-color: var(--uig-line);
    background: var(--uig-inset);
    color: var(--uig-text)
}

@media(max-width:760px) {
    .djelatnik-ai-chat {
        left: 10px;
        bottom: max(148px, calc(80px + env(safe-area-inset-bottom)));
        width: calc(100vw - 20px);
        max-height: calc(100vh - 168px);
        padding: 13px;
        border-radius: 17px
    }

    .djelatnik-ai-chat .djelatnik-ai-heading {
        padding-right: 0
    }

    .djelatnik-ai-chat .djelatnik-ai-transcript {
        min-height: 150px;
        max-height: 30vh
    }

    .djelatnik-ai-chat .djelatnik-ai-form>div {
        grid-template-columns: minmax(0, 1fr) auto
    }

    .djelatnik-ai-chat .djelatnik-ai-form button[type="submit"] {
        width: auto;
        min-width: 74px
    }
}

@media(prefers-reduced-motion:reduce) {
    .djelatnik-ai-chat {
        transition: none
    }
}

.djelatnik-ai-trigger>img {
    display: block;
    width: 35px;
    height: 35px;
    object-fit: contain
}

.djelatnik-ai-trigger>img+span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.djelatnik-ai-mark>img {
    display: block;
    width: 27px;
    height: 27px;
    object-fit: contain
}

.djelatnik-ai-chat.is-closing {
    pointer-events: none
}

.djelatnik-ai-chat .djelatnik-ai-close {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0
}

.djelatnik-ai-chat .djelatnik-ai-quick button {
    flex: 0 0 auto
}

.djelatnik-ai-chat .djelatnik-ai-form button[type="submit"] {
    border-radius: 11px
}

.djelatnik-ai-message {
    animation: djelatnikAiMessageIn .24s cubic-bezier(.2, .75, .25, 1) both
}

.djelatnik-ai-message.is-user {
    --ai-message-shift: 10px
}

.djelatnik-ai-message.is-assistant {
    --ai-message-shift: -10px
}

.djelatnik-ai-message.is-loading p::after {
    display: inline-block;
    width: 1.15em;
    overflow: hidden;
    vertical-align: bottom;
    content: "…";
    animation: djelatnikAiThinking 1s steps(4, end) infinite
}

.djelatnik-ai-nudge {
    position: fixed;
    left: 90px;
    bottom: max(24px, calc(24px + env(safe-area-inset-bottom)));
    z-index: 849;
    display: grid;
    width: min(232px, calc(100vw - 112px));
    min-height: 64px;
    justify-items: start;
    align-content: center;
    gap: 4px;
    padding: 11px 16px 12px;
    text-align: left;
    white-space: normal;
    opacity: 0;
    transform: translateX(-10px) scale(.96);
    transform-origin: left center;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s cubic-bezier(.2, .75, .25, 1)
}

.djelatnik-ai-nudge::before {
    position: absolute;
    left: -6px;
    bottom: 22px;
    width: 11px;
    height: 11px;
    border-left: 1px solid var(--uis-line);
    border-bottom: 1px solid var(--uis-line);
    background: color-mix(in srgb, var(--uis-accent) 8%, var(--uis-inset));
    content: "";
    transform: rotate(45deg)
}

.djelatnik-ai-nudge strong,
.djelatnik-ai-nudge span {
    position: relative;
    z-index: 1
}

.djelatnik-ai-nudge strong {
    color: var(--uis-text);
    font-size: .82rem;
    line-height: 1.28
}

.djelatnik-ai-nudge .djelatnik-ai-nudge-kicker {
    color: var(--uis-muted);
    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .09em;
    line-height: 1.15;
    text-transform: uppercase
}

.djelatnik-ai-nudge.is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto
}

body[data-interface-surface="glass"] .djelatnik-ai-nudge::before {
    border-color: var(--uig-line);
    background: color-mix(in srgb, var(--uis-accent) 8%, var(--uig-inset))
}

body[data-interface-surface="glass"] .djelatnik-ai-nudge .djelatnik-ai-nudge-kicker {
    color: var(--uig-muted)
}

body[data-interface-surface="glass"] .djelatnik-ai-nudge strong {
    color: var(--uig-text)
}

@keyframes djelatnikAiMessageIn {
    from {
        opacity: 0;
        transform: translateX(var(--ai-message-shift, 0)) translateY(4px) scale(.985)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes djelatnikAiThinking {
    0% {
        width: 0
    }

    100% {
        width: 1.15em
    }
}

@media(max-width:760px) {
    .djelatnik-ai-nudge {
        left: 78px;
        bottom: max(84px, calc(16px + env(safe-area-inset-bottom)));
        width: min(250px, calc(100vw - 92px))
    }
}

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

    .djelatnik-ai-message,
    .djelatnik-ai-message.is-loading p::after {
        animation: none
    }

    .djelatnik-ai-nudge {
        transition: none
    }
}

.djelatnik-ai-chat .djelatnik-ai-quick>div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
    padding-bottom: 0
}

.djelatnik-ai-chat .djelatnik-ai-quick button {
    width: 100%;
    min-height: 36px;
    padding: 7px 9px;
    font-size: .7rem;
    line-height: 1.2
}

.djelatnik-ai-trigger.ui-button {
    display: inline-grid !important;
    width: 58px !important;
    min-width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 !important;
    place-items: center;
    border-radius: 50% !important
}

.djelatnik-ai-trigger.ui-button[hidden] {
    display: none !important
}

.djelatnik-ai-nudge.ui-button {
    display: grid !important;
    width: min(232px, calc(100vw - 112px)) !important;
    min-height: 64px !important;
    justify-items: start;
    align-content: center;
    gap: 4px;
    padding: 11px 16px 12px !important;
    border-radius: 15px !important;
    opacity: 0;
    filter: blur(3px);
    transform: translateX(-14px) scale(.96);
    pointer-events: none;
    transition: opacity .24s ease, filter .3s ease, transform .34s cubic-bezier(.2, .8, .2, 1) !important
}

.djelatnik-ai-nudge.ui-button.is-visible {
    opacity: 1;
    filter: none;
    transform: translateX(0) scale(1);
    pointer-events: auto;
    animation: djelatnikAiNudgeIn .34s cubic-bezier(.2, .8, .2, 1) both
}

@keyframes djelatnikAiNudgeIn {
    from {
        opacity: 0;
        filter: blur(3px);
        transform: translateX(-14px) scale(.96)
    }

    to {
        opacity: 1;
        filter: none;
        transform: translateX(0) scale(1)
    }
}

@media(max-width:760px) {
    .djelatnik-ai-trigger.ui-button {
        width: 54px !important;
        min-width: 54px !important;
        height: 54px !important;
        min-height: 54px !important
    }

    .djelatnik-ai-nudge.ui-button {
        width: min(222px, calc(100vw - 92px)) !important
    }
}

@media(prefers-reduced-motion:reduce) {
    .djelatnik-ai-nudge.ui-button.is-visible {
        animation: none
    }

    .djelatnik-ai-nudge.ui-button {
        filter: none;
        transition: none !important
    }
}