/* Template designer — the "Available fields" browser and the preview frame. */

.template-field-tree {
    max-height: 60vh;
    overflow: auto;
}

.template-field-tree-empty {
    padding: 12px 4px;
    color: #6c757d;
    font-style: italic;
}

.template-field-tree-hint {
    padding: 6px 4px 10px;
    color: #6c757d;
    font-size: 12px;
}

/* The whole row is the copy target, not just the snippet — a small click target for the one
   action this dialog exists to support would be a poor trade. */
.template-field-tree .tf-row {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 1px 4px;
    border-radius: 3px;
}

.template-field-tree .tf-row-copyable {
    cursor: pointer;
}

.template-field-tree .tf-row-copyable:hover {
    background: #eef4ff;
}

.template-field-tree .tf-copied {
    font-size: 11px;
    color: #1a7f37;
    opacity: 0;
    transition: opacity .12s ease-in;
}

.template-field-tree .tf-copied-on {
    opacity: 1;
}

/* Name, type and snippet sit on one line; the snippet is the part people copy, so it gets the
   monospace treatment and enough contrast to pick out at a glance. */
.template-field-tree .tf-name {
    font-weight: 600;
    color: #2b2f33;
}

.template-field-tree .tf-type {
    font-size: 11px;
    color: #8a9099;
}

.template-field-tree .tf-snippet {
    padding: 1px 6px;
    border-radius: 3px;
    background: #f2f4f7;
    border: 1px solid #e3e6ea;
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    color: #1f6feb;
    user-select: all; /* one click selects the whole snippet, ready to copy */
}

/* The rendered title — a message's subject, a document's file name. Set apart from the body so it
   reads as the heading it becomes, without looking like a form field. */
.template-preview-subject {
    margin: -4px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e3e6ea;
    font-weight: 600;
    color: #2b2f33;
}

/* A render failure replaces the result. Red because it is almost always the author's own syntax
   error and they are about to go and fix it. */
.template-preview-error {
    padding: 10px 12px;
    border-left: 3px solid #d32f2f;
    background: #fdf3f3;
    color: #b3261e;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    white-space: pre-wrap;
}

/* The preview renders author-written markup, so it is boxed to make plain where the template's
   output starts and ends. */
.template-preview-frame {
    max-height: 55vh;
    overflow: auto;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #e3e6ea;
    border-radius: 4px;
}