/* SkrivSikkert public toolbar compatibility from the app layout.
   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; }
[data-theme="dark"] .bb-skrivebord .skv2-action-controls .ctl-group {
  border-color: var(--sk-line) !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: none !important; background: var(--sk-ink) !important; color: var(--sk-card) !important;

}
[data-theme="dark"] .bb-skrivebord .skv2-action-controls :is(#copyBtn, #downloadBtnQuill, #doc-save-btn, #shareBtn):focus-visible {
  background: var(--sk-ink) !important;
  color: var(--sk-card) !important;
  outline: none !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: none !important; background: var(--sk-ink) !important; color: var(--sk-card) !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; }