/* RoyalDent 共用品牌樣式
 * 用途：前台商城與後台的顏色、字體、按鈕及手機版外觀。
 * 找設定：搜尋下方中文區段名稱，或搜尋 h1、button、.price 等選取器。
 * h1 是主標題；#content h1 表示只選取 content 區域內的主標題。
 */

/* 01｜全站品牌色與字體：--brand 是品牌色，--brand-dark 是深色按鈕色 */
:root {
  --brand: #60bec5;
  --brand-dark: #236d75;
  --ink: #30383c;
  --line: #d9e3e5;
  font-family: Arial, "Microsoft JhengHei", "PingFang TC", sans-serif;
  color: var(--ink);
  background: #f5f5f5;
}

/* 商品目錄：搜尋與分類並列，手機改為直排 */
.catalog-filters {
  display: flex;
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
}
.catalog-filters label {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.catalog-filters .search {
  margin: 0;
}
@media (max-width: 650px) {
  .catalog-filters {
    flex-direction: column;
    align-items: stretch;
  }
}

/* 02｜後台「商品與尺寸編輯」方框連結 */
.tabs > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px;
  border: 1px solid #c9e3e6;
  border-radius: 5px;
  background: #edf7f8;
  color: var(--brand-dark);
  font: inherit;
  text-decoration: none;
}

.tabs > a:hover {
  background: #195961;
  color: white;
}

/* 手機版｜後台方框連結的內部留白 */
@media (max-width: 520px) {
  .tabs > a {
    padding: 10px 14px;
  }
}

/* 03｜頁面背景與標題 */
body {
  color: var(--ink);
  background: #f5f5f5;
}

h1,
h2,
h3 {
  color: #30383c;
  letter-spacing: -.025em;
}

h1 {
  font-weight: 500;
  font-size: 40px;
}

a {
  color: var(--brand-dark);
}

header {
  border-color: var(--line);
}

/* 04｜一般按鈕與滑鼠移入效果 */
button {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  border-radius: 5px;
  min-height: 44px;
}

button:hover:not(:disabled) {
  background: #195961;
  color: white;
}

button:disabled {
  cursor: not-allowed;
}

/* 05｜輸入欄位、對話框與卡片邊框 */
input,
select,
textarea,
dialog,
fieldset,
.card {
  border-color: var(--line);
}

input,
select,
textarea {
  font-family: inherit;
  font-size: 16px;
}

/* 06｜導覽列、後台選項及尺寸選擇按鈕 */
nav button,
.tabs button,
.diameter-tabs button,
.selection-line button {
  background: #edf7f8;
  color: #236d75;
  border: 1px solid #c9e3e6;
}

.diameter-tabs [aria-pressed="true"] {
  background: var(--brand-dark);
  color: white;
}

/* 07｜頁首 ROYALDENT 品牌文字 */
.brand {
  font-size: 27px;
  font-weight: 400;
  letter-spacing: -.04em;
  color: #449da5;
  white-space: nowrap;
}

.brand strong {
  font-weight: 800;
}

.brand span {
  color: #909699;
  margin: 0 2px;
}

/* 08｜說明文字、表格、價格與商品卡片 */
.muted,
small,
footer,
.variant-note,
th {
  color: #57676c;
}

th,
.variant-desktop th {
  background: #edf7f8;
}

.source {
  background: #f5f5f5;
}

.price {
  color: #236d75;
}

.card {
  box-shadow: 0 3px 14px #263a4005;
  border-radius: 8px;
}

/* 商品圖片區統一白底，避免白底原圖周圍出現灰色邊框區。 */
.card img,
.card-visual,
.card-visual img,
.gallery-main,
.gallery-thumbs img,
.photo-card img,
.product-image,
.catalog-thumb {
  background: #fff;
}

/* 09｜彈出視窗遮罩與鍵盤焦點 */
dialog::backdrop {
  background: #26383b66;
}

:focus-visible {
  outline: 3px solid #60bec5;
  outline-offset: 3px;
}

.variant-footer {
  border-color: var(--line);
}

/* 10｜Excel 匯入預覽表格 */
.import-scroll {
  overflow: auto;
  margin: 18px 0;
  max-height: 500px;
}

.import-scroll table {
  min-width: 680px;
}

.import-scroll th,
.import-scroll td {
  padding: 12px;
  text-align: left;
  vertical-align: top;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.import-scroll th {
  position: sticky;
  top: 0;
}

.import-error {
  background: #fff0ef;
  color: #9b3027;
}

/* 11｜可展開說明與通知 */
summary {
  cursor: pointer;
  padding: 14px;
  background: #edf7f8;
  border-radius: 6px;
}

#notice:empty {
  display: none;
}

/* 12｜手機版設定：只在畫面寬度不超過 520px 時生效；保留你設定的 h1 40px */
@media (max-width: 520px) {
  .brand {
    font-size: 24px;
  }

  h1 {
    font-size: 28px;
  }

  button {
    padding: 10px 14px;
  }

  .import-scroll {
    max-height: 60vh;
  }
}

/* Supplier column mapping: readable controls on desktop and mobile. */
.mapping-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin: 16px 0; }
.mapping-fields label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mapping-fields select { width: 100%; }
.mapping-fields .import-scroll { grid-column: 1 / -1; }

/* Keep preview columns readable; narrow screens scroll horizontally. */
.import-scroll .import-preview-table {
  table-layout: fixed;
  width: 1864px;
  min-width: 1864px;
}
.import-preview-table th,
.import-preview-table td {
  box-sizing: border-box;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.5;
}
.import-preview-table th { background: #edf7f8; z-index: 1; }
.import-scroll:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }

/* Editable upload staging: keep spreadsheet columns readable. */
.raw-import-table { width: max-content; table-layout: fixed; }
.raw-import-table td { min-width: 200px; padding: 6px; }
.raw-import-table textarea { width: 100%; min-width: 190px; box-sizing: border-box; resize: vertical; }
.raw-import-table th { min-width: 50px; }

/* Shared storefront filters remain available while browsing long catalogs. */
.catalog-filters {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f5f5f5;
  padding: 10px 0 12px;
  border-bottom: 1px solid #d9e3e5;
  box-shadow: 0 5px 8px -8px #304c59;
}
.catalog-filters label { margin-top: 0; margin-bottom: 0; }
@media (max-width: 650px) {
  .catalog-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .catalog-filters > button { grid-column: 1 / -1; min-height: 36px; padding: 4px 10px; }
  .catalog-filters input, .catalog-filters select { width: 100%; min-width: 0; }
}

/* Preserve source resolution: small product photos must not fill the card by scaling up. */
.grid .product-image-button{min-height:0;display:flex;align-items:center;justify-content:center;padding:12px 0}
.grid .product-image-button img.product-native-image,
dialog img.product-native-image,
.product-gallery img.gallery-main,
.card-visual img{display:block;width:auto;height:auto;min-width:0;min-height:0;max-width:100%;max-height:var(--product-card-image,200px);object-fit:scale-down;margin:0 auto}
dialog img.product-native-image,.product-gallery img.gallery-main{max-height:60vh}
.card-visual{height:auto;min-height:0;padding:12px 0}

/* Plain close glyph; retain a non-circular keyboard focus indicator. */
.product-detail-close-bar .product-detail-close,
dialog.variant-dialog .variant-close{border:0;border-radius:0;background:transparent;box-shadow:none;outline:none}
.product-detail-close-bar .product-detail-close:hover,
dialog.variant-dialog .variant-close:hover{background:transparent;color:#174c54}
.product-detail-close-bar .product-detail-close:focus-visible,
dialog.variant-dialog .variant-close:focus-visible{outline:none;text-decoration:underline;text-underline-offset:5px}

/* Wolf Dataware wordmark matches the former homepage eyebrow typography. */
header .brand{font-family:inherit;font-size:20px;font-weight:400;letter-spacing:.15em;text-transform:uppercase;color:#216d76}

/* Quiet, consistent conversation-first interface. */
html{background:#fff}
body{background:#fff;color:#25292c;min-height:100vh;min-height:100dvh}
body>header{background:#fff;border-bottom:1px solid #edf0f1;padding:12px 24px;gap:18px;min-height:68px}
body>main{max-width:1440px;padding:24px 28px}
button,input,select,textarea{font-family:inherit}
button{transition:background-color .15s ease,color .15s ease}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #7d999f;outline-offset:3px}
body:has(.conversation-main) .wolfpilot-hero{max-width:760px;margin:40px auto 32px}
.wolfpilot-hero h1{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:500;letter-spacing:-.035em;line-height:1.2}
.wolfpilot-hero p{color:#71777b;font-size:.95rem}
.project-workspace{gap:32px;grid-template-columns:210px minmax(0,1fr) 180px}
.conversation-sidebar,.conversation-store-sidebar{padding:8px 0}
.conversation-sidebar .conversation-new,.conversation-sidebar .project-list-item,.conversation-store-sidebar .wolfpilot-stores button{border:0;background:transparent;color:#3d4549;box-shadow:none;border-radius:10px;min-height:42px;padding:10px 12px;font-size:.9rem;font-weight:400}
.conversation-sidebar .project-list-item:hover,.conversation-sidebar .conversation-new:hover,.conversation-store-sidebar .wolfpilot-stores button:hover{background:#f2f4f4}
.conversation-sidebar .project-list-item[aria-current="true"]{background:#edf0f0}
.conversation-history h2,.conversation-store-sidebar .wolfpilot-stores h2{font-size:.78rem;font-weight:600;color:#7c8589;letter-spacing:.02em;margin:16px 12px 8px}
.conversation-input-shell{background:#f5f6f6;border:1px solid #e6e9e9;box-shadow:none;border-radius:24px;padding:12px 14px}
.conversation-input-shell:focus-within{border-color:#b8c3c6}
:is(.conversation-main .project-composer,.sales-chat-composer) textarea{font-size:1rem;color:#30373a}
.project-chat .project-message{line-height:1.8;margin-bottom:24px}
.project-chat .project-message.user{background:#f1f3f3;border-radius:22px}
.conversation-author{color:#657278;font-size:.78rem}
.account-menu{box-shadow:0 12px 48px #162f381a}
.conversation-drawer{background:#f9fafa}
.conversation-drawer-top button{background:transparent;color:#414d52;border:0}
@media(max-width:1000px) and (min-width:751px){.project-workspace{grid-template-columns:170px minmax(0,1fr) 145px;gap:20px}}
@media(max-width:750px){
 body>header{padding:12px 66px 12px 16px;min-height:64px}
 body>main{padding:20px 16px}
 body:has(.conversation-main) .wolfpilot-hero{margin:24px auto 28px}
 .wolfpilot-hero h1{font-size:1.8rem}
 .wolfpilot-hero p{font-size:.9rem;line-height:1.6}
 .project-workspace{gap:12px}
 .conversation-store-sidebar{margin-top:16px;padding-top:8px;border-top:1px solid #eff1f1}
 .conversation-store-sidebar .wolfpilot-stores button{background:#f6f7f7;text-align:left}
 .conversation-input-shell{padding:10px 12px}
}

/* Active chats keep the transcript above a persistent composer. */
.project-workspace.has-conversation .conversation-main{height:calc(100dvh - 120px);min-height:320px;display:flex;flex-direction:column;overflow:hidden}
.has-conversation .project-chat{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 8px 24px;scrollbar-width:thin}
.has-conversation .conversation-main .project-composer{flex:none;position:static;margin:0 auto;padding:12px 0 max(8px,env(safe-area-inset-bottom));background:#fff}
.has-conversation .conversation-author{display:none}
.has-conversation .project-message.assistant{margin-top:24px;margin-bottom:32px}
@media(max-width:750px){
 .project-workspace.has-conversation .conversation-main{height:calc(100dvh - 108px);min-height:260px}
 .has-conversation .conversation-store-sidebar{display:none}
 .has-conversation .project-chat{padding:12px 0 20px}
}

.conversation-work-meta{border-bottom:1px solid #e7e9eb;color:#8a9094;font-size:.85rem;line-height:1.5;padding-bottom:10px;margin-bottom:20px}
.conversation-work-meta:empty{padding-bottom:0}

/* Shared new-chat action beside the account avatar on every screen. */
body:has(.conversation-main)>header{position:relative}
.conversation-mobile-heading{display:flex;position:absolute;top:12px;right:76px;height:40px;align-items:center;z-index:2}
.conversation-mobile-title{display:none}
.conversation-mobile-heading button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;flex:0 0 40px;padding:9px;border:0;border-radius:12px;background:transparent;color:#42494d}
.conversation-mobile-heading button:hover{background:#f0f2f2}
.conversation-mobile-heading button:active{background:#e6eaea}
.conversation-mobile-heading button svg{width:22px;height:22px;display:block}
@media(max-width:750px){
 .conversation-mobile-heading{top:12px;left:56px;right:64px;height:40px;gap:8px}
 .conversation-mobile-title{display:block;flex:1;min-width:0;font-size:.95rem;font-weight:500}
}

/* Floating chat controls, shared by desktop and mobile. */
body:has(.conversation-main) #account-avatar{display:none}
.conversation-mobile-heading{right:24px}
.conversation-floating-actions{display:flex;align-items:center;gap:4px;padding:3px 7px;border:1px solid #fff;border-radius:28px;background:rgba(248,249,249,.94);box-shadow:0 4px 22px #26323812,0 0 0 1px #edf0f080;backdrop-filter:blur(14px);flex-shrink:0}
.conversation-floating-actions button{width:38px;height:34px;min-height:34px;flex-basis:38px;padding:6px;border-radius:50%;color:#292e31}
.conversation-floating-actions button:last-child{font-size:27px;line-height:1;font-weight:600;padding:0;letter-spacing:1px}
@media(max-width:750px){.conversation-mobile-heading{right:14px;left:62px;gap:12px}.conversation-mobile-title{font-size:.9rem}.conversation-floating-actions{gap:2px;padding:3px 5px}}

.conversation-input-shell button{display:flex;align-items:center;justify-content:center;border-radius:10px;background:#171717;color:#fff}
.conversation-input-shell button:disabled{background:#e9e9e9;color:#a5a5a5}

/* Store navigation follows chat history in the left sidebar. */
.project-workspace{grid-template-columns:210px minmax(0,1fr)}
.conversation-sidebar .conversation-store-sidebar{position:static;margin-top:24px;padding-top:16px;border-top:1px solid #edf0f1;width:100%}
.conversation-sidebar .conversation-store-sidebar .wolfpilot-stores{display:flex;flex-direction:column;gap:4px;margin:0}
@media(max-width:1000px) and (min-width:751px){.project-workspace{grid-template-columns:170px minmax(0,1fr)}}
@media(max-width:750px){
 .project-workspace{grid-template-columns:1fr}
 .has-conversation .conversation-sidebar .conversation-store-sidebar{display:block}
 .conversation-sidebar .conversation-store-sidebar .wolfpilot-stores button{background:transparent}
}

/* Compact catalog photos keep product information visible on small screens. */
.grid .product-image-button{padding:8px 0}
.grid .product-image-button img.product-native-image{width:auto;height:auto;min-height:0;max-width:100%;max-height:220px;object-fit:scale-down}
@media(max-width:750px){.grid .product-image-button img.product-native-image{max-height:180px;max-width:85%}}

/* Shared product image limits across cards, detail pages and recommendations. */
:root{--product-card-image:200px;--product-detail-image:300px;--product-recommendation-image:150px}
.card img,.card-visual img,.photo-card img{width:auto;height:auto;min-width:0;min-height:0;max-width:100%;max-height:var(--product-card-image);object-fit:scale-down;margin-inline:auto}
.grid .product-image-button img.product-native-image{max-height:var(--product-card-image);max-width:min(100%,240px)}
.product-detail-page>img.product-native-image,dialog img.product-native-image,.product-gallery img.gallery-main{width:auto;height:auto;min-height:0;max-width:min(100%,380px);max-height:var(--product-detail-image);object-fit:scale-down;display:block;margin:16px auto}
.recommendation-grid img.product-native-image{width:auto;height:auto;min-height:0;max-height:var(--product-recommendation-image);max-width:min(100%,200px);object-fit:scale-down}
@media(max-width:750px){:root{--product-card-image:160px;--product-detail-image:220px;--product-recommendation-image:120px}}

/* Illustrations include generous internal margins; give their canvas more room. */
.grid .product-image-button img.product-native-image.product-illustration{max-height:260px;max-width:min(100%,300px)}
@media(max-width:750px){.grid .product-image-button img.product-native-image.product-illustration{max-height:240px;max-width:100%}}

.conversation-help{background:transparent;border:0;color:#557078;font-size:.8rem;min-height:32px;padding:4px 8px;margin-top:4px}
.case-share-dialog{width:min(600px,calc(100vw - 28px));max-height:85dvh;overflow:auto;border:1px solid #e1e6e8;border-radius:18px;padding:24px}
.case-share-dialog textarea{width:100%}.case-share-dialog .check{display:flex;flex-direction:row;align-items:flex-start}.case-share-dialog button{margin-right:8px}.case-summary{white-space:pre-wrap}

.support-route{border-top:1px solid #e4e9ea;padding-top:16px;color:#557078;font-size:.9rem}.support-chat-log>button{background:#f1f4f4;color:#344b50;border:0;font-size:.85rem}.support-transcript{max-height:320px;overflow:auto;background:#f7f8f8;padding:12px;border-radius:12px}.support-transcript:empty{display:none}.support-chat-log p{white-space:pre-wrap}

/* Shift desktop transcript and composer slightly toward the sidebar. */
@media(min-width:1001px){
 .project-workspace .conversation-main{padding-right:80px;box-sizing:border-box;min-width:0}
}

/* The rep workspace uses the responder's perspective. */
.support-transcript{display:flex;flex-direction:column;gap:14px;max-height:460px;background:#fff}
.support-transcript .support-bubble{max-width:80%;padding:12px 16px;border-radius:18px;background:#f3f4f4;overflow-wrap:anywhere}
.support-transcript .incoming{align-self:flex-start}.support-transcript .outgoing{align-self:flex-end;background:#eaf2f3}
.support-bubble strong{font-size:.8rem;color:#627277}.support-bubble p{margin:8px 0 0}
.quote-panel{margin:20px 0}.quote-card{border:1px solid #dfe5e7;border-radius:16px;padding:18px;margin:12px 0;background:#fff;overflow-wrap:anywhere}
.quote-panel form{display:flex;flex-direction:column;gap:12px;padding:16px 0}.quote-panel label{display:flex;flex-direction:column;gap:6px}.quote-panel .check{flex-direction:row;align-items:center}.quote-panel .check input{width:auto}
.quote-item-editor{display:grid;grid-template-columns:minmax(0,2fr) minmax(60px,1fr) minmax(80px,1fr) auto;gap:8px;margin:8px 0}.quote-item-editor input{min-width:0;width:100%}
@media(max-width:750px){.quote-item-editor{grid-template-columns:1fr 1fr}.quote-item-editor input:first-child{grid-column:1/-1}.support-transcript .support-bubble{max-width:90%}}

/* Sales workspace shares the quiet, conversation-first home layout. */
.sales-page{max-width:1440px!important;margin:auto;padding:24px!important}
.sales-page>h1{font-size:1.45rem;margin:0 0 22px;font-weight:550}
.sales-workspace{display:grid;grid-template-columns:260px minmax(0,1fr);gap:36px;align-items:start}
.sales-sidebar{min-width:0;max-height:calc(100dvh - 170px);overflow:auto;padding:0 12px 20px 0}
.sales-sidebar h2{font-size:.85rem;color:#758086;margin:8px 0 12px}.sales-sidebar>select{width:100%;margin-bottom:12px}
.sales-case-nav{display:flex;flex-direction:column;gap:6px}.sales-case-link{display:flex;flex-direction:column;gap:6px;text-align:left;width:100%;background:transparent!important;color:#30373a!important;border:0!important;border-radius:14px!important;padding:14px!important}
.sales-case-link[aria-current=true]{background:#eff1f1!important}.sales-case-link:hover{background:#f6f7f7!important}
.sales-case-link span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:.85rem;font-weight:400}.sales-case-link small{font-size:.73rem;font-weight:400;color:#758086}
.sales-detail{min-width:0}.sales-conversation.card{border:0;box-shadow:none;padding:0;margin:0;background:#fff}.sales-conversation>h3{font-size:1.1rem;margin:4px 0 16px}
.sales-context,.sales-case-settings,.sales-quote-tools{border-bottom:1px solid #eceeef;margin:12px 0;padding-bottom:12px}.sales-page summary{background:transparent!important;color:#59666d!important;font-size:.9rem;padding:10px 0!important}.sales-context p{font-size:.9rem}.sales-context .case-summary{max-height:160px;overflow:auto}
.sales-conversation .support-transcript{height:clamp(260px,45dvh,560px);max-height:none;padding:20px 8px;margin:10px 0 16px;border:0}.sales-conversation .support-bubble{font-size:.95rem;line-height:1.65}
.sales-reply-composer{display:flex;flex-wrap:wrap;gap:10px;align-items:center;border:1px solid #e2e5e7;border-radius:22px;padding:16px;background:#f7f8f8}
.sales-reply-composer>label{width:100%;font-size:.8rem;color:#6f7a80}.sales-reply-composer textarea{background:transparent;border:0!important;box-shadow:none!important;min-height:84px;resize:vertical;padding:10px 0;font-size:1rem}
.sales-reply-composer>button{border:0;border-radius:12px;padding:10px 16px;min-height:40px;font-size:.85rem;margin:0}.sales-reply-composer>button[type=submit]{margin-left:auto;background:#202629;color:white}.sales-reply-composer>button[type=button]{background:#e9edef;color:#38474e}.sales-reply-composer>div{width:100%}.sales-reply-composer>p:empty{display:none}.sales-reply-composer>p{width:100%;margin:0;font-size:.85rem}
.sales-sidebar .quote-notifications{border-top:1px solid #e8ebed;margin-top:24px;padding-top:12px}.sales-sidebar .quote-notifications button{width:100%;background:transparent;color:#42545c;border:0;padding:10px 4px;text-align:left;font-size:.8rem}.sales-sidebar .quote-notifications p{font-size:.8rem;color:#7d878c}
.sales-management{margin-top:32px;border-top:1px solid #e9ecee;padding-top:12px}.sales-mobile-back{display:none}
@media(max-width:750px){.sales-page{padding:16px!important}.sales-workspace{display:block}.sales-sidebar{max-height:none;padding:0}.sales-detail{display:none}.sales-workspace.show-case .sales-sidebar{display:none}.sales-workspace.show-case .sales-detail{display:block}.sales-mobile-back{display:block;background:transparent;color:#42545c;border:0;padding:6px 0 16px}.sales-reply-composer{padding:12px}.sales-conversation .support-transcript{height:42dvh}.sales-case-link{padding:16px!important}}
.sales-detail{width:100%;max-width:860px;margin:0 auto;padding:0}.sales-reply-composer{max-width:none}.sales-page~.back-to-top,body:has(.sales-page) .back-to-top{display:none}

.product-recommendations{min-width:0;max-width:100%;overflow:hidden}.recommendation-grid.recommendation-carousel{display:flex;flex-wrap:nowrap;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:8px 2px 18px;width:100%;scrollbar-width:thin}.recommendation-carousel>.card{flex:0 0 300px;min-width:0;max-width:300px;scroll-snap-align:start;margin:0}.recommendation-carousel .card h3{font-size:1.05rem}.recommendation-controls{display:flex;justify-content:flex-end;gap:8px}.recommendation-controls button{width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;background:#f2f4f4;color:#34474c;font-size:26px}.recommendation-carousel .product-native-image{max-height:180px;object-fit:contain}@media(max-width:750px){.recommendation-carousel>.card{flex-basis:78vw;max-width:300px}.recommendation-grid.recommendation-carousel{gap:12px}}

/* Keep recent chats compact, with store navigation immediately below. */
body:has(.conversation-main) #content{padding-top:16px}
body:has(.conversation-main) .conversation-main .wolfpilot-hero{margin:12px auto 24px;width:100%}
.conversation-recent-list.is-expanded{max-height:240px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.conversation-sidebar .conversation-history-toggle{display:block;width:100%;padding:8px 12px;text-align:left;background:transparent;border:0;color:#64747a;font-size:.85rem}
.conversation-sidebar .conversation-store-sidebar{margin-top:16px;padding-top:12px}
@media(max-width:750px){body:has(.conversation-main) .conversation-main .wolfpilot-hero{margin:8px auto 20px}.conversation-recent-list.is-expanded{max-height:30dvh}}

/* All non-chat pages use the same floating more action as the chat header. */
body:not(:has(.conversation-main))>header{position:relative;padding-right:88px}
body:not(:has(.conversation-main)) #account-avatar{display:none}
body:not(:has(.conversation-main)) #mobile-menu-toggle{
 display:flex;position:absolute;right:24px;top:12px;align-items:center;justify-content:center;
 width:58px;height:42px;min-height:42px;padding:0;border:1px solid #fff;border-radius:28px;
 background:rgba(248,249,249,.94);color:#292e31;font-size:27px;font-weight:600;line-height:1;
 box-shadow:0 4px 22px #26323812,0 0 0 1px #edf0f080;backdrop-filter:blur(14px)
}
body:not(:has(.conversation-main)) #mobile-menu-toggle:hover{background:#f0f2f2}
@media(max-width:750px){body:not(:has(.conversation-main)) #mobile-menu-toggle{right:14px}}

.sales-case-headline{font-size:1rem;font-weight:550;line-height:1.6;margin:8px 0 16px}
.sales-ai-context{margin:8px 0;border-bottom:1px solid #eceeef;padding-bottom:10px}
.sales-context-message{padding:12px 16px;margin:12px 0;border-radius:14px;background:#f6f7f7}
.sales-context-message.assistant{background:white}
.sales-context-message p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.9rem;line-height:1.65}
.sales-context-message strong{font-size:.8rem;color:#758086}
.sales-conversation .support-transcript{height:auto;max-height:none;overflow:visible;min-height:160px}
.sales-reply-composer{position:sticky;bottom:8px;z-index:4;box-shadow:0 -8px 22px #ffffffdd}
.sales-reply-composer textarea{max-height:160px}
.sales-ai-context[open]~.sales-reply-composer{position:sticky}
@media(max-width:750px){.sales-reply-composer{bottom:env(safe-area-inset-bottom,8px)}.sales-reply-composer textarea{min-height:52px}.sales-conversation .support-transcript{height:auto}}

.sales-reply-composer[hidden]{display:none}
.reply-notification{display:block;width:100%;text-align:left;background:#f5f7f7;color:#30373a;border:0;border-radius:14px;padding:18px;margin:12px 0}
.has-unread-replies .conversation-floating-actions button:last-child::after,.has-unread-replies #mobile-menu-toggle::after{content:'';width:8px;height:8px;background:#216d76;border-radius:50%;position:absolute;top:4px;right:4px}
.conversation-floating-actions button:last-child{position:relative}

/* Match the conversation composer instead of a separate reply form. */
.sales-reply-composer{position:relative!important;bottom:auto!important;display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:8px;align-items:end;padding:14px 16px;margin:12px 0 20px;border-radius:24px;background:#f5f6f6;box-shadow:none}
.sales-reply-composer>textarea{grid-column:1/-1;width:100%;min-height:54px;max-height:180px;resize:vertical;margin:0;padding:4px 0;outline:none!important;font:inherit}
.sales-reply-composer:focus-within{border-color:#bac6ca}
.sales-reply-composer>button[type=submit]{grid-column:2;width:36px;height:36px;min-height:36px;padding:0;border-radius:12px;font-size:27px;line-height:1;background:#171717}
.sales-reply-composer>p{grid-column:1;font-size:.8rem;color:#738087}
.sales-reply-composer[hidden]{display:none}

.sales-chat-composer{display:block;border:0;background:transparent;padding:0;margin:12px 0 24px;width:100%;max-width:none;box-shadow:none}
.sales-chat-composer[hidden]{display:none}
.sales-chat-composer>p{margin:8px 0 0;font-size:.8rem;color:#738087}
.sales-chat-transcript{height:auto;max-height:none;overflow:visible;padding:12px 0;min-height:120px}
.sales-reply-toggle{background:transparent!important;color:#637378!important;border:0!important;padding:6px 0!important;font-size:.9rem}
.sales-reply-toggle[hidden]{display:none}

/* Original Wolf Dataware artwork, shared by the header and mobile drawer. */
header .brand,.conversation-drawer-top .brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;line-height:1}
.brand .brand-icon{display:block;width:34px;height:40px;object-fit:contain;margin:0}
.brand .brand-wordmark{display:block;width:210px;height:auto;object-fit:contain;margin:0}
@media(max-width:750px){.brand .brand-icon{width:27px;height:32px}.brand .brand-wordmark{width:165px}header .brand,.conversation-drawer-top .brand{gap:8px}}

/* Keep guest sign-in visible beside the right-hand menu on every screen. */
body>header.guest-header #nav{display:flex;position:absolute;right:88px;top:50%;transform:translateY(-50%);width:auto;flex:none;order:0;margin:0;z-index:21}
body:has(.conversation-main)>header.guest-header #nav{right:126px}
body>header.guest-header #nav button{white-space:nowrap;border-radius:22px;padding:8px 16px;background:#25292c;color:#fff;border:0}
body>header.guest-header #localeLabel{margin-left:auto;margin-right:160px}
@media(max-width:750px){
 body>header.guest-header #nav{right:78px}
 body:has(.conversation-main)>header.guest-header #nav{right:112px}
 body>header.guest-header #nav button{padding:8px 12px;font-size:14px}
 body>header.guest-header .brand-wordmark{width:125px}
 body>header.guest-header #localeLabel{display:none}
}

.auth-secondary-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;align-items:center}
@media(max-width:520px){.auth-secondary-actions{gap:12px}.auth-secondary-actions button{min-height:44px}}

.store-branded{display:flex;align-items:center;gap:12px}
.store-branded .store-logo{width:120px;height:36px;object-fit:contain;flex-shrink:0;margin:0}
h1.store-branded .store-logo{width:180px;height:64px}
body.store-context>header .brand-wordmark{display:none}

.startup-composer{max-width:760px;margin:48px auto 0;text-align:left}.startup-composer textarea{flex:1;width:100%;resize:none;border:0;background:transparent;outline:none;min-height:76px;padding:16px}.startup-composer button{flex:0 0 36px;align-self:flex-end}.startup-composer+p{text-align:center;font-size:13px}

.conversation-input-shell{position:relative;flex-wrap:wrap}
.conversation-input-shell .chat-attachment-picker{grid-column:1/-1;flex:0 0 100%;display:flex;align-items:center;gap:8px;min-width:0}
.chat-attachment-picker .chat-attach-button{width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:#53656b;font-size:26px;flex:none}
.chat-attachment-list{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.chat-attachment-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #d9e1e3;border-radius:16px;background:#fff;padding:4px 8px;max-width:100%;font-size:13px}
.chat-attachment-chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.chat-attachment-chip button{width:24px!important;height:24px!important;min-width:24px;padding:0!important;background:transparent!important;color:#53656b!important;border:0}
.chat-attachment-link{display:block;margin-top:8px;overflow-wrap:anywhere;font-size:14px}

.chat-attachment-picker input[hidden]{display:none}
.conversation-input-shell:has(.chat-attachment-picker)>textarea{grid-column:1/-1}
.conversation-input-shell:has(.chat-attachment-picker)>button[type=submit]{grid-column:2;grid-row:2;align-self:end}
.conversation-input-shell .chat-attachment-picker{grid-column:1;grid-row:2}