:root {
    --ko-green:#18251d;
    --ko-green-2:#26382c;
    --ko-light:#f5f2ea;
    --ko-bg:#faf9f5;
    --ko-accent:#70c244;
    --ko-border:#e5e8e3;
    --ko-muted:#68736c;
}

.ko-rag-widget {
    width:100%;
    max-width:440px;
    height:720px;
    margin:20px auto;
    border-radius:28px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 25px 70px rgba(24,37,29,.16);
    display:flex;
    flex-direction:column;
    font-family:Inter,Arial,sans-serif;
}

.ko-rag-header {
    position:relative;
    padding:20px;
    color:#fff;
    background:linear-gradient(145deg,#18251d,#304235);
}

.ko-rag-brand {
    display:flex;
    align-items:center;
    gap:10px;
}

.ko-rag-logo {
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    background:rgba(255,255,255,.09);
}

.ko-rag-brand-name {
    font-size:15px;
    font-weight:800;
}

.ko-rag-status {
    margin-top:3px;
    color:rgba(255,255,255,.68);
    font-size:10px;
}

.ko-rag-status span {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#70c244;
    margin-right:5px;
}

.ko-rag-reset {
    position:absolute;
    top:20px;
    right:20px;
    width:34px;
    height:34px;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.08);
    color:#fff;
    border-radius:10px;
    cursor:pointer;
}

.ko-rag-header h2 {
    margin:20px 0 6px;
    color:#fff;
    font-size:23px;
    line-height:1.2;
    letter-spacing:-.6px;
}

.ko-rag-header p {
    margin:0;
    color:rgba(255,255,255,.72);
    font-size:11.5px;
    line-height:1.55;
}

.ko-rag-messages {
    flex:1;
    overflow:auto;
    padding:20px 16px;
    background:var(--ko-bg);
}

.ko-rag-message {
    display:flex;
    margin-bottom:14px;
    animation:koIn .25s ease;
}

.ko-rag-message.user {
    justify-content:flex-end;
}

@keyframes koIn {
    from { opacity:0; transform:translateY(6px); }
    to { opacity:1; transform:translateY(0); }
}

.ko-rag-avatar {
    width:31px;
    height:31px;
    min-width:31px;
    margin-right:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:var(--ko-green);
    color:#fff;
    font-size:13px;
}

.ko-rag-bubble {
    max-width:84%;
    padding:12px 14px;
    border-radius:17px;
    font-size:12.5px;
    line-height:1.6;
}

.ko-rag-message.bot .ko-rag-bubble {
    background:#fff;
    border:1px solid var(--ko-border);
    border-top-left-radius:5px;
    color:#29352e;
}

.ko-rag-message.user .ko-rag-bubble {
    color:#fff;
    background:var(--ko-green);
    border-top-right-radius:5px;
}

.ko-rag-bubble a {
    color:#4d8d37;
    font-weight:700;
}

.ko-rag-quick {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    padding:4px 0 10px;
}

.ko-rag-quick button {
    padding:10px 8px;
    border:1px solid var(--ko-border);
    border-radius:11px;
    background:#fff;
    color:var(--ko-green);
    cursor:pointer;
    font:600 10px Inter,Arial,sans-serif;
}

.ko-rag-quick button:hover {
    background:#f5f9f2;
    border-color:#b9d3b0;
}

.ko-rag-input-wrap {
    position:relative;
    padding:11px 13px 13px;
    background:#fff;
    border-top:1px solid var(--ko-border);
}

.ko-rag-input-wrap textarea {
    width:100%;
    min-height:42px;
    max-height:100px;
    resize:none;
    outline:none;
    border:1px solid #dce1dc;
    border-radius:15px;
    padding:12px 48px 12px 13px;
    background:#fafbf9;
    font:12px/1.5 Inter,Arial,sans-serif;
    color:var(--ko-green);
}

.ko-rag-input-wrap textarea:focus {
    border-color:#a8c99f;
    box-shadow:0 0 0 3px rgba(112,194,68,.08);
}

.ko-rag-send {
    position:absolute;
    right:21px;
    top:17px;
    width:35px;
    height:35px;
    border:0;
    border-radius:11px;
    background:var(--ko-green);
    color:#fff;
    cursor:pointer;
}

.ko-rag-send:disabled {
    opacity:.5;
}

.ko-rag-disclaimer {
    margin-top:6px;
    text-align:center;
    color:#9aa19c;
    font-size:8px;
}

.ko-rag-dots {
    display:flex;
    gap:4px;
}

.ko-rag-dots span {
    width:5px;
    height:5px;
    border-radius:50%;
    background:#87918a;
    animation:koDot 1s infinite;
}

.ko-rag-dots span:nth-child(2) { animation-delay:.15s; }
.ko-rag-dots span:nth-child(3) { animation-delay:.3s; }

@keyframes koDot {
    0%,60%,100% { transform:translateY(0); opacity:.4; }
    30% { transform:translateY(-4px); opacity:1; }
}

.ko-rag-card {
    margin-top:10px;
    padding:13px;
    border-radius:14px;
    background:#f4f8f2;
    border:1px solid #dce8d7;
}

.ko-rag-card strong {
    display:block;
    margin-bottom:4px;
    font-size:11px;
}

.ko-rag-card p {
    margin:0 0 10px;
    color:#69736c;
    font-size:10px;
}

.ko-rag-card a {
    display:block;
    text-align:center;
    padding:9px;
    border-radius:9px;
    text-decoration:none;
    font-size:10px;
    font-weight:700;
}

.ko-rag-card-primary {
    background:var(--ko-green);
    color:#fff !important;
}

.ko-rag-card-secondary {
    margin-top:6px;
    background:#fff;
    color:var(--ko-green) !important;
    border:1px solid #d9dfd8;
}

@media(max-width:600px) {
    .ko-rag-widget {
        max-width:none;
        height:100vh;
        margin:0;
        border-radius:0;
    }
}