/*
 * UniDoc calm editor theme.
 *
 * The structure and interaction model remain UniDoc's; this layer only brings
 * the shell, ribbon, canvas and U AI panel into one quiet visual system.
 */

:root {
  --accent: #0b57d0;
  --accent-dark: #0842a0;
  --accent-weak: #d3e3fd;
  --ink: #1f1f1f;
  --ink-2: #5f6368;
  --line: #c7c7c7;
  --line-soft: #e3e7ed;
  --hover: #e8eef7;
  --press: #dbe5f3;
  --on: #d3e3fd;
  --ribbon-bg: #f8fafd;
  --ribbon-border: #e1e5eb;
  --canvas-bg: #f8f9fa;
  --selection-bg: rgba(11, 87, 208, .18);
  --ui-radius-sm: 8px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 18px;
  --ui-shadow: 0 1px 2px rgba(60, 64, 67, .08), 0 2px 8px rgba(60, 64, 67, .06);
  --ui-surface: #fff;
  --ui-surface-muted: #f8fafd;
  --ui-surface-tonal: #f1f4f9;
  --ui-surface-border: #dde2ea;
  --ui-surface-shadow: 0 2px 6px rgba(60, 64, 67, .12), 0 10px 28px rgba(60, 64, 67, .14);
  --ui-dialog-shadow: 0 2px 8px rgba(60, 64, 67, .12), 0 18px 52px rgba(60, 64, 67, .20);
  --ui-scrim: rgba(32, 33, 36, .28);
}

body {
  font-family: "Segoe UI Variable Text", "Segoe UI", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--canvas-bg);
  color: var(--ink);
}

/* ---------------- Application chrome ---------------- */

#ribbon {
  /* 保留布局隔离，但允许账户卡越过功能区边界完整显示。 */
  contain: layout;
  overflow: visible;
  background: var(--ribbon-bg);
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(60, 64, 67, .10);
}

#ribbon .rb-titlebar {
  height: 60px;
  padding: 6px 12px;
  gap: 8px;
  align-items: flex-start;
  color: var(--ink);
  background: var(--ribbon-bg);
}

#ribbon .rb-app {
  width: 34px;
  height: 34px;
  align-self: flex-start;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

#ribbon .rb-app img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

#ribbon .rb-ai-logo {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

#ribbon .rb-product-name {
  height: 24px;
  margin: 1px 0 0 2px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  white-space: nowrap;
}

#ribbon .rb-doc-name {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: min(48vw, 760px);
  max-width: min(48vw, 760px);
  height: 24px;
  padding: 1px 10px;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 4px;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0;
  text-align: center;
  text-overflow: ellipsis;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

#ribbon .rb-doc-name:hover {
  background: rgba(60, 64, 67, .06);
}

#ribbon .rb-doc-name:focus {
  border-color: rgba(11, 87, 208, .38);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(11, 87, 208, .10);
}

#ribbon .rb-titlebar-right {
  height: 38px;
  gap: 4px;
  align-self: flex-start;
}

#ribbon .rb-account-wrap {
  position: relative;
  display: inline-flex;
  margin-left: 2px;
}

#ribbon #btn-account {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  padding: 0;
  justify-content: center;
  background: transparent;
}

#ribbon #btn-account[data-authenticated="true"] {
  color: inherit;
  background: transparent;
}

#ribbon #btn-account:hover,
#ribbon #btn-account[data-authenticated="true"]:hover {
  background: #f0f4f9;
}

#ribbon .rb-account-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  overflow: hidden;
  border-radius: 50%;
  color: #5f6368;
  border: 1px solid #d7dee8;
  background: #f7f9fc;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  font-size: 12px;
  font-weight: 650;
}

#ribbon #btn-account[data-authenticated="true"] .rb-account-avatar {
  border-color: transparent;
  color: #fff;
  background-color: #0b57d0;
}

#ribbon .rb-account-guest-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#ribbon .rb-account-menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  width: min(312px, calc(100vw - 16px));
  padding: 10px;
  border: 1px solid #dbe2eb;
  border-radius: 18px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 2px 7px rgba(31, 41, 55, .10), 0 18px 48px rgba(31, 41, 55, .18);
  backdrop-filter: blur(18px);
  transform-origin: top right;
}

#ribbon .rb-account-menu.hidden {
  display: none;
}

#ribbon .rb-account-logout-form {
  display: contents;
}

#ribbon .rb-account-summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 8px 12px;
}

#ribbon .rb-account-menu-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #315e8a center / cover no-repeat;
  box-shadow: 0 0 0 2px #d8e6f2;
  font-size: 16px;
  font-weight: 700;
}

#ribbon :is(.rb-account-avatar, .rb-account-menu-avatar).has-avatar-image {
  /* Never synthesize or sharpen a provider avatar; render its source pixels once. */
  image-rendering: auto;
}

#ribbon .rb-account-summary-copy,
#ribbon .rb-account-action-copy,
#ribbon .rb-account-connection > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

#ribbon .rb-account-summary-copy strong,
#ribbon .rb-account-summary-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ribbon .rb-account-summary-copy strong {
  color: #172033;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

#ribbon .rb-account-summary-copy small {
  color: #697386;
  font-size: 11.5px;
  line-height: 16px;
}

#ribbon .rb-account-connection {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin: 0 2px 8px;
  padding: 9px 10px;
  border: 1px solid #d8e7f4;
  border-radius: 12px;
  color: #315e8a;
  background: #f1f7fb;
}

#ribbon .rb-account-connection strong {
  color: #274c70;
  font-size: 12px;
  line-height: 16px;
}

#ribbon .rb-account-connection small {
  color: #668099;
  font-size: 10.5px;
  line-height: 14px;
}

#ribbon .rb-account-actions {
  display: grid;
  padding-top: 4px;
  border-top: 1px solid #e9edf2;
}

#ribbon .rb-account-menu :is(button, a) {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  margin-top: 2px;
  padding: 6px 9px;
  border: 0;
  border-radius: 10px;
  color: #303744;
  background: transparent;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

#ribbon .rb-account-menu :is(button, a):hover {
  color: #174a7e;
  background: #eef4fa;
}

#ribbon .rb-account-menu :is(button, a):focus-visible {
  outline: 2px solid rgba(49, 94, 138, .30);
  outline-offset: -2px;
}

#ribbon .rb-account-action-copy strong {
  font-size: 12px;
  font-weight: 650;
  line-height: 16px;
}

#ribbon .rb-account-action-copy small {
  color: #7a8290;
  font-size: 10.5px;
  line-height: 14px;
}

#ribbon .rb-account-privacy {
  padding: 8px 10px 2px;
  color: #8a929f;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
}

#ribbon .rb-lucide {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background-color: currentColor;
  -webkit-mask: var(--rb-icon) center / contain no-repeat;
  mask: var(--rb-icon) center / contain no-repeat;
}

#ribbon .rb-file-up-icon {
  --rb-icon: url("../images/icons/lucide-file-up.svg");
}

#ribbon .rb-account-shield {
  --rb-icon: url("../images/icons/lucide-shield-check.svg");
  width: 20px;
  height: 20px;
  margin-left: 4px;
}

#ribbon .rb-account-logout-icon {
  --rb-icon: url("../images/icons/lucide-log-out.svg");
  width: 17px;
  height: 17px;
  margin-left: 4px;
  color: #697386;
}

#ribbon .ribbon-panel[data-tab="insert"] #btn-attachment.rb-file-command {
  min-width: 62px;
  height: 32px;
  gap: 6px;
  margin: 0 2px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink);
  background: transparent;
  font-weight: 600;
  box-shadow: none;
  transition: background-color 120ms ease, color 120ms ease;
}

#ribbon .ribbon-panel[data-tab="insert"] #btn-attachment.rb-file-command:hover {
  border-color: transparent;
  color: var(--accent-dark);
  background: #dce6f4;
  box-shadow: none;
}

#ribbon .ribbon-panel[data-tab="insert"] #btn-attachment.rb-file-command:active {
  background: var(--press);
}

#ribbon .ribbon-panel[data-tab="insert"] #btn-attachment.rb-file-command .rb-txt {
  margin-left: 0;
  font-size: 12px;
}

#ribbon .rb-titlebar .rb-quick {
  height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 19px;
  color: #3c4043;
  font-size: 13px;
  font-weight: 500;
  transition: background-color 120ms cubic-bezier(.2, 0, 0, 1), color 120ms cubic-bezier(.2, 0, 0, 1);
}

#ribbon .rb-titlebar .rb-quick:hover {
  color: var(--accent-dark);
  background: #f0f4f9;
}

#ribbon .rb-titlebar .rb-quick:active {
  background: #e5e9ef;
}

#ribbon #btn-ai {
  color: #0b57d0;
  background: #e8f0fe;
}

#ribbon #btn-ai:hover {
  background: #d3e3fd;
}

#ribbon .ribbon-tabs {
  position: absolute;
  z-index: 2;
  top: 31px;
  left: 54px;
  right: 248px;
  align-items: center;
  min-height: 27px;
  padding: 0;
  gap: 1px;
  border-bottom: 0;
  background: transparent;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

#ribbon .ribbon-tabs::-webkit-scrollbar {
  display: none;
}

#ribbon .rb-tab {
  min-height: 25px;
  padding: 3px 9px 4px;
  border-radius: 5px;
  color: #3c4043;
  font-size: 12px;
  line-height: 18px;
  transition: background-color 120ms cubic-bezier(.2, 0, 0, 1), color 120ms cubic-bezier(.2, 0, 0, 1);
}

#ribbon .rb-tab:hover {
  background: #f0f4f9;
}

#ribbon .rb-tab.active,
#ribbon .rb-tab-context.active {
  color: var(--accent-dark);
  background: #d3e3fd;
  box-shadow: none;
  font-weight: 500;
}

#ribbon #btn-ribbon-toggle {
  min-width: 25px;
  height: 25px;
  border-radius: 50%;
}

#ribbon .ribbon-panels {
  min-height: 42px;
  margin: 0 16px 8px;
  padding: 4px 8px;
  border: 0;
  border-radius: 22px;
  background: #edf2fa;
}

#ribbon .ribbon-panel {
  min-height: 34px;
  gap: 2px;
}

#ribbon .rb-group {
  height: 34px;
  padding: 0 6px;
  flex-direction: row;
  justify-content: flex-start;
}

#ribbon .rb-group + .rb-group::before {
  top: 5px;
  bottom: 5px;
  background: #d7dde7;
}

#ribbon .rb-home-grid.active {
  display: flex;
  grid-template-columns: none;
  min-width: max-content;
  min-height: 34px;
  padding: 0;
  gap: 2px;
}

#ribbon .rb-home-grid .rb-group {
  width: auto;
  height: 34px;
  padding: 0 5px;
  flex-direction: row;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#ribbon .rb-glabel,
#ribbon .rb-home-grid .rb-glabel {
  display: none;
}

#ribbon .rb-tools,
#ribbon .rb-tools-quick,
#ribbon .rb-tools-font,
#ribbon .rb-font-top,
#ribbon .rb-font-bottom,
#ribbon .rb-tools-paragraph,
#ribbon .rb-paragraph-icons,
#ribbon .rb-paragraph-more {
  display: flex;
  width: auto;
  min-width: 0;
  height: 30px;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
}

#ribbon .rb-paragraph-style,
#ribbon .rb-paragraph-icons,
#ribbon .rb-paragraph-more {
  grid-column: auto;
  grid-row: auto;
}

#ribbon .page-setup-caption {
  display: none;
}

#ribbon .rb-tools button,
#ribbon .rb-home-grid .rb-tools button,
#ribbon .rb-home-grid .fs-step,
#ribbon .rb-table-tools button,
#ribbon .rb-object-tools button,
#ribbon .color-btn {
  border-color: transparent;
  border-radius: 50%;
  transition: background-color 120ms cubic-bezier(.2, 0, 0, 1), color 120ms cubic-bezier(.2, 0, 0, 1);
}

#ribbon .rb-home-grid .rb-tools button,
#ribbon .rb-home-grid .fs-step,
#ribbon .rb-home-grid .color-btn,
#ribbon .rb-table-tools button,
#ribbon .rb-object-tools button {
  min-width: 30px;
  width: 30px;
  height: 30px;
  padding: 0 5px;
}

#ribbon .rb-tools button:hover,
#ribbon .rb-home-grid .rb-tools button:hover,
#ribbon .rb-home-grid .fs-step:hover,
#ribbon .rb-home-grid .color-btn:hover,
#ribbon .rb-table-tools button:hover,
#ribbon .rb-object-tools button:hover {
  color: var(--accent-dark);
  border-color: transparent;
  background: #dce6f4;
}

#ribbon button.on,
#ribbon button.active,
#ribbon .rb-tools button.active,
#ribbon .rb-home-grid .color-btn.active {
  color: var(--accent-dark);
  background: var(--accent-weak);
  box-shadow: none;
}

#ribbon select,
#ribbon .fs-box .fs-num,
#ribbon .fs-caret,
#ribbon .rb-home-grid select,
#ribbon .rb-home-grid .fs-box .fs-num,
#ribbon .rb-home-grid .fs-caret {
  height: 30px;
  border-color: transparent;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, .8);
}

#ribbon .rb-font-top #sel-fontfamily {
  width: 142px;
}

#ribbon .rb-paragraph-style #sel-block {
  width: 104px;
}

#ribbon .rb-home-grid .fs-box .fs-num {
  width: 38px;
}

#ribbon .rb-home-grid .fs-box .fs-unit {
  width: 38px;
}

#ribbon .rb-home-grid #btn-numbering {
  top: 0;
  min-width: 34px;
  width: 34px;
  height: 30px;
}

#ribbon .rb-table-style-gallery {
  grid-template-columns: repeat(4, 36px);
  gap: 3px;
}

#ribbon .tbl-style-card {
  width: 36px;
  height: 28px;
}

#ribbon select:hover,
#ribbon .fs-box .fs-num:hover,
#ribbon .fs-caret:hover {
  border-color: #c8d0dc;
  background-color: #fff;
}

#ribbon select:focus,
#ribbon .fs-box .fs-num:focus {
  border-color: var(--accent);
  outline: 2px solid rgba(11, 87, 208, .16);
  outline-offset: 0;
}

#ribbon button:focus-visible,
#ribbon [role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

@media (max-width: 980px) {
  #ribbon .ribbon-tabs {
    right: 168px;
  }

  #ribbon .rb-doc-name {
    max-width: 38vw;
  }
}

@media (max-width: 760px) {
  #ribbon .rb-titlebar {
    padding-inline: 8px;
  }

  #ribbon .ribbon-tabs {
    left: 48px;
    right: 92px;
  }

  #ribbon .rb-product-name {
    display: none;
  }

  #ribbon .ribbon-panels {
    margin-inline: 8px;
  }
}

/* ---------------- Document canvas ---------------- */

#canvas {
  padding-top: 28px;
  background: var(--canvas-bg);
}

#canvas::-webkit-scrollbar-thumb {
  border-color: var(--canvas-bg);
  border-radius: 8px;
  background: #bdc1c6;
}

.page {
  outline-color: #dfe3e7;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .14), 0 2px 8px rgba(60, 64, 67, .08);
}

.page.col-first::before {
  outline-color: #dfe3e7;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .14), 0 2px 8px rgba(60, 64, 67, .08);
}

/* ---------------- Quiet status bar ---------------- */

#statusbar {
  height: 28px;
  min-height: 28px;
  color: #4a4f55;
  background: #fff;
  border-top: 1px solid #e1e5ea;
  gap: 8px;
  box-shadow: 0 -1px 4px rgba(60, 64, 67, .04);
  white-space: nowrap;
  overflow: hidden;
}

#statusbar > span,
#statusbar .st-right > * {
  flex: 0 0 auto;
}

#statusbar #cloud-save-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: min(36vw, 380px);
  flex: 0 1 auto;
  margin-left: 12px;
  color: #16758a;
}
#statusbar #cloud-save-status[hidden],
#statusbar #cloud-save-auth[hidden] { display: none; }
#cloud-save-status svg {
  width: 17px; height: 17px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
#cloud-save-feedback { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#statusbar #cloud-save-status[data-state="error"] { color: #aa4038; }
#statusbar #cloud-save-status[data-state="saved"] { color: #168065; }
#statusbar #cloud-save-auth { flex: 0 0 auto; color: inherit; text-decoration: underline; }

#statusbar .st-right {
  /* Real two-ended status layout: the left document facts keep their natural
     width, while this control cluster sizes to its contents and is pushed to
     the physical right edge by the base rule's margin-left:auto.  The old
     flex:1 + width:0 combination filled the gap but painted its children at
     the gap's left edge, making the entire bar look left-aligned. */
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

#statusbar .st-right::-webkit-scrollbar {
  display: none;
}

#statusbar #btn-plugins,
#statusbar .plugin-btn,
#statusbar button {
  color: #4a4f55;
  border-radius: 7px;
}

#statusbar #btn-plugins:hover,
#statusbar .plugin-btn:hover,
#statusbar button:hover {
  color: var(--accent-dark);
  background: #e8f0fe;
}

#zoom-track {
  background: #d7dce2;
}

#zoom-fill {
  background: var(--accent);
}

#zoom-handle {
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #aab4c3, 0 1px 3px rgba(60, 64, 67, .25);
}

@media (max-width: 900px) {
  #statusbar {
    padding-inline: 8px;
    gap: 6px;
  }

  #statusbar .st-sep,
  #statusbar #st-engine {
    display: none;
  }

  #statusbar .st-right {
    gap: 2px;
  }

  #statusbar button {
    padding-inline: 7px;
  }
}

/* ---------------- U AI side panel ---------------- */

#ai-panel {
  top: 8px;
  right: 8px;
  bottom: 36px;
  width: 392px;
  min-width: 320px;
  max-width: calc(100vw - 16px);
  color: #1f1f1f;
  background: #fff;
  border: 1px solid #dfe3ea;
  border-radius: 18px;
  box-shadow: 0 4px 12px rgba(60, 64, 67, .12), 0 12px 34px rgba(60, 64, 67, .10);
  font: 13.5px/1.58 "Segoe UI Variable Text", "Segoe UI", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

#ai-panel.ai-floating {
  border: 1px solid #dfe3ea;
  border-radius: 18px;
}

#ai-panel.ai-full {
  border-radius: 0;
}

#ai-panel .ai-resizer {
  left: -4px;
  width: 8px;
}

#ai-panel .ai-resizer:hover {
  background: var(--accent);
  opacity: .2;
}

#ai-panel .ai-head {
  height: 54px;
  padding: 0 10px 0 14px;
  gap: 3px;
  border-bottom: 1px solid #eef1f5;
  background: #fff;
}

#ai-panel .ai-title {
  gap: 9px;
  color: #1f1f1f;
  font-size: 14px;
  font-weight: 650;
}

#ai-panel .ai-logo {
  width: 28px;
  height: 28px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#ai-panel .ai-name {
  color: #1f1f1f;
}

#ai-panel .ai-head button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #5f6368;
}

#ai-panel .ai-head button:hover {
  color: #202124;
  background: #f0f3f7;
}

#ai-panel .ai-cfg {
  padding: 12px 16px 14px;
  border-bottom: 1px solid #e8ebef;
  background: #f8fafd;
}

#ai-panel .ai-cfg input {
  height: 34px;
  border-color: #c7cdd5;
  border-radius: 8px;
  background: #fff;
}

#ai-panel .ai-save {
  height: 32px;
  border-radius: 16px;
  font-weight: 600;
}

#ai-panel .ai-msgs {
  padding: 14px 16px 10px;
  background: #fff;
  scrollbar-color: #c4c7c5 transparent;
}

#ai-panel .ai-hello {
  align-items: flex-start;
  text-align: left;
  padding: 14px 4px 12px;
  gap: 8px;
}

#ai-panel .ai-hello-h {
  color: #202124;
  font-size: 22px;
  line-height: 1.28;
  font-weight: 650;
  letter-spacing: -.01em;
}

#ai-panel .ai-hello-sub {
  max-width: 360px;
  color: #6d737a;
  font-size: 13px;
  line-height: 1.62;
}

#ai-panel .ai-chips {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  padding: 6px 4px 12px;
}

#ai-panel .ai-chip.ai-suggestion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 56px;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  color: #3c4043;
  background: #f1f4f9;
  text-align: left;
  line-height: 1.35;
  box-shadow: none;
}

#ai-panel .ai-chip.ai-suggestion:hover {
  color: #202124;
  background: #e8f0fe;
  box-shadow: none;
}

#ai-panel .ai-chip-title {
  color: #202124;
  font-size: 13px;
  font-weight: 650;
}

#ai-panel .ai-chip-desc {
  margin-top: 3px;
  color: #6d737a;
  font-size: 11.5px;
}

#ai-panel .ai-msg {
  gap: 9px;
  margin-bottom: 18px;
}

#ai-panel .ai-avatar {
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: var(--accent);
}

#statusbar .plugin-btn[data-plugin="ai-assistant"] .pb-ic img,
#plugin-manager .pm-row .pm-ic img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

#plugin-manager .pm-row .pm-ic img {
  width: 28px;
  height: 28px;
}

#ai-panel .ai-user .ai-avatar {
  color: #3c4043;
  background: #eef1f5;
}

#ai-panel .ai-bubble {
  max-width: calc(100% - 38px);
  padding: 10px 13px;
  border-radius: 15px;
  font-size: 13.5px;
  line-height: 1.62;
}

#ai-panel .ai-user .ai-bubble {
  color: #202124;
  background: #e8f0fe;
  border-bottom-right-radius: 15px;
}

#ai-panel .ai-assistant .ai-bubble {
  padding: 2px 2px 8px;
  color: #202124;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#ai-panel .ai-think {
  border-left-color: #a8c7fa;
  border-radius: 8px;
  background: #f8fafd;
}

#ai-panel .ai-dock {
  padding: 8px 14px 14px;
  border-top: 1px solid #eef1f5;
  background: #fff;
}

#ai-panel .ai-attach-bar {
  padding: 0 0 7px;
}

#ai-panel .ai-attach-bar .ai-chip {
  border-color: #d9dee7;
  background: #f1f4f9;
}

#ai-panel .ai-composer {
  padding: 10px 10px 8px;
  border: 1px solid #cbd1d9;
  border-radius: 18px;
  background: #fff;
  box-shadow: none;
}

#ai-panel .ai-composer:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(11, 87, 208, .14);
}

#ai-panel .ai-input {
  min-height: 34px;
  padding: 2px 5px 7px;
  line-height: 1.5;
}

#ai-panel .ai-input::placeholder {
  color: #7b8087;
}

#ai-panel .ai-clip,
#ai-panel .ai-shot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #5f6368;
}

#ai-panel .ai-shot {
  width: auto;
  padding: 0 9px;
  border-radius: 16px;
  font-size: 11.5px;
}

#ai-panel .ai-clip:hover,
#ai-panel .ai-shot:hover {
  color: var(--accent-dark);
  background: #e8f0fe;
}

#ai-panel .ai-modes {
  padding: 2px;
  border-radius: 16px;
  background: #f1f3f4;
}

#ai-panel .ai-modes label {
  padding: 5px 10px;
  border-radius: 14px;
  color: #5f6368;
}

#ai-panel .ai-modes label:has(input:checked) {
  color: var(--accent-dark);
  background: var(--accent-weak);
  box-shadow: none;
}

#ai-panel .ai-send {
  width: 34px;
  height: 34px;
  background-color: var(--accent);
  box-shadow: 0 1px 2px rgba(11, 87, 208, .24);
}

#ai-panel .ai-send:hover {
  filter: none;
  background-color: var(--accent-dark);
}

#ai-panel .ai-copy-answer:hover {
  color: var(--accent-dark);
  background: #e8f0fe;
}

/* ---------------- Word-like document underline ----------------
 * Chromium's `auto` underline becomes visibly heavy on large CJK text.  Keep
 * UniDoc's default underline close to Word's 1px/0.75pt visual weight while
 * still scaling gently at display sizes.  Explicit imported thickness values
 * retain their higher-priority inline/document CSS. */

:where(.page-content, .udoc-textbox .tbox-content)
  :where(u, [style*="underline" i]) {
  text-decoration-thickness: max(1px, .045em);
  text-underline-offset: .06em;
  text-decoration-skip-ink: auto;
}

/* ---------------- Vault ---------------- */

.udoc-vault-panel {
  color: #202124;
  background: var(--ui-surface);
  border-right: 1px solid var(--ui-surface-border);
  border-radius: 0 16px 16px 0;
  box-shadow: 4px 0 12px rgba(60, 64, 67, .10), 12px 0 34px rgba(60, 64, 67, .10);
  font-family: "Segoe UI Variable Text", "Segoe UI", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  overflow: hidden;
}

.uv-head {
  min-height: 58px;
  padding: 11px 10px 10px 16px;
  border-bottom-color: #edf0f4;
  background: #fff;
}

.uv-head strong {
  color: #202124;
  font-size: 14px;
  font-weight: 650;
}

.uv-head .uv-root {
  color: #777c83;
  font-size: 10.5px;
}

.uv-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #5f6368;
}

.uv-icon:hover {
  color: var(--accent-dark);
  background: #e8f0fe !important;
}

.uv-actions {
  padding: 10px 12px 5px;
  gap: 7px;
}

.uv-actions > button:not(.uv-icon) {
  min-height: 34px;
  padding: 0 12px;
  border-color: transparent;
  border-radius: 17px;
  color: var(--accent-dark);
  background: #e8f0fe;
  font-weight: 600;
}

.uv-actions > button:not(.uv-icon):hover {
  border-color: transparent;
  background: var(--accent-weak);
}

.uv-search {
  height: 36px;
  margin: 6px 12px 9px;
  padding: 0 11px;
  border-color: transparent;
  border-radius: 10px;
  background: var(--ui-surface-tonal);
}

.uv-search:focus-within {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(11, 87, 208, .14);
}

.uv-search span {
  color: #6f757c;
  font-size: 16px;
}

.uv-tabs {
  margin: 0 12px 9px;
  padding: 3px;
  border-radius: 11px;
  background: var(--ui-surface-tonal);
}

.uv-tabs button {
  min-height: 29px;
  border-radius: 8px;
  color: #5f6368;
}

.uv-tabs button:hover {
  color: #202124;
  background: rgba(255, 255, 255, .66);
}

.uv-tabs button.active {
  color: var(--accent-dark);
  background: var(--accent-weak);
  box-shadow: none;
  font-weight: 600;
}

.uv-viewport {
  border-block-color: #edf0f4;
  scrollbar-color: #bdc1c6 transparent;
}

.uv-row {
  width: calc(100% - 12px);
  margin-inline: 6px;
  padding-inline: 9px;
  border-radius: 8px;
  color: #3c4043;
}

.uv-row:hover {
  background: #f1f4f9;
}

.uv-row.active {
  color: var(--accent-dark);
  background: var(--accent-weak);
}

.uv-heading-list button {
  margin-inline: 6px;
  width: calc(100% - 12px);
  border-radius: 7px;
}

.uv-heading-list button:hover {
  color: var(--accent-dark);
  background: #e8f0fe;
}

.udoc-vault-panel > footer {
  min-height: 34px;
  padding-inline: 12px;
  border-top-color: #edf0f4;
  color: #777c83;
  background: var(--ui-surface-muted);
}

.uv-resizer:hover::before,
.uv-resizer:focus-visible::before,
.udoc-vault-panel.is-resizing .uv-resizer::before {
  background: var(--accent);
}

/* ---------------- Floating menus and popovers ---------------- */

:is(.color-pop, #fs-menu, #num-panel, #tpl-panel, #para-drop,
    #find-panel, #formula-editor, #wrap-panel, .plugin-panel) {
  color: #202124;
  background: var(--ui-surface);
  border: 1px solid var(--ui-surface-border);
  border-radius: 12px;
  box-shadow: var(--ui-surface-shadow);
}

:is(#num-panel, #tpl-panel, #para-drop) {
  padding: 8px;
}

:is(#num-panel .np-card, #tpl-panel .tp-card, #wrap-panel .wp-opt,
    #wrap-panel .wp-row button) {
  border-color: #e1e5eb;
  border-radius: 8px;
}

:is(#num-panel .np-card, #tpl-panel .tp-card, #wrap-panel .wp-opt,
    #wrap-panel .wp-row button):hover {
  color: var(--accent-dark);
  border-color: #c7d7f4;
  background: #e8f0fe;
}

:is(#num-panel .np-cmd, #tpl-panel .tp-cmd, #para-drop .pdp-more) {
  min-height: 30px;
  border-radius: 7px;
}

:is(#num-panel .np-cmd, #tpl-panel .tp-cmd, #para-drop .pdp-more):hover {
  color: #202124;
  background: #f1f4f9;
}

/* ---------------- Native plugin workspaces ---------------- */

.plugin-panel {
  width: min(360px, calc(100vw - 24px));
  max-height: min(76vh, 720px);
  border-color: #dfe3ea;
  border-radius: 16px;
  box-shadow: 0 16px 44px rgba(31, 35, 41, .16), 0 2px 8px rgba(31, 35, 41, .08);
  font-family: "Google Sans", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
}

.plugin-panel header {
  flex: 0 0 auto;
  min-height: 54px;
  height: auto;
  padding: 10px 10px 10px 14px;
  color: #202124;
  background: #fff;
  border-bottom: 1px solid #edf0f4;
}

.plugin-panel .pp-heading,
.plugin-panel .pp-labels {
  display: flex;
  min-width: 0;
}

.plugin-panel .pp-heading {
  align-items: center;
  gap: 10px;
}

.plugin-panel .pp-labels {
  flex-direction: column;
  gap: 1px;
}

.plugin-panel .pp-icon {
  display: grid;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #0b57d0;
  background: #e8f0fe;
  border-radius: 10px;
  font: 700 18px/1 "Segoe UI Symbol", sans-serif;
}

.plugin-panel .pp-title {
  overflow: hidden;
  font-size: 14px;
  font-weight: 650;
  line-height: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plugin-panel .pp-subtitle {
  overflow: hidden;
  color: #747a82;
  font-size: 11px;
  font-weight: 450;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plugin-panel .pp-x {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #5f6368;
  border-radius: 50%;
  font: 400 22px/1 system-ui, sans-serif;
}

.plugin-panel .pp-x:hover {
  color: #202124;
  background: #f1f3f4;
}

.plugin-panel .pp-body {
  padding: 14px;
  overflow-x: hidden;
  font: 13px/1.5 "Google Sans Text", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
}

.plugin-panel .plugin-v2-safe-text {
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font: inherit;
}

.plugin-panel-ara {
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  height: auto;
  max-height: none;
  box-sizing: border-box;
  border-radius: 0 !important;
  opacity: 0;
  transform: translateX(100%);
  transition: transform .25s ease, opacity .16s ease;
}

.plugin-panel-ara.show {
  opacity: 1;
  transform: translateX(0);
}

.plugin-panel-ara .pp-body {
  padding: 0 14px 14px;
  background: #fff;
}

.ara-overview {
  display: grid;
  gap: 12px;
}

.ara-hero {
  padding: 14px 14px 13px;
  color: #202124;
  background: linear-gradient(145deg, #f7faff 0%, #eef4ff 100%);
  border: 1px solid #dce7fb;
  border-radius: 14px;
}

.ara-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ara-eyebrow {
  overflow: hidden;
  color: #0b57d0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.ara-engine-pill {
  flex: 0 0 auto;
  padding: 3px 8px;
  color: #185abc;
  background: rgba(255,255,255,.85);
  border: 1px solid #d5e2f8;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 650;
}

.ara-hero h2 {
  margin: 9px 0 3px;
  font-size: 19px;
  line-height: 25px;
}

.ara-hero p,
.ara-relation-card p {
  margin: 0;
  color: #5f6368;
  font-size: 12px;
  line-height: 18px;
}

.ara-relation-card,
.ara-project-card {
  padding: 13px;
  border: 1px solid #e2e6ec;
  border-radius: 13px;
}

.ara-relation-card h3 {
  margin: 0 0 4px;
  color: #303134;
  font-size: 13px;
  font-weight: 650;
}

.ara-native-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  margin-top: 11px;
}

.ara-flow-item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.ara-flow-icon {
  display: grid;
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  place-items: center;
  color: #0b57d0;
  background: #e8f0fe;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 750;
}

.ara-flow-labels {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.ara-flow-labels strong {
  overflow: hidden;
  color: #303134;
  font-size: 11px;
  line-height: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ara-flow-labels small {
  overflow: hidden;
  color: #80868b;
  font-size: 9.5px;
  line-height: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ara-flow-arrow {
  color: #a8adb4;
  font-size: 12px;
}

.ara-project-card {
  background: #fff;
}

.ara-project-card.is-disconnected,
.ara-project-card.is-empty {
  background: #fafbfc;
}

.ara-project-card.is-valid {
  border-color: #cce8d6;
  background: #f7fcf8;
}

.ara-project-card.is-invalid {
  border-color: #f2d0cd;
  background: #fff9f8;
}

.ara-project-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ara-project-icon {
  display: grid;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #5f6368;
  background: #eef1f5;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
}

.is-valid .ara-project-icon {
  color: #137333;
  background: #dff3e6;
}

.is-invalid .ara-project-icon {
  color: #b3261e;
  background: #fce8e6;
}

.ara-project-labels {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.ara-project-labels strong {
  color: #303134;
  font-size: 13px;
  line-height: 18px;
}

.ara-project-labels small {
  color: #6f747a;
  font-size: 11px;
  line-height: 16px;
}

.ara-actions {
  display: flex;
  margin-top: 12px;
  padding-left: 40px;
}

.ara-primary-action {
  min-height: 32px;
  padding: 0 14px;
  color: #fff;
  background: #0b57d0;
  border: 1px solid #0b57d0;
  border-radius: 9px;
  cursor: pointer;
  font: 600 12px/30px inherit;
}

.ara-primary-action:hover {
  background: #0842a0;
  border-color: #0842a0;
}

.ara-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.ara-metric {
  display: flex;
  min-width: 0;
  padding: 8px 5px;
  align-items: center;
  flex-direction: column;
  background: rgba(255,255,255,.85);
  border: 1px solid #e0e7e2;
  border-radius: 9px;
}

.ara-metric strong {
  color: #202124;
  font-size: 15px;
  line-height: 18px;
}

.ara-metric small {
  overflow: hidden;
  max-width: 100%;
  color: #72777e;
  font-size: 9.5px;
  text-overflow: ellipsis;
}

.ara-file-list,
.ara-issue-list {
  display: grid;
  gap: 2px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(91, 113, 99, .14);
}

.ara-file-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 23px;
  color: #4b5056;
  font-size: 10.5px;
}

.ara-file-mark {
  color: #0b57d0;
  font-size: 16px;
}

.ara-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ara-file-size {
  color: #8b9096;
  font-variant-numeric: tabular-nums;
}

.ara-issue-row {
  padding: 6px 8px;
  overflow-wrap: anywhere;
  color: #8a2c26;
  background: rgba(252, 232, 230, .72);
  border-radius: 7px;
  font-size: 10.5px;
  line-height: 15px;
}

@media (max-width: 520px) {
  .plugin-panel-ara {
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-height: none;
    border-radius: 0;
  }

  .ara-native-flow {
    grid-template-columns: 1fr;
  }

  .ara-flow-arrow {
    display: none;
  }
}

/* ---------------- Context menu ---------------- */

#ctx-menu {
  min-width: 220px;
  max-width: min(360px, calc(100vw - 16px));
  padding: 4px;
  color: #202124;
  background: var(--ui-surface);
  border: 1px solid var(--ui-surface-border);
  border-radius: 12px;
  box-shadow: var(--ui-surface-shadow);
  font-size: 13px;
}

#ctx-menu li {
  min-height: 26px;
  box-sizing: border-box;
  padding: 2px 9px;
  gap: 8px;
  border-radius: 7px;
  color: #202124;
}

#ctx-menu li:hover {
  background: #f1f4f9;
}

#ctx-menu li:active {
  background: #e8eef7;
}

#ctx-menu li.disabled {
  color: #aeb4bc;
}

#ctx-menu li .key {
  color: #7c828a;
  font-size: 10.5px;
}

#ctx-menu li.separator {
  height: 1px;
  min-height: 1px;
  margin: 3px 7px;
  padding: 0;
  border-radius: 0;
  background: #e8eaed;
}

#ctx-menu li.group-label {
  min-height: auto;
  padding: 4px 8px 2px;
  color: #7c828a;
  font-size: 10px;
  letter-spacing: .06em;
}

#ctx-menu li.has-sub::after {
  color: #777c83;
  font-size: 11px;
}

#ctx-menu .submenu {
  top: -5px;
  min-width: 148px;
  padding: 4px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-surface-border);
  border-radius: 12px;
  box-shadow: var(--ui-surface-shadow);
}

#ctx-menu li.ctx-ai {
  color: var(--accent-dark);
  font-weight: 600;
}

#ctx-menu li.ctx-ai:hover {
  background: #e8f0fe;
}

#ctx-menu li.ctx-source {
  color: var(--accent-dark);
  font-weight: 600;
}

#ctx-menu li.ctx-source:hover {
  background: #e8f0fe;
}

#ctx-menu li.danger {
  color: #b3261e;
}

#ctx-menu li.danger:hover {
  color: #8c1d18;
  background: #fce8e6;
}

#ctx-menu li.paste-palette {
  padding: 4px;
}

#ctx-menu .paste-palette-title {
  padding: 1px 4px 3px;
  color: #7c828a;
  letter-spacing: .05em;
}

#ctx-menu .paste-palette-actions {
  gap: 5px;
}

#ctx-menu .paste-palette-actions button {
  height: 28px;
  border-color: transparent;
  border-radius: 8px;
  background: var(--ui-surface-muted);
}

#ctx-menu .paste-palette-actions button:hover,
#ctx-menu .paste-palette-actions button:focus-visible {
  color: var(--accent-dark);
  border-color: transparent;
  background: var(--accent-weak);
  box-shadow: 0 0 0 2px rgba(11, 87, 208, .14);
}

/* ---------------- Dialog system ---------------- */

:is(#sig-modal, #pagenum-dialog, #plugin-manager, #shading-dialog,
    #shortcut-dialog, #ui-prompt, .uv-conflict-overlay) {
  background: var(--ui-scrim);
  backdrop-filter: blur(1.5px);
}

:is(#wordcount-dialog, #page-setup-dialog, #para-dialog, #media-dialog,
    #code-editor-dialog, #htmlimport-dialog, #export-dialog,
    #toc-insert-dialog) {
  color: #202124;
  background: var(--ui-surface);
  border: 1px solid var(--ui-surface-border);
  border-radius: 16px;
  box-shadow: var(--ui-dialog-shadow);
  overflow: hidden;
  font-family: "Segoe UI Variable Text", "Segoe UI", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

:is(#sig-modal .sig-box, #pagenum-dialog .pn-card, #plugin-manager .pm-card,
    #shading-dialog .sd-card, #shortcut-dialog .sk-box,
    #ui-prompt .up-box, .uv-conflict) {
  color: #202124;
  background: var(--ui-surface);
  border: 1px solid var(--ui-surface-border);
  border-radius: 16px;
  box-shadow: var(--ui-dialog-shadow);
  overflow: hidden;
  font-family: "Segoe UI Variable Text", "Segoe UI", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

:is(#sig-modal, #pagenum-dialog, #plugin-manager, #shading-dialog,
    #shortcut-dialog, #wordcount-dialog, #page-setup-dialog, #para-dialog,
    #media-dialog, #code-editor-dialog, #htmlimport-dialog, #export-dialog,
    #toc-insert-dialog, #ui-prompt) header {
  min-height: 44px;
  height: 44px;
  padding: 0 10px 0 16px;
  color: #202124;
  background: #fff;
  border-bottom: 1px solid #edf0f4;
  font-size: 13.5px;
  font-weight: 650;
}

:is(#sig-modal header button, #pagenum-dialog header .pn-x,
    #plugin-manager header .pm-x, #shading-dialog header .sd-x,
    #shortcut-dialog header .sk-close, #wordcount-dialog header button,
    #page-setup-dialog header button, #para-dialog header button,
    #media-dialog header button, #code-editor-dialog header button,
    #htmlimport-dialog header .hi-close, #export-dialog header .hi-close,
    #toc-insert-dialog header .hi-close, #ui-prompt header .up-close) {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #5f6368;
  background: transparent;
}

:is(#sig-modal header button, #pagenum-dialog header .pn-x,
    #plugin-manager header .pm-x, #shading-dialog header .sd-x,
    #shortcut-dialog header .sk-close, #wordcount-dialog header button,
    #page-setup-dialog header button, #para-dialog header button,
    #media-dialog header button, #code-editor-dialog header button,
    #htmlimport-dialog header .hi-close, #export-dialog header .hi-close,
    #toc-insert-dialog header .hi-close, #ui-prompt header .up-close):hover {
  color: #202124;
  background: #f1f3f4;
}

:is(#page-setup-dialog .ps-body, #para-dialog .pd-body,
    #media-dialog .md-body, #code-editor-dialog .ce-body,
    #htmlimport-dialog .hi-body, #export-dialog .hi-body,
    #toc-insert-dialog .hi-body, #ui-prompt .up-body,
    #pagenum-dialog .pn-body, #shading-dialog .sd-body) {
  padding-inline: 18px;
}

:is(#page-setup-dialog .ps-group h3, #para-dialog .pd-group h3) {
  color: #6f757c;
  font-size: 11px;
  letter-spacing: .02em;
}

:is(#page-setup-dialog .ps-group h3, #para-dialog .pd-group h3)::after {
  background: #e8eaed;
}

:is(#page-setup-dialog, #para-dialog, #media-dialog, #code-editor-dialog,
    #htmlimport-dialog, #export-dialog, #toc-insert-dialog, #ui-prompt,
    #pagenum-dialog, #plugin-manager, #shading-dialog, #sig-modal)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select, textarea) {
  border-color: #cfd4dc;
  border-radius: 8px;
  background-color: #fff;
}

:is(#page-setup-dialog, #para-dialog, #media-dialog, #code-editor-dialog,
    #htmlimport-dialog, #export-dialog, #toc-insert-dialog, #ui-prompt,
    #pagenum-dialog, #plugin-manager, #shading-dialog, #sig-modal)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select, textarea):focus {
  border-color: var(--accent);
  outline: 2px solid rgba(11, 87, 208, .14);
  outline-offset: 0;
}

:is(#page-setup-dialog select, #page-setup-dialog input[type="number"],
    #para-dialog select, #para-dialog input[type="number"],
    #pagenum-dialog select, #pagenum-dialog input[type="text"],
    #pagenum-dialog input[type="number"]) {
  min-height: 30px;
}

:is(#htmlimport-dialog .hi-mode, #export-dialog .hi-mode,
    #toc-insert-dialog .hi-mode, #plugin-manager .pm-row) {
  border-color: #e1e5eb;
  border-radius: 10px;
  background: #fff;
}

:is(#htmlimport-dialog .hi-mode, #export-dialog .hi-mode,
    #toc-insert-dialog .hi-mode, #plugin-manager .pm-row):hover {
  border-color: #c7d7f4;
  background: #e8f0fe;
  box-shadow: none;
}

:is(#pagenum-dialog footer, #shading-dialog footer,
    #shortcut-dialog .sk-foot, #page-setup-dialog .ps-actions,
    #para-dialog .pd-actions, #media-dialog .md-actions,
    #code-editor-dialog .ce-actions) {
  padding: 12px 16px 14px;
  border-top-color: #edf0f4;
}

:is(#sig-modal .sig-row button, #pagenum-dialog footer button,
    #shading-dialog footer button, #shortcut-dialog .sk-foot button,
    #page-setup-dialog .ps-actions button, #page-setup-dialog .ps-ghost,
    #para-dialog .pd-actions button, #media-dialog .md-actions button,
    #code-editor-dialog .ce-actions button, #ui-prompt .up-actions button,
    #plugin-manager .pm-load) {
  min-height: 32px;
  padding: 0 16px;
  border: 1px solid #cfd4dc;
  border-radius: 16px;
  color: #3c4043;
  background: #fff;
  font-weight: 600;
}

:is(#sig-modal .sig-row button, #pagenum-dialog footer button,
    #shading-dialog footer button, #shortcut-dialog .sk-foot button,
    #page-setup-dialog .ps-actions button, #page-setup-dialog .ps-ghost,
    #para-dialog .pd-actions button, #media-dialog .md-actions button,
    #code-editor-dialog .ce-actions button, #ui-prompt .up-actions button,
    #plugin-manager .pm-load):hover {
  color: #202124;
  border-color: #b9c0ca;
  background: #f1f3f4;
  filter: none;
}

:is(#sig-modal .sig-row .sig-primary, #pagenum-dialog footer .pn-apply,
    #shading-dialog footer .sd-apply, #shortcut-dialog .sk-foot .sk-close,
    #page-setup-dialog #ps-apply, #para-dialog #pd-apply,
    #media-dialog .md-apply, #code-editor-dialog #ce-apply,
    #ui-prompt .up-ok, #plugin-manager .pm-load) {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}

:is(#sig-modal .sig-row .sig-primary, #pagenum-dialog footer .pn-apply,
    #shading-dialog footer .sd-apply, #shortcut-dialog .sk-foot .sk-close,
    #page-setup-dialog #ps-apply, #para-dialog #pd-apply,
    #media-dialog .md-apply, #code-editor-dialog #ce-apply,
    #ui-prompt .up-ok, #plugin-manager .pm-load):hover {
  color: #fff;
  border-color: var(--accent-dark);
  background: var(--accent-dark);
}

/* The shared prompt surface also owns attachment naming and operation errors.
   Keep it above editor furniture, but upload code closes the busy veil before
   opening an error so two competing modal layers are never presented. */
#ui-prompt {
  z-index: 100060;
  padding: 20px;
}

#ui-prompt .up-box {
  width: min(460px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 32px));
  margin: 0;
  animation: udoc-dialog-enter 150ms cubic-bezier(.2, .75, .25, 1);
}

#ui-prompt header .up-title {
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ui-prompt .up-body {
  overflow-y: auto;
  padding-block: 16px 18px;
}

#ui-prompt .up-hint {
  margin: 0 0 14px;
  color: #667085;
  font-size: 12.5px;
  line-height: 1.6;
}

#ui-prompt .up-file-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 0 12px;
  margin: 0 0 15px;
  padding: 12px;
  border: 1px solid #e0e7ef;
  border-radius: 13px;
  background: linear-gradient(135deg, #f8fbff, #f4f7fb);
}

#ui-prompt .up-file-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #315e8a, #1aa6b7);
  box-shadow: 0 4px 13px rgba(49, 94, 138, .20);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .035em;
}

#ui-prompt .up-file-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

#ui-prompt .up-file-copy strong,
#ui-prompt .up-file-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ui-prompt .up-file-copy strong {
  color: #1d2939;
  font-size: 13px;
  font-weight: 700;
}

#ui-prompt .up-file-copy small {
  color: #7a8493;
  font-size: 10.5px;
}

#ui-prompt .up-limit-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(49, 94, 138, .11);
}

#ui-prompt .up-limit-grid > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 9px;
  color: #315e8a;
  background: rgba(255, 255, 255, .82);
}

#ui-prompt .up-limit-grid small {
  color: #6e7f91;
  font-size: 10px;
}

#ui-prompt .up-limit-grid strong {
  font-size: 11px;
  white-space: nowrap;
}

#ui-prompt .up-limit-note {
  grid-column: 1 / -1;
  margin-top: 8px;
  color: #63788e;
  font-size: 10.5px;
  text-align: right;
}

#ui-prompt .up-field {
  display: grid;
  gap: 7px;
  color: #344054;
  font-size: 11.5px;
  font-weight: 650;
}

#ui-prompt .up-input {
  height: 38px;
  padding-inline: 11px;
  border-radius: 9px;
  color: #182230;
  font-size: 13px;
}

#ui-prompt .up-error {
  min-height: 18px;
  padding-top: 4px;
  color: #b42318;
  font-size: 11px;
  line-height: 14px;
}

#ui-prompt .up-actions {
  margin-top: 10px;
}

#ui-prompt.ui-dialog-error .up-hint {
  color: #9b2c23;
}

#ui-prompt.ui-dialog-error .up-file-card {
  border-color: #f0d2cf;
  background: linear-gradient(135deg, #fffafa, #fff6f5);
}

#ui-prompt.ui-dialog-error .up-file-icon {
  background: linear-gradient(145deg, #a33b32, #d25b4e);
  box-shadow: 0 4px 13px rgba(163, 59, 50, .18);
}

@keyframes udoc-dialog-enter {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #ui-prompt .up-box { animation: none; }
}

@media (max-width: 520px) {
  #ui-prompt { padding: 12px; }
  #ui-prompt .up-limit-grid { grid-template-columns: 1fr; }
}

/* Word 段落窗口保留其桌面端方角、标签页和紧凑输入语法。 */
#para-dialog {
  border-color: #8f98a5;
  border-radius: 0;
  overflow: hidden;
}

#para-dialog header {
  min-height: 42px;
  height: 42px;
  padding: 0 5px 0 12px;
  border-bottom: 0;
  font-size: 14px;
  font-weight: 400;
}

#para-dialog header button,
#para-dialog .pd-tabs button,
#para-dialog .pd-actions button,
#para-dialog :is(input[type="number"], select) {
  border-radius: 0;
}

#para-dialog .pd-body { padding-inline: 40px; }
#para-dialog .pd-actions { padding-inline: 40px; }

@media (max-width: 700px) {
  #para-dialog .pd-body,
  #para-dialog .pd-actions { padding-inline: 20px; }
}

#page-setup-dialog .ps-preview-frame {
  border-radius: 12px;
  background: var(--ui-surface-muted);
}

#ps-preview-paper {
  border-color: #c9ced6;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .18);
}

#plugin-manager .pm-ic {
  color: var(--accent-dark);
  background: #e8f0fe;
}

.uv-conflict {
  padding: 22px;
}

.uv-conflict h2 {
  color: #202124;
  font-size: 18px;
}

.uv-conflict p {
  color: #5f6368;
}

.uv-conflict button {
  min-height: 32px;
  padding: 0 15px;
  border-color: #cfd4dc;
  border-radius: 16px;
  color: #3c4043;
  background: #fff;
  font-weight: 600;
}

.uv-conflict button:hover {
  background: #f1f3f4;
}

.uv-conflict button.danger {
  border-color: #b3261e;
  background: #b3261e;
}

@media (max-width: 620px) {
  .udoc-vault-panel {
    border-radius: 0;
  }
}

@media (max-width: 760px) {
  #ribbon .rb-doc-name {
    max-width: 34vw;
  }

  #ribbon .rb-titlebar .rb-quick span {
    display: none;
  }

  #ribbon .rb-titlebar .rb-quick {
    width: 34px;
    padding: 0;
    justify-content: center;
  }

  #ai-panel {
    right: 4px;
    top: 4px;
    bottom: 32px;
    width: min(392px, calc(100vw - 8px));
    max-width: calc(100vw - 8px);
    border-radius: 14px;
  }
}

@media print {
  #ribbon,
  #statusbar,
  #ai-panel,
  #cloud-dialog {
    display: none !important;
  }
}

/* OmniDoc Connect 云文件面板。它只调用同源 Rust BFF，不持有 OAuth 令牌。 */
.udoc-cloud-dialog {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  justify-content: flex-end;
  padding: 12px;
  pointer-events: none;
  background: transparent;
  box-sizing: border-box;
}

.udoc-cloud-dialog.hidden { display: none; }

.udoc-cloud-panel {
  position: relative;
  width: min(var(--cloud-width, 560px), 100%);
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d7dce4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 42px rgba(31, 47, 69, .18);
  animation: cloud-slide-in 180ms ease-out;
}
.udoc-cloud-dialog.is-fullscreen .udoc-cloud-panel { width: 100%; }
.udoc-cloud-resizer { position: absolute; z-index: 2; inset: 58px auto 58px 0; width: 8px; cursor: ew-resize; touch-action: none; outline-offset: -2px; }
.udoc-cloud-resizer::after { content: ''; position: absolute; top: 40%; bottom: 40%; left: 2px; width: 3px; border-radius: 3px; background: #c7d2df; }
.udoc-cloud-resizer:hover::after, .udoc-cloud-resizer:focus-visible::after { background: #1769e0; }
.udoc-cloud-dialog.is-fullscreen .udoc-cloud-resizer { display: none; }
body.cloud-resizing, body.cloud-resizing * { cursor: ew-resize !important; user-select: none !important; }
@media (max-width: 620px) { .udoc-cloud-resizer { display: none; } }
#ui-prompt .up-hint { white-space: pre-line; max-height: 45vh; overflow: auto; }
#ui-prompt.ui-dialog-danger .up-ok { background: #ba332b; border-color: #ba332b; color: #fff; }
.attachment-download.is-downloading { min-width: 84px; width: auto; padding: 0 10px; font-size: 12px; color: #2472ca; }
@media screen {
  #pages.udoc-page-grid { width: var(--grid-width) !important; height: var(--grid-height) !important; }
}
@media print { #pages > .page { translate: none !important; } }
.page-grid-controls { display: flex; align-items: center; gap: 4px; padding-left: 10px; margin-left: 8px; border-left: 1px solid #d0d7e2; }
.page-grid-controls button[aria-pressed="true"] { background: #d8e6fc; color: #125bb8; }
@keyframes cloud-slide-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .udoc-cloud-panel { animation: none; } }

.udoc-cloud-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(115deg, #f0f8fb, #f9fbff 70%);
  border-bottom: 1px solid #e6e9ef;
}

.udoc-cloud-panel h2,
.udoc-cloud-panel p { margin: 0; }
.udoc-cloud-panel h2 { font-size: 20px; line-height: 1.3; font-weight: 650; letter-spacing: -.4px; color: #1b354e; }
.udoc-cloud-panel p { margin-top: 3px; font-size: 12px; color: #6f7785; }

.udoc-cloud-panel button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #d2d7df;
  border-radius: 9px;
  color: #30343b;
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.udoc-cloud-panel button:hover:not(:disabled) { background: #f3f6fb; }
.udoc-cloud-panel button:disabled { opacity: .45; cursor: default; }
.udoc-cloud-panel button.hidden { display: none; }
.udoc-cloud-panel button.primary { border-color: #1769e0; color: #fff; background: #1769e0; }
.udoc-cloud-panel button.primary:hover:not(:disabled) { color: #fff; background: #145ac1; }
.udoc-cloud-panel button.danger:not(:disabled) { color: #b3261e; }
.udoc-cloud-window-actions { display: flex; gap: 4px; }
.udoc-cloud-panel .udoc-cloud-window-actions button,
.udoc-cloud-panel #cloud-refresh { display: grid; place-items: center; width: 36px; min-height: 36px; padding: 0; border: 0; background: transparent; flex-shrink: 0; }
.udoc-cloud-window-actions svg, #cloud-refresh svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cloud-restore-icon, .is-fullscreen .cloud-expand-icon { display: none; }
.is-fullscreen .cloud-restore-icon { display: block; }

.udoc-cloud-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 4px;
}
.udoc-cloud-toolbar #cloud-refresh { margin-left: auto; }
.udoc-cloud-toolbar button { min-height: 34px; font-size: 13px; }

.udoc-cloud-storage { margin: 6px 18px 0; color: #64758a; font-size: 11px; }
.udoc-cloud-storage summary { position: relative; list-style: none; padding: 5px 20px 5px 0; cursor: pointer; border-radius: 4px; }
.udoc-cloud-storage summary::-webkit-details-marker { display: none; }
.udoc-cloud-storage summary::after { content: ''; position: absolute; right: 2px; top: 10px; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.udoc-cloud-storage[open] summary::after { transform: rotate(225deg); }
.udoc-cloud-storage summary:focus-visible { outline: 2px solid #1769e0; outline-offset: 2px; }
.udoc-cloud-storage p { padding-bottom: 6px; }
.udoc-cloud-storage-values { display: flex; justify-content: space-between; gap: 16px; }
.udoc-cloud-storage-values strong { margin-left: 4px; font-size: 12px; color: #1b354e; font-variant-numeric: tabular-nums; }
#cloud-usage-meter { display: block; appearance: none; border: 0; width: 100%; height: 4px; margin: 7px 0 0; border-radius: 9px; overflow: hidden; background: #dce8f0; }
#cloud-usage-meter[hidden] { display: none; }
#cloud-usage-meter::-webkit-progress-bar { background: #dce8f0; }
#cloud-usage-meter::-webkit-progress-value { background: linear-gradient(90deg, #1769e0, #17adbc); border-radius: 9px; }
#cloud-usage-meter::-moz-progress-bar { background: #1769e0; }
#cloud-usage-note { font-size: 11px; }
.udoc-cloud-kinds { display: flex; gap: 4px; padding: 6px 18px 0; }
.udoc-cloud-kinds button { min-height: 34px; border-color: transparent; border-radius: 18px; font-size: 13px; }
.udoc-cloud-kinds button[aria-pressed="true"] { color: #1259ba; background: #eaf2ff; border-color: #ccdef7; }
.udoc-cloud-kinds span { margin-left: 5px; font-size: 11px; opacity: .75; }
.udoc-cloud-select-all { margin-left: auto; display: flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.udoc-cloud-select-all input { width: 16px; height: 16px; margin: 0; accent-color: #1769e0; }
.udoc-cloud-kinds .udoc-cloud-select-all span { margin-left: 0; font-size: 12px; }
.udoc-cloud-message { padding: 6px 18px 0; color: #5f6673; font-size: 12px; overflow-wrap: anywhere; max-height: 70px; overflow: auto; }
.udoc-cloud-message:empty { display: none; }
.udoc-cloud-message.is-error { color: #b3261e; }

.udoc-cloud-file-list {
  min-height: 0;
  flex: 1 1 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 6px 10px 12px;
}

#ribbon .rb-account-documents-icon {
  width: 22px; height: 22px; flex: 0 0 22px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.udoc-cloud-filter {
  display: flex; gap: 8px; padding: 8px 18px;
  border-bottom: 1px solid #edf1f6;
}
.udoc-cloud-filter input, .udoc-cloud-filter select {
  min-width: 0; padding: 9px 11px; border: 1px solid #d9e0eb;
  border-radius: 8px; color: #303845; background: #fff; font: 13px/1.3 system-ui, sans-serif;
}
.udoc-cloud-filter input { flex: 1; }
.udoc-cloud-filter :focus-visible { outline: 2px solid #1769e0; outline-offset: 2px; }

.udoc-cloud-file {
  display: grid;
  grid-template-columns: 24px 32px minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  width: 100%;
  padding: 12px 8px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
}

.udoc-cloud-file:hover { background: #f5f7fb; }
.udoc-cloud-file.is-selected { border-color: #8ab4f8; background: #eaf2ff; }
.udoc-cloud-file:focus-visible, .udoc-cloud-panel button:focus-visible { outline: 2px solid #1769e0; outline-offset: 2px; }
.udoc-cloud-select-mark { grid-row: 1 / 3; grid-column: 1; width: 24px; min-height: 38px; display: grid; place-items: center; }
.udoc-cloud-select-mark::before { content: ''; width: 15px; height: 15px; border: 1.5px solid #b8c4d4; border-radius: 4px; background: #fff; }
.is-selected .udoc-cloud-select-mark::before { content: '✓'; display: grid; place-items: center; color: #fff; background: #1769e0; border-color: #1769e0; font: 12px/1 system-ui; }
.udoc-cloud-file-icon { grid-column: 2; grid-row: 1 / 3; align-self: start; width: 32px; height: 38px; display: grid; place-items: center; color: #207191; background: #e7f3f8; border-radius: 8px; }
.udoc-cloud-file-icon svg { width: 21px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.udoc-cloud-file-icon.is-attachment { color: #5653ad; background: #eeedfb; font-size: 11px; font-weight: 700; }
.udoc-cloud-file-size { grid-column: 4; grid-row: 1; align-self: start; font-size: 11px; line-height: 20px; color: #768395; white-space: nowrap; }
.udoc-cloud-file-name { grid-column: 3; min-width: 0; color: #25272c; font-size: 14px; line-height: 1.45; font-weight: 550; overflow-wrap: anywhere; white-space: normal; }
.udoc-cloud-file-meta { grid-column: 3 / 5; color: #7a818d; font-size: 11px; overflow-wrap: anywhere; }
.udoc-cloud-empty { display: grid; align-content: center; justify-items: center; gap: 12px; min-height: 220px; padding: 24px; text-align: center; color: #7b8290; }
.udoc-cloud-empty strong { color: #314964; font-size: 17px; }
.udoc-cloud-empty .udoc-cloud-file-icon { grid-row: auto; grid-column: auto; width: 58px; height: 66px; }
.udoc-cloud-footer { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-top: 1px solid #e6edf4; background: #fafcff; }
.udoc-cloud-footer > div { flex: 1; min-width: 0; }
.udoc-cloud-footer strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #364b63; font-size: 12px; font-weight: 500; }
.udoc-cloud-footer button { font-size: 13px; white-space: nowrap; }
.udoc-cloud-footer p { font-size: 11px; }
.udoc-cloud-panel > :not(.udoc-cloud-file-list) { flex-shrink: 0; }

@media (min-width: 900px) {
  .udoc-cloud-dialog.is-fullscreen .udoc-cloud-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  }
  .is-fullscreen .udoc-cloud-panel > header { grid-column: 1 / -1; grid-row: 1; }
  .is-fullscreen .udoc-cloud-toolbar { grid-column: 1; grid-row: 2; align-self: center; }
  .is-fullscreen .udoc-cloud-storage { grid-column: 2; grid-row: 2; align-self: center; }
  .is-fullscreen .udoc-cloud-kinds { grid-column: 1; grid-row: 3; align-self: center; padding-bottom: 6px; }
  .is-fullscreen .udoc-cloud-filter { grid-column: 2; grid-row: 3; border-bottom: 0; }
  .is-fullscreen .udoc-cloud-message { grid-column: 1 / -1; grid-row: 4; }
  .is-fullscreen .udoc-cloud-file-list { grid-column: 1 / -1; grid-row: 5; border-top: 1px solid #edf1f6; }
  .is-fullscreen .udoc-cloud-footer { grid-column: 1 / -1; grid-row: 6; }
}

@media (max-width: 620px) {
  .udoc-cloud-dialog { padding: 0; }
  .udoc-cloud-panel { width: 100%; border: 0; border-radius: 0; }
  .udoc-cloud-panel #cloud-fullscreen { display: none; }
  .udoc-cloud-panel > header { padding-top: max(10px, env(safe-area-inset-top, 0px)); }
  .udoc-cloud-footer { padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
  .udoc-cloud-footer > div { display: none; }
  .udoc-cloud-footer #cloud-delete-selected { margin-right: auto; }
  .udoc-cloud-filter select { width: 110px; }
  .udoc-cloud-kinds { padding-inline: 12px; gap: 0; }
  .udoc-cloud-kinds button { padding-inline: 10px; }
  .udoc-cloud-file { column-gap: 8px; }
}
@media (max-height: 600px) {
  .udoc-cloud-panel > header { padding: 8px 18px; }
  #cloud-dialog-subtitle { display: none; }
  .udoc-cloud-toolbar { padding-top: 6px; }
  .udoc-cloud-footer { padding-top: 6px; padding-bottom: 6px; }
  .udoc-cloud-empty { min-height: 140px; padding: 12px; gap: 8px; }
}
@media (max-height: 450px) {
  .udoc-cloud-dialog { padding: 6px; }
  .udoc-cloud-panel > header { padding-block: 4px; }
  .udoc-cloud-toolbar { padding-block: 2px; }
  .udoc-cloud-toolbar button, .udoc-cloud-footer button { min-height: 32px; }
  .udoc-cloud-storage { margin-top: 2px; }
  #cloud-usage-meter { margin-top: 4px; height: 3px; }
  .udoc-cloud-kinds { padding-top: 2px; }
  .udoc-cloud-kinds button { min-height: 30px; }
  .udoc-cloud-filter { padding-block: 4px; }
  .udoc-cloud-filter input, .udoc-cloud-filter select { padding-block: 6px; }
  .udoc-cloud-footer { padding-block: 4px max(4px, env(safe-area-inset-bottom, 0px)); }
}

/* Publisher-specific reading projections; original native text boxes never
 * leave the model, and the normal canvas returns intact when exiting. */
#ribbon #tab-omnidoc { color: #13768b; }
#ribbon #tab-omnidoc.hidden { display: none; }
#ribbon [data-omni-view][aria-pressed="true"] { background: #dceef6; color: #165f7f; }
#omnidoc-reading[hidden] { display: none; }
.udoc-omni-reading #canvas { visibility: hidden; pointer-events: none; }
#omnidoc-reading { position: fixed; inset: var(--ribbon-h, 150px) 0 34px; z-index: 90; overflow: auto; background: #f2f6fa; padding: 28px max(20px, calc((100vw - 1040px) / 2)); color: #25374a; }
#omnidoc-reading > header { padding: 0 4px 22px; }
#omnidoc-reading h1 { font-size: 23px; margin: 0 0 8px; }
#omnidoc-reading > header p { margin: 0; color: #708092; font-size: 13px; }
.omni-reading-article { width: 794px; max-width: 100%; box-sizing: border-box; margin: 0 auto; background: white; box-shadow: 0 2px 12px #20305014; padding: 48px 56px; font: 16px/1.7 Charter, Arial, sans-serif; overflow-wrap: break-word; color: #111; }
.omni-reading-run { margin: 0 0 14px; line-height: 1.7; text-align: left; }
#omnidoc-reading .omni-reading-article h1, #omnidoc-reading .omni-reading-article h2 { font-weight: bold; line-height: 1.4; margin: 20px 0 12px; }
#omnidoc-reading .omni-reading-article h1[data-type="doc_title"] { text-align: center; margin: 26px 0 16px; }
.omni-reading-run[data-type="footnote"], .omni-reading-run[data-type="vision_footnote"] { color: #555; }
.omni-reading-article a { color: inherit; text-decoration: none; }
.omni-reading-article[data-mode="bilingual-flow"] .omni-reading-src { color: #555; margin-bottom: .35em; padding-bottom: .35em; border-bottom: 1px dashed #0002; }
.omni-reading-article[data-mode="bilingual"] .omni-reading-run { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; border-bottom: 1px solid #e8eef3; padding-bottom: 18px; }
.omni-reading-src, .omni-reading-trans { min-width: 0; }
.omni-reading-label { display: block; color: #648c9f; font-size: 11px; letter-spacing: 2px; margin-bottom: 6px; }
.omni-reading-run table { max-width: 100%; border-collapse: collapse; }
.omni-reading-run td, .omni-reading-run th { border: 1px solid #dfe7ef; padding: 6px; }
.omni-reading-figure { margin: 16px auto; max-width: 100%; break-inside: avoid; }
.omni-reading-figure[data-type="formula"] { margin: 10px auto; }
.omni-reading-figure .omni-reading-hidden-text, .omni-reading-figure .omni-reading-hidden-text * { color: transparent !important; background: transparent !important; text-shadow: none !important; }
/* Publisher geometry depends on these stylesheet-level metrics, not just the
 * inline font size. Preserve deliberate inline hanging indents/padding. */
.udoc-textbox .tbox-content > .autoscale, .omni-reading-crop .autoscale {
  margin: 0; padding: 0; box-sizing: border-box; text-align: left;
  hyphens: auto; -webkit-hyphens: auto; word-break: normal; overflow-wrap: break-word;
  text-box-trim: trim-both; text-box-edge: text; contain: layout;
}
.udoc-textbox .autoscale a { color: inherit; text-decoration: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (max-width: 680px) {
  #omnidoc-reading { padding: 18px 12px; }
  .omni-reading-article { padding: 20px; }
  .omni-reading-article[data-mode="bilingual"] .omni-reading-run { grid-template-columns: 1fr; gap: 12px; }
}
/* Public collaboration viewers retain selection/copy/navigation while every
 * mutation surface is visibly unavailable. */
#ribbon .rb-document-access-slot {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: flex-start;
  align-items: center;
  margin-top: 1px;
}
#ribbon .rb-document-access-slot:empty {
  display: none;
}
#ribbon #udoc-readonly-badge {
  flex: 0 0 auto;
  padding: 4px 10px;
  border: 1px solid #bfd7e5;
  border-radius: 999px;
  background: #eef8fb;
  color: #24627a;
  font: 600 12px/1.2 "Segoe UI", "Microsoft YaHei", sans-serif;
  white-space: nowrap;
}
@media (max-width: 364px) {
  #ribbon .rb-doc-name {
    max-width: max(0px, calc(100vw - 246px));
  }
}
body.udoc-document-readonly #pages {
  caret-color: transparent;
  cursor: default;
}
body.udoc-document-readonly [data-udoc-readonly-disabled="true"] {
  opacity: .42;
  cursor: not-allowed !important;
}
/* Immediate feedback while the server prepares the protected login redirect. */
#btn-account[data-login-pending="true"] { position: relative; cursor: progress; }
#btn-account[data-login-pending="true"]::after {
  content: ""; position: absolute; inset: -3px; border: 2px solid #dce8f1;
  border-top-color: #149bb0; border-radius: 50%;
  animation: udoc-loader-spin .8s linear infinite; pointer-events: none;
}

/* View controls are presentation state. They do not alter the document page size. */
#ribbon .udoc-help-link {
  display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px;
  color: var(--ink-soft); text-decoration: none; border-radius: 8px;
  padding: 6px 10px; font: inherit; font-size: 14px; white-space: nowrap;
}
#ribbon .udoc-help-link:hover { background: var(--hover); color: var(--accent); }
.udoc-help-link svg, #document-reading-tools svg, .document-view-switch svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}
#statusbar #btn-view-mode[hidden], #document-reading-tools[hidden] { display: none !important; }
#statusbar .document-view-switch {
  display: inline-flex; align-items: center; flex: 0 0 auto; gap: 2px;
  padding: 2px; border-radius: 9px; background: var(--ribbon-bg);
}
#statusbar .document-view-switch button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 30px; padding: 4px; border-radius: 7px;
}
#statusbar .document-view-switch button[aria-pressed="true"],
#ribbon [data-document-view][aria-pressed="true"] { color: var(--accent); background: var(--on); }
#document-reading-tools {
  display: flex; align-items: center; gap: 16px; min-height: 48px;
  padding: 4px 20px 8px; color: var(--ink-soft); font-size: 13px;
}
#document-reading-tools button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 6px 12px; border: 0; border-radius: 10px;
  background: var(--on); color: var(--accent); font: inherit; cursor: pointer;
}
#document-reading-tools a { margin-left: auto; color: var(--accent); text-underline-offset: 4px; }
:is(.udoc-help-link, .document-view-switch button, #document-reading-tools button, #document-reading-tools a):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
body.udoc-reading-view #ribbon :is(.ribbon-tabs, .ribbon-panels),
body.udoc-reading-view :is(#btn-ai, #btn-plugins, #plugin-tools, #ai-panel),
body.udoc-reading-view #pages .para-mark { display: none !important; }
body.udoc-reading-view .html-edit-island { pointer-events: none; }
body.udoc-reading-view.show-marks #pages :is(.blk-blank, .word-tab, .dyn-block, .attachment-block, .video-block, .html-embed)::before,
body.udoc-reading-view.show-marks #pages :is(.blk-blank, .word-tab, .dyn-block, .attachment-block, .video-block, .html-embed)::after { content: none !important; }
@media screen and (max-width: 760px) {
  #ribbon .udoc-help-link { min-height: 42px; padding: 9px 12px; }
  #statusbar .document-view-switch button { width: 44px; height: 44px; }
  #document-reading-tools { gap: 8px; padding: 0 8px 6px; }
  #document-reading-tools :is(button, a) { min-height: 44px; display: inline-flex; align-items: center; }
  #document-reading-tools .reading-hint { display: none; }
}

/* Mobile chrome only. Page widths, padding, typography and pagination stay intact. */
#mobile-document-zoom { display: none; }
@media screen and (max-width: 760px), screen and (pointer: coarse) {
  #mobile-document-zoom {
    display: block; position: fixed; z-index: 80; left: 50%;
    bottom: max(var(--mobile-zoom-bottom, 64px), calc(14px + env(safe-area-inset-bottom, 0px)));
    transform: translateX(-50%); padding: 3px 8px; margin: 0;
    background: transparent; border: 0; color: #626976;
    font: 500 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-variant-numeric: tabular-nums; letter-spacing: .03em;
    text-shadow: 0 1px 2px #fff, 0 0 6px rgba(255,255,255,.8);
    pointer-events: none; user-select: none; opacity: 0; transition: opacity 180ms ease-out;
  }
  #mobile-document-zoom[data-visible="true"] { opacity: .88; }
  #statusbar :is(.desktop-document-zoom-label, #zoom-slider, #zoom-val) { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { #mobile-document-zoom { transition: none; } }
body.presenting #mobile-document-zoom,
body.udoc-html-immersive #mobile-document-zoom,
body.udoc-embed-mode:not(.udoc-embed-expanded) #mobile-document-zoom { display: none !important; }
@media screen and (max-width: 760px) {
  body { height: 100dvh; }
  #ribbon { padding-top: env(safe-area-inset-top, 0px); contain: none; }
  #ribbon .rb-titlebar {
    height: 52px; align-items: center; gap: 4px;
    padding: 4px max(8px, env(safe-area-inset-right, 0px)) 4px max(8px, env(safe-area-inset-left, 0px));
  }
  #ribbon .rb-app { width: 30px; height: 36px; align-self: center; }
  #ribbon .rb-doc-name {
    position: static; transform: none; flex: 1 1 0; min-width: 0;
    width: 0; max-width: none; height: 40px; padding: 0 4px;
    font-size: 16px; text-align: left; text-overflow: ellipsis;
  }
  #ribbon .rb-titlebar-right { margin-left: 0; height: 44px; flex: 0 0 auto; gap: 4px; }
  #ribbon .rb-titlebar .rb-quick,
  #ribbon #btn-account { width: 44px; min-width: 44px; max-width: 44px; height: 44px; }
  #ribbon #btn-account[data-login-pending="true"]::after { inset: 0; }
  #ribbon .rb-document-access-slot { align-self: center; margin: 0; }
  #ribbon #udoc-readonly-badge { padding: 4px 6px; font-size: 11px; }
  #ribbon .ribbon-tabs {
    position: static; flex: 0 0 auto; min-height: 44px;
    padding: 0 8px; gap: 2px; scrollbar-width: thin;
  }
  #ribbon .rb-tab { flex: 0 0 auto; min-height: 42px; padding: 9px 12px; font-size: 14px; }
  #ribbon #btn-ribbon-toggle { flex: 0 0 44px; height: 42px; }
  #ribbon .ribbon-panels {
    min-height: 52px; padding: 4px; margin: 0 8px 6px; border-radius: 16px;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
  }
  #ribbon .ribbon-panel,
  #ribbon .rb-home-grid.active { min-height: 44px; width: max-content; }
  #ribbon .rb-group,
  #ribbon .rb-home-grid .rb-group { height: 44px; flex-shrink: 0; }
  #ribbon .ribbon-panels :is(button, select, input) { min-height: 40px; font-size: 16px; }
  #ribbon .ribbon-panels button { min-width: 40px; }
  #ribbon .rb-account-menu {
    position: fixed; top: calc(56px + env(safe-area-inset-top, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    width: min(360px, calc(100vw - 16px));
    max-height: calc(100dvh - 72px - env(safe-area-inset-top, 0px)); overflow-y: auto;
  }
  #canvas { padding-top: 24px; min-height: 0; }
  #statusbar {
    height: auto; min-height: 42px; flex-shrink: 0; overflow-x: auto;
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
    gap: 8px; scrollbar-width: thin;
  }
  #statusbar .st-right { flex: 0 0 auto; overflow: visible; }
  #statusbar button { min-height: 34px; }
  #statusbar #cloud-save-status { max-width: min(240px, 64vw); }
  #ai-panel, #ai-panel.ai-floating, #ai-panel.ai-full {
    left: 0 !important; right: 0 !important;
    top: var(--mobile-visual-top, 0px) !important; bottom: auto !important;
    width: 100% !important; min-width: 0; max-width: 100%;
    height: var(--mobile-visual-height, 100dvh) !important; max-height: 100dvh;
    border-radius: 0; padding-top: env(safe-area-inset-top, 0px);
  }
  #ai-panel .ai-resizer { display: none; }
  #ai-panel .ai-head { flex-shrink: 0; touch-action: auto; }
  #ai-panel .ai-head button { width: 44px; height: 44px; }
  #ai-panel .ai-msgs { min-height: 0; overscroll-behavior-y: contain; }
  #ai-panel .ai-dock { padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); flex-shrink: 0; }
  #ai-panel :is(.ai-input, .ai-cfg input) { font-size: 16px; }
  #ai-panel .ai-input { max-height: 24dvh; }
  #ai-panel .ai-chip-desc { white-space: normal; }
  #cloud-dialog :is(input, select, textarea) { font-size: 16px; }
}
@media screen and (max-width: 380px) {
  #ribbon .rb-titlebar #btn-present { display: none; }
}