/* =========================================================
   vAvtobyse 2.9.19 — STAGE 1C / CHAT VISUAL PASS
   Scope: chat-only visual finish on phone + desktop.
   Keeps Stage 1A geometry and Stage 1B keyboard behavior intact.
   No Supabase/LiveKit/business-logic changes.
   ========================================================= */

/* ---------- shared chat chrome ---------- */
html[data-theme="bus-past"] body.vav-shell-mode{
  --s1c-asphalt-0:#222b30;
  --s1c-asphalt-1:#273238;
  --s1c-asphalt-2:#2d383e;
  --s1c-panel:#303a3f;
  --s1c-panel-hi:#39444a;
  --s1c-line:#566269;
  --s1c-line-soft:#465159;
  --s1c-gold:#e1b54a;
  --s1c-gold-hi:#f1cc67;
  --s1c-gold-deep:#9a792e;
  --s1c-text:#f2eee5;
  --s1c-muted:#aaa79f;
}

html[data-theme="bus-past"] body.vav-shell-mode .chat-window{
  background:linear-gradient(180deg,var(--s1c-panel),var(--s1c-asphalt-1))!important;
}

html[data-theme="bus-past"] body.vav-shell-mode .active-chat:not(.hidden){
  min-height:0!important;
  overflow:hidden!important;
  background:var(--s1c-asphalt-1)!important;
}

html[data-theme="bus-past"] body.vav-shell-mode .chat-header{
  position:relative!important;
  border-bottom:1px solid color-mix(in srgb,var(--s1c-gold) 30%,var(--s1c-line))!important;
  background:
    linear-gradient(90deg,rgba(225,181,74,.07),transparent 34%),
    linear-gradient(180deg,#3b474d 0%,#313b40 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 3px 12px rgba(0,0,0,.14)!important;
}
html[data-theme="bus-past"] body.vav-shell-mode .chat-header::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(241,204,103,.34),transparent);
  pointer-events:none;
}
html[data-theme="bus-past"] body.vav-shell-mode .chat-title{color:#fff7e7!important;letter-spacing:-.01em!important}
html[data-theme="bus-past"] body.vav-shell-mode .chat-subtitle{color:#aaa79f!important}

html[data-theme="bus-past"] body.vav-shell-mode .mobile-back-button,
html[data-theme="bus-past"] body.vav-shell-mode .chat-info-button{
  background:linear-gradient(180deg,#3d484e,#30393f)!important;
  border:1px solid #59656b!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 7px rgba(0,0,0,.12)!important;
}
html[data-theme="bus-past"] body.vav-shell-mode .mobile-back-button:active,
html[data-theme="bus-past"] body.vav-shell-mode .chat-info-button:active{
  transform:translateY(1px)!important;
  background:#2d363b!important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.28)!important;
}
html[data-theme="bus-past"] body.vav-shell-mode .mobile-back-button img,
html[data-theme="bus-past"] body.vav-shell-mode .chat-info-image{
  filter:var(--th-icon-filter)!important;
  opacity:.96!important;
}

/* The old mobile CSS rendered a text glyph over the real info icon. Use one icon only. */
html[data-theme="bus-past"] body.vav-shell-mode .chat-info-button::before,
html[data-theme="bus-past"] body.vav-shell-mode .chat-info-button::after{content:none!important}
html[data-theme="bus-past"] body.vav-shell-mode .chat-info-image{display:block!important}

/* Wet asphalt canvas: grain + low amber reflections, never pure black. */
html[data-theme="bus-past"] body.vav-shell-mode #messageList{
  background:
    radial-gradient(ellipse at 78% 9%,rgba(225,181,74,.055),transparent 27%),
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.018) 0 1px,transparent 1.5px) 0 0/7px 7px,
    linear-gradient(102deg,transparent 0 44%,rgba(255,255,255,.012) 48%,transparent 52% 100%),
    linear-gradient(180deg,#29343a 0%,#263137 56%,#232d32 100%)!important;
}

html[data-theme="bus-past"] body.vav-shell-mode .message-bubble{
  box-shadow:0 3px 10px rgba(4,8,10,.13),inset 0 1px 0 rgba(255,255,255,.018)!important;
}
html[data-theme="bus-past"] body.vav-shell-mode .message-row.mine .message-bubble{
  background:linear-gradient(145deg,#67572f 0%,#584a2c 100%)!important;
  border-color:#957a38!important;
  box-shadow:0 3px 10px rgba(4,8,10,.15),inset 0 1px 0 rgba(255,229,153,.06)!important;
}
html[data-theme="bus-past"] body.vav-shell-mode .message-row:not(.mine) .message-bubble{
  background:linear-gradient(180deg,#3b464c,#374147)!important;
  border-color:#536067!important;
}
html[data-theme="bus-past"] body.vav-shell-mode .message-meta{color:#aaa79f!important}
html[data-theme="bus-past"] body.vav-shell-mode .message-row.mine .message-meta{color:#bdb5a5!important}

/* Voice message is a compact piece of the bubble, not a second huge card. */
html[data-theme="bus-past"] body.vav-shell-mode .message-bubble:has(.voice-message.voice-player){padding:6px!important}
html[data-theme="bus-past"] body.vav-shell-mode .voice-message.voice-player{
  width:min(390px,100%)!important;
  min-width:0!important;
  grid-template-columns:36px minmax(118px,1fr) 36px!important;
  gap:7px!important;
  min-height:50px!important;
  padding:6px!important;
  border-radius:11px!important;
  border:1px solid #59656b!important;
  background:linear-gradient(180deg,#39444a,#323c42)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.025)!important;
}
html[data-theme="bus-past"] body.vav-shell-mode .voice-play-button,
html[data-theme="bus-past"] body.vav-shell-mode .voice-speed-button{
  width:34px!important;height:34px!important;min-width:34px!important;
  padding:0!important;border-radius:9px!important;
  color:#272118!important;
  background:linear-gradient(180deg,#efcb63,#d7a83b)!important;
  border:1px solid #c49531!important;
  box-shadow:inset 0 1px rgba(255,255,255,.32),0 2px 5px rgba(0,0,0,.12)!important;
}
html[data-theme="bus-past"] body.vav-shell-mode .voice-player-main{gap:3px!important}
html[data-theme="bus-past"] body.vav-shell-mode .voice-progress{height:18px!important;margin:0!important}
html[data-theme="bus-past"] body.vav-shell-mode .voice-progress::-webkit-slider-runnable-track{
  height:5px!important;border:1px solid #69747a!important;border-radius:999px!important;
  background:linear-gradient(to right,var(--s1c-gold) 0 var(--voice-progress),#aeb3b1 var(--voice-progress) 100%)!important;
}
html[data-theme="bus-past"] body.vav-shell-mode .voice-progress::-webkit-slider-thumb{
  width:12px!important;height:16px!important;margin-top:-6px!important;border:1px solid #242c30!important;border-radius:3px!important;background:#b9bdbb!important;
}
html[data-theme="bus-past"] body.vav-shell-mode .voice-message-label{font-size:10px!important;color:#d9d4ca!important}
html[data-theme="bus-past"] body.vav-shell-mode .voice-player-time{font-size:9px!important;color:#aaa390!important}

/* ---------- composer: one instrument panel ---------- */
html[data-theme="bus-past"] body.vav-shell-mode .composer{
  background:
    linear-gradient(90deg,rgba(225,181,74,.035),transparent 30%),
    linear-gradient(180deg,#303a3f,#2b353a)!important;
  border-top:1px solid #536067!important;
  box-shadow:0 -5px 15px rgba(0,0,0,.12),inset 0 1px rgba(255,255,255,.02)!important;
}

html[data-theme="bus-past"] body.vav-shell-mode .composer-input-shell{
  background:linear-gradient(180deg,#232c31,#273136)!important;
  border:1px solid #59656b!important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.28),0 1px rgba(255,255,255,.02)!important;
}
html[data-theme="bus-past"] body.vav-shell-mode #messageInput{
  color:#f3efe7!important;
  caret-color:var(--s1c-gold-hi)!important;
  background:transparent!important;
  box-shadow:none!important;
}
html[data-theme="bus-past"] body.vav-shell-mode #messageInput::placeholder{color:#929794!important;opacity:.88!important}

html[data-theme="bus-past"] body.vav-shell-mode .mobile-composer-inline,
html[data-theme="bus-past"] body.vav-shell-mode .composer-toolbar .tool-button{
  border:1px solid #566168!important;
  background:linear-gradient(180deg,#3a454b,#303a40)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 1px 3px rgba(0,0,0,.12)!important;
}
html[data-theme="bus-past"] body.vav-shell-mode .mobile-composer-inline:active,
html[data-theme="bus-past"] body.vav-shell-mode .composer-toolbar .tool-button:active{
  transform:translateY(1px)!important;
  background:#293237!important;
}
html[data-theme="bus-past"] body.vav-shell-mode .mobile-composer-inline img,
html[data-theme="bus-past"] body.vav-shell-mode .composer-toolbar .button-icon{
  filter:var(--th-icon-filter)!important;
  opacity:.96!important;
}

html[data-theme="bus-past"] body.vav-shell-mode #sendMessageBtn,
html[data-theme="bus-past"] body.vav-shell-mode #mobileVoiceBtn{
  border:1px solid #c4932e!important;
  background:linear-gradient(180deg,#f2ce66 0%,#dda93a 100%)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.38),0 3px 8px rgba(0,0,0,.16)!important;
}
html[data-theme="bus-past"] body.vav-shell-mode #sendMessageBtn:active,
html[data-theme="bus-past"] body.vav-shell-mode #mobileVoiceBtn:active{
  transform:translateY(1px)!important;
  background:linear-gradient(180deg,#d7a53a,#efc55b)!important;
  box-shadow:inset 0 2px 4px rgba(82,57,12,.24)!important;
}
html[data-theme="bus-past"] body.vav-shell-mode #sendMessageBtn img,
html[data-theme="bus-past"] body.vav-shell-mode #mobileVoiceBtn img{
  filter:brightness(0) saturate(100%) invert(14%) sepia(14%) saturate(925%) hue-rotate(351deg) brightness(87%) contrast(91%)!important;
}

/* Media picker follows the same tactile chat controls. */
html[data-theme="bus-past"] .media-choice-modal .media-choice-card{
  border:1px solid #566269!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#3a454b,#313b40)!important;
  color:#eee9df!important;
  box-shadow:0 4px 12px rgba(0,0,0,.12),inset 0 1px rgba(255,255,255,.025)!important;
}
html[data-theme="bus-past"] .media-choice-modal .media-choice-card.primary{
  border-color:#9b7c35!important;
  background:linear-gradient(135deg,#5b4e31,#3a4244)!important;
}
html[data-theme="bus-past"] .media-choice-modal .media-choice-card img{width:28px!important;height:28px!important;filter:var(--th-icon-filter)!important}
html[data-theme="bus-past"] .media-choice-modal .media-choice-card strong{color:#fff5df!important}
html[data-theme="bus-past"] .media-choice-modal .media-choice-card span{color:#aaa79f!important}

/* ---------- PHONE ---------- */
@media(max-width:820px){
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .chat-header{
    min-height:68px!important;
    padding:7px 8px!important;
    grid-template-columns:42px 46px minmax(0,1fr) 42px!important;
    gap:7px!important;
  }
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .mobile-back-button,
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .chat-info-button{
    width:42px!important;height:42px!important;min-width:42px!important;border-radius:13px!important;padding:0!important;display:grid!important;place-items:center!important;
  }
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .mobile-back-button img,
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .chat-info-image{width:21px!important;height:21px!important}
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .chat-header .avatar-large{
    width:46px!important;height:46px!important;min-width:46px!important;border-radius:13px!important;
  }
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .chat-title{font-size:17px!important;max-width:56vw!important}
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .chat-subtitle{font-size:10px!important;margin-top:2px!important}

  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode #messageList{
    padding:12px 8px 14px!important;
  }
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .message-row{margin-bottom:9px!important}
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .message-bubble{
    padding:8px 10px!important;
    border-radius:14px 14px 14px 5px!important;
  }
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .message-row.mine .message-bubble{border-radius:14px 14px 5px 14px!important}

  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .voice-message.voice-player{
    width:min(76vw,320px)!important;
    grid-template-columns:34px minmax(105px,1fr) 34px!important;
    gap:6px!important;
  }
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .voice-play-button,
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .voice-speed-button{width:32px!important;height:32px!important;min-width:32px!important;font-size:10px!important}

  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .composer{
    padding:6px 7px calc(6px + env(safe-area-inset-bottom))!important;
  }
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .composer-row{
    grid-template-columns:minmax(0,1fr) 48px!important;
    gap:6px!important;
    align-items:end!important;
  }
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .composer-input-shell{
    min-height:48px!important;
    grid-template-columns:38px minmax(0,1fr) 38px!important;
    align-items:end!important;
    padding:3px!important;
    border-radius:16px!important;
  }
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .mobile-composer-inline{
    position:static!important;
    inset:auto!important;
    width:36px!important;min-width:36px!important;height:40px!important;min-height:40px!important;
    align-self:end!important;
    margin:0!important;padding:0!important;border-radius:11px!important;
    display:grid!important;place-items:center!important;
  }
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .mobile-composer-inline img{width:19px!important;height:19px!important}
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode #messageInput{
    min-height:40px!important;
    max-height:104px!important;
    padding:9px 4px 8px!important;
    border:0!important;
    border-radius:0!important;
    font-size:15px!important;
    line-height:20px!important;
  }
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode #sendMessageBtn,
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode #mobileVoiceBtn{
    width:48px!important;min-width:48px!important;height:48px!important;min-height:48px!important;border-radius:15px!important;
  }
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode #sendMessageBtn .send-icon-image,
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode #mobileVoiceBtn img{width:22px!important;height:22px!important}

  /* Keep the confirmed Stage 1A toggle working after this visual layer. */
  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}

  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .emoji-panel{
    bottom:calc(66px + env(safe-area-inset-bottom))!important;
    border-radius:14px!important;
    background:rgba(46,56,61,.985)!important;
  }
}

/* ---------- DESKTOP ---------- */
@media(min-width:821px){
  html[data-theme="bus-past"] body.vav-shell-mode .chat-window{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
  }
  html[data-theme="bus-past"] body.vav-shell-mode .chat-window>.app-titlebar{flex:0 0 auto!important;min-height:50px!important;height:50px!important;padding:6px 10px!important}
  html[data-theme="bus-past"] body.vav-shell-mode .active-chat:not(.hidden){display:flex!important;flex:1 1 0!important;min-height:0!important}
  html[data-theme="bus-past"] body.vav-shell-mode .chat-header{
    min-height:60px!important;
    grid-template-columns:48px minmax(0,1fr) auto!important;
    gap:10px!important;
    padding:7px 11px!important;
  }
  html[data-theme="bus-past"] body.vav-shell-mode .mobile-back-button{display:none!important}
  html[data-theme="bus-past"] body.vav-shell-mode .chat-header .avatar-large{width:46px!important;height:46px!important;border-radius:12px!important}
  html[data-theme="bus-past"] body.vav-shell-mode .chat-info-button{
    min-width:102px!important;height:36px!important;padding:0 10px!important;border-radius:10px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
  }
  html[data-theme="bus-past"] body.vav-shell-mode .chat-info-image{width:18px!important;height:18px!important}
  html[data-theme="bus-past"] body.vav-shell-mode .chat-info-text{display:inline!important;font-size:11px!important}

  html[data-theme="bus-past"] body.vav-shell-mode #messageList{
    flex:1 1 0!important;min-height:0!important;
    padding:14px 18px 16px!important;
  }

  html[data-theme="bus-past"] body.vav-shell-mode .composer{
    flex:0 0 auto!important;
    padding:0!important;
    border-top:1px solid #566269!important;
  }
  html[data-theme="bus-past"] body.vav-shell-mode .composer-recipient{
    height:28px!important;min-height:28px!important;padding:3px 9px!important;
    background:#2b353a!important;border-bottom:1px solid #465159!important;
    color:#aaa79f!important;font-size:10px!important;
  }
  html[data-theme="bus-past"] body.vav-shell-mode .composer-recipient .recipient-avatar{width:20px!important;min-width:20px!important;height:20px!important;border-radius:6px!important}
  html[data-theme="bus-past"] body.vav-shell-mode .composer-recipient strong{color:#e8dfcd!important}

  html[data-theme="bus-past"] body.vav-shell-mode .composer-toolbar{
    height:38px!important;min-height:38px!important;
    padding:3px 8px!important;gap:5px!important;
    border-bottom:1px solid #465159!important;
    background:linear-gradient(180deg,#333e43,#2d373c)!important;
  }
  html[data-theme="bus-past"] body.vav-shell-mode .composer-toolbar .tool-button{
    width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important;padding:5px!important;border-radius:8px!important;
  }
  html[data-theme="bus-past"] body.vav-shell-mode .composer-toolbar .button-icon{width:18px!important;height:18px!important}
  html[data-theme="bus-past"] body.vav-shell-mode .composer-tip{font-size:9px!important;color:#918f89!important;opacity:.85!important}

  html[data-theme="bus-past"] body.vav-shell-mode .composer-row{
    min-height:62px!important;
    grid-template-columns:minmax(0,1fr) 104px!important;
    gap:7px!important;
    padding:6px 8px 8px!important;
    align-items:end!important;
  }
  html[data-theme="bus-past"] body.vav-shell-mode .composer-input-shell{
    min-height:48px!important;
    height:auto!important;
    border-radius:11px!important;
    overflow:hidden!important;
  }
  html[data-theme="bus-past"] body.vav-shell-mode #messageInput{
    min-height:48px!important;height:48px!important;max-height:108px!important;
    padding:11px 12px!important;
    font-size:13px!important;line-height:19px!important;
    scrollbar-width:none!important;
  }
  html[data-theme="bus-past"] body.vav-shell-mode #messageInput::-webkit-scrollbar{display:none!important}
  html[data-theme="bus-past"] body.vav-shell-mode #sendMessageBtn{
    width:104px!important;min-width:104px!important;height:48px!important;min-height:48px!important;
    border-radius:11px!important;gap:7px!important;font-size:11px!important;
  }
  html[data-theme="bus-past"] body.vav-shell-mode #sendMessageBtn .send-icon-image{width:18px!important;height:18px!important}
  html[data-theme="bus-past"] body.vav-shell-mode #sendMessageBtn .send-text{display:inline!important;font-size:11px!important}
}

@media(max-width:370px){
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .composer-row{grid-template-columns:minmax(0,1fr) 46px!important;gap:5px!important}
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode #sendMessageBtn,
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode #mobileVoiceBtn{width:46px!important;min-width:46px!important;height:46px!important;min-height:46px!important}
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .chat-header{grid-template-columns:40px 43px minmax(0,1fr) 40px!important;gap:5px!important;padding-left:5px!important;padding-right:5px!important}
  html.vav-mobile-layout[data-theme="bus-past"] body.vav-shell-mode .chat-header .avatar-large{width:43px!important;height:43px!important;min-width:43px!important}
}