/* ============================
   BASE ICON SYSTEM
   ============================ */

.icon {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

.icon-sm { width: 18px; height: 18px; }
.icon-md { width: 24px; height: 24px; }
.icon-lg { width: 32px; height: 32px; }
.icon-xl { width: 40px; height: 40px; }

.icon-btn {
    background-color: #1A1145;
    padding: 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================
   TASK PAGE ICONS
   ============================ */

.icon-mic        { background-image: url('/assets/icons/mic.svg'); }
.icon-mic-stop   { background-image: url('/assets/icons/mic-stop.svg'); }
.icon-play       { background-image: url('/assets/icons/play.svg'); }
.icon-pause      { background-image: url('/assets/icons/pause.svg'); }
.icon-upload     { background-image: url('/assets/icons/upload.svg'); }


/* ============================
   CHAT PAGE ICONS
   ============================ */

.icon-chat-send  { background-image: url('/assets/icons/chat-send.svg'); }
.icon-chat-mic   { background-image: url('/assets/icons/chat-mic.svg'); }
.icon-chat-back  { background-image: url('/assets/icons/chat-back.svg'); }
.icon-chat-more  { background-image: url('/assets/icons/chat-more.svg'); }


/* ============================
   BUBBLE ICONS
   ============================ */

.icon-bubble            { background-image: url('/assets/icons/bubble.svg'); }
.icon-bubble-outline    { background-image: url('/assets/icons/bubble-outline.svg'); }
.icon-bubble-gradient   { background-image: url('/assets/icons/bubble-gradient.svg'); }
.icon-bubble-check      { background-image: url('/assets/icons/bubble-check.svg'); }
.icon-bubble-lock       { background-image: url('/assets/icons/bubble-lock.svg'); }


/* ============================
   PROGRESS ICONS
   ============================ */

.icon-progress-ring        { background-image: url('/assets/icons/progress-ring.svg'); }
.icon-progress-complete    { background-image: url('/assets/icons/progress-complete.svg'); }
.icon-progress-incomplete  { background-image: url('/assets/icons/progress-incomplete.svg'); }


/* ============================
   NAVIGATION ICONS
   ============================ */

.icon-nav-home      { background-image: url('/assets/icons/nav-home.svg'); }
.icon-nav-learn     { background-image: url('/assets/icons/nav-learn.svg'); }
.icon-nav-profile   { background-image: url('/assets/icons/nav-profile.svg'); }
.icon-nav-settings  { background-image: url('/assets/icons/nav-settings.svg'); }


/* ============================
   UTILITY ICONS
   ============================ */

.icon-arrow-left   { background-image: url('/assets/icons/arrow-left.svg'); }
.icon-arrow-right  { background-image: url('/assets/icons/arrow-right.svg'); }
.icon-refresh      { background-image: url('/assets/icons/refresh.svg'); }
.icon-close        { background-image: url('/assets/icons/close.svg'); }
.icon-info         { background-image: url('/assets/icons/info.svg'); }


/* ============================
   OPTIONAL DARK MODE
   ============================ */

@media (prefers-color-scheme: dark) {
    .icon-btn {
        background-color: #0D0828;
    }
}