.sidebar-lower { display: grid; gap: 8px; }
.sidebar-utilities { display: grid; gap: 5px; padding-bottom: 4px; }

.feedback-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 15px;
  padding: 27px 29px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #1d2130;
  box-shadow: 0 18px 44px rgba(4, 7, 14, .12);
}
.feedback-hero p { margin: 0 0 8px; color: #ef696f; font: 11px "DM Mono", monospace; letter-spacing: .12em; }
.feedback-hero h2 { margin: 0; font-size: 34px; letter-spacing: -.035em; }
.feedback-hero > div:first-child > span { display: block; margin-top: 7px; color: #9ca5b4; font-size: 13px; line-height: 1.55; }
.feedback-summary { display: grid; grid-template-columns: repeat(3, minmax(88px, 1fr)); gap: 8px; }
.feedback-summary > span { min-width: 96px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(8, 11, 18, .18); }
.feedback-summary small, .feedback-summary b { display: block; }
.feedback-summary small { color: #9ba5b7; font-size: 12px; font-weight: 700; }
.feedback-summary b { margin-top: 3px; color: #f4f6fa; font-size: 25px; letter-spacing: -.035em; }

.feedback-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.feedback-toolbar > div { display: flex; align-items: center; gap: 8px; }
.feedback-toolbar > div label { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 10px 0 13px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.022); }
.feedback-toolbar > div span { color: #98a2b4; font-size: 12px; font-weight: 750; }
.feedback-toolbar select { height: 36px; border: 0; outline: 0; background: transparent; color: #e5e9f1; font-size: 13px; font-weight: 700; }
.feedback-toolbar option { background: #1b202d; }
.feedback-toolbar .search-field { min-height: 46px; }
.feedback-toolbar .search-field input { font-size: 14px; }

.feedback-workspace { display: grid; height: calc(100vh - 252px); min-height: 590px; max-height: 740px; grid-template-columns: minmax(260px, .56fr) minmax(600px, 1.72fr); overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #191d2a; box-shadow: 0 20px 52px rgba(4, 7, 14, .14); }
.feedback-list { min-width: 0; height: 100%; overflow: auto; border-right: 1px solid var(--line); background: rgba(8, 11, 18, .12); }
.feedback-list-item { display: grid; width: 100%; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 17px 13px; border-bottom: 1px solid rgba(255,255,255,.06); background: transparent; color: #bec6d3; text-align: left; transition: background .18s, box-shadow .18s; }
.feedback-list-item:hover { background: rgba(255,255,255,.027); }
.feedback-list-item.is-active { background: rgba(237,68,75,.07); box-shadow: inset 3px 0 0 #ed444b; }
.feedback-list-item > svg { width: 15px; color: #697386; }
.feedback-list-item__type { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; background: rgba(117,103,237,.12); color: #aaa2ff; }
.feedback-list-item__type--issue { background: rgba(237,68,75,.12); color: #ff8b90; }
.feedback-list-item__type--suggestion { background: rgba(239,169,76,.11); color: #f4bd72; }
.feedback-list-item > div { min-width: 0; }
.feedback-list-item > div > span { display: flex; align-items: center; gap: 8px; }
.feedback-list-item b { min-width: 0; flex: 1; overflow: hidden; color: #f3f5f9; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.feedback-list-item p, .feedback-list-item small { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.feedback-list-item p { margin-top: 5px; color: #aab3c2; font-size: 12px; }
.feedback-list-item small { display: flex; align-items: center; gap: 5px; margin-top: 6px; color: #8f99aa; font-size: 10px; }
.feedback-list-item small i { font-style: normal; }
.feedback-state, .feedback-kind { display: inline-flex; align-items: center; border-radius: 999px; font-style: normal; font-weight: 800; white-space: nowrap; }
.feedback-state { padding: 4px 7px; font-size: 10px; }
.feedback-state--new { background: rgba(237,68,75,.13); color: #ff9297; }
.feedback-state--in_review { background: rgba(239,169,76,.12); color: #f1bd75; }
.feedback-state--resolved { background: rgba(85,216,168,.11); color: #6fdbb7; }
.feedback-list-empty { display: grid; min-height: 280px; place-content: center; justify-items: center; color: #717b8e; text-align: center; }
.feedback-list-empty > span { width: 24px; height: 24px; margin-bottom: 12px; border: 2px solid rgba(255,255,255,.09); border-top-color: #ed555c; border-radius: 50%; animation: spin .8s linear infinite; }
.feedback-list-empty b { margin-top: 9px; color: #c3cad5; font-size: 14px; }
.feedback-list-empty small { margin-top: 5px; font-size: 12px; }

.feedback-detail { min-width: 0; height: 100%; overflow: auto; padding: 28px 31px 24px; background: #1d2130; }
.feedback-detail > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.feedback-kind { padding: 6px 9px; background: rgba(117,103,237,.12); color: #c0baff; font-size: 11px; letter-spacing: .03em; }
.feedback-kind--issue { background: rgba(237,68,75,.12); color: #ff969b; }
.feedback-kind--suggestion { background: rgba(239,169,76,.11); color: #efbd78; }
.feedback-detail h2 { max-width: 680px; margin: 11px 0 6px; overflow-wrap: anywhere; font-size: 27px; line-height: 1.2; letter-spacing: -.035em; }
.feedback-detail header p { margin: 0; color: #a1aabb; font-size: 13px; }
.feedback-detail header p i { margin: 0 4px; color: #505a6d; font-style: normal; }
.feedback-detail > header > label { display: grid; min-width: 142px; gap: 7px; color: #9aa4b5; font-size: 11px; font-weight: 750; }
.feedback-detail > header select { height: 41px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; outline: 0; background: #171b27; color: #f2f4f8; font-size: 13px; font-weight: 700; }
.feedback-detail > header select:focus { border-color: rgba(237,68,75,.58); }

.feedback-sender { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(240px, auto); align-items: center; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.feedback-sender__avatar { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: #2b3143; color: #f4f6fa; font-size: 17px; font-weight: 850; }
.feedback-sender small, .feedback-sender b, .feedback-sender a { display: block; }
.feedback-sender small { color: #929caf; font: 10px "DM Mono", monospace; letter-spacing: .1em; }
.feedback-sender b { margin-top: 5px; color: #edf0f5; font-size: 14px; }
.feedback-sender a { margin-top: 4px; color: #b5bdca; font-size: 12px; text-decoration: none; }
.feedback-sender a:hover { color: #fff; }
.feedback-sender dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.feedback-sender dl div { min-width: 0; padding: 9px 10px; border: 1px solid rgba(255,255,255,.065); border-radius: 9px; background: rgba(8,11,18,.12); }
.feedback-sender dt { color: #929caf; font-size: 10px; }
.feedback-sender dd { overflow: hidden; margin: 4px 0 0; color: #d4dae3; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.feedback-message { padding: 20px 0; }
.feedback-message > p { margin: 0 0 10px; color: #929caf; font: 11px "DM Mono", monospace; letter-spacing: .1em; }
.feedback-message > div { width: 100%; max-width: none; color: #d4dae3; font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }
.feedback-attachment { display: grid; grid-template-columns: minmax(0, 1fr); gap: 13px; margin-bottom: 18px; padding: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(8,11,18,.16); }
.feedback-attachment__meta { display: flex; min-width: 0; align-items: center; gap: 11px; }
.feedback-attachment__meta > span { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 10px; background: rgba(40,191,211,.1); color: #69d4e2; }
.feedback-attachment p, .feedback-attachment b, .feedback-attachment small { min-width: 0; margin: 0; }
.feedback-attachment b, .feedback-attachment small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feedback-attachment b { color: #e5e9f0; font-size: 13px; }
.feedback-attachment small { margin-top: 4px; color: #9da7b8; font-size: 11px; }
.feedback-attachment-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 11px; }
.feedback-attachment-item { min-width: 0; }
.feedback-attachment-item__caption { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 3px 1px; }
.feedback-attachment-item__caption b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feedback-attachment-item__caption small { flex: 0 0 auto; margin: 0; }
.feedback-attachment-preview { position: relative; display: grid; width: 100%; min-height: 180px; max-height: 250px; padding: 10px; overflow: hidden; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: #10141e; color: inherit; cursor: zoom-in; }
.feedback-attachment-preview img { display: block; width: auto; max-width: 100%; height: auto; max-height: 228px; object-fit: contain; opacity: 0; transition: opacity .2s ease, transform .22s ease; }
.feedback-attachment-preview.is-loaded { min-height: 0; }
.feedback-attachment-preview.is-loaded img { opacity: 1; }
.feedback-attachment-preview.is-loaded:hover img { transform: scale(.985); }
.feedback-attachment-preview:focus-visible { outline: 2px solid rgba(105,212,226,.7); outline-offset: 2px; }
.feedback-attachment-preview > .feedback-attachment-status { position: absolute; inset: 0; border: 0; }
.feedback-attachment-preview.is-loaded > .feedback-attachment-status { display: none; }
.feedback-attachment-preview.is-error { cursor: pointer; }
.feedback-attachment-preview.is-error > .feedback-attachment-status { color: #ef8b90; }
.feedback-attachment-preview.is-error .feedback-attachment-spinner { display: none; }
.feedback-attachment-zoom { position: absolute; right: 10px; bottom: 10px; display: none; min-height: 30px; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(8,12,19,.88); box-shadow: 0 6px 18px rgba(0,0,0,.25); color: #e7ebf1; font-size: 11px; font-weight: 750; pointer-events: none; }
.feedback-attachment-preview.is-loaded .feedback-attachment-zoom { display: inline-flex; }
.feedback-attachment-status { display: flex; min-height: 92px; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; background: #10141e; color: #aeb7c6; }
.feedback-attachment-status p { margin: 0; }
.feedback-attachment-status p b, .feedback-attachment-status p span { display: block; }
.feedback-attachment-status p b { color: #e3e7ee; font-size: 13px; }
.feedback-attachment-status p span { margin-top: 4px; color: #9aa4b5; font-size: 11px; }
.feedback-attachment-status--error { color: #ef7379; }
.feedback-attachment-spinner { width: 23px; height: 23px; border: 2px solid rgba(255,255,255,.1); border-top-color: #ed555c; border-radius: 50%; animation: spin .8s linear infinite; }
.feedback-context { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feedback-context div { min-width: 0; }
.feedback-context small, .feedback-context b { display: block; }
.feedback-context small { color: #939daf; font-size: 10px; }
.feedback-context b { overflow: hidden; margin-top: 5px; color: #cdd3dd; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.feedback-detail > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 17px; }
.feedback-detail > footer p { max-width: 54ch; margin: 0; color: #9da6b6; font-size: 12px; line-height: 1.5; }
.feedback-detail > footer .delete-button { display: inline-flex; align-items: center; gap: 7px; }
.feedback-detail .quiet-button,
.feedback-detail > footer .delete-button { min-height: 41px; padding: 0 13px; font-size: 12px; font-weight: 750; }
.feedback-detail--empty { display: grid; place-content: center; justify-items: center; color: #6e788a; text-align: center; }
.feedback-detail--empty > span { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.025); }
.feedback-detail--empty h2 { margin: 15px 0 0; font-size: 18px; }
.feedback-detail--empty p { margin: 7px 0 0; font-size: 13px; }

.feedback-lightbox { position: fixed; z-index: 120; inset: 0; display: grid; padding: 24px; place-items: center; background: rgba(3,7,13,.86); backdrop-filter: blur(7px); overscroll-behavior: contain; }
.feedback-lightbox > article { display: grid; width: min(1180px, 96vw); height: min(880px, 92vh); overflow: hidden; grid-template-rows: auto minmax(0, 1fr); border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: #151a26; box-shadow: 0 28px 80px rgba(0,0,0,.55); }
.feedback-lightbox header { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 13px 11px 18px; border-bottom: 1px solid var(--line); }
.feedback-lightbox header > div { display: flex; min-width: 0; align-items: center; gap: 11px; color: #69d4e2; }
.feedback-lightbox header span { min-width: 0; }
.feedback-lightbox header b, .feedback-lightbox header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feedback-lightbox header b { color: #edf0f5; font-size: 14px; }
.feedback-lightbox header small { margin-top: 3px; color: #929caf; font-size: 11px; }
.feedback-lightbox header button { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.035); color: #c9d0db; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.feedback-lightbox header button:hover { border-color: rgba(239,85,92,.34); background: rgba(239,85,92,.09); color: #fff; }
.feedback-lightbox header button:focus-visible { outline: 2px solid rgba(105,212,226,.7); outline-offset: 2px; }
.feedback-lightbox__viewport { display: grid; min-height: 0; padding: 18px; overflow: auto; place-items: center; background: #0c1119; }
.feedback-lightbox__viewport img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; }

@media (max-width: 1050px) {
  .feedback-workspace { grid-template-columns: minmax(245px, .58fr) minmax(500px, 1.42fr); }
  .feedback-sender { grid-template-columns: auto 1fr; }
  .feedback-sender dl { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .sidebar-lower { display: contents; }
  .sidebar-utilities { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: 100%; padding-top: 4px; }
  .sidebar-utilities .side-link { min-height: 55px; }
  .sidebar-bottom { grid-column: 2; grid-row: 1; }
  .feedback-hero { align-items: stretch; flex-direction: column; padding: 20px 18px; }
  .feedback-summary { width: 100%; }
  .feedback-summary > span { min-width: 0; }
  .feedback-toolbar { align-items: stretch; flex-direction: column; }
  .feedback-toolbar .search-field { max-width: none; }
  .feedback-toolbar > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feedback-toolbar > div label { justify-content: space-between; }
  .feedback-workspace { display: block; width: 100%; height: auto; min-height: 0; max-height: none; overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .feedback-list { max-height: 360px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 13px; }
  .feedback-detail { height: auto; max-height: none; overflow: visible; padding: 21px 17px; border: 1px solid var(--line); border-radius: 13px; }
  .feedback-detail > header { align-items: stretch; flex-direction: column; }
  .feedback-detail > header > label { width: 100%; }
  .feedback-sender { grid-template-columns: auto minmax(0, 1fr); }
  .feedback-context { grid-template-columns: 1fr; }
  .feedback-detail > footer { align-items: stretch; flex-direction: column; }
  .feedback-detail > footer .delete-button { justify-content: center; width: 100%; min-height: 44px; }
  .feedback-attachment-gallery { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); }
  .feedback-attachment-preview { max-height: 220px; }
  .feedback-attachment-preview img { max-height: 198px; }
  .feedback-lightbox { padding: 10px; }
  .feedback-lightbox > article { width: 100%; height: calc(100vh - 20px); }
  .feedback-lightbox header { padding: 10px 10px 10px 13px; }
  .feedback-lightbox__viewport { padding: 8px; }
}

@media (max-width: 390px) {
  .feedback-summary > span { padding: 10px; }
  .feedback-summary small { font-size: 10px; }
  .feedback-toolbar > div { grid-template-columns: 1fr; }
  .feedback-list-item { padding: 14px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .feedback-attachment-preview img,
  .feedback-lightbox header button { transition: none; }
}