@font-face {
    font-family: "yekan";
    src: url('/styles/fonts/Yekan.ttf');
    src: url('/styles/fonts/Yekan.ttf#iefix') format('enbedded-opentype');
}
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: rgb(0, 0, 0);
    color: white;
    height: 100vh;
}
.logo img {
    width: 90px;
    cursor: pointer;
    transition: all 0.5s;
}
.logo img:hover {
    transform: scale(1.1);
}
.bi-chat-dots {
    border-radius: 50%;
    transition: all 0.2s;
    padding: 5px 9px 6px 9px;
}
.bi-chat-dots:hover {
    background-color: rgb(40, 39, 39);
}
.bi-gift-fill {
    border-radius: 50%;
    transition: all 0.2s;
    padding: 5px 9px 6px 9px;
}
.bi-gift-fill:hover {
    background-color: rgb(40, 39, 39)
}
.list-inline-item {
    list-style-position: inside;
    width: 40px;
    font-size: 16px;
    justify-content: center;
    justify-items: center;
    right: 0;
    border-radius: 50%;
    cursor: pointer;
}
.right-screen {
    padding-right: 0 !important;
    margin-top: 15px;
}
.left-screen {
    padding-right: 12px;
    height: calc(100vh - 15px);
    border-right: 1px solid rgb(26, 26, 26);
}
.rs-suggest {
    margin-top: 185px;
}
.text-suggest {
    font-size: 23px;
    max-width: 500px;
    width: 100%;
}
.rs-chat-massage {
    max-width: 836px;
    width: 100%;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.chat-bubble {
    line-height: 1.8;
    font-size: 14.5px;
    padding: 10px 16px;
    border-radius: 14px;
    max-width: 70%;
}

.chat-bubble.user {
    background-color: rgb(40, 39, 39);
    align-self: flex-start;
}

.chat-bubble.assistant {
    background-color: transparent;
    align-self: stretch;
    width: 100%;
    padding: 4px 0;
}
.text-place input {
    width: 100%;
    margin-top: 0;
    background-color: rgb(28, 28, 28);
    border: none;
    border-radius: 25px;
    padding: 15px 50px 15px 45px;
    color: aliceblue;
}
.rs-input-wrapper {
    max-width: 836px;
    width: 100%;
    margin: 40px auto 0;
    position: relative
}
.rs-input-wrapper i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
.rs-plus {
    position: relative;
    right: 20px;
    font-size: 26px;
    display: inline-flex;
    color: white;
    border-radius: 50%;
    padding: 5px;
    background-color: transparent;
    transition: all 0.2s;
}
.rs-plus:hover {
    background-color: rgba(70, 68, 68, 0.9);
}
.rs-microphone {
    left: 48px;
    margin-left: 15px;
    font-size: 18px;
    margin-right: 10px;
    display: inline-flex;
    color: white;
    border-radius: 50%;
    padding: 9px;
    background-color: transparent;
    transition: all 0.2s;
}
.rs-microphone:hover {
    background-color: rgba(70, 68, 68, 0.9);
}
.rs-wave {
    left: 20px;
    font-size: 24px;
    color: black;
}
.rs-wave::before {
    content: "";
    border-radius: 50%;
    padding: 5px;
    background-color: white;
    transition: all 0.2s;
}
.rs-wave:hover::before{
    background-color: rgb(152, 152, 152);
}
.rs-extensions {
    margin-top:24px;
    color: gray;
}
.rs-extensions span {
    padding: 7px 34px 7px 34px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    transition: all 0.2s;
}
.rs-extensions svg {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
}
.rs-extensions svg path,
.rs-extensions svg circle {
    stroke: rgb(171, 169, 169) !important;
}
.rs-creat-image {
    cursor: pointer;
}
.rs-creat-image:hover span {
    background-color: rgba(70, 68, 68, 0.9);
}
.rs-edit  {
   cursor: pointer; 
}
.rs-edit:hover span {
    background-color: rgba(70, 68, 68, 0.9);
}
.rs-look-something {
    cursor: pointer; 
}
.rs-look-something:hover span {
    background-color: rgba(70, 68, 68, 0.9);
}
.left-screen {
    position: relative;
    height: calc(100vh - 15px);
    border-right: 1px solid rgb(26, 26, 26);
}
.left-screen .bi-layout-sidebar {
    position: absolute;
    top: 18px;
    right: 20px;
}
.left-screen .bi-magic {
    position: absolute;
    top: 18px;
    left: 13px;
}
.left-screen {
    padding-top: 55px;
}

.ls-menu {
    margin-top: 10px;
}

.ls-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 10px;
    color: white;
    text-decoration: none;
    font-size: 14.5px;
}

.ls-item i {
    font-size: 17px;
    color: rgb(171, 169, 169);
}

.ls-item-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ls-item-status {
    color: #77798b;
    font-size: 11px;
    white-space: nowrap;
}

.ls-item:hover {
    background-color: rgb(40, 39, 39);
}

.ls-section-label {
    color: rgb(150, 150, 150);
    font-size: 12.5px;
    font-weight: 600;
    padding: 16px 8px 6px 8px;
}

.ls-recent-item {
    display: block;
    padding: 8px;
    border-radius: 8px;
    color: rgb(180, 180, 180);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ls-recent-item:hover,
.ls-recent-item.active {
    background-color: rgb(40, 39, 39);
    color: white;
}
.mobile-sidebar-toggle {
    opacity: 0.7;
}
.model-select-btn {
    background-color: rgb(0, 0, 0);
    border: none;
    color: white;
    border-radius: 20px;
    padding: 8px 22px;
    font-size: 16.6px;
    display: flex; 
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s;
}
.rs-model-selector .model-select-btn:hover {
    background-color: rgb(75, 75, 75);
}
.icon img{
    width: 25px;
    height: 25px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.model-selector-dd a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    align-items: center;
    justify-content: space-between;
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
}
.model-selector-dd a:hover {
    background-color: rgb(64, 63, 63);
}
.model-selector-dd .model-item:not(.active) .bi-check2 {
    visibility: hidden;
}
.modle-item:hover , rs-model-active {
    background-color: rgba(194, 189, 189, 0.758);
    color: white;
}
.model-selector-dd {
    display: none;
    position: absolute;
    top: 42px;
    left: 1px;
    width: 260px;
    background-color: rgb(24, 24, 24);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 6px;
    z-index: 50;
}
.rs-more-modle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    color: var(--model-purple, #7c5cff);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    border-top: 1px solid rgba(33, 33, 33, 0.849);
    margin-top: 4px;
}
.upggrade {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    color: var(--model-purple, #7c5cff);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}
.model-selector-dd.open {
    display: block;
}

/* AloGPT chat surface */
.chat-footer {
    margin-top: 50px;
}
.rs-suggest {
    margin-top: 100px !important;
}
.chat-page {
    --chat-bg: #0b0c12;
    --chat-panel: #11131c;
    --chat-panel-soft: #171a25;
    --chat-border: rgba(167, 139, 250, .16);
    --chat-purple: #7c5cff;
    --chat-lavender: #a78bfa;
    --chat-muted: #9b9cac;
    min-height: 100dvh;
    overflow: hidden;
    background: var(--chat-bg);
    font-family: Tahoma, Arial, sans-serif;
}
.chat-shell { display: flex; flex-direction: row; min-height: 100dvh; direction: ltr; }
.chat-page .left-screen {
    order: 2;
    flex: 0 0 280px;
    width: 280px;
    height: 100dvh;
    padding: 18px 14px;
    border: 0;
    border-left: 1px solid var(--chat-border);
    background: #10121a;
    direction: rtl;
}
.chat-page .left-screen .bi-layout-sidebar,
.chat-page .left-screen .bi-magic {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
}
.sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 26px; }
.sidebar-brand { display: inline-flex; align-items: center; gap: 8px; color: #f5f3ff; font-weight: 700; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; color: var(--chat-lavender); border: 1px solid rgba(167,139,250,.5); border-radius: 9px; }
.sidebar-icon, .header-icon { display: grid; place-items: center; width: 34px; height: 34px; color: var(--chat-muted); border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.sidebar-icon:hover, .header-icon:hover { color: #fff; background: var(--chat-panel-soft); }
.chat-page .ls-menu { margin-top: 0; }
.chat-page .ls-item { color: #e6e5ec; transition: background .18s, color .18s; }
.chat-page .ls-item:hover, .chat-page .ls-recent-item:hover, .chat-page .ls-recent-item.active { color: #fff; background: #1d2030; }
.chat-page .ls-item-disabled { color: #77798b; cursor: default; pointer-events: none; }
.chat-page .ls-item-disabled i { color: #5f6170; }
.chat-page .ls-item-disabled:hover { background: transparent; }
.chat-page .ls-section-label { color: #77798b; }
.chat-page .ls-recents-wrap { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; }
.chat-page .ls-recents-list { min-height: 0; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 2px 0 12px; direction: rtl; scrollbar-width: thin; scrollbar-color: #353044 transparent; }
.chat-page .ls-recents-list::-webkit-scrollbar { width: 5px; }
.chat-page .ls-recents-list::-webkit-scrollbar-thumb { border-radius: 10px; background: #353044; }
.chat-page .ls-recent-group-label { padding: 8px 8px 5px; color: #686a7b; font-size: 10px; font-weight: 600; }
.chat-page .ls-recent-items { display: grid; gap: 2px; }
.chat-page .ls-recent-row { position: relative; display: flex; align-items: center; min-width: 0; border-radius: 9px; transition: background .16s ease; }
.chat-page .ls-recent-row:hover, .chat-page .ls-recent-row:focus-within, .chat-page .ls-recent-row.active { background: rgba(124,92,255,.09); }
.chat-page .ls-recent-item { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; gap: 8px; height: 36px; padding: 7px 9px; color: #a7a8b6; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 12px; text-align: right; cursor: pointer; direction: rtl; }
.chat-page .ls-recent-title { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-page .ls-recent-item time { flex: 0 0 auto; color: #77798b; font-size: 10px; }
.chat-page .ls-recent-row.active .ls-recent-item, .chat-page .ls-recent-row:hover .ls-recent-item { color: #f2f0fa; }
.chat-page .ls-recent-row.active .ls-recent-item time, .chat-page .ls-recent-row:hover .ls-recent-item time { color: #a89ced; }
.chat-page .ls-recent-menu-toggle { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; margin-left: 3px; padding: 0; color: #8d8e9e; border: 0; border-radius: 8px; background: transparent; opacity: 0; cursor: pointer; transition: opacity .16s ease, color .16s ease, background .16s ease; }
.chat-page .ls-recent-row:hover .ls-recent-menu-toggle, .chat-page .ls-recent-row.active .ls-recent-menu-toggle, .chat-page .ls-recent-menu-toggle:focus-visible { opacity: 1; }
.chat-page .ls-recent-menu-toggle:hover { color: #fff; background: rgba(255,255,255,.08); }
.chat-page .ls-recent-menu { position: absolute; top: 33px; left: 6px; z-index: 10; display: none; min-width: 128px; padding: 5px; border: 1px solid var(--chat-border); border-radius: 10px; background: #1a1c27; box-shadow: 0 12px 28px rgba(0,0,0,.32); }
.chat-page .ls-recent-menu.open { display: grid; gap: 2px; }
.chat-page .ls-recent-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; color: #c5c5d0; border: 0; border-radius: 7px; background: transparent; font: inherit; font-size: 11px; text-align: right; cursor: pointer; }
.chat-page .ls-recent-menu button:hover { color: #fff; background: #25283a; }
.chat-page .ls-recent-menu button[data-action="delete"]:hover { color: #ff9aab; }
.chat-page .ls-recent-menu i { width: 14px; color: var(--chat-lavender); }
.chat-page .ls-recent-menu button[data-action="delete"] i { color: #e88a9a; }
.chat-page .ls-recent-empty { padding: 22px 8px; color: #707282; font-size: 11px; text-align: center; }
.chat-page.sidebar-collapsed .left-screen { display: none; }
.chat-page.sidebar-collapsed .right-screen { flex-basis: 100%; max-width: 100%; }
.chat-page .mobile-sidebar-toggle.show-desktop { display: grid; right: 15px; left: auto; place-items: center; }
.chat-page .right-screen { order: 1; display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; height: 100dvh; padding: 0 !important; margin: 0; }
.chat-header { flex: 0 0 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px; border-bottom: 1px solid var(--chat-border); direction: ltr; }
.header-actions { display: flex; gap: 4px; }
.rs-model-selector { z-index: 4; position: relative; margin-left: auto; direction: rtl; }
.chat-page .model-select-btn { color: #f3f1fa; background: transparent; font-size: 15px; }
.chat-page .model-select-btn:hover { background: var(--chat-panel-soft); }
.chat-page .model-selector-dd { top: 46px; right: 0; left: auto; background: #171923; border-color: var(--chat-border); box-shadow: 0 16px 45px rgba(0,0,0,.35); }
.chat-page .model-selector-dd a { color: #ededf4; }
.chat-content { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; overflow: hidden; direction: rtl; }
.rs-suggest { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 0; margin: 0; padding: clamp(48px, 10vh, 86px) 24px 10px; }
.text-suggest { max-width: 560px; color: #d9d7e1; font-size: clamp(20px, 2.2vw, 28px); text-align: center; }
.chat-content:not(.has-messages) .rs-chat-massage { display: none; }
.chat-content.has-messages .rs-suggest { display: none; }
.rs-chat-massage { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 900px; margin: 0 auto; padding: 12px 22px 32px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; direction: rtl; }
.rs-chat-massage::-webkit-scrollbar { display: none; width: 0; height: 0; }
.rs-chat-massage.is-active { display: flex; flex-direction: column; gap: 20px; }
.chat-message { display: flex; flex-direction: column; gap: 5px; max-width: 78%; }
.chat-message.user { align-self: flex-start; align-items: flex-start; }
.chat-message.assistant { align-self: stretch; max-width: 100%; align-items: flex-start; }
.chat-bubble { max-width: 100%; padding: 12px 16px; color: #f1f0f6; border: 1px solid transparent; border-radius: 17px; font-size: 14px; line-height: 1.95; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-message.user .chat-bubble { background: #263546; border-color: rgba(126, 174, 224, .15); }
.chat-message.assistant .chat-bubble { padding-right: 0; padding-left: 0; color: #dfdee7; }
.message-meta { display: flex; align-items: center; gap: 8px; padding: 0 4px; color: #858696; font-size: 10px; }
.chat-footer { flex: 0 0 auto; width: 100%; padding: 0 22px 18px; background: linear-gradient(0deg, var(--chat-bg) 72%, transparent); }
.composer-form { max-width: 900px; margin: 0 auto; }
.rs-input-wrapper { display: flex; align-items: flex-end; max-width: none; min-height: 58px; margin: 0; padding: 8px 10px; border: 1px solid rgba(167,139,250,.23); border-radius: 19px; background: #171923; box-shadow: 0 0 0 3px rgba(124,92,255,.02); direction: rtl; transition: border-color .2s, box-shadow .2s; }
.rs-input-wrapper { position: relative; }
.rs-input-wrapper:focus-within { border-color: rgba(167,139,250,.65); box-shadow: 0 0 0 3px rgba(124,92,255,.1); }
.rs-input-wrapper textarea { flex: 1; min-width: 0; height: 38px; max-height: 150px; min-height: 38px; padding: 7px 10px; resize: none; color: #f5f4f8; border: 0; outline: 0; background: transparent; direction: rtl; font: inherit; line-height: 1.7; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #4b4563 transparent; }
.rs-input-wrapper textarea.is-overflowing { overflow-y: auto; }
.rs-input-wrapper .composer-icon i,
.rs-input-wrapper .send-button i { position: static; top: auto; right: auto; left: auto; transform: none; }
.rs-input-wrapper textarea::placeholder { color: #7f8190; }
.composer-icon, .send-button { flex: 0 0 38px; width: 38px; height: 38px; border: 0; border-radius: 12px; color: #a6a7b5; background: transparent; cursor: pointer; }
.composer-icon:hover { color: #fff; background: #252838; }
.rs-plus { position: static; transform: none; font-size: 24px; }
.rs-plus.is-open { color: #fff; background: #252838; }
.composer-tools { position: absolute; top: calc(100% + 12px); right: 0; z-index: 20; display: grid; width: min(300px, calc(60vw - 32px)); max-height: calc(60dvh - 110px); padding: 5px; border: 1px solid rgba(167,139,250,.36); border-radius: 16px; background: #141725; box-shadow: 0 18px 42px rgba(0,0,0,.36); direction: rtl; }
.composer-tools[hidden],
.composer-more-panel[hidden] { display: none; }
.composer-tools { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #4b4563 transparent; }
.composer-tool { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 8px; color: #edeaf8; border: 0; border-radius: 11px; background: transparent; text-align: right; font: inherit; cursor: pointer; }
.composer-tool:hover { background: #202337; }
.composer-tool > span:last-child { display: grid; gap: 3px; }
.composer-tool strong { font-size: 13px; font-weight: 600; }
.composer-tool small { color: #8d8fa1; font-size: 10px; }
.composer-tool-icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; color: #a67bff; border: 1px solid rgba(167,139,250,.12); border-radius: 11px; background: #202237; font-size: 20px; }
.composer-tools i,
.composer-tool-icon i { position: static; inset: auto; transform: none; cursor: inherit; }
.composer-tool-more { margin-top: 3px; border-top: 1px solid rgba(167,139,250,.15); border-radius: 11px; }
.composer-more-panel { display: grid; gap: 10px; }
.composer-more-header { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; border-bottom: 1px solid rgba(167,139,250,.15); font-size: 14px; }
.composer-more-back { border: 0; color: #ada2d4; background: transparent; font-size: 18px; cursor: pointer; }
.composer-disabled-tool { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 8px; color: #a7a7b7; border: 0; border-radius: 10px; background: transparent; font: inherit; text-align: right; cursor: not-allowed; }
.composer-disabled-tool > span { display: inline-flex; align-items: center; gap: 10px; color: #e4e1ed; }
.composer-disabled-tool i { color: #a67bff; font-size: 18px; }
.composer-disabled-tool small { color: #a67bff; font-size: 10px; white-space: nowrap; }
@media (max-width: 576px) {
    .composer-tools { top: auto; right: 0; bottom: calc(100% + 8px); width: min(360px, calc(100vw - 20px)); max-height: calc(100dvh - 90px); }
    .composer-tool { gap: 9px; padding: 8px 6px; }
    .composer-tool-icon { flex-basis: 36px; width: 36px; height: 36px; font-size: 18px; }
    .composer-tool strong { font-size: 12px; }
    .composer-tool small { font-size: 9px; }
}
.chat-page .chat-content:not(.has-messages) .composer-tools { top: calc(100% + 12px); bottom: auto; }
.chat-page .chat-content.has-messages .composer-tools { top: auto; bottom: calc(100% + 12px); }
.rs-microphone { position: static; margin: 0; padding: 0; font-size: 18px; }
.send-button { color: #fff; background: var(--chat-purple); transition: background .2s, transform .2s; }
.chat-page .composer-icon,
.chat-page .send-button { position: static; top: auto; right: auto; left: auto; transform: none; display: grid; place-items: center; padding: 0; margin: 0; line-height: 1; }
.send-button:hover { transform: translateY(-1px); background: #9278ff; }
.send-button.is-loading { opacity: .65; pointer-events: none; }
.composer-hint { margin-top: 7px; color: #666879; font-size: 10px; text-align: center; }
.rs-extensions { display: flex; justify-content: center; gap: 12px; max-width: 900px; margin: 14px auto 0; }
.rs-extensions button { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 7px 16px 7px 18px; color: #a8a9b8; border: 1px solid rgba(167,139,250,.18); border-radius: 20px; background: #151720; box-shadow: 0 4px 14px rgba(0,0,0,.12); font: inherit; font-size: 11px; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .2s; }
.rs-extensions button:hover { color: #fff; border-color: rgba(167,139,250,.42); background: #1c1f2d; transform: translateY(-1px); }
.rs-extensions i { color: var(--chat-lavender); font-size: 15px; }
@media (max-width: 991.98px) {
    .chat-page .left-screen { position: fixed; top: 0; right: 0; left: auto; z-index: 1040; transform: translateX(100%); transition: transform .25s ease; }
    .chat-page .left-screen.open { transform: translateX(0); }
    .chat-page .right-screen { flex-basis: 100%; }
    .chat-page .mobile-sidebar-toggle { display: grid; place-items: center; right: 15px; left: auto; }
    .chat-page .chat-header { padding: 0 60px 0 16px; }
    .chat-page .extra-item { display: none !important; }
    .chat-page .model-selector-dd { right: 50%; transform: translateX(50%); }
}
@media (max-width: 576px) {
    .chat-header { flex-basis: 60px; }
    .chat-page .chat-header { padding-right: 58px; }
    .chat-footer { padding: 9px 10px 12px; }
    .rs-suggest { padding-top: 48px; padding-bottom: 8px; }
    .rs-chat-massage { padding: 12px 12px 20px; }
    .chat-message { max-width: 90%; }
    .chat-page .rs-extensions { display: none; }
    .chat-footer { padding: 0 10px 10px; }
    .chat-page .ls-recent-menu-toggle { opacity: 1; }
    .chat-page .ls-recent-menu { left: 4px; min-width: 136px; }
}