/**
 * Utility Classes for VexyWise
 * Reusable classes to replace inline styles
 */

/* ========================================
   ICON MASK UTILITIES
   ======================================== */

/* Specific icon classes */
.icon-close {
    -webkit-mask-image: url('../icons/close.svg');
    mask-image: url('../icons/close.svg');
}

.icon-new-chat {
    -webkit-mask-image: url('../icons/new_chat.svg');
    mask-image: url('../icons/new_chat.svg');
}

.icon-history {
    -webkit-mask-image: url('../icons/history.svg');
    mask-image: url('../icons/history.svg');
}

.icon-export {
    -webkit-mask-image: url('../icons/export.svg');
    mask-image: url('../icons/export.svg');
}

.icon-trash {
    -webkit-mask-image: url('../icons/delete.svg');
    mask-image: url('../icons/delete.svg');
}

.icon-theme {
    -webkit-mask-image: url('../icons/theme.svg');
    mask-image: url('../icons/theme.svg');
}

.icon-key {
    -webkit-mask-image: url('../icons/key.svg');
    mask-image: url('../icons/key.svg');
}

.icon-brain {
    -webkit-mask-image: url('../icons/brain.svg');
    mask-image: url('../icons/brain.svg');
}

.icon-user {
    -webkit-mask-image: url('../icons/user.svg');
    mask-image: url('../icons/user.svg');
}

.icon-logout {
    -webkit-mask-image: url('../icons/logout.svg');
    mask-image: url('../icons/logout.svg');
}

.icon-mic {
    -webkit-mask-image: url('../icons/mic.svg');
    mask-image: url('../icons/mic.svg');
}

.icon-attach {
    -webkit-mask-image: url('../icons/attach.svg');
    mask-image: url('../icons/attach.svg');
}

.icon-arrow-right {
    -webkit-mask-image: url('../icons/arrow_right.svg');
    mask-image: url('../icons/arrow_right.svg');
}

.icon-tts {
    -webkit-mask-image: url('../icons/tts.svg');
    mask-image: url('../icons/tts.svg');
}

.icon-conversation-state {
    -webkit-mask-image: url('../icons/conversation_state.svg');
    mask-image: url('../icons/conversation_state.svg');
}

/* Icon sizes */
.icon-sm {
    width: 20px;
    height: 20px;
}

.icon-md {
    width: 48px;
    height: 48px;
}

.icon-lg {
    width: 60px;
    height: 60px;
}

/* ========================================
   LAYOUT UTILITIES
   ======================================== */

/* Flex utilities */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.justify-center {
    justify-content: center;
}

.gap-2 {
    gap: 8px;
}

.gap-3 {
    gap: 10px;
}

.gap-4 {
    gap: 12px;
}

/* Cursor */
.cursor-pointer {
    cursor: pointer;
}

/* ========================================
   COMPONENT-SPECIFIC UTILITIES
   ======================================== */

/* Sidebar avatar container */
.sidebar-avatar-container {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Account item */
.account-item-layout {
    height: auto;
    padding: 12px;
    align-items: center;
    gap: 12px;
}

/* Header title */
.header-title {
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

/* ========================================
   TEXT UTILITIES
   ======================================== */

/* Text dim small */
.text-dim-sm {
    font-size: 0.75rem;
    color: var(--text-dim);
}

/* Hidden */
.hidden {
    display: none !important;
}

/* Token counter */
.token-counter {
    text-align: center;
    font-size: 11px;
    color: #666;
    padding: 4px 0;
    display: none;
}

/* Modal text styles */
.modal-danger-text {
    color: #ff8888;
    margin-bottom: 10px;
    font-weight: 700;
}

.modal-muted-text {
    color: #888;
    margin-bottom: 30px;
    font-size: 0.9rem;
}

/* Color utilities */
.text-gold {
    color: #FFD700;
}
.icon-add {
    -webkit-mask-image: url('../icons/add.svg');
    mask-image: url('../icons/add.svg');
}