/* Ô dán link ảnh ở hai bước ảnh của thiệp cưới (xem js/gcc-wedding-image-url.js).
   Tách file riêng thay vì nhét vào iphone-chat.css: file đó dựng ô nhập bằng
   !important với selector rất đặc hiệu, sửa trong đó dễ kéo theo mọi bước khác. */

.gcc-chat-shell .gcc-wiu-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 4px;
    width: 100%;
}

.gcc-chat-shell .gcc-wiu-label {
    font-size: 12px;
    font-weight: 600;
    opacity: .75;
}

.gcc-chat-shell .gcc-wiu-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Ô nhập của iphone-chat.css dùng chuỗi :not() rất dài (0,9,1) và !important.
   Muốn thắng phải vừa đặc hiệu hơn vừa !important — đây là lý do có
   .gcc-chat-shell ở đầu mọi selector trong file này. */
.gcc-chat-shell .gcc-wiu-input-wrap input.gcc-wiu-input[type="url"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
}

.gcc-chat-shell .gcc-wiu-thumb {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: rgba(127, 127, 127, .16);
    background-size: cover;
    background-position: center;
    /* Chưa nhập gì thì ô xem trước vẫn chiếm chỗ — hàng không bị nhảy chiều
       ngang lúc ảnh tải xong. */
    border: 1px solid rgba(127, 127, 127, .25);
    /* NHƯNG phải nhìn ra là Ô XEM TRƯỚC, không phải một cái nút.
       Ô vuông đặc, bo góc, cùng cỡ với nút bấm và đứng ngay cạnh ô nhập thì mắt
       đọc nó là nút — người dùng bấm vào rồi không thấy gì xảy ra. Viền nét đứt
       và biểu tượng ảnh mờ bên trong nói rõ "ảnh sẽ hiện ở đây". */
    border-style: dashed;
    background-color: transparent;
    position: relative;
}

/* Biểu tượng khung ảnh, chỉ hiện khi ô còn trống. */
.gcc-chat-shell .gcc-wiu-thumb:not(.is-ok):not(.is-bad)::before {
    content: '';
    position: absolute;
    inset: 9px;
    opacity: .45;
    background: currentColor;
    -webkit-mask: no-repeat center / contain
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>');
    mask: no-repeat center / contain
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>');
}

/* Có ảnh rồi thì trả về viền liền — nét đứt lúc này chỉ là nhiễu. */
.gcc-chat-shell .gcc-wiu-thumb.is-ok,
.gcc-chat-shell .gcc-wiu-thumb.is-bad { border-style: solid; }

.gcc-chat-shell .gcc-wiu-thumb.is-ok  { border-color: #34c759; }
.gcc-chat-shell .gcc-wiu-thumb.is-bad { border-color: #ff3b30; background: rgba(255, 59, 48, .12); }
.gcc-chat-shell .gcc-wiu-thumb.is-bad::after {
    content: '!';
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    color: #ff3b30; font-weight: 700;
}

.gcc-chat-shell .gcc-wiu-hint {
    font-size: 11px;
    opacity: .55;
    line-height: 1.4;
}