/* Desktop callback workspace shares the existing right sidebar and resize handle. */
#order-history-bulk-menu [data-oh-bulk-action="ai-chat"] { display: none !important; }
#order-history-bulk-menu [data-oh-bulk-action="calls"][hidden] { display: none !important; }
@media (min-width: 1001px) {
  #order-history-bulk-menu [data-oh-bulk-action="calls"] { display: none !important; }
  :is(#view-order-history, #view-rn).has-callback-drawer > .page-inner,
  :is(#view-order-history, #view-rn).has-callback-drawer .page-inner { box-sizing: border-box; width: 100%; max-width: none; margin: 0; padding-right: calc(var(--callback-drawer-width, 360px) + 12px) !important; }
  body:is([data-view="order-history"], [data-view="rn"]) #order-history-ai-chat-sidebar.has-callback-drawer:not([hidden]) {
    display: flex !important; position: fixed !important; right: 0; top: var(--site-header-offset, 50px);
    width: var(--callback-drawer-width, 360px) !important; height: calc(100dvh - var(--site-header-offset, 50px));
    max-height: none; padding: 0 !important; border: 0; border-left: 1px solid #e8e8ed; border-radius: 16px 0 0 16px;
    background: #fff; overflow: visible; z-index: 80;
  }
  .has-callback-drawer:not([data-callback-state="ai"]) > #order-history-ai-chat-host,
  .has-callback-drawer > #order-history-sms-sidebar-view { display: none !important; }
  .has-callback-drawer[data-callback-state="ai"] .order-callback-shell { display: none; }
  .has-callback-drawer[data-callback-state="compact"] .order-callback-right,
  .has-callback-drawer[data-callback-state="compact"] .order-callback-frame,
  .has-callback-drawer[data-callback-state="compact"] .order-callback-title,
  .has-callback-drawer[data-callback-state="compact"] .order-callback-header > .order-callback-count,
  .has-callback-drawer[data-callback-state="compact"] .order-history-chat-resizer { display: none !important; }
  .has-callback-drawer[data-callback-state="compact"] .order-callback-rail { display: flex; }
  .has-callback-drawer[data-callback-state="compact"] [data-drawer-toggle] svg { transform: rotate(180deg); }
}
.order-callback-shell { position: relative; display: grid; grid-template-columns: var(--callback-left-width, 100%) minmax(0, 1fr); transition: grid-template-columns .22s ease; flex: 1; width: 100%; min-height: 0; overflow: hidden; border-radius: inherit; }
[data-callback-state="detail"] .order-callback-shell { grid-template-columns: var(--callback-left-width, 50%) minmax(0, 1fr); }
.order-callback-left { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.order-callback-right { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-left: 1px solid #e8e8ed; }
.order-callback-right > iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.order-callback-right[hidden], .order-callback-right > [hidden] { display: none !important; }
.order-callback-feedback { padding: 24px; color: #6e6e73; font: 14px/1.5 system-ui; }
.order-callback-header { display: flex; align-items: center; gap: 8px; padding: 10px; min-height: 56px; height: 56px; box-sizing: border-box; border-bottom: 1px solid #f0f0f2; }
.order-callback-title { font: 600 14px/1.3 system-ui; color: #1d1d1f; }
.order-callback-header button, .order-callback-header [data-drawer-open-tab] { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border: 0; border-radius: 9px; background: #f5f5f7; color: #515154; cursor: pointer; font-size: 22px; }
.order-callback-header [data-drawer-toggle] { margin: 0 2px 0 0; }
.order-callback-header svg, .order-callback-rail svg { width: 21px; height: 21px; }
.order-callback-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: #e53935; color: #fff; font: 600 11px/1 system-ui; }
.order-callback-count[hidden], .order-callback-header [hidden] { display: none !important; }
.order-callback-rail { display: none; flex: 1; align-items: center; flex-direction: column; gap: 12px; padding: 16px 0; border: 0; background: #fff; color: #515154; cursor: pointer; }
.order-callback-vertical { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 13px/1.5 system-ui; letter-spacing: .2px; }
.order-callback-frame { width: 100%; flex: 1; min-height: 0; border: 0; background: #fff; }
@media (max-width: 1000px) {
  #order-history-ai-chat-sidebar,
  #order-history-ai-chat-sidebar .order-callback-shell,
  #order-history-ai-chat-sidebar .order-history-chat-resizer,
  #order-history-ai-chat-sidebar .order-history-chat-drag-shield { display: none !important; }
  #view-order-history .page-inner { padding-right: 0 !important; }
  body.order-callback-mobile-open { overflow: hidden; }
  body[data-view="order-history"] #order-history-ai-chat-sidebar.has-callback-drawer[data-mobile-open="true"]:not([hidden]) {
    display: flex !important; position: fixed !important; inset: 0 !important;
    width: 100% !important; max-width: none !important; height: 100dvh !important; max-height: none !important;
    box-sizing: border-box; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) !important;
    margin: 0; border: 0; border-radius: 0; background: #fff; z-index: 1000001; overflow: hidden;
  }
  #order-history-ai-chat-sidebar[data-mobile-open="true"] > #order-history-ai-chat-host,
  #order-history-ai-chat-sidebar[data-mobile-open="true"] > #order-history-sms-sidebar-view { display: none !important; }
  #order-history-ai-chat-sidebar[data-mobile-open="true"] .order-callback-shell {
    display: flex !important; flex-direction: column; height: 100%;
  }
  #order-history-ai-chat-sidebar[data-mobile-open="true"] .order-callback-left { flex: 1; }
  #order-history-ai-chat-sidebar[data-mobile-detail="true"] .order-callback-left { display: none; }
  #order-history-ai-chat-sidebar[data-mobile-detail="true"] .order-callback-left > iframe { display: none !important; }
  #order-history-ai-chat-sidebar[data-mobile-open="true"] .order-callback-right { flex: 1; border-left: 0; }
  #order-history-ai-chat-sidebar[data-mobile-open="true"] [data-drawer-toggle] svg { transform: none; }
}
@media print {
  #order-history-ai-chat-sidebar.has-callback-drawer { display: none !important; }
  :is(#view-order-history, #view-rn).has-callback-drawer .page-inner { padding-right: 0 !important; }
}

.order-callback-phone-overlay { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 18px; background: #14192388; backdrop-filter: blur(4px); box-sizing: border-box; }
.order-callback-phone-dialog { position: relative; width: min(440px, 100%); max-height: 100%; overflow: auto; padding: 24px; border-radius: 22px; background: #fff; color: #1d1d1f; box-shadow: 0 20px 65px #0003; font: 14px/1.5 system-ui; box-sizing: border-box; }
.order-callback-phone-dialog h2 { margin: 0 30px 16px 0; font-size: 20px; }
.order-callback-phone-dialog [data-close-phone] { position: absolute; right: 12px; top: 12px; border: 0; border-radius: 50%; width: 30px; height: 30px; background: #f5f5f7; color: #515154; cursor: pointer; font: 22px/1 system-ui; }
.order-callback-phone-dialog .sales-callback-phone { color: #0066cc; font-size: 26px; text-decoration: none; }
.order-callback-phone-dialog .sales-callback-phone-line { display: flex; align-items: center; gap: 9px; margin: 14px 0; }
.order-callback-phone-dialog [data-copy] { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 7px; border: 0; border-radius: 10px; background: #f5f5f7; color: #515154; cursor: pointer; }
.order-callback-phone-dialog [data-copy] svg { width: 21px; height: 21px; }
.order-callback-phone-dialog .sales-callback-send-self { width: 100%; padding: 13px 15px; border: 0; border-radius: 12px; background: #0071e3; color: #fff; font: 600 14px/1.5 system-ui; cursor: pointer; }
.order-callback-phone-dialog .sales-callback-send-self:disabled { opacity: .5; cursor: default; }
.order-callback-phone-dialog [role="status"] { font-size: 13px; color: #6e6e73; }
@keyframes callback-number-copied { 0%,100% { transform: scale(1); } 40% { transform: scale(1.025); color: #22863a; } }
.order-callback-phone-dialog .is-copied { animation: callback-number-copied 450ms ease; }
@media (prefers-reduced-motion: reduce) { .order-callback-phone-dialog .is-copied { animation: none; color: #22863a; } }

/* Search and clear share a fixed position; only the input fades in and out. */
.order-callback-header { position: relative; padding-right: 112px; flex-shrink: 0; }
.order-callback-header button, .order-callback-header [data-drawer-open-tab] { background: transparent; border-radius: 6px; padding: 4px; }
.order-callback-header button:hover, .order-callback-header [data-drawer-open-tab]:hover { color: #0071e3; }
.order-callback-header button:focus-visible, .order-callback-header [data-drawer-open-tab]:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
.order-callback-title { white-space: nowrap; transition: opacity .18s ease; }
.order-callback-tools { position: absolute; left: 48px; right: 10px; display: flex; align-items: center; gap: 4px; pointer-events: none; }
.order-callback-search { position: relative; flex: 1; min-width: 0; height: 30px; }
.order-callback-tools button, .order-callback-tools [data-drawer-open-tab] { pointer-events: auto; }
.order-callback-header [data-drawer-open-tab] { box-sizing: border-box; text-decoration: none; }
.order-callback-search [data-drawer-search], .order-callback-search [data-drawer-clear] { position: absolute; right: 0; top: 0; transition: none; transform: none; }
.order-callback-search input { position: absolute; left: 0; top: 0; box-sizing: border-box; width: calc(100% - 34px); min-width: 0; height: 30px; padding: 0 4px; border: 0; border-bottom: 1px solid #0071e3; border-radius: 0; outline: none; opacity: 0; visibility: hidden; pointer-events: none; background: #fff; color: #1d1d1f; font: 14px/1.4 system-ui; transition: opacity .15s ease; }
.order-callback-search input::-webkit-search-cancel-button { display: none; }
.order-callback-header.is-searching .order-callback-search input { visibility: visible; pointer-events: auto; opacity: 1; }
.order-callback-header.is-searching .order-callback-tools { background: #fff; }
.order-callback-header.is-searching .order-callback-title,
.order-callback-header.is-searching > .order-callback-count { opacity: 0; pointer-events: none; }
.has-callback-drawer[data-callback-state="compact"] .order-callback-tools { display: none; }
.has-callback-drawer[data-callback-state="compact"] .order-callback-header { padding-right: 10px; }
@media (prefers-reduced-motion: reduce) {
  .order-callback-search input, .order-callback-title { transition: none; }
}

.order-callback-tabs { display: flex; align-items: center; gap: 12px; min-width: 0; }
.order-callback-header .order-callback-tabs [role="tab"] { position: relative; width: auto; height: 34px; padding: 0 0 4px; gap: 5px; border-radius: 0; font: 500 13px/1.3 system-ui; white-space: nowrap; color: #86868b; }
.order-callback-header .order-callback-tabs [aria-selected="true"] { color: #1d1d1f; font-weight: 650; }
.order-callback-tabs [aria-selected="true"]::after { content: ''; position: absolute; height: 2px; bottom: 0; left: 0; right: 0; background: currentColor; border-radius: 2px; }
.order-callback-header.is-searching .order-callback-tabs { visibility: hidden; pointer-events: none; }
.order-callback-header.is-searching [data-drawer-search] { display: none; }
.order-callback-frame[hidden] { display: none !important; }
.has-callback-drawer[data-callback-state="compact"] .order-callback-tabs { display: none; }
.order-callback-tabs .order-callback-count { min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px; }
@media (min-width: 1001px) { .order-callback-header { gap: 5px; padding-left: 7px; padding-right: 107px; } .order-callback-tabs { gap: 9px; } }

/* Keep the SMS conversation open beside a compact request rail. */
.has-callback-drawer[data-queue-compact="true"] .order-callback-tabs,
.has-callback-drawer[data-queue-compact="true"] .order-callback-tools { display: none; }
.has-callback-drawer[data-queue-compact="true"] .order-callback-header { padding-right: 10px; }
.has-callback-drawer[data-queue-compact="true"] .order-callback-rail { display: flex; }
.has-callback-drawer[data-queue-compact="true"] [data-drawer-toggle] svg { transform: rotate(180deg); }
@media (min-width: 1001px) {
  #order-history-ai-chat-sidebar.has-callback-drawer { transition: width .22s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .order-callback-shell, #order-history-ai-chat-sidebar.has-callback-drawer { transition: none; }
}

#order-history-ai-chat-sidebar.has-callback-drawer[data-drawer-resized="true"],
.has-callback-drawer[data-drawer-resized="true"] .order-callback-shell { transition: none; }
@keyframes callback-refresh-spin { to { transform: rotate(360deg); } }
.order-callback-header [data-drawer-refresh][aria-busy="true"] svg {
  animation: callback-refresh-spin .85s linear infinite;
  transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
  .order-callback-header [data-drawer-refresh][aria-busy="true"] svg { animation: none; }
}

.order-callback-header.without-open-tab { padding-right: 7px; }

#order-history-ai-chat-sidebar.has-callback-drawer[hidden] { display: none !important; }
.order-callback-dismiss[hidden] { display: none; }

@media (min-width: 1001px) {
  #view-rn.has-callback-drawer #rn-chat-sidebar { display: none !important; }
}
:is(#view-rn, #view-order-history) .rn-ai-call-chip { appearance: none; display: inline-flex; align-items: center; flex-shrink: 0; height: 20px; padding: 0 7px; border: 1px solid #0d948830; border-radius: 999px; background: #f0fdfa; color: #0f766e; font: 700 10px/1 system-ui; white-space: nowrap; cursor: pointer; }
:is(#view-rn, #view-order-history) .rn-ai-call-chip:hover { background: #ccfbf1; border-color: #0d948860; }
.rn-ai-call-chip:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.rn-ai-call-chip[hidden] { display: none !important; }
@media print { .rn-ai-call-chip { display: none !important; } }

@media (min-width: 1001px) {
  body[data-view="rn"] #view-rn.has-callback-drawer .rn-page-inner { padding-right: calc(var(--callback-drawer-width, 760px) + 12px) !important; }
}
#view-rn:is([data-rn-public="true"], [data-rn-role="customer"]) .rn-ai-call-chip { display: none !important; }

body:not([data-view="order-history"]) #order-history-ai-chat-sidebar:not(.has-callback-drawer) { display: none !important; }

/* Keep history/transcript and SMS mounted as independent conversation columns. */
.order-callback-right[data-conversation="true"] { display:flex; }
.order-callback-right[data-conversation="true"] > iframe { position:relative; inset:auto; width:50%; flex:1 1 0; min-width:0; }
.order-callback-right[data-conversation="true"] > [data-history-frame] { order:0; }
.order-callback-right[data-conversation="true"] > [data-sms-frame] { order:1; border-left:1px solid #e8e8ed; }
.order-callback-feedback:not([hidden]) { position:absolute; inset:auto 0 0; background:#fff; z-index:2; }

/* Parent-owned placeholders appear before iframe navigation or customer lookup finishes. */
.order-callback-pane-loading { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:#fff; color:#86868b; font:13px/1.5 system-ui,sans-serif; }
.order-callback-pane-loading[hidden] { display:none; }
.order-callback-right[data-conversation="true"] [data-pane-loading="history"] { right:50%; }
.order-callback-right[data-conversation="true"] [data-pane-loading="sms"] { left:50%; border-left:1px solid #e8e8ed; }
.order-callback-spinner { width:22px; height:22px; border:2px solid #e8e8ed; border-top-color:#737378; border-radius:50%; animation:callback-refresh-spin .8s linear infinite; }
@media (prefers-reduced-motion:reduce) { .order-callback-spinner { animation:none; } }

/* Order SMS shortcuts show a single conversation, without a call-list rail. */
.has-callback-drawer[data-sms-only="true"] .order-callback-left { display: none; }
.has-callback-drawer[data-sms-only="true"] .order-callback-shell { grid-template-columns: minmax(0, 1fr); }
.has-callback-drawer[data-sms-only="true"] .order-callback-right { grid-column: 1; border-left: 0; }

/* Tabs and compact tools share one header row. Search temporarily covers the tabs. */
.order-callback-header { display:grid; grid-template-columns:30px minmax(0,1fr) auto; height:56px; padding:10px 7px; gap:5px; }
.order-callback-header [data-drawer-toggle] { width:30px; margin:0; }
.order-callback-header [data-drawer-toggle] svg { width:19.6px; height:19.6px; flex-shrink:0; }
.order-callback-tabs { gap:7px; overflow-x:auto; scrollbar-width:none; }
.order-callback-tabs::-webkit-scrollbar { display:none; }
.order-callback-header .order-callback-tabs [role="tab"] { font-size:12px; }
.order-callback-tools { position:static; gap:2px; min-width:0; }
.order-callback-tools button, .order-callback-tools [data-drawer-open-tab] { width:25px; }
.order-callback-search { flex:0 0 25px; width:25px; }
.order-callback-header.is-searching .order-callback-tools { position:absolute; left:42px; right:7px; }
.order-callback-header.is-searching .order-callback-search { flex:1; width:auto; }
.order-callback-audience { position: relative; max-width: 65px; flex:0 0 auto; pointer-events: auto; font: 12px/1.4 system-ui; }
.order-callback-audience summary { display: flex; align-items: center; gap: 1px; height: 30px; cursor: pointer; list-style: none; color: #515154; }
.order-callback-audience summary::-webkit-details-marker { display: none; }
.order-callback-audience summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-callback-audience summary svg { width: 14px; height: 14px; flex-shrink: 0; }
.order-callback-audience summary:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; border-radius: 5px; }
.order-callback-audience-options { position: absolute; top: 34px; right: 0; z-index: 10; width: 225px; padding: 8px; border: 1px solid #e8e8ed; border-radius: 14px; background: #fff; box-shadow: 0 8px 32px #0002; }
.order-callback-audience-options label { display: flex; align-items: center; gap: 8px; padding: 9px 5px; color: #1d1d1f; cursor: pointer; }
.order-callback-audience-options input { accent-color: #0071e3; }

/* Empty AI card: shortcuts into the existing staff conversation drawer. */
#ai-chat-panel > .ai-chat-drawer-shortcuts { display: none; }
@media (min-width: 1001px) {
  #ai-chat-panel.ai-chat-empty:not(.ai-chat-super-minimized) > .ai-chat-drawer-shortcuts:not([hidden]) { position: absolute; top: 12px; right: 12px; z-index: 6; display: flex; gap: 6px; }
  #ai-chat-panel.ai-chat-empty:has(> .ai-chat-drawer-shortcuts:not([hidden])) > .ai-chat-header { padding-right: 76px; }
  .ai-chat-drawer-shortcuts button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 5px; border: 0; border-radius: 10px; background: transparent; color: #515154; cursor: pointer; transition: color .15s ease, background .15s ease; }
  .ai-chat-drawer-shortcuts button:hover { background: #eef0f3; color: #1d1d1f; }
  .ai-chat-drawer-shortcuts button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
  .ai-chat-drawer-shortcuts svg { width: 23px; height: 23px; }
}