/* === feedback panel styles ===
 * Modülün tüm class'ları "fb-" ile başlar — silmek kolay olsun. */

.fb-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: grid; place-items: center;
  padding: 24px;
  -webkit-tap-highlight-color: transparent;
  animation: fb-fade .18s ease-out;
}
@keyframes fb-fade { from { opacity: 0; } to { opacity: 1; } }

.fb-card {
  width: 100%; max-width: 720px;
  max-height: calc(100dvh - 48px);
  background: var(--bg-1, #11161b);
  border: 1px solid var(--line, #232a31);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  display: flex; flex-direction: column;
  overflow: hidden;
  font-family: var(--font-ui, Inter, system-ui, sans-serif);
}

.fb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line, #232a31);
  background: var(--bg-2, #161c22);
}
.fb-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px; letter-spacing: .02em;
  color: var(--text, #e6e7ea);
}
.fb-title small {
  font-weight: 500; color: var(--text-faint, #6f7780); font-size: 11px;
}
.fb-bug { font-size: 16px; }
.fb-close {
  background: transparent; border: 1px solid var(--line, #232a31);
  color: var(--text-dim, #b4bac1);
  width: 32px; height: 32px; border-radius: 8px;
  cursor: pointer; font-size: 14px;
}
.fb-close:hover { background: var(--bg-3, #1c2329); color: var(--text); }

.fb-tabs {
  display: flex; align-items: center; gap: 4px;
  padding: 6px;
  border-bottom: 1px solid var(--line, #232a31);
  background: var(--bg-1, #11161b);
}
.fb-tabs button {
  background: transparent; border: 0;
  color: var(--text-dim, #b4bac1);
  padding: 8px 14px;
  font-size: 13px; font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.fb-tabs button.active {
  background: var(--bg-3, #1c2329);
  color: var(--gold-bright, #d4a85a);
}
.fb-count {
  background: var(--bg-3, #1c2329);
  color: var(--text-faint, #6f7780);
  padding: 1px 6px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  font-family: var(--font-num, JetBrains Mono, monospace);
}
.fb-tabs button.active .fb-count {
  background: rgba(212,168,90,.18);
  color: var(--gold-bright, #d4a85a);
}
.fb-stats {
  margin-left: auto; padding-right: 8px;
  display: flex; gap: 10px;
  font-size: 11px; font-weight: 700;
  font-family: var(--font-num, monospace);
}

.fb-body {
  flex: 1; overflow-y: auto;
  padding: 16px;
}
.fb-footer {
  padding: 8px 14px;
  border-top: 1px solid var(--line, #232a31);
  background: var(--bg-2, #161c22);
  font-size: 11px; color: var(--text-faint, #6f7780);
  display: flex; align-items: center; gap: 8px;
}

/* === Form === */
.fb-form { display: flex; flex-direction: column; gap: 14px; }
.fb-field { display: flex; flex-direction: column; gap: 6px; }
.fb-field label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint, #6f7780);
}
.fb-field input, .fb-field textarea {
  background: var(--bg-2, #161c22);
  border: 1px solid var(--line, #232a31);
  color: var(--text, #e6e7ea);
  font-family: inherit;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  resize: vertical;
}
.fb-field input:focus, .fb-field textarea:focus {
  outline: 0;
  border-color: var(--gold-dim, #786035);
  box-shadow: 0 0 0 3px rgba(212,168,90,.12);
}

.fb-dropzone {
  border: 1.5px dashed var(--line, #232a31);
  border-radius: 10px;
  padding: 20px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--bg-2, #161c22);
}
.fb-dropzone:hover {
  border-color: var(--gold-dim, #786035);
  background: rgba(212,168,90,.04);
}
.fb-dropzone-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--bg-3, #1c2329);
  display: grid; place-items: center;
  font-size: 20px; color: var(--gold-bright, #d4a85a);
}
.fb-dropzone strong { display: block; font-size: 13px; color: var(--text, #e6e7ea); }
.fb-dropzone small { display: block; font-size: 11px; color: var(--text-faint, #6f7780); margin-top: 2px; }

.fb-file-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.fb-file-row {
  display: grid;
  grid-template-columns: 1fr auto 28px;
  gap: 10px; align-items: center;
  padding: 6px 10px;
  background: var(--bg-2, #161c22);
  border: 1px solid var(--line, #232a31);
  border-radius: 7px;
  font-size: 12px;
}
.fb-file-row .name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fb-file-row .size {
  font-family: var(--font-num, monospace); color: var(--text-faint, #6f7780);
  font-size: 11px;
}
.fb-file-row button {
  background: transparent; border: 0;
  color: var(--text-faint, #6f7780);
  cursor: pointer;
  border-radius: 5px;
  font-size: 12px;
}
.fb-file-row button:hover { background: var(--bg-3, #1c2329); color: var(--bad, #e76f5f); }

.fb-submit {
  background: linear-gradient(180deg, #f7d289, #d4a85a 50%, #b88d3f);
  color: #1a1208;
  border: 1px solid #b88d3f;
  border-radius: 10px;
  padding: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  font-size: 14px;
  cursor: pointer;
  margin-top: 6px;
}
.fb-submit:disabled { opacity: .5; cursor: progress; }

.fb-error {
  background: rgba(231,111,95,.12);
  border: 1px solid rgba(231,111,95,.4);
  color: #e76f5f;
  padding: 8px 12px; border-radius: 7px;
  font-size: 12px;
}

/* === List === */
.fb-list { display: flex; flex-direction: column; gap: 6px; }
.fb-list-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px; gap: 10px; flex-wrap: wrap;
}
.fb-filter-pills { display: flex; gap: 4px; }
.fb-filter-pills button {
  background: var(--bg-2, #161c22);
  border: 1px solid var(--line, #232a31);
  color: var(--text-dim, #b4bac1);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.fb-filter-pills button.active {
  background: var(--bg-3, #1c2329);
  color: var(--gold-bright, #d4a85a);
  border-color: var(--gold-dim, #786035);
}
.fb-only-mine {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-dim, #b4bac1);
  cursor: pointer;
}

.fb-list-item {
  text-align: left;
  background: var(--bg-2, #161c22);
  border: 1px solid var(--line, #232a31);
  border-radius: 9px;
  padding: 10px 12px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .12s, transform .1s;
  color: inherit;
}
.fb-list-item:hover { border-color: var(--gold-dim, #786035); }
.fb-list-item:active { transform: scale(.99); }
.fb-list-row1 {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.fb-list-title {
  font-size: 13px; font-weight: 700;
  color: var(--text, #e6e7ea);
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.fb-list-row2 {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 11px; color: var(--text-faint, #6f7780);
}

/* === Detail === */
.fb-detail { display: flex; flex-direction: column; gap: 12px; }
.fb-detail-head {
  display: flex; align-items: center; justify-content: space-between;
}
.fb-back {
  background: transparent; border: 1px solid var(--line, #232a31);
  color: var(--text-dim, #b4bac1);
  padding: 5px 12px; border-radius: 6px;
  font-size: 12px; cursor: pointer;
}
.fb-back:hover { background: var(--bg-3, #1c2329); }
.fb-detail-title {
  font-size: 17px; font-weight: 700; margin: 0;
  color: var(--text, #e6e7ea);
}
.fb-detail-meta {
  display: flex; gap: 6px; flex-wrap: wrap;
  font-size: 11px; color: var(--text-faint, #6f7780);
}
.fb-detail-page {
  font-family: var(--font-num, monospace);
  background: var(--bg-2, #161c22);
  padding: 1px 6px; border-radius: 4px;
}
.fb-detail-desc {
  background: var(--bg-2, #161c22);
  border: 1px solid var(--line, #232a31);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
}

.fb-files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.fb-file {
  border: 1px solid var(--line, #232a31);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-2, #161c22);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.fb-file img, .fb-file video {
  width: 100%; aspect-ratio: 16/10;
  object-fit: cover; background: #000;
  display: block;
}
.fb-file-thumb {
  position: relative;
  display: block;
  width: 100%; padding: 0;
  background: transparent; border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font: inherit; color: inherit;
}
.fb-file-thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.7));
  color: #fff;
  display: flex; align-items: flex-end; justify-content: center;
  gap: 6px;
  padding: 8px;
  font-size: 12px; font-weight: 600;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.fb-file-thumb:hover .fb-file-thumb-overlay,
.fb-file-thumb:focus-visible .fb-file-thumb-overlay,
.fb-file-thumb:active .fb-file-thumb-overlay { opacity: 1; }
@media (hover: none) and (pointer: coarse) {
  /* Mobil: overlay her zaman hafif görünür ki kullanıcı tıklanabileceğini anlasın */
  .fb-file-thumb-overlay { opacity: .9; }
}

/* Garantili görünür CTA satırı: overlay'i kaçıran kullanıcılar için bariz buton */
.fb-file-cta {
  display: flex; align-items: stretch; gap: 4px;
  padding: 4px 6px 6px;
}
.fb-file-btn.primary {
  flex: 1;
  background: linear-gradient(180deg, #f7d289, #d4a85a 50%, #b6863e);
  color: #1a1208;
  border-color: #b6863e;
  font-weight: 700;
  text-align: center;
  justify-content: center;
  padding: 6px 10px;
  font-size: 12px;
}
.fb-file-btn.primary:hover { filter: brightness(1.05); }
.fb-file-btn.primary:active { transform: scale(.98); }
.fb-file.generic { padding: 12px; align-items: center; gap: 6px; }
.fb-file-icon { font-size: 26px; }
.fb-file-meta {
  padding: 6px 8px;
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 10.5px; color: var(--text-faint, #6f7780);
}
.fb-file-meta span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* === Status === */
.fb-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid;
  white-space: nowrap;
}
.fb-pill {
  display: inline-block;
  background: var(--bg-3, #1c2329);
  color: var(--gold-bright, #d4a85a);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px; font-weight: 700;
  margin-left: 6px;
}
.fb-pill.warn { color: #e6b85a; background: rgba(230,184,90,.15); }

.fb-actions {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--line, #232a31);
}
.fb-actions-readonly { padding: 12px 0; }
.fb-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid;
}
.fb-status-pill.fb-status-open {
  color: #e6b85a; background: rgba(230,184,90,.10); border-color: rgba(230,184,90,.35);
}
.fb-status-pill.fb-status-in_progress {
  color: #6cb0e6; background: rgba(108,176,230,.10); border-color: rgba(108,176,230,.35);
}
.fb-status-pill.fb-status-resolved {
  color: #7ec984; background: rgba(126,201,132,.12); border-color: rgba(126,201,132,.4);
}
.fb-status-pill::before {
  content: "●"; font-size: 8px;
}
.fb-status-hint { color: var(--text-faint, #6f7780); }

/* === Comments === */
.fb-comments {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 6px;
}
.fb-comments-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint, #6f7780);
}
.fb-comment {
  background: var(--bg-2, #161c22);
  border: 1px solid var(--line, #232a31);
  border-radius: 8px;
  padding: 8px 10px;
}
.fb-comment.admin { border-left: 3px solid var(--gold-bright, #d4a85a); }
.fb-comment-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-faint, #6f7780);
  margin-bottom: 4px;
}
.fb-comment-head strong { color: var(--text, #e6e7ea); font-size: 12px; }
.fb-comment-ts { margin-left: auto; }
.fb-comment-text {
  font-size: 13px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
}
.fb-comment-input {
  display: flex; gap: 6px; align-items: flex-end;
}
.fb-comment-input textarea {
  flex: 1;
  background: var(--bg-2, #161c22);
  border: 1px solid var(--line, #232a31);
  color: var(--text, #e6e7ea);
  border-radius: 7px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px; resize: vertical;
}
.fb-comment-input button {
  background: var(--bg-3, #1c2329);
  color: var(--gold-bright, #d4a85a);
  border: 1px solid var(--line, #232a31);
  padding: 8px 14px;
  border-radius: 7px;
  font-weight: 700; font-size: 12px;
  cursor: pointer;
  height: fit-content;
}
.fb-comment-input button:disabled { opacity: .4; cursor: default; }

.fb-empty {
  text-align: center;
  font-size: 12px; color: var(--text-faint, #6f7780);
  padding: 8px;
}
.fb-empty.large { padding: 28px; }

/* === Topbar button === */
.fb-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-2, #161c22);
  border: 1px solid var(--line, #232a31);
  color: var(--text-dim, #b4bac1);
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.fb-trigger:hover { color: var(--gold-bright, #d4a85a); border-color: var(--gold-dim, #786035); }
.fb-trigger .ico { font-size: 13px; }

/* === Mobile === */
@media (max-width: 700px) {
  .fb-modal { padding: 0; }
  .fb-card {
    max-height: 100dvh;
    height: 100dvh;
    max-width: 100%;
    border-radius: 0;
    border: 0;
  }
  .fb-tabs { padding: 4px; }
  .fb-tabs button { padding: 8px 10px; font-size: 12.5px; }
  .fb-stats { font-size: 10.5px; gap: 6px; padding-right: 4px; }
  .fb-body { padding: 12px; }
  .fb-files-grid { grid-template-columns: 1fr 1fr; }
  .fb-trigger { padding: 5px 8px; font-size: 11px; }
  .fb-trigger .lbl { display: none; }
}

/* === Image annotation modal === */
.fb-file.image { position: relative; }
.fb-file-actions {
  position: absolute; top: 6px; right: 6px;
  display: flex; gap: 4px;
  opacity: 0; transition: opacity .15s;
}
.fb-file.image:hover .fb-file-actions,
.fb-file.image:focus-within .fb-file-actions { opacity: 1; }
@media (max-width: 760px) { .fb-file-actions { opacity: 1; } }
.fb-file-btn {
  background: rgba(11,15,20,.85);
  color: var(--text, #e8e6df);
  border: 1px solid var(--line, #232a31);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
  -webkit-tap-highlight-color: transparent;
}
.fb-file-btn:hover { border-color: var(--gold-dim, #8a6f3a); }

.fb-annot-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 220;
  display: grid; place-items: center;
  padding: 16px;
  animation: fb-fade .18s ease-out;
}
.fb-annot-card {
  background: var(--bg-1, #11161b);
  border: 1px solid var(--line, #232a31);
  border-radius: 14px;
  width: 100%;
  max-width: 920px;
  max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  overflow: hidden;
}
.fb-annot-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line, #232a31);
  font-size: 14px;
}
.fb-annot-close {
  background: transparent; border: 0;
  color: var(--text-dim, #9ba1a8);
  font-size: 18px; cursor: pointer;
  padding: 4px 8px;
}
.fb-annot-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line, #232a31);
  background: rgba(0,0,0,.18);
}
.fb-annot-tools {
  display: flex; gap: 5px; align-items: center;
}
.fb-annot-tools button {
  background: var(--bg-2, #1a2026);
  color: var(--text, #e8e6df);
  border: 1px solid var(--line, #232a31);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  -webkit-tap-highlight-color: transparent;
}
.fb-annot-tools button:disabled { opacity: .35; cursor: default; }
.fb-annot-color {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fb-annot-color.active { border-color: var(--gold-bright, #d4a85a); transform: scale(1.08); }
.fb-annot-width.active { border-color: var(--gold-bright, #d4a85a); }
.fb-annot-stage {
  flex: 1; min-height: 0;
  padding: 12px;
  display: grid; place-items: center;
  background: #060708;
  overflow: auto;
}
.fb-annot-stage canvas {
  max-width: 100%;
  max-height: calc(100dvh - 280px);
  height: auto;
  background: #fff;
  border-radius: 6px;
  cursor: crosshair;
  touch-action: none;
  display: block;
}
.fb-annot-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 10px 14px;
  border-top: 1px solid var(--line, #232a31);
}
.fb-annot-foot .btn {
  background: var(--bg-2, #1a2026);
  color: var(--text, #e8e6df);
  border: 1px solid var(--line, #232a31);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.fb-annot-foot .btn.primary {
  background: linear-gradient(180deg, #f7d289, #d4a85a 50%, #b6863e);
  color: #1a1208;
  border-color: #b6863e;
}
.fb-annot-foot .btn:disabled { opacity: .45; cursor: default; }

@media (max-width: 760px) {
  .fb-annot-modal { padding: 0; }
  .fb-annot-card { border-radius: 0; max-height: 100dvh; height: 100dvh; }
  .fb-annot-toolbar { gap: 8px; padding: 8px 10px; }
  .fb-annot-color { width: 24px; height: 24px; }
  .fb-annot-stage { padding: 6px; }
  .fb-annot-stage canvas { max-height: calc(100dvh - 240px); }
}