/* clone — AI Clone ของฉัน (prefix .cl-) */
.cl-title{text-align:center}
.cl-wrap{padding:2px 18px 24px;display:flex;flex-direction:column;gap:14px}

.cl-card{padding:16px;display:flex;flex-direction:column;gap:12px}
.cl-h2{font-size:14px;font-weight:700}
.cl-row-between{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cl-hint{font-size:11.5px;line-height:1.5}
.cl-center{text-align:center}

/* ---- การ์ดภาพรวมโคลน ---- */
.cl-head{display:flex;align-items:center;gap:14px}
.cl-avatar-wrap{position:relative;flex:none;width:74px;height:74px;
  display:flex;align-items:center;justify-content:center}
.cl-ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,#2f8bff,#57e6a8,#a78bfa,#2f8bff);
  animation:clRingSpin 6s linear infinite;box-shadow:var(--glow)}
@keyframes clRingSpin{to{transform:rotate(360deg)}}
.cl-avatar{position:relative;z-index:1;display:flex;border-radius:50%;
  padding:3px;background:var(--bg-1)}
.cl-badge{position:absolute;z-index:2;bottom:-2px;right:-2px;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,#8fd8ff,var(--accent));border:2px solid var(--card-brd);
  display:flex;align-items:center;justify-content:center;font-size:11px;box-shadow:var(--glow)}
.cl-head-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.cl-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cl-name{font-size:15px;font-weight:700;max-width:100%}
.cl-pill{font-size:10.5px;font-weight:700;padding:2px 10px;border-radius:var(--r-pill);
  background:var(--glass-2);color:var(--ink-dim);transition:background .2s,color .2s,box-shadow .2s}
.cl-pill.on{background:rgba(87,230,168,.18);color:var(--accent-2);
  box-shadow:0 0 12px rgba(87,230,168,.35)}
.cl-stats{font-size:11.5px;line-height:1.5}
.cl-stats b{color:var(--ink);font-weight:700}
.cl-stats .cl-match{color:var(--accent-2)}

.cl-main-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:var(--r-md);background:var(--glass);border:1px solid var(--glass-brd)}
.cl-main-label{font-size:12.5px;font-weight:600;line-height:1.45}

/* ---- สวิตช์ (เล็ก 46x26 / ใหญ่ 52x30) ---- */
.cl-switch{position:relative;flex:none;width:46px;height:26px;border-radius:var(--r-pill);
  background:rgba(108,134,171,.4);transition:background .3s,box-shadow .3s}
.cl-switch:active{transform:scale(.95)}
.cl-switch .cl-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);transition:transform .3s}
.cl-switch.on{background:var(--grad-cta);box-shadow:0 0 14px rgba(87,230,168,.45)}
.cl-switch.on .cl-knob{transform:translateX(20px)}
.cl-switch.big{width:52px;height:30px}
.cl-switch.big .cl-knob{width:24px;height:24px}
.cl-switch.big.on .cl-knob{transform:translateX(22px)}

/* ---- ความคืบหน้าการฝึก ---- */
.cl-train-pct{font-size:13px;font-weight:700;color:var(--accent-2)}
.cl-track{height:12px;border-radius:var(--r-pill);overflow:hidden;
  background:var(--glass);border:1px solid var(--glass-brd)}
.cl-bar{height:100%;width:0;border-radius:var(--r-pill);background:var(--grad-cta);
  box-shadow:0 0 14px rgba(87,230,168,.5);transition:width 1.1s cubic-bezier(.22,.8,.3,1)}
.cl-btn-row{display:flex;gap:8px}
.cl-btn-cta{flex:1;padding:10px 8px;border-radius:var(--r-md);background:var(--grad-cta);
  color:#04223f;font-size:12.5px;font-weight:700;box-shadow:0 0 16px rgba(87,230,168,.4);
  transition:transform .12s,filter .15s}
.cl-btn-cta:hover{filter:brightness(1.05)} .cl-btn-cta:active{transform:scale(.96)}
.cl-btn-ghost{flex:1;padding:10px 8px;border-radius:var(--r-md);font-size:12.5px;font-weight:600;
  background:var(--glass-2);border:1px solid var(--glass-brd);color:var(--ink);
  transition:transform .12s,border-color .15s}
.cl-btn-ghost:hover{border-color:var(--glass-brd-hi)} .cl-btn-ghost:active{transform:scale(.96)}

/* ---- ชิปสไตล์ 4 ---- */
.cl-style-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cl-style-chip{padding:10px 8px;border-radius:var(--r-md);font-size:12.5px;font-weight:700;
  background:var(--glass);border:1px solid var(--glass-brd);color:var(--ink-dim);
  transition:transform .12s,border-color .2s,color .2s,background .2s,box-shadow .2s}
.cl-style-chip:active{transform:scale(.95)}
.cl-style-chip.active{border-color:var(--accent-2);color:var(--accent-2);
  background:rgba(87,230,168,.14);box-shadow:0 0 14px rgba(87,230,168,.3)}

/* ---- จัดการการตอบอัตโนมัติ ---- */
.cl-manage{display:flex;flex-direction:column}
.cl-manage-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--glass-brd)}
.cl-manage-row:last-child{border-bottom:none;padding-bottom:0}
.cl-manage-label{font-size:12.5px;font-weight:500}

/* ---- พรีวิวบทสนทนา ---- */
.cl-swap{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:700;color:var(--accent);background:rgba(47,139,255,.14);
  border:1px solid rgba(47,139,255,.3);flex:none;transition:transform .12s,background .15s}
.cl-swap svg{width:14px;height:14px}
.cl-swap:hover{background:rgba(47,139,255,.24)} .cl-swap:active{transform:scale(.95)}

.cl-chat{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(47,139,255,.10),rgba(255,255,255,.04));
  border:1px solid var(--glass-brd)}
.cl-bubble-row{display:flex;align-items:flex-end;gap:8px;max-width:85%}
.cl-bubble-row.mine{flex-direction:column;align-items:flex-end;align-self:flex-end;gap:4px}
.cl-bubble{padding:9px 14px;border-radius:var(--r-md);font-size:12.5px;line-height:1.5}
.cl-bubble.them{background:var(--glass-2);border:1px solid var(--glass-brd);
  border-bottom-left-radius:6px}
.cl-bubble.mine{background:var(--grad-cta);color:#04321f;border-bottom-right-radius:6px;
  box-shadow:0 0 14px rgba(87,230,168,.35)}
.cl-ai-pill{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);
  background:rgba(87,230,168,.18);color:var(--accent-2)}
.cl-in{animation:clBubbleIn .35s ease both}
@keyframes clBubbleIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:360px){
  .cl-wrap{padding:2px 14px 20px}
  .cl-card{padding:14px}
  .cl-btn-row{flex-direction:column}
}

/* หมายเหตุพฤติกรรมจริงตอนออฟไลน์ + สถานะกำลังคิดของพรีวิว */
.cl-offline-note{margin-top:2px}
.cl-bubble.cl-loading{opacity:.65;font-style:italic}
.cl-btn-cta:disabled,.cl-btn-ghost:disabled{opacity:.55;pointer-events:none}