/* MTGCardsmith native card comments - dark theme to match screen.css
   (body #151a1f, text #e1e1e1, green accent #89c196). Spacing scale 4/8/12/16/24. */

.smith-comments {
    margin-top: 24px;
    max-width: 760px;
    color: #e1e1e1;
    font-family: "Crimson Text", Georgia, serif;
    text-align: left; /* the view.php column has Foundation's .center; force comments left */
}
.smith-comments h3, .smith-comments p, .smith-comments div, .smith-comments li { text-align: left; }
.smith-comments * { box-sizing: border-box; }

.smith-comments-title {
    margin: 0 0 16px;
    color: #f4f1e9;
    font-size: 22px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    padding-bottom: 8px;
}
.smith-comments .smith-cmt-count {
    display: inline-block; min-width: 22px; padding: 0 8px; margin-left: 4px;
    font-family: Arial, sans-serif; font-size: 12px; line-height: 22px; font-weight: 700;
    text-align: center; color: #cfe6d5; background: rgba(137,193,150,.16);
    border-radius: 11px; vertical-align: middle;
}

/* ---------- avatars ---------- */
.cmt-avatar, .smith-cmt-myavatar {
    flex: 0 0 auto;
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-family: Arial, sans-serif; font-weight: 700; font-size: 16px;
    text-transform: uppercase; user-select: none;
}

/* ---------- composer ---------- */
.smith-cmt-form { display: flex; gap: 12px; margin-bottom: 24px; align-items: flex-start; }
.smith-cmt-form .smith-cmt-box { flex: 1 1 auto; min-width: 0; }
.smith-cmt-box,
.smith-cmt-reply-box,
.smith-cmt-edit-box {
    background: #1b2129;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    padding: 8px;
}
.smith-cmt-box:focus-within,
.smith-cmt-reply-box:focus-within,
.smith-cmt-edit-box:focus-within { border-color: rgba(137,193,150,.55); }

.smith-comments textarea {
    width: 100%; box-sizing: border-box; display: block;
    background: transparent; border: 0; outline: none; resize: vertical;
    font-family: "Crimson Text", Georgia, serif; font-size: 16px; line-height: 1.5;
    color: #ececec; min-height: 56px; padding: 4px;
}
.smith-comments textarea::placeholder { color: #7e8893; }

.smith-cmt-toolbar, .smith-cmt-reply-actions, .smith-cmt-edit-actions {
    display: flex; align-items: center; gap: 8px; margin-top: 8px;
}
.smith-cmt-toolbar { justify-content: space-between; }
.smith-cmt-reply-actions, .smith-cmt-edit-actions { justify-content: flex-end; }
.smith-cmt-reply-actions .smith-emoji-btn, .smith-cmt-edit-actions .smith-emoji-btn { margin-right: auto; }

/* buttons */
.smith-cmt-submit, .smith-cmt-reply-send, .smith-cmt-edit-save {
    background: #3e7d52; color: #fff; border: 0; border-radius: 6px;
    padding: 8px 16px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: background .15s ease;
}
.smith-cmt-submit:hover, .smith-cmt-reply-send:hover, .smith-cmt-edit-save:hover { background: #4a945f; color: #fff; }
.smith-cmt-submit:disabled { opacity: .5; cursor: default; }
.smith-cmt-reply-cancel, .smith-cmt-edit-cancel {
    background: none; border: 0; color: #9aa3ad; font-family: Arial, sans-serif;
    font-size: 13px; cursor: pointer; padding: 8px;
}
.smith-cmt-reply-cancel:hover, .smith-cmt-edit-cancel:hover { color: #cfd5db; }

/* emoji */
.smith-emoji-btn {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px; font-size: 18px; line-height: 1; padding: 5px 9px; cursor: pointer;
}
.smith-emoji-btn:hover { background: rgba(255,255,255,.10); }
.smith-emoji-panel {
    position: absolute; z-index: 9999; width: 264px; max-width: calc(100vw - 16px);
    max-height: 188px; overflow-y: auto; box-sizing: border-box;
    background: #232a33; border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,.55); padding: 8px;
    display: none; grid-template-columns: repeat(8, 1fr); gap: 4px;
}
.smith-emoji-panel.open { display: grid; }
.smith-emoji-panel span {
    font-size: 20px; line-height: 1; text-align: center; cursor: pointer;
    border-radius: 6px; padding: 4px 0;
}
.smith-emoji-panel span:hover { background: rgba(255,255,255,.12); }

/* ---------- thread ---------- */
.smith-cmt-thread { margin-top: 8px; }
.cmt-list, .cmt-replies { list-style: none; margin: 0; padding: 0; }
.cmt { padding: 16px 0; border-top: 1px solid rgba(255,255,255,.08); }
.cmt-list > .cmt:first-child { border-top: 0; padding-top: 8px; }

.cmt-row { display: flex; gap: 12px; align-items: flex-start; }
.cmt-main { flex: 1 1 auto; min-width: 0; }

.cmt-head { font-size: 14px; margin-bottom: 4px; line-height: 1.3; }
.cmt-author {
    font-family: Arial, sans-serif; font-weight: 700; font-size: 14px;
    color: #9ed3a9 !important; text-decoration: none;
}
.cmt-author:hover { color: #bfe5c7 !important; text-decoration: underline; }
.cmt-time { color: #828c96; font-size: 12px; margin-left: 8px; font-family: Arial, sans-serif; }
.cmt-edited { color: #6f7882; font-size: 12px; margin-left: 4px; font-family: Arial, sans-serif; }

.cmt-body {
    font-size: 16px; line-height: 1.55; color: #dde1e6;
    word-wrap: break-word; overflow-wrap: anywhere; white-space: normal;
}
.cmt-body a { color: #9ed3a9; text-decoration: underline; }
.cmt-body a:hover { color: #bfe5c7; }

.cmt-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.cmt-actions .cmt-act {
    color: #8b949e !important; font-family: Arial, sans-serif; font-size: 13px;
    text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.cmt-actions .cmt-act:hover { color: #9ed3a9 !important; }
.cmt-actions .cmt-act i { font-size: 12px; }
.cmt-actions .cmt-delete:hover, .cmt-actions .cmt-ban:hover { color: #e08585 !important; }

/* replies (one level) */
.cmt-replies:not(:empty) { margin: 12px 0 0 0; padding-left: 16px; border-left: 2px solid rgba(137,193,150,.25); }
.cmt-replies .cmt { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.06); }
.cmt-replies .cmt:first-child { border-top: 0; padding-top: 0; }
.cmt-replies .cmt-avatar { width: 30px; height: 30px; font-size: 14px; }

/* inline reply / edit boxes */
.smith-cmt-reply-box, .smith-cmt-edit-box { margin-top: 12px; }

/* ---------- notices ---------- */
.smith-cmt-signin, .smith-cmt-notice {
    padding: 12px 16px; border-radius: 8px; font-size: 15px; margin-bottom: 24px;
    font-family: Arial, sans-serif;
}
.smith-cmt-signin { background: rgba(137,193,150,.10); border: 1px solid rgba(137,193,150,.30); color: #cfe0d3; }
.smith-cmt-signin a { color: #9ed3a9; font-weight: 700; text-decoration: none; }
.smith-cmt-signin a:hover { text-decoration: underline; }
.smith-cmt-notice { background: rgba(224,133,133,.10); border: 1px solid rgba(224,133,133,.30); color: #e9bcbc; }
.smith-cmt-empty { color: #828c96; font-size: 15px; padding: 8px 0; font-family: Arial, sans-serif; }

.smith-cmt-msg { font-family: Arial, sans-serif; font-size: 13px; }
.smith-cmt-msg:empty { display: none; } /* no dead space under the buttons until there's a message */
.smith-cmt-form > .smith-cmt-box > .smith-cmt-msg:not(:empty) { margin-top: 8px; }
.smith-cmt-msg.error { color: #e08585; }
.smith-cmt-msg.ok { color: #8fd29c; }

@media (max-width: 767px) {
    .smith-comments { max-width: 100%; }
    .cmt-replies:not(:empty) { padding-left: 12px; }
}