/* extras.css: forward note and saved verdict (js/extras.js). Tokens come from styles.css. */
.xsend { margin-top: 12px; }
.xsend-after { margin: 12px 0 0 36px; }
.xsend .btn.block { width: 100%; }
.xsend-panel { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.xsend-note { width: 100%; box-sizing: border-box; min-height: 120px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--surface); color: var(--ink); font: 400 16px/22px var(--font-ui); resize: vertical; }
.xsend-actions { display: flex; gap: 8px; }
.xsend-actions .btn { flex: 1 1 0; min-width: 0; min-height: 52px; padding: 12px 6px; text-decoration: none; }
.xsend-status { min-height: 20px; margin: 0; color: var(--ink-2); }
.xreturn .actions { margin-bottom: 10px; }
.xreturn .commission { margin-top: 6px; }
.xchanges { margin: 0 0 10px; padding-left: 18px; color: var(--ink); font: 400 15px/22px var(--font-ui); }
.xchanges li + li { margin-top: 4px; }
/* tap to explain */
.xterm { position: relative; cursor: help; text-decoration: underline dotted; text-decoration-color: currentColor; text-underline-offset: 3px; }
.xterm::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
.xterm:focus-visible { outline: 2px solid var(--trail); outline-offset: 2px; border-radius: 3px; }
.xexplain { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 1000; max-width: 480px; margin: 0 auto; max-height: 60vh; overflow-y: auto; box-sizing: border-box; padding: 14px 52px 14px 16px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 8px 28px rgba(0, 0, 0, .28); }
.xexplain-close { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; background: none; border: 0; color: var(--ink-2); font: 500 24px/1 var(--font-ui); }
.xexplain-term { margin: 0 0 4px; font: 700 16px/22px var(--font-ui); }
.xexplain p { margin: 0 0 6px; font: 400 15px/22px var(--font-ui); }
.xexplain p:last-child { margin-bottom: 0; }
.xexplain-why { color: var(--ink-2); }
.xexplain-you { font-weight: 600; }
/* check my AI answer */
.xcheck-input { min-height: 150px; margin: 8px 0; }
.xclaims { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.xclaim { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--surface); }
.xmark { display: inline-block; margin-bottom: 4px; font: 700 13px/18px var(--font-ui); color: var(--ink-2); }
.xclaim-wrong .xmark { color: var(--danger); }
.xclaim-right .xmark { color: var(--trail); }
.xclaim-text { margin: 0 0 4px; font: 400 15px/21px var(--font-ui); color: var(--ink); overflow-wrap: anywhere; }
.xclaim-fact { margin: 0; font: 600 14px/20px var(--font-ui); color: var(--ink-2); }
.xterms-near { margin: 4px 0 0; color: var(--ink-2); }
.xclaim-text { font-weight: 600; }
/* send: the opt-in sits between the note and its buttons */
.xsend-add { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); }
.xsend-add input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; }
.xsend-quiet { margin-top: 10px; }
.xsent-photo { margin: 0 0 10px; }
.xsent-ask { margin: 0 0 10px; font: 400 16px/23px var(--font-ui); color: var(--ink); }