/* sAilor showcase — app-style shell, phone-first, single screen */
.sailor-page{padding:0!important;max-width:none!important}
.ssapp{display:flex;flex-direction:column;height:calc(100dvh - 179px);max-width:560px;margin:0 auto;background:#FBF8F2;border-left:1px solid #E4E0D5;border-right:1px solid #E4E0D5;font-family:'Cormorant Garamond',Georgia,serif;color:#1C2A3A}
.ssa-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #E4E0D5;background:#fff;position:sticky;top:0;z-index:5}
.ssa-avatar{width:44px;height:44px;border-radius:50%;box-shadow:0 3px 12px rgba(28,42,58,.15)}
.ssa-id{flex:1;line-height:1.2}
.ssa-id b{font-size:19px;font-family:'Cormorant Garamond',serif}
.ssa-id span{display:block;font-size:12.5px;color:#5B6B7C}
.ssa-live{display:flex;align-items:center;gap:5px;font-size:11px;letter-spacing:.12em;color:#1a7f4b;font-weight:700}
.ssa-live i{width:7px;height:7px;border-radius:50%;background:#22a35f;animation:ssa-pulse 2s infinite}
@keyframes ssa-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.ssa-body{flex:1;min-height:0;display:flex;flex-direction:column}
.ssa-pane{flex:1;min-height:0;overflow-y:auto;padding:12px 14px;-webkit-overflow-scrolling:touch}
.ssa-chatpane{display:flex;flex-direction:column;overflow:hidden;padding:8px 10px 0}
.ssa-chips{display:flex;gap:7px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none}
.ssa-chips::-webkit-scrollbar{display:none}
.ssa-chip{flex:0 0 auto;border:1px solid #C9A96E77;border-radius:999px;padding:6px 13px;font-size:13.5px;background:#fff;color:#33465C;font-family:inherit;cursor:pointer;white-space:nowrap}
.ssa-chip:active{background:#C9A96E33}
/* chat fills the pane */
.ssa-chatpane>div{flex:1;min-height:0;display:flex;flex-direction:column}
/* ships pane */
.ssa-bignum{font-size:46px;font-weight:700;line-height:1;text-align:center;margin:10px 0 2px}
.ssa-bignum span{display:block;font-size:13px;font-weight:400;color:#5B6B7C;letter-spacing:.06em}
.ssa-note{font-size:15px;color:#42566B;text-align:center;max-width:420px;margin:8px auto 14px;line-height:1.5}
.ssa-grid{display:grid;gap:10px}
.ssa-card{border:1px solid #E4E0D5;border-radius:12px;background:#fff;padding:10px 12px}
.ssa-card b{font-size:15px}
.ssa-card p{margin:4px 0;font-size:13.5px;color:#42566B}
.ssa-card span{font-size:11.5px;color:#8A94A3}
/* about pane */
.ssa-stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:8px 0 14px}
.ssa-stats div{border:1px solid #C9A96E55;border-radius:12px;background:#fff;padding:10px 16px;text-align:center}
.ssa-stats b{display:block;font-size:22px}
.ssa-stats span{font-size:11.5px;color:#5B6B7C}
.ssa-list{list-style:none;margin:0;padding:0}
.ssa-list li{display:flex;gap:9px;align-items:flex-start;padding:9px 2px;border-bottom:1px solid #EEE7DB;font-size:14.5px;color:#33465C;line-height:1.45}
.ssa-list li svg{flex:0 0 auto;margin-top:2px;color:#8A6F45}
.ssa-dot{flex:0 0 auto;width:15px}
/* tab bar */
.ssa-tabs{display:flex;border-top:1px solid #E4E0D5;background:#fff}
.ssa-tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 7px;background:none;border:none;font-family:inherit;font-size:11.5px;color:#5B6B7C;cursor:pointer;letter-spacing:.04em}
.ssa-tabs button.on{color:#12233A;font-weight:700}
.ssa-foot{padding:6px 10px;text-align:center;font-size:10.5px;color:#8A94A3;background:#fff;border-top:1px solid #F0EBE0}
.ss-classic{margin:20px auto;max-width:560px}
@media(min-width:600px){.ssapp{border-radius:18px;margin:14px auto;box-shadow:0 14px 44px rgba(28,42,58,.12)}}

/* when /sailor runs standalone, the site chrome hides and the app fills the screen */
body.tc-no-chrome .tc-header,body.tc-no-chrome .tc-footer,body.tc-no-chrome .tc-shell>div:first-child{display:none!important}
body.tc-no-chrome .ssapp{height:100dvh;border-left:none;border-right:none}

/* embedded chat scrolls inside the pane */
.ssa-chatpane .sailor-chat{flex:1;min-height:0;overflow-y:auto;padding-right:4px}
.ssa-chatpane .sailor-input,.ssa-chatpane .sailor-chat-tools{flex:0 0 auto}
.ssa-pane{scrollbar-width:thin}

/* ===== app-look pass: sans UI, navy bars, proper bubbles ===== */
.ssapp{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:#F1EEE7}
.ssa-head{background:#12233A;color:#fff;border-bottom:none;padding:12px 14px}
.ssa-id b{color:#fff;font-family:inherit;font-size:18px}
.ssa-id span{color:#B9C6D4}
.ssa-live{color:#7CE0A9}
.ssa-head .ssa-avatar{border:2px solid #2C3E55}
.ssa-body{background:#F1EEE7}
.ssa-chatpane{background:#F1EEE7}
.ssa-chatpane .sailor-chat{gap:10px;padding:10px 2px}
.ssa-chatpane .sailor-msg{align-items:flex-end}
.ssa-chatpane .sailor-msg-user{flex-direction:row}
.ssa-chatpane .sailor-bubble{border-radius:18px;border:none;box-shadow:0 1px 3px rgba(18,35,58,.10);font-family:inherit;font-size:14.5px;line-height:1.45;max-width:86%}
.ssa-chatpane .sailor-msg-ai .sailor-bubble{background:#fff;color:#1C2A3A;border-bottom-left-radius:5px}
.ssa-chatpane .sailor-msg-user .sailor-bubble{background:#0C79D8;color:#fff;border-bottom-right-radius:5px}
.ssa-chatpane .sailor-avatar{width:30px;height:30px}
.ssa-chatpane .sailor-input{gap:8px;margin:0 -2px;padding:8px 2px 10px;background:linear-gradient(#F1EEE700,#F1EEE7 30%)}
.ssa-chatpane .sailor-input input{border-radius:999px;border:1px solid #D8D2C4;padding:12px 16px;font-size:15px;font-family:inherit;background:#fff;box-shadow:0 1px 3px rgba(18,35,58,.06)}
.ssa-chatpane .sailor-input button{border-radius:999px;padding:11px 20px;font-family:inherit;font-size:14px;font-weight:600}
.ssa-chatpane .sailor-chat-tools{padding:0 4px 2px}
.ssa-chatpane .sailor-fresh{font-family:inherit;font-size:11.5px}
.ssa-chatpane .sailor-signup{font-family:inherit}
.ssa-chatpane .tc-muted{display:none}
.ssa-chip{font-family:inherit;font-size:13px;background:#fff;border-color:#D8D2C4}
.ssa-bignum,.ssa-card b,.ssa-card p,.ssa-note,.ssa-list,.ssa-stats,.ssa-foot,.ssa-tabs{font-family:inherit}
.ssa-tabs{background:#fff;border-top:1px solid #E1DCD0;padding-bottom:env(safe-area-inset-bottom,0px)}
.ssa-tabs button{font-size:11px;font-weight:500;letter-spacing:.02em}
.ssa-tabs button.on{color:#0C79D8}
.ssa-foot{background:transparent}
.ssa-card,.ssa-stats div{box-shadow:0 1px 3px rgba(18,35,58,.05)}
