/*
 * Mboka Auto Repair
 * Customer Mobile Chat — v406
 *
 * Isolated presentation layer.
 * The original chatbot.js remains unchanged.
 */

.mbk-v406-backdrop,
.mbk-v406-details-button,
.mbk-v406-audio-progress {
  display:none;
}


/* Successful-send notice only. */

.msg.meta.mbk-v406-success-leaving {
  opacity:0 !important;
  max-height:0 !important;

  margin-top:0 !important;
  margin-bottom:0 !important;

  padding-top:0 !important;
  padding-bottom:0 !important;

  overflow:hidden !important;

  transition:
    opacity .28s ease,
    max-height .28s ease,
    margin .28s ease,
    padding .28s ease;
}


@media (max-width:720px) {

  body.mbk-v406-phone-chat-open {
    overflow:hidden !important;
    overscroll-behavior:none;
  }


  /*
   * Blur the page but NEVER intercept taps.
   *
   * v405 allowed the backdrop to participate in pointer input.
   * v406 explicitly removes it from hit testing.
   */

  body.mbk-v406-phone-chat-open
  .mbk-v406-backdrop.is-active {
    display:block;

    position:fixed;
    inset:0;

    z-index:2147482000;

    background:
      rgba(2,7,18,.34);

    -webkit-backdrop-filter:
      blur(12px);

    backdrop-filter:
      blur(12px);

    pointer-events:none !important;
  }


  /*
   * visualViewport supplies these two variables.
   * When the iPhone keyboard appears, the whole chat follows the
   * actual visible screen instead of remaining behind the keyboard.
   */

  body.mbk-v406-phone-chat-open
  .mbk-chat.mbk-v406-mobile-chat {
    position:fixed !important;

    top:
      var(
        --mbk-v406-vv-top,
        8px
      ) !important;

    left:
      max(
        8px,
        env(safe-area-inset-left)
      ) !important;

    right:
      max(
        8px,
        env(safe-area-inset-right)
      ) !important;

    bottom:
      auto !important;

    width:
      auto !important;

    height:
      var(
        --mbk-v406-vv-height,
        calc(100dvh - 16px)
      ) !important;

    max-width:
      none !important;

    max-height:
      none !important;

    margin:
      0 !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    overflow:
      hidden !important;

    border-radius:
      22px !important;

    z-index:
      2147483000 !important;

    box-shadow:
      0 28px 90px
      rgba(0,0,0,.58) !important;
  }


  body.mbk-v406-phone-chat-open
  .mbk-chat.mbk-v406-mobile-chat
  header {
    flex:
      0 0 auto !important;

    position:
      relative;

    z-index:
      20;
  }


  /*
   * Ensure the real X remains above all add-on layers.
   */

  body.mbk-v406-phone-chat-open
  #mbk-close {
    position:
      relative !important;

    z-index:
      30 !important;

    pointer-events:
      auto !important;

    touch-action:
      manipulation;
  }


  /*
   * Conversation workspace.
   */

  body.mbk-v406-phone-chat-open
  .mbk-chat.mbk-v406-mobile-chat
  .mbk-msgs {
    flex:
      1 1 auto !important;

    min-height:
      0 !important;

    max-height:
      none !important;

    overflow-y:
      auto !important;

    overflow-x:
      hidden !important;

    -webkit-overflow-scrolling:
      touch;

    overscroll-behavior:
      contain;

    padding:
      12px 10px 16px !important;

    scroll-padding-bottom:
      20px;
  }


  /*
   * Preserve original message bubble layout.
   */

  body.mbk-v406-phone-chat-open
  .mbk-msgs
  .msg {
    flex:
      0 0 auto;
  }


  /*
   * Hide customer setup/actions after identification.
   * DOM and values remain intact.
   */

  body.mbk-v406-phone-chat-open
  .mbk-chat.mbk-v406-mobile-chat.mbk-v406-details-collapsed
  .mbk-contact,

  body.mbk-v406-phone-chat-open
  .mbk-chat.mbk-v406-mobile-chat.mbk-v406-details-collapsed
  .chips {
    display:
      none !important;
  }


  /*
   * Composer.
   *
   * No bottom positioning is used. It participates naturally
   * in the shortened visual viewport when the keyboard opens.
   */

  body.mbk-v406-phone-chat-open
  .mbk-chat.mbk-v406-mobile-chat
  .mbk-input {
    flex:
      0 0 auto !important;

    position:
      relative !important;

    inset:
      auto !important;

    width:
      auto !important;

    margin:
      7px 12px
      max(
        8px,
        env(safe-area-inset-bottom)
      ) !important;

    transform:
      none !important;

    z-index:
      20 !important;
  }


  body.mbk-v406-phone-chat-open
  .mbk-chat.mbk-v406-mobile-chat
  #mbk-in {
    min-width:
      0 !important;

    width:
      100% !important;
  }


  body.mbk-v406-phone-chat-open
  .mbk-media-tray,

  body.mbk-v406-phone-chat-open
  .mbk-voice-panel,

  body.mbk-v406-phone-chat-open
  .mbk-call-panel {
    flex:
      0 0 auto !important;
  }


  /*
   * Details button.
   */

  body.mbk-v406-phone-chat-open
  .mbk-v406-details-button {
    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;

    min-width:
      52px;

    height:
      34px;

    padding:
      0 10px;

    border:
      1px solid
      rgba(96,165,250,.34);

    border-radius:
      999px;

    background:
      rgba(37,99,235,.12);

    color:
      #dbeafe;

    font:
      inherit;

    font-size:
      11px;

    font-weight:
      800;

    cursor:
      pointer;

    touch-action:
      manipulation;
  }


  body.mbk-v406-phone-chat-open
  .mbk-v406-details-button:disabled {
    opacity:.42;
  }


  body.mbk-v406-phone-chat-open
  .mbk-chat-fab {
    opacity:
      0 !important;

    visibility:
      hidden !important;

    pointer-events:
      none !important;
  }


  /*
   * Audio synchronization.
   */

  body.mbk-v406-phone-chat-open
  .mbk-v406-audio-progress {
    display:
      grid;

    grid-template-columns:
      36px
      minmax(0,1fr)
      36px;

    align-items:
      center;

    gap:
      7px;

    width:
      100%;

    box-sizing:
      border-box;

    margin-top:
      6px;

    padding:
      0 2px;
  }


  body.mbk-v406-phone-chat-open
  .mbk-v406-audio-time {
    color:
      rgba(226,232,240,.78);

    font-size:
      10px;

    line-height:
      1;

    font-weight:
      750;

    font-variant-numeric:
      tabular-nums;
  }


  body.mbk-v406-phone-chat-open
  .mbk-v406-audio-time:last-child {
    text-align:right;
  }


  body.mbk-v406-phone-chat-open
  .mbk-v406-audio-slider {
    width:
      100%;

    min-width:
      0;

    height:
      24px;

    margin:
      0;

    accent-color:
      #3b82f6;

    touch-action:
      pan-x;
  }


  body.mbk-v406-phone-chat-open
  .mbk-media-audio,

  body.mbk-v406-phone-chat-open
  #mbk-voice-audio,

  body.mbk-v406-phone-chat-open
  .mbk-media-chip audio {
    width:
      100% !important;

    max-width:
      100% !important;
  }

}


/* ============================================================
   MBOKA CUSTOMER MOBILE CHAT v407-r2
   ============================================================ */


@media (max-width:720px) {


  /*
   * ==========================================================
   * TEXT-ONLY MESSAGE BUBBLES
   * ==========================================================
   *
   * Short text stays short.
   * Long text grows only as needed.
   *
   * Media messages are deliberately excluded.
   */

  body.mbk-v406-phone-chat-open
  #mbk-msgs
  .msg.mbk-v407-text-message {

    box-sizing:
      border-box !important;

    width:
      fit-content !important;

    min-width:
      0 !important;

    max-width:
      min(
        82%,
        430px
      ) !important;

    height:
      auto !important;

    min-height:
      0 !important;

    padding:
      9px 13px !important;

    white-space:
      normal !important;

    overflow-wrap:
      anywhere !important;

    word-break:
      normal !important;
  }


  /*
   * Customer/visitor message.
   */

  body.mbk-v406-phone-chat-open
  #mbk-msgs
  .msg.me.mbk-v407-text-message {

    margin-left:
      auto !important;

    margin-right:
      0 !important;
  }


  /*
   * Staff reply.
   */

  body.mbk-v406-phone-chat-open
  #mbk-msgs
  .msg.bot.mbk-v407-text-message {

    margin-left:
      0 !important;

    margin-right:
      auto !important;
  }


  /*
   * Media keeps its proven geometry.
   */

  body.mbk-v406-phone-chat-open
  #mbk-msgs
  .msg.mbk-v407-media-message {

    width:
      auto;

    max-width:
      88%;
  }


  /*
   * ==========================================================
   * SINGLE AUDIO PLAYER
   * ==========================================================
   */

  body.mbk-v406-phone-chat-open
  .mbk-v406-audio-progress {

    display:
      none !important;
  }


  body.mbk-v406-phone-chat-open
  audio.mbk-v407-audio-source {

    position:
      absolute !important;

    width:
      1px !important;

    height:
      1px !important;

    opacity:
      0 !important;

    pointer-events:
      none !important;

    overflow:
      hidden !important;
  }


  body.mbk-v406-phone-chat-open
  .mbk-v407-audio-player {

    display:
      grid;

    grid-template-columns:
      38px
      37px
      minmax(0,1fr)
      37px;

    align-items:
      center;

    gap:
      7px;

    width:
      100%;

    min-width:
      0;

    box-sizing:
      border-box;

    margin:
      4px 0 0;

    padding:
      9px 10px;

    border:
      1px solid
      rgba(148,163,184,.16);

    border-radius:
      18px;

    background:
      rgba(255,255,255,.08);
  }


  body.mbk-v406-phone-chat-open
  .mbk-v407-audio-play {

    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;

    width:
      36px;

    height:
      36px;

    padding:
      0;

    border:
      0;

    border-radius:
      50%;

    background:
      rgba(59,130,246,.18);

    color:
      #f8fafc;

    font-size:
      15px;

    cursor:
      pointer;

    touch-action:
      manipulation;
  }


  body.mbk-v406-phone-chat-open
  .mbk-v407-audio-time {

    color:
      rgba(226,232,240,.80);

    font-size:
      10px;

    font-weight:
      750;

    line-height:
      1;

    font-variant-numeric:
      tabular-nums;

    white-space:
      nowrap;
  }


  body.mbk-v406-phone-chat-open
  .mbk-v407-audio-slider {

    width:
      100%;

    min-width:
      0;

    margin:
      0;

    padding:
      0;

    accent-color:
      #3b82f6;

    touch-action:
      pan-x;
  }


  /*
   * ==========================================================
   * KEYBOARD / COMPOSER SEPARATION
   * ==========================================================
   */

  body.mbk-v406-phone-chat-open
  .mbk-chat.mbk-v406-mobile-chat
  .mbk-input {

    background:
      #07101d !important;

    border:
      1px solid
      rgba(76,126,196,.44) !important;

    border-radius:
      24px !important;

    box-shadow:
      0 -12px 30px
      rgba(0,0,0,.34),
      0 0 0 1px
      rgba(37,99,235,.11) !important;

    overflow:
      hidden !important;
  }


  /*
   * Only the typing field may show a blue text caret.
   */

  body.mbk-v406-phone-chat-open
  #mbk-msgs,

  body.mbk-v406-phone-chat-open
  .mbk-media-tray,

  body.mbk-v406-phone-chat-open
  .mbk-voice-panel,

  body.mbk-v406-phone-chat-open
  .mbk-call-panel {

    caret-color:
      transparent !important;
  }


  body.mbk-v406-phone-chat-open
  #mbk-in {

    position:
      relative !important;

    isolation:
      isolate;

    contain:
      paint;

    overflow:
      hidden !important;

    caret-color:
      #60a5fa !important;

    -webkit-tap-highlight-color:
      transparent;
  }


  body.mbk-v406-phone-chat-open
  #mbk-msgs {

    isolation:
      isolate;

    contain:
      paint;
  }


  /*
   * ==========================================================
   * PHOTO VIEWER
   * ==========================================================
   */

  .mbk-v407-photo-viewer {

    display:
      none;

    position:
      fixed;

    inset:
      0;

    z-index:
      2147483600;

    align-items:
      center;

    justify-content:
      center;

    padding:
      max(
        18px,
        env(safe-area-inset-top)
      )
      14px
      max(
        18px,
        env(safe-area-inset-bottom)
      );

    box-sizing:
      border-box;

    background:
      rgba(1,5,15,.58);

    -webkit-backdrop-filter:
      blur(16px);

    backdrop-filter:
      blur(16px);
  }


  .mbk-v407-photo-viewer.is-open {

    display:
      flex;
  }


  .mbk-v407-photo-frame {

    position:
      relative;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    width:
      100%;

    height:
      100%;

    max-width:
      100%;

    max-height:
      100%;
  }


  .mbk-v407-photo-image {

    display:
      block;

    width:
      auto;

    height:
      auto;

    max-width:
      100%;

    max-height:
      100%;

    object-fit:
      contain;

    border-radius:
      16px;

    box-shadow:
      0 24px 70px
      rgba(0,0,0,.55);

    user-select:
      none;

    -webkit-user-drag:
      none;
  }


  .mbk-v407-photo-close {

    position:
      absolute;

    top:
      4px;

    right:
      4px;

    z-index:
      4;

    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;

    width:
      44px;

    height:
      44px;

    border:
      1px solid
      rgba(255,255,255,.28);

    border-radius:
      50%;

    background:
      rgba(3,7,18,.74);

    color:
      #ffffff;

    font-size:
      31px;

    line-height:
      1;

    cursor:
      pointer;

    touch-action:
      manipulation;

    -webkit-tap-highlight-color:
      transparent;
  }


  body.mbk-v407-photo-open {

    overflow:
      hidden !important;
  }


  /*
   * Chat thumbnails make their interaction obvious.
   */

  body.mbk-v406-phone-chat-open
  #mbk-msgs img {

    cursor:
      zoom-in;

    -webkit-tap-highlight-color:
      transparent;
  }

}


/* ============================================================
   MBOKA CUSTOMER MOBILE CHAT — v408
   ============================================================ */


@media (max-width:720px) {


  /*
   * ==========================================================
   * + ATTACHMENT MENU
   * ==========================================================
   */

  .mbk-v408-action-tray {

    display:
      flex;

    position:
      absolute;

    align-items:
      center;

    gap:
      10px;

    padding:
      9px;

    border:
      1px solid
      rgba(96,165,250,.30);

    border-radius:
      22px;

    background:
      rgba(5,13,27,.96);

    box-shadow:
      0 16px 36px
      rgba(0,0,0,.42);

    opacity:
      0;

    visibility:
      hidden;

    transform:
      translateY(8px)
      scale(.96);

    transform-origin:
      bottom left;

    pointer-events:
      none;

    z-index:
      2147483300;

    transition:
      opacity .16s ease,
      transform .16s ease,
      visibility .16s ease;
  }


  .mbk-v408-action-tray.is-open {

    opacity:
      1;

    visibility:
      visible;

    transform:
      translateY(0)
      scale(1);

    pointer-events:
      auto;
  }


  .mbk-v408-action {

    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;

    width:
      46px;

    height:
      46px;

    padding:
      0;

    border:
      1px solid
      rgba(96,165,250,.28);

    border-radius:
      50%;

    background:
      rgba(20,45,83,.86);

    color:
      #eaf2ff;

    cursor:
      pointer;

    touch-action:
      manipulation;

    -webkit-tap-highlight-color:
      transparent;
  }


  .mbk-v408-action svg {

    width:
      22px;

    height:
      22px;

    fill:
      none;

    stroke:
      currentColor;

    stroke-width:
      1.9;

    stroke-linecap:
      round;

    stroke-linejoin:
      round;
  }


  .mbk-v408-plus-open {

    transform:
      rotate(45deg);

    transition:
      transform .16s ease;
  }


  /*
   * ==========================================================
   * PHOTO MESSAGE — IMAGE IS THE BUBBLE
   * ==========================================================
   */

  body.mbk-v406-phone-chat-open
  #mbk-msgs
  .msg.mbk-v408-photo-only {

    width:
      fit-content !important;

    min-width:
      0 !important;

    max-width:
      88% !important;

    height:
      auto !important;

    padding:
      0 !important;

    margin-top:
      6px;

    margin-bottom:
      6px;

    border:
      0 !important;

    outline:
      0 !important;

    background:
      transparent !important;

    box-shadow:
      none !important;

    overflow:
      visible !important;
  }


  body.mbk-v406-phone-chat-open
  #mbk-msgs
  .msg.mbk-v408-photo-only
  .mbk-media-grid,

  body.mbk-v406-phone-chat-open
  #mbk-msgs
  .msg.mbk-v408-photo-only
  .mbk-media-card {

    width:
      fit-content !important;

    max-width:
      100% !important;

    margin:
      0 !important;

    padding:
      0 !important;

    border:
      0 !important;

    background:
      transparent !important;

    box-shadow:
      none !important;
  }


  body.mbk-v406-phone-chat-open
  #mbk-msgs
  .msg.mbk-v408-photo-only
  img {

    display:
      block;

    max-width:
      min(
        78vw,
        360px
      ) !important;

    height:
      auto;

    margin:
      0 !important;

    border:
      0 !important;

    border-radius:
      16px;

    box-shadow:
      none !important;

    object-fit:
      contain;
  }


  /*
   * ==========================================================
   * AUDIO MESSAGE SENT TIME
   * ==========================================================
   */

  body.mbk-v406-phone-chat-open
  #mbk-msgs
  .msg
  .mbk-v408-message-time {

    display:
      block;

    width:
      100%;

    box-sizing:
      border-box;

    margin:
      5px 2px 0;

    color:
      rgba(226,232,240,.67);

    font-size:
      10px;

    font-weight:
      700;

    line-height:
      1;

    text-align:
      right;

    font-variant-numeric:
      tabular-nums;

    pointer-events:
      none;
  }


  /*
   * ==========================================================
   * KEYBOARD / CHAT TRANSITION
   * ==========================================================
   *
   * The webpage itself contributes no white spacer.
   *
   * Safari's OS-controlled keyboard accessory chrome cannot be
   * recolored by a webpage, but the message input is explicitly
   * marked as a normal chat field in JS to discourage the
   * password/payment/address AutoFill accessory.
   */

  body.mbk-v406-phone-chat-open
  .mbk-chat.mbk-v406-mobile-chat
  .mbk-input {

    margin-bottom:
      0 !important;

    border-bottom-left-radius:
      0 !important;

    border-bottom-right-radius:
      0 !important;

    padding-bottom:
      max(
        8px,
        env(safe-area-inset-bottom)
      ) !important;

    background:
      #07101d !important;
  }


  body.mbk-v406-phone-chat-open
  .mbk-chat.mbk-v406-mobile-chat {

    background:
      #091426 !important;

    padding-bottom:
      0 !important;
  }


  /*
   * Dark footer bridge fills every piece of browser-controlled
   * visual viewport still belonging to the webpage.
   */

  body.mbk-v406-phone-chat-open
  .mbk-chat.mbk-v406-mobile-chat::after {

    content:
      '';

    position:
      absolute;

    left:
      0;

    right:
      0;

    bottom:
      0;

    height:
      max(
        8px,
        env(safe-area-inset-bottom)
      );

    background:
      #07101d;

    pointer-events:
      none;

    z-index:
      7;
  }


  /*
   * Keep real input content above the footer bridge.
   */

  body.mbk-v406-phone-chat-open
  .mbk-chat.mbk-v406-mobile-chat
  .mbk-input {

    z-index:
      20 !important;
  }

}