/* ─── OWNER CARD ─── */
#owner-card {
  position: fixed;
  right: 24px; bottom: 100px;
  z-index: 500;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(61,43,31,.15),
              0 4px 20px rgba(201,168,76,.2);
  padding: 16px 18px;
  width: 230px;
  border: 1px solid rgba(201,168,76,.2);
  transform: translateX(280px);
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
#owner-card.show { transform: translateX(0); }

.oc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.oc-avatar-wrap { position: relative; }
.oc-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 18px; font-weight: 700;
  color: var(--walnut);
  flex-shrink: 0;
  border: 2px solid var(--gold-pale);
}
.oc-online {
  width: 10px; height: 10px;
  background: #22C55E;
  border-radius: 50%;
  border: 2px solid white;
  position: absolute;
  bottom: 0; right: 0;
}
.oc-name  { font-size: 14px; font-weight: 600; color: var(--walnut); }
.oc-role  { font-size: 11px; color: var(--sand); }

.oc-actions { display: flex; flex-direction: column; gap: 8px; }
.oc-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all .3s;
  border: none;
  cursor: pointer;
  width: 100%;
  font-family: 'Outfit', sans-serif;
}
.oc-call { background: linear-gradient(135deg, #22C55E, #16A34A); color: white; }
.oc-call:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(34,197,94,.3);
}
.oc-wa { background: linear-gradient(135deg, #25D366, #128C7E); color: white; }
.oc-wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,211,102,.3);
}
.oc-msg { background: var(--cream); color: var(--walnut); border: 1px solid var(--warm); }
.oc-msg:hover { background: var(--gold-pale); border-color: var(--gold); }

/* Toggle Button */
.oc-toggle {
  position: fixed;
  right: 24px; bottom: 40px;
  z-index: 501;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(201,168,76,.4);
  font-size: 22px;
  transition: transform .3s;
  animation: pulse-btn 2.5s ease infinite;
}
.oc-toggle:hover { transform: scale(1.1); }

@keyframes pulse-btn {
  0%, 100% { box-shadow: 0 8px 32px rgba(201,168,76,.4); }
  50%       { box-shadow: 0 8px 48px rgba(201,168,76,.7),
                          0 0 0 12px rgba(201,168,76,.1); }
}

/* ─── FLOATING CTA BAR ─── */
#float-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 400;
  background: rgba(61,43,31,.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(201,168,76,.2);
  padding: 14px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateY(100%);
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  gap: 20px;
  flex-wrap: wrap;
}
#float-cta.show { transform: translateY(0); }

.fcta-left { display: flex; align-items: center; gap: 16px; }
.fcta-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 18px; font-weight: 700;
  color: var(--walnut);
}
.fcta-name { font-size: 14px; font-weight: 600; color: var(--ivory); }
.fcta-sub  { font-size: 11px; color: rgba(250,247,242,.5); }

.fcta-right { display: flex; gap: 10px; }
.fcta-btn {
  padding: 11px 22px;
  border-radius: 40px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all .3s;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Outfit', sans-serif;
}
.fcta-call { background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: var(--walnut); }
.fcta-call:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,168,76,.4); }
.fcta-wa   { background: #25D366; color: white; }
.fcta-wa:hover { background: #22C55E; }
.fcta-close { background: rgba(250,247,242,.1); color: var(--ivory); font-size: 18px; padding: 10px 14px; }
