.menu {
    position: absolute;
    top: 0;
    left: -500px;
    width: 100%;
    max-width: 500px;
    height: 100vh;
    background-color: #1d2227;
    color: white;
    padding: 0.5rem;
    transition: left 0.3s ease;
    overflow-y: auto;
    z-index: 10;
}

.menu_mobile {
    background-color: #1d2227;
}

.menu_desktop {
    background-color: #1d222780;
}

.menu_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu_title {
    font-size: 1rem;
    user-select: none;
}

.menu_icon {
    background-image: url('data:image/svg+xml;utf8,<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="%23a8a8a8"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-menu-2"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6l16 0" /><path d="M4 12l16 0" /><path d="M4 18l16 0" /></svg>');
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.close_icon {
    background-image: url('data:image/svg+xml;utf8,<svg  xmlns="http://www.w3.org/2000/svg"  width="18"  height="18"  viewBox="0 0 24 24"  fill="none"  stroke="%23a8a8a8"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>');
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.open {
    left: 0;
}

.history {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.history_item {
    font-size: 0.9rem;
    cursor: pointer;
}

.history_timestamp {
    color: #b7b7b7;
}

.load_more_btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: white;
    opacity: 0.7;
}

.load_more_btn:hover {
    opacity: 1;
}
