/* ==========================================================
   matching.css
   ぼやChat Version1.0
   Chat Page Only
========================================================== */

/* ==========================================================
   CSS Variables
========================================================== */

:root {

    /* Color */

    --color-primary: #f47ca5;
    --color-primary-light: #ffd4e3;
    --color-secondary: #ffb56b;

    --color-background: #fffafc;
    --color-surface: #ffffff;

    --color-text: #333333;
    --color-subtext: #777777;

    --color-border: #ececec;

    --color-success: #4caf50;
    --color-warning: #ff9800;
    --color-error: #e53935;

    --color-shadow: rgba(0, 0, 0, 0.08);

    /* Radius */

    --radius-small: 8px;
    --radius-medium: 14px;
    --radius-large: 22px;

    /* Space */

    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;

    /* Font */

    --font-main:
        "Hiragino Sans",
        "Yu Gothic",
        "Meiryo",
        sans-serif;

    /* Animation */

    --transition-fast: 0.15s;
    --transition-normal: 0.25s;

}

/* ==========================================================
   Reset
========================================================== */

*,
*::before,
*::after {

    box-sizing: border-box;

}

html {

    font-size: 16px;
    scroll-behavior: smooth;

}

body {

    margin: 0;
    padding: 0;

    font-family: var(--font-main);

    color: var(--color-text);

    background: var(--color-background);

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;

}

img {

    display: block;
    max-width: 100%;
    height: auto;

}

button,
textarea,
input {

    font: inherit;

}

button {

    cursor: pointer;
    border: none;
    outline: none;

}

textarea {

    resize: none;
    outline: none;

}

a {

    color: inherit;
    text-decoration: none;

}

/* ==========================================================
   Utility
========================================================== */

.hidden {

    display: none !important;

}

/* ==========================================================
   Background
========================================================== */

.background-gradient {

    position: fixed;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            #fffefe 0%,
            #fff5f9 50%,
            #ffeef5 100%
        );

    z-index: -2;

}

.background-wave {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 260px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,190,215,0.35) 0%,
            rgba(255,190,215,0) 70%
        );

    z-index: -1;

}

/* ==========================================================
   Layout
========================================================== */

.matching-container {

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    padding:

        var(--space-lg)
        var(--space-md)
        110px;

    display: flex;

    justify-content: center;
    align-items: flex-start;

    gap: var(--space-lg);

}
/* ==========================================================
   Home Button
========================================================== */

.back-home{

    position:fixed;

    top:24px;

    left:calc(50% - 560px);

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:10px 18px;

    background:rgba(255,255,255,.95);

    border-radius:var(--radius-large);

    box-shadow:0 4px 14px var(--color-shadow);

    color:var(--color-text);

    font-weight:600;

    z-index:300;

}

.back-home:hover{

    background:#ffffff;

}

.back-home:active{

    transform:scale(.97);

}

/* ==========================================================
   Chat Card
========================================================== */

.chat-card{

    width:100%;

    max-width:760px;

    height:calc(100vh - 80px);

    display:flex;

    flex-direction:column;

    background:#ffffff;

    border-radius:24px;

    box-shadow:

        0 8px 30px var(--color-shadow);

    overflow:hidden;

}

/* ==========================================================
   Chat Messages
========================================================== */

.chat-messages{

    flex:1;

    overflow-y:auto;

    padding:var(--space-md);

    background:

        linear-gradient(

            180deg,

            #ffffff,

            #fffafb

        );

}

/* ==========================================================
   Scrollbar
========================================================== */

.chat-messages::-webkit-scrollbar{

    width:8px;

}

.chat-messages::-webkit-scrollbar-thumb{

    background:rgba(244,124,165,.35);

    border-radius:999px;

}

/* ==========================================================
   System Message
========================================================== */

.system-message{

    width:fit-content;

    max-width:90%;

    margin:18px auto;

    padding:10px 18px;

    background:#f8f8f8;

    border-radius:var(--radius-large);

    color:var(--color-subtext);

    font-size:.9rem;

}

/* ==========================================================
   Typing Indicator
========================================================== */

.typing-indicator{

    padding:

        0

        var(--space-md)

        var(--space-sm);

    color:var(--color-subtext);

    font-size:.88rem;

}
/* ==========================================================
   Chat Message
========================================================== */

.message{

    display:flex;

    flex-direction:column;

    margin-bottom:var(--space-sm);

}

.my-message{

    align-items:flex-end;

}

.partner-message{

    align-items:flex-start;

}

.message-bubble{

    max-width:80%;

    padding:

        12px

        16px;

    border-radius:

        var(--radius-large);

    word-break:break-word;

    line-height:1.6;

    white-space:pre-wrap;

    box-shadow:

        0 2px 8px

        var(--color-shadow);

}

.my-message .message-bubble{

    background:

        linear-gradient(

            135deg,

            var(--color-primary),

            var(--color-secondary)

        );

    color:#ffffff;

    border-bottom-right-radius:8px;

}

.partner-message .message-bubble{

    background:#ffffff;

    color:var(--color-text);

    border:

        1px solid

        var(--color-border);

    border-bottom-left-radius:8px;

}

.message-time{

    margin-top:4px;

    font-size:.72rem;

    color:var(--color-subtext);

    user-select:none;

}

.chat-image{

    display:block;

    max-width:280px;

    width:100%;

    height:auto;

    border-radius:

        var(--radius-medium);

    box-shadow:

        0 4px 12px

        var(--color-shadow);

    object-fit:cover;

    cursor:pointer;

}

/* ==========================================================
   Chat Footer
========================================================== */

.chat-footer {

    background: #ffffff;

    border-top: 1px solid var(--color-border);

    padding: var(--space-sm);

}

/* ==========================================================
   Top Buttons
========================================================== */

.footer-buttons {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: var(--space-sm);

    margin-bottom: var(--space-sm);

}

.footer-button {

    min-width: 100px;

    height: 44px;

    padding: 0 var(--space-md);

    border-radius: var(--radius-large);

    background:

        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-secondary)
        );

    color: #ffffff;

    font-weight: bold;

    box-shadow:

        0 4px 12px
        rgba(244,124,165,.25);

    transition:

        background var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);

}

.footer-button:hover {

    filter: brightness(1.05);

}

.footer-button:active {

    transform: scale(.96);

}

.footer-button:disabled {

    background: #d8d8d8;

    color: #999999;

    cursor: not-allowed;

    box-shadow: none;

}

/* ==========================================================
   Message Input Area
========================================================== */

.footer-input {

    display: grid;

    grid-template-columns:

        1fr
        auto;

    gap: var(--space-sm);

    align-items: end;

    position: relative;

}

/* ==========================================================
   Textarea
========================================================== */

.message-input {

    width: 100%;

    min-height: 76px;

    max-height: 140px;

    padding:

        14px
        18px
        28px;

    border:

        2px solid
        var(--color-border);

    border-radius:

        var(--radius-medium);

    background: #ffffff;

    color: var(--color-text);

    line-height: 1.6;

    transition:

        border-color var(--transition-fast),
        box-shadow var(--transition-fast);

}

.message-input:focus {

    border-color:

        var(--color-primary);

    box-shadow:

        0 0 0 4px
        rgba(244,124,165,.12);

}

.message-input::placeholder {

    color:

        #aaaaaa;

}

/* ==========================================================
   Character Counter
========================================================== */

.character-counter {

    position: absolute;

    right: 120px;

    bottom: 10px;

    font-size: .82rem;

    color: var(--color-subtext);

    user-select: none;

}

/* 180文字以上 */

.character-counter.warning {

    color: var(--color-warning);

    font-weight: bold;

}

/* 200文字 */

.character-counter.limit {

    color: var(--color-error);

    font-weight: bold;

}

/* ==========================================================
   Send Button
========================================================== */

.send-button {

    width: 96px;

    height: 76px;

    border-radius: var(--radius-medium);

    background:

        linear-gradient(
            180deg,
            var(--color-primary),
            var(--color-secondary)
        );

    color: #ffffff;

    font-weight: bold;

    box-shadow:

        0 4px 12px
        rgba(244,124,165,.25);

    transition:

        transform var(--transition-fast),
        filter var(--transition-fast);

}

.send-button:hover {

    filter: brightness(1.05);

}

.send-button:active {

    transform: scale(.96);

}

.send-button:disabled {

    background: #d8d8d8;

    color: #999999;

    cursor: not-allowed;

    box-shadow: none;

}
/* ==========================================================
   Sync Bar
========================================================== */

.sync-area {

    margin-top: var(--space-sm);

}

.sync-bar {

    width: 0%;

    height: 4px;

    border-radius: 999px;

    background: linear-gradient(
        90deg,
        var(--color-primary),
        var(--color-secondary)
    );

    transition: width .2s linear;

}

/* ==========================================================
   PC Side Advertisement
========================================================== */

.chat-side-ad {

    width: 300px;

    position: sticky;

    top: 90px;

    align-self: flex-start;

}

#sideAdvertisement {

    width: 100%;

    min-height: 600px;

    background: #ffffff;

    border-radius: var(--radius-large);

    box-shadow:
        0 8px 24px var(--color-shadow);

    overflow: hidden;

}

/* ==========================================================
   Smartphone Bottom Advertisement
========================================================== */

.bottom-advertisement {

    display: none;

    position: fixed;

    left: 0;

    bottom: 0;

    width: 100%;

    background: #ffffff;

    border-top: 1px solid var(--color-border);

    box-shadow:
        0 -4px 18px rgba(0,0,0,.08);

    z-index: 150;

}

#bottomAdvertisement {

    min-height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

}

/* ==========================================================
   Page Footer
========================================================== */

.page-footer {

    text-align: center;

    margin:

        var(--space-lg)
        0;

    font-size: .85rem;

    color: var(--color-subtext);

}

.page-footer a {

    transition: color var(--transition-fast);

}

.page-footer a:hover {

    color: var(--color-primary);

}

.page-footer span {

    margin: 0 8px;

}

/* ==========================================================
   Leave / Finished Modal
========================================================== */

.modal {

    position: fixed;

    inset: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    background:
        rgba(0,0,0,.45);

    z-index: 1000;

}

.modal-box {

    width: min(90%, 460px);

    background: #ffffff;

    border-radius: 24px;

    padding: 32px;

    text-align: center;

    box-shadow:
        0 12px 36px rgba(0,0,0,.18);

    animation: fadeUp .2s ease;

}

.modal-box h2 {

    margin-top: 0;

}

.modal-buttons {

    display: flex;

    gap: var(--space-sm);

    margin-top: var(--space-lg);

}

.modal-buttons button {

    flex: 1;

    height: 46px;

    border-radius: var(--radius-large);

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-secondary)
        );

    color: #ffffff;

    font-weight: bold;

    transition:
        transform var(--transition-fast),
        filter var(--transition-fast);

}

.modal-buttons button:hover {

    filter: brightness(1.05);

}

.modal-buttons button:active {

    transform: scale(.96);

}
/* ==========================================================
   Review Buttons
========================================================== */

.review-area {

    margin-top: var(--space-md);

}

.review-title {

    margin-bottom: var(--space-sm);

    font-weight: bold;

    font-size: 1rem;

}

.review-buttons {

    display: flex;

    gap: var(--space-sm);

    margin-top: var(--space-sm);

}

.review-button {

    flex: 1;

    height: 48px;

    border-radius: var(--radius-large);

    background: #f7f7f7;

    color: var(--color-text);

    border: 2px solid transparent;

    font-weight: bold;

    transition:
        all var(--transition-fast);

}

.review-button:hover {

    background: #ffffff;

    border-color: var(--color-primary);

}

.review-button:active {

    transform: scale(.96);

}

.review-button.selected {

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-secondary)
        );

}

/* ==========================================================
   Report Button
========================================================== */

.report-area {

    margin-top: var(--space-md);

}

.report-button {

    width: 100%;

    height: 46px;

    border-radius: var(--radius-large);

    background: #fafafa;

    border: 1px solid var(--color-border);

    color: var(--color-subtext);

    transition:
        all var(--transition-fast);

}

.report-button:hover {

    background: #ffffff;

    border-color: var(--color-primary);

}

.report-button:active {

    transform: scale(.97);

}

/* ==========================================================
   Finish Advertisement
========================================================== */

.finish-advertisement {

    margin:

        var(--space-lg)
        0;

    min-height: 90px;

    border-radius: var(--radius-medium);

    background: #ffffff;

    border: 1px solid var(--color-border);

    overflow: hidden;

}

/* ==========================================================
   Next Chat Button
========================================================== */

.next-chat-button {

    width: 100%;

    height: 52px;

    border-radius: var(--radius-large);

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-secondary)
        );

    color: #ffffff;

    font-size: 1rem;

    font-weight: bold;

    box-shadow:
        0 6px 18px rgba(244,124,165,.25);

    transition:
        transform var(--transition-fast),
        filter var(--transition-fast);

}

.next-chat-button:hover {

    filter: brightness(1.05);

}

.next-chat-button:active {

    transform: scale(.97);

}

/* ==========================================================
   Connection Lost
========================================================== */

.connection-lost {

    position: fixed;

    left: 50%;

    bottom: 120px;

    transform: translateX(-50%);

    padding:
        14px
        22px;

    border-radius: var(--radius-large);

    background: rgba(40,40,40,.92);

    color: #ffffff;

    font-size: .95rem;

    z-index: 1200;

    animation: fadeUp .25s ease;

}

/* ==========================================================
   Animation
========================================================== */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(12px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}
/* ==========================================================
   Loading Overlay
========================================================== */

.loading-overlay {

    position: fixed;

    inset: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    background: rgba(255,255,255,.88);

    backdrop-filter: blur(2px);

    z-index: 2000;

}

.loading-box {

    width: 320px;

    max-width: 90%;

    padding:

        var(--space-lg);

    background: #ffffff;

    border-radius: 24px;

    text-align: center;

    box-shadow:

        0 12px 30px var(--color-shadow);

}

.loading-spinner {

    width: 56px;

    height: 56px;

    margin: 0 auto var(--space-md);

    border: 5px solid #f4f4f4;

    border-top:

        5px solid

        var(--color-primary);

    border-radius: 50%;

    animation:

        spin 0.9s linear infinite;

}

.loading-text {

    margin: 0;

    color: var(--color-text);

    font-size: 1rem;

    line-height: 1.6;

}

/* ==========================================================
   Audio
========================================================== */

audio {

    display: none;

}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:1024px){

    .matching-container{

        max-width:900px;

        padding:

            var(--space-md);

    }

    .chat-side-ad{

        width:240px;

    }

}

@media (max-width:768px){

    .matching-container{

        display:block;

        max-width:100%;

        padding:

            72px
            var(--space-sm)
            110px;

    }

    .back-home{

        left:16px;

        top:16px;

        transform:none;

    }

    .back-home:active{

        transform:scale(.96);

    }

    .chat-card{

        width:100%;

        height:calc(100vh - 140px);

        border-radius:20px;

    }

    .chat-side-ad{

        display:none;

    }

    .bottom-advertisement{

        display:block;

    }

    .page-footer{

        padding-bottom:90px;

    }

}

@media (max-width:480px){

    .footer-buttons{

        gap:8px;

    }

    .footer-button{

        min-width:auto;

        flex:1;

    }

    .footer-input{

        grid-template-columns:

            1fr
            82px;

    }

    .send-button{

        width:82px;

    }

    .character-counter{

        right:98px;

        font-size:.75rem;

    }

    .review-buttons{

        flex-direction:column;

    }

    .modal-box{

        padding:24px;

    }

}

/* ==========================================================
   Animation
========================================================== */

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}