.composer-wrap {
            border-top: 1px solid var(--line);
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(8px);
            padding: 12px 18px 18px;
            z-index: 2;
        }

        .composer {
            max-width: 980px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .composer-main {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 12px;
            align-items: end;
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: 18px;
            padding: 10px;
            box-shadow: var(--shadow-soft);
        }

        .prompt-shell {
            position: relative;
            min-width: 0;
        }

        .prompt-document-btn,
        .prompt-camera-btn {
            position: absolute;
            bottom: 8px;
            width: 42px;
            height: 42px;
            border: 1px solid #d6e1ef;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: 0.2s ease;
            box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
        }

        .prompt-document-btn {
            right: 56px;
            background: #ffffff;
            color: #1e3a8a;
        }

        .prompt-camera-btn {
            right: 8px;
            background: linear-gradient(145deg, #1e40af, #2563eb);
            color: #eff6ff;
        }

        .prompt-document-btn:hover {
            background: #f8fbff;
            border-color: #bfdbfe;
            transform: translateY(-1px);
        }

        .prompt-camera-btn:hover {
            filter: brightness(1.05);
            transform: translateY(-1px);
        }

        .prompt-document-btn svg,
        .prompt-camera-btn svg {
            width: 19px;
            height: 19px;
        }

        .image-picker-menu {
            position: absolute;
            right: 8px;
            bottom: 56px;
            min-width: 148px;
            border: 1px solid #d6e1ef;
            border-radius: 12px;
            background: #ffffff;
            box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16);
            padding: 6px;
            z-index: 8;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .image-picker-menu.hidden {
            display: none;
        }

        .image-picker-item {
            border: 1px solid transparent;
            background: #ffffff;
            color: #334155;
            border-radius: 9px;
            padding: 8px 9px;
            font-size: 12px;
            font-weight: 700;
            text-align: left;
            cursor: pointer;
            font-family: "Manrope", sans-serif;
        }

        .image-picker-item:hover {
            background: #f8fbff;
            border-color: #dbe7f7;
        }

        .composer-tools {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            padding-left: 2px;
        }

        .composer-attachment-row {
            display: flex;
            align-items: center;
            min-width: 0;
        }

        .composer-attachment-row.hidden {
            display: none;
        }

        .mode-select,
        .attach-btn {
            border: 1px solid var(--line);
            background: #f8fafc;
            color: #334155;
            border-radius: 10px;
            padding: 7px 10px;
            font-size: 12px;
            font-family: "IBM Plex Mono", monospace;
            outline: none;
            transition: 0.2s ease;
        }

        .mode-select:hover,
        .attach-btn:hover {
            background: #f1f5f9;
            border-color: #cbd5e1;
        }

        .mode-toggle {
            border: 1px solid var(--line);
            background: #f8fafc;
            color: #334155;
            border-radius: 10px;
            padding: 7px 10px;
            font-size: 12px;
            font-family: "IBM Plex Mono", monospace;
            cursor: pointer;
            transition: 0.2s ease;
        }

        .mode-toggle:hover {
            background: #eff6ff;
            border-color: #bfdbfe;
        }

        .mode-toggle.active {
            background: #eaf1ff;
            border-color: #bfdbfe;
            color: #1e3a8a;
        }

        .attach-btn {
            cursor: pointer;
        }

        .attach-input {
            display: none;
        }

        .image-preview {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid #d5e0ee;
            background: #ffffff;
            border-radius: 10px;
            padding: 6px 8px;
            box-shadow: var(--shadow-tiny);
            max-width: min(100%, 560px);
            min-width: 0;
        }

        .image-preview.hidden {
            display: none;
        }

        .document-preview {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid #d5e0ee;
            background: #ffffff;
            border-radius: 10px;
            padding: 6px 8px;
            box-shadow: var(--shadow-tiny);
            max-width: min(100%, 560px);
            min-width: 0;
        }

        .document-preview.hidden {
            display: none;
        }

        .document-icon {
            width: 52px;
            height: 52px;
            border-radius: 8px;
            border: 1px solid #d5e0ef;
            background: linear-gradient(145deg, #1e3a8a, #2563eb);
            color: #eff6ff;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
        }

        .document-meta {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
            flex: 1;
        }

        .document-name {
            font-size: 12px;
            color: #334155;
            max-width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .document-remove {
            border: 1px solid #d6e0ed;
            background: #f8fafc;
            color: #475569;
            font-size: 11px;
            border-radius: 8px;
            padding: 3px 7px;
            cursor: pointer;
        }

        .document-remove:hover {
            border-color: #fecaca;
            background: #fff1f2;
            color: #b91c1c;
        }

        .image-thumb {
            width: 52px;
            height: 52px;
            object-fit: cover;
            border-radius: 8px;
            border: 1px solid #d5e0ef;
            background: #f1f5f9;
        }

        .image-meta {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
            flex: 1;
        }

        .image-name {
            font-size: 12px;
            color: #334155;
            max-width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .image-remove {
            border: 1px solid #d6e0ed;
            background: #f8fafc;
            color: #475569;
            font-size: 11px;
            border-radius: 8px;
            padding: 3px 7px;
            cursor: pointer;
        }

        .image-remove:hover {
            border-color: #fecaca;
            background: #fff1f2;
            color: #b91c1c;
        }

        .user-rich {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: flex-end;
        }

        .user-rich-text {
            white-space: pre-wrap;
        }

        .user-rich-image {
            max-width: min(100%, 320px);
            border-radius: 12px;
            border: 1px solid rgba(219, 234, 254, 0.75);
            box-shadow: 0 10px 20px rgba(30, 58, 138, 0.18);
        }

        .user-rich-document {
            max-width: min(100%, 320px);
            display: inline-flex;
            flex-direction: column;
            gap: 2px;
            border-radius: 12px;
            border: 1px solid rgba(219, 234, 254, 0.75);
            background: rgba(239, 246, 255, 0.72);
            padding: 8px 10px;
            box-shadow: 0 10px 20px rgba(30, 58, 138, 0.14);
            text-align: left;
        }

        .user-rich-document-name {
            font-size: 12px;
            font-weight: 700;
            color: #1e3a8a;
            word-break: break-word;
        }

        .user-rich-document-meta {
            font-size: 10px;
            color: #475569;
        }

        .input {
            width: 100%;
            resize: none;
            min-height: 52px;
            max-height: 180px;
            border-radius: 13px;
            border: 1px solid transparent;
            background: #ffffff;
            padding: 13px 98px 13px 14px;
            font: inherit;
            color: var(--ink);
            outline: none;
        }

        .input:focus {
            border-color: #93c5fd;
            background: #fcfdff;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
        }

        .send {
            align-self: end;
            min-width: 112px;
            height: 52px;
            border: 0;
            border-radius: 12px;
            background: linear-gradient(145deg, #1e3a8a, #1d4ed8);
            color: #eef4ff;
            font-weight: 700;
            cursor: pointer;
            transition: transform 0.2s ease, filter 0.2s ease;
            box-shadow: 0 12px 24px rgba(30, 58, 138, 0.25);
        }

        .send:hover {
            filter: brightness(1.04);
            transform: translateY(-1px);
        }

        .send:disabled {
            opacity: 0.62;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .meta {
            max-width: 980px;
            margin: 8px auto 0;
            color: var(--ink-muted);
            font-size: 12px;
        }

        .main.is-empty-chat {
            position: relative;
        }

        .main.is-empty-chat .messages-wrap {
            overflow: hidden;
        }

        @supports (-webkit-touch-callout: none) {
            body,
            .layout,
            .sidebar,
            .main {
                min-height: -webkit-fill-available;
                height: -webkit-fill-available;
            }

            @media (max-width: 900px) {
                .composer .input {
                    font-size: 16px;
                }
            }
        }

        .main.is-empty-chat .messages {
            min-height: 100%;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding-top: clamp(20px, 8vh, 84px);
            padding-bottom: 24px;
        }

        .main.is-empty-chat .message-row {
            display: none;
        }

        @media (min-width: 901px) {
            .main.is-empty-chat.has-onboarding .messages-wrap {
                overflow: auto;
            }

            .main.is-empty-chat.has-onboarding .composer-wrap {
                position: static;
                left: auto;
                right: auto;
                top: auto;
                transform: none;
                border-top: 1px solid var(--line);
                padding: 12px 18px 18px;
                background: rgba(255, 255, 255, 0.95);
                backdrop-filter: blur(8px);
                z-index: 2;
            }

            .main.is-empty-chat.has-onboarding .composer {
                max-width: 980px;
            }

            .main.is-empty-chat.has-onboarding .meta {
                text-align: left;
                margin-top: 8px;
            }
        }

        .onboarding-panel {
            width: min(100%, 760px);
            border: 1px solid #d7e3f3;
            border-radius: 20px;
            padding: 18px;
            background:
                radial-gradient(48rem 18rem at -8% -32%, rgba(147, 197, 253, 0.24), transparent 68%),
                linear-gradient(160deg, #ffffff, #f7fbff);
            box-shadow: var(--shadow-soft);
            animation: onboarding-rise 0.22s ease both;
        }

        .onboarding-title {
            margin: 0;
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #64748b;
        }

        .onboarding-subtitle {
            margin: 6px 0 0;
            color: #334155;
            font-size: 13px;
            line-height: 1.5;
        }

        .onboarding-chips {
            margin-top: 12px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .onboarding-chip {
            border: 1px solid #d0def0;
            background: #ffffff;
            color: #1e293b;
            border-radius: 999px;
            padding: 8px 12px;
            font-size: 12px;
            line-height: 1.35;
            text-align: left;
            cursor: pointer;
            transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
        }

        .onboarding-chip:hover {
            background: #eef4ff;
            border-color: #b8cdf0;
            transform: translateY(-1px);
        }

        .assistant-quick-actions {
            margin-top: 6px;
            border-top: 1px solid #e4ecf8;
            padding-top: 8px;
        }

        .assistant-quick-actions-label {
            margin: 0;
            font-size: 10px;
            font-weight: 700;
            color: #64748b;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .assistant-quick-actions-chips {
            margin-top: 7px;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .assistant-quick-action-btn {
            border: 1px solid #d2dff1;
            background: #ffffff;
            color: #1e3a8a;
            border-radius: 999px;
            padding: 5px 9px;
            font-size: 11px;
            line-height: 1.2;
            cursor: pointer;
            transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
        }

        .assistant-quick-action-btn:hover {
            background: #ecf3ff;
            border-color: #afc7ea;
            transform: translateY(-1px);
        }

        .assistant-quick-action-btn:disabled {
            opacity: 0.72;
            cursor: default;
            transform: none;
        }

        .assistant-followup {
            margin-top: 8px;
            border-top: 1px dashed #d9e5f5;
            padding-top: 9px;
        }

        .assistant-followup-label {
            margin: 0;
            font-size: 11px;
            font-weight: 700;
            color: #64748b;
            letter-spacing: 0.01em;
        }

        .assistant-followup-chips {
            margin-top: 8px;
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
        }

        .assistant-followup-chip {
            border: 1px solid #ccd9ef;
            background: linear-gradient(160deg, #ffffff, #f3f8ff);
            color: #1e293b;
            border-radius: 999px;
            padding: 6px 10px;
            font-size: 11px;
            line-height: 1.32;
            text-align: left;
            cursor: pointer;
            transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
        }

        .assistant-followup-chip:hover {
            background: #eaf3ff;
            border-color: #aec6ea;
            transform: translateY(-1px);
        }

        .assistant-followup-chip:disabled {
            opacity: 0.7;
            cursor: default;
            transform: none;
        }

        .main.is-empty-chat .composer-wrap {
            position: absolute;
            left: 0;
            right: 0;
            top: 54%;
            transform: translateY(-50%);
            border-top: 0;
            padding-top: 0;
            padding-bottom: 0;
            background: transparent;
            backdrop-filter: none;
            z-index: 5;
        }

        .main.is-empty-chat .composer {
            max-width: 900px;
        }

        .main.is-empty-chat .meta {
            text-align: center;
            margin-top: 10px;
        }

        .typing-indicator {
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-width: min(100%, 260px);
        }

        .typing-status-row {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .typing-status-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 30px;
            height: 20px;
            padding: 0 7px;
            border-radius: 999px;
            border: 1px solid #cfe0fb;
            background: linear-gradient(135deg, #eff6ff, #ffffff);
            color: #1d4ed8;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            font-family: "IBM Plex Mono", monospace;
        }

        .typing-flow {
            border: 1px solid #dbe7f7;
            border-radius: 11px;
            background: linear-gradient(180deg, #ffffff, #f8fbff);
            padding: 7px 9px 8px;
            display: flex;
            flex-direction: column;
            gap: 7px;
        }

        .typing-flow-caption {
            margin: 0;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: #64748b;
            text-transform: uppercase;
        }

        .typing-flow-track {
            position: relative;
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 4px;
            align-items: start;
            min-height: 34px;
        }

        .typing-flow-track::before {
            content: "";
            position: absolute;
            left: 10%;
            right: 10%;
            top: 6px;
            height: 2px;
            border-radius: 999px;
            background: linear-gradient(90deg, #dbeafe, #bfdbfe 30%, #93c5fd 65%, #60a5fa);
            opacity: 0.85;
        }

        .typing-flow-track.is-uplink::before {
            background: linear-gradient(90deg, #bfdbfe, #60a5fa);
        }

        .typing-flow-track.is-downlink::before {
            background: linear-gradient(90deg, #60a5fa, #bfdbfe);
        }

        .typing-flow-track.is-processing::before {
            background: linear-gradient(90deg, #dbeafe, #93c5fd, #2563eb, #1d4ed8);
        }

        .typing-flow-stage {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            text-align: center;
        }

        .typing-flow-node {
            width: 11px;
            height: 11px;
            border-radius: 999px;
            background: #cbd5e1;
            border: 1px solid #94a3b8;
            box-shadow: 0 0 0 2px #ffffff;
            transition: background-color 0.24s ease, border-color 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease;
        }

        .typing-flow-stage.is-complete .typing-flow-node {
            background: #60a5fa;
            border-color: #3b82f6;
            transform: scale(1.03);
        }

        .typing-flow-stage.is-active .typing-flow-node {
            background: #2563eb;
            border-color: #1d4ed8;
            box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px rgba(59, 130, 246, 0.22);
            transform: scale(1.12);
        }

        .typing-flow-track.is-processing .typing-flow-stage.is-active .typing-flow-node {
            box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px rgba(37, 99, 235, 0.3);
        }

        .typing-flow-label {
            font-size: 9px;
            line-height: 1.2;
            color: #64748b;
            font-weight: 600;
        }

        .typing-flow-stage.is-active .typing-flow-label {
            color: #1e40af;
        }

        .typing-flow-packet {
            position: absolute;
            top: 1px;
            left: 10%;
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: #1d4ed8;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
            z-index: 2;
        }

        .typing-flow-track.is-uplink .typing-flow-packet {
            animation: typing-flow-packet-forward 1.55s linear infinite;
        }

        .typing-flow-track.is-downlink .typing-flow-packet {
            animation: typing-flow-packet-backward 1.55s linear infinite;
        }

        .typing-flow-track.is-processing .typing-flow-packet {
            animation: typing-flow-packet-process 1.2s ease-in-out infinite;
        }

        .typing-flow-track.is-finalizing .typing-flow-packet {
            animation: typing-flow-packet-final 0.9s ease-in-out infinite;
        }

        .typing {
            display: inline-flex;
            gap: 5px;
        }

        .typing span {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #94a3b8;
            animation: blink 1.1s infinite ease-in-out;
        }

        .typing span:nth-child(2) {
            animation-delay: 0.15s;
        }

        .typing span:nth-child(3) {
            animation-delay: 0.3s;
        }

        .typing-status-text {
            margin: 0;
            font-size: 12px;
            line-height: 1.45;
            color: #475569;
        }

        .typing-status-text.is-updated {
            animation: typing-status-swap 0.32s ease;
        }

        @keyframes blink {
            0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
            40% { transform: translateY(-4px); opacity: 1; }
        }

        @keyframes typing-status-swap {
            from {
                opacity: 0.2;
                transform: translateY(3px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes typing-flow-packet-forward {
            0% {
                left: 10%;
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                left: 90%;
                opacity: 0;
            }
        }

        @keyframes typing-flow-packet-backward {
            0% {
                left: 90%;
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                left: 10%;
                opacity: 0;
            }
        }

        @keyframes typing-flow-packet-process {
            0% {
                left: 68%;
                transform: scale(0.85);
                opacity: 0.45;
            }
            50% {
                left: 86%;
                transform: scale(1.14);
                opacity: 1;
            }
            100% {
                left: 68%;
                transform: scale(0.85);
                opacity: 0.45;
            }
        }

        @keyframes typing-flow-packet-final {
            0% {
                left: 24%;
                transform: scale(0.8);
                opacity: 0.2;
            }
            50% {
                left: 30%;
                transform: scale(1.2);
                opacity: 1;
            }
            100% {
                left: 24%;
                transform: scale(0.8);
                opacity: 0.2;
            }
        }

        @keyframes onboarding-rise {
            from {
                opacity: 0;
                transform: translateY(8px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .onboarding-panel {
                animation: none;
            }

            .onboarding-chip {
                transition: none;
            }

            .typing span {
                animation: none;
                opacity: 0.8;
            }

            .typing-status-text.is-updated {
                animation: none;
            }

            .typing-flow-node {
                transition: none;
            }

            .typing-flow-packet {
                animation: none;
                opacity: 0;
            }
        }