/* Brand Guidelines pp. 26–34: official palette only; translucent surfaces adapt to the existing theme. */
:root{--feedback-info:#6B0080;--feedback-success:#009572;--feedback-warning:#D04300;--feedback-error:#DB0049;--feedback-heading:#4B005A;--feedback-body:#575757}
html[data-theme=dark]{--feedback-info:#FAE4FF;--feedback-success:#00ECB5;--feedback-warning:#FFDB49;--feedback-error:#FF80AA;--feedback-heading:#FAE4FF;--feedback-body:#E5E5E5}
body .tp-feedback{--feedback-accent:var(--feedback-info);display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:12px;min-width:0;max-width:100%;margin:12px 0 18px;padding:10px 14px 10px 16px;border:1px solid color-mix(in srgb,var(--feedback-accent) 24%,var(--tp-white,#fff));border-left:4px solid var(--feedback-accent);border-radius:12px;background:linear-gradient(105deg,color-mix(in srgb,var(--feedback-accent) 9%,var(--tp-white,#fff)),color-mix(in srgb,var(--feedback-accent) 3%,var(--tp-white,#fff)));color:var(--feedback-body);text-align:left;box-shadow:none;font:400 13px/1.55 var(--font-ui,Inter,Arial,sans-serif);overflow-wrap:anywhere}
body .tp-feedback[data-feedback-tone=success]{--feedback-accent:var(--feedback-success)}
body .tp-feedback[data-feedback-tone=warning]{--feedback-accent:var(--feedback-warning)}
body .tp-feedback[data-feedback-tone=error]{--feedback-accent:var(--feedback-error)}
body .tp-feedback::before{content:attr(data-feedback-icon);font:24px/1 'Material Symbols Rounded';font-variation-settings:'FILL' 1,'wght' 500;color:var(--feedback-accent);width:24px;height:24px;overflow:hidden;margin:0}
body .tp-feedback-content{min-width:0;display:block;font:inherit;color:var(--feedback-body)}
body .tp-feedback-title{display:block;margin:0 0 3px;color:var(--feedback-heading);font:600 14px/1.5 var(--font-ui,Inter,Arial,sans-serif)}
body .tp-feedback-message{display:block;color:var(--feedback-body);font:inherit}
body .tp-feedback .tp-feedback-close{display:grid;place-items:center;flex:none;width:32px;height:32px;margin:0;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--feedback-accent);cursor:pointer;box-shadow:none}
body .tp-feedback .tp-feedback-close::before{content:'close';font:20px/1 'Material Symbols Rounded'}
body .tp-feedback .tp-feedback-close:hover:not(:disabled){background:color-mix(in srgb,var(--feedback-accent) 10%,transparent);border-color:color-mix(in srgb,var(--feedback-accent) 24%,transparent)}
body .tp-feedback .tp-feedback-close:focus-visible{outline:3px solid #D500FF;outline-offset:2px}
body .tp-feedback[hidden],body .tp-feedback[data-feedback-dismissed=true],body [data-feedback-empty=true]:empty{display:none!important}
body .toast.tp-feedback{position:fixed;inset:calc(var(--topbar-h,64px) + 12px) 20px auto auto;z-index:30001;max-width:min(460px,calc(100vw - 32px));width:max-content;margin:0;opacity:1;transform:none;pointer-events:auto;box-shadow:0 10px 28px color-mix(in srgb,#4B005A 14%,transparent)}
body :is(.email-editor-status,.ticket-tags-feedback,.attachment-error,.bubble-error,.email-history-error).tp-feedback{font-size:12px;margin:8px 0;padding:10px 12px;gap:9px}
body .attachment-error.tp-feedback{grid-column:1/-1}
@media(pointer:coarse){body .tp-feedback .tp-feedback-close{width:44px;height:44px}}
@media(max-width:480px){body .tp-feedback{gap:9px;padding:12px;font-size:12px}body .tp-feedback-title{font-size:13px}body .toast.tp-feedback{right:16px;top:calc(env(safe-area-inset-top,0px) + 12px)}}
@media print{body .tp-feedback,body .toast.tp-feedback{display:none!important}}
@media(forced-colors:active){body .tp-feedback{border:1px solid CanvasText;border-left-width:4px;background:Canvas;color:CanvasText}body .tp-feedback::before,body .tp-feedback-content,body .tp-feedback-title,body .tp-feedback-message{color:CanvasText}body .tp-feedback .tp-feedback-close:focus-visible{outline-color:Highlight}}

/* Messages without a heading stay compact; longer, structured notices keep a reading hierarchy. */
body .tp-feedback:has(.tp-feedback-title){align-items:start;padding-block:14px}
body .tp-feedback-content>:first-child{margin-top:0}
body .tp-feedback-content>:last-child{margin-bottom:0}