/* Hermes · portal do cliente (/).
   Mobile primeiro, mais arejado que a area da equipe. So tokens de hermes.css
   (a marca vem de /brand.php). Cor com significado:
   laranja = acao principal e "sua vez"; verde = resolvido; cinza = encerrado;
   violeta = assistente virtual; vermelho = so erro. Classes com prefixo p-. */

.p-body { background: var(--bg); color: var(--ink); }
#portal { min-height: 100vh; display: flex; flex-direction: column; }
.p-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.p-pad { padding-top: 24px; padding-bottom: 40px; }
.p-narrow { max-width: 760px; }
.p-main { flex: 1 0 auto; outline: none; }
.p-small { font-size: var(--t-s); }
.p-mt { margin-top: 12px; }
.p-mt2 { margin-top: 20px; }

/* ---------- topo ---------- */
.p-top { position: sticky; top: 0; z-index: 30; background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line-2); }
.p-top .p-wrap { display: flex; align-items: center; gap: 10px; min-height: 60px; }
.p-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-width: 0; }
.p-logo img { max-height: 30px; max-width: 150px; object-fit: contain; display: block; }
.p-wm { font: 800 18px/1 var(--f-brand); color: var(--brand); letter-spacing: -.01em; white-space: nowrap; }
.p-logo .p-help { display: none; font: 700 var(--t-m)/1 var(--f-brand); color: var(--ink-2); border-left: 1px solid var(--line); padding-left: 12px; white-space: nowrap; }
.p-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.p-nav .p-navlink { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: var(--r-s); color: var(--ink-2); text-decoration: none; font: 600 var(--t-m)/1 var(--f-ui); }
.p-nav .p-navlink:hover { background: var(--idle-bg); color: var(--ink); }
.p-nav .p-navlink[aria-current="page"] { color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
/* no celular o rotulo sai da tela mas fica pro leitor de tela (display:none tiraria o nome do botao) */
.p-nav .lbl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.p-me { position: relative; }
.p-me > button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px; border: 0; background: transparent; color: var(--ink); border-radius: var(--r-s); cursor: pointer; font: 600 var(--t-m)/1 var(--f-ui); }
.p-me > button:hover { background: var(--idle-bg); }
.p-me .avatar { background: var(--brand); color: var(--on-brand); }
.p-me .menu { right: 0; top: calc(100% + 6px); }
.p-me .menu .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; font-size: var(--t-s); color: var(--ink-3); }
.p-me .menu .who strong { display: block; color: var(--ink); font-size: var(--t-m); }
.p-teampill { display: none; }
@media (min-width: 720px) {
  .p-logo .p-help { display: inline; }
  .p-nav .lbl { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .p-teampill { display: inline-flex; }
}

/* faixa do "ver como o cliente" */
.p-viewas { background: var(--deep); color: var(--on-brand); font-size: var(--t-s); }
.p-viewas .p-wrap { display: flex; align-items: center; gap: 10px; min-height: 44px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
.p-viewas strong { color: var(--on-brand); }
.p-viewas .muted { color: color-mix(in srgb, var(--on-brand) 70%, var(--deep)); }
.p-viewas .btn { margin-left: auto; }
@media (max-width: 719px) { .p-viewas .muted { display: none; } .p-viewas .p-wrap { flex-wrap: nowrap; } .p-viewas .p-wrap > span:first-of-type { min-width: 0; } }

/* ---------- rodape ---------- */
.p-foot { flex: none; border-top: 1px solid var(--line-2); background: var(--surface); color: var(--ink-3); font-size: var(--t-s); }
.p-foot .p-wrap { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; padding-bottom: 26px; }
.p-foot strong { color: var(--ink-2); font-family: var(--f-brand); }
.p-foot .p-foot-hours { display: flex; gap: 8px; align-items: flex-start; max-width: 60ch; }
.p-foot .p-foot-hours .i { margin-top: 2px; }
.p-foot-links { display: flex; gap: 16px; flex-wrap: wrap; }
.p-foot a { color: var(--ink-2); }
@media (min-width: 720px) { .p-foot .p-wrap { flex-direction: row; justify-content: space-between; align-items: flex-start; } }

/* ---------- inicio ---------- */
.p-hero { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 9%, var(--bg)) 0%, var(--bg) 100%); color: var(--ink); padding: 36px 0 28px; text-align: center; }
.p-hero h1 { font-size: clamp(27px, 7vw, 42px); font-weight: 800; line-height: 1.15; max-width: 24ch; margin: 0 auto; }
.p-hero .p-hello { font: 700 var(--t-l)/1.2 var(--f-brand); color: var(--brand); margin-bottom: 8px; }
.p-hero .p-sub { margin: 10px auto 0; max-width: 46ch; }
.p-sub { color: var(--ink-2); font-size: var(--t-l); line-height: 1.5; }
@media (min-width: 720px) { .p-hero { padding: 64px 0 48px; } }

/* busca grande com sugestoes enquanto digita */
.p-search { position: relative; max-width: 660px; margin: 22px auto 0; text-align: left; }
.p-search:not(.big) { max-width: none; margin: 18px 0 0; }
.p-search > .i { position: absolute; left: 16px; top: 15px; width: 20px; height: 20px; color: var(--ink-3); pointer-events: none; }
.p-search .input { height: 50px; border-radius: 14px; padding-left: 46px; font-size: var(--t-l); background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.p-search.big .input { height: 58px; font-size: 17px; border-color: transparent; box-shadow: var(--sh-2), 0 0 0 1px var(--line-2); }
.p-search.big > .i { top: 19px; left: 18px; }
.p-search.big .input { padding-left: 50px; }
.p-search .input::-webkit-search-cancel-button { cursor: pointer; }
.p-sugg { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 25; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--sh-pop); overflow: hidden; }
.p-sugg a { display: block; padding: 12px 16px; border-bottom: 1px solid var(--line-2); color: var(--ink); text-decoration: none; }
.p-sugg a:last-of-type { border-bottom: 0; }
.p-sugg a:hover, .p-sugg a[aria-selected="true"] { background: var(--surface-2); color: var(--ink); }
.p-sugg .t { display: block; font-weight: 600; }
.p-sugg .x { display: block; font-size: var(--t-s); color: var(--ink-3); margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.p-sugg .p-sugg-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: var(--surface-2); color: var(--ink-3); font-size: var(--t-s); border-top: 1px solid var(--line-2); }
.p-sugg .p-sugg-foot a { display: inline; padding: 0; border: 0; color: var(--brand); font-weight: 600; background: transparent; }
mark.p-hl { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); color: inherit; border-radius: 3px; padding: 0 1px; }

/* aviso da empresa */
.p-ann { display: flex; gap: 12px; align-items: flex-start; margin-top: 8px; padding: 14px 16px; border-radius: var(--r-l); background: var(--surface); color: var(--ink); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line-2)); box-shadow: var(--sh-1); }
.p-ann > .i { color: var(--brand); margin-top: 2px; }
.p-ann .rich p { margin-bottom: .3em; }

/* secoes */
.p-sec { padding: 26px 0 6px; }
.p-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.p-sec-head h2 { font-size: var(--t-xl); }
.p-sec-head a { font-weight: 600; text-decoration: none; }
.p-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 900px) { .p-cols { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 28px; } }

/* cartoes */
.p-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .p-grid.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p-grid.one { grid-template-columns: minmax(0, 1fr); }
.p-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-l); box-shadow: var(--sh-1); text-decoration: none; min-width: 0; }
a.p-card { transition: border-color .12s, box-shadow .12s, transform .12s; }
a.p-card:hover { color: var(--ink); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); box-shadow: var(--sh-2); transform: translateY(-1px); }
.p-card h3 { font-size: var(--t-l); margin-bottom: 3px; }
.p-card p { margin: 0; color: var(--ink-3); font-size: var(--t-s); line-height: 1.45; }
.p-card .rich p { margin: 0 0 .7em; color: inherit; font-size: inherit; line-height: inherit; }
.p-card .rich p:last-child { margin-bottom: 0; }
.p-card .p-chev { margin-left: auto; align-self: center; color: var(--ink-3); }
.p-card.col { flex-direction: column; gap: 10px; }
.p-card.block { display: block; }
.p-ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--brand) 10%, var(--surface)); color: var(--brand); }
.p-ico .i { width: 23px; height: 23px; }
.p-ico.lg { width: 56px; height: 56px; border-radius: 16px; }
.p-ico.lg .i { width: 28px; height: 28px; }

/* lista de artigos */
.p-arts { display: flex; flex-direction: column; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-l); box-shadow: var(--sh-1); overflow: hidden; }
.p-arts a { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-bottom: 1px solid var(--line-2); color: var(--ink); text-decoration: none; }
.p-arts a:last-child { border-bottom: 0; }
.p-arts a:hover { background: var(--surface-2); color: var(--ink); }
.p-arts a > .i { color: var(--brand); margin-top: 2px; }
.p-arts .t { font-weight: 600; display: block; }
.p-arts .x { display: block; color: var(--ink-3); font-size: var(--t-s); margin-top: 2px; }

.p-hours { display: flex; gap: 12px; align-items: flex-start; padding: 18px; border-radius: var(--r-l); background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); }
.p-hours > .i { color: var(--brand); margin-top: 3px; }
.p-hours strong { display: block; font-family: var(--f-brand); margin-bottom: 4px; }
.p-hours p { margin: 0; color: var(--ink-2); font-size: var(--t-s); }

/* cabecalho de pagina */
.p-head { margin-bottom: 20px; }
.p-head h1 { font-size: clamp(24px, 5.5vw, 32px); }
.p-head .p-sub { margin: 8px 0 0; max-width: 62ch; }
.p-head.with-ico { display: flex; gap: 14px; align-items: flex-start; }
.p-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: var(--t-s); }
.p-back:hover { color: var(--brand); }
.p-head-row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }

/* ---------- selo do cliente: de quem e a vez ---------- */
.p-st { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 999px; font: 600 12.5px/1 var(--f-ui); white-space: nowrap; background: var(--idle-bg); color: var(--ink-2); }
.p-st::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.p-st.t-equipe { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); color: var(--brand); }
.p-st.t-cliente { background: var(--accent); color: var(--accent-ink); }
.p-st.t-terceiro { background: var(--idle-bg); color: var(--ink-2); }
.p-st.t-feito { background: var(--ok-bg); color: var(--ok); }
.p-st.t-inativo { background: var(--idle-bg); color: var(--ink-3); }
.p-key { font: 600 var(--t-xs)/1 var(--f-ui); color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* pedido na lista */
.p-tk { flex-direction: column; gap: 8px; border-left: 4px solid var(--line-2); }
.p-tk.t-cliente { border-left-color: var(--accent); }
.p-tk.t-equipe { border-left-color: color-mix(in srgb, var(--brand) 45%, var(--line-2)); }
.p-tk.t-feito { border-left-color: color-mix(in srgb, var(--ok) 45%, var(--line-2)); }
.p-tk-top { display: flex; align-items: center; gap: 10px; width: 100%; }
.p-tk-top .p-key { margin-left: auto; }
.p-tk-subj { font: 700 var(--t-l)/1.35 var(--f-brand); color: var(--ink); overflow-wrap: anywhere; }
.p-tk-meta { color: var(--ink-3); font-size: var(--t-s); }

/* abas e escolha de escopo */
.p-tabs { display: flex; gap: 6px; margin: 4px 0 16px; overflow-x: auto; }
.p-tabs a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; text-decoration: none; font: 600 var(--t-s)/1 var(--f-ui); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-2); white-space: nowrap; }
.p-tabs a:hover { color: var(--ink); border-color: var(--line); }
.p-tabs a[aria-current="page"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.p-tabs .n { font-variant-numeric: tabular-nums; opacity: .8; }
.p-seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 12px; background: var(--idle-bg); margin-bottom: 12px; max-width: 100%; }
.p-seg a { padding: 7px 12px; border-radius: 9px; text-decoration: none; font: 600 var(--t-s)/1.1 var(--f-ui); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-seg a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }

/* ---------- formulario de pedido ---------- */
.p-form { display: flex; flex-direction: column; gap: 0; }
.p-form .p-card { display: block; padding: 20px 18px 8px; }
.p-form .p-card + .p-card { margin-top: 14px; }
.p-form .p-card > h2 { font-size: var(--t-l); margin-bottom: 14px; }
.p-form .p-card > p.p-small { margin: -6px 0 16px; }
.p-form .input, .p-form .select, .p-form .textarea { min-height: 44px; font-size: var(--t-l); }
.p-form .textarea { min-height: 150px; }
.p-form .field > label { font-size: var(--t-m); color: var(--ink); }
.p-form .field > label .opt { font-weight: 400; color: var(--ink-3); }
.p-form .check { font-size: var(--t-m); align-items: flex-start; }
.p-form .check input { margin-top: 3px; }
.p-actions { display: flex; flex-direction: column-reverse; gap: 10px; margin-top: 18px; }
.p-actions .btn { height: 48px; font-size: var(--t-l); border-radius: 12px; }
@media (min-width: 640px) { .p-actions { flex-direction: row; justify-content: flex-end; } .p-actions .btn { min-width: 180px; } }
.p-who-line { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); font-size: var(--t-s); margin-bottom: 14px; }
.p-who-line strong { color: var(--ink); }
.p-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* anexos */
.p-filepick { margin-bottom: 14px; }
.p-filepick .p-attach { cursor: pointer; }
.p-filepick .p-attach:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.p-files { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.p-files li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-2); font-size: var(--t-s); min-width: 0; }
.p-files li .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.p-files li .sz { color: var(--ink-3); white-space: nowrap; }

/* passo "estes artigos podem resolver agora" */
.p-deflect { border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line-2)); background: var(--surface); color: var(--ink); border-radius: var(--r-l); padding: 20px 18px; box-shadow: var(--sh-2); }
.p-deflect > h2 { font-size: var(--t-xl); }
.p-deflect > p { color: var(--ink-2); margin: 6px 0 16px; }
.p-deflect-item { border: 1px solid var(--line-2); border-radius: 12px; padding: 14px; margin-bottom: 10px; background: var(--surface-2); color: var(--ink); }
.p-deflect-item h3 { font-size: var(--t-l); margin-bottom: 4px; }
.p-deflect-item .x { color: var(--ink-3); font-size: var(--t-s); margin: 0 0 10px; }
.p-deflect-item .rich { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; margin: 4px 0 12px; max-height: 360px; overflow: auto; }
.p-deflect-item .row { flex-wrap: wrap; gap: 8px; }
.p-deflect-item .p-solved .i { color: var(--ok); }

/* pronto (sucesso) */
.p-done { display: block; text-align: center; padding: 30px 18px; }
.p-done .p-okmark { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; background: var(--ok-bg); color: var(--ok); }
.p-done .p-okmark .i { width: 34px; height: 34px; stroke-width: 2.2; }
.p-done .p-okmark.soft { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); color: var(--brand); }
.p-done h1 { font-size: clamp(24px, 6vw, 30px); margin-bottom: 8px; }
.p-done p { color: var(--ink-2); font-size: var(--t-m); line-height: 1.55; max-width: 48ch; margin-left: auto; margin-right: auto; }
.p-done .p-bigkey { display: inline-block; margin: 6px 0 14px; padding: 8px 14px; border-radius: 10px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-2); font: 800 var(--t-xl)/1 var(--f-brand); letter-spacing: .02em; }
.p-done .row { justify-content: center; flex-wrap: wrap; margin-top: 14px; }

/* ---------- entrar ---------- */
.p-auth { max-width: 440px; margin: 8px auto 0; padding: 26px 22px; display: block; }
.p-auth h1 { font-size: var(--t-2xl); }
.p-auth .p-sub { font-size: var(--t-m); margin: 6px 0 18px; }
.p-auth .input { min-height: 46px; font-size: var(--t-l); }
.p-auth .btn { height: 46px; font-size: var(--t-l); border-radius: 12px; }
.p-or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: var(--t-s); margin: 16px 0; }
.p-or::before, .p-or::after { content: ''; flex: 1; border-top: 1px solid var(--line-2); }
.p-auth .notice { margin-bottom: 14px; }

/* ---------- um pedido ---------- */
.p-tkview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; grid-template-areas: "status" "csat" "thread" "side"; }
.p-tkview > .a-status { grid-area: status; }
.p-tkview > .a-csat { grid-area: csat; }
.p-tkview > .a-thread { grid-area: thread; min-width: 0; }
.p-tkview > .a-side { grid-area: side; }
@media (min-width: 960px) {
  .p-tkview { grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: auto auto 1fr; grid-template-areas: "thread status" "thread csat" "thread side"; align-items: start; gap: 16px 24px; }
}
.p-tkhead { margin-bottom: 18px; }
.p-tkhead h1 { font-size: clamp(22px, 5vw, 30px); overflow-wrap: anywhere; }
.p-tkhead .meta { display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; color: var(--ink-3); font-size: var(--t-s); margin-top: 8px; }
.p-status { display: block; padding: 18px; }
.p-status .row { flex-wrap: wrap; }
.p-status p { color: var(--ink-2); margin: 12px 0 0; }
.p-status .btn { margin-top: 14px; }
.p-status.t-cliente { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.p-status.t-feito { border-color: color-mix(in srgb, var(--ok) 35%, var(--line-2)); }

.p-thread { display: flex; flex-direction: column; gap: 16px; }
.p-msg { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.p-msg .avatar { margin-top: 2px; }
.p-msg.team .avatar { background: var(--brand); color: var(--on-brand); }
.p-msg.bot .avatar { background: var(--ai); color: var(--on-brand); }
.p-bub { min-width: 0; max-width: min(680px, 100%); background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: 4px 16px 16px 16px; padding: 12px 14px; box-shadow: var(--sh-1); }
.p-msg.me { flex-direction: row-reverse; }
.p-msg.me .p-bub { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 20%, var(--line-2)); border-radius: 16px 4px 16px 16px; }
.p-msg.bot .p-bub { background: var(--ai-bg); color: var(--ink); border-color: var(--ai-line); }
.p-msg.sys { justify-content: center; }
.p-msg.sys .p-bub { background: transparent; border: 0; box-shadow: none; color: var(--ink-3); font-size: var(--t-s); text-align: center; padding: 2px 8px; }
.p-who { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font: 600 var(--t-s)/1.3 var(--f-ui); color: var(--ink); margin-bottom: 6px; }
.p-who time { font-weight: 400; color: var(--ink-3); font-size: var(--t-xs); }
.p-bub .rich { font-size: var(--t-m); }
.p-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.p-att { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 10px; border-radius: 9px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-2); font-size: var(--t-s); text-decoration: none; }
.p-att:hover { border-color: var(--line); color: var(--ink); }
.p-att .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.p-att.img { padding: 4px; }
.p-att.img img { display: block; max-width: 220px; max-height: 160px; border-radius: 6px; object-fit: cover; }

.p-compose { margin-top: 18px; display: block; padding: 16px; }
.p-compose h2 { font-size: var(--t-l); margin-bottom: 10px; }
.p-compose .textarea { min-height: 120px; font-size: var(--t-l); }
.p-compose .notice { margin-bottom: 12px; }
.p-compose .p-actions { margin-top: 10px; }
.p-compose.t-cliente { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2)); }

.p-side { display: block; padding: 16px 18px; }
.p-side h2 { font-size: var(--t-m); margin: 0 0 10px; color: var(--ink-2); }
.p-side h2 + dl { margin-top: 0; }
.p-side section + section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.p-dl { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: var(--t-s); }
.p-dl dt { color: var(--ink-3); }
.p-dl dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.p-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-s); }

/* avaliacao: rostos */
.p-rate { display: block; padding: 18px; }
.p-rate h2 { font-size: var(--t-l); margin-bottom: 4px; }
.p-rate > p, .p-rate-body > p { color: var(--ink-2); font-size: var(--t-s); margin: 0 0 14px; }
.p-faces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.p-face { appearance: none; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 2px 8px; border-radius: 14px; border: 2px solid var(--line-2); background: var(--surface); color: var(--ink-3); cursor: pointer; font: 600 11.5px/1.1 var(--f-ui); min-width: 0; transition: border-color .12s, color .12s, background .12s, transform .12s; }
.p-face svg { width: 36px; height: 36px; flex: none; }
.p-face span { max-width: 100%; text-align: center; overflow-wrap: anywhere; }
.p-face:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); color: var(--ink); }
.p-face[aria-checked="true"] { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 11%, var(--surface)); transform: translateY(-1px); }
.p-rate .textarea { margin-top: 12px; min-height: 80px; }
.p-rate .btn { margin-top: 12px; }
.p-rated { display: flex; gap: 12px; align-items: center; color: var(--brand); }
.p-rated svg { width: 40px; height: 40px; flex: none; }
.p-rated strong { color: var(--ink); display: block; font-family: var(--f-brand); }
.p-rated q { color: var(--ink-2); font-size: var(--t-s); }
.p-rate.big { max-width: 560px; margin: 0 auto; padding: 26px 20px; }
.p-rate.big h1 { font-size: clamp(22px, 5.5vw, 28px); margin-bottom: 6px; }
.p-rate.big .p-rated { justify-content: center; margin-top: 18px; }
.p-rate.big .p-rate-body > .row { justify-content: center; }
@media (min-width: 520px) { .p-face { font-size: var(--t-xs); } .p-face svg { width: 42px; height: 42px; } .p-faces { gap: 10px; } }
/* na lateral do chamado o cartao e estreito mesmo com tela larga */
@media (min-width: 960px) { .a-csat .p-faces { gap: 5px; } .a-csat .p-face { padding: 8px 1px 7px; font-size: 11px; } .a-csat .p-face svg { width: 32px; height: 32px; } }

/* ---------- artigo ---------- */
.p-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--ink-3); font-size: var(--t-s); margin-bottom: 14px; }
.p-crumbs a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.p-crumbs a:hover { color: var(--brand); }
.p-article { display: block; padding: 24px 20px; }
.p-article h1 { font-size: clamp(24px, 5.5vw, 34px); line-height: 1.2; overflow-wrap: anywhere; }
.p-article .meta { color: var(--ink-3); font-size: var(--t-s); margin: 10px 0 18px; }
.p-article .rich { font-size: 16px; line-height: 1.7; color: var(--ink); max-width: 70ch; }
.p-article .rich h3 { font-size: var(--t-xl); margin-top: 1.2em; }
.p-article .rich li { margin-bottom: .3em; }
@media (min-width: 720px) { .p-article { padding: 34px 38px; } }
.p-helped { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.p-helped strong { font-family: var(--f-brand); margin-right: 6px; }
.p-helped .p-thanks { color: var(--ink-2); }
.p-preview { margin-bottom: 14px; }
.p-cta { display: block; padding: 18px; background: var(--surface); color: var(--ink); }
.p-cta h2 { font-size: var(--t-l); margin-bottom: 4px; }
.p-cta p { color: var(--ink-2); margin: 0 0 12px; font-size: var(--t-s); }
.p-aside { display: flex; flex-direction: column; gap: 16px; }
.p-aside h2 { font-size: var(--t-m); color: var(--ink-2); margin-bottom: 10px; }

/* vazio acolhedor */
.p-empty { text-align: center; padding: 40px 18px; background: var(--surface); color: var(--ink-2); border: 1px dashed var(--line); border-radius: var(--r-l); }
.p-empty h3 { margin-bottom: 6px; }
.p-empty p { color: var(--ink-3); max-width: 46ch; margin: 0 auto 14px; }
.p-empty .p-ico { margin: 0 auto 12px; }

.p-more { display: flex; justify-content: center; margin-top: 14px; }