/* CLS AI part designer (loaded only when the designer is turned on) */
.ai-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4,1rem);margin-top:var(--space-4,1rem);padding:var(--space-4,1rem) var(--space-5,1.25rem);border:1px solid var(--color-border,#d6d6d0);border-left:3px solid #fbc006;background:var(--color-surface-2,#ebebe7);border-radius:var(--radius-sm,2px)}
.ai-cta p{font-size:var(--text-sm,.95rem);color:var(--color-text-muted,#575a5c);margin:0}
.ai-cta p strong{color:var(--color-text,#171818)}
.ai-cta .btn{flex-shrink:0;min-height:44px}
dialog.ai-dialog{width:min(1080px,calc(100% - 24px));padding:0;max-height:94dvh;overflow:hidden}
dialog.ai-dialog[open]{display:flex;flex-direction:column}
.ai-dialog .modal-header{padding:var(--space-4,1rem) var(--space-6,1.5rem);border-bottom:1px solid var(--color-border,#d6d6d0);margin:0}
.ai-dialog .modal-header p{margin:0;font-size:var(--text-xs,.8rem)}
.ai-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:0;flex:1;overflow:hidden}
.ai-chat{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--color-border,#d6d6d0)}
.ai-log{flex:1;overflow-y:auto;padding:var(--space-5,1.25rem) var(--space-6,1.5rem);display:flex;flex-direction:column;gap:var(--space-3,.75rem);min-height:240px}
.ai-msg{max-width:88%;padding:var(--space-3,.75rem) var(--space-4,1rem);border-radius:10px;font-size:var(--text-sm,.95rem);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.ai-msg.bot{background:var(--color-surface-2,#ebebe7);color:var(--color-text,#171818);border-top-left-radius:2px;align-self:flex-start}
.ai-msg.user{background:#fbc006;color:#111;border-top-right-radius:2px;align-self:flex-end}
.ai-msg.err{background:transparent;border:1px solid #a75844;color:var(--color-text,#171818);align-self:flex-start}
.ai-msg.typing{color:var(--color-text-muted,#575a5c)}
.ai-msg.typing:after{content:'';display:inline-block;width:1.2em;text-align:left;animation:ai-dots 1.2s steps(4) infinite}
@keyframes ai-dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.ai-examples{display:flex;flex-wrap:wrap;gap:var(--space-2,.5rem);padding:0 var(--space-6,1.5rem) var(--space-3,.75rem)}
.ai-examples button{font-size:var(--text-xs,.8rem);text-align:left;border:1px solid var(--color-border,#d6d6d0);border-radius:16px;padding:6px 12px;min-height:36px;background:var(--color-surface,#fff);color:var(--color-text,#171818);cursor:pointer}
.ai-examples button:hover{border-color:#fbc006;color:var(--color-text,#171818)}
.ai-input{display:flex;gap:var(--space-3,.75rem);padding:var(--space-3,.75rem) var(--space-6,1.5rem);border-top:1px solid var(--color-border,#d6d6d0);align-items:flex-end}
.ai-input textarea{flex:1;min-height:48px;max-height:140px;resize:none;padding:var(--space-3,.75rem);border:1px solid var(--color-border,#d6d6d0);border-radius:var(--radius-sm,2px);background:var(--color-bg,#f5f5f2);color:var(--color-text,#171818);font:inherit;font-size:16px}
dialog.ai-dialog .ai-input .btn{margin-top:0;min-height:48px}
.ai-fine{padding:0 var(--space-6,1.5rem) var(--space-4,1rem);font-size:var(--text-xs,.78rem)!important;margin:0}
.ai-side{overflow-y:auto;padding:var(--space-5,1.25rem) var(--space-6,1.5rem);display:flex;flex-direction:column;gap:var(--space-4,1rem)}
.ai-empty{margin:auto;text-align:center;max-width:320px;color:var(--color-text-muted,#575a5c);font-size:var(--text-sm,.95rem)}
.ai-empty svg{display:block;margin:0 auto var(--space-4,1rem);opacity:.6}
.ai-svg{background:#15191b;border-radius:var(--radius-sm,2px);padding:8px}
.ai-svg svg{display:block;width:100%;height:auto;max-height:46dvh}
.ai-legend{display:flex;gap:var(--space-5,1.25rem);font-size:var(--text-xs,.78rem);color:var(--color-text-muted,#575a5c);flex-wrap:wrap}
.ai-legend i{display:inline-block;width:18px;height:0;border-top:2px solid #fbc006;vertical-align:middle;margin-right:6px}
.ai-legend i.bend{border-top:2px dashed #e5484d}
.ai-summary{list-style:none;padding:0;margin:0;font-size:var(--text-sm,.95rem);border-top:1px solid var(--color-border,#d6d6d0)}
.ai-summary li{padding:var(--space-2,.5rem) 0;border-bottom:1px solid var(--color-border,#d6d6d0)}
.ai-warn{font-size:var(--text-xs,.8rem)!important}
.ai-warn p{margin:0 0 .4em}
.ai-warn p:last-child{margin:0}
dialog.ai-dialog .ai-side .btn{margin-top:0;width:100%}
.ai-side .muted{font-size:var(--text-xs,.78rem);color:var(--color-text-muted,#575a5c);margin:0;text-align:center}
@media(max-width:820px){
  dialog.ai-dialog{width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0;margin:0;border:0}
  .ai-dialog .modal-header{padding:var(--space-3,.75rem) var(--space-4,1rem);flex-wrap:nowrap}
  .ai-dialog .modal-header p{display:none}
  .ai-dialog .modal-header>div:last-child{display:flex;align-items:center;gap:var(--space-2,.5rem);flex-shrink:0}
  .ai-body{display:flex;flex-direction:column;overflow-y:auto;flex:1;min-height:0}
  .ai-side{order:1;flex:none;overflow:visible;border-bottom:1px solid var(--color-border,#d6d6d0);padding:var(--space-4,1rem)}
  .ai-side.is-empty{display:none}
  .ai-chat{order:2;flex:1 0 auto;display:flex;border-right:0}
  .ai-log{flex:1 0 auto;overflow:visible;min-height:0;padding:var(--space-4,1rem)}
  .ai-examples{padding:0 var(--space-4,1rem) var(--space-3,.75rem)}
  .ai-input{position:sticky;bottom:0;z-index:2;background:var(--color-surface,#fff);padding:var(--space-3,.75rem) var(--space-4,1rem)}
  .ai-fine{padding:0 var(--space-4,1rem) var(--space-3,.75rem);background:var(--color-surface,#fff)}
  .ai-svg svg{max-height:38dvh}
  .ai-cta{flex-direction:column;align-items:stretch}
}

.ai-examples-label{width:100%;margin:0 0 2px;font-size:var(--text-xs,.8rem);color:var(--color-text-muted,#575a5c)}
.ai-examples button{border-style:dashed;background:transparent;color:var(--color-text-muted,#575a5c);min-height:32px}