@import url('/base.css');

/* A dismissible overlay: installation help never adds height above the app. */
.install-card{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:flex-start;gap:12px;width:420px;max-width:calc(100% - 32px);padding:18px 14px 18px 18px;background:#fff;border:1px solid #d8e4ef;border-radius:18px;box-shadow:0 10px 40px #263d3826;color:#30343b}
.install-icon{flex:none;border-radius:12px;background:#f6f7f8}.install-copy{flex:1;min-width:0}.install-copy h2{margin:0 0 5px;font-size:16px;line-height:1.5}.install-copy p{margin:0;font-size:13px;line-height:1.7;color:#586572}.install-copy #installSteps{margin-top:8px;color:#304c60}.install-copy svg{display:inline-block;width:16px;height:16px;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.install-copy button{margin-top:12px;padding:10px 16px;background:var(--brand-yellow);color:#252b32;font-size:13px}.install-copy button:hover{background:#e1ed40}.install-close{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;background:transparent;color:#66707c;font-size:24px;line-height:1}.install-close:hover{background:#edf5fa}
@media(max-width:700px){.install-card{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:420px;padding:14px 10px 14px 14px;gap:10px}.install-icon{width:40px;height:40px}body:has(#workspace:not([hidden]) #live:not([hidden])) .install-card{bottom:calc(88px + env(safe-area-inset-bottom))}.install-close{width:36px;height:36px}}

.imported-files{margin-top:24px;overflow-wrap:anywhere}.imported-files p{padding:10px 0;border-bottom:1px solid #e6ebee}.file-overview{margin:24px 0;border-top:2px solid #dce5e9;padding-top:16px}

.file-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid #e6ebee}.file-row>div{min-width:0;overflow-wrap:anywhere}.file-row button{flex-shrink:0}nav{overflow-x:auto}nav button{white-space:nowrap}

/* Two diagonal accents and a tinted title band, shared by answer/import cards. */
.panel.answer-panel,.upload-status:not(:empty){--card-accent:#579ed8;--card-tint:#f0f6fc;--card-line:#d8e4ef;position:relative;border:1px solid var(--card-line);border-radius:18px;background:#fff;padding:0;color:#304454}
.panel.answer-panel::before,.panel.answer-panel::after,.upload-status:not(:empty)::before,.upload-status:not(:empty)::after{content:"";position:absolute;width:23px;height:23px;border:0 solid var(--card-accent);pointer-events:none;z-index:1}
.panel.answer-panel::before,.upload-status:not(:empty)::before{top:-1px;left:-1px;border-top-width:3px;border-left-width:3px;border-top-left-radius:18px}
.panel.answer-panel::after,.upload-status:not(:empty)::after{right:-1px;bottom:-1px;border-right-width:3px;border-bottom-width:3px;border-bottom-right-radius:18px}
.answer-header,.upload-heading{background:var(--card-tint);border-bottom:1px solid var(--card-line);border-radius:17px 17px 0 0}
.answer-header{padding:20px 28px;gap:12px}.answer-header h2{margin:0;font-size:20px;font-weight:700;letter-spacing:.04em;color:#28445c}.answer-panel>#answer{padding:24px 28px 28px}
.upload-status.success{--card-accent:#57a77f;--card-tint:#f1f8f4;--card-line:#d6e7dd;color:#345747}.upload-status.error{--card-accent:#ce6460;--card-tint:#fcf3f2;--card-line:#ecd9d7;color:#813f38}
.upload-status:not(:empty){margin:16px 0 0}
.upload-heading{display:flex;align-items:center;gap:10px;padding:13px 20px;font-size:15px;line-height:1.5}.upload-body{display:block;padding:16px 20px;line-height:1.8;overflow-wrap:anywhere}
.upload-status.progress .upload-heading::before{content:"";flex:0 0 16px;width:16px;height:16px;box-sizing:border-box;border:2px solid #c4dbea;border-top-color:var(--card-accent);border-radius:50%;animation:import-spin .85s linear infinite}
@keyframes import-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.upload-status.progress .upload-heading::before{animation:none;border-style:dotted}}
@media(max-width:700px){.answer-header{padding:16px 18px}.answer-header h2{font-size:18px}.answer-panel>#answer{padding:18px}.upload-heading{padding:12px 16px}.upload-body{padding:14px 16px}.answer-header .quiet{font-size:12px;padding:8px 0}}