/* GetClosifi: training chat follows dashboard appearance.
   The Yug header uses the exact gradient of the live landing-page widget.
   Scoped to owner's Yug trainer; no messaging or persistence changes. */

/* Common compact chat and actual Yug widget header, in BOTH themes */
.app-shell .gc-ae4-section.gc-owner-training{
  border-radius:19px!important;
  padding:clamp(13px,2vw,20px)!important;
  box-shadow:0 12px 33px rgba(20,27,62,.09)!important
}
.app-shell .gc-owner-training .gc-ae4-other-intro{
  margin:0 0 13px!important;line-height:1.55!important
}
.app-shell .gc-owner-training .gc-owner-training-card{
  border-radius:16px!important;overflow:hidden!important
}
.app-shell .gc-owner-training .gc-owner-training-top{
  background:linear-gradient(135deg,#2563eb,#3b82f6)!important;
  color:#fff!important;border-bottom:0!important;
  padding:12px 14px!important;min-height:60px!important;gap:10px!important
}
.app-shell .gc-owner-training .gc-owner-training-identity-copy strong{
  color:#fff!important;font-size:.9rem!important
}
.app-shell .gc-owner-training .gc-owner-training-identity-copy small{
  color:#e6f0ff!important
}
.app-shell .gc-owner-training .gc-owner-training-avatar{
  width:34px!important;height:34px!important;flex:0 0 34px!important;
  border-radius:11px!important;
  background:linear-gradient(135deg,#2563eb,#7c3aed)!important;
  border:1px solid rgba(255,255,255,.38)!important;
  box-shadow:0 4px 12px rgba(17,38,99,.21)!important
}
.app-shell .gc-owner-training .gc-owner-training-avatar svg{
  width:22px!important;height:22px!important
}
.app-shell .gc-owner-training #gcOwnerTrainProgress{
  color:#fff!important;
  background:rgba(13,52,128,.29)!important;
  border-color:rgba(255,255,255,.34)!important;
  padding:6px 9px!important;font-size:.68rem!important
}
.app-shell .gc-owner-training .gc-owner-training-meter{height:3px!important}
.app-shell .gc-owner-training .gc-owner-training-meter>span{
  background:linear-gradient(90deg,#6e70f9,#67d7ff)!important
}
/* No forced blank area when only one message exists.
   Several messages show before the history becomes internally scrollable. */
.app-shell .gc-owner-training .gc-owner-training-feed{
  height:auto!important;min-height:0!important;max-height:235px!important;
  padding:13px 14px!important;gap:9px!important;overflow-y:auto!important
}
.app-shell .gc-owner-training .gc-owner-training-msg{
  max-width:94%!important;padding:10px 13px!important;
  font-size:.87rem!important;line-height:1.48!important;
  border-radius:13px!important;white-space:pre-wrap!important
}
.app-shell .gc-owner-training #gcOwnerTrainForm{
  display:block!important;padding:11px 12px 7px!important
}
.app-shell .gc-owner-training .gc-owner-training-input-label{
  font-size:.72rem!important;margin:0 0 7px!important
}
.app-shell .gc-owner-training .gc-owner-training-compose-row{
  display:flex!important;align-items:flex-end!important;gap:8px!important
}
.app-shell .gc-owner-training #gcOwnerTrainInput{
  min-width:0!important;min-height:42px!important;max-height:120px!important;
  font-size:16px!important;line-height:1.35!important;
  padding:10px 12px!important;border-radius:12px!important;resize:none!important;
  overflow-y:auto!important
}
.app-shell .gc-owner-training #gcOwnerTrainSend{
  flex:0 0 auto!important;width:auto!important;min-width:78px!important;
  height:42px!important;min-height:42px!important;
  padding:0 11px!important;font-size:.82rem!important;
  border-radius:12px!important;
  background:#2563eb!important;box-shadow:0 3px 10px rgba(37,99,235,.15)!important
}
.app-shell .gc-owner-training .gc-owner-training-form-footer{padding:6px 1px 0!important}
.app-shell .gc-owner-training .gc-owner-training-hint,
.app-shell .gc-owner-training .gc-owner-training-count{font-size:.65rem!important}
.app-shell .gc-owner-training .gc-owner-training-status{
  padding:1px 12px 12px!important;font-size:.71rem!important
}
@media(max-width:650px){
  .app-shell .gc-owner-training .gc-owner-training-top{padding:11px 12px!important}
  .app-shell .gc-owner-training .gc-owner-training-feed{max-height:207px!important;padding:12px!important}
  .app-shell .gc-owner-training .gc-owner-training-msg{font-size:.85rem!important}
  .app-shell .gc-owner-training #gcOwnerTrainForm{padding:10px 10px 5px!important}
  .app-shell .gc-owner-training #gcOwnerTrainInput{min-height:42px!important}
  .app-shell .gc-owner-training #gcOwnerTrainSend{min-width:75px!important}
}

/* LIGHT: match the live Yug popup's pale #f8fafc conversation area. */
html[data-theme="light"] .app-shell .gc-ae4-section.gc-owner-training{
  color-scheme:light!important;color:#16243c!important;
  background:#f6f8ff!important;border-color:#d7dfed!important
}
html[data-theme="light"] .app-shell .gc-owner-training .gc-ae4-section-title{color:#172554!important}
html[data-theme="light"] .app-shell .gc-owner-training .gc-ae4-other-intro{color:#59677d!important}
html[data-theme="light"] .app-shell .gc-owner-training .gc-owner-training-card{
  background:#fff!important;border-color:#dbe3ee!important
}
html[data-theme="light"] .app-shell .gc-owner-training .gc-owner-training-feed{
  background:#f8fafc!important
}
html[data-theme="light"] .app-shell .gc-owner-training .gc-owner-training-msg.yug{
  background:#eaf0fc!important;color:#172b4d!important;border-color:#dfe7f5!important
}
html[data-theme="light"] .app-shell .gc-owner-training .gc-owner-training-msg.owner{
  background:#2563eb!important;color:#fff!important;border-color:rgba(37,99,235,.24)!important
}
html[data-theme="light"] .app-shell .gc-owner-training #gcOwnerTrainForm,
html[data-theme="light"] .app-shell .gc-owner-training .gc-owner-training-status{
  background:#fff!important;border-color:#e4e9f4!important;color:#64748b!important
}
html[data-theme="light"] .app-shell .gc-owner-training .gc-owner-training-input-label{color:#334155!important}
html[data-theme="light"] .app-shell .gc-owner-training #gcOwnerTrainInput{
  background:#fff!important;border:1px solid #cbd5e1!important;color:#0f172a!important;
  box-shadow:none!important
}
html[data-theme="light"] .app-shell .gc-owner-training #gcOwnerTrainInput::placeholder{color:#79869a!important}
html[data-theme="light"] .app-shell .gc-owner-training .gc-owner-training-hint,
html[data-theme="light"] .app-shell .gc-owner-training .gc-owner-training-count{color:#64748b!important}

/* DARK: same branded blue header, navy conversation/composer, readable bubbles. */
html:not([data-theme="light"]) .app-shell .gc-ae4-section.gc-owner-training{
  color-scheme:dark!important;color:#f6f7ff!important;
  background:#101728!important;border-color:#303c5c!important
}
html:not([data-theme="light"]) .app-shell .gc-owner-training .gc-ae4-section-title{color:#f5f7ff!important}
html:not([data-theme="light"]) .app-shell .gc-owner-training .gc-ae4-other-intro{color:#aebbd3!important}
html:not([data-theme="light"]) .app-shell .gc-owner-training .gc-owner-training-card{
  background:#151c30!important;border-color:#33405b!important
}
html:not([data-theme="light"]) .app-shell .gc-owner-training .gc-owner-training-feed{
  background:#11192d!important
}
html:not([data-theme="light"]) .app-shell .gc-owner-training .gc-owner-training-msg.yug{
  background:#263149!important;color:#f5f7ff!important;border-color:#3c4a66!important
}
html:not([data-theme="light"]) .app-shell .gc-owner-training .gc-owner-training-msg.owner{
  background:#315fba!important;color:#fff!important;border-color:#416bbd!important
}
html:not([data-theme="light"]) .app-shell .gc-owner-training #gcOwnerTrainForm,
html:not([data-theme="light"]) .app-shell .gc-owner-training .gc-owner-training-status{
  background:#161e32!important;border-color:#313e60!important;color:#aebbd3!important
}
html:not([data-theme="light"]) .app-shell .gc-owner-training .gc-owner-training-input-label{color:#d2dcf3!important}
html:not([data-theme="light"]) .app-shell .gc-owner-training #gcOwnerTrainInput{
  background:#0d1527!important;border:1px solid #455472!important;color:#f8faff!important;
  box-shadow:none!important
}
html:not([data-theme="light"]) .app-shell .gc-owner-training #gcOwnerTrainInput::placeholder{color:#a0aec7!important}
html:not([data-theme="light"]) .app-shell .gc-owner-training .gc-owner-training-hint,
html:not([data-theme="light"]) .app-shell .gc-owner-training .gc-owner-training-count{color:#aebbd3!important}
.app-shell .gc-owner-training .gc-owner-training-status.is-error{color:#dc4040!important}
html:not([data-theme="light"]) .app-shell .gc-owner-training .gc-owner-training-status.is-error{color:#fca5a5!important}

/* 'Yug Active' dropdown: fix dark-mode black-on-dark text and native options. */
html[data-theme="dark"] .app-shell .gc-ae4-status-control{
  color-scheme:dark!important;
  background:#1d2944!important;border:1px solid #465572!important;color:#f8faff!important
}
html[data-theme="dark"] .app-shell .gc-ae4-status-control select{
  color:#f8faff!important;-webkit-text-fill-color:#f8faff!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
  color-scheme:dark!important
}
html[data-theme="dark"] .app-shell .gc-ae4-status-control select option{
  color:#f8faff!important;background:#1d2944!important
}
html[data-theme="light"] .app-shell .gc-ae4-status-control{
  color-scheme:light!important;background:rgba(255,255,255,.94)!important;
  border:1px solid #cdd8eb!important;color:#172554!important
}
html[data-theme="light"] .app-shell .gc-ae4-status-control select{
  color:#172554!important;-webkit-text-fill-color:#172554!important;
  background:transparent!important;border:0!important;color-scheme:light!important
}
html[data-theme="light"] .app-shell .gc-ae4-status-control select option{
  color:#172554!important;background:#fff!important
}

/* Remove just the input's second, clipped search border/white layer.
   Keep the existing search, icon, focus styling and behavior intact. */
html .app-shell .gc-premium-topbar .gc-top-search{display:flex!important;align-items:center!important;gap:8px!important}
html .app-shell .gc-premium-topbar .gc-top-search #globalSearch{
  flex:1 1 auto!important;min-width:0!important;width:100%!important;
  height:100%!important;min-height:0!important;
  padding:0!important;margin:0!important;
  border:0!important;border-radius:0!important;outline:0!important;
  background:transparent!important;background-image:none!important;
  box-shadow:none!important;appearance:none!important;-webkit-appearance:none!important;
}
html .app-shell .gc-premium-topbar .gc-top-search #globalSearch:focus,
html .app-shell .gc-premium-topbar .gc-top-search #globalSearch:focus-visible{
  border:0!important;outline:0!important;box-shadow:none!important
}
html .app-shell .gc-premium-topbar .gc-top-search #globalSearch::-webkit-search-decoration,
html .app-shell .gc-premium-topbar .gc-top-search #globalSearch::-webkit-search-cancel-button{
  -webkit-appearance:none!important
}
@media(prefers-reduced-motion:reduce){
  .app-shell .gc-owner-training .gc-owner-training-feed{scroll-behavior:auto!important}
}

/* Yug banner: reserve a real row for the status instead of absolutely
   positioning it over "AI Sales Employee" on phones and small tablets. */
@media(max-width:840px){
 .app-shell .gc-ae4 .gc-ae4-banner{
  display:grid!important;
  grid-template-columns:clamp(70px,12vw,93px) minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  align-items:start!important;
  gap:10px 9px!important;
  min-height:0!important
 }
 .app-shell .gc-ae4 .gc-ae4-banner-right{
  position:static!important;inset:auto!important;
  grid-column:1 / -1!important;grid-row:1!important;
  justify-self:end!important;align-self:start!important;
  width:auto!important;margin:0!important;
  min-width:0!important;z-index:1!important
 }
 .app-shell .gc-ae4 .gc-ae4-status-control{
  max-width:100%!important;min-height:40px!important
 }
 .app-shell .gc-ae4 .gc-ae4-banner-robot{
  grid-column:1!important;grid-row:2!important;
  margin:0!important;align-self:start!important
 }
 .app-shell .gc-ae4 .gc-ae4-banner-copy{
  grid-column:2!important;grid-row:2!important;
  padding-top:0!important;align-self:stretch!important;
  min-width:0!important
 }
 .app-shell .gc-ae4 .gc-ae4-banner-copy h2{
  overflow-wrap:normal!important;
  font-size:clamp(1.17rem,3.7vw,1.38rem)!important;
  line-height:1.2!important
 }
 .app-shell .gc-ae4 .gc-ae4-banner-copy p{
  margin:7px 0 12px!important
 }
}
@media(max-width:650px){
 .app-shell .gc-ae4 .gc-ae4-banner{
  grid-template-columns:70px minmax(0,1fr)!important;
  padding:12px!important;gap:9px 8px!important
 }
 .app-shell .gc-ae4 .gc-ae4-banner-robot{
  width:70px!important;height:100px!important
 }
 .app-shell .gc-ae4 .gc-ae4-banner-copy h2{
  font-size:1.2rem!important
 }
 .app-shell .gc-ae4 .gc-ae4-tabs{
  width:calc(100% + 78px)!important;
  margin-left:-78px!important
 }
}

/* Longer, bounded transcript: the first Yug prompt no longer fills all
   available chat space. Two or more turns can remain visible; later turns
   scroll inside the card. Input stays messenger-sized and independently grows. */
.app-shell .gc-owner-training .gc-owner-training-card .gc-owner-training-feed{
 min-height:345px!important;
 height:345px!important;
 max-height:420px!important;
 overflow-y:auto!important;
 overscroll-behavior:contain!important;
 align-items:stretch!important;
 justify-content:flex-start!important
}
.app-shell .gc-owner-training .gc-owner-training-card .gc-owner-training-msg{
 flex:0 0 auto!important
}
@media(max-width:650px){
 .app-shell .gc-owner-training .gc-owner-training-card .gc-owner-training-feed{
  min-height:305px!important;
  height:305px!important;
  max-height:305px!important
 }
}

/* Dark Yug cards use dark surfaces and explicit foregrounds, including headings
   affected by the dashboard-wide !important heading rule. */
html[data-theme="dark"] body .app-shell [data-panel="agent"] .gc-ae4-banner{
 background:linear-gradient(110deg,#182b4b,#182e3d 58%,#282443)!important;
 border-color:#405373!important;
}
html[data-theme="dark"] body .app-shell [data-panel="agent"] .gc-ae4-banner-copy h2,
html[data-theme="dark"] body .app-shell [data-panel="agent"] .gc-ae4-module h4{
 color:#f5f7ff!important;-webkit-text-fill-color:#f5f7ff!important;opacity:1!important;
}
html[data-theme="dark"] body .app-shell [data-panel="agent"] .gc-ae4-banner-copy p,
html[data-theme="dark"] body .app-shell [data-panel="agent"] .gc-ae4-module p{
 color:#d2dced!important;-webkit-text-fill-color:#d2dced!important;
}
html[data-theme="dark"] body .app-shell [data-panel="agent"] .gc-ae4-module small{color:#b4c0d4!important}
html[data-theme="dark"] body .app-shell [data-panel="agent"] .gc-ae4-about{background:linear-gradient(135deg,#1c3550,#1d2b42)!important}
html[data-theme="dark"] body .app-shell [data-panel="agent"] .gc-ae4-pricing{background:linear-gradient(135deg,#183d38,#1c3034)!important}
html[data-theme="dark"] body .app-shell [data-panel="agent"] .gc-ae4-sales{background:linear-gradient(135deg,#423323,#342c2c)!important}
html[data-theme="dark"] body .app-shell [data-panel="agent"] .gc-ae4-faqs{background:linear-gradient(135deg,#422b3e,#302b40)!important}
html[data-theme="dark"] body .app-shell [data-panel="agent"] .gc-ae4-module>button{background:#e9efff!important;color:#19375d!important;border-color:#9eafce!important}
html[data-theme="dark"] body .app-shell [data-panel="agent"] .gc-ae4-module-icon{color:#88bdff!important}
html[data-theme="dark"] body .app-shell [data-panel="agent"] .gc-ae4-pricing .gc-ae4-module-icon{color:#74e4c7!important}
html[data-theme="dark"] body .app-shell [data-panel="agent"] .gc-ae4-sales .gc-ae4-module-icon{color:#ffd294!important}
html[data-theme="dark"] body .app-shell [data-panel="agent"] .gc-ae4-faqs .gc-ae4-module-icon{color:#ffa9cd!important}