/**
 * compose_box.css
 * BEM namespace: .compose-box
 *
 * Card with avatar + textarea, ticker chip row, action chip row containing
 * the SentimentToggle + GIF picker trigger + Post button. Animated
 * conic-gradient hairline border via the @property --ang declared in
 * home_page.css.
 */

.compose-box {
    position: relative;
    padding: 18px;
    border-radius: 22px;
    --ang: 0deg;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        conic-gradient(from var(--ang),
            #6366f1 0%, #22d3ee 25%, #a855f7 50%, #22d3ee 75%, #6366f1 100%) border-box;
    border: 1px solid transparent;
    box-shadow: var(--shadow-soft);
    animation: composeBoxSpin 14s linear infinite;
    transition: box-shadow 0.3s, filter 0.3s;
}
.compose-box:focus-within {
    box-shadow: 0 0 0 4px var(--iris-tint), var(--shadow-pop);
    animation-duration: 8s;
    filter: saturate(1.15);
}

@keyframes composeBoxSpin {
    to { --ang: 360deg; }
}

.compose-box__row {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 14px;
    align-items: start;
}

.compose-box__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: white;
    background: linear-gradient(135deg, #6366f1, #22d3ee);
}

.compose-box__textarea {
    width: 100%;
    min-height: 56px;
    resize: none;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    font: 400 16px 'Inter', sans-serif;
    line-height: 1.45;
    padding: 8px 0 0;
    letter-spacing: -0.005em;
    transition: min-height 0.25s ease;
}
.compose-box__textarea:focus { min-height: 100px; }
.compose-box__textarea::placeholder { color: var(--text-3); }

.compose-box__chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.compose-box__ticker-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--iris-tint);
    color: var(--iris);
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: -0.01em;
    border: 1px solid color-mix(in srgb, var(--iris) 18%, transparent);
}

.compose-box__chip-x {
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border: none;
    padding: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--iris) 18%, transparent);
    color: var(--iris);
    cursor: pointer;
    font-size: 10px;
    line-height: 1;
}
.compose-box__chip-x:hover { background: color-mix(in srgb, var(--iris) 32%, transparent); }

.compose-box__gif-preview {
    margin-top: 10px;
    padding: 10px;
    border-radius: 14px;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 10px;
    align-items: center;
}
.compose-box__gif-preview-img {
    width: 96px;
    height: 96px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--surface);
}
.compose-box__gif-preview-title {
    font-size: 12px;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.compose-box__gif-preview-remove {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--hairline);
    color: var(--text-2);
    cursor: pointer;
    display: grid;
    place-items: center;
}
.compose-box__gif-preview-remove:hover {
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 32%, transparent);
}

.compose-box__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.compose-box__tool-btn {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid var(--hairline);
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.compose-box__tool-btn:hover {
    background: var(--surface);
    color: var(--iris);
}
.compose-box__tool-btn:focus-visible {
    outline: 2px solid var(--iris);
    outline-offset: 2px;
}

.compose-box__sentiment-slot {
    display: inline-flex;
}

.compose-box__spacer { flex: 1; }

.compose-box__char-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-3);
    font-feature-settings: "tnum";
}
.compose-box__char-count--warn { color: var(--amber); }
.compose-box__char-count--error { color: var(--red); }

.compose-box__post-btn {
    height: 36px;
    padding: 0 18px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(120deg, #6366f1 0%, #22d3ee 100%);
    color: white;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(99,102,241,0.30);
    transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
}
.compose-box__post-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(99,102,241,0.42);
    filter: brightness(1.05);
}
.compose-box__post-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.compose-box__post-btn:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .compose-box { padding: 14px; }
    .compose-box__row { grid-template-columns: 40px 1fr; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .compose-box {
        animation: none !important;
    }
}