/* Loaded after styles.css so drawer sizing cannot be overridden by legacy blocks.
   The drawer is global now, so it must be sized from the app phone frame, not the raw viewport. */
.global-drawer-shell {
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  right: auto !important;
  width: min(100vw, 430px) !important;
  transform: translateX(-50%) !important;
}

.global-drawer-shell .customer-chat-drawer {
  width: min(70%, 286px) !important;
  max-width: 320px !important;
  min-width: 280px !important;
  padding: calc(14px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom)) !important;
  border-radius: 0 14px 14px 0 !important;
}

.global-drawer-shell .drawer-profile {
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  gap: 8px !important;
  padding-bottom: 12px !important;
}

.global-drawer-shell .drawer-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
}

.global-drawer-shell .drawer-profile strong {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.global-drawer-shell .drawer-profile span {
  font-size: 10.5px !important;
  line-height: 1.2 !important;
}

.global-drawer-shell .drawer-profile button {
  height: 28px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  line-height: 28px !important;
}

.global-drawer-shell .drawer-main-links {
  gap: 7px !important;
  margin-top: 13px !important;
}

.global-drawer-shell .drawer-search-zone {
  margin: 4px 0 6px !important;
}

.global-drawer-shell .drawer-search-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 8px !important;
}

.global-drawer-shell .drawer-search-row input {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid rgba(211, 223, 216, 0.95) !important;
  border-radius: 10px !important;
  background: #f8faf6 !important;
  color: #141914 !important;
  font-size: 14px !important;
  line-height: 38px !important;
  outline: none !important;
}

.global-drawer-shell .drawer-search-row input::placeholder {
  color: #6f7872 !important;
}

.global-drawer-shell .drawer-search-row input:focus {
  border-color: rgba(141, 205, 86, 0.9) !important;
}

.global-drawer-shell .drawer-search-row button {
  min-height: 38px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(211, 223, 216, 0.95) !important;
  background: #111513 !important;
  color: #d8fb64 !important;
  font-size: 13px !important;
  font-weight: 760 !important;
}

.global-drawer-shell .drawer-search-results {
  box-sizing: border-box !important;
  margin-top: 8px !important;
  max-height: min(52vh, 420px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.global-drawer-shell .drawer-search-results::-webkit-scrollbar {
  display: none !important;
}

.global-drawer-shell .drawer-main-links button,
.global-drawer-shell .drawer-new-task {
  min-height: 38px !important;
  padding: 0 28px 0 12px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  font-weight: 740 !important;
}

.global-drawer-shell .drawer-main-links button::after {
  right: 12px !important;
  font-size: 17px !important;
}

.global-drawer-shell .drawer-task-zone {
  margin-top: 14px !important;
  padding-top: 12px !important;
}

.global-drawer-shell .drawer-task-title,
.global-drawer-shell .drawer-task-list {
  display: none !important;
}

/* The drawer trigger is a floating control; it must not reserve bottom layout space. */
.global-drawer-fab {
  position: fixed !important;
  left: max(14px, calc((100vw - 430px) / 2 + 14px)) !important;
  bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  z-index: 118 !important;
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.global-drawer-fab[hidden],
body.show-login-home .global-drawer-fab,
body.is-customer-chat-page .global-drawer-fab {
  display: none !important;
}

.app-bottom-nav,
.brain-tabs.app-bottom-nav,
.pending-tabs.app-bottom-nav {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.brain-home .brain-phone,
.customer-form-home .customer-form-phone,
.customer-detail-home .customer-detail-phone,
.video-home .video-phone {
  padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
}


/* Chat input should grow upward and show all typed text instead of capping at two lines. */
.customer-chat-home .customer-dialog-input {
  align-items: end !important;
}

.customer-chat-home .customer-dialog-input textarea#customerChatInput {
  height: auto !important;
  min-height: 40px !important;
  max-height: none !important;
  overflow-y: hidden !important;
  resize: none !important;
  align-self: end !important;
}

/* ── Chat input v3: flex layout, mic absolute in textarea ── */
.customer-chat-home .customer-dialog-input {
  display: flex !important;
  align-items: flex-end !important;
  gap: 6px !important;
  min-height: 52px !important;
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(216, 227, 216, 0.9) !important;
  background: rgba(247, 250, 244, 0.98) !important;
}
.customer-chat-home .customer-dialog-input .chat-inline-back-button {
  flex: 0 0 34px !important;
  height: 34px !important;
  border: 1px solid #d8e5d9 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  display: grid !important;
  place-items: center !important;
}
.customer-chat-home .customer-dialog-input textarea#customerChatInput {
  flex: 1 !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 7px 10px 7px 10px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  white-space: pre-wrap !important;
  overflow-wrap: break-word !important;
  overflow-y: auto !important;
  resize: none !important;
  border: 1px solid #dde8dc !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}
.customer-chat-home .customer-dialog-input .chat-voice-button {
  flex: 0 0 30px !important;
  height: 30px !important;
  width: 30px !important;
  margin: 0 0 0 0 !important;
  border: 1px solid #d8e5d9 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  z-index: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.customer-chat-home .customer-dialog-input .chat-voice-button svg {
  width: 15px !important;
  height: 15px !important;
}
.customer-chat-home .customer-dialog-input .chat-voice-button.is-recording {
  background: rgba(216, 251, 102, 0.3) !important;
  animation: chat-recording-pulse 1.2s ease-in-out infinite !important;
}
@keyframes chat-recording-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 30, 30, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(196, 30, 30, 0); }
}
.customer-chat-home .customer-dialog-input .chat-voice-button.is-recording svg {
  color: #c41e1e !important;
}
.customer-chat-home .customer-dialog-input .chat-voice-button.is-recording .customer-chat-record-label {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #c41e1e !important;
}
.customer-chat-home .customer-dialog-input #customerChatSendButton {
  flex: 0 0 42px !important;
  height: 34px !important;
  border: 1px solid #d8e5d9 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  padding: 0 !important;
}
.customer-chat-home .customer-dialog-input #customerChatSendButton.is-send {
  width: 54px !important;
  border-color: #111711 !important;
  background: #111711 !important;
  color: #ffffff !important;
}

/* ── Remove chat bubble sender labels (我/签/开), distinguish by color only ── */
.customer-chat-home .chat-avatar {
  display: none !important;
}

/* ── Full-width chat bubbles with minimal bleed ── */
.customer-chat-home .chat-bubble {
  max-width: 92% !important;
}
.customer-chat-home .chat-thread {
  padding: 12px 8px 10px !important;
}

/* ── Drawer boss zone (enterprise management) ── */
.drawer-boss-zone {
  padding: 8px 12px !important;
  border-top: 1px solid rgba(0,0,0,.04) !important;
  margin-top: 4px !important;
}
.drawer-boss-zone .drawer-boss-head {
  font-size: 11px !important;
  color: #8a9a7a !important;
  font-weight: 700 !important;
  padding: 4px 0 6px !important;
  letter-spacing: .5px !important;
}
.drawer-boss-zone button {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 8px 10px !important;
  border: 0 !important;
  background: transparent !important;
  color: #2c2416 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  transition: background .15s !important;
}
.drawer-boss-zone button:active {
  background: rgba(0,0,0,.04) !important;
}

/* ── Drawer: fixed height, internal scroll for customer list ── */
.customer-chat-drawer-shell .customer-chat-drawer {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}
.customer-chat-drawer-shell .drawer-customer-zone {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin-top: 4px !important;
  padding-bottom: 4px !important;
}
.customer-chat-drawer-shell .drawer-customer-list-wrap {
  flex: 1 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ── Drawer action row (训练 + 客户追踪 + 新增客户) ── */
.drawer-action-row {
  display: flex !important;
  gap: 4px !important;
  padding: 6px 12px 4px !important;
  width: auto !important;
}
.drawer-action-row button {
  flex: 1 1 0px !important;
  min-width: 0 !important;
  width: 0 !important;
  padding: 7px 2px !important;
  border: 1px solid #dde8dc !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #2c2416 !important;
  font-size: 12px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  transition: background .15s !important;
  white-space: nowrap !important;
}
.drawer-action-row button:active {
  background: #f0f5ef !important;
}
.drawer-action-row .drawer-new-task-inline {
  /* Same style as other action buttons */
}

/* ── New customer button ── */
.drawer-new-task {
  display: block !important;
  width: calc(100% - 24px) !important;
  margin: 2px 12px 4px !important;
  padding: 9px 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #111711 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  letter-spacing: .5px !important;
}
.drawer-new-task:active {
  opacity: .85 !important;
}

/* ── Customer list zone ── */
.drawer-section-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  padding: 4px 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: #5a6a5a !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.drawer-section-toggle span:last-child {
  margin-left: auto !important;
  font-size: 10px !important;
  transition: transform .2s !important;
}
.drawer-section-toggle.is-open span:last-child {
  transform: rotate(180deg) !important;
}

/* ── Drawer boss zone ── */
.drawer-boss-zone {
  border-top: 1px solid rgba(0,0,0,.04) !important;
}
.drawer-boss-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  padding: 7px 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: #5a6a5a !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.drawer-boss-toggle span:last-child {
  margin-left: auto !important;
  font-size: 10px !important;
  transition: transform .2s !important;
}
.drawer-boss-toggle.is-open span:last-child {
  transform: rotate(180deg) !important;
}
.drawer-boss-body {
  padding: 2px 12px 8px !important;
}
.drawer-boss-body button {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 7px 10px !important;
  border: 0 !important;
  background: transparent !important;
  color: #2c2416 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  transition: background .15s !important;
}
.drawer-boss-body button:active {
  background: rgba(0,0,0,.04) !important;
}

/* ── Enterprise Knowledge Base Panel ── */
.kb-panel {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 200 !important;
  background: #f8faf8 !important;
  display: flex !important;
  flex-direction: column !important;
}
.kb-panel[hidden] {
  display: none !important;
}
@keyframes kbSlideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.kb-panel-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 16px 8px !important;
}
.kb-panel-header strong {
  font-size: 17px !important;
  color: #1a1e23 !important;
}
.kb-panel-back {
  width: 32px !important;
  height: 32px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 18px !important;
  cursor: pointer !important;
  color: #5a6a5a !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
}
.kb-panel-back:active {
  background: rgba(0,0,0,.04) !important;
}
.kb-panel-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 8px 16px 20px !important;
}
.kb-format-guide {
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
  border: 1px solid #eef3ef !important;
}
.kb-guide-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #5a6a5a !important;
  margin-bottom: 8px !important;
}
.kb-format-table {
  width: 100% !important;
  font-size: 12px !important;
  border-collapse: collapse !important;
}
.kb-format-table td {
  padding: 5px 0 !important;
  border-bottom: 1px solid #f0f3f0 !important;
  color: #2c2416 !important;
  font-size: 12px !important;
  vertical-align: top !important;
}
.kb-format-table td:first-child {
  font-weight: 600 !important;
  white-space: nowrap !important;
  width: 90px !important;
  padding-right: 10px !important;
}
.kb-format-table .ext {
  font-weight: 400 !important;
  color: #8a9a8a !important;
  font-size: 11px !important;
  display: block !important;
  margin-top: 1px !important;
}
.kb-upload-zone {
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
  border: 1px solid #eef3ef !important;
}
.kb-upload-btn {
  width: 100% !important;
  padding: 10px !important;
  border: 1px dashed #bcc8bc !important;
  border-radius: 8px !important;
  background: #f8faf8 !important;
  color: #2c2416 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  margin-bottom: 8px !important;
}
.kb-upload-btn:active {
  background: #f0f3f0 !important;
}
.kb-paste-area {
  width: 100% !important;
  padding: 8px 10px !important;
  border: 1px solid #dde8dc !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  resize: vertical !important;
  margin-bottom: 8px !important;
  box-sizing: border-box !important;
}
.kb-pending-file {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 8px !important;
  margin: 6px 0 !important;
  background: #f0f5ef !important;
  border-radius: 6px !important;
  font-size: 13px !important;
}
.kb-pending-file .name {
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #2c2416 !important;
}
.kb-pending-file .size {
  color: #8a9a8a !important;
  font-size: 11px !important;
}
.kb-save-btn {
  width: 100% !important;
  padding: 9px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #111711 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.kb-save-btn:active {
  opacity: .85 !important;
}
.kb-status {
  font-size: 12px !important;
  color: #5a6a5a !important;
  margin-top: 6px !important;
  text-align: center !important;
}
.kb-list {
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 12px !important;
  border: 1px solid #eef3ef !important;
}
.kb-list-head {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #5a6a5a !important;
  margin-bottom: 8px !important;
}
.kb-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #f0f3f0 !important;
  font-size: 13px !important;
}
.kb-item:last-child {
  border-bottom: 0 !important;
}
.kb-item .name {
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #2c2416 !important;
}
.kb-item .size {
  color: #8a9a8a !important;
  font-size: 11px !important;
}
.kb-item .del {
  border: 0 !important;
  background: transparent !important;
  color: #b8c8b8 !important;
  cursor: pointer !important;
  font-size: 16px !important;
  padding: 2px !important;
}
.kb-item .del:active {
  color: #e74c3c !important;
}
.kb-panel-footer {
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid #eef3ef !important;
  background: #f8faf8 !important;
}
.kb-back-btn {
  border: 0 !important;
  background: transparent !important;
  color: #5a6a5a !important;
  font-size: 13px !important;
  cursor: pointer !important;
  padding: 6px 0 !important;
}

/* ── Key Management Panel ── */
.key-list {
  display: grid !important;
  gap: 8px !important;
}
.key-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 10px !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  border: 1px solid #eef3ef !important;
}
.key-code {
  font-family: monospace !important;
  font-size: 12px !important;
  color: #2c2416 !important;
  flex: 1 !important;
  letter-spacing: .3px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.key-name-input {
  width: 80px !important;
  padding: 4px 6px !important;
  border: 1px solid #dde8dc !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-family: inherit !important;
  text-align: center !important;
  color: #2c2416 !important;
  background: #ffffff !important;
}
.key-name-input:focus {
  border-color: #111711 !important;
  outline: none !important;
}
.key-name-input::placeholder {
  color: #bcc8bc !important;
}

/* ── API Access Panel ── */
.api-field-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}
.api-field-row[hidden] {
  display: none !important;
}
.api-label {
  font-size: 12px !important;
  color: #5a6a5a !important;
  min-width: 60px !important;
  flex-shrink: 0 !important;
}
.api-select, .api-input {
  flex: 1 !important;
  padding: 6px 8px !important;
  border: 1px solid #dde8dc !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-family: inherit !important;
  background: #ffffff !important;
  color: #2c2416 !important;
}
.api-select {
  height: 30px !important;
}
.api-select:focus, .api-input:focus {
  border-color: #111711 !important;
  outline: none !important;
}
.api-btn-row {
  display: flex !important;
  gap: 6px !important;
  margin-top: 2px !important;
}
.api-test-btn {
  padding: 7px 14px !important;
  border: 1px solid #dde8dc !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #2c2416 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.api-test-btn:active {
  background: #f0f5ef !important;
}
.api-test-btn:disabled {
  opacity: .5 !important;
}

/* ── New User Guide Overlay ── */
.guide-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 9999 !important;
  background: rgba(0,0,0,.5) !important;
  display: grid !important;
  place-items: center !important;
}
.guide-overlay[hidden] { display: none !important; }
@keyframes guideFadeIn { from { opacity: 0; } to { opacity: 1; } }
.guide-box {
  width: calc(100% - 48px) !important;
  max-width: 360px !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 24px 22px 18px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.15) !important;
  animation: guideSlideUp .35s ease !important;
}
@keyframes guideSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.guide-steps {
  min-height: 124px !important;
  display: flex !important;
  align-items: center !important;
}
.guide-step { display: none !important; }
.guide-step.active { display: block !important; animation: guideStepIn .3s ease !important; }
@keyframes guideStepIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
.guide-step .icon { font-size: 48px !important; text-align: center !important; margin-bottom: 12px !important; }
.guide-step h3 { font-size: 18px !important; font-weight: 800 !important; color: #1a1e23 !important; margin: 0 0 6px !important; text-align: center !important; }
.guide-step p { font-size: 13px !important; color: #5a6a5a !important; line-height: 1.6 !important; margin: 0 !important; text-align: center !important; }
.guide-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 16px !important;
}
.guide-dots { display: flex !important; gap: 6px !important; }
.guide-dot {
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: #dde8dc !important;
  transition: background .2s !important;
}
.guide-dot.active { background: #111711 !important; width: 24px !important; border-radius: 4px !important; }
.guide-btn {
  border: 0 !important;
  background: #111711 !important;
  color: #ffffff !important;
  padding: 8px 24px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

/* ── Drawer logout button ── */
.drawer-logout-zone {
  padding: 4px 12px 8px !important;
}
.drawer-logout-btn {
  width: 100% !important;
  padding: 7px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #b8c8b8 !important;
  font-size: 12px !important;
  cursor: pointer !important;
  text-align: center !important;
}
.drawer-logout-btn:active {
  color: #e74c3c !important;
}
.key-copy {
  border: 1px solid #dde8dc !important;
  background: #ffffff !important;
  color: #2c2416 !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  cursor: pointer !important;
}
.key-copy:active {
  background: #f0f5ef !important;
}
.key-empty {
  text-align: center !important;
  color: #8a9a8a !important;
  font-size: 13px !important;
  padding: 20px !important;
}
.kb-guide-desc {
  font-size: 12px !important;
  color: #8a9a8a !important;
  margin-top: 4px !important;
  line-height: 1.5 !important;
}

/* ── Compact customer list ── */
.global-drawer-shell .drawer-customer-item {
  padding: 6px 12px !important;
  min-height: 38px !important;
  margin-top: 4px !important;
}
.global-drawer-shell .drawer-customer-item + .drawer-customer-item {
  margin-top: 4px !important;
}
.global-drawer-shell .drawer-customer-main strong {
  font-size: 12px !important;
  font-weight: 600 !important;
}
.global-drawer-shell .drawer-customer-main em {
  font-size: 11px !important;
}


/* ── Drawer bottom controls: keep settings/logout compact and lower ── */
.customer-chat-drawer-shell .drawer-customer-zone {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
}
.customer-chat-drawer-shell .drawer-customer-list-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.customer-chat-drawer-shell .drawer-boss-zone {
  flex: 0 0 auto !important;
  margin-top: auto !important;
  padding: 2px 12px 0 !important;
  border-top: 1px solid rgba(0,0,0,.05) !important;
}
.customer-chat-drawer-shell .drawer-boss-toggle {
  min-height: 28px !important;
  padding: 3px 12px !important;
  font-size: 12px !important;
}
.customer-chat-drawer-shell .drawer-boss-body {
  max-height: 28vh !important;
  overflow-y: auto !important;
  padding: 0 12px 4px !important;
}
.customer-chat-drawer-shell .drawer-boss-body button {
  padding: 5px 10px !important;
  font-size: 12px !important;
}
.customer-chat-drawer-shell.is-searching .drawer-customer-list-wrap,
.customer-chat-drawer-shell.is-searching .drawer-boss-body {
  display: none !important;
}
.customer-chat-drawer-shell.is-searching .drawer-section-toggle,
.customer-chat-drawer-shell.is-searching .drawer-boss-toggle {
  min-height: 28px !important;
}
.customer-chat-drawer-shell .drawer-logout-zone {
  flex: 0 0 auto !important;
  padding: 0 12px max(8px, env(safe-area-inset-bottom)) !important;
}
.customer-chat-drawer-shell .drawer-logout-btn {
  padding: 3px 0 !important;
  font-size: 11px !important;
}