/**
 * Editor Wrapper & File Attachment System
 * =================================================================
 * Shared styles for Blackboard and Walkie-Typie file attachment UI.
 * Structure:
 *   .editor-wrapper  (drop zone container)
 *     .attachment-chips  (file chip display area)
 *     textarea           (unchanged original textarea)
 *     input[type=file]   (hidden, triggered by JS)
 *     .drop-overlay      (drag-over visual feedback)
 *
 * Note: style.css sets all div to flex-column + position:relative.
 *       This file builds on top of that without overriding.
 * Note: page-blackboard-log.css has `.page > *` translateX offset.
 *       editor-wrapper inherits this as the new direct child of .page.
 * =================================================================
 */

/* --- Editor Wrapper (Drop Zone Container) --- */

.editor-wrapper {
    /* flex-direction: column is inherited from style.css div rule */
    flex: 1;
    min-height: 0;
    /* Allow textarea inside to fill remaining space */
}

/* BB context: editor-wrapper is the direct child of .page,
   so it inherits the .page > * translateX offset from page-blackboard-log.css.
   The textarea inside should no longer be a direct child of .page. */

/* --- Attachment Chips Area --- */

.attachment-chips {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 0;
    flex-shrink: 0;
    /* Hidden when empty — no space consumed */
    display: none;
    /*Not overlap push button*/
    margin-top: 4vh;
    max-width: 86%;
    align-self: center;
}

.attachment-chips.has-items {
    /* JS toggles this class when chips exist */
    display: flex;
    padding: 6px 8px 6px calc(var(--font-size) * 1.6);
    border-bottom: 1px dashed var(--text-green);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--text-green) var(--bg-primary);
    /* Edge fadeout on both sides */
    -webkit-mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
}

.attachment-chips.has-items::-webkit-scrollbar {
    height: 4px;
}

.attachment-chips.has-items::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

.attachment-chips.has-items::-webkit-scrollbar-thumb {
    background-color: var(--text-green);
    border-radius: 2px;
}

/* Individual chip — JS will inject these */
.attachment-chip {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 4px 8px;
    border: 1px solid var(--text-green);
    border-radius: calc(var(--border-radius) / 2);
    font-size: calc(var(--font-size) * 0.85);
    max-width: 16rem;
    flex-shrink: 0;
    overflow: hidden;
    cursor: default;
    transition: background var(--transition-normal),
        box-shadow var(--transition-normal);
}

@media (hover: hover) {
    .attachment-chip:hover {
        background: var(--text-green-10);
        box-shadow: 0 0 4px var(--text-green);
    }
}

.attachment-chip-icon {
    flex-shrink: 0;
    font-size: calc(var(--font-size) * 1.1);
}

.attachment-chip-top {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.attachment-chip-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: calc(var(--font-size) * 1.1);
    cursor: pointer;
}

.attachment-chip-download {
    flex-shrink: 0;
    cursor: pointer;
    font-size: calc(var(--font-size) * 0.85);
    transition: color var(--transition-normal),
        text-shadow var(--transition-normal);
}

@media (hover: hover) {
    .attachment-chip-download:hover {
        color: var(--text-cyan);
        text-shadow: var(--text-shadow-cyan);
    }
}

.attachment-chip.is-local .attachment-chip-download:hover {
    color: var(--text-orange);
    text-shadow: var(--text-shadow-orange);
}

.attachment-chip-bottom {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.attachment-chip-size {
    flex-shrink: 0;
    color: var(--text-orange);
    font-size: calc(var(--font-size) * 0.75);
    text-shadow: var(--text-shadow-orange);
}

.attachment-chip-remove {
    flex-shrink: 0;
    width: 1.2em;
    height: 1.2em;
    padding: 0;
    border: none;
    cursor: pointer;
    font-size: calc(var(--font-size) * 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-normal),
        text-shadow var(--transition-normal);
}

@media (hover: hover) {
    .attachment-chip-remove:hover {
        color: var(--text-red);
        text-shadow: var(--text-shadow-red);
        background: transparent;
        box-shadow: none;
    }
}

/* Readonly chips (THEY side) — no remove/download buttons */
.attachment-chips.readonly .attachment-chip-remove,
.attachment-chips.readonly .attachment-chip-download {
    display: none;
}

/* File status states */
/* [LOCAL] — only on this device, not yet committed to server */
.attachment-chip.is-local {
    color: var(--text-orange);
    border-color: var(--text-orange);
    text-shadow: var(--text-shadow-orange);
}

@media (hover: hover) {
    .attachment-chip.is-local:hover {
        background: var(--text-orange-10);
        box-shadow: 0 0 4px var(--text-orange);
    }
}

/* [SYNC] — on server and cached locally (default green, same as [CLOUD]) */
.attachment-chip.is-synced {
    /* inherits default green from .attachment-chip */
}

/* --- Drop Overlay --- */

.drop-overlay {
    /* position: absolute is NOT set here because style.css div 
       already sets position:relative on all divs. We override to absolute. */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--text-green);
    border-radius: var(--border-radius);
    background: var(--overlay-bg);
    color: var(--text-green);
    font-size: calc(var(--font-size) * 1.4);
    font-weight: bold;
    text-shadow: var(--text-shadow-green);
    letter-spacing: 0.2em;
    pointer-events: none;
    /* Hidden by default — JS adds .active on dragover */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal),
        visibility var(--transition-normal);
}

.drop-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* --- BB Context Specifics --- */

/* When chips are visible, they already sit below the push button,
   so the textarea's top margin (which reserves push-button clearance) is redundant. */
.attachment-chips.has-items ~ #log-textarea {
    margin-top: 0;
}

/* --- WT Context Specifics --- */

/* In WT, editor-wrapper sits inside .walkie-typie-blackboard.
   The textarea (#walkie-typie-we-blackboard) already has styles
   in walkie-typie.css. editor-wrapper takes flex:1 (inherited above)
   so it fills the walkie-typie-blackboard.

   THEY side attachment-chips.readonly sits directly
   inside .walkie-typie-blackboard (no wrapper needed) */

.walkie-typie-blackboard>.attachment-chips {
    /* WT THEY side: chips inside the blackboard panel but without wrapper */
    margin: 0 4px;
}

.walkie-typie-blackboard>.attachment-chips.has-items {
    padding: 6px;
}