/* =========================
   SMART REVIEW PANEL (BASE)
========================= */
#smart-review-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(50vw, 700px);
    display: flex;
    flex-direction: column;
  
    background: #ffffff;
    box-shadow: -2px 0 12px rgba(0,0,0,0.08);
  
    transition: all 0.3s ease;
    z-index: 999;
  }
  
  
  /* =========================
     PANEL STATE
  ========================= */
  #smart-review-panel.closed {
    width: 0;
    overflow: visible;
  }
  
  
  /* =========================
     TAB (TRIGGER)
  ========================= */
  .sr-tab {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
  
    width: 25px;
    height: 70px;
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: white;
  
    font-size: 12px;
    cursor: pointer;
  
    border-radius: 10px 0 0 10px;
    box-shadow: -2px 4px 10px rgba(0,0,0,0.15);
  
    transition: all 0.2s ease;
  }
  
  .sr-tab:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: -4px 6px 16px rgba(0,0,0,0.2);
  }
  
  .sr-tab i {
    font-size: 12px;
  }
  
  
  /* =========================
     CONTENT AREA
  ========================= */
  .sr-content {
    padding: 18px;
    overflow-y: auto;
    font-family: system-ui, -apple-system, sans-serif;
  }
  
  
  /* =========================
     HEADER
  ========================= */
  .sr-header {
    font-size: 15px;
    font-weight: 600;
  
    margin-bottom: 14px;
    padding-bottom: 8px;
  
    border-bottom: 1px solid #eee;
  }
  
  
  /* =========================
     CARD
  ========================= */
  .sr-card {
    padding: 14px;
    border-radius: 12px;
  
    background: #f9fafb;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  }
  
  
  /* =========================
     TEXT (Q&A)
  ========================= */
  .sr-question {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
  }
  
  .sr-answer {
    font-size: 13px;
    line-height: 1.5;
    color: #555;
  }
  
  
  /* =========================
     ACTION BUTTONS
  ========================= */
  .sr-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
  }
  
  /* NEW */
  .sr-action-group {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .sr-actions button {
    width: 100%;
    padding: 10px;
  
    border: none;
    border-radius: 10px;
  
    color: white;
    font-weight: 500;
    cursor: pointer;
  }
  
  /* NEW */
  .sr-action-time {
    text-align: center;
    font-size: 11px;
    color: #999;
    margin-top: 2px;
    line-height: 1.2;
  }
  
  
  /* Button Variants */
  .btn-hafal {
    background: #22c55e;
  }
  
  .btn-ragu {
    background: #f59e0b;
  }
  
  .btn-belum {
    background: #ef4444;
  }
  
  
  /* =========================
     UTILITY
  ========================= */
  .sr-reveal-btn {
    width: 100%;
    margin-top: 10px;
  }
  
  
  /* =========================
     CHAT PRIORITY (Z-INDEX FIX)
  ========================= */
  #chat-container,
  #chat-container-2,
  #chat-container-3,
  #chat-icon,
  #chat-icon-2,
  #chat-icon-3 {
    z-index: 10000 !important;
  }
  
  
  /* =========================
     FLAG BUTTON
  ========================= */
  .sr-flag {
    margin-top: 8px;
  }
  
  .btn-flag {
    background: #facc15;
    color: #333;
    font-size: 12px;
    padding: 6px 10px;
  
    border-radius: 8px;
    border: none;
    cursor: pointer;
  
    display: inline-block;
    width: auto;
  }
  
  
  /* =========================
     IMAGE
  ========================= */
  .sr-image-container {
    margin-top: 20px;
  }
  
  
  /* =========================
     FLAG DISABLED
  ========================= */
  .btn-flag.disabled {
    background: #e5e7eb;
    color: #888;
    cursor: not-allowed;
  }