/* Homepage playground: the real app's windows (appdemo.js). The windows' insides are the app's own CSS. */
.stage:not(.ready) .ad-win { visibility: hidden; }
.ad-slot { position: relative; height: 500px; }
.ad-side { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ad-ctrl-slot { position: relative; width: 150px; height: 110px; }

/* the windows */
.ad-win { position: absolute; left: 0; top: 0; }
.ad-win iframe { display: block; border: 0; background: transparent; transform-origin: 0 0; }
.ad-control { z-index: 30; }
.ad-reader { z-index: 20; box-shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 22px 60px rgba(0, 0, 0, .5); }
.ad-reader iframe { width: 100%; height: 100%; }
.ad-reader.off { visibility: hidden; pointer-events: none; }
.ad-resize { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; z-index: 2; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, rgba(167, 139, 250, .5) 50%, transparent 58%, transparent 66%, rgba(167, 139, 250, .5) 66%, transparent 74%); }

/* the "Quit Speaklit?" box from the bar's hidden corner ✕ (like the app's own) */
.ad-quit { width: min(340px, calc(100vw - 32px)); padding: 20px 20px 16px; border: 1px solid #3b3158; border-radius: 12px;
  background: #1c1730; color: #e4dcf5; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); font: inherit; }
.ad-quit::backdrop { background: rgba(10, 6, 20, .55); }
.ad-quit b { display: block; font-size: 17px; margin-bottom: 6px; }
.ad-quit p { margin: 0 0 16px; font-size: 14px; line-height: 1.45; color: #b9aed4; }
.ad-quit-btns { display: flex; gap: 8px; justify-content: flex-end; }
.ad-quit-btns button { font: inherit; font-size: 14px; padding: 7px 16px; border-radius: 8px; border: 1px solid #4a3f6b; background: #2a2342; color: #e4dcf5; cursor: pointer; }
.ad-quit-btns button:hover { background: #352c52; }
.ad-quit-btns .ad-quit-yes { background: #c2416b; border-color: #e88aa6; color: #fff; }
.ad-quit-btns .ad-quit-yes:hover { background: #a8325a; }

/* where the reader pops up */
.ad-hint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center;
  border: 1.5px dashed rgba(167, 139, 250, .3); border-radius: 14px; color: #a99dc6; font-size: 14px; background: rgba(255, 255, 255, .015); }
.ad-hint::before { content: ""; width: 54px; height: 40px; margin-bottom: 8px; opacity: .35;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 40' fill='none' stroke='%23c4b5fd' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M27 8C21 3 11 3 3 5v31c8-2 18-2 24 3 6-5 16-5 24-3V5c-8-2-18-2-24 3z'/%3E%3Cpath d='M27 8v31'/%3E%3C/svg%3E"); }
.ad-hint b { color: #e4dcf5; font-size: 16px; font-weight: 600; }
.ad-hint.covered { visibility: hidden; }
.ad-hint.audio-only::after { content: "Text window is off (in ⚙): Speaklit will just talk."; margin-top: 6px; font-size: 12.5px; color: #a78bfa; }
.ad-hint.closed::before { display: none; }
.ad-reopen { margin-top: 10px; font: inherit; font-size: 14px; font-weight: 600; padding: 9px 18px; border: 0; border-radius: 9px; background: #a78bfa; color: #1e1530; cursor: pointer; }
.ad-reopen:hover { background: #c4b5fd; }