/* =====================================================
MYBOOTH DRAWER — CHATGPT STYLE / LEGENDS THEME
===================================================== */

:root{
  --drawer-w: min(76vw, 350px);
  --footer-h: 64px;
}
*,
*::before,
*::after{
  box-sizing: border-box;
  min-width: 0;
}
/* drawer */

#leftZone{
  position: fixed;
  top: 0;
  left: 0;
  bottom: var(--footer-h);

  width: var(--drawer-w);

  background:
    linear-gradient(180deg, rgba(var(--bg-deep-rgb), .98), rgba(var(--bg-deep-rgb), .98)),
    var(--bg-main);

  z-index: 6000;

  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border-top-right-radius: 22px;
  border-bottom-right-radius: 22px;

  box-shadow:
    18px 0 40px rgba(0,0,0,.55),
    0 0 0 1px var(--border-subtle) inset;
}

#leftZone.open{
  transform: translateX(0);
}

/* overlay */

#leftOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
  z-index: 5500;
}

#leftOverlay.active{
  opacity: 1;
  pointer-events: auto;
}

/* center dim / blur while drawer open */

#track.left-open{
  filter: brightness(.82) blur(1px);
  transition:
    filter .24s ease,
    transform .28s cubic-bezier(.2,.8,.2,1);
}

/* drawer inner layout */

.drawer-main{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;

  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) calc(100% - 24px),
    rgba(0,0,0,.75) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) calc(100% - 24px),
    rgba(0,0,0,.75) 100%
  );
}

/* generic section */

.drawer-section{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border-subtle);
  border-radius: 22px;

  overflow: hidden; /* 🔑 fixes bleed */

  display: flex;
  flex-direction: column;
}

.drawer-section-title{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .95;
  margin-bottom: 12px;
}

/* all input focus rule */

input,
textarea,
select{
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

input:focus,
textarea:focus,
select:focus{
  outline: none;
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 1px var(--accent-35),
    0 0 0 4px var(--accent-08);
}

/* clients search row */

.drawer-search-row{
  display: grid;
  grid-template-columns: 1fr 52px;
  gap: 10px;
  margin-bottom: 10px;
}

.drawer-search{
  width: 100%;
  height: 52px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), .95), rgba(var(--bg-deep-rgb), .95));
  color: var(--text-main);
  padding: 0 16px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.drawer-search::placeholder{
  color: var(--text-tertiary);
}

.drawer-filter-btn{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), .98), rgba(var(--bg-deep-rgb), .98));
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 var(--border-subtle),
    0 8px 20px rgba(0,0,0,.24);
}

.drawer-filter-btn svg{
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* active filters row */

#drawerClientFilterPills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 0;
  margin-bottom: 10px;
}

.filter-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent-15);
  border: 1px solid var(--accent-15);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 700;
}

.filter-pill .pill-x{
  border: none;
  background: none;
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
  padding: 0;
}

/* recent clients list */

.drawer-clients-list{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 2px;
}

.drawer-clients-list::after{
  content: "";
  position: sticky;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  margin-top: -34px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--bg-deep-rgb), 0), rgba(var(--bg-deep-rgb), 1));
}

.client-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border-subtle);
}

.client-meta{
  min-width: 0;
}

.client-name{
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-sub{
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-actions{
  display: flex;
  gap: 6px;
}

.client-icon-btn{
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,.03);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 700;
}

/* AI dock between sections */

#drawerAiDock{
  display: flex;
  justify-content: center;
  padding: 2px 0 0;
}

#drawerAiDock .addeyus-pill,
#drawerAiDock .ai-pill{
  width: 100%;
  margin: 0;
}

/* services section */

.drawer-services-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.drawer-service-row{
  display: grid;
  grid-template-columns: minmax(0,1.2fr) 72px 78px 42px;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border-subtle);
}

.drawer-service-name,
.drawer-service-price,
.drawer-service-duration{
  min-width: 0;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text-main);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
}

.drawer-service-star{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.drawer-service-star.active{
  color: var(--accent);
  border-color: var(--accent-35);
  box-shadow: 0 0 0 1px var(--accent-15) inset;
}

/* bottom profile row */

#drawerProfileRow{
  flex-shrink: 0;
  height: 74px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  border: none;
  border-top: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), .98), rgba(var(--bg-deep-rgb), .98));
  color: var(--text-main);
}

.drawer-profile-avatar{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  object-fit: cover;
  flex-shrink: 0;
}

.drawer-profile-meta{
  min-width: 0;
}

.drawer-profile-name{
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-profile-type{
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-profile-icons{
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawer-stat{
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: var(--border-subtle);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 13px;
}

.drawer-stat-badge{
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg-main);
  font-size: 10px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px var(--accent-35);
}

/* old left zone shell no longer needed visually */

.zone.left{
  background: var(--bg-main);
}

/* keep nav visible */

#leftZone{
  bottom: var(--footer-h);
}

/* responsive */

@media (max-width: 540px){
  :root{
    --drawer-w: 82vw;
  }
}
/* =====================================================
SERVICE CAROUSEL (same system as service selector row)
===================================================== */

.service-carousel{

display:flex;
gap:10px;

overflow-x:auto;
overflow-y:hidden;

padding:2px 2px 6px;

scroll-snap-type:x mandatory;

-webkit-overflow-scrolling:touch;

}

/* hide scrollbar */

.service-carousel::-webkit-scrollbar{
display:none;
}

/* service card */

.service-card{

flex:0 0 140px;

display:flex;
flex-direction:column;
justify-content:space-between;

height:86px;

padding:10px;

border-radius:16px;

background:rgba(255,255,255,.03);

border:1px solid var(--border-subtle);

scroll-snap-align:start;

position:relative;

transition:.18s ease;

}

/* hover */

.service-card:hover{

background:var(--border-subtle);

}

/* name + price */

.service-card-top{

font-size:13px;
font-weight:700;

color:var(--text-main);

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

}

/* duration */

.service-card-duration{

font-size:12px;

color:var(--text-secondary);

}

/* star */

.service-card-star{

position:absolute;

right:10px;
bottom:8px;

font-size:16px;

color:var(--text-tertiary);

cursor:pointer;

}

/* active showcase */

.service-card-star.active{

color:var(--accent);

}
/* =====================================================
SERVICE INPUT ROW OVERRIDE
===================================================== */

.drawer-service-row{

display:grid;

grid-template-columns:
minmax(0,1fr)
72px
120px
46px;

gap:10px;

align-items:center;

padding:10px;

border-radius:16px;

background:rgba(255,255,255,.03);
border:1px solid var(--border-subtle);

}

/* name field */

.drawer-service-name{

width:100%;
min-width:0;

height:44px;

padding:0 14px;

border-radius:12px;

border:1px solid var(--border-soft);

background:var(--bg-elevated);

color:var(--text-main);

font-size:16px;
font-weight:600;

}

/* price */

.drawer-service-price{

width:100%;

height:44px;

text-align:center;

border-radius:12px;

border:1px solid var(--border-soft);

background:var(--bg-elevated);

color:var(--text-main);

font-size:16px;
font-weight:700;

}

/* duration button */



/* add button */

.drawer-service-add{

width:46px;
height:44px;

border-radius:12px;

border:1px solid var(--accent-35);

background:linear-gradient(
180deg,
var(--accent-35),
var(--accent-15)
);

color:var(--accent);

font-size:20px;
font-weight:700;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;

transition:.18s ease;

}

.drawer-service-add:active{

transform:scale(.92);

}

/* =====================================================
DURATION WHEEL PICKER
===================================================== */

.duration-wheel{

position:fixed;
left:0;
right:0;
bottom:0;

background:var(--bg-main);

border-top-left-radius:22px;
border-top-right-radius:22px;

padding:24px;

z-index:9000;

display:none;

}

.duration-wheel.open{

display:block;

}

/* wheel layout */

.duration-wheel-inner{

display:flex;
justify-content:center;
gap:40px;

}

/* column */

.wheel-column{

display:flex;
flex-direction:column;
align-items:center;

}

/* wheel */

.wheel{

height:160px;
width:80px;

overflow-y:auto;

scroll-snap-type:y mandatory;

}

.wheel::-webkit-scrollbar{

display:none;

}

/* item */

.wheel-item{

height:40px;

display:flex;
align-items:center;
justify-content:center;

font-size:18px;
font-weight:700;

color:var(--text-main);

scroll-snap-align:center;

}

/* selected indicator */

.wheel-indicator{

position:absolute;

left:50%;
transform:translateX(-50%);

width:160px;
height:40px;

border-top:1px solid var(--accent-35);
border-bottom:1px solid var(--accent-35);

pointer-events:none;

}

/* confirm button */

.duration-confirm{

margin-top:20px;

height:46px;

border-radius:12px;

border:none;

background:var(--accent);

color:var(--bg-main);

font-weight:700;

font-size:16px;

}


/* =====================================================
SERVICE ADDER ROW
===================================================== */

.drawer-service-row{

display:grid;

grid-template-columns:
minmax(0,1fr)
72px
58px
46px;

gap:12px;

align-items:center;

margin-bottom:16px;

padding:10px;

border-radius:16px;

background:rgba(255,255,255,.03);
border:1px solid var(--border-subtle);

}

/* inputs */

.drawer-service-name{

width:100%;
min-width:0;

height:44px;

padding:0 14px;

border-radius:12px;

border:1px solid var(--border-soft);

background:var(--bg-elevated);

color:var(--text-main);

font-size:16px;
font-weight:600;

}

.drawer-service-price{

height:44px;

text-align:center;

border-radius:12px;

border:1px solid var(--border-soft);

background:var(--bg-elevated);

color:var(--text-main);

font-size:15px;
font-weight:700;

}


/* =====================================================
ADD BUTTON
===================================================== */

.drawer-service-add{

width:46px;
height:44px;

border-radius:12px;

border:1px solid var(--accent-35);

background:linear-gradient(
180deg,
var(--accent-35),
var(--accent-15)
);

color:var(--accent);

font-size:20px;
font-weight:700;

display:flex;
align-items:center;
justify-content:center;

}

/* =====================================================
SERVICE CAROUSEL SPACING
===================================================== */

.service-carousel{

margin-top:8px;

padding-right:24px;

}

/* fade right edge */

.service-carousel::after{

content:"";

position:absolute;

right:0;
top:0;
bottom:0;

width:40px;

pointer-events:none;

background:linear-gradient(
to right,
rgba(0,0,0,0),
var(--bg-main)
);

}
.drawer-service-row{

display:grid;

grid-template-columns:
minmax(140px,1fr)   /* service name */
58px                /* price */
50px                /* duration */
46px;               /* add button */

gap:12px;

align-items:center;

margin-bottom:18px;

padding:12px;

border-radius:16px;

background:rgba(255,255,255,.03);
border:1px solid var(--border-subtle);

}
.drawer-service-price{

height:44px;

padding:0 6px;

text-align:center;

border-radius:12px;

border:1px solid var(--border-soft);

background:var(--bg-elevated);

color:var(--text-main);

font-size:15px;
font-weight:700;

}
.drawer-section > *:not(.drawer-header){
  padding-left: 14px;
  padding-right: 14px;
}
.drawer-section > *:first-child{
  padding-top: 14px;
}

.drawer-section > *:last-child{
  padding-bottom: 14px;
}
.drawer-section{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border-subtle);
  border-radius: 22px;

  overflow: hidden;

  display: flex;
  flex-direction: column;
}
/* =========================================
ACCORDION — TRUE COLLAPSE / NO PEEKING
========================================= */

.drawer-collapsible{
  border-radius: 22px;
  overflow: hidden;
}

.drawer-collapsible-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 14px;
}

.drawer-collapsible-content{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  padding: 0 14px;
  transition:
    max-height .28s ease,
    opacity .18s ease,
    padding-top .18s ease,
    padding-bottom .18s ease;
}

.drawer-collapsible-content > *{
  overflow: hidden;
}

.drawer-collapsible.open .drawer-collapsible-content{
  max-height: 1200px;
  opacity: 1;
  pointer-events: auto;
  padding-top: 0;
  padding-bottom: 14px;
}
/* =========================================
FINAL ACCORDION OVERRIDE (CLEAN + STABLE)
========================================= */

/* ===== HEADER (perfect centering) ===== */
.drawer-collapsible-header{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;

  height: 64px !important;         /* locks vertical center */
  padding: 0 16px !important;      /* removes vertical offset */

  box-sizing: border-box;
}

/* ensure children align */
.drawer-collapsible-header > *{
  display: flex;
  align-items: center;
}

/* ===== TEXT SCALE (your main request) ===== */
.drawer-collapsible-header span{
  font-size: 18px;                 /* LARGE when collapsed */
  font-weight: 600;
  letter-spacing: .04em;

  transition: all .22s ease;
}

/* shrink when open */
.drawer-collapsible.open .drawer-collapsible-header span{
  font-size: 15px;
  letter-spacing: .02em;
  opacity: .85;
}

/* ===== ARROW ===== */
.drawer-collapsible-header svg{
  transition: transform .25s ease;
  opacity: .7;
}

.drawer-collapsible.open .drawer-collapsible-header svg{
  transform: rotate(180deg);
  opacity: 1;
}

/* ===== COLLAPSE FIX (removes push + peeking) ===== */
.drawer-collapsible-content{
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;

  overflow: hidden !important;
  opacity: 0;
  pointer-events: none;

  transition: max-height .28s ease, opacity .18s ease;
}

/* open state */
.drawer-collapsible.open .drawer-collapsible-content{
  max-height: 1200px;
  opacity: 1;
  pointer-events: auto;

  padding: 0 16px 14px !important;
}

/* ===== REMOVE ANY INTERNAL GAP THAT PUSHES HEADER ===== */
.drawer-collapsible{
  overflow: hidden;
  gap: 0 !important;
}

/* ===== CLIENT SECTION (LOCKED OPEN) ===== */
#drawerClientsSection{
  pointer-events: auto;
}

/* make sure no collapse rules touch it */
#drawerClientsSection .drawer-collapsible-content{
  max-height: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  padding: 0 !important;
}
/* =========================================
CLIENT SECTION — FORCE ALWAYS OPEN (NO COLLAPSE)
========================================= */

#drawerClientsSection{
  overflow: visible !important;
}

/* if anything ever injects collapsible styles */
#drawerClientsSection .drawer-collapsible-content{
  height: auto !important;
  max-height: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: visible !important;
  display: block !important;
}

/* prevent any height animation from affecting it */
#drawerClientsSection *{
  transition: none !important;
}

/* ensure proper internal spacing */
#drawerClientsSection{
  padding: 14px !important;
}

/* keep client list scroll + fade working */
#drawerClientsSection .drawer-clients-list{
  max-height: 240px;
  overflow-y: auto;
}
/* =========================================
CLIENT SECTION — FORCE ALWAYS OPEN (NO COLLAPSE)
========================================= */

#drawerClientsSection{
  overflow: visible !important;
}

/* if anything ever injects collapsible styles */
#drawerClientsSection .drawer-collapsible-content{
  height: auto !important;
  max-height: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: visible !important;
  display: block !important;
}

/* prevent any height animation from affecting it */
#drawerClientsSection *{
  transition: none !important;
}

/* ensure proper internal spacing */
#drawerClientsSection{
  padding: 8px !important;
}

/* keep client list scroll + fade working */
#drawerClientsSection .drawer-clients-list{
  max-height: 240px;
  overflow-y: auto;
}