/* ==============================
   RESET & BASE
============================== */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Yu Gothic', 'Meiryo', sans-serif;
}

/* ==============================
   HEADER
============================== */
.header {
    height: 30vh; min-height:120px;
    background: #1870cf url('../img/AdobeStock_505713214.jpeg') no-repeat center center;
    background-size: cover;
    color: #fff;
    display: flex; align-items: center;
    padding-left: 3vw;
    font-size: 2.18em; font-weight: bold;
    letter-spacing: .05em;
    text-shadow: 0 1.5px 4px #1b4268a0;
    position: relative;
}
.btn-newtweet {
    position: absolute; right: 18px; bottom: 18px;
    background: #2196f3; color: #fff; border: none; border-radius: 6px;
    font-size: 1rem; font-weight: bold; cursor: pointer;
    padding: 8px 14px; gap: 6px;
    box-shadow: 0 1px 6px #76aee988;
    transition: background-color .18s;
}
.btn-newtweet .icon { font-size: 1.4rem; }
.btn-newtweet:hover { background: #198fea; }

/* ==============================
   LAYOUT: CONTAINER & MAIN
============================== */
.container {
    display: flex;
    height: 70vh; min-height: 480px;
}
.main {
    width: 60%; padding: 28px 18px 72px 18px;
    background:#fff;
    overflow-y: auto;
    position: relative;
    max-height: 70vh;
    scroll-behavior: smooth;
}

/* ==============================
   SIDEBAR
============================== */
.sidebar,
.sidebar.right {
    width: 20%; min-width: 150px;
    background: #e4effb;
    padding: 22px 12px; color: #234;
    font-size: 1.06em;
    display: flex; flex-direction: column;
    gap: 1.6em;
    overflow-y: auto; max-height: 70vh;
    transition: transform .23s, opacity .18s;
}
.sidebar.right { background: #f0f5ff; }

.sidebar div { margin-bottom: 1rem; }

/* ==============================
   TWEET BLOCK
============================== */
.tweet-form {
    width: 100%;
    padding: 14px 14px 10px 14px;
    margin-bottom: 22px;
    display: none;
}
.tweet-input-row {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
.tweet-form textarea {
    width: 100%;
    flex: 5;
    min-height: 48px;
    font-size: 1.2rem;
    padding: 8px;
    margin-bottom: 0;
    resize: vertical;
}
.tweet-right-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-end;
}
.tweet-right-block .icon {
    font-size: 2.1em;
    cursor: pointer;
    margin: 3px auto 1px;

}
.tweet-form .tweet-submit {
    background-color: #2196f3;
    color: #fff;
    font-weight: bold; font-size: 1em;
    padding: 6px 22px; border: none; border-radius: 5px;
    cursor: pointer;
    transition: background-color .18s;
    align-self: flex-end;
}
.tweet-form .tweet-submit:hover { background: #106de3; }
#media-preview img, #media-preview video {
    display: block;
    margin: 8px auto 0 auto;
    max-width: 90%;     /* フォーム幅からはみ出さない */
    max-height: 180px;
    border-radius: 7px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    border: 1px solid #e3e3e3;   /* 薄めの枠線 */
    background: #f8fafc;         /* 薄い背景 */
    /* object-fit: contain; を使うとサイズが安定（推奨） */
    object-fit: contain;
}


.tweet-block {
    background: #f8fbff;
    border-radius: 9px;
    margin-bottom: 22px;
    padding: 15px 14px 20px 14px;
    position: relative;
}
.tweet-meta {
    display: flex; align-items: center;
    gap: 12px; margin-bottom: 7px;
    font-size: 0.97em;
}
.tweet-meta .meta-icon {
    font-size: 2rem; color: #bfd;
    margin-right: 2px; vertical-align: middle;
}
.tweet-num {
    font-weight: bold; color: #204c81;
    background: #e5edfb; border-radius: 7px; padding: 2px 8px;
    font-size: .98em;
}
.tweet-date, .tweet-edited {
    color: #7f8ea4; font-size: .97em;
    margin-left: 2px; letter-spacing: .04em;
}
.tweet-edited { color: #e3aa00; }
.tweet-text {
    font-size: 1.08em; color: #233046; line-height: 1.48;
    margin-bottom: 8px; position: relative;
}
.tweet-text, .tweet-text a {
  word-break: break-all;
  overflow-wrap: anywhere;
}


/* ==============================
   TWEET MEDIA & IMAGES
============================== */
.tweet-img { margin: 8px 0 3px 0;}
.tweet-img img { max-width: 80%; min-width: 160px; border-radius: 7px; }

/* ==============================
   ICONS (Tweet Icons, Tooltips)
============================== */
.tweet-icons {
    margin: 8px 0 5px 0; font-size: 0.8rem;
    display: flex; gap: 16px;
    vertical-align: middle;
}
.tweet-icons .icon, .show-more { cursor: pointer; position: relative; }
.tweet-icons .icon {
    color: #888; filter: grayscale(1); opacity: 0.7;
}
.tweet-icons .icon:hover, .show-more:hover { color: #f7a43d;}

.show-more {
    background: none; border: none; color: #2196f3;
    font-weight: bold; font-size: 1em; cursor: pointer;
    margin-top: 4px; margin-right: 9px; position: relative;
}
.show-more:hover .more-tooltip { opacity: 1; }

/* アイコンツールチップ */
.icon-tooltip, .more-tooltip {
    position: absolute; bottom: 110%; left: 50%;
    transform: translateX(-50%);
    background: #232f68; color: #fff; font-size: 0.97em;
    padding: 4px 10px; border-radius: 7px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity .18s;
    z-index: 10;
}
.icon:hover .icon-tooltip, .show-more:hover .more-tooltip { opacity: 1; }

/* いいね・コメント・アイコン色 */
.like-icon[data-count="0"] { color: #aaa; }
.like-icon[data-count]:not([data-count="0"]) {
    color: #c31126; font-weight: bold;
}
/* ==============================
   COMMENT BLOCK
============================== */
.comment-block {
    background: #f2f3fa; border-radius: 7px;
    padding: 11px 12px; margin-top: 6px;
    display: none;
}
.comment-title {
    color: #2052ae; font-weight: 600; font-size: 1.02em;
    margin-bottom: .6em;
}

/* ==============================
   FOOTER
============================== */
.footer {
    position: fixed; left: 0; bottom: 0; width: 60%; min-width: 320px;
    height: 46px; background: rgba(61, 88, 175, 0.98); color: #fff;
    border-radius: 0; z-index: 20; display: flex; align-items: center;
    justify-content: center; gap: 40px; font-size: 1.3em; margin-left: 20%;
    box-shadow: 0 -1px 7px #b2d2f18c;
}
.footer .footer-icon {
    cursor: pointer; font-size: 1.22em; margin: 0 18px;
    transition: color .18s; position: relative;
}
.footer .footer-icon:hover { color: #fbc02d; }
.footer .icon-tooltip {bottom:115%;}

/* ==============================
   RIGHT BOX, SEARCH, BANNERS
============================== */
.right-box {
    background: #fff; border-radius: 7px;
    box-shadow: 0 1px 6px #dbe3f2ab;
    padding: 14px 12px; margin-bottom: 18px;
    display: flex; flex-direction: column; gap: .8em;
}


.search-keyword, .search-no {
    font-size: 0.99em; margin-bottom: 3px; border-radius: 6px;
    border: 1px solid #b5d3f7; padding: 5px 7px; margin-right: 3px;
    background: #f5fbff;
}
.search-fields {display: flex; gap: 8px; flex-wrap: wrap;}
#search-btn {
    background: #2196f3; color: #fff; border: none; border-radius: 5px;
    padding: 5px 18px; font-weight: bold; font-size: 1em; cursor: pointer;
    box-shadow: 0 2px 8px #b5d6f2; margin-right: 7px;
}
#search-btn:hover { background: #106de3;}
.search-result-count { margin-top: 6px; color: #176bb6; font-size: .98em; }

.download-options label, .download-options input { font-size: .99em; }
#dl-btn {
    background: #43ba6a; color: #fff; border: none; border-radius: 5px;
    padding: 5px 15px; font-weight: bold; font-size: 1em; cursor: pointer;
    box-shadow: 0 2px 8px #aadad2; margin-top: 6px; transition: background-color .18s;
}
#dl-btn:hover { background: #339947; }

.link-banners { margin-top: 9px; display: flex; flex-direction: column; gap: 14px;}
.banner-box { height: 64px; border-radius: 9px; display: flex; align-items: center;
    justify-content: center; font-size: 1.17em; font-weight: bold; color: #fff;
    box-shadow: 0 2px 8px #aed3ef44;
}
.banner-1 { background: linear-gradient(90deg,#2187dc 70%,#4de0d1 100%);}
.banner-2 { background: linear-gradient(90deg,#ea9f3d 70%,#f3db49 100%);}
.banner-3 { background: linear-gradient(90deg,#ed43a0 70%,#7873f0 100%);}

/* ==============================
   PAGINATION
============================== */
.pagination {
    display: flex; gap: .7em; margin-top: 12px; justify-content: center; flex-wrap: wrap;
}
.pagination a, .pagination span {
    background: #e4ebfc; color: #2769b3; font-size: 1em; padding: 7px 14px;
    text-decoration: none; border-radius: 5px; border: 1px solid #b2c7e6;
    transition: background-color .17s, color .15s; cursor: pointer;
}
.pagination .active, .pagination a:hover { background: #2196f3; color: #fff; }
.pagination .disabled { background: #d8dfef; color: #aaa; pointer-events: none; }

/* ==============================
   SIDEBAR LINKS
============================== */
.sidebar-links { margin-top:16px; }
.sidebar-links-title { font-weight: bold; color: #1466c8; margin-bottom: 7px; font-size: 1.12em; }
.sidebar-links-list { display: flex; flex-direction: column; gap: 8px; }
.sidebar-links-list a {
    color: #0f468c; background: #f4faff; text-decoration: none;
    border-radius: 5px; padding: 6px 8px; transition: background-color .12s;
}
.sidebar-links-list a:hover { background: #e1ecf8; }

/* ==============================
   RESPONSIVE / MEDIA QUERIES
============================== */
@media (max-width: 1000px) {
    .sidebar { min-width: 90px; }
    .main { padding: 10px 2px 52px 2px; }
}
@media (min-width: 801px) {
  .sidebar.all-in-one {
    display: none !important;
  }
}
@media (max-width: 800px) {
    .container { flex-direction: column; }
    .header { height: 20vh; font-size: 1.5em;}
    .sidebar.left, .sidebar.right { display: none; }
    .sidebar.all-in-one { display: block !important; }
    .main, .footer { width: 100%!important; margin-left: 0!important; }
    .footer { left: 0; }
    .burger { display: flex; }
    .sidebar {
        position: fixed; top: 0; left: 0; height: 100vh; width: 78vw; max-width: 320px;
        background: #e4effb; z-index: 200; box-shadow: 0 2px 20px #13426c33;
        transform: translateX(-105%); opacity: 0; pointer-events: none;
    }
    .sidebar.active {
        transform: translateX(0); opacity: 1; pointer-events: all;
    }
    body.sidebar-open { overflow: hidden; }
    .sidebar-overlay {
        display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
        background: rgba(24,48,80,.34); z-index: 190; transition: .22s;
    }
    .sidebar-overlay.active { display: block; }
    .container { height: auto; min-height: 0;}
}