/* Native V2 More features (js/more-features.js). Prefix mf-. Grid markup/classes (.ct-*, .wg) come from contacts.css, controls (.wk-*) from kit.css. */
.mf { position: absolute; inset: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); background: #f1f1f1; font-size: 14px; color: var(--ink); overflow: hidden; }
.mf.off { visibility: hidden; pointer-events: none; }
.mf .ct-loading { grid-column: 1 / -1; }
.mf-tabs { background: #fff; padding: 8px; display: flex; flex-direction: column; gap: 16px; align-content: start; min-height: 0; overflow-y: auto; }
.mf-tab { display: flex; align-items: center; gap: 14px; padding: 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-weight: 600; font-size: 13.5px; text-align: start; cursor: pointer; }
.mf-tab .wk-i { color: gray; }
.mf-tab:hover { background: #f5f5f5; } .mf-tab.on { background: #f1f1f1; color: var(--deep); } .mf-tab.on .wk-i { color: var(--deep); }
.mf[data-layout="narrow"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.mf[data-layout="narrow"] .mf-tabs { flex-direction: row; background: none; padding: 12px 16px 0; gap: 12px; overflow-x: auto; overflow-y: hidden; }
.mf[data-layout="narrow"] .mf-tab { border: 1px solid #cfcfcf; border-radius: 16px; padding: 4px 14px; gap: 8px; background: #fff; white-space: nowrap; }
.mf[data-layout="narrow"] .mf-tab.on { background: #dfe9e2; }
.mf-main { min-width: 0; min-height: 0; overflow: auto; padding: 16px; }
.mf-pane { display: flex; flex-direction: column; gap: 16px; min-height: 100%; }
.mf-pane[hidden] { display: none; }
.mf[data-layout="narrow"] .mf-main { padding: 12px 8px 8px; }
.mf-headwrap { display: grid; gap: 16px; }
.mf-head { display: flex; gap: 32px; align-items: center; background: #fff; border-radius: 8px; padding: 16px; }
.mf-art { width: 200px; height: auto; flex: none; display: block; }
.mf-headtext { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.mf-title { margin: 0; font-size: 28px; font-weight: 400; }
.mf-des { margin: 0; color: gray; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.mf[data-layout="narrow"] .mf-head { gap: 16px; } .mf[data-layout="narrow"] .mf-art { width: 150px; } .mf[data-layout="narrow"] .mf-title { font-size: 22px; }
.mf-card { background: #fff; border-radius: 8px; padding: 16px; }
.mf-stack { display: grid; gap: 14px; align-content: start; }
.mf-narrow { max-width: 1200px; margin: 0 auto; width: 100%; }
.mf-hr { border: 0; border-top: 1px solid #e3e3e3; width: 100%; margin: 0; }
.mf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mf[data-layout="narrow"] .mf-two { grid-template-columns: 1fr; }
.mf-f small { color: var(--muted); font-size: 11.5px; }
.mf-add, .mf-submit, .mf-update { justify-self: start; }
.mf-widgethead { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.mf .wg { flex: 1; min-height: 240px; background: #fff; border-radius: 16px; }
.mf .wg .ct-table th { min-width: 0; } .mf .wg .ct-table td { max-width: 320px; }
.mf .wg .ct-table th, .mf .wg .ct-table td { padding: 0 8px; }
.mf-del { color: #d32f2f; } .mf-auto, .mf-chats, .mf-view, .mf-test { color: #555; } .mf-copy { color: #0288d1; }
.mf-status.pending { color: orange; } .mf-status.done { color: green; } .mf-status { display: inline-grid; place-items: center; }
.mf-logo-img { width: 30px; height: 30px; border-radius: 4px; object-fit: contain; display: block; }
/* switch */
.mf-switchlbl { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; vertical-align: middle; }
.mf-switchlbl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.mf-switchlbl i { position: absolute; inset: 0; border-radius: 11px; background: #b9b9b9; transition: background .15s; }
.mf-switchlbl i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.mf-switchlbl input:checked + i { background: var(--green); } .mf-switchlbl input:checked + i::after { transform: translateX(18px); }
.mf-switchlbl input:disabled { cursor: progress; } .mf-switchlbl input:focus-visible + i { outline: 2px solid var(--green); outline-offset: 2px; }
[dir="rtl"] .mf-switchlbl i::after { left: auto; right: 2px; } [dir="rtl"] .mf-switchlbl input:checked + i::after { transform: translateX(-18px); }
/* chat widget form */
.mf-logo { background: #f3f3f3; border-radius: 8px; padding: 16px; }
.mf-logobox { display: grid; gap: 14px; }
.mf-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mf-chip { border: 1px solid #cfcfcf; border-radius: 16px; background: #fff; padding: 4px 14px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); }
.mf-chip.on { background: #dfe9e2; border-color: var(--green); font-weight: 600; }
.mf-icons { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.mf-icon { flex: none; border: 1px solid transparent; border-radius: 8px; background: none; padding: 12px; cursor: pointer; } .mf-icon.on { background: #e0e0e0; }
.mf-icon img { width: 40px; height: 40px; display: block; }
.mf-filerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mf-ok { color: green; display: inline-grid; }
.mf-sub { font-size: 13px; } .mf-size { width: 100%; accent-color: var(--green); }
/* full-screen dialogs (agent profile and chats, task comments) */
.mf-full { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: #fff; color: var(--ink); overflow: auto; position: fixed; inset: 0; }
.mf-full[open] { display: block; }
.mf-fullbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #f1f1f1; }
.mf-fullbody { padding: 24px 16px; max-width: 1232px; margin: 0 auto; }
.mf-chatlist { display: grid; gap: 12px; }
.mf-chat { display: flex; align-items: center; gap: 12px; background: #f1f1f1; border-radius: 8px; padding: 14px; }
.mf-chatinfo { flex: 1; display: grid; min-width: 0; overflow-wrap: anywhere; } .mf-chatinfo small { color: gray; }
.mf-bubble { background: #f1f1f1; border-radius: 0 10px 10px 10px; padding: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
[dir="rtl"] .mf-bubble { border-radius: 10px 0 10px 10px; }
.mf .ct-pop, .mf-full .ct-pop { position: fixed; }
.mf .wk-toast, .mf-full .wk-toast { z-index: 2000; }
@media (max-width: 520px) { .mf-head { flex-direction: column; align-items: flex-start; } }