/* Native V2 Chatbots. Grid and popovers reuse the .ct-* classes of css/contacts.css; layout follows the width of the area. */
.cb { position: absolute; inset: 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); background: #f1f1f1; font-size: 14px; color: var(--ink); overflow: hidden; }
.cb.off { visibility: hidden; pointer-events: none; }
.cb .ct-loading { grid-column: 1 / -1; }
.cb-tabs { background: #fff; padding: 8px; display: flex; flex-direction: column; gap: 16px; align-content: start; min-height: 0; overflow-y: auto; }
.cb-tab { display: flex; align-items: center; gap: 14px; padding: 10px; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; border-radius: 8px; color: var(--ink); font-weight: 600; font-size: 13.5px; }
.cb-tab .wk-i { color: gray; } .cb-tab:hover { background: #f5f5f5; } .cb-tab.on { background: #f1f1f1; color: var(--deep); }
.cb[data-layout="narrow"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.cb[data-layout="narrow"] .cb-tabs { flex-direction: row; background: none; padding: 12px 16px 0; gap: 12px; }
.cb[data-layout="narrow"] .cb-tab { border: 1px solid #cfcfcf; border-radius: 16px; padding: 4px 14px; gap: 8px; background: #fff; }
.cb[data-layout="narrow"] .cb-tab.on { background: #dfe9e2; }
.cb-main { display: flex; flex-direction: column; gap: 16px; padding: 16px; min-width: 0; min-height: 0; overflow-y: auto; }
.cb[data-layout="narrow"] .cb-main { padding: 12px 8px 8px; }
.cb-top { flex: none; }

/* header card */
.cb-head { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; background: #fff; border-radius: 8px; padding: 16px; }
.cb-headtext { display: grid; gap: 14px; justify-items: start; }
.cb-art { width: 200px; height: auto; display: block; }
.cb-des { margin: 0; color: gray; font-size: 12.5px; line-height: 1.45; max-width: 480px; }
.cb-add { width: 100%; max-width: 300px; }
.cb-play { justify-self: center; display: grid; place-items: center; width: 112px; height: 112px; border: 0; border-radius: 50%; background: #f3f3f3; color: gray; cursor: pointer; }
.cb[data-layout="narrow"] .cb-head { grid-template-columns: 1fr; } .cb[data-layout="narrow"] .cb-play { display: none; } .cb[data-layout="narrow"] .cb-add { max-width: none; }

/* add / edit form */
.cb-form { background: #fff; border-radius: 8px; padding: 16px; display: grid; gap: 20px; }
.cb-formtop { display: flex; gap: 12px; align-items: center; }
.cb-back { color: var(--green); }
.cb-fields { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: #f1f1f1; border-radius: 12px; padding: 12px; }
.cb-fields:not(:has(.cb-origin)) { grid-template-columns: 1fr; }
.cb-origin { display: grid; gap: 2px; min-width: 0; }
.cb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cb-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
.cb-allrow { display: flex; align-items: center; gap: 12px; }
.cb-allrow input[type=checkbox]:not([role=switch]), .cb-chat input, .cb-flow input { width: 18px; height: 18px; flex: none; accent-color: var(--green); }
.cb-vr { align-self: stretch; width: 1px; min-height: 28px; background: #ddd; }
.cb-forall { color: gray; font-size: 13px; font-weight: 500; }
.cb-scroll { height: 350px; overflow: auto; display: grid; gap: 16px; align-content: start; }
.cb-chat, .cb-flow { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.cb-chatinfo { display: grid; min-width: 0; overflow-wrap: anywhere; } .cb-chatinfo small, .cb-none { color: gray; font-size: 12px; }
.cb-chatname { display: inline-flex; align-items: center; gap: 6px; } .cb-chatname .wk-i { color: gray; width: 16px; height: 16px; }
.cb-h { font-weight: 600; }
.cb-formfoot { display: flex; justify-content: flex-end; }
.cb-submit { width: 48px; height: 48px; color: var(--green); } .cb-submit .wk-i { width: 36px; height: 36px; } .cb-submit:disabled { color: #bdbdbd; cursor: not-allowed; }
.cb[data-layout="narrow"] .cb-two { grid-template-columns: 1fr; } .cb[data-layout="narrow"] .cb-fields { grid-template-columns: 1fr; }

/* list */
.cb-listcard { background: #fff; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: none; min-height: 340px; }
.cb-listhead { display: flex; align-items: center; gap: 12px; color: #7c7c7c; } .cb-listhead h2 { margin: 0; font-size: 18px; font-weight: 600; }
.cb .wg { flex: 1; min-height: 240px; box-shadow: none; }
.cb .wg .ct-table th, .cb .wg .ct-table td { padding: 0 8px; } .cb .wg .ct-table td { max-width: 320px; }
.cb-edit { color: #0288d1; } .cb-del { color: #d32f2f; }
.cb-switchlbl { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; vertical-align: middle; }
.cb-switchlbl input, input.cb-switch { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.cb-switchlbl i { position: absolute; inset: 0; border-radius: 11px; background: #b9b9b9; transition: background .15s; }
.cb-switchlbl i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.cb-switchlbl input:checked + i { background: var(--green); } .cb-switchlbl input:checked + i::after { transform: translateX(18px); }
.cb-switchlbl input:focus-visible + i { outline: 2px solid var(--green); outline-offset: 2px; } .cb-switchlbl input:disabled + i { opacity: .5; }
.cb-allrow .cb-switch { position: relative; width: 40px; height: 22px; appearance: none; -webkit-appearance: none; border-radius: 11px; background: #b9b9b9; opacity: 1; cursor: pointer; transition: background .15s; flex: none; }
.cb-allrow .cb-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.cb-allrow .cb-switch:checked { background: var(--green); } .cb-allrow .cb-switch:checked::after { transform: translateX(18px); }

/* saved templets */
.cb-tpane { display: grid; gap: 16px; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.cb-thead { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cb-thead h2 { margin: 0; font-size: 18px; font-weight: 600; }
.cb-tadd { text-decoration: none; }
.cb-tpane .wg { min-height: 320px; }
.cb-tpane .wg-toolbar h2 { font-size: 20px; font-weight: 600; margin: 0 8px 0 0; }
.cb .wk-toast { z-index: 2000; }
.cb[dir="rtl"] .cb-back svg { transform: scaleX(-1); }