/* Poor Penny v2.2 — brand logo, hero actions, one simple chat drawer, share, honest desk screen.
   Loaded after styles-v2.css and styles-v21.css; the v2 room, robot and cream/teal/copper identity stay. */

/* ---------- Brand ---------- */
.brand-logo{gap:0;line-height:0}
.brand-logo img{display:block;width:120px;height:auto}
.site-footer .brand-logo img{width:110px}
.site-header{height:auto;min-height:84px;padding-block:8px}

/* ---------- Hero ---------- */
.hero-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.hero-ctas .button{font-size:15px;min-height:46px}
.viewer-line{margin:12px 0 0!important;font:600 13px var(--mono)!important;color:#5b6b52!important;display:flex;align-items:center;gap:8px}
.viewer-line::before{content:'';width:8px;height:8px;border-radius:50%;background:#4f9a6a;box-shadow:0 0 0 4px #4f9a6a22}
.today-facts dd.is-muted{font-weight:600;color:var(--muted)}

/* ---------- Desk screen (no sample client work) ---------- */
.desk-screen{background:#eee2cb;min-height:150px;display:grid;place-items:center;position:relative;padding:14px}
.desk-screen .screensaver{display:grid;justify-items:center;gap:6px;color:#7a6a4c;font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.5px}
.desk-screen .screensaver img{width:64px;height:auto;animation:screensaver-float 6s ease-in-out infinite}
.desk-screen[data-mode=job] .screensaver{display:none}
.desk-screen[data-mode=job]::before{content:attr(data-job);font:600 15px/1.4 Georgia,serif;color:#5d4e33;text-align:center;max-width:260px}
.screen-illustration-note{position:absolute;bottom:6px;left:0;right:0;text-align:center;font:11px var(--mono);color:#9a8a6a;margin:0}
.desk-screen[data-mode=job] .screen-illustration-note{display:none}
.work-progress{display:grid;gap:6px;padding:10px 12px;font:12px var(--mono);color:#65735b;border-top:1px solid #d9dfcf}
.work-progress>div{height:6px;border-radius:3px;background:#dfe7d6;overflow:hidden}
.work-progress>div>span{display:block;height:100%;background:var(--teal)}
@keyframes screensaver-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.motion-paused .desk-screen .screensaver img{animation:none}

/* ---------- Room controls ---------- */
.room-controls{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}

/* ---------- Ledger (honest empty state) ---------- */
#ledger-headline{display:inline}

/* ---------- Share card ---------- */
.share-card{background:#eef3e6}

/* ---------- Chat drawer: one panel, compact, safe-area aware ---------- */
.chat-drawer{height:min(620px,calc(100dvh - 32px));max-height:85dvh}
.chat-header{padding:12px 14px;gap:12px}
.chat-portrait{width:40px;height:auto;flex-shrink:0;filter:drop-shadow(0 2px 2px #0003)}
.chat-header h2{font-size:17px}
.chat-header p{font-size:13px;margin-top:3px;color:#cdd8c4}
.chat-messages{padding:14px}
.chat-message.is-system{align-self:center;background:#f5e9d6;border-color:#e4d3b3;font-size:14px}
.chat-messages>.button{align-self:center}
.quick-replies{padding:0 14px 10px;gap:6px}
.quick-replies button{font-size:14px;min-height:36px;padding:6px 12px;border-radius:18px;background:#f7f7eb;border:1px solid #d7dfc9;color:var(--ink)}
.quick-replies button:hover{background:#eef2e2}
.chat-upsell{margin:0 14px 10px;padding:10px 12px;border:1px dashed #d8b98f;border-radius:10px;background:#fbf2e4;font-size:14px;line-height:1.5;display:grid;gap:8px}
.chat-upsell .button{justify-self:start}
.chat-form{padding:10px 12px 4px}
.chat-form input:disabled{background:#f1f1ea;color:#8b917f}
.chat-footnote{font-size:12px;line-height:1.5;padding:4px 12px calc(10px + env(safe-area-inset-bottom));color:#7d8573;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 6px}
.chat-footnote .text-link{font-size:12px;padding:0;min-height:0}
#chat-allowance:not(:empty)::after{content:' ·'}
@media(max-width:680px){
  /* Keep Penny's face in the first screen: one compact row of hero actions. */
  .hero-ctas{flex-wrap:nowrap;gap:8px;margin-top:10px}
  .hero-ctas .hero-diary,.hero-ctas [data-action=coffee]{display:none!important}
  .hero-ctas .button{flex:1 1 0;min-height:44px;font-size:14px;padding:8px 10px}
  .viewer-line{margin-top:8px!important;font-size:12px!important}
  .chat-drawer{right:0;left:0;bottom:0;width:100%;max-width:none;border-radius:16px 16px 0 0;height:85dvh;max-height:85dvh}
  .chat-portrait{width:34px}
  .hero-ctas .button{flex:1 1 calc(50% - 10px);font-size:14px;padding:10px 12px}
  .brand-logo img{width:96px}
  .desk-screen{min-height:120px}
}
@media(max-width:370px){
  .hero-ctas .button{font-size:13px;padding:8px 6px}
  .today-facts{grid-template-columns:1fr 1fr!important}
  .brand-logo img{width:88px}
}

/* ---------- Hire dialog ---------- */
.kind-switch{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:4px 0 6px}
.kind-switch label{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid #d7dfc9;border-radius:20px;font-size:14px;cursor:pointer;background:#fbfcf4}
.kind-switch label:has(input:checked){border-color:var(--teal);background:#e3eee3;color:#145c53;font-weight:700}
.app-dialog .form-grid{grid-template-columns:1fr}

/* Share confirmation */
.share-fallback{display:grid;gap:8px}
.share-fallback input{width:100%}

@media(prefers-reduced-motion:reduce){.desk-screen .screensaver img{animation:none}}

/* Tablet: give the room the full width so the speech bubble never covers Penny's face. */
@media(min-width:681px) and (max-width:900px){
  .live-room-grid{grid-template-columns:1fr!important}
  .screen-panel{border-left:0!important;border-top:1px solid var(--rule)}
}