/* ========================================================================== Tendi Feedback widget Bottom-of-rail "Feedback" button + slide-in composer drawer. Flat, cool-lavender/violet palette (design bible). Self-contained: the drawer is injected at level (outside .tendi-skin), so colours are hard-set with var() hooks as progressive enhancement. Scopes to .tnd-fb*; no globals. ========================================================================== */ :root { --tnd-fb-primary: var(--primary, #6d5df6); --tnd-fb-primary-strong: var(--primary-strong, #5b4bd6); --tnd-fb-tint: var(--primary-tint, #eeebff); --tnd-fb-ink: var(--ink, #1f2030); --tnd-fb-muted: var(--ink-muted, #6b6c80); --tnd-fb-line: var(--line, #e6e5f0); --tnd-fb-bg: #ffffff; --tnd-fb-danger: #d6455d; --tnd-fb-ok: #1f9d6b; } /* --- the rail button -------------------------------------------------- */ @media (min-width: 768px) { .tnd-rail { height: 100%; } } .tnd-rail-feedback { margin-top: auto; } .tnd-rail-feedback i, .tnd-rail-feedback:hover i { color: #fff; } /* --- overlay + drawer ------------------------------------------------- */ .tnd-fb-overlay { position: fixed; inset: 0; z-index: 200000; background: rgba(31, 32, 48, .38); opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease; } .tnd-fb-overlay.is-open { opacity: 1; visibility: visible; } .tnd-fb-drawer { position: fixed; top: 0; right: 0; z-index: 200001; width: 460px; max-width: 100vw; height: 100%; background: var(--tnd-fb-bg); color: var(--tnd-fb-ink); box-shadow: -18px 0 48px rgba(31, 32, 48, .18); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s cubic-bezier(.4, 0, .2, 1); font-family: var(--font-body, "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif); } .tnd-fb-overlay.is-open .tnd-fb-drawer { transform: translateX(0); } @media (max-width: 520px) { .tnd-fb-drawer { width: 100vw; } } /* --- header ----------------------------------------------------------- */ .tnd-fb-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--tnd-fb-line); } .tnd-fb-head h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; } .tnd-fb-head .tnd-fb-sub { margin: 2px 0 0; font-size: 12px; color: var(--tnd-fb-muted); } .tnd-fb-head .tnd-fb-icon { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; display: grid; place-items: center; background: var(--tnd-fb-tint); color: var(--tnd-fb-primary); font-size: 17px; } .tnd-fb-close { margin-left: auto; border: 0; background: transparent; cursor: pointer; width: 34px; height: 34px; border-radius: 9px; color: var(--tnd-fb-muted); font-size: 18px; transition: background .12s ease, color .12s ease; } .tnd-fb-close:hover { background: var(--tnd-fb-tint); color: var(--tnd-fb-ink); } /* --- body ------------------------------------------------------------- */ .tnd-fb-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px; } .tnd-fb-field { margin-bottom: 16px; } .tnd-fb-label { display: block; font-size: 12px; font-weight: 600; color: var(--tnd-fb-muted); margin-bottom: 6px; } .tnd-fb-input, .tnd-fb-textarea, .tnd-fb-select { width: 100%; box-sizing: border-box; font: inherit; color: var(--tnd-fb-ink); background: #fff; border: 1px solid var(--tnd-fb-line); border-radius: 10px; padding: 10px 12px; transition: border-color .12s ease, box-shadow .12s ease; } .tnd-fb-textarea { min-height: 120px; resize: vertical; line-height: 1.5; } .tnd-fb-input:focus, .tnd-fb-textarea:focus, .tnd-fb-select:focus { outline: 0; border-color: var(--tnd-fb-primary); box-shadow: 0 0 0 3px rgba(109, 93, 246, .16); } /* --- attach zone ------------------------------------------------------ */ .tnd-fb-drop { border: 1.5px dashed var(--tnd-fb-line); border-radius: 12px; padding: 16px; text-align: center; color: var(--tnd-fb-muted); font-size: 13px; cursor: pointer; transition: border-color .12s ease, background .12s ease; } .tnd-fb-drop:hover, .tnd-fb-drop.is-drag { border-color: var(--tnd-fb-primary); background: var(--tnd-fb-tint); } .tnd-fb-drop b { color: var(--tnd-fb-primary); font-weight: 600; } .tnd-fb-drop input[type=file] { display: none; } .tnd-fb-actions-inline { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .tnd-fb-capbtn { width: 100%; justify-content: center; margin-top: 8px; } .tnd-fb-capstatus { font-size: 12px; color: var(--tnd-fb-muted); margin-top: 7px; min-height: 14px; text-align: center; } .tnd-fb-capstatus.is-error { color: var(--tnd-fb-danger); } .tnd-fb-ghost { border: 1px solid var(--tnd-fb-line); background: #fff; color: var(--tnd-fb-ink); border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: border-color .12s, background .12s; } .tnd-fb-ghost:hover { border-color: var(--tnd-fb-primary); background: var(--tnd-fb-tint); } .tnd-fb-ghost i { color: var(--tnd-fb-primary); } /* --- file chips ------------------------------------------------------- */ .tnd-fb-files { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .tnd-fb-chip { display: flex; align-items: center; gap: 10px; border: 1px solid var(--tnd-fb-line); border-radius: 10px; padding: 8px 10px; background: #fbfbfe; } .tnd-fb-chip-thumb { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 7px; object-fit: cover; background: var(--tnd-fb-tint); display: grid; place-items: center; color: var(--tnd-fb-primary); font-size: 14px; } .tnd-fb-chip-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; } .tnd-fb-chip-meta { min-width: 0; flex: 1 1 auto; } .tnd-fb-chip-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tnd-fb-chip-size { font-size: 11px; color: var(--tnd-fb-muted); } .tnd-fb-chip-x { border: 0; background: transparent; cursor: pointer; color: var(--tnd-fb-muted); font-size: 15px; padding: 4px; border-radius: 6px; } .tnd-fb-chip-x:hover { color: var(--tnd-fb-danger); background: #fdeef0; } /* --- footer ----------------------------------------------------------- */ .tnd-fb-foot { border-top: 1px solid var(--tnd-fb-line); padding: 14px 20px; } .tnd-fb-sending { font-size: 12px; color: var(--tnd-fb-muted); margin-bottom: 10px; } .tnd-fb-sending b { color: var(--tnd-fb-ink); font-weight: 600; } .tnd-fb-foot-row { display: flex; gap: 10px; align-items: center; } .tnd-fb-submit { flex: 1 1 auto; border: 0; cursor: pointer; font: inherit; font-weight: 600; background: var(--tnd-fb-primary); color: #fff; border-radius: 10px; padding: 11px 16px; transition: background .12s ease, opacity .12s ease; } .tnd-fb-submit:hover { background: var(--tnd-fb-primary-strong); } .tnd-fb-submit:disabled { opacity: .6; cursor: default; } /* --- status / messages ------------------------------------------------ */ .tnd-fb-status { font-size: 12.5px; margin-top: 10px; min-height: 16px; } .tnd-fb-status.is-error { color: var(--tnd-fb-danger); } .tnd-fb-status.is-ok { color: var(--tnd-fb-ok); } /* --- confirmation state ----------------------------------------------- */ .tnd-fb-done { text-align: center; padding: 48px 28px; } .tnd-fb-done-ring { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px; background: #e7f6ef; color: var(--tnd-fb-ok); display: grid; place-items: center; font-size: 28px; } .tnd-fb-done h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; } .tnd-fb-done p { margin: 0 0 4px; color: var(--tnd-fb-muted); font-size: 14px; } .tnd-fb-done .tnd-fb-ref { font-weight: 700; color: var(--tnd-fb-primary); } .tnd-fb-done .tnd-fb-ghost { margin-top: 22px; } /* --- offline/retry pill ---------------------------------------------- */ .tnd-fb-queued { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--tnd-fb-muted); background: var(--tnd-fb-tint); border-radius: 999px; padding: 5px 11px; margin-top: 10px; } .tnd-fb-queued i { color: var(--tnd-fb-primary); } /* --- required marker + invalid field state ---------------------------- */ .tnd-fb-req { color: var(--tnd-fb-danger); font-weight: 700; } .tnd-fb-field.is-invalid .tnd-fb-label { color: var(--tnd-fb-danger); } .tnd-fb-field.is-invalid .tnd-fb-textarea, .tnd-fb-field.is-invalid .tnd-fb-dd-btn { border-color: var(--tnd-fb-danger); box-shadow: 0 0 0 3px rgba(214, 69, 93, .14); } /* --- custom category dropdown ----------------------------------------- */ .tnd-fb-dd { position: relative; } .tnd-fb-dd-btn { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 8px; font: inherit; color: var(--tnd-fb-ink); background: #fff; cursor: pointer; text-align: left; border: 1px solid var(--tnd-fb-line); border-radius: 10px; padding: 10px 12px; transition: border-color .12s ease, box-shadow .12s ease; } .tnd-fb-dd-btn:focus { outline: 0; border-color: var(--tnd-fb-primary); box-shadow: 0 0 0 3px rgba(109, 93, 246, .16); } .tnd-fb-dd-val { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tnd-fb-dd-val.is-placeholder { color: var(--tnd-fb-muted); } .tnd-fb-dd-caret { color: var(--tnd-fb-muted); font-size: 12px; transition: transform .15s ease; } .tnd-fb-dd.is-open .tnd-fb-dd-caret { transform: rotate(180deg); } .tnd-fb-dd-panel { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--tnd-fb-line); border-radius: 10px; box-shadow: 0 12px 30px rgba(31, 32, 48, .14); padding: 5px; max-height: 240px; overflow-y: auto; } .tnd-fb-dd-opt { display: block; width: 100%; text-align: left; font: inherit; color: var(--tnd-fb-ink); background: transparent; border: 0; border-radius: 7px; padding: 9px 10px; cursor: pointer; } .tnd-fb-dd-opt:hover, .tnd-fb-dd-opt.is-active { background: var(--tnd-fb-tint); color: var(--tnd-fb-primary); } /* --- clickable attachment chips --------------------------------------- */ .tnd-fb-chip.is-clickable { cursor: pointer; } .tnd-fb-chip.is-clickable:hover { border-color: var(--tnd-fb-primary); } /* --- attachment lightbox ---------------------------------------------- */ .tnd-fb-lightbox { position: fixed; inset: 0; z-index: 200020; background: rgba(15, 15, 26, .9); display: flex; align-items: center; justify-content: center; padding: 28px; } .tnd-fb-lb-stage { max-width: 96vw; max-height: 92vh; display: flex; } .tnd-fb-lb-stage img, .tnd-fb-lb-stage video { max-width: 96vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); } .tnd-fb-lb-close { position: absolute; top: 16px; right: 20px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 24px; cursor: pointer; } .tnd-fb-lb-close:hover { background: rgba(255, 255, 255, .26); } /* --- screenshot redaction editor -------------------------------------- */ .tnd-fb-redactor { position: fixed; inset: 0; z-index: 200010; background: rgba(20, 20, 32, .82); display: flex; align-items: center; justify-content: center; padding: 18px; } .tnd-fb-red-panel { background: #fff; border-radius: 14px; max-width: 96vw; max-height: 94vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, .4); } .tnd-fb-red-head, .tnd-fb-red-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; } .tnd-fb-red-head { border-bottom: 1px solid var(--tnd-fb-line); font-size: 13.5px; color: var(--tnd-fb-ink); font-weight: 600; } .tnd-fb-red-head i { color: var(--tnd-fb-primary); } .tnd-fb-red-grow { flex: 1 1 auto; } .tnd-fb-red-stage { padding: 14px 16px; overflow: auto; background: #f4f4fa; display: grid; place-items: center; } .tnd-fb-red-stage canvas { cursor: crosshair; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, .16); max-width: 100%; touch-action: none; } .tnd-fb-red-foot { border-top: 1px solid var(--tnd-fb-line); justify-content: flex-end; } .tnd-fb-red-hint { font-size: 11px; color: var(--tnd-fb-muted); font-weight: 400; } /* End of file tendi-feedback.css */