/* SkrivSikkert toolbar redesign + document-share UI.
   Keep editor overrides scoped and strong: the existing editor skin uses !important. */

.bb-skrivebord .top-controls .left-controls { display: flex !important; }
.bb-skrivebord .skv2-action-controls {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.bb-skrivebord .skv2-action-controls .ctl-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex: 0 0 auto !important;
  height: 36px !important;
  padding: 0 4px !important;
  margin-left: 6px !important;
  background: var(--sk-card) !important;
  border: 1px solid rgba(228, 220, 212, .78) !important;
  border-radius: 10px !important;
}
.bb-skrivebord .skv2-action-controls .ctl-group:first-child { margin-left: 0 !important; }
.bb-skrivebord .skv2-action-controls #copyBtn,
.bb-skrivebord .skv2-action-controls #downloadBtnQuill,
.bb-skrivebord .skv2-action-controls #doc-save-btn,
.bb-skrivebord .skv2-action-controls #shareBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 28px !important;
  /* min-width must be stated, not just width: save-ui.css carries a phone-only
     rule (.doc-save-btn { min-height:36px; min-width:36px; padding:6px } under
     max-width:767px) for the LEGACY .left-controls placement of the save button.
     Everything else in it loses to the !important declarations here, but there was
     no min-width to lose to — so on phones the save pill alone rendered 36px wide
     (46px box) next to 32px (42px box) siblings. Stating it keeps all four boxes
     identical here without touching the legacy toolbar, which still gets its
     bigger phone tap target. */
  min-width: 32px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--sk-ink-2) !important;
}
.bb-skrivebord .skv2-action-controls #copyBtn svg,
.bb-skrivebord .skv2-action-controls #downloadBtnQuill svg,
.bb-skrivebord .skv2-action-controls #doc-save-btn svg,
.bb-skrivebord .skv2-action-controls #shareBtn svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto !important;
}
.bb-skrivebord .skv2-action-controls #copyBtn:hover:not(:disabled),
.bb-skrivebord .skv2-action-controls #downloadBtnQuill:hover:not(:disabled),
.bb-skrivebord .skv2-action-controls #doc-save-btn:hover:not(:disabled),
.bb-skrivebord .skv2-action-controls #shareBtn:hover:not(:disabled) {
  background: var(--sk-inset) !important;
  color: var(--sk-ink) !important;
}
.bb-skrivebord .skv2-action-controls #copyBtn:focus-visible,
.bb-skrivebord .skv2-action-controls #downloadBtnQuill:focus-visible,
.bb-skrivebord .skv2-action-controls #doc-save-btn:focus-visible,
.bb-skrivebord .skv2-action-controls #shareBtn:focus-visible {
  outline: 2px solid rgba(74, 122, 104, .55) !important;
  outline-offset: 2px !important;
}

.bb-skrivebord .counter-nav-div {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: auto !important;
}
.bb-skrivebord .counter-nav-div .format-toolbar { order: 1 !important; }
.bb-skrivebord .counter-nav-div .ctl-sub {
  order: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.bb-skrivebord .counter-nav-div .ctl-sub .ss-mic {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(76, 122, 92, .10) !important;
  border: 1px solid rgba(76, 122, 92, .22) !important;
  border-radius: 10px !important;
  color: #3f6b50 !important;
}
.bb-skrivebord .counter-nav-div .ctl-sub #micButton1 svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 1.5 !important;
}
.bb-skrivebord .counter-nav-div .ctl-sub .ss-mic:hover:not(:disabled) {
  background: rgba(76, 122, 92, .18) !important;
  border-color: rgba(76, 122, 92, .35) !important;
}
.bb-skrivebord .counter-nav-div .ctl-sub #micButton1.ss-mic--listening {
  color: var(--chat-mic-active, #4a7a68) !important;
}
.bb-skrivebord .counter-nav-div .ctl-sub::after {
  content: '';
  width: 1px;
  height: 18px;
  flex: 0 0 1px;
  margin-left: 10px;
  background: rgba(228, 220, 212, .5);
}

@media (max-width: 767px) {
  .bb-skrivebord .counter-nav-div .ctl-sub {
    display: none !important;
  }
}

.bb-skrivebord .format-group.group-2 {
  display: flex !important;
  align-items: center !important;
}
.bb-skrivebord .format-group.group-2 #readBtn {
  width: 38px !important;
  justify-content: center !important;
  padding: 0 !important;
}
.bb-skrivebord .format-group.group-2 .ed-voice-wrap {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  height: 38px !important;
  /* 11px, matching the desktop rule in calm-ed-overflow.css. That rule is scoped to
     min-width:901px AND is outranked here (0,2,0 vs this 0,4,0), so the wrap actually
     rendered flush at every width until this value carried the spacing itself. */
  margin-right: 9px !important;
}
.bb-skrivebord .format-group.group-2 .ed-voice-chevron {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  min-width: 14px !important;
  height: 38px !important;
  padding: 0 !important;
  margin-left: -6px !important;
}
.bb-skrivebord .format-group.group-2 .ed-voice-chevron svg {
  width: 10px !important;
  height: 10px !important;
  opacity: .6;
}

.bb-skrivebord .wm-nudge-panel {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
}
.bb-skrivebord .wm-nudge-panel #pasteBtn,
.bb-skrivebord .wm-nudge-panel #uploadImg {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: 34px !important;
  min-height: 0 !important;
  padding: 0 12px !important;
  gap: 7px !important;
  border-radius: 12px !important;
  font: 400 14px/21px Inter, system-ui, sans-serif !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: var(--sk-ink-2) !important;
}
.bb-skrivebord .wm-nudge-panel #pasteBtn svg,
.bb-skrivebord .wm-nudge-panel #uploadImg svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto !important;
}
.bb-skrivebord .wm-nudge-panel #pasteBtn:hover,
.bb-skrivebord .wm-nudge-panel #uploadImg:hover {
  background: var(--sk-inset) !important;
  border-color: transparent !important;
  color: var(--sk-ink) !important;
}
.bb-skrivebord .wm-nudge-panel #pasteBtn:focus-visible,
.bb-skrivebord .wm-nudge-panel #uploadImg:focus-visible {
  outline: 2px solid rgba(74, 122, 104, .55) !important;
  outline-offset: 2px !important;
}
.bb-skrivebord .wm-nudge-panel #wm-start-notes {
  order: 0 !important;
  background: var(--sk-card) !important;
  border: 1px solid rgba(74, 122, 104, .24) !important;
  border-radius: 12px !important;
  font-weight: 500 !important;
}
.bb-skrivebord .wm-nudge-panel #pasteBtn { margin-left: 6px !important; }
.bb-skrivebord .wm-nudge-panel #imageUpload { display: none !important; }

.bb-skrivebord .sk-doc-share-badge {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 7px !important;
  padding: 2px 6px !important;
  color: #3f6d5c !important;
  background: rgba(74, 122, 104, .1) !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  vertical-align: 1px !important;
}

.bb-skrivebord .sk-share-modal[hidden] { display: none !important; }
.bb-skrivebord .sk-share-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10050 !important;
  display: grid !important;
  place-items: center !important;
  padding: 20px !important;
}
.bb-skrivebord .sk-share-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(35, 31, 28, .42) !important;
  backdrop-filter: blur(3px) !important;
}
.bb-skrivebord .sk-share-dialog {
  position: relative !important;
  width: min(620px, 100%) !important;
  max-height: min(820px, calc(100vh - 40px)) !important;
  overflow: auto !important;
  color: var(--sk-ink) !important;
  background: var(--sk-card) !important;
  border: 1px solid rgba(228, 220, 212, .9) !important;
  border-radius: 18px !important;
  box-shadow: 0 26px 80px rgba(35, 31, 28, .22) !important;
  outline: none !important;
}
.bb-skrivebord .sk-share-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 24px 24px 18px !important;
  border-bottom: 1px solid rgba(228, 220, 212, .78) !important;
}
.bb-skrivebord .sk-share-head h2 { margin: 0 !important; font-size: 22px !important; }
.bb-skrivebord .sk-share-subtitle { margin: 5px 0 0 !important; color: var(--sk-ink-2) !important; font-size: 14px !important; }
.bb-skrivebord .sk-share-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  color: var(--sk-ink-2) !important;
  background: var(--sk-inset) !important;
  border: 0 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
}
.bb-skrivebord .sk-share-close svg {
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
}
.bb-skrivebord .sk-share-body { display: grid !important; gap: 14px !important; padding: 20px 24px 24px !important; }
.bb-skrivebord .sk-share-body[hidden],
.bb-skrivebord .sk-share-loading[hidden],
.bb-skrivebord .sk-share-error[hidden] { display: none !important; }
.bb-skrivebord .sk-share-loading,
.bb-skrivebord .sk-share-error { padding: 34px 24px !important; color: var(--sk-ink-2) !important; text-align: center !important; }
.bb-skrivebord .sk-share-error { color: #8d403d !important; }
.bb-skrivebord .sk-share-row {
  display: grid !important;
  gap: 12px !important;
  padding: 16px !important;
  background: var(--sk-inset) !important;
  border: 1px solid rgba(228, 220, 212, .7) !important;
  border-radius: 14px !important;
}
.bb-skrivebord .sk-share-row-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; }
.bb-skrivebord .sk-share-row-head strong { display: block !important; font-size: 15px !important; }
.bb-skrivebord .sk-share-row-head span { display: block !important; margin-top: 3px !important; color: var(--sk-ink-2) !important; font-size: 12px !important; }
.bb-skrivebord .sk-share-switch { position: relative !important; display: inline-flex !important; flex: 0 0 auto !important; }
.bb-skrivebord .sk-share-switch input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.bb-skrivebord .sk-share-switch > span {
  position: relative !important;
  width: 42px !important;
  height: 24px !important;
  margin: 0 !important;
  background: rgba(116, 110, 102, .3) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
}
.bb-skrivebord .sk-share-switch > span::after {
  content: '' !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 18px !important;
  height: 18px !important;
  background: var(--sk-card) !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2) !important;
  transition: transform .16s ease !important;
}
.bb-skrivebord .sk-share-switch input:checked + span { background: #4a7a68 !important; }
.bb-skrivebord .sk-share-switch input:checked + span::after { transform: translateX(18px) !important; }
.bb-skrivebord .sk-share-switch input:focus-visible + span { outline: 2px solid rgba(74, 122, 104, .55) !important; outline-offset: 2px !important; }
.bb-skrivebord .sk-share-link { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 7px !important; }
.bb-skrivebord .sk-share-link input {
  min-width: 0 !important;
  height: 36px !important;
  padding: 0 10px !important;
  color: var(--sk-ink-2) !important;
  background: var(--sk-card) !important;
  border: 1px solid rgba(228, 220, 212, .9) !important;
  border-radius: 9px !important;
  font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace !important;
}
.bb-skrivebord .sk-share-link button,
.bb-skrivebord .sk-share-owner-comment button {
  min-height: 36px !important;
  padding: 0 11px !important;
  color: var(--sk-ink) !important;
  background: var(--sk-card) !important;
  border: 1px solid rgba(228, 220, 212, .9) !important;
  border-radius: 9px !important;
  font: 600 12px/1 Inter, system-ui, sans-serif !important;
  cursor: pointer !important;
}
.bb-skrivebord .sk-share-link button:disabled,
.bb-skrivebord .sk-share-link input:disabled { opacity: .48 !important; cursor: not-allowed !important; }
.bb-skrivebord .sk-share-privacy { margin: 0 !important; color: var(--sk-ink-2) !important; font-size: 12px !important; line-height: 1.5 !important; }
.bb-skrivebord .sk-share-owner-comments { padding-top: 6px !important; border-top: 1px solid rgba(228, 220, 212, .78) !important; }
.bb-skrivebord .sk-share-comments-head { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.bb-skrivebord .sk-share-comments-head h3 { margin: 12px 0 !important; font-size: 16px !important; }
.bb-skrivebord .sk-share-comments-head > span { color: var(--sk-ink-2) !important; font-size: 13px !important; }
.bb-skrivebord .sk-share-owner-comment-list { display: grid !important; gap: 8px !important; max-height: 230px !important; overflow: auto !important; }
.bb-skrivebord .sk-share-owner-comment { padding: 12px !important; background: var(--sk-inset) !important; border-radius: 11px !important; }
.bb-skrivebord .sk-share-owner-comment.is-resolved { opacity: .58 !important; }
.bb-skrivebord .sk-share-owner-comment-meta { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 8px !important; }
.bb-skrivebord .sk-share-owner-comment-meta span { color: var(--sk-ink-2) !important; font-size: 11px !important; }
.bb-skrivebord .sk-share-owner-comment p { margin: 7px 0 10px !important; white-space: pre-wrap !important; overflow-wrap: anywhere !important; font-size: 13px !important; line-height: 1.45 !important; }
.bb-skrivebord .sk-share-owner-comment button { min-height: 30px !important; }
.bb-skrivebord .sk-share-comment-empty { margin: 10px 0 !important; color: var(--sk-ink-2) !important; text-align: center !important; font-size: 13px !important; }

@media (max-width: 680px) {
  .bb-skrivebord .sk-share-modal { padding: 10px !important; }
  .bb-skrivebord .sk-share-dialog { max-height: calc(100vh - 20px) !important; border-radius: 14px !important; }
  .bb-skrivebord .sk-share-head { padding: 19px 18px 15px !important; }
  .bb-skrivebord .sk-share-body { padding: 16px 18px 20px !important; }
  .bb-skrivebord .sk-share-link { grid-template-columns: minmax(0, 1fr) auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-skrivebord .sk-share-switch > span::after { transition: none !important; }
}