/* Customer support workspace. All content, statuses and actions remain native. */
.component.sync-client-page:is(.sa-page-customer-tickets,.sa-page-customer-ticket){--support-ink:#f2f2f4;--support-muted:#95959e;--support-line:#232326;--support-accent:#ff851f}
.component.sync-client-page:is(.sa-page-customer-tickets,.sa-page-customer-ticket) .sync-client-page-main{min-width:0}
.sa-page-customer-tickets .sync-ticket-list-notice{display:flex;align-items:flex-start;gap:12px}
html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-tickets .sync-client-page-main>.sync-ticket-list-notice{margin:0 0 20px;padding:16px 18px;border:1px solid #36271c;border-radius:10px;background:#090705}
.sa-page-customer-tickets .sync-ticket-list-notice>svg{width:18px;height:18px;margin-top:2px;flex:none;color:var(--support-accent)}
.sa-page-customer-tickets .sync-ticket-list-notice p{margin:0;color:#b3b0ac;font-size:13px;line-height:1.75}
.sa-page-customer-tickets .sync-ticket-list-notice a{color:#ff9b4a;font-weight:500;text-underline-offset:3px}
html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-tickets .sync-client-page-main>.sa-page-customer-tickets-items.sync-client-surface{padding:0;overflow:hidden;border:1px solid var(--support-line);border-radius:13px;background:#050506}
html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-tickets .sa-page-customer-tickets-item{position:relative;min-width:0;padding:24px;border-color:var(--support-line);background:#050506;transition:background-color .16s ease}
html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-tickets .sa-page-customer-tickets-item:hover{background:#0a0a0b}
.component.sync-client-page.sa-page-customer-tickets .sa-page-customer-tickets-item>.flex:first-child{align-items:flex-start;gap:24px}
.sa-page-customer-tickets .sa-page-customer-tickets-item>.flex:first-child>.min-w-0{flex:1;min-width:0}
html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-tickets .sa-page-customer-tickets-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;width:auto;max-width:100%;margin:0;color:var(--support-ink);font-size:16px;font-weight:600;line-height:1.5;letter-spacing:-.015em;white-space:normal;overflow-wrap:anywhere;text-overflow:ellipsis;text-decoration:none}
.sa-page-customer-tickets .sa-page-customer-tickets-title:hover{color:#ff9b4a}
.sa-page-customer-tickets .sa-page-customer-tickets-item>.flex:first-child p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:8px 0 0;color:var(--support-muted);font-size:12px;line-height:1.75;overflow-wrap:anywhere}
.sa-page-customer-tickets .sync-ticket-list-date{margin:10px 0 0;color:#777781;font-size:11px;font-variant-numeric:tabular-nums;line-height:1.6}
html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-tickets .sa-page-customer-tickets-badge{min-height:29px;max-width:230px;padding:5px 10px;border-radius:999px;background:#0d0c0b;font-size:10px;font-weight:500;line-height:1.6;white-space:normal;text-align:center}
html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-tickets .sync-ticket-list-actions{gap:10px;margin-top:18px}
html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-tickets .sync-ticket-list-actions>a.rounded-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0;padding:10px 14px;border:1px solid #2b2b30;border-radius:8px;background:#080809;color:#c4c4cb;font-size:12px;font-weight:500;line-height:1.5}
html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-tickets .sync-ticket-list-actions>a:first-child{border-color:#604024;background:#170e07;color:#ff9a49}
html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-tickets .sync-ticket-list-actions>a:hover{border-color:#ff8e35;color:#ffad6c}
.sa-page-customer-tickets .sync-ticket-list-actions svg{width:15px;height:15px;flex:none}

/* Conversation heading and metadata. */
.component.sync-client-page.sa-page-customer-ticket .sa-page-customer-ticket-link{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin:0 0 14px;color:#a2a2ab;font-size:12px;font-weight:500;line-height:1.5;text-decoration:none}
.sa-page-customer-ticket .sa-page-customer-ticket-link:hover{color:#ff9d52}
.component.sync-client-page.sa-page-customer-ticket .sync-client-conversation-heading{display:flex;flex-direction:column;align-items:flex-start;gap:17px;margin:0 0 24px}
.component.sync-client-page.sa-page-customer-ticket .sa-page-customer-ticket-title{max-width:100%;margin:0;color:#f5f5f6;font-size:clamp(25px,2.7vw,34px);font-weight:600;line-height:1.3;letter-spacing:-.025em;overflow-wrap:anywhere}
.sa-page-customer-ticket .sync-client-conversation-heading>div{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.component.sync-client-page.sa-page-customer-ticket .sync-client-conversation-heading>div>:is(span,a){display:inline-flex;align-items:center;gap:7px;min-height:29px;padding:6px 10px;border-radius:7px;font-size:11px;font-weight:400;line-height:1.6;overflow-wrap:anywhere}
.component.sync-client-page.sa-page-customer-ticket .sync-client-conversation-heading>div>:is(span,a):not(.sa-page-customer-ticket-badge){border:1px solid #29292d;background:#080809;color:#a5a5ae}
.component.sync-client-page.sa-page-customer-ticket .sync-client-conversation-heading>div>a{min-height:36px;color:#c2c2c9;text-decoration:none}
.sa-page-customer-ticket .sync-client-conversation-heading>div>a:hover{border-color:#6e4526;color:#ff9d52}
html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-ticket .sync-client-page-main>.sync-client-surface.rounded-card.bg-surface{padding:0;margin-bottom:0;overflow:hidden;border:1px solid var(--support-line);border-radius:14px;background:#050506}
html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-ticket .sa-page-customer-ticket-items{height:clamp(340px,50dvh,640px);min-height:340px;gap:25px;padding:26px;background:#050506;scrollbar-width:thin;scrollbar-color:#36363b transparent;overscroll-behavior:contain}
.sa-page-customer-ticket .sa-page-customer-ticket-item{gap:12px;min-width:0;align-items:flex-start}
.component.sync-client-page.sa-page-customer-ticket .sa-page-customer-ticket-item>:is(img,span){display:flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;padding:4px;border:1px solid #31251d;border-radius:50%;background:#090806;color:#ff923a;object-fit:contain}
html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-ticket .sync-ticket-message-bubble{min-width:0;max-width:min(78%,720px);padding:16px 18px;border:1px solid #26262b;border-radius:2px 12px 12px 12px;background:#0b0b0d;box-shadow:none}
html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-ticket .sa-page-customer-ticket-item.flex-row-reverse>.sync-ticket-message-bubble{border-color:#4a2d18;border-radius:12px 2px 12px 12px;background:#0c0907}
.sa-page-customer-ticket .sync-ticket-message-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-bottom:8px}
.component.sync-client-page.sa-page-customer-ticket .sync-ticket-message-meta p{margin:0;font-size:12px;font-weight:600;line-height:1.5;color:#e9e9ed}
.component.sync-client-page.sa-page-customer-ticket .sa-page-customer-ticket-item.flex-row-reverse .sync-ticket-message-meta p{color:#ff9d55}
.sa-page-customer-ticket .sync-ticket-message-meta>span{color:#777782;font-size:10px;font-variant-numeric:tabular-nums;line-height:1.6}
.component.sync-client-page.sa-page-customer-ticket .sync-ticket-message-copy{margin:0;color:#d0d0d7;font-size:13px;font-weight:400;line-height:1.85;overflow-wrap:anywhere;word-break:normal}
.sa-page-customer-ticket .sync-ticket-message-copy :is(p,ul,ol){margin:8px 0}
.sa-page-customer-ticket .sync-ticket-message-copy a{color:#ff9d55;text-decoration:underline;text-underline-offset:3px}
.sa-page-customer-ticket .sync-ticket-message-copy :is(img,video){max-width:100%;height:auto}
.sa-page-customer-ticket .sync-ticket-message-copy pre{max-width:100%;overflow:auto;padding:12px;border:1px solid #28282e;border-radius:6px;background:#050506}
.sa-page-customer-ticket .sync-ticket-message-attachments{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}
.sa-page-customer-ticket .sync-ticket-message-attachments img{display:block;width:112px;max-width:100%;height:86px;border:1px solid #303036;border-radius:7px;object-fit:cover;cursor:zoom-in}

/* A complete reply area, with distinct editor and actions. */
html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-ticket .sync-ticket-composer{padding:20px 24px;border-top:1px solid var(--support-line);background:#080809}
.component.sync-client-page.sa-page-customer-ticket .sync-ticket-reply-row{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;align-items:end;gap:12px 9px;min-width:0}
.component.sync-client-page.sa-page-customer-ticket .sync-ticket-reply-row textarea.input{grid-column:1/-1;display:block;width:100%;min-width:0;min-height:96px;max-height:240px;flex-basis:auto;padding:14px 16px;border:1px solid #2b2b31;border-radius:9px;background:#030304;color:#ededf1;font-family:inherit;font-size:13px;line-height:1.8;resize:vertical;box-shadow:none}
.sa-page-customer-ticket .sync-ticket-reply-row textarea.input::placeholder{color:#777781;opacity:1}
.component.sync-client-page.sa-page-customer-ticket .sync-ticket-reply-row>button{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #303035;border-radius:8px;background:#0c0c0e;color:#b6b6c0;box-shadow:none}
.component.sync-client-page.sa-page-customer-ticket .sync-ticket-reply-row>button[type=button]{grid-column:2}
.component.sync-client-page.sa-page-customer-ticket .sync-ticket-reply-row>button[type=submit]{grid-column:3;border-color:#ff841d;background:#ff841d;color:#170d04}
.sa-page-customer-ticket .sync-ticket-reply-row>button svg{width:18px;height:18px}
.component.sync-client-page.sa-page-customer-ticket .sync-ticket-reply-row>button:hover:not(:disabled){border-color:#ff9d55;color:#ff9d55}
.component.sync-client-page.sa-page-customer-ticket .sync-ticket-reply-row>button[type=submit]:hover:not(:disabled){background:#ff9b47;color:#170d04}
.component.sync-client-page.sa-page-customer-ticket .sync-ticket-reply-row>p.text-error{position:static;grid-column:1/-1;margin:0;color:#ef9b91;font-size:12px;line-height:1.7}
.sa-page-customer-ticket .sync-ticket-composer form>.flex:not(.sync-ticket-reply-row){gap:10px;margin-bottom:14px}
.sa-page-customer-ticket .sync-ticket-composer form>.flex:not(.sync-ticket-reply-row) img{width:68px;height:60px;border-color:#333339;border-radius:7px}
.sa-page-customer-ticket .sync-ticket-composer>p{margin:0;padding:7px 0;color:#9999a3;font-size:13px;line-height:1.75}
.component.sync-client-page:is(.sa-page-customer-ticket,.sa-page-customer-tickets) .sync-client-page-main :is(a,button,input,textarea):focus-visible{outline:2px solid #ff963f;outline-offset:3px}
.component.sync-client-page.sa-page-customer-ticket .sync-ticket-reply-row textarea.input:focus{border-color:#bc682c;outline:0;box-shadow:0 0 0 3px #ff851f12}

@media(max-width:700px){
  html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-tickets .sa-page-customer-tickets-item{padding:20px}
  .component.sync-client-page.sa-page-customer-tickets .sa-page-customer-tickets-item>.flex:first-child{flex-direction:column;gap:12px}
  html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-tickets .sa-page-customer-tickets-title{font-size:15px}
  .sa-page-customer-tickets .sync-ticket-list-actions{display:flex;flex-wrap:wrap}
  .sa-page-customer-tickets .sync-ticket-list-actions>a{flex:1;min-width:0}
  .sa-page-customer-ticket .sync-client-conversation-heading>div{gap:7px}
  .component.sync-client-page.sa-page-customer-ticket .sync-client-conversation-heading>div>:is(span,a){font-size:10px}
  html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-ticket .sa-page-customer-ticket-items{height:clamp(330px,49dvh,560px);min-height:330px;gap:22px;padding:20px 16px}
  .component.sync-client-page.sa-page-customer-ticket .sa-page-customer-ticket-item{gap:9px}
  .component.sync-client-page.sa-page-customer-ticket .sa-page-customer-ticket-item>:is(img,span){width:27px;height:27px;padding:3px}
  html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-ticket .sync-ticket-message-bubble{max-width:calc(100% - 36px);padding:13px 14px}
  .sa-page-customer-ticket .sync-ticket-message-meta{gap:4px 9px}
  .component.sync-client-page.sa-page-customer-ticket .sync-ticket-message-copy{font-size:12px;line-height:1.85}
  .sa-page-customer-ticket .sync-ticket-message-attachments img{width:96px;height:76px}
  html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-ticket .sync-ticket-composer{padding:16px}
  .component.sync-client-page.sa-page-customer-ticket .sync-ticket-reply-row textarea.input{min-height:94px;padding:12px 13px;font-size:14px}
}
@media(max-width:359px){
  html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-tickets .sa-page-customer-tickets-item{padding:18px 16px}
  .sa-page-customer-tickets .sync-ticket-list-actions>a{flex-basis:100%}
  html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-ticket .sa-page-customer-ticket-items{padding-inline:12px}
  html[data-scheme] body[class*="sa-tpl-customer-"] .component.sync-client-page.sa-page-customer-ticket .sync-ticket-message-bubble{padding:12px}
}
@media(prefers-reduced-motion:reduce){.component.sync-client-page:is(.sa-page-customer-tickets,.sa-page-customer-ticket) *{scroll-behavior:auto!important;transition:none!important}}