/* =====================================================================
   UI kit — custom select, multi-select, date picker, modal, drawer, drop zone.
   Load after ds.css. Used by store, Seller Centre and admin.
   ===================================================================== */

/* native control stays for value/events, never shown */
.ui-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- select trigger (also date) ---------- */
.ui-select, .ui-date { position: relative; display: block; width: 100%; min-width: 0; }
.ui-select-btn {
  width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left;
  font-size: 13px; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease;
}
.ui-select-btn:hover { border-color: #D6D6D3; }
.ui-select-btn[aria-expanded="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10,10,10,.06); }
.ui-select-btn:disabled { background: var(--well); cursor: not-allowed; color: var(--faint); }
.ui-select-btn > svg { flex: none; color: var(--muted); transition: transform .18s var(--ease); }
.ui-select-btn[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.ui-date-btn > svg { transform: none !important; }
.ui-select-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-select-label.ph { color: var(--faint); }
.ui-select.invalid .ui-select-btn, .ui-date.invalid .ui-select-btn { border-color: var(--red); }
.ui-select.sm .ui-select-btn, .ui-date.sm .ui-select-btn { height: 32px; font-size: 12.5px; padding: 0 10px; }
.ui-select.inline { display: inline-block; width: auto; }
.ui-select.inline .ui-select-btn { width: auto; }

/* ---------- popover ---------- */
.ui-pop {
  position: fixed; z-index: 400; background: #fff; border-radius: var(--r);
  box-shadow: 0 0 0 1px rgba(10,10,10,.06), 0 16px 40px rgba(10,10,10,.14);
  animation: pop-in .14s var(--ease); outline: none;
}
.ui-pop.up { animation-name: pop-in-up; }
.ui-pop.out { opacity: 0; transition: opacity .12s ease; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.99); } }
@keyframes pop-in-up { from { opacity: 0; transform: translateY(4px) scale(.99); } }

.ui-menu { padding: 6px; max-width: min(420px, 94vw); }
.ui-menu-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; margin-bottom: 4px; border-radius: 8px; background: var(--well); color: var(--muted); }
.ui-menu-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 13px; color: var(--ink); }
.ui-menu-list { max-height: 280px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.ui-menu-group { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--faint); }
.ui-opt { min-height: 34px; padding: 7px 10px; border-radius: 8px; display: flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; transition: background .08s ease; }
.ui-opt:hover, .ui-opt.act { background: var(--well); }
.ui-opt.disabled:hover { background: transparent; }
.ui-opt.on { font-weight: 600; }
.ui-opt.disabled { color: var(--faint); cursor: not-allowed; }
.ui-opt-text { flex: 1; min-width: 0; }
.ui-opt-hint { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.ui-tick { display: none; color: var(--ink); }
.ui-opt.on .ui-tick { display: inline-flex; }
.ui-check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #CFCFCC; display: inline-flex; align-items: center; justify-content: center; flex: none; color: transparent; transition: background .12s ease, border-color .12s ease; }
.ui-opt.on .ui-check { background: var(--ink); border-color: var(--ink); color: #fff; }
.ui-menu-empty { padding: 14px 10px; font-size: 12.5px; color: var(--muted); text-align: center; }

/* ---------- calendar ---------- */
.ui-cal { width: 280px; padding: 12px; }
.ui-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ui-cal-title { font-size: 13.5px; font-weight: 600; }
.ui-cal-nav { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.ui-cal-nav:hover { background: var(--well); }
.ui-cal-dow, .ui-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ui-cal-dow span { height: 26px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--faint); }
.ui-day { height: 34px; border: 0; border-radius: 8px; background: transparent; font-size: 12.5px; cursor: pointer; color: var(--ink); position: relative; transition: background .1s ease; }
.ui-day:hover { background: var(--well); }
.ui-day.today::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--yellow); }
.ui-day.focus { box-shadow: inset 0 0 0 1px var(--line); }
.ui-day.on { background: var(--ink); color: #fff; font-weight: 600; }
.ui-day.on::after { background: var(--yellow); }
.ui-day.off { color: #CFCFCC; cursor: not-allowed; background: transparent; }
.ui-cal-foot { display: flex; justify-content: space-between; padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--line); }
.link-quiet { border: 0; background: none; padding: 4px 6px; border-radius: 6px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--ink); }
.link-quiet:hover { background: var(--well); }
.link-quiet:disabled { color: var(--faint); cursor: not-allowed; }

/* ---------- modal / drawer (extends ds.css .modal) ---------- */
body.no-scroll { overflow: hidden; }
.modal { gap: 0; padding: 0; max-height: calc(100vh - 40px); }
.modal.sm { width: min(400px, 100%); }
.modal.lg { width: min(720px, 100%); }
.modal.xl { width: min(960px, 100%); }
.layer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 4px 20px; }
.layer-body { padding: 12px 20px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.layer-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); }
.modal-back.out, .drawer-back.out { opacity: 0; transition: opacity .18s ease; }
.drawer-back { position: fixed; inset: 0; z-index: 150; background: rgba(10,10,10,.28); animation: fade .15s ease; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: #fff; display: flex; flex-direction: column; animation: drawer-in .22s var(--ease); box-shadow: -12px 0 40px rgba(10,10,10,.12); }
.drawer.lg { width: min(720px, 100%); }
.drawer .layer-head { padding: 18px 20px 10px; border-bottom: 1px solid var(--line); }
.drawer .layer-body { flex: 1; padding: 18px 20px; }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } }

/* ---------- toast exit ---------- */
.toast.out { opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }

/* ---------- drop zone ---------- */
.ui-drop { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 16px; border: 1px dashed #D6D6D3; border-radius: var(--r); background: var(--hover); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.ui-drop:hover, .ui-drop.over { border-color: var(--ink); background: #fff; }
.ui-drop > span:first-of-type { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ui-drop-files { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.ui-drop-files:empty { display: none; }
.tag-x { border: 0; background: transparent; padding: 0 0 0 2px; cursor: pointer; display: inline-flex; color: var(--muted); }

/* ---------- stepper variant ---------- */
.ui-stepper.sm { height: 32px; }
.ui-stepper.sm button { width: 28px; height: 30px; }
.ui-stepper.sm input { width: 48px; height: 30px; font-size: 13px; }

/* ---------- pills with tone ---------- */
.pill.ok { background: var(--green-bg); color: var(--green); }
.pill.bad { background: var(--red-bg); color: var(--red); }
.pill.warn { background: var(--amber-bg); color: var(--amber); }
.pill.ok .dot, .pill.bad .dot, .pill.warn .dot { display: none; }
.empty-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--well); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }

/* ---------- chat (Seller Centre + store messages) ---------- */
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.box { background: #fff; border-radius: 14px; box-shadow: var(--sh-1); }
.chat { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: calc(100vh - 150px); min-height: 480px; overflow: hidden; }
.chat-list { border-right: 1px solid #F1F1EF; display: flex; flex-direction: column; min-height: 0; }
.chat-list .searchbox { margin: 12px; height: 36px; }
.chat-threads { overflow-y: auto; flex: 1; }
.thread { display: flex; gap: 10px; padding: 12px 14px; text-decoration: none; color: inherit; border-bottom: 1px solid #F6F6F4; }
.thread:hover { background: var(--hover); }
.thread[aria-current="true"] { background: var(--well); }
.thread .t { font-weight: 600; font-size: 13px; }
.thread.unread .t::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--yellow); vertical-align: middle; }
.chat-pane { display: flex; flex-direction: column; min-height: 0; }
.chat-head { padding: 14px 18px; border-bottom: 1px solid #F1F1EF; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chat-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: #FCFCFB; }
.msg { max-width: 72%; display: flex; flex-direction: column; gap: 4px; }
.msg .b { padding: 9px 13px; border-radius: 14px; background: #fff; box-shadow: var(--sh-1); font-size: 13.5px; white-space: pre-wrap; word-wrap: break-word; }
.msg.me { align-self: flex-end; align-items: flex-end; }
.msg.me .b { background: var(--ink); color: #fff; box-shadow: none; }
.msg.sys { align-self: center; max-width: 90%; }
.msg.sys .b { background: var(--well); box-shadow: none; font-size: 12px; color: var(--muted); }
.msg .meta { font-size: 11px; color: var(--faint); }
.msg .att { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; text-decoration: underline; cursor: pointer; color: inherit; background: none; border: 0; padding: 0; }
.chat-day { align-self: center; font-size: 11px; color: var(--faint); padding: 4px 0; }
.composer { border-top: 1px solid #F1F1EF; padding: 12px; display: flex; gap: 8px; align-items: flex-end; background: #fff; }
.composer textarea { flex: 1; min-height: 40px; max-height: 160px; resize: none; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; outline: none; font-size: 13.5px; }
.composer textarea:focus { border-color: var(--muted); }
.composer .files { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 8px; }

.chat-back { display: none; }
@media (max-width: 860px) {
  .chat { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 130px); }
  .chat.has-thread .chat-list, .chat:not(.has-thread) .chat-pane { display: none; }
  .msg { max-width: 88%; }
  .chat-back { display: inline-flex; }
}

@media (max-width: 640px) {
  .modal-back { align-items: flex-end; padding: 0; }
  .modal, .modal.sm, .modal.lg, .modal.xl { width: 100%; border-radius: 16px 16px 0 0; max-height: 92vh; animation: sheet-in .22s var(--ease); }
  @keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } }
  .ui-cal { width: min(300px, 94vw); }
}