@use 'mixins' as *;

/* ══════════════════════════════════
   CLIPBOARD PANEL
   ══════════════════════════════════ */
.clipboard-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.clipboard-entries {
    @include panel-scroll;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.clip-card {
    @include card-base;
}
.clip-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}
.clip-card-idx {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text2);
    background: var(--bg3);
    padding: 2px 6px;
    border-radius: 3px;
}
.clip-card-ts {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text2);
    margin-left: auto;
}
.clip-card-actions {
    display: flex;
    gap: 4px;
}
.clip-card-body {
    padding: 10px 12px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text1);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.6;
    max-height: 160px;
    overflow-y: auto;
}
.clip-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 10px;
    color: var(--text2);
}
.clip-empty svg {
    width: 36px;
    height: 36px;
    opacity: 0.3;
}
.clip-empty p {
    font-size: 13px;
}
.clip-composer {
    border-top: 1px solid var(--border);
    padding: 12px 16px;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    background: var(--bg1);
    flex-shrink: 0;
}
.clip-textarea {
    @include input-base;
    flex: 1;
    padding: 8px 12px;
    resize: none;
    min-height: 64px;
    max-height: 160px;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.5;
}
.clip-textarea::placeholder {
    color: var(--text2);
}
.clip-send-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
