/* IT4Y_CHATBOT_RUNTIME_V1_2026_07_24
   Customer-facing schedule enforcement and configurable chatbot UI.
   This asset intentionally uses the site's existing design tokens. */

#chat-modal[hidden],
#chat-modal [hidden],
#chat-proactive[aria-hidden="true"] {
  display: none !important;
}

#chat-modal {
  right: 24px !important;
  left: auto !important;
  inset-inline: auto;
  bottom: 96px;
  width: min(420px, calc(100vw - 48px));
  max-width: 420px;
  height: min(620px, calc(100dvh - 124px));
  max-height: min(620px, calc(100dvh - 124px));
  border-color: color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .24), 0 8px 24px rgba(15, 23, 42, .12);
  transform-origin: bottom right;
  /* Never animate viewport geometry. The legacy shell's `transition: all`
     kept the pre-keyboard height/bottom values visible during contraction,
     producing a transient blank band and clipped header. */
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
  isolation: isolate;
}

/* Dynamic values are updated through the same-origin CSSOM rule, never through
   an inline style attribute. This keeps the mobile keyboard fix CSP-safe. */
#chat-modal.it4-cb-visual-viewport {
  --it4-chat-vv-height: 100dvh;
  --it4-chat-vv-obscured-bottom: 0px;
  --it4-chat-vv-top-clearance: 8px;
  --it4-chat-resting-bottom-gap: 78px;
  --it4-chat-mobile-bottom-gap: var(--it4-chat-resting-bottom-gap);
}

#chat-modal.open {
  transform: scale(1) translateY(0);
}

#chat-modal .chat-modal-hd {
  min-height: 72px;
  padding: 14px 16px;
  gap: 11px;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 255, 255, .2), transparent 38%),
    linear-gradient(135deg, var(--blue), var(--blue2));
}

#chat-modal .chat-modal-ava {
  width: 42px;
  height: 42px;
  font-size: 20px;
}

#chat-modal .chat-modal-info {
  min-width: 0;
}

#chat-modal .chat-modal-name {
  overflow: hidden;
  font-size: 14px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#chat-modal .chat-modal-status {
  font-size: 11.5px;
}

#chat-modal .chat-msgs {
  max-height: none;
  padding: 18px;
  gap: 12px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--blue) 5%, transparent), transparent 36%),
    var(--surface);
  scrollbar-gutter: stable;
}

#chat-modal .chat-msg {
  max-width: 84%;
}

#chat-modal .chat-msg-bubble {
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.55;
}

#chat-modal .chat-chips,
#chat-modal .chat-lang-pick {
  padding: 12px 16px;
  gap: 8px;
  background: var(--surface);
}

#chat-modal .chat-input-area {
  min-width: 0;
  padding: 12px 14px;
  gap: 7px;
  align-items: center;
  flex-wrap: nowrap;
  box-shadow: 0 -10px 28px rgba(15, 23, 42, .035);
}

#chat-modal #chat-inp {
  width: auto;
  min-width: 0;
  min-height: 44px;
  flex: 1 1 0;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 12px;
}

#chat-modal :is(#it4-emoji-btn, #it4-att-btn, #it4-tr-btn, #chat-send-btn) {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  flex: 0 0 40px;
  align-self: center;
  box-sizing: border-box;
  border-radius: 11px;
}

#chat-modal :is(#it4-emoji-btn, #it4-att-btn, #it4-tr-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  padding: 0;
  background: transparent;
  color: var(--text2);
  opacity: 1;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .12s ease;
}

#chat-modal :is(#it4-emoji-btn, #it4-att-btn, #it4-tr-btn):hover:not(:disabled) {
  border-color: var(--border);
  background: var(--surface2);
  color: var(--blue);
  transform: translateY(-1px);
}

#chat-modal .chat-send-btn {
  font-size: 17px;
}

#chat-modal.it4-cb-terminal-state :is(
  #chat-inp,
  #chat-send-btn,
  #it4-emoji-btn,
  #it4-att-btn,
  #it4-tr-btn,
  #chat-lang-pick,
  #chat-chips
) {
  display: none !important;
}

#chat-modal.it4-cb-terminal-state .chat-input-area {
  display: flex !important;
}

/* IT4Y_CHATBOT_OFFLINE_TERMINAL_GUARD_2026_07_24
   The HTML hidden contract must outrank the restored-conversation terminal
   layout. Otherwise a late history response can expose "Start new chat"
   beside the authoritative offline form, most visibly on narrow screens. */
#chat-modal.it4-cb-terminal-state .chat-input-area[hidden] {
  display: none !important;
}

#chat-modal.it4-cb-terminal-state :is(#new-chat-btn, #lc-newchat-esc) {
  display: inline-flex !important;
  width: 100% !important;
  min-width: 0;
  min-height: 44px;
  flex: 1 1 100%;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

#chat-modal.minimized {
  width: min(340px, calc(100vw - 48px));
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px;
}

#chat-modal.minimized .chat-modal-hd {
  min-height: 56px;
}

#chat-btn {
  right: 28px !important;
  left: auto !important;
  inset-inline: auto;
  width: 58px;
  height: 58px;
  min-width: 58px;
  min-height: 58px;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 12px 32px rgba(37, 99, 235, .34), 0 4px 12px rgba(15, 23, 42, .16) !important;
}

#chat-modal:focus-visible,
#chat-modal button:focus-visible,
#chat-modal input:focus-visible,
#chat-modal select:focus-visible,
#chat-modal textarea:focus-visible,
#chat-btn:focus-visible {
  outline: 3px solid #60a5fa;
  outline: 3px solid color-mix(in srgb, var(--blue) 72%, white);
  outline-offset: 3px;
}

html.it4-cb-offline-mode .chat-pulse,
html.it4-cb-offline-mode .chat-online-dot,
html.it4-cb-offline-mode .chat-proactive-dot {
  background: #94a3b8;
  animation: none;
}

#chat-modal button,
#chat-modal input,
#chat-modal select,
#chat-modal textarea {
  font: inherit;
}

#chat-modal button {
  min-height: 44px;
}

#chat-modal .chat-modal-min,
#chat-modal .chat-modal-x {
  min-width: 44px;
  min-height: 44px;
}

#chat-modal .it4-cb-mobile-actions-button {
  display: none;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  cursor: pointer;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

#chat-modal .it4-cb-mobile-actions-button[aria-expanded="true"] {
  background: rgba(255, 255, 255, .26);
}

#chat-modal .it4-cb-mobile-actions-menu {
  position: absolute;
  z-index: 12;
  inset-block-start: 68px;
  inset-inline-end: 12px;
  width: min(224px, calc(100% - 24px));
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .24), 0 4px 14px rgba(15, 23, 42, .14);
}

#chat-modal .it4-cb-mobile-actions-menu[hidden] {
  display: none;
}

#chat-modal .it4-cb-mobile-actions-menu:not([hidden]) {
  display: grid;
  gap: 4px;
}

#chat-modal .it4-cb-mobile-action {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
  text-align: start;
}

#chat-modal .it4-cb-mobile-action:hover,
#chat-modal .it4-cb-mobile-action:focus-visible {
  border-color: var(--border);
  background: var(--surface2);
}

#chat-modal .it4-cb-mobile-action.is-danger {
  color: #dc2626;
}

#chat-modal .chat-msgs[aria-busy="true"]::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin: 12px auto;
  border: 2px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: it4-cb-spin .7s linear infinite;
}

@keyframes it4-cb-spin {
  to { transform: rotate(360deg); }
}

.it4-cb-visible {
  display: flex !important;
}

.it4-cb-meta {
  margin-top: 3px;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
}

.it4-cb-offline {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding: 18px;
  background:
    radial-gradient(circle at 100% 0, var(--blue-dim), transparent 42%),
    var(--surface);
  color: var(--text);
  overscroll-behavior: contain;
}

.it4-cb-offline-head {
  display: grid;
  gap: 6px;
}

.it4-cb-offline-eyebrow {
  color: var(--blue);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.it4-cb-offline-title {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

.it4-cb-offline-description {
  margin: 0;
  color: var(--text2);
  font-size: 13px;
  line-height: 1.6;
}

.it4-cb-offline-form {
  display: grid;
  gap: 12px;
}

.it4-cb-field {
  display: grid;
  gap: 6px;
}

.it4-cb-label {
  color: var(--text2);
  font-size: 12px;
  font-weight: 700;
}

.it4-cb-control {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface2);
  color: var(--text);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.it4-cb-control:hover {
  border-color: var(--border-h);
}

.it4-cb-control:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-dim);
}

textarea.it4-cb-control {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}

.it4-cb-consent {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  color: var(--text2);
  font-size: 11px;
  line-height: 1.55;
  cursor: pointer;
}

.it4-cb-consent input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--blue);
}

.it4-cb-submit {
  display: inline-flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 11px 16px;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  transition: background .16s ease, transform .12s ease, opacity .16s ease;
}

.it4-cb-submit:hover:not(:disabled) {
  background: var(--blue2);
  transform: translateY(-1px);
}

.it4-cb-submit:disabled {
  cursor: wait;
  opacity: .58;
}

.it4-cb-form-status {
  min-height: 20px;
  margin: 0;
  border-radius: 9px;
  color: var(--text2);
  font-size: 12px;
  line-height: 1.5;
}

.it4-cb-form-status.is-error,
.it4-cb-form-status.is-success {
  padding: 9px 10px;
  border: 1px solid;
}

.it4-cb-form-status.is-error {
  border-color: rgba(239, 68, 68, .34);
  border-color: color-mix(in srgb, #ef4444 34%, transparent);
  background: rgba(239, 68, 68, .1);
  background: color-mix(in srgb, #ef4444 10%, transparent);
  color: #ef4444;
}

.it4-cb-form-status.is-success {
  border-color: rgba(34, 197, 94, .34);
  border-color: color-mix(in srgb, #22c55e 34%, transparent);
  background: rgba(34, 197, 94, .1);
  background: color-mix(in srgb, #22c55e 10%, transparent);
  color: #16a34a;
}

.it4-cb-layer {
  position: absolute;
  z-index: 90;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 10px;
  background: rgba(15, 23, 42, .46);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: it4-cb-layer-in .16s ease-out;
}

@keyframes it4-cb-layer-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.it4-cb-layer-panel {
  width: 100%;
  max-height: calc(100% - 10px);
  overflow-y: auto;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 22px 60px rgba(15, 23, 42, .28);
  animation: it4-cb-panel-in .2s cubic-bezier(.2, .8, .2, 1);
  overscroll-behavior: contain;
}

@keyframes it4-cb-panel-in {
  from { transform: translateY(14px) scale(.985); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.it4-cb-layer-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.it4-cb-layer-heading {
  min-width: 0;
}

.it4-cb-layer-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--blue);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.it4-cb-layer-title {
  margin: 0;
  color: var(--text);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
}

.it4-cb-layer-close {
  display: inline-flex;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 0;
  background: var(--surface2);
  color: var(--text2);
  cursor: pointer;
}

.it4-cb-layer-description {
  margin: 10px 0 16px;
  color: var(--text2);
  font-size: 12.5px;
  line-height: 1.55;
}

.it4-cb-layer-body,
.it4-cb-transcript-form {
  display: grid;
  gap: 13px;
}

.it4-cb-layer-status {
  min-height: 0;
  border-radius: 10px;
  color: var(--text2);
  font-size: 12px;
  line-height: 1.5;
}

.it4-cb-layer-status:not(:empty) {
  padding: 10px 11px;
  border: 1px solid var(--border);
  background: var(--surface2);
}

.it4-cb-layer-status.is-error:not(:empty) {
  border-color: color-mix(in srgb, #ef4444 34%, var(--border));
  background: color-mix(in srgb, #ef4444 9%, var(--surface));
  color: #dc2626;
}

.it4-cb-layer-status.is-info:not(:empty) {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--border));
  background: var(--blue-dim);
  color: var(--text2);
}

.it4-cb-layer-actions {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 2px;
}

.it4-cb-layer-primary,
.it4-cb-layer-secondary,
.it4-cb-layer-danger {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 10px 15px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s ease, background .16s ease, border-color .16s ease;
}

.it4-cb-layer-primary {
  background: var(--blue);
  color: #fff;
}

.it4-cb-layer-primary:hover:not(:disabled) {
  background: var(--blue2);
  transform: translateY(-1px);
}

.it4-cb-layer-secondary {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text2);
}

.it4-cb-layer-secondary:hover:not(:disabled) {
  border-color: var(--border-h);
  background: var(--surface2);
}

.it4-cb-layer-danger {
  border-color: color-mix(in srgb, #dc2626 34%, transparent);
  background: #dc2626;
  color: #fff;
}

.it4-cb-layer-danger:hover:not(:disabled) {
  background: #b91c1c;
  transform: translateY(-1px);
}

.it4-cb-layer-panel[aria-busy="true"] :is(
  .it4-cb-layer-primary,
  .it4-cb-layer-secondary,
  .it4-cb-layer-danger
) {
  cursor: wait;
  opacity: .55;
}

.it4-cb-transcript-consent {
  margin-top: 1px;
}

.it4-cb-layer-result {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 8px 2px 2px;
  text-align: center;
}

.it4-cb-layer-result-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, #16a34a 14%, var(--surface));
  color: #15803d;
  font-size: 24px;
  font-weight: 900;
}

.it4-cb-layer-result-copy {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 750;
}

.it4-cb-delivery-address {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--text2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
}

.it4-cb-notice {
  margin: 0 12px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 11px;
  background: var(--surface2);
  color: var(--text2);
  font-size: 12px;
  line-height: 1.45;
}

.it4-cb-notice.is-error {
  border-color: color-mix(in srgb, #ef4444 34%, var(--border));
  background: color-mix(in srgb, #ef4444 9%, var(--surface));
  color: #dc2626;
}

.it4-c-runtime-status {
  margin-top: 9px;
  color: #dc2626;
  font-size: 12px;
  line-height: 1.45;
}

.it4-cb-config-note {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--blue-dim);
  color: var(--text2);
  font-size: 11px;
  line-height: 1.5;
}

.it4-cb-config-note::before {
  content: "i";
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 800;
}

#chat-lang-pick,
#chat-chips {
  max-height: 180px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#chat-lang-pick .clp-btn,
#chat-chips .chat-chip {
  min-height: 44px;
  white-space: normal;
  text-align: start;
}

.chat-modal.minimized .it4-cb-offline {
  display: none !important;
}

@media (max-width: 640px), (max-height: 640px) and (pointer: coarse) {
  #chat-modal {
    right: 12px !important;
    left: 12px !important;
    inset-inline: auto;
    width: auto;
    max-width: none;
    height: min(720px, calc(100dvh - 106px));
    max-height: calc(100dvh - 104px);
    bottom: 78px;
    border-radius: 20px;
    transform-origin: bottom center;
    /* The mobile dialog is an application surface. Keep it above the fixed
       language/currency strip while its measured top clearance prevents any
       visual overlap during keyboard and browser-chrome transitions. */
    z-index: 1300;
  }

  #chat-modal.it4-cb-visual-viewport {
    bottom: calc(var(--it4-chat-vv-obscured-bottom) + var(--it4-chat-mobile-bottom-gap));
  }

  #chat-modal.it4-cb-visual-viewport:not(.minimized) {
    height: min(720px, calc(var(--it4-chat-vv-height) - var(--it4-chat-mobile-bottom-gap) - max(var(--it4-chat-vv-top-clearance), env(safe-area-inset-top))));
    max-height: calc(var(--it4-chat-vv-height) - var(--it4-chat-mobile-bottom-gap) - max(var(--it4-chat-vv-top-clearance), env(safe-area-inset-top)));
  }

  #chat-modal.it4-cb-keyboard-active {
    --it4-chat-mobile-bottom-gap: max(8px, env(safe-area-inset-bottom));
  }

  #chat-modal.it4-cb-keyboard-active .chat-msgs {
    overscroll-behavior: contain;
  }

  /* The optional contact card is a shrinkable flex child. Without an explicit
     zero minimum it keeps its min-content height in short landscape viewports
     and pushes both the message log and composer below the clipped dialog. */
  #chat-modal #it4-consent-card {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Optional contact capture must not displace the active composer outside the
     visual viewport. It returns as soon as the composer loses focus or the
     keyboard closes, so no onboarding functionality is removed. */
  #chat-modal.it4-cb-keyboard-active.it4-cb-composer-focus #it4-consent-card {
    display: none;
  }

  #chat-modal .chat-modal-hd {
    min-height: 64px;
    padding: 10px 12px;
  }

  #chat-modal .chat-modal-hd :is(.chat-modal-min, .chat-modal-x) {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px;
  }

  /* A short visual viewport cannot afford a second 52px header row. Keep the
     customer identity plus one-tap minimize in the 64px primary row and place
     the rare destructive/close actions in an overlaid accessible menu. The
     menu consumes no message-history height, while logical ordering mirrors
     naturally in RTL. */
  @media (max-width: 430px) {
    #chat-modal:not(.minimized) .chat-modal-hd {
      height: auto;
      min-height: 64px;
      flex-wrap: nowrap;
      align-content: center;
      column-gap: 8px;
      row-gap: 0;
    }

    #chat-modal:not(.minimized) .chat-modal-ava {
      order: 1;
    }

    #chat-modal:not(.minimized) .chat-modal-info {
      order: 2;
      min-width: 0;
      flex: 1 1 0;
      text-align: start;
    }

    #chat-modal:not(.minimized) .chat-modal-name {
      overflow: visible;
      text-overflow: clip;
      white-space: nowrap;
    }

    #chat-modal:not(.minimized) .chat-modal-status {
      overflow: visible;
      white-space: nowrap;
    }

    #chat-modal:not(.minimized) .chat-modal-min {
      order: 3;
      margin: 0 !important;
    }

    #chat-modal:not(.minimized) .it4-cb-mobile-actions-button {
      display: flex !important;
      order: 4;
      margin: 0 !important;
    }

    #chat-modal:not(.minimized) :is(#chat-end-btn, .chat-modal-x) {
      display: none !important;
    }
  }

  #chat-modal .chat-msgs {
    padding: 14px 12px;
  }

  #chat-modal .chat-input-area {
    padding: 9px 10px max(9px, env(safe-area-inset-bottom));
    gap: 6px;
    flex-wrap: nowrap;
  }

  /* When the software keyboard contracts a short visual viewport, retain the
     full 44px action targets but remove decorative vertical padding. This
     makes header + composer exactly 88px, so even a 250px landscape visual
     viewport leaves the majority of the dialog for conversation history. */
  #chat-modal.it4-cb-keyboard-active:not(.minimized) .chat-modal-hd {
    height: 44px;
    min-height: 44px;
    padding: 0 6px;
    gap: 6px;
  }

  #chat-modal.it4-cb-keyboard-active:not(.minimized) .chat-modal-ava {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    font-size: 17px;
  }

  #chat-modal.it4-cb-keyboard-active:not(.minimized) .chat-modal-name {
    font-size: 13px;
  }

  #chat-modal.it4-cb-keyboard-active:not(.minimized) .chat-modal-status {
    font-size: 10.5px;
  }

  #chat-modal.it4-cb-keyboard-active:not(.minimized) .chat-input-area {
    min-height: 44px;
    padding: 0 6px;
    gap: 4px;
  }

  #chat-modal.it4-cb-keyboard-active .it4-cb-mobile-actions-menu {
    inset-block-start: 48px;
  }

  /* A short landscape viewport needs compact chrome even before the keyboard
     opens. The explicit non-keyboard guard leaves the stricter 44px keyboard
     rules above authoritative during contraction. */
  @media (max-height: 430px) and (orientation: landscape) {
    #chat-modal:not(.minimized):not(.it4-cb-keyboard-active) .chat-modal-hd {
      height: 52px;
      min-height: 52px;
      padding: 4px 8px;
      gap: 8px;
    }

    #chat-modal:not(.minimized):not(.it4-cb-keyboard-active) .chat-modal-ava {
      width: 36px;
      height: 36px;
      flex: 0 0 36px;
      font-size: 18px;
    }

    #chat-modal:not(.minimized):not(.it4-cb-keyboard-active) .chat-input-area {
      min-height: 52px;
      padding: 4px 8px;
      gap: 6px;
    }
  }

  #chat-modal #chat-inp {
    min-height: 42px;
    padding: 9px 10px;
    font-size: 16px;
  }

  #chat-modal :is(#it4-emoji-btn, #it4-att-btn, #it4-tr-btn, #chat-send-btn) {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    flex-basis: 44px;
  }

  #chat-modal .chat-chips,
  #chat-modal .chat-lang-pick {
    padding: 10px 12px;
  }

  #chat-modal.minimized {
    right: 12px !important;
    left: auto !important;
    width: min(330px, calc(100vw - 24px));
  }

  #chat-btn {
    right: 16px !important;
    left: auto !important;
    inset-inline: auto;
    bottom: 16px;
  }

  .it4-cb-offline {
    padding: 16px;
  }

  .it4-cb-offline-title {
    font-size: 19px;
  }
}

@media (max-width: 390px) {
  #chat-modal {
    right: 8px !important;
    left: 8px !important;
    width: auto;
    bottom: 74px;
  }

  #chat-modal.it4-cb-visual-viewport {
    --it4-chat-resting-bottom-gap: 74px;
  }

  #chat-modal.it4-cb-visual-viewport.it4-cb-keyboard-active {
    --it4-chat-mobile-bottom-gap: max(8px, env(safe-area-inset-bottom));
  }

  .it4-cb-offline {
    padding: 14px;
  }

  #chat-modal .chat-input-area {
    gap: 5px;
    padding-inline: 8px;
  }

  #chat-modal :is(#it4-emoji-btn, #it4-att-btn, #it4-tr-btn, #chat-send-btn) {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    flex-basis: 44px;
  }

  .it4-cb-layer {
    padding: 6px;
  }

  .it4-cb-layer-panel {
    padding: 15px;
    border-radius: 16px;
  }

  .it4-cb-layer-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .it4-cb-layer-actions > button {
    width: 100%;
  }
}

/* The launcher badge is owned by IT4YCustomerUnread. A minimum width plus
   logical padding keeps 1–99+ readable without changing the launcher size. */
#chat-btn .chat-unread {
  width: auto;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  top: -5px;
  right: -5px;
  line-height: 1;
  box-sizing: border-box;
  pointer-events: none;
  display: none !important;
}

#chat-btn .chat-unread.it4-unread-visible {
  display: flex !important;
}

[dir="rtl"] #chat-btn .chat-unread {
  right: auto;
  left: -5px;
}

@media (prefers-reduced-motion: reduce) {
  #chat-modal,
  #chat-modal *,
  #chat-proactive,
  #chat-proactive * {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}