.drawer{opacity:0;z-index:1001;background-color:var(--scrim-color);width:100%;height:100%;transition:all var(--animation-duration) ease-in-out;justify-content:center;align-items:end;display:none;position:fixed}.drawer.active{animation:scrim-open var(--animation-duration) ease-in-out forwards;display:flex}@keyframes scrim-open{0%{opacity:0}to{opacity:1}}.drawer.active>.drawer-content{animation:drawer-open var(--animation-duration) cubic-bezier(.4, 0, .2, 1) forwards}@keyframes drawer-open{0%{transform:translateY(100%)}to{transform:translateY(0)}}.drawer-content{background-color:var(--surface-color);width:100%;max-width:500px;max-height:85%;color:var(--on-surface-color);transition:background-color var(--animation-duration);border-radius:28px 28px 0 0;flex-direction:column;padding:24px;display:flex;position:absolute;bottom:0;overflow:auto;box-shadow:0 -4px 16px #0000001a}.drawer-content>div{flex-direction:column;width:calc(100% - 40px);height:fit-content;display:flex}@media screen and (min-width:768px){.drawer-content{max-width:600px;padding:32px}}.drawer-content::-webkit-scrollbar{width:8px}.drawer-content::-webkit-scrollbar-track{background:0 0}.drawer-content::-webkit-scrollbar-thumb{background:var(--outline-color);border-radius:4px}.drawer-content::-webkit-scrollbar-thumb:hover{background:var(--on-surface-variant-color)}
.feedback-drawer{flex-direction:column;gap:24px;width:calc(100% - 40px);padding-inline:20px;animation:.3s ease-in-out fade-in;display:flex}.feedback-drawer--state{justify-content:center;align-items:center;min-height:180px}.feedback-drawer--conversation{gap:20px}@keyframes fade-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.feedback-header{text-align:center;flex-direction:column;gap:6px;display:flex}.feedback-header h2{color:var(--on-surface-color);margin:0;font-size:22px;font-weight:600}.feedback-header p,.feedback-state-text{color:var(--on-surface-variant-color);margin:0;font-size:13px}.feedback-rating{flex-direction:column;align-items:center;gap:12px;display:flex}.stars-container{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.star-button{cursor:pointer;color:var(--outline-color);background:0 0;border:none;justify-content:center;align-items:center;padding:2px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.star-button:hover{transform:scale(1.1)}.star-button:active{transform:scale(.95)}.star-button.active{color:#ffb800;filter:drop-shadow(0 2px 8px #ffb8004d)}.star-button svg{transition:all .2s cubic-bezier(.4,0,.2,1)}.rating-text{color:var(--on-surface-color);margin:0;font-size:14px;font-weight:500;animation:.3s ease-in-out slide-up}@keyframes slide-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.feedback-comment{flex-direction:column;gap:12px;display:flex}.feedback-comment label{color:var(--on-surface-color);align-items:center;gap:20px;margin-top:20px;margin-bottom:8px;font-size:14px;font-weight:500;display:flex}.feedback-comment label>svg{flex-shrink:0}.feedback-comment label>div{flex-direction:column;gap:4px;display:flex}.feedback-comment label>div>.helper{font-size:13px;font-weight:300}.feedback-comment textarea{width:100%;color:var(--on-surface-color);background-color:var(--surface-variant-color);resize:vertical;box-sizing:border-box;border:1px solid #ccc;border-radius:12px;padding:12px;font-family:inherit;font-size:14px;transition:all .2s ease-in-out}.feedback-comment textarea:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(var(--primary-rgb), .1);outline:none}.feedback-comment textarea::placeholder{color:var(--neutral-color-dark)}.character-count{color:var(--on-surface-variant-color);text-align:right;font-size:12px}.feedback-thread{flex-direction:column;gap:16px;display:flex}.feedback-thread-item{flex-direction:column;gap:10px;display:flex}.feedback-thread-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.feedback-thread-label{text-transform:uppercase;letter-spacing:.04em;color:var(--on-surface-variant-color);font-size:12px;font-weight:700}.feedback-thread-date{color:var(--on-surface-variant-color);font-size:12px}.feedback-thread-rating{color:#ffb800;align-items:center;gap:8px;display:flex}.feedback-thread-rating span{color:var(--on-surface-color);font-size:13px;font-weight:600}.feedback-thread-bubble{background-color:var(--surface-variant-color);border-left:3px solid var(--primary-color);border-radius:14px}.feedback-thread-bubble--admin{background-color:rgba(var(--primary-rgb), .08);border-left-color:var(--accent-color)}.feedback-thread-bubble p{color:var(--on-surface-color);white-space:pre-wrap;margin:0;font-size:14px;line-height:1.6}.feedback-email-note{background-color:rgba(var(--primary-rgb), .08);color:var(--on-surface-color);border-radius:14px;align-items:flex-start;gap:10px;display:flex}.feedback-email-note p{margin:0;font-size:14px;line-height:1.6}.feedback-email-note a{color:var(--primary-color);font-weight:600}.feedback-actions{gap:12px;width:100%;display:flex}.feedback-actions .button{border-radius:24px;flex:1;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-weight:500;transition:all .2s ease-in-out;display:flex}.feedback-actions .button.feedback-button--primary{background-color:var(--accent-color);color:var(--on-accent-color);border:none}.feedback-actions .button.feedback-button--primary span{color:var(--on-accent-color)}.feedback-actions .button.feedback-button--primary:hover{background-color:var(--accent-color-dark)}.feedback-actions .button.feedback-button--secondary{background-color:var(--neutral-color-light);color:var(--on-surface-color);border:1px solid var(--border-color)}.feedback-actions .button.feedback-button--secondary span{color:var(--on-surface-color)}.feedback-actions .button.feedback-button--secondary:hover{background-color:var(--surface-color)}.feedback-actions .button.button--loading,.feedback-actions .button.button--disabled{opacity:.6;cursor:not-allowed}@media screen and (max-width:480px){.feedback-header h2{font-size:20px}.star-button svg{width:32px;height:32px}.feedback-thread-heading,.feedback-actions{flex-direction:column;align-items:stretch}}