.composer-shell { grid-row: 2; position: relative; inset: auto; width: 100%; z-index: var(--z-composer); flex: none; padding: 12px var(--content-gutter) max(12px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, rgba(7,9,13,.96) 24%, var(--bg) 100%); }
.composer-wrap { width: min(100%, var(--chat)); min-width: 0; margin: 0 auto; }.context-strip { display: flex; align-items: center; gap: 7px; margin: 0 10px 7px; overflow: auto; scrollbar-width: none; }.context-strip:empty { display: none; }.context-chip { min-height: 28px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 9px; background: rgba(15,19,27,.9); padding: 0 9px; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9.5px; }.context-file-tray { display: flex; gap: 7px; overflow: auto; }
.composer { position: relative; min-width: 0; border: 1px solid var(--line-2); border-radius: 24px; background: linear-gradient(180deg, rgba(24,30,42,.97), rgba(19,24,34,.97)); box-shadow: 0 24px 70px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.012); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }.composer:focus-within { border-color: rgba(123,120,255,.42); box-shadow: 0 26px 78px rgba(0,0,0,.46), 0 0 0 3px rgba(123,120,255,.06); }
.composer textarea { display: block; width: 100%; min-height: 62px; max-height: 180px; resize: none; border: 0; outline: 0; background: transparent; color: var(--text); padding: 16px 17px 7px; font-size: 14.5px; line-height: 1.48; }.composer textarea::placeholder { color: #747e8e; }
.composer-row { min-width: 0; min-height: 50px; display: flex; align-items: center; gap: 5px; padding: 6px 9px 9px; }.chip { min-width: 40px; min-height: 40px; border-radius: 10px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); }.chip:hover, .chip.active { background: var(--surface-3); color: var(--text); }.spacer { flex: 1; }.composerHint { color: var(--subtle); font-size: 10.5px; white-space: nowrap; }
.send { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 13px; background: linear-gradient(145deg,var(--accent),#667fff); display: grid; place-items: center; color: #fff; box-shadow: 0 8px 22px rgba(110,103,255,.25); position: relative; }.send .send-icon, .send .stop-icon { position: absolute; transition: opacity .15s ease, transform .15s ease; }.send .stop-icon { opacity: 0; transform: scale(.7); }.send.stop .send-icon { opacity: 0; transform: scale(.7); }.send.stop .stop-icon { opacity: 1; transform: scale(1); }.send.stop { background: var(--surface-4); border: 1px solid var(--line-2); }.send svg { width: 17px; height: 17px; }
.composer-more { display: none; }
.composer-menu { position: absolute; inset: auto 10px calc(100% - 4px) auto; top: auto; right: 10px; width: 210px; }

/* AuAI V6.3 — compact context and stable actions */
.context-file-chip { min-width: 0; max-width: 290px; min-height: 48px; display: grid; grid-template-columns: 36px minmax(0,1fr) 28px; align-items: center; gap: 8px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: rgba(15,19,27,.94); }
.context-file-thumb { width: 36px; height: 36px; overflow: hidden; display: grid; place-items: center; border-radius: 9px; background: var(--surface-3); color: var(--accent-2); font-size: 9px; }
.context-file-thumb img { width: 100%; height: 100%; object-fit: contain; background: var(--surface-2); }
.context-file-copy { min-width: 0; }
.context-file-copy strong,
.context-file-copy small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.context-file-copy strong { font-size: 10px; }
.context-file-copy small { margin-top: 2px; color: var(--subtle); font-size: 8.5px; }
.context-file-remove { width: 28px; height: 28px; border-radius: 8px; color: var(--subtle); }
.context-file-remove:hover { background: var(--surface-3); color: var(--text); }