/* === Pianista Maestro Layer v1.4.3 === */
/* WhatsApp-like grouping (avatar only on first of a sequence). Quick replies on user side. Square-only UI. */

:root{
  --pml-primary:#cb1516;
  --pml-border:#e5e5e5;
  --pml-gray:#f4f4f4;
  --pml-z: 999980; /* below cookie layers */
}

#maestro-launcher{
  position:fixed; bottom:24px; right:24px;
  background:var(--pml-primary); color:#fff;
  padding:12px 18px;
  font-weight:600;
  cursor:pointer;
  z-index:var(--pml-z);
  user-select:none;
}

#maestro-panel{
  position:fixed; bottom:80px; right:24px;
  width:420px; max-height:72vh;
  background:#fff; color:#111;
  border:1px solid var(--pml-border);
  box-shadow:0 20px 60px rgba(0,0,0,.2);
  z-index:var(--pml-z);

  display:none;
  flex-direction:column;
  overflow:hidden;
  -webkit-text-size-adjust:100%;
}
#maestro-panel.open{ display:flex; }

#maestro-header{
  display:flex; gap:10px;
  padding:14px;
  border-bottom:1px solid var(--pml-border);
  background:#fff;
  flex:0 0 auto;
  position:relative;
}

#maestro-avatar{
  width:36px; height:36px;
  background:var(--pml-primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  flex:0 0 auto;
}

#maestro-header h4{margin:0; font-size:14px; line-height:1.1;}
#maestro-header span{display:block; margin-top:3px; font-size:12px; color:#666;}

/* Menu */
#maestro-menu{ flex:0 0 auto; border-bottom:1px solid var(--pml-border); background:#fff; }
#maestro-menu-top{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:#fff; }
#maestro-menu-top b{ font-size:12px; letter-spacing:.02em; text-transform:uppercase; color:#666; }

.maestro-menu-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

.maestro-topbtn{
  /* Force plugin styling (avoid theme button styles) */
  appearance:none !important;
  -webkit-appearance:none !important;
  border:1px solid #ddd !important;
  background:#fff !important;
  padding:6px 10px !important;
  cursor:pointer !important;
  font-weight:600 !important;
  font-size:12px !important;
  line-height:1 !important;
  color:#111 !important;
  border-radius:0 !important;
  font-family:inherit !important;
  height:32px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.maestro-topbtn:hover{ background:#f7f7f7; }

.maestro-topbtn:focus,
.maestro-topbtn:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 2px rgba(203,21,22,.18) !important;
}

.maestro-topbtn--primary{
  border-color: rgba(203, 21, 22, .75) !important;
  color:#cb1516 !important;
}
.maestro-topbtn--primary:hover{
  background:rgba(203,21,22,.06) !important;
}

/* When menu is collapsed, hide the extra action buttons so "Recolher/Expandir" doesn't look lost */
#maestro-menu.collapsed #maestro-reset,
#maestro-menu.collapsed #maestro-human{
  display:none !important;
}
#maestro-toggle{
  appearance:none !important;
  -webkit-appearance:none !important;
  border:1px solid #ddd !important;
  background:#fff !important;
  padding:6px 10px !important;
  cursor:pointer !important;
  font-weight:600 !important;
  font-size:12px !important;
  line-height:1 !important;
  color:#111 !important;
  border-radius:0 !important;
  font-family:inherit !important;
  height:32px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#maestro-toggle:focus,
#maestro-toggle:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 2px rgba(203,21,22,.18) !important;
}
#maestro-menu-list{ padding:12px 14px 14px; background:#fff; }
#maestro-menu.collapsed #maestro-menu-list{ display:none; }

.maestro-card{
  border:1px solid #ddd;
  padding:10px 12px;
  margin-bottom:8px;
  cursor:pointer;
  font-size:13px;
  background:#fff;
}
.maestro-card:hover{ background:#f7f7f7; }

/* Chat */
#maestro-chat{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
#maestro-log{ flex:1 1 auto; min-height:0; overflow:auto; padding:12px; background:#fff; }

.msg{
  display:flex;
  gap:8px;
  margin-bottom:10px;
  max-width:100%;
}
.msg.grouped{ margin-top:-6px; } /* tight grouping */
.msg.ai{ align-items:flex-start; justify-content:flex-start; }
.msg.user{ justify-content:flex-end; }

.msg .avatar{
  width:28px; height:28px;
  background:var(--pml-primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
  flex:0 0 auto;
}
/* WhatsApp feel: keep alignment even when avatar is visually hidden */
.msg.no-avatar .avatar{ visibility:hidden; } /* preserves left gutter */

.msg .bubble{
  border:1px solid #e0e0e0;
  background:var(--pml-gray);
  padding:10px 12px;
  max-width:calc(100% - 36px);
  word-break:break-word;
}
/* When avatar is omitted in grouped AI lines, keep the same left alignment */
.msg.ai.grouped.no-avatar .bubble{ margin-left:36px; }
.msg.user .bubble{
  background:var(--pml-primary); color:#fff;
  border-color:var(--pml-primary);
  max-width:85%;
}

/* Typing indicator smaller (3 squares) */
.typing{ display:flex; align-items:center; gap:4px; }
.typing .sq{
  width:5px; height:5px;
  background:#bdbdbd;
  display:inline-block;
  animation:pml-bounce 1s infinite;
}
.typing .sq:nth-child(2){ animation-delay:.12s; }
.typing .sq:nth-child(3){ animation-delay:.24s; }
@keyframes pml-bounce{
  0%,100%{ transform:translateY(0); opacity:.55; }
  50%{ transform:translateY(-2px); opacity:1; }
}

/* Quick replies bar (user side) */
#pml-qrbar{
  border-top:1px solid var(--pml-border);
  background:#fff;
  padding:12px 14px;
  display:none;
  justify-content:flex-end;
  gap:14px;
  flex-wrap:wrap;
}
#pml-qrbar.show{ display:flex; }

.pml-qrbtn{
  /* Force plugin styling (avoid theme button styles) */
  appearance:none !important;
  -webkit-appearance:none !important;
  border-radius:0 !important;
  border:1px solid var(--pml-primary) !important;
  background:#fff !important;
  color:var(--pml-primary) !important;
  padding:10px 14px !important;
  cursor:pointer !important;
  font-weight:500 !important; /* less CTA */
  font-size:12px !important;
  line-height:1.2 !important;
  font-family:inherit !important;
}
.pml-qrbtn:hover{ background:#f7f7f7; }

/* Ensure theme styles never override quick replies (extra specificity) */
#maestro-panel .pml-qrbtn{
  appearance:none !important;
  -webkit-appearance:none !important;
  border-radius:0 !important;
  border:1px solid var(--pml-primary) !important;
  background:#fff !important;
  color:var(--pml-primary) !important;
  padding:6px 10px !important;
  cursor:pointer !important;
  font-weight:500 !important;
  font-size:11px !important;
  line-height:1.2 !important;
  font-family:inherit !important;
}

/* Mobile-only close button (added via JS) */
#maestro-mobile-close{ display:none; }

/* Input */
#maestro-input{
  border-top:1px solid var(--pml-border);
  padding:10px;
  display:flex;
  gap:8px;
  background:#fff;
  flex:0 0 auto;
}
#maestro-input input{
  flex:1;
  padding:10px;
  border:1px solid #ddd;
  outline:none;
}
#maestro-input button{
  background:var(--pml-primary);
  color:#fff;
  border:0;
  padding:10px 14px;
  font-weight:600;
  cursor:pointer;
}

/* Mobile */
@media(max-width:520px){
  /* Mobile: fullscreen app-like (fixes keyboard + layout issues) */
  #maestro-panel{
    width:100vw;
    left:0; right:0;
    bottom:0;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
  }

  #maestro-header{ padding:10px 12px; }
  #maestro-header h4{ font-size:14px; }
  #maestro-header span{ font-size:12px; }

  /* show close button on mobile */
  #maestro-mobile-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    background:var(--pml-primary);
    color:#fff;
    padding:6px 10px;
    font-weight:700;
    font-size:12px;
    cursor:pointer;
    position:absolute;
    right:12px;
    top:10px;
    border-radius:0;
  }

  #maestro-log{ padding:10px 12px; }

  .msg{ margin-bottom:8px; }
  .msg .bubble{
    font-size:14px;
    line-height:1.35;
    max-width:calc(100% - 40px);
  }

  #pml-qrbar{ padding:8px 10px; gap:8px; }
  #maestro-panel .pml-qrbtn{ font-size:12px !important; padding:8px 10px !important; }

  #maestro-input{ padding:10px 10px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
  /* iOS: prevent zoom on focus by keeping font-size >= 16px */
  #maestro-input input{ padding:10px; font-size:16px; }
  #maestro-input button{ padding:10px 12px; font-size:16px; }

  #maestro-launcher{ right:14px; bottom:18px; }
}