/* ============================================================ 1. DESIGN TOKENS ============================================================ */ :root{ --yc-mint:#86E1D0; --yc-mint-300:#B5ECE1; --yc-mint-100:#E6F8F4; --yc-mint-50:#F3FCFA; --yc-teal:#3FA995; --yc-teal-700:#2A7A6D; --yc-teal-900:#134A42; --yc-gold:#DABC8E; --yc-gold-600:#B99560; --yc-gold-100:#F6EEE1; --yc-sand:#F3EDE6; --yc-ivory:#FBF9F6; --yc-white:#FFFFFF; --ink:#23302E; --ink-2:#4B5654; --muted:#7D8785; --line:#E7E2DB; --line-2:#EFEBE5; --danger:#C8564B; --warn:#C9973E; --ok:#3FA995; --font-ui:"Raleway",system-ui,-apple-system,"Segoe UI",sans-serif; --font-script:"Great Vibes","Brush Script MT",cursive; --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px; --sh-1:0 1px 2px rgba(35,48,46,.05),0 1px 1px rgba(35,48,46,.03); --sh-2:0 6px 24px -8px rgba(35,48,46,.14),0 2px 6px rgba(35,48,46,.05); --sh-3:0 30px 80px -24px rgba(19,74,66,.28),0 8px 24px -12px rgba(35,48,46,.12); --grad-mint:linear-gradient(135deg,#9BE8D9 0%,#7FD8C7 55%,#6CCDBB 100%); --grad-brand:linear-gradient(135deg,var(--yc-gold) 0%,var(--yc-mint) 100%); --sidebar-w:320px; --info-w:340px; --header-h:72px; --ease:cubic-bezier(.2,.8,.2,1); } /* ============================================================ THEME OVERRIDE MODE The shortcode is a full-screen app, not theme content. JS moves #ypwc-concierge-root to and adds .ypwc-fullscreen-mode so all WordPress theme chrome/content is removed from the rendered page. ============================================================ */ html.ypwc-fullscreen-mode, body.ypwc-fullscreen-mode{width:100%!important;height:100%!important;min-height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;background:var(--yc-ivory)!important} body.ypwc-fullscreen-mode > *:not(#ypwc-concierge-root){display:none!important;visibility:hidden!important;pointer-events:none!important} body.ypwc-fullscreen-mode #wpadminbar{display:none!important;visibility:hidden!important} #ypwc-concierge-root{all:initial!important;box-sizing:border-box!important;position:fixed!important;inset:0!important;z-index:2147483000!important;width:100vw!important;height:100vh!important;height:100dvh!important;min-height:100vh!important;margin:0!important;padding:0!important;overflow-x:hidden!important;overflow-y:auto!important;display:block!important;font-family:var(--font-ui)!important;color:var(--ink)!important;background:var(--yc-ivory)!important;font-size:15px!important;line-height:1.55!important;-webkit-font-smoothing:antialiased!important;font-variant-numeric:lining-nums!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important} #ypwc-concierge-root, #ypwc-concierge-root *{box-sizing:border-box} #ypwc-concierge-root *{font-family:inherit} #ypwc-concierge-root button,#ypwc-concierge-root input,#ypwc-concierge-root select,#ypwc-concierge-root textarea{font:inherit;color:inherit} button{cursor:pointer} a{color:var(--yc-teal-700)} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .icon{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} #ypwc-concierge-root .script{font-family:var(--font-script)!important;font-weight:400!important;color:var(--yc-teal);letter-spacing:0;text-transform:none} .eyebrow{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--yc-gold-600)} [hidden]{display:none!important} :focus-visible{outline:2px solid var(--yc-teal);outline-offset:2px;border-radius:6px} /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--r-pill); padding:12px 22px;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;transition:transform .2s var(--ease),box-shadow .2s,background .2s} .btn-primary{background:var(--grad-mint);color:var(--yc-teal-900);box-shadow:0 8px 20px -8px rgba(63,169,149,.6)} .btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(63,169,149,.7)} .btn-primary:disabled{opacity:.6;cursor:progress;transform:none} .btn-ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line)} .btn-ghost:hover{background:var(--yc-white);border-color:var(--yc-mint-300)} .btn-gold{background:var(--yc-gold-100);color:#7A5A2A;border:1px solid #EBDDC4} .icon-btn{width:40px;height:40px;display:inline-grid;place-items:center;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--ink-2);transition:.2s} .icon-btn:hover{background:var(--yc-mint-50);border-color:var(--yc-mint-100);color:var(--yc-teal-700)} /* Chips / badges */ .badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:600;letter-spacing:.04em;white-space:nowrap} .badge-open{background:var(--yc-mint-100);color:var(--yc-teal-700)} .badge-closed{background:#EEF0EF;color:#6A7371} .badge-handover{background:var(--yc-gold-100);color:#8A6630} .badge-intent{background:var(--yc-white);border:1px solid var(--line);color:var(--ink-2)} .dot{width:7px;height:7px;border-radius:50%;background:currentColor} /* ============================================================ 2. AUTH VIEW ============================================================ */ #view-auth{min-height:100vh;min-height:100dvh;display:grid;align-items:start;justify-items:center;padding:48px 16px;position:relative;overflow:visible; background: radial-gradient(900px 520px at 12% 8%,rgba(134,225,208,.28),transparent 60%), radial-gradient(700px 480px at 92% 90%,rgba(218,188,142,.26),transparent 60%), var(--yc-ivory)} #view-auth::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'%3E%3Cpath d='M0 48 28 0 56 48' fill='none' stroke='%23E4DCD0' stroke-width='.7'/%3E%3C/svg%3E"); -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)} .auth-shell{position:relative;width:100%;max-width:760px} .auth-brand{text-align:center;margin-bottom:22px} .auth-brand img{height:64px;width:auto} .auth-card{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.9);border-radius:var(--r-xl);box-shadow:var(--sh-3);padding:40px 44px 32px} .auth-head{text-align:center;margin-bottom:28px} .auth-head .script{font-size:44px;line-height:1;display:block;margin-bottom:-2px} .auth-head h1{margin:0;font-weight:300;font-size:26px;letter-spacing:.08em;text-transform:uppercase} .auth-head p{margin:12px auto 0;max-width:470px;color:var(--muted);font-size:14px} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px} .form-grid .full{grid-column:1/-1} .section-label{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin:10px 0 -2px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--yc-gold-600)} .section-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)} .section-label small{font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--muted);font-size:12px} .field{display:flex;flex-direction:column;gap:6px} .field label{font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:.02em} .field label .req{color:var(--yc-gold-600);margin-left:2px} .field label .opt{font-weight:500;color:var(--muted);margin-left:4px} .control{position:relative;display:flex;align-items:center} .control .icon{position:absolute;left:14px;color:#A4ACAA;pointer-events:none} .input,.select{width:100%;height:48px;border:1px solid var(--line);background:var(--yc-white);border-radius:var(--r-md); padding:0 14px 0 42px;font-size:14.5px;transition:border-color .2s,box-shadow .2s} .input::placeholder{color:#B3BAB8} .input:hover{border-color:#D9D3CB} .input:focus,.select:focus{outline:none;border-color:var(--yc-mint);box-shadow:0 0 0 4px rgba(134,225,208,.25)} .field.invalid .input{border-color:var(--danger);box-shadow:0 0 0 4px rgba(200,86,75,.1)} .field .err{font-size:12px;color:var(--danger);min-height:0} .phone-group{display:flex;gap:8px} .phone-group .select{width:118px;flex:none;padding-left:14px;appearance:none;-webkit-appearance:none; background:var(--yc-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%237D8785' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E") no-repeat right 12px center} .hint{font-size:12px;color:var(--muted)} .auth-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px;flex-wrap:wrap} .privacy{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--muted);max-width:380px} .privacy .icon{color:var(--yc-teal);width:16px;height:16px;margin-top:2px} .auth-meta{text-align:center;margin-top:18px;font-size:12px;color:var(--muted)} .auth-meta a{text-decoration:none;font-weight:600} .spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(19,74,66,.25);border-top-color:var(--yc-teal-900);animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* Verification overlay */ .verify{position:absolute;inset:0;border-radius:var(--r-xl);background:rgba(255,255,255,.94);display:grid;place-items:center;text-align:center;padding:32px;z-index:2;animation:fade .3s var(--ease)} .verify-ring{width:96px;height:96px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;position:relative} .verify-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--yc-mint-100);border-top-color:var(--yc-mint);border-right-color:var(--yc-gold);animation:spin 1.1s linear infinite} .verify-ring img{width:52px;height:52px;object-fit:contain} .verify.done .verify-ring::before{animation:none;border-color:var(--yc-mint)} .verify h3{margin:0 0 6px;font-weight:400;font-size:20px;letter-spacing:.04em} .verify ul{list-style:none;padding:0;margin:16px auto 0;text-align:left;display:inline-flex;flex-direction:column;gap:8px;font-size:13px;color:var(--ink-2)} .verify li{display:flex;gap:10px;align-items:center;opacity:.35;transition:opacity .3s} .verify li.on{opacity:1} .verify li .icon{color:var(--yc-teal);width:16px;height:16px} @keyframes fade{from{opacity:0}to{opacity:1}} /* flatpickr theme */ .flatpickr-calendar{font-family:var(--font-ui);border-radius:16px;box-shadow:var(--sh-3);border:1px solid var(--line-2)} .flatpickr-day.selected,.flatpickr-day.selected:hover{background:var(--yc-teal);border-color:var(--yc-teal)} .flatpickr-day.today{border-color:var(--yc-gold)} .flatpickr-day:hover{background:var(--yc-mint-100);border-color:var(--yc-mint-100)} .flatpickr-months .flatpickr-month,.flatpickr-current-month .flatpickr-monthDropdown-months{font-weight:600} span.flatpickr-weekday{color:var(--yc-gold-600);font-weight:600} /* ============================================================ 3. CHAT VIEW (MainContainer) ============================================================ */ #view-chat{height:100vh;height:100dvh;display:grid;grid-template-columns:var(--sidebar-w) 1fr var(--info-w);background:var(--yc-ivory);overflow:hidden} /* ---- A. Sidebar ---- */ .sidebar{display:flex;flex-direction:column;min-height:0;background:var(--yc-white);border-right:1px solid var(--line-2)} .sb-top{padding:20px 20px 14px;display:flex;flex-direction:column;gap:16px} .sb-brand{display:flex;align-items:center;justify-content:space-between} .sb-brand img{height:40px} .sb-new{width:100%} .search{position:relative} .search .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#A4ACAA;width:16px;height:16px} .search input{width:100%;height:40px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--yc-ivory);padding:0 14px 0 38px;font-size:13.5px} .search input:focus{outline:none;border-color:var(--yc-mint);background:var(--yc-white)} .tabs{display:flex;gap:4px;padding:4px;background:var(--yc-ivory);border-radius:var(--r-pill);border:1px solid var(--line-2)} .tab{flex:1;border:0;background:transparent;padding:7px 0;border-radius:var(--r-pill);font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.04em} .tab[aria-selected="true"]{background:var(--yc-white);color:var(--yc-teal-700);box-shadow:var(--sh-1)} .conv-list{flex:1;overflow-y:auto;padding:4px 12px 16px;scrollbar-width:thin} .conv-group{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#A7AFAD;padding:14px 10px 6px} .conv{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:start;width:100%;text-align:left;border:1px solid transparent;background:transparent;border-radius:var(--r-md);padding:11px 10px;transition:background .15s,border-color .15s;position:relative} .conv:hover{background:var(--yc-ivory)} .conv[aria-current="true"]{background:var(--yc-mint-50);border-color:var(--yc-mint-100)} .conv[aria-current="true"]::before{content:"";position:absolute;left:-12px;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--yc-mint)} .conv-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--yc-sand);color:var(--yc-gold-600)} .conv-ico.mint{background:var(--yc-mint-100);color:var(--yc-teal-700)} .conv-title{font-weight:600;font-size:13.5px;line-height:1.3;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .conv-prev{font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .conv-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:11px;color:#A0A8A6;white-space:nowrap} .conv-unread{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--yc-teal);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center} .conv-status{width:8px;height:8px;border-radius:50%} .conv-status.open{background:var(--yc-mint)} .conv-status.handover{background:var(--yc-gold)} .conv-status.closed{background:#D5DAD9} .sb-user{border-top:1px solid var(--line-2);padding:14px 16px;display:flex;align-items:center;gap:12px} .avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:14px;color:var(--yc-teal-900);background:var(--grad-brand);flex:none} .sb-user .who{flex:1;min-width:0} .sb-user .who b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sb-user .who span{font-size:12px;color:var(--muted)} /* ---- B. Chat pane ---- */ .chat{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative} .chat-header{height:var(--header-h);flex:none;display:flex;align-items:center;gap:14px;padding:0 24px;border-bottom:1px solid var(--line-2);background:rgba(251,249,246,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:3} .bot-avatar{width:44px;height:44px;border-radius:50%;background:var(--yc-white);border:1px solid var(--line);display:grid;place-items:center;position:relative;flex:none} .bot-avatar img{width:28px;height:28px;object-fit:contain} .bot-avatar .online{position:absolute;right:1px;bottom:1px;width:11px;height:11px;border-radius:50%;background:var(--yc-teal);border:2px solid var(--yc-white)} .ch-info{flex:1;min-width:0} .ch-title{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ch-sub{display:flex;align-items:center;gap:8px;margin-top:3px;flex-wrap:wrap;font-size:12px;color:var(--muted)} .ch-actions{display:flex;gap:6px;align-items:center} .only-mobile,.only-narrow{display:none!important} .message-list{flex:1;overflow-y:auto;padding:28px 24px 12px;scroll-behavior:smooth;scrollbar-width:thin} .thread{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:6px} .sep{display:flex;align-items:center;gap:14px;margin:18px 0 10px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#A7AFAD} .sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)} .event{align-self:center;display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);background:var(--yc-white);border:1px dashed var(--line);padding:5px 12px;border-radius:var(--r-pill);margin:6px 0} .event .icon{width:14px;height:14px;color:var(--yc-gold-600)} .msg{display:flex;gap:10px;align-items:flex-end;max-width:86%;animation:rise .35s var(--ease)} .msg + .msg.same{margin-top:-2px} .msg.assistant{align-self:flex-start} .msg.user{align-self:flex-end;flex-direction:row-reverse} .msg .m-av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--yc-white);border:1px solid var(--line)} .msg .m-av img{width:18px;height:18px;object-fit:contain} .msg.same .m-av{visibility:hidden} .msg.user .m-av{display:none} .bubble-wrap{display:flex;flex-direction:column;gap:6px;min-width:0} .msg.user .bubble-wrap{align-items:flex-end} .bubble{padding:12px 16px;border-radius:20px;font-size:14.5px;line-height:1.6;word-wrap:break-word;overflow-wrap:anywhere} .msg.assistant .bubble{background:var(--yc-white);border:1px solid var(--line-2);border-bottom-left-radius:6px;box-shadow:var(--sh-1)} .msg.user .bubble{background:var(--grad-mint);color:var(--yc-teal-900);border-bottom-right-radius:6px} .msg.staff .bubble{background:var(--yc-gold-100);border:1px solid #EBDDC4;border-bottom-left-radius:6px} .bubble p{margin:0}.bubble p+p{margin-top:8px} .bubble a{color:var(--yc-teal-700);font-weight:600;text-decoration:underline;text-underline-offset:2px;word-break:break-word} .bubble ul{margin:6px 0 0;padding-left:18px}.bubble li{margin:2px 0} .bubble strong{font-weight:600} .m-meta{font-size:11px;color:#A7AFAD;display:flex;gap:6px;align-items:center;padding:0 4px} .m-meta .icon{width:13px;height:13px;color:var(--yc-teal)} @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* Quick replies */ .chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px 40px} .chip{border:1px solid var(--yc-mint-300);background:var(--yc-white);color:var(--yc-teal-700);border-radius:var(--r-pill);padding:8px 14px;font-size:13px;font-weight:500;transition:.15s} .chip:hover{background:var(--yc-mint-50);border-color:var(--yc-mint)} /* Rich cards */ .card{background:var(--yc-white);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden;width:min(420px,100%)} .card-head{display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(90deg,var(--yc-mint-50),var(--yc-gold-100));border-bottom:1px solid var(--line-2)} .card-head .icon{color:var(--yc-teal-700)} .card-head b{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase} .card-head .badge{margin-left:auto} .card-#ypwc-concierge-root{padding:14px 16px;display:grid;gap:10px} .kv{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:13.5px} .kv .icon{width:16px;height:16px;color:var(--yc-gold-600);margin-top:2px} .kv small{display:block;color:var(--muted);font-size:11.5px} .card-actions{display:flex;gap:8px;padding:0 16px 16px;flex-wrap:wrap} .card-actions .btn{padding:9px 16px;font-size:11px} .slots{display:flex;flex-wrap:wrap;gap:8px} .slot{border:1px solid var(--line);border-radius:12px;padding:8px 12px;background:var(--yc-white);font-size:13px;text-align:left;line-height:1.3} .slot small{display:block;color:var(--muted);font-size:11px} .slot:hover,.slot.sel{border-color:var(--yc-mint);background:var(--yc-mint-50)} .service-img{height:110px;background: radial-gradient(120px 80px at 20% 30%,rgba(134,225,208,.55),transparent 70%), radial-gradient(140px 90px at 85% 70%,rgba(218,188,142,.55),transparent 70%),var(--yc-sand);display:grid;place-items:center} .service-img span{font-family:var(--font-script);font-size:34px;color:var(--yc-teal-700)} /* Typing indicator */ .typing{display:inline-flex;gap:4px;padding:14px 16px} .typing i{width:7px;height:7px;border-radius:50%;background:var(--yc-mint);animation:blink 1.2s infinite} .typing i:nth-child(2){animation-delay:.15s;background:#B4D9C9} .typing i:nth-child(3){animation-delay:.3s;background:var(--yc-gold)} @keyframes blink{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}} /* Empty state (new inquiry) */ .empty{max-width:640px;margin:6vh auto 0;text-align:center} .empty .script{font-size:48px;line-height:1} .empty h2{margin:0;font-weight:300;font-size:24px;letter-spacing:.08em;text-transform:uppercase} .empty p{color:var(--muted);margin:10px auto 26px;max-width:460px} .starter-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;text-align:left} .starter{text-align:left;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--yc-white);box-shadow:var(--sh-1);transition:.2s} .starter:hover{border-color:var(--yc-mint);transform:translateY(-2px);box-shadow:var(--sh-2)} .starter .conv-ico{width:36px;height:36px;border-radius:10px} .starter b{display:block;font-size:13.5px;font-weight:600} .starter span{font-size:12.5px;color:var(--muted)} /* ---- C. Composer (MessageInput) ---- */ .composer-wrap{flex:none;padding:10px 24px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(251,249,246,0),var(--yc-ivory) 30%)} .composer{max-width:780px;margin:0 auto;display:flex;align-items:flex-end;gap:8px;background:var(--yc-white);border:1px solid var(--line);border-radius:24px;padding:8px 8px 8px 10px;box-shadow:var(--sh-2);transition:border-color .2s,box-shadow .2s} .composer:focus-within{border-color:var(--yc-mint);box-shadow:0 0 0 4px rgba(134,225,208,.22),var(--sh-2)} .composer textarea{flex:1;border:0;resize:none;outline:none;background:transparent;max-height:160px;min-height:24px;padding:9px 4px;font-size:15px;line-height:1.5} .composer textarea::placeholder{color:#AEB6B4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .send{width:42px;height:42px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--grad-mint);color:var(--yc-teal-900);transition:.2s} .send:disabled{background:#EEF0EF;color:#B3BAB8;cursor:not-allowed} .send:not(:disabled):hover{transform:scale(1.05)} .composer-note{max-width:780px;margin:8px auto 0;text-align:center;font-size:11.5px;color:#A0A8A6} .closed-bar{max-width:780px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:var(--r-lg);background:var(--yc-white);border:1px solid var(--line);font-size:13px;color:var(--muted)} /* ---- D. Info panel ---- */ .info{background:var(--yc-white);border-left:1px solid var(--line-2);overflow-y:auto;min-height:0;scrollbar-width:thin} .info-head{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--line-2);position:sticky;top:0;background:var(--yc-white);z-index:2} .info-head .eyebrow{color:var(--ink-2)} .profile{padding:24px 20px 18px;text-align:center;background:linear-gradient(180deg,var(--yc-sand),var(--yc-white))} .profile .avatar{width:76px;height:76px;font-size:24px;margin:0 auto 12px;box-shadow:0 0 0 4px var(--yc-white),0 0 0 5px var(--yc-mint-300)} .profile h3{margin:0;font-size:18px;font-weight:600} .profile .verified{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;font-weight:600;color:var(--yc-teal-700);background:var(--yc-mint-100);padding:4px 10px;border-radius:var(--r-pill)} .profile .verified .icon{width:14px;height:14px} .profile .ids{display:flex;justify-content:center;gap:8px;margin-top:12px;flex-wrap:wrap} .panel{border-top:1px solid var(--line-2)} .panel summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)} .panel summary::-webkit-details-marker{display:none} .panel summary .icon{width:16px;height:16px;transition:transform .2s;color:var(--muted)} .panel[open] summary .icon{transform:rotate(180deg)} .panel-body{padding:0 20px 18px;display:grid;gap:12px} .row{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;font-size:13.5px} .row .icon{width:16px;height:16px;color:var(--yc-gold-600);margin-top:2px} .row small{display:block;font-size:11px;color:var(--muted);letter-spacing:.02em} .row .val{font-weight:500;word-break:break-word} .row .masked{font-variant-numeric:tabular-nums;letter-spacing:.04em} .appt{border:1px solid var(--line-2);border-radius:var(--r-md);padding:12px 14px;display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;background:var(--yc-ivory)} .appt .date{border-radius:12px;background:var(--yc-white);border:1px solid var(--line);text-align:center;padding:6px 0;line-height:1.1} .appt .date b{display:block;font-size:20px;font-weight:600;color:var(--yc-teal-700)} .appt .date span{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--yc-gold-600)} .appt .t{font-size:13.5px;font-weight:600} .appt .s{font-size:12px;color:var(--muted)} .captured{display:grid;gap:10px} .cap{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding-bottom:10px;border-bottom:1px dashed var(--line)} .cap:last-child{border-bottom:0;padding-bottom:0} .cap span{color:var(--muted)} .cap b{font-weight:600;text-align:right} .cap b.empty-v{color:#BFC5C3;font-weight:500} .cap.flash b{animation:flash 1.4s var(--ease)} @keyframes flash{0%{background:var(--yc-mint-100)}100%{background:transparent}} .summary{font-size:13px;color:var(--ink-2);background:var(--yc-mint-50);border:1px solid var(--yc-mint-100);border-radius:var(--r-md);padding:12px 14px;line-height:1.55} .summary .eyebrow{display:flex;align-items:center;gap:6px;margin-bottom:6px;color:var(--yc-teal-700)} .loyalty{border-radius:var(--r-lg);padding:16px;color:var(--yc-teal-900);position:relative;overflow:hidden; background:linear-gradient(135deg,#F1E3CB 0%,#DABC8E 45%,#B9E9DE 100%)} .loyalty .script{color:var(--yc-teal-900);font-size:28px;line-height:1} .loyalty .tier{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase} .loyalty .pts{font-size:22px;font-weight:600;margin-top:10px} .loyalty img{position:absolute;right:-14px;bottom:-18px;width:96px;opacity:.28} .contact-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px} .contact-actions .btn{padding:10px 12px;font-size:11px} .scrim{position:fixed;inset:0;background:rgba(19,40,37,.28);backdrop-filter:blur(2px);z-index:40;animation:fade .2s} /* ============================================================ 4. RESPONSIVE ============================================================ */ @media (max-width:1279px){ #view-chat{grid-template-columns:var(--sidebar-w) 1fr} .info{position:fixed;top:0;right:0;bottom:0;width:min(var(--info-w),92vw);z-index:50;transform:translateX(100%);transition:transform .3s var(--ease);box-shadow:var(--sh-3)} .info.open{transform:none} .only-narrow{display:inline-grid!important} } @media (max-width:859px){ #view-chat{grid-template-columns:1fr} .sidebar{position:fixed;top:0;left:0;bottom:0;width:min(var(--sidebar-w),88vw);z-index:50;transform:translateX(-100%);transition:transform .3s var(--ease);box-shadow:var(--sh-3)} .sidebar.open{transform:none} .only-mobile{display:inline-grid!important} .chat-header{padding:0 12px;gap:8px} .message-list{padding:20px 14px 8px} .composer-wrap{padding:8px 12px calc(12px + env(safe-area-inset-bottom))} .msg{max-width:94%} .ch-sub .hide-sm,.ch-sub .badge-intent{display:none} #handoverBtn{width:40px;height:40px;padding:0!important;border-radius:12px} #handoverBtn span{display:none} .ch-title{font-size:15px} .starter-grid{grid-template-columns:1fr} } @media (max-width:640px){ .auth-card{padding:28px 20px 24px;border-radius:22px} .form-grid{grid-template-columns:1fr} .auth-head .script{font-size:38px} .auth-head h1{font-size:21px} .auth-foot{flex-direction:column-reverse;align-items:stretch} .auth-foot .btn{width:100%} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}