/*
  Teewinek AI Studio — Pro Theme Layer
  -----------------------------------
  Loaded AFTER the compiled bundle CSS.

  Goals:
  - Modern "glass / premium" theme
  - Better typography and surfaces
  - Added Pro Dock + Drawer + Palette components
  - Keep overrides SAFE (no dependency on React internals)
*/

:root{
  --twk-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --twk-ring: rgba(59,130,246,.45);
  --twk-border: rgba(15,23,42,.10);
  --twk-card: rgba(255,255,255,.72);
  --twk-card-strong: rgba(255,255,255,.90);
  --twk-text: rgba(15,23,42,.92);
  --twk-muted: rgba(15,23,42,.62);
  --twk-shadow: 0 16px 60px rgba(2,6,23,.14);
  --twk-shadow-soft: 0 10px 34px rgba(2,6,23,.10);
  --twk-shadow-hard: 0 24px 70px rgba(2,6,23,.18);
  --twk-accent: rgba(59,130,246,1);
  --twk-accent-2: rgba(99,102,241,1);
  --twk-warn: rgba(245,158,11,1);
  --twk-danger: rgba(239,68,68,1);
  --twk-ok: rgba(34,197,94,1);
}

html.twk-pro-theme{
  color-scheme: light;
}

html.twk-pro-theme.dark{
  color-scheme: dark;
  --twk-border: rgba(148,163,184,.18);
  --twk-card: rgba(2,6,23,.58);
  --twk-card-strong: rgba(2,6,23,.78);
  --twk-text: rgba(248,250,252,.94);
  --twk-muted: rgba(226,232,240,.66);
  --twk-shadow: 0 18px 70px rgba(0,0,0,.48);
  --twk-shadow-soft: 0 14px 48px rgba(0,0,0,.32);
  --twk-shadow-hard: 0 26px 88px rgba(0,0,0,.56);
}

html, body{ height: 100%; }

body{
  font-family: var(--twk-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--twk-text);
}

html.twk-pro-theme body{
  background:
    radial-gradient(1200px 700px at 16% 10%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(900px 600px at 84% 14%, rgba(99,102,241,.18), transparent 55%),
    radial-gradient(800px 600px at 50% 92%, rgba(236,72,153,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
}

html.twk-pro-theme.dark body{
  background:
    radial-gradient(1200px 700px at 16% 10%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(900px 600px at 84% 14%, rgba(99,102,241,.18), transparent 55%),
    radial-gradient(800px 600px at 50% 92%, rgba(236,72,153,.10), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.94), rgba(2,6,23,.84));
}

a, button, input, textarea, select{ font-family: inherit; }

::selection{ background: rgba(59,130,246,.24); }

*:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 4px var(--twk-ring) !important;
}

@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Scrollbars */
*{ scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.50) transparent; }
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{
  background: rgba(100,116,139,.38);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
html.twk-pro-theme.dark *::-webkit-scrollbar-thumb{ background: rgba(148,163,184,.28); }

/* Mild global polish for the underlying UI (safe selectors) */
html.twk-pro-theme #root :where(input, textarea, select){
  border-radius: 14px !important;
}

html.twk-pro-theme #root :where(input, textarea, select){
  border: 1px solid var(--twk-border) !important;
  background: rgba(148,163,184,.08) !important;
}

html.twk-pro-theme.dark #root :where(input, textarea, select){
  background: rgba(148,163,184,.10) !important;
}

html.twk-pro-theme #root :where(button){
  border-radius: 14px;
}

/* Utility surface */
.twk-pro-surface{
  background: var(--twk-card);
  border: 1px solid var(--twk-border);
  box-shadow: var(--twk-shadow-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
}

/* Toast */
.twk-pro-toast{
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2600;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--twk-border);
  background: var(--twk-card-strong);
  box-shadow: var(--twk-shadow);
  color: var(--twk-text);
  display: none;
  max-width: min(820px, calc(100vw - 32px));
}
.twk-pro-toast[data-open="true"]{ display: block; }

/* Status pill */
.twk-pro-status{
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 1400;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--twk-border);
  background: var(--twk-card-strong);
  box-shadow: var(--twk-shadow);
  color: var(--twk-muted);
  font-size: 12px;
}

.twk-pro-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(34,197,94,.90);
  box-shadow: 0 0 0 4px rgba(34,197,94,.18);
}

/* KBD */
.twk-pro-kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--twk-border);
  background: rgba(148,163,184,.10);
  color: var(--twk-muted);
}

/* Launcher */
.twk-pro-launcher{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1400;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--twk-border);
  background: var(--twk-card-strong);
  box-shadow: var(--twk-shadow);
  color: var(--twk-text);
  cursor: pointer;
  user-select: none;
}
.twk-pro-launcher:hover{ transform: translateY(-1px); }
.twk-pro-launcher:active{ transform: translateY(0); }

/* Command palette overlay */
.twk-pro-overlay{
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 56px 16px 16px;
  background: rgba(2,6,23,.44);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.twk-pro-overlay[data-open="true"]{ display: flex; }

.twk-pro-modal{
  width: min(820px, 100%);
  border-radius: 22px;
  border: 1px solid var(--twk-border);
  background: var(--twk-card-strong);
  box-shadow: var(--twk-shadow-hard);
  overflow: hidden;
}

.twk-pro-modal__hd{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border-bottom: 1px solid var(--twk-border);
}

.twk-pro-modal__hd input{
  flex: 1;
  height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--twk-border);
  background: rgba(148,163,184,.08);
  color: var(--twk-text);
}

.twk-pro-modal__list{
  max-height: min(56vh, 560px);
  overflow: auto;
  padding: 8px;
}

.twk-pro-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  cursor: pointer;
}
.twk-pro-item:hover{
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.20);
}
.twk-pro-item[data-active="true"]{
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.28);
}

.twk-pro-item__label{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.twk-pro-item__label b{
  font-size: 13px;
  font-weight: 700;
  color: var(--twk-text);
}
.twk-pro-item__label span{
  font-size: 12px;
  color: var(--twk-muted);
}

/* Pro Dock (top) */
.twk-pro-dock{
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100vw - 24px));
  z-index: 1500;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--twk-border);
  background: rgba(255,255,255,.62);
  box-shadow: var(--twk-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
html.twk-pro-theme.dark .twk-pro-dock{ background: rgba(2,6,23,.56); }

.twk-pro-dock__brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.twk-pro-dock__brand img{
  width: 28px;
  height: 28px;
  border-radius: 10px;
}
.twk-pro-dock__brand b{
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.twk-pro-dock__brand span{
  font-size: 12px;
  color: var(--twk-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.twk-pro-dock__actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.twk-pro-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--twk-border);
  background: rgba(148,163,184,.10);
  color: var(--twk-text);
  box-shadow: 0 10px 20px rgba(2,6,23,.06);
}
.twk-pro-btn:hover{ background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.22); }
.twk-pro-btn:active{ transform: translateY(1px); }

.twk-pro-btn--primary{
  background: linear-gradient(135deg, rgba(59,130,246,.92), rgba(99,102,241,.88));
  border-color: rgba(59,130,246,.35);
  color: white;
}
.twk-pro-btn--primary:hover{
  background: linear-gradient(135deg, rgba(59,130,246,.98), rgba(99,102,241,.96));
}

.twk-pro-btn svg{ width: 16px; height: 16px; }

.twk-pro-dock__right{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 860px){
  .twk-pro-dock{ grid-template-columns: 1fr auto; }
  .twk-pro-dock__right{ display: none; }
}

/* Drawer */
.twk-pro-drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(420px, 92vw);
  z-index: 2100;
  transform: translateX(110%);
  transition: transform .22s ease;
  border-left: 1px solid var(--twk-border);
  background: var(--twk-card-strong);
  box-shadow: var(--twk-shadow-hard);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.twk-pro-drawer[data-open="true"]{ transform: translateX(0); }

.twk-pro-drawer__mask{
  position: fixed;
  inset: 0;
  z-index: 2050;
  background: rgba(2,6,23,.34);
  display: none;
}
.twk-pro-drawer__mask[data-open="true"]{ display: block; }

.twk-pro-drawer__hd{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px;
  border-bottom: 1px solid var(--twk-border);
}
.twk-pro-drawer__hd b{ font-size: 14px; font-weight: 800; }

.twk-pro-tabs{
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--twk-border);
}
.twk-pro-tab{
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--twk-border);
  background: rgba(148,163,184,.10);
  color: var(--twk-muted);
}
.twk-pro-tab[data-active="true"]{
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.26);
  color: var(--twk-text);
}

.twk-pro-drawer__bd{
  height: calc(100vh - 108px);
  overflow: auto;
  padding: 14px;
}

.twk-pro-section{ margin-bottom: 14px; }
.twk-pro-section h4{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--twk-muted);
  margin-bottom: 8px;
}

.twk-pro-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.twk-pro-field label{ font-size: 12px; color: var(--twk-muted); }
.twk-pro-field input,
.twk-pro-field select,
.twk-pro-field textarea{
  width: 100%;
  border: 1px solid var(--twk-border);
  border-radius: 14px;
  background: rgba(148,163,184,.10);
  color: var(--twk-text);
  padding: 10px 12px;
}
.twk-pro-field textarea{ min-height: 88px; resize: vertical; }

.twk-pro-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.twk-pro-chiprow{ display: flex; flex-wrap: wrap; gap: 8px; }
.twk-pro-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--twk-border);
  background: rgba(148,163,184,.10);
  color: var(--twk-text);
  font-size: 12px;
}
.twk-pro-chip input{ width: 14px; height: 14px; }

.twk-pro-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.twk-pro-gallery{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.twk-pro-thumb{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--twk-border);
  background: rgba(148,163,184,.08);
  box-shadow: var(--twk-shadow-soft);
}
.twk-pro-thumb img{ width: 100%; height: 160px; object-fit: cover; }
.twk-pro-thumb .twk-pro-thumb__ft{
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.twk-pro-thumb .twk-pro-thumb__ft button{
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--twk-border);
  background: rgba(148,163,184,.10);
}
.twk-pro-thumb .twk-pro-thumb__ft button:hover{ background: rgba(59,130,246,.12); }

.twk-pro-muted{ color: var(--twk-muted); font-size: 12px; }

/* Keep Pro UI above existing bubble */
#popupBubble{ z-index: 1000; }


/* -----------------------------
   Dashboard components
------------------------------*/
.twk-pro-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
@media (min-width: 980px){
  .twk-pro-cards{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.twk-pro-card{
  background: var(--twk-card);
  border: 1px solid var(--twk-border);
  box-shadow: var(--twk-shadow-soft);
  border-radius: 18px;
  padding: 14px 14px 12px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.twk-pro-card__label{
  font-size: 12px;
  color: var(--twk-muted);
  letter-spacing: .02em;
}
.twk-pro-card__value{
  font-size: 28px;
  font-weight: 800;
  margin-top: 6px;
  line-height: 1.05;
}
.twk-pro-card__value--sm{
  font-size: 16px;
  font-weight: 700;
  margin-top: 10px;
}
.twk-pro-card__sub{
  font-size: 12px;
  color: var(--twk-muted);
  margin-top: 6px;
}

.twk-pro-chartCard{
  margin-top: 14px;
  background: var(--twk-card);
  border: 1px solid var(--twk-border);
  box-shadow: var(--twk-shadow-soft);
  border-radius: 18px;
  padding: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.twk-pro-chartHd{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--twk-text);
}
.twk-pro-chart{
  width: 100%;
  height: 160px;
  display: block;
  border-radius: 14px;
  background: rgba(148,163,184,.06);
  border: 1px solid var(--twk-border);
}

.twk-pro-badges{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.twk-pro-badge{
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--twk-border);
  color: var(--twk-muted);
  background: rgba(148,163,184,.10);
}
.twk-pro-badge--alt{
  background: rgba(99,102,241,.12);
  color: var(--twk-text);
}

.twk-pro-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}
.twk-pro-row--tight{ margin-top: 10px; }


/* --- PRO v1.13 additions (CMS + Tools + Server KPI) --- */
:root{
  --twk-accent: var(--twk-accent, #6d28d9);
}
.twk-pro-kpis{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-top:12px;
}
@media (max-width: 900px){
  .twk-pro-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.twk-pro-kpi{
  border:1px solid var(--twk-border);
  background: color-mix(in srgb, var(--twk-card) 92%, transparent);
  border-radius:14px;
  padding:10px 12px;
}
.twk-pro-kpi .k{
  font-size:12px;
  opacity:.72;
}
.twk-pro-kpi .v{
  font-size:18px;
  font-weight:700;
  margin-top:4px;
}
.twk-pro-grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 720px){
  .twk-pro-grid2{ grid-template-columns: 1fr; }
}
.twk-pro-input, .twk-pro-textarea{
  width:100%;
  border:1px solid var(--twk-border);
  background: rgba(255,255,255,.06);
  color: inherit;
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
.twk-pro-textarea{ resize: vertical; min-height: 96px; }
.twk-pro-input:focus, .twk-pro-textarea:focus{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--twk-accent) 42%, transparent);
  border-color: color-mix(in srgb, var(--twk-accent) 55%, var(--twk-border));
}
.twk-pro-chipset{
  display:flex;
  flex-wrap: wrap;
  gap:8px;
}
.twk-pro-chip{
  border:1px solid var(--twk-border);
  background: rgba(255,255,255,.06);
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  cursor:pointer;
}
.twk-pro-chip:hover{
  background: rgba(255,255,255,.10);
}

/* Mobile polishing */
@media (max-width: 520px){
  #twkProDock{
    left: 10px !important;
    right: 10px !important;
    top: 10px !important;
  }
  .twk-pro-drawer__panel{
    width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
  }
}