/* Profile Documents — sidebar section */
.memoriesDocuments {
  display: block;
}

.documentDocumentsPanel {
  padding: 0.25rem 0 1rem;
}

.documentHidden {
  display: none !important;
}

.documentVaultPanelIntroBar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(74, 139, 181, 0.1);
}

.documentVaultPanelIntroCopy {
  flex: 1 1 240px;
  min-width: 0;
}

.documentVaultPanelIntroActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-shrink: 0;
}

.documentVaultPanelTitle {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  color: #2c3340;
}

.documentVaultPanelHint {
  margin: 0;
  color: var(--memoriesTextMuted, #5a6578);
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 42rem;
}

.documentVaultAddDocumentButton,
.documentVaultExportButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex-shrink: 0;
  border-radius: var(--f2n-btn-radius, 999px);
  padding: var(--f2n-btn-pad, 0.7rem 1.35rem);
  cursor: pointer;
  font-family: var(--f2n-btn-font, "DM Sans", "Segoe UI", system-ui, sans-serif);
  font-size: var(--f2n-btn-size, 0.9375rem);
  font-weight: var(--f2n-btn-weight, 600);
  letter-spacing: 0.02em;
  line-height: 1.2;
  transition: background 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.documentVaultAddDocumentButton {
  border: 1px solid transparent;
  background: var(--f2n-btn-primary-bg, linear-gradient(180deg, #5c9120 0%, #487f14 100%));
  color: #fff;
  box-shadow: var(--f2n-btn-primary-shadow, 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 8px 22px rgba(92, 145, 32, 0.22));
}

.documentVaultAddDocumentButton:hover {
  background: var(--f2n-btn-primary-hover, linear-gradient(180deg, #56851f 0%, #3f6e12 100%));
}

.documentVaultAddDocumentButton:active,
.documentVaultExportButton:active {
  transform: scale(0.98);
}

.documentVaultAddDocumentButton i {
  font-size: 0.82rem;
}

.documentVaultExportButton {
  background: var(--f2n-btn-secondary-bg, #ffffff);
  color: var(--f2n-btn-secondary-color, #2c3340);
  border: var(--f2n-btn-secondary-border, 1px solid rgba(44, 51, 64, 0.18));
  box-shadow: 0 6px 18px rgba(4, 25, 77, 0.06);
}

.documentVaultExportButton:hover {
  background: #f7fafc;
  color: var(--color-text, #2c3340);
  border-color: rgba(74, 139, 181, 0.35);
}

.documentVaultExportButton.documentExportBusy,
.documentVaultExportButton.documentExportBusy:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--memoriesPrimary, #5c9120);
  border-color: rgba(92, 145, 32, 0.35);
  cursor: wait;
  transform: none;
  box-shadow: none;
}

.documentVaultExportButton.documentExportBusy i {
  color: var(--memoriesPrimary, #5c9120);
}

.documentVaultToolbar {
  margin-bottom: 0.75rem;
}

.documentVaultSearchInput {
  width: 100%;
  max-width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(30, 78, 120, 0.2);
  border-radius: 10px;
  font-size: 0.95rem;
}

.documentVaultDocuments {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.documentEmptyMini {
  padding: 1rem;
  border: 1px dashed rgba(30, 78, 120, 0.25);
  border-radius: 10px;
  color: #5a6578;
  text-align: center;
}

.documentButton {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid transparent;
  border-radius: var(--f2n-btn-radius, 999px);
  padding: var(--f2n-btn-pad, 0.7rem 1.35rem);
  background: var(--f2n-btn-primary-bg, linear-gradient(180deg, #5c9120 0%, #487f14 100%));
  color: #fff;
  cursor: pointer;
  font-family: var(--f2n-btn-font, "DM Sans", "Segoe UI", system-ui, sans-serif);
  font-size: var(--f2n-btn-size, 0.9375rem);
  font-weight: var(--f2n-btn-weight, 600);
  letter-spacing: 0.02em;
  box-shadow: var(--f2n-btn-primary-shadow, 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 8px 22px rgba(92, 145, 32, 0.22));
}

.documentButtonSmall {
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
}

.documentVaultDocumentRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid rgba(30, 78, 120, 0.15);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
}

.documentVaultDocumentRowMain {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  flex: 1 1 14rem;
  min-width: 0;
}

.documentVaultDocumentIcon {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(92, 145, 32, 0.1);
  color: #5c9120;
  flex-shrink: 0;
}

.documentVaultDocumentTitle {
  display: block;
  color: #2c3340;
}

.documentVaultDocumentMeta,
.documentVaultDocumentNotes {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: #5a6578;
}

.documentVaultDocumentRowActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  position: relative;
}

.documentVaultRowOpenButton,
.documentVaultRowDownloadButton {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(30, 78, 120, 0.2);
  color: #2c3340;
  text-decoration: none;
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.92);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.documentVaultRowOpenButton:hover,
.documentVaultRowDownloadButton:hover {
  border-color: rgba(92, 145, 32, 0.28);
  background: rgba(92, 145, 32, 0.06);
}

.documentVaultRowMenu {
  position: relative;
  margin-left: auto;
}

.documentVaultRowMenuTrigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid rgba(74, 139, 181, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #2c3340;
  cursor: pointer;
  list-style: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.documentVaultRowMenuTrigger::-webkit-details-marker {
  display: none;
}

.documentVaultRowMenu[open] .documentVaultRowMenuTrigger {
  border-color: rgba(92, 145, 32, 0.28);
  background: rgba(92, 145, 32, 0.08);
  box-shadow: 0 2px 8px rgba(74, 139, 181, 0.08);
}

.documentVaultRowMenuPanel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 8;
  min-width: 11rem;
  padding: 0.35rem;
  border: 1px solid rgba(74, 139, 181, 0.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(74, 139, 181, 0.12);
}

.documentVaultRowMenuItem {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.5rem 0.65rem;
  cursor: pointer;
  border-radius: 8px;
  color: #2c3340;
  font: inherit;
  font-size: 0.86rem;
}

.documentVaultRowMenuItem:hover,
.documentVaultRowMenuItem:focus-visible {
  background: rgba(92, 145, 32, 0.08);
  outline: none;
}

.documentVaultRowMenuItemDanger {
  color: #a43d3d;
}

.documentVaultRowMenuItemDanger:hover,
.documentVaultRowMenuItemDanger:focus-visible {
  background: rgba(164, 61, 61, 0.08);
}

.documentVaultAiBadge {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}

.documentVaultAiBadgeProcessing {
  background: rgba(92, 145, 32, 0.12);
  color: #5c9120;
}

.documentVaultAiBadgeReady {
  background: rgba(34, 139, 34, 0.12);
  color: #1d6b1d;
}

.documentVaultAiBadgeFailed {
  background: rgba(180, 35, 24, 0.1);
  color: #b42318;
}

.documentInput,
.documentSelect,
.documentTextarea {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(30, 78, 120, 0.2);
  border-radius: 8px;
  font: inherit;
}

.documentResponse {
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

.documentResponseError {
  color: #b42318;
}

.documentPollSettings {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.documentPollSettingField {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.documentPollSettingLabel {
  font-weight: 600;
  color: #2c3340;
}

.documentPollSettingHint {
  margin: 0;
  font-size: 0.82rem;
  color: #5a6578;
}

#documentVaultAiLightbox.form,
#groupVaultAiLightbox.form,
#documentPickerLightbox.form {
  display: none;
}

#documentVaultAiLightbox.form,
#groupVaultAiLightbox.form,
#documentPickerLightbox {
  position: fixed;
  inset: 0;
  z-index: var(--f2n-lightbox-nested-z, 10060) !important;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

#documentVaultAiLightbox *,
#groupVaultAiLightbox *,
#documentPickerLightbox * {
  box-sizing: border-box;
}

#documentVaultAiLightbox > .accountForm,
#groupVaultAiLightbox > .accountForm,
#documentPickerLightbox > .accountForm {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 900px);
  overflow: hidden;
  min-height: 0;
}

.documentVaultAiHead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem 0.65rem;
  padding-bottom: 0.15rem;
  margin-bottom: 0.75rem;
}

.documentVaultAiHeadText {
  flex: 1 1 12rem;
  min-width: 0;
}

.documentVaultAiIntro {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #5a6578;
}

#documentVaultAiLightbox button,
#documentVaultAiLightbox .documentButton,
#groupVaultAiLightbox button,
#groupVaultAiLightbox .documentButton {
  font-weight: 400;
}

#documentVaultAiLightbox .documentVaultAiOriginalBtn,
#groupVaultAiLightbox .documentVaultAiOriginalBtn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid #5c9120;
  border-radius: 999px;
  padding: 0.45rem 0.75rem;
  background: linear-gradient(180deg, #5c9120, #487f14);
  color: #fff;
  font-size: 0.85rem;
  box-shadow: 0 6px 16px rgba(92, 145, 32, 0.16);
}

#documentVaultAiLightbox .documentVaultAiOriginalBtn:hover,
#groupVaultAiLightbox .documentVaultAiOriginalBtn:hover {
  background: linear-gradient(180deg, #3a7199, #2c5678);
  box-shadow: 0 8px 20px rgba(92, 145, 32, 0.22);
}

.documentVaultAiPanelStage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  min-height: 0;
}

.documentVaultAiPanelSlide {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(22px);
  pointer-events: none;
  z-index: 0;
  transition:
    opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.48s;
  will-change: opacity, transform;
}

.documentVaultAiPanelSlide.documentVaultAiPanelActive {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  z-index: 1;
}

.documentVaultAiPanelSlide.documentVaultAiPanelExitUp {
  opacity: 0;
  transform: translateY(-18px);
}

.documentVaultAiTranslateSetupBusy .documentVaultAiTranslateStartBtn,
.documentVaultAiTranslateSetupBusy .documentVaultAiTranslateSetupLang {
  display: none !important;
}

.documentVaultAiProgress {
  margin: 0.75rem 0;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(92, 145, 32, 0.14);
  background: #fff;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.documentVaultAiProgressHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.documentVaultAiProgressLabel {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5c9120;
}

.documentVaultAiProgressPercent {
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #2c3340;
}

.documentVaultAiProgressTrack {
  height: 6px;
  border-radius: 999px;
  background: rgba(30, 78, 120, 0.12);
  overflow: hidden;
  margin: 0.35rem 0;
}

.documentVaultAiProgressBar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #5c9120, #487f14);
  transition: width 0.35s ease;
}

#documentVaultAiProgress[data-document-vault-ai-progress-kind="translate"] .documentVaultAiProgressBar {
  background: linear-gradient(90deg, #4a8bb5, #5ba0c4);
}

.documentVaultAiProgressIndeterminate .documentVaultAiProgressBar {
  width: inherit !important;
  animation: none;
}

.documentVaultAiProgressFailed {
  border-color: rgba(164, 61, 61, 0.28);
  background: linear-gradient(145deg, rgba(255, 251, 251, 0.98), rgba(255, 245, 245, 0.94));
}

.documentVaultAiProgressFailed .documentVaultAiProgressHeader {
  margin-bottom: 0.35rem;
}

.documentVaultAiProgressFailed .documentVaultAiProgressLabel,
.documentVaultAiProgressFailed .documentVaultAiProgressPercent {
  color: #a43d3d;
}

.documentVaultAiProgressFailed .documentVaultAiProgressLabel::before {
  content: "\f071";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 0.4rem;
  font-size: 0.72rem;
  opacity: 0.9;
}

.documentVaultAiProgressFailed .documentVaultAiProgressTrack {
  display: none;
}

.documentVaultAiProgressMessage {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #5a6578;
}

.documentVaultAiProgressFailed .documentVaultAiProgressMessage {
  margin-top: 0;
  color: #6b3030;
  font-size: 0.84rem;
  line-height: 1.45;
}

@keyframes documentVaultAiProgressPulse {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(320%);
  }
}

.documentVaultTitleModeWrap {
  margin-top: 0.55rem;
}

.documentVaultTitleReadonly,
.groupVaultTitleReadonly {
  background: rgba(248, 252, 253, 0.95);
  color: #5a6578;
  cursor: default;
}

.documentVaultAiTextarea,
.documentVaultAiRichEditor {
  min-height: 12rem;
  max-height: none;
  overflow: visible;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(30, 78, 120, 0.18);
  border-radius: 10px;
  background: #fff;
}

.documentVaultAiEditorScroll {
  min-height: 12rem;
  max-height: 40vh;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border: 1px solid rgba(30, 78, 120, 0.18);
  border-radius: 10px;
  background: #fff;
}

.documentVaultAiEditorScroll > .documentVaultAiTextarea,
.documentVaultAiEditorScroll > .documentVaultAiRichEditor {
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: 12rem;
  max-height: none;
  overflow: visible;
}

.documentVaultAiRichEditor:empty::before {
  content: attr(data-placeholder);
  color: #5a6578;
  pointer-events: none;
}

#documentVaultAiProgress:not(.documentHidden) + .documentVaultAiPanelStage {
  margin-top: 0.35rem;
}

#documentVaultAiLightbox > .accountForm,
#groupVaultAiLightbox > .accountForm {
  width: min(960px, 96vw);
  max-width: min(960px, 96vw);
}

#documentVaultAiLightbox .documentVaultAiBody,
#groupVaultAiLightbox .documentVaultAiBody {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 0.15rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
}

/* Transcription / Translation + language tabs — match #memoriesDepart After I Depart pills; undo .accountForm button */
#documentVaultAiLightbox .accountForm .documentVaultAiSectionNav .memoriesDepartTabs,
#documentVaultAiLightbox .accountForm .documentVaultAiTranslationTabs.memoriesDepartTabs,
#groupVaultAiLightbox .accountForm .documentVaultAiSectionNav .memoriesDepartTabs,
#groupVaultAiLightbox .accountForm .documentVaultAiTranslationTabs.memoriesDepartTabs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  width: auto;
  max-width: 100%;
  margin: 0 0 1.25rem;
  padding: 0.32rem;
  border: 1px solid rgba(92, 145, 32, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 24px rgba(74, 139, 181, 0.07);
  box-sizing: border-box;
}

#documentVaultAiLightbox .accountForm .documentVaultAiTranslationTabs.memoriesDepartTabs,
#groupVaultAiLightbox .accountForm .documentVaultAiTranslationTabs.memoriesDepartTabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(30, 78, 120, 0.22) transparent;
}

#documentVaultAiLightbox .accountForm .documentVaultAiTranslationTabs.memoriesDepartTabs::-webkit-scrollbar,
#groupVaultAiLightbox .accountForm .documentVaultAiTranslationTabs.memoriesDepartTabs::-webkit-scrollbar {
  height: 4px;
}

#documentVaultAiLightbox .accountForm .documentVaultAiTranslationTabs.memoriesDepartTabs::-webkit-scrollbar-thumb,
#groupVaultAiLightbox .accountForm .documentVaultAiTranslationTabs.memoriesDepartTabs::-webkit-scrollbar-thumb {
  background: rgba(30, 78, 120, 0.2);
  border-radius: 999px;
}

#documentVaultAiLightbox .accountForm .memoriesDepartTabs .memoriesDepartTab,
#groupVaultAiLightbox .accountForm .memoriesDepartTabs .memoriesDepartTab,
#documentVaultAiLightbox .accountForm button.memoriesDepartTab ,
#groupVaultAiLightbox .accountForm button.memoriesDepartTab {
  appearance: none;
  -webkit-appearance: none;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0.58rem 1rem;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--memoriesMuted, #5a6578) !important;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  transform: none;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#documentVaultAiLightbox .accountForm .memoriesDepartTabs .memoriesDepartTab:hover:not(.memoriesDepartTabActive):not(.documentVaultAiTranslationTabPending),
#groupVaultAiLightbox .accountForm .memoriesDepartTabs .memoriesDepartTab:hover:not(.memoriesDepartTabActive):not(.documentVaultAiTranslationTabPending),
#documentVaultAiLightbox .accountForm button.memoriesDepartTab:hover:not(.memoriesDepartTabActive):not(.documentVaultAiTranslationTabPending) ,
#groupVaultAiLightbox .accountForm button.memoriesDepartTab:hover:not(.memoriesDepartTabActive):not(.documentVaultAiTranslationTabPending) {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--memoriesPrimary, #5c9120) !important;
  transform: translateY(-1px);
}

#documentVaultAiLightbox .accountForm .memoriesDepartTabs .memoriesDepartTab:active:not(.memoriesDepartTabActive),
#groupVaultAiLightbox .accountForm .memoriesDepartTabs .memoriesDepartTab:active:not(.memoriesDepartTabActive),
#documentVaultAiLightbox .accountForm button.memoriesDepartTab:active:not(.memoriesDepartTabActive) ,
#groupVaultAiLightbox .accountForm button.memoriesDepartTab:active:not(.memoriesDepartTabActive) {
  background: transparent !important;
  background-color: transparent !important;
}

#documentVaultAiLightbox .accountForm .memoriesDepartTabs .memoriesDepartTab.memoriesDepartTabActive,
#groupVaultAiLightbox .accountForm .memoriesDepartTabs .memoriesDepartTab.memoriesDepartTabActive,
#documentVaultAiLightbox .accountForm .memoriesDepartTabs .memoriesDepartTab.memoriesDepartTabActive:hover,
#groupVaultAiLightbox .accountForm .memoriesDepartTabs .memoriesDepartTab.memoriesDepartTabActive:hover,
#documentVaultAiLightbox .accountForm .memoriesDepartTabs .memoriesDepartTab.memoriesDepartTabActive:focus,
#groupVaultAiLightbox .accountForm .memoriesDepartTabs .memoriesDepartTab.memoriesDepartTabActive:focus,
#documentVaultAiLightbox .accountForm button.memoriesDepartTab.memoriesDepartTabActive,
#groupVaultAiLightbox .accountForm button.memoriesDepartTab.memoriesDepartTabActive,
#documentVaultAiLightbox .accountForm button.memoriesDepartTab.memoriesDepartTabActive:hover,
#groupVaultAiLightbox .accountForm button.memoriesDepartTab.memoriesDepartTabActive:hover,
#documentVaultAiLightbox .accountForm button.memoriesDepartTab.memoriesDepartTabActive:focus ,
#groupVaultAiLightbox .accountForm button.memoriesDepartTab.memoriesDepartTabActive:focus {
  background: linear-gradient(135deg, var(--memoriesPrimary, #5c9120), var(--memoriesPrimaryDark, #487f14)) !important;
  background-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(92, 145, 32, 0.2);
}

#documentVaultAiLightbox .accountForm .memoriesDepartTabs .memoriesDepartTab:focus-visible,
#groupVaultAiLightbox .accountForm .memoriesDepartTabs .memoriesDepartTab:focus-visible,
#documentVaultAiLightbox .accountForm button.memoriesDepartTab:focus-visible ,
#groupVaultAiLightbox .accountForm button.memoriesDepartTab:focus-visible {
  outline: 2px solid rgba(92, 145, 32, 0.45);
  outline-offset: 2px;
}

#documentVaultAiLightbox .documentVaultAiSectionNav .memoriesDepartTabs ,
#groupVaultAiLightbox .documentVaultAiSectionNav .memoriesDepartTabs {
  margin-bottom: 0;
}

.documentVaultAiSectionNav {
  position: sticky;
  top: 0;
  z-index: 4;
  margin: 0.35rem 0 0.65rem;
  padding: 0.2rem 0 0.45rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 82%, rgba(255, 255, 255, 0));
}

.documentVaultAiCard {
  position: relative;
  z-index: 1;
  margin-top: 0.35rem;
}

.documentVaultAiCardTitle {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: #5c9120;
  width: 100%;
  flex: 1 1 100%;
  min-width: 0;
}

.documentVaultAiCardHead {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(74, 139, 181, 0.1);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 253, 0.94));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 20px rgba(74, 139, 181, 0.05);
  position: relative;
  z-index: 2;
}

.documentVaultAiCardTools {
  display: grid;
  grid-template-columns: auto minmax(8rem, 1fr) auto;
  align-items: center;
  gap: 0.45rem 0.55rem;
  width: 100%;
  flex: 1 1 100%;
  min-width: 0;
}

.documentVaultAiCardTools--printOnly {
  display: flex;
  justify-content: flex-end;
  width: auto;
  flex: 0 0 auto;
  margin-left: auto;
}

.documentVaultAiInlineLabel {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #5a6578;
  white-space: nowrap;
}

.documentVaultAiLangSelect {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0 !important;
  padding: 0.42rem 0.6rem !important;
  font-size: 0.85rem;
  border-radius: 8px !important;
}

#documentVaultAiLightbox .documentVaultAiPrintBtn ,
#groupVaultAiLightbox .documentVaultAiPrintBtn {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  text-transform: none;
  -webkit-tap-highlight-color: transparent;
}

#documentVaultAiLightbox .accountForm .documentVaultAiPrintBtn ,
#groupVaultAiLightbox .accountForm .documentVaultAiPrintBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  margin: 0;
  padding: 0.4rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid rgba(30, 78, 120, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  background-color: rgba(255, 255, 255, 0.95);
  color: #2c3340;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  transform: none;
}

#documentVaultAiLightbox .accountForm .documentVaultAiPrintBtn:hover ,
#groupVaultAiLightbox .accountForm .documentVaultAiPrintBtn:hover {
  background: rgba(92, 145, 32, 0.08);
  background-color: rgba(92, 145, 32, 0.08);
  border-color: rgba(92, 145, 32, 0.35);
  color: #2c3340;
}

.documentVaultAiPrintBtn i {
  font-size: 0.72rem;
}

.documentVaultAiTranslationTabPending {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  opacity: 0.82;
  pointer-events: none;
}

.documentVaultAiTranslationTabPending::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.42rem;
  border-radius: 50%;
  border: 1.5px solid rgba(30, 78, 120, 0.22);
  border-top-color: #5c9120;
  animation: documentVaultAiTabSpin 0.75s linear infinite;
}

@keyframes documentVaultAiTabSpin {
  to {
    transform: rotate(360deg);
  }
}

.documentVaultAiRichEditor table,
.documentVaultAiTextarea table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
}

.documentVaultAiRichEditor th,
.documentVaultAiRichEditor td,
.documentVaultAiTextarea th,
.documentVaultAiTextarea td {
  border: 1px solid rgba(30, 78, 120, 0.22);
  padding: 0.35rem 0.5rem;
  vertical-align: top;
}

@media screen and (max-width: 767px) {
  /* Documents panel list */
  .documentVaultPanelIntroBar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .documentVaultPanelIntroActions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .documentVaultAddDocumentButton,
  .documentVaultExportButton {
    width: 100%;
    justify-content: center;
    min-height: 2.75rem;
  }

  .documentVaultSearchInput {
    font-size: 16px;
  }

  .documentVaultDocumentRow {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    padding: 0.75rem;
  }

  .documentVaultDocumentRowMain {
    width: 100%;
  }

  .documentVaultDocumentRowActions {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: stretch;
  }

  .documentVaultTranscribeButton,
  .documentVaultRowOpenButton,
  .documentVaultRowDownloadButton {
    flex: 1 1 calc(50% - 0.22rem);
    justify-content: center;
    min-height: 2.5rem;
    text-align: center;
  }

  .documentVaultRowMenu {
    margin-left: auto;
  }

  .documentVaultRowMenuPanel {
    min-width: min(12.75rem, calc(100vw - 3rem));
    right: 0;
    left: auto;
  }

  .documentVaultRowMenuTrigger {
    width: 2.35rem;
    height: 2.35rem;
  }

  .documentVaultRowMenuItem {
    padding: 0.72rem 0.85rem;
    font-size: 0.9rem;
    min-height: 2.5rem;
  }

  /* Transcribe / translate lightbox — bottom sheet */
  #documentVaultAiLightbox.form, #groupVaultAiLightbox.form,
  #documentPickerLightbox.form {
    justify-content: flex-end;
    align-items: stretch;
    overflow: hidden;
    padding: 0;
    min-height: 100dvh;
  }

  #documentVaultAiLightbox> .accountForm, #groupVaultAiLightbox> .accountForm,
  #documentPickerLightbox > .accountForm {
    width: 100%;
    max-width: 100%;
    max-height: min(94dvh, 100%);
    margin-bottom: 0;
    border-radius: var(--f2n-lightbox-mobile-card-radius, 16px 16px 0 0);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    flex: 0 1 auto;
  }

  #documentVaultAiLightbox> .accountForm > .close, #groupVaultAiLightbox> .accountForm > .close,
  #documentPickerLightbox > .accountForm > .close {
    flex-shrink: 0;
  }

  #documentVaultAiLightbox .documentPollFormBody.documentVaultAiBody,
#groupVaultAiLightbox .documentPollFormBody.documentVaultAiBody,
  #documentVaultAiLightbox .documentVaultAiBody ,
#groupVaultAiLightbox .documentVaultAiBody {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }

  .documentVaultAiHead {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }

  .documentVaultAiHeadText h2 {
    font-size: 1.2rem;
    line-height: 1.25;
  }

  #documentVaultAiLightbox .documentVaultAiOriginalBtn ,
#groupVaultAiLightbox .documentVaultAiOriginalBtn {
    width: 100%;
    justify-content: center;
    min-height: 2.5rem;
  }

  #documentVaultAiLightbox .accountForm .documentVaultAiSectionNav .memoriesDepartTabs ,
#groupVaultAiLightbox .accountForm .documentVaultAiSectionNav .memoriesDepartTabs {
    display: flex;
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 0.25rem;
    padding: 0.28rem;
  }

  #documentVaultAiLightbox .accountForm .documentVaultAiSectionNav .memoriesDepartTab,
#groupVaultAiLightbox .accountForm .documentVaultAiSectionNav .memoriesDepartTab,
  #documentVaultAiLightbox .accountForm .documentVaultAiSectionNav button.memoriesDepartTab ,
#groupVaultAiLightbox .accountForm .documentVaultAiSectionNav button.memoriesDepartTab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.58rem 0.45rem;
    font-size: 0.82rem;
    text-align: center;
  }

  #documentVaultAiLightbox .accountForm .documentVaultAiTranslationTabs.memoriesDepartTabs,
#groupVaultAiLightbox .accountForm .documentVaultAiTranslationTabs.memoriesDepartTabs {
    width: 100%;
    max-width: 100%;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.2rem;
  }

  #documentVaultAiLightbox .accountForm .memoriesDepartTabs .memoriesDepartTab,
#groupVaultAiLightbox .accountForm .memoriesDepartTabs .memoriesDepartTab,
  #documentVaultAiLightbox .accountForm button.memoriesDepartTab ,
#groupVaultAiLightbox .accountForm button.memoriesDepartTab {
    width: auto !important;
    max-width: none !important;
    margin-top: 0 !important;
  }

  .documentVaultAiCardHead {
    flex-wrap: wrap;
  }

  .documentVaultAiCardTools {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .documentVaultAiTranslateSetup {
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
  }

  .documentVaultAiTranslateSetup .documentVaultAiInlineLabel {
    margin-top: 0;
    align-self: center;
  }

  .documentVaultAiTranslateSetup .documentVaultAiLangSelect,
  .documentVaultAiTranslateSetup .documentButton {
    width: 100%;
    max-width: none;
    font-size: 16px;
  }

  .documentVaultAiTranslateSetup .documentVaultAiTranslateStartBtn {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
    min-height: 2.5rem;
  }

  .documentVaultAiCardTools .documentVaultAiPrintBtn,
  .documentVaultAiPreviewTools .documentVaultAiPrintBtn {
    width: 100%;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.58rem 0.75rem;
    font-size: 0.84rem;
    border-radius: 10px;
  }

  .documentVaultAiPreviewHead {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
  }

  .documentVaultAiPreviewTools {
    width: 100%;
  }

  .documentVaultAiToolbarRow,
  .documentVaultAiToolbarRow--actions {
    flex-direction: column;
    align-items: stretch;
  }

  .documentVaultAiPrimaryActionSlot {
    width: 100%;
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding-top: 0.35rem;
    padding-bottom: max(0.35rem, env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 28%);
  }

  .documentVaultAiPrimaryActionSlot > .documentVaultAiSlotBtn,
  .documentVaultAiToolbarBtn {
    width: 100%;
    justify-content: center;
    min-height: 2.75rem;
    white-space: normal;
    text-align: center;
  }

  .documentVaultAiEditorScroll {
    min-height: min(36dvh, 16rem);
    max-height: min(52dvh, 26rem);
    overflow-x: auto;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }

  .documentVaultAiEditorScrollPreview {
    max-height: min(40dvh, 20rem);
  }

  .documentVaultAiEditorScroll > .documentVaultAiTextarea,
  .documentVaultAiEditorScroll > .documentVaultAiRichEditor.documentVaultAiTextarea {
    min-height: min(36dvh, 16rem);
    max-height: none;
    overflow: visible;
    font-size: 16px;
    touch-action: pan-y;
  }

  .documentVaultAiTextarea,
  .documentVaultAiRichEditor.documentVaultAiTextarea {
    min-height: min(36dvh, 16rem);
    max-height: none;
    font-size: 16px;
  }

  .documentVaultAiRichEditor.documentVaultAiTextareaPreview {
    max-height: none;
  }

  .documentVaultAiPanelStage {
    overflow: visible;
    flex: 0 0 auto;
  }

  .documentVaultAiPanelSlide.documentVaultAiPanelActive {
    /* Keep the active panel in normal flow so the lightbox body can scroll */
    position: relative;
  }

  .documentVaultAiCardActions {
    position: relative;
    z-index: 2;
  }

  .documentVaultAiRichEditor {
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
  }

  .documentVaultAiRichEditor table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .documentVaultAiProgressHeader {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  /* Document picker */
  #documentPickerLightbox .documentPollFormBody {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .documentPickerList {
    max-height: min(50dvh, 20rem);
  }

  .documentPickerCard {
    padding: 0.75rem 0.8rem;
    min-height: 2.75rem;
  }

  .documentPickerToolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .documentPickerPagination {
    justify-content: center;
    margin-left: 0;
  }
}

.documentVaultAiToolbarRow--actions {
  margin-top: 0.65rem;
}

.documentVaultAiTranslateSetup {
  display: grid;
  grid-template-columns: auto minmax(8rem, 1fr) auto minmax(8rem, 1fr) auto;
  align-items: center;
  gap: 0.45rem 0.55rem;
  margin-bottom: 0.65rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(74, 139, 181, 0.1);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 253, 0.94));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 20px rgba(74, 139, 181, 0.05);
}

.documentVaultAiCardActions .documentButton,
.documentVaultAiTranslateSetup .documentButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  white-space: nowrap;
}

.documentVaultAiTranslationTabs {
  margin-bottom: 0.65rem;
}

.documentVaultAiTranslationPreview {
  margin-top: 0.5rem;
}

.documentVaultAiPreviewHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

.documentVaultAiRevealBtn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.documentVaultAiRevealBtnVisible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.documentVaultAiPrimaryActionSlot > .documentVaultAiSlotBtn,
.documentVaultTranscribeButton,
#documentVaultAiStartTranscription,
#documentVaultAiOpenTranslate,
#documentVaultAiStartTranslation,
#groupVaultAiStartTranscription,
#groupVaultAiOpenTranslate,
#groupVaultAiStartTranslation {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.documentLinkedChips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
}

.documentAttachPanel {
  margin: 0.85rem 0 1.1rem;
  padding: 0.95rem 1rem 1rem;
  border: 1px solid rgba(30, 78, 120, 0.14);
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fbfd 0%, #f3f7fa 100%);
  box-shadow: 0 1px 2px rgba(30, 78, 120, 0.04);
}

.documentAttachPanelHead {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.documentAttachPanelIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 10px;
  background: rgba(30, 78, 120, 0.08);
  color: #2c3340;
  font-size: 1rem;
  flex-shrink: 0;
}

.documentAttachPanelCopy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.documentAttachPanelTitle {
  font-weight: 600;
  color: #2c3340;
  font-size: 0.95rem;
}

.documentAttachPanelHint {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #5a6578;
}

.documentAttachPanelBody {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(30, 78, 120, 0.1);
}

.documentAttachChips:not(:empty) {
  min-height: 0.25rem;
}

.documentAttachEmpty {
  margin: 0;
  font-size: 0.84rem;
  color: #7a8b99;
  font-style: italic;
}

.documentAttachPanelHasFiles .documentAttachEmpty {
  display: none;
}

.documentAttachChooseButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  align-self: flex-start;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(30, 78, 120, 0.22);
  border-radius: 8px;
  background: #fff;
  color: #2c3340;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.documentAttachChooseButton:hover {
  background: #f4f9fc;
  border-color: rgba(92, 145, 32, 0.35);
  box-shadow: 0 1px 3px rgba(30, 78, 120, 0.08);
}

.documentAttachChooseButton:focus-visible {
  outline: 2px solid #5c9120;
  outline-offset: 2px;
}

.documentLinkedChip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.55rem 0.35rem 0.5rem;
  border-radius: 8px;
  background: #faf6ee;
  color: #5c4a2a;
  font-size: 0.84rem;
  border: 1px solid rgba(180, 145, 60, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 252, 245, 0.65);
  max-width: 100%;
}

.documentLinkedChip i {
  color: #8a6d3b;
}

.documentLinkedChipText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}

.documentLinkedChipMeta {
  font-size: 0.75rem;
  color: #7a6540;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

.documentLinkedChipPrivate {
  opacity: 0.85;
}

.documentLinkedChipRemove {
  border: 0;
  background: transparent;
  color: #5a6578;
  cursor: pointer;
  padding: 0 0.15rem;
  line-height: 1;
  font-size: 1rem;
}

.documentLinkedChipRemove:hover {
  color: #b42318;
}

.documentLinkedDocuments {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.5rem 0 0.25rem;
}

.documentLinkedDocumentItem {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  color: #2c3340;
}

.documentLinkedDocumentItem a {
  color: #5c9120;
  text-decoration: none;
}

.documentLinkedDocumentItem a:hover {
  text-decoration: underline;
}

.documentPickerToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: rgba(250, 246, 238, 0.75);
  border: 1px solid rgba(180, 145, 60, 0.18);
}

.documentPickerSelectionSummary {
  font-size: 0.84rem;
  font-weight: 600;
  color: #6b5630;
}

.documentPickerPagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-left: auto;
}

.documentPickerPageInfo,
.documentPickerPageCurrent {
  font-size: 0.8rem;
  color: #5a6578;
}

.documentPickerPageBtn {
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(30, 78, 120, 0.2);
  border-radius: 6px;
  background: #fff;
  color: #2c3340;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.documentPickerPageBtn:hover {
  background: #f4f9fc;
  border-color: rgba(92, 145, 32, 0.35);
}

.documentPickerPageBtn:focus-visible {
  outline: 2px solid #5c9120;
  outline-offset: 2px;
}

.documentPickerList {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 18rem;
  overflow: auto;
  margin: 0;
}

.documentPickerCard {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(30, 78, 120, 0.14);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.documentPickerCard:hover {
  border-color: rgba(92, 145, 32, 0.35);
  background: #f8fbfd;
}

.documentPickerCardSelected,
.documentPickerCard:has(.documentPickerCardInput:checked) {
  background: #faf6ee;
  border-color: rgba(180, 145, 60, 0.45);
  box-shadow: inset 0 0 0 1px rgba(210, 175, 90, 0.22), 0 1px 3px rgba(140, 110, 50, 0.08);
}

.documentPickerCardSelected:hover,
.documentPickerCard:has(.documentPickerCardInput:checked):hover {
  background: #f6f0e4;
  border-color: rgba(180, 145, 60, 0.55);
}

.documentPickerCardInput {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.documentPickerCardCheck {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  border: 2px solid #9eb4c8;
  border-radius: 4px;
  flex-shrink: 0;
  background: #fff;
  position: relative;
}

.documentPickerCardInput:checked + .documentPickerCardCheck {
  border-color: #9a7b3f;
  background: #9a7b3f;
}

.documentPickerCardInput:checked + .documentPickerCardCheck::after {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.02rem;
  width: 0.28rem;
  height: 0.55rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.documentPickerCardInput:focus-visible + .documentPickerCardCheck {
  outline: 2px solid #5c9120;
  outline-offset: 2px;
}

.documentPickerCardInput:checked ~ .documentPickerCardBody .documentPickerCardTitle {
  color: #6b5630;
}

.documentPickerCardBody {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.documentPickerCardTitle {
  font-weight: 600;
  color: #2c3340;
  line-height: 1.35;
}

.documentPickerCardMeta {
  font-size: 0.8rem;
  color: #5a6578;
}

.documentPickerFormBody .buttonContainer {
  margin-top: 0.5rem;
}

.documentPickerSettings {
  margin-bottom: 0;
}

.diaryEditForm .documentAttachPanel {
  margin-top: 0.85rem;
  margin-bottom: 0.75rem;
}

#documentVaultUploadLightbox #documentVaultUploadSubmitButton.documentSubmitBusy,
#groupVaultUploadLightbox #groupVaultUploadSubmitButton.documentSubmitBusy {
  opacity: 0.92;
  cursor: wait;
}

#documentVaultUploadLightbox #documentVaultUploadSubmitButton.documentSubmitBusy i,
#groupVaultUploadLightbox #groupVaultUploadSubmitButton.documentSubmitBusy i {
  margin-right: 0.35rem;
}