* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


:root {

    --bg: #f8fafc;
    --white: #ffffff;
    --text: #111827;
    --muted: #64748b;
    --border: #e5e7eb;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --bubble-ai: #f1f5f9;
    --bubble-user: #2563eb;

}



body {

    width: 100%;
    height: 100vh;

    background: var(--bg);

    font-family: "Vazirmatn", sans-serif;

    color: var(--text);

    overflow: hidden;

}




.app {

    width: 100%;
    height: 100vh;

    display: flex;

}



/* ======================
        SIDEBAR
====================== */


.sidebar {

    width: 290px;

    height: 100vh;

    background: var(--white);

    border-left: 1px solid var(--border);

    display: flex;

    flex-direction: column;

    padding: 22px;

}




.logo {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 25px;

}



.logo-icon {

    width: 48px;

    height: 48px;

    border-radius: 16px;

    background: var(--primary);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

}



.logo h2 {

    font-size: 22px;

    font-weight: 800;

}



.logo span {

    font-size: 12px;

    color: var(--muted);

}





/* New Chat Button */


.new-chat {

    width: 100%;

    height: 48px;

    border: none;

    border-radius: 14px;

    background: var(--text);

    color: white;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-family: inherit;

    font-size: 15px;

    transition: .25s;

}



.new-chat:hover {

    transform: translateY(-2px);

    opacity: .9;

}




/* History */


.chat-history {

    margin-top: 30px;

    flex: 1;

}



.chat-history h4 {

    color: var(--muted);

    font-size: 13px;

    margin-bottom: 12px;

}





.history-item {

    height: 45px;

    padding: 0 14px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    gap: 10px;

    cursor: pointer;

    transition: .2s;

    font-size: 14px;

}



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

    background: #eff6ff;

    color: var(--primary);

}




/* Sidebar Footer */


.sidebar-footer {

    border-top: 1px solid var(--border);

    padding-top: 15px;

}



.sidebar-footer button {

    width: 100%;

    height: 42px;

    background: transparent;

    border: none;

    display: flex;

    align-items: center;

    gap: 12px;

    cursor: pointer;

    color: var(--text);

    font-family: inherit;

    border-radius: 10px;

    padding: 0 10px;

}



.sidebar-footer button:hover {

    background: #f8fafc;

}

/* ======================
        MAIN AREA
====================== */


.main {

    flex: 1;

    height: 100vh;

    display: flex;

    flex-direction: column;

    background: var(--bg);

}



/* ======================
        TOP BAR
====================== */


.topbar {

    height: 75px;

    background: rgba(255,255,255,.85);

    backdrop-filter: blur(10px);

    border-bottom: 1px solid var(--border);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 30px;

}



.topbar h2 {

    font-size: 20px;

    font-weight: 700;

}



.topbar p {

    color: var(--muted);

    font-size: 12px;

    margin-top: 3px;

}




.right {

    display: flex;

    gap: 10px;

}



.icon-btn {

    width: 40px;

    height: 40px;

    border-radius: 12px;

    border: 1px solid var(--border);

    background: white;

    cursor: pointer;

    transition: .25s;

}



.icon-btn:hover {

    background: #f1f5f9;

    transform: translateY(-2px);

}




/* ======================
        CHAT
====================== */


.chat-container {

    flex: 1;

    overflow-y: auto;

    padding: 30px;

    scroll-behavior: smooth;

}



.chat-container::-webkit-scrollbar {

    width: 6px;

}


.chat-container::-webkit-scrollbar-thumb {

    background: #cbd5e1;

    border-radius: 10px;

}





/* ======================
        MESSAGES
====================== */


.message {

    display: flex;

    gap: 14px;

    margin-bottom: 25px;

    max-width: 850px;

}



.avatar {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    flex-shrink: 0;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

}



.ai-avatar {

    background: #eff6ff;

}





.bubble {

    background:white;

    border:1px solid var(--border);

    border-radius:20px;

    padding:18px 20px;

    box-shadow:0 5px 15px rgba(0,0,0,.03);

    line-height:1.9;

}





/* User Message */


.message.user {

    flex-direction:row-reverse;

    margin-right:auto;

}



.message.user .bubble {

    background:var(--bubble-user);

    color:white;

    border:none;

}




.user-avatar {

    background:#2563eb;

    color:white;

}





/* ======================
        MESSAGE TOOLS
====================== */


.message-tools {

    margin-top:12px;

    display:flex;

    gap:8px;

}



.message-tools button {

    width:32px;

    height:32px;

    border-radius:9px;

    border:1px solid var(--border);

    background:white;

    cursor:pointer;

    color:var(--muted);

    transition:.2s;

}



.message-tools button:hover {

    color:var(--primary);

    background:#eff6ff;

}






/* ======================
        MARKDOWN
====================== */


.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {

    margin-bottom:12px;

}



.markdown-body p {

    margin-bottom:12px;

}



.markdown-body ul {

    padding-right:25px;

    margin-bottom:15px;

}



.markdown-body code {

    background:#f1f5f9;

    padding:3px 7px;

    border-radius:6px;

    font-family:monospace;

}



.markdown-body pre {

    background:#0f172a;

    color:white;

    padding:18px;

    border-radius:14px;

    overflow-x:auto;

    margin-top:15px;

}



.markdown-body pre code {

    background:none;

    padding:0;

}

/* ======================
        INPUT AREA
====================== */


.chat-input {

    padding:20px 30px;

    background:transparent;

}



.input-wrapper {

    background:white;

    border:1px solid var(--border);

    border-radius:22px;

    padding:10px;

    display:flex;

    align-items:flex-end;

    gap:10px;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}



.input-wrapper textarea {

    flex:1;

    resize:none;

    border:none;

    outline:none;

    font-family:inherit;

    font-size:15px;

    min-height:45px;

    max-height:150px;

    padding:12px;

    color:var(--text);

}



.input-wrapper textarea::placeholder {

    color:#94a3b8;

}





.tool-btn {

    width:42px;

    height:42px;

    border:none;

    background:#f8fafc;

    border-radius:13px;

    cursor:pointer;

    transition:.2s;

}



.tool-btn:hover {

    background:#eff6ff;

    color:var(--primary);

}




.send-btn {

    width:45px;

    height:45px;

    border:none;

    border-radius:14px;

    background:var(--primary);

    color:white;

    cursor:pointer;

    transition:.25s;

}



.send-btn:hover {

    background:var(--primary-dark);

    transform:scale(1.05);

}



.send-btn.stop {

    background:#ef4444;

}





.input-info {

    text-align:center;

    color:var(--muted);

    font-size:12px;

    margin-top:10px;

}





/* ======================
        THINKING
====================== */


.thinking {

    display:flex;

    gap:14px;

    margin-bottom:20px;

}



.thinking-box {

    background:white;

    border:1px solid var(--border);

    padding:14px 18px;

    border-radius:18px;

}



.thinking-text {

    font-size:14px;

    color:var(--muted);

}



.thinking-dots {

    display:flex;

    gap:5px;

    margin-top:8px;

}



.thinking-dots span {

    width:7px;

    height:7px;

    background:#64748b;

    border-radius:50%;

    animation:bounce 1.2s infinite;

}



.thinking-dots span:nth-child(2){

    animation-delay:.2s;

}



.thinking-dots span:nth-child(3){

    animation-delay:.4s;

}



@keyframes bounce {

    0%,100% {

        transform:translateY(0);

    }

    50% {

        transform:translateY(-5px);

    }

}





/* ======================
        TOAST
====================== */


.toast {

    position:fixed;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    background:#111827;

    color:white;

    padding:12px 25px;

    border-radius:12px;

    opacity:0;

    pointer-events:none;

    transition:.3s;

}



.toast.show {

    opacity:1;

}





.hidden {

    display:none !important;

}





/* ======================
        MODAL
====================== */


.modal {

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.4);

    display:flex;

    align-items:center;

    justify-content:center;

}



.modal-content {

    width:400px;

    background:white;

    border-radius:22px;

    overflow:hidden;

}



.modal-header {

    padding:20px;

    border-bottom:1px solid var(--border);

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.modal-header button {

    border:none;

    background:none;

    cursor:pointer;

    font-size:20px;

}



.modal-body {

    padding:20px;

}



.setting-item {

    display:flex;

    justify-content:space-between;

    padding:15px 0;

    border-bottom:1px solid var(--border);

}






/* ======================
        RESPONSIVE
====================== */


@media(max-width:900px){


.sidebar {

    display:none;

}



.chat-container {

    padding:20px;

}



.topbar {

    padding:0 15px;

}



.chat-input {

    padding:15px;

}



}



@media(max-width:500px){


.message {

    max-width:100%;

}



.bubble {

    padding:14px;

}



.input-wrapper {

    border-radius:18px;

}


}