/* McLightning Portal - PHP-first embedded flow */
/* Scoped to .mcls-embed so Kubio/theme CSS won't break it */

.mcls-embed{
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 12px;
  z-index: 9999;
  pointer-events: auto;
  color: #fff !important;
}

.mcls-embed *{ box-sizing: border-box; pointer-events: auto; }

.mcls-card{
  color: #fff !important;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.60) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mcls-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 16px 16px 12px;
  background: rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.mcls-brand-logo{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: contain;
}
.mcls-brand-title{ font-weight: 800; font-size: 16px; line-height: 1.1; }
.mcls-brand-subtitle{ opacity: .9; font-size: 13px; margin-top: 2px; }

.mcls-body{ padding: 18px 16px 18px; position: relative; }

/* App-like screen transitions (PJAX enhancement). */
.mcls-embed.mcls-loading .mcls-body{ pointer-events: none; }
.mcls-body.mcls-slide-out{ animation: mclsSlideOut 220ms ease-in forwards; }
.mcls-body.mcls-slide-in{ animation: mclsSlideIn 260ms ease-out forwards; }

@keyframes mclsSlideOut{
  from{ opacity: 1; transform: translateX(0); }
  to{ opacity: 0; transform: translateX(-14px); }
}

@keyframes mclsSlideIn{
  from{ opacity: 0; transform: translateX(14px); }
  to{ opacity: 1; transform: translateX(0); }
}

.mcls-title{ margin: 0 0 10px; font-size: 22px; font-weight: 900; }
.mcls-subtitle{ margin: 0 0 16px; opacity: .92; }

.mcls-actions{ display:flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.mcls-btn{
  display:block;
  width:100%;
  padding: 14px 14px;
  border-radius: 14px;
  text-align:center;
  text-decoration:none;
  font-weight: 900;
  border: 0;
  cursor: pointer;
  background: rgba(255,255,255,.12);
}
.mcls-btn-primary{ background: #ef4444; }
.mcls-btn-secondary{ background: #3b82f6; }
.mcls-btn-danger{ background: #991b1b; }

.mcls-grid{ display:grid; gap: 12px; }
.mcls-cardlink,
.mcls-card-link{
  display:block;
  padding: 14px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.10);
}
.mcls-cardlink-title,
.mcls-card-title{ font-weight: 900; margin-bottom: 4px; }
.mcls-cardlink-desc,
.mcls-card-desc{ opacity: .9; font-size: 13px; }

.mcls-headerrow{ display:flex; align-items:center; gap: 10px; margin-bottom: 12px; }
.mcls-spacer{ flex:1; }
.mcls-pill{ padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.14); font-weight: 900; font-size: 12px; }
.mcls-link{ text-decoration: underline; font-weight: 900; }

.mcls-footer-links{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  font-weight: 800;
}
.mcls-footer-links a{ text-decoration: underline; }

.mcls-tabs{ display:flex; gap: 10px; margin: 10px 0 14px; }
.mcls-tab{
  flex:1;
  text-align:center;
  padding: 10px 10px;
  border-radius: 12px;
  text-decoration:none;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 900;
}
.mcls-tab.is-active{ background: rgba(255,255,255,.18); }

.mcls-form label{ display:block; margin: 10px 0 6px; font-weight: 900; }
.mcls-form input, .mcls-form textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(0,0,0,.28) !important;
  color: #ffffff !important;
  outline: none;
}

.mcls-inline{ display:flex; gap: 10px; align-items:center; margin: 10px 0 0; }
.mcls-inline input{ flex:1; }

.mcls-alert{
  padding: 12px 12px;
  border-radius: 12px;
  font-weight: 900;
  margin: 10px 0 12px;
}
.mcls-alert-error{ background: rgba(239,68,68,.22); border: 1px solid rgba(239,68,68,.35); }
.mcls-alert-success{ background: rgba(34,197,94,.18); border: 1px solid rgba(34,197,94,.30); }

.mcls-section{ margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.10); }
.mcls-section-title{ font-weight: 950; margin-bottom: 8px; }

.mcls-ticket{ display:block; padding: 10px 10px; border-radius: 12px; background: rgba(255,255,255,.08); margin-bottom: 10px; text-decoration:none; border: 1px solid rgba(255,255,255,.10); }
.mcls-ticket-subject{ font-weight: 900; }
.mcls-ticket-meta{ opacity: .85; font-size: 12px; margin-top: 2px; }

.mcls-ticket-detail{ padding: 12px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); }
.mcls-ticket-detail-title{ font-weight: 950; font-size: 16px; margin-bottom: 8px; }
.mcls-ticket-detail-meta{ display:flex; flex-wrap:wrap; gap: 8px; margin-bottom: 10px; }
.mcls-ticket-detail-body{ opacity: .95; line-height: 1.4; }
.mcls-badge{ display:inline-block; padding: 4px 8px; border-radius: 999px; background: rgba(239,68,68,.22); border: 1px solid rgba(239,68,68,.35); font-weight: 900; font-size: 12px; }
.mcls-badge-muted{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); }

.mcls-kb-item{ display:block; padding: 10px 10px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); margin-bottom: 10px; text-decoration:none; }
.mcls-kb-article{ padding: 12px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); }
.mcls-kb-article-title{ font-weight: 950; font-size: 16px; margin-bottom: 8px; }
.mcls-kb-article-body{ opacity: .95; line-height: 1.45; }
.mcls-kb-search{ margin-bottom: 12px; }

.mcls-chat{ display:grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 520px){
  .mcls-chat{ grid-template-columns: 180px 1fr; }
}
.mcls-chat-sessions, .mcls-chat-messages{ padding: 10px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); }
.mcls-chat-session{ display:block; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); margin-bottom: 10px; text-decoration:none; }
.mcls-chat-session.is-active{ background: rgba(255,255,255,.16); }
.mcls-chat-session-title{ font-weight: 950; }
.mcls-chat-session-id{ opacity: .85; font-size: 11px; margin-top: 3px; }
.mcls-chat-thread{ max-height: 320px; overflow:auto; padding: 4px; }
.mcls-chat-msg{ padding: 10px; border-radius: 12px; background: rgba(0,0,0,.20); border: 1px solid rgba(255,255,255,.10); margin-bottom: 10px; }
.mcls-chat-from{ font-weight: 950; opacity: .95; margin-bottom: 6px; }
.mcls-chat-content{ opacity: .95; line-height: 1.4; }
.mcls-chat-send textarea{ width: 100%; margin-top: 10px; }
.mcls-chat-send{ display:flex; flex-direction:column; gap: 10px; margin-top: 10px; }
.mcls-chat-hint{ margin-top: 8px; }

.mcls-muted{ opacity: .85; font-weight: 700; }


/* Batch 3 polish */
.mcls-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.mcls-header-actions{ display:flex; gap: 8px; flex-wrap:wrap; }

.mcls-kicker{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .9;
  margin-bottom: 6px;
}

.mcls-pill{
  display:inline-block;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  font-size: 12px;
  font-weight: 900;
}

.mcls-pill-ok{ background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.35); }
.mcls-pill-bad{ background: rgba(239,68,68,.22); border-color: rgba(239,68,68,.38); }

.mcls-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.10);
}
.mcls-row:first-child{ border-top: 0; }

.mcls-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 14px;
}
@media (min-width: 520px){
  .mcls-grid{ grid-template-columns: 1fr 1fr; }
}

.mcls-card{
  color: #fff !important;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.mcls-card-link{ text-decoration:none; color: inherit !important; }
.mcls-card-link:hover{ background: rgba(255,255,255,.12); }
.mcls-card-title{ font-weight: 950; font-size: 16px; margin-bottom: 6px; }
.mcls-card-meta{ opacity: .9; font-weight: 800; font-size: 13px; }

.mcls-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 12px;
  font-weight: 900;
}

/* Inline form (tickets/kb search) */
.mcls-inline-form{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
  margin: 10px 0 14px;
}
.mcls-inline-form input[type="text"]{
  flex: 1 1 220px;
}

/* Improved chat layout + bubbles */
.mcls-chat-layout{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 520px){
  .mcls-chat-layout{ grid-template-columns: 200px 1fr; }
}

.mcls-session{
  display:block;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  margin-bottom: 10px;
  text-decoration:none;
}
.mcls-session.is-active{ background: rgba(255,255,255,.14); }
.mcls-session-title{ font-weight: 950; }
.mcls-session-preview{ opacity: .85; font-size: 13px; margin-top: 4px; }
.mcls-session-meta{ opacity:.85; font-size: 12px; margin-top: 4px; }

.mcls-bubble{
  max-width: 85%;
  padding: 10px 12px;
  border-radius: 16px;
  margin: 10px 0;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
}
.mcls-bubble.is-me{
  margin-left: auto;
  background: rgba(59,130,246,.18);
  border-color: rgba(59,130,246,.28);
}
.mcls-bubble.is-them{
  margin-right: auto;
}
.mcls-bubble-from{
  font-weight: 950;
  font-size: 12px;
  opacity: .95;
  margin-bottom: 4px;
}
.mcls-bubble-content{
  line-height: 1.45;
  font-weight: 700;
  opacity: .98;
}
.mcls-bubble-time{
  font-size: 11px;
  opacity: .75;
  margin-top: 6px;
  text-align: right;
}

.mcls-chat-typing{
  margin-top: 8px;
  font-size: 12px;
  opacity: .8;
  min-height: 16px;
}

/* Button variants */
.mcls-btn-danger{
  background: rgba(239,68,68,.22);
  border-color: rgba(239,68,68,.35);
}

/* Ticket thread + reply form (Batch 6) */
.mcls-thread{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.mcls-thread-item{display:flex;flex-direction:column;gap:6px}
.mcls-thread-item.is-me{align-items:flex-end}
.mcls-thread-item.is-them{align-items:flex-start}
.mcls-thread-meta{display:flex;gap:10px;align-items:baseline;opacity:.9}
.mcls-thread-author{font-weight:800;font-size:13px}
.mcls-thread-time{font-size:12px;opacity:.8}
.mcls-thread-bubble{max-width:92%;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
.mcls-thread-item.is-me .mcls-thread-bubble{background:rgba(147,51,234,.22);border-color:rgba(147,51,234,.35)}
.mcls-reply-form{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.mcls-reply-form textarea{width:100%;box-sizing:border-box;padding:12px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.28);color:#fff;outline:none}
.mcls-label{font-weight:800;font-size:13px;opacity:.95}