:root{
  --staris-bg:#060b23;
  --staris-bg-2:#091431;
  --staris-panel:rgba(7,14,39,.72);
  --staris-border:rgba(142,167,255,.12);
  --staris-text:#f4f6ff;
  --staris-muted:#aeb7de;
  --staris-gold:#efcc76;
  --staris-purple:#9f6cff;
  --staris-pink:#f06bb5;
  --staris-blue:#58b7ff;
  --staris-radius:28px;
  --staris-shadow:0 22px 70px rgba(0,0,0,.45);
}
html,body{background:#050916 !important;}
body.staris-page-template-active, body.staris-template-route{margin:0;padding:0;background:#050916 !important;overflow-x:hidden;}
body.staris-page-template-active #page-wrap, body.staris-page-template-active #ajax-content-wrap, body.staris-page-template-active .container-wrap, body.staris-template-route #staris-template-shell{margin:0 !important;padding:0 !important;max-width:none !important;width:100% !important;background:transparent !important;}
body.staris-page-template-active header#top, body.staris-page-template-active #header-outer, body.staris-page-template-active #footer-outer{display:none !important;}
#staris-template-main{width:100%;max-width:none;margin:0;padding:0;}
.staris-chat-app{position:relative;min-height:100vh;height:100vh;color:var(--staris-text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(180deg,#030814,#06102a 44%,#081737 100%);overflow:hidden;}
body.admin-bar .staris-chat-app{min-height:calc(100vh - 32px);height:calc(100vh - 32px);}
@media (max-width:782px){body.admin-bar .staris-chat-app{min-height:calc(100vh - 46px);height:calc(100vh - 46px);}}
.staris-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.staris-stars,.staris-bg .staris-grid{position:absolute;inset:0;width:100%;height:100%;}
.staris-bg .staris-grid{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(180deg,rgba(0,0,0,.4),transparent 85%);opacity:.18;}
.staris-nebula{position:absolute;border-radius:50%;filter:blur(70px);opacity:.38;animation:starisNebula 14s ease-in-out infinite alternate;}
.staris-nebula-a{width:560px;height:560px;left:-140px;top:12%;background:radial-gradient(circle,#8757ff 0,rgba(135,87,255,.34) 30%,rgba(6,12,38,0) 72%);}
.staris-nebula-b{width:520px;height:520px;right:-120px;top:18%;background:radial-gradient(circle,#3aaeff 0,rgba(58,174,255,.30) 28%,rgba(6,12,38,0) 72%);animation-delay:-6s;}
@keyframes starisNebula{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(20px,-12px,0) scale(1.08);}}
.staris-auth-screen,.staris-shell{position:relative;z-index:2;}
.staris-auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;}
.staris-auth-card{width:min(920px,100%);padding:34px;border-radius:32px;background:linear-gradient(180deg,rgba(7,14,39,.84),rgba(6,10,28,.76));border:1px solid var(--staris-border);backdrop-filter:blur(18px);box-shadow:var(--staris-shadow);}
.staris-auth-brand{display:flex;align-items:center;gap:16px;margin-bottom:24px;}
.staris-auth-logo{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,#fff,rgba(255,255,255,.66) 18%,rgba(133,93,255,.48) 44%,rgba(17,20,51,.86) 74%);box-shadow:0 0 24px rgba(130,92,255,.5);font-size:20px;}
.staris-auth-brand strong{display:block;font-size:28px;}
.staris-auth-brand span{display:block;color:var(--staris-muted);margin-top:4px;}
.staris-auth-tabs{display:flex;gap:10px;margin-bottom:20px;}
.staris-auth-tabs button{border:1px solid var(--staris-border);background:rgba(255,255,255,.04);color:var(--staris-muted);padding:12px 18px;border-radius:999px;font-weight:700;cursor:pointer;}
.staris-auth-tabs button.is-active{background:linear-gradient(135deg,rgba(157,101,255,.34),rgba(240,107,181,.2));color:#fff;border-color:rgba(190,158,255,.38);}
.staris-auth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.staris-auth-grid label{display:flex;flex-direction:column;gap:8px;}
.staris-auth-grid label span{font-size:13px;color:#d7dcff;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.staris-auth-grid input{width:100%;height:56px;border-radius:18px;border:1px solid var(--staris-border);background:rgba(255,255,255,.035);color:#fff;padding:0 18px;font-size:16px;outline:none;}
.staris-auth-grid input:focus{border-color:rgba(164,145,255,.6);box-shadow:0 0 0 3px rgba(126,102,255,.16);}
.staris-auth-wide{grid-column:1/-1;}
.staris-auth-note,.staris-auth-message{margin-top:14px;color:var(--staris-muted);}
.staris-primary-btn{margin-top:18px;width:100%;height:58px;border:none;border-radius:999px;background:linear-gradient(90deg,#8f6bff 0%,#8b63ff 25%,#a762f1 55%,#ef72b4 100%);color:#fff;font-size:18px;font-weight:800;cursor:pointer;box-shadow:0 14px 34px rgba(154,99,255,.35);}
.staris-shell{position:relative;display:block;max-width:none;margin:0;padding:0;min-height:100%;height:100%;overflow:hidden;}
.staris-sidebar{position:fixed;left:0;top:0;bottom:0;width:320px;display:flex;flex-direction:column;gap:18px;padding:28px 22px 22px;background:linear-gradient(180deg,#070b21 0%,#060914 100%);border-right:1px solid rgba(151,169,255,.10);backdrop-filter:blur(18px);box-shadow:none;z-index:3;overflow-y:auto;overflow-x:hidden;}
body.admin-bar .staris-sidebar{top:32px;}
@media (max-width:782px){body.admin-bar .staris-sidebar{top:46px;}}
.staris-sidebar-brand,.staris-sidebar-user{display:flex;gap:14px;align-items:center;}
.staris-mini-logo,.staris-user-avatar{width:56px;height:56px;border-radius:50%;display:block;object-fit:cover;box-shadow:0 0 18px rgba(137,94,255,.45);}
.staris-sidebar-brand strong,.staris-sidebar-user strong{display:block;font-size:22px;}
.staris-sidebar-brand span,.staris-sidebar-user span{display:block;color:var(--staris-muted);font-size:14px;}
.staris-inline-link{border:none;background:none;color:#cbd4ff;padding:0;cursor:pointer;font-size:14px;}
.staris-sidebar-nav{display:flex;flex-direction:column;gap:10px;}
.staris-sidebar-nav button{display:flex;align-items:center;gap:12px;justify-content:flex-start;padding:16px 18px;border-radius:18px;border:1px solid var(--staris-border);background:rgba(255,255,255,.025);color:#eef2ff;font-size:17px;font-weight:700;cursor:pointer;position:relative;}
.staris-sidebar-nav button em{margin-left:auto;font-style:normal;font-size:11px;color:#97a1cf;background:rgba(255,255,255,.05);padding:5px 8px;border-radius:999px;}
.staris-sidebar-nav button.is-active{background:linear-gradient(180deg,rgba(42,12,95,.86),rgba(95,41,173,.68));box-shadow:0 10px 26px rgba(119,73,255,.34);}
.staris-sidebar-card{padding:18px;border-radius:22px;border:1px solid var(--staris-border);background:rgba(255,255,255,.03);}
.staris-card-kicker{font-size:13px;font-weight:800;color:var(--staris-gold);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;}
.staris-sidebar-card h4{font-size:25px;line-height:1.1;margin:0 0 10px;}
.staris-sidebar-card p{margin:0;color:var(--staris-muted);line-height:1.55;}
.staris-sidebar-btn{margin-top:16px;height:42px;padding:0 18px;border-radius:999px;border:none;background:linear-gradient(90deg,#6d45ff,#9d59f8);color:#fff;font-weight:700;cursor:pointer;}
.staris-energy-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:14px 0 8px;}
.staris-energy-ring{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(from 180deg,#f06bb5 0,#a35cff 55%,rgba(255,255,255,.08) 55% 100%);position:relative;font-weight:800;}
.staris-energy-ring:before{content:"";position:absolute;inset:8px;border-radius:50%;background:#0b1230;}
.staris-energy-ring span{position:relative;z-index:1;font-size:14px;}
.staris-energy-line{height:42px;display:flex;align-items:flex-end;}
.staris-energy-line span{display:block;width:100%;height:2px;background:linear-gradient(90deg,rgba(118,92,255,.1) 0 10%,#cc4dff 22%,#ff6ec8 54%,#765cff 74%,rgba(118,92,255,.2) 100%);clip-path:path('M0,28 C30,22 58,18 88,26 C118,34 142,12 170,18 C198,24 222,32 254,10 C286,-2 318,26 352,20');}
.staris-week-labels{display:flex;justify-content:space-between;color:#7f89ba;font-size:12px;margin-top:8px;}
.staris-sidebar-footer{margin-top:auto;display:flex;gap:10px;}
.staris-sidebar-footer button{flex:1;height:46px;border-radius:16px;border:1px solid var(--staris-border);background:rgba(255,255,255,.03);color:#dbe2ff;font-weight:700;cursor:pointer;}
.staris-main{margin-left:320px;display:flex;flex-direction:column;gap:18px;padding:28px 36px 18px;min-height:100%;height:100%;background:transparent;border:none;border-radius:0;box-shadow:none;backdrop-filter:none;overflow:hidden;position:relative;}
.staris-main-topbar{display:flex;justify-content:space-between;align-items:center;padding:8px 4px 18px;border-bottom:1px solid rgba(151,169,255,.09);}
.staris-greeting{font-size:42px;font-weight:900;line-height:1.05;}
.staris-date{font-size:20px;color:var(--staris-muted);margin-top:6px;}
.staris-tone-select select{height:50px;padding:0 52px 0 18px;background:rgba(255,255,255,.04);border:1px solid var(--staris-border);border-radius:999px;color:#fff;font-size:16px;font-weight:700;appearance:none;}
.staris-tone-select{position:relative;}
.staris-tone-select:after{content:"⌄";position:absolute;right:18px;top:13px;font-size:18px;color:#fff;pointer-events:none;}
.staris-intro-panel{display:grid;grid-template-columns:70px minmax(0,1fr);gap:18px;align-items:flex-start;padding:22px;border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,.01));border:1px solid rgba(151,169,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);}
.staris-intro-orb-wrap{display:flex;justify-content:center;padding-top:6px;}
.staris-intro-orb{width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at 50% 45%,#fff 0,#c89bff 16%,#7a4fff 34%,rgba(122,79,255,.24) 58%,rgba(122,79,255,.08) 72%,transparent 76%);box-shadow:0 0 30px rgba(151,107,255,.75);animation:starisPulse 4s ease-in-out infinite;}
@keyframes starisPulse{0%,100%{transform:scale(1);opacity:.88}50%{transform:scale(1.08);opacity:1}}
.staris-intro-bubble{padding:26px 28px;border-radius:26px;background:rgba(255,255,255,.025);border:1px solid rgba(150,165,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);}
.staris-intro-bubble p{margin:0 0 14px;font-size:25px;line-height:1.55;color:#eef2ff;}
.staris-intro-bubble p:last-child{margin:0;}
.staris-chip-row{display:flex;gap:10px;flex-wrap:wrap;}
.staris-chip-row button{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--staris-border);background:rgba(255,255,255,.03);color:#eaf0ff;font-weight:600;font-size:13px;cursor:pointer;}
.staris-chip-row-secondary button{height:44px;font-weight:600;color:#d5dcff;}
.staris-chat-thread{display:flex;flex-direction:column;gap:14px;flex:1;min-height:420px;padding:8px 0 0;}
.staris-msg{max-width:min(760px,78%);padding:18px 20px;border-radius:22px;border:1px solid rgba(151,169,255,.10);line-height:1.65;font-size:20px;position:relative;}
.staris-msg p{margin:0 0 12px;}
.staris-msg p:last-child{margin:0;}
.staris-msg-user{align-self:flex-end;background:linear-gradient(135deg,rgba(115,71,255,.88),rgba(181,72,255,.72));border-bottom-right-radius:10px;}
.staris-msg-assistant{align-self:flex-start;background:rgba(255,255,255,.02);border-bottom-left-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;padding-left:74px;min-height:74px;}
.staris-msg-time{display:block;margin-top:10px;color:#8590c3;font-size:12px;} .staris-msg-avatar{position:absolute;left:16px;top:16px;width:42px;height:42px;border-radius:50%;object-fit:cover;box-shadow:0 0 18px rgba(137,94,255,.45);}
.staris-chat-form{display:grid;grid-template-columns:minmax(0,1fr) 74px;gap:12px;align-items:center;padding-top:8px;}
.staris-chat-form input{height:66px;border-radius:20px;border:1px solid var(--staris-border);background:rgba(255,255,255,.02);color:#fff;padding:0 22px;font-size:18px;outline:none;}
.staris-send-btn{height:66px;border:none;border-radius:22px;background:radial-gradient(circle at 35% 30%,#f0b7ff,#8b62ff 48%,#5e36f0 74%);color:#fff;font-size:28px;cursor:pointer;box-shadow:0 14px 28px rgba(116,77,255,.42);}
.staris-chat-note{padding:6px 2px 0;color:#7f89b6;text-align:center;font-size:13px;}
.staris-typing{display:inline-flex;gap:6px;align-items:center;}
.staris-typing span{width:8px;height:8px;border-radius:50%;background:#a7b5ff;opacity:.3;animation:dot 1.4s infinite;}
.staris-typing span:nth-child(2){animation-delay:.2s}.staris-typing span:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
@media (max-width: 1100px){
  .staris-sidebar{position:relative;width:100%;top:0;bottom:auto;height:auto;border-right:none;}
  .staris-main{margin-left:0;padding:18px;}
}
@media (max-width: 760px){
  .staris-auth-card{padding:22px;}
  .staris-auth-grid{grid-template-columns:1fr;}
  .staris-main,.staris-sidebar{border-radius:0;border-left:none;border-right:none;}
  .staris-sidebar{padding:18px 16px 16px;}
  .staris-main{min-height:auto;padding:14px;}
  .staris-main-topbar{flex-direction:column;align-items:flex-start;gap:12px;}
  .staris-greeting{font-size:28px;}
  .staris-date{font-size:16px;}
  .staris-intro-panel{grid-template-columns:1fr;}
  .staris-intro-orb-wrap{justify-content:flex-start;}
  .staris-intro-bubble{padding:18px;}
  .staris-intro-bubble p,.staris-msg{font-size:17px;}
  .staris-msg{max-width:92%;}
  .staris-chat-form{grid-template-columns:minmax(0,1fr) 58px;position:sticky;bottom:0;background:linear-gradient(180deg,rgba(6,11,30,0),rgba(6,11,30,.98) 24%);padding-bottom:8px;}
  .staris-chat-form input,.staris-send-btn{height:56px;}
}


/* v6.6.3 refinement */
.staris-shell{min-height:100vh;}
.staris-sidebar{overflow-y:auto;overflow-x:hidden;padding-top:22px;scrollbar-width:thin;}
.staris-sidebar-user{margin-bottom:4px;}
.staris-sidebar-user strong{font-size:18px;line-height:1.15;}
.staris-sidebar-nav button{font-size:14px;padding:14px 16px;border-radius:16px;}
.staris-sidebar-nav button em{font-size:10px;}
.staris-sidebar-card{padding:0;overflow:hidden;transition:background .28s ease,border-color .28s ease,box-shadow .28s ease;}
.staris-sidebar-card-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;border:0;background:transparent;color:inherit;cursor:pointer;}
.staris-sidebar-toggle-icon{font-size:18px;color:rgba(255,255,255,.72);transition:transform .3s ease;}
.staris-sidebar-card-body{max-height:0;opacity:0;overflow:hidden;padding:0 18px;transition:max-height .36s ease, opacity .28s ease, padding .28s ease;}
.staris-sidebar-card.is-open .staris-sidebar-card-body{max-height:360px;opacity:1;padding:0 18px 18px;}
.staris-sidebar-card.is-open .staris-sidebar-toggle-icon{transform:rotate(180deg);}
.staris-sidebar-card h4{font-size:16px;line-height:1.2;color:#eef2ff;}
.staris-sidebar-card p{font-size:14px;color:#d7defd;}
.staris-sidebar-btn{height:38px;font-size:13px;padding:0 16px;margin-top:14px;}
.staris-energy-card{padding:18px;}
.staris-main{height:100vh;overflow:hidden;padding:20px 28px 20px;gap:14px;}
.staris-main-topbar{padding:6px 4px 10px;}
.staris-greeting{font-size:15px;color:#d7defd;}
.staris-date{font-size:12px;color:#98a2d0;}
.staris-tone-select select{height:50px;font-size:14px;padding:0 50px 0 18px;}
.staris-intro-panel{padding:16px 16px 14px;border-radius:28px;min-height:auto;}
.staris-intro-bubble{padding:18px 22px;border-radius:24px;}
.staris-intro-bubble p{font-size:16px;line-height:1.5;margin:0 0 12px;}
.staris-chip-row{gap:10px;}
.staris-chip-row button{padding:10px 16px;font-size:13px;}
.staris-chat-thread{flex:1;min-height:0;overflow-y:auto;padding:6px 8px 0 0;scrollbar-width:thin;}
.staris-msg{max-width:min(700px,72%);padding:14px 16px;border-radius:18px;line-height:1.55;font-size:14px;}
.staris-msg p{margin:0 0 9px;}
.staris-msg-assistant{padding-left:60px;min-height:60px;}
.staris-msg-avatar{left:14px;top:14px;width:32px;height:32px;}
.staris-msg-time{margin-top:8px;font-size:11px;}
.staris-chat-form{grid-template-columns:minmax(0,1fr) 60px;gap:10px;padding-top:6px;position:sticky;bottom:0;background:linear-gradient(180deg,rgba(6,11,30,0),rgba(6,11,30,.96) 24%);padding-bottom:4px;}
.staris-chat-form input{height:52px;border-radius:18px;font-size:15px;padding:0 18px;}
.staris-send-btn{height:52px;width:52px;border-radius:18px;font-size:16px;}
.staris-chat-note{font-size:11px;text-align:center;color:#8b95c6;}
@media (max-width: 960px){
  .staris-sidebar{max-height:40vh;}
  .staris-main{height:auto;min-height:60vh;overflow:visible;}
  .staris-chat-thread{max-height:46vh;}
}


/* v6.6.4 chat polish */
.staris-main-topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px;}
.staris-main-topbar > div:first-child{display:flex;flex-direction:column;gap:2px;}
.staris-greeting{font-size:18px;font-weight:800;line-height:1.15;}
.staris-date{font-size:13px;}
.staris-tone-select{align-self:start;}
.staris-tone-select select{height:44px;padding:0 42px 0 16px;border-radius:18px;}
.staris-tone-select:after{top:10px;right:16px;}

.staris-intro-panel{grid-template-columns:44px minmax(0,1fr);gap:12px;padding:10px 0 6px;background:transparent;border:none;box-shadow:none;border-radius:0;min-height:0;}
.staris-intro-orb-wrap{padding-top:4px;justify-content:flex-start;}
.staris-intro-orb{width:28px;height:28px;box-shadow:0 0 20px rgba(151,107,255,.65);}
.staris-intro-bubble{padding:0;background:transparent;border:none;box-shadow:none;border-radius:0;max-width:980px;}
.staris-intro-bubble p{font-size:13px;line-height:1.5;margin:0 0 6px;color:#dfe6ff;}
.staris-intro-bubble p:first-child{font-size:14px;font-weight:600;}

.staris-chip-row,.staris-chip-row-secondary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:100%;gap:10px;margin-top:2px;}
.staris-chip-row button,.staris-chip-row-secondary button{width:100%;height:42px;justify-content:center;text-align:center;padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.staris-chat-thread{padding:4px 10px 0 0;gap:12px;}
.staris-msg{max-width:min(820px,76%);width:fit-content;min-width:0;padding:14px 16px;border-radius:18px;font-size:14px;line-height:1.55;word-break:break-word;overflow-wrap:anywhere;}
.staris-msg-user{max-width:min(620px,68%);}
.staris-msg-assistant{padding-left:56px;min-height:58px;}
.staris-msg-avatar{left:12px;top:12px;width:30px;height:30px;}

.staris-chat-form{grid-template-columns:minmax(0,1fr) 56px;gap:10px;padding-top:8px;padding-bottom:6px;align-items:center;}
.staris-chat-form input{height:54px;border-radius:18px;box-shadow:none !important;outline:none;appearance:none;-webkit-appearance:none;background:rgba(6,11,30,.92);}
.staris-chat-form input:focus{border-color:rgba(147,118,255,.35);box-shadow:0 0 0 1px rgba(147,118,255,.2) inset !important;}
.staris-send-btn{height:54px;width:54px;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;border-radius:18px;font-size:18px;box-shadow:0 10px 24px rgba(116,77,255,.34);}

.staris-energy-ring{width:72px;height:72px;aspect-ratio:1/1;flex:0 0 72px;border-radius:50%;overflow:hidden;}
.staris-energy-ring:before{inset:9px;border-radius:50%;}
.staris-energy-ring span{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;height:100%;}

.staris-sidebar-card h4,.staris-sidebar-headline{color:#f4f6ff;opacity:1;}
.staris-sidebar-card p,.staris-sidebar-summary{color:#d7defd;opacity:1;}

.staris-chat-thread::-webkit-scrollbar,.staris-sidebar::-webkit-scrollbar{width:10px;}
.staris-chat-thread::-webkit-scrollbar-track,.staris-sidebar::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:999px;}
.staris-chat-thread::-webkit-scrollbar-thumb,.staris-sidebar::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(130,109,255,.85),rgba(76,146,255,.85));border-radius:999px;border:2px solid rgba(5,9,22,.45);}
.staris-chat-thread,.staris-sidebar{scrollbar-color:#7f71ff rgba(255,255,255,.04);}

@media (max-width: 1100px){
  .staris-chip-row,.staris-chip-row-secondary{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 760px){
  .staris-main-topbar{grid-template-columns:1fr;}
  .staris-intro-panel{grid-template-columns:36px minmax(0,1fr);gap:10px;}
  .staris-intro-bubble p{font-size:12px;}
  .staris-intro-bubble p:first-child{font-size:13px;}
  .staris-chip-row,.staris-chip-row-secondary{grid-template-columns:1fr;}
  .staris-msg,.staris-msg-user{max-width:100%;}
  .staris-chat-thread{max-height:none;}
}


/* v6.6.5 chat polish */
.staris-main{gap:12px;}
.staris-main-topbar{padding:2px 4px 8px;}
.staris-greeting{font-size:17px;line-height:1.1;}
.staris-date{font-size:11px;opacity:.88;}
.staris-intro-panel{padding:2px 0 0;background:transparent;border:none;box-shadow:none;}
.staris-intro-inline{display:flex;align-items:center;gap:12px;min-width:0;}
.staris-intro-copy{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap;}
.staris-intro-orb-wrap{padding-top:0;flex:0 0 auto;}
.staris-intro-orb{width:24px;height:24px;box-shadow:0 0 16px rgba(151,107,255,.58);}
.staris-intro-lead,.staris-intro-support{margin:0 !important;font-size:11px !important;line-height:1.35 !important;color:#eef2ff !important;}
.staris-intro-lead{font-weight:700;}
.staris-intro-support{opacity:.92;}
.staris-chip-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:4px;margin-bottom:0;}
.staris-chip-row button{height:38px;font-size:12px;padding:0 10px;border-radius:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.staris-chat-thread{flex:1 1 auto;min-height:0;height:calc(100vh - 270px);max-height:none;padding:8px 12px 0 0;gap:10px;scroll-padding-bottom:24px;}
.staris-msg{display:block;max-width:min(860px,78%);padding:13px 16px;border-radius:18px;font-size:13px;line-height:1.5;}
.staris-msg-assistant{padding-left:54px;min-height:56px;}
.staris-msg-user{max-width:min(520px,36%);margin-left:auto;}
.staris-msg-body{display:block;}
.staris-msg p{margin:0 0 8px;}
.staris-msg-time{margin-top:6px;font-size:10px;opacity:.8;}
.staris-chat-form{grid-template-columns:minmax(0,1fr) 54px;gap:10px;padding-top:10px;padding-bottom:10px;background:linear-gradient(180deg,rgba(6,11,30,0),rgba(6,11,30,.97) 18%);}
.staris-chat-form input{height:56px;border-radius:18px;padding:0 20px;font-size:15px;background:rgba(5,10,28,.96);border-color:rgba(151,169,255,.13);}
.staris-send-btn{height:56px;width:56px;border-radius:18px;font-size:18px;position:relative;}
.staris-send-btn::before{content:'➤';display:block;transform:translateX(1px);}
.staris-send-btn{color:transparent;}
.staris-chat-thread::-webkit-scrollbar-track,.staris-sidebar::-webkit-scrollbar-track{background:rgba(44,55,105,.28);}
.staris-chat-thread::-webkit-scrollbar-thumb,.staris-sidebar::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(133,107,255,.72),rgba(86,159,255,.74));border:2px solid rgba(10,16,42,.55);}
.staris-chat-thread,.staris-sidebar{scrollbar-color:#7f71ff rgba(44,55,105,.28);}
.staris-energy-card{padding:18px;}
.staris-energy-row{align-items:center;}
.staris-energy-ring{width:76px;height:76px;flex:0 0 76px;background:conic-gradient(from 180deg,#f06bb5 0deg,#a35cff var(--ring-angle,234deg),rgba(255,255,255,.08) var(--ring-angle,234deg) 360deg);} 
.staris-energy-ring::before{inset:9px;}
.staris-week-labels{gap:8px;margin-top:10px;}
.staris-week-labels button{appearance:none;border:0;background:transparent;color:#7f89ba;font-size:12px;font-weight:700;padding:4px 5px;border-radius:999px;cursor:pointer;transition:all .2s ease;}
.staris-week-labels button.is-active{color:#fff;background:rgba(159,108,255,.16);box-shadow:0 0 0 1px rgba(159,108,255,.18) inset;}
.staris-sidebar-card h4,.staris-sidebar-headline{color:#eef2ff;opacity:.95;}
.staris-sidebar-card p,.staris-sidebar-summary{color:#dbe3ff;opacity:.92;}
.staris-sidebar-card.is-collapsed .staris-sidebar-card-body{max-height:0;opacity:0;padding:0 18px;}
.staris-sidebar-card.is-open .staris-sidebar-card-body{animation:starisInsightReveal .35s ease;}
@keyframes starisInsightReveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media (max-width: 1240px){
 .staris-chip-row{grid-template-columns:repeat(3,minmax(0,1fr));}
 .staris-chat-thread{height:calc(100vh - 320px);} 
}
@media (max-width: 900px){
 .staris-chip-row{grid-template-columns:repeat(2,minmax(0,1fr));}
 .staris-intro-copy{align-items:flex-start;gap:6px;}
 .staris-intro-support{display:block;width:100%;}
 .staris-msg-user{max-width:min(440px,78%);} 
}
@media (max-width: 640px){
 .staris-chat-thread{height:auto;}
 .staris-chip-row{grid-template-columns:1fr 1fr;}
 .staris-intro-inline{align-items:flex-start;}
 .staris-msg,.staris-msg-user{max-width:100%;}
}


/* v6.6.6 dashboard refinement */
.staris-main{gap:10px;}
.staris-main-topbar{padding:0 4px 8px;align-items:center;}
.staris-greeting{font-size:15px;font-weight:800;line-height:1.08;}
.staris-date{font-size:11px;opacity:.82;}
.staris-tone-select select{height:48px;min-width:142px;}

.staris-intro-panel{padding:0;background:transparent;border:none;box-shadow:none;}
.staris-intro-inline{align-items:center;gap:10px;}
.staris-intro-orb{width:22px;height:22px;box-shadow:0 0 14px rgba(151,107,255,.55);}
.staris-intro-copy{gap:8px;flex-wrap:nowrap;align-items:center;overflow:hidden;}
.staris-intro-lead,.staris-intro-support{font-size:10.5px !important;line-height:1.35 !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.staris-intro-support{font-weight:700;color:#f4f7ff !important;}

.staris-chip-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;margin-top:8px;margin-bottom:6px;}
.staris-chip-row button{height:40px;font-size:11px;padding:0 10px;border-radius:15px;}
.staris-chat-thread{height:calc(100vh - 248px);padding:10px 14px 0 0;gap:11px;}
.staris-msg{max-width:min(780px,72%);padding:12px 16px;border-radius:18px;font-size:12px;line-height:1.48;box-sizing:border-box;}
.staris-msg-body{display:block;max-width:100%;}
.staris-msg-body p{margin:0 0 7px;}
.staris-msg-body p:last-child{margin-bottom:0;}
.staris-msg-assistant{padding-left:50px;min-height:52px;}
.staris-msg-user{max-width:min(420px,32%);}
.staris-msg-avatar{left:12px;top:12px;width:28px;height:28px;}
.staris-msg-time{font-size:10px;opacity:.72;margin-top:5px;}

.staris-chat-form{grid-template-columns:minmax(0,1fr) 56px;gap:10px;padding-top:10px;padding-bottom:10px;background:linear-gradient(180deg,rgba(6,11,30,0),rgba(6,11,30,.98) 18%);}
.staris-chat-form input{height:54px;border-radius:18px;padding:0 18px;font-size:15px;box-shadow:none !important;}
.staris-send-btn{height:56px;width:56px;border-radius:19px;display:flex;align-items:center;justify-content:center;}
.staris-send-btn::before{transform:none;display:flex;align-items:center;justify-content:center;width:100%;height:100%;}

.staris-sidebar-card{background:rgba(255,255,255,.025);}
.staris-sidebar-card h4,.staris-sidebar-headline{color:#eef3ff;}
.staris-sidebar-card p,.staris-sidebar-summary{color:#d9e1ff;}
.staris-energy-row{align-items:center;gap:14px;}
.staris-energy-ring{width:74px !important;height:74px !important;min-width:74px;min-height:74px;max-width:74px;max-height:74px;aspect-ratio:1/1;border-radius:50%;display:grid;place-items:center;}
.staris-energy-ring::before{inset:8px;}
.staris-energy-line{margin-top:12px;}

.staris-chat-thread::-webkit-scrollbar-track,.staris-sidebar::-webkit-scrollbar-track{background:rgba(18,28,64,.42);}
.staris-chat-thread::-webkit-scrollbar-thumb,.staris-sidebar::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(117,100,255,.72),rgba(61,124,231,.72));border:2px solid rgba(8,13,31,.72);}
.staris-chat-thread,.staris-sidebar{scrollbar-color:#7665ff rgba(18,28,64,.42);}

@media (max-width: 1200px){
  .staris-chip-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .staris-chat-thread{height:calc(100vh - 284px);}
  .staris-msg-user{max-width:min(460px,46%);}
}
@media (max-width: 860px){
  .staris-intro-copy{flex-wrap:wrap;}
  .staris-intro-lead,.staris-intro-support{white-space:normal;}
  .staris-chip-row{grid-template-columns:1fr 1fr;}
  .staris-msg,.staris-msg-user{max-width:100%;}
  .staris-chat-thread{height:auto;max-height:52vh;}
}


/* v6.6.7 final cleanup */
.staris-main-topbar{margin-bottom:10px;align-items:flex-start}
.staris-greeting{font-size:18px;line-height:1.15;font-weight:800;letter-spacing:-.02em}
.staris-date{font-size:12px;opacity:.78;margin-top:4px}
.staris-intro-panel{margin:0 0 8px;padding:0;border:none;background:transparent;box-shadow:none}
.staris-intro-inline{display:flex;align-items:center;gap:10px;min-width:0}
.staris-intro-orb-wrap{flex:0 0 auto}
.staris-intro-orb{width:34px;height:34px;box-shadow:0 0 22px rgba(128,92,255,.55)}
.staris-intro-copy{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:nowrap}
.staris-intro-lead,.staris-intro-support{margin:0;font-size:12px;line-height:1.35}
.staris-intro-lead{font-weight:700;color:#f3f6ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:820px}
.staris-intro-support{font-weight:700;color:#ffffff;opacity:.94;white-space:nowrap}
.staris-chip-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:8px 0 10px;width:100%}
.staris-chip-row button{display:flex;align-items:center;justify-content:center;width:100%;height:38px;padding:0 12px;border-radius:14px;font-size:12px;font-weight:700;letter-spacing:-.01em;background:rgba(255,255,255,.03)}
.staris-chat-thread{height:calc(100vh - 220px);padding:8px 10px 0 0;gap:12px;overflow-y:auto;overflow-x:hidden}
.staris-msg{display:block;max-width:min(720px,68%);width:max-content;min-width:0;padding:12px 15px;border-radius:18px;font-size:12px;line-height:1.52;box-sizing:border-box}
.staris-msg-body{display:block;max-width:100%}
.staris-msg-assistant{padding-left:48px;min-height:50px;background:rgba(255,255,255,.03)}
.staris-msg-user{max-width:min(380px,30%);margin-left:auto;background:linear-gradient(135deg,rgba(125,79,255,.95),rgba(188,92,255,.82))}
.staris-msg-avatar{left:10px;top:10px;width:26px;height:26px}
.staris-msg-time{font-size:10px;opacity:.7;margin-top:5px}
.staris-chat-form{grid-template-columns:minmax(0,1fr) 54px;gap:10px;align-items:center}
.staris-chat-form input{height:52px;border-radius:18px;padding:0 18px;background:rgba(5,9,26,.94);box-shadow:none}
.staris-send-btn{height:52px;width:52px;border-radius:18px;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;box-shadow:0 10px 24px rgba(116,77,255,.30)}
.staris-send-btn::before{content:'➤';display:flex;align-items:center;justify-content:center;width:100%;height:100%;transform:translateX(1px)}
.staris-chat-thread::-webkit-scrollbar,.staris-sidebar::-webkit-scrollbar{width:8px}
.staris-chat-thread::-webkit-scrollbar-track,.staris-sidebar::-webkit-scrollbar-track{background:rgba(18,28,64,.34);border-radius:999px}
.staris-chat-thread::-webkit-scrollbar-thumb,.staris-sidebar::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(111,97,255,.62),rgba(61,124,231,.58));border-radius:999px;border:1px solid rgba(8,13,31,.52)}
.staris-chat-thread,.staris-sidebar{scrollbar-color:#6f61ff rgba(18,28,64,.34)}
.staris-energy-ring{width:74px;height:74px;border-radius:50%;flex:0 0 74px}
.staris-energy-ring span{font-size:16px;line-height:1}
.staris-week-labels button{position:relative}
.staris-week-labels button.is-active{color:#fff}
.staris-week-labels button.is-active::after{content:'';position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);width:18px;height:3px;border-radius:999px;background:linear-gradient(90deg,#7d5fff,#ea77cf)}
.staris-sidebar-card h4,.staris-sidebar-headline{color:#eff3ff;opacity:.98}
.staris-sidebar-card p,.staris-sidebar-summary{color:#d8e0ff;opacity:.95}
@media (max-width: 1180px){.staris-chip-row{grid-template-columns:repeat(3,minmax(0,1fr))}.staris-chat-thread{height:calc(100vh - 250px)}.staris-msg-user{max-width:min(420px,48%)}}
@media (max-width: 820px){.staris-chip-row{grid-template-columns:repeat(2,minmax(0,1fr))}.staris-intro-copy{flex-wrap:wrap}.staris-intro-lead{max-width:none;white-space:normal}.staris-chat-thread{height:auto;max-height:54vh}.staris-msg,.staris-msg-user{max-width:100%}}


/* v6.6.8 dashboard fit + mobile */
.staris-mobile-nav-btn,.staris-mobile-overlay{display:none;}
.staris-main-topbar{padding:4px 4px 8px;}
.staris-greeting{font-size:16px;line-height:1.1;}
.staris-date{font-size:11px;opacity:.86;}
.staris-tone-select select{height:42px;padding:0 40px 0 14px;border-radius:16px;font-size:14px;}
.staris-intro-panel{padding:0;background:transparent;border:none;box-shadow:none;min-height:auto;}
.staris-intro-copy{display:flex;align-items:center;gap:14px;min-width:0;flex-wrap:wrap;}
.staris-intro-lead,.staris-intro-support{margin:0 !important;font-size:12px !important;line-height:1.35 !important;}
.staris-intro-lead{font-weight:700;max-width:none;}
.staris-intro-support{opacity:.9;}
.staris-chip-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:0;margin-bottom:0;}
.staris-chip-row button{height:36px;border-radius:14px;font-size:12px;padding:0 10px;}
.staris-chat-thread{flex:1 1 auto;height:auto;min-height:0;max-height:none;padding:6px 10px 0 0;gap:10px;overflow-y:auto;overflow-x:hidden;}
.staris-msg{position:relative;max-width:min(760px,72%);padding:12px 14px;border-radius:18px;font-size:13px;line-height:1.48;}
.staris-msg-user{max-width:min(380px,32%);margin-left:auto;}
.staris-msg-assistant{padding-left:54px;min-height:54px;}
.staris-msg-avatar{left:12px;top:12px;width:30px;height:30px;}
.staris-msg-body{display:flex;flex-direction:column;gap:6px;}
.staris-msg-text{display:block;}
.staris-msg-time{display:block;position:static;margin-top:2px;color:#91a0d8;font-size:10px;opacity:.82;}
.staris-chat-form{margin-top:8px;grid-template-columns:minmax(0,1fr) 56px;gap:10px;padding:8px 0 0;background:linear-gradient(180deg,rgba(6,11,30,0),rgba(6,11,30,.96) 28%);}
.staris-chat-form input{height:50px;border-radius:16px;font-size:14px;padding:0 18px;}
.staris-send-btn{height:50px;width:50px;border-radius:16px;display:flex;align-items:center;justify-content:center;}
.staris-send-btn::before{content:"➤";display:block;transform:translate(1px,-1px);}
.staris-chat-note{display:none;}
.staris-chat-thread::-webkit-scrollbar,.staris-sidebar::-webkit-scrollbar{width:8px;}
.staris-chat-thread::-webkit-scrollbar-track,.staris-sidebar::-webkit-scrollbar-track{background:rgba(32,43,88,.24);border-radius:999px;}
.staris-chat-thread::-webkit-scrollbar-thumb,.staris-sidebar::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(129,108,255,.8),rgba(75,146,255,.78));border-radius:999px;border:1px solid rgba(6,10,24,.42);}
.staris-energy-copy-wrap{display:flex;flex-direction:column;gap:6px;min-width:0;}
.staris-energy-copy-wrap strong{display:block;font-size:13px;line-height:1.35;}
.staris-energy-copy-wrap p{margin:0;font-size:12px;line-height:1.45;color:#cfd8ff;}
.staris-energy-card{overflow:hidden;}
.staris-energy-row{align-items:center;gap:12px;}
.staris-energy-line{margin-top:10px;}
.staris-week-labels button{position:relative;}
.staris-week-labels button.is-active{color:#fff;}
.staris-week-labels button.is-active::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-4px;width:16px;height:3px;border-radius:999px;background:linear-gradient(90deg,#9d6cff,#f06bb5);}
.staris-main,.staris-shell,.staris-chat-app{overflow:hidden;}
@media (max-width:980px){
  .staris-shell{height:100%;}
  .staris-main{margin-left:0;padding:16px 14px 12px;height:100%;}
  .staris-sidebar{transform:translateX(-110%);transition:transform .28s ease;z-index:20;width:min(84vw,320px);box-shadow:0 30px 80px rgba(0,0,0,.52);}
  .staris-shell.is-mobile-open .staris-sidebar{transform:translateX(0);}
  .staris-mobile-nav-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 14px;border-radius:14px;border:1px solid rgba(151,169,255,.12);background:rgba(255,255,255,.04);color:#eef2ff;font-weight:700;cursor:pointer;}
  .staris-mobile-overlay{display:block;position:fixed;inset:0;background:rgba(1,4,12,.48);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:15;}
  .staris-shell.is-mobile-open .staris-mobile-overlay{opacity:1;pointer-events:auto;}
  .staris-main-topbar{grid-template-columns:auto 1fr auto;align-items:center;}
  .staris-main-topbar > div:first-child{min-width:0;}
  .staris-greeting{font-size:15px;}
  .staris-tone-select select{height:38px;font-size:13px;padding:0 34px 0 12px;}
  .staris-chip-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .staris-chip-row button{height:34px;font-size:11px;}
  .staris-chat-thread{padding-right:4px;}
  .staris-msg,.staris-msg-user{max-width:92%;}
  .staris-msg-user{max-width:82%;}
}
@media (max-width:640px){
  .staris-main-topbar{grid-template-columns:auto 1fr;gap:10px;}
  .staris-tone-select{grid-column:1 / -1;justify-self:start;}
  .staris-intro-copy{display:block;}
  .staris-intro-support{margin-top:4px !important;display:block;}
  .staris-chip-row{grid-template-columns:1fr 1fr;}
  .staris-sidebar{padding:18px 14px 14px;}
  .staris-main{padding:12px 10px 10px;}
}


/* v6.7.0 mobile-first dashboard fix */
html.staris-lock, body.staris-lock{overflow:hidden !important;height:100%;}
.staris-chat-app{overflow:hidden;}
.staris-shell{height:100%;}
.staris-main{height:100%;min-height:0;display:flex;flex-direction:column;}
.staris-chat-thread{min-height:0;}

@media (max-width: 980px){
  body.staris-page-template-active, body.staris-template-route{overflow:hidden !important;}
  .staris-chat-app{height:100dvh;min-height:100dvh;}
  body.admin-bar .staris-chat-app{height:calc(100dvh - 46px);min-height:calc(100dvh - 46px);}
  .staris-shell{display:block;height:100%;}
  .staris-sidebar{position:fixed;left:0;top:0;bottom:0;width:min(86vw,340px);max-width:340px;transform:translateX(-110%);transition:transform .28s ease;z-index:40;overflow-y:auto;overflow-x:hidden;padding:18px 14px calc(22px + env(safe-area-inset-bottom));box-shadow:0 20px 60px rgba(0,0,0,.55);border-right:1px solid rgba(151,169,255,.10);}
  body.admin-bar .staris-sidebar{top:46px;}
  .staris-shell.is-mobile-open .staris-sidebar{transform:translateX(0);}
  .staris-mobile-overlay{display:block;position:fixed;inset:0;background:rgba(2,5,16,.62);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:35;}
  .staris-shell.is-mobile-open .staris-mobile-overlay{opacity:1;pointer-events:auto;}

  .staris-main{margin-left:0;padding:12px 10px max(10px, env(safe-area-inset-bottom));height:100%;min-height:0;overflow:hidden;gap:10px;}
  .staris-main-topbar{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:0 0 8px;border-bottom:1px solid rgba(151,169,255,.08);}
  .staris-mobile-nav-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 14px;border-radius:14px;border:1px solid rgba(151,169,255,.12);background:rgba(255,255,255,.05);color:#eef2ff;font-weight:700;cursor:pointer;}
  .staris-main-topbar > div:first-child{min-width:0;}
  .staris-greeting{font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .staris-date{font-size:11px;margin-top:2px;color:#aeb7de;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .staris-tone-select{justify-self:end;}
  .staris-tone-select select{height:38px;min-width:120px;padding:0 34px 0 12px;border-radius:14px;font-size:13px;}
  .staris-tone-select:after{top:8px;right:13px;font-size:16px;}

  .staris-intro-panel{padding:0;margin:0;border:none;background:transparent;box-shadow:none;min-height:auto;}
  .staris-intro-copy{display:block;min-width:0;}
  .staris-intro-orb-wrap,.staris-intro-orb{display:none !important;}
  .staris-intro-lead,.staris-intro-support{display:block;white-space:normal !important;overflow:visible !important;text-overflow:unset !important;max-width:none !important;font-size:13px !important;line-height:1.45 !important;}
  .staris-intro-lead{font-weight:700;margin:0 0 6px !important;}
  .staris-intro-support{margin:0 !important;color:#d6defd !important;}

  .staris-chip-row{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:2px 0 4px;margin:0;scrollbar-width:none;}
  .staris-chip-row::-webkit-scrollbar{display:none;}
  .staris-chip-row button{flex:0 0 auto;height:34px;padding:0 12px;border-radius:999px;font-size:11px;white-space:nowrap;}

  .staris-chat-thread{flex:1 1 auto;height:auto !important;max-height:none !important;min-height:0;overflow-y:auto;overflow-x:hidden;padding:4px 4px 0 0;gap:10px;scroll-padding-bottom:90px;}
  .staris-msg,.staris-msg-user{max-width:84%;font-size:13px;line-height:1.45;padding:12px 14px;}
  .staris-msg-user{margin-left:auto;border-bottom-right-radius:12px;}
  .staris-msg-assistant{padding-left:16px;min-height:0;border-bottom-left-radius:12px;}
  .staris-msg-avatar{display:none;}
  .staris-msg-time{font-size:10px;opacity:.76;}

  .staris-chat-form{position:sticky;bottom:0;grid-template-columns:minmax(0,1fr) 52px;gap:8px;padding:10px 0 calc(8px + env(safe-area-inset-bottom));margin-top:0;background:linear-gradient(180deg,rgba(6,11,30,0),rgba(6,11,30,.96) 20%,rgba(6,11,30,.99) 100%);z-index:4;}
  .staris-chat-form input{height:50px;border-radius:16px;font-size:14px;padding:0 16px;box-shadow:none !important;}
  .staris-send-btn{height:50px;width:52px;border-radius:16px;box-shadow:0 8px 18px rgba(116,77,255,.35);}
  .staris-chat-note{display:none;}

  .staris-sidebar-card h4{font-size:18px;line-height:1.2;}
  .staris-sidebar-card p{font-size:13px;line-height:1.5;}
  .staris-energy-row{align-items:flex-start;}
  .staris-energy-copy-wrap strong{font-size:13px;line-height:1.35;}
  .staris-energy-copy-wrap p{font-size:12px;line-height:1.45;}
  .staris-energy-ring{width:68px !important;height:68px !important;min-width:68px;min-height:68px;max-width:68px;max-height:68px;}
  .staris-energy-ring span{font-size:13px;}
  .staris-week-labels{gap:6px;justify-content:space-between;}
  .staris-week-labels button{padding:4px 5px;min-width:22px;}
}

@media (max-width: 640px){
  .staris-main{padding:10px 8px max(8px, env(safe-area-inset-bottom));}
  .staris-main-topbar{grid-template-columns:auto 1fr;}
  .staris-tone-select{grid-column:1 / -1;justify-self:start;}
  .staris-tone-select select{min-width:132px;}
  .staris-greeting{font-size:15px;}
  .staris-chip-row button{height:32px;font-size:10.5px;padding:0 11px;}
  .staris-msg,.staris-msg-user{max-width:88%;font-size:12.5px;}
}


/* v6.7.2 hard mobile rescue */
@media (max-width: 980px){
  html,body,body.staris-page-template-active,body.staris-template-route{height:100%;overflow:hidden !important;}
  #wpadminbar{position:fixed !important;top:0;left:0;right:0;z-index:99999;}
  .staris-chat-app{height:100dvh !important;min-height:100dvh !important;overflow:hidden !important;}
  body.admin-bar .staris-chat-app{height:calc(100dvh - 46px) !important;min-height:calc(100dvh - 46px) !important;margin-top:46px;}
  .staris-shell{height:100% !important;display:block !important;overflow:hidden !important;}
  .staris-sidebar{position:fixed !important;left:0;top:0;bottom:0;width:min(86vw,320px) !important;transform:translateX(-110%) !important;z-index:60 !important;}
  body.admin-bar .staris-sidebar{top:46px !important;}
  .staris-shell.is-mobile-open .staris-sidebar,
  .staris-chat-app.is-mobile-open .staris-sidebar{transform:translateX(0) !important;}
  .staris-mobile-overlay{display:block !important;z-index:55 !important;}
  .staris-shell.is-mobile-open .staris-mobile-overlay,
  .staris-chat-app.is-mobile-open .staris-mobile-overlay{opacity:1 !important;pointer-events:auto !important;}

  .staris-main{margin-left:0 !important;padding:12px 10px calc(10px + env(safe-area-inset-bottom)) !important;height:100% !important;min-height:0 !important;overflow:hidden !important;display:flex !important;flex-direction:column !important;gap:10px !important;}
  .staris-main-topbar{display:grid !important;grid-template-columns:auto 1fr !important;align-items:center !important;gap:10px !important;padding:0 0 8px !important;}
  .staris-mobile-nav-btn{display:inline-flex !important;}
  .staris-tone-select{grid-column:1 / -1;justify-self:start;}
  .staris-tone-select select{height:40px !important;min-width:130px !important;}

  .staris-intro-panel{display:block !important;grid-template-columns:1fr !important;padding:0 !important;margin:0 !important;min-height:auto !important;}
  .staris-intro-orb-wrap,.staris-intro-orb{display:none !important;}
  .staris-intro-copy{display:block !important;width:100% !important;max-width:100% !important;min-width:0 !important;overflow:visible !important;}
  .staris-intro-lead,.staris-intro-support{display:block !important;width:100% !important;max-width:100% !important;white-space:normal !important;word-break:normal !important;overflow-wrap:break-word !important;overflow:visible !important;text-overflow:unset !important;writing-mode:horizontal-tb !important;font-size:14px !important;line-height:1.45 !important;}
  .staris-intro-lead{margin:0 0 6px !important;font-weight:700 !important;}
  .staris-intro-support{margin:0 !important;}

  .staris-chip-row{display:flex !important;flex-wrap:nowrap !important;overflow-x:auto !important;overflow-y:hidden !important;gap:8px !important;padding:2px 0 6px !important;margin:0 !important;scrollbar-width:none;}
  .staris-chip-row::-webkit-scrollbar{display:none !important;}
  .staris-chip-row button{flex:0 0 auto !important;width:auto !important;max-width:none !important;min-width:max-content !important;}

  .staris-chat-thread{flex:1 1 auto !important;min-height:0 !important;height:auto !important;max-height:none !important;overflow-y:auto !important;overflow-x:hidden !important;padding:4px 2px 0 0 !important;scroll-padding-bottom:88px !important;}
  .staris-msg,.staris-msg-user{max-width:88% !important;font-size:13px !important;line-height:1.45 !important;padding:12px 14px !important;}
  .staris-msg-assistant{padding-left:14px !important;min-height:0 !important;}
  .staris-msg-avatar{display:none !important;}
  .staris-msg-user{margin-left:auto !important;}

  .staris-chat-form{position:sticky !important;bottom:0 !important;grid-template-columns:minmax(0,1fr) 52px !important;padding:8px 0 calc(8px + env(safe-area-inset-bottom)) !important;z-index:8 !important;}
  .staris-chat-form input{height:50px !important;font-size:14px !important;}
  .staris-send-btn{height:50px !important;width:52px !important;}

  .staris-sidebar-card,.staris-energy-card{border-radius:20px !important;}
  .staris-energy-row{gap:10px !important;align-items:flex-start !important;}
  .staris-energy-copy-wrap{min-width:0 !important;}
  .staris-energy-copy-wrap strong{font-size:13px !important;line-height:1.35 !important;display:block !important;}
  .staris-energy-copy-wrap p{font-size:12px !important;line-height:1.4 !important;display:block !important;}
  .staris-energy-ring{width:64px !important;height:64px !important;min-width:64px !important;min-height:64px !important;max-width:64px !important;max-height:64px !important;}
}

@media (max-width: 640px){
  .staris-main{padding:10px 8px calc(8px + env(safe-area-inset-bottom)) !important;}
  .staris-greeting{font-size:15px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
  .staris-date{font-size:11px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
  .staris-intro-lead,.staris-intro-support{font-size:13px !important;}
  .staris-msg,.staris-msg-user{max-width:92% !important;font-size:12.5px !important;}
}


/* ═══════════════════════════════════════════════════════════════════════════
   v6.7.10 CHAT UI OVERHAUL — clean layout, better messages, engagement hooks
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── DESKTOP: fix the messy layout visible in screenshot 2 ── */

/* Widen the main chat area — sidebar is too dominant on wide screens */
@media (min-width: 981px) {
  .staris-sidebar { width: 280px; padding: 22px 18px 18px; gap: 14px; }
  .staris-main { margin-left: 280px; padding: 20px 32px 14px; gap: 10px; }

  /* Fix chat thread height so it actually fills the space */
  .staris-chat-thread {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 12px 0 0;
    gap: 12px;
  }

  /* Assistant messages: cleaner, more readable */
  .staris-msg-assistant {
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(151,169,255,.08);
    border-bottom-left-radius: 8px;
    padding: 14px 18px 14px 54px;
    min-height: 54px;
  }

  /* User messages: right-aligned, max 50% width so they don't crowd the screen */
  .staris-msg-user {
    max-width: min(480px, 48%) !important;
    margin-left: auto;
    border-bottom-right-radius: 8px;
  }

  /* Messages: slightly larger text for readability */
  .staris-msg {
    font-size: 13.5px;
    line-height: 1.56;
    max-width: min(760px, 72%);
  }

  /* Chip row: 5 columns on wide screens */
  .staris-chip-row { grid-template-columns: repeat(5, minmax(0,1fr)) !important; }

  /* Sticky input bar with clear separator */
  .staris-chat-form {
    border-top: 1px solid rgba(151,169,255,.07);
    padding-top: 12px;
    padding-bottom: 10px;
    flex-shrink: 0;
  }
}

/* ── MESSAGE ANIMATIONS — make bubbles feel alive ── */
@keyframes starisMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.staris-msg {
  animation: starisMsgIn .22s ease forwards;
}

/* ── TYPING DOTS — bigger, more visible, with glow ── */
.staris-typing {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 4px 2px;
}
.staris-typing span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #818cf8);
  opacity: 0;
  box-shadow: 0 0 8px rgba(167,139,250,.5);
  animation: starisTypingPulse 1.5s ease-in-out infinite;
}
.staris-typing span:nth-child(1) { animation-delay: 0s; }
.staris-typing span:nth-child(2) { animation-delay: .2s; }
.staris-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes starisTypingPulse {
  0%, 80%, 100% { opacity: .2; transform: scale(.85); }
  40%            { opacity: 1;  transform: scale(1.15); }
}

/* ── INPUT FIELD — make it feel premium ── */
.staris-chat-form input {
  background: rgba(8, 14, 38, .94) !important;
  border: 1px solid rgba(151,169,255,.15) !important;
  color: #eef2ff !important;
  letter-spacing: .01em;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.staris-chat-form input:focus {
  border-color: rgba(147,118,255,.45) !important;
  box-shadow: 0 0 0 3px rgba(147,118,255,.12) inset !important;
}
.staris-chat-form input::placeholder { color: rgba(180,190,230,.4); }

/* ── SEND BUTTON — pulsing glow on hover ── */
.staris-send-btn {
  background: linear-gradient(135deg, #6d45ff, #9d59f8) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.staris-send-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 30px rgba(109,69,255,.5) !important;
}
.staris-send-btn:active { transform: scale(.97); }

/* ── CHIP BUTTONS — more engaging, highlight on hover ── */
.staris-chip-row button {
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(151,169,255,.1) !important;
  color: #c8d2f8 !important;
  font-weight: 600;
  transition: background .18s, border-color .18s, color .18s, transform .15s;
  letter-spacing: -.01em;
}
.staris-chip-row button:hover {
  background: rgba(109,69,255,.18) !important;
  border-color: rgba(167,139,250,.35) !important;
  color: #eef2ff !important;
  transform: translateY(-1px);
}
.staris-chip-row button:active { transform: translateY(0); }

/* ── SIDEBAR NAV ACTIVE STATE — cleaner active pill ── */
.staris-sidebar-nav button { font-size: 14px; padding: 13px 16px; }
.staris-sidebar-nav button.is-active {
  background: linear-gradient(135deg, rgba(42,12,95,.9), rgba(95,41,173,.7)) !important;
  border-color: rgba(151,169,255,.15) !important;
  box-shadow: 0 8px 22px rgba(119,73,255,.28), 0 0 0 1px rgba(151,169,255,.08) inset !important;
}

/* ── ENERGY RING — subtle pulse animation ── */
@keyframes starisRingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(163,92,255,.0); }
  50%       { box-shadow: 0 0 0 6px rgba(163,92,255,.15); }
}
.staris-energy-ring { animation: starisRingPulse 3.5s ease-in-out infinite; }

/* ── ASSISTANT MESSAGE AVATAR — subtle glow ── */
.staris-msg-avatar {
  box-shadow: 0 0 14px rgba(137,94,255,.5), 0 0 0 2px rgba(137,94,255,.15) !important;
}

/* ── SCROLLBAR — thinner, more refined ── */
.staris-chat-thread::-webkit-scrollbar { width: 4px; }
.staris-chat-thread::-webkit-scrollbar-track { background: transparent; }
.staris-chat-thread::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(120,100,255,.5), rgba(80,140,255,.4));
  border-radius: 999px;
  border: none;
}

/* ── DAILY INSIGHT CARD — make it feel more premium ── */
.staris-sidebar-card {
  border: 1px solid rgba(151,169,255,.09) !important;
  background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.015)) !important;
  transition: border-color .2s ease;
}
.staris-sidebar-card:hover { border-color: rgba(151,169,255,.18) !important; }

/* ── MESSAGE TIME — subtler, not cluttering ── */
.staris-msg-time {
  font-size: 10px !important;
  opacity: .55 !important;
  margin-top: 4px !important;
  letter-spacing: .02em;
}

/* ── INTRO PANEL — make the two lines more readable ── */
.staris-intro-lead { font-size: 12px !important; color: #c8d2f8 !important; opacity: .88; }
.staris-intro-support { font-size: 11px !important; color: #9ea8d8 !important; opacity: .82; }



/* ═══════════════════════════════════════════════════════════════════════════
   v6.7.11 UI CLEANUP — remove intro panel, tighter layout, mobile polish
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HIDE any lingering intro panel markup ── */
.staris-intro-panel,
.staris-intro-copy,
.staris-intro-lead,
.staris-intro-support,
.staris-intro-orb-wrap,
.staris-intro-orb,
.staris-intro-inline,
.staris-intro-bubble,
[data-staris-intro-line-1],
[data-staris-intro-line-2],
[data-staris-intro-line-3] {
  display: none !important;
}

/* ── DESKTOP: tighter topbar, more room for chat ── */
@media (min-width: 981px) {
  .staris-main {
    padding: 16px 28px 12px;
    gap: 8px;
  }
  .staris-main-topbar {
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(151,169,255,.07);
    margin-bottom: 4px;
  }
  .staris-greeting { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
  .staris-date { font-size: 11px; color: #8e98c4; margin-top: 2px; }

  .staris-chip-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 8px;
    margin: 0 0 6px;
    flex-shrink: 0;
  }
  .staris-chip-row button {
    height: 36px;
    font-size: 12px;
    border-radius: 12px;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Chat thread fills remaining space */
  .staris-chat-thread {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    max-height: none !important;
    padding: 6px 10px 0 0;
  }

  /* Cleaner message bubbles */
  .staris-msg-assistant {
    max-width: 72%;
    background: rgba(255,255,255,.032);
    border: 1px solid rgba(151,169,255,.07);
  }
  .staris-msg-user {
    max-width: 46% !important;
    background: linear-gradient(135deg, rgba(109,69,255,.92), rgba(171,82,255,.78)) !important;
  }

  /* Input bar */
  .staris-chat-form {
    flex-shrink: 0;
    padding: 10px 0 8px;
    border-top: 1px solid rgba(151,169,255,.06);
    background: linear-gradient(180deg, rgba(6,11,30,0), rgba(6,11,30,.98) 20%);
  }
}

/* ── MOBILE OVERHAUL ── */
@media (max-width: 980px) {
  /* Full-height locked layout */
  html, body { height: 100%; overflow: hidden !important; }
  .staris-chat-app { height: 100dvh !important; overflow: hidden !important; }
  .staris-shell { height: 100% !important; display: flex !important; flex-direction: column !important; }

  .staris-main {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  /* Topbar: compact single row */
  .staris-main-topbar {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 0 8px !important;
    border-bottom: 1px solid rgba(151,169,255,.07) !important;
    flex-shrink: 0 !important;
  }
  .staris-greeting { font-size: 15px !important; font-weight: 800 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .staris-date { font-size: 10px !important; color: #8e98c4 !important; white-space: nowrap !important; }
  .staris-mobile-nav-btn { display: inline-flex !important; height: 36px !important; padding: 0 12px !important; font-size: 13px !important; }
  .staris-tone-select select { height: 36px !important; min-width: 110px !important; font-size: 12px !important; padding: 0 28px 0 10px !important; }

  /* Chips: horizontal scroll row */
  .staris-chip-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 7px !important;
    padding: 0 0 4px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    scrollbar-width: none !important;
  }
  .staris-chip-row::-webkit-scrollbar { display: none !important; }
  .staris-chip-row button {
    flex: 0 0 auto !important;
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(151,169,255,.12) !important;
  }

  /* Chat thread fills all remaining space */
  .staris-chat-thread {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 4px 0 0 0 !important;
    gap: 10px !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Messages — full width, no avatar on mobile */
  .staris-msg, .staris-msg-user { max-width: 86% !important; font-size: 14px !important; line-height: 1.5 !important; padding: 12px 14px !important; }
  .staris-msg-assistant { padding-left: 14px !important; min-height: 0 !important; background: rgba(255,255,255,.04) !important; border: 1px solid rgba(151,169,255,.08) !important; border-bottom-left-radius: 8px !important; }
  .staris-msg-user { background: linear-gradient(135deg, rgba(109,69,255,.92), rgba(171,82,255,.78)) !important; margin-left: auto !important; border-bottom-right-radius: 8px !important; }
  .staris-msg-avatar { display: none !important; }
  .staris-msg-time { font-size: 10px !important; opacity: .55 !important; }

  /* Input — sticky at the bottom with safe area padding */
  .staris-chat-form {
    position: sticky !important;
    bottom: 0 !important;
    flex-shrink: 0 !important;
    grid-template-columns: minmax(0,1fr) 48px !important;
    gap: 8px !important;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, rgba(6,11,30,0), rgba(6,11,30,.98) 18%) !important;
    z-index: 10 !important;
  }
  .staris-chat-form input {
    height: 48px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    padding: 0 16px !important;
  }
  .staris-send-btn { height: 48px !important; width: 48px !important; border-radius: 14px !important; font-size: 16px !important; }
  .staris-chat-note { display: none !important; }
}

@media (max-width: 640px) {
  .staris-main { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important; }
  .staris-greeting { font-size: 14px !important; }
  .staris-msg, .staris-msg-user { max-width: 92% !important; font-size: 13.5px !important; }
}

/* ── TYPING DOTS — make them appear inside a proper bubble ── */
.staris-msg-assistant .staris-typing {
  min-height: 20px;
  padding: 2px 0;
}

/* ── TONE SELECT — cleaner on all screens ── */
.staris-tone-select select {
  background: rgba(8,14,38,.94);
  border: 1px solid rgba(151,169,255,.14);
  color: #d4dcf8;
  cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════════════════════
   STARIS v6.8 — DEFINITIVE LAYOUT + SIDEBAR WIDGETS + VISUAL POLISH
   Strategy: use height:100vh + overflow:hidden on the app container.
   Never touch html/body overflow (breaks WordPress).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; }

/* ── APP ROOT — fixed viewport, no html/body changes ── */
.staris-chat-app {
  position: fixed !important;
  inset: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 1 !important;
}
body.admin-bar .staris-chat-app { top: 32px !important; }
@media (max-width: 782px) { body.admin-bar .staris-chat-app { top: 46px !important; } }

.staris-shell {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
}

/* ══════════════════════════════════════════════════════
   DESKTOP (≥ 981px)
   ══════════════════════════════════════════════════════ */
@media (min-width: 981px) {
  /* Sidebar: fixed left column */
  .staris-sidebar {
    position: absolute !important;
    left: 0 !important; top: 0 !important; bottom: 0 !important;
    width: 230px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(100,80,200,.2) transparent !important;
    z-index: 5 !important;
    padding: 18px 14px 20px !important;
    gap: 10px !important;
  }
  .staris-sidebar::-webkit-scrollbar { width: 3px; }
  .staris-sidebar::-webkit-scrollbar-thumb { background: rgba(100,80,200,.2); border-radius: 99px; }

  /* Main area: absolute, fills right of sidebar */
  .staris-main {
    position: absolute !important;
    left: 230px !important; right: 0 !important;
    top: 0 !important; bottom: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 14px 22px 0 !important;
    gap: 8px !important;
  }
  .staris-mobile-nav-btn, .staris-mobile-overlay { display: none !important; }
  .staris-main-topbar { flex: 0 0 auto; }
  .staris-chip-row    { flex: 0 0 auto; }
  .staris-chat-thread {
    flex: 1 1 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .staris-chat-form {
    flex: 0 0 auto !important;
    padding: 10px 0 12px !important;
    border-top: 1px solid rgba(100,120,255,.07) !important;
    background: linear-gradient(0deg,rgba(4,7,20,.99) 60%,transparent) !important;
    position: relative !important;
    z-index: 4 !important;
    /* Extend gradient edge-to-edge */
    margin: 0 -22px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  .staris-chat-note { display: none !important; }
}

/* ══════════════════════════════════════════════════════
   MOBILE (≤ 980px)
   ══════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .staris-sidebar {
    position: absolute !important;
    left: 0 !important; top: 0 !important; bottom: 0 !important;
    width: min(82vw, 290px) !important;
    transform: translateX(-110%) !important;
    transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
    z-index: 50 !important;
    overflow-y: auto !important;
    padding: 16px 12px 20px !important;
    gap: 10px !important;
  }
  .staris-shell.is-mobile-open .staris-sidebar {
    transform: translateX(0) !important;
  }
  .staris-mobile-overlay {
    position: absolute !important; inset: 0 !important;
    background: rgba(1,3,12,.65) !important;
    backdrop-filter: blur(3px) !important;
    opacity: 0 !important; pointer-events: none !important;
    transition: opacity .25s !important; z-index: 45 !important;
    display: block !important;
  }
  .staris-shell.is-mobile-open .staris-mobile-overlay {
    opacity: 1 !important; pointer-events: auto !important;
  }
  .staris-main {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 10px 12px 0 !important;
    gap: 8px !important;
  }
  .staris-main-topbar {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(100,120,255,.08) !important;
  }
  .staris-chip-row {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 7px !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
  }
  .staris-chip-row::-webkit-scrollbar { display: none; }
  .staris-chip-row button {
    flex: 0 0 auto !important; white-space: nowrap !important;
    height: 32px !important; padding: 0 12px !important;
    border-radius: 999px !important; font-size: 11px !important;
  }
  .staris-chat-thread {
    flex: 1 1 0 !important;
    height: 0 !important; min-height: 0 !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px 0 4px !important;
  }
  .staris-chat-form {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr 48px !important;
    gap: 8px !important;
    padding: 8px 0 max(10px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(100,120,255,.08) !important;
    background: rgba(3,6,18,.98) !important;
    /* Extend edge-to-edge */
    margin: 0 -12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    z-index: 10 !important;
  }
  .staris-chat-form input {
    height: 48px !important; border-radius: 14px !important;
    font-size: 15px !important; padding: 0 16px !important;
    width: 100% !important; min-width: 0 !important;
    background: rgba(8,14,38,.95) !important;
    border: 1px solid rgba(100,120,255,.18) !important;
    color: #eef2ff !important; display: block !important;
    -webkit-appearance: none !important;
  }
  .staris-send-btn {
    height: 48px !important; width: 48px !important;
    min-width: 48px !important; border-radius: 14px !important;
    background: linear-gradient(135deg,#6030f0,#9844f5) !important;
    border: none !important; color: #fff !important;
    font-size: 18px !important; cursor: pointer !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important;
  }
  .staris-msg-avatar { display: none !important; }
  .staris-msg-assistant { padding-left: 14px !important; }
  .staris-chat-note { display: none !important; }
}

/* ══════════════════════════════════════════════════════
   MESSAGES
   ══════════════════════════════════════════════════════ */
.staris-msg {
  overflow: visible !important;
  word-break: break-word !important;
  animation: stMsgIn .18s ease forwards;
}
@keyframes stMsgIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
.staris-msg-body { overflow: visible !important; min-width: 0; }
.staris-msg p { word-break: break-word; overflow-wrap: anywhere; margin: 0 0 5px; line-height: 1.55; }
.staris-msg p:last-child { margin-bottom: 0; }
.staris-msg-time {
  display: block !important; overflow: visible !important;
  white-space: nowrap !important; font-size: 10px !important;
  opacity: .45 !important; margin-top: 5px !important;
  line-height: 1.2 !important; padding-bottom: 2px !important;
}
.staris-msg-assistant {
  background: linear-gradient(145deg,rgba(18,24,52,.9),rgba(12,16,38,.85)) !important;
  border: 1px solid rgba(100,120,255,.11) !important;
  border-radius: 4px 18px 18px 18px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.22) !important;
  padding: 12px 16px 10px !important;
}
@media (min-width: 981px) {
  .staris-msg-assistant { padding-left: 50px !important; min-height: 50px !important; position: relative !important; }
  .staris-msg-avatar {
    position: absolute !important; left: 11px !important; top: 11px !important;
    width: 28px !important; height: 28px !important; border-radius: 50% !important;
    box-shadow: 0 0 12px rgba(120,80,255,.5) !important;
    display: block !important;
  }
}
.staris-msg-user {
  background: linear-gradient(135deg,#5c28ee,#9040f0) !important;
  border: none !important;
  border-radius: 18px 4px 18px 18px !important;
  box-shadow: 0 4px 16px rgba(92,40,238,.35) !important;
  padding: 12px 16px 10px !important;
  color: #fff !important;
}
.staris-msg-user .staris-msg-time { color: rgba(255,255,255,.45) !important; }

/* Typing dots */
.staris-typing { display: inline-flex; gap: 6px; align-items: center; padding: 4px 2px; }
.staris-typing span {
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg,#a78bfa,#7c6fff);
  box-shadow: 0 0 8px rgba(167,139,250,.55);
}
@keyframes stDot { 0%,70%,100%{opacity:.2;transform:scale(.8)} 35%{opacity:1;transform:scale(1.2)} }
.staris-typing span:nth-child(1){animation:stDot 1.4s ease-in-out infinite 0s}
.staris-typing span:nth-child(2){animation:stDot 1.4s ease-in-out infinite .22s}
.staris-typing span:nth-child(3){animation:stDot 1.4s ease-in-out infinite .44s}

/* Scrollbar in thread */
.staris-chat-thread::-webkit-scrollbar { width: 3px; }
.staris-chat-thread::-webkit-scrollbar-thumb { background: rgba(100,80,200,.25); border-radius: 99px; }
.staris-chat-thread { scrollbar-width: thin; scrollbar-color: rgba(100,80,200,.22) transparent; }

/* Chips */
.staris-chip-row button {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(100,120,255,.14) !important;
  border-radius: 12px !important; color: #b0bcec !important;
  font-size: 12px !important; font-weight: 600 !important;
  transition: all .18s !important; cursor: pointer !important;
}
.staris-chip-row button:hover {
  background: rgba(90,40,220,.2) !important;
  border-color: rgba(120,80,255,.38) !important;
  color: #eef2ff !important; transform: translateY(-1px) !important;
}

/* Input */
.staris-chat-form input {
  background: rgba(8,14,38,.94) !important;
  border: 1px solid rgba(100,120,255,.16) !important;
  color: #eef2ff !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.staris-chat-form input:focus {
  border-color: rgba(110,70,240,.45) !important;
  box-shadow: 0 0 0 3px rgba(110,70,240,.1) !important;
  outline: none !important;
}
.staris-chat-form input::placeholder { color: rgba(140,160,220,.38) !important; }
.staris-send-btn {
  background: linear-gradient(135deg,#5c28ee,#9040f0) !important;
  border: none !important; border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(92,40,238,.38) !important;
  transition: transform .15s, box-shadow .15s !important;
  cursor: pointer !important;
}
.staris-send-btn:hover { transform: scale(1.06) !important; box-shadow: 0 6px 22px rgba(92,40,238,.55) !important; }
.staris-send-btn:active { transform: scale(.96) !important; }

/* ══════════════════════════════════════════════════════
   SIDEBAR WIDGETS
   ══════════════════════════════════════════════════════ */
.staris-widget {
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(100,120,255,.09);
  border-radius: 16px;
  padding: 12px 12px 10px;
  transition: border-color .2s;
}
.staris-widget:hover { border-color: rgba(120,80,255,.2); }
.staris-widget-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(140,160,220,.55);
  margin-bottom: 8px;
}

/* Signal Score */
.staris-signal-ring-wrap {
  position: relative;
  width: 80px; height: 80px;
  margin: 0 auto 6px;
}
.staris-signal-svg { width: 100%; height: 100%; }
.staris-signal-track { stroke: rgba(100,120,255,.12); }
.staris-signal-fill {
  stroke: #7c4dff;
  stroke-dasharray: 201;
  stroke-dashoffset: 201;
  transition: stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1);
}
.staris-signal-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.staris-signal-num {
  font-size: 22px; font-weight: 900;
  color: #eef2ff; line-height: 1;
  background: linear-gradient(135deg,#c8b0ff,#8060ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.staris-signal-sub { font-size: 9px; color: rgba(180,160,255,.6); letter-spacing: .06em; }
.staris-signal-note { font-size: 11px; color: rgba(180,200,255,.65); text-align: center; margin: 0; }

/* Moon */
.staris-moon-row { display: flex; align-items: center; gap: 10px; }
.staris-moon-icon { flex-shrink: 0; }
.staris-moon-info { display: flex; flex-direction: column; gap: 2px; }
.staris-moon-info strong { font-size: 12px; color: #d4ccff; font-weight: 700; }
.staris-moon-info span { font-size: 10.5px; color: rgba(180,170,255,.6); }

/* Lanes */
.staris-lanes { display: flex; flex-direction: column; gap: 6px; }
.staris-lane { display: flex; align-items: center; gap: 7px; }
.staris-lane-name { font-size: 10px; color: rgba(160,180,255,.7); width: 52px; flex-shrink: 0; }
.staris-lane-track {
  flex: 1; height: 5px; border-radius: 99px;
  background: rgba(100,120,255,.1); overflow: hidden;
}
.staris-lane-fill {
  height: 100%; width: 0; border-radius: 99px;
  background: rgba(120,80,255,.7);
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
.staris-lane-val { font-size: 10px; color: rgba(180,200,255,.7); width: 24px; text-align: right; flex-shrink: 0; }

/* Current Sky */
.staris-sky-planets { display: flex; flex-direction: column; gap: 5px; }
.staris-sky-row { display: flex; align-items: center; gap: 7px; }
.staris-sky-glyph { font-size: 13px; width: 16px; color: rgba(180,160,255,.8); }
.staris-sky-planet { font-size: 10.5px; color: rgba(180,200,255,.75); width: 52px; }
.staris-sky-sign { font-size: 10.5px; color: rgba(140,160,220,.65); }
.staris-sky-loading { font-size: 10.5px; color: rgba(140,160,220,.5); }

/* Numerology */
.staris-num-row { display: flex; align-items: center; gap: 12px; }
.staris-num-big {
  font-size: 36px; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg,#c8b0ff,#6060ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; flex-shrink: 0;
}
.staris-num-detail { display: flex; flex-direction: column; gap: 2px; }
.staris-num-detail span { font-size: 10px; color: rgba(160,180,255,.65); }

/* Transit */
.staris-transit-text { font-size: 11.5px; color: #c4d0f8; line-height: 1.5; margin: 0 0 4px; font-style: italic; }
.staris-transit-sub { font-size: 10.5px; color: rgba(160,180,255,.6); margin: 0; }

/* Hide old energy card if it's still in the DOM */
.staris-energy-card { display: none !important; }
.staris-intro-panel, .staris-intro-copy { display: none !important; }

/* Sidebar card base */
.staris-sidebar-card { border-radius: 14px; }
.staris-sidebar { gap: 10px !important; }

/* Greeting */
.staris-greeting { font-size: 16px !important; font-weight: 800 !important; letter-spacing: -.02em !important; }
.staris-date { font-size: 11px !important; color: #7888c0 !important; }

/* Nav active */
.staris-sidebar-nav button.is-active {
  background: linear-gradient(135deg,rgba(50,15,130,.85),rgba(90,35,160,.65)) !important;
  border-color: rgba(120,80,255,.2) !important;
  box-shadow: 0 4px 16px rgba(90,35,160,.28) !important;
}



/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR WIDGETS v2 — sw-* namespace, isolated from all old rules
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── BASE CARD ── */
.sw-card {
  border-radius: 18px;
  padding: 14px 14px 12px;
  background: linear-gradient(145deg, rgba(22,16,52,.88), rgba(14,10,36,.82));
  border: 1px solid rgba(130,100,255,.12);
  box-shadow: 0 4px 24px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.02) inset;
  position: relative;
  overflow: hidden;
  transition: border-color .25s ease;
}
.sw-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(ellipse at 30% 0%, rgba(110,70,255,.06) 0%, transparent 70%);
  pointer-events: none;
}
.sw-card:hover { border-color: rgba(140,100,255,.24); }
.sw-card-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(160,140,255,.45);
  margin-bottom: 12px;
}

/* ── SIGNAL SCORE ── */
.sw-score-wrap {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 10px;
}
.sw-score-svg {
  width: 110px;
  height: 110px;
  display: block;
}
.sw-ring-track {
  stroke: rgba(100,80,200,.14);
}
.sw-ring-arc {
  stroke: #8050ff;
  stroke-dasharray: 289;
  stroke-dashoffset: 289;
  filter: drop-shadow(0 0 5px rgba(130,80,255,.6));
}
.sw-ring-glow {
  stroke: rgba(120,80,255,.08);
  animation: swRingPulse 3s ease-in-out infinite;
}
@keyframes swRingPulse {
  0%, 100% { opacity: .3; r: 39; }
  50%       { opacity: .7; r: 41; }
}
.sw-score-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.sw-score-num {
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #d0b8ff 0%, #8050ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.04em;
}
.sw-score-grade {
  font-size: 9px;
  color: rgba(180,160,255,.55);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
}
.sw-score-desc {
  font-size: 11px;
  color: rgba(180,170,255,.6);
  text-align: center;
  margin: 0;
  line-height: 1.4;
  min-height: 16px;
}

/* ── MOON PHASE ── */
.sw-moon-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sw-moon-orb-wrap {
  position: relative;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}
.sw-moon-halo {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(160,130,255,.14) 0%, transparent 70%);
  animation: swMoonGlow 4s ease-in-out infinite;
}
@keyframes swMoonGlow {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%       { opacity: 1;  transform: scale(1.08); }
}
.sw-moon-svg {
  width: 60px;
  height: 60px;
  display: block;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 8px rgba(160,130,255,.35));
}
.sw-moon-shimmer {
  animation: swShimmer 3s ease-in-out infinite;
}
@keyframes swShimmer {
  0%, 100% { opacity: .12; }
  50%       { opacity: .22; }
}
.sw-moon-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sw-moon-info .sw-moon-phase {
  font-size: 12px;
  font-weight: 800;
  color: #d8ccff;
  line-height: 1.2;
}
.sw-moon-info .sw-moon-sign {
  font-size: 10.5px;
  color: rgba(180,165,255,.65);
}
.sw-moon-info .sw-moon-illum {
  font-size: 10px;
  color: rgba(150,140,220,.5);
}

/* ── TODAY'S LANES ── */
.sw-lanes {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sw-lane {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sw-lane-icon {
  font-size: 11px;
  width: 14px;
  text-align: center;
  color: rgba(160,140,255,.6);
  flex-shrink: 0;
}
.sw-lane-body {
  flex: 1;
  min-width: 0;
}
.sw-lane-name {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(180,170,255,.65);
  letter-spacing: .03em;
  margin-bottom: 3px;
}
.sw-lane-track {
  height: 5px;
  background: rgba(100,80,200,.12);
  border-radius: 99px;
  overflow: hidden;
}
.sw-lane-bar {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #4060d8, #8050ff);
  transition: width 1.2s cubic-bezier(.4,0,.15,1);
}
.sw-lane-num {
  font-size: 12px;
  font-weight: 800;
  color: rgba(200,185,255,.7);
  width: 24px;
  text-align: right;
  flex-shrink: 0;
  letter-spacing: -.02em;
}
/* Top-scoring lane gets highlighted */
.sw-lane-top .sw-lane-bar {
  box-shadow: 0 0 8px rgba(140,80,255,.55);
}
.sw-lane-top .sw-lane-num {
  color: #c0a0ff;
}
.sw-lane-top .sw-lane-name {
  color: rgba(200,185,255,.9);
}

/* ── Hide old broken widgets ── */
.staris-widget,
.staris-signal-widget,
.staris-moon-widget,
.staris-lanes-widget,
.staris-sky-widget,
.staris-num-widget,
.staris-transit-widget,
.staris-energy-card,
.staris-intro-panel { display: none !important; }



/* ── WIDGET TEXT BRIGHTNESS FIX ── */
.sw-card-label            { color: rgba(180,165,255,.70) !important; }
.sw-score-grade           { color: rgba(200,185,255,.80) !important; }
.sw-score-desc            { color: rgba(195,185,255,.75) !important; }
.sw-moon-phase            { color: #e2daff !important; }
.sw-moon-sign             { color: rgba(200,188,255,.80) !important; }
.sw-moon-illum            { color: rgba(175,165,240,.65) !important; }
.sw-lane-name             { color: rgba(200,190,255,.80) !important; }
.sw-lane-num              { color: rgba(215,205,255,.85) !important; }
.sw-lane-icon             { color: rgba(180,165,255,.75) !important; }
.sw-lane-top .sw-lane-num { color: #cdb8ff !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE OVERHAUL v2 — bottom nav, bottom sheet sidebar, fixed input
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── BOTTOM NAV: hidden on desktop ── */
.st-bottom-nav { display: none; }

@media (max-width: 980px) {

  /* ── MAIN: leave room for bottom nav ── */
  .staris-main {
    padding-bottom: 62px !important; /* bottom nav height */
  }

  /* ── BOTTOM NAV ── */
  .st-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 58px !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    background: rgba(4, 6, 18, 0.97) !important;
    border-top: 1px solid rgba(120, 90, 255, .18) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    z-index: 200 !important;
    gap: 0 !important;
  }

  .st-nav-btn {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    background: none !important;
    border: none !important;
    color: rgba(160, 148, 220, .5) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    cursor: pointer !important;
    transition: color .18s ease !important;
    padding: 8px 0 !important;
  }
  .st-nav-btn svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    transition: stroke .18s ease !important;
  }
  .st-nav-btn.is-active {
    color: #c4a8ff !important;
  }
  .st-nav-btn.is-active svg {
    stroke: #c4a8ff !important;
    filter: drop-shadow(0 0 5px rgba(180, 130, 255, .55)) !important;
  }
  .st-nav-btn:active { opacity: .7 !important; }

  /* ── SIDEBAR → BOTTOM SHEET on mobile ── */
  .staris-sidebar {
    /* Override the existing left-slide */
    top: auto !important;
    bottom: 58px !important;   /* sit above bottom nav */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 75dvh !important;
    border-radius: 22px 22px 0 0 !important;
    border-right: none !important;
    border-top: 1px solid rgba(130, 100, 255, .2) !important;
    transform: translateY(110%) !important;   /* slides UP from bottom */
    transition: transform .3s cubic-bezier(.4, 0, .2, 1) !important;
    padding: 6px 16px 16px !important;
    /* drag handle affordance */
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .55) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    /* Sidebar user card & nav not needed inside sheet */
  }

  /* Drag handle at top of sheet */
  .staris-sidebar::before {
    content: '' !important;
    display: block !important;
    width: 36px !important;
    height: 4px !important;
    border-radius: 99px !important;
    background: rgba(150, 130, 255, .35) !important;
    margin: 6px auto 14px !important;
  }

  .staris-shell.is-mobile-open .staris-sidebar {
    transform: translateY(0) !important;
  }

  /* Hide sidebar elements that don't belong in the insights sheet */
  .staris-sidebar .staris-sidebar-user,
  .staris-sidebar .staris-sidebar-nav,
  .staris-sidebar .staris-sidebar-footer {
    display: none !important;
  }

  /* Widgets inside the sheet: 3-column grid on wider phones, 1-col on narrow */
  .staris-sidebar .sw-card {
    margin-bottom: 10px !important;
  }

  /* Overlay: now covers the chat area above the bottom nav */
  .staris-mobile-overlay {
    bottom: 58px !important;  /* stop at bottom nav */
  }

  /* ── CHAT FORM — fixed, sits just above bottom nav ── */
  .staris-chat-form {
    position: sticky !important;
    bottom: 0 !important;
    flex-shrink: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 48px !important;
    gap: 8px !important;
    padding: 8px 12px 10px !important;
    background: rgba(3, 5, 16, .98) !important;
    border-top: 1px solid rgba(100, 80, 200, .12) !important;
    z-index: 20 !important;
    /* Full bleed to edges */
    margin: 0 -12px !important;
    width: calc(100% + 24px) !important;
  }

  /* Make the input clearly visible */
  .staris-chat-form input {
    height: 48px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    padding: 0 16px !important;
    background: rgba(14, 18, 45, .96) !important;
    border: 1.5px solid rgba(120, 90, 255, .28) !important;
    color: #eef2ff !important;
    width: 100% !important;
    min-width: 0 !important;
    box-shadow: 0 0 0 1px rgba(100, 70, 200, .1) inset !important;
    -webkit-appearance: none !important;
    display: block !important;
  }
  .staris-chat-form input:focus {
    border-color: rgba(140, 100, 255, .55) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(120, 80, 255, .12) !important;
  }
  .staris-chat-form input::placeholder {
    color: rgba(160, 148, 220, .45) !important;
  }

  /* Send button */
  .staris-send-btn {
    height: 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #5c28ee, #9040f0) !important;
    border: none !important;
    color: #fff !important;
    font-size: 18px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(92, 40, 238, .4) !important;
    flex-shrink: 0 !important;
  }

  /* Hide the Menu button — bottom nav replaces it */
  .staris-mobile-nav-btn { display: none !important; }

  /* Topbar: just greeting + date + mode selector */
  .staris-main-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(100, 80, 200, .1) !important;
    flex-shrink: 0 !important;
    gap: 8px !important;
  }

  /* Chat thread */
  .staris-chat-thread {
    flex: 1 1 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 0 4px !important;
    gap: 10px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Messages on mobile */
  .staris-msg-user { max-width: 82% !important; margin-left: auto !important; }
  .staris-msg-assistant { max-width: 86% !important; padding-left: 14px !important; }
  .staris-msg-avatar { display: none !important; }
  .staris-chat-note { display: none !important; }

  /* Chip row: horizontal scroll */
  .staris-chip-row {
    flex-shrink: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 7px !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
  }
  .staris-chip-row::-webkit-scrollbar { display: none !important; }
}

/* Extra brightness boost for widget text */
.sw-score-num  { -webkit-text-fill-color: unset !important; color: #e0d0ff !important;
                 background: linear-gradient(135deg,#e8daff 0%,#a880ff 100%);
                 -webkit-background-clip: text; -webkit-text-fill-color: transparent;
                 background-clip: text; }
.sw-moon-phase { color: #ede5ff !important; }
.sw-moon-sign  { color: #cec2f8 !important; }
.sw-moon-illum { color: #aea4e0 !important; }
.sw-lane-name  { color: #cdc3f5 !important; }
.sw-lane-num   { color: #ddd5ff !important; }



/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE TOPBAR + INPUT BAR POSITION FIX
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {

  /* 1. TOPBAR: greeting LEFT, "Be direct" RIGHT, same single row */
  .staris-main-topbar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 0 0 8px !important;
    flex-wrap: nowrap !important;
  }
  /* Greeting block: left side */
  .staris-main-topbar > div:has(.staris-greeting),
  .staris-main-topbar > .staris-greeting-wrap {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .staris-greeting {
    font-size: 15px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }
  .staris-date {
    font-size: 10px !important;
    color: rgba(160, 150, 220, .6) !important;
    margin-top: 1px !important;
  }
  /* "Be direct" dropdown: right side, compact */
  .staris-tone-select {
    flex-shrink: 0 !important;
  }
  .staris-tone-select select {
    height: 32px !important;
    font-size: 11px !important;
    padding: 0 22px 0 10px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
  }
  /* Menu button already hidden — keep it gone */
  .staris-mobile-nav-btn { display: none !important; }

  /* 2. MAIN AREA: stop at the top of the bottom nav so nothing hides behind it */
  .staris-main {
    bottom: 58px !important;   /* nav is 58px tall — main ends right where nav starts */
    padding-bottom: 0 !important; /* no longer needed now that bottom is clipped */
  }

  /* 3. CHAT FORM: not sticky — just the last flex child, always visible */
  .staris-chat-form {
    position: relative !important; /* override sticky */
    bottom: auto !important;
    flex-shrink: 0 !important;
    padding: 8px 12px 10px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FINAL FIXES: bubble distortion, topbar, Insights btn, close btn
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FIX 1: Scrollbar gutter — prevents bubble size change when scrollbar appears */
.staris-chat-thread {
  scrollbar-gutter: stable !important; /* reserves scrollbar width always */
  overflow-y: auto !important;
}

/* ── FIX 2: Bubble sizing — never changes when scrollbar appears */
.staris-msg {
  box-sizing: border-box !important;
  min-width: 0 !important;
  overflow: visible !important;
}
.staris-msg-assistant {
  max-width: calc(100% - 16px) !important; /* consistent regardless of scrollbar */
}
.staris-msg-user {
  max-width: min(480px, 60%) !important;
}
/* Timestamp always inside bubble, never shifts out */
.staris-msg-body { overflow: visible !important; }
.staris-msg-time {
  display: block !important;
  overflow: visible !important;
  white-space: nowrap !important;
  clear: both !important;
}

/* ── FIX 3: Topbar layout — both desktop and mobile */
.staris-main-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
}
.staris-topbar-left {
  flex: 1 !important;
  min-width: 0 !important;
}
.staris-topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* ── FIX 4: Insights button — mobile only, hidden on desktop */
.st-insights-btn { display: none; }

@media (max-width: 980px) {
  /* Topbar: zero top padding so it hugs the top */
  .staris-main {
    padding-top: 8px !important;
  }
  .staris-main-topbar {
    padding-top: 0 !important;
  }

  /* Insights button */
  .st-insights-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: rgba(120, 90, 255, .14) !important;
    border: 1px solid rgba(140, 100, 255, .28) !important;
    border-radius: 10px !important;
    color: #c8b8ff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 6px 10px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .18s, border-color .18s !important;
  }
  .st-insights-btn.is-active,
  .st-insights-btn:active {
    background: rgba(120, 90, 255, .28) !important;
    border-color: rgba(160, 120, 255, .5) !important;
  }
  .st-insights-btn svg { stroke: #c8b8ff !important; }

  /* Bottom nav: only hide on views that have their own topbar nav (chat only) */
  .staris-main--dream .st-bottom-nav { display: flex !important; }
  .staris-main--tarot .st-bottom-nav { display: flex !important; }
  .staris-main--natal .st-bottom-nav { display: flex !important; }
  .staris-main--fortune .st-bottom-nav { display: flex !important; }
  .staris-main--compat .st-bottom-nav { display: flex !important; }

  /* Main fills full height again (no nav at bottom) */
  .staris-main {
    bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Mobile bubbles — fixed max-width */
  .staris-msg-assistant { max-width: 88% !important; }
  .staris-msg-user      { max-width: 78% !important; min-width: 80px !important; }

  /* Chat form at bottom */
  .staris-chat-form {
    position: relative !important;
    bottom: auto !important;
    flex-shrink: 0 !important;
    padding: 8px 12px 12px !important;
  }
}

/* ── FIX 5: Bottom sheet close button */
.st-sheet-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(120, 90, 255, .15) !important;
  border: 1px solid rgba(140, 100, 255, .25) !important;
  color: #c8b8ff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  transition: background .18s !important;
}
.st-sheet-close:hover { background: rgba(120, 90, 255, .28) !important; }
.st-sheet-close svg { stroke: currentColor !important; }

/* ── FIX 6: Better lane icon representation */
#sw-lane-Love   .sw-lane-icon { color: #f48cba !important; font-size: 13px !important; }  /* pink heart */
#sw-lane-Money  .sw-lane-icon { color: #a8d8a0 !important; font-size: 11px !important; }  /* green coin */
#sw-lane-Work   .sw-lane-icon { color: #f8c460 !important; font-size: 12px !important; }  /* yellow lightning */
#sw-lane-Energy .sw-lane-icon { color: #80c8ff !important; font-size: 11px !important; }  /* blue orb */



/* ═══════════════════════════════════════════════════════════════════════════
   PROFILE DRAWER + PROFILE PAGE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── DRAWER SHELL ── */
.staris-profile-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(480px, 100vw);
  background: linear-gradient(160deg, #0d0a1e 0%, #08061a 100%);
  border-left: 1px solid rgba(120,90,255,.15);
  box-shadow: -20px 0 60px rgba(0,0,0,.55);
  transform: translateX(110%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  z-index: 500;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.staris-profile-drawer.is-open { transform: translateX(0); }
.staris-profile-overlay {
  position: fixed; inset: 0;
  background: rgba(1,2,12,.6);
  backdrop-filter: blur(4px);
  z-index: 499;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.staris-profile-overlay.is-visible { opacity: 1; pointer-events: auto; }

/* Drawer inner */
.spd-inner { display: flex; flex-direction: column; height: 100%; }
.spd-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(120,90,255,.1);
  flex-shrink: 0;
}
.spd-title { font-size: 17px; font-weight: 800; color: #eef2ff; letter-spacing: -.02em; margin: 0; }
.spd-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(120,90,255,.12); border: 1px solid rgba(120,90,255,.2);
  color: #c4b8ff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .18s;
}
.spd-close:hover { background: rgba(120,90,255,.25); }
.spd-content { flex: 1; overflow-y: auto; padding: 0; scrollbar-width: thin; scrollbar-color: rgba(100,80,200,.2) transparent; }

/* ── PROFILE ROOT ── */
.staris-profile {
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: #ddd8f8;
  position: relative;
}
.staris-profile-standalone .staris-profile {
  max-width: 680px; margin: 0 auto;
}

/* ── HEADER ── */
.sp-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 20px;
}
.sp-header-left { display: flex; align-items: center; gap: 12px; }
.sp-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(120,80,255,.3), rgba(80,120,255,.2));
  border: 1px solid rgba(120,90,255,.3);
  display: flex; align-items: center; justify-content: center;
  color: #b0a0ff; flex-shrink: 0;
  box-shadow: 0 0 16px rgba(120,80,255,.2);
}
.sp-header-name { font-size: 16px; font-weight: 800; color: #eef2ff; }
.sp-header-sub  { font-size: 11px; color: rgba(160,150,220,.6); margin-top: 2px; }
.sp-big3 {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
}
.sp-big3-item {
  background: rgba(120,90,255,.12); border: 1px solid rgba(120,90,255,.18);
  border-radius: 8px; padding: 4px 10px; font-size: 11px; font-weight: 700;
  color: #c4b4ff; white-space: nowrap;
}

/* ── TABS ── */
.sp-tabs {
  display: flex; gap: 4px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(120,90,255,.1);
  border-radius: 14px; padding: 4px;
  margin-bottom: 18px; overflow-x: auto; flex-shrink: 0;
  scrollbar-width: none;
}
.sp-tabs::-webkit-scrollbar { display: none; }
.sp-tab {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 5px; padding: 8px 10px;
  border-radius: 10px; border: none;
  background: transparent; color: rgba(180,165,255,.55);
  font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: all .18s ease;
}
.sp-tab svg { stroke: currentColor; flex-shrink: 0; }
.sp-tab.is-active {
  background: linear-gradient(135deg, rgba(80,40,200,.7), rgba(100,60,220,.5));
  color: #e0d4ff;
  box-shadow: 0 2px 12px rgba(80,40,200,.3);
}

/* ── PANELS ── */
.sp-panel { display: none; }
.sp-panel.is-active { display: block; }

/* ── SKELETON ── */
.sp-loading { padding: 8px 0; }
.sp-skeleton {
  height: 44px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(120,90,255,.08) 25%, rgba(120,90,255,.14) 50%, rgba(120,90,255,.08) 75%);
  background-size: 200% 100%;
  animation: spSkeletonShimmer 1.4s ease-in-out infinite;
  margin-bottom: 10px;
}
.sp-skeleton-sm { height: 28px; width: 60%; }
@keyframes spSkeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── LOCK BANNER ── */
.sp-lock-banner {
  display: flex; align-items: center; gap: 8px;
  background: rgba(220,80,80,.1); border: 1px solid rgba(220,80,80,.22);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 14px;
  font-size: 12px; color: #f8b0b0;
}
.sp-lock-badge {
  margin-left: auto; background: rgba(220,80,80,.2); border-radius: 6px;
  padding: 2px 8px; font-size: 10px; font-weight: 700; white-space: nowrap;
}

/* ── SECTION LABELS ── */
.sp-section-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(160,140,255,.5); margin: 0 0 10px;
}
.sp-section-hint { font-size: 11.5px; color: rgba(180,170,255,.6); margin: -4px 0 12px; line-height: 1.5; }
.sp-change-counter { color: rgba(160,140,255,.5); }
.sp-optional { font-size: 10px; color: rgba(150,140,220,.5); font-weight: 400; }

/* ── FORMS ── */
.sp-form { display: flex; flex-direction: column; gap: 12px; }
.sp-field { display: flex; flex-direction: column; gap: 5px; }
.sp-field label { font-size: 11px; font-weight: 700; color: rgba(190,180,255,.7); }
.sp-field input:not([type=radio]):not([type=hidden]),
.sp-field textarea,
.sp-select {
  background: rgba(12,10,30,.85); border: 1px solid rgba(120,90,255,.18);
  border-radius: 12px; padding: 10px 14px;
  color: #eef2ff; font-size: 13.5px;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.sp-field input:not([type=radio]):not([type=hidden]):focus,
.sp-select:focus {
  border-color: rgba(140,100,255,.5); outline: none;
  box-shadow: 0 0 0 3px rgba(120,80,255,.12);
}
.sp-field input:disabled { opacity: .45; cursor: not-allowed; }
.sp-field-row { display: flex; gap: 10px; }
.sp-two-col > .sp-field { flex: 1; }

/* ── BUTTONS ── */
.sp-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 20px; border-radius: 12px; border: none;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all .18s; width: fit-content;
}
.sp-btn-primary {
  background: linear-gradient(135deg, #5c28ee, #9040f0);
  color: #fff; box-shadow: 0 4px 16px rgba(92,40,238,.35);
}
.sp-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(92,40,238,.5); }
.sp-btn-primary:active { transform: translateY(0); }
.sp-btn-primary.is-disabled,
.sp-btn-primary:disabled {
  opacity: .4; cursor: not-allowed; transform: none;
  box-shadow: none; background: rgba(120,90,180,.3);
}
.sp-btn-danger { background: rgba(200,50,50,.15); border: 1px solid rgba(200,50,50,.25); color: #f88; }
.sp-btn-danger:hover { background: rgba(200,50,50,.25); }

/* ── DIVIDER ── */
.sp-divider { height: 1px; background: rgba(120,90,255,.1); margin: 18px 0; }

/* ── INFO LIST ── */
.sp-info-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.sp-info-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: rgba(180,170,255,.75);
}
.sp-info-row span:last-child { color: rgba(210,200,255,.9); font-weight: 600; }

/* ── OPTION CARDS (tone/focus picker) ── */
.sp-option-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.sp-focus-grid { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 400px) { .sp-focus-grid { grid-template-columns: 1fr 1fr; } }
.sp-option-card { position: relative; cursor: pointer; }
.sp-option-card input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.sp-option-inner {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(120,90,255,.12);
  border-radius: 14px; padding: 12px 10px; text-align: center;
  transition: all .18s; cursor: pointer;
}
.sp-option-inner:hover { border-color: rgba(140,100,255,.3); background: rgba(120,90,255,.08); }
.sp-option-card.is-selected .sp-option-inner {
  background: rgba(80,40,200,.2); border-color: rgba(140,100,255,.45);
  box-shadow: 0 0 0 1px rgba(140,100,255,.2) inset;
}
.sp-option-icon { font-size: 18px; line-height: 1; margin-bottom: 2px; }
.sp-option-inner strong { font-size: 11.5px; color: #ddd4ff; font-weight: 700; }
.sp-option-inner small { font-size: 10px; color: rgba(160,150,220,.6); line-height: 1.3; }

/* ── SUPPORT GRID ── */
.sp-support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
.sp-support-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 112px; background: linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02)); border: 1px solid rgba(140,100,255,.14);
  border-radius: 18px; padding: 18px 12px; text-decoration: none;
  text-align: center; transition: transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 16px 38px rgba(0,0,0,.12);
}
.sp-support-card:before{content:'';position:absolute;inset:-1px;background:radial-gradient(circle at 50% 0%,rgba(167,139,250,.16),transparent 46%);opacity:.7;pointer-events:none;transition:opacity .18s ease;}
.sp-support-card:hover { border-color: rgba(167,139,250,.36); background: linear-gradient(180deg,rgba(124,58,237,.12),rgba(255,255,255,.025)); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 22px 50px rgba(0,0,0,.18), 0 0 34px rgba(124,58,237,.09); }
.sp-support-card:hover:before{opacity:1;}
.sp-support-icon { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 14px; display:flex; align-items:center; justify-content:center; color:#c4b5fd; background:linear-gradient(135deg,rgba(124,58,237,.34),rgba(167,139,250,.12)); border:1px solid rgba(167,139,250,.22); box-shadow:0 0 22px rgba(124,58,237,.18); }
.sp-support-icon svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.sp-support-card strong { position: relative; z-index: 1; font-size: 12.5px; color: #f3efff; font-weight: 800; letter-spacing:-.02em; }
.sp-support-card small { position: relative; z-index: 1; font-size: 10.75px; color: rgba(190,180,235,.66); }
.sp-danger-zone { color: rgba(220,80,80,.5) !important; }

/* ── TOAST ── */
.sp-toast {
  position: sticky; bottom: 12px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(20,14,44,.96); border: 1px solid rgba(120,90,255,.2);
  border-radius: 12px; padding: 10px 18px;
  font-size: 13px; color: #ddd4ff; text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 10; white-space: nowrap;
}
.sp-toast.is-visible {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.sp-toast.sp-toast-success { border-color: rgba(80,200,120,.3); color: #a0f0b8; }
.sp-toast.sp-toast-error   { border-color: rgba(220,80,80,.3);  color: #f8b0b0; }

/* ── STANDALONE PROFILE PAGE ── */
.staris-profile-standalone {
  background: linear-gradient(160deg, #0a0818 0%, #060514 100%);
  min-height: 100vh;
}
.staris-profile-page { max-width: 720px; margin: 0 auto; padding: 20px 16px 40px; }
.spp-back { margin-bottom: 24px; }
.spp-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(180,160,255,.7); font-size: 13px; font-weight: 600;
  text-decoration: none; transition: color .18s;
}
.spp-back-btn:hover { color: #c4b4ff; }
.spp-back-btn svg { stroke: currentColor; }

/* Chart summary */
.sp-chart-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 8px;
}
.sp-chart-cell {
  background: rgba(120,90,255,.08); border: 1px solid rgba(120,90,255,.14);
  border-radius: 12px; padding: 10px; text-align: center;
}
.sp-chart-cell .sp-cell-label { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: rgba(160,140,255,.5); margin-bottom: 4px; }
.sp-chart-cell .sp-cell-val   { font-size: 13px; font-weight: 800; color: #ddd4ff; }

/* Mobile drawer: full screen */
@media (max-width: 640px) {
  .staris-profile-drawer { width: 100vw; border-left: none; border-top: 1px solid rgba(120,90,255,.15); }
  .sp-option-grid { grid-template-columns: 1fr 1fr; }
  .sp-focus-grid  { grid-template-columns: 1fr 1fr; }
  .sp-field-row.sp-two-col { flex-direction: column; }
  .sp-big3 { display: none; }
}



/* ═══════════════════════════════════════════════════════════════════════════
   PROFILE DRAWER FIXES: toast, close button, topbar
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fix toast — use fixed position bottom-right, always on screen, above drawer */
.sp-toast {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  left: auto !important;
  transform: translateY(12px) !important;
  z-index: 600 !important;  /* above drawer z-index 500 */
  min-width: 220px;
  max-width: 340px;
  white-space: normal !important;
  text-align: left !important;
}
.sp-toast.is-visible {
  transform: translateY(0) !important;
}
@media (max-width: 640px) {
  .sp-toast {
    right: 12px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 16px !important;
  }
}

/* Fix topbar — ensure close button is always visible */
.spd-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: linear-gradient(180deg, #0d0a1e 80%, transparent) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px 14px !important;
  flex-shrink: 0 !important;
}
.spd-close {
  flex-shrink: 0 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(120,90,255,.14) !important;
  border: 1.5px solid rgba(130,100,255,.28) !important;
  color: #d4c8ff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .18s !important;
}
.spd-close:hover { background: rgba(120,90,255,.28) !important; }
.spd-close svg { stroke: currentColor !important; pointer-events: none !important; }
.spd-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #eef2ff !important;
  margin: 0 !important;
  letter-spacing: -.02em !important;
}

/* Drawer content scrolls independently from topbar */
.spd-inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
}
.spd-content {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(100,80,200,.2) transparent !important;
}



/* ═══════════════════════════════════════════════════════════════════════════
   NATAL CHART — Full premium design
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── NAV BUTTON for natal chart ── */
.staris-sidebar-nav button {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid transparent;
  background: transparent; color: rgba(180,165,255,.55);
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all .18s ease; text-align: left;
}
.staris-sidebar-nav button svg { stroke: currentColor; flex-shrink: 0; }
.staris-sidebar-nav button:hover {
  background: rgba(120,80,255,.1);
  color: rgba(200,185,255,.85);
}
.staris-sidebar-nav button.is-active {
  background: linear-gradient(135deg,rgba(60,20,140,.85),rgba(100,40,180,.65)) !important;
  border-color: rgba(120,80,255,.22) !important;
  color: #e0d4ff !important;
  box-shadow: 0 4px 16px rgba(90,30,160,.28) !important;
}

/* ── ROOT CONTAINER ── */
.snc-root {
  width: 100%;
  color: #ddd8f8;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ── LOADING PULSE ── */
.snc-loading-pulse {
  background: linear-gradient(90deg,rgba(140,100,255,.15) 25%,rgba(180,140,255,.28) 50%,rgba(140,100,255,.15) 75%);
  background-size: 200% 100%;
  animation: sncPulse 1.6s ease-in-out infinite;
  border-radius: 6px; padding: 2px 8px;
}
@keyframes sncPulse { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── HERO ── */
.snc-hero {
  position: relative;
  min-height: 380px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 24px 32px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, rgba(100,50,220,.22) 0%, rgba(20,10,50,.0) 70%);
}
/* Cosmic ring background */
.snc-ring-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.snc-ring-svg { width: 340px; height: 340px; opacity: .85; }
.snc-ring-rotate { animation: sncRingRotate 80s linear infinite; transform-origin: 180px 180px; }
@keyframes sncRingRotate { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* Hero text */
.snc-hero-text { position: relative; z-index: 2; text-align: center; margin-bottom: 28px; }
.snc-hero-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(180,155,255,.55); margin: 0 0 10px;
}
.snc-hero-headline {
  font-size: clamp(22px, 4vw, 32px); font-weight: 900; margin: 0 0 8px;
  color: #eef2ff; letter-spacing: -.03em; line-height: 1.2;
}
.snc-hero-headline em {
  font-style: normal;
  background: linear-gradient(135deg, #e0d0ff 0%, #b090ff 50%, #8060ee 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.snc-hero-sub { font-size: 12px; color: rgba(180,165,255,.55); margin: 0; }

/* ── BIG 3 ── */
.snc-big3 {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; width: 100%; max-width: 520px;
}
.snc-b3-card {
  background: var(--b3-bg, rgba(120,80,255,.12));
  border: 1px solid var(--b3-border, rgba(120,80,255,.25));
  border-radius: 18px;
  padding: 16px 12px;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 20px var(--b3-glow, rgba(120,80,255,.15));
  cursor: default;
}
.snc-b3-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px var(--b3-glow, rgba(120,80,255,.25));
}
.snc-b3-center { transform: scale(1.05); }
.snc-b3-center:hover { transform: scale(1.05) translateY(-3px); }
.snc-b3-glyph {
  font-size: 24px; line-height: 1; margin-bottom: 4px;
  color: var(--b3-text, #c4b8ff);
}
.snc-b3-label {
  font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(180,165,255,.5); margin-bottom: 5px;
}
.snc-b3-sign {
  font-size: 14px; font-weight: 800; color: var(--b3-text, #e0d4ff);
  margin-bottom: 4px;
}
.snc-b3-detail { font-size: 10px; color: rgba(180,165,255,.55); }

/* ── SECTIONS ── */
.snc-section {
  padding: 28px 22px;
  border-top: 1px solid rgba(120,80,255,.08);
}
.snc-section:first-of-type { border-top: none; }
.snc-section-header { margin-bottom: 20px; }
.snc-section-icon { font-size: 18px; display: block; margin-bottom: 6px; color: rgba(180,155,255,.7); }
.snc-section-title {
  font-size: 20px; font-weight: 900; color: #eef2ff;
  letter-spacing: -.025em; margin: 0 0 6px;
}
.snc-section-sub { font-size: 13px; color: rgba(180,165,255,.6); margin: 0; line-height: 1.5; }

/* ── SCROLL REVEAL ── */
.snc-reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.snc-revealed { opacity: 1; transform: translateY(0); }

/* ── IDENTITY ── */
.snc-identity-para {
  font-size: 15px; line-height: 1.7; color: #d4ccf8;
  margin: 0 0 18px; max-width: 680px;
}
.snc-identity-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.snc-chip {
  display: flex; align-items: center; gap: 6px;
  background: rgba(120,80,255,.1); border: 1px solid rgba(120,80,255,.18);
  border-radius: 10px; padding: 6px 12px;
}
.snc-chip-label { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(160,140,255,.55); }
.snc-chip-val   { font-size: 12px; font-weight: 700; color: #d4c8ff; }

/* ── PLANET CARDS ── */
.snc-planets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.snc-planet-card {
  background: var(--pc-bg, rgba(120,80,255,.08));
  border: 1px solid var(--pc-border, rgba(120,80,255,.18));
  border-radius: 16px; padding: 14px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.snc-planet-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--pc-glow, rgba(120,80,255,.2));
}
.snc-pc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.snc-pc-glyph  { font-size: 22px; color: var(--pc-text, #c4b8ff); flex-shrink: 0; width: 28px; text-align: center; }
.snc-pc-info   { flex: 1; min-width: 0; }
.snc-pc-name   { display: block; font-size: 13px; font-weight: 800; color: #e0d8ff; }
.snc-pc-pos    { display: block; font-size: 11px; color: var(--pc-text, rgba(180,165,255,.7)); }
.snc-pc-element{ font-size: 10px; color: var(--pc-text, rgba(180,165,255,.5)); font-weight: 700; letter-spacing: .04em; }
.snc-pc-reading{ font-size: 13.5px; color: rgba(220,210,255,.88); line-height: 1.65; margin-top: 10px; }
.snc-pc-means  { font-size: 12px; color: rgba(196,181,255,.65); line-height: 1.5; margin-top: 6px; font-style: italic; }
.snc-pc-house  { font-size: 11px; color: rgba(167,139,250,.7); font-weight: 600; margin-top: 4px; }

/* ── ASPECTS ── */
.snc-aspects-list { display: flex; flex-direction: column; gap: 10px; }
.snc-aspect-card {
  border-radius: 14px; padding: 16px 18px;
}
.snc-asp-gift    { background: rgba(80,200,120,.07);  border: 1px solid rgba(80,200,120,.2);  }
.snc-asp-tension { background: rgba(240,140,60,.07);  border: 1px solid rgba(240,140,60,.2);  }
.snc-asp-type-badge {
  display: inline-block; border-radius: 6px; padding: 3px 10px;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; margin-bottom: 8px;
}
.snc-asp-type-badge.gift    { background: rgba(80,200,120,.15); color: #80e0a0; }
.snc-asp-type-badge.tension { background: rgba(240,140,60,.15); color: #f0a060; }
.snc-asp-text { font-size: 14px; color: rgba(228,218,255,.92); line-height: 1.7; margin: 0; }

/* Interpreted aspect rows */
.snc-asp-interp-row {
  padding: 12px 14px; border-radius: 12px;
  background: rgba(120,80,255,.06); border: 1px solid rgba(120,80,255,.12);
  margin-bottom: 8px;
}
.snc-asp-pair { font-size: 11px; font-weight: 700; color: rgba(167,139,250,.7); letter-spacing: .04em; text-transform: uppercase; display: block; margin-bottom: 5px; }
.snc-asp-interp-text { font-size: 13.5px; color: rgba(220,210,255,.88); line-height: 1.65; margin: 0; }

/* Raw aspect rows */
.snc-aspect-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(120,80,255,.05); border: 1px solid rgba(120,80,255,.1);
  font-size: 12.5px;
}
.snc-asp-gift    .snc-aspect-row, .snc-aspect-row.snc-asp-gift    { border-color: rgba(80,200,120,.15); }
.snc-aspect-row.snc-asp-tension { border-color: rgba(240,140,60,.15); background: rgba(240,140,60,.05); }
.snc-asp-planet { font-weight: 700; color: #dcd0ff; font-size: 13px; }
.snc-asp-sym    { font-size: 15px; color: rgba(180,160,255,.8); flex-shrink: 0; }
.snc-asp-label  { font-size: 10.5px; color: rgba(180,165,255,.65); text-transform: uppercase; letter-spacing: .06em; margin-left: auto; }
.snc-asp-orb    { font-size: 10px; color: rgba(160,145,255,.45); }

/* ── LIFE PATH ── */
.snc-path-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.snc-path-card {
  background: rgba(120,80,255,.08); border: 1px solid rgba(120,80,255,.16);
  border-radius: 18px; padding: 20px; text-align: center;
  transition: transform .18s ease;
}
.snc-path-card:hover { transform: translateY(-2px); }
.snc-path-icon   { font-size: 24px; color: rgba(180,155,255,.7); margin-bottom: 8px; }
.snc-path-label  { font-size: 11px; font-weight: 800; color: rgba(200,185,255,.7); letter-spacing: .04em; margin-bottom: 8px; }
.snc-path-reading{ font-size: 13px; color: rgba(210,200,255,.85); line-height: 1.55; margin: 0; }

/* ── HOUSES ── */
/* ══ Houses: clean 3-column grid, accordion expand ════════════════════ */
.snc-houses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media(max-width:980px){ .snc-houses-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:480px){ .snc-houses-grid { grid-template-columns: 1fr; } }

.snc-house-card {
  background: var(--hc-bg, rgba(30,15,70,.5));
  border: 1px solid var(--hc-border, rgba(120,80,255,.12));
  border-left: 3px solid var(--hc-text, rgba(124,58,237,.4));
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background .18s, border-color .18s, box-shadow .15s;
  position: relative;
  overflow: hidden;
}
.snc-house-card:hover {
  background: var(--hc-bg, rgba(40,20,90,.6));
  border-color: var(--hc-text, rgba(124,58,237,.5));
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.snc-house-active {
  border-left-width: 3px;
  border-left-color: var(--hc-text, rgba(124,58,237,.7)) !important;
}
.snc-h-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.snc-h-num-wrap { display: flex; align-items: center; gap: 7px; }
.snc-h-num {
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  color: var(--hc-text, rgba(160,140,255,.6));
  background: var(--hc-bg, rgba(120,80,255,.1));
  border-radius: 6px; padding: 2px 7px;
}
.snc-h-planets {
  display: flex; gap: 4px; align-items: center;
}
.snc-h-planet {
  font-size: 12px; background: rgba(120,80,255,.18);
  border-radius: 4px; padding: 1px 5px;
}
.snc-h-sign {
  font-size: 12px; font-weight: 700;
  color: var(--hc-text, #d4c8ff); opacity: .85;
  white-space: nowrap;
}
.snc-h-theme {
  font-size: 13px; font-weight: 700;
  color: #e4dcff; line-height: 1.3;
  margin-bottom: 6px;
}
.snc-house-active .snc-h-theme { color: #fff; }
.snc-h-desc {
  font-size: 12.5px; line-height: 1.65;
  color: rgba(210,198,255,.72);
  margin-top: 0;
}
.snc-h-tap-hint { display: none; }
.snc-h-planets { display: flex; gap: 4px; justify-content: flex-start; margin-top: 0; }

/* ── CTA ── */
.snc-cta {
  text-align: center; padding: 32px 24px 40px;
  border-top: 1px solid rgba(120,80,255,.08);
}
.snc-cta-text { font-size: 15px; color: rgba(200,185,255,.7); margin: 0 0 14px; }
.snc-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #5c28ee, #9040f0);
  border: none; border-radius: 14px; color: #fff;
  font-size: 14px; font-weight: 700; padding: 13px 26px;
  cursor: pointer; transition: all .18s ease;
  box-shadow: 0 6px 22px rgba(92,40,238,.4);
}
.snc-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(92,40,238,.55); }

/* ── MOBILE ── */
@media (max-width: 980px) {
  .snc-hero { min-height: 320px; padding: 28px 16px 24px; }
  .snc-ring-svg { width: 260px; height: 260px; }
  .snc-big3 { grid-template-columns: repeat(3,1fr); gap: 7px; }
  .snc-b3-card { padding: 12px 8px; }
  .snc-b3-glyph { font-size: 18px; }
  .snc-b3-sign  { font-size: 12px; }
  .snc-section  { padding: 22px 14px; }
  .snc-section-title { font-size: 18px; }
  .snc-planets-grid  { grid-template-columns: 1fr; }
  .snc-houses-grid   { grid-template-columns: repeat(3,1fr); }
  .snc-path-grid     { grid-template-columns: 1fr; }
  .snc-hero-headline { font-size: 20px; }
  .snc-identity-para { font-size: 14px; }
  .snc-b3-center { transform: scale(1.02); }
}
@media (max-width: 480px) {
  .snc-big3      { grid-template-columns: 1fr; max-width: 260px; }
  .snc-houses-grid { grid-template-columns: repeat(2,1fr); }
}



/* ═══════════════════════════════════════════════════════════════════════════
   VIEW SWITCHING — natal chart mode
   ═══════════════════════════════════════════════════════════════════════════ */

/* When natal chart is active, hide chat elements */
.staris-main--natal [data-staris-chat-thread],
.staris-main--natal [data-staris-chat-form],
.staris-main--natal [data-staris-chip-row],
.staris-main--natal .staris-main-topbar {
  display: none !important;
}

/* Natal view fills all space */
.staris-main--natal #snc-view {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(100,80,200,.2) transparent !important;
  padding: 0 !important;
}
.staris-main--natal #snc-view::-webkit-scrollbar { width: 3px; }
.staris-main--natal #snc-view::-webkit-scrollbar-thumb { background: rgba(100,80,200,.25); border-radius: 99px; }

/* ── SIDEBAR: always scrollable so widgets are reachable ── */
.staris-sidebar {
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(100,80,200,.15) transparent !important;
}
.staris-sidebar::-webkit-scrollbar { width: 3px; }
.staris-sidebar::-webkit-scrollbar-thumb { background: rgba(100,80,200,.2); border-radius: 99px; }

/* Keep sidebar user card and nav always visible at top */
.staris-sidebar-user,
.staris-sidebar-nav { flex-shrink: 0 !important; }

/* Ensure sw-card widgets in sidebar have bottom margin so last one isn't cut */
.staris-sidebar .sw-card:last-child { margin-bottom: 8px; }
.staris-sidebar .staris-sidebar-footer { margin-top: auto; flex-shrink: 0; padding-top: 10px; }



/* ═══════════════════════════════════════════════════════════════════════════
   NATAL CHART FIXES v2 — Big3, Houses, Ring
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── BIG 3: sign name is the hero text ── */
.snc-b3-sign {
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  color: var(--b3-text, #e8e0ff) !important;
  margin-bottom: 4px !important;
  line-height: 1.1 !important;
}
.snc-b3-glyph {
  font-size: 28px !important;
  margin-bottom: 6px !important;
  display: block !important;
  color: var(--b3-text, #c4b8ff) !important;
  text-shadow: 0 0 16px var(--b3-glow, rgba(120,80,255,.5)) !important;
}
.snc-b3-label {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  color: rgba(180,160,255,.45) !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}
.snc-b3-detail {
  font-size: 10.5px !important;
  color: rgba(180,165,255,.6) !important;
}
/* Center card slightly larger */
.snc-b3-center .snc-b3-sign { font-size: 20px !important; }
.snc-b3-center .snc-b3-glyph { font-size: 32px !important; }

/* ── COSMIC RING: ensure visibility ── */
.snc-ring-wrap {
  opacity: 1 !important;
  z-index: 1 !important;
}
.snc-ring-svg {
  width: 380px !important;
  height: 380px !important;
  overflow: visible !important;
}
/* The ring path segments need visibility override */
#snc-ring-segments path { opacity: 1 !important; }
#snc-ring-segments text { opacity: 1 !important; }

/* ── HOUSES: active houses highlighted ── */
.snc-house-active {
  background: var(--hc-bg, rgba(120,80,255,.1)) !important;
  border-color: var(--hc-border, rgba(120,80,255,.25)) !important;
  box-shadow: 0 2px 12px var(--hc-bg, rgba(120,80,255,.15)) !important;
}
.snc-house-active .snc-h-num {
  color: rgba(180,160,255,.65) !important;
  font-weight: 900 !important;
}
.snc-house-active .snc-h-sign {
  color: var(--hc-text, #d8ccff) !important;
}
.snc-h-sign strong {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--hc-text, #d4c8ff) !important;
}
.snc-h-sign {
  font-size: 11px !important;
  margin-bottom: 3px !important;
  color: rgba(180,165,255,.7) !important;
}
/* Houses grid — 4 columns desktop, 3 tablet, 2 mobile */
.snc-houses-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}
@media(max-width:960px) { .snc-houses-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media(max-width:600px) { .snc-houses-grid { grid-template-columns: repeat(2, 1fr) !important; } }
.snc-house-card {
  min-height: auto !important;
  justify-content: flex-start !important;
}



/* ═══════════════════════════════════════════════════════════════════════════
   DREAM ANALYZER — full premium design
   ═══════════════════════════════════════════════════════════════════════════ */

/* View switch */
.staris-main--dream [data-staris-chat-thread],
.staris-main--dream [data-staris-chat-form],
.staris-main--dream [data-staris-chip-row],
.staris-main--dream .staris-main-topbar { display: none !important; }
.staris-main--dream #sda-view {
  display: flex !important; flex-direction: column !important;
  flex: 1 1 0 !important; min-height: 0 !important;
  overflow-y: auto !important; overflow-x: hidden !important;
}

/* Root */
.sda-root {
  position: relative; min-height: 100%; width: 100%;
  display: flex; flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: #e0d8ff;
  overflow: hidden;
}

/* Ambient background */
.sda-ambient { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.sda-nebula {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .12;
}
.sda-neb-1 {
  width: 600px; height: 600px; top: -100px; left: -150px;
  background: radial-gradient(circle, #6030d0, transparent 70%);
  animation: sdaNebDrift 18s ease-in-out infinite alternate;
}
.sda-neb-2 {
  width: 500px; height: 500px; bottom: -80px; right: -100px;
  background: radial-gradient(circle, #3040c0, transparent 70%);
  animation: sdaNebDrift 22s ease-in-out infinite alternate-reverse;
}
@keyframes sdaNebDrift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(30px,20px) scale(1.06); }
}

/* ── HISTORY BUTTON ── */
.sda-history-btn {
  position: absolute; top: 16px; right: 16px; z-index: 10;
  display: flex; align-items: center; gap: 6px;
  background: rgba(120,80,255,.12); border: 1px solid rgba(120,80,255,.22);
  border-radius: 10px; color: rgba(200,185,255,.75);
  font-size: 11.5px; font-weight: 700; padding: 7px 12px;
  cursor: pointer; transition: all .18s;
}
.sda-history-btn:hover { background: rgba(120,80,255,.22); color: #d8ccff; }
.sda-history-count {
  background: #7040ee; color: #fff; border-radius: 99px;
  font-size: 9px; padding: 1px 6px; font-weight: 800;
}

/* ── INPUT VIEW ── */
.sda-input-view {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 24px 32px;
  flex: 1;
}

/* Moon decoration */
.sda-moon-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; margin-bottom: 28px;
}
.sda-moon-svg { width: 100px; height: 100px; display: block; }
.sda-moon-pulse { animation: sdaMoonGlow 3.5s ease-in-out infinite; }
@keyframes sdaMoonGlow {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%       { opacity: 1;  transform: scale(1.08); }
}
.sda-moon-label {
  font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(180,160,255,.45);
}
.sda-moon-detail { font-size: 12px; color: rgba(200,185,255,.7); font-weight: 600; }

/* Input center */
.sda-input-center { width: 100%; max-width: 620px; text-align: center; }
.sda-input-title {
  font-size: clamp(22px, 3.5vw, 30px); font-weight: 900;
  letter-spacing: -.03em; color: #eef2ff; margin: 0 0 10px;
  background: linear-gradient(135deg, #eef2ff 0%, #c4b0ff 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sda-input-hint {
  font-size: 13.5px; color: rgba(190,175,255,.6); line-height: 1.6;
  margin: 0 0 24px; max-width: 480px; margin-left: auto; margin-right: auto;
}

/* Textarea */
.sda-textarea-wrap {
  position: relative; margin-bottom: 12px;
  border-radius: 18px;
  background: rgba(10,8,30,.6);
  border: 1px solid rgba(120,80,255,.2);
  transition: border-color .25s, box-shadow .25s;
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.sda-textarea-wrap:focus-within {
  border-color: rgba(140,90,255,.45);
  box-shadow: 0 0 0 3px rgba(120,70,255,.1), 0 8px 32px rgba(0,0,0,.4);
}
.sda-dream-input {
  width: 100%; min-height: 160px; padding: 18px 20px 36px;
  background: transparent; border: none; outline: none; resize: none;
  color: #eef2ff; font-size: 15px; line-height: 1.7;
  font-family: inherit; border-radius: 18px;
}
.sda-dream-input::placeholder { color: rgba(180,165,255,.35); }
.sda-char-count {
  position: absolute; bottom: 10px; right: 14px;
  font-size: 10px; color: rgba(160,145,220,.4);
}

/* Date row */
.sda-date-row {
  font-size: 12px; color: rgba(170,155,220,.5);
  margin-bottom: 24px; text-align: center;
}

/* Analyze button */
.sda-analyze-btn {
  position: relative; display: inline-flex; align-items: center;
  background: none; border: none; cursor: pointer; padding: 0;
}
.sda-btn-ring {
  position: absolute; inset: -8px; border-radius: 50px;
  border: 1px solid rgba(140,90,255,.3);
  animation: sdaBtnRingPulse 2.5s ease-in-out infinite;
}
@keyframes sdaBtnRingPulse {
  0%, 100% { transform: scale(1);   opacity: .5; }
  50%       { transform: scale(1.04); opacity: 1;  }
}
.sda-btn-inner {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #5020d0, #8840f0);
  border-radius: 16px; padding: 14px 30px;
  color: #fff; font-size: 14px; font-weight: 800;
  box-shadow: 0 6px 26px rgba(80,32,208,.45);
  transition: transform .15s, box-shadow .15s;
  letter-spacing: .01em;
}
.sda-analyze-btn:hover .sda-btn-inner {
  transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(80,32,208,.6);
}
.sda-analyze-btn:active .sda-btn-inner { transform: translateY(0); }
.sda-analyze-btn:disabled .sda-btn-inner { opacity: .5; cursor: not-allowed; }
.sda-analyze-btn:disabled .sda-btn-ring { display: none; }

/* ── LOADING VIEW ── */
.sda-loading-view {
  position: relative; z-index: 2;
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 28px;
  padding: 40px 24px;
}
.sda-loading-orb {
  position: relative; width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center;
}
.sda-orb-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(140,80,255,.3);
  animation: sdaOrbPulse 2s ease-in-out infinite;
}
.sda-orb-ring-1 { width: 120px; height: 120px; animation-delay: 0s; }
.sda-orb-ring-2 { width: 88px;  height: 88px;  animation-delay: .35s; border-color: rgba(120,60,220,.35); }
.sda-orb-ring-3 { width: 60px;  height: 60px;  animation-delay: .7s;  border-color: rgba(100,40,190,.4); }
@keyframes sdaOrbPulse {
  0%, 100% { opacity: .25; transform: scale(.95); }
  50%       { opacity: 1;   transform: scale(1.05); }
}
.sda-orb-core {
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle, rgba(120,60,255,.6), rgba(60,20,180,.3));
  display: flex; align-items: center; justify-content: center;
  animation: sdaOrbRotate 8s linear infinite;
}
@keyframes sdaOrbRotate { to { filter: hue-rotate(40deg); } }
.sda-loading-msg {
  font-size: 15px; color: rgba(200,185,255,.7); font-style: italic;
  animation: sdaMsgFade 2s ease-in-out infinite;
}
@keyframes sdaMsgFade { 0%,100%{opacity:.4} 50%{opacity:1} }

/* ── RESULT VIEW ── */
.sda-result-view {
  position: relative; z-index: 2;
  padding: 32px 24px 40px;
  max-width: 800px; width: 100%; margin: 0 auto;
}

/* Header */
.sda-result-header { text-align: center; margin-bottom: 24px; }
.sda-result-meta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 11px; color: rgba(180,165,255,.5); margin-bottom: 10px;
}
.sda-result-meta span::before { content: '· '; }
.sda-result-meta span:first-child::before { content: ''; }
.sda-result-title {
  font-size: clamp(20px, 3vw, 28px); font-weight: 900;
  color: #eef2ff; letter-spacing: -.03em; margin: 0 0 12px;
  line-height: 1.2;
  background: linear-gradient(135deg, #f0e8ff 0%, #b898ff 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sda-tone-badge {
  display: inline-block; padding: 5px 16px; border-radius: 99px;
  background: rgba(120,80,255,.15); border: 1px solid rgba(120,80,255,.25);
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(200,185,255,.8);
}

/* Dream preview */
.sda-dream-preview {
  background: rgba(255,255,255,.025); border: 1px solid rgba(120,80,255,.1);
  border-radius: 14px; padding: 14px 18px; margin-bottom: 22px;
}
.sda-dream-quote {
  font-size: 13px; color: rgba(190,178,255,.65); line-height: 1.6;
  margin: 0; font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Sections */
.sda-sections { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.sda-section {
  display: flex; gap: 16px; align-items: flex-start;
  background: rgba(15,10,38,.7); border: 1px solid rgba(120,80,255,.12);
  border-radius: 18px; padding: 18px 20px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease, border-color .25s;
  box-shadow: 0 2px 16px rgba(0,0,0,.22);
}
.sda-section.sda-visible { opacity: 1; transform: translateY(0); }
.sda-section:hover { border-color: rgba(140,90,255,.24); }
.sda-section-signal {
  background: linear-gradient(135deg, rgba(80,40,200,.15), rgba(40,20,100,.12));
  border-color: rgba(120,80,255,.22);
}
.sda-sec-icon {
  font-size: 18px; color: rgba(180,155,255,.6); flex-shrink: 0;
  width: 28px; text-align: center; padding-top: 2px;
}
.sda-section-signal .sda-sec-icon { color: rgba(200,175,255,.8); font-size: 20px; }
.sda-sec-body { flex: 1; min-width: 0; }
.sda-sec-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(160,140,255,.5); margin-bottom: 7px;
}
.sda-sec-text { font-size: 14px; color: rgba(218,210,255,.9); line-height: 1.68; margin: 0; }
.sda-section-signal .sda-sec-text { font-size: 14.5px; font-weight: 600; color: #e8e0ff; }

/* Actions */
.sda-result-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.sda-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 20px; border-radius: 12px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all .18s ease;
}
.sda-action-new {
  background: rgba(120,80,255,.1); border: 1px solid rgba(120,80,255,.2);
  color: rgba(200,185,255,.8);
}
.sda-action-new:hover { background: rgba(120,80,255,.2); color: #e0d4ff; }
.sda-action-chat {
  background: linear-gradient(135deg, #5020d0, #8840f0);
  border: none; color: #fff;
  box-shadow: 0 4px 16px rgba(80,32,208,.35);
}
.sda-action-chat:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(80,32,208,.5); }

/* ── DREAMBOOK PANEL ── */
.sda-dreambook {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(340px, 90vw);
  background: linear-gradient(160deg, #0c0920, #060614);
  border-left: 1px solid rgba(120,80,255,.15);
  box-shadow: -16px 0 48px rgba(0,0,0,.5);
  z-index: 300; display: flex; flex-direction: column;
  transform: translateX(110%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.sda-dreambook.is-open { transform: translateX(0); }
.sda-dreambook-overlay {
  position: fixed; inset: 0; background: rgba(1,2,12,.55);
  backdrop-filter: blur(3px); z-index: 299;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.sda-dreambook-overlay.is-visible { opacity: 1; pointer-events: auto; }
.sda-dreambook-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid rgba(120,80,255,.1);
  flex-shrink: 0;
}
.sda-dreambook-header h3 { font-size: 15px; font-weight: 800; color: #eef2ff; margin: 0; }
.sda-dreambook-close {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(120,80,255,.12); border: 1px solid rgba(120,80,255,.2);
  color: #c4b8ff; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sda-dreambook-list {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.sda-dreambook-empty { font-size: 13px; color: rgba(180,165,255,.5); text-align: center; padding: 20px; }
.sda-dream-entry {
  background: rgba(255,255,255,.03); border: 1px solid rgba(120,80,255,.1);
  border-radius: 14px; padding: 12px 14px; cursor: pointer;
  transition: all .18s;
}
.sda-dream-entry:hover { border-color: rgba(140,90,255,.25); background: rgba(120,80,255,.07); }
.sda-dream-entry-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 5px;
}
.sda-entry-title { font-size: 12.5px; font-weight: 700; color: #d8ccff; }
.sda-entry-date  { font-size: 10px; color: rgba(160,145,220,.5); }
.sda-entry-preview { font-size: 11.5px; color: rgba(180,168,255,.6); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sda-entry-tone {
  display: inline-block; margin-top: 6px;
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(160,140,255,.6); background: rgba(120,80,255,.1);
  border-radius: 5px; padding: 2px 7px;
}

/* ── MOBILE ── */
@media (max-width: 980px) {
  .sda-input-view { padding: 28px 16px 24px; }
  .sda-result-view { padding: 22px 16px 32px; }
  .sda-moon-svg { width: 80px; height: 80px; }
  .sda-input-title { font-size: 22px; }
  .sda-result-actions { flex-direction: column; }
  .sda-action-btn { justify-content: center; }
  .sda-history-btn { top: 10px; right: 10px; }
}



/* ═══════════════════════════════════════════════════════════════════════════
   DREAM TEXTAREA FIX — override browser default white background
   ═══════════════════════════════════════════════════════════════════════════ */
.sda-dream-input,
.sda-dream-input:focus,
.sda-dream-input:active,
.sda-dream-input:hover {
  background-color: transparent !important;
  background: transparent !important;
  color: #eef2ff !important;
  -webkit-text-fill-color: #eef2ff !important;
  /* Override any WordPress or theme textarea styles */
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}
/* Also ensure the wrap's dark background shows */
.sda-textarea-wrap {
  background: rgba(10,8,30,.65) !important;
  backdrop-filter: blur(8px) !important;
}
.sda-textarea-wrap:focus-within {
  background: rgba(12,8,35,.75) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   DREAM ANALYZER FIXES v2
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fix button hover square — remove browser focus outline completely */
.sda-analyze-btn,
.sda-analyze-btn:focus,
.sda-analyze-btn:focus-visible,
.sda-analyze-btn:active {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
/* Ensure the ring stays rounded on all states */
.sda-btn-ring {
  border-radius: 50px !important;
  outline: none !important;
  pointer-events: none !important;
}
/* The inner pill is the only thing that changes on hover */
.sda-analyze-btn:focus .sda-btn-inner,
.sda-analyze-btn:focus-visible .sda-btn-inner {
  box-shadow: 0 0 0 3px rgba(120,80,255,.25) !important;
}

/* Error message */
.sda-error-msg {
  background: rgba(220,60,60,.12);
  border: 1px solid rgba(220,60,60,.28);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 13px;
  color: #f8a8a8;
  text-align: center;
  margin-bottom: 14px;
  max-width: 480px;
  width: 100%;
}



/* ═══════════════════════════════════════════════════════════════════════════
   DREAM CENTERING + SIDEBAR COMPACT FIX
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CENTER dream content in the right panel ── */
.sda-root {
  align-items: center !important;  /* centers all flex-column children horizontally */
}
.sda-result-view {
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.sda-input-view {
  align-self: stretch !important;  /* input view stays full-width (centers internally) */
  align-items: center !important;
}
.sda-loading-view {
  align-self: center !important;
  width: 100% !important;
}
/* Ambient nebula should still fill the full container */
.sda-ambient {
  align-self: stretch !important;
  position: absolute !important;
}

/* ── SIDEBAR: compact nav buttons so widgets stay visible ── */
.staris-sidebar-nav button {
  padding: 9px 12px !important;   /* was 12px top/bottom — saves ~6px per button */
  font-size: 12.5px !important;
  border-radius: 11px !important;
  gap: 8px !important;
}
.staris-sidebar-nav {
  gap: 4px !important;
  margin-bottom: 4px !important;
}

/* ── SIDEBAR: always scrollable, never clips widgets ── */
.staris-sidebar {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Smooth scroll on iOS */
  -webkit-overflow-scrolling: touch !important;
}

/* ── SIDEBAR USER CARD: tighter ── */
.staris-sidebar-user {
  padding: 14px 14px 10px !important;
  flex-shrink: 0 !important;
}
.staris-sidebar-user img,
.staris-sidebar-user .staris-avatar {
  width: 36px !important;
  height: 36px !important;
}

/* ── SIDEBAR WIDGETS: slightly tighter internal padding ── */
.sw-card {
  padding: 11px 12px 10px !important;
  margin-bottom: 6px !important;
}
/* Signal score ring slightly smaller */
.sw-score-wrap {
  width: 96px !important;
  height: 96px !important;
  margin-bottom: 6px !important;
}
.sw-score-svg {
  width: 96px !important;
  height: 96px !important;
}
.sw-score-num  { font-size: 26px !important; }

/* Moon widget slightly tighter */
.sw-moon-orb-wrap {
  width: 50px !important;
  height: 50px !important;
}
.sw-moon-svg {
  width: 50px !important;
  height: 50px !important;
}

/* Log out always visible at bottom */
.staris-sidebar-footer {
  margin-top: auto !important;
  flex-shrink: 0 !important;
  padding-top: 8px !important;
}



/* ═══════════════════════════════════════════════════════════════════════════
   CENTERING + SIDEBAR DEFINITIVE FIX
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dream view: center content with proper scroll */
.staris-main--dream #sda-view,
.staris-main--tarot  #stc-view {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.sda-root, .stc-root {
  width: 100% !important;
  max-width: 900px !important;
  overflow: visible !important;   /* was hidden — was clipping the action buttons */
}
.sda-result-view   { width: 100% !important; max-width: 780px !important; margin: 0 auto !important; }
.sda-input-view    { width: 100% !important; max-width: 780px !important; margin: 0 auto !important; align-items: center !important; }
.sda-loading-view  { width: 100% !important; }

/* Sidebar: DEFINITIVE compact fix with inline !important */
.staris-sidebar-nav button {
  padding: 8px 11px !important;
  font-size: 12px !important;
  gap: 7px !important;
  border-radius: 10px !important;
  line-height: 1.2 !important;
}
.staris-sidebar-nav { gap: 3px !important; margin-bottom: 6px !important; }

/* Sidebar user card: compact */
.staris-sidebar-user { padding: 12px 12px 8px !important; }
.staris-sidebar-user .staris-user-name { font-size: 13px !important; font-weight: 800 !important; }
.staris-sidebar-user .staris-user-sub  { font-size: 10.5px !important; }

/* Sidebar widgets: tighter but still readable */
.sw-card { padding: 10px 12px 9px !important; margin-bottom: 7px !important; }
.sw-score-wrap { width: 90px !important; height: 90px !important; }
.sw-score-svg  { width: 90px !important; height: 90px !important; }
.sw-score-num  { font-size: 24px !important; }
.sw-moon-orb-wrap { width: 46px !important; height: 46px !important; }
.sw-moon-svg   { width: 46px !important; height: 46px !important; }

/* Sidebar: always scroll */
.staris-sidebar {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
}
.staris-sidebar::-webkit-scrollbar { display: none !important; }



/* ═══════════════════════════════════════════════════════════════════════════
   TAROT CARDS — full premium design
   ═══════════════════════════════════════════════════════════════════════════ */

.staris-main--tarot [data-staris-chat-thread],
.staris-main--tarot [data-staris-chat-form],
.staris-main--tarot [data-staris-chip-row],
.staris-main--tarot .staris-main-topbar { display: none !important; }
.staris-main--tarot #stc-view {
  display: flex !important; flex-direction: column !important; align-items: center !important;
  flex: 1 1 0 !important; min-height: 0 !important;
  overflow-y: auto !important; overflow-x: hidden !important;
}

.stc-root {
  width: 100%; max-width: 960px; padding: 0 0 60px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: #e0d8ff; position: relative;
}

/* Ambient */
.stc-ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.stc-neb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .1; }
.stc-neb-1 { width:500px;height:500px; top:-100px;left:-100px; background:radial-gradient(circle,#8040ff,transparent 70%); animation:stcNeb 20s ease-in-out infinite alternate; }
.stc-neb-2 { width:400px;height:400px; bottom:-80px;right:-80px; background:radial-gradient(circle,#4060d0,transparent 70%); animation:stcNeb 25s ease-in-out infinite alternate-reverse; }
@keyframes stcNeb { from{transform:translate(0,0)} to{transform:translate(30px,20px) scale(1.05)} }

.stc-phase { position:relative; z-index:2; width:100%; }

/* ── INTRO PHASE ── */
.stc-intro-top { text-align:center; padding:36px 24px 28px; }
.stc-eyebrow { font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(180,155,255,.5);margin:0 0 10px; }
.stc-intro-title { font-size:clamp(22px,3.5vw,32px);font-weight:900;letter-spacing:-.03em;color:#eef2ff;margin:0 0 10px;
  background:linear-gradient(135deg,#f0e8ff 0%,#b898ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.stc-intro-sub { font-size:14px;color:rgba(190,175,255,.65);line-height:1.6;max-width:500px;margin:0 auto; }

/* Deck animation */
.stc-deck-wrap { display:flex;flex-direction:column;align-items:center;gap:18px;padding:20px 0 28px; }
.stc-deck { position:relative;width:90px;height:140px; }
.stc-deck-card {
  position:absolute; width:90px;height:140px; border-radius:10px;
  background-image:url('https://staris.app/wp-content/uploads/2026/05/Back-Card-Design.png');
  background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#0b0420;
  box-shadow:0 4px 20px rgba(0,0,0,.5),0 0 0 1px rgba(180,150,255,.15);
  transform-origin:bottom center;
}
.stc-dc-1 { transform:translateY(0) rotate(-6deg); animation:stcDeck1 4s ease-in-out infinite; }
.stc-dc-2 { transform:translateY(-2px) rotate(-3deg); animation:stcDeck2 4s ease-in-out infinite; }
.stc-dc-3 { transform:translateY(-4px) rotate(0deg); animation:stcDeck3 4s ease-in-out infinite; }
.stc-dc-4 { transform:translateY(-6px) rotate(2deg); animation:stcDeck4 4s ease-in-out infinite; }
.stc-dc-5 { transform:translateY(-8px) rotate(4deg); animation:stcDeck5 4s ease-in-out infinite; }
.stc-dc-6 { transform:translateY(-10px) rotate(6deg); animation:stcDeck6 4s ease-in-out infinite; }
.stc-dc-7 { transform:translateY(-12px) rotate(-1deg); animation:stcDeck7 4s ease-in-out infinite; z-index:7; }
@keyframes stcDeck1 { 0%,100%{transform:translateY(0)   rotate(-6deg)} 50%{transform:translateY(-4px)  rotate(-8deg)} }
@keyframes stcDeck2 { 0%,100%{transform:translateY(-2px) rotate(-3deg)} 50%{transform:translateY(-6px)  rotate(-5deg)} }
@keyframes stcDeck3 { 0%,100%{transform:translateY(-4px) rotate(0deg)}  50%{transform:translateY(-8px)  rotate(1deg)} }
@keyframes stcDeck4 { 0%,100%{transform:translateY(-6px) rotate(2deg)}  50%{transform:translateY(-10px) rotate(3deg)} }
@keyframes stcDeck5 { 0%,100%{transform:translateY(-8px) rotate(4deg)}  50%{transform:translateY(-2px)  rotate(2deg)} }
@keyframes stcDeck6 { 0%,100%{transform:translateY(-10px)rotate(6deg)}  50%{transform:translateY(-4px)  rotate(4deg)} }
@keyframes stcDeck7 { 0%,100%{transform:translateY(-12px)rotate(-1deg)} 50%{transform:translateY(-16px) rotate(1deg)} }

/* Shuffle animation on click */
.stc-deck.is-shuffling .stc-deck-card { animation:stcShuffle .5s ease-in-out forwards; }
@keyframes stcShuffle {
  0%   { transform:translateX(0)   translateY(0)   rotate(0deg); }
  25%  { transform:translateX(60px) translateY(-20px) rotate(15deg); }
  50%  { transform:translateX(-40px) translateY(-10px) rotate(-10deg); }
  75%  { transform:translateX(20px) translateY(-30px) rotate(8deg); }
  100% { transform:translateX(0)   translateY(0)   rotate(0deg); }
}

/* Shuffle btn */
.stc-shuffle-btn {
  display:flex;align-items:center;gap:6px;
  background:rgba(120,80,255,.1);border:1px solid rgba(120,80,255,.2);
  border-radius:10px;color:rgba(200,185,255,.75);
  font-size:12px;font-weight:700;padding:8px 16px;cursor:pointer;
  transition:all .18s;
}
.stc-shuffle-btn:hover { background:rgba(120,80,255,.2);color:#e0d4ff; }

/* Spread picker */
.stc-spread-pick { padding:0 24px 28px; }
.stc-spread-label { font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(160,140,255,.5);text-align:center;margin:0 0 14px; }
.stc-spread-options { display:flex;flex-direction:column;gap:8px;max-width:540px;margin:0 auto; }
.stc-spread-opt {
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(120,80,255,.12);
  border-radius:14px;padding:12px 16px;cursor:pointer;text-align:left;
  transition:all .2s;
}
.stc-spread-opt:hover { background:rgba(120,80,255,.1);border-color:rgba(140,90,255,.28); }
.stc-spread-opt.is-active { background:rgba(80,40,200,.2);border-color:rgba(130,80,255,.4);box-shadow:0 2px 14px rgba(80,40,200,.2); }
.stc-spread-icon { font-size:18px;color:rgba(180,155,255,.7);flex-shrink:0;width:24px;text-align:center; }
.stc-spread-opt strong { display:block;font-size:13px;font-weight:800;color:#ddd4ff;margin-bottom:2px; }
.stc-spread-opt small  { font-size:11px;color:rgba(170,155,255,.6); }

/* Draw button */
.stc-draw-btn {
  display:flex;align-items:center;gap:8px;margin:0 auto;
  background:linear-gradient(135deg,#5020d0,#8840f0);
  border:none;border-radius:16px;color:#fff;
  font-size:15px;font-weight:800;padding:14px 32px;
  cursor:pointer;box-shadow:0 6px 26px rgba(80,32,208,.45);
  transition:transform .15s,box-shadow .15s;
}
.stc-draw-btn:hover { transform:translateY(-2px);box-shadow:0 10px 34px rgba(80,32,208,.6); }

/* ── SELECT PHASE ── */
.stc-select-header { text-align:center;padding:28px 20px 16px; }
.stc-select-instruction { font-size:15px;font-weight:700;color:rgba(200,185,255,.85);margin:0 0 16px; }
.stc-slots { display:flex;gap:14px;justify-content:center;flex-wrap:wrap; }
.stc-slot {
  width:70px;height:110px;border-radius:9px;
  border:2px dashed rgba(120,80,255,.3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;transition:all .25s;
}
.stc-slot.is-filled { border-style:solid;border-color:rgba(140,90,255,.5);background:rgba(80,40,180,.15);box-shadow:0 0 16px rgba(100,50,220,.2); }
.stc-slot-num  { font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:rgba(160,140,255,.5); }
.stc-slot-pos  { font-size:9.5px;color:rgba(180,165,255,.6);text-align:center;line-height:1.3; }
.stc-slot-card { font-size:8px;color:rgba(200,185,255,.8);font-weight:700;text-align:center;padding:0 4px; }

/* Fan */
.stc-fan-wrap { padding:20px 0 30px;overflow:visible; }
.stc-fan {
  display:flex;justify-content:center;align-items:flex-end;
  height:180px;position:relative;overflow:visible;
}
/* Individual fan cards — positioned by JS */
.stc-fan-card {
  position:absolute;
  width:72px;height:116px;border-radius:8px;
  background-image:url('https://staris.app/wp-content/uploads/2026/05/Back-Card-Design.png');
  background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#0b0420;
  box-shadow:0 4px 16px rgba(0,0,0,.45),0 0 0 1px rgba(160,130,255,.12);
  cursor:pointer;
  transform-origin:bottom center;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, filter .22s ease;
  will-change:transform;
}
.stc-fan-card:hover {
  transform:translateY(-22px) scale(1.06) !important;
  box-shadow:0 12px 32px rgba(100,50,220,.5),0 0 0 2px rgba(180,140,255,.35) !important;
  filter:brightness(1.12) !important;
  z-index:50 !important;
}
.stc-fan-card.is-selected {
  box-shadow:0 0 0 3px rgba(180,140,255,.7),0 8px 28px rgba(100,50,220,.6) !important;
  filter:brightness(1.15) !important;
  opacity:.5 !important;
  pointer-events:none !important;
  transform:translateY(-8px) scale(.95) !important;
}

/* Read button */
.stc-read-btn {
  display:flex;align-items:center;gap:8px;margin:16px auto 0;
  background:linear-gradient(135deg,#5020d0,#8840f0);
  border:none;border-radius:14px;color:#fff;
  font-size:14px;font-weight:800;padding:13px 28px;
  cursor:pointer;box-shadow:0 6px 22px rgba(80,32,208,.42);
  transition:transform .15s,box-shadow .15s;
  animation:stcBtnPop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes stcBtnPop { from{opacity:0;transform:scale(.8)} to{opacity:1;transform:scale(1)} }
.stc-read-btn:hover { transform:translateY(-2px);box-shadow:0 10px 30px rgba(80,32,208,.58); }

/* ── LOADING PHASE ── */
#stc-loading {
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:28px;
  min-height:100%;
  flex:1;
  padding:40px 20px;
}
.stc-loading-cards { display:flex;gap:20px;justify-content:center; }
.stc-loading-card {
  width:80px;height:126px;border-radius:10px;
  background-image:url('https://staris.app/wp-content/uploads/2026/05/Back-Card-Design.png');
  background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#0b0420;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
  animation:stcLoadFloat 2s ease-in-out infinite;
}
.stc-loading-card:nth-child(2) { animation-delay:.3s; }
.stc-loading-card:nth-child(3) { animation-delay:.6s; }
@keyframes stcLoadFloat {
  0%,100% { transform:translateY(0); box-shadow:0 4px 20px rgba(0,0,0,.4); }
  50%      { transform:translateY(-10px); box-shadow:0 14px 30px rgba(80,40,200,.35); }
}
.stc-loading-text { font-size:15px;color:rgba(200,185,255,.7);font-style:italic;animation:stcFade 2s ease-in-out infinite; }
@keyframes stcFade { 0%,100%{opacity:.4} 50%{opacity:1} }

/* ── RESULT PHASE ── */
#stc-result { padding:28px 20px 20px; }
.stc-result-header { text-align:center;margin-bottom:24px; }
.stc-result-meta { font-size:11px;color:rgba(170,155,255,.55);margin:0 0 8px; }
.stc-result-title { font-size:clamp(18px,2.5vw,24px);font-weight:900;color:#eef2ff;margin:0;letter-spacing:-.025em; }

/* Result cards grid */
.stc-result-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px; }
@media(max-width:640px){ .stc-result-cards { grid-template-columns:1fr;gap:14px; } }
.stc-result-card {
  background:rgba(15,10,38,.75);border:1px solid rgba(120,80,255,.15);
  border-radius:18px;overflow:hidden;
  opacity:0;transform:translateY(20px);
  transition:opacity .5s ease,transform .5s ease;
}
.stc-result-card.stc-visible { opacity:1;transform:translateY(0); }
.stc-rc-top {
  padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px;
  background:linear-gradient(180deg,rgba(80,40,180,.12) 0%,transparent 100%);
  border-bottom:1px solid rgba(120,80,255,.1);
}
.stc-rc-card {
  width:80px;height:126px;border-radius:10px;
  background-image:url('https://staris.app/wp-content/uploads/2026/05/Back-Card-Design.png');
  background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#0b0420;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  transform:rotateY(0deg);transition:transform 0.8s cubic-bezier(.4,0,.2,1);
  position:relative;
  transform-style:preserve-3d;
}
.stc-rc-card.stc-flipped { transform:rotateY(180deg); }
.stc-rc-front {
  position:absolute;inset:0;border-radius:10px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform:rotateY(180deg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;padding:0;text-align:center;overflow:hidden;background:#0b0420;
}
.stc-rc-front img {
  width:100%;height:100%;object-fit:contain;display:block;border-radius:10px;
}
.stc-rc-back {
  position:absolute;inset:0;border-radius:10px;
  background-image:url('https://staris.app/wp-content/uploads/2026/05/Back-Card-Design.png');
  background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#0b0420;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.stc-rc-front-glyph { font-size:26px;line-height:1; }
.stc-rc-front-num   { font-size:8px;font-weight:800;letter-spacing:.1em;opacity:.7; }
.stc-rc-front-name  { font-size:9.5px;font-weight:800;line-height:1.2; }
.stc-rc-position { font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(160,140,255,.5); }
.stc-rc-card-name { font-size:14px;font-weight:800;color:#ddd4ff; }
.stc-rc-reading { padding:14px;font-size:13px;color:rgba(210,200,255,.88);line-height:1.65; }

/* Synthesis */
.stc-synthesis-wrap {
  background:rgba(255,255,255,.025);border:1px solid rgba(120,80,255,.14);
  border-radius:18px;padding:20px;margin-bottom:22px;text-align:center;
}
.stc-synthesis-icon { font-size:22px;color:rgba(180,155,255,.6);margin-bottom:6px; }
.stc-synthesis-label { font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(160,140,255,.5);margin-bottom:12px; }
.stc-synthesis-text { font-size:14px;color:rgba(210,200,255,.9);line-height:1.7;margin:0 0 16px; }
.stc-wisdom-wrap { border-top:1px solid rgba(120,80,255,.1);padding-top:14px;margin-top:4px; }
.stc-wisdom { font-size:16px;font-weight:800;color:#eef2ff;font-style:italic;
  letter-spacing:-.02em;margin:0;
  background:linear-gradient(135deg,#f0e8ff,#b898ff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }

/* Actions */
.stc-result-actions { display:flex;gap:10px;flex-wrap:wrap;justify-content:center; }
.stc-action-btn {
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 18px;border-radius:12px;
  font-size:13px;font-weight:700;cursor:pointer;transition:all .18s;
}
.stc-action-new  { background:rgba(120,80,255,.1);border:1px solid rgba(120,80,255,.2);color:rgba(200,185,255,.8); }
.stc-action-new:hover { background:rgba(120,80,255,.2);color:#e0d4ff; }
.stc-action-share { background:rgba(40,160,100,.12);border:1px solid rgba(40,160,100,.25);color:rgba(100,220,150,.85); }
.stc-action-share:hover { background:rgba(40,160,100,.22);color:#80e0a8; }
.stc-action-chat { background:linear-gradient(135deg,#5020d0,#8840f0);border:none;color:#fff;box-shadow:0 4px 14px rgba(80,32,208,.32); }
.stc-action-chat:hover { transform:translateY(-1px);box-shadow:0 6px 20px rgba(80,32,208,.5); }

/* Mobile */
@media(max-width:980px){
  .stc-intro-top  { padding:24px 16px 20px; }
  .stc-spread-options { gap:6px; }
  .stc-spread-opt { padding:10px 12px; }
  .stc-fan-wrap   { padding:16px 0 24px; }
  .stc-fan        { height:160px; }
  .stc-fan-card   { width:58px;height:92px; }
  #stc-result { padding:20px 14px 16px; }
}



/* ═══════════════════════════════════════════════════════════════════════════
   DEFINITIVE CENTERING FIX — block layout + margin:auto (most reliable)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Make view containers block so margin:auto works on children */
.staris-main--tarot #stc-view,
.staris-main--dream #sda-view {
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}

/* Root elements: centered block with max-width */
.stc-root,
.sda-root {
  display: block !important;
  width: calc(100% - 48px) !important;
  max-width: 820px !important;
  margin: 0 auto !important;       /* this is what actually centers it */
  overflow: visible !important;
  position: relative !important;
}

/* Input view: still needs internal flex for vertical centering of its content */
.sda-input-view {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 32px 0 !important;
  width: 100% !important;
}
.sda-loading-view {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 400px !important;
}

/* Tarot phases: full width within the centered root */
.stc-phase { width: 100% !important; }
.stc-intro-top { text-align: center !important; }
.stc-deck-wrap { align-items: center !important; }



/* ═══════════════════════════════════════════════════════════════════════════
   TAROT POLISH + SIDEBAR SCROLL FIX
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SIDEBAR: proper scroll, no compression ── */
.staris-sidebar {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(120,80,255,.2) transparent !important;
}
.staris-sidebar::-webkit-scrollbar { width: 3px !important; }
.staris-sidebar::-webkit-scrollbar-thumb { background: rgba(120,80,255,.2) !important; border-radius: 99px !important; }
/* Restore natural widget sizes — let them scroll instead */
.sw-card { padding: 13px 13px 11px !important; margin-bottom: 8px !important; }
.sw-score-wrap { width: 110px !important; height: 110px !important; }
.sw-score-svg  { width: 110px !important; height: 110px !important; }
.sw-score-num  { font-size: 30px !important; }
.sw-moon-orb-wrap { width: 58px !important; height: 58px !important; }
.sw-moon-svg   { width: 58px !important; height: 58px !important; }

/* ── TAROT: bigger fan cards ── */
.stc-fan-card {
  width: 88px !important;
  height: 138px !important;
  border-radius: 10px !important;
}
@media(max-width:980px) {
  .stc-fan-card { width: 64px !important; height: 100px !important; }
  .stc-fan { height: 170px !important; }
}

/* ── TAROT: bigger result cards ── */
.stc-rc-card {
  width: 110px !important;
  height: 172px !important;
}
.stc-rc-front-glyph { font-size: 34px !important; }
.stc-rc-front-name  { font-size: 11px !important; }
.stc-rc-top { padding: 18px 14px !important; gap: 12px !important; }
.stc-rc-card-name { font-size: 15px !important; }

/* ── TAROT: card reading text — punchier size ── */
.stc-rc-reading {
  font-size: 14px !important;
  line-height: 1.65 !important;
  padding: 16px 18px !important;
  color: rgba(220,212,255,.92) !important;
}

/* ── TAROT: result cards bigger gap ── */
.stc-result-cards { gap: 18px !important; }

/* ── TAROT: synthesis section — more visible ── */
.stc-synthesis-wrap {
  margin-top: 28px !important;
  border-top: 2px solid rgba(120,80,255,.18) !important;
  padding-top: 24px !important;
  background: linear-gradient(135deg, rgba(80,40,180,.1), rgba(40,20,100,.08)) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(120,80,255,.2) !important;
  padding: 24px 22px !important;
}
.stc-synthesis-icon {
  font-size: 28px !important;
  background: linear-gradient(135deg,#c8b0ff,#8060ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stc-synthesis-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  color: rgba(170,150,255,.6) !important;
  margin-bottom: 14px !important;
}
.stc-synthesis-text {
  font-size: 15px !important;
  line-height: 1.72 !important;
  color: rgba(225,215,255,.92) !important;
}
.stc-wisdom {
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
}
.stc-wisdom-wrap { padding-top: 18px !important; margin-top: 8px !important; }

/* ── TAROT: slot cards bigger ── */
.stc-slot { width: 80px !important; height: 126px !important; }

/* ── TAROT: center the result phase properly ── */
#stc-result { padding: 28px 16px 40px !important; }
.stc-result-header { margin-bottom: 28px !important; }
.stc-result-title { font-size: 26px !important; font-weight: 900 !important; }



/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL + CENTERING FINAL FIX
   The view containers MUST stay display:flex with flex:1 1 0 / height:0
   to have a constrained height that makes overflow-y:auto actually scroll.
   Centering via align-items:center + width:min(820px,100%-32px) on child.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── VIEW CONTAINERS: flex (not block!) so height is constrained ── */
.staris-main--tarot #stc-view,
.staris-main--dream #sda-view {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: 0 !important;               /* forces flex child to be height-constrained */
  padding: 0 !important;
  scrollbar-width: thin !important;   /* visible thin scrollbar */
  scrollbar-color: rgba(120,80,255,.3) transparent !important;
}
.staris-main--tarot #stc-view::-webkit-scrollbar,
.staris-main--dream #sda-view::-webkit-scrollbar { width: 4px; }
.staris-main--tarot #stc-view::-webkit-scrollbar-thumb,
.staris-main--dream #sda-view::-webkit-scrollbar-thumb { background: rgba(120,80,255,.3); border-radius: 99px; }

/* ── ROOT ELEMENTS: width tricks for proper centering in flex-column ── */
.stc-root,
.sda-root {
  display: block !important;
  /* min() ensures max 820px on wide screens, full-width minus gutter on narrow */
  width: min(820px, calc(100% - 32px)) !important;
  max-width: none !important;
  margin: 0 !important;               /* margin:auto doesn't work in flex — use align-items:center instead */
  flex-shrink: 0 !important;
  overflow: visible !important;
}

/* ── SIDEBAR: proper visible scroll ── */
.staris-sidebar {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(120,80,255,.25) transparent !important;
}
.staris-sidebar::-webkit-scrollbar { width: 3px !important; }
.staris-sidebar::-webkit-scrollbar-thumb { background: rgba(120,80,255,.25) !important; border-radius: 99px !important; }

/* Sidebar inner content: allow natural height so it scrolls */
.staris-sidebar-nav,
.staris-sidebar-user  { flex-shrink: 0 !important; }
.staris-sidebar-footer {
  margin-top: 12px !important;
  flex-shrink: 0 !important;
  padding-bottom: 8px !important;
}

/* ── TAROT: fill available width better ── */
.stc-result-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
}
@media (max-width: 640px) {
  .stc-result-cards { grid-template-columns: 1fr !important; }
}

/* ── Make sure phases are full width ── */
.stc-phase,
.sda-input-view,
.sda-result-view,
.sda-loading-view {
  width: 100% !important;
  flex-shrink: 0 !important;
}

/* ── Bottom padding so last content isn't cut ── */
.stc-root  { padding-bottom: 48px !important; }
.sda-root  { padding-bottom: 48px !important; }



/* ═══════════════════════════════════════════════════════════════════════════
   FINAL DEFINITIVE FIX — padding centering, no height:0 conflict
   ═══════════════════════════════════════════════════════════════════════════ */

/* View containers: flex child, NO height:0 (that broke everything) */
.staris-main--tarot #stc-view,
.staris-main--dream #sda-view {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;    /* stretch so child fills padded area */
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;            /* override the broken height:0 */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Centering via symmetric padding — most reliable CSS method */
  padding-left: max(16px, calc((100% - 820px) / 2)) !important;
  padding-right: max(16px, calc((100% - 820px) / 2)) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(120,80,255,.3) transparent !important;
}
.staris-main--tarot #stc-view::-webkit-scrollbar,
.staris-main--dream #sda-view::-webkit-scrollbar { width: 4px; }
.staris-main--tarot #stc-view::-webkit-scrollbar-thumb,
.staris-main--dream #sda-view::-webkit-scrollbar-thumb { background: rgba(120,80,255,.3); border-radius:99px; }

/* Root elements: full width of the padded container, no special width tricks */
.stc-root,
.sda-root {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  padding-bottom: 48px !important;
}

/* ── SIDEBAR scroll — most targeted possible override ── */
div.staris-sidebar {
  overflow-y: scroll !important;      /* 'scroll' always shows scrollbar, 'auto' doesn't */
  overflow-x: hidden !important;
  max-height: none !important;
  height: 100% !important;
}



/* ═══════════════════════════════════════════════════════════════════════════
   ROOT CAUSE FIXES — no more workarounds
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SIDEBAR: prevent flex-shrink so content overflows and scrolls ── */
.staris-sidebar {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
/* Every direct child must NOT shrink */
.staris-sidebar > *,
.staris-sidebar > .sw-card,
.staris-sidebar > .staris-sidebar-user,
.staris-sidebar > .staris-sidebar-nav,
.staris-sidebar > .staris-sidebar-footer {
  flex-shrink: 0 !important;
  min-height: auto !important;
}

/* ── VIEW CONTAINERS: block display (not flex) inside flex parent ── */
/* As flex items they get height from parent; as block they center content */
.staris-main--tarot #stc-view,
.staris-main--dream #sda-view {
  display: block !important;      /* block so margin:auto works on children */
  flex: 1 1 0 !important;         /* flex item: fills remaining parent height */
  min-height: 0 !important;       /* allows height to be constrained */
  height: auto !important;        /* let flex determine actual height */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;          /* no padding — fan needs full width */
}

/* ── ROOT ELEMENTS: centered block with max-width ── */
.stc-root,
.sda-root {
  display: block !important;
  max-width: 820px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 24px 48px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* ── TAROT FAN: needs full available width, not max-width ── */
/* Fan is positioned absolutely so it escapes its container's max-width */
.stc-fan-wrap,
.stc-fan {
  max-width: none !important;
  width: 100% !important;
}



/* ═══════════════════════════════════════════════════════════════════════════
   DREAM STATE FIX — class-based visibility beats display:flex !important
   .sda-root .sda-hidden has specificity (0,0,2,0) = 20
   vs .sda-input-view (0,0,1,0) = 10  →  higher specificity wins
   ═══════════════════════════════════════════════════════════════════════════ */
.sda-root .sda-hidden {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL CONTROL — result pages only (v6.9.3)
   Default: no scroll. JS adds .staris-view-scrollable on result phase only.
   Class-based so it wins over any existing overflow !important rules.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Default: no scrolling on non-result phases */
.staris-main--tarot #stc-view,
.staris-main--dream #sda-view {
  overflow-y: hidden !important;
}

/* Scrolling unlocked on result phase only */
.staris-main--tarot #stc-view.staris-view-scrollable,
.staris-main--dream #sda-view.staris-view-scrollable {
  overflow-y: auto !important;
  scroll-behavior: smooth;
}

/* Scrollbar styling for result views */
.staris-main--tarot #stc-view.staris-view-scrollable::-webkit-scrollbar,
.staris-main--dream #sda-view.staris-view-scrollable::-webkit-scrollbar {
  width: 5px;
}
.staris-main--tarot #stc-view.staris-view-scrollable::-webkit-scrollbar-track,
.staris-main--dream #sda-view.staris-view-scrollable::-webkit-scrollbar-track {
  background: rgba(15, 8, 40, .25);
  border-radius: 99px;
  margin: 8px 0;
}
.staris-main--tarot #stc-view.staris-view-scrollable::-webkit-scrollbar-thumb,
.staris-main--dream #sda-view.staris-view-scrollable::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #5030c8, #8050e8, #5030c8);
  border-radius: 99px;
  box-shadow: 0 0 8px rgba(90, 50, 220, .4);
}


/* ═══════════════════════════════════════════════════════════════════════════
   TAROT SELECTION — visual hierarchy fix (v6.9.3)
   Card slots are the PRIMARY action. Fan is secondary/decorative.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Slots: bigger, more presence */
.stc-slot {
  width: 90px !important;
  height: 132px !important;
  border-radius: 10px !important;
  border: 2px dashed rgba(140, 95, 255, .45) !important;
  background: rgba(60, 30, 140, .08) !important;
  box-shadow: 0 0 20px rgba(100, 50, 220, .08), inset 0 0 12px rgba(100, 50, 200, .05) !important;
  gap: 6px !important;
  transition: border-color .25s, box-shadow .25s, background .25s !important;
}
.stc-slot.is-filled {
  border-style: solid !important;
  border-color: rgba(160, 100, 255, .65) !important;
  background: rgba(90, 45, 200, .18) !important;
  box-shadow: 0 0 24px rgba(120, 60, 255, .28) !important;
}
.stc-slot-num {
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
  color: rgba(180, 155, 255, .55) !important;
}
.stc-slot-pos {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: rgba(200, 180, 255, .7) !important;
}
.stc-slot-card {
  font-size: 9px !important;
  color: rgba(220, 200, 255, .9) !important;
  font-weight: 700 !important;
}

/* Instruction text: more prominent */
.stc-select-instruction {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: rgba(220, 205, 255, .92) !important;
  letter-spacing: -.01em !important;
  margin: 0 0 20px !important;
}

/* Fan: tighter vertical footprint — it's decorative here */
.stc-fan-wrap {
  padding: 12px 0 16px !important;
  overflow: hidden !important; /* clips rotated card overhang on all screens */
}
.stc-fan {
  height: 155px !important;
}
.stc-fan-card {
  width: 66px !important;
  height: 104px !important;
}

/* Mobile: fan even more compact */
@media (max-width: 640px) {
  .stc-fan-wrap {
    padding: 8px 0 12px !important;
  }
  .stc-fan {
    height: 130px !important;
  }
  .stc-fan-card {
    width: 50px !important;
    height: 80px !important;
  }
  .stc-slot {
    width: 78px !important;
    height: 116px !important;
  }
}

/* Selection header: tighter top padding so slots are more visible above fold */
.stc-select-header {
  padding: 22px 20px 12px !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   STARIS SCROLL SYSTEM — DEFINITIVE FINAL (v6.9.3+scroll)
   This block is LAST in the file. Same-specificity rules: last wins.
   Higher-specificity .staris-view-scrollable class beats the default hidden.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── STEP 1: App root — pixel-locked to viewport, no reliance on body ── */
.staris-chat-app {
  position: fixed !important;
  top: 0 !important; right: 0 !important;
  bottom: 0 !important; left: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 9999 !important;
}
body.admin-bar .staris-chat-app          { top: 32px !important; }
@media (max-width: 782px) {
  body.admin-bar .staris-chat-app        { top: 46px !important; }
}

/* ── STEP 2: Shell — flex child that fills the app root ── */
.staris-shell {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* ── STEP 3: Main — absolute, fills shell exactly, column flex ── */
/* Default (no feature active): normal chat layout */
.staris-main {
  position: absolute !important;
  top: 0 !important; right: 0 !important;
  bottom: 0 !important; left: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  /* Desktop sidebar offset */
  padding: 14px 24px 0 !important;
  gap: 8px !important;
}
@media (min-width: 981px) {
  .staris-main { left: 230px !important; }
}
@media (max-width: 980px) {
  .staris-main {
    padding: 10px 12px 0 !important;
    gap: 8px !important;
  }
}

/* Dream / Tarot modes: no padding — view container owns all space */
.staris-main--dream,
.staris-main--tarot {
  padding: 0 !important;
  gap: 0 !important;
}

/* ── STEP 4: View containers — fill all remaining space, NO scroll by default ── */
.staris-main--tarot #stc-view,
.staris-main--dream #sda-view {
  /* Flex item: consume ALL space left after siblings (which are hidden in these modes) */
  flex: 1 1 0 !important;
  min-height: 0 !important;
  /* Do NOT set height: auto — that would expand to fit content, breaking scroll */
  /* Centering child content horizontally */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  /* Default: no scroll (input/loading/select phases) */
  overflow: hidden !important;
  padding: 0 !important;
}

/* ── STEP 5: SCROLLABLE STATE — result phase only ── */
/* Higher specificity (extra class) beats the hidden rule above */
.staris-main--tarot #stc-view.staris-view-scrollable,
.staris-main--dream #sda-view.staris-view-scrollable {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;   /* iOS momentum scroll */
  scroll-behavior: smooth !important;
  /* Firefox scrollbar */
  scrollbar-width: thin !important;
  scrollbar-color: #6040d8 rgba(10, 5, 30, .15) !important;
}

/* ── STEP 6: SCROLLBAR — purple gradient, 5px, glow on thumb ── */
.staris-main--tarot #stc-view.staris-view-scrollable::-webkit-scrollbar,
.staris-main--dream #sda-view.staris-view-scrollable::-webkit-scrollbar {
  width: 5px !important;
  background: transparent !important;
}
.staris-main--tarot #stc-view.staris-view-scrollable::-webkit-scrollbar-track,
.staris-main--dream #sda-view.staris-view-scrollable::-webkit-scrollbar-track {
  background: rgba(12, 6, 35, .22) !important;
  border-radius: 99px !important;
  margin: 12px 0 !important;
}
.staris-main--tarot #stc-view.staris-view-scrollable::-webkit-scrollbar-thumb,
.staris-main--dream #sda-view.staris-view-scrollable::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4828b8 0%, #8050e8 50%, #4828b8 100%) !important;
  border-radius: 99px !important;
  box-shadow: 0 0 10px rgba(90, 45, 220, .5) !important;
  min-height: 40px !important;
}
.staris-main--tarot #stc-view.staris-view-scrollable::-webkit-scrollbar-thumb:hover,
.staris-main--dream #sda-view.staris-view-scrollable::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #5832d0 0%, #9060f8 50%, #5832d0 100%) !important;
  box-shadow: 0 0 14px rgba(110, 55, 250, .65) !important;
}

/* ── STEP 7: Root elements — MUST NOT shrink, let content overflow ── */
.stc-root,
.sda-root {
  display: block !important;
  /* Responsive max-width centered via parent align-items:center */
  width: min(820px, calc(100% - 32px)) !important;
  max-width: none !important;
  margin: 0 !important;
  flex-shrink: 0 !important;    /* CRITICAL: don't compress — overflow into scroll */
  overflow: visible !important;
  /* Top padding: breathing room from the edge */
  padding-top: 20px !important;
  /* Bottom padding: CRITICAL — covers safe area + browser chrome on mobile */
  padding-bottom: max(80px, calc(40px + env(safe-area-inset-bottom, 20px))) !important;
  box-sizing: border-box !important;
}

/* ── STEP 8: Left/right padding on roots (horizontal breathing room) ── */
.stc-root {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.sda-root {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* ── STEP 9: Mobile-specific root width (full-width on small screens) ── */
@media (max-width: 640px) {
  .stc-root,
  .sda-root {
    width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    /* Extra bottom on very small screens for larger browser chrome */
    padding-bottom: max(100px, calc(60px + env(safe-area-inset-bottom, 24px))) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   COPY NATAL CHART PATTERN — FINAL OVERRIDE (v6.9.4)
   Natal chart works. Copying its exact rules for dream + tarot.
   These rules are LAST in the file — they win over everything above.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dream: exact natal chart pattern */
.staris-main--dream #sda-view {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 0 !important;
  height: unset !important;
}

/* Tarot: exact natal chart pattern */
.staris-main--tarot #stc-view {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 0 !important;
  height: unset !important;
}

/* Scrollbar — purple, 5px, matches app style */
.staris-main--dream #sda-view::-webkit-scrollbar,
.staris-main--tarot #stc-view::-webkit-scrollbar { width: 5px; }
.staris-main--dream #sda-view::-webkit-scrollbar-track,
.staris-main--tarot #stc-view::-webkit-scrollbar-track { background: rgba(15,8,40,.25); border-radius:99px; margin:10px 0; }
.staris-main--dream #sda-view::-webkit-scrollbar-thumb,
.staris-main--tarot #stc-view::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,#5030c8,#8050e8,#5030c8);
  border-radius: 99px;
  box-shadow: 0 0 8px rgba(90,50,220,.4);
  min-height: 40px;
}
.staris-main--dream #sda-view,
.staris-main--tarot #stc-view {
  scrollbar-width: thin !important;
  scrollbar-color: #6040d8 rgba(15,8,40,.2) !important;
}

/* Root elements: don't shrink, generous bottom padding for mobile browser chrome */
.sda-root, .stc-root {
  flex-shrink: 0 !important;
  padding-bottom: max(80px, calc(40px + env(safe-area-inset-bottom, 20px))) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FINAL DEFINITIVE FIX — v6.9.5
   This block is physically last. Same specificity = last wins.
   Fixes: scroll on all screens, no scrollbar on non-result pages,
          fan card clipping, ugly scrollbar, color overlay on input.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. View containers — exact natal chart pattern, no exceptions */
.staris-main--dream #sda-view,
.staris-main--tarot #stc-view {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  /* overflow shorthand first so there's no ambiguity with prior blocks */
  overflow: hidden auto !important; /* x=hidden, y=auto — matches natal chart */
  -webkit-overflow-scrolling: touch !important;
  padding: 0 !important;
}

/* 2. Thin subtle scrollbar — matches natal chart exactly */
.staris-main--dream #sda-view::-webkit-scrollbar,
.staris-main--tarot #stc-view::-webkit-scrollbar { width: 3px; }
.staris-main--dream #sda-view::-webkit-scrollbar-track,
.staris-main--tarot #stc-view::-webkit-scrollbar-track { background: transparent; }
.staris-main--dream #sda-view::-webkit-scrollbar-thumb,
.staris-main--tarot #stc-view::-webkit-scrollbar-thumb {
  background: rgba(100,80,200,.25);
  border-radius: 99px;
}
.staris-main--dream #sda-view,
.staris-main--tarot #stc-view {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(100,80,200,.2) transparent !important;
}

/* 3. Root elements — NO excess padding (that was causing overflow on input page) */
.sda-root,
.stc-root {
  display: block !important;
  width: min(820px, 100%) !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* 4. Result views get the bottom padding — ONLY where content needs breathing room */
.sda-result-view {
  padding-bottom: max(60px, env(safe-area-inset-bottom, 20px)) !important;
}
#stc-result {
  padding-bottom: max(60px, env(safe-area-inset-bottom, 20px)) !important;
}

/* 5. Fan — overflow MUST be visible so rotated cards aren't clipped */
.stc-fan-wrap {
  overflow: visible !important;
  padding: 12px 0 20px !important;
}
.stc-fan {
  overflow: visible !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   v6.9.5 — FINAL TARGETED FIXES (root cause fixed in PHP template above)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Scrollbar: thin + subtle, matches natal chart */
.staris-main--dream #sda-view::-webkit-scrollbar,
.staris-main--tarot #stc-view::-webkit-scrollbar { width: 3px !important; }
.staris-main--dream #sda-view::-webkit-scrollbar-track,
.staris-main--tarot #stc-view::-webkit-scrollbar-track { background: transparent !important; }
.staris-main--dream #sda-view::-webkit-scrollbar-thumb,
.staris-main--tarot #stc-view::-webkit-scrollbar-thumb {
  background: rgba(100,80,200,.25) !important;
  border-radius: 99px !important;
}
.staris-main--dream #sda-view,
.staris-main--tarot #stc-view {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(100,80,200,.2) transparent !important;
}

/* Result pages: bottom padding so last content isn't cut off by browser chrome */
.sda-result-view,
#stc-result {
  padding-bottom: max(72px, env(safe-area-inset-bottom, 24px)) !important;
  box-sizing: border-box !important;
}

/* Fan: MUST be overflow:visible — rotated cards get clipped otherwise */
.stc-fan-wrap,
.stc-fan { overflow: visible !important; }

/* Dreambook badge: fixed top-right, high enough to not collide with title on mobile */
.sda-dreambook-btn {
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top, 12px)) !important;
  right: 16px !important;
  z-index: 1000 !important;
}
@media (max-width: 640px) {
  .sda-dreambook-btn { top: 8px !important; right: 10px !important; }
}

/* Input/loading pages: no excess padding that would create phantom scroll */
.sda-input-view,
.sda-loading-view {
  padding-bottom: 24px !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   v6.9.5 REMAINING FIXES — all red-annotation issues from screenshots
   ═══════════════════════════════════════════════════════════════════════════ */

/* FIX 1 — Color overlay on dream input/loading
   sda-root has position:relative + overflow:hidden to contain nebula orbs.
   Without this, the blurred nebula gradients bleed below the content
   and create a visible color band at the bottom of the view. */
.sda-root {
  overflow: hidden !important;
  background: transparent !important;
}
/* sda-view and stc-view must be transparent so app starfield shows through */
.staris-main--dream #sda-view,
.staris-main--tarot #stc-view {
  background: transparent !important;
}

/* FIX 2 — Dreambook badge: position:fixed so it never overlaps scrollable content.
   Mobile: pushed down to clear any browser UI at very top. */
.sda-history-btn {
  position: fixed !important;
  top: 14px !important;
  right: 20px !important;
  z-index: 9000 !important;
}
body.admin-bar .sda-history-btn { top: 46px !important; }
@media (max-width: 782px) {
  body.admin-bar .sda-history-btn { top: 54px !important; }
  .sda-history-btn { top: 10px !important; right: 10px !important; }
}

/* FIX 3 — Fan cards: overflow must be visible or rotated cards get clipped */
.stc-fan-wrap,
.stc-fan {
  overflow: visible !important;
}

/* FIX 4 — Result page bottom padding: content reachable past browser chrome */
.sda-result-view { padding-bottom: max(80px, env(safe-area-inset-bottom, 24px)) !important; }
#stc-result      { padding-bottom: max(80px, env(safe-area-inset-bottom, 24px)) !important; }

/* FIX 5 — Scrollbar: thin 3px matching natal chart exactly */
.staris-main--dream #sda-view::-webkit-scrollbar,
.staris-main--tarot #stc-view::-webkit-scrollbar { width: 3px !important; }
.staris-main--dream #sda-view::-webkit-scrollbar-track,
.staris-main--tarot #stc-view::-webkit-scrollbar-track { background: transparent !important; }
.staris-main--dream #sda-view::-webkit-scrollbar-thumb,
.staris-main--tarot #stc-view::-webkit-scrollbar-thumb {
  background: rgba(100,80,200,.25) !important;
  border-radius: 99px !important;
}
.staris-main--dream #sda-view,
.staris-main--tarot #stc-view {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(100,80,200,.2) transparent !important;
}

/* FIX 6 — Tarot selection slots: bigger, more visual weight (primary UI) */
.stc-slot {
  width: 90px !important;
  height: 132px !important;
  border: 2px dashed rgba(140,95,255,.5) !important;
  border-radius: 10px !important;
  background: rgba(60,30,140,.1) !important;
}
.stc-slot.is-filled {
  border-style: solid !important;
  border-color: rgba(160,100,255,.7) !important;
  background: rgba(90,45,200,.2) !important;
  box-shadow: 0 0 20px rgba(120,60,255,.25) !important;
}

/* FIX 7 — Input/loading views: ensure they don't cause phantom overflow */
.sda-input-view  { padding-bottom: 20px !important; }
.sda-loading-view { padding-bottom: 20px !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   v6.9.6 — LAYOUT PARITY WITH NATAL CHART + VISIBLE SCROLLBAR
   Root causes: align-items:center removed from PHP, sidebar offset
   guaranteed at lower breakpoint, scrollbar made visible.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Sidebar offset: use min-width:768px so zoom/DPI never breaks it ── */
/* This overrides the DEFINITIVE FINAL left:0 outside-media rule */
@media (min-width: 768px) {
  .staris-main {
    left: 230px !important;
  }
  .staris-sidebar {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 230px !important;
  }
}
@media (max-width: 767px) {
  .staris-main {
    left: 0 !important;
  }
}

/* ── 2. View containers: exact natal chart parity, no align-items:center ── */
/* (align-items:center was in PHP template but NOT in natal chart CSS —
   it widens the scroll track position relative to content) */
.staris-main--dream #sda-view,
.staris-main--tarot #stc-view {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 0 !important;
}

/* ── 3. VISIBLE scrollbar — this is why users think there's no scroll ──
   Natal chart thumbnail shows a subtle line; we need the same here.
   Track: faint tinted background so the rail is always visible.
   Thumb: solid enough to see at a glance. ── */
.staris-main--dream #sda-view::-webkit-scrollbar,
.staris-main--tarot #stc-view::-webkit-scrollbar {
  width: 4px !important;
}
.staris-main--dream #sda-view::-webkit-scrollbar-track,
.staris-main--tarot #stc-view::-webkit-scrollbar-track {
  background: rgba(80,50,160,.12) !important;
  border-radius: 99px !important;
  margin: 8px 0 !important;
}
.staris-main--dream #sda-view::-webkit-scrollbar-thumb,
.staris-main--tarot #stc-view::-webkit-scrollbar-thumb {
  background: rgba(120,80,220,.55) !important;
  border-radius: 99px !important;
  min-height: 40px !important;
}
.staris-main--dream #sda-view::-webkit-scrollbar-thumb:hover,
.staris-main--tarot #stc-view::-webkit-scrollbar-thumb:hover {
  background: rgba(140,90,240,.8) !important;
}
/* Firefox */
.staris-main--dream #sda-view,
.staris-main--tarot #stc-view {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(120,80,220,.55) rgba(80,50,160,.1) !important;
}

/* ── 4. Result page bottom breathing room ── */
.sda-result-view { padding-bottom: max(80px, env(safe-area-inset-bottom, 24px)) !important; }
#stc-result      { padding-bottom: max(80px, env(safe-area-inset-bottom, 24px)) !important; }

/* ── 5. Fan cards: overflow visible, no clipping ── */
.stc-fan-wrap, .stc-fan { overflow: visible !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   FORTUNE TELLER — v1.0
   Crystal ball, mode selector, daily/weekly/decider results
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── VIEW CONTAINER ── */
.staris-main--fortune [data-staris-chat-thread],
.staris-main--fortune [data-staris-chat-form],
.staris-main--fortune [data-staris-chip-row],
.staris-main--fortune .staris-main-topbar { display: none !important; }

.staris-main--fortune #sft-view {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(120,80,220,.55) rgba(80,50,160,.1) !important;
}
.staris-main--fortune #sft-view::-webkit-scrollbar { width: 4px; }
.staris-main--fortune #sft-view::-webkit-scrollbar-track { background: rgba(80,50,160,.12); border-radius:99px; margin:8px 0; }
.staris-main--fortune #sft-view::-webkit-scrollbar-thumb { background: rgba(120,80,220,.55); border-radius:99px; min-height:40px; }

/* ── ROOT ── */
.sft-root {
  display: block;
  width: min(820px, 100%);
  margin: 0 auto;
  padding: 0 24px 80px;
  box-sizing: border-box;
  position: relative;
}

/* ── AMBIENT BACKGROUND ── */
.sft-ambient { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.sft-neb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .1; }
.sft-neb-1 { width:500px; height:500px; top:-100px; left:-150px; background: radial-gradient(circle,#6030d0,transparent 70%); animation: sftNebDrift 20s ease-in-out infinite alternate; }
.sft-neb-2 { width:400px; height:400px; bottom:0; right:-100px; background: radial-gradient(circle,#3050d0,transparent 70%); animation: sftNebDrift 26s ease-in-out infinite alternate-reverse; }
@keyframes sftNebDrift { from{transform:translate(0,0)} to{transform:translate(25px,20px) scale(1.08)} }

/* ── PHASES ── */
.sft-phase { position: relative; z-index: 2; }
.sft-phase-hidden { display: none !important; }

/* ── INTRO HEADER ── */
.sft-intro-header { text-align: center; padding: 36px 0 4px; }
.sft-date { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(160,140,220,.55); margin: 0 0 10px; }
.sft-title { font-size: 28px; font-weight: 900; letter-spacing: -.03em; color: #fff; margin: 0 0 8px; }
.sft-subtitle { font-size: 14px; color: rgba(180,165,230,.6); margin: 0 0 36px; }

/* ══════════════════════════════════════════════════════════════════════════
   CRYSTAL BALL
   ══════════════════════════════════════════════════════════════════════════ */

.sft-ball-scene {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 0 auto 40px;
  flex-shrink: 0;
}
.sft-ball-scene--sm { width: 140px; height: 140px; margin: 0 auto 24px; }
.sft-ball-scene--lg { width: 280px; height: 280px; margin: 0 auto 32px; }

/* Outer ambient glow — large, blurred, pulsing */
.sft-ball-ambient-glow {
  position: absolute;
  inset: -50px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110,65,240,.4) 0%, transparent 65%);
  filter: blur(24px);
  animation: sftGlowPulse 3.5s ease-in-out infinite;
}

/* Outer ring — faint circle just outside the ball */
.sft-ball-outer-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(140,100,255,.2);
  box-shadow: 0 0 20px rgba(110,65,240,.3);
  animation: sftRingPulse 4s ease-in-out infinite;
}

/* The glass sphere itself */
.sft-ball {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  /* Layer order (bottom to top):
     1. Very dark base — deep glass illusion
     2. Internal color glow — the scrying light source
     3. Rim caustic — light bouncing around the glass edge
     4. Transmission highlight — light exiting the far side
     5. Soft fill highlight — glass body
     6. Sharp specular — primary glass reflection (no blur — CSS handles it) */
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.6) 3%, rgba(255,255,255,0) 12%),
    radial-gradient(circle at 36% 32%, rgba(220,195,255,.45) 0%, transparent 22%),
    radial-gradient(circle at 66% 70%, rgba(170,130,255,.28) 0%, transparent 16%),
    radial-gradient(circle at 50% 52%, rgba(90,45,235,.85) 0%, rgba(30,12,100,.98) 38%, rgba(4,2,16,1) 68%),
    radial-gradient(circle at 55% 60%, rgba(8,4,30,.96) 0%, rgba(2,1,10,1) 100%);
  box-shadow:
    /* Sharp rim caustic — bright edge like glass in light */
    inset 0 0 0 1px rgba(180,140,255,.35),
    /* Inner depth */
    inset 0 0 60px rgba(0,0,0,.9),
    inset 0 0 120px rgba(10,4,40,.6),
    /* Subtle inner color */
    inset 0 0 30px rgba(80,40,200,.25),
    /* Outer glow layers */
    0 0 28px rgba(120,70,245,.7),
    0 0 60px rgba(100,55,225,.4),
    0 0 110px rgba(80,42,200,.2),
    /* Physical drop shadow */
    0 20px 60px rgba(0,0,0,.7),
    0 8px 20px rgba(0,0,0,.5);
}

/* Mist layers — the swirling interior */
.sft-mist {
  position: absolute;
  border-radius: 50%;
}
.sft-mist-1 {
  width: 160%; height: 160%;
  top: -30%; left: -30%;
  background: radial-gradient(ellipse at 45% 45%, rgba(110,65,240,.75), transparent 55%);
  filter: blur(18px);
  mix-blend-mode: screen;
  animation: sftMist1 9s ease-in-out infinite;
}
.sft-mist-2 {
  width: 130%; height: 130%;
  top: -15%; left: -15%;
  background: radial-gradient(ellipse at 55% 60%, rgba(55,100,230,.6), transparent 55%);
  filter: blur(16px);
  mix-blend-mode: screen;
  animation: sftMist2 12s ease-in-out infinite reverse;
}
.sft-mist-3 {
  width: 110%; height: 110%;
  top: -5%; left: -5%;
  background: radial-gradient(ellipse at 50% 40%, rgba(150,90,255,.5), transparent 50%);
  filter: blur(14px);
  mix-blend-mode: screen;
  animation: sftMist3 7s ease-in-out infinite;
}
.sft-mist-4 {
  width: 80%; height: 80%;
  top: 10%; left: 10%;
  background: radial-gradient(ellipse at 60% 55%, rgba(80,140,255,.35), transparent 60%);
  filter: blur(12px);
  mix-blend-mode: screen;
  animation: sftMist4 15s ease-in-out infinite alternate;
}

/* Sharp specular highlight — primary glass reflection, NO blur (glass is sharp) */
.sft-ball-shine {
  position: absolute;
  width: 28%; height: 18%;
  top: 13%; left: 16%;
  background: radial-gradient(ellipse at 40% 40%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 30%, rgba(255,255,255,0) 100%);
  border-radius: 50%;
  transform: rotate(-25deg);
}
/* Soft secondary highlight — slightly diffused */
.sft-ball-shine-2 {
  position: absolute;
  width: 45%; height: 30%;
  top: 10%; left: 10%;
  background: radial-gradient(ellipse, rgba(255,255,255,.18) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(4px);
  transform: rotate(-20deg);
}
/* Transmission highlight — bottom-right, light exiting the glass */
.sft-ball-reflect {
  position: absolute;
  width: 30%; height: 20%;
  bottom: 16%; right: 12%;
  background: radial-gradient(ellipse, rgba(200,170,255,.3) 0%, transparent 70%);
  filter: blur(5px);
  border-radius: 50%;
}
/* Caustic rim glow — sits just inside the edge */
.sft-ball::after {
  content: '';
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(160,120,255,.2);
  pointer-events: none;
}
  filter: blur(10px);
}

/* Floating orbs around the ball */
.sft-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(1.5px);
}
.sft-orb-1 { width:9px; height:9px; background:rgba(170,120,255,.85); top:8%; right:2%; animation:sftOrb1 4.2s ease-in-out infinite; box-shadow:0 0 8px rgba(150,100,255,.6); }
.sft-orb-2 { width:6px; height:6px; background:rgba(100,160,255,.75); bottom:18%; left:-2%; animation:sftOrb2 5.8s ease-in-out infinite; box-shadow:0 0 6px rgba(80,140,255,.5); }
.sft-orb-3 { width:7px; height:7px; background:rgba(210,150,255,.7); top:50%; right:-4%; animation:sftOrb3 3.6s ease-in-out infinite; box-shadow:0 0 7px rgba(190,130,255,.5); }
.sft-orb-4 { width:5px; height:5px; background:rgba(130,200,255,.65); top:20%; left:-3%; animation:sftOrb4 6.4s ease-in-out infinite; box-shadow:0 0 5px rgba(110,180,255,.4); }

/* ── Ball STATE: Thinking ── */
.sft-is-thinking .sft-ball-ambient-glow {
  animation: sftGlowPulse .9s ease-in-out infinite;
  background: radial-gradient(circle, rgba(150,80,255,.65) 0%, transparent 65%);
  inset: -60px;
}
.sft-is-thinking .sft-ball {
  box-shadow:
    inset 0 0 50px rgba(0,0,0,.5),
    0 0 50px rgba(140,80,255,.8),
    0 0 100px rgba(110,60,255,.5),
    0 0 160px rgba(80,40,220,.25),
    0 8px 40px rgba(0,0,0,.5);
}
.sft-is-thinking .sft-mist-1 { animation-duration: 2s; opacity: .9; }
.sft-is-thinking .sft-mist-2 { animation-duration: 2.8s; opacity: .9; }
.sft-is-thinking .sft-mist-3 { animation-duration: 1.8s; opacity: .9; }
.sft-is-thinking .sft-mist-4 { animation-duration: 3.5s; opacity: .8; }
.sft-is-thinking .sft-orb-1 { animation-duration: 1.2s; background:rgba(200,150,255,.95); }
.sft-is-thinking .sft-orb-2 { animation-duration: 1.6s; }
.sft-is-thinking .sft-orb-3 { animation-duration: 1s; }

/* ── Ball STATE: Revealing ── */
.sft-is-revealing .sft-ball {
  box-shadow:
    inset 0 0 30px rgba(180,120,255,.3),
    0 0 80px rgba(160,100,255,.9),
    0 0 140px rgba(130,70,255,.6),
    0 0 200px rgba(100,50,230,.3);
  animation: sftRevealFlash .6s ease-out forwards;
}

/* Ball keyframes */
@keyframes sftGlowPulse {
  0%, 100% { opacity: .75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes sftRingPulse {
  0%, 100% { opacity: .4; transform: scale(1); }
  50% { opacity: .8; transform: scale(1.02); }
}
@keyframes sftMist1 {
  0%   { transform: rotate(0deg) scale(1); }
  33%  { transform: rotate(122deg) scale(1.12); }
  66%  { transform: rotate(244deg) scale(0.94); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes sftMist2 {
  0%   { transform: rotate(0deg) translateX(0) scale(1); }
  50%  { transform: rotate(180deg) translateX(12px) scale(1.08); }
  100% { transform: rotate(360deg) translateX(0) scale(1); }
}
@keyframes sftMist3 {
  0%, 100% { transform: scale(1) translateY(0); opacity: .55; }
  50%       { transform: scale(1.2) translateY(-12px); opacity: .75; }
}
@keyframes sftMist4 {
  from { transform: rotate(-15deg) scale(.9); opacity: .3; }
  to   { transform: rotate(15deg) scale(1.1); opacity: .6; }
}
@keyframes sftOrb1 {
  0%, 100% { transform: translateY(0) translateX(0); opacity: .8; }
  50%       { transform: translateY(-14px) translateX(6px); opacity: 1; }
}
@keyframes sftOrb2 {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50%       { transform: translateY(-10px); opacity: 1; }
}
@keyframes sftOrb3 {
  0%, 100% { transform: translateY(0) translateX(0); opacity: .65; }
  50%       { transform: translateY(-12px) translateX(-7px); opacity: .9; }
}
@keyframes sftOrb4 {
  0%, 100% { transform: translateY(0); opacity: .6; }
  50%       { transform: translateY(-8px); opacity: .85; }
}
@keyframes sftRevealFlash {
  0%   { filter: brightness(1); }
  30%  { filter: brightness(2.5); }
  100% { filter: brightness(1); }
}

/* Smaller ball scales */
.sft-ball-scene--sm .sft-ball-ambient-glow { inset:-30px; filter:blur(16px); }
.sft-ball-scene--sm .sft-ball-outer-ring   { inset:-4px; }
.sft-ball-scene--sm .sft-mist-1 { filter:blur(10px); }
.sft-ball-scene--sm .sft-mist-2 { filter:blur(9px); }
.sft-ball-scene--sm .sft-mist-3 { filter:blur(8px); }
.sft-ball-scene--sm .sft-ball-shine { filter:blur(3px); }
.sft-ball-scene--sm .sft-orb-1 { width:6px; height:6px; }
.sft-ball-scene--sm .sft-orb-2 { width:4px; height:4px; }

/* ══════════════════════════════════════════════════════════════════════════
   MODE SELECTOR CARDS
   ══════════════════════════════════════════════════════════════════════════ */

.sft-modes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}

.sft-mode-btn {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 12px;
  padding: 16px 18px;
  background: rgba(20,12,50,.55);
  border: 1px solid rgba(120,85,255,.2);
  border-radius: 16px;
  cursor: pointer;
  transition: all .2s;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.sft-mode-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(120,80,255,.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .2s;
}
.sft-mode-btn:hover { border-color: rgba(140,100,255,.45); background: rgba(28,16,65,.7); transform: translateY(-1px); }
.sft-mode-btn:hover::before { opacity: 1; }
.sft-mode-btn:active { transform: translateY(0); }

.sft-mode-icon {
  grid-row: 1 / 3;
  grid-column: 1;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(100,65,220,.15);
  border-radius: 12px;
  color: rgba(180,150,255,.85);
}
.sft-mode-btn--decider .sft-mode-icon {
  background: rgba(80,50,200,.15);
  color: rgba(160,130,255,.9);
}

.sft-mode-name {
  grid-row: 1; grid-column: 2;
  font-size: 14px; font-weight: 800; color: rgba(220,210,255,.95);
  letter-spacing: -.01em;
}
.sft-mode-desc {
  grid-row: 2; grid-column: 2;
  font-size: 11.5px; color: rgba(160,145,210,.6); margin-top: 2px;
}
.sft-mode-badge {
  grid-row: 1 / 3; grid-column: 3;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  padding: 3px 9px; border-radius: 99px;
  text-transform: uppercase;
}
.sft-mode-badge--daily  { background: rgba(100,220,150,.12); color: rgba(120,220,160,.8); border: 1px solid rgba(100,200,140,.2); }
.sft-mode-badge--weekly { background: rgba(100,140,255,.12); color: rgba(130,160,255,.8); border: 1px solid rgba(100,130,255,.2); }

/* ══════════════════════════════════════════════════════════════════════════
   DECIDER INPUT
   ══════════════════════════════════════════════════════════════════════════ */

.sft-question-header { text-align: center; padding: 28px 0 20px; }
.sft-question-title  { font-size: 20px; font-weight: 800; color: rgba(220,210,255,.95); margin: 0 0 8px; }
.sft-question-hint   { font-size: 13px; color: rgba(160,145,210,.6); max-width: 340px; margin: 0 auto; }

.sft-question-body { max-width: 480px; margin: 0 auto; }

.sft-question-input {
  width: 100%;
  background: rgba(6,3,20,.88);
  border: 1px solid rgba(120,85,255,.22);
  border-radius: 14px;
  color: rgba(220,210,255,.95);
  font-size: 14px;
  line-height: 1.6;
  padding: 16px 18px;
  resize: none;
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
  font-family: inherit;
  min-height: 100px;
}
.sft-question-input:focus {
  outline: none;
  border-color: rgba(140,100,255,.45);
  box-shadow: 0 0 0 3px rgba(110,70,220,.12);
}
.sft-question-input::placeholder { color: rgba(140,120,185,.4); }

.sft-question-meta { display: flex; justify-content: flex-end; padding: 6px 4px 14px; }
.sft-question-count { font-size: 11px; color: rgba(150,130,190,.45); }

.sft-ask-btn {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #6030c8, #8050e8);
  border: none; border-radius: 12px;
  color: #fff; font-size: 15px; font-weight: 800;
  cursor: pointer; transition: all .2s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  letter-spacing: -.01em;
}
.sft-ask-btn:hover { background: linear-gradient(135deg, #7040d8, #9060f8); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(100,50,220,.35); }
.sft-ask-btn:disabled { opacity: .5; pointer-events: none; }

.sft-back-link {
  display: block; width: 100%; margin-top: 12px;
  background: none !important;
  border: none;
  color: rgba(150,130,210,.5); font-size: 12px;
  cursor: pointer; text-align: center; padding: 8px;
  transition: color .2s;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  box-shadow: none !important;
}
.sft-back-link:hover { color: rgba(180,160,230,.8); background: none !important; }
.sft-back-link:focus { outline: none; box-shadow: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   LOADING
   ══════════════════════════════════════════════════════════════════════════ */

#sft-loading-phase { text-align: center; padding: 48px 0 0; }
.sft-loading-text {
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  color: rgba(160,140,220,.6); text-transform: uppercase;
  animation: sftLoadingFade 1.8s ease-in-out infinite;
}
@keyframes sftLoadingFade { 0%,100%{opacity:.4} 50%{opacity:1} }

/* ══════════════════════════════════════════════════════════════════════════
   RESULT CARDS — DAILY
   ══════════════════════════════════════════════════════════════════════════ */

.sft-result-inner { padding: 0 0 8px; }

/* Result header */
.sft-result-header { text-align: center; padding: 32px 0 28px; }
.sft-result-mode-label {
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(140,120,200,.55); margin: 0 0 10px;
}
.sft-result-title {
  font-size: 24px; font-weight: 900; letter-spacing: -.025em;
  color: rgba(230,220,255,.98); margin: 0 0 12px; line-height: 1.2;
}
.sft-result-badges { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.sft-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  padding: 4px 12px; border-radius: 99px; text-transform: uppercase;
}
.sft-badge--energy-high   { background: rgba(240,160,50,.14); color:rgba(240,180,80,.9); border:1px solid rgba(220,160,60,.2); }
.sft-badge--energy-medium { background: rgba(100,160,255,.12); color:rgba(130,180,255,.8); border:1px solid rgba(100,150,255,.2); }
.sft-badge--energy-low    { background: rgba(120,100,180,.12); color:rgba(160,140,210,.7); border:1px solid rgba(120,100,180,.2); }
.sft-badge--theme { background: rgba(120,80,255,.14); color:rgba(160,130,255,.85); border:1px solid rgba(120,80,255,.22); }
.sft-badge--verdict-yes  { background:rgba(80,220,140,.14); color:rgba(100,230,160,.9); border:1px solid rgba(80,210,130,.25); font-size:13px; padding:5px 16px; }
.sft-badge--verdict-no   { background:rgba(220,80,100,.14); color:rgba(235,100,120,.9); border:1px solid rgba(220,80,100,.25); font-size:13px; padding:5px 16px; }
.sft-badge--verdict-wait { background:rgba(220,160,50,.14); color:rgba(230,175,70,.9); border:1px solid rgba(220,160,50,.25); font-size:13px; padding:5px 16px; }

/* Time period cards */
.sft-periods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.sft-period-card {
  background: rgba(18,11,45,.6);
  border: 1px solid rgba(100,75,200,.18);
  border-radius: 16px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.sft-period-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(120,80,255,.7), rgba(80,50,200,.3));
  border-radius: 2px 0 0 2px;
}

.sft-period-label {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(140,120,200,.55);
  margin: 0 0 7px;
  display: flex; align-items: center; gap: 6px;
}
.sft-period-label svg { opacity: .6; }
.sft-period-text { font-size: 14px; line-height: 1.65; color: rgba(210,200,240,.88); margin: 0; }

/* Watch for + Power move */
.sft-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
@media (max-width: 540px) { .sft-highlights { grid-template-columns: 1fr; } }

.sft-highlight-card {
  background: rgba(16,10,40,.65);
  border: 1px solid rgba(100,75,200,.15);
  border-radius: 14px; padding: 16px;
}
.sft-highlight-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(140,120,200,.5); margin: 0 0 8px;
}
.sft-highlight-text { font-size: 13px; line-height: 1.55; color: rgba(200,190,235,.85); margin: 0; }

/* Power move card — slightly more prominent */
.sft-highlight-card--power {
  border-color: rgba(130,90,255,.28);
  background: rgba(22,14,55,.7);
}
.sft-highlight-card--power .sft-highlight-label { color: rgba(160,130,255,.65); }
.sft-highlight-card--power .sft-highlight-text { color: rgba(215,205,250,.92); font-weight: 600; }

/* ── Weekly result extras ── */
.sft-week-overview {
  background: rgba(18,11,45,.6);
  border: 1px solid rgba(100,75,200,.18);
  border-radius: 16px; padding: 20px;
  margin-bottom: 16px;
}
.sft-week-overview-text { font-size: 15px; line-height: 1.65; color: rgba(215,205,245,.88); margin: 0; font-style: italic; }

.sft-avoid-card {
  background: rgba(180,50,60,.07);
  border: 1px solid rgba(180,60,70,.18);
  border-radius: 14px; padding: 16px 18px;
  margin-bottom: 16px;
}
.sft-avoid-label { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(220,110,120,.55); margin: 0 0 7px; }
.sft-avoid-text  { font-size: 13.5px; line-height: 1.6; color: rgba(225,185,190,.85); margin: 0; }

/* ── Decider result ── */
.sft-decider-verdict {
  text-align: center; padding: 32px 0 24px;
}
.sft-decider-headline {
  font-size: 22px; font-weight: 900; letter-spacing: -.02em;
  color: rgba(230,220,255,.96); margin: 14px 0 24px; line-height: 1.25;
}
.sft-decider-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
@media (max-width: 540px) { .sft-decider-paths { grid-template-columns: 1fr; } }

.sft-path-card {
  background: rgba(18,11,45,.6);
  border: 1px solid rgba(100,75,200,.15);
  border-radius: 14px; padding: 16px;
}
.sft-path-card--yes  { border-color: rgba(80,220,140,.2); background: rgba(30,80,50,.2); }
.sft-path-card--no   { border-color: rgba(200,70,90,.2);  background: rgba(70,20,30,.2); }
.sft-path-label { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 8px; }
.sft-path-card--yes .sft-path-label  { color: rgba(100,220,150,.6); }
.sft-path-card--no  .sft-path-label  { color: rgba(220,90,110,.55); }
.sft-path-text  { font-size: 13px; line-height: 1.55; color: rgba(200,190,235,.85); margin: 0; }

.sft-sign-card {
  background: rgba(18,11,45,.6);
  border: 1px solid rgba(180,140,255,.2);
  border-radius: 14px; padding: 16px 18px;
  margin-bottom: 8px;
}
.sft-sign-label { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(180,150,255,.55); margin: 0 0 7px; }
.sft-sign-text  { font-size: 13.5px; line-height: 1.6; color: rgba(210,200,240,.88); margin: 0; font-style: italic; }

/* ── Actions + Disclaimer ── */
.sft-result-actions { text-align: center; padding: 20px 0 12px; }
.sft-new-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 22px;
  background: rgba(100,65,220,.15);
  border: 1px solid rgba(120,85,255,.3);
  border-radius: 10px;
  color: rgba(180,155,255,.85); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .2s;
}
.sft-new-btn:hover { background: rgba(100,65,220,.28); color: rgba(210,190,255,.95); }

.sft-disclaimer {
  font-size: 10.5px; line-height: 1.55;
  color: rgba(130,115,180,.4);
  text-align: center; max-width: 460px; margin: 4px auto 0;
  padding: 0 8px;
}

/* ── Result fade-in animation ── */
.sft-result-inner { animation: sftFadeUp .5s ease-out forwards; }
@keyframes sftFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .sft-root { padding: 0 14px 80px; }
  .sft-title { font-size: 24px; }
  .sft-ball-scene { width: 200px; height: 200px; }
  .sft-ball-scene--lg { width: 230px; height: 230px; }
  .sft-period-card { padding: 14px 16px; }
  .sft-result-title { font-size: 20px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FORTUNE DECIDER — Q&A INLINE MODE (v7.1)
   Questions stack in the same view. No full-page loading transition.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Decider layout: ball top-center, input below, answers stack below that */
.sft-decider-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 0 0;
}

.sft-decider-input-section {
  width: 100%;
  max-width: 480px;
  margin: 0 auto 24px;
}
.sft-decider-input-label {
  text-align: center;
  font-size: 18px; font-weight: 800;
  color: rgba(220,210,255,.95); margin: 0 0 6px;
}
.sft-decider-input-hint {
  text-align: center;
  font-size: 12.5px; color: rgba(155,138,205,.55);
  margin: 0 0 16px;
}
/* Inline ask row */
.sft-ask-row {
  display: flex; gap: 10px; align-items: flex-start;
}
.sft-ask-row .sft-question-input {
  flex: 1; min-height: 52px; padding: 14px 16px;
}
.sft-ask-row .sft-ask-btn {
  flex-shrink: 0; width: auto; padding: 14px 20px;
  align-self: flex-end;
}

/* Q&A answers list */
.sft-qa-list {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Single Q&A card */
.sft-qa-card {
  background: rgba(16,10,42,.65);
  border: 1px solid rgba(100,75,200,.2);
  border-radius: 14px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 12px;
  align-items: center;
  animation: sftQaSlide .3s ease-out forwards;
}
@keyframes sftQaSlide {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sft-qa-question {
  grid-row: 1; grid-column: 1;
  font-size: 13.5px; color: rgba(210,200,245,.85);
  line-height: 1.45;
}
.sft-qa-quick {
  grid-row: 2; grid-column: 1;
  font-size: 12px; color: rgba(160,145,210,.55);
  line-height: 1.4;
}
.sft-qa-right {
  grid-row: 1 / 3; grid-column: 2;
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 6px;
  flex-shrink: 0;
}
.sft-qa-verdict {
  font-size: 12px; font-weight: 800; letter-spacing: .08em;
  padding: 4px 12px; border-radius: 99px; text-transform: uppercase;
}
.sft-qa-verdict--yes  { background:rgba(80,220,140,.14); color:rgba(100,230,160,.9); border:1px solid rgba(80,210,130,.25); }
.sft-qa-verdict--no   { background:rgba(220,80,100,.14); color:rgba(235,100,120,.9); border:1px solid rgba(220,80,100,.25); }
.sft-qa-verdict--wait { background:rgba(220,160,50,.14); color:rgba(230,175,70,.9);  border:1px solid rgba(220,160,50,.25); }

.sft-qa-see-why {
  font-size: 11px; font-weight: 600;
  color: rgba(140,115,210,.6);
  background: none; border: none;
  cursor: pointer; padding: 2px 0;
  transition: color .15s;
  white-space: nowrap;
  -webkit-appearance: none; appearance: none; outline: none;
}
.sft-qa-see-why:hover { color: rgba(175,150,245,.9); }

/* Loading indicator inline */
.sft-qa-loading {
  background: rgba(16,10,42,.45);
  border: 1px dashed rgba(100,75,200,.2);
  border-radius: 14px;
  padding: 14px 20px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: rgba(155,138,205,.5);
}
.sft-qa-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(120,85,255,.2);
  border-top-color: rgba(120,85,255,.7);
  border-radius: 50%;
  animation: sftSpin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes sftSpin { to { transform: rotate(360deg); } }

/* ── EXPLANATION MODAL ── */
.sft-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(5,3,18,.82);
  backdrop-filter: blur(12px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.sft-modal-overlay.sft-phase-hidden { display: none !important; }

.sft-modal {
  background: rgba(16,10,42,.97);
  border: 1px solid rgba(120,85,255,.25);
  border-radius: 20px;
  max-width: 540px; width: 100%;
  max-height: 82vh; overflow-y: auto;
  padding: 28px 28px 32px;
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
  scrollbar-width: thin;
  scrollbar-color: rgba(120,80,220,.4) transparent;
}
.sft-modal::-webkit-scrollbar { width: 4px; }
.sft-modal::-webkit-scrollbar-thumb { background: rgba(120,80,220,.4); border-radius:99px; }

.sft-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px;
  background: rgba(100,75,200,.12);
  border: 1px solid rgba(120,85,255,.2);
  border-radius: 8px; color: rgba(180,160,235,.7);
  font-size: 18px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  -webkit-appearance: none; appearance: none; outline: none;
}
.sft-modal-close:hover { background: rgba(100,75,200,.28); color: rgba(220,205,255,.95); }

.sft-modal-q {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(140,120,200,.5);
  margin: 0 0 10px;
}
.sft-modal-question {
  font-size: 16px; font-weight: 800; color: rgba(225,215,255,.95);
  margin: 0 0 20px; line-height: 1.3;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CRYSTAL BALL IMAGE REPLACEMENT — v7.2
   Real PNG image with animated inner flash colors and outer top aura.
   Old CSS ball rules above are overridden here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Ball scene: sized container ── */
.sft-ball-scene {
  position: relative !important;
  width: 260px !important; height: 260px !important;
  margin: 0 auto 32px !important;
}
.sft-ball-scene--sm { width: 160px !important; height: 160px !important; margin: 0 auto 20px !important; }
.sft-ball-scene--lg { width: 300px !important; height: 300px !important; margin: 0 auto 28px !important; }

/* ── Outer ambient glow behind everything ── */
.sft-outer-glow {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(130,70,255,.35) 0%, transparent 65%);
  filter: blur(22px);
  z-index: 0;
  animation: sftGlowPulse 3.5s ease-in-out infinite;
  pointer-events: none;
}

/* ── Inner flash colors — sit BEHIND the image, visible through glass ── */
.sft-flash {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  filter: blur(18px);
}
/* Flash 1: main purple/violet blob in center of sphere */
.sft-flash-1 {
  width: 60%; height: 52%;
  top: 12%; left: 20%;
  animation: sftFlashColor1 4.5s ease-in-out infinite;
}
/* Flash 2: blue/teal accent, offset slightly */
.sft-flash-2 {
  width: 45%; height: 40%;
  top: 28%; left: 35%;
  animation: sftFlashColor2 5.8s ease-in-out infinite reverse;
}
/* Flash 3: pink/magenta pulse, lower sphere */
.sft-flash-3 {
  width: 38%; height: 32%;
  top: 38%; left: 30%;
  animation: sftFlashColor3 3.8s ease-in-out infinite;
}

/* ── The actual crystal ball image ── */
.sft-ball-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* ── Moving top aura — external glow above and around the ball ── */
.sft-top-aura {
  position: absolute;
  width: 130%; height: 70%;
  top: -25%; left: -15%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 70%, rgba(150,80,255,.22) 0%, rgba(100,50,230,.1) 40%, transparent 70%);
  filter: blur(16px);
  z-index: 3;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: sftAuraDrift 5s ease-in-out infinite;
}

/* ── Floating orbs (keep on top of image) ── */
.sft-ball-scene .sft-orb { z-index: 4; }

/* ── Color cycle keyframes ── */
@keyframes sftFlashColor1 {
  0%   { background: rgba(140,60,240,.55); transform: scale(1)   rotate(0deg); }
  20%  { background: rgba(60,100,255,.45); transform: scale(1.15) rotate(20deg); }
  40%  { background: rgba(200,70,255,.5);  transform: scale(.92) rotate(35deg); }
  60%  { background: rgba(80,170,255,.4);  transform: scale(1.1) rotate(50deg); }
  80%  { background: rgba(255,100,200,.4); transform: scale(.95) rotate(70deg); }
  100% { background: rgba(140,60,240,.55); transform: scale(1)   rotate(0deg); }
}
@keyframes sftFlashColor2 {
  0%   { background: rgba(60,120,255,.45); transform: scale(1); }
  33%  { background: rgba(180,60,255,.5);  transform: scale(1.2); }
  66%  { background: rgba(60,200,220,.35); transform: scale(.88); }
  100% { background: rgba(60,120,255,.45); transform: scale(1); }
}
@keyframes sftFlashColor3 {
  0%   { background: rgba(220,80,180,.4);  transform: scale(1)   translateY(0); }
  50%  { background: rgba(100,60,255,.5);  transform: scale(1.3) translateY(-8px); }
  100% { background: rgba(220,80,180,.4);  transform: scale(1)   translateY(0); }
}

@keyframes sftAuraDrift {
  0%,100% { transform: translateY(0) scaleX(1); opacity: .8; }
  33%     { transform: translateY(-8px) scaleX(1.05); opacity: 1; }
  66%     { transform: translateY(4px) scaleX(.96); opacity: .7; }
}

/* ── THINKING STATE: flash intensity + aura brightness up ── */
.sft-is-thinking .sft-flash-1 { animation-duration: 1.2s !important; filter: blur(14px) !important; }
.sft-is-thinking .sft-flash-2 { animation-duration: 1.6s !important; filter: blur(12px) !important; }
.sft-is-thinking .sft-flash-3 { animation-duration: 1s !important;   filter: blur(10px) !important; }
.sft-is-thinking .sft-outer-glow {
  animation: sftGlowPulse .9s ease-in-out infinite !important;
  background: radial-gradient(circle, rgba(180,90,255,.6) 0%, transparent 65%) !important;
}
.sft-is-thinking .sft-top-aura {
  animation: sftAuraDrift 1.4s ease-in-out infinite !important;
  background: radial-gradient(ellipse at 50% 70%, rgba(200,100,255,.4) 0%, rgba(150,60,255,.2) 40%, transparent 70%) !important;
}

/* ── REVEALING STATE: brief flash ── */
.sft-is-revealing .sft-outer-glow {
  animation: sftRevealFlash .6s ease-out forwards !important;
}
@keyframes sftRevealFlash {
  0%  { opacity: .8; transform: scale(1); }
  40% { opacity: 1;  transform: scale(1.4); background: radial-gradient(circle, rgba(220,140,255,.8) 0%, transparent 65%); }
  100%{ opacity: .7; transform: scale(1); }
}

/* ── Small ball adjustments ── */
.sft-ball-scene--sm .sft-flash   { filter: blur(12px) !important; }
.sft-ball-scene--sm .sft-top-aura { filter: blur(10px) !important; }
.sft-ball-scene--sm .sft-outer-glow { inset: -24px !important; filter: blur(14px) !important; }

/* ── FINAL INPUT BOX FIX — dark on focus, always ── */
/* Override browser's focus/autofill white background */
.sft-question-input,
.sft-question-input:hover,
.sft-question-input:focus,
.sft-question-input:active {
  background-color: rgba(14,8,40,.92) !important;
  color: rgba(220,210,255,.95) !important;
  -webkit-text-fill-color: rgba(220,210,255,.95) !important;
  caret-color: rgba(200,185,255,.9) !important;
}
/* Chrome autofill override */
.sft-question-input:-webkit-autofill,
.sft-question-input:-webkit-autofill:hover,
.sft-question-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(14,8,40,.92) inset !important;
  -webkit-text-fill-color: rgba(220,210,255,.95) !important;
  caret-color: rgba(200,185,255,.9) !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

/* ── Decider disclaimer ── */
.sft-decider-disclaimer {
  font-size: 10.5px; line-height: 1.5;
  color: rgba(130,115,180,.4);
  text-align: center; max-width: 460px;
  margin: 12px auto 0; padding: 0 8px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   RELATIONSHIP COMPATIBILITY — v1.0
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── View container ── */
.staris-main--compat [data-staris-chat-thread],
.staris-main--compat [data-staris-chat-form],
.staris-main--compat [data-staris-chip-row],
.staris-main--compat .staris-main-topbar { display:none !important; }

.staris-main--compat #src-view {
  display: flex !important; flex-direction: column !important;
  flex: 1 1 0 !important; min-height: 0 !important;
  overflow-y: auto !important; overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important; padding: 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(200,100,200,.45) rgba(80,30,130,.1) !important;
}
.staris-main--compat #src-view::-webkit-scrollbar { width:4px; }
.staris-main--compat #src-view::-webkit-scrollbar-track { background:rgba(80,30,130,.1); border-radius:99px; margin:8px 0; }
.staris-main--compat #src-view::-webkit-scrollbar-thumb { background:rgba(200,100,200,.45); border-radius:99px; min-height:40px; }

/* ── Root ── */
.src-root {
  display: block; width: min(820px,100%); margin: 0 auto;
  padding: 0 24px 80px; box-sizing: border-box; position: relative;
}
.src-ambient { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.src-neb { position:absolute; border-radius:50%; filter:blur(90px); opacity:.08; }
.src-neb-1 { width:600px;height:600px;top:-100px;left:-200px; background:radial-gradient(circle,#c040c0,transparent 70%); animation:srcNeb 22s ease-in-out infinite alternate; }
.src-neb-2 { width:500px;height:500px;bottom:0;right:-150px; background:radial-gradient(circle,#4060e0,transparent 70%); animation:srcNeb 28s ease-in-out infinite alternate-reverse; }
@keyframes srcNeb { from{transform:translate(0,0)} to{transform:translate(20px,15px) scale(1.06)} }

.src-phase { position:relative; z-index:2; }
.src-phase-hidden { display:none !important; }

/* ═══════════════════════════════
   INPUT FORM
   ═══════════════════════════════ */
.src-input-header { text-align:center; padding:36px 0 28px; }
.src-title    { font-size:26px; font-weight:900; letter-spacing:-.03em; color:#fff; margin:0 0 8px; }
.src-subtitle { font-size:13.5px; color:rgba(180,160,230,.6); margin:0; }

/* ── Avatars merging animation ── */
.src-avatars {
  display:flex; align-items:center; justify-content:center;
  gap:12px; margin:0 0 28px;
}
.src-avatar {
  position:relative; width:72px; height:72px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(20,12,50,.7); flex-shrink:0;
}
.src-avatar-a { box-shadow:0 0 20px rgba(180,80,200,.4); }
.src-avatar-b { box-shadow:0 0 20px rgba(80,120,220,.4); }
.src-avatar-ring {
  position:absolute; inset:-3px; border-radius:50%;
  border:2px solid transparent;
  background: linear-gradient(rgba(30,15,60,0),rgba(30,15,60,0)) padding-box,
              linear-gradient(135deg, rgba(180,80,200,.6), rgba(80,120,220,.6)) border-box;
  animation: srcRingPulse 3s ease-in-out infinite;
}
.src-avatar-a .src-avatar-ring { background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)) padding-box, linear-gradient(135deg,rgba(200,80,220,.7),rgba(140,60,180,.4)) border-box; }
.src-avatar-b .src-avatar-ring { background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)) padding-box, linear-gradient(135deg,rgba(80,120,240,.7),rgba(60,100,200,.4)) border-box; }
@keyframes srcRingPulse { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.04)} }
.src-avatar-initial { font-size:24px; font-weight:900; color:rgba(220,200,255,.9); z-index:1; }

.src-connector { display:flex; align-items:center; gap:8px; flex:1; max-width:100px; }
.src-connector-line { flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(160,100,255,.4),transparent); }
.src-connector-star { font-size:18px; color:rgba(200,160,255,.8); animation:srcStarPulse 2s ease-in-out infinite; }
@keyframes srcStarPulse { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.2)} }

/* ── Form ── */
.src-form-wrap { max-width:480px; margin:0 auto; }
.src-form { display:flex; flex-direction:column; gap:14px; }
.src-field { display:flex; flex-direction:column; gap:6px; }
.src-field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.src-label { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(160,140,215,.55); }
.src-optional { font-weight:500; text-transform:none; letter-spacing:0; color:rgba(140,120,190,.4); }
.src-input {
  background:rgba(8,4,25,.88); border:1px solid rgba(120,85,220,.2); border-radius:10px;
  color:rgba(220,210,255,.95); font-size:14px; padding:12px 14px;
  transition:border-color .2s, box-shadow .2s; font-family:inherit; width:100%; box-sizing:border-box;
  -webkit-text-fill-color:rgba(220,210,255,.95);
}
.src-input:focus { outline:none; border-color:rgba(180,100,220,.5); box-shadow:0 0 0 3px rgba(140,70,200,.12); }
.src-input::placeholder { color:rgba(140,120,190,.4); }
.src-input[type="date"]::-webkit-calendar-picker-indicator,
.src-input[type="time"]::-webkit-calendar-picker-indicator { filter:invert(1) opacity(.4); cursor:pointer; }
.src-accuracy-note { font-size:11.5px; color:rgba(220,160,80,.7); margin:0; line-height:1.5; }

.src-reveal-btn {
  margin-top:6px; width:100%; padding:15px 24px;
  background:linear-gradient(135deg,#8830c8,#c040c0 50%,#6060e0);
  border:none; border-radius:12px; color:#fff; font-size:15px; font-weight:800;
  cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; gap:8px;
  letter-spacing:-.01em; box-shadow:0 8px 30px rgba(160,60,200,.3);
}
.src-reveal-btn:hover { transform:translateY(-1px); box-shadow:0 12px 40px rgba(160,60,200,.45); }
.src-reveal-btn:disabled { opacity:.5; pointer-events:none; }

/* ═══════════════════════════════
   LOADING — two orbs merging
   ═══════════════════════════════ */
#src-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:70vh; gap:28px; }

.src-merge-animation { position:relative; width:220px; height:140px; display:flex; align-items:center; justify-content:center; }
.src-merge-orb {
  position:absolute; width:80px; height:80px; border-radius:50%;
  filter:blur(2px);
}
.src-merge-orb-a {
  background:radial-gradient(circle,rgba(200,80,220,.9),rgba(120,40,160,.6));
  box-shadow:0 0 30px rgba(200,80,220,.6);
  animation:srcOrbMergeA 3s ease-in-out forwards;
}
.src-merge-orb-b {
  background:radial-gradient(circle,rgba(80,120,240,.9),rgba(40,80,180,.6));
  box-shadow:0 0 30px rgba(80,120,240,.6);
  animation:srcOrbMergeB 3s ease-in-out forwards;
}
.src-merge-flash {
  position:absolute; inset:-20px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,220,255,.8),transparent 60%);
  opacity:0; filter:blur(10px);
  animation:srcMergeFlash 3s ease-in-out forwards;
}
@keyframes srcOrbMergeA {
  0%   { transform:translateX(-80px); opacity:0; }
  15%  { opacity:1; }
  60%  { transform:translateX(-8px); }
  80%  { transform:translateX(0) scale(.95); }
  100% { transform:translateX(0) scale(1); opacity:.8; }
}
@keyframes srcOrbMergeB {
  0%   { transform:translateX(80px); opacity:0; }
  15%  { opacity:1; }
  60%  { transform:translateX(8px); }
  80%  { transform:translateX(0) scale(.95); }
  100% { transform:translateX(0) scale(1); opacity:.8; }
}
@keyframes srcMergeFlash {
  0%,55% { opacity:0; }
  70%    { opacity:1; }
  100%   { opacity:.3; }
}
.src-loading-text {
  font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(190,160,240,.55); animation:srcLoadFade 1.8s ease-in-out infinite;
}
@keyframes srcLoadFade { 0%,100%{opacity:.35} 50%{opacity:1} }

/* ═══════════════════════════════
   RESULTS — HEADER
   ═══════════════════════════════ */
.src-result-header { text-align:center; padding:32px 0 24px; }
.src-result-date   { font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(160,140,220,.45); margin:0 0 12px; }
.src-result-names  { display:flex; align-items:center; justify-content:center; gap:10px; margin:0 0 24px; }
.src-result-name-a,
.src-result-name-b { font-size:22px; font-weight:900; letter-spacing:-.025em; color:#fff; }
.src-result-name-a { color:rgba(220,160,255,.98); }
.src-result-name-b { color:rgba(160,200,255,.98); }
.src-result-name-sep { font-size:20px; color:rgba(200,160,255,.6); }

/* ── Big score ring ── */
.src-score-ring-wrap { position:relative; width:140px; height:140px; margin:0 auto 16px; }
.src-big-ring { width:100%; height:100%; transform:rotate(-90deg); }
.src-ring-track {
  fill:none; stroke:rgba(100,60,180,.2); stroke-width:8;
}
.src-ring-fill {
  fill:none;
  stroke:url(#srcScoreGradient);
  stroke-width:8; stroke-linecap:round;
  stroke-dasharray:377;
  stroke-dashoffset:377;
  transition:stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1);
}
.src-score-center {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.src-score-number { font-size:36px; font-weight:900; letter-spacing:-.04em; color:#fff; line-height:1; }
.src-score-label  { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(200,170,255,.5); }

.src-result-tagline { font-size:15px; line-height:1.65; color:rgba(210,195,250,.8); max-width:480px; margin:0 auto 20px; font-style:italic; }

.src-signs-row {
  display:flex; justify-content:center; gap:16px; flex-wrap:wrap;
  margin:0 0 8px;
}
.src-sign-chip {
  display:flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; color:rgba(180,160,230,.65);
  background:rgba(100,60,180,.1); border:1px solid rgba(100,60,180,.2);
  border-radius:99px; padding:4px 10px;
}
.src-sign-chip em { color:rgba(220,200,255,.85); font-style:normal; }

/* ═══════════════════════════════
   SECTION CARDS
   ═══════════════════════════════ */
.src-sections { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }

.src-section-card {
  background:rgba(16,9,42,.65); border:1px solid rgba(110,70,200,.18);
  border-radius:18px; padding:20px 22px; overflow:hidden; position:relative;
}
.src-section-card::before {
  content:''; position:absolute; left:0;top:0;bottom:0; width:3px;
  border-radius:2px 0 0 2px;
  background:var(--src-section-color, linear-gradient(180deg,rgba(180,80,220,.8),rgba(120,50,180,.3)));
}
.src-section-card.src-s-emotional  { --src-section-color: linear-gradient(180deg,#e080ff,#8040c0 80%); }
.src-section-card.src-s-communication { --src-section-color: linear-gradient(180deg,#80c0ff,#4080d0 80%); }
.src-section-card.src-s-attraction { --src-section-color: linear-gradient(180deg,#ff80a0,#d04060 80%); }
.src-section-card.src-s-longterm   { --src-section-color: linear-gradient(180deg,#80ffb0,#30a060 80%); }
.src-section-card.src-s-triggers   { --src-section-color: linear-gradient(180deg,#ffb060,#c07020 80%); }
.src-section-card.src-s-lesson     { --src-section-color: linear-gradient(180deg,#c0c0ff,#6060c0 80%); }

.src-card-top { display:flex; align-items:center; justify-content:space-between; margin:0 0 14px; }
.src-card-left { flex:1; }
.src-card-category {
  font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(170,145,220,.5); margin:0 0 4px;
}
.src-card-title { font-size:15px; font-weight:800; color:rgba(225,215,255,.95); margin:0; }
.src-card-aspect { font-size:11px; color:rgba(170,145,220,.5); margin:2px 0 0; font-style:italic; }

/* Mini score ring per section */
.src-mini-ring-wrap { position:relative; width:54px; height:54px; flex-shrink:0; }
.src-mini-ring { width:100%; height:100%; transform:rotate(-90deg); }
.src-mini-ring .src-ring-track { stroke-width:5; }
.src-mini-ring .src-ring-fill  { stroke-width:5; stroke-dasharray:141; stroke-dashoffset:141; }
.src-mini-score {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:900; color:rgba(220,205,255,.95);
}

.src-card-text { font-size:13.5px; line-height:1.7; color:rgba(200,190,240,.82); margin:0; }

/* SVG gradient def (injected once) */
.src-defs { position:absolute; width:0; height:0; overflow:hidden; }

/* ═══════════════════════════════
   RELATIONSHIP TIMELINE
   ═══════════════════════════════ */
.src-timeline-wrap {
  background:rgba(12,7,35,.55); border:1px solid rgba(110,70,200,.15);
  border-radius:20px; padding:24px 22px; margin-bottom:16px;
}
.src-timeline-header { margin-bottom:20px; }
.src-tl-title { font-size:17px; font-weight:800; color:rgba(220,205,255,.95); margin:0 0 5px; }
.src-tl-sub   { font-size:12.5px; color:rgba(160,140,215,.55); margin:0; }

.src-timeline-loading { display:flex; align-items:center; gap:10px; color:rgba(160,140,215,.5); font-size:13px; }
.src-tl-spinner { width:16px; height:16px; border:2px solid rgba(160,100,220,.2); border-top-color:rgba(160,100,220,.7); border-radius:50%; animation:srcSpin .7s linear infinite; }
@keyframes srcSpin { to{transform:rotate(360deg)} }

/* Timeline section (week/month) */
.src-tl-section { margin-bottom:22px; }
.src-tl-section:last-child { margin-bottom:0; }
.src-tl-section-title {
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(160,140,215,.5); margin:0 0 10px;
}
.src-tl-overview {
  font-size:13.5px; line-height:1.65; color:rgba(200,185,240,.75);
  font-style:italic; margin:0 0 14px;
}

/* Visual window bar */
.src-tl-bar { display:flex; gap:3px; margin-bottom:14px; border-radius:8px; overflow:hidden; }
.src-tl-bar-seg {
  flex:1; height:8px; border-radius:2px; min-width:8px;
  transition:transform .2s, filter .2s;
}
.src-tl-bar-seg:hover { transform:scaleY(1.6); filter:brightness(1.3); cursor:default; }
.src-tl-bar-seg.DEEPENING     { background:linear-gradient(90deg,#60e080,#40c060); }
.src-tl-bar-seg.TENSION        { background:linear-gradient(90deg,#e06040,#c04020); }
.src-tl-bar-seg.COMMUNICATION  { background:linear-gradient(90deg,#60a0e0,#4080c0); }
.src-tl-bar-seg.ATTRACTION     { background:linear-gradient(90deg,#e080a0,#d04080); }
.src-tl-bar-seg.DEFINING       { background:linear-gradient(90deg,#c0a0ff,#9060e0); }
.src-tl-bar-seg.DISTANCE       { background:linear-gradient(90deg,#808090,#606070); }

/* Window list */
.src-tl-windows { display:flex; flex-direction:column; gap:8px; }
.src-tl-window {
  display:grid; grid-template-columns:auto 1fr; gap:6px 12px; align-items:start;
  padding:12px 14px; border-radius:12px; background:rgba(18,10,45,.6);
  border-left:3px solid transparent;
}
.src-tl-window.DEEPENING    { border-color:#60e080; }
.src-tl-window.TENSION       { border-color:#e06040; }
.src-tl-window.COMMUNICATION { border-color:#60a0e0; }
.src-tl-window.ATTRACTION    { border-color:#e080a0; }
.src-tl-window.DEFINING      { border-color:#c0a0ff; }
.src-tl-window.DISTANCE      { border-color:#808090; }
.src-tl-days { font-size:11px; font-weight:700; color:rgba(180,160,230,.7); white-space:nowrap; margin-top:1px; }
.src-tl-type {
  font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 7px; border-radius:99px; display:inline-block; margin-bottom:3px;
}
.DEEPENING    .src-tl-type { background:rgba(60,200,80,.15); color:rgba(80,220,100,.8); }
.TENSION       .src-tl-type { background:rgba(200,60,40,.15); color:rgba(220,80,60,.8); }
.COMMUNICATION .src-tl-type { background:rgba(60,120,220,.15); color:rgba(80,150,240,.8); }
.ATTRACTION    .src-tl-type { background:rgba(200,80,120,.15); color:rgba(220,100,140,.8); }
.DEFINING      .src-tl-type { background:rgba(160,100,255,.15); color:rgba(190,130,255,.8); }
.DISTANCE      .src-tl-type { background:rgba(100,100,120,.15); color:rgba(160,160,180,.7); }
.src-tl-text { font-size:13px; line-height:1.6; color:rgba(195,180,235,.8); margin:0; grid-column:2; }

.src-tl-peak {
  margin-top:14px; padding:12px 14px;
  background:rgba(160,100,255,.08); border:1px solid rgba(160,100,255,.2); border-radius:12px;
  font-size:13px; line-height:1.55; color:rgba(210,190,255,.85);
}
.src-tl-peak strong { color:rgba(200,160,255,.9); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:4px; }

/* Timeline legend */
.src-tl-legend { display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid rgba(100,70,180,.12); }
.src-tl-legend-item { display:flex; align-items:center; gap:5px; font-size:10px; color:rgba(160,140,210,.5); }
.src-tl-legend-dot { width:8px; height:8px; border-radius:2px; }

/* ═══════════════════════════════
   RESULT ACTIONS
   ═══════════════════════════════ */
.src-result-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; padding:16px 0 12px; }
.src-share-btn {
  display:inline-flex; align-items:center; gap:7px; padding:11px 20px;
  background:linear-gradient(135deg,rgba(160,80,200,.35),rgba(100,60,180,.25));
  border:1px solid rgba(180,100,220,.4); border-radius:10px;
  color:rgba(210,180,255,.9); font-size:13px; font-weight:700;
  cursor:pointer; transition:all .2s;
}
.src-share-btn:hover { background:linear-gradient(135deg,rgba(180,90,220,.5),rgba(120,70,200,.35)); }
.src-ask-btn {
  display:inline-flex; align-items:center; gap:7px; padding:11px 20px;
  background:rgba(60,100,200,.15); border:1px solid rgba(80,120,220,.3);
  border-radius:10px; color:rgba(160,200,255,.85); font-size:13px; font-weight:700;
  cursor:pointer; transition:all .2s;
}
.src-ask-btn:hover { background:rgba(60,100,200,.28); }
.src-new-btn {
  display:inline-flex; align-items:center; gap:6px; padding:11px 18px;
  background:none; border:1px solid rgba(120,90,200,.2);
  border-radius:10px; color:rgba(170,150,220,.55); font-size:12px; font-weight:700;
  cursor:pointer; transition:all .2s;
}
.src-new-btn:hover { color:rgba(200,180,240,.85); border-color:rgba(150,110,220,.4); }

/* Share copied feedback */
.src-share-btn.copied { background:linear-gradient(135deg,rgba(60,200,100,.25),rgba(40,160,80,.2)); border-color:rgba(60,200,100,.4); color:rgba(100,230,140,.9); }

/* ═══════════════════════════════
   SHARED PREVIEW (public)
   ═══════════════════════════════ */
.src-shared-inner { text-align:center; padding:40px 20px; }
.src-shared-title  { font-size:26px; font-weight:900; color:#fff; margin:0 0 8px; }
.src-shared-score  { font-size:52px; font-weight:900; letter-spacing:-.04em; margin:16px 0 4px; background:linear-gradient(135deg,#e080ff,#8080ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.src-shared-tagline { font-size:15px; line-height:1.6; color:rgba(200,185,240,.75); font-style:italic; max-width:420px; margin:0 auto 28px; }
.src-shared-scores { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; max-width:360px; margin:0 auto 32px; }
.src-shared-score-card {
  background:rgba(16,9,42,.7); border:1px solid rgba(110,70,200,.2);
  border-radius:14px; padding:14px; text-align:center;
  filter:blur(0);
}
.src-shared-score-val  { font-size:22px; font-weight:900; color:rgba(220,200,255,.9); }
.src-shared-score-name { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(160,140,210,.5); margin-top:3px; }
.src-shared-cta {
  display:inline-block; padding:15px 32px;
  background:linear-gradient(135deg,#8830c8,#c040c0); border:none; border-radius:14px;
  color:#fff; font-size:16px; font-weight:800; cursor:pointer; text-decoration:none;
  box-shadow:0 10px 35px rgba(160,60,200,.4); transition:all .2s;
}
.src-shared-cta:hover { transform:translateY(-2px); box-shadow:0 14px 45px rgba(160,60,200,.55); }

/* Mobile */
@media (max-width:640px) {
  .src-root { padding:0 14px 80px; }
  .src-title { font-size:22px; }
  .src-field-row { grid-template-columns:1fr; }
  .src-result-name-a, .src-result-name-b { font-size:18px; }
  .src-sections { gap:8px; }
  .src-section-card { padding:16px 16px; }
  .src-tl-legend { gap:8px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   COMPATIBILITY v2 — Premium form, full-width layout, interactive timeline
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Root: wider on desktop ── */
.src-root {
  width: min(1160px, 100%) !important;
  padding: 0 28px 80px !important;
}
@media (max-width:640px) { .src-root { padding:0 14px 80px !important; } }

/* ── 2-column section grid on desktop ── */
.src-sections {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
@media (max-width:760px) {
  .src-sections { grid-template-columns: 1fr !important; }
}

/* ── DARK INPUTS — override browser white background ── */
.src-input,
.src-input:hover,
.src-input:focus,
.src-input:active,
.src-input[type="text"],
.src-input[type="date"],
.src-input[type="time"] {
  background-color: rgba(10,5,30,.92) !important;
  background: rgba(10,5,30,.92) !important;
  color: rgba(220,210,255,.95) !important;
  -webkit-text-fill-color: rgba(220,210,255,.95) !important;
  border-color: rgba(120,80,200,.25) !important;
  color-scheme: dark !important;
  caret-color: rgba(200,180,255,.9) !important;
}
.src-input:focus {
  border-color: rgba(180,100,220,.55) !important;
  box-shadow: 0 0 0 3px rgba(140,70,210,.14) !important;
}
.src-input:-webkit-autofill,
.src-input:-webkit-autofill:hover,
.src-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(10,5,30,.92) inset !important;
  -webkit-text-fill-color: rgba(220,210,255,.95) !important;
}
/* Date/time picker icon */
.src-input[type="date"]::-webkit-calendar-picker-indicator,
.src-input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.5) !important;
  cursor: pointer !important;
}
/* Placeholder */
.src-input::placeholder { color: rgba(140,120,190,.38) !important; }

/* ── PREMIUM FORM REDESIGN ── */
.src-form-wrap {
  max-width: 520px !important;
  margin: 0 auto !important;
  background: rgba(12,6,35,.65) !important;
  border: 1px solid rgba(130,80,220,.18) !important;
  border-radius: 24px !important;
  padding: 32px 32px 28px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03) !important;
  backdrop-filter: blur(20px) !important;
}
@media (max-width:540px) { .src-form-wrap { padding: 22px 18px 20px !important; } }

/* ── Result header: wider, centered ── */
.src-result-header { max-width: 600px; margin: 0 auto; }
.src-result-tagline { max-width: 680px !important; }

/* ── Timeline: full width ── */
.src-timeline-wrap {
  max-width: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   INTERACTIVE TIMELINE GRAPH
   ══════════════════════════════════════════════════════════════════════════ */

.src-tl-graph-container {
  margin-bottom: 20px;
}
.src-tl-graph-label {
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(160,140,215,.5);
  margin: 0 0 10px;
}

/* The track bar */
.src-tl-track {
  display: flex;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  gap: 2px;
  margin-bottom: 8px;
}

.src-tl-track-seg {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: filter .15s, transform .15s;
  cursor: pointer;
  min-width: 28px;
  flex-shrink: 0;
}
.src-tl-track-seg:hover  { filter: brightness(1.25); transform: scaleY(1.08); }
.src-tl-track-seg.active { filter: brightness(1.3);  transform: scaleY(1.12); outline: 2px solid rgba(255,255,255,.4); }
.src-tl-track-seg.DEEPENING    { background: linear-gradient(90deg,#30b860,#50d080); }
.src-tl-track-seg.TENSION       { background: linear-gradient(90deg,#d04030,#f06040); }
.src-tl-track-seg.COMMUNICATION { background: linear-gradient(90deg,#3080d0,#50a0f0); }
.src-tl-track-seg.ATTRACTION    { background: linear-gradient(90deg,#d05080,#f070a0); }
.src-tl-track-seg.DEFINING      { background: linear-gradient(90deg,#8050e0,#c080ff); }
.src-tl-track-seg.DISTANCE      { background: linear-gradient(90deg,#505060,#707080); }

.src-tl-seg-date {
  font-size: 9px; font-weight: 700; color: rgba(255,255,255,.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 6px; pointer-events: none;
}

/* Date axis */
.src-tl-axis {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}
.src-tl-axis-label {
  font-size: 9.5px; color: rgba(160,140,215,.45);
  white-space: nowrap;
}

/* Detail panel — shows on click */
.src-tl-detail {
  background: rgba(16,8,42,.8);
  border: 1px solid rgba(120,80,220,.2);
  border-radius: 14px;
  padding: 16px 18px;
  min-height: 60px;
  transition: all .2s;
  display: none;
}
.src-tl-detail.visible { display: block; animation: srcDetailIn .2s ease-out; }
@keyframes srcDetailIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

.src-tl-detail-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.src-tl-detail-days  { font-size: 11px; font-weight: 700; color: rgba(200,180,250,.7); }
.src-tl-detail-type  { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; }
.src-tl-detail-text  { font-size: 13.5px; line-height: 1.6; color: rgba(200,185,240,.85); margin: 0; }
.src-tl-detail-hint  { font-size: 11px; color: rgba(160,140,210,.45); text-align: center; padding: 16px 0; }

/* Peak callout */
.src-tl-peak-bar {
  display: flex; align-items: center; gap: 10px;
  background: rgba(160,100,255,.1); border: 1px solid rgba(160,100,255,.22);
  border-radius: 10px; padding: 10px 14px; margin-top: 10px;
  font-size: 12.5px; line-height: 1.5; color: rgba(200,180,250,.8);
}
.src-tl-peak-bar::before { content: '✦'; color: rgba(180,130,255,.7); flex-shrink: 0; }

/* Legend */
.src-tl-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(100,70,180,.1);
}
.src-tl-legend-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: rgba(160,140,210,.5); }
.src-tl-legend-swatch { width: 10px; height: 10px; border-radius: 3px; }

/* Mobile timeline */
@media (max-width:600px) {
  .src-tl-track { height: 32px; }
  .src-tl-seg-date { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   COMPATIBILITY v2.1 — Personality profiles + bullet fragments
   ═══════════════════════════════════════════════════════════════════════════ */

/* Profiles grid */
.src-profiles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 1160px;
}
@media (max-width:600px) { .src-profiles-grid { grid-template-columns: 1fr; } }

.src-profile-card {
  background: rgba(14,8,38,.65);
  border: 1px solid rgba(110,70,200,.18);
  border-radius: 16px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.src-profile-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 2px 0 0 2px;
}
.src-profile-a::before { background: linear-gradient(180deg, #e080ff, #8040c0 80%); }
.src-profile-b::before { background: linear-gradient(180deg, #80c0ff, #4080d0 80%); }

.src-profile-name {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; margin: 0 0 12px;
}
.src-profile-a .src-profile-name { color: rgba(220,155,255,.7); }
.src-profile-b .src-profile-name { color: rgba(140,190,255,.7); }

.src-profile-traits {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.src-profile-traits li {
  font-size: 13px; line-height: 1.5; color: rgba(200,188,240,.82);
  padding-left: 14px; position: relative;
}
.src-profile-traits li::before {
  content: '—'; position: absolute; left: 0;
  color: rgba(170,130,255,.5); font-size: 11px;
}

/* Bullet fragments inside section cards */
.src-card-bullets {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 5px;
}
.src-card-bullets li {
  font-size: 13px; line-height: 1.5; color: rgba(200,188,240,.82);
  padding-left: 14px; position: relative;
}
.src-card-bullets li::before {
  content: '—'; position: absolute; left: 0;
  color: rgba(170,130,255,.45); font-size: 11px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   COMPATIBILITY — Premium Profile Cards (v7.7)
   Replaces flat boring cards with immersive character portraits.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Grid */
.src-profiles-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
@media (max-width:600px) { .src-profiles-grid { grid-template-columns: 1fr !important; } }

/* Base card — override the old flat card */
.src-profile-card {
  background: rgba(10,5,30,.92) !important;
  border-radius: 20px !important;
  padding: 26px 24px 24px !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 160px !important;
  /* Remove the old left-border ::before */
}
.src-profile-card::before { display: none !important; }

/* Person A: purple/magenta identity */
.src-profile-a {
  border: 1px solid rgba(200,90,255,.32) !important;
  box-shadow:
    0 0 40px rgba(180,60,220,.12),
    0 0 0 1px rgba(255,255,255,.03),
    inset 0 0 40px rgba(120,40,180,.07) !important;
}

/* Person B: blue/cyan identity */
.src-profile-b {
  border: 1px solid rgba(80,150,255,.3) !important;
  box-shadow:
    0 0 40px rgba(60,120,230,.12),
    0 0 0 1px rgba(255,255,255,.03),
    inset 0 0 40px rgba(40,80,200,.07) !important;
}

/* Large watermark letter in the background */
.src-profile-bg-letter {
  position: absolute !important;
  top: -28px !important;
  right: -8px !important;
  font-size: 180px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 0 !important;
}
.src-profile-a .src-profile-bg-letter { color: rgba(210,90,255,.07) !important; }
.src-profile-b .src-profile-bg-letter { color: rgba(80,150,255,.07) !important; }

/* Glowing orb — top-right corner */
.src-profile-glow {
  position: absolute !important;
  width: 200px !important;
  height: 200px !important;
  top: -70px !important;
  right: -50px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.src-profile-a .src-profile-glow {
  background: radial-gradient(circle, rgba(210,80,255,.22) 0%, transparent 65%) !important;
}
.src-profile-b .src-profile-glow {
  background: radial-gradient(circle, rgba(70,150,255,.2) 0%, transparent 65%) !important;
}

/* Name — larger, more prominent */
.src-profile-name {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  margin: 0 0 16px !important;
  position: relative !important;
  z-index: 1 !important;
}
.src-profile-a .src-profile-name { color: rgba(225,145,255,.9) !important; }
.src-profile-b .src-profile-name { color: rgba(120,185,255,.9) !important; }

/* Trait list */
.src-profile-traits {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  position: relative !important;
  z-index: 1 !important;
}
.src-profile-traits li {
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  color: rgba(208,198,248,.88) !important;
  padding-left: 18px !important;
  position: relative !important;
}
/* Colored dot bullets — distinctive from section card dashes */
.src-profile-traits li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 7px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
}
.src-profile-a .src-profile-traits li::before {
  background: rgba(210,90,255,.7) !important;
  box-shadow: 0 0 5px rgba(210,90,255,.5) !important;
}
.src-profile-b .src-profile-traits li::before {
  background: rgba(80,155,255,.7) !important;
  box-shadow: 0 0 5px rgba(80,155,255,.5) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PLAN LIMIT — UPGRADE MODAL (v7.9)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Upgrade / Paywall Modal ─────────────────────────────────────────── */
.su-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(3,1,14,.92);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: suIn .22s ease;
}
@keyframes suIn { from{opacity:0} to{opacity:1} }
.su-overlay.su-hidden { display: none !important; }
.staris-upgrade-overlay { display: none !important; }

.su2-box {
  background: linear-gradient(155deg,#0f0828 0%,#070420 60%,#040218 100%);
  border: 1px solid rgba(124,58,237,.3);
  border-radius: 24px;
  padding: 0;
  max-width: 820px; width: 100%;
  position: relative;
  box-shadow: 0 60px 140px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03),
              inset 0 1px 0 rgba(255,255,255,.05);
  animation: su2BoxIn .35s cubic-bezier(.22,1,.36,1);
  max-height: 94vh; overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(124,58,237,.35) transparent;
}
.su2-box::-webkit-scrollbar { width: 4px; }
.su2-box::-webkit-scrollbar-track { background: transparent; }
.su2-box::-webkit-scrollbar-thumb { background: rgba(124,58,237,.35); border-radius: 2px; }
.su2-box::-webkit-scrollbar-thumb:hover { background: rgba(124,58,237,.6); }
@keyframes su2BoxIn {
  from{opacity:0;transform:translateY(24px) scale(.96)}
  to{opacity:1;transform:none}
}

/* Cosmic orbs in header */
.su2-box::before {
  content:''; position:absolute; width:300px; height:300px;
  background:radial-gradient(circle,rgba(124,58,237,.18) 0%,transparent 70%);
  top:-80px; left:-60px; border-radius:50%; pointer-events:none; z-index:0;
}
.su2-box::after {
  content:''; position:absolute; width:200px; height:200px;
  background:radial-gradient(circle,rgba(6,182,212,.12) 0%,transparent 70%);
  top:-40px; right:-30px; border-radius:50%; pointer-events:none; z-index:0;
}

.su2-close {
  position: absolute; top: 16px; right: 16px; z-index: 10;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: rgba(167,139,250,.6); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s; line-height: 1; font-family: sans-serif;
}
.su2-close:hover { background: rgba(124,58,237,.3); color: #fff; border-color: rgba(124,58,237,.5); }

/* Header */
.su2-head {
  padding: 32px 32px 24px;
  position: relative; z-index: 1; text-align: center;
}
.su2-limit-icon {
  font-size: 32px; line-height: 1; margin-bottom: 12px; display: block;
}
.su2-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 13px; border-radius: 99px;
  background: rgba(124,58,237,.14); border: 1px solid rgba(124,58,237,.28);
  color: rgba(196,181,253,.8); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px;
}
.su2-title {
  font-size: 26px; font-weight: 900; color: #fff;
  letter-spacing: -.04em; margin: 0 0 10px; line-height: 1.2;
}
.su2-sub {
  font-size: 13.5px; color: rgba(196,181,253,.6); line-height: 1.6; margin: 0;
  max-width: 480px; margin: 0 auto;
}
.su2-trust {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin-top: 16px;
}
.su2-trust span {
  font-size: 11px; color: rgba(167,139,250,.55);
  background: rgba(124,58,237,.07); border: 1px solid rgba(124,58,237,.14);
  border-radius: 99px; padding: 3px 11px; white-space: nowrap;
}

/* Plan cards grid */
.su2-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 20px 20px;
  position: relative; z-index: 1;
}
.su2-plans[data-count="1"] { grid-template-columns: minmax(0,400px); justify-content: center; }
.su2-plans[data-count="2"] { grid-template-columns: repeat(2,1fr); max-width: 600px; margin: 0 auto; }

.su2-plan {
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(124,58,237,.14);
  border-radius: 18px; padding: 20px 18px 18px;
  position: relative; transition: border-color .2s, transform .2s;
  display: flex; flex-direction: column;
}
.su2-plan:hover { border-color: rgba(124,58,237,.35); transform: translateY(-2px); }
.su2-plan-pop {
  background: rgba(124,58,237,.07);
  border-color: rgba(124,58,237,.38);
  padding-top: 28px;
}
.su2-pop-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg,#7c3aed,#a78bfa); color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 14px; border-radius: 99px; white-space: nowrap;
  box-shadow: 0 2px 12px rgba(124,58,237,.45);
}
.su2-plan-name {
  font-size: 17px; font-weight: 900; letter-spacing: -.03em; margin-bottom: 4px;
}
.su2-plan-price {
  font-size: 28px; font-weight: 900; color: #fff;
  letter-spacing: -.05em; margin-bottom: 16px; line-height: 1;
}
.su2-plan-price span { font-size: 12px; font-weight: 400; color: rgba(196,181,253,.4); }
.su2-plan-feats {
  list-style: none; padding: 0; margin: 0 0 18px; flex: 1;
}
.su2-plan-feats li {
  font-size: 12px; color: rgba(210,200,255,.75); padding: 4px 0;
  border-bottom: 1px solid rgba(124,58,237,.08);
  display: flex; align-items: center; gap: 7px; line-height: 1.4;
}
.su2-plan-feats li:last-child { border-bottom: none; }
.su2-plan-feats li::before {
  content: '✓'; font-size: 10px; font-weight: 700; flex-shrink: 0;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.su2-plan-btn {
  width: 100%; padding: 12px 16px; border: none; border-radius: 11px;
  color: #fff; font-size: 13.5px; font-weight: 800; cursor: pointer;
  font-family: inherit; transition: opacity .15s, transform .15s;
  letter-spacing: -.01em; margin-top: auto;
}
.su2-plan-btn:hover { opacity: .88; transform: translateY(-1px); }
.su2-plan-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* Footer */
.su2-foot {
  padding: 4px 24px 22px; text-align: center; position: relative; z-index: 1;
}
.su2-proof {
  font-size: 11.5px; color: rgba(167,139,250,.4);
  font-style: italic; margin-bottom: 14px; line-height: 1.6;
}
.su2-dismiss {
  background: none; border: none; padding: 8px 16px;
  font-size: 12px; color: rgba(124,58,237,.38); cursor: pointer;
  font-family: inherit; transition: color .15s; display: inline-block;
}
.su2-dismiss:hover { color: rgba(167,139,250,.65); }

/* Notify toast (errors only) */
#staris-notify-toast {
  position: fixed; bottom: 82px; left: 50%;
  transform: translateX(-50%);
  width: min(440px,calc(100vw - 24px));
  background: #1c0f2e; border: 1px solid rgba(239,68,68,.4);
  border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.6);
  z-index: 100001; display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  animation: suIn .28s cubic-bezier(.22,1,.36,1) both;
}
#staris-notify-toast .snt-icon { font-size: 17px; flex-shrink: 0; }
#staris-notify-toast .snt-msg  { flex: 1; font-size: 12.5px; color: rgba(255,200,200,.9); line-height: 1.4; }
#staris-notify-toast .snt-close {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,200,200,.6); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Inline chat limit bubble */
.stc-chat-limit { padding: 6px 0 4px; text-align: center; }
.stc-chat-limit-icon { font-size: 24px; margin-bottom: 8px; line-height: 1; display: block; }
.stc-chat-limit-msg { font-size: 13.5px; color: rgba(220,210,255,.85); margin: 0 0 14px; line-height: 1.5; }
.stc-chat-limit-btn {
  display: block; width: 100%; padding: 12px 20px; border-radius: 11px;
  font-size: 13px; font-weight: 700; color: #fff; border: none; cursor: pointer;
  transition: opacity .15s; margin: 0 auto 2px; letter-spacing: -.01em;
}
.stc-chat-limit-btn:hover { opacity: .87; }
.stc-chat-limit-reset { font-size: 11px; color: rgba(167,139,250,.38); margin: 10px 0 0; }

/* Responsive */
@media (max-width: 640px) {
  .su2-box { border-radius: 20px 20px 0 0; max-height: 96vh; }
  .su-overlay { align-items: flex-end; padding: 0; }
  .su2-head { padding: 24px 20px 18px; }
  .su2-title { font-size: 21px; }
  .su2-plans { grid-template-columns: 1fr !important; padding: 0 14px 16px; gap: 8px; }
  .su2-plan { padding: 16px 15px 14px; }
  .su2-plan-pop { padding-top: 26px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PLAN BADGE — sidebar + profile (v7.9.2)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sidebar user area: lay out as flex col so badge sits below name */
.staris-sidebar-user {
  position: relative;
  padding-bottom: 6px;
}
.staris-plan-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 5px;
  white-space: nowrap;
}
.staris-plan-badge--free    { background: rgba(107,114,128,.18); color: rgba(200,195,215,.6); border: 1px solid rgba(107,114,128,.2); }
.staris-plan-badge--starter { background: rgba(139,92,246,.18);  color: rgba(196,170,255,.85); border: 1px solid rgba(139,92,246,.3); }
.staris-plan-badge--basic   { background: rgba(59,130,246,.18);  color: rgba(148,190,255,.85); border: 1px solid rgba(59,130,246,.3); }
.staris-plan-badge--pro     { background: rgba(245,158,11,.18);  color: rgba(255,210,100,.85); border: 1px solid rgba(245,158,11,.3); }

/* ── Profile plan section ── */
.sp-plan-section {
  background: rgba(16,9,42,.65);
  border: 1px solid rgba(110,70,200,.2);
  border-radius: 16px;
  padding: 18px 18px;
  margin-bottom: 16px;
}
.sp-current-plan {}
.sp-plan-top {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.sp-plan-name {
  font-size: 16px; font-weight: 900; color: rgba(220,205,255,.97); letter-spacing: -.02em;
}
.sp-plan-price {
  font-size: 13px; font-weight: 700; color: rgba(170,145,220,.6);
}
.sp-plan-features {
  list-style: none; padding: 0; margin: 0 0 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.sp-plan-features li {
  font-size: 12.5px; color: rgba(195,180,240,.75);
  padding-left: 16px; position: relative; line-height: 1.4;
}
.sp-plan-features li::before {
  content: '✓'; position: absolute; left: 0;
  color: rgba(140,200,140,.65); font-size: 11px; font-weight: 700;
}
.sp-upgrade-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding-top: 14px; border-top: 1px solid rgba(100,70,180,.15);
}
.sp-upgrade-hint {
  font-size: 12px; color: rgba(170,148,220,.55); margin: 0; flex: 1 1 100%;
}
.sp-upgrade-btn {
  padding: 9px 18px;
  background: linear-gradient(135deg, rgba(120,50,210,.9), rgba(180,60,180,.9));
  border: none; border-radius: 10px; color: #fff;
  font-size: 13px; font-weight: 800; cursor: pointer;
  transition: all .18s; letter-spacing: -.01em;
  box-shadow: 0 4px 18px rgba(130,50,200,.3);
}
.sp-upgrade-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(130,50,200,.45); }
.sp-upgrade-btn--secondary {
  background: rgba(60,100,200,.25);
  border: 1px solid rgba(80,120,220,.3);
  box-shadow: none; color: rgba(160,195,255,.9);
}
.sp-upgrade-btn--secondary:hover { background: rgba(60,100,200,.4); box-shadow: none; }
.sp-plan-top-label {
  font-size: 12px; color: rgba(200,185,255,.55); margin: 8px 0 0; font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORTUNE TELLER — Dynamic sparkly background (v7.9.2)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Star particle system injected by JS */
.sft-star { position: absolute; border-radius: 50%; pointer-events: none; animation: sftStarTwinkle var(--dur, 3s) ease-in-out infinite var(--delay, 0s); z-index: 0; }
@keyframes sftStarTwinkle {
  0%,100% { opacity: var(--min-op, .15); transform: scale(1); }
  50%      { opacity: var(--max-op, .8);  transform: scale(1.3); }
}

/* Shooting star */
.sft-shoot { position: absolute; height: 1px; width: 60px; pointer-events: none; z-index: 0;
  background: linear-gradient(90deg, rgba(200,170,255,.8), transparent);
  animation: sftShoot var(--dur, 4s) ease-in-out infinite var(--delay, 0s);
  transform-origin: left center;
}
@keyframes sftShoot {
  0%   { opacity: 0; transform: translateX(0) rotate(var(--ang, -30deg)) scaleX(0); }
  10%  { opacity: 1; transform: translateX(10px) rotate(var(--ang, -30deg)) scaleX(1); }
  40%  { opacity: 0; transform: translateX(80px) rotate(var(--ang, -30deg)) scaleX(0); }
  100% { opacity: 0; transform: translateX(80px) rotate(var(--ang, -30deg)) scaleX(0); }
}

/* Floating orb sparkles */
.sft-sparkle { position: absolute; pointer-events: none; z-index: 0; animation: sftSparklePop var(--dur, 5s) ease-in-out infinite var(--delay, 0s); }
.sft-sparkle::before, .sft-sparkle::after {
  content: '✦'; position: absolute;
  font-size: var(--sz, 12px);
  color: rgba(200,165,255,var(--op, .4));
  animation: sftSparkleRot var(--rdur, 8s) linear infinite;
}
.sft-sparkle::after { animation-direction: reverse; font-size: calc(var(--sz, 12px) * .6); top: 8px; left: 8px; }
@keyframes sftSparklePop {
  0%,100% { opacity: 0; transform: translateY(0) scale(.8); }
  30%,70% { opacity: 1; transform: translateY(-12px) scale(1); }
}
@keyframes sftSparkleRot { to { transform: rotate(360deg); } }

/* Ensure the root has position for absolute children */
.sft-root { position: relative; }

/* ═══════════════════════════════════════════════════════════════════════
   STARIS v9.3 — UX POLISH PASS
   ═══════════════════════════════════════════════════════════════════════ */

/* ── SIDEBAR USER — premium one-line layout ───────────────────────────── */
.staris-sidebar-user {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 10px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(120,90,255,.12) !important;
  border-radius: 14px !important;
  margin-bottom: 18px !important;
  flex-wrap: nowrap !important;
}
.staris-user-avatar {
  width: 38px !important; height: 38px !important;
  border-radius: 50% !important; flex-shrink: 0 !important;
  object-fit: cover !important;
  border: 2px solid rgba(120,90,255,.3) !important;
}
.staris-sidebar-user > div {
  flex: 1 !important; min-width: 0 !important;
  overflow: hidden !important;
}
.staris-sidebar-user strong {
  display: block !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #eef2ff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}
.staris-inline-link, button.staris-inline-link {
  font-size: 11px !important;
  color: rgba(160,140,230,.6) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  display: block !important;
  text-align: left !important;
  font-family: inherit !important;
}
.staris-inline-link:hover { color: var(--staris-accent, #a78bfa) !important; }
.staris-plan-badge {
  flex-shrink: 0 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 99px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.staris-plan-badge--pro {
  background: linear-gradient(135deg,#7c3aed,#a78bfa) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(124,58,237,.4) !important;
}
.staris-plan-badge--free { background: rgba(255,255,255,.08) !important; color: rgba(200,195,255,.6) !important; }
.staris-plan-badge--starter { background: rgba(80,180,100,.15) !important; color: rgba(120,220,140,.8) !important; }
.staris-plan-badge--basic { background: rgba(60,140,220,.15) !important; color: rgba(100,180,255,.8) !important; }

/* ── SEND BUTTON — proper icon ───────────────────────────────────────── */
.staris-send-btn {
  background: linear-gradient(135deg,#6d45ff,#9d59f8) !important;
  border: none !important;
  border-radius: 16px !important;
  color: transparent !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 20px rgba(109,69,255,.4) !important;
  transition: transform .15s, box-shadow .15s !important;
  position: relative !important;
  overflow: hidden !important;
}
.staris-send-btn::before { content: none !important; }
.staris-send-btn::after {
  content: '' !important;
  display: block !important;
  width: 22px !important; height: 22px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E") center/contain no-repeat !important;
  flex-shrink: 0 !important;
}
.staris-send-btn:hover { transform: scale(1.06) !important; box-shadow: 0 6px 28px rgba(109,69,255,.55) !important; }
.staris-send-btn:active { transform: scale(.96) !important; }

/* ── FORTUNE TELLER FIXES ────────────────────────────────────────────── */
/* Full width, no left-edge line artifact */
.sft-root {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 28px 80px !important;
  overflow: hidden !important;
}
/* Remove shooting stars entirely */
.sft-shoot { display: none !important; }

/* Stars: reposition to be under/around the orb, darker */
.sft-star {
  opacity: 0 !important; /* JS places them — we override positioning in JS  */
}

/* Ambient glow contained, no horizontal overflow */
.sft-ambient { overflow: hidden !important; }
.sft-neb-1 { left: -50px !important; opacity: .07 !important; }
.sft-neb-2 { right: -50px !important; opacity: .07 !important; }

/* Ball scene — ensure it doesn't create overflow line */
.sft-ball-scene { overflow: visible !important; position: relative !important; z-index: 1 !important; }
.sft-ball-ambient-glow { clip-path: none !important; }

/* ── TAROT MOBILE — scrollable row, no overflow ──────────────────────── */
@media (max-width: 700px) {
  .stc-fan-wrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 0 24px !important;
    scrollbar-width: none !important;
  }
  .stc-fan-wrap::-webkit-scrollbar { display: none !important; }
  .stc-fan {
    height: 150px !important;
    min-width: min-content !important;
    overflow: visible !important;
    margin: 0 auto !important;
  }
  /* Prevent fan from blowing out the page */
  .stc-view, #stc-view {
    overflow-x: hidden !important;
  }
  /* Slot cards bigger on mobile */
  .stc-slot { width: 80px !important; height: 125px !important; }
  .stc-slots { gap: 16px !important; padding: 0 20px !important; }
}

/* ── HIDE SCROLLBARS ON MOBILE (iOS-style) ───────────────────────────── */
@media (max-width: 980px) {
  .staris-main::-webkit-scrollbar,
  .staris-chat-thread::-webkit-scrollbar,
  .staris-view::-webkit-scrollbar { display: none !important; }
  .staris-main, .staris-chat-thread, .staris-view {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
}

/* ── MOBILE PROFILE ACCESS — avatar in topbar ────────────────────────── */
@media (max-width: 980px) {
  .staris-main-topbar {
    position: relative !important;
  }
  .staris-mobile-profile-btn {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 2px solid rgba(120,90,255,.35) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    background: rgba(120,90,255,.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(190,175,255,.8) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    z-index: 10 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 10px rgba(120,90,255,.2) !important;
  }
  .staris-mobile-profile-btn:hover { border-color: rgba(150,110,255,.6) !important; }
  .staris-mobile-profile-btn img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
  }
}

/* ═══ v9.3 BUGFIXES ════════════════════════════════════════════════════ */

/* ── Profile avatar: DESKTOP HIDDEN, mobile only ─────────────────────── */
.staris-mobile-profile-btn { display: none !important; }
@media (max-width: 980px) {
  .staris-mobile-profile-btn {
    display: flex !important;
    background: none !important;
    padding: 0 !important;
    border: 2px solid rgba(120,90,255,.35) !important;
    border-radius: 50% !important;
    width: 34px !important; height: 34px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: rgba(190,175,255,.8) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }
  .staris-mobile-profile-btn img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; border-radius: 50% !important;
  }
}

/* ── Fortune teller — restore scroll, fix stars visibility ───────────── */
.sft-root {
  overflow-x: hidden !important;
  overflow-y: auto !important;  /* restored — was 'hidden' which broke scroll */
}
/* Remove the opacity:0 override that was hiding all stars */
.sft-star { opacity: unset !important; }

/* Stars z-index — ensure they sit BEHIND the orb scene */
.sft-star, .sft-sparkle {
  z-index: 0 !important;
  pointer-events: none !important;
}
/* Ball scene explicitly above stars */
.sft-ball-scene { z-index: 2 !important; position: relative !important; }
.sft-phase { z-index: 2 !important; }
.sft-ambient { z-index: 1 !important; }

/* ── Scrollbars: hidden by default, styled when .is-scrolling ─────────── */
@media (max-width: 980px) {
  .staris-chat-thread,
  .staris-view,
  .stc-fan-wrap { scrollbar-width: none !important; -ms-overflow-style: none !important; }
  .staris-chat-thread::-webkit-scrollbar,
  .staris-view::-webkit-scrollbar,
  .stc-fan-wrap::-webkit-scrollbar { display: none !important; }

  /* Thin bar fades in when .is-scrolling is added by JS */
  .staris-chat-thread.is-scrolling,
  .staris-view.is-scrolling { scrollbar-width: thin !important; scrollbar-color: rgba(120,90,255,.35) transparent !important; }
  .staris-chat-thread.is-scrolling::-webkit-scrollbar,
  .staris-view.is-scrolling::-webkit-scrollbar { display: block !important; width: 3px !important; }
  .staris-chat-thread.is-scrolling::-webkit-scrollbar-thumb,
  .staris-view.is-scrolling::-webkit-scrollbar-thumb { background: rgba(120,90,255,.35) !important; border-radius: 99px !important; }
}

/* ═══ TAROT CARD IMAGES v9.5 ═══════════════════════════════════════════ */

/* Slot — show artwork image filling the slot */
.stc-slot-card {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  border-radius: 7px !important;
}
.stc-slot.is-filled {
  padding: 0 !important;
  overflow: hidden !important;
}

/* Result card front — image fills entire face, no padding */
.stc-rc-front {
  padding: 0 !important;
  overflow: hidden !important;
}
.stc-rc-front img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

/* Remove the old glyph/num/name styles since we now use images */
.stc-rc-front-glyph,
.stc-rc-front-num,
.stc-rc-front-name { display: none !important; }

/* ═══ TAROT IMAGE FIXES v9.5b ══════════════════════════════════════════ */

/* ── Fix 1: slot MUST be position:relative or abs child fills the page ── */
.stc-slot {
  position: relative !important;
  overflow: hidden !important;
}

/* ── Fix 2: slot card fills slot, doesn't escape it ─────────────────── */
.stc-slot-card {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 7px !important;
  background: #0b0420 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important; /* hide any leftover text */
}
.stc-slot-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* full card visible, no crop */
  display: block !important;
  border-radius: 6px !important;
}

/* Hide slot number/position labels once a card fills the slot */
.stc-slot.is-filled .stc-slot-num,
.stc-slot.is-filled .stc-slot-pos { display: none !important; }
.stc-slot.is-filled { background: #0b0420 !important; padding: 0 !important; }

/* ── Fix 3: result card back — full image, no crop ───────────────────── */
.stc-rc-back {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: #0b0420 !important;
}

/* ── Fix 4: result card front — full artwork, no crop ────────────────── */
.stc-rc-front {
  padding: 0 !important;
  overflow: hidden !important;
  background: #0b0420 !important;
}
.stc-rc-front img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* show full card artwork */
  display: block !important;
  border-radius: 10px !important;
}

/* ── Fix 5: fan cards — back image full, no crop ─────────────────────── */
.stc-fan-card {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: #0b0420 !important;
}

/* ── Deck stack cards (intro screen) — same treatment ───────────────── */
.stc-deck-card {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: #0b0420 !important;
}

/* ── Instant-load skeleton pulse ─────────────────────────────────────── */
/* Shown on sidebar widgets while the report is generating in background  */
@keyframes staris-pulse {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.7;  }
}

.sw-score-num:empty,
.sw-score-num:not(:empty) {
  /* always reserve height so layout doesn't jump */
  min-width: 2ch;
  display: inline-block;
}

#sw-score-num[data-loading],
#sw-score-grade[data-loading],
#sw-score-desc[data-loading],
#sw-moon-phase[data-loading],
#sw-moon-sign[data-loading],
#sw-moon-illum[data-loading],
.sw-lane-bar[data-loading],
.sw-lane-num[data-loading] {
  color: transparent !important;
  background: rgba(160,130,255,0.18);
  border-radius: 4px;
  animation: staris-pulse 1.4s ease-in-out infinite;
  pointer-events: none;
  min-width: 3ch;
  display: inline-block;
}

/* ── Fortune teller: inner crystal canvas particles ── */
.sft-inner-canvas {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  opacity: 0.65;
  mix-blend-mode: screen;
}
/* Hide old orb elements if any remain */
.sft-orb { display: none !important; }

/* ══ v10.8: Unified scrollbar across all feature views ══════════════════ */
.staris-view {
  scrollbar-width: thin;
  scrollbar-color: rgba(124,58,237,.28) transparent;
}
.staris-view::-webkit-scrollbar { width: 4px; }
.staris-view::-webkit-scrollbar-track { background: transparent; }
.staris-view::-webkit-scrollbar-thumb { background: rgba(124,58,237,.28); border-radius: 99px; }
.staris-view::-webkit-scrollbar-thumb:hover { background: rgba(124,58,237,.5); }

/* ══ House cards: always visible desc ═══════════════════════════════════ */
.snc-h-desc { font-size: 12.5px; color: rgba(210,198,255,.72); line-height: 1.65; margin-top: 5px; }
.snc-house-card { cursor: default; }

/* ══ Planet cards ════════════════════════════════════════════════════════ */
.snc-pc-means { font-size: 12px; color: rgba(196,181,255,.65); line-height: 1.5; margin-top: 6px; font-style: italic; }
.snc-pc-house { font-size: 11px; color: rgba(167,139,250,.7); font-weight: 600; margin-top: 4px; }

/* ══ Element & modality grid ════════════════════════════════════════════ */
.snc-elem-group { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.snc-elem-row { display: flex; align-items: center; gap: 10px; }
.snc-elem-name { font-size: 12px; font-weight: 700; width: 46px; flex-shrink: 0; }
.snc-elem-bar-track { flex: 1; height: 8px; background: rgba(120,80,255,.1); border-radius: 4px; overflow: hidden; max-width: 180px; }
.snc-elem-bar { height: 100%; border-radius: 4px; border: 1px solid; transition: width .8s cubic-bezier(.4,0,.15,1); }
.snc-elem-count { font-size: 13px; font-weight: 700; color: rgba(210,200,255,.8); width: 18px; text-align: center; flex-shrink: 0; }
.snc-elem-desc  { font-size: 12px; color: rgba(180,165,255,.55); flex: 1; }
.snc-modal-group { display: flex; gap: 10px; flex-wrap: wrap; }
.snc-modal-chip { display: flex; flex-direction: column; gap: 3px; background: rgba(120,80,255,.07); border: 1px solid rgba(120,80,255,.15); border-radius: 10px; padding: 10px 14px; flex: 1; min-width: 120px; }
.snc-modal-name  { font-size: 12px; font-weight: 700; color: rgba(200,185,255,.85); }
.snc-modal-count { font-size: 20px; font-weight: 800; color: #d4c8ff; line-height: 1; }
.snc-modal-desc  { font-size: 11px; color: rgba(180,165,255,.55); }

/* ══ Karmic section ═════════════════════════════════════════════════════ */
.snc-karmic-card {
  background: rgba(80,40,180,.08); border: 1px solid rgba(120,80,255,.18);
  border-radius: 14px; padding: 18px 20px; margin-bottom: 12px;
}
.snc-karmic-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(167,139,250,.75); margin-bottom: 10px; display: block;
}
.snc-karmic-nn { border-color: rgba(100,200,150,.2); background: rgba(60,140,100,.06); }
.snc-karmic-nn .snc-karmic-badge { color: rgba(120,220,160,.7); }
.snc-karmic-lilith { border-color: rgba(200,80,160,.2); background: rgba(140,40,100,.06); }
.snc-karmic-lilith .snc-karmic-badge { color: rgba(220,120,180,.7); }
.snc-karmic-text { font-size: 14px; color: rgba(224,214,255,.9); line-height: 1.75; margin: 0; }

/* ══ Calculated from ════════════════════════════════════════════════════ */
.snc-calc-from { padding: 14px 0; border-top: 1px solid rgba(120,80,255,.1); margin: 0 0 20px; }
.snc-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 11.5px; color: rgba(167,139,250,.45); }
.snc-meta-icon  { font-size: 13px; opacity: .6; }
.snc-meta-label { font-weight: 700; color: rgba(167,139,250,.55); }
.snc-meta-val   { color: rgba(196,181,255,.6); }
.snc-meta-engine, .snc-meta-date { color: rgba(167,139,250,.35); }

/* ══ Path reading larger ════════════════════════════════════════════════ */
.snc-path-reading { font-size: 13.5px; color: rgba(220,210,255,.88); line-height: 1.65; margin: 0; }

/* ══ Bottom plain-English summary ══════════════════════════════════════ */
.snc-summary-section {
  background: rgba(80,40,180,.07);
  border: 1px solid rgba(120,80,255,.16);
  border-radius: 18px;
  padding: 24px 28px;
  margin: 0 0 24px;
}
.snc-summary-label {
  font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(167,139,250,.55); margin-bottom: 12px; display: block;
}
.snc-summary-text {
  font-size: 15px; color: rgba(228,218,255,.92); line-height: 1.85; margin: 0;
}
@media(max-width:640px) {
  .snc-summary-section { padding: 18px 16px; }
  .snc-summary-text { font-size: 14px; }
}
.snc-pc-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.snc-pc-chevron { display: none; }
.snc-planet-card {
  cursor: default;
  transition: transform .18s, box-shadow .18s;
}
.snc-planet-card:hover { transform: translateY(-2px); }
.snc-pc-expanded {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(124,58,237,.12);
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(220,210,255,.88);
}

/* ══ Plan tab — premium design ════════════════════════════════════════════ */
.sp-payment-failed-banner {
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.22);
  border-radius: 10px; padding: 10px 14px; font-size: 12.5px; color: #fca5a5;
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
}
.sp-pfail-btn {
  background: none; border: none; color: #fca5a5; font-size: 12.5px;
  font-weight: 700; cursor: pointer; text-decoration: underline; flex-shrink: 0;
}
/* Current plan card */
.sp-current-plan-card {
  background: linear-gradient(135deg, rgba(124,58,237,.1) 0%, rgba(124,58,237,.04) 100%);
  border: 1px solid rgba(124,58,237,.25);
  border-radius: 16px; padding: 18px 18px 16px; margin-bottom: 20px;
  position: relative; overflow: hidden;
}
.sp-current-plan-card::before {
  content: ''; position: absolute; top: -30px; right: -30px;
  width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.12), transparent 70%);
  pointer-events: none;
}
.sp-cp-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(124,58,237,.6); margin-bottom: 8px;
}
.sp-cp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 14px; border-radius: 99px;
  font-size: 12px; font-weight: 800; letter-spacing: -.01em;
  border: 1px solid; margin-bottom: 6px;
}
.sp-cp-price {
  font-size: 26px; font-weight: 900; color: #fff; letter-spacing: -.05em;
  margin-bottom: 12px; line-height: 1;
}
.sp-cp-price span { font-size: 13px; font-weight: 400; color: rgba(196,181,253,.45); }
.sp-cp-feats { list-style: none; padding: 0; margin: 0; }
.sp-cp-feats li {
  font-size: 12.5px; color: rgba(196,181,253,.65); padding: 3px 0;
  display: flex; align-items: center; gap: 7px;
}
.sp-cp-feats li::before {
  content: '✓'; color: rgba(167,139,250,.6); font-size: 11px; flex-shrink: 0;
}

/* Upgrade section header */
.sp-upgrade-plans { display: flex; flex-direction: column; gap: 10px; }
.sp-up-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.sp-up-header-label {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(124,58,237,.5); flex: 1;
}
.sp-up-header-trust {
  font-size: 10.5px; color: rgba(167,139,250,.35);
}

/* Plan upgrade cards */
.sp-up-card {
  background: rgba(8,4,22,.6); border: 1px solid rgba(124,58,237,.13);
  border-radius: 16px; padding: 16px 16px 14px; position: relative;
  transition: border-color .2s, box-shadow .2s; cursor: default;
}
.sp-up-card:hover {
  border-color: rgba(124,58,237,.3);
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.sp-up-popular {
  border-color: rgba(124,58,237,.32);
  background: rgba(124,58,237,.07);
  padding-top: 22px;
}
.sp-up-popular-badge {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg,#7c3aed,#a78bfa); color: #fff;
  font-size: 9px; font-weight: 800; padding: 3px 14px; border-radius: 99px;
  white-space: nowrap; letter-spacing: .07em; text-transform: uppercase;
}
.sp-up-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 12px; gap: 10px;
}
.sp-up-name {
  font-size: 15px; font-weight: 900; letter-spacing: -.03em; margin-bottom: 2px;
}
.sp-up-price {
  font-size: 20px; font-weight: 900; color: #fff; letter-spacing: -.04em; line-height: 1;
}
.sp-up-price span { font-size: 12px; font-weight: 400; color: rgba(196,181,253,.4); }
.sp-up-btn {
  padding: 10px 18px; border: none; border-radius: 10px; color: #fff;
  font-size: 13px; font-weight: 800; cursor: pointer; font-family: inherit;
  transition: all .18s; flex-shrink: 0; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.sp-up-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.sp-up-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.sp-up-feats {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.sp-up-feats li {
  font-size: 12px; color: rgba(196,181,253,.55);
  display: flex; align-items: center; gap: 6px;
}
.sp-up-feats li::before {
  content: '✓'; color: rgba(167,139,250,.45); font-size: 10px; flex-shrink: 0;
}

/* Trust strip */
.sp-plan-trust {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 8px;
}
.sp-plan-trust span {
  font-size: 10.5px; color: rgba(167,139,250,.4);
  background: rgba(124,58,237,.06); border: 1px solid rgba(124,58,237,.12);
  border-radius: 99px; padding: 3px 10px;
}

.sp-pro-top-msg {
  text-align: center; padding: 32px 16px; font-size: 16px;
  font-weight: 800; color: rgba(167,139,250,.8); line-height: 1.5;
  letter-spacing: -.02em;
}
.sp-pro-top-msg small { display: block; font-size: 12px; color: rgba(167,139,250,.4); font-weight: 400; margin-top: 6px; }

/* ══ Plan tab v2 — premium redesign ═══════════════════════════════════════ */
.sp-current-plan-card {
  background: linear-gradient(135deg, rgba(124,58,237,.1), rgba(124,58,237,.04));
  border: 1px solid rgba(124,58,237,.22);
  border-radius: 16px; padding: 18px; margin-bottom: 18px;
  box-shadow: 0 0 40px var(--plan-glow, rgba(124,58,237,.12));
  position: relative; overflow: hidden;
}
.sp-current-plan-card::after {
  content:''; position:absolute; top:-40px; right:-40px;
  width:120px; height:120px; border-radius:50%;
  background: radial-gradient(circle, var(--plan-glow, rgba(124,58,237,.1)), transparent 70%);
  pointer-events:none;
}
.sp-cp-label { font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(124,58,237,.5);margin-bottom:10px; }
.sp-cp-row { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;gap:10px; }
.sp-cp-badge { display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;font-size:12px;font-weight:800;border:1px solid;margin-bottom:4px; }
.sp-cp-sublabel { font-size:11px;color:rgba(196,181,253,.4); }
.sp-cp-price { font-size:24px;font-weight:900;color:#fff;letter-spacing:-.05em;line-height:1;text-align:right; }
.sp-cp-price span { font-size:12px;font-weight:400;color:rgba(196,181,253,.4); }
.sp-cp-feats { list-style:none;padding:0;margin:0; }
.sp-cp-feats li { font-size:12.5px;color:rgba(196,181,253,.6);padding:2.5px 0;display:flex;align-items:center;gap:6px; }
.sp-cp-feats li::before { content:'✓';color:rgba(124,58,237,.5);font-size:10px;flex-shrink:0; }

/* Upgrade section */
.sp-upgrade-section { display:flex;flex-direction:column;gap:10px; }
.sp-upgrade-hdr { display:flex;align-items:center;justify-content:space-between;margin-bottom:4px; }
.sp-upgrade-hdr-title { font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(124,58,237,.5); }
.sp-upgrade-hdr-note { font-size:10.5px;color:rgba(167,139,250,.35); }

.sp-up-card {
  background: rgba(8,4,22,.7); border: 1px solid rgba(124,58,237,.12);
  border-radius: 16px; padding: 16px; position: relative;
  transition: border-color .2s, box-shadow .2s;
}
.sp-up-card:hover {
  border-color: var(--plan-color, rgba(124,58,237,.4));
  box-shadow: 0 8px 40px var(--plan-glow, rgba(124,58,237,.1));
}
.sp-up-popular { border-color: rgba(6,182,212,.3); padding-top:22px; background: rgba(6,182,212,.05); }
.sp-up-badge {
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  color:#fff;font-size:9px;font-weight:800;padding:3px 14px;border-radius:99px;
  white-space:nowrap;letter-spacing:.07em;text-transform:uppercase;
}
.sp-up-top { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;gap:8px; }
.sp-up-name { font-size:16px;font-weight:900;letter-spacing:-.03em;margin-bottom:2px; }
.sp-up-sublabel { font-size:10.5px;color:rgba(196,181,253,.4); }
.sp-up-price-col { text-align:right;flex-shrink:0; }
.sp-up-price { font-size:20px;font-weight:900;color:#fff;letter-spacing:-.04em;line-height:1; }
.sp-up-price span { font-size:11px;font-weight:400;color:rgba(196,181,253,.4); }
.sp-up-feats { list-style:none;padding:0;margin:0 0 14px; }
.sp-up-feats li { font-size:12px;color:rgba(196,181,253,.55);padding:2px 0;display:flex;align-items:center;gap:6px; }
.sp-up-feats li::before { content:'✓';color:rgba(124,58,237,.45);font-size:10px;flex-shrink:0; }
.sp-up-btn {
  width:100%;padding:11px;border:none;border-radius:11px;color:#fff;
  font-size:13.5px;font-weight:800;cursor:pointer;font-family:inherit;
  transition:all .18s;letter-spacing:-.01em;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.sp-up-btn:hover { transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.35); }
.sp-up-btn:disabled { opacity:.45;cursor:not-allowed;transform:none; }

/* Trust strip */
.sp-plan-trust { display:flex;flex-wrap:wrap;gap:8px;margin-top:4px; }
.sp-trust-item { font-size:11px;color:rgba(167,139,250,.4);background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.1);border-radius:99px;padding:4px 10px; }

/* Oracle card */
.sp-oracle-card {
  text-align:center;padding:32px 20px;
  background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(245,158,11,.02));
  border:1px solid rgba(245,158,11,.2);border-radius:16px;
}
.sp-oracle-icon { font-size:32px;margin-bottom:10px;color:#f59e0b; }
.sp-oracle-title { font-size:20px;font-weight:900;color:#fff;letter-spacing:-.04em;margin-bottom:6px; }
.sp-oracle-sub { font-size:13px;color:rgba(196,181,253,.5);line-height:1.6; }

/* ── Mobile tarot fan: grid layout ─────────────────────────────────────── */
@media (max-width: 640px) {
  .stc-fan {
    height: auto !important;
    min-height: 240px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    position: relative !important;
    overflow: visible !important;
    gap: 10px !important;
    padding: 4px 8px 16px !important;
  }
  .stc-fan-card--grid {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 64px !important;
    height: 100px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }
  .stc-fan-card--grid:hover {
    transform: translateY(-8px) scale(1.06) !important;
  }
  .stc-fan-card--grid.is-selected {
    transform: scale(0.95) !important;
    opacity: 0.45 !important;
  }
  .stc-fan-wrap {
    padding: 8px 0 8px !important;
    overflow: visible !important;
  }
  /* Center loading cards vertically on mobile */
  #stc-loading {
    min-height: 100% !important;
    justify-content: center !important;
  }
}

/* ══ Email verification status (profile Account tab) ═══════════════════ */
.sp-verify-status {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 12px; margin-bottom: 4px;
}
.sp-verify-status--ok {
  background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2);
}
.sp-verify-status--pending {
  background: rgba(245,158,11,.06); border: 1px solid rgba(245,158,11,.2);
  flex-wrap: wrap;
}
.sp-verify-icon {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: rgba(16,185,129,.15); color: #34d399;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.sp-verify-icon--warn {
  background: rgba(245,158,11,.15); color: #fbbf24;
}
.sp-verify-label { font-size: 13px; font-weight: 700; color: #34d399; margin-bottom: 2px; }
.sp-verify-label--warn { color: #fbbf24; }
.sp-verify-email { font-size: 11.5px; color: rgba(196,181,253,.45); }
.sp-resend-verify-btn {
  background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3);
  color: #fbbf24; padding: 6px 14px; border-radius: 99px;
  cursor: pointer; font-size: 12px; font-weight: 600; font-family: inherit;
  transition: background .15s; white-space: nowrap; margin-left: auto;
}
.sp-resend-verify-btn:hover { background: rgba(245,158,11,.22); }
@media(max-width:480px){ .sp-resend-verify-btn { margin-left: 0; margin-top: 8px; width: 100%; } }

/* ══ Tarot loading: front card images, centered, floated ═══════════════ */
/* NOTE: do NOT set display on #stc-loading here — showPhase() controls it */
#stc-loading {
  height: 100%;
  padding: 0;
}
.stc-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 400px;
  padding: 40px 20px;
  gap: 0;
}
#stc-loading-cards {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
  margin-bottom: 32px;
}
.stc-loading-card {
  width: 110px;
  height: 172px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(124,58,237,.3);
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 24px rgba(124,58,237,.15);
  flex-shrink: 0;
  /* Float animation — same as original but for front-face cards */
  animation: stcFrontFloat 2.4s ease-in-out infinite;
}
.stc-loading-card:nth-child(2) { animation-delay: .35s; }
.stc-loading-card:nth-child(3) { animation-delay: .7s; }
@keyframes stcFrontFloat {
  0%,100% { transform: translateY(0);    box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 24px rgba(124,58,237,.15); }
  50%      { transform: translateY(-12px); box-shadow: 0 20px 48px rgba(0,0,0,.6), 0 0 36px rgba(124,58,237,.3); }
}
.stc-loading-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; pointer-events: none; }
@media(max-width:640px){
  .stc-loading-card { width: 88px; height: 138px; }
  #stc-loading-cards { gap: 12px; }
  .stc-loading-inner { min-height: 320px; }
}



/* v12.17 — Account verification + cancellation actions */
.sp-resend-verify-btn.is-sent{background:rgba(34,197,94,.12)!important;border-color:rgba(34,197,94,.45)!important;color:#86efac!important;box-shadow:0 0 22px rgba(34,197,94,.12)!important}
.sp-billing-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;width:100%}
.sp-billing-actions .sp-btn{width:100%;justify-content:center;min-height:42px}
.sp-billing-actions-center{max-width:360px;margin-left:auto;margin-right:auto}
.sp-btn-danger{background:rgba(248,113,113,.09)!important;border:1px solid rgba(248,113,113,.28)!important;color:#fecaca!important;box-shadow:none!important}
.sp-btn-danger:hover{background:rgba(248,113,113,.16)!important;border-color:rgba(248,113,113,.45)!important;color:#fff!important;transform:translateY(-1px)}
.sp-btn-danger.is-cancelled{background:rgba(34,197,94,.10)!important;border-color:rgba(34,197,94,.35)!important;color:#86efac!important}
@media(max-width:560px){.sp-billing-actions{grid-template-columns:1fr}.sp-billing-actions-center{max-width:none}}

/* Staris v12.18 billing controls */
.sp-billing-note{margin-top:9px;color:rgba(196,181,253,.58);font-size:11.5px;line-height:1.45;text-align:center}
.sp-btn-danger{background:rgba(239,68,68,.10)!important;border:1px solid rgba(248,113,113,.28)!important;color:#fecaca!important;box-shadow:0 10px 28px rgba(127,29,29,.12)!important}
.sp-btn-danger:hover{background:rgba(239,68,68,.16)!important;color:#fff!important;border-color:rgba(248,113,113,.45)!important}
.sp-btn-secondary{background:rgba(167,139,250,.10)!important;border:1px solid rgba(167,139,250,.25)!important;color:#ede9fe!important}
.sp-btn-secondary:hover{background:rgba(167,139,250,.16)!important;color:#fff!important}

/* Staris v12.22 — Psychic / Astral chat chooser and modes */
.staris-chat-choice{padding:18px;border:1px solid rgba(167,139,250,.22);border-radius:22px;background:linear-gradient(145deg,rgba(20,12,48,.86),rgba(9,6,28,.94));box-shadow:0 24px 60px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.03);max-width:720px;box-sizing:border-box;overflow:hidden}
.staris-chat-choice .scc-kicker{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#a78bfa;font-weight:900;margin-bottom:8px}
.staris-chat-choice h3{margin:0 0 14px!important;font-size:20px!important;line-height:1.15!important;color:#fff!important;letter-spacing:-.035em!important}
.scc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.scc-card{appearance:none;border:1px solid rgba(167,139,250,.22);border-radius:18px;background:linear-gradient(180deg,rgba(124,58,237,.16),rgba(255,255,255,.035));padding:16px;text-align:left;color:#fff;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;min-width:0;box-sizing:border-box}
.scc-card:hover{transform:translateY(-2px);border-color:rgba(167,139,250,.52);box-shadow:0 16px 38px rgba(124,58,237,.18)}
.scc-icon{width:34px;height:34px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;background:rgba(124,58,237,.18);color:#d9ccff;box-shadow:inset 0 0 0 1px rgba(167,139,250,.18),0 0 28px rgba(124,58,237,.2);font-size:18px}
.scc-card strong{display:block;font-size:16px;line-height:1.1;margin-bottom:7px;color:#fff;font-weight:900;letter-spacing:-.02em}
.scc-card small{display:block;color:rgba(215,205,255,.68);font-size:12.5px;line-height:1.45;font-weight:600;overflow-wrap:anywhere}
.staris-psychic-modes{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;max-width:720px}
.staris-psychic-modes button,.staris-reading-mode-strip button{appearance:none;border:1px solid rgba(167,139,250,.22);border-radius:999px;background:rgba(124,58,237,.13);color:rgba(237,232,255,.88);font-size:12px;font-weight:900;padding:8px 12px;cursor:pointer;transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;white-space:nowrap}
.staris-psychic-modes button:hover,.staris-reading-mode-strip button:hover{transform:translateY(-1px);background:rgba(124,58,237,.22);border-color:rgba(167,139,250,.46);box-shadow:0 10px 26px rgba(124,58,237,.18)}
.staris-astral-modes button{background:rgba(59,130,246,.12);border-color:rgba(96,165,250,.22)}
.staris-reading-mode-strip{overflow-x:auto;scrollbar-width:none;padding-bottom:4px}.staris-reading-mode-strip::-webkit-scrollbar{display:none}
@media(max-width:700px){.scc-grid{grid-template-columns:1fr}.staris-chat-choice{padding:15px;border-radius:20px}.staris-chat-choice h3{font-size:18px!important}.staris-psychic-modes{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:3px}.staris-psychic-modes::-webkit-scrollbar{display:none}.staris-psychic-modes button{flex:0 0 auto}}


/* Staris v12.23 — clearer chat style switch + stronger mode controls */
.staris-chat-style-toggle{display:flex;align-items:center;gap:6px;padding:5px;border:1px solid rgba(167,139,250,.22);border-radius:18px;background:linear-gradient(180deg,rgba(13,18,42,.72),rgba(9,8,28,.84));box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 12px 34px rgba(0,0,0,.24);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.staris-chat-style-toggle button{appearance:none;border:0;border-radius:14px;background:transparent;color:rgba(218,211,255,.72);height:38px;padding:0 14px;font-size:12px;font-weight:900;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
.staris-chat-style-toggle button:hover{color:#fff;background:rgba(124,58,237,.12)}
.staris-chat-style-toggle button.is-active{color:#fff;background:linear-gradient(135deg,#7c3aed,#a78bfa);box-shadow:0 10px 26px rgba(124,58,237,.35)}
.staris-reading-mode-strip button.is-active,.staris-psychic-modes button.is-active{background:linear-gradient(135deg,rgba(124,58,237,.62),rgba(167,139,250,.42));border-color:rgba(196,181,253,.68);box-shadow:0 12px 30px rgba(124,58,237,.25);color:#fff}
@media(max-width:900px){.staris-chat-style-toggle{order:3;width:100%;justify-content:center}.staris-chat-style-toggle button{flex:1}}
@media(max-width:520px){.staris-chat-style-toggle button{height:36px;padding:0 10px;font-size:11px}.staris-tone-select{display:none!important}}


/* v12.28 — separate quick prompts for Psychic Reading vs Astral Chat */
[data-staris-chat-app][data-staris-active-chat="psychic"] .is-astral-chip,
[data-staris-chat-app][data-staris-active-chat=""] .is-astral-chip,
[data-staris-chat-app]:not([data-staris-active-chat]) .is-astral-chip{display:none!important;}
[data-staris-chat-app][data-staris-active-chat="astral"] .is-psychic-chip{display:none!important;}
[data-staris-chat-app][data-staris-active-chat="astral"] .is-astral-chip{display:inline-flex!important;}
[data-staris-chat-app][data-staris-active-chat="psychic"] .is-psychic-chip{display:inline-flex!important;}


/* ═══ v12.29 — mobile chat switch + premium centered send button ═══════════ */
/* Send button: remove old text/pseudo icons and draw one perfectly centered premium plane */
.staris-chat-form .staris-send-btn,
.staris-send-btn{
  width:62px!important;
  min-width:62px!important;
  height:62px!important;
  min-height:62px!important;
  border-radius:22px!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:0!important;
  font-size:0!important;
  text-indent:-9999px!important;
  color:transparent!important;
  overflow:hidden!important;
  position:relative!important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.32), transparent 28%),
    linear-gradient(135deg,#7c3aed 0%,#9f63ff 52%,#6d28d9 100%)!important;
  border:1px solid rgba(216,204,255,.22)!important;
  box-shadow:0 18px 42px rgba(124,58,237,.42), inset 0 1px 0 rgba(255,255,255,.22)!important;
  transform:none!important;
}
.staris-send-btn::before{content:none!important;display:none!important;}
.staris-send-btn::after{
  content:''!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:25px!important;
  height:25px!important;
  transform:translate(-50%,-50%) rotate(-6deg)!important;
  display:block!important;
  background:rgba(255,255,255,.96)!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.84 2.16a1.25 1.25 0 0 0-1.3-.29L2.75 8.68a1.15 1.15 0 0 0 .06 2.17l7.13 2.42 2.42 7.13a1.15 1.15 0 0 0 2.17.06l6.81-17.79a1.25 1.25 0 0 0-.5-1.51ZM10.7 12.02 5.4 10.22l12.1-4.63-6.8 6.43Zm3.08 6.58-1.8-5.3 6.43-6.8-4.63 12.1Z'/%3E%3C/svg%3E") center/contain no-repeat!important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.84 2.16a1.25 1.25 0 0 0-1.3-.29L2.75 8.68a1.15 1.15 0 0 0 .06 2.17l7.13 2.42 2.42 7.13a1.15 1.15 0 0 0 2.17.06l6.81-17.79a1.25 1.25 0 0 0-.5-1.51ZM10.7 12.02 5.4 10.22l12.1-4.63-6.8 6.43Zm3.08 6.58-1.8-5.3 6.43-6.8-4.63 12.1Z'/%3E%3C/svg%3E") center/contain no-repeat!important;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.35))!important;
  text-indent:0!important;
}
.staris-send-btn:hover{transform:translateY(-1px) scale(1.035)!important;box-shadow:0 22px 48px rgba(124,58,237,.54), inset 0 1px 0 rgba(255,255,255,.26)!important;}
.staris-send-btn:active{transform:scale(.96)!important;}

@media(max-width:980px){
  /* Make the mobile header use two clean rows: greeting/profile on top, chat switch below. */
  .staris-main-topbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 40px!important;
    grid-template-areas:"left avatar" "right right"!important;
    align-items:center!important;
    gap:10px 10px!important;
    padding:0 0 10px!important;
    position:relative!important;
  }
  .staris-topbar-left{grid-area:left!important;min-width:0!important;padding-right:0!important;}
  .staris-topbar-right{
    grid-area:right!important;
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    padding:0!important;
    margin:0!important;
  }
  .staris-mobile-profile-btn{
    grid-area:avatar!important;
    position:static!important;
    transform:none!important;
    justify-self:end!important;
    align-self:center!important;
    width:36px!important;
    height:36px!important;
    z-index:2!important;
  }
  .staris-chat-style-toggle{
    width:100%!important;
    max-width:420px!important;
    min-width:0!important;
    order:0!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
    justify-content:stretch!important;
    padding:5px!important;
    border-radius:18px!important;
  }
  .staris-chat-style-toggle button{
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    padding:0 8px!important;
    font-size:12px!important;
    border-radius:14px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .staris-tone-select{display:none!important;}
  .staris-chat-form .staris-send-btn,.staris-send-btn{
    width:58px!important;
    min-width:58px!important;
    height:58px!important;
    min-height:58px!important;
    border-radius:20px!important;
  }
  .staris-send-btn::after{width:24px!important;height:24px!important;}
}
@media(max-width:520px){
  .staris-main-topbar{grid-template-columns:minmax(0,1fr) 38px!important;gap:8px!important;}
  .staris-chat-style-toggle{max-width:none!important;border-radius:17px!important;}
  .staris-chat-style-toggle button{height:40px!important;font-size:11.5px!important;padding:0 6px!important;}
  .staris-mobile-profile-btn{width:34px!important;height:34px!important;}
  .staris-chat-form{gap:9px!important;}
  .staris-chat-form .staris-send-btn,.staris-send-btn{width:56px!important;min-width:56px!important;height:56px!important;min-height:56px!important;border-radius:19px!important;}
}


/* ═══ v12.31 hotfix — rollback risky mobile layout overrides, scope chat UI ═══ */
.staris-main:not(.staris-main--chat) [data-staris-chat-thread],
.staris-main:not(.staris-main--chat) [data-staris-chat-form],
.staris-main:not(.staris-main--chat) [data-staris-chip-row],
.staris-main:not(.staris-main--chat) .staris-chat-style-toggle,
.staris-main:not(.staris-main--chat) .staris-tone-select{display:none!important;}

@media(max-width:980px){
  /* Only the chat tab gets chip-row scrolling. Other features never inherit it. */
  .staris-main--chat [data-staris-chip-row]{
    display:flex!important;
    grid-template-columns:none!important;
    gap:10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    padding:0 2px 10px!important;
    margin:0!important;
    max-width:100%!important;
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);
  }
  .staris-main--chat [data-staris-chip-row]::-webkit-scrollbar{display:none!important;}
  .staris-main--chat [data-staris-chip-row] button{
    flex:0 0 auto!important;
    min-width:max-content!important;
    height:42px!important;
    padding:0 16px!important;
    white-space:nowrap!important;
  }

  /* Keep composer in the normal app flow. No fixed overlay, so messages and feature pages cannot be cut off. */
  .staris-main--chat [data-staris-chat-form]{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:calc(100% + 24px)!important;
    max-width:none!important;
    margin:8px -12px 0!important;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 56px!important;
    gap:10px!important;
    background:linear-gradient(180deg,rgba(2,4,14,.84),rgba(2,4,14,.98))!important;
    border-top:1px solid rgba(124,58,237,.20)!important;
    box-shadow:none!important;
    z-index:20!important;
    box-sizing:border-box!important;
  }
  .staris-main--chat [data-staris-chat-thread]{
    padding-bottom:10px!important;
    scroll-padding-bottom:84px!important;
    overflow-x:hidden!important;
  }

  /* Feature views own the screen and cannot be covered by chat UI. */
  .staris-main:not(.staris-main--chat) .staris-view{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))!important;
    box-sizing:border-box!important;
  }

  /* Compatibility fields: prevent iOS/date input overflow. */
  .staris-main--compat .src-root,
  .staris-main--compat .src-phase,
  .staris-main--compat .src-form-wrap,
  .staris-main--compat .src-form,
  .staris-main--compat .src-field{max-width:100%!important;box-sizing:border-box!important;overflow:visible!important;}
  .staris-main--compat .src-field-row{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;}
  .staris-main--compat input,
  .staris-main--compat select,
  .staris-main--compat textarea,
  .staris-main--compat .src-input{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;font-size:16px!important;}

  /* Paywall secondary link readable but still secondary. */
  .su2-dismiss{color:rgba(216,204,255,.78)!important;font-weight:800!important;text-shadow:0 0 14px rgba(124,58,237,.2)!important;}

  /* Slightly lighter mobile visuals for heat without layout changes. */
  .staris-bg .staris-grid{opacity:.11!important;}
  .staris-msg,.sw-card,.src-form-wrap{box-shadow:0 10px 28px rgba(0,0,0,.22)!important;}
}
@media(max-width:430px){
  .staris-main--chat [data-staris-chat-form]{width:calc(100% + 20px)!important;margin-left:-10px!important;margin-right:-10px!important;padding-left:10px!important;padding-right:10px!important;grid-template-columns:minmax(0,1fr) 54px!important;}
  .staris-main--chat .staris-send-btn{width:54px!important;min-width:54px!important;height:54px!important;min-height:54px!important;border-radius:18px!important;}
}

/* ═══ v12.32 tiny scoped polish — assistant avatar + compatibility inputs only ═══ */
@media(max-width:980px){
  /* Restore a small Staris avatar on assistant chat bubbles only. */
  .staris-main--chat .staris-msg-assistant{
    padding-left:58px!important;
    position:relative!important;
    min-height:64px!important;
  }
  .staris-main--chat .staris-msg-assistant .staris-msg-avatar{
    display:block!important;
    position:absolute!important;
    left:16px!important;
    top:18px!important;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    max-width:30px!important;
    max-height:30px!important;
    border-radius:50%!important;
    object-fit:cover!important;
    opacity:1!important;
    visibility:visible!important;
    z-index:2!important;
    box-shadow:0 0 16px rgba(167,139,250,.48),0 0 0 2px rgba(167,139,250,.16)!important;
  }

  /* Compatibility: keep every input inside the card on mobile, especially date/time. */
  .staris-main--compat .src-form-wrap,
  .staris-main--compat .src-form,
  .staris-main--compat .src-field,
  .staris-main--compat .src-field-row{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .staris-main--compat .src-field-row{
    display:block!important;
  }
  .staris-main--compat .src-field-row .src-field + .src-field{
    margin-top:14px!important;
  }
  .staris-main--compat .src-input,
  .staris-main--compat input[type="text"],
  .staris-main--compat input[type="date"],
  .staris-main--compat input[type="time"]{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    inline-size:100%!important;
    max-inline-size:100%!important;
    box-sizing:border-box!important;
    -webkit-appearance:none!important;
    appearance:none!important;
    border-radius:12px!important;
    overflow:hidden!important;
  }
}
@media(max-width:430px){
  .staris-main--chat .staris-msg-assistant{padding-left:52px!important;}
  .staris-main--chat .staris-msg-assistant .staris-msg-avatar{left:14px!important;top:17px!important;width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;}
  .staris-main--compat .src-form-wrap{padding-left:0!important;padding-right:0!important;}
}

/* ═══ v12.34 — Love Psychic lane + person setup (scoped) ═══════════════ */
.scc-grid-three{grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:760px){.scc-grid-three{grid-template-columns:1fr;}}
.staris-love-modes button,.staris-reading-mode-strip .is-love-chip{background:rgba(236,72,153,.13);border-color:rgba(244,114,182,.28)}
[data-staris-chat-app][data-staris-active-chat="love"] .is-psychic-chip,
[data-staris-chat-app][data-staris-active-chat="love"] .is-astral-chip{display:none!important;}
[data-staris-chat-app][data-staris-active-chat="love"] .is-love-chip{display:inline-flex!important;}
[data-staris-chat-app][data-staris-active-chat="psychic"] .is-love-chip,
[data-staris-chat-app][data-staris-active-chat="astral"] .is-love-chip,
[data-staris-chat-app][data-staris-active-chat=""] .is-love-chip,
[data-staris-chat-app]:not([data-staris-active-chat]) .is-love-chip{display:none!important;}
[data-staris-chat-app][data-staris-active-chat="psychic"] .is-astral-chip,
[data-staris-chat-app][data-staris-active-chat="psychic"] .is-love-chip{display:none!important;}
[data-staris-chat-app][data-staris-active-chat="astral"] .is-psychic-chip,
[data-staris-chat-app][data-staris-active-chat="astral"] .is-love-chip{display:none!important;}
.staris-love-setup{margin-top:14px;padding:14px;border:1px solid rgba(244,114,182,.24);border-radius:18px;background:linear-gradient(145deg,rgba(80,18,52,.34),rgba(17,10,32,.86));box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);max-width:720px;box-sizing:border-box;overflow:hidden}
.staris-love-setup .slove-kicker{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#f9a8d4;font-weight:900;margin-bottom:7px}
.staris-love-setup h4{margin:0 0 7px!important;color:#fff!important;font-size:16px!important;line-height:1.15!important;letter-spacing:-.02em!important}
.staris-love-setup p{margin:0 0 12px!important;color:rgba(232,220,255,.72)!important;font-size:12.5px!important;line-height:1.55!important}
.slove-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:10px 0}
.slove-grid input{width:100%;min-width:0;box-sizing:border-box;border:1px solid rgba(244,114,182,.22);border-radius:13px;background:rgba(7,5,22,.72);color:#fff!important;font-size:14px;padding:12px 13px;outline:none}
.slove-grid input:focus{border-color:rgba(244,114,182,.52);box-shadow:0 0 0 3px rgba(236,72,153,.12)}
.slove-save{display:flex;align-items:center;gap:8px;color:rgba(231,222,255,.74);font-size:12px;font-weight:750;margin:8px 0 12px}
.slove-actions{display:flex;gap:9px;flex-wrap:wrap}
.slove-actions button{appearance:none;border:0;border-radius:999px;background:linear-gradient(135deg,#db2777,#a78bfa);color:#fff;font-weight:900;font-size:12px;padding:10px 14px;cursor:pointer;box-shadow:0 12px 28px rgba(219,39,119,.24)}
.slove-actions button.is-ghost{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(244,114,182,.22);color:rgba(235,226,255,.82)}
.slove-status{min-height:18px;margin-top:9px;color:#fbcfe8;font-size:12px;font-weight:800}
.slove-saved{margin:10px 0;padding:10px 12px;border-radius:14px;background:rgba(244,114,182,.09);border:1px solid rgba(244,114,182,.18);color:#fff;font-size:12.5px;font-weight:850}
.slove-saved span{display:block;margin-top:3px;color:rgba(232,220,255,.62);font-weight:700}
@media(max-width:560px){.slove-grid{grid-template-columns:1fr}.staris-chat-style-toggle button{font-size:10.5px!important;padding:0 5px!important}.staris-love-setup{padding:13px;border-radius:17px}}

/* ═══ v12.35 — Love Psychic person memory + safer setup controls (scoped) ═══ */
.staris-love-setup input,
.staris-love-setup select{
  appearance:none!important;-webkit-appearance:none!important;
  width:100%;min-width:0;box-sizing:border-box;
  border:1px solid rgba(244,114,182,.22)!important;
  border-radius:13px!important;
  background:rgba(7,5,22,.72)!important;
  color:#fff!important;
  font-size:14px!important;
  line-height:1.2!important;
  padding:12px 13px!important;
  outline:none!important;
  box-shadow:none!important;
}
.staris-love-setup input:focus,
.staris-love-setup select:focus{
  background:rgba(7,5,22,.86)!important;
  color:#fff!important;
  border-color:rgba(244,114,182,.56)!important;
  box-shadow:0 0 0 3px rgba(236,72,153,.14)!important;
}
.staris-love-setup input::placeholder{color:rgba(233,214,255,.52)!important;opacity:1!important;}
.staris-love-setup input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.75);}
.staris-love-setup select{background-image:linear-gradient(45deg,transparent 50%,rgba(244,216,255,.8) 50%),linear-gradient(135deg,rgba(244,216,255,.8) 50%,transparent 50%)!important;background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%!important;background-size:5px 5px,5px 5px!important;background-repeat:no-repeat!important;padding-right:34px!important;}
.staris-love-people{margin:14px 0;padding:14px;border:1px solid rgba(167,139,250,.22);border-radius:18px;background:linear-gradient(145deg,rgba(38,22,78,.5),rgba(8,6,22,.82));box-sizing:border-box;max-width:760px;}
.slove-person-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:#fff;}
.slove-person-head>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#ec4899,#8b5cf6);box-shadow:0 0 24px rgba(236,72,153,.22);font-weight:900;}
.slove-person-head strong{display:block;font-size:14px;line-height:1.1;}
.slove-person-head small{display:block;margin-top:3px;color:rgba(232,220,255,.62);font-size:11px;font-weight:700;}
.slove-person-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
.slove-person-card{appearance:none;text-align:left;border:1px solid rgba(167,139,250,.22);border-radius:15px;background:rgba(255,255,255,.045);padding:11px 12px;color:#fff;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease;}
.slove-person-card:hover,.slove-person-card.is-active{transform:translateY(-1px);border-color:rgba(236,72,153,.5);background:rgba(236,72,153,.1);}
.slove-person-card strong{display:block;font-size:13px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.slove-person-card span{display:block;margin-top:5px;color:rgba(232,220,255,.6);font-size:11px;font-weight:700;}
.slove-add-person{margin-top:10px;appearance:none;border:1px solid rgba(244,114,182,.24);border-radius:999px;background:rgba(236,72,153,.09);color:#fbcfe8;font-size:12px;font-weight:900;padding:9px 13px;cursor:pointer;}
.slove-empty{margin:0!important;color:rgba(232,220,255,.66)!important;font-size:12.5px!important;}
.staris-love-active{display:flex;align-items:center;gap:11px;margin:0 0 12px;padding:12px 13px;border-radius:18px;background:linear-gradient(135deg,rgba(236,72,153,.12),rgba(124,58,237,.10));border:1px solid rgba(244,114,182,.22);max-width:760px;box-sizing:border-box;}
.slove-active-orb{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#f9a8d4 28%,#a855f7 60%,#3b0764 100%);color:#fff;font-weight:900;box-shadow:0 0 22px rgba(236,72,153,.3);flex:0 0 38px;}
.slove-active-copy{min-width:0;flex:1;}
.slove-active-copy span{display:block;text-transform:uppercase;letter-spacing:.14em;color:#f9a8d4;font-size:9px;font-weight:900;}
.slove-active-copy strong{display:block;color:#fff;font-size:14px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.slove-active-copy small{display:block;margin-top:2px;color:rgba(232,220,255,.6);font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.staris-love-active button{appearance:none;border:1px solid rgba(244,114,182,.24);border-radius:999px;background:rgba(255,255,255,.06);color:#fbcfe8;font-size:11px;font-weight:900;padding:8px 11px;cursor:pointer;}
@media(max-width:560px){
  .slove-person-grid{grid-template-columns:1fr;}
  .staris-love-active{padding:10px 11px;border-radius:16px;}
  .slove-active-orb{width:34px;height:34px;flex-basis:34px;}
  .staris-love-active button{padding:8px 9px;font-size:10.5px;}
}


/* ═══ v12.36 — Love Psychic polish: mobile menu, places, person bar ═══ */
.staris-tone-select{display:none!important;}
.staris-mobile-chat-switch-btn{display:none;}
.pac-container{z-index:999999!important;background:#0d0428!important;border:1px solid rgba(167,139,250,.42)!important;border-radius:14px!important;box-shadow:0 24px 70px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.05)!important;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;overflow:hidden!important;}
.pac-container:after{display:none!important;}
.pac-item{background:transparent!important;border-top:1px solid rgba(255,255,255,.06)!important;color:rgba(232,220,255,.82)!important;padding:11px 14px!important;font-size:13px!important;cursor:pointer!important;}
.pac-item:hover,.pac-item-selected{background:rgba(139,92,246,.18)!important;}
.pac-item-query,.pac-matched{color:#fff!important;font-weight:800!important;}
.slove-time-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;min-width:0;}
.stariss .slove-time-row select,.slove-time-row select{width:100%!important;min-width:0!important;}
.staris-love-active-wrap{position:sticky;top:0;z-index:8;margin:0 0 10px;}
.staris-love-active-wrap .staris-love-active{margin:0 0 8px!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 50px rgba(0,0,0,.24),0 0 0 1px rgba(244,114,182,.1) inset;}
.staris-love-active .slove-active-actions{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;}
.staris-love-active button[data-staris-love-add-person]{border-color:rgba(167,139,250,.3);color:#ddd6fe;}
@media(max-width:760px){
  .staris-topbar-right{position:relative!important;display:grid!important;grid-template-columns:auto auto minmax(0,1fr)!important;gap:10px!important;align-items:center!important;}
  .staris-mobile-chat-switch-btn{display:flex!important;grid-column:3!important;align-items:center;justify-content:space-between;gap:10px;width:100%;height:46px;border:1px solid rgba(167,139,250,.35);border-radius:18px;background:linear-gradient(135deg,rgba(124,58,237,.22),rgba(12,10,28,.82));color:#fff;font-weight:900;padding:0 14px;box-shadow:0 12px 35px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.035) inset;}
  .staris-mobile-chat-switch-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .staris-chat-style-toggle{display:none!important;position:absolute!important;right:0!important;top:calc(100% + 8px)!important;left:auto!important;width:min(270px,calc(100vw - 28px))!important;grid-template-columns:1fr!important;gap:7px!important;padding:8px!important;border-radius:18px!important;background:rgba(10,8,25,.96)!important;border:1px solid rgba(167,139,250,.28)!important;box-shadow:0 24px 70px rgba(0,0,0,.64)!important;z-index:50!important;}
  .staris-topbar-right.is-chat-menu-open .staris-chat-style-toggle{display:grid!important;}
  .staris-chat-style-toggle button{width:100%!important;height:42px!important;border-radius:13px!important;text-align:left!important;justify-content:flex-start!important;padding:0 14px!important;}
  .staris-chat-style-toggle button.is-active{background:linear-gradient(135deg,#7c3aed,#a78bfa)!important;color:#fff!important;}
  .staris-reading-mode-strip{display:flex!important;overflow-x:auto!important;gap:10px!important;padding:0 2px 8px!important;scrollbar-width:none!important;}
  .staris-reading-mode-strip::-webkit-scrollbar{display:none!important;}
  .staris-reading-mode-strip button{flex:0 0 auto!important;min-width:142px!important;}
  .staris-love-active-wrap{top:0;margin-bottom:8px;}
  .staris-love-active{align-items:flex-start!important;gap:9px!important;}
  .staris-love-active .slove-active-actions{width:100%;margin-left:0;justify-content:flex-start;}
  .staris-love-active{flex-wrap:wrap!important;}
  .staris-love-active button{font-size:10px!important;padding:7px 9px!important;}
  .slove-time-row{grid-template-columns:1fr 1fr 1fr!important;}
}


/* ═══ v12.37 — Love Psychic header person bar + safer memory/loading polish ═══ */
.staris-love-person-topbar{display:none;margin:0 0 10px;max-width:760px;position:relative;z-index:12;}
.staris-love-person-topbar .staris-love-active{margin:0!important;padding:9px 11px!important;border-radius:16px!important;max-width:100%!important;background:linear-gradient(135deg,rgba(236,72,153,.20),rgba(124,58,237,.13),rgba(11,18,45,.84))!important;box-shadow:0 14px 40px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.04)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.staris-love-person-topbar .slove-active-orb{width:32px!important;height:32px!important;flex-basis:32px!important;font-size:13px!important;}
.staris-love-person-topbar .slove-active-copy span{font-size:8px!important;letter-spacing:.12em!important;}
.staris-love-person-topbar .slove-active-copy strong{font-size:13px!important;}
.staris-love-person-topbar .slove-active-copy small{font-size:10px!important;}
.staris-love-person-topbar .slove-active-actions{display:flex;gap:7px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;}
.staris-love-person-topbar .staris-love-active button{font-size:10.5px!important;padding:7px 10px!important;}
.staris-chat-thread>.staris-love-active-wrap{display:none!important;}
.staris-msg-loading .staris-msg-text p{color:#f6efff!important;font-weight:800!important;letter-spacing:-.01em;}
.staris-msg-loading .staris-msg-text p:after{content:'';display:inline-block;width:1.2em;text-align:left;animation:starisLoadingDots 1.2s infinite;}
@keyframes starisLoadingDots{0%{content:''}33%{content:'.'}66%{content:'..'}100%{content:'...'}}
.staris-love-setup .slove-save{position:relative;display:flex!important;align-items:center!important;gap:10px!important;width:max-content;max-width:100%;padding:9px 12px 9px 38px!important;border-radius:999px!important;background:rgba(255,255,255,.045)!important;border:1px solid rgba(244,114,182,.23)!important;color:rgba(245,235,255,.86)!important;line-height:1.25!important;cursor:pointer!important;user-select:none;}
.staris-love-setup .slove-save input{position:absolute!important;left:12px!important;top:50%!important;transform:translateY(-50%)!important;width:16px!important;height:16px!important;min-width:16px!important;padding:0!important;margin:0!important;border-radius:5px!important;appearance:auto!important;-webkit-appearance:checkbox!important;accent-color:#ec4899!important;background:#170a2c!important;cursor:pointer!important;}
@media(max-width:760px){
  .staris-love-person-topbar{margin:0 12px 8px!important;max-width:calc(100vw - 24px)!important;}
  .staris-love-person-topbar .staris-love-active{padding:8px 10px!important;align-items:center!important;gap:8px!important;flex-wrap:nowrap!important;}
  .staris-love-person-topbar .slove-active-copy{min-width:0!important;}
  .staris-love-person-topbar .slove-active-actions{margin-left:4px!important;flex:0 0 auto!important;gap:5px!important;}
  .staris-love-person-topbar .staris-love-active button{font-size:0!important;width:32px!important;height:30px!important;padding:0!important;display:grid!important;place-items:center!important;}
  .staris-love-person-topbar .staris-love-active button[data-staris-love-change]::before{content:'↔';font-size:15px;color:#fbcfe8;}
  .staris-love-person-topbar .staris-love-active button[data-staris-love-add-person]::before{content:'+';font-size:18px;color:#ddd6fe;}
  .staris-love-setup .slove-save{width:100%;box-sizing:border-box;font-size:11.5px!important;}
}

/* ═══ v12.38 — Love Psychic active person truly above chat, not inside thread ═══ */
.staris-love-person-topbar{
  display:none;
  width:min(760px,100%);
  margin:8px 0 10px!important;
  position:relative;
  z-index:24;
}
.has-love-person-bar[data-staris-active-chat="love"] .staris-love-person-topbar{display:block;}
.staris-love-person-topbar .staris-love-active{
  min-height:48px!important;
  padding:8px 10px!important;
  border-radius:16px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}
.staris-love-person-topbar .slove-active-orb{width:30px!important;height:30px!important;flex:0 0 30px!important;}
.staris-love-person-topbar .slove-active-copy{min-width:0!important;line-height:1.15!important;}
.staris-love-person-topbar .slove-active-copy span{display:block!important;font-size:8px!important;letter-spacing:.13em!important;line-height:1.1!important;}
.staris-love-person-topbar .slove-active-copy strong{display:block!important;font-size:13px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:280px!important;}
.staris-love-person-topbar .slove-active-copy small{display:block!important;font-size:10px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:320px!important;}
.staris-love-person-topbar .slove-active-actions{margin-left:auto!important;display:flex!important;gap:6px!important;align-items:center!important;flex-shrink:0!important;}
.staris-love-person-topbar .staris-love-active button{font-size:10px!important;padding:6px 9px!important;line-height:1!important;min-height:26px!important;border-radius:999px!important;}
.staris-love-person-panel{
  margin-top:8px!important;
  border-radius:18px!important;
  overflow:hidden!important;
}
.staris-love-person-panel .staris-love-people,
.staris-love-person-panel .staris-love-setup{
  margin:0!important;
  max-width:100%!important;
}
.staris-chat-thread .staris-love-active,
.staris-chat-thread .staris-love-people,
.staris-chat-thread .staris-love-setup{display:none!important;}
.staris-chat-thread .staris-msg-text:empty{display:none!important;}
@media(min-width:761px){
  .staris-love-person-topbar{margin-left:0!important;margin-right:auto!important;}
}
@media(max-width:760px){
  .staris-love-person-topbar{
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    margin:6px 12px 8px!important;
    z-index:35!important;
  }
  .staris-love-person-topbar .staris-love-active{
    min-height:42px!important;
    padding:7px 8px!important;
    border-radius:14px!important;
    gap:8px!important;
    flex-wrap:nowrap!important;
  }
  .staris-love-person-topbar .slove-active-copy strong{font-size:12px!important;max-width:150px!important;}
  .staris-love-person-topbar .slove-active-copy small{font-size:9px!important;max-width:160px!important;}
  .staris-love-person-topbar .slove-active-actions{gap:5px!important;}
  .staris-love-person-topbar .staris-love-active button{font-size:0!important;width:30px!important;height:28px!important;min-height:28px!important;padding:0!important;display:grid!important;place-items:center!important;}
  .staris-love-person-topbar .staris-love-active button[data-staris-love-change]::before{content:'↔';font-size:14px!important;color:#fbcfe8!important;}
  .staris-love-person-topbar .staris-love-active button[data-staris-love-add-person]::before{content:'+';font-size:17px!important;color:#ddd6fe!important;}
  .staris-love-person-panel{max-height:52vh!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important;}
}

/* ═══ v12.39 — Love Psychic person lives inside the main topbar, setup opens in chat ═══ */
.staris-topbar-center{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  flex:1 1 auto!important;
  pointer-events:auto!important;
}
.staris-main--chat .staris-main-topbar{
  display:grid!important;
  grid-template-columns:minmax(180px,.75fr) minmax(260px,1fr) auto!important;
  grid-template-areas:"left person right"!important;
  align-items:center!important;
  gap:14px!important;
}
.staris-main--chat .staris-topbar-left{grid-area:left!important;min-width:0!important;}
.staris-main--chat .staris-topbar-center{grid-area:person!important;}
.staris-main--chat .staris-topbar-right{grid-area:right!important;min-width:0!important;}
.staris-topbar-center .staris-love-person-topbar{
  margin:0!important;
  width:min(560px,100%)!important;
  max-width:560px!important;
  display:none;
  z-index:34!important;
}
.has-love-person-bar[data-staris-active-chat="love"] .staris-topbar-center .staris-love-person-topbar{display:block!important;}
.staris-topbar-center .staris-love-active{
  min-height:44px!important;
  height:auto!important;
  padding:7px 10px!important;
  border-radius:16px!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  flex-wrap:nowrap!important;
  background:linear-gradient(135deg,rgba(236,72,153,.22),rgba(124,58,237,.15),rgba(10,15,38,.76))!important;
  border:1px solid rgba(244,114,182,.26)!important;
  box-shadow:0 12px 38px rgba(0,0,0,.26),0 0 32px rgba(236,72,153,.08) inset!important;
}
.staris-topbar-center .slove-active-orb{width:30px!important;height:30px!important;flex:0 0 30px!important;font-size:13px!important;}
.staris-topbar-center .slove-active-copy{min-width:0!important;line-height:1.1!important;}
.staris-topbar-center .slove-active-copy span{font-size:7px!important;letter-spacing:.13em!important;line-height:1!important;white-space:nowrap!important;}
.staris-topbar-center .slove-active-copy strong{font-size:12.5px!important;line-height:1.12!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:190px!important;}
.staris-topbar-center .slove-active-copy small{font-size:9px!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:230px!important;}
.staris-topbar-center .slove-active-actions{margin-left:auto!important;display:flex!important;align-items:center!important;gap:6px!important;flex:0 0 auto!important;}
.staris-topbar-center .staris-love-active button{
  font-size:9.5px!important;
  min-height:25px!important;
  height:25px!important;
  padding:0 9px!important;
  border-radius:999px!important;
  white-space:nowrap!important;
}
/* The person chooser/setup is allowed as a real assistant card in the chat again. */
.staris-chat-thread .staris-love-inline-panel{display:block!important;max-width:760px!important;}
.staris-chat-thread .staris-love-inline-panel .staris-love-people,
.staris-chat-thread .staris-love-inline-panel .staris-love-setup{display:block!important;margin:0!important;max-width:100%!important;}
.staris-chat-thread .staris-love-inline-panel .staris-love-setup{border-radius:18px!important;}
.staris-chat-thread .staris-love-inline-panel .staris-love-people{border-radius:18px!important;}
.staris-chat-thread .staris-love-active:not(.staris-love-inline-panel .staris-love-active){display:none!important;}

@media(max-width:980px){
  .staris-main--chat .staris-main-topbar{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-areas:"right" "person"!important;
    gap:8px!important;
    align-items:stretch!important;
    padding:0 10px 8px!important;
  }
  .staris-main--chat .staris-topbar-left{display:none!important;}
  .staris-main--chat .staris-topbar-right{
    grid-area:right!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:auto auto minmax(0,1fr)!important;
    gap:8px!important;
    align-items:center!important;
  }
  .staris-main--chat .staris-topbar-center{
    grid-area:person!important;
    width:100%!important;
    display:block!important;
    min-height:0!important;
  }
  .staris-topbar-center .staris-love-person-topbar{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
  .staris-topbar-center .staris-love-active{
    min-height:40px!important;
    padding:7px 9px!important;
    border-radius:14px!important;
    gap:8px!important;
  }
  .staris-topbar-center .slove-active-orb{width:28px!important;height:28px!important;flex-basis:28px!important;}
  .staris-topbar-center .slove-active-copy strong{max-width:150px!important;font-size:12px!important;}
  .staris-topbar-center .slove-active-copy small{max-width:170px!important;font-size:8.5px!important;}
  .staris-topbar-center .staris-love-active button{
    font-size:0!important;
    width:30px!important;
    height:28px!important;
    min-height:28px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
  }
  .staris-topbar-center .staris-love-active button[data-staris-love-change]::before{content:'↔';font-size:14px!important;color:#fbcfe8!important;}
  .staris-topbar-center .staris-love-active button[data-staris-love-add-person]::before{content:'+';font-size:18px!important;color:#ddd6fe!important;}
  .staris-chat-thread .staris-love-inline-panel{max-width:100%!important;}
}
@media(max-width:520px){
  .staris-main--chat .staris-main-topbar{padding-left:8px!important;padding-right:8px!important;}
  .staris-topbar-center .slove-active-copy strong{max-width:126px!important;}
  .staris-topbar-center .slove-active-copy small{max-width:142px!important;}
}


/* ═══ v12.40 — Love Psychic active person compact inside top controls ═══ */
.staris-main--chat .staris-topbar-center{display:none!important;}
.staris-topbar-right .staris-love-person-topbar{
  display:none;
  margin:0!important;
  width:auto!important;
  max-width:360px!important;
  min-width:0!important;
  flex:0 1 360px!important;
  position:relative!important;
  z-index:35!important;
}
.has-love-person-bar[data-staris-active-chat="love"] .staris-topbar-right .staris-love-person-topbar{display:block!important;}
.staris-topbar-right .staris-love-active{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:nowrap!important;
  min-height:42px!important;
  height:42px!important;
  margin:0!important;
  padding:6px 8px!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,rgba(236,72,153,.22),rgba(124,58,237,.14),rgba(10,15,38,.78))!important;
  border:1px solid rgba(244,114,182,.28)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.26),0 0 28px rgba(236,72,153,.08) inset!important;
  overflow:hidden!important;
}
.staris-topbar-right .slove-active-orb{width:28px!important;height:28px!important;flex:0 0 28px!important;font-size:12px!important;}
.staris-topbar-right .slove-active-copy{min-width:0!important;line-height:1.05!important;flex:1 1 auto!important;}
.staris-topbar-right .slove-active-copy span{display:block!important;font-size:7px!important;letter-spacing:.12em!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.staris-topbar-right .slove-active-copy strong{display:block!important;font-size:12px!important;line-height:1.08!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:145px!important;}
.staris-topbar-right .slove-active-copy small{display:block!important;font-size:8.5px!important;line-height:1.05!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:170px!important;opacity:.82!important;}
.staris-topbar-right .slove-active-actions{margin-left:auto!important;display:flex!important;align-items:center!important;gap:5px!important;flex:0 0 auto!important;}
.staris-topbar-right .staris-love-active button{font-size:9.5px!important;min-height:24px!important;height:24px!important;padding:0 8px!important;border-radius:999px!important;white-space:nowrap!important;}

@media(min-width:981px){
  .staris-main--chat .staris-main-topbar{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;
  }
  .staris-main--chat .staris-topbar-left{flex:1 1 auto!important;min-width:190px!important;}
  .staris-main--chat .staris-topbar-right{
    flex:0 1 auto!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
  }
  .staris-topbar-right .staris-love-person-topbar{order:0!important;}
  .staris-topbar-right .staris-chat-style-toggle{order:1!important;}
}

@media(max-width:980px){
  .staris-main--chat .staris-main-topbar{
    display:block!important;
    padding:0 8px 8px!important;
    border-bottom:1px solid rgba(151,169,255,.08)!important;
  }
  .staris-main--chat .staris-topbar-left{display:none!important;}
  .staris-main--chat .staris-topbar-right{
    width:100%!important;
    display:grid!important;
    grid-template-columns:36px 86px minmax(118px,1fr) minmax(86px,.8fr)!important;
    grid-template-areas:"avatar insights switch person"!important;
    gap:7px!important;
    align-items:center!important;
    justify-content:stretch!important;
    padding:0!important;
    margin:0!important;
    position:relative!important;
  }
  .staris-main--chat .staris-mobile-profile-btn{grid-area:avatar!important;display:flex!important;width:34px!important;height:34px!important;justify-self:start!important;align-self:center!important;position:static!important;transform:none!important;}
  .staris-main--chat .st-insights-btn{grid-area:insights!important;width:86px!important;height:38px!important;padding:0 9px!important;border-radius:13px!important;justify-content:center!important;gap:5px!important;display:inline-flex!important;}
  .staris-main--chat .st-insights-btn span{font-size:11px!important;}
  .staris-main--chat .staris-mobile-chat-switch-btn{grid-area:switch!important;display:flex!important;width:100%!important;min-width:0!important;height:40px!important;border-radius:14px!important;padding:0 10px!important;font-size:12px!important;gap:7px!important;}
  .staris-main--chat .staris-mobile-chat-switch-btn span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
  .staris-main--chat .staris-mobile-chat-switch-btn svg{width:15px!important;height:15px!important;flex:0 0 auto!important;}
  .staris-main--chat .staris-love-person-topbar{grid-area:person!important;display:none!important;width:100%!important;max-width:none!important;min-width:0!important;}
  .has-love-person-bar[data-staris-active-chat="love"] .staris-main--chat .staris-love-person-topbar{display:block!important;}
  .staris-main--chat .staris-love-active{height:40px!important;min-height:40px!important;border-radius:14px!important;padding:0 7px!important;gap:5px!important;}
  .staris-main--chat .staris-love-active .slove-active-orb{display:none!important;}
  .staris-main--chat .staris-love-active .slove-active-copy span,
  .staris-main--chat .staris-love-active .slove-active-copy small{display:none!important;}
  .staris-main--chat .staris-love-active .slove-active-copy strong{font-size:11.5px!important;max-width:none!important;line-height:1!important;}
  .staris-main--chat .staris-love-active .slove-active-actions{gap:3px!important;margin-left:4px!important;}
  .staris-main--chat .staris-love-active button{font-size:0!important;width:24px!important;height:24px!important;min-height:24px!important;padding:0!important;display:grid!important;place-items:center!important;border-radius:999px!important;}
  .staris-main--chat .staris-love-active button[data-staris-love-change]::before{content:'↔';font-size:13px!important;color:#fbcfe8!important;}
  .staris-main--chat .staris-love-active button[data-staris-love-add-person]::before{content:'+';font-size:15px!important;color:#ddd6fe!important;}
  .staris-main--chat .staris-chat-style-toggle{display:none!important;position:absolute!important;right:0!important;top:calc(100% + 8px)!important;left:auto!important;width:min(270px,calc(100vw - 16px))!important;grid-template-columns:1fr!important;gap:7px!important;padding:8px!important;border-radius:18px!important;background:rgba(10,8,25,.96)!important;border:1px solid rgba(167,139,250,.28)!important;box-shadow:0 24px 70px rgba(0,0,0,.64)!important;z-index:80!important;}
  .staris-main--chat .staris-topbar-right.is-chat-menu-open .staris-chat-style-toggle{display:grid!important;}
}

@media(max-width:430px){
  .staris-main--chat .staris-topbar-right{grid-template-columns:34px 42px minmax(118px,1fr) minmax(78px,.72fr)!important;gap:6px!important;}
  .staris-main--chat .st-insights-btn{width:42px!important;padding:0!important;}
  .staris-main--chat .st-insights-btn span{display:none!important;}
  .staris-main--chat .staris-mobile-chat-switch-btn{font-size:11.5px!important;padding:0 8px!important;}
  .staris-main--chat .staris-love-active .slove-active-copy strong{font-size:11px!important;}
  .staris-main--chat .staris-love-active button[data-staris-love-add-person]{display:none!important;}
}


/* ═══ v12.41 — Love Psychic active person topbar visibility polish ═══ */
/* Desktop: use the available topbar space and make the current-person chip easier to read. */
@media (min-width:981px){
  .staris-topbar-right .staris-love-person-topbar{
    max-width:460px!important;
    flex:0 1 460px!important;
  }
  .staris-topbar-right .staris-love-active{
    height:50px!important;
    min-height:50px!important;
    padding:7px 10px!important;
    border-radius:18px!important;
  }
  .staris-topbar-right .staris-love-active .slove-active-main{
    appearance:none!important;
    border:0!important;
    background:transparent!important;
    padding:0!important;
    margin:0!important;
    color:inherit!important;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    min-width:0!important;
    flex:1 1 auto!important;
    text-align:left!important;
    box-shadow:none!important;
    cursor:pointer!important;
  }
  .staris-topbar-right .slove-active-orb{width:34px!important;height:34px!important;flex:0 0 34px!important;font-size:14px!important;}
  .staris-topbar-right .slove-active-copy span{font-size:8px!important;letter-spacing:.14em!important;}
  .staris-topbar-right .slove-active-copy strong{font-size:14px!important;max-width:185px!important;}
  .staris-topbar-right .slove-active-copy small{font-size:10px!important;max-width:225px!important;}
  .staris-topbar-right .staris-love-active button:not(.slove-active-main){font-size:10px!important;height:26px!important;min-height:26px!important;padding:0 10px!important;}
}

/* Base reset for the new active-person main button. */
.staris-love-active .slove-active-main{
  appearance:none!important;
  border:0!important;
  background:transparent!important;
  padding:0!important;
  margin:0!important;
  color:inherit!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
  flex:1 1 auto!important;
  text-align:left!important;
  box-shadow:none!important;
  cursor:pointer!important;
}
.staris-love-active .slove-active-main:hover{transform:none!important;filter:none!important;}

/* Mobile: keep avatar, insights, chat type, and selected person in one usable row. */
@media (max-width:980px){
  .staris-main--chat .staris-topbar-right{
    grid-template-columns:34px 42px minmax(132px,1fr) minmax(108px,.82fr)!important;
    grid-template-areas:"avatar insights switch person"!important;
    gap:7px!important;
  }
  .staris-main--chat .st-insights-btn{width:42px!important;padding:0!important;}
  .staris-main--chat .st-insights-btn span{display:none!important;}
  .staris-main--chat .staris-love-person-topbar{
    grid-area:person!important;
    display:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    overflow:visible!important;
  }
  .has-love-person-bar[data-staris-active-chat="love"] .staris-main--chat .staris-love-person-topbar{display:block!important;}
  .staris-main--chat .staris-love-active{
    height:40px!important;
    min-height:40px!important;
    border-radius:15px!important;
    padding:0 6px!important;
    gap:4px!important;
    width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .staris-main--chat .staris-love-active .slove-active-main{
    height:100%!important;
    min-width:0!important;
    flex:1 1 auto!important;
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
  }
  .staris-main--chat .staris-love-active .slove-active-orb{
    display:grid!important;
    width:20px!important;
    height:20px!important;
    flex:0 0 20px!important;
    font-size:10px!important;
    place-items:center!important;
  }
  .staris-main--chat .staris-love-active .slove-active-copy{min-width:0!important;display:block!important;}
  .staris-main--chat .staris-love-active .slove-active-copy span,
  .staris-main--chat .staris-love-active .slove-active-copy small{display:none!important;}
  .staris-main--chat .staris-love-active .slove-active-copy strong{
    display:block!important;
    color:#fff!important;
    font-size:11px!important;
    line-height:1!important;
    max-width:72px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .staris-main--chat .staris-love-active .slove-active-actions{display:flex!important;gap:3px!important;margin-left:2px!important;flex:0 0 auto!important;}
  .staris-main--chat .staris-love-active .slove-active-actions button[data-staris-love-change]{display:none!important;}
  .staris-main--chat .staris-love-active .slove-active-actions button[data-staris-love-add-person]{
    display:grid!important;
    place-items:center!important;
    font-size:0!important;
    width:22px!important;
    height:22px!important;
    min-height:22px!important;
    padding:0!important;
    border-radius:999px!important;
  }
  .staris-main--chat .staris-love-active .slove-active-actions button[data-staris-love-add-person]::before{content:'+'!important;font-size:15px!important;color:#ddd6fe!important;}
  .staris-main--chat .staris-mobile-chat-switch-btn{height:40px!important;min-width:0!important;}
}
@media (max-width:380px){
  .staris-main--chat .staris-topbar-right{grid-template-columns:32px 38px minmax(116px,1fr) minmax(96px,.78fr)!important;gap:5px!important;}
  .staris-main--chat .staris-love-active .slove-active-copy strong{max-width:58px!important;font-size:10.5px!important;}
  .staris-main--chat .staris-love-active .slove-active-orb{display:none!important;}
}


/* ═══ v12.42 — Mobile Love person visibility fallback + clearer topbar ═══ */
@media (max-width:980px){
  .staris-main--chat .staris-topbar-right{
    grid-template-columns:34px 42px minmax(150px,1.2fr) minmax(92px,.65fr)!important;
  }
  .staris-main--chat .staris-mobile-chat-switch-btn span{
    font-weight:900!important;
    letter-spacing:-.01em!important;
  }
  /* If the separate active-person chip is present, keep it ultra compact.
     If the browser/cache hides it, the mobile switch label still says Love • Name. */
  .staris-main--chat .staris-love-person-topbar{
    min-width:0!important;
    opacity:1!important;
    visibility:visible!important;
  }
  .has-love-person-bar[data-staris-active-chat="love"] .staris-main--chat .staris-love-person-topbar{display:block!important;}
  .staris-main--chat .staris-love-active{
    background:linear-gradient(135deg,rgba(236,72,153,.28),rgba(124,58,237,.18),rgba(10,15,38,.86))!important;
  }
}
@media (max-width:430px){
  .staris-main--chat .staris-topbar-right{
    grid-template-columns:34px 42px minmax(156px,1fr)!important;
    grid-template-areas:"avatar insights switch"!important;
  }
  .staris-main--chat .staris-love-person-topbar{display:none!important;}
  .staris-main--chat .staris-mobile-chat-switch-btn{font-size:12px!important;}
}

/* ═══ v12.43 — Love Psychic context, next-step hooks, and richer mobile-safe setup ═══ */
.staris-love-setup .slove-context-block{
  margin:12px 0 10px;
  padding:12px;
  border:1px solid rgba(244,114,182,.18);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(236,72,153,.085),rgba(124,58,237,.055));
  box-sizing:border-box;
}
.staris-love-setup .slove-context-title{
  margin:0 0 9px;
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:-.01em;
}
.slove-context-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.slove-context-grid textarea{
  grid-column:1/-1;
  width:100%;
  min-width:0;
  resize:vertical;
  min-height:52px;
  max-height:110px;
  box-sizing:border-box;
  border:1px solid rgba(244,114,182,.22)!important;
  border-radius:13px!important;
  background:rgba(7,5,22,.72)!important;
  color:#fff!important;
  font-size:14px!important;
  line-height:1.35!important;
  padding:12px 13px!important;
  outline:none!important;
  box-shadow:none!important;
  font-family:inherit!important;
}
.slove-context-grid textarea:focus{
  background:rgba(7,5,22,.86)!important;
  border-color:rgba(244,114,182,.56)!important;
  box-shadow:0 0 0 3px rgba(236,72,153,.14)!important;
}
.slove-context-grid textarea::placeholder{color:rgba(233,214,255,.52)!important;opacity:1!important;}
.staris-love-next{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding-top:10px;
  border-top:1px solid rgba(244,114,182,.12);
}
.staris-love-next>span{
  flex:0 0 100%;
  color:rgba(249,168,212,.82);
  font-size:10px;
  line-height:1;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.16em;
}
.staris-love-next button{
  appearance:none;
  border:1px solid rgba(244,114,182,.26);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(236,72,153,.13),rgba(124,58,237,.10));
  color:#fce7f3;
  font-size:11.5px;
  font-weight:850;
  line-height:1;
  padding:9px 11px;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.035);
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.staris-love-next button:hover{transform:translateY(-1px);border-color:rgba(249,168,212,.52);background:rgba(236,72,153,.18);}
@media(max-width:760px){
  .slove-context-grid{grid-template-columns:1fr;gap:8px;}
  .staris-love-setup .slove-context-block{padding:11px;border-radius:15px;}
  .staris-love-next{gap:7px;margin-top:10px;padding-top:9px;}
  .staris-love-next button{font-size:11px;padding:8px 10px;max-width:100%;white-space:normal;line-height:1.2;text-align:left;}
}

/* ═══ v12.44 — Love Psychic delete person + calmer next-question chips ═══ */
.slove-person-grid .slove-person-cardwrap{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:stretch;
}
.slove-person-cardwrap .slove-person-card{width:100%;}
.slove-person-delete{
  appearance:none;
  border:1px solid rgba(248,113,113,.25);
  background:rgba(127,29,29,.18);
  color:#fecaca;
  border-radius:13px;
  min-width:38px;
  padding:0 10px;
  font-weight:900;
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.slove-person-delete:hover{transform:translateY(-1px);border-color:rgba(248,113,113,.55);background:rgba(127,29,29,.32);}
.staris-love-next{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(236,72,153,.14);
}
.staris-love-next span{
  display:block;
  margin-bottom:8px;
  color:#f9a8d4;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.13em;
}
.staris-love-next button{
  margin:0 7px 7px 0;
  padding:8px 13px;
  border-radius:999px;
  border:1px solid rgba(236,72,153,.34);
  background:linear-gradient(135deg,rgba(236,72,153,.18),rgba(124,58,237,.16));
  color:#fff;
  font-weight:850;
  cursor:pointer;
}
@media(max-width:700px){
  .slove-person-grid .slove-person-cardwrap{grid-template-columns:1fr 34px;gap:6px;}
  .slove-person-delete{min-width:34px;border-radius:12px;padding:0;font-size:16px;}
  .staris-love-next{margin-top:9px;padding-top:8px;}
  .staris-love-next span{font-size:9px;margin-bottom:6px;}
  .staris-love-next button{padding:7px 10px;font-size:12px;margin:0 5px 5px 0;max-width:calc(50% - 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}


/* ═══ v12.45 — Love Psychic compact Ask Next chips + cache refresh ═══ */
.staris-love-next{
  margin-top:9px!important;
  padding-top:8px!important;
  gap:6px!important;
  border-top:1px solid rgba(236,72,153,.10)!important;
}
.staris-love-next>span,
.staris-love-next span{
  flex:0 0 100%!important;
  display:block!important;
  margin:0 0 3px!important;
  font-size:8.5px!important;
  line-height:1!important;
  letter-spacing:.12em!important;
  color:rgba(249,168,212,.72)!important;
}
.staris-love-next button{
  margin:0 5px 5px 0!important;
  padding:6px 10px!important;
  min-height:26px!important;
  max-width:100%!important;
  border-radius:999px!important;
  font-size:10.5px!important;
  line-height:1.05!important;
  font-weight:850!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  box-shadow:0 6px 14px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.03)!important;
}
@media(max-width:700px){
  .staris-love-next{
    margin-top:7px!important;
    padding-top:7px!important;
    gap:4px!important;
  }
  .staris-love-next>span,
  .staris-love-next span{
    font-size:7.5px!important;
    margin-bottom:2px!important;
    opacity:.82!important;
  }
  .staris-love-next button{
    padding:5px 8px!important;
    min-height:23px!important;
    font-size:9.5px!important;
    max-width:calc(50% - 6px)!important;
  }
}


/* ═══ v12.46 — pricing restructure + first-month offer paywall ═══ */
.su2-offer{
  margin:16px auto 0;max-width:520px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:12px 14px;border-radius:18px;background:linear-gradient(135deg,rgba(245,158,11,.16),rgba(124,58,237,.16));
  border:1px solid rgba(245,158,11,.32);box-shadow:0 18px 60px rgba(124,58,237,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.su2-offer span{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#fbbf24;white-space:nowrap}
.su2-offer strong{font-size:14px;font-weight:900;color:#fff;letter-spacing:-.02em;text-align:center}
.su2-offer em{font-style:normal;font-size:11px;font-weight:800;color:#fef3c7;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);border-radius:99px;padding:5px 9px;white-space:nowrap}
.su2-plan-offer{border-color:rgba(245,158,11,.45)!important;background:linear-gradient(180deg,rgba(245,158,11,.08),rgba(124,58,237,.07))!important;box-shadow:0 20px 70px rgba(124,58,237,.18)!important}
.su2-promo-price{display:flex!important;align-items:baseline!important;gap:5px!important;flex-wrap:wrap!important}
.su2-promo-price b{font-size:30px;font-weight:950;color:#fff;letter-spacing:-.05em;line-height:1}
.su2-promo-price span{font-size:13px!important;color:#fef3c7!important;font-weight:800!important}
.su2-promo-price small{display:block;flex-basis:100%;font-size:11px;color:rgba(196,181,253,.55);font-weight:700;margin-top:2px}
@media(max-width:640px){
  .su2-offer{grid-template-columns:1fr;gap:5px;text-align:center;margin-top:12px;padding:11px 12px;border-radius:16px}
  .su2-offer strong{font-size:13px}.su2-offer em{justify-self:center;font-size:10.5px;padding:4px 8px}
  .su2-promo-price b{font-size:25px}.su2-promo-price span{font-size:12px!important}
}

/* ═══ v12.47 — higher-converting first-month offer polish ═══ */
.su2-offer-hot{
  max-width:560px!important;
  padding:14px 16px!important;
  background:linear-gradient(135deg,rgba(245,158,11,.28),rgba(6,182,212,.12),rgba(124,58,237,.20))!important;
  border-color:rgba(245,158,11,.62)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 20px 80px rgba(245,158,11,.16),0 26px 90px rgba(124,58,237,.20)!important;
}
.su2-offer-hot strong{font-size:16px!important;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;line-height:1.1!important}
.su2-offer-hot strong del{color:rgba(255,255,255,.46);text-decoration-color:#fb7185;text-decoration-thickness:2px;font-size:13px}
.su2-offer-hot strong b{color:#fff;font-size:21px;font-weight:950;text-shadow:0 0 24px rgba(6,182,212,.55),0 0 45px rgba(124,58,237,.42)}
.su2-plan-offer{
  transform:scale(1.035)!important;
  border-color:rgba(245,158,11,.70)!important;
  background:radial-gradient(circle at 50% 0%,rgba(245,158,11,.18),transparent 46%),linear-gradient(180deg,rgba(6,182,212,.10),rgba(124,58,237,.09))!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 30px 90px rgba(6,182,212,.16),0 20px 90px rgba(124,58,237,.24)!important;
}
.su2-plan-offer:hover{transform:scale(1.045) translateY(-2px)!important}
.su2-deal-pill{display:inline-flex;width:max-content;margin:0 0 7px;padding:4px 9px;border-radius:999px;background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.38);color:#fef3c7;font-size:9px;font-weight:950;letter-spacing:.13em;text-transform:uppercase}
.su2-promo-price{margin-bottom:14px!important}
.su2-promo-price .su2-was{font-size:11px!important;color:rgba(196,181,253,.58)!important;font-weight:850!important;letter-spacing:.01em!important;flex-basis:100%!important;margin-bottom:1px!important}
.su2-promo-price .su2-was del{text-decoration-color:#fb7185;text-decoration-thickness:2px}
.su2-promo-price .su2-then{color:rgba(255,255,255,.68)!important;font-weight:800!important}
.su2-plan-offer .su2-plan-btn{background:linear-gradient(135deg,#06b6d4,#7c3aed)!important;box-shadow:0 12px 34px rgba(6,182,212,.28),0 12px 34px rgba(124,58,237,.22)!important;color:#fff!important;text-shadow:0 1px 0 rgba(0,0,0,.16)}
.su2-dismiss{color:rgba(216,204,255,.76)!important;font-weight:850!important;text-decoration:none!important;border-radius:10px!important}
.su2-dismiss:hover,.su2-dismiss:focus{color:#fff!important;background:rgba(124,58,237,.10)!important;outline:none!important;box-shadow:none!important;text-decoration:none!important}

.stc-chat-limit-promo{padding:12px 0 8px!important;text-align:center!important}
.stc-chat-limit-badge{display:inline-flex;margin:0 auto 8px;padding:4px 10px;border-radius:999px;background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.36);color:#fef3c7;font-size:10px;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
.stc-chat-limit-price{display:flex;align-items:baseline;justify-content:center;gap:7px;margin:4px 0 12px;line-height:1}
.stc-chat-limit-price .stc-was{font-size:12px;color:rgba(196,181,253,.5);font-weight:800}
.stc-chat-limit-price .stc-was del{text-decoration-color:#fb7185;text-decoration-thickness:2px}
.stc-chat-limit-price strong{font-size:29px;color:#fff;font-weight:950;letter-spacing:-.05em;text-shadow:0 0 24px rgba(6,182,212,.55)}
.stc-chat-limit-price em{font-style:normal;color:#fef3c7;font-size:12px;font-weight:850}
.stc-chat-limit-promo .stc-chat-limit-btn{background:linear-gradient(135deg,#06b6d4,#8b5cf6)!important;box-shadow:0 12px 38px rgba(6,182,212,.25),0 12px 36px rgba(124,58,237,.22)!important;font-weight:900!important}
.stc-chat-limit-promo .stc-chat-limit-reset{color:rgba(216,204,255,.62)!important;font-weight:750!important}
@media(max-width:640px){
  .su2-plan-offer{transform:none!important}
  .su2-plan-offer:hover{transform:none!important}
  .su2-offer-hot strong{font-size:13px!important}.su2-offer-hot strong b{font-size:19px!important}
  .stc-chat-limit-price strong{font-size:25px}.stc-chat-limit-badge{font-size:9px}.stc-chat-limit-promo .stc-chat-limit-btn{font-size:12px!important;padding:11px 12px!important}
}

/* ═══ v12.48 — premium promo paywall polish ═══ */
@keyframes su2PremiumIn{
  0%{opacity:0;transform:translateY(28px) scale(.965);filter:blur(7px)}
  62%{opacity:1;transform:translateY(-2px) scale(1.004);filter:blur(0)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes su2OfferPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 24px 90px rgba(245,158,11,.18),0 26px 100px rgba(124,58,237,.20)}
  50%{box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 28px 110px rgba(245,158,11,.28),0 32px 120px rgba(124,58,237,.28)}
}
@keyframes su2AstralGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.07) inset,0 28px 90px rgba(6,182,212,.16),0 22px 100px rgba(124,58,237,.25)}
  50%{box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 34px 120px rgba(6,182,212,.24),0 28px 125px rgba(124,58,237,.34)}
}
.su2-box{
  animation:su2PremiumIn .52s cubic-bezier(.18,.9,.22,1) both!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(168,85,247,.20),transparent 34%),
    radial-gradient(circle at 82% 22%,rgba(6,182,212,.09),transparent 32%),
    linear-gradient(155deg,#130a32 0%,#080421 58%,#040215 100%)!important;
  border-color:rgba(168,85,247,.44)!important;
}
.su2-box::before{background:radial-gradient(circle,rgba(168,85,247,.22) 0%,transparent 68%)!important;animation:su2OfferPulse 4.8s ease-in-out infinite!important}
.su2-head{padding-top:34px!important}
.su2-offer-hot{
  position:relative!important;
  overflow:hidden!important;
  animation:su2OfferPulse 3.8s ease-in-out infinite!important;
}
.su2-offer-hot:before{
  content:'';position:absolute;inset:-1px;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.18) 38%,transparent 54%);
  transform:translateX(-120%);animation:su2Shine 4.4s ease-in-out infinite;pointer-events:none;
}
@keyframes su2Shine{0%,48%{transform:translateX(-120%)}70%,100%{transform:translateX(130%)}}
.su2-offer-hot strong{position:relative;z-index:1;font-size:17px!important;gap:10px!important}
.su2-offer-hot .su2-offer-was{
  color:rgba(255,255,255,.62)!important;
  font-size:15px!important;
  font-weight:950!important;
  letter-spacing:-.02em!important;
}
.su2-offer-hot .su2-offer-was del,
.su2-promo-price .su2-was del,
.sec-price-was del{
  text-decoration:none!important;
  background:linear-gradient(transparent 47%,rgba(251,113,133,.95) 48%,rgba(251,113,133,.95) 56%,transparent 57%)!important;
  padding:0 2px!important;
}
.su2-offer-hot strong b{font-size:24px!important;color:#fff!important}
.su2-offer-hot em{position:relative;z-index:1;background:rgba(0,0,0,.30)!important;border-color:rgba(255,255,255,.14)!important}
.su2-plan{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.su2-plan-offer{
  position:relative!important;
  padding-top:42px!important;
  overflow:hidden!important;
  animation:su2AstralGlow 4.2s ease-in-out infinite!important;
  background:
    radial-gradient(circle at 85% 10%,rgba(245,158,11,.18),transparent 22%),
    radial-gradient(circle at 50% 0%,rgba(6,182,212,.16),transparent 34%),
    linear-gradient(180deg,rgba(15,23,42,.74),rgba(26,11,48,.88))!important;
}
.su2-plan-offer:before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.10),transparent 25%,transparent 72%,rgba(6,182,212,.08));
}
.su2-plan-offer .su2-pop-badge{top:-12px!important;z-index:4!important;box-shadow:0 8px 26px rgba(168,85,247,.58)!important}
.su2-plan-offer .su2-deal-pill{
  position:absolute!important;top:18px!important;right:16px!important;z-index:3!important;
  margin:0!important;padding:6px 10px!important;
  background:linear-gradient(135deg,rgba(245,158,11,.28),rgba(251,191,36,.13))!important;
  border-color:rgba(251,191,36,.62)!important;
  color:#fff7cc!important;
  box-shadow:0 8px 22px rgba(245,158,11,.18),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.su2-plan-offer .su2-plan-name{font-size:19px!important;margin-bottom:12px!important;text-shadow:0 0 26px rgba(6,182,212,.42)!important}
.su2-promo-price{position:relative!important;z-index:2!important;gap:6px!important;margin-bottom:17px!important}
.su2-promo-price .su2-was{
  font-size:14px!important;
  color:rgba(255,255,255,.68)!important;
  font-weight:950!important;
  letter-spacing:-.015em!important;
  margin-bottom:4px!important;
}
.su2-promo-price b{
  font-size:39px!important;
  letter-spacing:-.065em!important;
  color:#fff!important;
  text-shadow:0 0 24px rgba(6,182,212,.58),0 0 50px rgba(124,58,237,.50)!important;
}
.su2-promo-price span{font-size:13px!important;color:#fef3c7!important;font-weight:950!important}
.su2-promo-price .su2-then{font-size:11.5px!important;color:rgba(255,255,255,.72)!important;font-weight:850!important;margin-top:4px!important}
.su2-plan-offer .su2-plan-btn{
  min-height:48px!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#06b6d4 0%,#8b5cf6 55%,#c084fc 100%)!important;
  box-shadow:0 15px 42px rgba(6,182,212,.32),0 16px 46px rgba(124,58,237,.36),inset 0 1px 0 rgba(255,255,255,.22)!important;
}
.su2-plan-offer .su2-plan-btn:hover{filter:brightness(1.08);transform:translateY(-2px)!important}
.su2-dismiss{color:rgba(226,214,255,.82)!important}
.su2-dismiss:hover,.su2-dismiss:focus{background:rgba(168,85,247,.16)!important;color:#fff!important}

@media(max-width:640px){
  .su2-box{animation:su2PremiumIn .42s cubic-bezier(.18,.9,.22,1) both!important}
  .su2-plan-offer{padding-top:38px!important}
  .su2-plan-offer .su2-deal-pill{top:13px!important;right:13px!important;font-size:8px!important;padding:5px 8px!important}
  .su2-promo-price .su2-was{font-size:13px!important}
  .su2-promo-price b{font-size:34px!important}
  .su2-offer-hot .su2-offer-was{font-size:13px!important}
  .su2-offer-hot strong b{font-size:21px!important}
}

/* Embedded Stripe checkout intro-offer sidebar polish */
#sec-shell{box-shadow:0 48px 140px rgba(0,0,0,.82),0 0 0 1px rgba(168,85,247,.34),0 0 90px rgba(124,58,237,.16)!important}
.sec-intro-ribbon{
  background:linear-gradient(135deg,rgba(245,158,11,.32),rgba(124,58,237,.22),rgba(6,182,212,.16))!important;
  border-color:rgba(251,191,36,.64)!important;
  box-shadow:0 0 28px rgba(245,158,11,.24),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.sec-price-row-offer{padding:12px 0 8px!important;border-top:1px solid rgba(245,158,11,.16)!important;border-bottom:1px solid rgba(124,58,237,.16)!important}
.sec-price-row-offer .sec-price{font-size:48px!important;color:#fff!important;letter-spacing:-.07em!important}
.sec-price-was{font-size:16px!important;color:rgba(255,255,255,.64)!important;font-weight:950!important;flex-basis:100%!important;align-self:auto!important}
.sec-price-sub span:first-child{font-size:13px!important;color:#fef3c7!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.06em!important}
.sec-badge-billed{background:rgba(245,158,11,.14)!important;border:1px solid rgba(245,158,11,.25)!important;color:rgba(255,255,255,.82)!important;font-weight:850!important}
.sec-intro-count{background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(124,58,237,.14))!important;border-color:rgba(245,158,11,.48)!important;box-shadow:0 8px 26px rgba(245,158,11,.12)!important}

/* ═══ v12.49 — premium paywall star-field + badge fix ═══ */
.su2-box{
  overflow-x:hidden!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(168,85,247,.18),transparent 34%),
    radial-gradient(circle at 86% 20%,rgba(6,182,212,.08),transparent 32%),
    linear-gradient(155deg,#130a32 0%,#080421 58%,#040215 100%)!important;
}
/* Replace the heavy top-left planet/orb with a lighter star texture */
.su2-box::before{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  top:0!important;
  left:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  z-index:0!important;
  background:
    radial-gradient(circle at 13% 14%,rgba(255,255,255,.75) 0 1px,transparent 1.8px),
    radial-gradient(circle at 20% 22%,rgba(196,181,253,.55) 0 1px,transparent 1.7px),
    radial-gradient(circle at 32% 10%,rgba(255,255,255,.48) 0 .9px,transparent 1.6px),
    radial-gradient(circle at 42% 20%,rgba(251,191,36,.46) 0 1px,transparent 1.8px),
    radial-gradient(circle at 63% 12%,rgba(255,255,255,.52) 0 1px,transparent 1.7px),
    radial-gradient(circle at 77% 18%,rgba(196,181,253,.42) 0 1px,transparent 1.7px),
    radial-gradient(circle at 88% 10%,rgba(255,255,255,.36) 0 .9px,transparent 1.6px),
    linear-gradient(120deg,rgba(168,85,247,.10),transparent 28%,rgba(6,182,212,.05) 72%,transparent)!important;
  opacity:.72!important;
  animation:none!important;
  box-shadow:none!important;
}
/* Keep only a very soft right-side glow, not a strong planet shape */
.su2-box::after{
  width:260px!important;
  height:260px!important;
  top:-90px!important;
  right:-90px!important;
  background:radial-gradient(circle,rgba(6,182,212,.10) 0%,rgba(124,58,237,.06) 42%,transparent 72%)!important;
  opacity:.78!important;
}
.su2-plans{padding-top:14px!important;overflow:visible!important}
.su2-plan{overflow:visible!important}
.su2-plan-offer{
  overflow:visible!important;
  padding-top:48px!important;
}
.su2-plan-offer::before{overflow:hidden!important;border-radius:inherit!important}
.su2-plan-offer .su2-pop-badge{
  top:9px!important;
  z-index:8!important;
  padding:5px 16px!important;
  line-height:1!important;
  box-shadow:0 9px 28px rgba(168,85,247,.58),0 0 22px rgba(192,132,252,.34)!important;
  transform:translateX(-50%)!important;
}
.su2-plan-offer .su2-deal-pill{top:22px!important}
.su2-plan-offer .su2-plan-name{margin-top:4px!important}
@media(max-width:640px){
  .su2-plans{padding-top:10px!important}
  .su2-plan-offer{padding-top:44px!important}
  .su2-plan-offer .su2-pop-badge{top:8px!important;font-size:8.5px!important;padding:5px 12px!important}
  .su2-plan-offer .su2-deal-pill{top:18px!important;right:12px!important}
}

/* ═══ v12.50 — mobile Love Psychic topbar + chat performance polish ═══ */
@media (max-width:980px){
  .staris-main--chat .staris-main-topbar{
    padding:0 10px 7px!important;
    overflow:visible!important;
    position:relative!important;
    z-index:55!important;
  }
  .staris-main--chat .staris-topbar-right{
    display:grid!important;
    grid-template-columns:34px 42px minmax(0,1fr) 70px!important;
    grid-template-areas:"avatar insights switch person"!important;
    gap:7px!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
  }
  .staris-main--chat .staris-mobile-profile-btn{grid-area:avatar!important;position:static!important;transform:none!important;width:34px!important;height:34px!important;display:flex!important;}
  .staris-main--chat .st-insights-btn{grid-area:insights!important;width:42px!important;height:38px!important;padding:0!important;display:inline-flex!important;justify-content:center!important;}
  .staris-main--chat .st-insights-btn span{display:none!important;}
  .staris-main--chat .staris-mobile-chat-switch-btn{grid-area:switch!important;width:100%!important;min-width:0!important;height:40px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;}
  .staris-main--chat .staris-mobile-chat-switch-btn span{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;min-width:0!important;}
  .staris-main--chat .staris-love-person-topbar{
    grid-area:person!important;
    display:none!important;
    width:70px!important;
    min-width:70px!important;
    max-width:70px!important;
    margin:0!important;
    overflow:visible!important;
  }
  .has-love-person-bar[data-staris-active-chat="love"] .staris-main--chat .staris-love-person-topbar{display:block!important;}
  .staris-main--chat .staris-love-active{
    width:70px!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 5px!important;
    border-radius:16px!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    gap:4px!important;
  }
  .staris-main--chat .staris-love-active .slove-active-main,
  .staris-main--chat .staris-love-active .slove-active-copy{display:none!important;}
  .staris-main--chat .staris-love-active .slove-active-actions{
    margin:0!important;
    display:flex!important;
    gap:5px!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .staris-main--chat .staris-love-active .slove-active-actions button{
    display:grid!important;
    place-items:center!important;
    width:27px!important;
    height:27px!important;
    min-height:27px!important;
    padding:0!important;
    border-radius:999px!important;
    font-size:0!important;
  }
  .staris-main--chat .staris-love-active .slove-active-actions button[data-staris-love-change]::before{content:'↔'!important;font-size:14px!important;color:#fbcfe8!important;line-height:1!important;}
  .staris-main--chat .staris-love-active .slove-active-actions button[data-staris-love-add-person]::before{content:'+'!important;font-size:16px!important;color:#ddd6fe!important;line-height:1!important;}
  .staris-chat-style-toggle{z-index:95!important;}
}
@media (max-width:390px){
  .staris-main--chat .staris-main-topbar{padding-left:8px!important;padding-right:8px!important;}
  .staris-main--chat .staris-topbar-right{grid-template-columns:32px 38px minmax(0,1fr) 62px!important;gap:5px!important;}
  .staris-main--chat .staris-love-person-topbar{width:62px!important;min-width:62px!important;max-width:62px!important;}
  .staris-main--chat .staris-love-active{width:62px!important;padding:0 4px!important;}
  .staris-main--chat .staris-love-active .slove-active-actions{gap:4px!important;}
  .staris-main--chat .staris-love-active .slove-active-actions button{width:25px!important;height:25px!important;min-height:25px!important;}
}

/* Hide timestamps on mobile to recover vertical space. Desktop keeps timestamps. */
@media (max-width:700px){
  .staris-chat-thread .staris-msg-time{display:none!important;}
  .staris-msg-body{padding-bottom:14px!important;}
}

/* Let Ask Next chips breathe on mobile instead of cutting text with ellipses. */
@media (max-width:700px){
  .staris-love-next{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .staris-love-next>span,
  .staris-love-next span{
    grid-column:1/-1!important;
  }
  .staris-love-next button{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    min-height:28px!important;
    padding:6px 8px!important;
    font-size:9.5px!important;
    line-height:1.12!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    text-align:center!important;
  }
}

/* Lower GPU/CPU pressure on phones while the AI is typing/reading. */
@media (max-width:700px){
  html.staris-ai-typing .staris-shell::before,
  html.staris-ai-typing .staris-shell::after,
  html.staris-ai-typing .staris-main::before,
  html.staris-ai-typing .staris-main::after{
    animation:none!important;
    transition:none!important;
  }
  html.staris-ai-typing .staris-msg-loading .staris-msg-body{
    box-shadow:0 12px 30px rgba(0,0,0,.18)!important;
  }
}

/* ═══ v12.53 — Love Psychic empty-person state + Add Person-only follow-up ═══ */
.staris-love-empty{
  border-color:rgba(244,114,182,.34)!important;
  background:linear-gradient(135deg,rgba(236,72,153,.20),rgba(124,58,237,.12),rgba(11,18,45,.86))!important;
}
.staris-love-empty .slove-active-copy strong{color:#fff!important;}
.staris-love-empty .slove-active-copy small{color:rgba(252,231,243,.72)!important;}
.staris-ask-next-add-person{
  grid-template-columns:1fr!important;
  max-width:260px!important;
}
.staris-ask-next-add-person button{
  background:linear-gradient(135deg,#ec4899,#8b5cf6)!important;
  border-color:rgba(244,114,182,.45)!important;
  color:#fff!important;
  box-shadow:0 10px 28px rgba(236,72,153,.18)!important;
}
@media (max-width:700px){
  .staris-ask-next-add-person{max-width:210px!important;grid-template-columns:1fr!important;}
  .staris-ask-next-add-person button{min-height:30px!important;font-size:10px!important;}
  .staris-main--chat .staris-love-empty .slove-active-actions button[data-staris-love-add-person]{display:grid!important;}
}