:root {

    color-scheme:light;
    --bg:#f7f9fc;
    --card:rgba(255,255,255,.96);
    --line:rgba(165,165,165,.3);
    --text:#374151;
    --muted:#6b7280;
    --blue:#2563eb;
    --cyan:rgb(54,172,188);
    --green:#16a34a

}

* {
    box-sizing:border-box
}

html,body {
    height:100%
}

body {

    margin:0;
    overflow:hidden;
    color:var(--text);
    background:radial-gradient(circle at 10% 5%,rgba(96,165,250,.13),transparent 30%),radial-gradient(circle at 92% 92%,rgba(54,172,188,.1),transparent 28%),var(--bg);
    font-family:system-ui,sans-serif

}

button,textarea,select {
    font:inherit
}

button {
    color:inherit
}

#w-tekst{

        font-weight: 50;
        color: #948e8e;
        
}


.ambient {

    position:fixed;
    inset:0;
    pointer-events:none

}

.ambient-one {

    opacity:.3;
    background-image:radial-gradient(2px 2px at 20px 30px,#17b2d5 50%,transparent 51%);
    background-size:100px 100px;
    animation:snowMove 12s linear infinite

}

.ambient-two {
    display:none
}

.app-shell {

    position:relative;
    display:grid;
    grid-template-columns:270px minmax(0,1fr);
    height:100vh;
    transition:grid-template-columns .25s ease

}

.app-shell.sidebar-collapsed {
    grid-template-columns:0 minmax(0,1fr)
}

.sidebar {

    z-index:5;
    display:flex;
    flex-direction:column;
    padding:22px 18px 18px;
    border-right:1px solid var(--line);
    background:rgba(255,255,255,.87);
    box-shadow:3px 0 18px rgba(37,99,235,.08);
    backdrop-filter:blur(14px);
    transition:transform .25s ease,opacity .2s ease

}

.app-shell.sidebar-collapsed .sidebar {

    opacity:0;
    pointer-events:none;
    transform:translateX(-100%)

}

.sidebar-header {

    display:flex;
    align-items:flex-start;
    gap:8px

}

.brand {

    display:flex;
    flex:1;
    align-items:center;
    gap:12px;
    padding:0 8px 26px

}

.sidebar-toggle {

    display:grid;
    flex:0 0 auto;
    place-items:center;
    width:32px;
    height:32px;
    margin-top:4px;
    padding:0;
    border:1px solid transparent;
    border-radius:9px;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    transition:background .2s,border-color .2s,color .2s

}

.sidebar-toggle:hover {

    border-color:var(--line);
    background:rgba(37,99,235,.06);
    color:var(--blue)

}

.sidebar-toggle:focus-visible {

    outline:3px solid rgba(37,99,235,.2);
    outline-offset:2px

}

.sidebar-toggle svg {

    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:1.7

}

.app-shell.sidebar-collapsed .menu-button {
    display:block
}
.brand-mark,.hero-icon,.avatar {

    display:grid;
    place-items:center;
    border:1px solid var(--blue);
    background:#fff;
    color:var(--blue);
    box-shadow:0 3px 12px rgba(37,99,235,.16);
    font-weight:750

}

.brand-mark {

    width:40px;
    height:40px;
    border-radius:1em

}

.brand strong,.brand span {
    display:block
}

.brand strong {
    font-size:17px
}

.brand span {

    margin-top:2px;
    color:var(--muted);
    font-size:12px

}

.brand {

    border-radius:1em;
    cursor:pointer;
    transition:background .2s

}

/* .brand:hover{background:rgba(37,99,235,.045)} */
.brand:focus-visible {

    outline:3px solid rgba(37,99,235,.2);
    outline-offset:2px

}

.brand-mark {

    padding:0;
    cursor:pointer;
    transition:background .2s,transform .2s

}

.brand-mark:hover {

    background:rgba(37,99,235,.06);
    transform:translateY(-1px)

}

.brand-mark:focus-visible {

    outline:3px solid rgba(37,99,235,.2);
    outline-offset:2px

}

.new-chat {

    width:100%;
    padding:.75em 1em;
    border:1px solid var(--cyan);
    border-radius:1em;
    background:#fff;
    color:#1d4ed8;
    font-weight:650;
    cursor:pointer;
    transition:.2s

}

.new-chat:hover {

    background:rgba(54,172,188,.06);
    box-shadow:0 3px 12px rgba(37,99,235,.12)

}

.sidebar-label {

    margin:28px 9px 10px;
    color:var(--muted);
    font-size:11px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase

}

.history {

    flex:1;
    overflow-y:auto

}

.history-item {

    width:100%;
    padding:11px 12px;
    overflow:hidden;
    border:1px solid transparent;
    border-radius:.8em;
    background:transparent;
    color:var(--muted);
    text-align:left;
    text-overflow:ellipsis;
    white-space:nowrap;
    cursor:pointer

}

.history-item:hover,.history-item.active {

    border-color:var(--line);
    background:rgba(37,99,235,.035);
    color:#1d4ed8

}

.sidebar-footer {

    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 10px 4px;
    border-top:1px solid var(--line)

}

.sidebar-footer strong,.sidebar-footer span {

    display:block;
    font-size:12px

}

.sidebar-footer span {

    margin-top:2px;
    color:var(--muted)

}

.status-dot {

    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 3px rgba(22,163,74,.14);
    animation:pulse 2s infinite

}

.chat-panel {

    display:grid;
    grid-template-rows:72px minmax(0,1fr) auto;
    min-width:0

}

.topbar {

    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 32px;
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.76);
    backdrop-filter:blur(14px)

}

.app-menu-toggle {
    display:none
}

.app-menu {

    position:relative;
    display:flex;
    flex:1 1 560px;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    width:min(100%,780px);
    max-width:780px;
    min-width:420px;
    margin:0 clamp(16px,3vw,48px);
    padding:8px 12px;
    border:0;
    border-radius:1em;
    background:rgba(255,255,255,.94);
    box-shadow:0 0 14px rgba(37,99,235,.14)

}

.app-menu::before {

    position:absolute;
    inset:0;
    padding:1.5px;
    border-radius:inherit;
    background:linear-gradient(90deg,#fff,#2563eb,#fff,#60a5fa,#fff);
    background-size:400% 400%;
    content:"";
    pointer-events:none;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
    animation:alBorderMove 14s linear infinite

}

.app-menu a {

    position:relative;
    display:flex;
    flex:1 1 0;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-width:0;
    padding:8px 10px;
    border-radius:9px;
    color:rgb(33,153,73);
    font-size:12px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
    transition:background .2s,color .2s

}

.app-menu a:hover {

    background:rgba(54,172,188,.08);
    color:#1d4ed8

}

.app-menu a:focus-visible {

    outline:3px solid rgba(37,99,235,.2);
    outline-offset:1px

}

.app-menu svg {

    width:18px;
    height:18px;
    flex:0 0 18px;
    fill:none;
    stroke:currentColor;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:1.7

}

@media screen and (max-width:1180px) {

    .chat-panel {
        grid-template-rows:116px minmax(0,1fr) auto
    }

    .topbar {

        flex-wrap:wrap;
        align-content:center;
        gap:8px 12px;
        padding:8px 22px

    }

    .app-menu {

        order:3;
        flex:0 0 100%;
        width:100%;
        max-width:none;
        min-width:0;
        margin:0;
        padding:6px 8px;
        gap:4px

    }

    .app-menu a {

        gap:5px;
        padding:6px 5px;
        font-size:11px

    }

    .app-menu a span {
        display:inline
    }

    .app-menu svg {

        width:15px;
        height:15px;
        flex-basis:15px

    }

}

@media screen and (max-width:700px) {

    .chat-panel {
        grid-template-rows:112px minmax(0,1fr) auto
    }

    .topbar {

        position:relative;
        flex-wrap:wrap;
        align-content:center;
        gap:7px 8px;
        padding-top:7px;
        padding-bottom:7px

    }

    .app-menu-toggle {
        display:none
    }

    .app-menu {

        position:relative;
        inset:auto;
        z-index:auto;
        display:flex;
        order:3;
        flex:0 0 100%;
        width:100%;
        max-width:none;
        min-width:0;
        margin:0;
        padding:5px 4px;
        flex-direction:row;
        align-items:center;
        gap:1px

    }

    .app-menu a {

        flex:1 1 25%;
        justify-content:center;
        gap:3px;
        width:auto;
        min-width:0;
        padding:5px 2px;
        font-size:9px

    }

    .app-menu a span {

        display:inline;
        overflow:hidden;
        text-overflow:ellipsis

    }

    .app-menu svg {

        width:13px;
        height:13px;
        flex:0 0 13px

    }

}

@media screen and (max-width:520px) {

    .model-info {
        display:none
    }

    .topbar {
        gap:8px
    }

    .topbar select {

        width:min(145px,42vw);
        margin-left:auto

    }

}

.model-info span,.model-info strong {
    display:block
}

.model-info span {

    color:var(--muted);
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase

}

.model-info strong {

    margin-top:3px;
    font-size:14px

}

select {

    padding:.55em .8em;
    border:1px solid rgba(37,99,235,.35);
    border-radius:.7em;
    outline:none;
    background:#fff;
    color:#1d4ed8

}

.icon-button {

    width:auto;
    border:0;
    background:transparent;
    cursor:pointer

}

.menu-button {

    display:none;
    font-size:21px

}

.messages {

    overflow-y:auto;
    padding:34px clamp(20px,7vw,110px);
    scroll-behavior:smooth

}

.welcome {

    width:min(800px,100%);
    margin:clamp(25px,7vh,78px) auto 0;
    text-align:center

}

.hero-icon {

    width:58px;
    height:58px;
    margin:0 auto 20px;
    border-radius:1em;
    font-size:26px

}

.eyebrow {

    color:var(--blue);
    font-size:11px;
    font-weight:750;
    letter-spacing:.12em

}

h1 {

    margin:13px 0 12px;
    font-size:clamp(30px,4vw,46px);
    line-height:1.12

}

.welcome-copy {

    margin:0;
    color:var(--muted)

}

.suggestions {

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:40px

}

.suggestion {

    width:100%;
    padding:19px;
    border:1px solid var(--line);
    border-radius:1em;
    background:var(--card);
    box-shadow:0 4px 16px rgba(0,0,0,.045);
    text-align:left;
    cursor:pointer;
    transition:.2s

}

.suggestion:hover {

    border-color:var(--cyan);
    background:rgba(54,172,188,.04);
    transform:translateY(-2px)

}

.suggestion span,.suggestion strong,.suggestion small {
    display:block
}

.suggestion span {

    margin-bottom:20px;
    color:var(--blue);
    font-weight:750

}

.suggestion strong {
    font-size:14px
}

.suggestion small {

    margin-top:5px;
    color:var(--muted)

}

.message-row {

    display:flex;
    gap:13px;
    width:min(860px,100%);
    margin:0 auto 24px;
    animation:enter .25s ease-out

}

.message-row.user {
    justify-content:flex-end
}

.avatar {

    flex:0 0 36px;
    height:36px;
    border-radius:.8em;
    font-size:12px

}

.bubble {

    max-width:min(720px,86%);
    padding:13px 16px;
    border:1px solid var(--line);
    border-radius:.35em 1em 1em;
    background:#fff;
    box-shadow:0 4px 16px rgba(0,0,0,.045);
    line-height:1.65;
    white-space:pre-wrap;
    overflow-wrap:anywhere

}

.user .bubble {

    border-color:rgba(37,99,235,.26);
    border-radius:1em .35em 1em 1em;
    background:rgba(37,99,235,.075);
    color:#1e3a8a

}

.bubble code {

    padding:2px 5px;
    border-radius:5px;
    background:rgba(37,99,235,.08);
    color:#1d4ed8;
    font-family:Consolas,monospace

}

.typing {

    display:inline-flex;
    gap:5px;
    padding:8px 2px

}

.typing i {

    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--blue);
    animation:typing 1s infinite alternate

}

.typing i:nth-child(2) {
    animation-delay:.2s
}

.typing i:nth-child(3) {
    animation-delay:.4s
}

.composer-wrap {

    width:min(900px,calc(100% - 40px));
    margin:0 auto;
    padding-bottom:13px

}

.composer {

    position:relative;
    padding:14px 14px 10px 17px;
    border:0;
    border-radius:1.2em;
    background:#fff;
    box-shadow:0 0 14px rgba(37,99,235,.14)

}

.composer:before {

    position:absolute;
    inset:0;
    padding:1.5px;
    border-radius:inherit;
    background:linear-gradient(90deg,#fff,#2563eb,#fff,#60a5fa,#fff);
    background-size:400% 400%;
    content:"";
    pointer-events:none;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
    animation:alBorderMove 12s linear infinite

}

textarea {

    position:relative;
    display:block;
    width:100%;
    max-height:180px;
    resize:none;
    border:0;
    outline:0;
    background:transparent;
    color:var(--text);
    line-height:1.5

}

textarea::placeholder {
    color:#9ca3af
}

.composer-bottom {

    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    min-height:34px

}

.shortcut {

    color:#9ca3af;
    font-size:11px

}

.send-button {

    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border:1px solid var(--blue);
    border-radius:1em;
    background:#fff;
    color:var(--blue);
    font-weight:750;
    cursor:pointer

}

.send-button:hover {
    background:rgba(37,99,235,.06)
}

.send-button:disabled {

    opacity:.45;
    cursor:default

}

.disclaimer {

    margin:8px 0 0;
    color:var(--muted);
    font-size:10px;
    text-align:center

}

@keyframes alBorderMove {

    from {
        background-position:0 50%
    }

    to {
        background-position:400% 50%
    }


}

@keyframes snowMove {

    from {
        transform:translateY(-100px)
    }

    to {
        transform:translateY(100px)
    }


}

@keyframes pulse {

    50% {

        opacity:.35;
        transform:scale(.82)

    }


}

@keyframes typing {

    to {

        opacity:.25;
        transform:translateY(-3px)

    }


}

@keyframes enter {

    from {

        opacity:0;
        transform:translateY(7px)

    }


}

@media screen and (max-width:700px) {

    .app-shell {
        grid-template-columns:1fr
    }

    .sidebar {

        position:fixed;
        inset:0 auto 0 0;
        width:270px;
        transform:translateX(-100%);
        transition:transform .25s,opacity .2s

    }

    .app-shell.sidebar-collapsed {
        grid-template-columns:1fr
    }

    .app-shell.sidebar-collapsed .sidebar {

        opacity:1;
        pointer-events:auto

    }

    .sidebar.open {
        transform:translateX(0)
    }

    .menu-button {
        display:block
    }

    .topbar {
        padding:0 16px
    }

    .model-info {

        margin-right:auto;
        margin-left:12px

    }

    select {

        width:145px;
        font-size:13px

    }

    .messages {
        padding:24px 14px
    }

    .welcome {
        margin-top:24px
    }

    .suggestions {

        grid-template-columns:1fr;
        margin-top:28px

    }

    .suggestion span {
        margin-bottom:10px
    }

    .composer-wrap {
        width:calc(100% - 24px)
    }

    .shortcut {
        display:none
    }

    .composer-bottom {
        justify-content:flex-end
    }


}

/* Omogućiti stalno vidljiv i stilski usklađen klizač. */
.messages {

    overflow-y:scroll;
    scrollbar-gutter:stable;
    scrollbar-width:thin;
    scrollbar-color:rgba(37,99,235,.55) rgba(37,99,235,.06)

}

.history {

    scrollbar-gutter:stable;
    scrollbar-width:thin;
    scrollbar-color:rgba(37,99,235,.42) transparent

}

.messages::-webkit-scrollbar,.history::-webkit-scrollbar {
    width:10px
}

.messages::-webkit-scrollbar-track {

    background:rgba(37,99,235,.05);
    border-radius:1em

}

.history::-webkit-scrollbar-track {
    background:transparent
}

.messages::-webkit-scrollbar-thumb,.history::-webkit-scrollbar-thumb {

    border:2px solid transparent;
    border-radius:1em;
    background:rgba(37,99,235,.5);
    background-clip:padding-box

}

.messages::-webkit-scrollbar-thumb:hover,.history::-webkit-scrollbar-thumb:hover {

    background:rgba(37,99,235,.72);
    background-clip:padding-box

}

/* Grupisati naziv razgovora i komandu za brisanje. */
.history-entry {

    display:grid;
    grid-template-columns:minmax(0,1fr) 30px 30px;
    align-items:center;
    margin-bottom:4px;
    border:1px solid transparent;
    border-radius:.8em;
    transition:.2s

}

.history-entry:hover,.history-entry.active {

    border-color:var(--line);
    background:rgba(37,99,235,.035)

}

.history-entry .history-item {

    border:0;
    background:transparent

}

.history-entry.active .history-item {
    color:#1d4ed8
}

.conversation-action {

    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    padding:5px;
    border:0;
    border-radius:.6em;
    background:transparent;
    color:#9ca3af;
    cursor:pointer;
    opacity:0;
    transition:opacity .2s,color .2s,background .2s

}

.history-entry:hover .conversation-action,.history-entry:focus-within .conversation-action {
    opacity:1
}

.rename-chat:hover {

    background:rgba(37,99,235,.08);
    color:#2563eb

}

.delete-chat:hover {

    background:rgba(220,38,38,.08);
    color:#dc2626

}

.conversation-action:focus-visible {

    opacity:1;
    outline:2px solid rgba(37,99,235,.35);
    outline-offset:1px

}

.conversation-action svg {

    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round

}

@media (hover:none) {

    .conversation-action {
        opacity:1
    }


}

/* Zadržati navigaciju i unos u viewportu, a skrolovati samo sadržaj razgovora. */
.app-shell {

    height:100dvh;
    max-height:100dvh;
    overflow:hidden

}

.sidebar,.chat-panel {

    min-height:0;
    max-height:100dvh;
    overflow:hidden

}

.chat-panel {
    height:100dvh
}

.messages {

    min-height:0;
    height:100%;
    overscroll-behavior:contain

}

.history {
    min-height:0
}

/* Prikazati odgovor kompaktnije i uz poluprovidne površine. */
.assistant .bubble {

    font-size:14px;
    line-height:1.55;
    white-space:normal;
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(10px)

}

.user .bubble {

    font-size:14px;
    background:rgba(37,99,235,.065);
    backdrop-filter:blur(8px)

}

.composer {

    background:rgba(255,255,255,.76);
    backdrop-filter:blur(12px)

}

.suggestion {

    background:rgba(255,255,255,.68);
    backdrop-filter:blur(8px)

}

.assistant .bubble p {
    margin:.4em 0
}

.assistant .bubble h3 {

    margin:1.15em 0 .45em;
    color:#1d4ed8;
    font-size:1.02em;
    line-height:1.35

}

.assistant .bubble h3:first-child {
    margin-top:0
}

.assistant .bubble strong {

    color:#26354d;
    font-weight:750

}

.assistant .bubble ul {

    margin:.45em 0;
    padding-left:1.35em

}

.assistant .bubble li {
    margin:.25em 0
}

.assistant .bubble hr {

    margin:1em 0;
    border:0;
    border-top:1px solid rgba(37,99,235,.2)

}

.assistant .bubble pre {

    max-width:100%;
    margin:.75em 0;
    padding:1em;
    overflow-x:auto;
    border:1px solid rgba(37,99,235,.16);
    border-radius:.8em;
    background:rgba(30,41,59,.92);
    color:#e5e7eb;
    font:12.5px/1.55 Consolas,monospace;
    white-space:pre

}

.assistant .bubble pre code {

    padding:0;
    background:transparent;
    color:inherit

}