/* ARTIZS.SAY v0.5.7 — Focus chat layout + compact support + separate Emoji / Sticker */

/* Brand presence: make the real artwork noticeably larger, while keeping auto-fit cropping. */
.brand-logo-only{
  height:96px!important;
  padding:8px 4px 10px!important;
  justify-content:center!important;
}
.brand-logo-viewport{
  width:min(214px,100%)!important;
  height:76px!important;
  margin-inline:auto;
}
.brand-logo-only .brand-wordmark{font-size:22px!important}

/* Composer: image / emoji / sticker are three separate tools. */
.composer{grid-template-columns:36px 36px 36px minmax(0,1fr) auto!important}
.emoji-tool-btn svg,.sticker-tool-btn svg{pointer-events:none}
.emoji-popover,.sticker-popover{
  position:absolute;
  left:16px;
  right:16px;
  bottom:72px;
  width:auto;
  background:#fff;
  border:1px solid #e3e5ea;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(23,26,32,.14);
  padding:10px;
  z-index:55;
  overflow-x:hidden!important;
}
.emoji-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:7px;width:100%}
.emoji-btn{height:42px;border:0;background:#f4f5f7;border-radius:12px;font-size:22px;display:grid;place-items:center;padding:0}
.emoji-btn:hover{background:#e9ebef;transform:translateY(-1px)}

/* Sticker library is entitlement-first, never a shop shelf. No locked previews or prices. */
.sticker-grid{display:block!important;width:100%!important}
.sticker-section-head.supporter-head.clean{margin:0 2px 9px!important;padding:0!important;border:0!important}
.sticker-supporter-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.sticker-supporter-grid .sticker-btn{height:104px!important;background:#faf9ff!important;border:1px solid #ece8fb!important}
.sticker-supporter-grid .artizs-reward-sticker.compact{width:90px!important;height:90px!important}
.sticker-empty-state{min-height:128px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;color:#6f7783}
.sticker-empty-icon{width:34px;height:34px;border-radius:11px;background:#f4f1ff;color:#7c68bd;display:grid;place-items:center;font-size:14px;margin-bottom:8px}
.sticker-empty-state strong{font-size:11px;color:#303640}
.sticker-empty-state small{max-width:280px;margin-top:4px;font-size:9px;line-height:1.45;color:#9096a0}

/* Support card: compact CTA, one brand mention, short button. */
.support-card-simple{
  min-height:108px!important;
  padding:13px 88px 13px 14px!important;
  align-items:center!important;
  margin-top:10px!important;
}
.support-card-simple .support-card-rich-copy{max-width:154px!important;width:100%!important}
.support-card-simple .support-card-headline{align-items:flex-start!important;gap:6px!important}
.support-card-simple .support-card-headline strong{font-size:13px!important;line-height:1.22!important}
.support-card-simple .support-card-headline>span{font-size:13px!important;margin-top:1px}
.support-card-simple .support-card-cta{margin-top:10px!important;min-height:33px!important;padding:7px 12px!important;font-size:9px!important;line-height:1!important;white-space:nowrap!important}
.support-card-simple>img{width:88px!important;height:88px!important;right:1px!important;bottom:-2px!important}

/* Conversation starter is a persistent lightweight helper, not a quiet-room-only promo. */
.conversation-starter-card{margin-top:10px!important;padding:13px 72px 13px 13px!important;min-height:0!important}
.conversation-starter-head{gap:8px!important}
.conversation-starter-head strong{font-size:11px!important}
.conversation-starter-head small{font-size:8px!important}
.starter-options{margin-top:9px!important;display:grid!important;gap:5px!important}
.starter-option{min-height:30px!important;padding:6px 9px!important;border-radius:10px!important;font-size:9px!important;text-align:left!important}
.conversation-starter-mascot{width:68px!important;height:68px!important;right:0!important;bottom:-2px!important}

/* Desktop flexible three-column shell. */
@media(min-width:981px){
  .app-shell{
    position:relative;
    --say-left-col:var(--sidebar-w);
    --say-right-col:var(--people-w);
    grid-template-columns:var(--say-left-col) minmax(0,1fr) var(--say-right-col)!important;
    transition:grid-template-columns .24s cubic-bezier(.2,.75,.25,1);
  }
  .app-shell.left-panel-collapsed{--say-left-col:0px}
  .app-shell.right-panel-collapsed{--say-right-col:0px}
  .app-shell .sidebar,.app-shell .people-panel{transition:opacity .16s ease,transform .24s cubic-bezier(.2,.75,.25,1),padding .24s ease,border-color .18s ease}
  .app-shell.left-panel-collapsed .sidebar{opacity:0;transform:translateX(-22px);pointer-events:none;padding-left:0!important;padding-right:0!important;border-right-color:transparent!important;overflow:hidden!important}
  .app-shell.right-panel-collapsed .people-panel{opacity:0;transform:translateX(22px);pointer-events:none;padding-left:0!important;padding-right:0!important;border-left-color:transparent!important;overflow:hidden!important}

  .layout-edge-toggle{
    position:absolute;
    z-index:120;
    top:50%;
    width:25px;
    height:46px;
    border:1px solid #dfe4eb;
    background:rgba(255,255,255,.96);
    color:#596273;
    border-radius:999px;
    box-shadow:0 7px 22px rgba(28,36,48,.08);
    display:grid;
    place-items:center;
    padding:0;
    transform:translateY(-50%);
    transition:left .24s cubic-bezier(.2,.75,.25,1),right .24s cubic-bezier(.2,.75,.25,1),background .15s ease,color .15s ease;
  }
  .layout-edge-toggle:hover{background:#151b24;color:#fff;border-color:#151b24}
  .layout-edge-toggle span{font-size:19px;line-height:1;transform:translateY(-1px)}
  .layout-left-toggle{left:max(7px,calc(var(--say-left-col) - 12px))}
  .layout-right-toggle{right:max(7px,calc(var(--say-right-col) - 12px))}

  .desktop-layout-action{display:inline-flex!important}
  #focusModeToggle.is-active{background:#172033!important;color:#fff!important;border-color:#172033!important}

  .app-shell.cover-panel-collapsed .room-cover{
    height:0!important;
    max-height:0!important;
    min-height:0!important;
    flex-basis:0!important;
    margin-top:0!important;
    margin-bottom:0!important;
    padding:0!important;
    border-width:0!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  .app-shell.cover-panel-collapsed .room-cover>*{visibility:hidden!important}

  .app-shell.focus-chat-mode .room-meta-strip{padding-left:30px!important;padding-right:30px!important}
  .app-shell.focus-chat-mode .messages{padding-left:34px!important;padding-right:34px!important}
  .app-shell.focus-chat-mode .message{max-width:980px}
  .app-shell.focus-chat-mode .composer-wrap{padding-left:28px!important;padding-right:28px!important}
}

html[data-theme="dark"] .emoji-popover,html[data-theme="dark"] .sticker-popover{background:#171d25;border-color:#2c3541}
html[data-theme="dark"] .emoji-btn{background:#232a34;color:#f5f7fa}
html[data-theme="dark"] .emoji-btn:hover{background:#2c3541}
html[data-theme="dark"] .sticker-empty-state strong{color:#edf1f6}
html[data-theme="dark"] .sticker-empty-state small{color:#98a3b2}
html[data-theme="dark"] .sticker-empty-icon{background:#27223a;color:#c5b6ff}
html[data-theme="dark"] .layout-edge-toggle{background:rgba(22,28,36,.96);border-color:#34404f;color:#c8d1dc}
html[data-theme="dark"] .layout-edge-toggle:hover{background:#f3f6fa;color:#111820;border-color:#f3f6fa}

@media(max-width:980px){
  .layout-edge-toggle,.desktop-layout-action{display:none!important}
  .brand-logo-only{height:82px!important}
  .brand-logo-viewport{width:198px!important;height:64px!important}
}
@media(max-width:700px){
  .composer{grid-template-columns:34px 34px 34px minmax(0,1fr) auto!important}
  .emoji-popover,.sticker-popover{left:8px;right:8px;bottom:68px;padding:8px}
  .emoji-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
  .emoji-btn{height:36px;border-radius:10px;font-size:20px}
  .sticker-supporter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .support-card-simple{padding-right:82px!important}
  .support-card-simple>img{width:82px!important;height:82px!important}
}