.support-page{margin:0;background:#fff5f8;color:#503547;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;font-size:14px}.support-shell,.support-admin{--support-pink:#e95894;--support-ink:#503547;--support-muted:#886c80;--support-line:#f1dde6;--support-soft:#fff5f8;--support-white:#fff;box-sizing:border-box;color:var(--support-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif}.support-shell *,.support-admin *{box-sizing:border-box}.support-shell{max-width:650px;min-height:100dvh;margin:0 auto;background:#fff;box-shadow:0 0 70px #ac457411;position:relative;padding-bottom:max(12px,env(safe-area-inset-bottom))}.support-header{display:flex;align-items:center;gap:12px;padding:24px 22px 20px;border-bottom:1px solid var(--support-line);background:linear-gradient(120deg,#fff9fb,#ffedf4)}.support-back{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--support-line);border-radius:12px;color:var(--support-ink);flex-shrink:0}.support-heading{min-width:0;flex:1}.support-eyebrow{font-size:10px;letter-spacing:1.8px;color:var(--support-pink);font-weight:800}.support-heading h1{font-size:20px;line-height:1.3;margin:4px 0 0;letter-spacing:-.3px}.support-language{font:inherit;font-size:12px;color:var(--support-muted);border:1px solid var(--support-line);background:#fff;border-radius:9px;max-width:109px;padding:7px}.support-intro{display:flex;gap:13px;margin:21px 22px 17px}.support-intro-icon{flex:0 0 44px;height:44px;display:grid;place-items:center;border-radius:14px;color:var(--support-pink);background:#ffedf4}.support-intro h2{font-size:16px;margin:1px 0 7px}.support-intro p{margin:0;font-size:13px;line-height:1.7;color:var(--support-muted)}.support-steps{list-style:none;margin:0 22px 20px;padding:13px 8px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--support-line);border-radius:13px;background:#fffafd;gap:3px}.support-steps li{text-align:center;font-size:10px;line-height:1.4;color:var(--support-muted)}.support-steps b{display:grid;place-items:center;width:22px;height:22px;margin:0 auto 7px;border-radius:50%;background:#fbdce9;color:#b74074;font-size:11px}.support-profile-panel{margin:0 22px 15px;background:#fff;border:1px solid var(--support-line);border-radius:12px;overflow:hidden}.support-profile-panel summary{padding:13px 14px;cursor:pointer;font-weight:600;font-size:12px}.support-profile-summary{font-size:11px;font-weight:400;display:block;color:var(--support-muted);margin:5px 0 0 14px;overflow-wrap:anywhere}.support-profile-summary:empty{display:none}.support-profile-form{display:grid;gap:11px;padding:0 14px 11px}.support-profile-form label{display:grid;gap:6px;font-size:12px;color:var(--support-muted)}.support-profile-form input,.support-search{font:inherit;min-width:0;outline:none;border:1px solid var(--support-line);border-radius:9px;padding:10px 11px;color:var(--support-ink);background:#fff}.support-profile-form input:focus,.support-search:focus{border-color:var(--support-pink);box-shadow:0 0 0 3px #ed79a71a}.support-profile-form button{justify-self:start}.support-profile-note{font-size:11px;color:var(--support-muted);line-height:1.6;margin:0 14px 13px}.support-button{font:inherit;border:0;cursor:pointer;border-radius:11px;background:var(--support-pink);color:#fff;font-weight:650;padding:11px 16px;line-height:1.4;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.support-button-small{font-size:12px;padding:8px 12px;border-radius:8px}.support-button:disabled,.support-attach:disabled{opacity:.45;cursor:not-allowed}.support-button:hover:not(:disabled){background:#da4283}.support-chat{position:relative;border-top:1px solid var(--support-line)}.support-chat-top{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:12px 22px;font-size:11px;border-bottom:1px solid var(--support-line)}.support-connection{display:inline-flex;align-items:center;gap:6px;color:var(--support-muted);min-width:0;line-height:1.5}.support-connection:before{content:"";flex:0 0 6px;height:6px;background:#c5b6bf;border-radius:50%}.support-connection[data-state="ready"]:before{background:#63ad89}.support-connection[data-state="error"]:before{background:#e4a255}.support-reference{font-size:10px;color:var(--support-muted);overflow-wrap:anywhere}.support-messages{height:clamp(260px,42dvh,470px);overflow-y:auto;overscroll-behavior:contain;padding:18px 18px 22px;background:linear-gradient(180deg,#fff9fb,#fff);scrollbar-width:thin;scrollbar-color:#e8c9d8 transparent;outline:none}.support-empty{text-align:center;padding:40px 20px;color:var(--support-muted);font-size:13px;line-height:1.7}.support-empty strong{display:block;color:var(--support-ink);font-size:15px}.support-empty p{margin:8px auto 0;max-width:290px}.support-empty-icon{display:grid;place-items:center;width:50px;height:50px;margin:0 auto 13px;background:#ffe6f0;border-radius:17px;color:var(--support-pink);font-size:29px}.support-message{display:flex;flex-direction:column;align-items:flex-start;margin:0 0 15px;gap:5px;max-width:86%;width:max-content;min-width:65px}.support-message-own{margin-left:auto;align-items:flex-end}.support-message-author{font-size:10px;color:var(--support-muted);padding:0 3px}.support-bubble{padding:11px 13px;background:#fff;border:1px solid var(--support-line);border-radius:15px 15px 15px 4px;line-height:1.6;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;color:var(--support-ink)}.support-message-own .support-bubble{background:#fce0ec;border-color:#f8d0e2;border-radius:15px 15px 4px 15px}.support-message-meta{font-size:10px;color:#a08796;line-height:1.5}.support-message-pending{opacity:.75}.support-message-error .support-bubble{border-color:#dc7794}.support-retry{font:inherit;font-size:11px;border:0;background:transparent;color:#ba3d6c;padding:3px 0;cursor:pointer;text-decoration:underline}.support-image-link{display:block;border-radius:13px;overflow:hidden;background:#f5e9ef;max-width:100%;border:1px solid var(--support-line);line-height:0}.support-image{display:block;max-width:100%;max-height:300px;width:auto;height:auto;object-fit:contain}.support-message-own .support-image-link{border-radius:13px 13px 4px 13px}.support-compose{display:flex;align-items:flex-end;gap:9px;padding:13px 18px 8px;border-top:1px solid var(--support-line);background:#fff}.support-compose textarea{resize:none;border:1px solid var(--support-line);border-radius:11px;min-height:43px;max-height:135px;line-height:1.5;font:inherit;font-size:13px;color:var(--support-ink);padding:11px 12px;flex:1;min-width:0;outline:none;background:#fffafd}.support-compose textarea:focus{border-color:var(--support-pink)}.support-attach{width:38px;height:43px;flex:0 0 38px;padding:0;display:grid;place-items:center;background:#fff4f8;border:1px solid var(--support-line);color:var(--support-pink);border-radius:11px;cursor:pointer}.support-send{min-height:43px;font-size:12px;white-space:nowrap;padding:10px 15px}.support-compose-note{font-size:10px;line-height:1.6;color:var(--support-muted);padding:0 18px 12px;margin:0}.support-contexts{padding:0 22px 16px;display:grid;gap:9px;max-height:245px;overflow:auto}.support-contexts[hidden]{display:none}.support-context-card{border:1px solid #f0ccd9;background:#fff8fb;border-radius:11px;padding:12px 13px;font-size:12px;line-height:1.55}.support-context-card h3{margin:0 0 6px;font-size:13px;overflow-wrap:anywhere}.support-context-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:4px 0}.support-context-label{color:var(--support-muted)}.support-context-code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.4px;overflow-wrap:anywhere;user-select:all}.support-copy{border:1px solid #edc2d3;background:#fff;color:#ad3e6a;border-radius:6px;padding:3px 7px;font:inherit;font-size:10px;cursor:pointer}.support-context-state{display:inline-block;background:#f5e4ec;border-radius:5px;padding:2px 6px;font-size:10px;color:#80576c}.support-new-messages{position:absolute;bottom:99px;left:50%;transform:translateX(-50%);padding:7px 12px;border-radius:20px;border:1px solid #e8bdd0;background:#fff;color:#b24272;cursor:pointer;font:inherit;font-size:11px;box-shadow:0 3px 12px #73324917;z-index:2;white-space:nowrap}.support-new-messages[hidden]{display:none}.support-toast{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#5b3d50;color:#fff;padding:12px 17px;border-radius:11px;max-width:min(90vw,450px);width:max-content;font-size:12px;line-height:1.6;box-shadow:0 6px 24px #5b3d5033;z-index:100}.support-toast[hidden]{display:none}.support-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.support-shell a:focus-visible,.support-shell button:focus-visible,.support-shell summary:focus-visible,.support-admin a:focus-visible,.support-admin button:focus-visible{outline:3px solid #cf6693;outline-offset:3px}.support-admin{font-size:13px;position:relative}.support-admin-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 19px}.support-admin-heading h2{font-size:22px;margin:0 0 7px;color:var(--support-ink)}.support-admin-heading p{margin:0;color:var(--support-muted);font-size:12px;line-height:1.7}.support-admin-layout{display:grid;grid-template-columns:285px minmax(0,1fr);border:1px solid var(--support-line);border-radius:15px;background:#fff;overflow:hidden;min-height:620px}.support-inbox{border-right:1px solid var(--support-line);background:#fffafd;min-width:0}.support-inbox-top{padding:18px 16px 13px;display:flex;align-items:center;justify-content:space-between}.support-inbox-count{background:#f7dce8;color:#b34576;border-radius:20px;padding:3px 8px;font-size:11px}.support-search-label{display:block;margin:0 13px 14px}.support-search{width:100%;font-size:11px}.support-conversations{max-height:600px;overflow:auto;scrollbar-width:thin}.support-inbox-empty{margin:25px 16px;color:var(--support-muted);font-size:12px;text-align:center;line-height:1.7}.support-conversation-button{display:block;width:100%;text-align:left;font:inherit;cursor:pointer;background:transparent;border:0;border-top:1px solid #f4e6ed;padding:15px 16px;color:var(--support-ink)}.support-conversation-button:hover,.support-conversation-button[aria-pressed="true"]{background:#fce8f0}.support-conversation-button[aria-pressed="true"]{box-shadow:inset 3px 0 var(--support-pink)}.support-conversation-top{display:flex;gap:6px;align-items:center}.support-conversation-name{font-weight:650;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}.support-unread{border-radius:20px;color:#fff;background:#df518d;min-width:18px;height:18px;line-height:18px;font-size:10px;text-align:center;padding:0 4px}.support-win-badge{background:#fceacb;color:#97702d;border-radius:4px;padding:2px 4px;font-size:9px;flex-shrink:0}.support-conversation-preview{display:block;font-size:11px;color:var(--support-muted);margin:7px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.support-conversation-details{display:flex;gap:7px;justify-content:space-between;font-size:10px;color:#9e8394}.support-admin-conversation{min-width:0}.support-customer{padding:19px 20px 16px;border-bottom:1px solid var(--support-line)}.support-customer h3{font-size:16px;margin:0 0 6px;overflow-wrap:anywhere}.support-customer p{color:var(--support-muted);font-size:12px;margin:0 0 7px;overflow-wrap:anywhere;line-height:1.6}.support-admin .support-contexts{padding:15px 20px;max-height:240px;grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr))}.support-admin .support-messages{height:360px;padding:20px}.support-admin .support-chat-top{padding:11px 20px}.support-admin .support-chat{border-top:0}.support-reply-permission{color:var(--support-muted)}.support-admin .support-compose{padding:13px 20px 9px}.support-admin .support-compose-note{padding:0 20px 13px}.support-admin .support-message{max-width:78%}.support-admin .support-image{max-height:270px}.support-admin .support-toast{bottom:25px}@media(min-width:720px){.support-shell{margin-top:25px;margin-bottom:25px;border:1px solid var(--support-line);border-radius:22px;overflow:hidden;min-height:0}.support-profile-form{grid-template-columns:1fr 1fr auto;align-items:end}.support-profile-form button{min-height:38px}.support-profile-summary{display:inline;margin:0 0 0 9px}}@media(max-width:980px){.support-admin-layout{grid-template-columns:230px minmax(0,1fr)}}@media(max-width:680px){.support-admin-layout{grid-template-columns:minmax(0,1fr)}.support-inbox{border-right:0;border-bottom:1px solid var(--support-line)}.support-conversations{max-height:235px}.support-conversation-button{padding:12px 15px}.support-admin-heading{align-items:flex-start;flex-direction:column;gap:10px}.support-admin .support-messages{height:340px}.support-admin .support-contexts{max-height:180px}.support-admin .support-message{max-width:88%}}@media(max-width:380px){.support-header{padding:19px 14px;gap:8px}.support-heading h1{font-size:17px}.support-intro{margin:18px 15px}.support-steps{margin:0 15px 17px}.support-profile-panel{margin:0 15px 14px}.support-contexts{padding:0 15px 14px}.support-chat-top{padding:11px 15px}.support-compose{padding:12px 12px 8px;gap:6px}.support-send{padding:10px 11px}.support-language{max-width:95px}.support-message{max-width:91%}}
.support-page,
.support-admin {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Keep the page and chat panel stable as the mobile address bar opens/closes. */
@supports (height: 1svh) {
    .support-shell { min-height: 100svh; }
    .support-shell .support-messages { height: clamp(260px, 42svh, 470px); }
    @media (min-width: 720px) { .support-shell { min-height: 0; } }
}

/* A readable input size avoids automatic focus zoom in iPhone web views. */
@media (max-width: 720px) {
    .support-profile-form input,
    .support-compose textarea,
    .support-language,
    .support-search { font-size: 16px; }

    .support-compose textarea,
    .support-send { min-height: 48px; }
    .support-attach { height: 48px; }
}

/* Customer references are assigned by the server; visitors fill in no form. */
.support-client-card { margin: 0 22px 16px; padding: 12px 14px; border: 1px solid var(--support-line); border-radius: 12px; background: #fffafd; }
.support-client-label { display: block; color: var(--support-ink); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.support-client-label:empty { display: none; }
.support-client-card p { margin: 5px 0 0; color: var(--support-muted); font-size: 11px; line-height: 1.7; }
.support-client-card .support-client-privacy { font-size: 10px; }
.support-invites-panel { margin: 0 0 18px; border: 1px solid var(--support-line); border-radius: 13px; background: #fff; overflow: hidden; }
.support-invites-panel > summary { display: list-item; padding: 15px 17px; cursor: pointer; font-size: 14px; font-weight: 650; background: #fffafd; }
.support-invites-panel > summary small { margin-left: 13px; font-size: 11px; font-weight: 400; color: var(--support-muted); }
.support-invites-note { margin: 12px 17px; font-size: 11px; line-height: 1.7; color: var(--support-muted); }
.support-invite-form { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(160px, 1fr) auto; align-items: start; gap: 12px; margin: 16px 17px; }
.support-invite-form label { display: grid; gap: 7px; min-width: 0; font-size: 12px; }
.support-invite-form em { font-style: normal; font-size: 10px; color: var(--support-muted); margin-left: 5px; }
.support-invite-form small { color: var(--support-muted); font-size: 10px; line-height: 1.5; }
.support-invite-form input, .support-invite-result input { width: 100%; min-width: 0; border: 1px solid var(--support-line); border-radius: 9px; padding: 10px 11px; background: #fff; color: var(--support-ink); outline: none; font: inherit; font-size: 13px; line-height: 1.5; }
.support-invite-form input:focus, .support-invite-result input:focus { border-color: var(--support-pink); box-shadow: 0 0 0 3px #ed79a71a; }
.support-invite-form input:disabled { background: #f8f3f6; color: #9a8592; }
.support-invite-form > button { margin-top: 23px; min-height: 40px; white-space: nowrap; }
.support-invite-result { margin: 0 17px 16px; padding: 13px 14px; background: #fff6fa; border: 1px solid #efd0df; border-radius: 10px; }
.support-invite-result[hidden] { display: none; }
.support-invite-result label { display: grid; gap: 8px; font-size: 12px; font-weight: 600; }
.support-invite-result input { font-weight: 400; background: #fff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.support-invite-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 12px; margin-top: 10px; }
.support-invite-result-actions > span { color: var(--support-muted); font-size: 11px; }
.support-invite-result .support-invites-note { margin: 9px 0 0; font-size: 10px; }
.support-invite-revoke, .support-invite-refresh { border: 1px solid #e9c8d7; background: #fff; border-radius: 7px; padding: 6px 9px; font: inherit; font-size: 11px; line-height: 1.4; color: #a64b74; cursor: pointer; white-space: nowrap; }
.support-invite-revoke:disabled, .support-invite-refresh:disabled { color: #a78e9b; border-color: var(--support-line); cursor: not-allowed; opacity: .6; }
.support-invites-list-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 17px; border-top: 1px solid var(--support-line); font-size: 12px; }
.support-invitations { max-height: 310px; overflow: auto; padding: 0 17px 13px; scrollbar-width: thin; }
.support-invitation-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #f5e8ee; }
.support-invitation-main { display: flex; flex-wrap: wrap; gap: 5px 10px; min-width: 0; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.support-invitation-number { font-weight: 600; }
.support-invitation-nickname { color: var(--support-muted); }
.support-invitation-metadata { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; color: var(--support-muted); font-size: 10px; }
.support-invitation-state { display: inline-block; padding: 2px 5px; border-radius: 5px; background: #f3e8ee; color: #937387; }
.support-invitation-active { background: #e7f3ec; color: #548469; }
@media (max-width: 720px) {
    .support-invite-form { grid-template-columns: minmax(0, 1fr); gap: 13px; }
    .support-invite-form input, .support-invite-result input { font-size: 16px; min-height: 48px; }
    .support-invite-form > button { margin-top: 0; justify-self: start; min-height: 48px; padding: 10px 15px; }
    .support-invites-panel > summary small { display: block; margin: 6px 0 0 13px; line-height: 1.6; }
    .support-invitation-row { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; }
    .support-invitation-main { grid-column: 1; }
    .support-invitation-metadata { grid-column: 1; }
    .support-invitation-row > button { grid-column: 2; grid-row: 1 / 3; min-height: 42px; }
    .support-invite-result-actions .support-button, .support-invite-result-actions .support-invite-revoke { min-height: 44px; }
}
@media (max-width: 380px) { .support-client-card { margin: 0 15px 14px; } }