/* =============================================================================
   DEX CRM - Docs

   The builder is two columns: a palette that stays put, and an A4 sheet that
   scrolls. The sheet is drawn at its real pixel size (794 × 1123 at 96dpi) so
   what somebody arranges on screen is what comes out of the printer - the
   whole reason for showing a page instead of a column of blocks.
   ============================================================================= */

.doc-builder {
    height: 100%;
    min-height: 0;
}

.doc-builder__grid {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 0;
    height: 100%;
    min-height: 0;
}

/* -----------------------------------------------------------------------------
   PALETTE
   -------------------------------------------------------------------------- */

.doc-palette {
    overflow-y: auto;
    padding: 4px 18px 24px 0;
    border-right: 1px solid var(--border-subtle);
}

.doc-palette__section {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.doc-palette__section:last-child { border-bottom: 0; }

.doc-palette__title {
    margin: 0 0 3px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.doc-palette__hint {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
}

.doc-palette__blocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.doc-block-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 9px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-small, 8px);
    background: var(--surface-panel, #fff);
    font: inherit;
    font-size: 12.5px;
    color: var(--text-primary);
    cursor: grab;
    text-align: left;
}

.doc-block-chip:hover {
    border-color: var(--accent, #6366f1);
    color: var(--accent, #6366f1);
}

.doc-block-chip:active { cursor: grabbing; }

.doc-block-chip--widget {
    grid-column: 1 / -1;
    background: var(--accent-tint, #eef0ff);
}

/* Collapsible variable and widget sections, the same fold the email builder
   uses so the palette is a short list of headings until you open one. */
.doc-palette__section--fold { padding: 0; }
.doc-palette__section--fold[open] { padding-bottom: 14px; }

.doc-palette__summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 2px;
    cursor: pointer;
    user-select: none;
}

.doc-palette__summary::-webkit-details-marker { display: none; }

.doc-palette__summary-title {
    flex: 1;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.doc-palette__summary:hover .doc-palette__summary-title { color: var(--text-primary); }

.doc-palette__chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.doc-palette__section--fold[open] > .doc-palette__summary .doc-palette__chevron {
    transform: rotate(90deg);
}

.doc-palette__group { margin-top: 10px; }

.doc-palette__group-label {
    margin-bottom: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
}

/* A variable reads as a thing you can pick up, not as a word. */
.doc-token {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 3px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: var(--surface-subtle, #f4f6f8);
    font-size: 11.5px;
    color: var(--text-secondary);
    cursor: grab;
}

.doc-token:hover {
    border-color: var(--accent, #6366f1);
    color: var(--accent, #6366f1);
}

/* Custom fields are tinted, exactly as they are in the email builder, so it
   is obvious which variables came from Fields and Layout. */
.doc-token[data-custom] {
    background: #e8f7ef;
    border-color: #b7e3cb;
    color: #17724a;
}

/* -----------------------------------------------------------------------------
   STAGE
   -------------------------------------------------------------------------- */

.doc-stage {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    position: relative;
}

.doc-stage__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0 12px 18px;
    border-bottom: 1px solid var(--border-subtle);
}

.doc-name {
    flex: 1 1 200px;
    min-width: 160px;
    padding: 7px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-small, 8px);
    font: inherit;
    font-weight: 600;
}

/* The toolbar is its own row now rather than a cluster wedged beside the
   document name: fourteen controls do not share a line with a text field and
   a button, and wrapping them mid-cluster reads as breakage. */
.doc-rich-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    padding: 7px 18px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-subtle, #f4f6f8);
}

.doc-rich-tools__split {
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: var(--border-default);
}

.doc-rich-tools__select {
    height: 26px;
    max-width: 120px;
    padding: 0 6px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: var(--surface-panel);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-size-small);
}

.doc-rich-tools__select--narrow {
    max-width: 74px;
}

/* The swatch reads as a colour, so the word beside it says WHICH colour.
   Two identical swatches side by side is a guess every time. */
.doc-rich-tools__colour {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 7px 0 4px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: var(--surface-panel);
}

.doc-rich-tools__colour input[type="color"] {
    width: 20px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    background: none;
    cursor: pointer;
}

.doc-rich-tools__colour-name {
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
    white-space: nowrap;
}

.doc-rich-tools__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: var(--radius-button);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.doc-rich-tools__button:hover {
    background: var(--surface-panel, #fff);
    color: var(--accent, #6366f1);
}

.doc-page-holder {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 22px 18px 60px;
    background: #eef1f4;
}

.doc-page {
    margin: 0 auto;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.13);
    box-sizing: border-box;
}

.doc-page__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 240px;
    border: 2px dashed var(--border-strong, #d5dadf);
    border-radius: var(--radius-button);
    color: var(--text-muted);
    text-align: center;
}

.doc-page__empty p { margin: 0; }
.doc-page__empty-hint { font-size: 12px; }

/* -----------------------------------------------------------------------------
   BLOCKS

   The furniture - grip, tools, settings - is builder-only. None of it exists
   in renderDocument's output, which is why the preview and the printed sheet
   look like a document rather than an editor.
   -------------------------------------------------------------------------- */

.doc-block {
    position: relative;
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    transition: border-color 120ms ease, background 120ms ease;
}

.doc-block:hover { border-color: #dbe1f5; }

.doc-block--selected {
    border-color: var(--accent, #6366f1);
    background: rgba(99, 102, 241, 0.03);
}

.doc-block--dragging { opacity: 0.4; }

.doc-block__grip,
.doc-block__tools {
    position: absolute;
    top: -11px;
    display: none;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--surface-panel, #fff);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
    font-size: 11px;
    color: var(--text-muted);
    z-index: 2;
}

.doc-block__grip { left: 8px; cursor: grab; }
.doc-block__tools { right: 8px; }

.doc-block:hover .doc-block__grip,
.doc-block:hover .doc-block__tools,
.doc-block--selected .doc-block__grip,
.doc-block--selected .doc-block__tools {
    display: flex;
}

.doc-block__tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.doc-block__tool:hover {
    background: var(--surface-subtle, #f4f6f8);
    color: var(--accent, #6366f1);
}

.doc-block__body { padding: 4px 8px; }

.doc-block__settings {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 8px 8px;
    padding: 8px 10px;
    border-radius: var(--radius-button);
    background: var(--surface-subtle, #f4f6f8);
}

.doc-block__note {
    font-size: 12px;
    color: var(--text-muted);
}

.doc-field {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-secondary);
}

.doc-field__input {
    padding: 4px 7px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: var(--surface-panel, #fff);
    font: inherit;
    font-size: 12px;
}

.doc-field__input--number { width: 66px; }

.doc-field__colour {
    width: 30px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: none;
}

/* The editable areas carry no chrome of their own - the document's type is
   what should be visible, not a box around it. */
.doc-editable:focus {
    outline: 2px solid rgba(99, 102, 241, 0.35);
    outline-offset: 2px;
    border-radius: 3px;
}

.doc-columns-edit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.doc-widget-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border: 1px dashed var(--accent, #6366f1);
    border-radius: var(--radius-button);
    background: var(--accent-tint, #eef0ff);
    font-size: 12.5px;
    color: var(--accent, #6366f1);
}

.doc-widget-preview em {
    margin-left: auto;
    font-size: 11.5px;
    font-style: normal;
    color: var(--text-muted);
}

/* A drop line is invisible until something is being dragged over it, so the
   page reads as a document at rest and as a builder in motion. */
.doc-drop-line {
    height: 8px;
    margin: 1px 0;
    border-radius: 4px;
    transition: background 100ms ease;
}

.doc-drop-line--over {
    background: var(--accent, #6366f1);
    height: 4px;
    margin: 3px 0;
}

/* -----------------------------------------------------------------------------
   DOCUMENT TYPE - shared with the preview and the printed sheet
   -------------------------------------------------------------------------- */

/* Type comes through CUSTOM PROPERTIES rather than fixed values.
   A `line-height` set on a block wrapper cannot beat a rule that names
   `.doc-text p` directly - the rule is more specific, so the control appeared
   to do nothing. A custom property inherits, so the wrapper wins and the
   numbers below are only what an unset block falls back to. */
.doc-h {
    margin: 0 0 var(--doc-para-space, 8px);
    line-height: var(--doc-line-height, 1.25);
    font-weight: 700;
}

.doc-text p {
    margin: 0 0 var(--doc-para-space, 9px);
    line-height: var(--doc-line-height, 1.55);
}

.doc-text ul, .doc-text ol {
    margin: 0 0 var(--doc-para-space, 9px);
    line-height: var(--doc-line-height, 1.55);
    padding-left: 22px;
}

.doc-text li { margin-bottom: calc(var(--doc-para-space, 9px) / 3); }

/* Paragraph styles the toolbar's Style dropdown produces (formatBlock),
   matching the printed sheet so the builder shows the real thing. */
.doc-text h1 {
    font-size: 1.7em;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 var(--doc-para-space, 10px);
}
.doc-text h2 {
    font-size: 1.35em;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 var(--doc-para-space, 9px);
}
.doc-text h3 {
    font-size: 1.12em;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 var(--doc-para-space, 8px);
}
.doc-text blockquote {
    margin: 0 0 var(--doc-para-space, 10px);
    padding: 2px 0 2px 14px;
    border-left: 3px solid #cbd2da;
    color: #55606e;
    font-style: italic;
}

.doc-table { width: 100%; border-collapse: collapse; margin: 10px 0; }

.doc-table th,
.doc-table td {
    border: 1px solid #d5dadf;
    padding: 7px 9px;
    text-align: left;
    font-size: 0.95em;
}

.doc-table th { background: #f4f6f8; font-weight: 600; }

/* On screen the break is a labelled rule; on paper it is a real page break. */
.doc-page-break {
    height: 0;
    margin: 14px 0;
    border-top: 2px dashed var(--accent, #6366f1);
}

.doc-block .doc-page-break::after {
    content: 'Page break';
    display: block;
    width: fit-content;
    margin: -9px auto 0;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--accent, #6366f1);
    font-size: 10.5px;
    color: #fff;
}

.doc-signature { width: 100%; margin-top: 28px; }

.doc-signature td {
    width: 50%;
    padding-right: 26px;
    vertical-align: top;
}

.doc-signature__line { border-bottom: 1px solid #1f2430; height: 34px; }
.doc-signature__role { font-size: 0.85em; color: #6b7280; margin-top: 5px; }
.doc-signature__name { font-weight: 600; margin-top: 2px; }
.doc-signature__date { font-size: 0.85em; color: #6b7280; margin-top: 12px; }

.doc-signature__rule {
    display: inline-block;
    width: 120px;
    border-bottom: 1px solid #9aa3ad;
}

.doc-image { display: block; max-width: 100%; }

.doc-image--empty {
    padding: 22px;
    border: 1px dashed var(--border-strong, #d5dadf);
    border-radius: var(--radius-button);
    color: var(--text-muted);
    text-align: center;
    font-size: 12.5px;
}

/* -----------------------------------------------------------------------------
   A WIDGET ON THE CANVAS

   Drawn for real rather than shown as a grey chip, so a label or a colour
   somebody has just changed is visible where they changed it. The name rides
   in the corner because a table of items and a table of payments look alike
   at a glance and the block still has to say which it is.
   -------------------------------------------------------------------------- */
.doc-widget-live {
    position: relative;
    padding-top: 6px;
}

.doc-widget-live::before {
    content: attr(data-widget-name);
    position: absolute;
    top: -6px;
    right: 0;
    padding: 1px 6px;
    border-radius: var(--radius-button);
    background: var(--surface-subtle);
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 120ms ease;
}

.doc-block:hover .doc-widget-live::before,
.doc-block--selected .doc-widget-live::before {
    opacity: 1;
}

/* A label somebody can type over. Nothing marks it until the pointer is on
   it: an invoice covered in dotted boxes is a form, and this is meant to look
   like the sheet it will print as. */
[data-widget-edit] {
    border-radius: 3px;
    box-shadow: 0 0 0 0 transparent;
    transition: box-shadow 120ms ease, background 120ms ease;
    cursor: text;
}

.doc-block--selected [data-widget-edit]:hover {
    background: var(--accent-tint, #eef0ff);
    box-shadow: 0 0 0 3px var(--accent-tint, #eef0ff);
}

.doc-label-editing,
.doc-block--selected .doc-label-editing:hover {
    background: var(--surface-panel);
    box-shadow: 0 0 0 2px var(--accent);
    outline: none;
}

/* -----------------------------------------------------------------------------
   THE FORMAT BAR

   Type first, in one row, because it is what somebody reaches for while
   looking at the thing. Everything else stays underneath as fields.
   -------------------------------------------------------------------------- */
.doc-format-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0 0 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
}

.doc-format-bar .doc-field {
    gap: 4px;
}

.doc-format-bar .doc-field > span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.doc-widget-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* A colour with a way back. The picker itself cannot say "unset", so the
   cross beside it is the only route to the default once one is chosen. */
.doc-field__colour-pair {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.doc-field__clear {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-button);
    background: var(--surface-panel);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.doc-field__clear:hover {
    color: var(--text-primary);
}

.doc-field__image {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.doc-field__image .doc-field__input {
    min-width: 150px;
}


/* -----------------------------------------------------------------------------
   PREVIEW
   -------------------------------------------------------------------------- */

.doc-preview { height: 100%; min-height: 0; }

.doc-preview-frame {
    width: 100%;
    height: 100%;
    min-height: 70vh;
    border: 0;
    background: #eef1f4;
}

/* -----------------------------------------------------------------------------
   FIELDS IN THE BUILDER

   A question as it is being written: the label typed in place, the help text
   under it, and a quiet strip saying what KIND of answer this asks for - since
   the answer control itself belongs to the fill page, not here.
   -------------------------------------------------------------------------- */

.doc-field--editing { padding: 2px 0; }

.doc-field--editing .doc-field__label {
    font-weight: 600;
    outline: none;
    min-height: 20px;
}

.doc-field--editing .doc-field__help {
    font-size: 12.5px;
    color: var(--text-muted);
    outline: none;
    min-height: 17px;
}

/* An empty help line would otherwise be an invisible click target. */
.doc-field--editing .doc-field__help:empty::before {
    content: attr(data-placeholder);
    color: var(--text-faint, #b6bcc4);
}

.doc-field__answer-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    padding: 4px 9px;
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-button);
    background: var(--surface-sunken, #f6f8fa);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 500;
}

.doc-field__answer-hint .icon { color: var(--text-muted); }

/* -----------------------------------------------------------------------------
   THE DOCUMENT PANEL - one generated document, read rather than built
   -------------------------------------------------------------------------- */

.doc-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    min-height: 0;
}

/* Four columns need about 500px. The panel is often narrower than that, and
   four squeezed columns turn "Status" into "Stat" - so the row wraps to two
   instead of truncating its own labels. */
.doc-view__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: var(--surface-raised, #fff);
}

.doc-view__meta-cell { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.doc-view__meta-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.doc-view__meta-value {
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-view__status {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: var(--radius-button);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.7;
}

.doc-view__status--draft {
    background: rgba(100, 116, 139, 0.14);
    color: #475569;
}

.doc-view__status--sent {
    background: rgba(37, 99, 235, 0.13);
    color: #1d4ed8;
}

.doc-view__status--viewed {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
}

.doc-view__share {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: var(--surface-raised, #fff);
}

.doc-view__share-label {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.doc-view__share-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 9px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: var(--surface-sunken, #f6f8fa);
    color: var(--text-muted);
    font-size: 12.5px;
}

.doc-view__sheet {
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    overflow: hidden;
}

.doc-view__frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 62vh;
    border: 0;
    background: #eef1f4;
}

/* -----------------------------------------------------------------------------
   ANSWERS - what the client said, read as questions and answers

   Deliberately not a replica of the form. Staff reading this want to know what
   was said, and an unanswered question has to LOOK unanswered - which a
   faithful rendering of the form tends to hide.
   -------------------------------------------------------------------------- */

.form-answers {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    overflow: hidden;
    background: var(--surface-raised, #fff);
}

.form-answers__row {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.form-answers__row:last-child { border-bottom: 0; }

.form-answers__question {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.form-answers__answer {
    font-size: 13px;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.form-answers__row--empty .form-answers__answer { color: var(--text-muted); }
.form-answers__answer em { color: var(--text-muted); font-style: normal; }

.form-answers__tag {
    display: inline-block;
    margin: 0 6px 4px 0;
    padding: 2px 9px;
    border-radius: var(--radius-button);
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
    font-size: 12px;
    font-weight: 500;
}

.form-answers__signature {
    display: block;
    max-width: 220px;
    max-height: 70px;
    border-bottom: 1px solid var(--border-strong, #d5dadf);
}

@media (max-width: 1100px) {
    .doc-builder__grid { grid-template-columns: 1fr; }
    .doc-palette { border-right: 0; border-bottom: 1px solid var(--border-subtle); }
    .form-answers__row { grid-template-columns: 1fr; gap: 4px; }
}

/* -----------------------------------------------------------------------------
   Agent Meeko - the sparkle in the toolbar and the chat dock
   -------------------------------------------------------------------------- */

/* The sparkle sits in the toolbar but carries a word, so it reads as the one
   thing on the bar that does more than format. */
.doc-rich-tools__ai {
    width: auto;
    gap: 6px;
    padding: 0 11px;
    color: var(--accent, #6366f1);
    font: inherit;
    font-size: var(--font-size-small);
    font-weight: 600;
}
.doc-rich-tools__ai span { white-space: nowrap; }
.doc-rich-tools__ai:hover {
    background: var(--accent-tint, #eef0ff);
    border-color: var(--accent, #6366f1);
}

/* Agent Meeko in the builder now runs through the app's own Agent Meeko chat (the
   floating popup or the docked side panel), so the builder no longer draws
   its own chat dock. The sparkle in the toolbar opens that chat and points it
   at the open document; the styles for it live with the rest of Agent Meeko. */