.vela-dock-shell {
  --vela-dock-edge: max(.75rem, env(safe-area-inset-left), env(safe-area-inset-right));
  position: fixed;
  z-index: 20;
  inset-inline-end: var(--vela-dock-edge);
  inset-block-end: max(.75rem, env(safe-area-inset-bottom));
  max-inline-size: calc(100% - var(--vela-dock-edge) - var(--vela-dock-edge));
}
.vela-dock-shell[data-positioned] { inset: var(--vela-top) auto auto var(--vela-left); }
.vela-dock-shell:has(.vela-dock[open]) { inline-size: 27rem; }
.vela-dock-grip {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  min-width: 54px; min-height: 46px; padding: .5rem;
  background: var(--ledger-dark); color: var(--ledger-paper);
  border: 0; border-inline-end: 1px solid #748476;
  font: inherit; font-size: .875rem; cursor: grab; touch-action: none;
}
.vela-dock-grip:active { cursor: grabbing; }
.vela-dock-grip:focus-visible { outline: 2px solid var(--ledger-light-copper); outline-offset: -3px; }
.vela-dock-shell > .vela-dock > summary { padding-inline-start: 66px; }
.vela-dock-shell:has(.vela-dock-call:not([hidden])) { padding-top: 46px; }
.vela-dock-writing > summary { min-height: 44px; padding: .3rem 0; color: var(--ledger-copper); text-decoration: underline; }
.vela-dock, .vela-dock-call {
  background: var(--ledger-dark);
  color: var(--ledger-paper);
  border: 1px solid var(--ledger-rule);
}

.vela-dock-shell [hidden] { display: none !important; }
.vela-dock-toolbar, .vela-dock-call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .65rem;
  padding-inline: .7rem;
}
.vela-dock-toolbar { border-top: 1px solid #748476; }
.vela-dock-toolbar button, .vela-dock-call button {
  min-height: 44px;
  padding-inline: .2rem;
  border: 0;
  background: transparent;
  color: var(--ledger-paper);
  font: inherit;
  font-size: .875rem;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: .18em;
  cursor: pointer;
}
.vela-dock-toolbar [data-vela-move] { cursor: grab; touch-action: none; }
.vela-dock-toolbar [data-vela-move]:active { cursor: grabbing; }
.vela-dock-toolbar [data-vela-minimize] { margin-inline-start: auto; }
.vela-dock-toolbar button:focus-visible, .vela-dock-call button:focus-visible { outline: 2px solid var(--ledger-light-copper); outline-offset: -3px; }
.vela-dock-call { justify-content: space-between; margin-block-end: .35rem; font-size: .875rem; }
.vela-dock-call [role="status"] { max-width: 28ch; }
.vela-dock-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vela-dock summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 46px;
  padding: .55rem .85rem;
  cursor: pointer;
  font-weight: 740;
  list-style: none;
}
.vela-dock summary::-webkit-details-marker { display: none; }
.vela-dock summary:focus-visible { outline: 2px solid var(--ledger-light-copper); outline-offset: -4px; }
.vela-dock-marker { position: relative; inline-size: .7rem; block-size: .7rem; }
.vela-dock-marker::before, .vela-dock-marker::after {
  position: absolute;
  content: "";
  inset: 50% 0 auto;
  border-block-start: 2px solid currentColor;
}
.vela-dock-marker::after { transform: rotate(90deg); }
.vela-dock[open] .vela-dock-marker::after { display: none; }

.vela-dock-body {
  max-block-size: 62vh;
  max-block-size: max(4.5rem, min(62dvh, calc(100dvh - 11rem), 31rem));
  overflow: auto;
  padding: 1rem;
  background: var(--ledger-paper);
  color: var(--ledger-ink);
  color-scheme: light;
  scrollbar-color: var(--ledger-muted) var(--ledger-paper);
}
.vela-dock-body p { margin: 0 0 .75rem; line-height: 1.5; overflow-wrap: anywhere; }
.vela-dock-voice { border-bottom: 1px solid var(--ledger-rule); margin-bottom: .85rem; }
.vela-dock-voice p { margin-block: .45rem .85rem; color: var(--ledger-muted); font-size: .875rem; }
.vela-dock-voice .button { min-height: 44px; }
.vela-dock-context { color: var(--ledger-muted); font-size: .875rem; }
.vela-dock-context strong { color: var(--ledger-ink); }
.vela-dock .vela-text-form label { display: grid; gap: .4rem; font-weight: 650; }
.vela-dock textarea {
  inline-size: 100%;
  min-block-size: 4.5rem;
  padding: .5rem .6rem;
  border: 1px solid var(--ledger-muted);
  background: #fcf8ee;
  color: var(--ledger-ink);
  font: inherit;
  font-weight: 400;
  resize: vertical;
}
.vela-dock #vela-dock-note { margin-top: .5rem; color: var(--ledger-muted); font-size: .875rem; }
.vela-dock .vela-text-reply { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--ledger-rule); }
.vela-dock .vela-previous-answer { color: var(--ledger-muted); font-size: .875rem; }
.vela-dock .vela-text-reply a, .vela-dock-actions a, .vela-dock-actions button:not([type="submit"]) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ledger-copper);
  text-underline-offset: .2em;
}
.vela-dock .vela-text-links, .vela-dock-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .9rem; }
.vela-dock-actions { margin-top: .5rem; }
.vela-dock-actions button:not([type="submit"]) {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.vela-dock-actions button[aria-disabled="true"] { opacity: .7; cursor: default; }
.vela-dock-body :is(button, textarea, a):focus-visible { outline: 3px solid var(--ledger-copper); outline-offset: 3px; }
@media (max-width: 600px) {
  .vela-dock-shell:has(.vela-dock[open]) { inline-size: 19rem; }
  .vela-dock-body { max-block-size: max(5rem, min(32dvh, 19rem)); padding: .8rem; }
  .vela-dock textarea { font-size: 16px; }
}