/* =====================================================
   G-Space core styles
   ===================================================== */

:root {
    --bg-0:        #1e1f22;
    --bg-1:        #2b2d31;
    --bg-2:        #313338;
    --bg-3:        #383a40;
    --bg-hover:    #35373c;
    --bg-active:   #404249;
    --text-0:      #f2f3f5;
    --text-1:      #dbdee1;
    --text-2:      #b5bac1;
    --text-3:      #949ba4;
    --accent:      #5865f2;
    --accent-hov:  #4752c4;
    --danger:      #ed4245;
    --success:     #23a55a;
    --warning:     #f0b232;
    --mention:     #fee75c;
    --border:      rgba(255,255,255,0.06);
    --shadow-lg:   0 8px 32px rgba(0,0,0,0.5);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", system-ui, sans-serif;
    background: var(--bg-0);
    color: var(--text-1);
    font-size: 14px;
    line-height: 1.5;
}

button {
    font-family: inherit;
    border: none;
    cursor: pointer;
    background: none;
    color: inherit;
}

input, textarea {
    font-family: inherit;
    font-size: 14px;
}

.hidden { display: none !important; }

/* ============================================
   Auth screen
   ============================================ */
.auth-screen {
    position: fixed; inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #404eed 0%, #7289da 100%);
    z-index: 10;
}
.auth-card {
    background: var(--bg-2);
    padding: 32px;
    border-radius: 8px;
    width: 420px;
    max-width: calc(100% - 32px);
    box-shadow: var(--shadow-lg);
}
.auth-title {
    margin: 0 0 16px;
    color: var(--text-0);
    text-align: center;
    font-size: 28px;
}
.auth-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 20px;
    background: var(--bg-1);
    border-radius: 6px;
    padding: 3px;
}
.auth-tab {
    flex: 1;
    padding: 8px 0;
    border-radius: 4px;
    color: var(--text-2);
    font-weight: 500;
    transition: background .1s;
}
.auth-tab.active {
    background: var(--accent);
    color: #fff;
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.auth-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    text-transform: uppercase;
}
.auth-form input {
    background: var(--bg-0);
    border: 1px solid var(--border);
    color: var(--text-0);
    padding: 10px 12px;
    border-radius: 4px;
    outline: none;
    transition: border-color .1s;
}
.auth-form input:focus {
    border-color: var(--accent);
}
.auth-error {
    color: var(--danger);
    font-size: 13px;
    margin: 0;
    min-height: 1em;
}
.auth-success {
    color: #57f287;
    font-size: 13px;
    margin: 0;
    min-height: 1em;
}
.auth-hint {
    background: rgba(88, 101, 242, 0.10);
    border-left: 3px solid #5865f2;
    padding: 10px 12px;
    border-radius: 4px;
    color: var(--text-1);
    font-size: 12.5px;
    line-height: 1.6;
    margin: 0 0 8px 0;
}
.auth-pending {
    text-align: center;
    padding: 20px 8px;
}
.auth-pending-icon {
    font-size: 48px;
    margin-bottom: 12px;
}
.auth-pending h3 {
    color: var(--text-0);
    margin: 0 0 10px 0;
    font-size: 18px;
}
.auth-pending p {
    color: var(--text-2);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 0 20px 0;
}

/* ===== 管理画面: 承認待ちセクション ===== */
.admin-pending-section {
    background: rgba(251, 191, 36, 0.08);
    border-left: 3px solid #fbbf24;
    padding: 12px 14px;
    border-radius: 4px;
    margin-bottom: 16px;
}
.admin-pending-section h4 {
    margin: 0 0 4px 0;
    color: #fbbf24;
}
.admin-pending-table th,
.admin-pending-table td {
    background: transparent !important;
}
.btn-approve {
    background: #2ea44f !important;
    color: #fff !important;
    border-color: #2ea44f !important;
}
.btn-approve:hover { background: #2c974b !important; }
.btn-primary {
    background: var(--accent);
    color: #fff;
    padding: 10px 16px;
    border-radius: 4px;
    font-weight: 500;
    transition: background .1s;
}
.btn-primary:hover { background: var(--accent-hov); }

/* ============================================
   App layout
   ============================================ */
.app {
    display: grid;
    grid-template-columns: 240px 1fr;
    height: 100vh;
}
.app.with-right {
    grid-template-columns: 240px 1fr 380px;
}

/* ============================================
   Sidebar
   ============================================ */
.sidebar {
    background: var(--bg-1);
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--border);
}
.sidebar-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
}
.logo {
    font-weight: 700;
    color: var(--text-0);
    font-size: 16px;
    letter-spacing: 0.2px;
}
.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 8px 8px 20px;
}
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--bg-0); border-radius: 3px; }

.quick-links {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.quick-links li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 4px;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
}
.quick-links li:hover {
    background: var(--bg-hover);
    color: var(--text-0);
}
.ql-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    font-weight: 600;
    color: var(--text-3);
}
.badge {
    margin-left: auto;
    background: var(--danger);
    color: #fff;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
}

.section-label {
    padding: 14px 8px 4px;
    color: var(--text-3);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.section-label span { flex: 1; }
.section-add,
.cat-add {
    background: transparent;
    color: var(--text-3);
    font-size: 16px;
    font-weight: 600;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    opacity: 0.6;
    transition: opacity .1s, background .1s, color .1s;
}
.section-add:hover,
.cat-add:hover {
    opacity: 1;
    color: var(--text-0);
    background: var(--bg-hover);
}

.category-group {
    margin-bottom: 8px;
}
.category-name {
    padding: 6px 4px 4px 4px;
    color: var(--text-3);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: default;
    display: flex;
    align-items: center;
    gap: 4px;
    user-select: none;
}
.cat-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    font-size: 8px;
    color: var(--text-3);
    transition: transform .15s;
    cursor: pointer;
    flex-shrink: 0;
}
.category-group.collapsed .cat-toggle { transform: rotate(-90deg); }
.category-group.collapsed .channel-item,
.category-group.collapsed .cat-drop-tail { display: none; }

.category-name > .cat-label {
    flex: 1;
    cursor: pointer;
}
.category-name > .cat-label:hover { color: var(--text-1); }
.category-name > .cat-actions {
    display: inline-flex;
    gap: 2px;
    opacity: 0;
    transition: opacity .1s;
}
.category-group:hover .cat-actions { opacity: 1; }
.cat-actions button {
    background: transparent;
    color: var(--text-3);
    width: 20px;
    height: 20px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
}
.cat-actions button:hover {
    color: var(--text-0);
    background: var(--bg-hover);
}
.cat-actions .cat-add { font-size: 16px; font-weight: 600; }
.cat-actions button[disabled],
.ch-actions button[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
}
.cat-actions .cat-up, .cat-actions .cat-down,
.ch-actions .ch-up,   .ch-actions .ch-down {
    font-size: 9px;
}
.forum-reply-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.forum-attach-btn {
    cursor: pointer;
    padding: 4px 10px;
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-2);
    font-size: 12px;
}
.forum-attach-btn:hover { color: var(--text-0); background: var(--bg-hover); }
.forum-attach-list {
    flex: 1;
    font-size: 11px;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Stamp settings modal */
#stamp-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 60vh;
    overflow-y: auto;
    margin-bottom: 8px;
}
.stamp-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}
.stamp-row .stamp-emoji {
    width: 60px;
    text-align: center;
    font-size: 18px;
    background: var(--bg-0);
    border: 1px solid var(--border);
    color: var(--text-0);
    padding: 6px;
    border-radius: 4px;
}
.stamp-row .stamp-label {
    flex: 1;
    background: var(--bg-0);
    border: 1px solid var(--border);
    color: var(--text-0);
    padding: 6px 8px;
    border-radius: 4px;
}
.stamp-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.modal-hint {
    font-size: 12px;
    color: var(--text-2);
    margin: 0 0 10px 0;
    line-height: 1.5;
}
.priv-member-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    font-size: 13px;
    color: var(--text-0);
    cursor: pointer;
    user-select: none;
}
.priv-member-row:hover { background: var(--bg-hover); border-radius: 3px; }
.priv-member-row input[type="checkbox"] { margin: 0; }
.ch-actions {
    margin-left: auto;
    display: inline-flex;
    gap: 2px;
    opacity: 0;
    transition: opacity .1s;
}
.channel-item:hover .ch-actions { opacity: 1; }
.ch-actions button {
    background: transparent;
    color: var(--text-3);
    width: 20px;
    height: 20px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
}
.ch-actions button:hover {
    color: var(--text-0);
    background: var(--bg-hover);
}
.channel-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    margin: 0 0 1px;
    border-radius: 4px;
    color: var(--text-2);
    cursor: pointer;
    font-size: 14px;
    transition: background .08s;
}
.channel-item:hover {
    background: var(--bg-hover);
    color: var(--text-0);
}
.channel-item.active {
    background: var(--bg-active);
    color: var(--text-0);
}
.channel-item .hash {
    color: var(--text-3);
    font-weight: 500;
}
.channel-item.unread {
    color: var(--text-0);
    font-weight: 600;
}
.channel-item .ch-badge {
    margin-left: auto;
    background: var(--danger);
    color: #fff;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    min-width: 16px;
    text-align: center;
}
.channel-item .ch-type {
    font-size: 10px;
    padding: 1px 5px;
    margin-left: auto;
    border-radius: 10px;
    background: var(--bg-0);
    color: var(--text-3);
}

/* Sidebar footer */
.sidebar-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-0);
    border-top: 1px solid var(--border);
}
.user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    border-radius: 4px;
    padding: 4px;
}
.user-chip:hover { background: var(--bg-hover); }
.user-chip .avatar { width: 28px; height: 28px; border-radius: 50%; }
.user-chip .name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#logout-btn,
#admin-btn {
    padding: 6px 8px;
    color: var(--text-2);
    border-radius: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 15px;
}
#logout-btn:hover { color: var(--danger); background: var(--bg-hover); }
#admin-btn:hover  { color: var(--text-0); background: var(--bg-hover); }

/* ============================================
   Main area
   ============================================ */
.main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-2);
}
.main-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
    z-index: 1;
}
.main-header .hash {
    color: var(--text-3);
    font-size: 20px;
    font-weight: 400;
}
.channel-name {
    color: var(--text-0);
    font-weight: 600;
    font-size: 16px;
}
.channel-desc {
    color: var(--text-3);
    font-size: 13px;
    border-left: 1px solid var(--bg-hover);
    padding-left: 12px;
    margin-left: 6px;
}

.message-area {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 16px;
}
.message-area::-webkit-scrollbar { width: 8px; }
.message-area::-webkit-scrollbar-thumb { background: var(--bg-0); border-radius: 4px; }

.empty-hint {
    padding: 60px 18px;
    text-align: center;
    color: var(--text-3);
}

/* ============================================
   Messages
   ============================================ */
.msg {
    display: flex;
    gap: 14px;
    padding: 6px 18px;
    position: relative;
}
.msg:hover {
    background: rgba(0,0,0,0.08);
}
.msg:hover .msg-actions { opacity: 1; }

.msg.new-block { margin-top: 16px; }

.avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    object-fit: cover;
    overflow: hidden;
}
.msg-body {
    flex: 1;
    min-width: 0;
}
.msg-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}
.msg-author {
    font-weight: 600;
    color: var(--text-0);
}
.msg-time {
    color: var(--text-3);
    font-size: 11px;
}
.msg-content {
    color: var(--text-1);
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.msg-content .mention {
    background: rgba(88,101,242,0.2);
    color: #c9cdfb;
    padding: 0 3px;
    border-radius: 3px;
    font-weight: 500;
}
.msg-edited {
    color: var(--text-3);
    font-size: 10px;
    margin-left: 4px;
}

.msg.compact { padding-top: 1px; padding-bottom: 1px; }
.msg.compact .avatar,
.msg.compact .msg-head { display: none; }
.msg.compact .msg-body { padding-left: 54px; }
.msg.compact .msg-time-compact {
    position: absolute;
    left: 18px;
    color: var(--text-3);
    font-size: 10px;
    opacity: 0;
    padding-top: 3px;
}
.msg.compact:hover .msg-time-compact { opacity: 1; }

/* Attachments */
.attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.att-card {
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 360px;
}
.att-card a {
    color: var(--text-0);
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.att-card a:hover { text-decoration: underline; }
.att-size { color: var(--text-3); font-size: 11px; }
.att-img {
    max-width: 360px;
    max-height: 280px;
    border-radius: 6px;
    display: block;
    cursor: zoom-in;
}

/* Reactions */
.reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.reaction {
    background: var(--bg-0);
    border: 1px solid var(--border);
    color: var(--text-1);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 12px;
    display: flex;
    gap: 4px;
    align-items: center;
    cursor: pointer;
    transition: background .1s;
}
.reaction:hover { background: var(--bg-hover); }
.reaction.mine {
    background: rgba(88,101,242,0.2);
    border-color: var(--accent);
}
.reaction .emoji { font-size: 14px; }

/* Message actions (hover toolbar) */
.msg-actions {
    position: absolute;
    top: -12px;
    right: 18px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 6px;
    display: flex;
    opacity: 0;
    transition: opacity .1s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 2;
}
.msg-actions button {
    padding: 6px 8px;
    color: var(--text-2);
    font-size: 14px;
}
.msg-actions button:hover { color: var(--text-0); background: var(--bg-hover); }
.msg-actions .msg-actions-sep {
    width: 1px;
    align-self: stretch;
    background: var(--border);
    margin: 4px 2px;
}
.msg-actions .quick-stamp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 4px;
}
.msg-actions .quick-stamp .stamp-label {
    font-size: 11px;
    color: var(--text-2);
}
.msg-actions .quick-stamp:hover .stamp-label { color: var(--text-0); }

/* Thread indicator (parent-side) */
.thread-indicator {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-1);
    border-radius: 6px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}
.thread-indicator:hover { background: var(--bg-hover); }

/* Emoji picker popover */
.emoji-picker {
    position: absolute;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(8, 28px);
    gap: 2px;
    z-index: 20;
    box-shadow: var(--shadow-lg);
}
.emoji-picker button {
    font-size: 18px;
    width: 28px; height: 28px;
    border-radius: 4px;
    line-height: 1;
}
.emoji-picker button:hover { background: var(--bg-hover); }

/* ============================================
   Compose
   ============================================ */
.compose {
    padding: 0 18px 18px;
    flex-shrink: 0;
}
.compose-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: var(--bg-3);
    border-radius: 8px;
    padding: 8px 10px;
}
.icon-btn {
    padding: 6px 8px;
    color: var(--text-2);
    border-radius: 4px;
    font-size: 16px;
}
.icon-btn:hover { color: var(--text-0); background: var(--bg-hover); }

#msg-input, #thread-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-0);
    resize: none;
    max-height: 300px;
    padding: 6px 4px;
    line-height: 1.4;
}

.compose-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.pending-file {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-3);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text-1);
}
.pending-file button {
    color: var(--text-3);
    padding: 0 2px;
}
.pending-file button:hover { color: var(--danger); }

.compose.editing .compose-row {
    outline: 2px solid var(--warning);
}
.edit-hint {
    font-size: 11px;
    color: var(--text-3);
    padding: 4px 2px 0;
}
.edit-hint a { color: var(--accent); cursor: pointer; }

/* ============================================
   Right panel (thread)
   ============================================ */
.right-panel {
    display: flex;
    flex-direction: column;
    background: var(--bg-2);
    border-left: 1px solid var(--border);
    min-width: 0;
}
.right-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: var(--text-0);
}
.right-header span { flex: 1; }
.right-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.thread-compose { padding: 0 14px 14px; }

/* ============================================
   Modal
   ============================================ */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
}
.modal {
    background: var(--bg-2);
    border-radius: 8px;
    width: 600px;
    max-width: calc(100% - 32px);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}
.modal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: var(--text-0);
}
.modal-header span { flex: 1; }
.modal-body {
    padding: 16px 18px;
    overflow-y: auto;
}

/* ============================================
   Toast
   ============================================ */
.toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-3);
    color: var(--text-0);
    padding: 10px 18px;
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    z-index: 40;
    font-size: 13px;
    animation: toast-in .2s ease;
}
.toast.error { background: var(--danger); }

@keyframes toast-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0);   }
}

/* ============================================
   Admin modal
   ============================================ */
.admin-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin: -4px -4px 14px -4px;
}
.admin-tab {
    padding: 8px 14px;
    background: transparent;
    border: none;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}
.admin-tab:hover { color: var(--text-0); }
.admin-tab.active {
    color: var(--text-0);
    border-bottom-color: var(--accent);
}
.admin-body h4 {
    margin: 14px 0 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.admin-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--bg-0);
    border-radius: 6px;
    margin-bottom: 12px;
}
.admin-form label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: var(--text-2);
}
.admin-form label.check {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    color: var(--text-0);
    font-size: 13px;
}
.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form input[type="datetime-local"],
.admin-form input:not([type]) {
    background: var(--bg-1);
    border: 1px solid var(--border);
    color: var(--text-0);
    padding: 7px 8px;
    border-radius: 4px;
    outline: none;
    font-size: 13px;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.admin-table th,
.admin-table td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}
.admin-table th {
    color: var(--text-2);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.admin-table code {
    background: var(--bg-0);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 12px;
}
.admin-table .avatar { width: 28px; height: 28px; border-radius: 50%; }
.admin-table .editable {
    cursor: pointer;
    border-bottom: 1px dashed var(--border);
    padding-bottom: 1px;
}
.admin-table .editable:hover { color: var(--accent); }
.profile-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.profile-avatar .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    font-size: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-sm {
    background: var(--bg-0);
    border: 1px solid var(--border);
    color: var(--text-1);
    border-radius: 4px;
    padding: 3px 7px;
    font-size: 12px;
    cursor: pointer;
    margin-right: 2px;
}
.btn-sm:hover { background: var(--bg-hover); color: var(--text-0); }
.btn-sm.btn-danger { color: var(--danger); }
.btn-sm.btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* ============================================
   Phase 5b: ToDo / Tasks / Reminders / DM / Forum
   ============================================ */
.pt-counts {
    display: flex;
    gap: 16px;
    margin: 10px 0;
    font-size: 12px;
    color: var(--text-2);
}
.pt-count .dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 4px;
}
.pt-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pt-row {
    display: grid;
    grid-template-columns: 110px 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--bg-0);
    border-radius: 5px;
}
.pt-row .pt-title {
    font-size: 13px;
    cursor: pointer;
}
.pt-row .pt-title.done {
    text-decoration: line-through;
    color: var(--text-2);
}
.pt-row .pt-note {
    grid-column: 2 / -1;
    font-size: 11px;
    color: var(--text-2);
    white-space: pre-wrap;
    margin-top: 2px;
}
.pt-row select {
    background: var(--bg-1);
    border: 1px solid var(--border);
    color: var(--text-0);
    border-radius: 4px;
    padding: 4px;
    font-size: 12px;
}

.task-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.task-filters select {
    padding: 5px 8px;
    background: var(--bg-0);
    color: var(--text-0);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    max-width: 220px;
}
.task-filters button {
    padding: 5px 11px;
    background: var(--bg-0);
    color: var(--text-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}
.task-filters button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.task-filters .task-done-toggle {
    font-size: 12px;
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}
.task-filters .task-count {
    font-size: 11px;
    color: var(--text-3);
    margin-left: 4px;
}
.task-table .task-ch-link {
    color: var(--accent, #5865f2);
    cursor: pointer;
    font-size: 12px;
}
.task-table .task-ch-link:hover { text-decoration: underline; }
.task-table .task-overdue {
    color: #ff7676;
    font-weight: 600;
}
.task-table .text-muted { color: var(--text-3); }
.task-table .prio {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
}
.task-table .prio-low    { background: rgba(185,187,190,.2); color: var(--text-2); }
.task-table .prio-medium { background: rgba(88,101,242,.2);  color: #8c9eff; }
.task-table .prio-high   { background: rgba(237,66,69,.2);   color: #ff7676; }
.task-table select {
    background: var(--bg-1);
    border: 1px solid var(--border);
    color: var(--text-0);
    border-radius: 3px;
    padding: 3px 5px;
    font-size: 12px;
}

.reminder-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.reminder-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    padding: 10px;
    background: var(--bg-0);
    border-radius: 5px;
}
.reminder-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--text-2);
    margin-bottom: 4px;
    grid-column: 1 / -1;
}
.reminder-preview {
    grid-column: 1;
    font-size: 13px;
    color: var(--text-0);
    cursor: pointer;
    line-height: 1.4;
}
.reminder-preview:hover { color: var(--accent); }

.dm-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 10px;
    height: 500px;
    max-height: 60vh;
}
.dm-sidebar {
    border-right: 1px solid var(--border);
    padding-right: 8px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dm-new select {
    width: 100%;
    background: var(--bg-0);
    color: var(--text-0);
    border: 1px solid var(--border);
    padding: 7px;
    border-radius: 4px;
    margin-bottom: 8px;
}
.dm-conv-item {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 7px;
    border-radius: 4px;
    cursor: pointer;
}
.dm-conv-item:hover { background: var(--bg-hover); }
.dm-conv-name { font-size: 13px; font-weight: 600; }
.dm-conv-last { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.dm-main {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.dm-messages {
    flex: 1;
    overflow-y: auto;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dm-msg {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 8px;
}
.dm-msg-head {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: var(--text-2);
    margin-bottom: 2px;
}
.dm-msg-head .name { color: var(--text-0); font-weight: 600; }
.dm-msg-content { font-size: 13px; white-space: pre-wrap; }
.dm-compose {
    display: flex;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.dm-compose textarea {
    flex: 1;
    background: var(--bg-0);
    border: 1px solid var(--border);
    color: var(--text-0);
    border-radius: 4px;
    padding: 7px;
    resize: vertical;
    font-size: 13px;
}

.forum-header {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}
.forum-title { flex: 1; font-weight: 600; font-size: 15px; }
.forum-title .channel-desc { margin-left: 8px; font-weight: 400; color: var(--text-2); font-size: 13px; }
.forum-posts {
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.forum-post {
    padding: 12px 14px;
    background: var(--bg-2);
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
}
.forum-post:hover { border-color: var(--border); background: var(--bg-hover); }
.forum-post-title { font-weight: 600; font-size: 14px; margin-bottom: 5px; }
.forum-post-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-2);
}
.forum-post-meta .pill {
    background: var(--bg-0);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
}
.forum-post-detail h3 { margin: 0 0 8px; font-size: 18px; }
.forum-content {
    margin: 12px 0;
    white-space: pre-wrap;
    font-size: 14px;
    line-height: 1.6;
}
.forum-replies {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.forum-reply {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 8px;
    padding: 8px;
    background: var(--bg-0);
    border-radius: 5px;
}
.forum-reply-head { display: flex; gap: 8px; font-size: 12px; color: var(--text-2); margin-bottom: 3px; }
.forum-reply-head .name { color: var(--text-0); font-weight: 600; }
.forum-reply-content { font-size: 13px; white-space: pre-wrap; }

/* 大きめのモーダル（DM・管理など） */
.modal { width: 720px; }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 720px) {
    .app { grid-template-columns: 60px 1fr; }
    .app.with-right { grid-template-columns: 60px 1fr; }
    .right-panel {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: 90vw;
        z-index: 5;
    }
    .logo, .section-label, .quick-links li:not(.icon-only) { display: none; }
    .sidebar-scroll { padding: 4px; }
    .channel-item .hash, .channel-item .name { display: none; }
    .channel-item .ch-badge { position: static; }
}

/* =====================================================
   Notify level / DND indicators
   ===================================================== */
.channel-item.muted { opacity: 0.55; }
.channel-item.muted.active { opacity: 1; }
.ch-mute {
    font-size: 11px;
    color: var(--text-3);
    margin-left: 2px;
}
#dnd-btn.dnd-on {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
}

/* =====================================================
   Context menu (⋯ popup)
   ===================================================== */
.ctx-menu {
    position: fixed;
    z-index: 1100;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
    padding: 4px;
    min-width: 180px;
    user-select: none;
}
.ctx-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-1);
    cursor: pointer;
}
.ctx-item:hover { background: var(--bg-hover); color: var(--text-0); }
.ctx-item.ctx-danger        { color: #ed4245; }
.ctx-item.ctx-danger:hover  { background: #ed4245; color: #fff; }
.ctx-item.ctx-disabled      { opacity: .45; cursor: not-allowed; }
.ctx-icon  { width: 18px; text-align: center; }
.ctx-label { flex: 1; }
.ctx-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 6px;
}

/* =====================================================
   Sidebar drag & drop indicators
   ===================================================== */
.category-name[draggable="true"] { cursor: grab; }
.category-name[draggable="true"]:active { cursor: grabbing; }
.channel-item[draggable="true"]  { cursor: grab; }
.channel-item[draggable="true"]:active { cursor: grabbing; }

.dragging { opacity: 0.4; }

.drop-above { box-shadow: inset 0 2px 0 0 var(--accent, #5865f2); }
.drop-below { box-shadow: inset 0 -2px 0 0 var(--accent, #5865f2); }

.cat-drop-tail {
    height: 6px;
    margin: 0 8px;
    border-radius: 3px;
    transition: background .08s;
}
.cat-drop-tail.drop-into {
    background: var(--accent, #5865f2);
    height: 8px;
}

/* ⋯ ボタン: アクション群と同じ振る舞い（ホバー時のみ表示） */
.cat-more, .ch-more {
    background: transparent;
    color: var(--text-3);
    width: 20px; height: 20px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}
.cat-more:hover, .ch-more:hover {
    color: var(--text-0);
    background: var(--bg-hover);
}

/* =====================================================
   Message highlight (deep-link)
   ===================================================== */
.msg-highlight {
    animation: msgHighlight 2.4s ease-out;
}
@keyframes msgHighlight {
    0%   { background: rgba(255, 213, 79, .35); }
    70%  { background: rgba(255, 213, 79, .25); }
    100% { background: transparent; }
}

/* =====================================================
   @ Mention autocomplete
   ===================================================== */
.mention-popup {
    position: fixed;
    z-index: 1000;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    padding: 4px;
    max-height: 240px;
    overflow: auto;
}
.mention-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-1);
    user-select: none;
}
.mention-item.selected,
.mention-item:hover {
    background: var(--bg-hover);
    color: var(--text-0);
}
.mention-item .mention-icon {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-1); border-radius: 50%;
    font-size: 12px;
}
.mention-item .mention-name { font-weight: 600; }
.mention-item .mention-desc { color: var(--text-3); font-size: 12px; margin-left: auto; }

/* =====================================================
   Calendar (Part B)
   ===================================================== */
.cal-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
    height: 100%;
    overflow: auto;
}
.cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-month { font-size: 18px; font-weight: 600; color: var(--text-0); min-width: 130px; text-align: center; }
.cal-actions { display: flex; gap: 8px; align-items: center; }

.cal-today-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 6px;
    flex-wrap: wrap;
}
.cal-today-label { font-weight: 600; color: var(--text-1); }
.cal-today-empty { color: var(--text-3); font-size: 13px; }
.cal-today-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--bg-2);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}
.cal-today-item:hover { background: var(--bg-hover); }
.cal-today-time { color: var(--text-2); font-variant-numeric: tabular-nums; }

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.cal-dow {
    background: var(--bg-1);
    color: var(--text-2);
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    font-weight: 600;
}
.cal-cell {
    background: var(--bg-2);
    min-height: 92px;
    padding: 4px 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cal-cell:hover { background: var(--bg-hover); }
.cal-cell.cal-other { background: var(--bg-1); color: var(--text-3); }
.cal-cell.cal-today { box-shadow: inset 0 0 0 2px #5865f2; }
.cal-day-num { font-size: 12px; color: var(--text-2); font-weight: 600; }
.cal-cell.cal-today .cal-day-num { color: #5865f2; }
.cal-ev {
    background: #5865f2;
    color: #fff;
    padding: 2px 5px;
    font-size: 11px;
    border-radius: 3px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-ev:hover { filter: brightness(1.1); }
.cal-more { font-size: 11px; color: var(--text-3); }

.cal-detail .cal-when { color: var(--text-1); margin: 4px 0; }
.cal-detail .cal-desc { background: var(--bg-1); padding: 8px; border-radius: 4px; margin: 8px 0; }
.cal-detail .cal-parts { margin: 8px 0; }
.cal-detail .cal-part {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 2px 6px 2px 0;
    padding: 2px 8px;
    background: var(--bg-1);
    border-radius: 12px;
    font-size: 12px;
}
.cal-detail-actions { display: flex; gap: 8px; margin-top: 12px; }