/* Compact chat overlays. Existing selection/upload handlers and IDs are retained. */
/* Important mobile rules already live in this layer; extend it deliberately
   so older full-height modal rules cannot win over compact layouts. */
@layer minigap-mobile-flow {
html[data-theme] body :is(#forwardModal,#uploadConfirmModal){
  --mm-paper:var(--cc-surface,var(--paper,#fff));--mm-ink:var(--cc-ink,var(--ink,#19363d));
  --mm-muted:var(--cc-muted,var(--muted,#61717a));--mm-line:var(--cc-line,var(--line,#d7e2e5));
  --mm-soft:var(--cc-soft,var(--bg,#f1f5f7));--mm-accent:var(--cc-accent,var(--brand,#187b68));--mm-on-accent:#fff;
  display:flex!important;padding:16px!important;align-items:center!important;justify-content:center!important;background:#07121ab3!important;backdrop-filter:none!important;
}
html[data-theme] body :is(#forwardModal,#uploadConfirmModal)[hidden]{display:none!important}
html[data-theme="dark"] body :is(#forwardModal,#uploadConfirmModal),html[data-theme="classic"] body :is(#forwardModal,#uploadConfirmModal){--mm-on-accent:#14212c}
html[data-mobile-design="flow"][data-theme] body :is(#forwardModal,#uploadConfirmModal){--mm-on-accent:var(--mf-on-accent,#fff)}
html[data-theme] body :is(#forwardModal,#uploadConfirmModal) :is(.forward-panel,.upload-confirm-panel){
  display:flex!important;flex-direction:column!important;width:min(100%,520px)!important;height:auto!important;
  max-height:calc(var(--app-height,100dvh) - 32px)!important;min-height:0!important;margin:0!important;padding:0!important;
  border:1px solid var(--mm-line)!important;border-radius:22px!important;background:var(--mm-paper)!important;
  color:var(--mm-ink)!important;box-shadow:0 16px 56px #0003!important;overflow:hidden!important;animation:none!important;
}
html[data-theme] body :is(#forwardModal,#uploadConfirmModal) :is(.forward-header,.upload-confirm-header){
  position:relative!important;top:auto!important;display:flex;align-items:center;justify-content:space-between;flex:0 0 auto!important;
  min-height:58px!important;margin:0!important;padding:10px 16px!important;border:0!important;border-bottom:1px solid var(--mm-line)!important;
  background:var(--mm-paper)!important;color:var(--mm-ink)!important;
}
html[data-theme] body :is(#forwardModal,#uploadConfirmModal) :is(.forward-kicker,.file-modal-kicker,.forward-source-label,.upload-caption-hint){display:none!important}
html[data-theme] body #uploadConfirmModal .upload-confirm-header::before,html[data-theme] body #uploadConfirmModal .upload-confirm-header::after{display:none!important}
html[data-theme] body :is(#forwardModal,#uploadConfirmModal) h3{margin:0!important;font-size:16px!important;color:var(--mm-ink)!important}
html[data-theme] body :is(#forwardModal,#uploadConfirmModal) .close-btn{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;min-height:40px!important;padding:0!important;background:var(--mm-soft)!important;color:var(--mm-ink)!important;border:0!important;border-radius:12px!important;box-shadow:none!important}
html[data-theme] body #forwardModal .forward-source{flex:0 0 auto!important;min-height:0;max-height:64px!important;margin:12px 16px 8px!important;padding:9px 12px!important;border:0!important;border-inline-start:3px solid var(--mm-accent)!important;border-radius:9px!important;background:var(--mm-soft)!important;overflow:hidden!important}
html[data-theme] body #forwardModal .forward-source strong{font-size:12px!important;color:var(--mm-muted)!important;font-weight:500}
html[data-theme] body #forwardModal .forward-source-icon{display:none!important}
html[data-theme] body #forwardModal .forward-destinations{flex:0 1 auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
html[data-theme] body #forwardModal .forward-destinations[hidden]{display:none!important}
html[data-theme] body #forwardModal .forward-search{flex:0 0 auto!important;margin:4px 16px 8px!important;padding:0 12px!important;border:1px solid var(--mm-line)!important;border-radius:12px!important;background:var(--mm-soft)!important;color:var(--mm-muted)!important}
html[data-theme] body #forwardModal .forward-search input{min-width:0!important;width:100%;min-height:44px!important;margin:0!important;padding:8px 0!important;background:transparent!important;border:0!important;color:var(--mm-ink)!important;font-size:16px!important;box-shadow:none!important}
html[data-theme] body #forwardModal .forward-destinations-head{flex:0 0 auto!important;margin:0!important;padding:4px 18px!important;color:var(--mm-muted)!important;font-size:11px!important}
html[data-theme] body #forwardModal .forward-list{flex:0 1 auto!important;min-height:56px!important;max-height:42dvh!important;margin:0!important;padding:0 8px 8px!important;overflow-y:auto!important;overscroll-behavior:contain}
html[data-theme] body #forwardModal .forward-target{min-height:62px!important;margin:2px 0!important;padding:8px!important;border:1px solid transparent!important;border-radius:12px!important;background:transparent!important;color:var(--mm-ink)!important;box-shadow:none!important;transform:none!important}
html[data-theme] body #forwardModal .forward-target:hover{background:var(--mm-soft)!important}
html[data-theme] body #forwardModal .forward-target.selected{border-color:var(--mm-accent)!important;background:var(--mm-soft)!important}
html[data-theme] body #forwardModal .forward-target-info strong{font-size:13px!important;color:var(--mm-ink)!important}
html[data-theme] body #forwardModal .forward-target-info small{font-size:11px!important;color:var(--mm-muted)!important}
html[data-theme] body #forwardModal .forward-empty{min-height:84px!important;padding:16px!important;color:var(--mm-muted)!important}
html[data-theme] body #forwardModal .forward-tabs{flex:0 0 auto!important;margin:4px 16px!important;padding:3px!important;background:var(--mm-soft)!important;border:0!important;border-radius:12px!important}
html[data-theme] body #forwardModal .forward-attachments{min-height:0!important;overflow:auto!important;padding:8px 16px!important;max-height:42dvh!important}
html[data-theme] body #forwardModal .forward-attachments[hidden]{display:none!important}
html[data-theme] body :is(#forwardModal,#uploadConfirmModal) :is(.forward-footer,.upload-confirm-footer){
  flex:0 0 auto!important;position:relative!important;bottom:auto!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important;min-height:0!important;height:auto!important;
  margin:0!important;padding:10px 16px!important;border:0!important;border-top:1px solid var(--mm-line)!important;background:var(--mm-paper)!important;box-shadow:none!important;
}
html[data-theme] body :is(#forwardModal,#uploadConfirmModal) :is(.forward-footer small,.upload-confirm-summary){min-width:0!important;flex:1 1 120px;color:var(--mm-muted)!important;font-size:11px!important;line-height:1.7!important}
html[data-theme] body :is(#forwardModal,#uploadConfirmModal) :is(.forward-footer button,.upload-confirm-actions button){min-height:44px!important;border-radius:12px!important;padding:8px 18px!important;box-shadow:none!important;font-size:13px!important}
html[data-theme] body :is(#forwardModal,#uploadConfirmModal) :is(.forward-footer button,.upload-confirm-actions button) span{font:inherit!important;color:inherit!important;-webkit-text-fill-color:currentColor!important}
html[data-theme] body :is(#forwardModal,#uploadConfirmModal) :is(#sendForward,#confirmUpload){background:var(--mm-accent)!important;color:var(--mm-on-accent)!important;border:1px solid transparent!important}
html[data-theme] body #uploadConfirmModal #cancelUploadConfirm{background:var(--mm-soft)!important;color:var(--mm-ink)!important;border:1px solid var(--mm-line)!important}
html[data-theme] body :is(#forwardModal,#uploadConfirmModal) button:disabled{opacity:.45;cursor:default}
html[data-theme] body :is(#forwardModal,#uploadConfirmModal) :is(button,input,textarea):focus-visible{outline:2px solid var(--mm-accent)!important;outline-offset:2px}
html[data-theme] body #forwardModal #sendForward{width:auto!important;min-width:96px!important;flex:0 0 auto!important;margin:0!important}
html[data-theme] body #uploadConfirmModal .upload-confirm-stage{flex:0 1 auto!important;min-height:0!important;max-height:min(32dvh,260px)!important;margin:12px 16px 0!important;padding:0!important;overflow:auto!important;border:0!important;border-radius:14px!important;background:var(--mm-soft)!important;overscroll-behavior:contain}
html[data-theme] body #uploadConfirmModal #uploadConfirmPreview{display:grid!important;height:auto!important;min-height:0!important;max-height:none!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;overflow:visible!important;gap:2px!important}
html[data-theme] body #uploadConfirmModal #uploadConfirmPreview :is(.file-preview-image,.file-preview-media){width:100%!important;max-height:min(30dvh,240px)!important;object-fit:contain!important;border:0!important;border-radius:0!important;box-shadow:none!important}
html[data-theme] body #uploadConfirmModal #uploadConfirmPreview .file-preview-empty{min-height:64px!important;padding:12px!important;gap:4px!important;font-size:12px!important;color:var(--mm-muted)!important}
html[data-theme] body #uploadConfirmModal #uploadConfirmPreview .file-preview-empty small{display:none!important}
html[data-theme] body #uploadConfirmModal .upload-file-card{min-width:0;min-height:60px!important;margin:0!important;padding:8px 10px!important;border:0!important;border-radius:0!important;background:var(--mm-soft)!important;box-shadow:none!important}
html[data-theme] body #uploadConfirmModal .upload-file-card-name{font-size:12px!important;color:var(--mm-ink)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-theme] body #uploadConfirmModal .upload-file-card-info{min-width:0}
html[data-theme] body #uploadConfirmModal .upload-file-card-icon{width:40px!important;height:40px!important;min-width:40px!important;flex-basis:40px!important;border-radius:10px!important;overflow:hidden}
html[data-theme] body #uploadConfirmModal .upload-file-card-icon img{width:100%;height:100%;object-fit:cover}
html[data-theme] body #uploadConfirmModal .upload-confirm-details{flex:0 0 auto;margin:0!important;padding:10px 16px!important;border:0!important;background:transparent!important;box-shadow:none!important}
html[data-theme] body #uploadConfirmModal #uploadConfirmIcon{display:none!important}
html[data-theme] body #uploadConfirmModal #uploadConfirmName{display:block;font-size:12px!important;font-weight:600;color:var(--mm-ink)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-theme] body #uploadConfirmModal #uploadConfirmMeta{font-size:11px!important;color:var(--mm-muted)!important}
html[data-theme] body #uploadConfirmModal .upload-caption-label{flex:0 0 auto!important;margin:0 16px 12px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
html[data-theme] body #uploadConfirmModal .upload-caption-heading{font-size:12px!important;color:var(--mm-muted)!important;margin-bottom:5px!important}
html[data-theme] body #uploadConfirmModal #uploadCaption{min-height:64px!important;max-height:112px!important;width:100%!important;margin:0!important;padding:9px 12px!important;border:1px solid var(--mm-line)!important;border-radius:12px!important;background:var(--mm-soft)!important;color:var(--mm-ink)!important;font-size:16px!important;box-shadow:none!important}
html[data-theme] body #uploadConfirmModal .upload-confirm-actions{flex:1 1 220px!important;display:flex!important;flex-direction:row!important;gap:8px!important}
html[data-theme] body #uploadConfirmModal .upload-confirm-actions button{flex:1!important;min-width:0!important;margin:0!important}
@media(max-width:700px){
  html[data-theme] body :is(#forwardModal,#uploadConfirmModal){padding:10px!important}
  html[data-theme] body :is(#forwardModal,#uploadConfirmModal) :is(.forward-panel,.upload-confirm-panel){max-height:calc(var(--app-height,100dvh) - 20px)!important;border-radius:20px!important}
}
@media(max-height:520px){
  html[data-theme] body #uploadConfirmModal .upload-confirm-panel{overflow-y:auto!important}
  html[data-theme] body #uploadConfirmModal :is(.upload-confirm-header,.upload-confirm-footer){position:sticky!important;z-index:3!important}
  html[data-theme] body #uploadConfirmModal .upload-confirm-header{top:0!important}
  html[data-theme] body #uploadConfirmModal .upload-confirm-footer{bottom:0!important}
  html[data-theme] body #uploadConfirmModal .upload-confirm-stage{max-height:100px!important;flex-shrink:0!important}
}
@media(prefers-reduced-motion:reduce){html[data-theme] body :is(#forwardModal,#uploadConfirmModal) *{animation:none!important;transition:none!important}}
}
/* TASK 763: a real label activates a rendered file input on mobile. */
#profileImageInput.profile-image-native-input{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;min-height:0!important;padding:0!important;margin:-1px!important;border:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
#profileImageButton:focus-visible{outline:2px solid var(--brand);outline-offset:3px}