/** * Message body editor — shared chrome for the variable chips, the "add a variable" * catalog modal and the "/" menu (see assets/js/orix/nk-message-editor.js). * * The host page owns the editor box itself; only the pieces the component renders * into are styled here, plus the chip/variable primitives both pages share. * Colours go through tokens so a page can retint them (the sequence builder maps * them onto its terracotta palette). */ :root { --nk-msg-ink: #2c2a28; --nk-msg-mute: #6f6a66; --nk-msg-faint: #9a938d; --nk-msg-rule: #e6e1db; --nk-msg-soft: #f6f4f1; --nk-msg-acc: #0a6ebd; --nk-msg-acc-ink: #08558f; --nk-msg-acc-soft: #e8f1f9; } /* Variable chip inside the editor — inert, selected as a whole */ .nk-msg-chip { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--nk-msg-acc-ink); background: var(--nk-msg-acc-soft); border-radius: 6px; padding: 1px 6px; margin: 0 1px; line-height: 1.5; vertical-align: baseline; white-space: nowrap; cursor: default; user-select: none; } /* Editor box — a contenteditable behaving like a textarea */ .nk-msg-editor { min-height: 120px; padding: 12px 14px; border: 1px solid var(--nk-msg-rule); border-radius: 11px; background: #fff; font-size: 14px; line-height: 1.6; color: var(--nk-msg-ink); white-space: pre-wrap; word-break: break-word; cursor: text; } .nk-msg-editor:focus { outline: 0; border-color: var(--nk-msg-acc); box-shadow: 0 0 0 3px var(--nk-msg-acc-soft); } .nk-msg-editor.readonly { background: var(--nk-msg-soft); cursor: default; } .nk-msg-count { text-align: right; font-size: 11px; color: var(--nk-msg-faint); margin-top: 5px; font-variant-numeric: tabular-nums; } .nk-msg-hint { font-size: 11.5px; color: var(--nk-msg-mute); margin: 13px 0 9px; line-height: 1.45; } .nk-msg-add { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 11px; border: 1px dashed var(--nk-msg-rule); border-radius: 8px; background: transparent; font-size: 12.5px; font-weight: 600; color: var(--nk-msg-acc-ink); cursor: pointer; transition: .1s; } .nk-msg-add:hover { border-color: var(--nk-msg-acc); background: var(--nk-msg-acc-soft); } /* Clickable variable (favourites + catalog) */ .nk-msg-var { font-size: 11.5px; font-weight: 500; color: var(--nk-msg-ink); background: var(--nk-msg-soft); border: 1px solid var(--nk-msg-rule); border-radius: 7px; padding: 4px 8px; transition: .1s; cursor: pointer; } .nk-msg-var:hover { border-color: var(--nk-msg-acc); color: var(--nk-msg-acc-ink); background: var(--nk-msg-acc-soft); } .nk-msg-vars { display: flex; flex-wrap: wrap; gap: 6px; } .nk-msg-vars-group { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--nk-msg-faint); margin: 10px 0 6px; } .nk-msg-vars-group:first-child { margin-top: 0; } /* Catalog modal */ .nk-msg-modal-overlay { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; background: rgba(20,18,16,.4); padding: 24px; } .nk-msg-modal { display: flex; flex-direction: column; width: 100%; max-width: 460px; max-height: 78vh; background: #fff; border-radius: 15px; box-shadow: 0 20px 56px rgba(0,0,0,.26); overflow: hidden; } .nk-msg-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; font-size: 15px; font-weight: 700; color: var(--nk-msg-ink); border-bottom: 1px solid var(--nk-msg-rule); } .nk-msg-modal-x { border: 0; background: transparent; color: var(--nk-msg-mute); cursor: pointer; padding: 4px; border-radius: 7px; } .nk-msg-modal-x:hover { background: var(--nk-msg-soft); color: var(--nk-msg-ink); } .nk-msg-modal-x svg { width: 18px; height: 18px; } .nk-msg-modal-search { margin: 14px 18px 6px; width: calc(100% - 36px); font-size: 13px; color: var(--nk-msg-ink); background: #fff; border: 1px solid var(--nk-msg-rule); border-radius: 9px; padding: 8px 11px; } .nk-msg-modal-search:focus { outline: 0; border-color: var(--nk-msg-acc); } .nk-msg-modal-body { overflow-y: auto; padding: 6px 18px 18px; } /* "/" menu */ .nk-msg-slash { position: fixed; /* Au-dessus des modals (popup d'action, fiche en modale) : le menu vit sur , il passait sous la boîte de dialogue qui l'avait ouvert. */ z-index: 100000; min-width: 220px; max-width: 320px; max-height: 280px; overflow-y: auto; background: #fff; border: 1px solid var(--nk-msg-rule); border-radius: 11px; box-shadow: 0 12px 32px rgba(0,0,0,.16); padding: 5px; } .nk-msg-slash-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; font-size: 13px; color: var(--nk-msg-ink); cursor: pointer; } .nk-msg-slash-item.sel, .nk-msg-slash-item:hover { background: var(--nk-msg-acc-soft); color: var(--nk-msg-acc-ink); } /* La commande /ada n'insère pas une valeur : elle ouvre une demande à Ada. */ .nk-msg-slash-ada { color: var(--ada-link-accent, #026d9f); font-weight: 600; } .nk-msg-slash-ada.sel, .nk-msg-slash-ada:hover { color: var(--ada-link-accent, #026d9f); background: color-mix(in srgb, var(--ada-link-accent, #026d9f) 12%, transparent); } .nk-msg-slash-group { font-size: 10.5px; font-weight: 600; color: var(--nk-msg-faint); white-space: nowrap; } .nk-msg-slash-item.sel .nk-msg-slash-group { color: var(--nk-msg-acc-ink); opacity: .7; } /* Composer quick-vars (#47913): entry whose value is not filled yet — kept in the menu to teach where to fill it, but inert. */ .nk-msg-slash-item.off { flex-wrap: wrap; cursor: default; opacity: .6; } .nk-msg-slash-item.off:hover { background: transparent; color: var(--nk-msg-ink); } .nk-msg-slash-hint { flex-basis: 100%; font-size: 11px; color: var(--nk-msg-faint); } /* Composer quick-vars (#47913): one-line usage hint under the body field. */ .nk-qv-hint { margin-top: 4px; font-size: 11.5px; color: var(--nk-msg-faint); } /* ---- commande /ada : brouillon dans la zone ---------------------------- */ /* L'encart de la zone est celui du bouton « Lier à Ada » (rx-ada-linked / is-ada-linked, posé par api.setGlow) — ici on n'habille QUE le texte de la demande. État d'éditeur : rien de tout ceci n'est sérialisé dans le message. */ .nk-ada-prompt { caret-color: var(--ada-link-accent, #026d9f); } .nk-ada-prompt-writing { cursor: progress; } /* Corps Redactor : surlignage par l'API Highlight, aucune balise dans le document. */ ::highlight(nk-ada-prompt) { color: var(--ada-link-accent, #026d9f); background-color: color-mix(in srgb, var(--ada-link-accent, #026d9f) 14%, transparent); } /* Demande partie, réponse en route : elle reste lisible mais grise — la voir redevenir du texte normal donnait l'impression qu'il ne s'était rien passé. */ ::highlight(nk-ada-prompt-busy) { color: var(--nk-msg-faint, #9a938d); background-color: color-mix(in srgb, currentColor 8%, transparent); } .nk-ada-mirror.is-busy mark { color: var(--nk-msg-faint, #9a938d); background-color: rgba(0,0,0,.05); } /* Repli des navigateurs sans API Highlight : la zone entière prend la couleur. */ .nk-ada-prompt-fallback { color: var(--ada-link-accent, #026d9f) !important; background: color-mix(in srgb, var(--ada-link-accent, #026d9f) 8%, transparent) !important; } /* Textarea nue : impossible de styler un fragment, le texte du champ est masqué et rendu par un calque miroir aligné dessus (nk-composer-quickvars.js). */ .nk-ada-masked { color: transparent !important; -webkit-text-fill-color: transparent; } .nk-ada-mirror { position: fixed; /* Même étage que le menu : dans une popup, le calque doit rester au-dessus du modal comme le champ qu'il double. */ z-index: 100000; margin: 0; overflow: hidden; pointer-events: none; white-space: pre-wrap; overflow-wrap: break-word; border-style: solid; border-color: transparent; background: transparent; color: var(--nk-msg-ink, inherit); } .nk-ada-mirror mark { padding: 0; border-radius: 3px; color: var(--ada-link-accent, #026d9f); background-color: color-mix(in srgb, var(--ada-link-accent, #026d9f) 14%, transparent); } /* Demande encore vide : l'invite dit quoi faire du mode qu'on vient d'activer. Le calque masquant le texte du champ, elle remplace aussi son placeholder. */ .nk-ada-mirror mark.is-hint { color: color-mix(in srgb, var(--ada-link-accent, #026d9f) 55%, transparent); background-color: transparent; } .nk-ada-masked::placeholder { color: transparent !important; } /* Même invite au curseur d'un corps Redactor : un ::after sur la zone la mettrait en fin de document, or la commande peut être tapée en plein texte. */ .nk-ada-hint { position: fixed; z-index: 100000; pointer-events: none; white-space: nowrap; color: color-mix(in srgb, var(--ada-link-accent, #026d9f) 55%, transparent); } /* Ce qu'Ada répond quand elle n'écrit pas : question, refus, erreur. Sous la zone où la commande a été tapée — /ada ne laisse aucune trace dans le dock. */ .nk-ada-note { position: fixed; /* Plancher : le JS relève au-dessus de la pile réelle de la zone (stackZ). */ z-index: 100000; max-width: 420px; padding: 8px 12px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--ada-link-accent, #026d9f) 35%, transparent); background: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.16); font-size: 12.5px; line-height: 1.45; color: var(--nk-msg-ink, #1b2733); } .nk-ada-note-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 11.5px; font-weight: 600; color: var(--ada-link-accent, #026d9f); } .nk-ada-note-glyph { width: 14px; height: 14px; display: block; } .nk-ada-note-x { margin-left: auto; border: 0; background: transparent; padding: 0 2px; font-size: 16px; line-height: 1; color: var(--nk-msg-faint); cursor: pointer; } .nk-ada-note-x:hover { color: var(--nk-msg-ink); } .nk-ada-note-body { white-space: pre-wrap; } .nk-ada-note--error { border-color: color-mix(in srgb, #d64545 45%, transparent); } .nk-ada-note--error .nk-ada-note-head { color: #b73b3b; }