/* Sneaky Secure Attachments (SPEC-UI §5, §7): the paperclip, chips, trays and dialogs in the approved Sneaky language.
   The Chat Hub's green and type inside the hub, Support's plum on Support, religion's slate where the hub sets it. Only
   local --shatt-* values are declared (never --sh-*), and every button restates its states because the parent theme's
   reset colours every button's :hover and :focus. */
:is(.sh-att-btn, .sh-att-row, .sh-att-slot, .sh-att-pchips, .sh-att-traywrap, .sh-att-dlg) {
	--shatt-a: #246b5f; --shatt-ad: #173d39; --shatt-ink: #122c3a; --shatt-copy: #375568; --shatt-muted: #587183;
	--shatt-line: #c7ddeb; --shatt-soft: #e1ecf2; --shatt-wash: #f1f7f9;
	--shatt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
:is(.sh-sc, .shc-support, .shc-supchat, .shc-solo) :is(.sh-att-btn, .sh-att-row, .sh-att-slot, .sh-att-pchips, .sh-att-traywrap) { --shatt-a: #7b244b; --shatt-ad: #5e1a39; --shatt-line: #ad778f; --shatt-soft: #f3dce7; --shatt-wash: #fdf4f8; }
.shc-mode-religion :is(.sh-att-btn, .sh-att-row, .sh-att-pchips, .sh-att-traywrap) { --shatt-a: #4a5a63; --shatt-ad: #33424a; --shatt-wash: #f2f5f6; }
.sh-att-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:is(.sh-att-row, .sh-att-traywrap)[hidden], .sh-att-file { display: none !important; }

/* the paperclip: a 44 px target, the host's own focus ring */
button.sh-att-btn, button.sh-att-btn:hover, button.sh-att-btn:focus {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; padding: 0;
	border: 0; border-radius: 12px; background: transparent; color: var(--shatt-a); box-shadow: none; cursor: pointer; text-transform: none; letter-spacing: 0; line-height: 1; white-space: nowrap;
}
button.sh-att-btn:hover { background: var(--shatt-wash); color: var(--shatt-ad); }
button.sh-att-btn[disabled] { background: transparent; color: #8fa3b0; cursor: not-allowed; }
.sh-att-btn svg { flex: none; width: 22px; height: 22px; }

/* the hub's composer: paperclip | message | send, the staged documents above them inside the same pill */
.shc .shc-field.sh-att-field { grid-template-columns: 44px minmax(0, 1fr) 44px; padding-left: 5px; }
.shc .shc-field.sh-att-field:not(:has(> .sh-att-btn)) { grid-template-columns: minmax(0, 1fr) 44px; padding-left: 16px; }
/* a long list of staged documents scrolls inside the pill, so the conversation stays in view on small phones; the cap
   follows the visible height (--chat-viewport-height shrinks with the keyboard) and leaves about 300 px for the header,
   message box, Send and price line, so they stay reachable with the keyboard up (never under 60 px) */
.shc .shc-field.sh-att-field > .sh-att-row {
	grid-column: 1 / -1; order: -1; max-height: min(34vh, 280px);
	max-height: max(60px, min(calc(var(--chat-viewport-height, 100vh) * .28), calc(var(--chat-viewport-height, 100vh) - 300px), 280px));
	overflow-y: auto; overscroll-behavior: contain; padding: 4px 6px 2px 4px;
}

/* staged chips */
.sh-att-row { display: grid; gap: 6px; min-width: 0; }
.sh-att-chips, .sh-att-pchips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; max-width: 100%; }
:is(.sh-att-chip, .sh-att-pchip) {
	box-sizing: border-box; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; flex: 1 1 210px; min-width: 0; max-width: 100%;
	margin: 0; padding: 5px 3px 5px 7px; border: 1.5px solid var(--shatt-soft); border-radius: 14px; background: #fff; color: var(--shatt-ink); font: 400 13px/1.35 var(--shatt-font); text-align: left;
}
.sh-att-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--shatt-wash); color: var(--shatt-a); }
.sh-att-ic svg { width: 18px; height: 18px; }
.sh-att-meta { display: grid; gap: 1px; min-width: 0; }
/* the name stays on one line (its title holds it in full); size and state wrap, so the state is never cut off on a phone */
/* the whole name stays readable on phones: it wraps instead of being cut (the server's display name is already bounded) */
.sh-att-name { display: block; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.sh-att-sub { display: block; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.sh-att-name { font-weight: 700; color: var(--shatt-ink); unicode-bidi: plaintext; }
.sh-att-sub, .sh-att-line, .sh-att-spent { color: var(--shatt-muted); font-size: 12px; }
.sh-att-msg { color: #6d2340; font-size: 12.5px; overflow-wrap: anywhere; }
.sh-att-acts { display: flex; align-items: center; }
.sh-att-chip.is-failed { border-color: #e7bccd; background: #fff9fb; }
.sh-att-chip.is-failed .sh-att-st { color: #7b244b; font-weight: 700; }
.sh-att-chip.is-ready .sh-att-st { color: var(--shatt-a); font-weight: 700; }
.sh-att-note, .sh-att-status { margin: 0; color: var(--shatt-copy); font: 600 12.5px/1.4 var(--shatt-font); }
.sh-att-status:empty { display: none; }
/* once per row, under ready documents: where a chat document is used */
.sh-att-scope { margin: 0; color: var(--shatt-muted); font: 400 12.5px/1.4 var(--shatt-font); overflow-wrap: anywhere; }
/* "View extracted information" on a ready document that is not sent yet: a quiet link-style button */
button.sh-att-lnk, button.sh-att-lnk:hover, button.sh-att-lnk:focus {
	justify-self: start; display: inline-flex; align-items: center; min-height: 32px; margin: 2px 0 0; padding: 0; border: 0; border-radius: 6px; background: transparent; box-shadow: none;
	color: var(--shatt-a); font: 700 12.5px/1.3 var(--shatt-font); text-align: left; text-decoration: underline; text-underline-offset: 2px; text-transform: none; letter-spacing: 0; white-space: normal; cursor: pointer;
}
button.sh-att-lnk:hover { color: var(--shatt-ad); }
.sh-att-bar { position: relative; display: block; height: 4px; margin-top: 4px; overflow: hidden; border-radius: 4px; background: var(--shatt-soft); }
.sh-att-bar > i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: inherit; background: var(--shatt-a); }
.sh-att-bar.is-ind > i { width: 38%; }

/* small icon buttons: Remove, Try again, Document options */
button.sh-att-ib, button.sh-att-ib:hover, button.sh-att-ib:focus {
	display: grid; place-items: center; box-sizing: border-box; width: 36px; height: 36px; min-width: 36px; margin: 0; padding: 0; border: 0; border-radius: 10px;
	background: transparent; color: var(--shatt-muted); box-shadow: none; cursor: pointer; line-height: 1;
}
button.sh-att-ib:hover, button.sh-att-ib[aria-expanded="true"] { background: var(--shatt-wash); color: var(--shatt-ink); }
.sh-att-ib svg { width: 18px; height: 18px; }

/* documents already in the conversation: under the person's message, or in the tray */
.sh-att-pchips { justify-content: flex-end; }
.sh-att-pchip { flex: 0 1 300px; }
.sh-att-pchip.is-removed { background: #f8fafb; border-style: dashed; }
.sh-att-pchip.is-removed .sh-att-name { color: var(--shatt-muted); }
.sh-att-menu { grid-column: 1 / -1; display: grid; gap: 2px; margin: 6px 0 2px; padding-top: 6px; border-top: 1px solid var(--shatt-soft); }
button.sh-att-mi, button.sh-att-mi:hover, button.sh-att-mi:focus {
	display: flex; align-items: center; min-height: 40px; margin: 0; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--shatt-ink);
	box-shadow: none; font: 600 13.5px/1.3 var(--shatt-font); text-align: left; text-transform: none; letter-spacing: 0; white-space: normal; cursor: pointer;
}
button.sh-att-mi:hover { background: var(--shatt-wash); color: var(--shatt-ad); }
.shc .shc-msg.is-user .sh-att-pchips { justify-self: end; }
.shc .shc-conv > .sh-att-traywrap { padding: 8px 14px 0; }
/* an open tray above a resumed chat's log scrolls inside itself, so the log and the message box keep their room (with
   the keyboard up too: about 390 px stay for the rest of the conversation view, never under 60 px for the list) */
.shc .shc-conv > .sh-att-traywrap .sh-att-tray[open] > .sh-att-pchips {
	max-height: max(60px, min(calc(var(--chat-viewport-height, 100vh) * .3), calc(var(--chat-viewport-height, 100vh) - 390px), 260px));
	overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 10px;
}
.shc .shc-log > .sh-att-traywrap { flex: none; }
.sh-att-tray { margin: 0; padding: 0 10px; border: 1.5px solid var(--shatt-soft); border-radius: 14px; background: #fff; }
.sh-att-tray > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--shatt-ink); font: 700 13.5px/1.3 var(--shatt-font); cursor: pointer; list-style: none; }
.sh-att-tray[open] > summary { margin-bottom: 8px; border-bottom: 1px solid var(--shatt-soft); }
/* its own open/closed chevron (display: flex drops the browser's marker), so the tray reads as something to open */
.sh-att-tray > summary::-webkit-details-marker { display: none; }
.sh-att-tray > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 6px 3px auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.sh-att-tray[open] > summary::after { margin-bottom: -3px; transform: rotate(-135deg); }
.sh-att-tray .sh-att-pchips { justify-content: flex-start; padding-bottom: 10px; }
/* phones and touch screens: Remove, Try again, Document options and the options rows reach 44 px */
@media (pointer: coarse), (max-width: 479px) {
	button.sh-att-ib, button.sh-att-ib:hover, button.sh-att-ib:focus { width: 44px; height: 44px; min-width: 44px; }
	button.sh-att-mi, button.sh-att-mi:hover, button.sh-att-mi:focus { min-height: 44px; }
	button.sh-att-lnk, button.sh-att-lnk:hover, button.sh-att-lnk:focus { min-height: 44px; margin: 0; }
}

/* the Support page: a quiet row under Ask (and under each reply box) */
.sh-att-page { display: grid; gap: 8px; min-width: 0; }
.sh-att-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.sh-att-top > .sh-att-row { flex: 1 1 100%; }
/* what can be attached, beside the labelled button (under it on a phone); also the button's description */
.sh-att-top > .sh-att-hint { flex: 1 1 180px; min-width: 0; margin: 0; color: var(--shatt-muted); font: 400 12.5px/1.4 var(--shatt-font); }
.sh-att-page button.sh-att-btn, .sh-att-page button.sh-att-btn:hover, .sh-att-page button.sh-att-btn:focus {
	width: auto; padding: 0 16px 0 12px; border: 1.5px solid var(--shatt-line); border-radius: 999px; background: #fff; font: 700 15px/1.2 var(--shatt-font);
}
.sh-att-page button.sh-att-btn:hover { border-color: var(--shatt-a); background: var(--shatt-wash); }
.sh-att-page .sh-att-pchips, .sh-att-traywrap .sh-att-pchips { justify-content: flex-start; }

/* drag and drop onto a message box */
[data-sh-att-drop] { position: relative; outline: 2px dashed #246b5f !important; outline-offset: 2px; }
:is(.sh-sc, .shc-support, .shc-supchat, .shc-solo) [data-sh-att-drop] { outline-color: #7b244b !important; }
[data-sh-att-drop]::after {
	content: attr(data-sh-att-drop); position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; border-radius: inherit;
	background: rgba(255, 255, 255, .92); color: #122c3a; font: 800 15px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; pointer-events: none;
}

/* dialogs: the hub's card, full-width sheets on small phones; long content scrolls inside */
.sh-att-dlg {
	box-sizing: border-box; width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: 0;
	border: 0; border-radius: 22px; background: #fff; color: var(--shatt-ink); box-shadow: 0 30px 60px -24px rgba(18, 44, 58, .55); font: 400 15px/1.55 var(--shatt-font); overflow: hidden; text-align: left;
}
.sh-att-dlg[open] { display: flex; flex-direction: column; }
.sh-att-dlg::backdrop { background: rgba(15, 34, 48, .45); }
.sh-att-dlg *, .sh-att-dlg *::before, .sh-att-dlg *::after { box-sizing: border-box; }
.sh-att-dlg-t { flex: none; margin: 0; padding: 20px 22px 8px; color: var(--shatt-ink); font: 800 19px/1.25 "Sneaky Display", var(--shatt-font); letter-spacing: -.01em; overflow-wrap: anywhere; }
/* the heading takes focus when the view opens (tabindex -1, not a control): no ring cut by the dialog's rounded edge */
.sh-att-dlg .sh-att-dlg-t:focus, .shc .sh-att-dlg .sh-att-dlg-t:focus-visible { outline: none !important; box-shadow: none !important; }
.sh-att-dlg-b { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 4px 22px 10px; }
.sh-att-dlg-b > p, .sh-att-sec > p { margin: 0 0 10px; color: var(--shatt-copy); }
.sh-att-dlg-f { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 22px 18px; border-top: 1px solid var(--shatt-soft); }
button.sh-att-b, button.sh-att-b:hover, button.sh-att-b:focus {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 0 20px; border: 1.5px solid var(--shatt-line); border-radius: 999px;
	background: #fff; color: var(--shatt-ink); box-shadow: none; font: 700 15px/1.15 var(--shatt-font); text-transform: none; letter-spacing: 0; white-space: normal; cursor: pointer;
}
button.sh-att-b:hover { border-color: var(--shatt-a); }
button.sh-att-b.is-primary, button.sh-att-b.is-primary:focus { border-color: var(--shatt-a); background: var(--shatt-a); color: #fff; }
button.sh-att-b.is-primary:hover { border-color: var(--shatt-ad); background: var(--shatt-ad); color: #fff; }
button.sh-att-b[disabled] { opacity: .65; cursor: progress; }
.sh-att-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; margin: 4px 0 8px; padding: 12px; border: 1.5px solid var(--shatt-line); border-radius: 14px; background: var(--shatt-wash); color: var(--shatt-ink); font-weight: 600; cursor: pointer; }
.sh-att-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--shatt-a); }
/* the Privacy Policy link under the agreement: the dialog's own colour, underlined (the parent theme paints links pink, bare) */
.sh-att-dlg .sh-att-more a, .sh-att-dlg .sh-att-more a:visited { color: var(--shatt-a); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.sh-att-dlg .sh-att-more a:hover, .sh-att-dlg .sh-att-more a:focus { color: var(--shatt-ad); }
.sh-att-err { margin: 0 0 8px; color: #7b244b; font-weight: 700; }
.sh-att-err:empty { display: none; }
.sh-att-fine, .sh-att-vmeta { color: var(--shatt-muted); font-size: 13.5px; }
.sh-att-notice, .sh-att-this { padding: 10px 12px; border-radius: 12px; background: var(--shatt-wash); }
.sh-att-limits { margin: 0 0 12px; }
.sh-att-limits-t { margin: 0 0 4px; font-weight: 700; color: var(--shatt-ink); }
.sh-att-limits ul { margin: 0; padding-left: 20px; color: var(--shatt-copy); }
.sh-att-sec h3 { margin: 16px 0 6px; color: var(--shatt-ink); font: 700 15px/1.3 var(--shatt-font); overflow-wrap: anywhere; }
.sh-att-pre { white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.sh-att-tw { max-width: 100%; margin: 6px 0 12px; overflow-x: auto; }
.sh-att-table { border-collapse: collapse; min-width: 100%; font-size: 13.5px; }
.sh-att-table :is(th, td) { padding: 6px 8px; border: 1px solid var(--shatt-soft); color: var(--shatt-ink); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.sh-att-table th { background: var(--shatt-wash); font-weight: 700; }
@media (max-width: 479px) {
	.sh-att-dlg { width: 100%; max-width: 100%; max-height: 92vh; max-height: 92dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
	.sh-att-dlg-f > button.sh-att-b { flex: 1 1 100%; }
	.sh-att-dlg-t { padding: 18px 18px 8px; }
	.sh-att-dlg-b { padding: 4px 18px 10px; }
	.sh-att-dlg-f { padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px)); }
}
/* from 360 px the agreement's and the removal's two buttons fit side by side (more of their text stays in view); the
   view keeps its stack for its long "Remove document information" */
@media (min-width: 360px) and (max-width: 479px) {
	.sh-att-dlg:is(.is-consent, .is-del) .sh-att-dlg-f > button.sh-att-b { flex: 1 1 0; }
}

/* keyboard focus where the hub's own ring does not reach (the Support page and the dialogs opened there); inside the hub
   its .shc :focus-visible ring still wins */
:is(button.sh-att-btn, button.sh-att-ib, button.sh-att-mi, button.sh-att-b, button.sh-att-lnk, .sh-att-tray > summary, .sh-att-tw, .sh-att-more a):focus-visible { outline: 2px solid var(--shatt-ink); outline-offset: 2px; }

/* motion: the indeterminate bar slides only when motion is welcome; buttons ease colours only (the parent theme's
   "transition: all" would also animate the focus ring in, instead of showing it at once) */
:is(button.sh-att-btn, button.sh-att-ib, button.sh-att-mi, button.sh-att-b, button.sh-att-lnk) { transition: none; }
@media (prefers-reduced-motion: no-preference) {
	:is(button.sh-att-btn, button.sh-att-ib, button.sh-att-mi, button.sh-att-b, button.sh-att-lnk) { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
	.sh-att-bar.is-ind > i { animation: sh-att-slide 1.2s ease-in-out infinite; }
	.sh-att-bar > i { transition: width .15s linear; }
	@keyframes sh-att-slide { from { transform: translateX(-100%); } to { transform: translateX(270%); } }
}
@media (prefers-reduced-motion: reduce) {
	.sh-att-bar.is-ind > i { width: 100%; opacity: .45; }
	:is(.sh-att-btn, .sh-att-ib, .sh-att-mi, .sh-att-b, .sh-att-lnk, .sh-att-chip, .sh-att-pchip, .sh-att-bar > i, .sh-att-dlg) { transition: none !important; animation: none !important; }
}
@media print { :is(.sh-att-btn, .sh-att-row, .sh-att-traywrap, .sh-att-slot) { display: none !important; } }