/* ----- Full-height app shell ----- */
html, body { height: 100%; margin: 0; }
body { display: flex; justify-content: center; background: var(--pico-background-color); }
#app { display: flex; flex-direction: column; height: 100%; width: 100%; max-width: 640px; }

/* ----- Header ----- */
.app-header { display: flex; align-items: center; justify-content: space-between;
              padding: 0.6rem 1rem; border-bottom: 1px solid var(--pico-muted-border-color);
              background: var(--pico-card-background-color); }
.app-brand  { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--pico-color); font-weight: 700; }
.app-logo   { width: 30px; height: 30px; background: var(--pico-primary-background); color: #fff;
              border-radius: 8px; display: flex; align-items: center; justify-content: center;
              font-size: 16px; font-weight: 700; }

/* ----- Message area ----- */
.msg-list  { flex: 1; overflow-y: auto; padding: 1rem; display: flex;
             flex-direction: column; gap: 0.8rem; -webkit-overflow-scrolling: touch; }

/* ----- Chat bubbles ----- */
.msg       { display: flex; gap: 0.5rem; align-items: flex-start; max-width: 85%;
             animation: fadeUp 0.2s ease-out; }
.msg.user  { align-self: flex-end; flex-direction: row-reverse; }
.msg.bot   { align-self: flex-start; }
.msg-av    { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: flex;
             align-items: center; justify-content: center; font-size: 14px; }
.msg.bot .msg-av  { background: var(--pico-primary-focus); color: var(--pico-primary-background); }
.msg.user .msg-av { background: var(--pico-muted-border-color); color: var(--pico-muted-color); font-size: 12px; }

.bubble    { padding: 0.6rem 0.9rem; line-height: 1.65; font-size: 0.92rem;
             border-radius: 12px; word-break: break-word;
             background: var(--pico-card-background-color);
             border: 1px solid var(--pico-muted-border-color); }
.msg.bot .bubble  { border-top-left-radius: 4px; }
.msg.user .bubble { border-top-right-radius: 4px; }

/* Typing dots */
.dot-typing span { display: inline-block; width: 6px; height: 6px; margin: 0 2px;
                   border-radius: 50%; background: var(--pico-muted-color);
                   animation: blink 1.4s infinite both; }
.dot-typing span:nth-child(2) { animation-delay: 0.2s; }
.dot-typing span:nth-child(3) { animation-delay: 0.4s; }

/* ----- Input area ----- */
.input-bar { display: flex; gap: 0.5rem; padding: 0.7rem 1rem;
             padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
             border-top: 1px solid var(--pico-muted-border-color);
             background: var(--pico-card-background-color); }
.input-bar textarea { flex: 1; resize: none; min-height: 2.6rem; max-height: 7rem;
                      margin-bottom: 0; font-size: 0.95rem; }
.input-bar button[type=submit] { width: 2.8rem; padding: 0; margin-bottom: 0; flex-shrink: 0; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes blink  { 0%,80%,100% { opacity: 0.3; } 40% { opacity: 1; } }

/* Markdown in bubbles */
.bubble p   { margin-bottom: 0.4em; }
.bubble p:last-child { margin-bottom: 0; }
.bubble ul, .bubble ol { padding-left: 1.2em; margin: 0.3em 0; }
.bubble li  { margin: 0.15em 0; }

/* ----- Action buttons ----- */
.action-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.action-btn { font-size: 0.82rem; padding: 0.3rem 0.7rem; border-radius: 8px;
              cursor: pointer; border: 1px solid var(--pico-primary-background);
              background: var(--pico-card-background-color);
              color: var(--pico-primary-background); transition: all 0.15s; }
.action-btn:hover:not(:disabled) { background: var(--pico-primary-background); color: #fff; }
.action-btn:disabled { opacity: 0.45; cursor: default; }

/* ----- Artifact card ----- */
.artifact-card { border: 1px solid var(--pico-muted-border-color); border-radius: 10px;
                 overflow: hidden; margin-top: 0.5rem; background: var(--pico-card-background-color); }
.artifact-header { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.8rem;
                   font-size: 0.82rem; font-weight: 600; color: var(--pico-color);
                   border-bottom: 1px solid var(--pico-muted-border-color);
                   background: color-mix(in srgb, var(--pico-primary-background) 6%, transparent); }
.artifact-body  { padding: 0.7rem 0.8rem; max-height: 400px; overflow-y: auto;
                  font-size: 0.88rem; line-height: 1.7; }
.artifact-body p { margin-bottom: 0.4em; }
.artifact-body p:last-child { margin-bottom: 0; }
.artifact-body ul, .artifact-body ol { padding-left: 1.2em; margin: 0.3em 0; }
.artifact-body li { margin: 0.15em 0; }
.artifact-body pre { white-space: pre-wrap; font-family: inherit; font-size: 0.86rem; margin: 0.4em 0; }
.artifact-footer { display: flex; gap: 0.4rem; padding: 0.4rem 0.8rem;
                   border-top: 1px solid var(--pico-muted-border-color); }
.artifact-footer button { font-size: 0.78rem; padding: 0.25rem 0.6rem; margin: 0; }

/* Document type (non-previewable file) */
.artifact-file { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 0; }
.artifact-file-icon { font-size: 2rem; }
.artifact-file-info { font-size: 0.85rem; color: var(--pico-muted-color); }

/* Compact attachment line (document / image) */
.artifact-attach { display: inline-flex; align-items: center; gap: 0.35rem;
                   margin: 0.5rem 0; padding: 0.35rem 0.7rem; border-radius: 8px;
                   font-size: 0.88rem; cursor: pointer;
                   background: color-mix(in srgb, var(--pico-primary-background) 8%, transparent);
                   border: 1px solid var(--pico-muted-border-color);
                   transition: background 0.15s; }
.artifact-attach:hover { background: color-mix(in srgb, var(--pico-primary-background) 18%, transparent); }
.artifact-attach.disabled { opacity: 0.55; cursor: default; }
.artifact-attach-icon { font-size: 1.1rem; flex-shrink: 0; }
.artifact-attach-name { font-weight: 500; }
.artifact-attach-hint { font-size: 0.8rem; color: var(--pico-muted-color); margin-left: 0.15rem; }
.artifact-attach-hint::before { content: "· "; }

/* Image type */
.artifact-overlay { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,0.85);
                    display: flex; align-items: center; justify-content: center; cursor: pointer; }
.artifact-overlay img { max-width: 95vw; max-height: 95vh; border-radius: 6px; }
.artifact-overlay-close { position: fixed; top: 1rem; right: 1rem; z-index: 1000;
                          color: #fff; font-size: 1.8rem; cursor: pointer; opacity: 0.7;
                          background: none; border: none; line-height: 1; }
.artifact-overlay-close:hover { opacity: 1; }

/* ----- Slot-filling progress indicator ----- */
.slot-progress { display: flex; align-items: center; gap: 0.3rem; padding: 0.45rem 1rem;
                 border-top: 1px solid var(--pico-muted-border-color);
                 background: var(--pico-card-background-color); overflow-x: auto;
                 font-size: 0.78rem; white-space: nowrap; }
.slot-step { display: flex; align-items: center; gap: 0.2rem; padding: 0.15rem 0.4rem;
             border-radius: 6px; transition: all 0.2s; }
.slot-step.filled   { color: var(--pico-primary-background); opacity: 0.7; }
.slot-step.current  { color: var(--pico-primary-background); font-weight: 600;
                      background: color-mix(in srgb, var(--pico-primary-background) 10%, transparent); }
.slot-step.remaining { color: var(--pico-muted-color); opacity: 0.5; }
.slot-sep { color: var(--pico-muted-color); opacity: 0.35; font-size: 0.7rem; }