/* ============================================================
 * 07-theme-vars-extra-controls.css
 * Biến theme mở rộng (away/dnd/bubble-sent-text dùng ở trang Profile/Settings), segmented control, theme switch, custom select.
 * ============================================================ */

/*profile.html / shared theme extras */
:root, [data-theme="dark"] {
    --away: #F5A623;
    --dnd: #EF4444;
    --bubble-sent-text: #0A0A0A;
}
[data-theme="light"] {
    --away: #B5750F;
    --dnd: #D8352C;
    --bubble-sent-text: #FFFFFF;
}

/* Segmented control */
.seg-btn[aria-pressed="true"] { background-color: var(--ink); color: var(--bubble-sent-text); }
.seg-btn[aria-pressed="false"] { background-color: transparent; color: var(--muted); }

/* Theme switch */
.switch-track { background-color: var(--elevated2); }
.switch-track[data-on="true"] { background-color: var(--ink); }
.switch-thumb { background-color: var(--ink); transition: transform .18s ease; }
.switch-track[data-on="true"] .switch-thumb { background-color: var(--bubble-sent-text); }

/* Settings select */
select.custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A3A3A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px !important;
}