/* =========================================
   1. 全局定义
   ========================================= */
@font-face {
    font-family: 'Minecraftia';
    src: url('../RGB/Minecraftia.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --primary: #007AFF;
    --success: #34C759;
    --bg-body: #F2F2F7;
    --bg-card: #FFFFFF;
    --text-main: #1C1C1E;
    --text-sub: #8E8E93;
    --border: #E5E5EA;
    --radius-lg: 16px;
    --radius-sm: 8px;
    --mc-font: 'Minecraftia', 'Courier New', monospace;
}

body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 95%;
    max-width: 1100px;
    height: 95vh;
    background-color: var(--bg-card);
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
}

/* =========================================
   2. 顶部区域
   ========================================= */
.top-section {
    display: flex; gap: 16px; height: 110px; flex-shrink: 0;
}

.input-area { flex: 1; height: 100%; }
.input-area textarea {
    width: 100%; height: 100%;
    background: #F9F9F9; border: 2px solid transparent;
    color: var(--text-main); padding: 12px;
    border-radius: var(--radius-sm);
    font-size: 16px; font-family: var(--mc-font);
    box-sizing: border-box; resize: none;
    transition: all 0.2s;
}
.input-area textarea:focus { background: #fff; border-color: var(--primary); outline: none; }

.tutorial-box {
    width: 220px;
    background: #F2F8FF; border: 1px solid #D6E4FF;
    border-radius: var(--radius-sm); padding: 10px 14px;
    font-size: 11px; color: #4A6E99;
    display: flex; flex-direction: column; justify-content: center;
    line-height: 1.5; flex-shrink: 0; user-select: none;
}
.tutorial-title { font-weight: 700; color: #007AFF; margin-bottom: 2px; }
.key-tag { background: #fff; border: 1px solid #cce0ff; padding: 0 3px; border-radius: 3px; font-family: monospace; font-weight: bold; color: #333;}

/* =========================================
   3. 工具栏
   ========================================= */
.toolbar {
    background: #F9F9F9; padding: 0 16px;
    border-radius: 12px; display: flex; gap: 12px;
    align-items: center; border: 1px solid var(--border);
    height: 50px; flex-shrink: 0;
}

.tool-section {
    display: flex; gap: 8px; align-items: center;
    padding-right: 12px; border-right: 1px solid #E0E0E0;
    white-space: nowrap; height: 100%;
}
.tool-section:last-child { border: none; padding-right: 0; }

.context-tools { flex-grow: 1; transition: opacity 0.2s; }
.context-tools.disabled-tools { opacity: 0.3; pointer-events: none; filter: grayscale(100%); }

.tool-label { font-size: 10px; color: var(--text-sub); font-weight: 700; text-transform: uppercase; margin-right: 2px; }

.btn {
    background: #FFFFFF; border: 1px solid #D1D1D6; color: var(--text-main);
    padding: 4px 10px; border-radius: 6px; cursor: pointer;
    font-size: 12px; font-weight: 500; transition: all 0.2s;
    display: inline-flex; align-items: center; justify-content: center;
    height: 28px; box-sizing: border-box;
}
.btn:hover { border-color: #B0B0B6; transform: translateY(-1px); }
.btn.active { background: var(--primary); color: white; border-color: var(--primary); }
.btn.danger { color: #FF3B30; border-color: rgba(255, 59, 48, 0.3); }
.btn.danger:hover { background: #FF3B30; color: white; }

.icon-btn {
    width: 28px; padding: 0; border: none; background: transparent;
    color: #555; box-shadow: none;
}
.icon-btn:hover { background: rgba(0,0,0,0.05); transform: none; color: #000; }
.icon-btn svg { width: 16px; height: 16px; fill: currentColor; }

.color-btn-wrapper { position: relative; width: 28px; height: 28px; display: inline-block; margin: 0 4px; }
.color-input-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.color-btn-face { width: 100%; height: 100%; border-radius: 6px; border: 1px solid #D1D1D6; background: #fff; display: flex; align-items: center; justify-content: center; }
.color-swatch { width: 18px; height: 18px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); }

.style-select { padding: 4px 8px; border-radius: 6px; border: 1px solid #D1D1D6; font-size: 12px; outline: none; height: 28px; }

.preset-grid { display: flex; gap: 4px; flex-wrap: wrap; max-width: 320px; }
.preset-btn {
    width: 16px; height: 16px; border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.05); cursor: pointer; position: relative;
    transition: transform 0.1s;
}
.preset-btn:hover { transform: scale(1.3); z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.preset-btn::after {
    content: attr(title); position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.8); color: #fff; padding: 2px 6px;
    font-size: 10px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.preset-btn:hover::after { opacity: 1; }

/* =========================================
   4. 预览舞台
   ========================================= */
.editor-wrapper {
    flex: 1; border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow: hidden; background: #fff; display: flex; flex-direction: column;
    min-height: 0;
}

.editor-stage {
    flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px;
    text-align: center; transition: background-color 0.3s ease;
    cursor: default; /* 允许穿透点击 */
    display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center;
}

.preview-chat { background-color: #2b2b2b; --btn-bg: rgba(255,255,255,0.2); --btn-c: #ccc; }
.preview-motd { background-color: #111111; --btn-bg: rgba(255,255,255,0.2); --btn-c: #ccc; }
.preview-sign { background-color: #745b3a; --btn-bg: rgba(0,0,0,0.15); --btn-c: #3d2e1e; }
.preview-book { background-color: #f6f2e8; --btn-bg: rgba(0,0,0,0.08); --btn-c: #666; }

.char-wrapper {
    display: inline-flex; flex-direction: column; align-items: center;
    margin: 4px 1px; position: relative;
}

.char-top {
    font-family: var(--mc-font); font-size: 42px; line-height: 1;
    padding: 4px 2px; border-radius: 4px; cursor: pointer;
    user-select: none; transition: transform 0.1s;
    white-space: pre; min-width: 0.6em;
}
.char-top:hover { transform: scale(1.15); background-color: rgba(255,255,255,0.15); }
.preview-sign .char-top:hover, .preview-book .char-top:hover { background-color: rgba(0,0,0,0.05); }

.char-wrapper.selected .char-top {
    outline: 2px solid var(--primary); outline-offset: 2px; z-index: 10;
}
.char-top.is-anchor::after { display: none; }

.char-bottom {
    height: 20px; margin-top: 4px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0.4; transition: opacity 0.3s;
}
.char-wrapper:hover .char-bottom { opacity: 1; }

.link-btn {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--btn-bg); color: var(--btn-c);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 10px; transition: all 0.2s;
    font-family: sans-serif;
}
.link-btn:hover { transform: scale(1.2); opacity: 1; background: rgba(128,128,128,0.3); }

.link-btn.active {
    background: linear-gradient(135deg, #7F00FF 0%, #E100FF 100%) !important;
    border: none !important; color: #fff !important;
    box-shadow: 0 2px 6px rgba(127, 0, 255, 0.4); opacity: 1;
}

/* =========================================
   5. 输出区域
   ========================================= */
.output-area {
    display: flex; flex-direction: column;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    overflow: hidden; background: #fff; flex-shrink: 0; height: 90px;
}

.output-header {
    background: #F9F9F9; border-bottom: 1px solid var(--border);
    padding: 0 10px; display: flex; justify-content: space-between; align-items: center;
    height: 30px;
}

.tabs { display: flex; gap: 0; height: 100%; }
.tab-btn {
    background: transparent; border: none; border-right: 1px solid transparent;
    padding: 0 12px; font-size: 11px; font-weight: 600; color: var(--text-sub);
    cursor: pointer; height: 100%;
}
.tab-btn:hover { background: #f0f0f0; color: var(--text-main); }
.tab-btn.active { background: #fff; color: var(--primary); border-right: 1px solid var(--border); box-shadow: inset 0 2px 0 var(--primary); }

/* 复制按钮动画核心 */
.copy-mini-btn {
    font-size: 11px; color: var(--text-sub);
    background: none; border: none; cursor: pointer;
    font-weight: 600; padding: 4px 8px; border-radius: 4px;
    display: flex; align-items: center; gap: 6px;
    position: relative; min-width: 80px; justify-content: flex-end;
}
.copy-mini-btn:hover { background: rgba(0,0,0,0.05); color: var(--text-main); }

.icon-holder { width: 14px; height: 14px; position: relative; display: flex; align-items: center; justify-content: center; }
.icon-copy, .icon-check { position: absolute; width: 100%; height: 100%; fill: currentColor; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* 状态切换 */
.icon-check { transform: scale(0) rotate(-45deg); opacity: 0; color: var(--success); }
.icon-copy { transform: scale(1); opacity: 1; }

.copy-mini-btn.copy-success { background: rgba(52, 199, 89, 0.1); color: var(--success); }
.copy-mini-btn.copy-success .icon-copy { transform: scale(0); opacity: 0; }
.copy-mini-btn.copy-success .icon-check { transform: scale(1.2) rotate(0deg); opacity: 1; }

.code-box {
    width: 100%; height: 100%; background: #fff; color: #333;
    border: none; padding: 8px 12px; font-family: 'Menlo', 'Monaco', monospace;
    font-size: 12px; box-sizing: border-box; outline: none; resize: none;
}