/**
 * Document composer shell — aligns with Contact Overview + New Deal modal:
 * soft slate canvas, white header, section labels, pill controls, clear CTAs.
 * Loaded after styles-gmail.css so these rules can refine .composer-modal.
 */

/* ── Modal frame (deal workspace / deal-modal family) ─────────────────── */
.backdrop.show > .modal.composer-modal,
.backdrop.show .modal.composer-modal {
  border-radius: 16px;
  border: 1px solid rgba(203, 213, 225, 0.95);
  box-shadow:
    0 28px 70px rgba(15, 23, 42, 0.18),
    0 12px 28px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  background: #f8fafc;
  overflow: hidden;
}

.modal.composer-modal.modal-fullscreen {
  border-radius: 0;
  border: none;
}

/* Header — sticky, white bar like deal-header */
.composer-modal .composer-header.modalHead,
.composer-modal#composerModal > .modalHead:first-child {
  flex-shrink: 0;
  padding: 12px 16px 12px 18px !important;
  min-height: 52px !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(203, 213, 225, 0.95) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
  cursor: grab;
  gap: 12px !important;
}

.composer-modal .composer-header.modalHead:active {
  cursor: grabbing;
}

/* Email composer — compact chrome (small trims stack to ~10px+ vertical) */
.composer-modal.composer-modal--email .composer-header.modalHead,
.composer-modal.composer-modal--email#composerModal > .modalHead:first-child {
  padding: 5px 16px 5px 18px !important;
  min-height: 38px !important;
}

.composer-modal.composer-modal--email .composer-header .btn#saveChangesBtn {
  padding: 4px 12px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

.composer-modal.composer-modal--email .composer-header .iconBtn {
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
}

.composer-modal.composer-modal--email .composer-toolbar-tabstrip {
  padding: 3px 12px 0 !important;
}

.composer-modal.composer-modal--email .composer-toolbar-tab {
  padding: 7px 12px !important;
  border-radius: 9px !important;
}

.composer-modal.composer-modal--email .composer-toolbar-panel {
  padding: 0 14px 4px !important;
}

.composer-modal.composer-modal--email .composer-toolbar-persistent {
  padding: 5px 14px 6px !important;
}

.composer-modal.composer-modal--email .composer-toolbar .btn.small {
  padding: 5px 11px !important;
  min-height: 30px !important;
}

.composer-modal .composer-header .modalTitle {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.composer-modal .composer-header .modalTitle .composer-header-contact-suffix,
.composer-modal .composer-header .modalTitle span {
  font-weight: 500 !important;
  color: #475569 !important;
}

/* Document mode: title field moved into header */
.composer-modal .composer-header-kicker {
  color: #0f172a !important;
}

.composer-modal.composer-modal--document .composer-header-actions {
  align-self: center !important;
}

.composer-modal.composer-modal--document #composerHeader #docSubject:focus {
  outline: 2px solid #93c5fd !important;
  outline-offset: 1px !important;
  border-color: #3b82f6 !important;
}

/*
 * Hard contrast for composer chrome: some themes set --text-primary very light, and
 * WebKit can apply -webkit-text-fill-color on inputs — both make the header/title nearly invisible.
 */
#composerModal #composerHeader {
  color: #0f172a !important;
}

#composerModal #composerHeader .modalTitle,
#composerModal #composerHeader .composer-header-kicker {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

#composerModal #composerHeader .modalTitle .composer-header-contact-suffix,
#composerModal #composerHeader .modalTitle span {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

#composerModal #composerHeader #docSubject {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #0f172a !important;
  background-color: #ffffff !important;
}

#composerModal #composerHeader #docSubject[readonly] {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

#composerModal #composerHeader #docSubject::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #64748b !important;
}

#composerModal .composer-main-column #docSubject {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #0f172a !important;
  background-color: #ffffff !important;
}

#composerModal .composer-main-column #docSubject[readonly] {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

#composerModal .composer-main-column #docSubject::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #64748b !important;
}

/* Primary save in header — document mode */
.composer-modal .composer-header .btn.primary#saveChangesBtn {
  font-weight: 700 !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
}

.composer-modal .composer-header .btn#saveChangesBtn:not(.primary) {
  border-radius: 10px !important;
  font-weight: 600 !important;
}

.composer-modal .composer-header .iconBtn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  border: 1px solid var(--border-light, #e2e8f0) !important;
  background: #f8fafc !important;
  color: #475569 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.composer-modal .composer-header .iconBtn:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* Merge preview banner — calmer “info” strip */
#mergeModeBanner {
  border-bottom: 1px solid #bfdbfe !important;
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  color: #1e40af !important;
}

/* ── Toolbar: segmented tabs + single visible button row ─────────────── */
/* Mobile: height/collapse is controlled in styles-gmail.css (+ mobile block below).
   Do NOT set max-height globally — it broke the ≤767px collapsed drawer. */
.composer-modal .composer-toolbar {
  padding: 0 !important;
  gap: 2px !important;
  background: #f1f5f9 !important;
  border-bottom: 1px solid rgba(203, 213, 225, 0.9) !important;
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}

@media (min-width: 768px) {
  .composer-modal .composer-toolbar {
    max-height: min(220px, 38vh) !important;
    overflow-y: auto !important;
  }
}

.composer-modal .composer-toolbar-tabstrip {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 4px 12px 0 !important;
  background: #cbd5e1 !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.85) !important;
  flex-shrink: 0 !important;
}

.composer-modal .composer-toolbar-tablist {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.composer-modal .composer-toolbar-tab {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: #475569 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
  line-height: 1.25 !important;
}

.composer-modal .composer-toolbar-tab:hover {
  color: #0f172a !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #94a3b8 !important;
}

.composer-modal .composer-toolbar-tab:focus-visible {
  outline: 2px solid #3b82f6 !important;
  outline-offset: 2px !important;
  z-index: 1 !important;
}

.composer-modal .composer-toolbar-tab[aria-selected="true"] {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #3b82f6 !important;
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.35),
    0 2px 10px rgba(15, 23, 42, 0.1) !important;
}

.composer-modal .composer-toolbar-tab[aria-selected="false"] {
  border-style: solid !important;
  /* Slightly dimmer than active so both states feel intentional */
  background: rgba(255, 255, 255, 0.58) !important;
  border-color: rgba(15, 23, 42, 0.2) !important;
  color: #64748b !important;
}

.composer-modal .composer-toolbar-tab[aria-selected="false"]:hover {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: #94a3b8 !important;
  color: #334155 !important;
}

.composer-toolbar-tab-label--short {
  display: none !important;
}

@media (max-width: 560px) {
  .composer-modal .composer-toolbar-tab-label--long {
    display: none !important;
  }
  .composer-modal .composer-toolbar-tab-label--short {
    display: inline !important;
  }
}

.composer-modal .composer-toolbar-panel {
  padding: 0 14px 6px !important;
  background: #ffffff !important;
  flex-shrink: 0 !important;
}

.composer-modal .composer-toolbar-panel--data {
  background: linear-gradient(180deg, #fafbff 0%, #f8fafc 100%) !important;
}

/* Tab panels: column on phone (stack + zoom row); row on desktop */
.composer-modal .composer-toolbar-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

@media (min-width: 768px) {
  .composer-modal .composer-toolbar-body {
    flex-direction: row !important;
  }
}

.composer-modal .composer-toolbar-panel-stack {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.composer-modal .composer-toolbar-persistent {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px 8px !important;
  border-left: none !important;
  border-top: 1px solid rgba(203, 213, 225, 0.95) !important;
  background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%) !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  box-sizing: border-box !important;
}

@media (min-width: 768px) {
  .composer-modal .composer-toolbar-persistent {
    flex-wrap: nowrap !important;
    border-left: 1px solid rgba(203, 213, 225, 0.95) !important;
    border-top: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
  }
}

/* Tool rows: wrap on phone; desktop keeps one scrollable row */
.composer-modal .composer-toolbar-mainrow,
.composer-modal .composer-toolbar-merge-row {
  flex-wrap: wrap !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  padding: 0 !important;
  gap: 8px !important;
  align-items: center !important;
}

@media (min-width: 768px) {
  .composer-modal .composer-toolbar-mainrow,
  .composer-modal .composer-toolbar-merge-row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    padding-bottom: 0 !important;
  }
}

.composer-modal .composer-toolbar-left,
.composer-modal .composer-toolbar-right {
  gap: 6px !important;
}

/* Toolbar buttons — pill, touch-friendly */
.composer-modal .composer-toolbar .btn.small {
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  min-height: 32px !important;
  border: 1px solid var(--border-light, #e2e8f0) !important;
  background: #ffffff !important;
  color: #334155 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease !important;
}

.composer-modal .composer-toolbar .btn.small:hover:not(:disabled) {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
}

.composer-modal .composer-toolbar .btn.small:active:not(:disabled) {
  transform: translateY(0.5px);
}

.composer-modal .composer-toolbar .btn.primary.small {
  background: linear-gradient(135deg, var(--primary-500, #3b82f6), var(--primary-600, #2563eb)) !important;
  border-color: var(--primary-600, #2563eb) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.3) !important;
}

.composer-modal .composer-toolbar .btn.primary.small:hover:not(:disabled) {
  filter: brightness(1.03);
}

/* AI draft — keep gradient but soften edge */
.composer-modal .composer-toolbar #composerAiDraftBtn {
  border: none !important;
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.35) !important;
}

/* Deal selector — match deal-modal inputs */
.composer-modal .composer-toolbar #dealSelector {
  padding: 7px 10px !important;
  border-radius: 10px !important;
  border: 1px solid var(--border-light, #e2e8f0) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  background: #fff !important;
  max-width: min(280px, 42vw);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Zoom control */
.composer-modal .composer-toolbar label[for="documentZoomSelect"] {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}

.composer-modal .composer-toolbar #documentZoomSelect {
  border-radius: 10px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1px solid #e2e8f0 !important;
}

/* Track changes / comments — readable on white */
.composer-modal .composer-track-toggle {
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  border-radius: 12px !important;
  padding: 6px 10px !important;
}

.composer-modal .composer-track-toggle:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

/* Toolbar separators — subtler */
.composer-modal .composer-toolbar span[aria-hidden="true"] {
  background: rgba(148, 163, 184, 0.45) !important;
  align-self: stretch;
  min-height: 22px;
  margin: 0 4px !important;
}

/* Dropdown panels in toolbar */
.composer-modal .composer-toolbar-dropdown-panel {
  border-radius: 14px !important;
  border: 1px solid rgba(226, 232, 240, 0.98) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

.composer-modal .composer-toolbar-trigger {
  border-radius: 10px !important;
  font-weight: 600 !important;
}

/* Main column — matches deal workspace body */
.composer-modal .composer-main-column {
  background: #f8fafc;
  min-height: 0;
}

.composer-modal .composer-main-column #emailHeaderSection {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95) !important;
  padding: 8px 16px 10px !important;
}

.composer-modal .composer-main-column #emailHeaderSection .email-picker-btn {
  border-radius: 8px !important;
  font-weight: 600 !important;
}

/* Email header: To / Subject / CC / BCC — same type scale and chrome (IDs beat .modal input mobile radius) */
.composer-modal .composer-main-column #emailTo,
.composer-modal .composer-main-column #emailCC,
.composer-modal .composer-main-column #emailBCC,
.composer-modal .composer-main-column #docSubject {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  padding: 4px 10px !important;
  box-sizing: border-box !important;
}

.composer-modal .composer-main-column #emailTo::placeholder,
.composer-modal .composer-main-column #emailCC::placeholder,
.composer-modal .composer-main-column #emailBCC::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #64748b !important;
}

.composer-modal .composer-main-column #emailTo:focus-visible,
.composer-modal .composer-main-column #emailCC:focus-visible,
.composer-modal .composer-main-column #emailBCC:focus-visible,
.composer-modal .composer-main-column #docSubject:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-color: #93c5fd !important;
}

/* Quill chrome inside composer */
.composer-modal .ql-toolbar.ql-snow {
  border-color: #e2e8f0 !important;
  background: #fff !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 8px 10px !important;
}

.composer-modal .ql-container.ql-snow {
  border-color: #e2e8f0 !important;
  border-radius: 0 0 12px 12px !important;
  background: #fff !important;
}

/* Mobile slim bar */
#composerMobileBar {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-bottom: 1px solid rgba(203, 213, 225, 0.95) !important;
  padding: 8px 12px !important;
  gap: 8px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

#composerMobileBar .btn.small {
  border-radius: 10px !important;
  font-weight: 600 !important;
}

#composerMobileSave.btn.primary {
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.28) !important;
}

/* Insert / template drawers — header strip like deal modal */
#insertBlockDrawer > div:first-child,
#templateDataDrawer > div:first-child {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95) !important;
}

#insertBlockDrawerTitle,
#sideDrawerHeaderTitle {
  letter-spacing: -0.02em !important;
}

/* Avoid scroll anchoring leaving the right panel blank after switching rail categories */
#insertBlockDrawerBody {
  overflow-anchor: none !important;
  min-height: 0 !important;
}

/* Momentum theme: match contact detail card radius language */
body[data-theme="momentum"] .backdrop.show .modal.composer-modal {
  box-shadow:
    0 24px 56px rgba(15, 23, 42, 0.16),
    0 8px 20px rgba(15, 23, 42, 0.06) !important;
}

/* Sales doc mode: make insert blocks + document setup easy to spot */
.composer-modal--document .composer-toolbar #openInsertBlockDrawerBtn {
  border-color: #93c5fd !important;
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%) !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12) !important;
}

.composer-modal--document .composer-toolbar #openInsertBlockDrawerBtn:hover:not(:disabled) {
  border-color: #60a5fa !important;
  background: linear-gradient(180deg, #dbeafe 0%, #f8fafc 100%) !important;
}

.composer-modal--document .composer-toolbar #openInsertDocumentDrawerBtn {
  border-color: #cbd5e1 !important;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
  color: #334155 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06) !important;
}

.composer-modal--document .composer-toolbar #openInsertDocumentDrawerBtn:hover:not(:disabled) {
  border-color: #94a3b8 !important;
  background: linear-gradient(180deg, #f1f5f9 0%, #ffffff 100%) !important;
  color: #1e293b !important;
}

/* Client preview — secondary CTA emphasis in document mode */
.composer-modal--document .composer-toolbar #previewAsClientBtn {
  border-color: #c4b5fd !important;
  background: linear-gradient(180deg, #f5f3ff 0%, #ffffff 100%) !important;
  color: #5b21b6 !important;
  font-weight: 700 !important;
}

.composer-modal--document .composer-toolbar #previewAsClientBtn:hover:not(:disabled) {
  border-color: #a78bfa !important;
  background: #ede9fe !important;
}

/* ── VIP: quick start strip + shortcuts overlay ───────────────────────── */
.composer-quick-start {
  flex-shrink: 0;
  padding: 10px 16px 12px;
  border-bottom: 1px solid rgba(203, 213, 225, 0.95);
  background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
}

.composer-quick-start--email {
  background: linear-gradient(180deg, #eff6ff 0%, #e0f2fe 100%);
  border-bottom-color: rgba(191, 219, 254, 0.95);
}

.composer-quick-start--email .composer-quick-start-title {
  color: #1e3a8a;
}

.composer-quick-start--email .composer-quick-start-sub {
  color: #1d4ed8;
}

.composer-quick-start-sub strong {
  font-weight: 800;
  color: inherit;
}

.composer-quick-start-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.composer-quick-start-text {
  flex: 1;
  min-width: 200px;
}

.composer-quick-start-title {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #14532d;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.composer-quick-start-sub {
  font-size: 12px;
  line-height: 1.45;
  color: #166534;
  font-weight: 500;
}

.composer-quick-start-kbd,
.composer-kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 1px;
  font-size: 10px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(203, 213, 225, 0.95);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
  vertical-align: baseline;
}

.composer-quick-start-dismiss.btn.small {
  flex-shrink: 0;
  border-radius: 10px;
  font-weight: 700;
}

.composer-header .composer-shortcuts-trigger {
  font-weight: 800 !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

.composer-shortcuts-overlay {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(5px);
}

.composer-shortcuts-overlay.composer-shortcuts-overlay--open {
  display: flex;
}

.composer-shortcuts-dialog {
  width: min(420px, 100%);
  max-height: min(72vh, 520px);
  overflow: auto;
  padding: 18px 20px 16px;
  border-radius: 16px;
  border: 1px solid rgba(203, 213, 225, 0.95);
  background: #ffffff;
  box-shadow:
    0 28px 70px rgba(15, 23, 42, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.composer-shortcuts-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.composer-shortcuts-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
}

.composer-shortcuts-dialog .composer-shortcuts-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
}

.composer-shortcuts-lede {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.composer-shortcuts-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.composer-shortcuts-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  color: #334155;
}

.composer-shortcuts-list li:last-child {
  border-bottom: none;
}

.composer-shortcuts-list li span:last-child {
  font-weight: 600;
  color: #0f172a;
  text-align: right;
}

.composer-shortcuts-walkthrough {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary, #64748b);
}

.composer-shortcuts-walkthrough a {
  color: var(--accent, #2563eb);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.composer-shortcuts-walkthrough-hint {
  font-weight: 500;
  color: var(--text-secondary, #94a3b8);
}

.composer-shortcuts-guided {
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
}

/* ── Guided tour (document composer) ─────────────────────────────────── */
.composer-guided-tour-root {
  position: fixed;
  inset: 0;
  z-index: 100070;
  pointer-events: none;
}

/* Full-screen dim (welcome / fallback steps) — no blur so UI stays sharp */
.composer-guided-tour-fullshade {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: auto;
  background: rgba(15, 23, 42, 0.38);
}

/* Four panels around the cut-out; hole stays crystal-clear (no overlay on target) */
.composer-guided-tour-dim {
  position: fixed;
  z-index: 1;
  pointer-events: auto;
  background: rgba(15, 23, 42, 0.38);
  transition: opacity 0.12s ease;
}

.composer-guided-tour-ring {
  position: fixed;
  z-index: 2;
  pointer-events: none;
  box-sizing: border-box;
  border: 3px solid #2563eb;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.65),
    0 0 0 6px rgba(37, 99, 235, 0.18);
  transition: left 0.14s ease, top 0.14s ease, width 0.14s ease, height 0.14s ease;
}

.composer-guided-tour-card {
  position: fixed;
  z-index: 4;
  pointer-events: auto;
  width: min(380px, calc(100vw - 32px));
  padding: 16px 18px 14px;
  border-radius: 14px;
  border: 1px solid rgba(203, 213, 225, 0.95);
  background: #ffffff;
  box-shadow:
    0 22px 50px rgba(15, 23, 42, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.composer-guided-tour-card--center {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
}

.composer-guided-tour-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.composer-guided-tour-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.25;
}

.composer-guided-tour-card-step {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f5f9;
}

.composer-guided-tour-card-body {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #334155;
}

.composer-guided-tour-extra {
  display: none;
}

.composer-guided-tour-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.composer-guided-tour-nav {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* Guided tour: pulse on the Text only tile while the picker is open */
.insert-block-tile.insert-block-tile--tour-pulse {
  position: relative;
  outline: 2px solid rgba(59, 130, 246, 0.95);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
  animation: composer-tour-tile-pulse 1.1s ease-in-out infinite;
}

@keyframes composer-tour-tile-pulse {
  0%,
  100% {
    outline-color: rgba(59, 130, 246, 0.55);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }
  50% {
    outline-color: rgba(37, 99, 235, 1);
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.22);
  }
}

.composer-shortcuts-foot {
  margin: 14px 0 0;
  font-size: 11px;
  color: #94a3b8;
}

.composer-shortcuts-trust {
  margin: 10px 0 0;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  font-size: 11px;
  line-height: 1.45;
  color: #64748b;
}

.composer-shortcuts-trust strong {
  color: #334155;
  font-weight: 700;
}

/* Editor placeholder — Quill uses .ql-editor.ql-blank::before */
.composer-modal .ql-editor.ql-blank::before {
  color: #94a3b8 !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHONE (≤767px) — document + email composer
   Shell loads after styles-gmail; these rules refine header, Quill, and edge layout.
   Desktop/tablet ≥768px is unchanged.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /*
   * iPhone safe-area: styles-gmail.css adds padding-top: env(safe-area-inset-top) on the
   * fullscreen modal shell. The header also used env(safe-area-inset-top) — stacking both
   * created a large empty white band above the title / guidance row (especially in mobile Safari).
   * Keep horizontal + bottom insets on the modal; apply top inset once on the header only.
   */
  .backdrop.show > .modal.composer-modal#composerModal {
    padding-top: 0 !important;
  }

  /* Use full viewport; inline 98vw/96vh from JS loses to !important */
  .backdrop.show .modal.composer-modal#composerModal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    resize: none !important;
    box-sizing: border-box !important;
  }

  .composer-modal .composer-header.modalHead,
  .composer-modal#composerModal > .modalHead:first-child {
    padding: max(6px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) 8px
      max(10px, env(safe-area-inset-left, 0px)) !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    row-gap: 6px !important;
    min-height: 0 !important;
  }

  .composer-modal.composer-modal--email .composer-header.modalHead,
  .composer-modal.composer-modal--email#composerModal > .modalHead:first-child {
    padding: max(2px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) 4px
      max(10px, env(safe-area-inset-left, 0px)) !important;
    row-gap: 4px !important;
  }

  .composer-modal .composer-header-doc-block {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .composer-modal .composer-header-actions {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }

  .composer-modal .composer-header .iconBtn {
    flex-shrink: 0 !important;
  }

  /*
   * Document composer header: one row — title field + Save / Save As / ? / X (iPhone).
   * Default mobile rules stack the doc block and actions; hide the kicker to reclaim height/width.
   */
  .composer-modal.composer-modal--document .composer-header.modalHead,
  .composer-modal.composer-modal--document#composerModal > .modalHead:first-child {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    row-gap: 0 !important;
    padding-bottom: 6px !important;
  }

  .composer-modal.composer-modal--document .composer-header .composer-header-kicker {
    display: none !important;
  }

  .composer-modal.composer-modal--document .composer-header-doc-block {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    gap: 0 !important;
  }

  .composer-modal.composer-modal--document #composerHeader #docSubject {
    min-width: 0 !important;
    padding: 6px 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
  }

  /* Email / tracked headers: override inline 13px — iOS input zoom */
  #composerModal #emailTo,
  #composerModal #emailCC,
  #composerModal #emailBCC,
  #composerModal #emailSubject,
  #composerModal #emailPickerSearch {
    font-size: 16px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  .composer-modal.composer-modal--document .composer-header-actions {
    width: auto !important;
    max-width: none !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    gap: 4px !important;
  }

  .composer-modal.composer-modal--document .composer-header-actions .btn {
    padding: 4px 7px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 7px !important;
    min-height: 28px !important;
    line-height: 1.15 !important;
  }

  .composer-modal.composer-modal--document .composer-header-actions .btn.primary#saveChangesBtn {
    padding: 4px 8px !important;
    font-size: 10px !important;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.22) !important;
  }

  .composer-modal.composer-modal--document .composer-header-actions .composer-toolbar-trigger {
    padding: 4px 5px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    min-height: 28px !important;
    border-radius: 7px !important;
    letter-spacing: -0.02em !important;
  }

  .composer-modal.composer-modal--document .composer-header .iconBtn,
  .composer-modal.composer-modal--document .composer-header #composerClose {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
  }

  #composerGuidanceRow {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 4px 10px 5px !important;
    gap: 4px 8px !important;
  }

  /*
   * Inline styles use justify-content: space-between and the chip uses flex: 1 1 auto.
   * In a column layout, space-between + flex-grow on the chip can blow open vertical gap
   * between “Data for” and the stepper on phones (iOS Safari).
   */
  #composerMergeContextChip {
    flex: 0 1 auto !important;
    align-self: flex-start !important;
  }

  #composerFlowChecklist {
    align-self: flex-start !important;
  }

  #composerMergeContextChip,
  #composerFlowChecklist {
    font-size: 11px !important;
  }

  #composerModal #emailHeaderSection > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    grid-template-columns: none !important;
  }

  #composerModal .composer-email-subject-row {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: center !important;
  }

  #composerModal #emailHeaderSection label:first-of-type {
    margin-bottom: -4px;
  }

  /* Slim bar: allow second row when narrow; tight vertical padding under guidance row */
  #composerMobileBar {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
    padding: 5px max(10px, env(safe-area-inset-right, 0px)) 5px max(10px, env(safe-area-inset-left, 0px)) !important;
  }

  /* Quill: multi-row toolbar when not using the 2-row phone layout */
  .composer-modal .ql-toolbar.ql-snow {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 4px !important;
    padding: 6px 4px !important;
  }

  /*
   * Document composer phone layout (document-composer.js): two stripes only.
   * Row1 = font + size + header (horizontal scroll, single line). Row2 = everything else (scroll).
   */
  .composer-modal #quillEditor .ql-toolbar.ql-snow.ql-toolbar--mobile-two-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px !important;
    flex-wrap: nowrap !important;
    padding: 4px max(4px, env(safe-area-inset-right, 0px)) 5px max(4px, env(safe-area-inset-left, 0px)) !important;
  }

  .composer-modal #quillEditor .ql-toolbar.ql-snow.ql-toolbar--mobile-two-row .ql-toolbar-mobile-row1,
  .composer-modal #quillEditor .ql-toolbar.ql-snow.ql-toolbar--mobile-two-row .ql-toolbar-mobile-row2 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 3px !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    padding: 1px 0 !important;
    margin: 0 !important;
    scrollbar-width: thin !important;
  }

  .composer-modal #quillEditor .ql-toolbar.ql-snow.ql-toolbar--mobile-two-row .ql-toolbar-mobile-row1 .ql-formats,
  .composer-modal #quillEditor .ql-toolbar.ql-snow.ql-toolbar--mobile-two-row .ql-toolbar-mobile-row2 .ql-formats {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Compact pickers + icons so two stripes fit iPhone width without multi-line wraps */
  .composer-modal #quillEditor .ql-toolbar.ql-snow.ql-toolbar--mobile-two-row .ql-picker {
    height: 28px !important;
  }

  .composer-modal #quillEditor .ql-toolbar.ql-snow.ql-toolbar--mobile-two-row .ql-picker-label {
    min-width: 0 !important;
    max-width: min(32vw, 118px) !important;
    height: 28px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .composer-modal #quillEditor .ql-toolbar.ql-snow.ql-toolbar--mobile-two-row .ql-picker-label::before {
    line-height: 26px !important;
  }

  .composer-modal #quillEditor .ql-toolbar.ql-snow.ql-toolbar--mobile-two-row button:not(.ql-picker-label) {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    margin: 0 1px !important;
    padding: 0 !important;
  }

  .composer-modal #quillEditor .ql-toolbar.ql-snow.ql-toolbar--mobile-two-row svg {
    width: 15px !important;
    height: 15px !important;
  }

  .composer-modal .ql-snow .ql-formats {
    margin-right: 4px !important;
    margin-bottom: 2px !important;
  }

  .composer-modal .composer-main-column {
    min-height: 0 !important;
  }

  .composer-modal .ql-container.ql-snow {
    min-height: 180px !important;
  }

  .composer-modal .ql-editor {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  /* Tools drawer expanded: edge insets + spacing so rows don’t hug the screen rim */
  .composer-modal.composer--tools-open .composer-toolbar-tabstrip {
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
  }

  .composer-modal.composer--tools-open .composer-toolbar-panel,
  .composer-modal.composer--tools-open .composer-toolbar-persistent {
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }

  .composer-modal .composer-toolbar-mainrow,
  .composer-modal .composer-toolbar-merge-row {
    row-gap: 8px !important;
  }

  /*
   * Standalone email composer (email-composer-ui.js): inline styles used 24px header padding.
   * Safe area + compact layout for iPhone portrait.
   */
  #emailComposerContent.modal.email-composer-modal {
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: 100vw !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  #emailComposerHeader {
    padding: max(10px, env(safe-area-inset-top, 0px)) 14px 12px !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    row-gap: 10px !important;
  }

  #emailComposerHeader h2 {
    font-size: clamp(1.1rem, 4.5vw, 1.35rem) !important;
  }

  #emailComposerHeader > div:last-child {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .email-composer-modal input[type="text"],
  .email-composer-modal input[type="email"],
  .email-composer-modal textarea,
  .email-composer-modal select,
  #emailComposerContent input[type="text"],
  #emailComposerContent input[type="email"],
  #emailComposerContent textarea,
  #emailComposerContent select {
    font-size: 16px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
  #emailComposerContent textarea {
    min-height: 120px !important;
    height: auto !important;
  }
}

/* ── AI document drawer (proposals / sales docs / contracts) ───────────── */
.ai-doc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100060;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  box-sizing: border-box;
}

.ai-doc-drawer {
  width: min(440px, 100%);
  max-height: 100%;
  background: #fff;
  border-radius: 16px 0 0 16px;
  box-shadow: -12px 0 40px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid #e2e8f0;
}

@media (max-width: 520px) {
  .ai-doc-backdrop {
    padding: 0;
    align-items: flex-end;
  }
  .ai-doc-drawer {
    width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: min(92dvh, 100%);
  }
}

.ai-doc-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.ai-doc-drawer-title {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.ai-doc-drawer-sub {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
  line-height: 1.4;
}

.ai-doc-icon-btn {
  border: none;
  background: #f1f5f9;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: #475569;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.ai-doc-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px 18px;
  min-height: 0;
}

.ai-doc-drawer-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0;
  background: #f8fafc;
}

.ai-doc-hidden {
  display: none !important;
}

.ai-doc-section-title {
  font-size: 13px;
  font-weight: 800;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.ai-doc-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 400px) {
  .ai-doc-type-grid {
    grid-template-columns: 1fr;
  }
}

.ai-doc-type-card {
  text-align: left;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ai-doc-type-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12);
}

.ai-doc-type-card--active {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.ai-doc-type-card-label {
  font-weight: 800;
  font-size: 14px;
  color: #0f172a;
}

.ai-doc-type-card-desc {
  font-size: 11px;
  color: #64748b;
  margin-top: 6px;
  line-height: 1.45;
}

.ai-doc-muted {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}

.ai-doc-mini-title {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 8px;
}

.ai-doc-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 520px) {
  .ai-doc-columns {
    grid-template-columns: 1fr;
  }
}

.ai-doc-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  color: #334155;
  line-height: 1.45;
}

.ai-doc-legal-banner {
  background: #fef9c3;
  border: 1px solid #fde047;
  color: #713f12;
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 14px;
}

.ai-doc-intake-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-doc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-doc-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ai-doc-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  color: #0f172a;
}

.ai-doc-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-doc-chip {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  max-width: 100%;
}

.ai-doc-chip:hover {
  border-color: #c7d2fe;
  background: #eef2ff;
}

.ai-doc-error {
  margin-top: 10px;
  padding: 10px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #b91c1c;
  font-size: 12px;
}

.ai-doc-success {
  font-size: 13px;
  color: #14532d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 10px 12px;
  line-height: 1.45;
}

.ai-doc-refine-box {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
}

/* ── Company info block (document composer + embedded preview) ───────── */
.td-block-company-info-wrap .td-block-company-info {
  max-width: 100%;
}

.td-block-company-info {
  --td-ci-muted: #64748b;
  font-size: 13px;
  line-height: 1.45;
  color: #0f172a;
}

.td-block-company-info__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px 18px;
  align-items: start;
}

@media (max-width: 560px) {
  .td-block-company-info__grid {
    grid-template-columns: 1fr;
  }
}

.td-block-company-info__logo {
  flex-shrink: 0;
}

.td-block-company-info__logo-img {
  display: block;
  max-height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  object-position: left top;
}

.td-block-company-info__logo-fallback {
  width: 44px;
  height: 36px;
  border-radius: 8px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
}

.td-block-company-info__name {
  font-weight: 600;
  font-size: 15px;
  color: #0f172a;
  margin: 0 0 6px;
}

.td-block-company-info__address {
  margin-bottom: 6px;
}

.td-block-company-info__addr-line {
  margin: 0;
  white-space: pre-wrap;
}

.td-block-company-info__placeholder {
  color: var(--td-ci-muted);
  font-style: italic;
}

.td-block-company-info__muted {
  font-size: 12px;
  color: var(--td-ci-muted);
  margin-top: 4px;
}

.td-block-company-info__webmail {
  margin-top: 2px;
}

.td-block-company-info__link {
  color: #2563eb;
  text-decoration: none;
}

.td-block-company-info__link:hover {
  text-decoration: underline;
}

.td-block-company-info__hint {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  font-size: 12px;
  color: var(--td-ci-muted);
}

.td-block-company-info--chip-preview .td-block-company-info__hint {
  display: none;
}