/* Duila AI Receptionist v31 — Mobile First */
*,*::before,*::after{box-sizing:border-box}
:root{--navy:#0A1628;--navy2:#111F3A;--gold:#C9A84C;--gold2:#E0C06A;--white:#fff;--bg:#F4F2EC;--text:#1A1A2E;--muted:#6B7280;--green:#34D399;--red:#e63946;--border:#D8D2C5}
body{padding-bottom:68px!important}

/* ── NAV ── */
#duila-nav{position:fixed!important;bottom:0!important;left:0!important;right:0!important;height:64px!important;background:var(--navy)!important;border-top:1.5px solid rgba(201,168,76,.3)!important;display:flex!important;align-items:center!important;justify-content:space-around!important;z-index:9000!important;box-shadow:0 -4px 20px rgba(0,0,0,.4)!important;margin:0!important;padding:0!important}
.dnb{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;flex:1!important;text-decoration:none!important;color:rgba(255,255,255,.4)!important;background:none!important;border:none!important;cursor:pointer!important;padding:4px 2px!important;font-family:inherit!important;font-size:10px!important;-webkit-tap-highlight-color:transparent!important;min-height:48px!important}
.dnb svg{width:22px;height:22px;display:block}
.dnb:hover,.dnb:active{color:var(--gold)!important}
.dnb-duila{flex:1.4!important}
.d-wrap{position:relative;width:50px;height:50px;display:flex;align-items:center;justify-content:center}
.d-face{width:44px!important;height:44px!important;border-radius:50%!important;object-fit:cover!important;object-position:center top!important;border:2.5px solid var(--gold)!important;position:relative;z-index:2;display:block!important}
.d-lbl{color:var(--gold)!important;font-weight:600!important;font-size:10px!important}
.d-ring{position:absolute;top:50%;left:50%;width:50px;height:50px;border-radius:50%;border:2px solid var(--gold);transform:translate(-50%,-50%);animation:d-rip 2s ease-out infinite;opacity:0;z-index:1}
.d-ring2{animation-delay:1s}
@keyframes d-rip{0%{transform:translate(-50%,-50%) scale(.9);opacity:.7}100%{transform:translate(-50%,-50%) scale(2);opacity:0}}

/* ── OVERLAY ── */
#duila-ov{position:fixed!important;inset:0!important;background:rgba(0,0,0,.55)!important;z-index:9100!important;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}

/* ── PANEL ── */
#duila-panel{position:fixed!important;bottom:64px!important;left:0!important;right:0!important;z-index:9200!important;background:var(--bg)!important;border-radius:16px 16px 0 0!important;box-shadow:0 -8px 40px rgba(0,0,0,.4)!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;display:flex!important;flex-direction:column!important;max-height:calc(100dvh - 68px)!important;overflow:hidden!important;animation:d-up .28s ease}
@keyframes d-up{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(min-width:600px){#duila-panel{left:50%!important;right:auto!important;width:440px!important;transform:translateX(-50%)!important}}

/* ── HEADER ── */
#d-head{display:flex!important;align-items:center!important;justify-content:space-between!important;background:var(--navy)!important;padding:10px 14px!important;border-bottom:2px solid rgba(201,168,76,.4)!important;flex-shrink:0!important;min-height:56px!important}
.d-head-l{display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important;flex:1!important}
.d-head-av{width:36px!important;height:36px!important;border-radius:50%!important;object-fit:cover!important;object-position:center top!important;border:2px solid var(--gold)!important;flex-shrink:0!important;display:block!important}
#d-hname{font-size:13px!important;font-weight:700!important;color:var(--gold)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55vw}
#d-hrole{font-size:10px!important;color:rgba(255,255,255,.45)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55vw}
.d-head-r{display:flex!important;align-items:center!important;gap:8px!important;flex-shrink:0!important}
#d-end{width:34px!important;height:34px!important;border-radius:50%!important;background:var(--red)!important;border:none!important;cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#fff!important;-webkit-tap-highlight-color:transparent!important}
#d-close{background:none!important;border:none!important;color:rgba(255,255,255,.5)!important;font-size:30px!important;line-height:1!important;cursor:pointer!important;padding:0 4px!important;-webkit-tap-highlight-color:transparent!important}
#d-close:active{color:var(--gold)!important}

/* ── CHAT MESSAGES ── */
#d-msgs{flex:1!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;padding:12px!important;display:flex!important;flex-direction:column!important;gap:8px!important;background:var(--bg)!important;min-height:80px!important}
#d-msgs::-webkit-scrollbar{width:3px}
#d-msgs::-webkit-scrollbar-thumb{background:rgba(201,168,76,.3);border-radius:3px}
.d-msg{max-width:84%;padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.45;word-break:break-word;animation:d-fade .25s ease}
@keyframes d-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.d-msg-user{align-self:flex-end;background:var(--navy);color:var(--gold);border-radius:16px 16px 4px 16px}
.d-msg-duila{align-self:flex-start;background:var(--white);color:var(--text);border:1px solid #e5e0d5;border-radius:16px 16px 16px 4px}

/* ── ORB ── */
#d-orb-area{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;padding:10px 8px 8px!important;gap:5px!important;background:var(--bg)!important;flex-shrink:0!important;min-height:80px!important}
#d-orb{position:relative;width:56px;height:56px;display:flex;align-items:center;justify-content:center}
#d-oc{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#E0C06A,#7A5A1A);border:2px solid var(--gold);box-shadow:0 3px 14px rgba(201,168,76,.4);position:relative;z-index:2}
.d-ring-a{position:absolute;border-radius:50%;border:2px solid rgba(201,168,76,.3);width:52px;height:52px;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0}
.d-ring-b{width:64px;height:64px;border-color:rgba(201,168,76,.15)}
.d-idle .d-ring-a,.d-idle .d-ring-b{opacity:.5}
.d-listening .d-ring-a{opacity:1;animation:d-pulse 1.1s ease-out infinite}
.d-listening .d-ring-b{opacity:1;animation:d-pulse 1.1s ease-out .4s infinite}
.d-listening #d-oc{border-color:var(--green)!important;box-shadow:0 0 0 4px rgba(52,211,153,.2)!important}
.d-thinking .d-ring-a{opacity:1;animation:d-spin 1.8s linear infinite}
.d-thinking .d-ring-b{opacity:1;animation:d-spin 2.5s linear infinite reverse}
.d-speaking .d-ring-a{opacity:1;animation:d-breathe .85s ease-in-out infinite}
.d-speaking .d-ring-b{opacity:1;animation:d-breathe .85s ease-in-out .3s infinite}
@keyframes d-pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.7}100%{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
@keyframes d-spin{from{transform:translate(-50%,-50%) rotate(0);opacity:.5}to{transform:translate(-50%,-50%) rotate(360deg);opacity:.5}}
@keyframes d-breathe{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.35);opacity:.85}}
#d-lbl{font-size:11px!important;color:var(--muted)!important;text-align:center!important;font-style:italic!important}

/* ── INPUT AREA ── */
#d-input-area{background:var(--white)!important;border-top:1px solid #e5e0d5!important;padding:8px 12px 12px!important;display:flex!important;flex-direction:column!important;gap:8px!important;flex-shrink:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}
#d-lis{display:flex!important;align-items:center!important;gap:7px!important;font-size:12px!important;font-weight:600!important;color:var(--gold)!important}
.d-dot{width:8px!important;height:8px!important;border-radius:50%!important;background:var(--gold)!important;flex-shrink:0!important;animation:d-dp 1s ease-in-out infinite!important}
@keyframes d-dp{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}
.d-ctrl-row{display:flex!important;align-items:center!important;gap:8px!important}
.d-vtoggle{display:flex!important;align-items:center!important;gap:6px!important;cursor:pointer!important;user-select:none!important;-webkit-tap-highlight-color:transparent!important}
.d-vtoggle input{display:none!important}
.d-track{width:34px!important;height:20px!important;background:var(--gold)!important;border-radius:10px!important;position:relative!important;transition:background .2s!important;flex-shrink:0!important}
.d-thumb{position:absolute!important;top:3px!important;left:3px!important;width:14px!important;height:14px!important;background:#fff!important;border-radius:50%!important;transition:transform .2s!important;box-shadow:0 1px 3px rgba(0,0,0,.25)!important;transform:translateX(14px)!important}
.d-vtoggle input:not(:checked)+.d-track{background:#ccc!important}
.d-vtoggle input:not(:checked)+.d-track .d-thumb{transform:translateX(0)!important}
.d-vlbl{font-size:12px!important;color:var(--muted)!important}
.d-typing{display:inline-flex!important;align-items:center!important;gap:3px!important}
.d-typing span{width:5px!important;height:5px!important;border-radius:50%!important;background:var(--gold)!important;animation:d-bn 1.2s ease-in-out infinite!important}
.d-typing span:nth-child(2){animation-delay:.2s!important}
.d-typing span:nth-child(3){animation-delay:.4s!important}
@keyframes d-bn{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}
.d-uplbl{width:32px!important;height:32px!important;border-radius:50%!important;border:1.5px solid var(--border)!important;background:var(--bg)!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;color:var(--navy2)!important;margin-left:auto!important;flex-shrink:0!important;-webkit-tap-highlight-color:transparent!important}

/* ── CONTACT FORM ── */
.d-form{display:flex!important;flex-direction:column!important;gap:7px!important;padding:8px 0 4px!important;border-top:2px solid rgba(201,168,76,.3)!important;width:100%!important}
.d-form-title{font-size:11px!important;font-weight:700!important;color:var(--gold)!important;text-transform:uppercase!important;letter-spacing:.06em!important;display:block!important}
.d-fi{display:block!important;width:100%!important;height:44px!important;border:2px solid var(--gold)!important;border-radius:10px!important;padding:0 14px!important;font-size:14px!important;font-family:inherit!important;color:var(--text)!important;background:var(--white)!important;outline:none!important;-webkit-appearance:none!important;appearance:none!important;box-sizing:border-box!important;margin:0!important}
.d-fi:focus{border-color:var(--gold2)!important}
.d-fi::placeholder{color:#aaa!important;font-size:13px!important}
.d-save-btn{display:block!important;width:100%!important;height:44px!important;background:var(--navy)!important;color:var(--gold)!important;border:none!important;border-radius:10px!important;font-size:14px!important;font-weight:700!important;cursor:pointer!important;font-family:inherit!important;-webkit-tap-highlight-color:transparent!important;margin:0!important}
.d-save-btn:active{background:var(--navy2)!important}
.d-save-btn:disabled{background:var(--green)!important;color:#fff!important}

/* ── CHAT ROW ── */
.d-chat-row{display:flex!important;align-items:flex-end!important;gap:7px!important;width:100%!important}
.d-textarea{flex:1!important;min-width:0!important;border:1.5px solid var(--border)!important;border-radius:10px!important;padding:10px 12px!important;font-size:14px!important;font-family:inherit!important;color:var(--text)!important;resize:none!important;outline:none!important;max-height:80px!important;overflow-y:auto!important;background:var(--bg)!important;line-height:1.4!important;-webkit-appearance:none!important;appearance:none!important;box-sizing:border-box!important}
.d-textarea:focus{border-color:var(--gold)!important;background:var(--white)!important}
.d-textarea::placeholder{color:#bbb!important}
.d-send-btn,.d-mic-btn{width:42px!important;height:42px!important;border-radius:50%!important;border:none!important;cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important;-webkit-tap-highlight-color:transparent!important}
.d-send-btn{background:var(--navy)!important;color:var(--gold)!important}
.d-send-btn:active{opacity:.8!important}
.d-mic-btn{background:var(--bg)!important;color:var(--navy2)!important;border:1.5px solid var(--border)!important}
.d-mic-btn.d-mic-active{background:#ef4444!important;color:#fff!important;border-color:#ef4444!important;animation:d-mic-pulse 1.2s ease-in-out infinite!important;box-shadow:0 0 0 0 rgba(239,68,68,.5)!important}
.d-mic-btn.d-mic-error{background:#f97316!important;color:#fff!important;border-color:#f97316!important}
@keyframes d-mic-pulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}70%{box-shadow:0 0 0 10px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
.d-mic-on{background:var(--gold)!important;color:var(--navy)!important;border-color:var(--gold)!important;animation:d-glow 1.2s ease-in-out infinite!important}
@keyframes d-glow{0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,.5)}50%{box-shadow:0 0 0 8px rgba(201,168,76,0)}}
@media(prefers-reduced-motion:reduce){.d-ring,.d-ring-a,.d-ring-b,.d-typing span,.d-dot,.d-mic-on{animation:none!important}}