/* crm-gmail-integration — frontend styles.
 *
 * Loaded on every CRM frontend page (cheap; the file is ~1 KB). Today
 * it carries only the project-page email-intake tile; future
 * front-of-house surfaces from this plugin can land here too.
 *
 * Uses the core CRM design-system tokens (`var(--crm-*)`) so the tile
 * automatically inherits the active theme (light/dark) and the right
 * surface / border / text-muted treatment without re-defining colors.
 */

.crm-gmail-tile {
    display: flex;
    flex-direction: column;
    gap: var(--crm-sp-2, 8px);
}

/* The "input widget" — a single bordered field with the address on
 * the left and the Copy button attached to its right edge. The
 * shared border (and a single thin divider between halves) reads
 * as one cohesive control — the share-link UX pattern from
 * Dropbox / GitHub clone URLs / Google Drive — which invites a
 * select-and-copy gesture without making the user click the
 * button. The button just provides the one-click shortcut.
 *
 * Width: align-self:flex-start + inline-flex makes the field hug
 * the address's natural width instead of spanning the full sidebar
 * column. Bounded by max-width:100% so a very long address still
 * wraps cleanly inside the available column rather than overflowing
 * out of the tile. */
.crm-gmail-tile__field {
    display: inline-flex;
    align-self: flex-start;
    max-width: 100%;
    align-items: stretch;
    background: var(--crm-surface-2, var(--crm-bg-alt, #f6f7f7));
    border: 1px solid var(--crm-border-light, var(--crm-border, #e5e7eb));
    border-radius: var(--crm-radius-sm, 4px);
    overflow: hidden;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.crm-gmail-tile__field:focus-within {
    border-color: var(--crm-primary, #2563eb);
    box-shadow: 0 0 0 2px var(--crm-primary-soft, rgba(37, 99, 235, 0.15));
}

/* The address: plain <code>, content-width, selectable.
 * flex:0 1 auto = "don't grow, do shrink if the column forces it,
 * default to natural content width". user-select:all makes a
 * single click select the whole address on most browsers;
 * double-click selects a word; triple-click selects the whole
 * field (default text-block behavior). */
.crm-gmail-tile__address {
    flex: 0 1 auto;
    min-width: 0;
    padding: var(--crm-sp-1, 6px) var(--crm-sp-2, 10px);
    background: transparent;
    font-family: var(--crm-mono, monospace);
    font-size: var(--crm-text-sm, 13px);
    color: var(--crm-text, #1f2937);
    line-height: 1.6;
    word-break: break-all;
    user-select: all;
    -webkit-user-select: all;
    cursor: text;
    /* Make the code element behave like an input visually — no
     * Markdown-style background of its own, no border. */
    border: 0;
}

/* The button: attached to the right of the field with a single
 * vertical divider; same height as the field; same border-radius
 * on the trailing edge so it visually merges with the input. */
.crm-gmail-tile__copy {
    flex: 0 0 auto;
    align-self: stretch;
    padding: 0 var(--crm-sp-3, 12px);
    background: var(--crm-surface-3, var(--crm-bg, #ffffff));
    border: 0;
    border-left: 1px solid var(--crm-border-light, var(--crm-border, #e5e7eb));
    color: var(--crm-text, #1f2937);
    font-size: var(--crm-text-sm, 13px);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 120ms ease, color 120ms ease;
}
.crm-gmail-tile__copy:hover,
.crm-gmail-tile__copy:focus {
    background: var(--crm-primary, #2563eb);
    color: var(--crm-on-primary, #ffffff);
    outline: none;
}
.crm-gmail-tile__copy:active {
    background: var(--crm-primary-dark, #1d4ed8);
}

.crm-gmail-tile__hint {
    margin: 0;
    line-height: 1.4;
}