/* ===== ذكاء الوجهات (2026-10-10) — list, 3-pane workspace, recommendation cards, plan, wizard ===== */
.di { --di-ink: #172033; --di-ink2: #24304a; --di-hot: #ef5b35; --di-hot-l: #fff0ea; --di-sand: #faf7f2; --di-r: 14px; --di-line: #e6e3dc;
  display: flex; flex-direction: column; gap: 12px; }
.di-i { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.di-sp { flex: 1; }
.di-btn { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid transparent; border-radius: 10px; padding: .5rem .95rem; font: inherit; font-weight: 800; font-size: .86rem; cursor: pointer; transition: background .18s, border-color .18s, color .18s, transform .18s; }
.di-btn:disabled { opacity: .45; cursor: not-allowed; }
.di-btn--hot { background: var(--di-hot, #ef5b35); color: #fff; }
.di-btn--hot:not(:disabled):hover { background: #d94a26; transform: translateY(-1px); }
.di-btn--ok { background: #15803d; color: #fff; }
.di-btn--ok:not(:disabled):hover { background: #116a32; }
.di-btn--ghost { background: #fff; border-color: var(--di-line, #e6e3dc); color: var(--di-ink, #172033); }
.di-btn--ghost:not(:disabled):hover { border-color: var(--di-ink, #172033); }
.di-btn--danger { background: #fff; border-color: #fecaca; color: #b91c1c; }
.di-btn--sm { padding: .32rem .7rem; font-size: .78rem; }
.di-link { border: 0; background: none; color: var(--di-hot, #ef5b35); font: inherit; font-weight: 800; font-size: .8rem; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 0; }
.di-link:hover { text-decoration: underline; }
.di button:focus-visible, #modal .di-wiz button:focus-visible { outline: 3px solid #fbc4b2; outline-offset: 2px; }
.di-hint { color: var(--muted); font-size: .76rem; font-weight: 600; line-height: 1.6; display: flex; gap: 6px; align-items: flex-start; }
.di-empty, .di-welcome, .di-pempty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 36px 12px; color: var(--muted); }
.di-empty .di-i, .di-welcome .di-i, .di-pempty .di-i { width: 30px; height: 30px; color: var(--di-hot); }
.di-empty b, .di-welcome b, .di-pempty b { color: var(--di-ink); font-size: 1rem; }

/* pills + source labels */
.di-pill { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; border-radius: 999px; padding: .12rem .55rem; font-size: .72rem; font-weight: 800; background: #f1f5f9; color: #475569; }
.di-pill--ok { background: #dcfce7; color: #166534; } .di-pill--ok2 { background: #e0f2fe; color: #075985; } .di-pill--warn { background: #fef3c7; color: #92400e; }
.di-pill--bad { background: #fee2e2; color: #991b1b; } .di-pill--info { background: #ede9fe; color: #5b21b6; } .di-pill--done { background: var(--di-ink); color: #fff; }
.di-src { display: inline-flex; align-items: center; border-radius: 6px; padding: 0 .4rem; font-size: .66rem; font-weight: 800; line-height: 1.6; border: 1px solid; white-space: nowrap; }
.di-src--known { color: #166534; border-color: #bbf7d0; background: #f0fdf4; } .di-src--live { color: #075985; border-color: #bae6fd; background: #f0f9ff; }
.di-src--est { color: #92400e; border-color: #fde68a; background: #fffbeb; } .di-src--ai { color: #6d28d9; border-color: #ddd6fe; background: #f5f3ff; } .di-src--emp { color: #475569; border-color: #e2e8f0; background: #f8fafc; }
.di-flag { border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(15, 23, 42, .12); vertical-align: middle; flex: none; }
.di-flag--ph { display: inline-grid; place-items: center; width: 26px; height: 26px; background: var(--di-hot-l); color: var(--di-hot); }

/* list */
.di-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; border-radius: 16px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0, #34405e 0, var(--di-ink) 55%, #0d1322 100%); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.di-hero::after { content: ""; position: absolute; width: 260px; height: 260px; inset-inline-start: -60px; bottom: -150px; border-radius: 50%; background: radial-gradient(circle, rgba(239, 91, 53, .45), transparent 70%); }
.di-hero__t { display: flex; gap: 14px; align-items: center; position: relative; z-index: 1; }
.di-hero__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(255, 255, 255, .1); }
.di-hero__ic .di-i { width: 28px; height: 28px; color: #ffb59c; }
.di-hero h2 { font-size: 1.3rem; font-weight: 900; }
.di-hero p { color: #c7cfe0; font-size: .84rem; font-weight: 600; max-width: 600px; }
.di-hero__a { display: flex; gap: 8px; position: relative; z-index: 1; }
.di-hero .di-btn--ghost { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .2); }
.di-lbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.di-search { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 10px; background: #fff; width: 360px; max-width: 100%; color: var(--muted); }
.di-search:focus-within { border-color: var(--di-hot); }
.di-search input { border: 0; outline: 0; background: none; font: inherit; font-size: .88rem; padding: .5rem 0; width: 100%; color: var(--ink); }
.di-seg { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: #eef0f4; }
.di-seg button { border: 0; background: none; border-radius: 8px; padding: .35rem .85rem; font: inherit; font-weight: 800; font-size: .8rem; color: #475569; cursor: pointer; }
.di-seg button.is-on { background: #fff; color: var(--di-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.di-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.di-card { display: flex; flex-direction: column; gap: 6px; text-align: start; background: #fff; border: 1px solid var(--line); border-radius: var(--di-r); padding: 14px; font: inherit; color: inherit; cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s; }
.di-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(23, 32, 51, .1); border-color: #f6c2b2; }
.di-card__h { display: flex; justify-content: space-between; align-items: center; }
.di-flags { display: flex; gap: 2px; }
.di-card__t { font-size: 1rem; font-weight: 900; }
.di-card__m { color: #475569; font-size: .78rem; font-weight: 700; }
.di-card__f { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: .72rem; font-weight: 700; border-top: 1px dashed var(--line); padding-top: 8px; margin-top: auto; }
.di-card__c { color: var(--di-hot); }

/* workspace */
.di-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--di-ink); color: #fff; border-radius: var(--di-r); padding: 10px 14px; }
.di-back { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: none; color: #fff; cursor: pointer; }
.di-back:hover { background: rgba(255, 255, 255, .1); }
.di-top__t { display: flex; flex-direction: column; min-width: 160px; }
.di-top__t small { color: #aab4c8; font-weight: 700; font-size: .72rem; }
.di-top__t b { font-size: 1.05rem; font-weight: 900; }
.di-kpis { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }
.di-kpi { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .07); border-radius: 10px; padding: 6px 10px; }
.di-kpi > span { display: flex; flex-direction: column; line-height: 1.25; }
.di-kpi small { color: #aab4c8; font-size: .66rem; font-weight: 700; }
.di-kpi b { font-size: .82rem; font-weight: 800; }
.di-kpi .di-i { color: #ffb59c; }
.di-tabs { display: none; }
.di-ws { display: grid; grid-template-columns: 300px minmax(0, 1fr) 370px; gap: 12px; align-items: start; }
.di-col { background: #fff; border: 1px solid var(--line); border-radius: var(--di-r); min-width: 0; }
.di-col--brief, .di-col--plan { position: sticky; top: 8px; max-height: max(480px, calc(100vh - 262px)); overflow-y: auto; padding: 12px; }
.di-col--chat { display: flex; flex-direction: column; height: max(480px, calc(100vh - 262px)); background: var(--di-sand); }
.di-brief { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.di-brief h4, .di-ph h4 { display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: .95rem; }
.di-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.di-f > span, .di-f legend { font-size: .72rem; font-weight: 800; color: #475569; }
.di-f input, .di-f select, .di-f textarea { border: 1.5px solid var(--line); border-radius: 9px; padding: .42rem .55rem; font: inherit; font-size: .85rem; background: #fbfbfa; color: var(--ink); width: 100%; box-sizing: border-box; transition: border-color .15s, background .15s; }
.di-f input:focus, .di-f select:focus, .di-f textarea:focus { outline: 0; border-color: var(--di-hot); background: #fff; }
.di-f textarea { resize: vertical; line-height: 1.6; }
.di-fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.di-f--w { grid-column: 1 / -1; }
fieldset.di-f { border: 1px dashed var(--line); border-radius: 10px; padding: 8px; }
.di-dchips, .di-prefs { display: flex; flex-wrap: wrap; gap: 6px; }
.di-dchip { display: inline-flex; align-items: center; gap: 5px; background: var(--di-hot-l); color: #9a3412; border-radius: 999px; padding: .2rem .3rem .2rem .6rem; font-weight: 800; font-size: .8rem; }
.di-dchip button { border: 0; background: rgba(0, 0, 0, .06); border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; cursor: pointer; color: inherit; }
.di-dchip .di-i { width: 12px; height: 12px; }
.di-dchips select { width: auto; border: 1.5px dashed #f6c2b2; border-radius: 999px; padding: .2rem .6rem; font: inherit; font-size: .8rem; background: #fff; color: #9a3412; }
.di-pref { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: .25rem .65rem; font: inherit; font-size: .76rem; font-weight: 800; color: #475569; cursor: pointer; transition: all .15s; display: inline-flex; gap: 5px; align-items: center; }
.di-pref:hover { border-color: var(--di-hot); }
.di-pref.is-on { background: var(--di-ink); border-color: var(--di-ink); color: #fff; }

/* conversation */
.di-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.di-m { max-width: 92%; border-radius: 14px; padding: 10px 12px; font-size: .88rem; line-height: 1.8; }
.di-m p { white-space: pre-wrap; }
.di-m--me { align-self: flex-start; background: var(--di-ink); color: #fff; border-start-start-radius: 4px; }
.di-m--ai { align-self: flex-end; background: #fff; border: 1px solid var(--di-line); border-start-end-radius: 4px; width: 92%; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 8px rgba(23, 32, 51, .04); }
.di-m__h { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--di-hot); }
.di-m__h b { color: var(--di-ink); }
.di-typing { color: #64748b; font-weight: 700; flex-direction: row; align-items: center; }
.di-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--di-hot); display: inline-block; animation: di-b 1s infinite; }
.di-typing i:nth-child(3) { animation-delay: .15s; } .di-typing i:nth-child(4) { animation-delay: .3s; }
@keyframes di-b { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.di-rec, .di-prop { border: 1px solid var(--di-line); border-radius: 12px; padding: 10px 12px; background: linear-gradient(#fff, #fffaf7); display: flex; flex-direction: column; gap: 8px; }
.di-rec header, .di-prop header { display: flex; align-items: center; gap: 8px; }
.di-rec header div { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.di-rec header b, .di-prop header b { font-weight: 900; font-size: .98rem; }
.di-rec header small, .di-prop header small { color: var(--muted); font-size: .74rem; font-weight: 700; }
.di-prop header small { flex: 1; }
.di-rec__cities { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.di-rec__cities > span { background: #fff; border: 1px solid var(--di-line); border-radius: 10px; padding: 4px 8px; font-size: .8rem; display: flex; flex-direction: column; line-height: 1.35; }
.di-rec__cities small { color: var(--muted); font-size: .7rem; }
.di-rec__cities i { color: #cbd5e1; display: inline-flex; }
.di-rec__facts { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .76rem; font-weight: 700; color: #475569; align-items: center; }
.di-rec__facts > span { display: inline-flex; align-items: center; gap: 5px; }
.di-dots { display: inline-flex; gap: 2px; }
.di-dots i { width: 7px; height: 7px; border-radius: 50%; background: #e2e8f0; }
.di-dots i.on { background: var(--di-hot); }
.di-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: .74rem; }
.di-tags small { color: var(--muted); font-weight: 800; }
.di-tags span { background: #f1f5f9; border-radius: 6px; padding: 1px 7px; font-weight: 700; }
.di-tags--add span { background: var(--di-hot-l); color: #9a3412; }
.di-warn, .di-qs, .di-askc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: .78rem; }
.di-warn li { color: #92400e; display: flex; gap: 5px; } .di-qs li { color: #5b21b6; display: flex; gap: 5px; }
.di-prop ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: .8rem; }
.di-prop li { display: flex; gap: 6px; align-items: center; }
.di-prop li small { color: var(--muted); }
.di-day { min-width: 56px; color: var(--di-hot); font-weight: 800; font-size: .72rem; }
.di-askc { background: #f5f3ff; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.di-askc b { font-size: .8rem; color: #5b21b6; display: flex; align-items: center; gap: 5px; }
.di-askc li::before { content: "• "; color: #a78bfa; }
.di-quick { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px 0; scrollbar-width: thin; }
.di-quick button { white-space: nowrap; border: 1px solid var(--di-line); background: #fff; border-radius: 999px; padding: .3rem .75rem; font: inherit; font-size: .76rem; font-weight: 800; color: var(--di-ink); cursor: pointer; display: inline-flex; gap: 5px; align-items: center; transition: border-color .15s, background .15s; }
.di-quick button:hover { border-color: var(--di-hot); background: var(--di-hot-l); }
.di-input { display: flex; gap: 8px; padding: 10px 12px 12px; }
.di-input textarea { flex: 1; border: 1.5px solid var(--di-line); border-radius: 12px; padding: .55rem .7rem; font: inherit; font-size: .88rem; resize: none; background: #fff; }
.di-input textarea:focus { outline: 0; border-color: var(--di-hot); }
.di-send { width: 46px; border: 0; border-radius: 12px; background: var(--di-hot); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .15s; }
.di-send:hover { background: #d94a26; }
.di-send .di-i { width: 20px; height: 20px; transform: scaleX(-1); }

/* plan */
.di-col--plan { display: flex; flex-direction: column; gap: 10px; }
.di-ph { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.di-ph > span:not(.di-pill) { color: var(--muted); font-size: .76rem; font-weight: 700; flex: 1; }
.di-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.di-dayh { font-size: .72rem; font-weight: 900; color: var(--di-hot); padding-top: 4px; border-top: 1px dashed var(--di-line); }
.di-dayh:first-child { border-top: 0; }
.di-it { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--di-line); border-radius: 10px; padding: 7px 8px; background: #fff; transition: border-color .15s; }
.di-it:hover { border-color: #cbd5e1; }
.di-it.is-moved { background: #f0fdf4; border-color: #bbf7d0; }
.di-it__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--di-hot-l); color: var(--di-hot); flex: none; }
.di-it--hotel .di-it__ic { background: #e0f2fe; color: #0369a1; } .di-it--flight .di-it__ic { background: #ede9fe; color: #6d28d9; } .di-it--visa .di-it__ic { background: #fef3c7; color: #b45309; }
.di-it__b { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.di-it__b b { font-size: .84rem; font-weight: 800; }
.di-it__b small { color: #64748b; font-size: .72rem; font-weight: 600; }
.di-it__b em { color: #475569; font-size: .72rem; font-style: normal; }
.di-it__src { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.di-moved { display: inline-flex; gap: 3px; align-items: center; font-size: .66rem; font-weight: 800; color: #166534; }
.di-it__a { display: flex; flex-direction: column; gap: 1px; }
.di-it__a button { border: 0; background: none; color: #94a3b8; width: 24px; height: 22px; display: grid; place-items: center; cursor: pointer; border-radius: 6px; }
.di-it__a button:hover:not(:disabled) { background: #f1f5f9; color: var(--di-ink); }
.di-it__a button:disabled { opacity: .3; }
.di-it__a .di-i { width: 14px; height: 14px; }
.di-add { border: 1.5px dashed #f6c2b2; background: #fff; color: var(--di-hot); border-radius: 10px; padding: .5rem; font: inherit; font-weight: 800; font-size: .82rem; cursor: pointer; display: flex; justify-content: center; gap: 6px; }
.di-add:hover { background: var(--di-hot-l); }
.di-box { border: 1px solid var(--di-line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.di-box h5 { display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: .86rem; flex-wrap: wrap; }
.di-box--com { background: #fbfaf7; border-style: dashed; }
.di-feas { border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; background: #f1f5f9; }
.di-feas b { font-weight: 900; } .di-feas span { font-size: .78rem; font-weight: 700; color: #475569; }
.di-feas--ok { background: #dcfce7; color: #166534; } .di-feas--ok2 { background: #e0f2fe; color: #075985; } .di-feas--warn { background: #fef3c7; color: #92400e; } .di-feas--bad { background: #fee2e2; color: #991b1b; }
.di-btbl { width: 100%; border-collapse: collapse; font-size: .8rem; }
.di-btbl th { text-align: start; color: var(--muted); font-size: .7rem; font-weight: 800; padding: 3px 4px; }
.di-btbl td { padding: 4px; border-top: 1px solid #f1f5f9; }
.di-num { font-weight: 800; direction: ltr; display: inline-block; }
.di-reasons { margin: 0; padding-inline-start: 18px; font-size: .76rem; color: #475569; display: flex; flex-direction: column; gap: 2px; }
.di-vrow { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; flex-wrap: wrap; }
.di-vg { border-top: 1px dashed var(--di-line); padding-top: 6px; display: flex; flex-direction: column; gap: 3px; font-size: .8rem; }
.di-vg small { color: #64748b; }
.di-vg details summary { cursor: pointer; font-weight: 800; color: #475569; font-size: .76rem; }
.di-vg ol { margin: 4px 0; padding-inline-start: 18px; font-size: .76rem; }
.di-vg__a { display: flex; gap: 8px; align-items: center; }
.di-csec { display: flex; flex-direction: column; gap: 3px; font-size: .8rem; }
.di-csec > small { color: #475569; font-weight: 800; display: flex; gap: 6px; align-items: center; }
.di-code { border: 1px solid var(--di-line); border-radius: 8px; padding: 5px 7px; background: #fff; display: flex; flex-direction: column; gap: 2px; }
.di-code code { background: #f1f5f9; border-radius: 4px; padding: 0 4px; direction: ltr; display: inline-block; font-weight: 800; }
.di-code small, .di-sm { color: #64748b; font-size: .74rem; }
.di-vers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: .8rem; }
.di-vers li { display: flex; gap: 8px; align-items: center; }
.di-vers li > span:not(.di-pill) { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.di-vers small { color: var(--muted); font-size: .7rem; }
.di-conv { display: flex; gap: 10px; align-items: flex-start; background: var(--di-ink); color: #fff; border-radius: 12px; padding: 10px 12px; }
.di-conv > .di-i { width: 24px; height: 24px; color: #4ade80; }
.di-conv div { display: flex; flex-direction: column; gap: 3px; font-size: .8rem; }
.di-conv__a { display: flex; flex-wrap: wrap; gap: 10px; }
.di-conv .di-link { color: #ffb59c; }

/* sticky actions */
.di-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: var(--di-r); padding: 8px 10px; box-shadow: 0 -8px 24px rgba(23, 32, 51, .08); }
.di-bar__n { display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; font-weight: 700; color: #475569; }

/* modals (wizard, compare, playbooks, item form) */
.di-modal, .di-wiz { display: flex; flex-direction: column; gap: 12px; min-width: min(640px, 92vw); }
.di-modal--wide { min-width: min(900px, 94vw); }
.di-modal h3, .di-wiz h3 { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 1.1rem; }
.di-wiz h3 small { color: var(--muted); font-size: .76rem; font-weight: 700; }
.di-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.di-err { background: #fee2e2; color: #991b1b; border-radius: 10px; padding: 8px 10px; font-size: .84rem; font-weight: 700; }
.di-err[hidden] { display: none; }
.di-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.di-steps li { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; color: #94a3b8; }
.di-steps li i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #f1f5f9; font-style: normal; font-size: .72rem; }
.di-steps li + li::before { content: ""; width: 18px; height: 2px; background: #e2e8f0; }
.di-steps li.is-on { color: var(--di-ink); } .di-steps li.is-on i { background: var(--di-hot); color: #fff; }
.di-steps li.is-done { color: #166534; } .di-steps li.is-done i { background: #dcfce7; }
.di-steps .di-i { width: 12px; height: 12px; }
.di-wchip { display: flex; align-items: center; gap: 10px; border: 1.5px solid #bbf7d0; background: #f0fdf4; border-radius: 12px; padding: 10px; }
.di-wchip span { flex: 1; display: flex; flex-direction: column; }
.di-wchip small { color: #64748b; }
.di-ac { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.di-acitem { text-align: start; border: 0; background: #fff; border-radius: 8px; padding: 6px 8px; font: inherit; cursor: pointer; display: flex; flex-direction: column; }
.di-acitem:hover { background: var(--di-hot-l); }
.di-acitem small { color: #64748b; font-size: .74rem; }
.di-opts, .di-wit { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.di-opt, .di-wrow { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 12px; padding: 9px 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.di-opt span, .di-wrow span:not(.di-moved) { flex: 1; display: flex; flex-direction: column; line-height: 1.4; }
.di-opt small, .di-wrow small { color: #64748b; font-size: .74rem; }
.di-opt.is-on { border-color: var(--di-hot); background: var(--di-hot-l); }
.di-wrow.is-moved { opacity: .6; cursor: default; }
.di-rev { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 0; font-size: .86rem; }
.di-rev dt { color: #64748b; font-weight: 800; } .di-rev dd { margin: 0; font-weight: 700; }
.di-done { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 14px; }
.di-done > .di-i { width: 44px; height: 44px; color: #16a34a; background: #dcfce7; border-radius: 50%; padding: 8px; box-sizing: border-box; }
.di-done b { font-size: 1.1rem; font-weight: 900; }
.di-cmpw { overflow-x: auto; }
.di-cmp { width: 100%; border-collapse: collapse; font-size: .8rem; }
.di-cmp th, .di-cmp td { padding: 7px 8px; border-bottom: 1px solid #f1f5f9; text-align: start; vertical-align: top; }
.di-cmp thead th { background: #f8fafc; font-weight: 900; white-space: nowrap; }
.di-cmp tbody th { color: #475569; font-weight: 800; white-space: nowrap; }
.di-cmp td small { display: block; color: #64748b; font-size: .72rem; }
.di-pbl { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; }
.di-pbrow { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; background: #fff; font: inherit; cursor: pointer; text-align: start; }
.di-pbrow:hover { border-color: var(--di-hot); }
.di-pbrow small { color: #64748b; font-size: .74rem; margin-inline-start: auto; }
.di-d { list-style: none; display: flex; gap: 6px; align-items: center; font-size: .82rem; padding: 3px 6px; border-radius: 6px; }
.di-d--add { background: #f0fdf4; color: #166534; } .di-d--rm { background: #fef2f2; color: #991b1b; text-decoration: line-through; } .di-d--ch { background: #fffbeb; color: #92400e; }
#modal .di-modal, #modal .di-wiz { --di-ink: #172033; --di-hot: #ef5b35; --di-hot-l: #fff0ea; --di-line: #e6e3dc; }

/* customer 360 card */
.di-c360 { display: flex; flex-direction: column; gap: 6px; }
.di-c360 a, .di-c360 button { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px; background: #fff; font: inherit; font-size: .82rem; text-align: start; cursor: pointer; color: inherit; }
.di-c360 span { flex: 1; display: flex; flex-direction: column; } .di-c360 small { color: #64748b; font-size: .72rem; }

@media (max-width: 1180px) {
  .di-ws { grid-template-columns: minmax(0, 1fr) 340px; }
  .di-col--brief { grid-column: 1 / -1; position: static; max-height: none; }
}
@media (max-width: 820px) {
  .di-tabs { display: flex; gap: 4px; background: #eef0f4; border-radius: 12px; padding: 4px; }
  .di-tabs button { flex: 1; border: 0; background: none; border-radius: 9px; padding: .5rem; font: inherit; font-weight: 800; font-size: .84rem; color: #475569; display: inline-flex; justify-content: center; gap: 5px; }
  .di-tabs button.is-on { background: #fff; color: var(--di-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
  .di-ws { grid-template-columns: minmax(0, 1fr); }
  .di-col { display: none; }
  .di-ws[data-pane="brief"] .di-col--brief, .di-ws[data-pane="plan"] .di-col--plan { display: flex; flex-direction: column; position: static; max-height: none; }
  .di-ws[data-pane="chat"] .di-col--chat { display: flex; height: calc(100vh - 290px); min-height: 420px; }
  .di-kpis { margin-inline-start: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .di-bar { justify-content: stretch; }
  .di-bar .di-btn { flex: 1 1 45%; justify-content: center; }
  .di-bar__n { width: 100%; }
  .di-m, .di-m--ai { max-width: 100%; width: 100%; }
  .di-modal, .di-wiz, .di-modal--wide { min-width: 0; }
  .di-rev { grid-template-columns: 90px 1fr; }
  .di-search { width: 100%; }
}