/* vAvtobyse CHAT FIX 1 — mobile chat usability / message editing */

/* Editing bar lives in the composer and never opens a modal. */
.edit-preview{
  margin:0 7px 5px;
  padding:7px 9px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  border:1px solid color-mix(in srgb,var(--th-accent,#d6ac49) 55%,var(--th-border,#65747b));
  border-left:4px solid var(--th-accent,#d6ac49);
  border-radius:10px;
  background:color-mix(in srgb,var(--th-panel-alt,#344047) 96%,transparent);
  color:var(--th-text,#eee6d7);
  box-shadow:0 2px 8px rgba(0,0,0,.16);
}
.edit-preview.hidden{display:none!important}
.edit-preview-main{min-width:0}
.edit-preview-title{font-size:11px;line-height:14px;font-weight:800;color:var(--th-accent,#d6ac49)}
.edit-preview-text{margin-top:2px;font-size:11px;line-height:15px;color:var(--th-muted,#b8b1a2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.edit-preview-close{width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--th-text,#eee6d7);font-size:18px;line-height:30px}
.edit-preview-close:active{background:color-mix(in srgb,var(--th-hover,#465158) 80%,transparent)}
body.vav-message-editing .send-button{box-shadow:0 0 0 2px color-mix(in srgb,var(--th-accent,#d6ac49) 48%,transparent),0 2px 7px rgba(0,0,0,.2)!important}

/* Context menu: fully opaque/readable, not dark text on a dark translucent panel. */
html[data-theme] .message-context-menu{
  color:var(--th-text,#eee6d7)!important;
  background:color-mix(in srgb,var(--th-panel,#303a3f) 98%,#000)!important;
  border:1px solid color-mix(in srgb,var(--th-accent,#d6ac49) 38%,var(--th-border,#65747b))!important;
  box-shadow:0 18px 54px rgba(0,0,0,.46)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html[data-theme] .message-context-menu button{
  color:var(--th-text,#eee6d7)!important;
  background:transparent!important;
  opacity:1!important;
}
html[data-theme] .message-context-menu button:hover,
html[data-theme] .message-context-menu button:focus,
html[data-theme] .message-context-menu button:active{
  color:var(--th-text,#fff)!important;
  background:color-mix(in srgb,var(--th-accent,#d6ac49) 15%,var(--th-panel-alt,#39454b))!important;
}
html[data-theme] .message-context-menu .danger-action{color:#ff6d64!important}
html[data-theme] .context-reaction-bar{
  border-bottom:1px solid color-mix(in srgb,var(--th-border,#65747b) 72%,transparent)!important;
  background:transparent!important;
}
html[data-theme] .context-reaction-bar button{color:inherit!important}

/* Quotes and reply/edit previews: compact and readable. */
html[data-theme] .message-reply-quote{
  margin-bottom:6px!important;
  padding:5px 7px!important;
  border-left:3px solid var(--th-accent,#d6ac49)!important;
  background:color-mix(in srgb,var(--th-panel-alt,#354148) 82%,transparent)!important;
}
html[data-theme] .message-reply-author{color:var(--th-accent,#d6ac49)!important}
html[data-theme] .message-reply-text{color:var(--th-text,#eee6d7)!important;opacity:.78}
html[data-theme] .reply-preview{
  padding:6px 8px!important;
  border-left-color:var(--th-accent,#d6ac49)!important;
  background:color-mix(in srgb,var(--th-panel-alt,#354148) 96%,transparent)!important;
}
html[data-theme] .reply-preview-title{color:var(--th-accent,#d6ac49)!important}
html[data-theme] .reply-preview-text{color:var(--th-text,#eee6d7)!important;opacity:.75}

@media (max-width:820px){
  /* Compact mobile header. */
  html[data-theme] .chat-header{
    min-height:calc(56px + env(safe-area-inset-top))!important;
    grid-template-columns:36px 38px minmax(0,1fr) 36px!important;
    gap:6px!important;
    padding:calc(5px + env(safe-area-inset-top)) 7px 5px!important;
  }
  html[data-theme] .mobile-back-button,
  html[data-theme] .chat-info-button{
    width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;
    padding:7px!important;border-radius:10px!important;
  }
  html[data-theme] .mobile-back-button img{width:20px!important;height:20px!important}
  html[data-theme] .chat-header .avatar-large{width:38px!important;height:38px!important;border-radius:11px!important}
  html[data-theme] .chat-title{font-size:14px!important;line-height:17px!important}
  html[data-theme] .chat-subtitle{font-size:10px!important;line-height:13px!important;margin-top:0!important}
  html[data-theme] .chat-title-line .bus-presence,
  html[data-theme] .chat-title-line .status-bus-c-image{width:22px!important;height:24px!important;flex-basis:22px!important}

  /* Messages stay readable without wasting width. */
  html[data-theme] .message-list{padding:9px 8px 10px!important;scrollbar-width:none!important}
  html[data-theme] .message-list::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}
  html[data-theme] .message-content{max-width:88%!important}
  html[data-theme] .message-bubble{padding:8px 10px!important;font-size:14px!important;line-height:1.36!important}

  /* Composer: actual one-line field, grows only when the text needs it. */
  html[data-theme] .composer{
    padding:4px 6px calc(4px + env(safe-area-inset-bottom))!important;
  }
  html[data-theme] .composer-row{
    grid-template-columns:minmax(0,1fr) 44px!important;
    gap:5px!important;
    padding:0!important;
    align-items:end!important;
  }
  html[data-theme] .composer-input-shell{
    grid-template-columns:34px minmax(0,1fr) 34px!important;
    min-height:44px!important;
    padding:2px!important;
    border-radius:22px!important;
    align-items:end!important;
  }
  html[data-theme] .mobile-composer-inline{
    width:34px!important;min-width:34px!important;height:40px!important;min-height:40px!important;
  }
  html[data-theme] .mobile-composer-inline img{width:21px!important;height:21px!important}
  html[data-theme] .composer textarea{
    box-sizing:border-box!important;
    width:100%!important;
    height:40px;
    min-height:40px!important;
    max-height:96px!important;
    padding:9px 2px 8px!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    resize:none!important;
    overflow-y:auto!important;
    background:transparent!important;
    color:var(--th-text,#eee6d7)!important;
    font-size:15px!important;
    line-height:20px!important;
    text-align:left!important;
    white-space:pre-wrap!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
  }
  html[data-theme] .composer textarea::placeholder{text-align:left!important;color:var(--th-muted,#9da6aa)!important;opacity:.8}
  html[data-theme] .send-button,
  html[data-theme] .mobile-voice-button{
    width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;
    border-radius:50%!important;
  }
  html[data-theme] .mobile-voice-button img,
  html[data-theme] .send-icon-image{width:22px!important;height:22px!important}
  html[data-theme] .pending-file,
  html[data-theme] .reply-preview,
  html[data-theme] .edit-preview{margin-left:0!important;margin-right:0!important;margin-bottom:4px!important;border-radius:10px!important}

  /* When a user is typing, global app navigation must not consume keyboard space. */
  body.vav-composer-focused .mobile-bottom-nav{display:none!important}
  body.vav-composer-focused .contacts-window{padding-bottom:0!important}

  /* Mobile long-press actions as a compact bottom sheet. */
  html[data-theme] .message-context-menu{
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:max(10px,env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    width:min(342px,calc(100vw - 20px))!important;
    min-width:0!important;
    max-height:min(68dvh,560px)!important;
    overflow-y:auto!important;
    padding:6px!important;
    border-radius:15px!important;
    box-shadow:0 0 0 100vmax rgba(0,0,0,.28),0 18px 54px rgba(0,0,0,.48)!important;
  }
  html[data-theme] .message-context-menu button{
    min-height:42px!important;
    padding:9px 11px!important;
    border-radius:9px!important;
    font-size:14px!important;
    line-height:18px!important;
  }
  html[data-theme] .context-reaction-bar{
    position:sticky!important;top:-6px!important;z-index:2!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:2px!important;
    padding:3px 2px 6px!important;
    margin:0 0 3px!important;
    background:color-mix(in srgb,var(--th-panel,#303a3f) 98%,#000)!important;
  }
  html[data-theme] .context-reaction-bar button{min-height:42px!important;padding:5px 2px!important;font-size:22px!important;text-align:center!important}
}

@media (max-width:370px){
  html[data-theme] .composer-row{grid-template-columns:minmax(0,1fr) 42px!important;gap:4px!important}
  html[data-theme] .composer-input-shell{grid-template-columns:32px minmax(0,1fr) 32px!important}
  html[data-theme] .mobile-composer-inline{width:32px!important;min-width:32px!important}
  html[data-theme] .send-button,
  html[data-theme] .mobile-voice-button{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important}
}