.SETTINGS-btn-blue {
    padding: 0.5rem 1rem; /* px-4 py-2 */
    background-color: #2563eb; /* bg-blue-600 */
    color: white; /* text-white */
    border-radius: 0.25rem; /* rounded */
    transition: background-color 0.15s ease-in-out;
}
.SETTINGS-btn-blue:hover {
    background-color: #1d4ed8; /* hover:bg-blue-700 */
}

/* Settings Popup Modal IDs */
#settings-popup {
    position: fixed; /* fixed */
    inset: 0; /* inset-0 */
    background-color: rgba(0, 0, 0, 0.5); /* bg-black bg-opacity-50 */
    display: flex; /* flex */
    align-items: center; /* items-center */
    justify-content: center; /* justify-center */
    z-index: 100; /* Set main popup Z-index lower than secondary */
}

.SETTINGS-popup-content-wrapper {
    background-color: var(--chat-bg-shade-1); /* bg-white */
    width: 100%; /* w-full */
    max-width: 800px; /* max-w-[800px] */
    height: -webkit-fill-available; /* h-full */
    max-height: 680px; /* max-h-[680px] */
    border-radius: 26px; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    overflow: hidden; /* overflow-hidden */
    position: relative; /* relative */
    margin: 40px 0px;
}

.SETTINGS-popup-flex-container {
    display: flex; /* flex */
    height: 100%; /* h-full */
}

/* Sidebar Navigation */
.SETTINGS-sidebar {
    width: 14rem; /* w-56 (224px) */
    background-color: var(--chat-bg-shade-2); /* bg-gray-100 */
    border-right: 1px solid var(--border-color); /* border-r border-gray-200 */
    position: relative; /* relative */
}

#close-settings {
    /* position: absolute; */ /* absolute */
    top: 0.5rem; /* top-2 */
    left: 0.5rem; /* left-2 */
    color: #4b5563; /* text-gray-600 */
    font-size: 1.25rem; /* text-xl */
    padding: 5px; /* p-1 */
    border-radius: 3.25rem; /* rounded */
    background: none;
    border: none;
    cursor: pointer;
    margin: 14px;
    display: flex;
}
#close-settings:hover {
    background-color: var(--shade-3); /* hover:bg-gray-200 */
}

.SETTINGS-sidebar-list {
    list-style: none; /* list-none */
    /* margin-top: 2.5rem; */ /* mt-10 */
    padding: 0;
    gap: 5px;
    display: flex;
    flex-direction: column;
}
.SETTINGS-sidebar-item {
    width: -webkit-fill-available; /* w-full */
    display: flex; /* flex */
    align-items: center; /* items-center */
    padding: 10px 12px; /* p-3 */
    font-size: 0.875rem; /* text-sm */
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    margin: 0px 8px;
    border-radius: 35px;
}
.SETTINGS-sidebar-item span {
    margin-right: 0.75rem; /* mr-3 */
    align-items: center;
    display: flex;
}
.SETTINGS-sidebar-item:not(.active) {
    color: var(--text-color); /* text-gray-700 */
    opacity: 0.6;
}
.SETTINGS-sidebar-item:not(.active):hover {
    /* background-color: var(--chat-bg-shade-4); */ /* hover:bg-blue-50 */
    color: var(--text-color); /* hover:text-blue-700 */
}
.SETTINGS-sidebar-item.active {
    background-color: var(--shade-3); /* bg-blue-100 */
     /* text-blue-700 */
    color: var(--text-color);
}

/* Content Area */
.SETTINGS-content-area {
    flex: 1; /* flex-1 */
    padding: 0px 1.5rem; /* p-8 */
    overflow-y: auto; /* overflow-y-auto */
    /* height: max-content; */
    /* width: 100%; */
    height: -webkit-fill-available;
    max-height: 680px;
    display: flex;
    flex-direction: column;
    color: var(--text-color);
}

.SETTINGS-content-title {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 600; /* font-semibold */
    margin: 10px 0px; /* mb-8 */
    color: var(--text-color);
}

.SETTINGS-tab-content {
     /* h-full */
     flex: 1;
     /* height: 100px; */
     overflow: hidden;
     display: flex;
     flex-direction: column;
}

.SETTINGS-tab-panel.SETTINGS-space-y-4 > * + * {
    margin-top: 1rem; /* space-y-4 */
}

.SETTINGS-setting-row {
    display: flex; /* flex */
    justify-content: space-between; /* justify-between */
    align-items: center; /* items-center */
    border-bottom: 1px solid  var(--bg-hover); /* border-b border-gray-200 */
    padding-top: 1rem; /* py-4 */
    padding-bottom: 1rem; /* py-4 */
}

.SETTINGS-setting-label {
    color: var(--text-color); /* text-gray-700 */
    font-size: 0.875rem; /* text-sm */
}

/* Dropdown Styles (Theme) */
.SETTINGS-dropdown-wrapper {
    position: relative; /* relative */
    display: flex; /* flex */
    align-items: center; /* items-center */
}
.SETTINGS-dropdown-btn {
    display: flex; /* flex */
    justify-content: space-between; /* justify-between */
    align-items: center; /* items-center */
    padding: 0.5rem 0.75rem; /* px-3 py-2 */
    border: 1px solid var(--bg-hover); /* border border-gray-300 */
    border-radius: 31px; /* rounded */
    color: var(--text-color); /* text-gray-700 */
    font-size: 0.875rem; /* text-sm */
    min-width: 120px; /* min-w-[120px] */
    background-color: var(--chat-bg-shade-4);
    cursor: pointer;
}
.SETTINGS-dropdown-arrow {
    margin-left: 0.5rem; /* ml-2 */
    color: #6b7280; /* text-gray-500 */
    font-size: 0.75rem; /* text-xs */
    display: flex;
}
.SETTINGS-dropdown-menu {
    position: absolute; /* absolute */
    top: 100%; /* top-full */
    left: 0; /* left-0 */
    right: 0; /* right-0 */
    background-color: var(--chat-bg-shade-3); /* bg-white */
    border: 1px solid var(--bg-hover); /* border border-gray-300 */
    border-radius: 17px; /* rounded */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow */
    max-height: 13rem; /* max-h-52 (208px) */
    overflow-y: auto; /* overflow-y-auto */
    z-index: 110; /* Higher than sidebar, lower than secondary popup */
    margin-top: 5px;
}
.SETTINGS-dropdown-item {
    padding: 0.5rem 0.75rem; /* px-3 py-2 */
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.SETTINGS-dropdown-item:not(.selected):hover {
    background-color: var(--chat-bg-shade-4); /* hover:bg-gray-100 */
}
.SETTINGS-dropdown-item.selected {
    background-color: var(--chat-bg-shade-4); /* bg-blue-600 */
    color: var(--text-color); /* text-white */
}

/* Toggle Switch Styles (Emojis) */
.SETTINGS-toggle-switch-wrapper {
    display: flex; /* flex */
    align-items: center; /* items-center */
}
.SETTINGS-toggle-label {
    position: relative; /* relative */
    display: inline-flex; /* inline-flex */
    align-items: center; /* items-center */
    cursor: pointer; /* cursor-pointer */
}
.SETTINGS-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.SETTINGS-animate-spin .icon-svg {
    display: flex;
    /* margin: 3px; */
}
.SETTINGS-toggle-bg {
    width: 2.75rem; /* w-11 (44px) */
    height: 1.5rem; /* h-6 (24px) */
    background-color: var(--shade-4); /* bg-gray-200 */
    border-radius: 9999px; /* rounded-full */
    position: relative;
    transition: background-color 0.15s ease-in-out; /* transition-all */
}
.SETTINGS-toggle-bg::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.25rem; /* 1.25rem = 20px */
    height: 1.25rem; /* 1.25rem = 20px */
    background-color: white;
    border-radius: 9999px;
    transition: transform 0.15s ease-in-out; /* transition-all */
}
#emoji-toggle:checked + .SETTINGS-toggle-bg {
    background-color: var(--etex-orange-primary); /* peer-checked:bg-blue-600 */
}
#emoji-toggle:checked + .SETTINGS-toggle-bg::before {
    transform: translateX(1.25rem); /* Move 20px (1.25rem) to the right */
}
.SETTINGS-toggle-status {
    margin-left: 0.75rem; /* ml-3 */
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-700 */
}

/* Memory List in Personalization Tab */
.SETTINGS-memory-list {
    list-style: none; /* list-none */
    padding: 0;
    margin: 1rem 0px; /* mb-4 */
    /* height: 300px; */
}
.SETTINGS-memory-item { /* Added a class for new items in JS */
    padding: 0.75rem; /* p-3 */
    margin-bottom: 0.5rem; /* mb-2 */
    /* background-color: #e5e7eb; */ /* bg-gray-200 */
    /* border-radius: 10px; */ /* rounded */
    border-bottom: 1px solid var(--border-color); /* border-l-4 border-blue-600 */
}
.SETTINGS-memory-section {
    padding: 0px 10px; /* py-4 */
    /* gap: 20px; */ /* h-full */
    display: flex; /* flex */
    flex-direction: column; /* flex-col */
    overflow-y: scroll;
    scrollbar-width: none;
    /* flex: 1; */
    height: 100%;
    justify-content: flex-start;
}
.SETTINGS-memory-header {
    color: var(--text-color); /* text-gray-700 */
    margin-bottom: 1rem; /* mb-4 */
}
.SETTINGS-memory-list-scroll {
    /* flex: 1; */ /* flex-1 */
    overflow-y: auto; /* overflow-y-auto */
    /* height: 200px; */
    /* margin-top: 50px; */
    scrollbar-width: thin;
    scrollbar-color: var(--bg-hover) transparent;
}
#add-memory {
    display: flex; /* flex */
    align-items: center; /* items-center */
    justify-content: center; /* justify-center */
    /* width: 2rem; */ /* w-8 */
    /* height: 2rem; */ /* h-8 */
    background: none; /* border-2 border-dashed border-blue-600 */
    /* color: #2563eb; */ /* text-blue-600 */
    /* border-radius: 9999px; */ /* rounded-full */
    /* margin-top: 0.5rem; */ /* mt-2 */
    /* background: none; */
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    border: none;
    padding: 12px;
    filter: invert(1);
}
.SETTINGS-memory-container:hover {
    /* background-color: var(--etex-orange-primary); */ /* hover:bg-blue-600 */
    color: white; /* hover:text-white */
    /* box-shadow: var(--glossy-orange-button-box-shadow); */
}

/* Data Controls Tab */
.SETTINGS-delete-btn {
    background-color: #dc2626; /* bg-red-600 */
    color: white; /* text-white */
    padding: 0.5rem 1rem; /* px-4 py-2 */
    border-radius: 1.25rem; /* rounded */
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}
.SETTINGS-delete-btn:hover {
    background-color: #b91c1c; /* hover:bg-red-700 */
}
.SETTINGS-delete-text {
    /* color: #4b5563; */ /* text-gray-700 */
    font-size: 0.875rem; /* text-sm */
}
.SETTINGS-delete-description {
    /* color: #6b7280; */ /* text-gray-500 */
    font-size: 0.75rem; /* text-xs */
    margin-top: 0.25rem; /* mt-1 */
    max-width: 20rem; /* max-w-xs (320px) */
}
.SETTINGS-dropdown-text {
    color: var(--text-color);
}
/* Add Memory Popup */
#add-memory-popup {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex; /* Should be flex when visible */
    align-items: center;
    justify-content: center;
    z-index: 200; /* CRITICAL FIX: Higher Z-index than #settings-popup */
}
#add-memory-popup .SETTINGS-popup-box {
    background-color: var(--chat-bg-shade-3); /* bg-white */
    width: 100%; /* w-full */
    max-width: 28rem; /* max-w-md (448px) */
    padding: 12px; /* p-6 */
    border-radius: 22px; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    position: relative; /* relative */
    color: var(--text-color);
}
.SETTINGS-popup-box h2 {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    margin-bottom: 1rem; /* mb-4 */
}
.SETTINGS-popup-box textarea {
    width: 100%; /* w-full */
    border: 1px solid var(--border-color); /* border border-gray-300 */
    border-radius: 19px; /* rounded */
    padding: 13px; /* p-2 */
    margin-bottom: 1rem; /* mb-4 */
    resize: none;
    background: var(--chat-bg-shade-1);
    color: var(--text-color);
    height: 200px;
    scrollbar-width: thin;
    scrollbar-color: var(--bg-hover) transparent;
}
.SETTINGS-popup-box textarea:focus-visible {border: 1px solid var(--border-color);outline: none;}
.SETTINGS-popup-actions {
    display: flex; /* flex */
    justify-content: flex-end; /* justify-end */
    align-items: center; /* items-center */
}
#cancel-memory {
    padding: 0.5rem 1rem; /* px-4 py-2 */
    margin-right: 0.5rem; /* mr-2 */
    background-color: var(--shade-2); /* bg-gray-200 */
    border-radius: 28px; /* rounded */
    border: none;
    cursor: pointer;
    color: var(--text-color);
    transition: background-color 0.15s ease-in-out;
    /* border: 1x solid var(--bg-hover); */
}
#cancel-memory:hover {
    background: var(--chat-bg-shade-4); /* hover:bg-gray-300 */
}
#confirm-memory {
    display: flex; /* flex */
    align-items: center; /* items-center */
    padding: 0.5rem 1rem; /* px-4 py-2 */
    background-color: var(--etex-orange-primary); /* bg-blue-600 */
    color: white; /* text-white */
    border-radius: 28px; /* rounded */
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}
#confirm-memory:hover {
    /* background-color: #1d4ed8; */ /* hover:bg-blue-700 */
}

/* Utility Classes (Spinners and Hidden) */
.hidden {
    display: none !important;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.SETTINGS-animate-spin {
    display: none;
    /* margin-left: 0.5rem;  */
    width: 20px;
    height: 20px;
    /* border: 2px solid var(--shade-10); */
    /* border-top-color: transparent;  */
    /* border-radius: 50%; */
    animation: spin 1s linear infinite;
}
.SETTINGS-tab-panel {
    display: flex;
    flex-direction: column;
    height: -webkit-fill-available;
    margin: 10px 0px;
}
/* Scrollbar Hide (as in original Tailwind example) */
.SETTINGS-scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.SETTINGS-scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: thin;
}
.SETTINGS-memory-container{
    background: var(--shade-3);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min-content;
    height: min-content;
    align-self: end;
    background-color: var(--etex-orange-primary);
    /* box-shadow: var(--glossy-orange-button-box-shadow); */
    margin-top: 20px;
}
#add-memory .memory-icon{
    filter: invert(1);
}.memory-warning {
      background-color: #ffe6e6;
      border: 1px solid #ff0707;
      padding: 12px 16px;
      border-radius: 8px;
      margin-bottom: 16px;
      display: none;
      flex-direction: column;
      color: black;
}
.memory-item {
      display: flex;
      justify-content: space-between;
      padding: 12px;
      border: none;
      /* border-radius: 20px; */
      margin-bottom: 10px;
      /* background-color: var(--chat-bg-shade-2); */
      border-bottom: 1px solid var(--border-color);
}

.memory-value {
      flex: 1;
      margin-right: 16px;
      word-break: break-word;
}

.memory-actions {
      display: flex;
      align-items: flex-start;
}

.memory-action-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      margin-left: 8px;
      color: #666;
}

.memory-action-btn:hover {
      color: var(--text-color);
}

.memory-action-delete:hover {
      color: var(--danger-color);
}

.memory-edit-form {
      display: none;
      width: 100%;
      min-height: 176px;
}

.memory-edit-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
}
.memory-action-btn img {
    height: 18px;
}.add-memory-input {
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 10px;
      margin-bottom: 10px;
      font-family: inherit;
      resize: vertical;
      background: none;
      resize: none;
      color: var(--text-color);
      min-height: 128px;
      background: var(--chat-bg-shade-4);
}
.add-memory-input:focus-visible {
    border: none;
    outline: none;
}
.memory-edit-form .button {
      padding: 8px 16px;
      border-radius: 24px;
      border: none;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s;
}

.memory-edit-form .primary-button {
      background-color: var(--etex-orange-primary);
      color: white;
}

.memory-edit-form .primary-button:disabled {
      background-color: #ccc;
      cursor: not-allowed;
}

.memory-edit-form .secondary-button {
      background-color: var(--chat-bg-shade-4);
      color: var(--text-color);
}
.SETTINGS-setting-row .flex.items-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.SETTINGS-animate-spin .icon-svg {
    /* height: 12px; */
}#confirm-memory .icon-svg {
    filter: invert(1);
}