/* =========================================================
   vAvtobyse 2.9.19 — STAGE 1A / CHAT GEOMETRY R2
   Scope: message bubble sizing + composer/icon alignment on phone and desktop.
   Visual theme overhaul, keyboard viewport and voice-in-chat are intentionally
   left for the next approved substeps. This file is loaded last on purpose.
   ========================================================= */

/* ---------- shared message geometry ---------- */
html[data-theme] body.vav-shell-mode .message-row,
html[data-theme] body.vav-shell-mode .message-content,
html[data-theme] body.vav-shell-mode .message-bubble,
html[data-theme] body.vav-shell-mode .message-text{
  box-sizing:border-box!important;
}

html[data-theme] body.vav-shell-mode .message-content{
  min-width:0!important;
}

html[data-theme] body.vav-shell-mode .message-bubble{
  display:inline-block!important;
  width:auto!important;
  min-width:52px!important;
  max-width:100%!important;
  overflow:visible!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
  hyphens:none!important;
}

html[data-theme] body.vav-shell-mode .message-text{
  min-width:0!important;
  max-width:100%!important;
  white-space:pre-wrap!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
  hyphens:none!important;
}

/* Long links/tokens may break; normal words must not collapse letter-by-letter. */
html[data-theme] body.vav-shell-mode .message-text a,
html[data-theme] body.vav-shell-mode .message-text code{
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}

/* ---------- desktop: rebuild the lower chat rail as one stable block ---------- */
@media (min-width:821px){
  html[data-theme] body.vav-shell-mode .active-chat{
    min-height:0!important;
    overflow:hidden!important;
  }

  html[data-theme] body.vav-shell-mode .message-list{
    min-height:0!important;
    padding-bottom:14px!important;
    scroll-padding-bottom:14px!important;
  }

  html[data-theme] body.vav-shell-mode .message-content{
    width:auto!important;
    max-width:min(760px,82%)!important;
  }

  html[data-theme] body.vav-shell-mode .message-bubble{
    max-width:100%!important;
  }

  html[data-theme] body.vav-shell-mode .composer{
    position:relative!important;
    inset:auto!important;
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }

  html[data-theme] body.vav-shell-mode .composer-recipient{
    min-height:32px!important;
    height:32px!important;
    padding:4px 10px!important;
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    overflow:hidden!important;
    font-size:10px!important;
    line-height:18px!important;
  }

  html[data-theme] body.vav-shell-mode .composer-recipient .recipient-avatar{
    width:22px!important;
    min-width:22px!important;
    height:22px!important;
    font-size:12px!important;
  }

  html[data-theme] body.vav-shell-mode .composer-recipient strong,
  html[data-theme] body.vav-shell-mode .composer-recipient .recipient-meta{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  html[data-theme] body.vav-shell-mode .composer-toolbar{
    min-height:40px!important;
    height:40px!important;
    padding:3px 8px!important;
    gap:4px!important;
    display:flex!important;
    align-items:center!important;
    overflow:hidden!important;
  }

  html[data-theme] body.vav-shell-mode .composer-toolbar .tool-button{
    box-sizing:border-box!important;
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    padding:6px!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    line-height:0!important;
  }

  html[data-theme] body.vav-shell-mode .composer-toolbar .button-icon{
    display:block!important;
    width:20px!important;
    height:20px!important;
    max-width:20px!important;
    max-height:20px!important;
    margin:0!important;
    object-fit:contain!important;
  }

  html[data-theme] body.vav-shell-mode .composer-toolbar .button-label{
    display:none!important;
  }

  html[data-theme] body.vav-shell-mode .composer-tip{
    margin-left:auto!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:9px!important;
    line-height:14px!important;
  }

  html[data-theme] body.vav-shell-mode .composer-row{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    min-height:64px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 110px!important;
    gap:8px!important;
    align-items:stretch!important;
    padding:6px 8px 8px!important;
    margin:0!important;
  }

  html[data-theme] body.vav-shell-mode .composer-input-shell{
    display:block!important;
    min-width:0!important;
    min-height:52px!important;
    height:auto!important;
    overflow:hidden!important;
    border-radius:10px!important;
  }

  html[data-theme] body.vav-shell-mode #messageInput{
    box-sizing:border-box!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    min-height:52px!important;
    height:52px!important;
    max-height:118px!important;
    margin:0!important;
    padding:12px 13px!important;
    resize:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    font-size:14px!important;
    line-height:20px!important;
    scrollbar-width:thin!important;
  }

  html[data-theme] body.vav-shell-mode .mobile-composer-inline,
  html[data-theme] body.vav-shell-mode .mobile-voice-button{
    display:none!important;
  }

  html[data-theme] body.vav-shell-mode #sendMessageBtn{
    box-sizing:border-box!important;
    width:110px!important;
    min-width:110px!important;
    height:52px!important;
    min-height:52px!important;
    padding:0 12px!important;
    margin:0!important;
    align-self:stretch!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    border-radius:10px!important;
    font-size:12px!important;
    line-height:1!important;
  }

  html[data-theme] body.vav-shell-mode #sendMessageBtn .send-icon-image{
    display:block!important;
    width:18px!important;
    height:18px!important;
    flex:0 0 18px!important;
    margin:0!important;
  }

  html[data-theme] body.vav-shell-mode #sendMessageBtn .send-text{
    display:inline!important;
    font-size:11px!important;
    line-height:1!important;
  }
}

/* ---------- mobile: stable bubbles + compact, aligned composer ---------- */
@media (max-width:820px){
  html.vav-mobile-layout[data-theme] body.vav-shell-mode .message-list{
    padding:10px 8px 12px!important;
    scroll-padding-bottom:72px!important;
  }

  html.vav-mobile-layout[data-theme] body.vav-shell-mode .message-row{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    gap:0!important;
    margin:0 0 8px!important;
    align-items:flex-end!important;
  }

  html.vav-mobile-layout[data-theme] body.vav-shell-mode .message-row>.avatar{
    display:none!important;
  }

  html.vav-mobile-layout[data-theme] body.vav-shell-mode .message-content{
    display:flex!important;
    flex-direction:column!important;
    width:auto!important;
    min-width:0!important;
    max-width:88%!important;
    align-items:flex-start!important;
  }

  html.vav-mobile-layout[data-theme] body.vav-shell-mode .message-row.mine{
    justify-content:flex-end!important;
  }

  html.vav-mobile-layout[data-theme] body.vav-shell-mode .message-row:not(.mine){
    justify-content:flex-start!important;
  }

  html.vav-mobile-layout[data-theme] body.vav-shell-mode .message-row.mine .message-content{
    align-items:flex-end!important;
  }

  html.vav-mobile-layout[data-theme] body.vav-shell-mode .message-bubble{
    width:auto!important;
    min-width:54px!important;
    max-width:100%!important;
    padding:8px 10px!important;
    font-size:14px!important;
    line-height:19px!important;
  }

  html.vav-mobile-layout[data-theme] body.vav-shell-mode .message-meta{
    min-width:0!important;
    margin:3px 4px 0!important;
    line-height:12px!important;
  }

  html.vav-mobile-layout[data-theme] body.vav-shell-mode .message-row.mine .message-meta{
    align-self:flex-end!important;
  }

  html.vav-mobile-layout[data-theme] body.vav-shell-mode .composer{
    position:relative!important;
    inset:auto!important;
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:5px 6px calc(5px + env(safe-area-inset-bottom))!important;
    overflow:visible!important;
  }

  html.vav-mobile-layout[data-theme] body.vav-shell-mode .composer-row{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 46px!important;
    gap:6px!important;
    align-items:end!important;
    padding:0!important;
    margin:0!important;
  }

  html.vav-mobile-layout[data-theme] body.vav-shell-mode .composer-input-shell{
    box-sizing:border-box!important;
    min-width:0!important;
    min-height:46px!important;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) 34px!important;
    align-items:end!important;
    padding:2px 3px!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }

  html.vav-mobile-layout[data-theme] body.vav-shell-mode .mobile-composer-inline{
    position:static!important;
    inset:auto!important;
    align-self:end!important;
    box-sizing:border-box!important;
    display:grid!important;
    place-items:center!important;
    width:34px!important;
    min-width:34px!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    line-height:0!important;
  }

  html.vav-mobile-layout[data-theme] body.vav-shell-mode .mobile-composer-inline img{
    display:block!important;
    width:21px!important;
    height:21px!important;
    max-width:21px!important;
    max-height:21px!important;
    margin:0!important;
    object-fit:contain!important;
  }

  html.vav-mobile-layout[data-theme] body.vav-shell-mode #messageInput{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    height:auto;
    max-height:96px!important;
    margin:0!important;
    padding:10px 3px 8px!important;
    border:0!important;
    border-radius:0!important;
    resize:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    font-size:15px!important;
    line-height:20px!important;
    text-align:left!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
  }

  html.vav-mobile-layout[data-theme] body.vav-shell-mode #messageInput::-webkit-scrollbar{
    display:none!important;
    width:0!important;
    height:0!important;
  }

  html.vav-mobile-layout[data-theme] body.vav-shell-mode #sendMessageBtn,
  html.vav-mobile-layout[data-theme] body.vav-shell-mode #mobileVoiceBtn{
    position:relative!important;
    inset:auto!important;
    grid-column:2!important;
    grid-row:1!important;
    align-self:end!important;
    box-sizing:border-box!important;
    width:46px!important;
    min-width:46px!important;
    height:46px!important;
    min-height:46px!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:50%!important;
    line-height:0!important;
  }

  html.vav-mobile-layout[data-theme] body.vav-shell-mode #sendMessageBtn .send-icon-image,
  html.vav-mobile-layout[data-theme] body.vav-shell-mode #mobileVoiceBtn img{
    display:block!important;
    width:22px!important;
    height:22px!important;
    max-width:22px!important;
    max-height:22px!important;
    margin:0!important;
    object-fit:contain!important;
  }

  html.vav-mobile-layout[data-theme] body.vav-shell-mode #sendMessageBtn .send-text{
    display:none!important;
  }

  html.vav-mobile-layout[data-theme] body.vav-shell-mode .composer-row .mobile-action-hidden{
    display:none!important;
  }

  html.vav-mobile-layout[data-theme] body.vav-shell-mode .pending-file,
  html.vav-mobile-layout[data-theme] body.vav-shell-mode .reply-preview,
  html.vav-mobile-layout[data-theme] body.vav-shell-mode .edit-preview{
    margin:0 0 5px!important;
    max-width:100%!important;
  }
}

@media (max-width:370px){
  html.vav-mobile-layout[data-theme] body.vav-shell-mode .message-content{max-width:91%!important}
  html.vav-mobile-layout[data-theme] body.vav-shell-mode .composer{padding-left:4px!important;padding-right:4px!important}
  html.vav-mobile-layout[data-theme] body.vav-shell-mode .composer-row{grid-template-columns:minmax(0,1fr) 44px!important;gap:4px!important}
  html.vav-mobile-layout[data-theme] body.vav-shell-mode .composer-input-shell{grid-template-columns:32px minmax(0,1fr) 32px!important}
  html.vav-mobile-layout[data-theme] body.vav-shell-mode .mobile-composer-inline{width:32px!important;min-width:32px!important}
  html.vav-mobile-layout[data-theme] body.vav-shell-mode #sendMessageBtn,
  html.vav-mobile-layout[data-theme] body.vav-shell-mode #mobileVoiceBtn{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important}
}

/* =========================================================
   STAGE 1A HOTFIX — mobile send/voice toggle specificity
   The geometry rules above use ID selectors with !important for display:grid.
   Therefore the generic .mobile-action-hidden rule cannot hide the active ID.
   Match the same IDs explicitly so app.js can switch microphone <-> send.
   ========================================================= */
@media (max-width:820px){
  html.vav-mobile-layout[data-theme] body.vav-shell-mode #sendMessageBtn.mobile-action-hidden,
  html.vav-mobile-layout[data-theme] body.vav-shell-mode #mobileVoiceBtn.mobile-action-hidden{
    display:none!important;
  }
}