/* Conversation geometry, independent of the brand palette and call screen. */
body.vobixConversation .vobixApp {
  --vobix-safe-bottom: inherit;
  --vobix-chat-clearance: max(16px, var(--vobix-safe-bottom, 0px));
  top: calc(var(--vobix-visual-top, 0px) + var(--vobix-safe-top));
  height: calc(var(--vobix-visual-height, 100dvh) - var(--vobix-safe-top) - var(--vobix-chat-clearance));
  min-height: 0;
}
/* Focusing a field is not proof that the keyboard is open (Android Back,
   a hardware keyboard, or a dismissed IME). Keep the system-bar clearance. */
html.vobixKeyboardOpen body.vobixConversation .vobixApp,
html.vobixNativeKeyboardOpen body.vobixConversation .vobixApp {
  --vobix-safe-bottom: 0px;
  --vobix-chat-clearance: 0px;
}
body.vobixConversation .vobixMain { min-height: 0; }
body.vobixConversation .messages { padding: 10px 12px 16px; gap: 6px; }
body.vobixConversation .messageRow { flex-shrink: 0; }
body.vobixConversation .messageBubble { white-space: normal; }
body.vobixConversation .messageText { white-space: pre-wrap; overflow-wrap: anywhere; }
body.vobixConversation .messageMeta {
  display: flex; justify-content: flex-end; align-items: center;
  flex-wrap: wrap; gap: 4px; margin-top: 3px; white-space: nowrap;
}
body.vobixConversation .messageMeta > :is(.messageTime,.messageStatus,.messageEdited) {
  display: inline-block; margin: 0; font-size: 10px; line-height: 1.2;
}
body.vobixConversation .messageMeta .messageStatus { font-size: 12px; }
body.vobixConversation .messageReactions:empty { display: none; }
body.vobixConversation .chatDateSeparator {
  flex: 0 0 auto; max-width: 100%; margin: 8px auto;
  padding: 5px 10px; font-size: 11px; font-weight: 600; line-height: 1.3;
}
body.vobixConversation:not(.vobixSeniorMode) .vobixBrandbar {
  flex: 0 0 28px; min-height: 28px; font-size: 15px; line-height: 1;
}
body.vobixConversation:not(.vobixSeniorMode) .vobixBrandbar::before { width: 19px; height: 19px; }
body.vobixConversation:not(.vobixSeniorMode) .vobixTopbar {
  flex: 0 0 auto; min-height: 66px; gap: 4px; padding: 6px 8px;
}
body.vobixConversation:not(.vobixSeniorMode) .vobixTopbar :is(.vobixBackButton,.vobixIconButton) {
  flex: 0 0 48px; width: 48px; min-width: 48px; height: 48px;
  padding: 0; display: grid; place-items: center;
}
body.vobixConversation .vobixTopbar #sendPhotoButton { display: none; }
body.vobixConversation:not(.vobixSeniorMode) .vobixTopbar .avatar {
  flex: 0 0 38px; width: 38px; min-width: 38px; height: 38px; font-size: 20px;
}
body.vobixConversation:not(.vobixSeniorMode) .vobixIdentity { gap: 2px; }
body.vobixConversation:not(.vobixSeniorMode) .vobixIdentity strong {
  font-size: 16px; line-height: 1.25; letter-spacing: 0;
}
body.vobixConversation:not(.vobixSeniorMode) .vobixIdentity #vobixConnectionStatus {
  font-size: 12px; line-height: 1.25;
}
body.vobixConversation:not(.vobixSeniorMode) .vobixIdentity .networkIndicator {
  font-size: 10px; line-height: 1.25; font-weight: 500;
}
/* Presence belongs to the contact. Only show a second line when our own
   connection needs attention, including on narrow mobile screens. */
body.vobixConversation .vobixIdentity .networkIndicator { display: none; }
body.vobixConversation .vobixIdentity .networkIndicator:is(.limited,.offline) {
  display: block; white-space: normal; overflow-wrap: anywhere;
}
body.vobixConversation:not(.vobixSeniorMode) .vobixIconButton svg { width: 23px; height: 23px; }
body.vobixConversation:not(.vobixSeniorMode) .messageBubble {
  max-width: min(86%, 560px); padding: 7px 10px 6px; border-radius: 15px;
}
body.vobixConversation:not(.vobixSeniorMode) .messageBubble.hasMessageMenu {
  min-height: 52px; padding-right: 49px;
}
body.vobixConversation:not(.vobixSeniorMode) .messageRow.theirs .messageBubble.hasMessageMenu {
  padding-left: 49px; padding-right: 10px;
}
body.vobixConversation:not(.vobixSeniorMode) .messageMenuButton {
  top: 1px; right: 1px; width: 48px; height: 48px; font-size: 16px;
}
body.vobixConversation:not(.vobixSeniorMode) .messageRow.theirs .messageMenuButton { left: 1px; right: auto; }
body.vobixConversation:not(.vobixSeniorMode) .vobixComposer {
  min-height: 68px; padding: 7px 8px; gap: 6px; align-items: flex-end;
}
body.vobixConversation:not(.vobixSeniorMode) .vobixMessageField {
  min-height: 54px; padding: 2px; gap: 0; border-radius: 27px;
}
body.vobixConversation:not(.vobixSeniorMode) .vobixMessageField .vobixComposerTool {
  flex: 0 0 48px; min-width: 48px; width: 48px; height: 48px; padding: 0;
}
body.vobixConversation:not(.vobixSeniorMode) .vobixMessageField #messageInput {
  width: 0; min-width: 0; min-height: 48px; padding: 13px 4px 11px;
  line-height: 1.35; max-height: min(220px, 38dvh);
}
body.vobixConversation:not(.vobixSeniorMode) .vobixActionSlot {
  flex: 0 0 54px; width: 54px; min-width: 54px; height: 54px;
}
body.vobixConversation:not(.vobixSeniorMode) .vobixComposerAction {
  width: 54px; min-width: 54px; height: 54px; padding: 0;
}
body.vobixConversation .vobixComposer .vobixLineIcon { width: 23px; height: 23px; }
html[data-vobix-font=large] body.vobixConversation .vobixIdentity strong { font-size: 18px; }
html[data-vobix-font=xlarge] body.vobixConversation .vobixIdentity strong { font-size: 20px; }
@media(max-width: 420px) {
  body.vobixConversation:not(.vobixSeniorMode) .vobixTopbar .avatar { display: none; }
}
@media(max-width: 370px) {
  body.vobixConversation:not(.vobixSeniorMode) .vobixTopbar { gap: 2px; padding-inline: 6px; }
  body.vobixConversation:not(.vobixSeniorMode) .vobixIdentity #vobixConnectionStatus { display: none; }
}
@media(max-height: 500px) {
  body.vobixConversation:not(.vobixSeniorMode) .vobixBrandbar { display: none; }
  body.vobixConversation:not(.vobixSeniorMode) .vobixIdentity .networkIndicator { display: none; }
}
@layer vobixLight {
  :where(body.vobixConversation:not(.seniorHighContrast):not(.contrast)) .messageMenuButton {
    background: transparent !important;
  }
  :where(body.vobixConversation:not(.seniorHighContrast):not(.contrast)) .vobixComposer {
    box-shadow: 0 -1px 0 #d2e7f4 !important;
  }
  :where(body.vobixConversation:not(.seniorHighContrast):not(.contrast))
    .vobixMessageField .vobixComposerTool:not(:disabled) {
    color: #153d57 !important; opacity: 1;
  }
  :where(body.vobixConversation:not(.seniorHighContrast):not(.contrast))
    .vobixComposerTool:disabled {
    opacity: .45; cursor: not-allowed;
  }
}

/* Attachment picker: compact actions, within the phone's safe viewport. */
#cameraChoicePanel.open{align-items:flex-end;padding:12px 12px max(16px,var(--vobix-safe-bottom,env(safe-area-inset-bottom)));}
#cameraChoicePanel .mediaPermissionCard{width:min(100%,420px);max-height:80dvh;overflow:auto;padding:18px;border-radius:24px;text-align:left;background:#fff;color:#12344c;}
#cameraChoicePanel .mediaPermissionIcon,#cameraChoicePanel .mediaPermissionCard>p{display:none;}
#cameraChoicePanel #cameraChoiceTitle{font-size:18px;line-height:1.3;margin:0 0 16px;color:#12344c;}
#cameraChoicePanel .cameraChoiceActions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
#cameraChoicePanel .cameraChoiceActions>button,#cameraChoicePanel .cameraChoiceActions #documentButton{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;min-height:82px;width:100%;height:auto;padding:8px 3px;border:0;border-radius:16px;background:#eef7ff;color:#12344c;font:600 12px/1.3 system-ui;}
#cameraChoicePanel .cameraChoiceActions svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;}
#cameraChoicePanel .cameraChoiceActions #viewOnceToggle{grid-column:1/-1;min-height:42px;flex-direction:row;font-size:13px;}
#cameraChoicePanel .cameraChoiceCancel{min-height:44px;margin-top:12px;font-size:14px;background:#f2f5f8;color:#23465c;border:0;}
#cameraChoicePanel .cameraChoiceActions #viewOnceToggle[aria-pressed=true]{background:#d6edff;color:#075fa6;outline:2px solid #078de2;}
body.vobixSeniorMode #cameraChoicePanel .cameraChoiceActions{grid-template-columns:repeat(2,minmax(0,1fr));}
body.vobixSeniorMode #cameraChoicePanel .cameraChoiceActions>button{font-size:18px;min-height:84px;}
.messageBubble.longPressActive{z-index:45;}
.messageBubble .messageActions.mobileOpen{max-height:min(360px,55dvh);overflow:auto;overscroll-behavior:contain;}
.messageActions .messageActionsClose{display:none}
.messageBubble .messageActions.mobileOpen .messageActionsClose{display:block;position:sticky;top:0;z-index:2;flex-shrink:0;background:#e4f3ff;color:#123d57}
.messageBubble .messageActions.mobileOpen>button{flex-shrink:0;overflow-wrap:normal;word-break:normal}
.messageBubble .chatMediaButton{-webkit-touch-callout:none;user-select:none;}

/* Message options stay in one compact column, even when the list must scroll. */
body.vobixConversation .messageRow .messageBubble .messageActions.mobileOpen {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  width: min(248px, calc(100vw - 24px));
  min-width: 0;
  gap: 2px;
  margin: 0;
  padding: 6px;
  border-radius: 16px;
  white-space: normal;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
}
.messageBubble .messageActions.mobileOpen .messageActionsClose { position: static; }
.messageActions.mobileOpen > *, .messageActionsExtra > * { flex-shrink: 0; }
.messageActionsExtra { display: flex; flex-flow: column nowrap; gap: 2px; border-top: 1px solid #d7e8f3; padding-top: 4px; }
.messageActionsExtra[hidden] { display: none !important; }
.messageActions.mobileOpen .replyMessageButton { width: 100%; min-width: 0; min-height: var(--vobix-menu-row, 44px); cursor: pointer; touch-action: manipulation; }
.messageActions.mobileOpen .replyMessageButton:focus-visible { outline: 2px solid #0095ff; outline-offset: -2px; }
.messageActions.mobileOpen .messageReactionPicker.open { display: grid; grid-template-columns: repeat(3, minmax(44px, 1fr)); gap: 2px; }
.messageActions.mobileOpen .messageReactionPicker button { min-height: 44px; min-width: 44px; font-size: 22px; }
body.vobixConversation .messageActions { --vobix-menu-row: 44px; }
html[data-vobix-controls=large] body.vobixConversation .messageActions,
body.vobixConversation.seniorExtraLarge .messageActions { --vobix-menu-row: 54px; }
@layer vobixLight {
  :where(body:not(.seniorHighContrast):not(.contrast)) .messageActions .messageActionDanger { color: #2b5fa2 !important; }
}

#cameraChoicePanel .cameraChoiceActions .cameraChoiceButton>span{font:600 12px/1.3 system-ui!important;margin:0;display:block;}
#cameraChoicePanel .cameraChoiceActions #documentButton{background:#eef7ff!important;}
body.vobixSeniorMode #cameraChoicePanel .cameraChoiceActions .cameraChoiceButton>span{font-size:18px!important;}

/* The camera returns when the draft is empty; typed text receives its width. */
body.vobixConversation .vobixMessageField #cameraButton[hidden] { display: none !important; }

/* Compact voice cards and stronger conversation text. */
body.vobixConversation .messageText{font-weight:600;line-height:1.5;}
body.vobixConversation #messageInput{font-weight:600;}
@layer vobixLight{
 :where(body.vobixConversation:not(.seniorHighContrast):not(.contrast)) :is(.messageText,#messageInput){color:#080b10!important;}
}
body.vobixConversation .messageRow .messageBubble.voiceMessage{
 width:min(258px,86%);max-width:min(258px,86%);min-width:0;box-sizing:border-box;
 display:grid;grid-template-columns:44px minmax(0,1fr) 44px;grid-template-rows:28px 18px;
 gap:4px 8px;padding:10px 48px 10px 10px;border-radius:20px;align-items:center;
}
body.vobixConversation .voiceMessage .voicePlayButton{grid-column:1;grid-row:1 / 3;width:44px;height:44px;min-width:44px;border-radius:50%;font-size:17px;box-shadow:0 3px 8px #1265b51a;}
body.vobixConversation .voiceMessage .voiceProgressArea{grid-column:2;grid-row:1;height:28px;min-width:0;}
body.vobixConversation .voiceMessage .voiceTime{grid-column:2;grid-row:2;min-width:0;font:600 11px/1.3 system-ui;text-align:left;white-space:nowrap;}
body.vobixConversation .voiceMessage .voiceSpeedButton{grid-column:3;grid-row:1 / 3;width:44px;height:44px;min-width:44px;border-radius:13px;padding:0;font:700 12px/1 system-ui;}
body.vobixConversation .voiceMessage .voiceProgressTrack{height:5px;border-radius:6px;}
body.vobixConversation .voiceMessage .voiceProgressDot{width:10px;height:10px;}
@layer vobixLight{
 :where(body.vobixConversation:not(.seniorHighContrast):not(.contrast)) .voiceTime{color:#183b58!important;}
 :where(body.vobixConversation:not(.seniorHighContrast):not(.contrast)) .voiceProgressTrack{background:#90b8d3!important;}
 :where(body.vobixConversation:not(.seniorHighContrast):not(.contrast)) :is(.voiceProgressFill,.voiceProgressDot){background:#086bd8!important;}
 :where(body.vobixConversation:not(.seniorHighContrast):not(.contrast)) .voiceSpeedButton{background:#e5f2ff!important;color:#123d61!important;border-color:#a8cce8!important;}
}
body.vobixConversation .voiceRecordingStatus{left:auto;right:8px;width:min(330px,calc(100% - 16px));max-width:calc(100% - 16px);box-sizing:border-box;flex-wrap:wrap;gap:8px;padding:10px;border-radius:20px;white-space:normal;box-shadow:0 6px 20px #173b5c24;}
body.vobixConversation .voiceRecordingStatus :is(.stopVoiceButton,.cancelVoiceButton){min-height:44px;border-radius:12px;padding:8px 10px;font:650 13px/1.3 system-ui;}
body.vobixConversation #voiceRecordingTime{font-variant-numeric:tabular-nums;font-weight:750;}
html:is([data-vobix-font=large],[data-vobix-font=xlarge]) body.vobixConversation .messageRow .voiceMessage{width:min(280px,90%);max-width:min(280px,90%);grid-template-rows:30px 22px;}
html:is([data-vobix-font=large],[data-vobix-font=xlarge]) body.vobixConversation .voiceMessage :is(.voiceTime,.voiceSpeedButton){font-size:13px;}