/* Companion application patterns. See GUIDELINES.md#application-patterns. */
.grow { flex: 1 1 180px; min-width: 0; }
.demo-note { margin-top: 20px; }
.specimen > p + .button,.specimen > p + button,.specimen > p + .row { margin-top: 20px; }
.specimen > .button:last-child { align-self: start; }
.switch { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 12px; }
.switch > span { display: block; flex: 0 0 40px; width: 40px; min-width: 40px; height: 24px; min-height: 24px; overflow: visible; }
.switch > input { flex: none; width: 40px; height: 24px; min-height: 0; }
.topic-choices { border: 1px solid var(--pv-control); border-radius: 20px; padding: 8px; display: grid; gap: 4px; }
.topic-choice { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 12px; cursor: pointer; }
.topic-choice:has(:checked) { background: var(--pv-selection-bg); color: var(--pv-selection-fg); }
.topic-choice:hover { background: var(--pv-muted); }
.field-label { font-weight: 600; }
.application-navbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; background: var(--pv-surface); border: 1px solid var(--pv-border); padding: 16px 20px; border-radius: 16px; }
.application-navbar .brand { padding: 0; }
.application-navbar .brand img { width: 96px; }
.app-nav-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.nav-divider { width: 1px; height: 28px; background: var(--pv-border); }
.application-navbar select { min-height: 40px; padding: 8px 12px; }
.app-popover { position: relative; max-width: 100%; }
.app-popover > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; gap: 8px; align-items: center; padding: 10px 14px; border: 1px solid var(--pv-border); border-radius: 999px; }
.app-popover > summary::-webkit-details-marker { display: none; }
.app-popover[open] > summary,.app-popover > summary:hover { background: var(--pv-brand-soft); }
.popover-content { position: absolute; top: calc(100% + 8px); left: 0; width: 270px; max-width: calc(100vw - 48px); z-index: 40; padding: 16px; display: grid; gap: 12px; background: var(--pv-surface); border: 1px solid var(--pv-border); box-shadow: 0 12px 32px #0002; border-radius: 16px; }
.app-nav-actions .popover-content { left: auto; right: 0; }
.combo { position: relative; display: grid; gap: 8px; margin-bottom: 20px; }
.combo-options { max-height: 240px; overflow-y: auto; border: 1px solid var(--pv-border); border-radius: 16px; padding: 6px; background: var(--pv-surface); }
.combo-option { padding: 12px; min-height: 44px; border-radius: 10px; cursor: pointer; }
.combo-option[data-active],.combo-option[aria-selected=true] { background: var(--pv-selection-bg); color: var(--pv-selection-fg); }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list:empty { display: none; }
.chip-list button { border: 1px solid var(--pv-border); border-radius: 999px; padding: 8px 12px; background: var(--pv-brand-soft); color: var(--pv-heading); }
.detail-drawer { position: fixed; inset: 16px 16px 16px auto; margin: 0; width: min(480px,calc(100vw - 32px)); max-height: none; height: calc(100dvh - 32px); }
.detail-drawer form { display: flex; flex-direction: column; min-height: 100%; }
.drawer-content { flex: 1; margin-top: 24px; }
.table-toolbar { padding: 12px 0; }
.sort-button { background: none; border: 0; color: inherit; padding: 8px 0; font-weight: 600; }
#account-table { width: 100%; }
#account-table tr[data-selected] { background: var(--pv-selection-bg); }
.dropzone { border: 2px dashed var(--pv-control); border-radius: 20px; padding: 28px; text-align: center; display: grid; justify-items: center; gap: 12px; }
.dropzone.is-dragging,.dropzone:focus-within { background: var(--pv-selection-bg); border-color: var(--pv-focus); }
.upload-list,.member-list,.link-list { list-style: none; padding: 0; margin: 0; }
.upload-item { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--pv-border); }
.upload-item .upload-copy { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.upload-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 12px; }
.upload-item progress { width: 100%; height: 8px; }
.tooltip-wrap { display: inline-flex; position: relative; }
.tooltip { position: absolute; bottom: calc(100% + 8px); left: 0; width: 240px; padding: 12px; border: 1px solid var(--pv-border); border-radius: 12px; background: var(--pv-raised); color: var(--pv-text); box-shadow: 0 8px 24px #0002; z-index: 5; visibility: hidden; }
.tooltip-wrap:not([data-dismissed]):hover .tooltip,.tooltip-wrap:not([data-dismissed]):focus-within .tooltip { visibility: visible; }
.wizard-steps { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 24px; counter-reset: steps; }
.wizard-steps li { flex: 1; padding: 12px 8px; border-bottom: 3px solid var(--pv-border); counter-increment: steps; }
.wizard-steps li::before { content: counter(steps) '. '; }
.wizard-steps [aria-current] { color: var(--pv-heading); border-color: var(--pv-red); font-weight: 600; }
.review-list { display: grid; grid-template-columns: minmax(100px,1fr) 2fr; gap: 12px; }
.review-list dd { margin: 0; overflow-wrap: anywhere; }
#connection-notice { display: flex; align-items: center; gap: 12px; }
#connection-notice .icon-button { margin-left: auto; flex-shrink: 0; }
.member-list { max-height: 380px; overflow: auto; border: 1px solid var(--pv-border); border-radius: 16px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.member-list > li { flex: 0 0 auto; }
.member-row { display: flex; align-items: center; gap: 14px; width: 100%; height: auto; min-height: 72px; padding: 12px 14px; border: 1px solid transparent; border-radius: 12px; color: var(--pv-text); background: var(--pv-surface); text-align: left; line-height: 1.5; flex-shrink: 0; }
.member-row:hover { background: var(--pv-muted); }
.member-row[aria-pressed=true] { background: var(--pv-selection-bg); border-color: var(--pv-control); }
.member-row .avatar { width: 40px; height: 40px; flex: 0 0 40px; }
.member-copy { display: grid; gap: 4px; min-width: 0; flex: 1; }
.member-copy strong,.member-copy small { display: block; line-height: 1.5; overflow-wrap: anywhere; white-space: normal; }
.member-check { visibility: hidden; }
.member-row[aria-pressed=true] .member-check { visibility: visible; }
.pv-skeleton { position: relative; display: block; background: var(--pv-muted); border-radius: 6px; overflow: hidden; }
.pv-skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,transparent,var(--pv-border),transparent); transform: translateX(-100%); animation: skeleton-shimmer 1.5s linear infinite; }
.pv-skeleton.line { width: 100%; height: 14px; margin: 10px 0; }
.pv-skeleton.short { width: 60%; }
.pv-skeleton.circle { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; }
.pv-skeleton.block { height: 100px; width: 100%; }
.pv-skeleton.bubble { width: 70%; height: 46px; margin-bottom: 16px; border-radius: 16px; }
.pv-skeleton.outgoing { width: 55%; margin-left: auto; }
.skeleton-row { display: flex; align-items: center; gap: 14px; min-height: 72px; }
.skeleton-table-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; padding: 10px 0; }
.skeleton-gallery.no-shimmer .pv-skeleton::after { animation: none; display: none; }
@keyframes skeleton-shimmer { to { transform: translateX(100%); } }
.example-page > .application-navbar { border-radius: 0; border-width: 0 0 1px; }
.example-navigation { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 24px; }
.example-navigation a { color: var(--pv-text); padding: 10px 16px; border-radius: 10px; }
.example-navigation [aria-current] { background: var(--pv-selection-bg); color: var(--pv-selection-fg); box-shadow: inset 0 -2px var(--pv-red); }
#example-main { max-width: 1600px; padding: 24px; margin: auto; }
#example-main > .page-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
#example-main > .button { margin-bottom: 24px; }
.inbox-layout { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 16px; }
.conversation { min-height: 620px; display: flex; flex-direction: column; }
.conversation .chat-history { flex: 1; }
.ticket-identity { display: flex; min-width: 0; align-items: center; gap: 6px; }
.ticket-enterprise { display: inline-flex; min-width: 0; max-width: 100%; align-items: center; gap: 4px; color: var(--pv-secondary); font-size: 12px; font-weight: 400; line-height: 18px; }
.ticket-enterprise > svg { flex: 0 0 auto; }
.ticket-enterprise > span { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.ticket-column .ticket-identity > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-column .ticket-enterprise { flex: 0 1 auto; max-width: 50%; }
.ticket-column .ticket-enterprise > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chat-title .ticket-identity { flex-wrap: wrap; }
#chat-title .ticket-identity > strong { min-width: 0; overflow-wrap: anywhere; }
#example-reply-form { margin-top: 20px; }
#example-reply-form textarea { margin-top: 12px; }
.link-list a { display: block; padding: 12px; border-radius: 8px; }
.link-list a:hover { background: var(--pv-muted); }
@media (max-width: 640px) {
 .application-navbar { padding: 16px; gap: 8px; }
 .app-nav-actions { margin-left: 0; }
 .nav-divider { display: none; }
 .detail-drawer { inset: auto 8px 8px; width: calc(100vw - 16px); height: min(85dvh,700px); }
 .inbox-layout { grid-template-columns: minmax(0,1fr); }
 #example-main { padding: 16px; }
 .popover-content { max-width: calc(100vw - 48px); }
 .wizard-steps { font-size: 12px; }
 .review-list { grid-template-columns: 1fr; }
 .review-list dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .pv-skeleton::after { animation: none; display: none; } }

.specimen > label.switch { display: flex; }
/* Visually hidden file input remains keyboard reachable without inheriting full-width field sizing. */
.dropzone { position: relative; }
#upload-files { width: 1px; max-width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; top: 0; left: 0; }

.row > .switch { margin: 0; }
p a:not(.button),.steps-list a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width:640px) {
 .application-navbar .app-popover[open] { flex-basis: 100%; }
 .application-navbar .popover-content { position: static; margin-top: 8px; width: min(270px,100%); }
}
/* Keep select text and chevrons away from the rounded right edge. */
select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--pv-select-chevron);
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
  padding-right: 48px;
}

.member-copy strong { font-weight:600; }

.api-integration-specimen { margin-top: 24px; }
.api-specimen-endpoint { flex: 1 1 220px; min-width: 0; }
#api-specimen-editor { width: min(760px,calc(100vw - 32px)); }
#api-specimen-editor form { display: grid; min-width: 0; gap: 16px; }
#api-specimen-editor pre { max-height: 280px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
@media(max-width:640px) { #api-specimen-editor .row > .field { width: 100%; min-width: 0; } }

.api-validation { padding: 12px 16px; border-radius: 12px; background: var(--pv-error-bg); color: var(--pv-error-fg); font-size: 14px; line-height: 20px; }
.api-validation button { display: block; width: 100%; padding: 0; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.api-validation button:hover { text-decoration: underline; }
.api-validation button:focus-visible { outline: 2px solid var(--pv-focus); outline-offset: 3px; }

.api-integration-specimen > .card > h3 { font-size: 16px; line-height: 24px; font-weight: 600; }

/* Equal-height navbar controls, including notification badges. */
.application-navbar .app-popover > summary,
.application-navbar select,
.application-navbar > button { height:44px; min-height:44px; }
.application-navbar .app-popover > summary { padding:0 14px; }
.application-navbar .app-popover > summary .badge { height:24px; min-width:24px; padding:0 7px; line-height:24px; justify-content:center; flex-shrink:0; }


/* A compact, theme-aware alternative to the native language dropdown. */
.language-toggle { display:inline-flex; align-items:center; flex:none; gap:2px; height:44px; padding:3px; border:1px solid var(--pv-border); border-radius:999px; background:var(--pv-surface); }
.language-toggle > button { display:inline-grid; place-items:center; min-width:38px; height:36px; min-height:36px; padding:0 10px; border:0; border-radius:999px; font:600 12px/18px var(--pv-font-sans); color:var(--pv-secondary); background:transparent; }
.language-toggle > button[aria-pressed=true] { background:var(--pv-heading); color:var(--pv-surface); }
.language-toggle > button:disabled { background:transparent; color:var(--pv-disabled-fg); opacity:.65; cursor:not-allowed; }
.language-toggle > button:focus-visible { outline-offset:2px; }