/* ---- MobileSheet (react/MobileSheet.tsx) -----------------------------
   Generic bottom sheet used as the mobile presentation for dialogs that
   are a draggable floating card on desktop (the "@" agent bubble, the
   comments panel). Not gated by `[data-de-layout="mobile"]` like the
   rest of `styles/mobile/` — this partial lives in `components/` because
   the component itself is only ever mounted by its caller's own `mobile`
   branch, so no extra CSS gate is needed. */

.docx-editor-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.32);
  display: flex;
  align-items: flex-end;
  animation: docx-editor-sheet-scrim-in 140ms ease-out;
}

.docx-editor-sheet {
  width: 100%;
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
  background: var(--de-surface, #ffffff);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
  padding-bottom: calc(
    var(--de-safe-bottom, env(safe-area-inset-bottom)) + var(--docx-editor-sheet-kb-inset, 0px)
  );
  animation: docx-editor-sheet-slide-in 180ms cubic-bezier(0.32, 0.72, 0, 1);
  touch-action: none;
}

.docx-editor-sheet__grab-zone {
  flex-shrink: 0;
  padding: 8px 0 4px;
  display: flex;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.docx-editor-sheet__grab-zone:active {
  cursor: grabbing;
}
.docx-editor-sheet__grabber {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--de-border-raw, #d0d7de);
}

.docx-editor-sheet__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 10px;
  border-bottom: 1px solid var(--de-border-raw, #d0d7de);
}
.docx-editor-sheet__title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--de-text, #1f2328);
}
.docx-editor-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--de-text-muted, #57606a);
  cursor: pointer;
  flex-shrink: 0;
}
.docx-editor-sheet__close:active {
  background: var(--de-surface-hover, #f1f5f9);
}

.docx-editor-sheet__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

@keyframes docx-editor-sheet-scrim-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes docx-editor-sheet-slide-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}