/* ARTIZS.SAY v0.5.2 — right rail alignment + Support/Starter polish */

/* Right rail: one vertical rhythm, never horizontal scroll */
.people-panel{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-gutter:stable;
}
.people-panel>*{max-width:100%;box-sizing:border-box}
.room-info-card,.welcome-card,.daily-topic-card,.support-card-rich,.conversation-starter-card{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}
.daily-topic-card,.support-card-rich,.conversation-starter-card{margin-top:12px!important}
.welcome-card{margin-top:12px!important}
.people-panel img{max-width:100%}

/* Support card — shorter copy, larger readable type, mascot is the visual hero */
.support-card-rich{
  min-height:148px!important;
  padding:17px 94px 16px 16px!important;
  display:flex!important;
  align-items:center!important;
}
.support-card-rich.no-mascot{padding-right:16px!important}
.support-card-rich-copy{width:100%!important;max-width:150px!important}
.support-card-headline strong{font-size:14px!important;line-height:1.28!important;letter-spacing:-.02em}
.support-card-headline>span{font-size:16px!important}
.support-card-rich-copy>p{margin:8px 0 13px!important;font-size:10.5px!important;line-height:1.5!important;color:#67758d!important}
.support-card-cta{margin-top:0!important;padding:9px 13px!important;font-size:9.5px!important;gap:0!important;white-space:nowrap}
.support-card-rich>img{right:-3px!important;bottom:-8px!important;width:104px!important;height:104px!important;max-width:none!important}

/* Conversation starter — 3 fast choices + branded mascot */
.conversation-starter-card{
  min-height:208px;
  padding:15px 76px 15px 15px!important;
}
.conversation-starter-head{position:relative;z-index:2;gap:9px!important}
.conversation-starter-head strong{font-size:12.5px!important;line-height:1.3!important}
.conversation-starter-head small{font-size:9px!important;line-height:1.4!important;margin-top:3px!important}
.starter-options{position:relative;z-index:2;display:grid;gap:7px;margin-top:13px}
.starter-option{
  width:100%;border:1px solid #e8e3f6;background:rgba(255,255,255,.8);color:#403a56;
  border-radius:12px;padding:9px 10px;text-align:left;font-size:9.5px;font-weight:750;line-height:1.35;
  transition:.15s ease;overflow-wrap:anywhere;
}
.starter-option:hover{background:#fff;border-color:#cfc4ef;transform:translateX(1px)}
.conversation-starter-mascot{
  position:absolute;right:-3px;bottom:-5px;width:82px;height:82px;object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(92,70,155,.13));pointer-events:none;z-index:1;
}

/* Support modal — QR artwork first, fewer nested boxes */
.support-modal{width:min(440px,100%)!important;padding:24px 22px 20px!important}
.support-modal h2{font-size:24px!important;letter-spacing:-.04em;margin-bottom:6px!important}
.support-modal #supportModalIntro{font-size:12px!important;line-height:1.5!important;margin-bottom:18px!important;color:#737b89!important}
.support-amount-field{margin-bottom:6px!important}
.money-input{border-radius:14px!important;min-height:50px!important}
.money-input input{font-size:17px!important;padding:13px 12px!important}
.money-input b{font-size:17px!important}
.support-qr-hero{
  position:relative;display:grid;place-items:center;margin:4px 0 14px;padding:2px 0 4px;
  background:transparent;border:0;border-radius:0;overflow:visible;
}
.support-qr-hero>#supportQr{
  display:block;width:min(86%,310px);height:auto;max-height:330px;object-fit:contain;
  background:transparent;border:0;border-radius:0;box-shadow:none;
}
.support-modal-mascot{
  position:absolute!important;right:0!important;bottom:0!important;width:72px!important;height:72px!important;
  object-fit:contain!important;filter:drop-shadow(0 8px 16px rgba(15,23,42,.14));pointer-events:none;
}
.support-proof-field{display:block;margin-top:2px!important}
.support-proof-picker{
  position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  border:1px dashed #d7dce5;border-radius:14px;background:#fafbfc;color:#4f5866;font-size:11px;font-weight:850;cursor:pointer;
}
.support-proof-picker:hover{border-color:#aeb8c7;background:#f6f8fb}
.support-proof-picker b{font-size:16px;font-weight:600}
.support-proof-picker input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.support-modal .primary-btn{min-height:46px;border-radius:13px!important;font-size:12px!important;margin-top:12px!important}
.support-modal .text-btn{margin-top:7px!important}

/* Dark mode */
html[data-theme="dark"] .support-card-rich-copy>p{color:#aab6c8!important}
html[data-theme="dark"] .starter-option{background:rgba(18,15,27,.86);border-color:#3b3150;color:#eee9f8}
html[data-theme="dark"] .starter-option:hover{background:#181321;border-color:#5b477b}
html[data-theme="dark"] .support-proof-picker{background:#111820;border-color:#35404d;color:#c9d1dc}

@media(max-width:1180px){
  .support-card-rich{padding-right:86px!important}
  .support-card-rich>img{width:96px!important;height:96px!important}
  .conversation-starter-card{padding-right:70px!important}
  .conversation-starter-mascot{width:76px;height:76px}
}