/* Nav, header, composer chrome — icons, full-width input bar, presence */

.ui-icon {
    display: block;
    fill: none;
    flex-shrink: 0;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
    width: 17px;
}

.btn-attach .ui-icon {
    height: 18px;
    width: 18px;
}

.rail-icon-btn,
.mini-icon-btn,
.btn-attach {
    font-size: 0;
    line-height: 0;
}

.rail-icon-btn {
    color: var(--accent);
}

/* Composer chrome — capsule + dock live in app-layout.css */
.chat-main > .input-bar {
    border: none;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: var(--space-2);
    margin: 0;
    max-width: none;
    width: auto;
}

#messageInput {
    overflow-x: hidden;
    overflow-y: hidden;
    resize: none;
}

/* Presence in chat header */
.presence-badge {
    align-items: center;
    display: inline-flex;
    font-family: var(--f-ui);
    font-size: 12px;
    font-weight: 500;
    gap: 6px;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
}

.presence-dot {
    border-radius: 50%;
    flex-shrink: 0;
    height: 7px;
    width: 7px;
}

.presence-badge--online {
    color: var(--green);
}

.presence-badge--online .presence-dot {
    background: var(--green);
    box-shadow: 0 0 0 2px var(--green-20);
}

.presence-badge--offline {
    color: var(--text-secondary);
}

.presence-badge--offline .presence-dot {
    background: var(--text-secondary);
    opacity: 0.55;
}

.presence-badge--typing {
    color: var(--text-secondary);
}

/* ─── Composer row — AiChatInput-style ─── */
.input-row {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    gap: 8px;
    min-height: 44px;
    padding: 0;
}

.input-row .btn-attach,
.input-row .composer-actions {
    align-self: center;
}

/* Multiline layout handled by #page-chat .composer-shell in app-layout.css */
.input-row.is-composer-multiline:not(.composer-shell) {
    align-items: flex-end;
}

.input-row.is-composer-multiline:not(.composer-shell) .btn-attach,
.input-row.is-composer-multiline:not(.composer-shell) .composer-actions {
    align-self: flex-end;
}

.input-row:focus-within {
    background: transparent;
    border: none;
    box-shadow: none;
}

.composer-field {
    align-items: center;
    display: flex;
    flex: 1;
    min-height: 44px;
    min-width: 0;
}

.composer-field #messageInput {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box;
    line-height: 22px;
    max-height: none;
    min-height: 0;
    overflow-y: auto;
    padding: 11px 14px !important;
    width: 100%;
}

.composer-field #messageInput:hover:not(:disabled) {
    background: transparent !important;
    border: none !important;
}

.composer-field #messageInput:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.composer-actions {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    gap: 4px;
    height: auto;
    min-height: 36px;
}

.composer-emoji-wrap {
    position: relative;
}

.composer-emoji-picker {
    background: var(--overlay-bg, var(--theme-section, #131313));
    border: 1px solid var(--overlay-border, color-mix(in srgb, var(--theme-tint, #ffffff) 10%, transparent));
    border-radius: 12px;
    bottom: calc(100% + 8px);
    box-shadow: var(--overlay-shadow);
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px;
    position: absolute;
    right: 0;
    width: 160px;
    z-index: 30;
}

.composer-emoji-picker.hidden {
    display: none;
}

.composer-emoji-item {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    font-size: 18px;
    height: 34px;
    justify-content: center;
    line-height: 1;
    transition: background 0.15s ease, transform 0.15s ease;
    width: 34px;
}

.composer-emoji-item:hover {
    background: color-mix(in srgb, var(--theme-text, #ffffff) 8%, transparent);
    transform: scale(1.08);
}

.input-row .btn-attach {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    box-sizing: border-box;
    color: var(--text-secondary);
    display: inline-flex;
    flex-shrink: 0;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.input-row .btn-attach:hover:not(:disabled) {
    background: var(--row-hover);
    border-color: transparent;
    color: var(--text);
}

.input-row .btn-attach:disabled {
    cursor: default;
    opacity: 0.35;
}

#sendBtn {
    align-items: center;
    background: color-mix(in srgb, var(--theme-text, #ffffff) 6%, transparent) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    box-sizing: border-box;
    color: var(--text) !important;
    display: inline-flex !important;
    font-family: var(--f-ui) !important;
    height: 44px;
    justify-content: center;
    min-width: 44px;
    padding: 0 !important;
    width: 44px;
}

#sendBtn .ui-icon {
    height: 16px;
    width: 16px;
    transform: translateX(-1px);
}

#sendBtn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--theme-text, #ffffff) 10%, transparent) !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--theme-text, #fff) !important;
}

#sendBtn:disabled {
    opacity: 0.35 !important;
}

#uiMessageSearchInput:focus,
#uiMessageSearchInput:focus-visible,
#uiContactSearch:focus,
#uiContactSearch:focus-visible {
    border-color: var(--border-subtle, color-mix(in srgb, var(--theme-tint, #ffffff) 10%, transparent));
    box-shadow: none;
    outline: none;
}

/* ─── Smart paste attachments ─── */
.paste-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 2px 0 4px;
}

.paste-attachments.hidden {
    display: none;
}

.paste-card-wrap {
    position: relative;
}

.paste-card {
    backdrop-filter: blur(22px) saturate(130%);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
    background: color-mix(in srgb, var(--theme-section, #121212) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-tint, #ffffff) 10%, transparent);
    border-radius: 16px;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 color-mix(in srgb, var(--theme-tint, #ffffff) 6%, transparent);
    color: var(--text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 104px;
    overflow: hidden;
    padding: 12px 14px;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease;
    width: 240px;
}

.paste-card:hover:not(:disabled) {
    background: color-mix(in srgb, var(--theme-section, #161616) 90%, transparent);
    border-color: color-mix(in srgb, var(--theme-tint, #ffffff) 14%, transparent);
}

.paste-card:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--theme-tint, #ffffff) 28%, transparent);
    outline-offset: 2px;
}

.paste-card:disabled {
    cursor: default;
    opacity: 0.5;
}

.paste-card-title {
    color: var(--text);
    font-family: var(--f-ui);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.paste-card-preview {
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
    color: var(--text-secondary);
    flex: 1;
    font-family: var(--f-ui);
    font-size: 12px;
    line-height: 1.5;
    mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
    margin-top: 6px;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.paste-card-remove {
    align-items: center;
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    background: color-mix(in srgb, var(--theme-section, #161616) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-tint, #ffffff) 12%, transparent);
    border-radius: 999px;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    height: 22px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: -6px;
    top: -6px;
    transition: color 0.15s ease, opacity 0.15s ease, background 0.15s ease;
    width: 22px;
}

.paste-card-remove .ui-icon {
    height: 12px;
    width: 12px;
}

.paste-card-remove:hover:not(:disabled) {
    background: color-mix(in srgb, var(--theme-section, #202020) 94%, transparent);
    color: var(--text);
}

.paste-card-remove:disabled {
    cursor: default;
    opacity: 0.4;
}

@media (hover: hover) and (pointer: fine) {
    .paste-card-remove {
        opacity: 0;
    }

    .paste-card-wrap:hover .paste-card-remove,
    .paste-card-remove:focus-visible {
        opacity: 1;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .paste-card,
    .paste-card-remove {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--theme-section, #1a1a1a);
    }
}

.paste-editor-overlay {
    align-items: center;
    background: transparent;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding: 28px 24px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 80;
}

/* Scrim fades in — keeps blur compiled while opacity animates (no pop/flicker) */
.paste-editor-overlay::before {
    backdrop-filter: blur(13px) saturate(135%);
    -webkit-backdrop-filter: blur(13px) saturate(135%);
    background: rgba(0, 0, 0, 0.44);
    content: '';
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
}

.paste-editor-overlay.is-open::before {
    opacity: 1;
}

.paste-editor-overlay.hidden {
    display: none;
}

.paste-editor-panel {
    background: var(--nexa-aside-fill, #161920);
    border: 1px solid color-mix(in srgb, var(--theme-tint, #fff) 6%, transparent);
    border-radius: 24px;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--theme-tint, #ffffff) 5%, transparent),
        0 28px 80px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    max-height: min(920px, calc(100vh - 28px));
    max-width: 640px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    transform: translateY(8px);
    transition:
        opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    width: min(640px, 100%);
    z-index: 1;
}

.paste-editor-overlay.is-open .paste-editor-panel {
    opacity: 1;
    transform: translateY(0);
}

.paste-editor-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 14px 16px 10px;
}

.paste-editor-head-copy {
    min-width: 0;
}

.paste-editor-kicker {
    color: var(--theme-text-muted, #8a8a8a);
    font-family: var(--f-ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.paste-editor-title {
    color: var(--text);
    font-family: var(--f-ui);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0;
}

.paste-editor-head-meta {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    padding-top: 2px;
}

.paste-editor-count {
    color: var(--theme-text-muted, #6e6e6e);
    font-family: var(--f-ui);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    margin: 0;
}

.paste-editor-body {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    width: 100%;
}

.paste-editor-textarea {
    background: transparent;
    border: none;
    box-shadow: none;
    box-sizing: border-box;
    color: var(--theme-text, #e4e4e7);
    display: block;
    font-family: var(--f-ui);
    font-size: 15px;
    font-weight: 400;
    height: 520px;
    letter-spacing: -0.011em;
    line-height: 1.7;
    max-height: 68vh;
    outline: none;
    padding: 18px 20px 24px;
    resize: none;
    scrollbar-width: thin;
    width: 100%;
}

.paste-editor-textarea:focus,
.paste-editor-textarea:focus-visible {
    border: none;
    box-shadow: none;
    outline: none;
}

.paste-editor-fade {
    left: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
    transition: opacity 0.18s ease;
    z-index: 2;
}

/* Hide fades while the panel entrance animates — avoids compositor freeze/banding */
.paste-editor-overlay.is-entering .paste-editor-fade {
    opacity: 0 !important;
    transition: none;
}

.paste-editor-fade--top {
    height: 52px;
    top: 0;
}

.paste-editor-fade--bottom {
    bottom: 0;
    height: 64px;
}

.paste-editor-fade__tint {
    inset: 0;
    position: absolute;
}

/* Seamless ease into solid panel color */
.paste-editor-fade--top .paste-editor-fade__tint {
    background: linear-gradient(
        to bottom,
        var(--nexa-aside-fill, #161920) 0%,
        color-mix(in srgb, var(--nexa-aside-fill, #161920) 72%, transparent) 42%,
        color-mix(in srgb, var(--nexa-aside-fill, #161920) 28%, transparent) 78%,
        transparent 100%
    );
}

.paste-editor-fade--bottom .paste-editor-fade__tint {
    background: linear-gradient(
        to top,
        var(--nexa-aside-fill, #161920) 0%,
        color-mix(in srgb, var(--nexa-aside-fill, #161920) 72%, transparent) 42%,
        color-mix(in srgb, var(--nexa-aside-fill, #161920) 28%, transparent) 78%,
        transparent 100%
    );
}

.paste-editor-overlay.has-overflow-top:not(.is-entering) .paste-editor-fade--top,
.paste-editor-overlay.has-overflow-bottom:not(.is-entering) .paste-editor-fade--bottom {
    opacity: 1;
}

.paste-editor-foot {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 12px 16px 14px;
}

.paste-editor-remove {
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--theme-text-muted, #8a8a8a);
    cursor: pointer;
    font-family: var(--f-ui);
    font-size: 13px;
    font-weight: 500;
    margin-left: -8px;
    padding: 8px 10px;
    transition: color 0.15s ease, background 0.15s ease;
}

.paste-editor-remove:hover {
    background: color-mix(in srgb, var(--theme-text, #ffffff) 4%, transparent);
    color: var(--theme-text, #f4f4f5);
}

.paste-editor-save {
    background: var(--theme-text, #f4f4f5);
    border: none;
    border-radius: 12px;
    color: var(--theme-bg, #0a0a0a);
    cursor: pointer;
    font-family: var(--f-ui);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.015em;
    padding: 10px 18px;
    transition: background 0.15s ease;
}

.paste-editor-save:hover {
    background: var(--theme-text, #fff);
}

.paste-editor-save:active {
    background: var(--theme-text, #e4e4e7);
}

.paste-editor-save:disabled {
    cursor: default;
    opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
    .paste-editor-overlay::before,
    .paste-editor-panel {
        transition: none !important;
    }
}

@media (max-width: 760px) {
    .paste-editor-overlay {
        align-items: stretch;
        padding: 16px 12px max(16px, env(safe-area-inset-bottom, 0px));
    }

    .paste-editor-panel {
        border-radius: 20px;
        flex: 1;
        max-height: none;
        max-width: none;
        min-height: min(780px, calc(100dvh - 32px));
        padding: 0;
        width: 100%;
    }

    .paste-editor-body {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-height: 0;
    }

    .paste-editor-textarea {
        flex: 1;
        height: auto;
        max-height: none;
        min-height: min(520px, 62dvh);
    }
}