/* site-chrome.css — แถบประกาศ + หน้าต่างแจ้งปัญหา (ใช้ทุกหน้า รวมหน้านโยบาย/ช่วยเหลือ)
 * ตามธีม YouTube: ไม่มีกล่องพื้นหลัง เว้นแต่ popup (#212121) และปุ่ม */

/* ───────── แถบประกาศ: ไม่มีพื้น มีแค่เส้นบางด้านล่าง ───────── */
.ycc-announce {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; font-size: 14px; line-height: 1.5;
  color: #f1f1f1; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ycc-announce--info .ycc-announce-text { color: #f1f1f1; }
.ycc-announce--warn { border-bottom-color: rgba(255, 200, 0, 0.45); }
.ycc-announce--warn .ycc-announce-text { color: #ffd54f; }
.ycc-announce--maint { border-bottom-color: rgba(62, 166, 255, 0.5); }
.ycc-announce--maint .ycc-announce-text { color: #9fd3ff; }
.ycc-announce-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ycc-announce-close {
  flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: transparent; color: #aaa; font-size: 15px;
}
.ycc-announce-close:hover { background: #272727; color: #f1f1f1; }

/* ───────── หน้าต่างแจ้งปัญหา ───────── */
.ycc-fb-overlay {
  position: fixed; inset: 0; z-index: 10050; background: rgba(0, 0, 0, 0.72);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ycc-fb-overlay[hidden] { display: none; }
.ycc-fb-card {
  width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: #212121; color: #f1f1f1; border-radius: 12px; padding: 20px;
  font: 14px/1.6 "Roboto", "Noto Sans Thai", "Leelawadee UI", "Segoe UI", Arial, sans-serif;
  box-sizing: border-box;
}
.ycc-fb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ycc-fb-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.ycc-fb-x {
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent;
  color: #aaa; font-size: 16px; cursor: pointer;
}
.ycc-fb-x:hover { background: #3f3f3f; color: #fff; }
.ycc-fb-sub { margin: 4px 0 12px; color: #aaa; font-size: 13px; }
.ycc-fb-label { display: block; margin: 10px 0 4px; font-size: 13px; color: #aaa; }
.ycc-fb-card select,
.ycc-fb-card textarea,
.ycc-fb-card input[type="text"] {
  width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 8px;
  background: #121212; color: #f1f1f1; border: 1px solid #303030; font: inherit;
}
.ycc-fb-card textarea { resize: vertical; min-height: 110px; }
.ycc-fb-card select:focus,
.ycc-fb-card textarea:focus,
.ycc-fb-card input:focus { outline: none; border-color: #1c62b9; }
.ycc-fb-count { text-align: right; font-size: 11px; color: #717171; margin-top: 2px; }
.ycc-fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ycc-fb-check { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 4px; font-size: 12.5px; color: #aaa; }
.ycc-fb-check input { margin-top: 3px; flex: none; }
.ycc-fb-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.ycc-fb-help { color: #3ea6ff; font-size: 13px; }
.ycc-fb-send {
  border: 0; border-radius: 18px; padding: 9px 20px; cursor: pointer; font: inherit; font-weight: 600;
  background: #f1f1f1; color: #0f0f0f;
}
.ycc-fb-send:hover { background: #d9d9d9; }
.ycc-fb-send:disabled { opacity: 0.6; cursor: wait; }
.ycc-fb-msg { margin: 10px 0 0; font-size: 13px; min-height: 1em; }
.ycc-fb-msg.is-ok { color: #2ba640; }
.ycc-fb-msg.is-err { color: #ff4e45; }

/* ───────── ลิงก์ท้ายหน้า: ปุ่มแจ้งปัญหาดูเหมือนลิงก์ ───────── */
.ycc-link-btn {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-decoration: underline; cursor: pointer;
}

/* ───────── ส่วนย่อยในหน้าตั้งค่า (ข้อมูลของฉัน / ศูนย์ดูแลผู้ใช้) — แบ่งด้วยเส้นบาง ไม่มีกล่อง ───────── */
.ycc-sec { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 12px; margin-top: 12px; }
.ycc-sec-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.ycc-sec-dim { font-weight: 400; color: #aaa; font-size: 12px; }
.ycc-sec-note { font-size: 12px; color: #aaa; margin-bottom: 8px; line-height: 1.6; }
.ycc-sec-msg { font-size: 12px; margin-top: 6px; }
.ycc-fb-item { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.ycc-fb-item:last-child { border-bottom: 0; }
.ycc-fb-item-meta { font-size: 11.5px; color: #aaa; overflow-wrap: anywhere; }
.ycc-fb-item-text { font-size: 13px; color: #f1f1f1; white-space: pre-wrap; overflow-wrap: anywhere; margin: 2px 0; }
.ycc-fb-item-tech { font-size: 11px; color: #717171; overflow-wrap: anywhere; }
.ycc-fb-item-reply { font-size: 12.5px; color: #9fd3ff; margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ycc-fb-item-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ycc-err-item { padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 12px; color: #ccc; }
.ycc-err-item summary { cursor: pointer; overflow-wrap: anywhere; }
.ycc-err-item pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; color: #aaa; max-height: 220px; overflow: auto; margin: 6px 0 0; }
.ycc-err-src { font-size: 11px; padding: 0 6px; border-radius: 8px; background: #272727; margin-right: 4px; }
.ycc-err-server { color: #ff8a80; }
.ycc-err-client { color: #ffd54f; }