.cll-fb { position: fixed; right: 28px; bottom: 28px; z-index: 9000; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
.cll-fb *, .cll-fb *::before, .cll-fb *::after { box-sizing: border-box; margin: 0; padding: 0; }

.cll-fb__open { display: flex; align-items: center; gap: 12px; margin-left: auto; background: #e8842a; border: none; color: #0a0a0a; font-family: inherit; font-weight: 800; font-size: 13px; letter-spacing: .08em; padding: 18px 26px; cursor: pointer; box-shadow: 0 12px 32px rgba(0,0,0,.5); transition: filter .2s; }
.cll-fb__open:hover { filter: brightness(1.08); }

.cll-fb__panel { display: none; width: 392px; max-width: calc(100vw - 56px); max-height: calc(100vh - 120px); overflow-y: auto; background: #0e0e0e; border: 1px solid rgba(255,255,255,.14); border-top: 3px solid #e8842a; margin-bottom: 16px; box-shadow: 0 24px 64px rgba(0,0,0,.6); }
.cll-fb__panel[data-open="true"] { display: block; animation: cllFbIn .25s ease; }
@keyframes cllFbIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.cll-fb__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,.08); }
.cll-fb__eyebrow { font-family: 'Space Mono', 'Inter', monospace; font-size: 12px; letter-spacing: .15em; color: #e8842a; }
.cll-fb__close { background: none; border: none; color: #8f8f8f; font-size: 20px; line-height: 1; cursor: pointer; transition: color .2s; }
.cll-fb__close:hover { color: #f4f4f3; }

.cll-fb__form { padding: 24px; }
.cll-fb__title { font-weight: 800; font-size: 21px; color: #f4f4f3; }
.cll-fb__intro { font-size: 13.5px; line-height: 1.55; color: #9a9a9a; margin-top: 8px; }
.cll-fb__label { font-family: 'Space Mono', 'Inter', monospace; font-size: 11px; letter-spacing: .14em; color: #bcbcbc; margin: 24px 0 10px; }

.cll-fb__types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cll-fb__chip { font-family: 'Space Mono', 'Inter', monospace; font-size: 11px; letter-spacing: .08em; padding: 12px 8px; cursor: pointer; background: transparent; color: #bcbcbc; border: 1px solid rgba(255,255,255,.18); font-weight: 400; transition: all .15s; }
.cll-fb__chip:hover { border-color: rgba(255,255,255,.4); color: #f4f4f3; }
.cll-fb__chip.is-active { color: #0a0a0a; font-weight: 700; }
.cll-fb__chip[data-type="compliment"].is-active { background: #34a447; border-color: #34a447; }
.cll-fb__chip[data-type="complaint"].is-active  { background: #e8842a; border-color: #e8842a; }
.cll-fb__chip[data-type="suggestion"].is-active { background: #2e8fd4; border-color: #2e8fd4; }
.cll-fb__chip[data-type="barrier"].is-active    { background: #f4f4f3; border-color: #f4f4f3; }

.cll-fb__textarea { width: 100%; background: transparent; border: 1px solid rgba(255,255,255,.18); color: #f4f4f3; font-family: inherit; font-size: 14px; line-height: 1.5; padding: 14px 16px; outline: none; resize: vertical; transition: border-color .15s; }
.cll-fb__textarea:focus { border-color: #e8842a; }
.cll-fb__textarea::placeholder { color: #6f6f6f; }
.cll-fb__error { color: #e8842a; font-size: 12.5px; margin-top: 10px; }

.cll-fb__submit { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 20px; background: #e8842a; border: none; color: #0a0a0a; font-family: inherit; font-weight: 800; font-size: 13px; letter-spacing: .06em; padding: 18px 22px; cursor: pointer; transition: filter .2s; }
.cll-fb__submit:hover { filter: brightness(1.08); }
.cll-fb__submit[disabled] { opacity: .6; cursor: default; filter: none; }

.cll-fb__note { display: flex; gap: 10px; margin-top: 22px; }
.cll-fb__note svg { flex-shrink: 0; margin-top: 2px; }
.cll-fb__note p { font-size: 12.5px; line-height: 1.55; color: #8f8f8f; }

.cll-fb__sent { padding: 40px 24px; text-align: center; }
.cll-fb__sent-title { font-weight: 900; font-size: 30px; letter-spacing: -.01em; color: #f4f4f3; }
.cll-fb__hl-b { color: #2e8fd4; } .cll-fb__hl-g { color: #34a447; } .cll-fb__hl-o { color: #e8842a; }
.cll-fb__sent-msg { font-size: 14.5px; line-height: 1.6; color: #9a9a9a; margin-top: 18px; }
.cll-fb__reset { margin-top: 26px; background: transparent; border: 1px solid rgba(255,255,255,.25); color: #f4f4f3; font-family: inherit; font-weight: 800; font-size: 12px; letter-spacing: .06em; padding: 14px 24px; cursor: pointer; transition: filter .2s; }
.cll-fb__reset:hover { filter: brightness(1.2); }

@media (max-width: 480px) {
  .cll-fb { right: 16px; bottom: 16px; left: 16px; }
  .cll-fb__panel { width: 100%; max-width: 100%; }
}

.cll-fb__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
