/* ========================
   GAC — gac.css
   Token-based: bridge --gac-* → var(--gcc-*)
   Dep: gcc-tokens (wp_register_style deps)
   Không hardcode hex — mọi màu qua token.
   ======================== */

/* ── Local bridge: map --gac-* sang --gcc-* ── */
.gac-trigger,
.gac-modal {
  --gac-primary:       var(--gcc-btn-black-bg);
  --gac-primary-light: var(--gcc-surface-2);
  --gac-primary-dark:  var(--gcc-black, #000);
  --gac-accent:        var(--gcc-ink-muted);
  --gac-success:       var(--gcc-btn-black-bg);
  --gac-text:          var(--gcc-ink-strong);
  --gac-text-light:    var(--gcc-ink-muted);
  --gac-border:        var(--gcc-line-light);
  --gac-bg:            var(--gcc-surface);
  --gac-bg-soft:       var(--gcc-surface-1);
  --gac-shadow:        var(--gcc-shadow-lg);
  --gac-radius:        var(--gcc-radius-lg);
  --gac-radius-sm:     var(--gcc-radius);
}

/* Trigger (small) */
.gac-trigger {
  margin: .3rem 0 .4rem .5rem !important;
  padding: .4rem .7rem !important;
  border: 1.5px solid var(--gac-primary) !important;
  border-radius: 14px !important;
  background: var(--gac-primary) !important;
  color: var(--gcc-ink-inverse) !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  font-size: .82rem !important;
  line-height: 1 !important;
  transition: all .2s ease !important;
  box-shadow: none !important;
}
.gac-trigger:hover  { background: var(--gcc-btn-black-bg-hover) !important; transform: translateY(-1px) !important; }
.gac-trigger:active { background: var(--gcc-btn-black-bg-active) !important; transform: translateY(0) !important; }

/* Modal shell */
body .gac-modal,
html body .gac-modal {
  position: fixed !important; inset: 0 !important;
  width: 100vw !important; height: 100vh !important;
  display: none !important; align-items: center !important; justify-content: center !important;
  z-index: 2147483647 !important; pointer-events: auto !important;
}
body .gac-modal.show,
html body .gac-modal.show { display: flex !important; }

body .gac-backdrop,
html body .gac-backdrop {
  position: absolute !important; inset: 0 !important;
  background: var(--gcc-overlay) !important; z-index: 1 !important;
}

/* Dialog */
body .gac-modal .gac-dialog,
html body .gac-modal .gac-dialog {
  position: relative !important;
  width: min(980px, 95vw) !important; max-width: 980px !important; max-height: 90vh !important;
  overflow: visible !important; background: var(--gac-bg) !important;
  border-radius: var(--gac-radius) !important; box-shadow: var(--gac-shadow) !important;
  display: flex !important; flex-direction: column !important; z-index: 2 !important; margin: auto !important;
}

/* Header */
.gac-head {
  display: flex !important; flex-direction: column !important; gap: 4px !important;
  padding: 10px 14px !important; border-bottom: 1.5px solid var(--gac-border) !important;
  background: var(--gac-bg-soft) !important;
}
.gac-head-top {
  display: flex !important; align-items: center !important;
}
.gac-title { font-size: 1rem !important; font-weight: 700 !important; color: var(--gac-text) !important; }
.gac-x {
  position: absolute !important; top: 0 !important; right: 0 !important;
  transform: translate(50%, -50%) !important;
  border: 1.5px solid var(--gac-border) !important; background: var(--gac-bg) !important;
  font-size: 18px !important; cursor: pointer !important; color: var(--gac-text-light) !important;
  width: 26px !important; height: 26px !important; display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 50% !important; transition: all .2s ease !important; z-index: 10 !important;
  box-shadow: var(--gcc-shadow-xs) !important; line-height: 1 !important;
}
.gac-x:hover { background: var(--gcc-surface-2) !important; color: var(--gac-text) !important; border-color: var(--gcc-line-dark) !important; }
.gac-meta {
  display: flex !important; gap: 6px !important; align-items: center !important;
  font-size: .75rem !important; color: var(--gac-text-light) !important;
}
.gac-test { display: none !important; }
.gac-quota {
  background: var(--gac-bg) !important; padding: .2rem .5rem !important; border-radius: 999px !important;
  border: 1px solid var(--gac-border) !important; font-weight: 600 !important;
  color: var(--gac-text) !important; font-size: .72rem !important; white-space: nowrap !important;
}
.gac-pricing-info {
  font-size: .7rem !important; color: var(--gcc-ink-ghost) !important; white-space: nowrap !important;
}
.gac-ai-credits {
  font-size: .72rem !important; white-space: nowrap !important;
  border: 1px solid var(--gac-border) !important; border-radius: 999px !important;
  padding: .15rem .45rem !important; font-weight: 600 !important; color: var(--gac-text) !important;
  background: var(--gac-bg) !important;
}

/* Tabs (small) */
.gac-tabs {
  display: flex !important; gap: 6px !important; padding: 10px 12px !important;
  border-bottom: 1px solid var(--gac-border) !important; background: var(--gac-bg) !important;
}
.gac-tabs button {
  border: 1.5px solid var(--gac-border) !important; background: var(--gac-bg) !important;
  padding: .32rem .6rem !important; border-radius: 999px !important; cursor: pointer !important;
  font-weight: 500 !important; color: var(--gac-text) !important; transition: all .2s ease !important; font-size: .8rem !important; line-height: 1 !important;
}
.gac-tabs button:hover { background: var(--gac-bg-soft) !important; }
.gac-tabs button.on  { background: var(--gcc-btn-black-bg) !important; border-color: var(--gcc-btn-black-bg) !important; color: var(--gcc-ink-inverse) !important; }

/* Ẩn Advanced & Quick */
.gac-adv, .gac-adv-grid,
.gac-tabs .tab-advanced, .gac-tabs .tab-quick,
.gac-actions .btn-advanced, .gac-actions .btn-quick,
.gac-advanced, .gac-quick { display: none !important; }

/* Body grid */
.gac-body {
  display: grid !important; grid-template-columns: 1.1fr 1fr !important;
  gap: 16px !important; padding: 16px !important; background: var(--gac-bg) !important;
  overflow-y: auto !important; max-height: calc(90vh - 120px) !important;
}

/* Left form */
.gac-left .gac-field { margin-bottom: .8rem !important; }
.gac-label { font-weight: 600 !important; margin-bottom: .35rem !important; color: var(--gac-text) !important; font-size: .9rem !important; }
.gac-chips { display: flex !important; flex-wrap: wrap !important; gap: .35rem !important; }

/* Chip (small) */
.chip {
  border: 1.5px solid var(--gac-border) !important; background: var(--gac-bg) !important;
  padding: .28rem .55rem !important; border-radius: 999px !important; cursor: pointer !important;
  color: var(--gac-text) !important; font-weight: 500 !important; font-size: .8rem !important; transition: all .2s ease !important; line-height: 1 !important;
}
.chip:hover { border-color: var(--gcc-ink-strong) !important; background: var(--gcc-surface-2) !important; }
.chip.on    { border-color: var(--gcc-btn-black-bg) !important; background: var(--gcc-btn-black-bg) !important; color: var(--gcc-ink-inverse) !important; transform: translateY(-1px) !important; }

.gac-rows { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.gac-adv  { margin-top: .4rem !important; }

.gac-left textarea,
.gac-left select,
.gac-left input[type="number"] {
  width: 100% !important; padding: .5rem .65rem !important;
  border: 1.5px solid var(--gac-border) !important; border-radius: 8px !important;
  background: var(--gac-bg) !important; color: var(--gac-text) !important;
  font-family: inherit !important; font-size: .9rem !important; transition: all .2s ease !important;
}
.gac-left textarea { min-height: 74px !important; resize: vertical !important; }
.gac-left textarea:focus,
.gac-left select:focus,
.gac-left input[type="number"]:focus {
  outline: none !important; border-color: var(--gcc-ink-strong) !important; box-shadow: 0 0 0 3px var(--gcc-surface-3) !important;
}

/* Right output */
.gac-right { display: flex !important; flex-direction: column !important; gap: 14px !important; }
.gac-output-section {
  border: 1.5px solid var(--gac-border) !important; border-radius: 12px !important; overflow: hidden !important; background: var(--gac-bg) !important;
}
.gac-section-title {
  background: var(--gac-bg-soft) !important; padding: .5rem .8rem !important; font-weight: 700 !important; font-size: .9rem !important;
  color: var(--gac-text) !important; border-bottom: 1.5px solid var(--gac-border) !important;
}
.gac-output      { padding: .8rem !important; background: var(--gac-bg) !important; min-height: 70px !important; }
.gac-media-output{ min-height: 56px !important; }
.gac-media-item {
  padding: .5rem !important; margin: .35rem 0 !important; background: var(--gac-bg) !important;
  border: 1px solid var(--gac-border) !important; border-radius: 8px !important; line-height: 1.5 !important; color: var(--gac-text) !important;
}
.gac-media-item strong { color: var(--gcc-ink-secondary) !important; display: block !important; margin-bottom: .25rem !important; font-size: .82rem !important; }
.gac-out-title   { font-weight: 700 !important; margin-top: .45rem !important; color: var(--gcc-ink-secondary) !important; font-size: .85rem !important; text-transform: uppercase !important; letter-spacing: .4px !important; }
.gac-out-title:first-child { margin-top: 0 !important; }
.gac-out-titlev  { margin-bottom: .65rem !important; font-size: 1rem !important; font-weight: 600 !important; color: var(--gac-text) !important; }
.gac-out-msg     { white-space: pre-wrap !important; line-height: 1.6 !important; color: var(--gac-text) !important; }

/* Actions (small) */
.gac-actions { display: flex !important; gap: .35rem !important; flex-wrap: wrap !important; }
.gac-actions button {
  border: 1.5px solid var(--gac-border) !important; background: var(--gac-bg) !important;
  padding: .38rem .6rem !important; border-radius: 999px !important; cursor: pointer !important;
  font-weight: 500 !important; transition: all .2s ease !important; color: var(--gac-text) !important; font-size: .82rem !important; line-height: 1 !important;
}
.gac-actions button:hover { background: var(--gac-bg-soft) !important; }

/* Primary actions (Generate + Insert) */
.gac-gen,
.gac-insert {
  background: var(--gcc-btn-black-bg) !important; border-color: var(--gcc-btn-black-bg) !important; color: var(--gcc-ink-inverse) !important; font-weight: 600 !important;
}
.gac-gen:hover, .gac-insert:hover { background: var(--gcc-btn-black-bg-hover) !important; transform: translateY(-1px) !important; }
.gac-busy .gac-gen { opacity: .7 !important; cursor: progress !important; }

/* Variants */
.gac-variants {
  border: 1px solid var(--gac-border) !important; border-radius: 12px !important; padding: .7rem !important; background: var(--gac-bg-soft) !important;
}
.gac-vtitle { font-weight: 600 !important; margin-bottom: .45rem !important; color: var(--gac-text) !important; font-size: .9rem !important; }
.gac-card {
  border: 1.5px solid var(--gac-border) !important; border-radius: 8px !important;
  padding: .5rem .65rem !important; margin: .35rem 0 !important; background: var(--gac-bg) !important; cursor: pointer !important; transition: all .2s ease !important;
}
.gac-card:hover         { border-color: var(--gcc-ink-strong) !important; background: var(--gcc-surface-2) !important; transform: translateX(3px) !important; }
.gac-card .gac-vtitle   { font-size: .9rem !important; color: var(--gcc-ink-strong) !important; }
.gac-card .gac-vmsg     { font-size: .82rem !important; color: var(--gac-text-light) !important; margin-top: .25rem !important; }

/* Raw debug */
.gac-raw summary { cursor: pointer !important; font-weight: 600 !important; padding: .45rem !important; color: var(--gac-text-light) !important; font-size: .82rem !important; }
.gac-raw pre {
  background: var(--gcc-surface-dark) !important; color: var(--gcc-ink-inverse) !important; padding: .7rem .9rem !important; border-radius: 8px !important;
  max-height: 30vh !important; overflow: auto !important; font-size: .82rem !important; line-height: 1.4 !important;
}

/* Footer */
.gac-foot {
  display: flex !important; gap: .4rem !important; justify-content: flex-end !important;
  padding: 10px 12px !important; border-top: 1.5px solid var(--gac-border) !important; background: var(--gac-bg) !important;
}
.gac-foot button {
  padding: .45rem .8rem !important; border: 1.5px solid var(--gac-border) !important; border-radius: 999px !important;
  background: var(--gac-bg) !important; cursor: pointer !important; font-weight: 600 !important; transition: all .2s ease !important; font-size: .82rem !important; line-height: 1 !important;
}

/* Language selector */
#gac-lang {
  width: 100% !important;
  padding: .5rem .65rem !important;
  border: 1.5px solid var(--gac-border) !important;
  border-radius: 8px !important;
  background: var(--gac-bg) !important;
  color: var(--gac-text) !important;
  font-family: inherit !important;
  font-size: .9rem !important;
  transition: all .2s ease !important;
  cursor: pointer !important;
}
#gac-lang:focus {
  outline: none !important;
  border-color: var(--gcc-ink-strong) !important;
  box-shadow: 0 0 0 3px var(--gcc-surface-3) !important;
}

/* Responsive */
@media (max-width: 800px) {
  .gac-body     { grid-template-columns: 1fr !important; }
  .gac-rows     { grid-template-columns: 1fr !important; }
  .gac-adv-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
  .gac-head         { padding: 8px 10px !important; gap: 4px !important; }
  .gac-title        { font-size: .88rem !important; }
  .gac-quota        { font-size: .68rem !important; padding: .15rem .4rem !important; }
  .gac-pricing-info { font-size: .65rem !important; }
  .gac-ai-credits   { font-size: .68rem !important; padding: .12rem .4rem !important; }
  .gac-x            { width: 22px !important; height: 22px !important; font-size: 16px !important; }
  .gac-dialog       { max-height: 95vh !important; }
  .gac-body         { padding: 10px !important; gap: 10px !important; }
}

/* Dialog border-radius (second pass override) */
body .gac-modal .gac-dialog,
html body .gac-modal .gac-dialog {
  border-radius: 50px !important;
  overflow: visible !important;
}

/* Clip child corners */
body .gac-modal .gac-dialog > .gac-head {
  border-radius: 16px 12px 0 0 !important;
  overflow: hidden !important;
}
body .gac-modal .gac-dialog > .gac-foot {
  border-radius: 0 0 24px 24px !important;
  overflow: hidden !important;
}

/* ==========================================================
   MOBILE — Full screen, no outer scroll, 9:16 friendly
   ========================================================== */
@media (max-width: 800px) {

  body .gac-modal,
  html body .gac-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  body .gac-modal .gac-dialog,
  html body .gac-modal .gac-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
  }

  body .gac-modal .gac-dialog > .gac-head {
    flex-shrink: 0 !important;
    border-radius: 0 !important;
  }

  .gac-modal .gac-tabs { flex-shrink: 0 !important; }

  .gac-modal .gac-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: none !important;
    padding: 10px !important;
    gap: 10px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .gac-modal .gac-left  { flex: 0 0 auto !important; overflow: visible !important; }
  .gac-modal .gac-right { flex: 0 0 auto !important; overflow: visible !important; }
  .gac-modal .gac-foot  { flex-shrink: 0 !important; }

  .gac-modal .gac-x {
    transform: none !important;
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
  }

  .gac-modal .gac-rows { grid-template-columns: 1fr !important; }
}

/* iPhone SE ≤375px */
@media (max-width: 375px) {
  .gac-modal .gac-left { max-height: 32vh !important; }
  .gac-modal .gac-body { padding: 8px !important; gap: 8px !important; }
}

/* ==========================================================
   OVERRIDE THEME — gac-cancel + gac-gen
   ========================================================== */
body .gac-modal .gac-cancel,
html body .gac-modal .gac-cancel {
  border: none !important;
  background: transparent !important;
  color: var(--gac-text-light) !important;
  box-shadow: none !important;
  outline: none !important;
}
body .gac-modal .gac-cancel:hover,
html body .gac-modal .gac-cancel:hover {
  background: var(--gac-bg-soft) !important;
  color: var(--gac-text) !important;
}

body .gac-modal .gac-gen,
html body .gac-modal .gac-gen {
  border: none !important;
  background: var(--gcc-btn-black-bg) !important;
  color: var(--gcc-ink-inverse) !important;
  box-shadow: none !important;
  outline: none !important;
}
body .gac-modal .gac-gen:hover,
html body .gac-modal .gac-gen:hover {
  background: var(--gcc-btn-black-bg-hover) !important;
}
body .gac-modal .gac-gen:active,
html body .gac-modal .gac-gen:active {
  background: var(--gcc-btn-black-bg-active) !important;
}

/* ─── User API key panel (2026 multi-provider) ────────────────────────────── */
.gac-token-section { margin-bottom: 16px; }
.gac-token-box {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--gcc-border, #e5e7eb);
  background: var(--gcc-surface, #fafafa);
}
.gac-token-box--saved  { border-left: 4px solid #1a7f37; background: #f1f9f3; }
.gac-token-box--empty  { border-left: 4px solid #dba617; background: #fff8e1; }
.gac-token-title       { font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.gac-token-body        { font-size: 12px; line-height: 1.5; color: #555; margin-bottom: 8px; }
.gac-token-meta        { font-size: 12px; color: #555; margin-bottom: 8px; }
.gac-token-preview     { background: #fff; padding: 2px 6px; border-radius: 3px; border: 1px solid #ddd; }
.gac-token-provider    { margin-left: 6px; color: #1a7f37; font-weight: 600; }
.gac-token-input-row   { display: flex; gap: 6px; margin-bottom: 6px; }
.gac-token-input {
  flex: 1; padding: 6px 10px; font-size: 13px;
  border: 1px solid #ccc; border-radius: 4px; font-family: monospace;
}
.gac-token-input:focus { outline: none; border-color: #111; }
.gac-token-section button {
  padding: 6px 12px; font-size: 13px; border-radius: 4px;
  border: 1px solid #ccc; background: #fff; cursor: pointer;
}
.gac-token-section button:hover { background: #f0f0f0; }
.gac-btn-token-save   { background: #111 !important; color: #fff !important; border-color: #111 !important; }
.gac-btn-token-delete { color: #b91c1c; border-color: #fca5a5; }
.gac-token-links      { font-size: 11px; color: #666; margin-top: 4px; }
.gac-token-links a    { color: #0969da; margin-right: 4px; text-decoration: none; }
.gac-token-links a:hover { text-decoration: underline; }
.gac-token-fallback   { font-size: 11px; color: #666; margin-top: 6px; font-style: italic; }