/* Exercise board (bai-tap/show)
   extracted from views/pages/exercises/show.php
*/

/* ===== Icon buttons: đồng bộ kích thước + hover theo theme ===== */
  .xq-iconbar{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
  }

  .xq-sr-only{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;border:0;
  }

  .xq-icon-btn,
  .xq-icon-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:28px;
    padding:0;
    border:1px solid #b7b38a;   /* viền theme */
    background:#f8f7e8;          /* nền theme */
    border-radius:2px;
    cursor:pointer;
    vertical-align:middle;
    user-select:none;
  }

  .xq-icon-btn img,
  .xq-icon-toggle img{
    width:20px;
    height:20px;
    display:block;
    opacity:.88;
    transition: opacity .12s ease, filter .12s ease;
  }

  .xq-icon-btn:hover,
  .xq-icon-toggle:hover{
    background:#efeecf;
    border-color:#9f9a67;
  }
  .xq-icon-btn:hover img,
  .xq-icon-toggle:hover img{
    opacity:1;
    filter: contrast(1.1) saturate(1.05);
  }

  .xq-icon-btn:active{
    transform: translateY(1px);
  }

  /* Toggle AI: bật thì viền vàng + icon đậm */
  .xq-icon-toggle input{ display:none; }
  .xq-icon-toggle.is-active{
    background:#fff4c7;
    border-color:#d4a300;
  }
  .xq-icon-toggle.is-active img{
    opacity:1;
    filter: contrast(1.15) saturate(1.1);
  }

  /* Toggle icon buttons (Hiện nước đi / Âm thanh) */
  .xq-icon-btn.is-active{
    background:#fff4c7;
    border-color:#d4a300;
  }
  .xq-icon-btn.is-active img{
    opacity:1;
    filter: contrast(1.15) saturate(1.1);
  }
  .xq-icon-btn.is-inactive img{
    opacity:.35;
    filter: grayscale(1);
  }

  /* Copy FEN toast */
  .xq-fen-toast{
    display:none;
    margin-left:6px;
    font-size:12px;
    color:green;
  }

  /* ===== Layout board + movelist gọn như Ván cờ ===== */
  .ex-top{
    margin:8px 0 10px 0;
  }

  .ex-board-col{
    flex:0 0 auto;
    min-width:0;
    text-align:left;
  }

  .ex-layout{
    display:flex;
    gap:0; /* sát hẳn vào bàn cờ */
    align-items:flex-start;
    flex-wrap:nowrap;
    margin:10px 0;
  }
  @media (max-width: 980px){
    .ex-layout{ flex-wrap:wrap; }
  }

  .ex-right{
    flex:0 0 100px;
    width:100px;
    min-width:100px;
    max-width:100px;
    box-sizing:border-box;
  }
  @media (max-width: 980px){
    .ex-right{
      flex:1 1 100%;
      width:auto; min-width:0; max-width:none;
    }
  }

  /* Movelist sidebar giống style ván cờ (tông vàng nhạt) */
  .ex-steps{
    display:block;
    
    width:100%;
    min-width:0;
max-height:520px;
    overflow:auto;
    background:#f7e7c5;
    border:1px solid #d7b27a;
  }
  .ex-steps table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
  }
  .ex-steps td{
    padding:4px 6px;
    border-bottom:1px solid rgba(0,0,0,.06);
    vertical-align:middle;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
}
  .ex-steps tr td:first-child{
    width:22px; min-width:22px;
    text-align:right;
    padding-right:4px !important;
    padding-left:0 !important;
      white-space:nowrap;
  }
  .ex-steps tr.active{
    background:rgba(255,255,255,.35);
    font-weight:600;
  }
  .ex-steps tr.mv-red td:nth-child(2){ color:#b30000; }
  .ex-steps tr.mv-black td:nth-child(2){ color:#222; }
  .ex-steps .ex-steps-head td{
    font-weight:700;
    text-align:left !important;
    padding-left:6px !important;
    background:rgba(255,255,255,.25);
  }
  /* Ẩn pre debug khi không cần */

  /* Options dưới bàn cờ (Hiện nước đi / Ký hiệu Việt / Âm thanh / Debug) */
  .ex-options{
    margin-top:10px;
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:13px;
  }
  .ex-options label{
    display:inline-flex;
    gap:6px;
    align-items:center;
  }

  /* Guest overlay (chưa đăng nhập): chặn thao tác trên bàn cờ nhưng vẫn xem được */
  #xq_wrap{ position:relative; display:inline-block; }
  #xq_guest_overlay{
    display:none;
    position:absolute;
    inset:0;
    cursor:pointer;
    background:transparent;
  }
  /* (Guest) Đã bỏ hint chữ đè lên bàn cờ theo yêu cầu. */

  /* ===== AI thinking overlay (hiện khi engine đang tính nước) ===== */
  .xq-ai-thinking-overlay{
    position:absolute;
    left:0; top:0;
    width:100%; height:100%;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:999;
    pointer-events:none;
  }
  .xq-ai-thinking-box{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding:8px 10px;
    border:3px solid #e84d06;
    background:transparent;
    border-radius:4px;
    font-weight:600;
    color:#e84d06;
    text-align:center;
  }
  .xq-ai-thinking-box img{
    width:32px;
    height:32px;
    display:block;
  }
  .xq-ai-thinking-text{
    font-size:13px;
  }

  /* ===== User stats (thống kê nhanh) ===== */
  .ex-userstats{
    margin:10px 0;
    border:1px solid #d4c7a0;
    background:#f3efd8;
  }
  .ex-userstats table{
    width:100%;
    border-collapse:collapse;
  }
  .ex-userstats td{
    border:1px solid #d4c7a0;
    padding:8px 10px;
  }
  .ex-userstats b{
    color:#6b3b14;
  }

/* Minor cleanups */
.ex-earned{color:green;}
#xq_container{position:relative;}
.ex-solution-box{margin-top:12px;}