/* === NEWS MAIN === */
.news-main {
    max-width: 860px;
    margin: 0 auto;
    margin-top: 2.2rem;
    padding-bottom: 80px;
}
.news-admin-top {
    text-align: right;
    margin-bottom: 18px;
}
.news-admin-btn {
    background: #277ef7;
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 8px 22px;
    font-size: 1.09em;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 8px #1930502c;
    transition: background 0.13s;
}
.news-admin-btn:hover,
.news-admin-btn:focus {
    background: #189cff;
    color: #fff;
}

.news-card {
    background: #202a45;
    border-radius: 16px;
    box-shadow: 0 2px 16px #15204024;
    margin-bottom: 2.6rem;
    padding: 30px 28px 18px 28px;
    position: relative;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.news-title {
    font-size: 2.1rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #7ddaff;
    letter-spacing: 0.2px;
}

.news-meta {
    font-size: 1.03rem;
    color: #b5d7ff;
    margin-bottom: 16px;
    font-weight: 500;
}
.news-lock {
    color: #ffc94c;
    margin-left: 7px;
    font-size: 1.12em;
    vertical-align: middle;
}
.news-edited {
    color: #89aadc;
    font-size: 0.98em;
    margin-left: 10px;
}
.news-img-wrap {
    text-align: left;
    margin: 15px 0 12px 0;
}
.news-image {
    max-width: 93%;
    max-height: 240px;
    border-radius: 11px;
    margin-bottom: 10px;
    box-shadow: 0 2px 7px #12203024;
}
.news-content {
    font-size: 1.15rem;
    margin-bottom: 18px;
    color: #eef4fa;
    line-height: 1.68;
    word-break: break-word;
}

/* === ADMIN TOOLS === */
.news-admin-tools {
    position: absolute;
    top: 17px;
    right: 24px;
    display: flex;
    gap: 9px;
    z-index: 2;
}
.news-admin-tools .news-admin-btn {
    background: #223;
    border: none;
    border-radius: 6px;
    font-size: 1.15em;
    cursor: pointer;
    color: #ffa672;
    padding: 3px 8px;
    transition: background .14s;
}
.news-admin-tools .news-admin-btn:hover { background: #2c415f; color: #fff; }
.news-admin-tools .news-admin-btn.delete { color: #ff6c6c; }

/* === KOMMENTARER === */
.news-comments-section {
    margin-top: 12px;
    background: #18213b;
    border-radius: 11px;
    padding: 20px 15px 18px 15px;
    min-height: 44px;
    box-shadow: 0 1px 8px #17223b12;
}
.news-comments-loading {
    color: #88b;
    font-size: 1.01em;
    padding: 7px 0;
}

.news-comment-thread {
    margin-bottom: 16px;
}
.news-comment-root {
    background: #22315a;
    border-radius: 10px;
    padding: 14px 20px 10px 18px;
    font-size: 1.04rem;
    color: #f6f6f6;
    position: relative;
    box-shadow: 0 1px 6px #121f3029;
    border-left: 5px solid #007bc1;
    margin-left: 5px;
    margin-right: 5px;
}
.news-comment-reply {
    background: #1e2748;
    border-radius: 8px;
    padding: 13px 16px 9px 25px;
    border-left: 5px solid #3ab8ff;
    margin-left: 36px;
    margin-right: 5px;
    font-size: 0.99em;
    box-shadow: 0 1px 5px #1a25371f;
}
.news-comment-meta {
    font-size: 0.99rem;
    color: #9bc0ea;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.news-author {
    font-weight: 700;
    color: #7aceff;
}
.news-comment-date {
    font-size: 0.96em;
    color: #b6cae9;
}
.news-comment-main {
    margin-bottom: 2px;
    background: none;
    box-shadow: none;
    padding: 0;
}
.news-comment-replies {
    margin-left: 0;
    margin-top: 6px;
    border-left: none;
    padding-left: 0;
}
.news-comment-reply-btn {
    color: #5ee4fd;
    font-size: 0.97em;
    margin-left: 3px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0 6px 0 0;
    text-decoration: underline;
    font-weight: 500;
}
.news-comment-reply-btn:hover { text-decoration: none; color: #38bcff;}
.news-comment-delete {
    background: none;
    border: none;
    color: #e36;
    cursor: pointer;
    font-size: 1.13em;
    margin-left: 7px;
    vertical-align: middle;
    padding: 0 3px;
}
.news-comment-delete:hover { color: #e9002d; }

/* === KOMMENTARSFORMULÄR === */
.news-comment-form,
.news-reply-form {
    margin: 9px 0 3px 0;
}
.news-comment-form textarea,
.news-reply-form textarea {
    background: #26395e;
    border: 1.3px solid #335;
    color: #fff;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 1.09rem;
    width: 100%;
    margin-bottom: 7px;
    min-height: 48px;
    box-sizing: border-box;
}
.news-comment-btn {
    background: #089cff;
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 7px 23px;
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background .15s;
}
.news-comment-btn:hover { background: #0076c6; }

/* Login-hint för kommentarer */
.news-login-hint {
    color: #f9d37e;
    font-size: 1.03em;
    margin-top: 10px;
}

/* === MODAL === */
#news-modal-bg {
    position: fixed;
    left:0; top:0; right:0; bottom:0;
    background: #191e29c6;
    z-index: 998;
}
#news-modal {
    position: fixed;
    left: 0; right: 0; top: 0; bottom: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    pointer-events: all;
}
.news-modal-inner {
    background: #232f46;
    border-radius: 17px;
    max-width: 520px;
    width: 98vw;
    margin: 54px auto 0 auto;
    padding: 38px 34px 28px 34px;
    box-shadow: 0 4px 38px #111c3e74;
    pointer-events: all;
    position: relative;
    animation: modalIn .24s cubic-bezier(.44,1.4,.4,.97);
}
@keyframes modalIn {
    from { transform: translateY(100px) scale(0.95); opacity:0; }
    to { transform: translateY(0) scale(1); opacity:1; }
}
.news-modal-inner h2 {
    color: #72eaff;
    margin-top: 0;
    margin-bottom: 18px;
    font-size: 1.35em;
}
.news-close-btn {
    position: absolute;
    top: 12px;
    right: 18px;
    z-index: 100;
    background: #f3424a;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 1.27em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 12px #2809092a;
    transition: background 0.15s;
}
.news-close-btn:hover { background: #c72828; }

.form-group {
    margin-bottom: 17px;
}
.form-group label {
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
    color: #c6ebff;
}
input[type="text"], textarea, input[type="file"] {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #334;
    background: #222b38;
    color: #e9f7ff;
    font-size: 1.08em;
    margin-bottom: 4px;
    box-sizing: border-box;
}
input[type="checkbox"] {
    margin-right:7px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
.news-modal-btn {
    background: #36d0be;
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 26px;
    font-size: 1.13em;
    cursor: pointer;
    transition: background 0.16s;
}
.news-modal-btn:hover { background: #16be9b; }

.btn-row {
    display: flex;
    gap: 16px;
    margin-top: 18px;
    align-items: center;
}

/* === TOAST NOTIFIERING === */
.news-toast {
    position: fixed;
    left: 50%;
    bottom: 48px;
    transform: translateX(-50%) scale(0.95);
    background: #1f3556;
    color: #fff;
    font-size: 1.09em;
    border-radius: 14px;
    padding: 11px 34px 11px 22px;
    min-width: 180px;
    box-shadow: 0 2px 19px #01121a43;
    z-index: 1200;
    opacity: 0;
    pointer-events: none;
    transition: all .22s cubic-bezier(.65,1.4,.35,1);
}
.news-toast.show {
    opacity: 1;
    transform: translateX(-50%) scale(1.00);
    pointer-events: all;
}
.news-toast-success { background: #169c8c; }
.news-toast-error { background: #e54a37; }

@media (max-width: 700px) {
    .news-main { max-width: 100vw; padding: 0 2vw 40px 2vw;}
    .news-card { max-width: 100vw; padding: 13px 2vw 14px 2vw;}
    .news-title { font-size: 1.32em; }
    .news-img-wrap img { max-width: 100%; }
    .news-modal-inner { max-width: 99vw; padding: 14px 4vw 14px 4vw;}
}

/* --- Nyhets-kommentar: mention/highlight-färger --- */

.news-mention {
    color: #3db2ff;
    background: rgba(61,178,255,0.07);
    padding: 1px 5px 1px 4px;
    border-radius: 7px;
    font-weight: 500;
    transition: background 0.2s;
}

.news-mention-me {
    color: #fff;
    background: linear-gradient(90deg,#00d8ff 10%,#0072ff 100%);
    font-weight: 700;
    box-shadow: 0 0 3px #004e7a;
}

.news-mention-everyone {
    color: #ffb600;
    background: #302800;
    border: 1px solid #ffb600;
    font-weight: 700;
}
.news-mention-admin {
    color: #8cf58b;
    background: #1d3d25;
    border: 1px solid #8cf58b;
    font-weight: 700;
}

/* Kommentarbubble när DU är taggad */
.news-comment-tagged-me {
    border-left: 5px solid #3db2ff;
    background: linear-gradient(90deg, #182a3a 93%, #19395a33 100%);
    box-shadow: 0 2px 18px #1920401a;
    animation: tag-pulse 0.6s;
}
@keyframes tag-pulse {
    0% { box-shadow: 0 0 0 #00d8ff00; }
    70% { box-shadow: 0 0 15px #3db2ff55; }
    100% { box-shadow: 0 2px 18px #1920401a; }
}

/* Autocomplete mention-ruta */
.mention-autocomplete-box {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 3px;
    background: #23293c;
    border: 1px solid #324a6e;
    box-shadow: 0 6px 18px #0004;
    z-index: 55;
    border-radius: 8px;
    min-width: 160px;
    max-width: 280px;
    padding: 2px 0;
    font-size: 1em;
}

.mention-suggest-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mention-suggest-list li {
    cursor: pointer;
    padding: 8px 16px 8px 12px;
    border-radius: 6px;
    color: #f2f8ff;
    white-space: nowrap;
    transition: background 0.15s;
    font-weight: 500;
}
.mention-suggest-list li:hover, .mention-suggest-list li:focus {
    background: #195585;
    color: #fff;
}

/* Autosize textarea (smooth, inga ramar) */
.news-comment-form textarea,
.news-reply-form textarea {
    resize: none !important;
    min-height: 36px;
    max-height: 240px;
    overflow-y: auto;
    transition: box-shadow 0.2s;
    border-radius: 8px;
    background: #172438;
    color: #eaf7ff;
    border: 1px solid #28395e;
    box-shadow: 0 1px 4px #131f3335;
    padding: 8px 11px;
    font-size: 1em;
    outline: none;
}

.news-comment-form textarea:focus,
.news-reply-form textarea:focus {
    border: 1.5px solid #3db2ff;
    box-shadow: 0 1px 10px #3db2ff40;
    background: #203354;
}

/* Lite extra spacing för tydlighet */
.news-comment-content {
    margin-bottom: 4px;
    font-size: 1.02em;
}
.news-comment-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .92em;
    color: #aac1d5;
    margin-bottom: 3px;
}
.news-comment-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid #264d7a;
    margin-right: 4px;
    object-fit: cover;
}

.news-login-hint {
    color: #77aaff;
    background: #141f33;
    padding: 8px 15px;
    margin: 12px 0 0 0;
    border-radius: 7px;
    font-size: 1em;
    text-align: center;
    font-weight: 500;
}

.news-comment-form, .news-reply-form {
  position: relative;
}

.news-comment-form textarea,
.news-reply-form textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 14px;
  padding: 10px 42px 10px 14px; /* padding-right för knappen */
  resize: none;
  min-height: 38px;
}

.news-comment-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  outline: none;
  transition: transform 0.1s;
}

.news-comment-btn:active .news-comment-send-icon {
  transform: scale(0.93);
}

.news-comment-send-icon {
  vertical-align: middle;
  width: 26px;
  height: 26px;
  pointer-events: none;
}

.news-comment-input-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: stretch;
}

.news-comment-input-wrap textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 14px;
  padding: 10px 50px 10px 14px; /* extra höger för knappen */
  min-height: 38px;
  resize: none;
  font-size: 1rem;
  line-height: 1.6;
  border: 1px solid #25304b;
  background: #161d2d;
  color: #f2f7ff;
  outline: none;
}

.news-comment-btn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-comment-btn svg {
  width: 28px;
  height: 28px;
  display: block;
  pointer-events: none;
}

.news-comment-btn:active svg {
  transform: scale(0.94);
}

.mention-autocomplete-box {
  position: absolute;
  left: 0;
  top: 110%;
  width: 100%;
  z-index: 99;
}

.news-comment-highlight {
    animation: highlightCommentFlash 2.2s ease;
    box-shadow: 0 0 0 4px #30e3ff90, 0 4px 22px #25e4ff33;
    border-left: 5px solid #3de1ff !important;
    background: linear-gradient(90deg,#242d36 85%,#19d8ff25 100%) !important;
}
@keyframes highlightCommentFlash {
    0% { background: #17f0fd33; box-shadow: 0 0 0 14px #00f9ff88; }
    80% { background: #182a3a; }
    100% { background: inherit; box-shadow: none; }
}

/* Grundkommentar */
.comment {
  background: #1a2535;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px #00000025;
}

/* Svarstråd under en kommentar */
.comment-thread {
  margin-left: 32px;
  border-left: 2px solid #324d6b;
  padding-left: 14px;
  margin-top: 6px;
}

/* Indraget svar */
.comment-reply {
  background: #1c2b40;
  border-radius: 8px;
  margin-top: 6px;
}

/* Highlight när ny kommentar postas */
.comment.highlight {
  animation: flash-bg 2s ease-out;
}

@keyframes flash-bg {
  0%   { background-color: #29415d; }
  100% { background-color: inherit; }
}

@media (max-width: 600px) {
  .comment-thread {
    margin-left: 16px;
    padding-left: 10px;
  }
}

/* === KOMMENTARTRÅDAR === */
.comment-thread {
    margin-left: 36px;
    border-left: 2px solid #29415d;
    padding-left: 12px;
    margin-top: 10px;
}

.comment-thread .comment {
    margin-bottom: 10px;
    background: #1e2b3f;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.96em;
    border-left: 4px solid #2a91ff;
    box-shadow: 0 1px 4px #0000001a;
}

.comment-thread .comment .reply-link,
.comment-thread .comment .delete-link {
    font-size: 0.9em;
}

/* Visa fler-knappar */
.show-more-comments,
.show-more-replies {
    display: inline-block;
    background: #273a52;
    color: #a4ccf4;
    border: 1px solid #345;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.93em;
    cursor: pointer;
    margin-top: 6px;
    margin-bottom: 10px;
    transition: background 0.2s;
}
.show-more-comments:hover,
.show-more-replies:hover {
    background: #2b4a6e;
    color: #fff;
}

/* Grundkommentar */
.comment {
    background: #1a2535;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px #00000025;
}

/* Highlight när ny kommentar postas */
.comment.highlight {
    animation: flash-bg 2s ease-out;
}

@keyframes flash-bg {
    0%   { background-color: #29415d; }
    100% { background-color: inherit; }
}

@media (max-width: 600px) {
  .comment-thread {
    margin-left: 16px;
    padding-left: 10px;
  }
}

.comment-likes {
    cursor: pointer;
    margin-left: 14px;
    color: #36e;
    font-size: 1.01em;
    font-weight: 500;
    display: inline-block;
    position: relative;
    user-select: none;
    transition: color 0.12s;
}
.comment-likes.liked { color: #13c34d; }
.comment-likes .like-emoji { font-size: 1.09em; margin-right: 3px; }
.comment-likes .like-count { font-weight: 600; }
.comment-likes .like-tooltip {
    position: absolute;
    left: 0; top: 120%;
    z-index: 40;
    background: #252f44;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 14px #0004;
    font-size: 0.96em;
    padding: 7px 12px;
    min-width: 110px;
    white-space: nowrap;
    margin-top: 1px;
}
.comment-likes .like-tooltip-extra { color: #ffc44c; font-weight: 500; margin-left: 4px; }

.like-modal-inner {
    background: #232f46;
    border-radius: 17px;
    max-width: 390px;
    width: 98vw;
    margin: 54px auto 0 auto;
    padding: 32px 24px 24px 24px;
    box-shadow: 0 4px 38px #111c3e74;
    position: relative;
    animation: modalIn .24s cubic-bezier(.44,1.4,.4,.97);
}
.like-modal-close {
    position: absolute;
    top: 12px;
    right: 18px;
    z-index: 100;
    background: #f3424a;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 1.09em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.like-modal-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.like-tab {
    padding: 7px 17px;
    background: #212b3a;
    border: none;
    border-radius: 7px;
    font-size: 1.01em;
    cursor: pointer;
    color: #7ddaff;
    font-weight: 500;
}
.like-tab.active, .like-tab:hover {
    background: #3ab8ff;
    color: #fff;
}
.like-modal-list {
    max-height: 310px;
    overflow-y: auto;
}
.like-modal-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
    font-size: 1.07em;
    background: #162240;
    border-radius: 7px;
    padding: 7px 11px;
}
.like-modal-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    margin-right: 6px;
    border: 1px solid #3ab8ff;
    background: #1e3556;
}
.like-modal-emoji { font-size: 1.2em; margin-left: auto; }
.like-modal-empty { color: #999; text-align: center; font-size: 1.08em; margin: 20px 0;}

.mention {
  color: #0a7fcd;
  font-weight: 500;
}
.mention.highlight-me {
  color: #ef8517 !important;
  font-weight: 500;
}

.comment.highlight, .comment-wrapper .highlight {
    background: #fff9e6 !important; /* ljusgul, synlig men stilren */
    transition: background 0.3s;
}

.comment-user-link {
  color: #0a7fcd;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
}
.comment-user-link:hover {
  color: #ef8517;
}

/* === NEWS LÄNK-HOVER: ALLA länkar inom nyheter & kommentarer === */
.news-main a,
.news-main a.mention,
.news-main a.reply-link,
.news-main a.delete-link,
.news-main a.notif-user-link,
.news-main .comment a,
.news-main .news-meta a,
.news-main .news-title a,
.news-main .comment-user-link {
    transition: color 0.16s;
    text-decoration: none;
}

.news-main a:hover,
.news-main a.mention:hover,
.news-main a.reply-link:hover,
.news-main a.delete-link:hover,
.news-main a.notif-user-link:hover,
.news-main .comment a:hover,
.news-main .news-meta a:hover,
.news-main .news-title a:hover,
.news-main .comment-user-link:hover {
    color: #38b6ff !important;
    text-decoration: underline;
}