/**
 * Liora Form Styles
 * Extracted from templates/index.html (lines 2650-2943)
 */

/* ============================================

   è¾“å ¥è¡¨å•¿ - 极简工业风

   ============================================ */

.form-group {

    margin-bottom: 20px;

}



.char-count {

    font-size: 11px;

    color: var(--color-text-muted);

    font-weight: normal;

    margin-left: 8px;

}



.textarea-wrapper {

    position: relative;

}



.mention-popup {

    position: absolute;

    bottom: 100%;

    left: 0;

    right: 0;

    background: var(--color-bg);

    border: 1px solid var(--color-border-light);

    box-shadow: var(--shadow-md);

    max-height: 150px;

    overflow-y: auto;

    display: none;

    z-index: 100;

}



.mention-popup.show {

    display: block;

}



.mention-item {

    padding: 8px 12px;

    cursor: pointer;

    font-size: 13px;

}



.mention-item:hover,

.mention-item.selected {

    background: var(--color-memory-light);

}



.form-label {

    display: block;

    font-size: 10px;

    font-weight: 600;

    margin-bottom: 6px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: var(--color-text-secondary);

}



.form-input,

.form-textarea,

.form-select {

    width: 100%;

    padding: 10px 12px;

    border: 1px solid var(--color-border-light);

    font-size: 13px;

    font-family: var(--font-sans);

    outline: none;

    background: var(--color-bg);

    transition: all 0.2s ease;

}



.form-textarea {

    min-height: 120px;

    resize: vertical;

    line-height: 1.6;

}



.form-input:focus,

.form-textarea:focus,

.form-select:focus {

    border-color: var(--color-memory);

    outline: none;

}



.form-input:focus-visible,

.form-textarea:focus-visible,

.form-select:focus-visible {

    outline: 2px solid var(--color-memory);

    outline-offset: 2px;

}



/* ============================================

   æ–‡ä»¶ä¸Šä¼ â€? - 拽拽区域

   ============================================ */

.file-upload {

    border: 1px dashed var(--color-border-light);

    padding: 24px;

    text-align: center;

    cursor: pointer;

    transition: all 0.2s ease;

    background: var(--color-bg);

    font-size: 12px;

    color: var(--color-text-secondary);

}



.file-upload:hover {

    border-color: var(--color-memory);

    background-color: var(--color-memory-light);

    color: var(--color-memory);

}



.file-upload input[type="file"] {

    display: none;

}



.file-preview {

    margin-top: 12px;

    padding: 10px 12px;

    border: 1px solid var(--color-border-light);

    font-size: 11px;

    font-family: var(--font-mono);

    background: var(--color-bg-secondary);

}